<template>
 <single-demo label="基本输入框">
   <y-input></y-input>
 </single-demo>
</template>

<template>
 <single-demo label="文本输入框">
   <y-input></y-input>
 </single-demo>
 <single-demo label="密码输入框">
   <y-input type="password"></y-input>
 </single-demo>
 <single-demo label="长文本输入框">
   <y-input type="textarea"></y-input>
 </single-demo>
 <single-demo label="自动调整">
   <y-input type="textarea" autosize></y-input>
 </single-demo>
 <single-demo label="自定义">
   <y-input type="textarea" :autosize="autosizeConfig"></y-input>
 </single-demo>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
 name: 'Type',

 setup() {
   const autosizeConfig = reactive({
     minRows: 3,
     maxRows: 6,
   });

   return {
     autosizeConfig,
   };
 },
});
</script>

<template>
 <single-demo label="小尺寸">
   <y-input size="small"></y-input>
 </single-demo>
 <single-demo label="正常尺寸">
   <y-input></y-input>
 </single-demo>
 <single-demo label="大尺寸">
   <y-input size="large"></y-input>
 </single-demo>
</template>

<template>
 <single-demo label="可清除">
   <y-input clearable></y-input>
 </single-demo>
</template>

<template>
 <single-demo label="禁止输入">
   <y-input disabled placeholder="disabled"></y-input>
 </single-demo>
 <single-demo label="只读模式">
   <y-input readonly placeholder="readonly"></y-input>
 </single-demo>
</template>

<template>
 <single-demo label="配置prefix label">
   <y-input prefix-label="UserName"></y-input>
 </single-demo>
 <single-demo label="配置prefix icon">
   <y-input :prefix-icon="MaleIcon"></y-input>
 </single-demo>
 <single-demo label="配置prefix slot">
   <y-input><template v-slot:prefix>用户名</template></y-input>
 </single-demo>
 <single-demo label="配置suffix label">
   <y-input suffix-label="@baidu.com"></y-input>
 </single-demo>
 <single-demo label="配置suffix icon">
   <y-input :suffix-icon="SearchIcon"></y-input>
 </single-demo>
 <single-demo label="配置suffix slot">
   <y-input><template v-slot:suffix>RMB</template></y-input>
 </single-demo>
</template>

<script>
import { defineComponent } from 'vue';
import MaleIcon from './male.svg';
import SearchIcon from './search.svg';

export default defineComponent({
 name: 'PrefixAndSuffix',

 setup() {
   return {
     MaleIcon,
     SearchIcon,
   };
 },
});
</script>

<template>
 <single-demo label="展示输入限制">
   <y-input :maxlength="300" show-word-limit></y-input>
 </single-demo>
 <single-demo label="最多300字符">
   <y-input type="textarea" :maxlength="300" show-word-limit></y-input>
 </single-demo>
</template>

<template>
 <single-demo label="配置error message">
   <y-input error error-message="校验失败，这是提示语句"></y-input>
 </single-demo>
 <single-demo label="配置help text">
   <y-input help-text="这是辅助文案，请在合适的位置使用"></y-input>
 </single-demo>
 <single-demo label="配置help slot">
   <y-input><template v-slot:help>这是辅助文案，请在合适的位置使用</template></y-input>
 </single-demo>
 <single-demo label="配置error message">
   <y-input type="textarea" error error-message="校验失败，这是提示语句"></y-input>
 </single-demo>
 <single-demo label="配置help text">
   <y-input type="textarea" help-text="这是辅助文案，请在合适的位置使用"></y-input>
 </single-demo>
 <single-demo label="配置help slot">
   <y-input type="textarea"><template v-slot:help>这是辅助文案，请在合适的位置使用</template></y-input>
 </single-demo>
</template>

<template>
 <single-demo label="仅输入数字">
   <y-input
     placeholder="Please input number"
     restriction="number">
   </y-input>
 </single-demo>
 <single-demo label="自定义配置">
   <y-input
     placeholder="Please input number"
     restriction-type="value"
     :restriction="restriction">
   </y-input>
 </single-demo>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
 name: "Restriction",

 setup() {
   const restriction = (val) =>{
     return /^.{1,3}$/.test(val);
   };

   return {
     restriction,
   };
 }
});
</script>

<template>
 <single-demo label="基础">
   <y-input v-model="value11" type="numeric"></y-input>
 </single-demo>
 <single-demo label="配置精度">
   <y-input v-model="value12" type="numeric" :precision="2">
     <template v-slot:help>Input tip: value precision is 2</template>
   </y-input>
 </single-demo>
 <single-demo label="配置最值">
   <y-input v-model="value13" type="numeric" :precision="2" :max="99.98" :min="2">
     <template v-slot:help>Input tip: min value: 2, max value: 99.98, precision is 2</template>
   </y-input>
 </single-demo>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
 name: 'Type',

 setup() {
   const state = reactive({
     value11: '',
     value12: '',
     value13: '',
   });

   return toRefs(state);
 },
});
</script>

<template>
 <single-demo label="输入框组合">
   <y-input-group>
     <y-input style="width: 80px"></y-input>
     <y-input style="width: calc(100% - 80px)"></y-input>
   </y-input-group>
 </single-demo>
 <single-demo label="输入框组合">
   <y-input-group>
     <y-input style="width: 40%"></y-input>
     <y-input style="width: 60%"></y-input>
   </y-input-group>
 </single-demo>
</template>