yuyeon 0.0.26 → 0.0.28

package/lib/components/alert/YAlert.mjs

@@ -1,5 +1,5 @@
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useRender } from "../../composables/component.mjs";
 import { toKebabCase } from "../../util/string.mjs";
 import { YPlate } from "../plate/index.mjs";
@@ -14,24 +14,59 @@ const YAlertPropOptions = {
   outlineColor: String
 };
 
-/**
- * #  Component
+/**
+ * #  Component
  */
 export const YAlert = defineComponent({
   name: NAME,
   props: {
     ...YAlertPropOptions
   },
-  setup(looseProps, _ref) {
+  setup(props, _ref) {
     let {
       slots
     } = _ref;
     const el$ = ref();
+    const variations = computed(() => {
+      const {
+        variation
+      } = props;
+      if (variation) {
+        return variation.split(',').map(value => {
+          return value.trim();
+        }).filter(v => !!v);
+      }
+      return [];
+    });
+    const cssVariables = computed(() => {
+      const ret = {};
+      if (props.color) {
+        ret['--y-alert-surface-color'] = props.color;
+        if (variations.value.includes('filled')) {
+          ret['--y-alert-surface-opacity'] = 1;
+        } else {
+          ret['--y-alert-text-color'] = props.color;
+        }
+        if (props.textColor) {
+          ret['--y-alert-text-color'] = props.textColor;
+        }
+        if (!props.outlineColor && !props.semantic) {
+          ret['--y-alert-outline-color'] = props.color;
+        }
+      }
+      if (props.outlineColor) {
+        ret['--y-alert-outline-color'] = props.outlineColor;
+      }
+      return ret;
+    });
     useRender(() => _withDirectives(_createVNode("div", {
       "ref": el$,
       "class": [KEBAB_NAME, {
-        [`y-alert--${looseProps.semantic}`]: looseProps.semantic
-      }]
+        [`y-alert--${props.semantic}`]: props.semantic,
+        'y-alert--filled': variations.value.includes('filled'),
+        'y-alert--outlined': variations.value.includes('outlined')
+      }],
+      "style": cssVariables.value
     }, [_createVNode(YPlate, null, null), slots.leading && _createVNode("div", {
       "class": ['y-alert__leading']
     }, [slots.leading()]), _createVNode("div", {

package/lib/components/alert/YAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAlert.mjs","names":["defineComponent","ref","useRender","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","setup","looseProps","_ref","slots","el$","_withDirectives","_createVNode","leading","title","default","trailing","_resolveDirective"],"sources":["../../../src/components/alert/YAlert.tsx"],"sourcesContent":["import { PropType, defineComponent, ref } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { toKebabCase } from '../../util/string';\nimport { YPlate } from '../plate';\n\nimport './YAlert.scss';\n\nconst NAME = 'YAlert';\nconst KEBAB_NAME = toKebabCase(NAME);\n\nconst YAlertPropOptions = {\n  semantic: String as PropType<\n    'info' | 'warning' | 'success' | 'error' | string\n  >,\n  variation: String as PropType<'outlined' | 'filled' | string>,\n  color: String as PropType<string>,\n  textColor: String as PropType<string>,\n  outlineColor: String as PropType<string>,\n};\n\n/**\n * #  Component\n */\nexport const YAlert = defineComponent({\n  name: NAME,\n  props: {\n    ...YAlertPropOptions,\n  },\n  setup(looseProps, { slots }) {\n    const el$ = ref<HTMLElement>();\n\n    useRender(() => (\n      <div\n        ref={el$}\n        class={[\n          KEBAB_NAME,\n          { [`y-alert--${looseProps.semantic}`]: looseProps.semantic },\n        ]}\n        v-theme\n      >\n        <YPlate></YPlate>\n        {slots.leading && (\n          <div class={['y-alert__leading']}>{slots.leading()}</div>\n        )}\n        <div class={['y-alert__content']}>\n          {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\n          {slots.default?.()}\n        </div>\n        {slots.trailing && (\n          <div class={['y-alert__trailing']}>{slots.trailing()}</div>\n        )}\n      </div>\n    ));\n  },\n});\n\nexport type YAlert = InstanceType<typeof YAlert>;\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,GAAG,QAAQ,KAAK;AAAC,SAE5CC,SAAS;AAAA,SACTC,WAAW;AAAA,SACXC,MAAM;AAEf;AAEA,MAAMC,IAAI,GAAG,QAAQ;AACrB,MAAMC,UAAU,GAAGH,WAAW,CAACE,IAAI,CAAC;AAEpC,MAAME,iBAAiB,GAAG;EACxBC,QAAQ,EAAEC,MAET;EACDC,SAAS,EAAED,MAAkD;EAC7DE,KAAK,EAAEF,MAA0B;EACjCG,SAAS,EAAEH,MAA0B;EACrCI,YAAY,EAAEJ;AAChB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMK,MAAM,GAAGd,eAAe,CAAC;EACpCe,IAAI,EAAEV,IAAI;EACVW,KAAK,EAAE;IACL,GAAGT;EACL,CAAC;EACDU,KAAKA,CAACC,UAAU,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACzB,MAAME,GAAG,GAAGpB,GAAG,CAAc,CAAC;IAE9BC,SAAS,CAAC,MAAAoB,eAAA,CAAAC,YAAA;MAAA,OAEDF,GAAG;MAAA,SACD,CACLf,UAAU,EACV;QAAE,CAAE,YAAWY,UAAU,CAACV,QAAS,EAAC,GAAGU,UAAU,CAACV;MAAS,CAAC;IAC7D,IAAAe,YAAA,CAAAnB,MAAA,eAIAgB,KAAK,CAACI,OAAO,IAAAD,YAAA;MAAA,SACA,CAAC,kBAAkB;IAAC,IAAGH,KAAK,CAACI,OAAO,CAAC,CAAC,EACnD,EAAAD,YAAA;MAAA,SACW,CAAC,kBAAkB;IAAC,IAC7BH,KAAK,CAACK,KAAK,IAAAF,YAAA;MAAA,SAAgB,CAAC,gBAAgB;IAAC,IAAGH,KAAK,CAACK,KAAK,CAAC,CAAC,EAAO,EACpEL,KAAK,CAACM,OAAO,GAAG,CAAC,IAEnBN,KAAK,CAACO,QAAQ,IAAAJ,YAAA;MAAA,SACD,CAAC,mBAAmB;IAAC,IAAGH,KAAK,CAACO,QAAQ,CAAC,CAAC,EACrD,MAAAC,iBAAA,YAEJ,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YAlert.mjs","names":["computed","defineComponent","ref","useRender","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","setup","_ref","slots","el$","variations","split","map","value","trim","filter","v","cssVariables","ret","includes","_withDirectives","_createVNode","leading","title","default","trailing","_resolveDirective"],"sources":["../../../src/components/alert/YAlert.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { toKebabCase } from '../../util/string';\r\nimport { YPlate } from '../plate';\r\n\r\nimport './YAlert.scss';\r\n\r\nconst NAME = 'YAlert';\r\nconst KEBAB_NAME = toKebabCase(NAME);\r\n\r\nconst YAlertPropOptions = {\r\n  semantic: String as PropType<\r\n    'info' | 'warning' | 'success' | 'error' | string\r\n  >,\r\n  variation: String as PropType<'outlined' | 'filled' | string>,\r\n  color: String as PropType<string>,\r\n  textColor: String as PropType<string>,\r\n  outlineColor: String as PropType<string>,\r\n};\r\n\r\n/**\r\n * #  Component\r\n */\r\nexport const YAlert = defineComponent({\r\n  name: NAME,\r\n  props: {\r\n    ...YAlertPropOptions,\r\n  },\r\n  setup(props, { slots }) {\r\n    const el$ = ref<HTMLElement>();\r\n\r\n    const variations = computed(() => {\r\n      const { variation } = props;\r\n      if (variation) {\r\n        return variation\r\n          .split(',')\r\n          .map((value) => {\r\n            return value.trim();\r\n          })\r\n          .filter((v) => !!v);\r\n      }\r\n      return [];\r\n    });\r\n\r\n    const cssVariables = computed(() => {\r\n      const ret: Record<string, string | number> = {};\r\n\r\n      if (props.color) {\r\n        ret['--y-alert-surface-color'] = props.color;\r\n        if (variations.value.includes('filled')) {\r\n          ret['--y-alert-surface-opacity'] = 1;\r\n        } else {\r\n          ret['--y-alert-text-color'] = props.color;\r\n        }\r\n        if (props.textColor) {\r\n          ret['--y-alert-text-color'] = props.textColor;\r\n        }\r\n        if (!props.outlineColor && !props.semantic) {\r\n          ret['--y-alert-outline-color'] = props.color;\r\n        }\r\n      }\r\n      if (props.outlineColor) {\r\n        ret['--y-alert-outline-color'] = props.outlineColor;\r\n      }\r\n      return ret;\r\n    })\r\n\r\n    useRender(() => (\r\n      <div\r\n        ref={el$}\r\n        class={[\r\n          KEBAB_NAME,\r\n          {\r\n            [`y-alert--${props.semantic}`]: props.semantic,\r\n            'y-alert--filled': variations.value.includes('filled'),\r\n            'y-alert--outlined': variations.value.includes('outlined'),\r\n          },\r\n        ]}\r\n        style={cssVariables.value}\r\n        v-theme\r\n      >\r\n        <YPlate></YPlate>\r\n        {slots.leading && (\r\n          <div class={['y-alert__leading']}>{slots.leading()}</div>\r\n        )}\r\n        <div class={['y-alert__content']}>\r\n          {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\r\n          {slots.default?.()}\r\n        </div>\r\n        {slots.trailing && (\r\n          <div class={['y-alert__trailing']}>{slots.trailing()}</div>\r\n        )}\r\n      </div>\r\n    ));\r\n  },\r\n});\r\n\r\nexport type YAlert = InstanceType<typeof YAlert>;\r\n"],"mappings":"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"}

package/lib/components/alert/YAlert.scss

@@ -22,10 +22,12 @@
     flex: 1 1;
     min-width: 0;
     padding-top: 2px;
+    position: relative;
   }
 
   &__leading, &__trailing {
     flex: 0 0 auto;
+    position: relative;
   }
 
   &__leading {
@@ -38,37 +40,37 @@
   }
 
   .y-plate {
-    background: var(--y-alert-surface-color);
-    opacity: var(--y-alert-surface-opacity);
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background: var(--y-alert-surface-color);
+      opacity: var(--y-alert-surface-opacity);
+    }
   }
 
-  &--info {
-    --y-alert-text-color: var(--y-theme-info);
-    --y-alert-surface-color: var(--y-theme-info);
+  &--outlined {
+    .y-plate {
+      border: 1px solid var(--y-alert-outline-color);
+    }
   }
 
-  &--success {
-    --y-alert-text-color: var(--y-theme-success);
-    --y-alert-surface-color: var(--y-theme-success);
-  }
+  $semantics: ('info', 'success', 'warning', 'error');
 
-  &--warning {
-    --y-alert-text-color: var(--y-theme-warning);
-    --y-alert-surface-color: var(--y-theme-warning);
+  @mixin defineSemantic($name) {
+    &--#{$name} {
+      --y-alert-text-color: var(--y-theme-#{$name});
+      --y-alert-surface-color: var(--y-theme-#{$name});
+      --y-alert-outline-color: var(--y-theme-#{$name});
+    }
   }
 
-  &--error {
-    --y-alert-text-color: var(--y-theme-error);
-    --y-alert-surface-color: var(--y-theme-error);
+  @each $name in $semantics {
+    @include defineSemantic($name);
   }
 
-  &--filled {
-    --y-alert-surface-opacity: 1;
-  }
 
-  &--outlined {
-    .y-plate {
-      border: 1px solid var(--y-alert-outline-color);
-    }
-  }
 }

package/lib/components/button/YButton.mjs

@@ -1,17 +1,28 @@
-import { defineComponent, h, withDirectives } from 'vue';
+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";
 import { isColorValue } from "../../util/color/index.mjs";
-import { getSlot, propsFactory } from "../../util/vue-component.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
 import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
-/**
- * Style
+import { Y_TOGGLE_BUTTON_KEY } from "../toggle-button/index.mjs";
+/**
+ * Style
  */
 import "./YButton.scss";
 const NAME = 'y-button';
 export const pressYButtonProps = propsFactory({
   loading: Boolean,
-  disabled: {
-    type: Boolean
+  active: {
+    type: Boolean,
+    default: undefined
+  },
+  injectSymbol: {
+    type: null,
+    default: Y_TOGGLE_BUTTON_KEY
   },
   //
   variation: {
@@ -31,9 +42,6 @@ export const pressYButtonProps = propsFactory({
     type: Boolean,
     default: false
   },
-  text: {
-    type: Boolean
-  },
   //
   color: {
     type: String
@@ -41,108 +49,130 @@ export const pressYButtonProps = propsFactory({
   noWave: {
     type: Boolean,
     default: false
-  }
+  },
+  ...pressVueRouterPropsOptions(),
+  ...pressChoiceItemPropsOptions()
 }, 'YButton');
 export const YButton = defineComponent({
   name: 'YButton',
   directives: {
     PlateWave
   },
-  props: {
-    ...pressYButtonProps()
+  props: pressYButtonProps(),
+  emits: {
+    'choice:selected': choice => true
   },
-  computed: {
-    variations() {
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _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;
+      }
+      if (link.isLink.value) {
+        return link.isActive?.value;
+      }
+      return choice?.isSelected.value;
+    });
+    const variations = computed(() => {
       const {
         variation
-      } = this;
-      if (variation) {
+      } = props;
+      if (typeof variation === 'string') {
         return variation.split(',').map(value => {
           return value.trim();
         });
       }
       return [];
-    },
-    //
-    classes() {
+    });
+    const classes = computed(() => {
       const {
-        variations,
         outlined,
         rounded,
         filled,
-        text,
         small,
         icon
-      } = this;
+      } = props;
       return {
-        [`${NAME}--outlined`]: variations.includes('outlined') || outlined,
-        [`${NAME}--rounded`]: variations.includes('rounded') || rounded,
-        [`${NAME}--filled`]: variations.includes('filled') || filled,
-        [`${NAME}--text`]: variations.includes('text') || text,
-        [`${NAME}--small`]: variations.includes('small') || small,
-        [`${NAME}--icon`]: variations.includes('icon') || icon,
-        [`${NAME}--color`]: this.color,
-        [`${NAME}--loading`]: this.loading,
-        [`${NAME}--disabled`]: this.disabled
+        [`${NAME}--outlined`]: variations.value.includes('outlined') || outlined,
+        [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,
+        [`${NAME}--filled`]: variations.value.includes('filled') || filled,
+        [`${NAME}--text`]: variations.value.includes('text'),
+        [`${NAME}--small`]: variations.value.includes('small') || small,
+        [`${NAME}--icon`]: variations.value.includes('icon') || icon,
+        [`${NAME}--color`]: props.color,
+        [`${NAME}--loading`]: props.loading,
+        [`${NAME}--disabled`]: props.disabled,
+        [`${NAME}--active`]: isActive.value
       };
-    },
-    styles() {
+    });
+    const styles = computed(() => {
       let {
         color
-      } = this;
+      } = props;
       let textColor;
       if (color && !isColorValue(color)) {
         color = `var(--y-theme-${color})`;
-        textColor = `var(--y-theme-on-${this.color})`;
+        textColor = `var(--y-theme-on-${props.color})`;
       }
       return {
         [`--y-button__color`]: color,
         [`--y-button__text-color`]: textColor
       };
-    }
-  },
-  methods: {
-    createContent() {
-      const defaultSlot = getSlot(this, 'default');
-      const children = [];
-      if (this.loading) {
-        children.push(h(YSpinnerRing, {
-          width: '24',
-          height: '24'
-        }));
-      }
-      children.push(defaultSlot);
-      return h('span', {
-        class: 'y-button__content'
-      }, children);
-    },
-    getClasses() {
-      return this.classes;
-    },
+    });
+    const isDisabled = computed(() => {
+      return choice?.disabled.value || props.disabled;
+    });
+
     /// Events
-    onClick(e) {
-      e.preventDefault();
-      if (this.loading) {
+    function onClick(e) {
+      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();
     }
-  },
-  render() {
-    const {
-      onClick,
-      styles,
-      noWave,
-      loading
-    } = this;
-    return withDirectives(h('button', {
-      class: {
-        ...this.getClasses(),
-        [`${NAME}`]: true
-      },
-      style: styles,
-      onClick,
-      '^disabled': this.disabled ? true : undefined
-    }, this.createContent()), [[PlateWave, !noWave && !loading]]);
+    useRender(() => {
+      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
+      }, {
+        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":["defineComponent","h","withDirectives","PlateWave","isColorValue","getSlot","propsFactory","YSpinnerRing","NAME","pressYButtonProps","loading","Boolean","disabled","type","variation","String","small","icon","outlined","default","rounded","filled","text","color","noWave","YButton","name","directives","props","computed","variations","split","map","value","trim","classes","includes","styles","textColor","methods","createContent","defaultSlot","children","push","width","height","class","getClasses","onClick","e","preventDefault","render","style","undefined"],"sources":["../../../src/components/button/YButton.ts"],"sourcesContent":["import type { PropType, VNodeArrayChildren } from 'vue';\r\nimport { defineComponent, h, withDirectives } from 'vue';\r\n\r\nimport { PlateWave } from '../../directives/plate-wave';\r\nimport { isColorValue } from '../../util/color';\r\nimport { getSlot, propsFactory } from '../../util/vue-component';\r\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\r\n\r\n/**\r\n * Style\r\n */\r\nimport './YButton.scss';\r\n\r\nconst NAME = 'y-button';\r\n\r\nexport const pressYButtonProps = propsFactory(\r\n  {\r\n    loading: Boolean,\r\n    disabled: {\r\n      type: Boolean,\r\n    },\r\n    //\r\n    variation: {\r\n      type: String as PropType<string>,\r\n    },\r\n    small: Boolean,\r\n    icon: Boolean,\r\n    outlined: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    rounded: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    filled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    text: {\r\n      type: Boolean,\r\n    },\r\n    //\r\n    color: {\r\n      type: String,\r\n    },\r\n    noWave: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  'YButton',\r\n);\r\n\r\nexport const YButton = defineComponent({\r\n  name: 'YButton',\r\n  directives: {\r\n    PlateWave,\r\n  },\r\n  props: {\r\n    ...pressYButtonProps(),\r\n  },\r\n  computed: {\r\n    variations(): any[] {\r\n      const { variation } = this;\r\n      if (variation) {\r\n        return variation.split(',').map((value) => {\r\n          return value.trim();\r\n        });\r\n      }\r\n      return [];\r\n    },\r\n    //\r\n    classes() {\r\n      const { variations, outlined, rounded, filled, text, small, icon } = this;\r\n      return {\r\n        [`${NAME}--outlined`]: variations.includes('outlined') || outlined,\r\n        [`${NAME}--rounded`]: variations.includes('rounded') || rounded,\r\n        [`${NAME}--filled`]: variations.includes('filled') || filled,\r\n        [`${NAME}--text`]: variations.includes('text') || text,\r\n        [`${NAME}--small`]: variations.includes('small') || small,\r\n        [`${NAME}--icon`]: variations.includes('icon') || icon,\r\n        [`${NAME}--color`]: this.color,\r\n        [`${NAME}--loading`]: this.loading,\r\n        [`${NAME}--disabled`]: this.disabled,\r\n      };\r\n    },\r\n    styles(): Record<string, any> {\r\n      let { color } = this;\r\n      let textColor: string | undefined;\r\n      if (color && !isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n        textColor = `var(--y-theme-on-${this.color})`;\r\n      }\r\n      return {\r\n        [`--y-button__color`]: color,\r\n        [`--y-button__text-color`]: textColor,\r\n      };\r\n    },\r\n  },\r\n  methods: {\r\n    createContent() {\r\n      const defaultSlot = getSlot(this, 'default');\r\n      const children: VNodeArrayChildren = [];\r\n      if (this.loading) {\r\n        children.push(h(YSpinnerRing, { width: '24', height: '24' }));\r\n      }\r\n      children.push(defaultSlot);\r\n      return h('span', { class: 'y-button__content' }, children);\r\n    },\r\n    getClasses() {\r\n      return this.classes;\r\n    },\r\n    /// Events\r\n    onClick(e: MouseEvent) {\r\n      e.preventDefault();\r\n      if (this.loading) {\r\n        return;\r\n      }\r\n    },\r\n  },\r\n  render() {\r\n    const { onClick, styles, noWave, loading } = this;\r\n    return withDirectives(\r\n      h(\r\n        'button',\r\n        {\r\n          class: {\r\n            ...this.getClasses(),\r\n            [`${NAME}`]: true,\r\n          },\r\n          style: styles,\r\n          onClick,\r\n          '^disabled': this.disabled ? true : undefined,\r\n        },\r\n        this.createContent(),\r\n      ),\r\n      [[PlateWave, !noWave && !loading]],\r\n    );\r\n  },\r\n});\r\n\r\nexport type YButton = InstanceType<typeof YButton>;\r\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/checkbox/YCheckbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YCheckbox.mjs","names":["computed","defineComponent","ref","withModifiers","useRender","getUid","YInputCheckbox","name","components","model","prop","event","emits","props","inputValue","Boolean","Array","value","String","Number","Object","label","reverse","icon","type","color","default","disabled","readonly","setup","_ref","emit","slots","focused","innerValue","counterId","toString","inputId","onFocus","e","onBlur","onClick","inputByValue","isArray","found","find","inp","undefined","classes","computedIcon","isMultipleInput","multipleInputIndex","findIndex","v","_createVNode","leading","stopPropagation","_len","arguments","length","args","_key","_len2","_key2","trailing","created","watch","handler","immediate"],"sources":["../../../src/components/checkbox/YCheckbox.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref, withModifiers } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { getUid } from '../../util/vue-component';\n\nimport './YCheckbox.scss';\nimport YInputCheckbox from './YInputCheckbox';\n\nexport default defineComponent({\n  name: 'YCheckbox',\n  components: { YInputCheckbox },\n  model: {\n    prop: 'inputValue',\n    event: 'change',\n  },\n  emits: ['focus', 'blur', 'change'],\n  props: {\n    inputValue: [Boolean, Array] as PropType<boolean | any[]>,\n    value: [String, Number, Object] as PropType<any>,\n    label: String as PropType<string>,\n    reverse: Boolean as PropType<boolean>,\n    icon: {\n      type: [Object, String] as PropType<\n        { checked?: string; unchecked?: string } | string\n      >,\n    },\n    color: {\n      type: String as PropType<string>,\n      default: () => 'primary',\n    },\n    disabled: Boolean as PropType<boolean>,\n    readonly: Boolean as PropType<boolean>,\n  },\n  setup(props, { emit, slots }) {\n    const focused = ref(false);\n    const innerValue = ref(false);\n    const counterId = (getUid() ?? '').toString();\n    const inputId = `input-${counterId}`;\n\n    function onFocus(e: FocusEvent) {\n      focused.value = true;\n      emit('focus', e);\n    }\n\n    function onBlur(e: FocusEvent) {\n      focused.value = false;\n      emit('blur', e);\n    }\n\n    function onClick(e: Event, ...args: any[]) {\n      if (props.disabled || props.readonly) return;\n      innerValue.value = !innerValue.value;\n      emit('change', innerValue.value, e);\n    }\n\n    function inputByValue() {\n      if (Array.isArray(props.inputValue)) {\n        const found = props.inputValue?.find((inp: any) => inp === props.value);\n\n        if (found !== undefined) {\n          innerValue.value = true;\n        } else {\n          innerValue.value = false;\n        }\n      } else if (typeof props.inputValue === 'boolean') {\n        innerValue.value = props.inputValue;\n      }\n    }\n\n    const classes = computed<Record<string, boolean>>(() => {\n      const { reverse, disabled, readonly } = props;\n      return {\n        'y-checkbox': true,\n        'y-checkbox--reverse': !!reverse,\n        'y-checkbox--focused': focused.value,\n        'y-checkbox--disabled': !!disabled,\n        'y-checkbox--readonly': !!readonly,\n      };\n    });\n\n    const computedIcon = computed<string | undefined>(() => {\n      if (typeof props.icon === 'string') {\n        return props.icon;\n      }\n      return undefined;\n    });\n\n    const isMultipleInput = computed<boolean>(() => {\n      return Array.isArray(props.inputValue);\n    });\n\n    const multipleInputIndex = computed<number>(() => {\n      if (!isMultipleInput.value) {\n        return -1;\n      }\n      return (props.inputValue as any[]).findIndex(\n        (v: any) => v === props.value,\n      );\n    });\n\n    useRender(() => {\n      return (\n        <div class={[{...classes.value}]}>\n          {slots.leading?.()}\n          <div class=\"y-checkbox__slot\">\n            <YInputCheckbox\n              onClick={(e: Event, ...args: any[]) => {\n                e.stopPropagation();\n                onClick(e, ...args);\n              }}\n              onFocus={onFocus}\n              onBlur={onBlur}\n              id={counterId}\n              value={innerValue.value}\n              icon={computedIcon.value}\n              color={props.color}\n              disabled={props.disabled}\n              readonly={props.readonly}\n            >\n              {slots.icon && {\n                icon: (...args: any[]) => slots.icon?.(...args),\n              }}\n            </YInputCheckbox>\n            <label\n              onClick={withModifiers(() => {}, ['stop'])}\n              class=\"y-checkbox__label\"\n              for={inputId}\n            >\n              {slots.label ? slots.label?.() : props.label}\n            </label>\n          </div>\n          {slots.trailing?.()}\n        </div>\n      );\n    });\n\n    return {\n      innerValue,\n      inputByValue,\n    };\n  },\n  created() {\n    if (Array.isArray(this.inputValue)) {\n      this.inputByValue();\n    } else {\n      this.innerValue = !!this.inputValue;\n    }\n  },\n  watch: {\n    inputValue: {\n      handler() {\n        this.inputByValue();\n      },\n      immediate: true,\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YCheckbox.mjs","names":["computed","defineComponent","ref","withModifiers","useRender","getUid","YInputCheckbox","name","components","model","prop","event","emits","props","inputValue","Boolean","Array","value","String","Number","Object","label","reverse","icon","type","color","default","disabled","readonly","setup","_ref","emit","slots","focused","innerValue","counterId","toString","inputId","onFocus","e","onBlur","onClick","inputByValue","isArray","found","find","inp","undefined","classes","computedIcon","isMultipleInput","multipleInputIndex","findIndex","v","_createVNode","leading","stopPropagation","_len","arguments","length","args","_key","_len2","_key2","trailing","created","watch","handler","immediate"],"sources":["../../../src/components/checkbox/YCheckbox.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref, withModifiers } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { getUid } from '../../util/vue-component';\r\n\r\nimport './YCheckbox.scss';\r\nimport YInputCheckbox from './YInputCheckbox';\r\n\r\nexport default defineComponent({\r\n  name: 'YCheckbox',\r\n  components: { YInputCheckbox },\r\n  model: {\r\n    prop: 'inputValue',\r\n    event: 'change',\r\n  },\r\n  emits: ['focus', 'blur', 'change'],\r\n  props: {\r\n    inputValue: [Boolean, Array] as PropType<boolean | any[]>,\r\n    value: [String, Number, Object] as PropType<any>,\r\n    label: String as PropType<string>,\r\n    reverse: Boolean as PropType<boolean>,\r\n    icon: {\r\n      type: [Object, String] as PropType<\r\n        { checked?: string; unchecked?: string } | string\r\n      >,\r\n    },\r\n    color: {\r\n      type: String as PropType<string>,\r\n      default: () => 'primary',\r\n    },\r\n    disabled: Boolean as PropType<boolean>,\r\n    readonly: Boolean as PropType<boolean>,\r\n  },\r\n  setup(props, { emit, slots }) {\r\n    const focused = ref(false);\r\n    const innerValue = ref(false);\r\n    const counterId = (getUid() ?? '').toString();\r\n    const inputId = `input-${counterId}`;\r\n\r\n    function onFocus(e: FocusEvent) {\r\n      focused.value = true;\r\n      emit('focus', e);\r\n    }\r\n\r\n    function onBlur(e: FocusEvent) {\r\n      focused.value = false;\r\n      emit('blur', e);\r\n    }\r\n\r\n    function onClick(e: Event, ...args: any[]) {\r\n      if (props.disabled || props.readonly) return;\r\n      innerValue.value = !innerValue.value;\r\n      emit('change', innerValue.value, e);\r\n    }\r\n\r\n    function inputByValue() {\r\n      if (Array.isArray(props.inputValue)) {\r\n        const found = props.inputValue?.find((inp: any) => inp === props.value);\r\n\r\n        if (found !== undefined) {\r\n          innerValue.value = true;\r\n        } else {\r\n          innerValue.value = false;\r\n        }\r\n      } else if (typeof props.inputValue === 'boolean') {\r\n        innerValue.value = props.inputValue;\r\n      }\r\n    }\r\n\r\n    const classes = computed<Record<string, boolean>>(() => {\r\n      const { reverse, disabled, readonly } = props;\r\n      return {\r\n        'y-checkbox': true,\r\n        'y-checkbox--reverse': !!reverse,\r\n        'y-checkbox--focused': focused.value,\r\n        'y-checkbox--disabled': !!disabled,\r\n        'y-checkbox--readonly': !!readonly,\r\n      };\r\n    });\r\n\r\n    const computedIcon = computed<string | undefined>(() => {\r\n      if (typeof props.icon === 'string') {\r\n        return props.icon;\r\n      }\r\n      return undefined;\r\n    });\r\n\r\n    const isMultipleInput = computed<boolean>(() => {\r\n      return Array.isArray(props.inputValue);\r\n    });\r\n\r\n    const multipleInputIndex = computed<number>(() => {\r\n      if (!isMultipleInput.value) {\r\n        return -1;\r\n      }\r\n      return (props.inputValue as any[]).findIndex(\r\n        (v: any) => v === props.value,\r\n      );\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <div class={[{...classes.value}]}>\r\n          {slots.leading?.()}\r\n          <div class=\"y-checkbox__slot\">\r\n            <YInputCheckbox\r\n              onClick={(e: Event, ...args: any[]) => {\r\n                e.stopPropagation();\r\n                onClick(e, ...args);\r\n              }}\r\n              onFocus={onFocus}\r\n              onBlur={onBlur}\r\n              id={counterId}\r\n              value={innerValue.value}\r\n              icon={computedIcon.value}\r\n              color={props.color}\r\n              disabled={props.disabled}\r\n              readonly={props.readonly}\r\n            >\r\n              {slots.icon && {\r\n                icon: (...args: any[]) => slots.icon?.(...args),\r\n              }}\r\n            </YInputCheckbox>\r\n            <label\r\n              onClick={withModifiers(() => {}, ['stop'])}\r\n              class=\"y-checkbox__label\"\r\n              for={inputId}\r\n            >\r\n              {slots.label ? slots.label?.() : props.label}\r\n            </label>\r\n          </div>\r\n          {slots.trailing?.()}\r\n        </div>\r\n      );\r\n    });\r\n\r\n    return {\r\n      innerValue,\r\n      inputByValue,\r\n    };\r\n  },\r\n  created() {\r\n    if (Array.isArray(this.inputValue)) {\r\n      this.inputByValue();\r\n    } else {\r\n      this.innerValue = !!this.inputValue;\r\n    }\r\n  },\r\n  watch: {\r\n    inputValue: {\r\n      handler() {\r\n        this.inputByValue();\r\n      },\r\n      immediate: true,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";AAAA,SAAmBA,QAAQ,EAAEC,eAAe,EAAEC,GAAG,EAAEC,aAAa,QAAQ,KAAK;AAAC,SAErEC,SAAS;AAAA,SACTC,MAAM;AAEf;AAA0B,OACnBC,cAAc;AAErB,eAAeL,eAAe,CAAC;EAC7BM,IAAI,EAAE,WAAW;EACjBC,UAAU,EAAE;IAAEF;EAAe,CAAC;EAC9BG,KAAK,EAAE;IACLC,IAAI,EAAE,YAAY;IAClBC,KAAK,EAAE;EACT,CAAC;EACDC,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC;EAClCC,KAAK,EAAE;IACLC,UAAU,EAAE,CAACC,OAAO,EAAEC,KAAK,CAA8B;IACzDC,KAAK,EAAE,CAACC,MAAM,EAAEC,MAAM,EAAEC,MAAM,CAAkB;IAChDC,KAAK,EAAEH,MAA0B;IACjCI,OAAO,EAAEP,OAA4B;IACrCQ,IAAI,EAAE;MACJC,IAAI,EAAE,CAACJ,MAAM,EAAEF,MAAM;IAGvB,CAAC;IACDO,KAAK,EAAE;MACLD,IAAI,EAAEN,MAA0B;MAChCQ,OAAO,EAAEA,CAAA,KAAM;IACjB,CAAC;IACDC,QAAQ,EAAEZ,OAA4B;IACtCa,QAAQ,EAAEb;EACZ,CAAC;EACDc,KAAKA,CAAChB,KAAK,EAAAiB,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC1B,MAAMG,OAAO,GAAG/B,GAAG,CAAC,KAAK,CAAC;IAC1B,MAAMgC,UAAU,GAAGhC,GAAG,CAAC,KAAK,CAAC;IAC7B,MAAMiC,SAAS,GAAG,CAAC9B,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE+B,QAAQ,CAAC,CAAC;IAC7C,MAAMC,OAAO,GAAI,SAAQF,SAAU,EAAC;IAEpC,SAASG,OAAOA,CAACC,CAAa,EAAE;MAC9BN,OAAO,CAAChB,KAAK,GAAG,IAAI;MACpBc,IAAI,CAAC,OAAO,EAAEQ,CAAC,CAAC;IAClB;IAEA,SAASC,MAAMA,CAACD,CAAa,EAAE;MAC7BN,OAAO,CAAChB,KAAK,GAAG,KAAK;MACrBc,IAAI,CAAC,MAAM,EAAEQ,CAAC,CAAC;IACjB;IAEA,SAASE,OAAOA,CAACF,CAAQ,EAAkB;MACzC,IAAI1B,KAAK,CAACc,QAAQ,IAAId,KAAK,CAACe,QAAQ,EAAE;MACtCM,UAAU,CAACjB,KAAK,GAAG,CAACiB,UAAU,CAACjB,KAAK;MACpCc,IAAI,CAAC,QAAQ,EAAEG,UAAU,CAACjB,KAAK,EAAEsB,CAAC,CAAC;IACrC;IAEA,SAASG,YAAYA,CAAA,EAAG;MACtB,IAAI1B,KAAK,CAAC2B,OAAO,CAAC9B,KAAK,CAACC,UAAU,CAAC,EAAE;QACnC,MAAM8B,KAAK,GAAG/B,KAAK,CAACC,UAAU,EAAE+B,IAAI,CAAEC,GAAQ,IAAKA,GAAG,KAAKjC,KAAK,CAACI,KAAK,CAAC;QAEvE,IAAI2B,KAAK,KAAKG,SAAS,EAAE;UACvBb,UAAU,CAACjB,KAAK,GAAG,IAAI;QACzB,CAAC,MAAM;UACLiB,UAAU,CAACjB,KAAK,GAAG,KAAK;QAC1B;MACF,CAAC,MAAM,IAAI,OAAOJ,KAAK,CAACC,UAAU,KAAK,SAAS,EAAE;QAChDoB,UAAU,CAACjB,KAAK,GAAGJ,KAAK,CAACC,UAAU;MACrC;IACF;IAEA,MAAMkC,OAAO,GAAGhD,QAAQ,CAA0B,MAAM;MACtD,MAAM;QAAEsB,OAAO;QAAEK,QAAQ;QAAEC;MAAS,CAAC,GAAGf,KAAK;MAC7C,OAAO;QACL,YAAY,EAAE,IAAI;QAClB,qBAAqB,EAAE,CAAC,CAACS,OAAO;QAChC,qBAAqB,EAAEW,OAAO,CAAChB,KAAK;QACpC,sBAAsB,EAAE,CAAC,CAACU,QAAQ;QAClC,sBAAsB,EAAE,CAAC,CAACC;MAC5B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMqB,YAAY,GAAGjD,QAAQ,CAAqB,MAAM;MACtD,IAAI,OAAOa,KAAK,CAACU,IAAI,KAAK,QAAQ,EAAE;QAClC,OAAOV,KAAK,CAACU,IAAI;MACnB;MACA,OAAOwB,SAAS;IAClB,CAAC,CAAC;IAEF,MAAMG,eAAe,GAAGlD,QAAQ,CAAU,MAAM;MAC9C,OAAOgB,KAAK,CAAC2B,OAAO,CAAC9B,KAAK,CAACC,UAAU,CAAC;IACxC,CAAC,CAAC;IAEF,MAAMqC,kBAAkB,GAAGnD,QAAQ,CAAS,MAAM;MAChD,IAAI,CAACkD,eAAe,CAACjC,KAAK,EAAE;QAC1B,OAAO,CAAC,CAAC;MACX;MACA,OAAQJ,KAAK,CAACC,UAAU,CAAWsC,SAAS,CACzCC,CAAM,IAAKA,CAAC,KAAKxC,KAAK,CAACI,KAC1B,CAAC;IACH,CAAC,CAAC;IAEFb,SAAS,CAAC,MAAM;MACd,OAAAkD,YAAA;QAAA,SACc,CAAC;UAAC,GAAGN,OAAO,CAAC/B;QAAK,CAAC;MAAC,IAC7Be,KAAK,CAACuB,OAAO,GAAG,CAAC,EAAAD,YAAA;QAAA,SACP;MAAkB,IAAAA,YAAA,CAAAhD,cAAA;QAAA,WAEhB,SAAAmC,CAACF,CAAQ,EAAqB;UACrCA,CAAC,CAACiB,eAAe,CAAC,CAAC;UAAC,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EADCC,IAAI,OAAA5C,KAAA,CAAAyC,IAAA,OAAAA,IAAA,WAAAI,IAAA,MAAAA,IAAA,GAAAJ,IAAA,EAAAI,IAAA;YAAJD,IAAI,CAAAC,IAAA,QAAAH,SAAA,CAAAG,IAAA;UAAA;UAEzBpB,OAAO,CAACF,CAAC,EAAE,GAAGqB,IAAI,CAAC;QACrB,CAAC;QAAA,WACQtB,OAAO;QAAA,UACRE,MAAM;QAAA,MACVL,SAAS;QAAA,SACND,UAAU,CAACjB,KAAK;QAAA,QACjBgC,YAAY,CAAChC,KAAK;QAAA,SACjBJ,KAAK,CAACY,KAAK;QAAA,YACRZ,KAAK,CAACc,QAAQ;QAAA,YACdd,KAAK,CAACe;MAAQ;QAAAF,OAAA,EAAAA,CAAA,MAEvBM,KAAK,CAACT,IAAI,IAAI;UACbA,IAAI,EAAE,SAAAA,CAAA;YAAA,SAAAuC,KAAA,GAAAJ,SAAA,CAAAC,MAAA,EAAIC,IAAI,OAAA5C,KAAA,CAAA8C,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA;cAAJH,IAAI,CAAAG,KAAA,IAAAL,SAAA,CAAAK,KAAA;YAAA;YAAA,OAAY/B,KAAK,CAACT,IAAI,GAAG,GAAGqC,IAAI,CAAC;UAAA;QACjD,CAAC;MAAA,IAAAN,YAAA;QAAA,WAGQnD,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;QAAA,SACpC,mBAAmB;QAAA,OACpBkC;MAAO,IAEXL,KAAK,CAACX,KAAK,GAAGW,KAAK,CAACX,KAAK,GAAG,CAAC,GAAGR,KAAK,CAACQ,KAAK,MAG/CW,KAAK,CAACgC,QAAQ,GAAG,CAAC;IAGzB,CAAC,CAAC;IAEF,OAAO;MACL9B,UAAU;MACVQ;IACF,CAAC;EACH,CAAC;EACDuB,OAAOA,CAAA,EAAG;IACR,IAAIjD,KAAK,CAAC2B,OAAO,CAAC,IAAI,CAAC7B,UAAU,CAAC,EAAE;MAClC,IAAI,CAAC4B,YAAY,CAAC,CAAC;IACrB,CAAC,MAAM;MACL,IAAI,CAACR,UAAU,GAAG,CAAC,CAAC,IAAI,CAACpB,UAAU;IACrC;EACF,CAAC;EACDoD,KAAK,EAAE;IACLpD,UAAU,EAAE;MACVqD,OAAOA,CAAA,EAAG;QACR,IAAI,CAACzB,YAAY,CAAC,CAAC;MACrB,CAAC;MACD0B,SAAS,EAAE;IACb;EACF;AACF,CAAC,CAAC"}

package/lib/components/checkbox/YCheckbox.scss

@@ -1,48 +1,48 @@
-.y-checkbox {
-  display: flex;
-  align-items: center;
-
-  &__slot {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .y-checkbox__label {
-    cursor: pointer;
-    font-weight: 400;
-    color: var(--y-theme-on-surface-variant);
-    font-size: 14px;
-  }
-
-  &--reverse .y-checkbox__slot {
-    flex-direction: row-reverse;
-  }
-
-  &:not(&--reverse) .y-input--checkbox {
-    margin-right: 8px;
-  }
-
-  .y-input--checkbox {
-    cursor: pointer;
-  }
-
-  &--reverse .y-input--checkbox {
-    margin-left: 8px;
-  }
-
-  &--readonly,
-  &--disabled {
-    .y-checkbox__label,
-    .y-input--checkbox {
-      cursor: default;
-    }
-  }
-
-  &--disabled {
-    .y-checkbox__slot {
-      filter: grayscale(1);
-      opacity: 0.4;
-    }
-  }
-}
+.y-checkbox {
+  display: flex;
+  align-items: center;
+
+  &__slot {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .y-checkbox__label {
+    cursor: pointer;
+    font-weight: 400;
+    color: var(--y-theme-on-surface-variant);
+    font-size: 14px;
+  }
+
+  &--reverse .y-checkbox__slot {
+    flex-direction: row-reverse;
+  }
+
+  &:not(&--reverse) .y-input--checkbox {
+    margin-right: 8px;
+  }
+
+  .y-input--checkbox {
+    cursor: pointer;
+  }
+
+  &--reverse .y-input--checkbox {
+    margin-left: 8px;
+  }
+
+  &--readonly,
+  &--disabled {
+    .y-checkbox__label,
+    .y-input--checkbox {
+      cursor: default;
+    }
+  }
+
+  &--disabled {
+    .y-checkbox__slot {
+      filter: grayscale(1);
+      opacity: 0.4;
+    }
+  }
+}

package/lib/components/index.mjs

@@ -23,5 +23,6 @@ export * from "./pagination/index.mjs";
 export * from "./loading/index.mjs";
 export * from "./dropdown/index.mjs";
 export * from "./select/index.mjs";
+export * from "./tab/index.mjs";
 export * from "./alert/index.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\nexport * from './alert';\r\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\nexport * from './tab';\r\nexport * from './alert';\r\n"],"mappings":""}