y-design-ssr 0.0.36 → 0.0.38-beta.1

package/libs/component-props.json

@@ -0,0 +1 @@
+{"cell":[{"name":"tag","type":{"name":"keyof HTMLElementTagNameMap"},"defaultValue":{"func":false,"value":"'div'"}},{"name":"title","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"label","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"value","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"size","type":{"name":"Size"},"defaultValue":{"func":false,"value":"Size.Middle"}},{"name":"vertical","type":{"name":"Vertical"},"defaultValue":{"func":false,"value":"Vertical.Middle"}},{"name":"border","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"icon","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"clickable","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"button":[{"name":"tag","type":{"name":"keyof HTMLElementTagNameMap"},"defaultValue":{"func":false,"value":"'button'"}},{"name":"text","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"type","type":{"name":"ButtonType"},"defaultValue":{"func":false,"value":"'primary'"}},{"name":"size","type":{"name":"Size"},"defaultValue":{"func":false,"value":"'middle'"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"shadow","type":{"name":"ButtonShadow"},"defaultValue":{"func":false,"value":"''"}},{"name":"square","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"semicircle","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"radius","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"supplementText","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"block","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"danger","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"count-down":[{"name":"time","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"0"}},{"name":"format","type":{"name":"string"},"defaultValue":{"func":false,"value":"'HH:mm:ss'"}},{"name":"autoStart","tags":{"ignore":[{"description":true,"title":"ignore"}]},"type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"millisecond","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"form":[{"name":"validateFirst","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"scrollToError","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"validateTrigger","type":{"name":"keyof TriggerTypes"},"defaultValue":{"func":false,"value":"'onBlur'"}},{"name":"enterable","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}}],"icon":[{"name":"dot","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"name","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"size","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"info","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"badge","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"color","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"subColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"subBg","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"classPrefix","type":{"name":"string"},"defaultValue":{"func":false,"value":"'y-icon'"}},{"name":"tag","tags":{"ignore":[{"description":true,"title":"ignore"}]},"type":{"name":"keyof HTMLElementTagNameMap"},"defaultValue":{"func":false,"value":"'i'"}}],"empty":[{"name":"type","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"imgUrl","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"title","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"subTitle","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}}],"checkbox":[{"name":"modelValue","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"name","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"size","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"'middle'"}},{"name":"square","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"checkedColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}}],"tab":[{"name":"title","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"name","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"''"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"slider":[{"name":"modelValue","type":{"name":"SliderValue"},"defaultValue":{"func":false,"value":"0"}},{"name":"activeColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"inactiveColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"max","type":{"name":"number"},"defaultValue":{"func":false,"value":"100"}},{"name":"min","type":{"name":"number"},"defaultValue":{"func":false,"value":"0"}},{"name":"buttonBgColor","type":{"name":"string|array"},"defaultValue":{"func":false,"value":"''"}},{"name":"barHeight","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"'2px'"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"showTooltip","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"step","type":{"name":"number"},"defaultValue":{"func":false,"value":"1"}},{"name":"gapColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"gapWidth","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"'2px'"}},{"name":"transitionTime","type":{"name":"number"},"defaultValue":{"func":false,"value":"200"}}],"swipeItem":[{"name":"clonenNode","type":{"name":"object"},"defaultValue":{"func":false,"value":"null"}},{"name":"index","type":{"name":"number"},"defaultValue":{"func":false,"value":"-1"}}],"pullrefresh":[{"name":"pullingText","type":{"name":"string"},"defaultValue":{"func":false,"value":"locale.pulling"}},{"name":"loosingText","type":{"name":"string"},"defaultValue":{"func":false,"value":"locale.loosing"}},{"name":"loadingText","type":{"name":"string"},"defaultValue":{"func":false,"value":"locale.loading"}},{"name":"successText","type":{"name":"string"},"defaultValue":{"func":false,"value":"locale.success"}},{"name":"failedText","type":{"name":"string"},"defaultValue":{"func":false,"value":"locale.failed"}},{"name":"statusHeight","type":{"name":"number"},"defaultValue":{"func":false,"value":"60"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"list":[{"name":"loadingText","type":{"name":"string"},"defaultValue":{"func":false,"value":"'加载中...'"}},{"name":"finishedText","type":{"name":"string"},"defaultValue":{"func":false,"value":"'没有更多了~'"}},{"name":"errorText","type":{"name":"string"},"defaultValue":{"func":false,"value":"'请求失败，点击重新加载'"}},{"name":"height","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"'auto'"}},{"name":"keyName","type":{"name":"string"},"defaultValue":{"func":false,"value":"'_index'"}},{"name":"dataSource","type":{"name":"array"},"defaultValue":{"func":false,"value":"[]"}},{"name":"immediateCheck","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"loadOffset","type":{"name":"number"},"defaultValue":{"func":false,"value":"300"}},{"name":"virtual","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"bufferScale","type":{"name":"number"},"defaultValue":{"func":false,"value":"1"}},{"name":"itemHeight","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"'80'"}},{"name":"dynamicItemHeight","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"switch":[{"name":"size","type":{"name":"Size"},"defaultValue":{"func":false,"value":"null"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"readonly","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"modelValue","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"activeValue","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"true"}},{"name":"inactiveValue","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"activeColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"inactiveColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}}],"progress":[{"name":"percent","type":{"name":"number"},"defaultValue":{"func":false,"value":"0"}},{"name":"strokeWidth","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"radius","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"textColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"color","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"trackColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"pivotColor","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"defaultPivot","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"modeMilestone","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"mileages","type":{"name":"Array<number>"},"defaultValue":{"func":true,"value":"() => [50, 100]"}},{"name":"animation","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"duration","type":{"name":"number"},"defaultValue":{"func":false,"value":"1500"}},{"name":"timing","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"unit","type":{"name":"string"},"defaultValue":{"func":false,"value":"'%'"}}],"col":[{"name":"span","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"0"}},{"name":"offset","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"0"}}],"row":[{"name":"type","type":{"name":"RowType"},"defaultValue":{"func":false,"value":"''"}},{"name":"gutter","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"0"}},{"name":"align","type":{"name":"Vertical"},"defaultValue":{"func":false,"value":"Vertical.Top"}},{"name":"justify","type":{"name":"RowJustify"},"defaultValue":{"func":false,"value":"RowJustify.Start"}}],"input":[{"name":"modelValue","type":{"name":"string|number"},"defaultValue":{"func":false,"value":"''"}},{"name":"type","type":{"name":"string"},"defaultValue":{"func":false,"value":"'text'"}},{"name":"border","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"placeholder","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"size","type":{"name":"keyof Size"},"defaultValue":{"func":false,"value":"null"}},{"name":"align","type":{"name":"keyof Horizontal"},"defaultValue":{"func":false,"value":"null"}},{"name":"autocomplete","type":{"name":"string"},"defaultValue":{"func":false,"value":"'on'"}},{"name":"rows","type":{"name":"number"},"defaultValue":{"func":false,"value":"2"}},{"name":"maxLength","type":{"name":"number"},"defaultValue":{"func":false,"value":"null"}},{"name":"showWordLimit","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"readonly","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"stepper":[{"name":"modelValue","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"null"}},{"name":"placeholder","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"min","type":{"name":"number"},"defaultValue":{"func":false,"value":"1"}},{"name":"step","type":{"name":"number"},"defaultValue":{"func":false,"value":"1"}},{"name":"integer","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"max","type":{"name":"number"},"defaultValue":{"func":false,"value":"Number.MAX_SAFE_INTEGER"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"disableInput","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"inputWidth","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"size","type":{"name":"keyof Size"},"defaultValue":{"func":false,"value":"null"}}],"formItem":[{"name":"label","type":{"name":"number|string"},"defaultValue":{"func":false,"value":"''"}},{"name":"icon","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}},{"name":"prop","type":{"name":"string"},"defaultValue":{"func":false,"value":"''"}}],"title":[{"name":"active","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"scrollable","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}},{"name":"title","type":{"name":"string"},"defaultValue":{"func":false,"value":"null"}},{"name":"titleSlot","type":{"name":"func"},"defaultValue":{"func":false,"value":"null"}},{"name":"disabled","type":{"name":"boolean"},"defaultValue":{"func":false,"value":"false"}}],"popper":[{"name":"reference","type":{"name":"HTMLElement"},"defaultValue":{"func":false,"value":"null"}}]}

package/libs/demo/button.json

@@ -0,0 +1 @@
+[{"name":"按钮类型","nameEn":"Button type","desc":"提供五个基本类型，默认为primary。","descEn":"There are five basic types, the default being primary.","hideInDoc":false,"index":0,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\">primary</y-button>\n  </li>\n  <li>\n    <y-button type=\"secondary\">secondary</y-button>\n  </li>\n  <li>\n    <y-button type=\"tertiary\">tertiary</y-button>\n  </li>\n  <li>\n    <y-button type=\"text\">text</y-button>\n  </li>\n  <li>\n    <y-button type=\"link\">link</y-button>\n  </li>\n</ul>\n"},{"name":"按钮尺寸","nameEn":"Button size","desc":"提供四种尺寸，默认为middle。","descEn":"Available in four sizes, the default is middle.","hideInDoc":false,"index":1,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button size=\"large\">large button</y-button>\n    <y-button size=\"middle\">middle button</y-button>\n    <y-button size=\"small\">small button</y-button>\n    <y-button size=\"mini\">mini button</y-button>\n  </li>\n</ul>\n"},{"name":"图标按钮","nameEn":"Icon button","desc":"通过slot插入Icon，即可在button中显示Icon。","descEn":"The Icon can be displayed in a button by inserting it through slot.","hideInDoc":false,"index":2,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\">\n      primary\n      <template #leftIcon>\n        <y-icon name=\"chat-o\" class=\"slot\" />\n      </template>\n    </y-button>\n  </li>\n  <li>\n    <y-button type=\"secondary\">\n      secondary\n      <template #rightIcon>\n        <y-icon name=\"chat-o\" class=\"slot\" />\n      </template>\n    </y-button>\n  </li>\n  <li>\n    <y-button type=\"tertiary\">\n      tertiary\n      <template #leftIcon>\n        <y-icon name=\"chat-o\" class=\"slot\" />\n      </template>\n    </y-button>\n  </li>\n  <li>\n    <y-button type=\"text\">\n      text\n      <template #rightIcon>\n        <y-icon name=\"chat-o\" class=\"slot\" />\n      </template>\n    </y-button>\n  </li>\n  <li>\n    <y-button type=\"link\">\n      link\n      <template #rightIcon>\n        <y-icon name=\"chat-o\" class=\"slot\" />\n      </template>\n    </y-button>\n  </li>\n</ul>\n"},{"name":"不可用状态","nameEn":"Unavailable state","desc":"按钮的不可用状态。","descEn":"The unavailable state of the button.","hideInDoc":false,"index":3,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\" disabled>primary</y-button>\n  </li>\n  <li>\n    <y-button type=\"secondary\" disabled>secondary</y-button>\n  </li>\n  <li>\n    <y-button type=\"tertiary\" disabled>tertiary</y-button>\n  </li>\n  <li>\n    <y-button type=\"text\" disabled>text</y-button>\n  </li>\n  <li>\n    <y-button type=\"link\" disabled>link</y-button>\n  </li>\n</ul>\n"},{"name":"加载状态","nameEn":"Loading state","desc":"按钮的加载状态。","descEn":"The loading state of the button.","hideInDoc":false,"index":4,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button v-loading=\"true\" type=\"primary\" />\n    <y-button\n      v-loading=\"true\"\n      v-loading-props=\"{\n        text: '加载中',\n        textLocation: 'right',\n      }\"\n      type=\"primary\"\n    />\n  </li>\n  <li>\n    <y-button v-loading=\"true\" type=\"secondary\" />\n    <y-button\n      v-loading=\"true\"\n      v-loading-props=\"{\n        text: '加载中',\n        textLocation: 'right',\n      }\"\n      type=\"secondary\"\n    />\n  </li>\n  <li>\n    <y-button v-loading=\"true\" type=\"tertiary\" />\n    <y-button\n      v-loading=\"true\"\n      v-loading-props=\"{ text: '加载中', textLocation: 'right' }\"\n      type=\"tertiary\"\n    />\n  </li>\n</ul>\n"},{"name":"按钮阴影","nameEn":"Button shadow","desc":"提供三种按钮阴影效果，默认无阴影。","descEn":"Provides three button shadow effects, default without shadow.","hideInDoc":false,"index":5,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\" shadow=\"low\">primary</y-button>\n    <y-button type=\"secondary\" shadow=\"low\">secondary</y-button>\n  </li>\n  <li>\n    <y-button type=\"primary\" shadow=\"middle\">primary</y-button>\n    <y-button type=\"secondary\" shadow=\"middle\">secondary</y-button>\n  </li>\n  <li>\n    <y-button type=\"primary\" shadow=\"high\">primary</y-button>\n    <y-button type=\"secondary\" shadow=\"high\">secondary</y-button>\n  </li>\n</ul>\n"},{"name":"按钮形状","nameEn":"Basic shape","desc":"按钮默认为圆角，额外提供方形和半圆形圆角两种选中。","descEn":"The button defaults to the rounded corner, plus two options of square and semicircular rounded corners are available.","hideInDoc":false,"index":6,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\" square>primary</y-button>\n    <y-button type=\"primary\" semicircle>primary</y-button>\n    <y-button type=\"primary\">primary</y-button>\n  </li>\n  <li>\n    <y-button type=\"secondary\" square>secondary</y-button>\n    <y-button type=\"secondary\" semicircle>secondary</y-button>\n    <y-button type=\"secondary\">secondary</y-button>\n  </li>\n  <li>\n    <y-button type=\"tertiary\" square>tertiary</y-button>\n    <y-button type=\"tertiary\" semicircle>tertiary</y-button>\n    <y-button type=\"tertiary\">tertiary</y-button>\n  </li>\n</ul>\n"},{"name":"自定义圆角","nameEn":"Custom radius","desc":"支持自定义圆角。","descEn":"Support custom rounded corners.","hideInDoc":false,"index":7,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\" radius=\"20px 0px 0px 20px\">primary</y-button>\n    <y-button type=\"secondary\" radius=\"20px 20px 0px 0px\">primary</y-button>\n    <y-button type=\"tertiary\" radius=\"0px 0px 20px 20px\">primary</y-button>\n  </li>\n</ul>\n"},{"name":"组合按钮","nameEn":"Combination of buttons","desc":"通过自定义圆角，可以任意搭配组合。","descEn":"Through the custom rounded corners, you can match any combination.","hideInDoc":false,"index":8,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\" radius=\"20px 0px 0px 20px\">\n      primary button\n    </y-button>\n    <y-button type=\"secondary\" radius=\"0px 20px 20px 0px\">\n      secondary button\n    </y-button>\n  </li>\n  <li class=\"vertical\">\n    <y-button type=\"primary\" radius=\"20px 20px 0px 0px\">\n      primary button\n    </y-button>\n    <y-button type=\"secondary\" radius=\"0px 0px 20px 20px\">\n      secondary button\n    </y-button>\n  </li>\n</ul>\n"},{"name":"block按钮","nameEn":"Block button","desc":"block 属性将使按钮适合其父宽度。","descEn":"The block property will make the button fit its parent width.","hideInDoc":false,"index":9,"code":"\n<y-button type=\"primary\" block>block按钮</y-button>\n"},{"name":"双排文本","nameEn":"Double line text","desc":"传递supplementText可展示双行文本。","descEn":"Passing supplementText shows two - line text cases.","hideInDoc":false,"index":10,"code":"\n<y-button type=\"primary\" block supplement-text=\"副标题\">主标题</y-button>\n"},{"name":"危险状态","nameEn":"Danger state","desc":"按钮的危险状态。","descEn":"The dangerous state of the button.","hideInDoc":false,"index":11,"code":"\n<ul class=\"btn-list\">\n  <li>\n    <y-button type=\"primary\" danger>primary</y-button>\n  </li>\n  <li>\n    <y-button type=\"secondary\" danger>secondary</y-button>\n  </li>\n  <li>\n    <y-button type=\"tertiary\" danger>tertiary</y-button>\n  </li>\n  <li>\n    <y-button type=\"text\" danger>text</y-button>\n  </li>\n  <li>\n    <y-button type=\"link\" danger>link</y-button>\n  </li>\n</ul>\n"}]

package/libs/demo/cell.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"通过设置 name、label、value ，实现简单的单元格","descEn":"通过设置 name、label、value ，实现简单的单元格","hideInDoc":false,"index":0,"code":"\n<y-cell title=\"标题\" value=\"我是内容文案\" />\n<y-cell title=\"标题\" label=\"label\" value=\"我是内容文案\" />\n"},{"name":"大小设置","nameEn":"Icons","desc":"通过使用 size 属性实现 cell 大小限制","descEn":"通过使用 size 属性实现 cell 大小限制","hideInDoc":false,"index":1,"code":"\n<y-cell title=\"标题\" value=\"我是内容文案\" size=\"large\" />\n<y-cell title=\"标题\" value=\"我是内容文案\" size=\"middle\" />\n<y-cell title=\"标题\" value=\"我是内容文案\" size=\"small\" />\n<y-cell title=\"标题\" value=\"我是内容文案\" size=\"mini\" />\n"},{"name":"展示图标","nameEn":"Icons","desc":"通过使用 <em>icon</em> 属性改变右侧icon","descEn":"通过使用 <em>icon</em> 属性改变右侧icon","hideInDoc":false,"index":2,"code":"\n<y-cell title=\"标题\" value=\"我是内容文案\" clickable icon=\"circle-arrow\" />\n<y-cell tag=\"a\" title=\"标题\" value=\"我是内容文案\" clickable />\n"},{"name":"页面导航","nameEn":"Link","desc":"可以通过 href 属性进行 URL 跳转，或通过 to 属性进行路由跳转。","descEn":"可以通过 href 属性进行 URL 跳转，或通过 to 属性进行路由跳转。","hideInDoc":false,"index":3,"code":"\n<y-cell\n  title=\"标题\"\n  label=\"label\"\n  value=\"页面跳转\"\n  href=\"https://m.baidu.com\"\n/>\n<y-cell title=\"标题\" label=\"label\" value=\"路由跳转\" to=\"/mobile/zh-cn/\" />\n"},{"name":"使用插槽","nameEn":"Slots","desc":"如以上用法不能满足你的需求，可以使用插槽来自定义内容。","descEn":"如以上用法不能满足你的需求，可以使用插槽来自定义内容。","hideInDoc":false,"index":4,"code":"\n<y-cell title=\"标题\" label=\"label\">\n  <template #left>\n    <y-icon name=\"gift\" />\n  </template>\n  前往\n  <template #right>\n    <y-icon name=\"circle-arrow\" />\n  </template>\n</y-cell>\n"}]

package/libs/demo/checkbox.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"单个Checkbox用法","descEn":"Single checkbox usage","hideInDoc":false,"index":0,"code":"\n<y-checkbox :model-value=\"checked\" @update:modelValue=\"udpateValue\">\n  Basic Usage\n</y-checkbox>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(false)\n    const udpateValue = () => {\n      checked.value = !checked.value\n    }\n    return {\n      checked,\n      udpateValue,\n    }\n  },\n}\n</script>"},{"name":"复选框组","nameEn":"Checkbox Group","desc":"多个复选框组合控制","descEn":"Checkbox group","hideInDoc":false,"index":1,"code":"\n<y-checkbox-group v-model=\"checked\">\n  <y-checkbox name=\"1\">苹果</y-checkbox>\n  <y-checkbox name=\"2\">橘子</y-checkbox>\n  <y-checkbox name=\"3\">猕猴桃</y-checkbox>\n</y-checkbox-group>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(['1', '2'])\n    return {\n      checked,\n    }\n  },\n}\n</script>"},{"name":"图标大小","nameEn":"Box Size","desc":"图标大小可以传入<em>large</em><em>middle</em><em>small</em>三种类型之一或者传入具体的数值来设置","descEn":"Icon Box size can be set by type<em>large</em><em>middle</em><em>small</em> or specific number","hideInDoc":false,"index":2,"code":"\n<y-checkbox v-model=\"checked\" size=\"large\">Large</y-checkbox>\n<y-checkbox v-model=\"checked\" size=\"middle\">Middle</y-checkbox>\n<y-checkbox v-model=\"checked\" size=\"small\">Small</y-checkbox>\n<y-checkbox v-model=\"checked\" size=\"20px\">20px</y-checkbox>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(false)\n    return {\n      checked,\n    }\n  },\n}\n</script>"},{"name":"图标形状","nameEn":"Box Shape","desc":"设置<em>square</em>为false即可使用圆形复选框","descEn":"Checkbox is round when set <em>square</em> to false","hideInDoc":false,"index":3,"code":"\n<y-checkbox v-model=\"checked\" :square=\"false\">Large</y-checkbox>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(false)\n    return {\n      checked,\n    }\n  },\n}\n</script>"},{"name":"禁用","nameEn":"Disabled","desc":"设置checkboxGroup上的<em>disabled</em>为true, 所有checkbox都会为禁用状态<br/>当然你也可以单独设置某个checkbox的<em>disabled</em>","descEn":"When set  <em>disabled</em> prop of checkboxGroup to true, all checkbox will be disabled.<br/>Of course you can set <em>disabled</em> in single checkbox","hideInDoc":false,"index":4,"code":"\n<y-checkbox-group v-model=\"checked\" disabled>\n  <y-checkbox name=\"1\">苹果</y-checkbox>\n  <y-checkbox name=\"2\">橘子</y-checkbox>\n  <y-checkbox name=\"3\">猕猴桃</y-checkbox>\n</y-checkbox-group>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(['1', '2'])\n    return {\n      checked,\n    }\n  },\n}\n</script>"},{"name":"水平排列","nameEn":"Horizontal","desc":"设置<em>horizontal</em>为true即可","descEn":"Set <em>horizontal</em> to true","hideInDoc":false,"index":5,"code":"\n<y-checkbox-group v-model=\"checked\" horizontal>\n  <y-checkbox name=\"1\">苹果</y-checkbox>\n  <y-checkbox name=\"2\">橘子</y-checkbox>\n  <y-checkbox name=\"3\">猕猴桃</y-checkbox>\n</y-checkbox-group>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(['1', '2'])\n    return {\n      checked,\n    }\n  },\n}\n</script>"},{"name":"全选/反选","nameEn":"Toggle All","desc":"调用<em>toggleAll</em>方法来全选/反选，支持传入boolean参数来决定是全选还是反选","descEn":"Call toggleAll method to toggle all","hideInDoc":false,"index":7,"code":"\n<y-checkbox-group ref=\"checkboxGroup\" v-model=\"checked\">\n  <y-checkbox name=\"1\">苹果</y-checkbox>\n  <y-checkbox name=\"2\">橘子</y-checkbox>\n  <y-checkbox name=\"3\">猕猴桃</y-checkbox>\n</y-checkbox-group>\n<button @click=\"toggleAll\">Toggle All</button>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(['1', '2'])\n    const checkboxGroup = ref()\n\n    const toggleAll = () => {\n      checkboxGroup.value.toggleAll()\n    }\n    return {\n      checked,\n      checkboxGroup,\n      toggleAll,\n    }\n  },\n}\n</script>"},{"name":"自定义图标","nameEn":"Custom icon","desc":"传入<em>icon</em>slot, 即可自定义图标，通过<em>slotProps</em>可以判断是否为选中","descEn":"You can custom icon by passing <em>icon</em>slot, and judge checked status by <em>slotProps</em>","hideInDoc":false,"index":8,"code":"\n<y-checkbox v-model=\"checked\">\n  Custom Icon\n\n  <template #icon=\"props\">\n    <y-icon\n      :name=\"props.checked ? 'sound' : 'mute'\"\n      :color=\"props.checked ? 'green' : 'red'\"\n    />\n  </template>\n</y-checkbox>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked = ref(false)\n    return {\n      checked,\n    }\n  },\n}\n</script>"}]

package/libs/demo/countdown.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"time 属性表示倒计时总时长，单位为毫秒","descEn":"time 属性表示倒计时总时长，单位为毫秒","hideInDoc":false,"index":0,"code":"\n<y-count-down :time=\"30 * 60 * 60 * 100\" format=\"HH:mm:ss\" />\n"},{"name":"毫秒级渲染","nameEn":"","desc":"倒计时默认每秒渲染一次，设置 millisecond 属性可以开启毫秒级渲染","descEn":"","hideInDoc":false,"index":1,"code":"\n<y-count-down millisecond :time=\"30 * 60 * 60 * 100\" format=\"HH:mm:ss:SS\" />\n"},{"name":"自定义样式","nameEn":"Basic Usage","desc":"通过插槽自定义倒计时的样式，timeData 对象格式见右侧文档","descEn":"","hideInDoc":false,"index":2,"code":"\n<y-count-down :time=\"30 * 30 * 60 * 60 * 100\" format=\"HH:mm:ss\">\n  <template #default=\"timeData\">\n    <span class=\"block\">{{ timeData.hours }}</span>\n    <span class=\"colon\">:</span>\n    <span class=\"block\">{{ timeData.minutes }}</span>\n    <span class=\"colon\">:</span>\n    <span class=\"block\">{{ timeData.seconds }}</span>\n  </template>\n</y-count-down>\n"},{"name":"自定义格式","nameEn":"","desc":"通过 format 属性设置倒计时文本的内容","descEn":"","hideInDoc":false,"index":3,"code":"\n<y-count-down :time=\"30 * 60 * 60 * 100\" format=\"DD 天 HH 时 mm 分 ss 秒\" />\n"},{"name":"手动控制","nameEn":"","desc":"通过调用暴露的方法 start、suspend 和 reset 手动控制倒计时","descEn":"","hideInDoc":false,"index":4,"code":"\n<y-count-down\n  ref=\"countDownRef\"\n  millisecond\n  :time=\"30 * 60 * 60 * 100\"\n  :auto-start=\"false\"\n  format=\"DD 天 HH 时 mm 分 ss 秒 SS 毫秒\"\n/>\n<button @click=\"start\">开始</button>\n<button @click=\"suspend\">暂停</button>\n<button @click=\"reset\">重置</button>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  name: 'DemoCountDown',\n  setup() {\n    const countDownRef = ref(null)\n\n    const suspend = () => {\n      countDownRef.value.suspend()\n    }\n    const start = () => {\n      countDownRef.value.start()\n    }\n    const reset = () => {\n      countDownRef.value.reset()\n    }\n    return {\n      countDownRef,\n      suspend,\n      start,\n      reset,\n    }\n  },\n}\n</script>"}]

package/libs/demo/dialog.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":0,"code":"\n<y-button @click=\"toggle1\">show</y-button>\n<y-button @click=\"toggle2\">show</y-button>\n<y-dialog v-model=\"show1\" :title=\"title\" :message=\"message\" />\n<y-dialog v-model=\"show2\" :title=\"title\">\n  <img\n    src=\"https://imgservices-1252317822.image.myqcloud.com/image/20200928/kfp4ni6l8m.png\"\n  />\n</y-dialog>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'DialogBasicDemo',\n  setup() {\n    const show1 = ref(false)\n    const toggle1 = () => {\n      show1.value = !show1.value\n    }\n    const show2 = ref(false)\n    const toggle2 = () => {\n      show2.value = !show2.value\n    }\n    const title = ref('大标题')\n    const message = ref('非常长，长到令人发指的需要换行的说明文字你见过吗')\n    return { show1, toggle1, show2, toggle2, title, message }\n  },\n})\n</script>"},{"name":"对齐方式","nameEn":"alignment","desc":"可自定义文本内容及对齐方式","descEn":"Customize text content and alignment","hideInDoc":false,"index":1,"code":"\n<y-button @click=\"toggle1\">left</y-button>\n<y-button @click=\"toggle2\">center</y-button>\n<y-button @click=\"toggle3\">right</y-button>\n<y-dialog\n  v-model=\"show1\"\n  :title=\"title\"\n  :message=\"message\"\n  message-align=\"left\"\n/>\n<y-dialog\n  v-model=\"show2\"\n  :title=\"title\"\n  :message=\"message\"\n  message-align=\"center\"\n/>\n<y-dialog\n  v-model=\"show3\"\n  :title=\"title\"\n  :message=\"message\"\n  message-align=\"right\"\n/>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'DialogAlignDemo',\n  setup() {\n    const show1 = ref(false)\n    const toggle1 = () => {\n      show1.value = !show1.value\n    }\n    const show2 = ref(false)\n    const toggle2 = () => {\n      show2.value = !show2.value\n    }\n    const show3 = ref(false)\n    const toggle3 = () => {\n      show3.value = !show3.value\n    }\n    const title = ref('大标题')\n    const message = ref('非常长，长到令人发指的需要换行的说明文字你见过吗')\n    return { show1, toggle1, show2, toggle2, show3, toggle3, title, message }\n  },\n})\n</script>"},{"name":"配置按钮","nameEn":"Custom Button","desc":"可配置不同按钮或不配置按钮","descEn":"Different buttons can be configured or not configured","hideInDoc":false,"index":2,"code":"\n<y-button @click=\"toggle1\">confirm</y-button>\n<y-button @click=\"toggle2\">confirm cancel</y-button>\n<y-dialog\n  v-model=\"show1\"\n  :title=\"title\"\n  :message=\"message\"\n  show-cancel-btn\n/>\n<y-dialog\n  v-model=\"show2\"\n  :title=\"title\"\n  :message=\"message\"\n  show-cancel-btn\n  show-confirm-btn\n/>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'DialogBottomBtnDemo',\n  setup() {\n    const show1 = ref(false)\n    const toggle1 = () => {\n      show1.value = !show1.value\n    }\n    const show2 = ref(false)\n    const toggle2 = () => {\n      show2.value = !show2.value\n    }\n    const title = ref('大标题')\n    const message = ref('非常长，长到令人发指的需要换行的说明文字你见过吗')\n    return { show1, toggle1, show2, toggle2, title, message }\n  },\n})\n</script>"},{"name":"关闭按钮","nameEn":"Close Icon","desc":"可根据场景选择是否显示关闭按钮","descEn":"The close icon can be optionally displayed depending on the scene","hideInDoc":false,"index":3,"code":"\n<y-button @click=\"toggle\">close icon</y-button>\n<y-dialog\n  v-model=\"show\"\n  :title=\"title\"\n  :message=\"message\"\n  show-close-icon\n/>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'DialogCloseDemo',\n  setup() {\n    const show = ref(false)\n    const toggle = () => {\n      show.value = !show.value\n    }\n    const title = ref('大标题')\n    const message = ref('非常长，长到令人发指的需要换行的说明文字你见过吗')\n    return { show, toggle, title, message }\n  },\n})\n</script>"},{"name":"图片","nameEn":"Image","desc":"可选择配置图片的位置和样式","descEn":"Optionally configure the position and style of the image","hideInDoc":false,"index":4,"code":"\n<y-button @click=\"toggle1\">image</y-button>\n<y-button @click=\"toggle2\">circle image</y-button>\n<y-dialog\n  v-model=\"show1\"\n  :title=\"title\"\n  :message=\"message\"\n  img-src=\"https://imgservices-1252317822.image.myqcloud.com/image/20210413/22fxvzeh7a.jpg\"\n/>\n<y-dialog\n  v-model=\"show2\"\n  :title=\"title\"\n  :message=\"message\"\n  circle-img\n  img-src=\"https://imgservices-1252317822.image.myqcloud.com/image/20210413/22fxvzeh7a.jpg\"\n/>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'DialogCloseDemo',\n  setup() {\n    const show1 = ref(false)\n    const toggle1 = () => {\n      show1.value = !show1.value\n    }\n    const show2 = ref(false)\n    const toggle2 = () => {\n      show2.value = !show2.value\n    }\n    const title = ref('大标题')\n    const message = ref('非常长，长到令人发指的需要换行的说明文字你见过吗')\n    return { show1, toggle1, show2, toggle2, title, message }\n  },\n})\n</script>"},{"name":"功能集合","nameEn":"Functionality Set","desc":"可查看各功能集合,包括函数调用、异步关闭等","descEn":"A collection of features can be viewed，includes function calls, asynchronous shutdowns, and so on","hideInDoc":false,"index":5,"code":"\n<y-button @click=\"toggle1\">function call</y-button>\n<y-button @click=\"toggle2\">asynchronous shutdowns</y-button>\n\n<script>\nimport { defineComponent, inject } from 'vue'\n\nexport default defineComponent({\n  name: 'DialogCloseDemo',\n  setup() {\n    const title = '大标题'\n    const message = '非常长，长到令人发指的需要换行的说明文字你见过吗'\n    const createDialog = inject('dialog')\n    const toggle1 = () => {\n      createDialog({\n        title,\n        message,\n        imgSrc:\n          'https://imgservices-1252317822.image.myqcloud.com/image/20210413/22fxvzeh7a.jpg',\n      })\n      createDialog({\n        title: `${title}23123`,\n        message,\n      })\n    }\n    const toggle2 = () => {\n      createDialog({\n        title,\n        message,\n        showCancelBtn: true,\n        showConfirmBtn: true,\n        beforeClose: (actionType) => {\n          return new Promise((resolve) => {\n            setTimeout(() => resolve(actionType === 'confirm'), 2000)\n          })\n        },\n      })\n    }\n    return { toggle1, toggle2 }\n  },\n})\n</script>"}]

package/libs/demo/empty.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"通过设置标题，描述，图片，显示对应空状态","descEn":"通过设置标题，描述，图片，显示对应空状态","hideInDoc":false,"index":0,"code":"\n<y-empty\n  img-url=\"https://imgservices-1252317822.image.myqcloud.com/image/20200820/q4wu13xxky.png\"\n  title=\"标题\"\n  sub-title=\"副标题\"\n/>\n"},{"name":"插槽用法","nameEn":"Slots","desc":"通过使用插槽，自定义部分空态样式","descEn":"通过使用插槽，自定义部分空态样式","hideInDoc":false,"index":1,"code":"\n<y-empty title=\"标题\" sub-title=\"副标题\">\n  <template #img>\n    <y-icon name=\"qidian\" size=\"64\" color=\"#AAAAAA\" />\n  </template>\n</y-empty>\n"},{"name":"添加自定义类型","nameEn":"add Types","desc":"通过 empty 方法设置全局 empty 类型, 进行初始化，方便项目之后使用，如上述引用时方式","descEn":"通过 empty 方法设置全局 empty 类型, 进行初始化，方便项目之后使用，如上述引用时方式","hideInDoc":false,"index":2,"code":"\n<y-empty type=\"Defualt\" />\n<y-empty type=\"Comment\" />\n<y-empty type=\"Error\" />\n\n<script>\nimport { defineComponent } from 'vue'\nimport { empty } from 'packages/empty'\n\n// 通过 empty 方法设置全局 Empty 类型, 进行初始化\nempty.add('Defualt', {\n  imgUrl:\n    'https://imgservices-1252317822.image.myqcloud.com/image/20200820/q4wu13xxky.png',\n  title: '暂无数据～',\n})\nempty.add('Comment', {\n  imgUrl:\n    'https://imgservices-1252317822.image.myqcloud.com/image/20200820/zgli2mt9qx.png',\n  title: '暂无评论',\n})\nempty.add('Error', {\n  imgUrl:\n    'https://imgservices-1252317822.image.myqcloud.com/image/20200820/tby2kgjulf.png',\n  title: '网络异常',\n  titleIconSlot: () => <y-icon name='info' />,\n})\n\nexport default defineComponent({})\n</script>"}]

package/libs/demo/form.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"在表单中，每个 FormItem 组件 代表一个表单项，使用 FormItem 的 rules 属性定义校验规则, 也可以在 Form 上直接定义 rules;","descEn":"在表单中，每个 FormItem 组件 代表一个表单项，使用 FormItem 的 rules 属性定义校验规则, 也可以在 Form 上直接定义 rules;","hideInDoc":false,"index":0,"code":"\n<y-form\n  :rules=\"{\n    name: [{ required: true, message: '请输入内容', trigger: 'onChange' }],\n  }\"\n  label-width=\"80px\"\n  @submit=\"onSubmit\"\n  @failed=\"onFailed\"\n>\n  <y-form-item label=\"姓名\" prop=\"name\">\n    <y-input v-model=\"name\" placeholder=\"请输入你的姓名\" />\n  </y-form-item>\n  <y-form-item\n    label=\"密码\"\n    prop=\"password\"\n    :rules=\"[{ required: true, message: '请输入数字' }]\"\n  >\n    <y-input v-model=\"password\" type=\"password\" placeholder=\"请输入密码\" />\n    <template #extra>\n      <y-icon name=\"unlock\" size=\"24\" />\n    </template>\n  </y-form-item>\n  <y-form-item\n    label=\"数量\"\n    prop=\"number\"\n    :rules=\"[{ required: true, message: '请选择数量' }]\"\n  >\n    <y-stepper v-model.number=\"number\" />\n  </y-form-item>\n  <y-form-item\n    label=\"勾选\"\n    prop=\"checked\"\n    :rules=\"[{ required: true, message: '必须勾选' }]\"\n  >\n    <y-checkbox v-model=\"checked\">Basic Usage</y-checkbox>\n  </y-form-item>\n  <y-form-item\n    label=\"勾选\"\n    prop=\"checkedList\"\n    :rules=\"[{ required: true, message: '必须勾选' }]\"\n  >\n    <y-checkbox-group v-model=\"checkedList\">\n      <y-checkbox name=\"1\">苹果</y-checkbox>\n      <y-checkbox name=\"2\">橘子</y-checkbox>\n      <y-checkbox name=\"3\">猕猴桃</y-checkbox>\n    </y-checkbox-group>\n  </y-form-item>\n  <y-button\n    native-type=\"submit\"\n    block\n    type=\"primary\"\n    style=\"margin-top: 16px\"\n  >\n    submit\n  </y-button>\n</y-form>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'FormBasicDemo',\n  setup() {\n    const name = ref('')\n    const password = ref('')\n    const number = ref(1)\n    const checked = ref(false)\n    const checkedList = ref([])\n    const onSubmit = () => null\n    const onFailed = () => null\n    return {\n      name,\n      password,\n      number,\n      checked,\n      checkedList,\n      onSubmit,\n      onFailed,\n    }\n  },\n})\n</script>"},{"name":"校验规则","nameEn":"Rules","desc":"通过rules定义表单校验规则，可用字段见下方表格；","descEn":"通过rules定义表单校验规则，可用字段见下方表格；","hideInDoc":false,"index":1,"code":"\n<y-form\n  label-width=\"80px\"\n  validate-trigger=\"onChange\"\n  @submit=\"onSubmit\"\n  @failed=\"onFailed\"\n>\n  <y-form-item\n    label=\"文本\"\n    prop=\"patternVal\"\n    :rules=\"[{ required: true, pattern: /^[0-9]*$/, message: '输入数字' }]\"\n  >\n    <y-input v-model=\"patternVal\" placeholder=\"正则校验\" />\n  </y-form-item>\n  <y-form-item\n    label=\"文本\"\n    :rules=\"[\n      { required: true, validator, message: '请输入1开头，11位的数字' },\n    ]\"\n    prop=\"validatorVal\"\n  >\n    <y-input v-model=\"validatorVal\" placeholder=\"函数校验\" />\n  </y-form-item>\n  <y-form-item\n    label=\"文本\"\n    :rules=\"{\n      trigger: 'onBlur',\n      validator: asyncValidator,\n      message: '请输入6位数字',\n    }\"\n    prop=\"asyncValidatorVal\"\n  >\n    <y-input\n      v-model=\"asyncValidatorVal\"\n      type=\"textarea\"\n      placeholder=\"异步函数校验\"\n      :max-length=\"50\"\n      show-word-limit\n    />\n  </y-form-item>\n  <y-button\n    native-type=\"submit\"\n    block\n    type=\"primary\"\n    style=\"margin-top: 16px\"\n  >\n    submit\n  </y-button>\n</y-form>\n\n<script>\nimport { defineComponent, ref, inject } from 'vue'\n\nexport default defineComponent({\n  name: 'FormRulesDemo',\n  setup() {\n    const $loading = inject('loading')\n    const patternVal = ref('')\n    const validatorVal = ref('')\n    const asyncValidatorVal = ref('')\n\n    const onSubmit = (value) => {\n      // eslint-disable-next-line no-console\n      console.log('submit', value)\n    }\n    const onFailed = (value) => {\n      // eslint-disable-next-line no-console\n      console.log('failed', value)\n    }\n    const validator = (value) => {\n      return /^1\\d{10}$/.test(value)\n    }\n    const asyncValidator = (value) => {\n      $loading.show({\n        bgColor: '#333',\n        padding: '16px',\n      })\n      return new Promise((resolve) => {\n        setTimeout(() => {\n          resolve(/^\\d{6}$/.test(value))\n          $loading.hide()\n        }, 2000)\n      })\n    }\n\n    return {\n      patternVal,\n      validatorVal,\n      asyncValidatorVal,\n      onSubmit,\n      onFailed,\n      validator,\n      asyncValidator,\n    }\n  },\n})\n</script>"},{"name":"大小设置","nameEn":"Size","desc":"通过 <em>size</em> 属性可以设置 FormItem 的大小，值为 <em>mini</em> <em>small</em> <em>middle</em> <em>large</em>，默认 <em>middle</em>。","descEn":"通过 <em>size</em> 属性可以设置 FormItem 的大小，值为 <em>mini</em> <em>small</em> <em>middle</em> <em>large</em>，默认 <em>middle</em>。","hideInDoc":false,"index":2,"code":"\n<y-form label-width=\"80px\" size=\"small\">\n  <y-form-item label=\"文本\" size=\"mini\">\n    <y-input placeholder=\"请输入\" />\n  </y-form-item>\n  <y-form-item label=\"文本\">\n    <y-input placeholder=\"请输入\" />\n  </y-form-item>\n  <y-form-item label=\"文本\" size=\"middle\">\n    <y-input placeholder=\"请输入\" />\n  </y-form-item>\n  <y-form-item label=\"文本\" size=\"large\">\n    <y-input placeholder=\"请输入\" />\n  </y-form-item>\n</y-form>\n"}]

package/libs/demo/icon.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"Icon 的 name 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例","descEn":"Icon 的 name 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例","hideInDoc":false,"index":0,"code":"\n<ul class=\"icon-list\">\n  <li><y-icon name=\"chat-o\" /></li>\n  <li>\n    <y-icon\n      name=\"https://imgservices-1252317822.image.myqcloud.com/image/20201028/8d8vhvrxq6.png\"\n    />\n  </li>\n</ul>\n"},{"name":"徽章提示","nameEn":"Badge Notice","desc":"设置 <em>dot</em> 属性后，会在图标右上角展示一个小红点。设置 badge 属性后，会在图标右上角展示相应的徽标","descEn":"设置 dot 属性后，会在图标右上角展示一个小红点。设置 badge 属性后，会在图标右上角展示相应的徽标","hideInDoc":false,"index":1,"code":"\n<ul class=\"icon-list\">\n  <li><y-icon name=\"chat-o\" dot /></li>\n  <li><y-icon name=\"user\" badge=\"9\" /></li>\n  <li><y-icon name=\"user\" badge=\"99+\" /></li>\n</ul>\n"},{"name":"图标颜色","nameEn":"Icon Color","desc":"Icon 的 color属性用来设置图标的颜色","descEn":"Icon 的 color属性用来设置图标的颜色","hideInDoc":false,"index":2,"code":"\n<ul class=\"icon-list\">\n  <li><y-icon name=\"user\" color=\"#07c160\" /></li>\n  <li><y-icon name=\"chat-o\" color=\"#1989fa\" /></li>\n</ul>\n"},{"name":"图标大小","nameEn":"Icon size","desc":"Icon 的 size 属性用来设置图标的尺寸大小，支持传入数字或字符串","descEn":"Icon 的 size 属性用来设置图标的尺寸大小，支持传入数字或字符串","hideInDoc":false,"index":3,"code":"\n<ul class=\"icon-list\">\n  <li><y-icon name=\"user\" size=\"40\" /></li>\n  <li>\n    <y-icon\n      name=\"https://imgservices-1252317822.image.myqcloud.com/image/20201028/8d8vhvrxq6.png\"\n      size=\"24px\"\n    />\n  </li>\n</ul>\n"}]

package/libs/demo/input.json

@@ -0,0 +1 @@
+[{"name":"大小设置","nameEn":"Size","desc":"通过 <em>size</em> 属性可以设置 input 的大小，值为 <em>mini</em> <em>small</em> <em>middle</em> <em>large</em>，默认 <em>middle</em>。","descEn":"通过 <em>size</em> 属性可以设置 input 的大小，值为 <em>mini</em> <em>small</em> <em>middle</em> <em>large</em>，默认 <em>middle</em>。","hideInDoc":false,"index":0,"code":"\n<y-input v-model=\"val\" border size=\"mini\" placeholder=\"请输入用户名\" />\n<y-input v-model=\"val\" border size=\"small\" placeholder=\"请输入用户名\" />\n<y-input v-model=\"val\" border placeholder=\"请输入用户名\" />\n<y-input v-model=\"val\" border size=\"large\" placeholder=\"请输入用户名\" />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'InputSizeDemo',\n  setup() {\n    const val = ref('我是一个文案')\n    return {\n      val,\n    }\n  },\n})\n</script>"},{"name":"基础用法","nameEn":"Basic Usage","desc":"可以通过 v-model 双向绑定输入框的值，通过 placeholder 设置占位提示文字。","descEn":"可以通过 v-model 双向绑定输入框的值，通过 placeholder 设置占位提示文字。","hideInDoc":false,"index":0,"code":"\n<y-input v-model=\"name\" border placeholder=\"给你的点点圈起个好名字\" />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'InputBasicDemo',\n  setup() {\n    const name = ref('我是一个name')\n    return {\n      name,\n    }\n  },\n})\n</script>"},{"name":"类型支持","nameEn":"Type Usage","desc":"支持 input 所有支持的 原生类型，以及 <em>textarea</em> 类型, 当为 <em>textarea</em> 时， input 变成 textarea","descEn":"支持 input 所有支持的 原生类型，以及 <em>textarea</em> 类型, 当为 <em>textarea</em> 时， input 变成 textarea","hideInDoc":false,"index":2,"code":"\n<y-input\n  v-model=\"len\"\n  type=\"number\"\n  border\n  placeholder=\"输入限制字符长度\"\n/>\n<y-input\n  v-model=\"val\"\n  border\n  placeholder=\"给你的点点圈起个好名字\"\n  show-word-limit\n  :max-length=\"Number(len)\"\n/>\n<y-input\n  v-model=\"val\"\n  border\n  placeholder=\"给你的点点圈起个好名字\"\n  type=\"textarea\"\n  show-word-limit\n  :rows=\"3\"\n  :max-length=\"Number(len)\"\n/>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'InputTypesDemo',\n  setup() {\n    const val = ref('我是一个文案')\n    const len = ref(10)\n    return {\n      val,\n      len,\n    }\n  },\n})\n</script>"},{"name":"禁用 && 只读 状态","nameEn":"Status Usage","desc":"通过设置 disabled 展示 input 禁用状态；设置 read-only 设置只读状态;","descEn":"通过设置 disabled 展示 input 禁用状态；设置 read-only 设置只读状态;","hideInDoc":false,"index":2,"code":"\n<y-input v-model=\"val\" border disabled placeholder=\"禁用状态\" />\n<y-input v-model=\"val\" border readonly placeholder=\"请输入用户名\" />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'InputStatusDemo',\n  setup() {\n    const val = ref('我是一个文案')\n    return {\n      val,\n    }\n  },\n})\n</script>"}]

package/libs/demo/layout.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"Layout 组件提供了 24列栅格，通过在 Col 上添加 span 属性设置列所占的宽度百分比。此外，添加 offset 属性可以设置列的偏移宽度，计算方式与 span 相同。","descEn":"Layout 组件提供了 24列栅格，通过在 Col 上添加 span 属性设置列所占的宽度百分比。此外，添加 offset 属性可以设置列的偏移宽度，计算方式与 span 相同。","hideInDoc":false,"index":0,"code":"\n<y-row :gutter=\"8\">\n  <y-col span=\"8\">span: 8</y-col>\n  <y-col span=\"8\">span: 8</y-col>\n  <y-col span=\"8\">span: 8</y-col>\n</y-row>\n<y-row>\n  <y-col span=\"4\">span: 4</y-col>\n  <y-col offset=\"4\" span=\"10\">offset: 4, span: 10</y-col>\n</y-row>\n<y-row>\n  <y-col offset=\"6\" span=\"12\">offset: 6, span: 12</y-col>\n</y-row>\n"},{"name":"设置列元素间距","nameEn":"Gutter","desc":"通过 gutter 属性可以设置列元素之间的间距，默认间距为 0","descEn":"通过 gutter 属性可以设置列元素之间的间距，默认间距为 0","hideInDoc":false,"index":1,"code":"\n<y-row gutter=\"20\">\n  <y-col span=\"8\">span: 8</y-col>\n  <y-col span=\"8\">span: 8</y-col>\n  <y-col span=\"8\">span: 8</y-col>\n</y-row>\n"},{"name":"Flex 布局","nameEn":"Flex","desc":"将 type 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐","descEn":"将 type 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐","hideInDoc":false,"index":2,"code":"\n<!-- 左对齐 -->\n<y-row type=\"flex\">\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n</y-row>\n\n<!-- 居中 -->\n<y-row type=\"flex\" justify=\"center\">\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n</y-row>\n\n<!-- 右对齐 -->\n<y-row type=\"flex\" justify=\"end\">\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n</y-row>\n\n<!-- 两端对齐 -->\n<y-row type=\"flex\" justify=\"space-between\">\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n</y-row>\n\n<!-- 每个元素的两侧间隔相等 -->\n<y-row type=\"flex\" justify=\"space-around\">\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n  <y-col span=\"6\">span: 6</y-col>\n</y-row>\n"}]

package/libs/demo/list.json

@@ -0,0 +1 @@
+[{"name":"虚拟列表","nameEn":"Virtual Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":0,"code":"\n<y-list\n  :data-source=\"listRef\"\n  height=\"600px\"\n  virtual\n  dynamic-item-height\n  item-height=\"80\"\n  @load=\"onLoad\"\n>\n  <template #default=\"slotProps\">\n    <div className=\"demo-y-list-item\">\n      {{ slotProps.item.id }} - {{ slotProps.item.value }}\n    </div>\n  </template>\n\n  <template #loading>\n    <y-loading />\n  </template>\n</y-list>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const listRef = ref([\n      { id: 1, value: 1 },\n      { id: 2, value: 2 },\n      { id: 3, value: 3 },\n      { id: 4, value: 4 },\n      { id: 5, value: 5 },\n      { id: 6, value: 6 },\n    ])\n\n    const onLoad = (callback) => {\n      setTimeout(() => {\n        if (listRef.value.length > 300) {\n          callback && callback('finished')\n          return\n        }\n        for (let i = 0; i < 28; i++) {\n          // 将 this is a sentence. 随机生成 1 ~ 6 次\n          const times = Math.random() * 6 + 1\n          listRef.value.push({\n            id: listRef.value.length + 1,\n            value: 'this is a sentence.'.repeat(times),\n          })\n        }\n        callback && callback()\n      }, 400)\n    }\n\n    return {\n      listRef,\n      onLoad,\n    }\n  },\n}\n</script>"}]

package/libs/demo/loading.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"可直接使用组件并配置","descEn":"Components can be used and configured directly","hideInDoc":false,"index":0,"code":"\n<div class=\"demo\">\n  <!-- 大小 -->\n  <y-loading size=\"14\" />\n  <!-- 粗细 -->\n  <y-loading :thick=\"4\" />\n  <!-- 颜色 -->\n  <y-loading color=\"#333\" />\n  <!-- 方向 -->\n  <y-loading direction=\"reverse\" />\n</div>\n"},{"name":"文本显示","nameEn":"Show Text","desc":"可配置显示文本及其位置","descEn":"Configurable to display text and its location","hideInDoc":false,"index":1,"code":"\n<div class=\"demo\">\n  <!-- 文案 -->\n  <y-loading>加载中...</y-loading>\n  <!-- 文案颜色 -->\n  <y-loading text-color=\"#000\">加载中...</y-loading>\n  <!-- 文案大小 -->\n  <y-loading :text-size=\"12\">加载中...</y-loading>\n  <!-- 文案位置 -->\n  <y-loading text-location=\"left\">加载中...</y-loading>\n  <y-loading text-location=\"top\">加载中...</y-loading>\n  <y-loading text-location=\"right\">加载中...</y-loading>\n</div>\n"},{"name":"自定义slot","nameEn":"Custom Slot","desc":"可自定义Slot","descEn":"Customizable Slot displays different behaviors","hideInDoc":false,"index":2,"code":"\n<div class=\"demo\">\n  <!-- 自定义icon -->\n  <y-loading>\n    <template #icon>\n      <div class=\"dot\" />\n    </template>\n    loading\n  </y-loading>\n</div>\n"},{"name":"自定义位置","nameEn":"Custom Position","desc":"position可设置为relative、absolute、fixed，可根据展示需要配置","descEn":"Position property can be set as relative, absolute and fixed, which can be configured according to the needs of display","hideInDoc":false,"index":3,"code":"\n<div class=\"demo\">\n  <!-- absolute -->\n  <y-loading position=\"absolute\" bg-color=\"#333\" padding=\"16px\" />\n</div>\n"},{"name":"Inject方式挂载","nameEn":"Inject Mount","desc":"可inject loading，调用show方法显示全局loading，hide方法隐藏。可进行配置","descEn":"Inject Loading, show method is show global loading, hide method is hidden. configurable","hideInDoc":false,"index":4,"code":"\n<div class=\"demo\">\n  <y-button @click=\"openWithInject\">Click To Show</y-button>\n</div>\n\n<script>\nimport { defineComponent, inject } from 'vue'\nexport default defineComponent({\n  setup() {\n    const createLoading = inject('loading')\n\n    const openWithInject = () => {\n      createLoading.show(\n        {\n          bgColor: '#333',\n          color: '#fff',\n          padding: '8px 16px',\n          textColor: '#fff',\n          textLocation: 'right',\n        },\n        {\n          default: () => '加载中',\n        },\n      )\n      const timer = setTimeout(() => {\n        createLoading.hide()\n        clearTimeout(timer)\n      }, 2000)\n    }\n\n    return { openWithInject }\n  },\n})\n</script>"},{"name":"指令挂载","nameEn":"Directive Mount","desc":"使用v-loading添加loading","descEn":"Add loading with v-loading","hideInDoc":false,"index":5,"code":"\n<div class=\"demo\">\n  <y-button\n    v-loading=\"loading\"\n    v-loading-props=\"customProps\"\n    v-loading-slots=\"customSlots\"\n    @click=\"open\"\n  >\n    <span>{{ text }}</span>\n  </y-button>\n</div>\n\n<script>\nimport { defineComponent, onMounted, reactive, ref } from 'vue'\nexport default defineComponent({\n  setup() {\n    const text = ref('')\n    const loading = ref(false)\n    const customProps = reactive({\n      size: '14px',\n      textSize: '14px',\n      textLocation: 'right',\n    })\n    onMounted(() => {\n      open()\n    })\n\n    const open = () => {\n      text.value = ''\n      loading.value = true\n      const timer = setTimeout(() => {\n        text.value = 'Rerender'\n        loading.value = false\n        clearTimeout(timer)\n      }, 5000)\n    }\n    const customSlots = reactive({\n      default: () => '加载中',\n    })\n    return { loading, text, open, customProps, customSlots }\n  },\n})\n</script>"}]

package/libs/demo/mask.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"通过参数show控制显示","descEn":"The display is controlled by the parameter show","hideInDoc":false,"index":0,"code":"\n<y-button @click=\"toggle\">显示遮罩</y-button>\n<y-mask v-model=\"show\" @click=\"toggle\" />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const show = ref(false)\n    const toggle = () => {\n      show.value = !show.value\n    }\n    return { show, toggle }\n  },\n})\n</script>"},{"name":"自定义Slot","nameEn":"Custom Slot","desc":"自定义Slot嵌套显示","descEn":"Custom Slot nested display","hideInDoc":false,"index":1,"code":"\n<y-button @click=\"toggle\">嵌套显示</y-button>\n<y-mask v-model=\"show\" @click=\"toggle\">\n  <div class=\"wrapper\">\n    <y-button @click.stop=\"toggle2\">再次打开Mask</y-button>\n  </div>\n</y-mask>\n<y-mask v-model=\"show2\" @click=\"toggle2\">\n  <div class=\"wrapper\">\n    <y-button type=\"text\">我是第二层</y-button>\n  </div>\n</y-mask>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const show = ref(false)\n    const toggle = () => {\n      show.value = !show.value\n    }\n    const show2 = ref(false)\n    const toggle2 = () => {\n      show2.value = !show2.value\n    }\n    return { show, toggle, show2, toggle2 }\n  },\n})\n</script>"}]

package/libs/demo/popup.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":0,"code":"\n<y-button @click=\"toggle\">click</y-button>\n<y-popup v-model=\"show\" :custom-style=\"{ padding: '30px' }\">正文</y-popup>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const show = ref(false)\n    const toggle = () => {\n      show.value = !show.value\n    }\n    return { show, toggle }\n  },\n})\n</script>"},{"name":"弹出位置","nameEn":"Popup position","desc":"通过 position 属性设置弹出位置，默认居中弹出(center)，可以设置为 top、bottom、left、right、center","descEn":"Set the pop-up position through the position attribute. The default pop-up position is center, which can be set as top, bottom, left, right, and center","hideInDoc":false,"index":1,"code":"\n<div class=\"demo\">\n  <y-button @click=\"toggle('show1')\">top</y-button>\n  <y-button @click=\"toggle('show2')\">bottom</y-button>\n  <y-button @click=\"toggle('show3')\">left</y-button>\n  <y-button @click=\"toggle('show4')\">right</y-button>\n</div>\n<y-popup\n  v-model=\"state.show1\"\n  position=\"top\"\n  :custom-style=\"{ height: '30%' }\"\n></y-popup>\n<y-popup\n  v-model=\"state.show2\"\n  position=\"bottom\"\n  :custom-style=\"{ height: '30%' }\"\n></y-popup>\n<y-popup\n  v-model=\"state.show3\"\n  position=\"left\"\n  :custom-style=\"{ width: '30%', height: '100%' }\"\n></y-popup>\n<y-popup\n  v-model=\"state.show4\"\n  position=\"right\"\n  :custom-style=\"{ width: '30%', height: '100%' }\"\n></y-popup>\n\n<script>\nimport { defineComponent, reactive } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const state = reactive({\n      show1: false,\n      show2: false,\n      show3: false,\n      show4: false,\n    })\n    const toggle = function toggle(key) {\n      state[key] = !state[key]\n    }\n    return { state, toggle }\n  },\n})\n</script>"},{"name":"自定义圆角","nameEn":"Custom Rounded","desc":"可设置弹出窗圆角","descEn":"The pop-up window fillet corner can be set","hideInDoc":false,"index":3,"code":"\n<y-button @click=\"toggle\">Rounded</y-button>\n<y-popup\n  v-model=\"show\"\n  border-radius=\"20px\"\n  position=\"bottom\"\n  :custom-style=\"{ height: '30%' }\"\n></y-popup>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const show = ref(false)\n    const toggle = () => {\n      show.value = !show.value\n    }\n    return { show, toggle }\n  },\n})\n</script>"},{"name":"自定义挂载","nameEn":"Custom Mount","desc":"可设置挂载位置","descEn":"The mount position can be set","hideInDoc":false,"index":4,"code":"\n<y-button @click=\"toggle\">Mount #app</y-button>\n<y-popup\n  v-model=\"show\"\n  border-radius=\"20px\"\n  :custom-style=\"{ padding: '30px' }\"\n  teleport=\"#app\"\n>\n  I in #app\n</y-popup>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const show = ref(false)\n    const toggle = () => {\n      show.value = !show.value\n    }\n    return { show, toggle }\n  },\n})\n</script>"}]

package/libs/demo/progress.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":0,"code":"\n<ul class=\"demo\">\n  <li>\n    <y-progress :percent=\"30\" />\n  </li>\n  <li>\n    <y-progress :percent=\"30\" default-pivot />\n  </li>\n</ul>\n"},{"name":"样式制定","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":1,"code":"\n<ul class=\"demo\">\n  <li>\n    <y-progress :percent=\"50\" radius=\"0px\" :stroke-width=\"8\" />\n  </li>\n  <li>\n    <y-progress\n      :percent=\"60\"\n      radius=\"8px\"\n      :stroke-width=\"8\"\n      color=\"#FFB24E\"\n    />\n  </li>\n  <li>\n    <y-progress\n      color=\"#abfa24\"\n      pivot-color=\"#000000\"\n      text-color=\"#be99ff\"\n      :percent=\"70\"\n      default-pivot\n    />\n  </li>\n  <li>\n    <y-progress\n      track-color=\"#23e3e3\"\n      color=\"linear-gradient(to right, #be99ff, #7232dd)\"\n      :percent=\"80\"\n      default-pivot\n    />\n  </li>\n</ul>\n"},{"name":"自定义Pivot","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":2,"code":"\n<y-progress :percent=\"70\">\n  <template #pivot>\n    <div class=\"myclass\">\n      <y-icon name=\"favorite\" />\n    </div>\n  </template>\n</y-progress>\n"},{"name":"自定义Milestone","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":3,"code":"\n<ul class=\"demo\">\n  <li>\n    <y-progress :percent=\"55\" mode-milestone />\n  </li>\n  <li>\n    <y-progress :percent=\"65\" mode-milestone :mileages=\"[30, 60, 90]\" />\n  </li>\n  <li>\n    <y-progress :percent=\"75\" mode-milestone :mileages=\"[30, 60, 90]\">\n      <template #mileage>\n        <div class=\"myclass\">\n          <y-icon name=\"favorite\" />\n        </div>\n      </template>\n    </y-progress>\n  </li>\n</ul>\n"},{"name":"动画","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":4,"code":"\n<ul class=\"demo\">\n  <li>\n    <y-progress :percent=\"percent\" :animation=\"true\" />\n  </li>\n  <li>\n    <y-progress\n      :percent=\"percent\"\n      default-pivot\n      :animation=\"true\"\n      :duration=\"3000\"\n    />\n  </li>\n  <li>\n    <y-progress\n      :percent=\"percent\"\n      :animation=\"true\"\n      :duration=\"3000\"\n      mode-milestone\n      :mileages=\"[30, 60, 90]\"\n    />\n  </li>\n\n  <y-button @click=\"restart\">ReStart</y-button>\n</ul>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const percent = ref(66)\n    const restart = () => {\n      percent.value = 100 - Math.random() * 50\n    }\n    return { percent, restart }\n  },\n})\n</script>"}]

package/libs/demo/pullrefresh.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"下拉刷新时会触发 load 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后，调用回调函数，设置 “success” “failed” ，表示加载完成状态。","descEn":"下拉刷新时会触发 load 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后，调用回调函数，设置 “success” “failed” ，表示加载完成状态。","hideInDoc":false,"index":0,"code":"\n<y-pull-refresh @load=\"load\">\n  <div class=\"pull-refresh\">我是一个容器</div>\n</y-pull-refresh>\n\n<script>\nimport { defineComponent } from '@vue/runtime-core'\nexport default defineComponent({\n  setup() {\n    const load = (cb) => {\n      setTimeout(() => cb('success'), 1000)\n    }\n    return {\n      load,\n    }\n  },\n})\n</script>"},{"name":"自定义提示","nameEn":"Custom","desc":"通过插槽，实现顶部下拉刷新内容自定义","descEn":"通过插槽，实现顶部下拉刷新内容自定义","hideInDoc":false,"index":1,"code":"\n<y-pull-refresh @load=\"load\">\n  <template #loading>\n    <img\n      class=\"loading\"\n      src=\"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/b887a4c4052a0bff7a283ac8a66f3230.gif\"\n    />\n  </template>\n  <div class=\"pull-refresh\" style=\"height: 200px; overflow: auto\">\n    <div class=\"pull-refresh\">我是一个容器</div>\n    <div class=\"pull-refresh\">我是一个容器</div>\n    <div class=\"pull-refresh\">我是一个容器</div>\n  </div>\n</y-pull-refresh>\n\n<script>\nimport { defineComponent } from '@vue/runtime-core'\nexport default defineComponent({\n  setup() {\n    const load = (cb) => {\n      setTimeout(() => cb('success'), 1000)\n    }\n    return {\n      load,\n    }\n  },\n})\n</script>"}]

package/libs/demo/slider.json

@@ -0,0 +1 @@
+[{"name":"toolTip","nameEn":"toolTip Usage","desc":"设置 show-tooltip 显示 toolTip","descEn":"show toolTip by setting show-tooltip","hideInDoc":false,"index":-1,"code":"\n<y-slider v-model=\"value\" :show-tooltip=\"true\" @change=\"onChange\" />\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(80)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"基础用法","nameEn":"Basic Usage","desc":"设置当前的进度","descEn":"set current progress","hideInDoc":false,"index":0,"code":"\n<y-slider v-model=\"value\" @change=\"onChange\" />\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(80)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"双滑块用法","nameEn":"Two Button Usage","desc":"设置 modelValue 为数组来显示双滑块","descEn":"shwo two slider buttons by setting modelValue as an array","hideInDoc":false,"index":1,"code":"\n<y-slider v-model=\"value\" @change=\"onChange\" />\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref([20, 90])\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"指定范围","nameEn":"Specific Range","desc":"指定 slider 的最大值和最小值","descEn":"Specify min or max number of slider","hideInDoc":false,"index":2,"code":"\n<y-slider v-model=\"value\" :min=\"-50\" :max=\"50\" @change=\"onChange\" />\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(0)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change', value)\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"禁用","nameEn":"Disable","desc":"禁止滚动及点击滑块","descEn":"prevent scroll or click button","hideInDoc":false,"index":3,"code":"\n<y-slider v-model=\"value\" disabled @change=\"onChange\" />\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(20)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"自定义样式","nameEn":"Custom Style","desc":"设置 activeColor、inactiveColor、barHeight 等自定义样式","descEn":"set activeColor、inactiveColor、barHeight and more custom style","hideInDoc":false,"index":4,"code":"\n<y-slider\n  v-model=\"value\"\n  :active-color=\"activeColor\"\n  :inactive-color=\"inActiveColor\"\n  :bar-height=\"barHeight\"\n  @change=\"onChange\"\n/>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(80)\n    const activeColor = ref('lightblue')\n    const inActiveColor = ref('lightgreen')\n    const barHeight = ref('4')\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      activeColor,\n      inActiveColor,\n      onChange,\n      barHeight,\n    }\n  },\n}\n</script>"},{"name":"自定义按钮","nameEn":"Custom Button","desc":"设置 button 插槽自定义滑块按钮","descEn":"use button slot to design custom button","hideInDoc":false,"index":5,"code":"\n<y-slider v-model=\"value\" @change=\"onChange\">\n  <template #button>\n    <div class=\"custom-button\">{{ value }}</div>\n  </template>\n</y-slider>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(80)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"步长","nameEn":"Step Usage","desc":"设置 step 指定每一次移动的距离","descEn":"Specify distance of each move step","hideInDoc":false,"index":6,"code":"\n<y-slider\n  v-model=\"value\"\n  :step=\"step\"\n  gap-color=\"#fff\"\n  gap-width=\"8px\"\n  @change=\"onChange\"\n/>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(50)\n    const step = ref(20)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change', value)\n    }\n    return {\n      value,\n      step,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"带业务 Icon","nameEn":"Icon Usage","desc":"使用 iconLeft、iconRight 插槽在 slider 两边展示自定义 icon","descEn":"show custom icon by setting iconLeft or iconRight slot","hideInDoc":false,"index":7,"code":"\n<y-slider v-model=\"value\" @change=\"onChange\">\n  <template #iconLeft>\n    <y-icon name=\"user\" size=\"24\" />\n  </template>\n  <template #iconRight>\n    <y-icon name=\"chat-o\" size=\"24\" />\n  </template>\n</y-slider>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(80)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"},{"name":"动画时间","nameEn":"Transition Time","desc":"设置 transition-time 控制滑块移动的动画时间","descEn":"control slider animation time by setting transition-time","hideInDoc":false,"index":8,"code":"\n<y-slider v-model=\"value\" :transition-time=\"1000\" @change=\"onChange\" />\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const value = ref(80)\n\n    const onChange = () => {\n      // eslint-disable-next-line no-console\n      console.log('change')\n    }\n    return {\n      value,\n      onChange,\n    }\n  },\n}\n</script>"}]

package/libs/demo/stepper.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"通过 <em>v-model</em> 绑定输入值，可以通过 <em>change</em> 事件监听到输入值的变化。","descEn":"description","hideInDoc":false,"index":0,"code":"\n<y-stepper v-model=\"value\" />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'StepperBasicDemo',\n  setup() {\n    const value = ref(1)\n    return { value }\n  },\n})\n</script>"},{"name":"限制输入范围","nameEn":"limit","desc":"通过 <em>min</em> 和 <em>max</em> 属性限制输入值的范围。","descEn":"description","hideInDoc":false,"index":1,"code":"\n<y-stepper v-model=\"value\" :min=\"0\" :max=\"20\" />\n<y-stepper v-model=\"integerValue\" :min=\"-10\" :max=\"10\" integer />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'StepperLimitDemo',\n  setup() {\n    const value = ref(1)\n    const integerValue = ref(1)\n    return { value, integerValue }\n  },\n})\n</script>"},{"name":"大小设置","nameEn":"Size","desc":"通过 <em>size</em> 属性可以设置 input 的大小，值为 <em>mini</em> <em>small</em> <em>middle</em> <em>large</em>，默认 <em>middle</em>。","descEn":"description","hideInDoc":false,"index":1,"code":"\n<y-stepper v-model=\"value\" size=\"mini\" />\n<y-stepper v-model=\"value\" size=\"small\" />\n<y-stepper v-model=\"value\" size=\"middle\" />\n<y-stepper v-model=\"value\" size=\"large\" />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'StepperSizeDemo',\n  setup() {\n    const value = ref(1)\n    return { value }\n  },\n})\n</script>"},{"name":"禁用状态","nameEn":"disabled","desc":"通过设置 <em>disabled</em> 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。并且可以通过通过设置 <em>disable-input</em> 属性来禁用输入框，此时按钮仍然可以点击。","descEn":"description","hideInDoc":false,"index":2,"code":"\n<y-stepper v-model=\"value\" disabled />\n<y-stepper v-model=\"value\" disable-input />\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'StepperDisabledDemo',\n  setup() {\n    const value = ref(1)\n    return { value }\n  },\n})\n</script>"}]

package/libs/demo/style.json

@@ -0,0 +1 @@
+[{"name":"点击态","desc":"设置模块点击态。","index":0,"code":"\n<div class=\"y-el--clickable\">click me</div>\n"},{"name":"文字省略","desc":"当文本内容长度超过容器最大宽度时，自动省略多余的文本。最多支持3行省略。","index":1,"code":"\n<div class=\"ellipsis-wrap\">\n  <!-- 最多显示一行 -->\n  <div class=\"y-el--ellipsis\">\n    这是一段最多显示一行的文字，多余的内容会被省略啦啦啦\n  </div>\n  <!-- 最多显示两行 -->\n  <div class=\"y-el--ellipsis-l2\">\n    这是一段最多显示两行的文字，多余的内容会被省略\n    这是一段最多显示两行的文字，多余的内容会被省略\n    这是一段最多显示两行的文字，多余的内容会被省略\n  </div>\n  <!-- 最多显示三行 -->\n  <div class=\"y-el--ellipsis-l3\">\n    这是一段最多显示三行的文字，多余的内容会被省略\n    这是一段最多显示两行的文字，多余的内容会被省略\n    这是一段最多显示两行的文字，多余的内容会被省略\n    这是一段最多显示两行的文字，多余的内容会被省略\n  </div>\n</div>\n"},{"name":"边框线","desc":"为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。","index":2,"code":"\n<div class=\"hair-line\">\n  <!-- 上边框 -->\n  <div class=\"y-el--hairline-top\" />\n  <!-- 下边框 -->\n  <div class=\"y-el--hairline-bottom\" />\n  <!-- 左边框 -->\n  <div class=\"y-el--hairline-left\" />\n  <!-- 右边框 -->\n  <div class=\"y-el--hairline-right\" />\n  <!-- 全边框 -->\n  <div class=\"y-el--hairline\" />\n</div>\n"},{"name":"动画","desc":"可以通过 transition 组件使用内置的动画","index":3,"code":"\n<button block @click=\"animation('fade')\">Fade</button>\n<button block @click=\"animation('slide-top')\">Slide Top</button>\n<button block @click=\"animation('slide-bottom')\">Slide Bottom</button>\n<button block @click=\"animation('slide-left')\">Slide Left</button>\n<button block @click=\"animation('slide-right')\">Slide Right</button>\n<!-- 动画 -->\n<transition :name=\"`y-animation--${transitionName}`\">\n  <div v-show=\"visible\" class=\"fixed-block\" />\n</transition>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const visible = ref(false)\n    const transitionName = ref('fade')\n    const animation = (value) => {\n      transitionName.value = value\n      visible.value = true\n      setTimeout(() => {\n        visible.value = false\n      }, 600)\n    }\n    return {\n      visible,\n      transitionName,\n      animation,\n    }\n  },\n}\n</script>"}]

package/libs/demo/swipe.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"直接将需轮播元素以slot形式传入即可","descEn":"Just pass swipe items as slot","index":0,"code":"\n<y-swipe>\n  <y-swipe-item>1</y-swipe-item>\n  <y-swipe-item>2</y-swipe-item>\n  <y-swipe-item>3</y-swipe-item>\n  <y-swipe-item>4</y-swipe-item>\n</y-swipe>\n"},{"name":"自动播放","nameEn":"Autoplay","desc":"设置autoplayTime的时间间隔即可启动自动轮播","descEn":"Enable autoplayTime swipe when set time interval to property autoplay","index":1,"code":"\n<y-swipe :autoplay-time=\"3000\" init-index=\"2\" :duration=\"1000\">\n  <y-swipe-item>1</y-swipe-item>\n  <y-swipe-item>2</y-swipe-item>\n  <y-swipe-item>3</y-swipe-item>\n  <y-swipe-item>4</y-swipe-item>\n</y-swipe>\n"},{"name":"滑动不跟手","nameEn":"Not following hand when dragging","desc":"设置isFollowHand为false,则滑动时滑块不会跟随滑动，但当满足滑动距离/速度后仍会滚动到下一个","descEn":"Swipe does not follow hand in draging when set property isFollowHand is false, but it still will go next when drag distance/speed is enough","index":2,"code":"\n<y-swipe :is-follow-hand=\"false\">\n  <y-swipe-item>1</y-swipe-item>\n  <y-swipe-item>2</y-swipe-item>\n  <y-swipe-item>3</y-swipe-item>\n  <y-swipe-item>4</y-swipe-item>\n</y-swipe>\n"},{"name":"自动高度","nameEn":"Auto height","desc":"设置auto-height为true,则swiper的高度由当前显示的滑块高度决定","descEn":"Swipe height is depend on the height of current swipe item when property autoHeight is true","index":4,"code":"\n<y-swipe auto-height>\n  <y-swipe-item>\n    <div\n      :style=\"{\n        height: '100px',\n        lineHeight: '100px',\n        backgroundColor: '#364d79',\n      }\"\n    >\n      1\n    </div>\n  </y-swipe-item>\n  <y-swipe-item>\n    <div\n      :style=\"{\n        height: '150px',\n        lineHeight: '150px',\n        backgroundColor: 'skyblue',\n      }\"\n    >\n      2\n    </div>\n  </y-swipe-item>\n  <y-swipe-item>\n    <div\n      :style=\"{\n        height: '250px',\n        lineHeight: '250px',\n        backgroundColor: '#364d79',\n      }\"\n    >\n      3\n    </div>\n  </y-swipe-item>\n  <y-swipe-item>\n    <div\n      :style=\"{\n        height: '200px',\n        lineHeight: '200px',\n        backgroundColor: 'skyblue',\n      }\"\n    >\n      4\n    </div>\n  </y-swipe-item>\n</y-swipe>\n"},{"name":"设置宽度","nameEn":"Fixed Size","desc":"滑块默认宽度100%，可设置itemSize来控制滑块宽度， 纵向时即会控制滑块高度","descEn":"Swipe item default width is 100% of swipe, and you can set itemSize to control width(height when verical) of item","index":5,"code":"\n<y-swipe item-size=\"250\" align=\"start\" :loop=\"false\" :dots=\"false\">\n  <y-swipe-item>1</y-swipe-item>\n  <y-swipe-item>2</y-swipe-item>\n  <y-swipe-item>3</y-swipe-item>\n  <y-swipe-item>4</y-swipe-item>\n</y-swipe>\n"},{"name":"设置间距","nameEn":"Spacing","desc":"可设置item-space来设置滑块的间距","descEn":"Set property itemSpace to control space between item","index":6,"code":"\n<y-swipe item-size=\"200\" item-space=\"30\">\n  <y-swipe-item>1</y-swipe-item>\n  <y-swipe-item>2</y-swipe-item>\n  <y-swipe-item>3</y-swipe-item>\n  <y-swipe-item>4</y-swipe-item>\n</y-swipe>\n"},{"name":"纵向","nameEn":"Vertical","desc":"设置vertial为true可开启纵向滚动","descEn":"Swipe scroll vertically when setting vertical to true","index":7,"code":"\n<y-swipe\n  :vertical=\"true\"\n  style=\"height: 200px\"\n  item-size=\"70%\"\n  dots-color=\"grey\"\n>\n  <y-swipe-item>1</y-swipe-item>\n  <y-swipe-item>2</y-swipe-item>\n  <y-swipe-item>3</y-swipe-item>\n  <y-swipe-item>4</y-swipe-item>\n</y-swipe>\n"},{"name":"懒加载","nameEn":"Lazyload","desc":"设置lazy为true，则会进行懒加载，只有进入视窗的滑块才会进行加载","descEn":"Set lazy to true to enable lazyload and item only load when it come into view","index":8,"code":"\n<y-swipe lazy>\n  <y-swipe-item>\n    <img\n      src=\"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/1c549180f8ff7320346021080969d8ad.jpg\"\n    />\n  </y-swipe-item>\n  <y-swipe-item>\n    <img\n      src=\"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/093002acd40dc7a3c7df6e70b00a2ddb.jpg\"\n    />\n  </y-swipe-item>\n  <y-swipe-item>\n    <img\n      src=\"https://img0.qidian.com/upload/gamesy/2020/08/06/20200806172741uld59qeccz.jpg\"\n    />\n  </y-swipe-item>\n  <y-swipe-item>\n    <img\n      src=\"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/208b240580380220de2843bcddf970a7.jpg\"\n    />\n  </y-swipe-item>\n</y-swipe>\n"},{"name":"自定义指示器","nameEn":"Custom dots indicators","desc":"通过name为dots的slot可以自定义指示器","descEn":"You can set custom dots indicator when set slot named dots","index":9,"code":"\n<y-swipe ref=\"swipeRef\" @change=\"onChange\">\n  <y-swipe-item>1</y-swipe-item>\n  <y-swipe-item>2</y-swipe-item>\n  <y-swipe-item>3</y-swipe-item>\n  <y-swipe-item>4</y-swipe-item>\n  <y-swipe-item>5</y-swipe-item>\n  <y-swipe-item>6</y-swipe-item>\n  <template #dots>\n    <div\n      :style=\"{\n        position: 'absolute',\n        right: '16px',\n        bottom: '10px',\n        color: '#FFF',\n      }\"\n    >\n      {{ `${currentIndex + 1}/6` }}\n    </div>\n  </template>\n</y-swipe>\n<button :style=\"{ marginTop: '8px' }\" @click=\"moveTo\">\n  {{ `Move to No.${aimingIndex + 1}` }}\n</button>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'DemoYSwipe',\n  setup() {\n    const swipeRef = ref(null)\n    const currentIndex = ref(0)\n    const aimingIndex = ref(3)\n    const ss = ref(4)\n\n    const onChange = (index) => {\n      currentIndex.value = index\n    }\n\n    const moveTo = () => {\n      swipeRef.value.moveTo(aimingIndex.value, false)\n      aimingIndex.value = Math.floor(Math.random() * 6)\n    }\n\n    return {\n      currentIndex,\n      aimingIndex,\n      moveTo,\n      onChange,\n      ss,\n      swipeRef,\n    }\n  },\n})\n</script>"}]

package/libs/demo/switch.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic usage","desc":"开关的基本用法","descEn":"The basic use of the switch","hideInDoc":false,"index":0,"code":"\n<y-switch v-model=\"checked1\" @change=\"onChange\"></y-switch>\n\n<script>\n/* eslint-disable */\nimport { ref } from \"vue\";\n\nexport default {\n  setup() {\n    const checked1 = ref(true);\n\n    const onChange = () => {\n      console.log(\"改变了\");\n    };\n    return { checked1, onChange };\n  },\n};\n</script>"},{"name":"不可用状态和只读状态","nameEn":"Unavailable and read-only states","desc":"通过 disabled 设置开关的不可用状态，通过 readonly 设置开关的只读状态","descEn":"The unavailable state of the switch.","hideInDoc":false,"index":1,"code":"\n<ul>\n  <li>\n    <y-switch v-model=\"checked1\" disabled></y-switch>\n  </li>\n  <li>\n    <y-switch v-model=\"checked2\" readonly></y-switch>\n  </li>\n</ul>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked1 = ref(true)\n    const checked2 = ref(true)\n    return { checked1, checked2 }\n  },\n}\n</script>"},{"name":"自定义颜色","nameEn":"Custom color","desc":"通过 active-color 和 inactive-color 自定义开关颜色","descEn":"Customize switch colors through active-color and inactive color","hideInDoc":false,"index":2,"code":"\n<y-switch\n  v-model=\"checked1\"\n  active-color=\"#ff6600\"\n  inactive-color=\"#007eff\"\n></y-switch>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const checked1 = ref(true)\n    return { checked1 }\n  },\n}\n</script>"},{"name":"异步控制","nameEn":"Asynchronous control","desc":"开关的异步控制","descEn":"Asynchronous control of switches","hideInDoc":false,"index":3,"code":"\n<y-switch\n  :model-value=\"checked1\"\n  @update:model-value=\"onUpdateValue\"\n></y-switch>\n\n<script>\n/* eslint-disable */\nimport { ref } from \"vue\";\n\nexport default {\n  setup() {\n    let checked1 = ref(true);\n\n    const onUpdateValue = (checked) => {\n      const confirmTip = window.confirm(\"是否切换开关？\");\n      if (confirmTip) {\n        checked1.value = checked;\n      }\n    };\n    return { checked1, onUpdateValue };\n  },\n};\n</script>"},{"name":"开关大小","nameEn":"Switch the size","desc":"自定义开关大小，默认为 middle","descEn":"Customize switch size. Default is MIDDLE","hideInDoc":false,"index":4,"code":"\n<h3>预设尺寸</h3>\n<ul>\n  <li>\n    <y-switch v-model=\"checked1\" size=\"small\"></y-switch>\n  </li>\n  <li>\n    <y-switch v-model=\"checked2\"></y-switch>\n  </li>\n  <li>\n    <y-switch v-model=\"checked3\" size=\"large\"></y-switch>\n  </li>\n</ul>\n<h3>自定义大小</h3>\n<y-switch v-model=\"checked4\" size=\"20\"></y-switch>\n\n<script>\nimport { reactive, toRefs } from 'vue'\n\nexport default {\n  setup() {\n    const state = reactive({\n      checked1: true,\n      checked2: true,\n      checked3: true,\n      checked4: true,\n    })\n    return {\n      ...toRefs(state),\n    }\n  },\n}\n</script>"}]

package/libs/demo/tabs.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"详情描述","descEn":"设置 init-index 为默认展示的 tab","hideInDoc":false,"index":0,"code":"\n<y-tabs :init-index=\"1\">\n  <y-tab v-for=\"index in 2\" :key=\"index\" :title=\"`标题${index}`\">\n    <div\n      class=\"qd-tabs-demo-item\"\n      :class=\"{ [`qd-tabs-demo-item-${index}`]: true }\"\n    >\n      {{ index }}\n    </div>\n  </y-tab>\n</y-tabs>\n\n<script>\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    return {}\n  },\n}\n</script>"},{"name":"大小","nameEn":"Basic Usage","desc":"设置 size 为 small 开启小号展示","descEn":"description","hideInDoc":false,"index":1,"code":"\n<y-tabs size=\"small\" :init-index=\"1\">\n  <y-tab v-for=\"index in 3\" :key=\"index\" :title=\"`标题${index}`\">\n    <div\n      class=\"qd-tabs-demo-item\"\n      :class=\"{ [`qd-tabs-demo-item-${index}`]: true }\"\n    >\n      {{ index }}\n    </div>\n  </y-tab>\n</y-tabs>\n\n<script>\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    return {}\n  },\n}\n</script>"},{"name":"左对齐","nameEn":"Basic Usage","desc":"设置 align 为 left 开启左对齐","descEn":"description","hideInDoc":false,"index":2,"code":"\n<y-tabs align=\"left\" :init-index=\"1\">\n  <y-tab v-for=\"index in 3\" :key=\"index\" :title=\"`标题${index}`\">\n    <div\n      class=\"qd-tabs-demo-item\"\n      :class=\"{ [`qd-tabs-demo-item-${index}`]: true }\"\n    >\n      {{ index }}\n    </div>\n  </y-tab>\n</y-tabs>\n\n<script>\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    return {}\n  },\n}\n</script>"},{"name":"禁用","nameEn":"Basic Usage","desc":"设置 y-tab 的 disabled 为 true 禁用某一项的点击","descEn":"description","hideInDoc":false,"index":3,"code":"\n<y-tabs change-with-animation @disabledClick=\"disabledClick\">\n  <y-tab\n    v-for=\"index in 3\"\n    :key=\"index\"\n    :title=\"`标题${index}`\"\n    :name=\"`name${index}`\"\n    :disabled=\"index === 2\"\n  >\n    <div\n      class=\"qd-tabs-demo-item\"\n      :class=\"{ [`qd-tabs-demo-item-${index}`]: true }\"\n    >\n      {{ index }}\n    </div>\n  </y-tab>\n</y-tabs>\n<p>{{ desc }}</p>\n\n<script>\nimport { ref } from 'vue'\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    const desc = ref('')\n    const disabledClick = (index, title, clickedName) => {\n      desc.value = `title 为${title}，name 为${clickedName}的第${\n        index + 1\n      }个 tab 不可点击`\n    }\n\n    return {\n      disabledClick,\n      desc,\n    }\n  },\n}\n</script>"},{"name":"标题可滚动","nameEn":"Basic Usage","desc":"设置 title-scroll-threshold，当 qd-tab 的 length 大于 title-scroll-threshold 的值时，会自动开始标题滚动功能","descEn":"设置 init-index 为默认展示的 tab","hideInDoc":false,"index":4,"code":"\n<y-tabs :init-index=\"0\" :title-scroll-threshold=\"5\">\n  <y-tab v-for=\"index in 7\" :key=\"index\" :title=\"`标题${index}`\">\n    <div\n      class=\"qd-tabs-demo-item\"\n      :class=\"{ [`qd-tabs-demo-item-${index}`]: true }\"\n    >\n      {{ index }}\n    </div>\n  </y-tab>\n</y-tabs>\n\n<script>\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    return {}\n  },\n}\n</script>"},{"name":"开启内容切换时的动画","nameEn":"Basic Usage","desc":"设置 change-with-animation 为 true 开启内容切换时的动画效果","descEn":"description","hideInDoc":false,"index":5,"code":"\n<y-tabs change-with-animation :init-index=\"1\">\n  <y-tab v-for=\"index in 3\" :key=\"index\" :title=\"`标题${index}`\">\n    <div\n      class=\"qd-tabs-demo-item\"\n      :class=\"{ [`qd-tabs-demo-item-${index}`]: true }\"\n    >\n      {{ index }}\n    </div>\n  </y-tab>\n</y-tabs>\n\n<script>\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    return {}\n  },\n}\n</script>"},{"name":"内容懒加载","nameEn":"Basic Usage","desc":"设置 change-with-animation 为 true，开启内容懒加载功能","descEn":"","hideInDoc":false,"index":6,"code":"\n<y-tabs lazy>\n  <y-tab title=\"标题1\">\n    <img\n      src=\"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/c13ce81b403325e38db9fdd69b0f5042.jpg\"\n      alt=\"内容1\"\n    />\n  </y-tab>\n  <y-tab title=\"标题2\">\n    <img\n      src=\"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/a987e034e9b8d3b0e36290ec7ca38959.jpg\"\n      alt=\"内容2\"\n    />\n  </y-tab>\n  <y-tab title=\"标题3\">\n    <img\n      src=\"https://img2.qidian.com/upload/gamesy/2020/09/15/20200915141944djktty51y0.jpg\"\n      alt=\"内容3\"\n    />\n  </y-tab>\n  <y-tab title=\"标题4\">\n    <img\n      src=\"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/a3561b15b8f59bd194e9f4461b19b841.jpg\"\n      alt=\"内容4\"\n    />\n  </y-tab>\n</y-tabs>\n\n<script>\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    return {}\n  },\n}\n</script>"},{"name":"自定义标题","nameEn":"Basic Usage","desc":"通过设置 name 为 title 的 slot 可以自定义指示器","descEn":"","hideInDoc":false,"index":7,"code":"\n<y-tabs lazy>\n  <y-tab title=\"标题1\">1</y-tab>\n  <y-tab>\n    <template #title>\n      <img\n        class=\"custom-title-img\"\n        src=\"https://imgservices-1252317822.image.myqcloud.com/image/061620210171926/cdd183d5.png\"\n        alt=\"\"\n      />\n    </template>\n    2\n  </y-tab>\n  <y-tab title=\"标题3\">3</y-tab>\n</y-tabs>\n\n<script>\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    return {}\n  },\n}\n</script>"},{"name":"滚动到指定位置","nameEn":"Basic Usage","desc":"调用 scrollToByIndex 方法，可滑动到指定的位置","descEn":"","hideInDoc":false,"index":8,"code":"\n<y-tabs ref=\"tabsRef\">\n  <y-tab v-for=\"index in 6\" :key=\"index\" :title=\"`标题${index}`\">\n    <div\n      class=\"qd-tabs-demo-item\"\n      :class=\"{ [`qd-tabs-demo-item-${index}`]: true }\"\n    >\n      {{ index }}\n    </div>\n  </y-tab>\n</y-tabs>\n<button :style=\"{ marginTop: '8px' }\" @click=\"moveTo\">\n  {{ `移动到第${aimingIndex + 1}个` }}\n</button>\n\n<script>\nimport { ref } from 'vue'\n\nexport default {\n  name: 'DemoTabs',\n  setup() {\n    const tabsRef = ref(null)\n    const aimingIndex = ref(2)\n\n    const moveTo = () => {\n      tabsRef.value.scrollToByIndex(aimingIndex.value)\n      aimingIndex.value = Math.floor(Math.random() * 6)\n    }\n    return {\n      tabsRef,\n      moveTo,\n      aimingIndex,\n    }\n  },\n}\n</script>"}]

package/libs/demo/toast.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":0,"code":"\n<div class=\"demo\">\n  <y-button @click=\"show\">show</y-button>\n  <y-button @click=\"showMessage\">showMessage</y-button>\n  <y-button @click=\"showLongger\">showLongger</y-button>\n</div>\n\n<script>\nimport { defineComponent, inject } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const toast = inject('toast')\n    const show = () => {\n      toast({ title: 'Toast' })\n    }\n    const showMessage = () => {\n      toast({ title: '我是标题', message: '我是副标题' })\n    }\n    const showLongger = () => {\n      toast({\n        title:\n          '这是一条长文字提示，超过一定字数就会换行。这是一条长文字提示，超过一定字数就会换行',\n      })\n    }\n    return { show, showMessage, showLongger }\n  },\n})\n</script>"},{"name":"基础用法","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":1,"code":"\n<div class=\"demo\">\n  <y-button @click=\"showIcon\">showIcon</y-button>\n  <y-button @click=\"showCustomIcon\">showCustomIcon</y-button>\n</div>\n\n<script>\nimport { defineComponent, inject } from 'vue'\nexport default defineComponent({\n  setup() {\n    const toast = inject('toast')\n    const showIcon = () => {\n      toast({ title: 'Toast' }, { name: 'info', size: '40px' })\n    }\n    const showCustomIcon = () => {\n      toast(\n        { title: 'Toast' },\n        {\n          name: 'https://imgservices-1252317822.image.myqcloud.com/image/20200819/qkvof68pi8.png',\n          size: '40px',\n        },\n      )\n    }\n    return { showIcon, showCustomIcon }\n  },\n})\n</script>"},{"name":"基础用法","nameEn":"Basic Usage","desc":"详情描述","descEn":"description","hideInDoc":false,"index":2,"code":"\n<div class=\"demo\">\n  <y-button @click=\"showTop\">showTop</y-button>\n  <y-button @click=\"showMiddle\">showMiddle</y-button>\n  <y-button @click=\"showBottom\">showBottom</y-button>\n</div>\n\n<script>\nimport { defineComponent, inject } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const toast = inject('toast')\n    const showTop = () => {\n      toast({ title: 'Toast at top', position: 'top' })\n    }\n    const showMiddle = () => {\n      toast({ title: 'Toast at middle', position: 'middle' })\n    }\n    const showBottom = () => {\n      toast({ title: 'Toast at bottom', position: 'bottom' })\n    }\n    return { showTop, showMiddle, showBottom }\n  },\n})\n</script>"}]

package/libs/demo/tooltip.json

@@ -0,0 +1 @@
+[{"name":"基础用法","nameEn":"Basic Usage","desc":"支持两种方式使用 tooltip: 正常组件和<em>y-tooltip</em>指令   支持两种方式传入组件内容： <em>text</em>属性 和 插槽<em>popper</em>","descEn":"description","hideInDoc":false,"index":0,"code":"\n<y-tooltip text=\"我是一个text\">\n  <y-button>show</y-button>\n</y-tooltip>\n<y-tooltip position=\"top\" popper-class=\"demo-popper\">\n  <y-button>通过slot传入内容</y-button>\n  <template #popper>\n    <p>这里可以定制各种样式</p>\n    <y-button type=\"primary\" size=\"small\">按钮</y-button>\n  </template>\n</y-tooltip>\n<y-button v-tooltip=\"{ text: 'text', position: 'top-end' }\">\n  自定义指令y-tooltip传递属性\n</y-button>\n"},{"name":"背景颜色","nameEn":"Basic Usage","desc":"通过设置 <em>bg-color</em>属性来修改背景颜色","descEn":"description","hideInDoc":false,"index":1,"code":"\n<y-tooltip text=\"文字\" position=\"top\" bg-color=\"red\">\n  <y-button>red</y-button>\n</y-tooltip>\n<y-tooltip text=\"文字\" position=\"top\" bg-color=\"#2db7f5\">\n  <y-button>#2db7f5</y-button>\n</y-tooltip>\n"},{"name":"文字颜色","nameEn":"Basic Usage","desc":"通过设置 <em>color</em>属性来修改背景颜色","descEn":"description","hideInDoc":false,"index":2,"code":"\n<y-tooltip text=\"文案\" position=\"top\" color=\"#2db7f5\">\n  <y-button>#2db7f5</y-button>\n</y-tooltip>\n"},{"name":"设置宽度","nameEn":"Basic Usage","desc":"通过设置 <em>width</em> 和 <em>min-width</em>属性来修改宽度 / 最小宽度","descEn":"description","hideInDoc":false,"index":3,"code":"\n<y-tooltip text=\"文字\" position=\"top\" min-width=\"50px\">\n  <y-button>最小宽度50px</y-button>\n</y-tooltip>\n<y-tooltip\n  text=\"文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案\"\n  position=\"top\"\n  width=\"120\"\n>\n  <y-button>固定宽度70px</y-button>\n</y-tooltip>\n"},{"name":"主动控制显示/隐藏","nameEn":"Basic Usage","desc":"通过设置 <em>manual</em> 禁止 tooltip 默认点击事件, 通过 <em>v-model</em>属性来控制显示隐藏","descEn":"description","hideInDoc":false,"index":4,"code":"\n<y-tooltip v-model=\"visible\" text=\"文案\" position=\"top\" :manual=\"true\">\n  <y-checkbox v-model=\"checked\" size=\"mini\" style=\"justify-content: center\">\n    <span style=\"font-size: 0.12rem\">服务条款文案服务条款文案</span>\n  </y-checkbox>\n</y-tooltip>\n\n<script>\nimport { defineComponent, ref, computed } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const checked = ref(false)\n    const visible = computed(() => !checked.value)\n\n    return { visible, checked }\n  },\n})\n</script>"},{"name":"挂载位置","nameEn":"Basic Usage","desc":"通过设置 <em>teleport</em> 属性设置弹出层的元素挂载位置","descEn":"description","hideInDoc":false,"index":5,"code":"\n<div class=\"demo-wrap container-for-tooltip\">挂载位置</div>\n<y-tooltip text=\"文字\" position=\"top\" teleport=\".container-for-tooltip\">\n  <y-button>挂载到特定元素</y-button>\n</y-tooltip>\n"},{"name":"显示方位","nameEn":"Basic Usage","desc":"通过设置 <em>position</em> 属性来修改显示方位","descEn":"description","hideInDoc":false,"index":6,"code":"\n<div class=\"container\">\n  <y-tooltip\n    v-model=\"visible\"\n    text=\"文案\"\n    :manual=\"true\"\n    :position=\"`${position.placement}${\n      position.align ? `-${position.align}` : ''\n    }`\"\n  >\n    <y-button>\n      {{ position.placement\n      }}{{ position.align ? `-${position.align}` : '' }}\n    </y-button>\n  </y-tooltip>\n</div>\n\n<y-button @click=\"changePlacement('top')\">top</y-button>\n<y-button @click=\"changePlacement('right')\">right</y-button>\n<y-button @click=\"changePlacement('bottom')\">bottom</y-button>\n<y-button @click=\"changePlacement('left')\">left</y-button>\n<br />\n<y-button @click=\"changeAlign('start')\">start</y-button>\n<y-button @click=\"changeAlign('')\">center</y-button>\n<y-button @click=\"changeAlign('end')\">end</y-button>\n\n<script>\nimport { defineComponent, reactive, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const visible = ref(true)\n    const position = reactive({\n      placement: 'top',\n      align: '',\n    })\n\n    const changeAlign = (val) => {\n      position.align = val\n    }\n\n    const changePlacement = (val) => {\n      position.placement = val\n    }\n\n    return { visible, position, changeAlign, changePlacement }\n  },\n})\n</script>"}]