yuyeon 0.0.27 → 0.0.28

package/lib/components/button/YButton.mjs

@@ -1,6 +1,7 @@
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 import { computed, defineComponent, mergeProps } from 'vue';
 import { pressChoiceItemPropsOptions, useChoiceItem } from "../../composables/choice.mjs";
+import { useChoiceByLink } from "../../composables/choice-link.mjs";
 import { useRender } from "../../composables/component.mjs";
 import { pressVueRouterPropsOptions, useLink } from "../../composables/vue-router.mjs";
 import { PlateWave } from "../../directives/plate-wave/index.mjs";
@@ -68,6 +69,7 @@ export const YButton = defineComponent({
     } = _ref;
     const choice = useChoiceItem(props, props.injectSymbol, false);
     const link = useLink(props, attrs);
+    useChoiceByLink(link, choice?.select);
     const isActive = computed(() => {
       if (props.active !== undefined) {
         return props.active;
@@ -123,31 +125,54 @@ export const YButton = defineComponent({
         [`--y-button__text-color`]: textColor
       };
     });
+    const isDisabled = computed(() => {
+      return choice?.disabled.value || props.disabled;
+    });
 
     /// Events
     function onClick(e) {
-      e.preventDefault();
-      if (props.loading) {
+      function guardEvent(e) {
+        // don't redirect with control keys
+        if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+        // don't redirect when preventDefault called
+        if (e.defaultPrevented) return;
+        // don't redirect on right click
+        if (e.button !== undefined && e.button !== 0) return;
+        // don't redirect if `target="_blank"`
+        if (/\b_blank\b/i.test(attrs.target)) {
+          return;
+        }
+        return true;
+      }
+      if (!guardEvent(e) || props.loading || isDisabled.value) {
         return;
       }
       link.navigate?.(e);
+      if (e.preventDefault) e.preventDefault();
       choice?.toggle();
     }
     useRender(() => {
-      return _withDirectives(_createVNode("button", {
+      const Tag = link.isLink.value ? 'a' : 'button';
+      return _withDirectives(_createVNode(Tag, {
         "class": [`${NAME}`, choice?.selectedClass.value, {
           ...classes.value
         }],
+        "href": link.href.value,
         "style": styles.value,
         "onClick": onClick,
         "disabled": props.disabled ? true : undefined
-      }, [_createVNode("span", {
-        "class": ['y-button__content']
-      }, [props.loading && _createVNode(YSpinnerRing, mergeProps({
-        width: '24',
-        height: '24'
-      }), null), slots.default?.()]), slots.append?.()]), [[_resolveDirective("plate-wave"), !props.noWave && !props.loading]]);
+      }, {
+        default: () => [_createVNode("span", {
+          "class": ['y-button__content']
+        }, [props.loading && _createVNode(YSpinnerRing, mergeProps({
+          width: '24',
+          height: '24'
+        }), null), slots.default?.()]), slots.append?.()]
+      }), [[_resolveDirective("plate-wave"), !props.noWave && !props.loading]]);
     });
+    return {
+      link
+    };
   }
 });
 //# sourceMappingURL=YButton.mjs.map

package/lib/components/button/YButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YButton.mjs","names":["computed","defineComponent","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","choice","setup","_ref","attrs","slots","link","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","onClick","e","preventDefault","navigate","toggle","_withDirectives","_createVNode","selectedClass","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, mergeProps } from 'vue';\n\nimport {\n  pressChoiceItemPropsOptions,\n  useChoiceItem,\n} from '../../composables/choice';\nimport { useRender } from '../../composables/component';\nimport {\n  pressVueRouterPropsOptions,\n  useLink,\n} from '../../composables/vue-router';\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/color';\nimport { propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n  {\n    loading: Boolean,\n    active: { type: Boolean, default: undefined },\n    injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\n    //\n    variation: {\n      type: String as PropType<string>,\n    },\n    small: Boolean,\n    icon: Boolean,\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n    rounded: {\n      type: Boolean,\n      default: false,\n    },\n    filled: {\n      type: Boolean,\n      default: false,\n    },\n    //\n    color: {\n      type: String,\n    },\n    noWave: {\n      type: Boolean,\n      default: false,\n    },\n    ...pressVueRouterPropsOptions(),\n    ...pressChoiceItemPropsOptions(),\n  },\n  'YButton',\n);\n\nexport const YButton = defineComponent({\n  name: 'YButton',\n  directives: {\n    PlateWave,\n  },\n  props: pressYButtonProps(),\n  emits: {\n    'choice:selected': (choice: { value: boolean }) => true,\n  },\n  setup(props, { attrs, slots }) {\n    const choice = useChoiceItem(props, props.injectSymbol, false);\n    const link = useLink(props, attrs);\n\n    const isActive = computed(() => {\n      if (props.active !== undefined) {\n        return props.active;\n      }\n      if (link.isLink.value) {\n        return link.isActive?.value;\n      }\n      return choice?.isSelected.value;\n    });\n\n    const variations = computed(() => {\n      const { variation } = props;\n      if (typeof variation === 'string') {\n        return variation.split(',').map((value) => {\n          return value.trim();\n        });\n      }\n      return [];\n    });\n\n    const classes = computed(() => {\n      const { outlined, rounded, filled, small, icon } = props;\n      return {\n        [`${NAME}--outlined`]:\n          variations.value.includes('outlined') || outlined,\n        [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\n        [`${NAME}--filled`]: variations.value.includes('filled') || filled,\n        [`${NAME}--text`]: variations.value.includes('text'),\n        [`${NAME}--small`]: variations.value.includes('small') || small,\n        [`${NAME}--icon`]: variations.value.includes('icon') || icon,\n        [`${NAME}--color`]: props.color,\n        [`${NAME}--loading`]: props.loading,\n        [`${NAME}--disabled`]: props.disabled,\n        [`${NAME}--active`]: isActive.value,\n      };\n    });\n\n    const styles = computed(() => {\n      let { color } = props;\n      let textColor: string | undefined;\n      if (color && !isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n        textColor = `var(--y-theme-on-${props.color})`;\n      }\n      return {\n        [`--y-button__color`]: color,\n        [`--y-button__text-color`]: textColor,\n      };\n    });\n\n    /// Events\n    function onClick(e: MouseEvent) {\n      e.preventDefault();\n      if (props.loading) {\n        return;\n      }\n      link.navigate?.(e);\n      choice?.toggle();\n    }\n\n    useRender(() => {\n      return (\n        <button\n          class={[\n            `${NAME}`,\n            choice?.selectedClass.value,\n            {\n              ...classes.value,\n            },\n          ]}\n          style={styles.value}\n          onClick={onClick}\n          disabled={props.disabled ? true : undefined}\n          v-plate-wave={!props.noWave && !props.loading}\n        >\n          <span class={['y-button__content']}>\n            {props.loading && (\n              <YSpinnerRing\n                {...mergeProps({ width: '24', height: '24' })}\n              ></YSpinnerRing>\n            )}\n            {slots.default?.()}\n          </span>\n          {slots.append?.()}\n        </button>\n      );\n    });\n  },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}
+{"version":3,"file":"YButton.mjs","names":["computed","defineComponent","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useChoiceByLink","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","choice","setup","_ref","attrs","slots","link","select","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","isDisabled","onClick","e","guardEvent","metaKey","altKey","ctrlKey","shiftKey","defaultPrevented","button","test","target","navigate","preventDefault","toggle","Tag","_withDirectives","_createVNode","selectedClass","href","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, mergeProps } from 'vue';\n\nimport {\n  pressChoiceItemPropsOptions,\n  useChoiceItem,\n} from '../../composables/choice';\nimport { useChoiceByLink } from '../../composables/choice-link';\nimport { useRender } from '../../composables/component';\nimport {\n  pressVueRouterPropsOptions,\n  useLink,\n} from '../../composables/vue-router';\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/color';\nimport { propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n  {\n    loading: Boolean,\n    active: { type: Boolean, default: undefined },\n    injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\n    //\n    variation: {\n      type: String as PropType<string>,\n    },\n    small: Boolean,\n    icon: Boolean,\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n    rounded: {\n      type: Boolean,\n      default: false,\n    },\n    filled: {\n      type: Boolean,\n      default: false,\n    },\n    //\n    color: {\n      type: String,\n    },\n    noWave: {\n      type: Boolean,\n      default: false,\n    },\n    ...pressVueRouterPropsOptions(),\n    ...pressChoiceItemPropsOptions(),\n  },\n  'YButton',\n);\n\nexport const YButton = defineComponent({\n  name: 'YButton',\n  directives: {\n    PlateWave,\n  },\n  props: pressYButtonProps(),\n  emits: {\n    'choice:selected': (choice: { value: boolean }) => true,\n  },\n  setup(props, { attrs, slots }) {\n    const choice = useChoiceItem(props, props.injectSymbol, false);\n    const link = useLink(props, attrs);\n    useChoiceByLink(link, choice?.select);\n\n    const isActive = computed(() => {\n      if (props.active !== undefined) {\n        return props.active;\n      }\n      if (link.isLink.value) {\n        return link.isActive?.value;\n      }\n      return choice?.isSelected.value;\n    });\n\n    const variations = computed(() => {\n      const { variation } = props;\n      if (typeof variation === 'string') {\n        return variation.split(',').map((value) => {\n          return value.trim();\n        });\n      }\n      return [];\n    });\n\n    const classes = computed(() => {\n      const { outlined, rounded, filled, small, icon } = props;\n      return {\n        [`${NAME}--outlined`]:\n          variations.value.includes('outlined') || outlined,\n        [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\n        [`${NAME}--filled`]: variations.value.includes('filled') || filled,\n        [`${NAME}--text`]: variations.value.includes('text'),\n        [`${NAME}--small`]: variations.value.includes('small') || small,\n        [`${NAME}--icon`]: variations.value.includes('icon') || icon,\n        [`${NAME}--color`]: props.color,\n        [`${NAME}--loading`]: props.loading,\n        [`${NAME}--disabled`]: props.disabled,\n        [`${NAME}--active`]: isActive.value,\n      };\n    });\n\n    const styles = computed(() => {\n      let { color } = props;\n      let textColor: string | undefined;\n      if (color && !isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n        textColor = `var(--y-theme-on-${props.color})`;\n      }\n      return {\n        [`--y-button__color`]: color,\n        [`--y-button__text-color`]: textColor,\n      };\n    });\n\n    const isDisabled = computed(() => {\n      return choice?.disabled.value || props.disabled;\n    });\n\n    /// Events\n    function onClick(e: MouseEvent) {\n      function guardEvent(e: MouseEvent) {\n        // don't redirect with control keys\n        if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;\n        // don't redirect when preventDefault called\n        if (e.defaultPrevented) return;\n        // don't redirect on right click\n        if (e.button !== undefined && e.button !== 0) return;\n        // don't redirect if `target=\"_blank\"`\n        if (/\\b_blank\\b/i.test(attrs.target as string)) {\n          return;\n        }\n        return true;\n      }\n      if (!guardEvent(e) || props.loading || isDisabled.value) {\n        return;\n      }\n      link.navigate?.(e);\n      if (e.preventDefault) e.preventDefault();\n      choice?.toggle();\n    }\n\n    useRender(() => {\n      const Tag = link.isLink.value ? 'a' : 'button';\n      return (\n        <Tag\n          class={[\n            `${NAME}`,\n            choice?.selectedClass.value,\n            {\n              ...classes.value,\n            },\n          ]}\n          href={link.href.value}\n          style={styles.value}\n          onClick={onClick}\n          disabled={props.disabled ? true : undefined}\n          v-plate-wave={!props.noWave && !props.loading}\n        >\n          <span class={['y-button__content']}>\n            {props.loading && (\n              <YSpinnerRing\n                {...mergeProps({ width: '24', height: '24' })}\n              ></YSpinnerRing>\n            )}\n            {slots.default?.()}\n          </span>\n          {slots.append?.()}\n        </Tag>\n      );\n    });\n\n    return {\n      link,\n    };\n  },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}

package/lib/components/button/YButton.scss

@@ -17,6 +17,7 @@ $button-disabled-background: #d3d3d3 !default;
   border-radius: $button-border-radius;
   font-weight: 500;
   transition: all 240ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
+  text-decoration: none;
 
   &:before {
     background-color: currentColor;

package/lib/components/tab/YTab.mjs

@@ -8,7 +8,6 @@ import { Y_TABS_KEY } from "./shared.mjs";
 import "./YTab.scss";
 export const pressYTabPropsOptions = propsFactory({
   text: String,
-  value: String,
   hideIndicator: Boolean,
   indicatorColor: String,
   ...pressYButtonProps({
@@ -45,7 +44,6 @@ export const YTab = defineComponent({
     }
     useRender(() => {
       const yButtonProps = chooseProps(props, YButton.props);
-      console.log(props, yButtonProps);
       return _createVNode(_Fragment, null, [_createVNode(YButton, _mergeProps({
         "class": ['y-tab'],
         "active": false

package/lib/components/tab/YTab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTab.mjs","names":["shallowRef","computed","defineComponent","ref","useRender","chooseProps","propsFactory","YButton","pressYButtonProps","Y_TABS_KEY","pressYTabPropsOptions","text","String","value","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","tabindex","onChoice","_ref2","yButtonProps","console","log","_createVNode","_Fragment","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\nimport {\n  PropType,\n  SlotsType,\n  computed,\n  defineComponent,\n  mergeProps,\n  ref,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { chooseProps, omit, propsFactory } from '../../util';\nimport { YButton, pressYButtonProps } from '../button';\nimport { Y_TABS_KEY } from './shared';\n\nimport './YTab.scss';\n\nexport const pressYTabPropsOptions = propsFactory(\n  {\n    text: String as PropType<string>,\n    value: String as PropType<string>,\n    hideIndicator: Boolean as PropType<boolean>,\n    indicatorColor: String as PropType<string>,\n    ...pressYButtonProps({\n        selectedClass: 'y-tab--selected',\n        noWave: true,\n    }),\n  },\n  'YTab',\n);\n\nexport const YTab = defineComponent({\n  name: 'YTab',\n  props: pressYTabPropsOptions(),\n  slots: Object as SlotsType<{\n    default?: any;\n  }>,\n  setup(props, { slots, attrs }) {\n    const selected = shallowRef(false);\n\n    const indicator$ = ref();\n    const indicatorStyles = computed(() => {\n      return {};\n    });\n    const attrsProps = computed(() => {\n      return {\n        role: 'tab',\n        'aria-selected': `${String(selected.value)}`,\n        tabindex: selected.value ? 0 : -1,\n      };\n    });\n\n    function onChoice({ value }: { value: boolean }) {\n      selected.value = value;\n    }\n\n    useRender(() => {\n      const yButtonProps = chooseProps(props, YButton.props);\n      console.log(props, yButtonProps);\n      return (\n        <>\n          <YButton\n            class={['y-tab']}\n            active={false}\n            {...attrsProps.value}\n            {...attrs}\n            {...yButtonProps}\n            injectSymbol={Y_TABS_KEY}\n            onChoice:selected={onChoice}\n          >\n            {{\n              default: () => slots.default?.() ?? props.text,\n              append: () =>\n                !props.hideIndicator && (\n                  <div\n                    ref={indicator$}\n                    class={['y-tab__indicator']}\n                    style={indicatorStyles.value}\n                  ></div>\n                ),\n            }}\n          </YButton>\n        </>\n      );\n    });\n\n    return {};\n  },\n});\n"],"mappings":";AAAA,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAGEC,QAAQ,EACRC,eAAe,EAEfC,GAAG,QACE,KAAK;AAAC,SAEJC,SAAS;AAAA,SACTC,WAAW,EAAQC,YAAY;AAAA,SAC/BC,OAAO,EAAEC,iBAAiB;AAAA,SAC1BC,UAAU;AAEnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGJ,YAAY,CAC/C;EACEK,IAAI,EAAEC,MAA0B;EAChCC,KAAK,EAAED,MAA0B;EACjCE,aAAa,EAAEC,OAA4B;EAC3CC,cAAc,EAAEJ,MAA0B;EAC1C,GAAGJ,iBAAiB,CAAC;IACjBS,aAAa,EAAE,iBAAiB;IAChCC,MAAM,EAAE;EACZ,CAAC;AACH,CAAC,EACD,MACF,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGjB,eAAe,CAAC;EAClCkB,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEX,qBAAqB,CAAC,CAAC;EAC9BY,KAAK,EAAEC,MAEL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEH,KAAK;MAAEI;IAAM,CAAC,GAAAD,IAAA;IAC3B,MAAME,QAAQ,GAAG3B,UAAU,CAAC,KAAK,CAAC;IAElC,MAAM4B,UAAU,GAAGzB,GAAG,CAAC,CAAC;IACxB,MAAM0B,eAAe,GAAG5B,QAAQ,CAAC,MAAM;MACrC,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,MAAM6B,UAAU,GAAG7B,QAAQ,CAAC,MAAM;MAChC,OAAO;QACL8B,IAAI,EAAE,KAAK;QACX,eAAe,EAAG,GAAEnB,MAAM,CAACe,QAAQ,CAACd,KAAK,CAAE,EAAC;QAC5CmB,QAAQ,EAAEL,QAAQ,CAACd,KAAK,GAAG,CAAC,GAAG,CAAC;MAClC,CAAC;IACH,CAAC,CAAC;IAEF,SAASoB,QAAQA,CAAAC,KAAA,EAAgC;MAAA,IAA/B;QAAErB;MAA0B,CAAC,GAAAqB,KAAA;MAC7CP,QAAQ,CAACd,KAAK,GAAGA,KAAK;IACxB;IAEAT,SAAS,CAAC,MAAM;MACd,MAAM+B,YAAY,GAAG9B,WAAW,CAACgB,KAAK,EAAEd,OAAO,CAACc,KAAK,CAAC;MACtDe,OAAO,CAACC,GAAG,CAAChB,KAAK,EAAEc,YAAY,CAAC;MAChC,OAAAG,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAA/B,OAAA,EAAAiC,WAAA;QAAA,SAGa,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTV,UAAU,CAACjB,KAAK,EAChBa,KAAK,EACLS,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBQ,OAAO,EAAEA,CAAA,KAAMnB,KAAK,CAACmB,OAAO,GAAG,CAAC,IAAIpB,KAAK,CAACV,IAAI;QAC9C+B,MAAM,EAAEA,CAAA,KACN,CAACrB,KAAK,CAACP,aAAa,IAAAwB,YAAA;UAAA,OAEXV,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAAChB;QAAK;MAE/B;IAKb,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTab.mjs","names":["shallowRef","computed","defineComponent","ref","useRender","chooseProps","propsFactory","YButton","pressYButtonProps","Y_TABS_KEY","pressYTabPropsOptions","text","String","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","value","tabindex","onChoice","_ref2","yButtonProps","_createVNode","_Fragment","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\r\nimport { PropType, SlotsType, computed, defineComponent, ref } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { chooseProps, propsFactory } from '../../util';\r\nimport { YButton, pressYButtonProps } from '../button';\r\nimport { Y_TABS_KEY } from './shared';\r\n\r\nimport './YTab.scss';\r\n\r\nexport const pressYTabPropsOptions = propsFactory(\r\n  {\r\n    text: String as PropType<string>,\r\n    hideIndicator: Boolean as PropType<boolean>,\r\n    indicatorColor: String as PropType<string>,\r\n    ...pressYButtonProps({\r\n      selectedClass: 'y-tab--selected',\r\n      noWave: true,\r\n    }),\r\n  },\r\n  'YTab',\r\n);\r\n\r\nexport const YTab = defineComponent({\r\n  name: 'YTab',\r\n  props: pressYTabPropsOptions(),\r\n  slots: Object as SlotsType<{\r\n    default?: any;\r\n  }>,\r\n  setup(props, { slots, attrs }) {\r\n    const selected = shallowRef(false);\r\n\r\n    const indicator$ = ref();\r\n    const indicatorStyles = computed(() => {\r\n      return {};\r\n    });\r\n    const attrsProps = computed(() => {\r\n      return {\r\n        role: 'tab',\r\n        'aria-selected': `${String(selected.value)}`,\r\n        tabindex: selected.value ? 0 : -1,\r\n      };\r\n    });\r\n\r\n    function onChoice({ value }: { value: boolean }) {\r\n      selected.value = value;\r\n    }\r\n\r\n    useRender(() => {\r\n      const yButtonProps = chooseProps(props, YButton.props);\r\n      return (\r\n        <>\r\n          <YButton\r\n            class={['y-tab']}\r\n            active={false}\r\n            {...attrsProps.value}\r\n            {...attrs}\r\n            {...yButtonProps}\r\n            injectSymbol={Y_TABS_KEY}\r\n            onChoice:selected={onChoice}\r\n          >\r\n            {{\r\n              default: () => slots.default?.() ?? props.text,\r\n              append: () =>\r\n                !props.hideIndicator && (\r\n                  <div\r\n                    ref={indicator$}\r\n                    class={['y-tab__indicator']}\r\n                    style={indicatorStyles.value}\r\n                  ></div>\r\n                ),\r\n            }}\r\n          </YButton>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {};\r\n  },\r\n});\r\n"],"mappings":";AAAA,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAA8BC,QAAQ,EAAEC,eAAe,EAAEC,GAAG,QAAQ,KAAK;AAAC,SAEjEC,SAAS;AAAA,SACTC,WAAW,EAAEC,YAAY;AAAA,SACzBC,OAAO,EAAEC,iBAAiB;AAAA,SAC1BC,UAAU;AAEnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGJ,YAAY,CAC/C;EACEK,IAAI,EAAEC,MAA0B;EAChCC,aAAa,EAAEC,OAA4B;EAC3CC,cAAc,EAAEH,MAA0B;EAC1C,GAAGJ,iBAAiB,CAAC;IACnBQ,aAAa,EAAE,iBAAiB;IAChCC,MAAM,EAAE;EACV,CAAC;AACH,CAAC,EACD,MACF,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGhB,eAAe,CAAC;EAClCiB,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEV,qBAAqB,CAAC,CAAC;EAC9BW,KAAK,EAAEC,MAEL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEH,KAAK;MAAEI;IAAM,CAAC,GAAAD,IAAA;IAC3B,MAAME,QAAQ,GAAG1B,UAAU,CAAC,KAAK,CAAC;IAElC,MAAM2B,UAAU,GAAGxB,GAAG,CAAC,CAAC;IACxB,MAAMyB,eAAe,GAAG3B,QAAQ,CAAC,MAAM;MACrC,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,MAAM4B,UAAU,GAAG5B,QAAQ,CAAC,MAAM;MAChC,OAAO;QACL6B,IAAI,EAAE,KAAK;QACX,eAAe,EAAG,GAAElB,MAAM,CAACc,QAAQ,CAACK,KAAK,CAAE,EAAC;QAC5CC,QAAQ,EAAEN,QAAQ,CAACK,KAAK,GAAG,CAAC,GAAG,CAAC;MAClC,CAAC;IACH,CAAC,CAAC;IAEF,SAASE,QAAQA,CAAAC,KAAA,EAAgC;MAAA,IAA/B;QAAEH;MAA0B,CAAC,GAAAG,KAAA;MAC7CR,QAAQ,CAACK,KAAK,GAAGA,KAAK;IACxB;IAEA3B,SAAS,CAAC,MAAM;MACd,MAAM+B,YAAY,GAAG9B,WAAW,CAACe,KAAK,EAAEb,OAAO,CAACa,KAAK,CAAC;MACtD,OAAAgB,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAA7B,OAAA,EAAA+B,WAAA;QAAA,SAGa,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTT,UAAU,CAACE,KAAK,EAChBN,KAAK,EACLU,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBM,OAAO,EAAEA,CAAA,KAAMlB,KAAK,CAACkB,OAAO,GAAG,CAAC,IAAInB,KAAK,CAACT,IAAI;QAC9C6B,MAAM,EAAEA,CAAA,KACN,CAACpB,KAAK,CAACP,aAAa,IAAAuB,YAAA;UAAA,OAEXT,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAACG;QAAK;MAE/B;IAKb,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/tab/YTab.scss

@@ -9,14 +9,17 @@
   --y-tab-active-indicator-color: var(--y-theme-primary);
   --y-tab-hover-indicator-color: var(--y-theme-outline);
 
-  box-shadow: none;
   border-radius: 0;
-  font-size: 1rem;
-  padding: 4px 8px 12px;
   color: var(--y-tab-color);
 
-  &:before {
-    background: radial-gradient(currentColor 50%, transparent);
+  &.y-button {
+    font-size: 1rem;
+    padding: 4px 8px 12px;
+    box-shadow: none;
+
+    &:before {
+      background: radial-gradient(currentColor 50%, transparent);
+    }
   }
 
   &__indicator {

package/lib/composables/choice-link.mjs

@@ -0,0 +1,13 @@
+import { nextTick, watch } from 'vue';
+export function useChoiceByLink(link, select) {
+  watch(() => link.isActive?.value, neo => {
+    if (link.isLink.value && neo && select) {
+      nextTick(() => {
+        select(true);
+      });
+    }
+  }, {
+    immediate: true
+  });
+}
+//# sourceMappingURL=choice-link.mjs.map

package/lib/composables/choice-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-link.mjs","names":["nextTick","watch","useChoiceByLink","link","select","isActive","value","neo","isLink","immediate"],"sources":["../../src/composables/choice-link.ts"],"sourcesContent":["import { nextTick, watch } from 'vue';\n\nimport type { UseLink } from './vue-router';\n\nexport function useChoiceByLink(\n  link: UseLink,\n  select?: (value: boolean, event?: Event) => void,\n) {\n  watch(\n    () => link.isActive?.value,\n    (neo) => {\n      if (link.isLink.value && neo && select) {\n        nextTick(() => {\n          select(true);\n        });\n      }\n    },\n    { immediate: true },\n  );\n}\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAIrC,OAAO,SAASC,eAAeA,CAC7BC,IAAa,EACbC,MAAgD,EAChD;EACAH,KAAK,CACH,MAAME,IAAI,CAACE,QAAQ,EAAEC,KAAK,EACzBC,GAAG,IAAK;IACP,IAAIJ,IAAI,CAACK,MAAM,CAACF,KAAK,IAAIC,GAAG,IAAIH,MAAM,EAAE;MACtCJ,QAAQ,CAAC,MAAM;QACbI,MAAM,CAAC,IAAI,CAAC;MACd,CAAC,CAAC;IACJ;EACF,CAAC,EACD;IAAEK,SAAS,EAAE;EAAK,CACpB,CAAC;AACH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "keywords": [
     "UI Library",
     "Vue"

package/types/components/button/YButton.d.ts

@@ -180,7 +180,9 @@ export declare const YButton: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {
+    link: import("../../composables/vue-router").UseLink;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'choice:selected': (choice: {
         value: boolean;
     }) => boolean;

package/types/composables/choice-link.d.ts

@@ -0,0 +1,2 @@
+import type { UseLink } from './vue-router';
+export declare function useChoiceByLink(link: UseLink, select?: (value: boolean, event?: Event) => void): void;

package/types/shims.d.ts

@@ -1,81 +1,81 @@
-import * as vue from 'vue';
-import {
-  YAlert,
-  YApp,
-  YButton,
-  YCard,
-  YCardBody,
-  YCardFooter,
-  YCardHeader,
-  YCheckbox,
-  YChip,
-  YDataTable,
-  YDataTableServer,
-  YDialog,
-  YDividePanel,
-  YDropdown,
-  YExpandHTransition,
-  YExpandVTransition,
-  YFieldInput,
-  YForm,
-  YInput,
-  YInputCheckbox,
-  YLayer,
-  YList,
-  YListItem,
-  YMenu,
-  YPagination,
-  YProgressBar,
-  YSelect,
-  YSnackbar,
-  YSpinnerRing,
-  YSwitch,
-  YTab,
-  YTable,
-  YTabs,
-  YTooltip,
-  YTreeView,
-  YTreeViewNode,
-} from 'yuyeon/types/components';
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    // @define-components
-    YApp: typeof YApp;
-    YButton: typeof YButton;
-    YChip: typeof YChip;
-    YInput: typeof YInput;
-    YFieldInput: typeof YFieldInput;
-    YForm: typeof YForm;
-    YCard: typeof YCard;
-    YCardBody: typeof YCardBody;
-    YCardHeader: typeof YCardHeader;
-    YCardFooter: typeof YCardFooter;
-    YDialog: typeof YDialog;
-    YLayer: typeof YLayer;
-    YSnackbar: typeof YSnackbar;
-    YProgressBar: typeof YProgressBar;
-    YSpinnerRing: typeof YSpinnerRing;
-    YTooltip: typeof YTooltip;
-    YExpandVTransition: typeof YExpandVTransition;
-    YExpandHTransition: typeof YExpandHTransition;
-    YDividePanel: typeof YDividePanel;
-    YList: typeof YList;
-    YListItem: typeof YListItem;
-    YTreeView: typeof YTreeView;
-    YTreeViewNode: typeof YTreeViewNode;
-    YDataTable: typeof YDataTable;
-    YTable: typeof YTable;
-    YDataTableServer: typeof YDataTableServer;
-    YMenu: typeof YMenu;
-    YPagination: typeof YPagination;
-    YInputCheckbox: typeof YInputCheckbox;
-    YCheckbox: typeof YCheckbox;
-    YSwitch: typeof YSwitch;
-    YDropdown: typeof YDropdown;
-    YSelect: typeof YSelect;
-    YAlert: typeof YAlert;
-    YTabs: typeof YTabs;
-    YTab: typeof YTab;
-  }
-}
+import * as vue from 'vue';
+import {
+  YAlert,
+  YApp,
+  YButton,
+  YCard,
+  YCardBody,
+  YCardFooter,
+  YCardHeader,
+  YCheckbox,
+  YChip,
+  YDataTable,
+  YDataTableServer,
+  YDialog,
+  YDividePanel,
+  YDropdown,
+  YExpandHTransition,
+  YExpandVTransition,
+  YFieldInput,
+  YForm,
+  YInput,
+  YInputCheckbox,
+  YLayer,
+  YList,
+  YListItem,
+  YMenu,
+  YPagination,
+  YProgressBar,
+  YSelect,
+  YSnackbar,
+  YSpinnerRing,
+  YSwitch,
+  YTab,
+  YTable,
+  YTabs,
+  YTooltip,
+  YTreeView,
+  YTreeViewNode,
+} from 'yuyeon/types/components';
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    // @define-components
+    YApp: typeof YApp;
+    YButton: typeof YButton;
+    YChip: typeof YChip;
+    YInput: typeof YInput;
+    YFieldInput: typeof YFieldInput;
+    YForm: typeof YForm;
+    YCard: typeof YCard;
+    YCardBody: typeof YCardBody;
+    YCardHeader: typeof YCardHeader;
+    YCardFooter: typeof YCardFooter;
+    YDialog: typeof YDialog;
+    YLayer: typeof YLayer;
+    YSnackbar: typeof YSnackbar;
+    YProgressBar: typeof YProgressBar;
+    YSpinnerRing: typeof YSpinnerRing;
+    YTooltip: typeof YTooltip;
+    YExpandVTransition: typeof YExpandVTransition;
+    YExpandHTransition: typeof YExpandHTransition;
+    YDividePanel: typeof YDividePanel;
+    YList: typeof YList;
+    YListItem: typeof YListItem;
+    YTreeView: typeof YTreeView;
+    YTreeViewNode: typeof YTreeViewNode;
+    YDataTable: typeof YDataTable;
+    YTable: typeof YTable;
+    YDataTableServer: typeof YDataTableServer;
+    YMenu: typeof YMenu;
+    YPagination: typeof YPagination;
+    YInputCheckbox: typeof YInputCheckbox;
+    YCheckbox: typeof YCheckbox;
+    YSwitch: typeof YSwitch;
+    YDropdown: typeof YDropdown;
+    YSelect: typeof YSelect;
+    YAlert: typeof YAlert;
+    YTabs: typeof YTabs;
+    YTab: typeof YTab;
+  }
+}