yuyeon 0.2.1-rc.1 → 0.2.1-rc.11

package/lib/components/switch/YSwitch.scss

@@ -1,198 +1,204 @@
-
-@use '../../styles/variables';
-
-.y-switch {
-  --y-switch__color: var(--y-theme-primary);
-  font-size: 1rem;
-
-  &__slot {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: inherit;
-    min-height: inherit;
-    position: relative;
-  }
-
-  &__input {
-    width: 3em;
-    height: 1.5em;
-    position: relative;
-    display: inline-flex;
-    user-select: none;
-    color: inherit;
-    flex: 0 0 auto;
-
-    input[role='switch'] {
-      position: absolute;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-  &:not(&--loading) &__input:active &__thumb {
-    width: 1em;
-  }
-
-  &__track {
-    width: 100%;
-    height: 100%;
-    border-radius: 2em;
-    background-color: #e0e0e0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: 300ms;
-  }
-
-  &__thumb {
-    width: 1.1em;
-    height: 1.1em;
-    align-self: center;
-    left: 0.185em;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #fff;
-    pointer-events: none;
-    position: relative;
-    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
-    will-change: left, transform;
-  }
-
-  &__spinner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    animation: rotate 2s linear infinite;
-    contain: paint;
-
-    @keyframes spinner-blur {
-      0% {
-        filter: blur(4px);
-      }
-      50% {
-        filter: blur(1px);
-      }
-      100% {
-        filter: blur(4px);
-      }
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      right: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      border-width: 2px 2px 0 0;
-      border-style: solid;
-      border-color: var(--y-switch__color) transparent;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(0deg, transparent 60%, rgba(var(--y-switch__color), 0.4));
-      filter: blur(4px);
-      animation: spinner-blur 3s infinite;
-    }
-  }
-
-  &--active {
-    .y-switch__track {
-      background-color: var(--y-switch__color);
-    }
-
-    .y-switch__thumb {
-      left: calc(100% - 1.1em - 0.24em);
-    }
-  }
-
-  &--active:not(&--loading):active &__thumb {
-    left: 1.8em;
-  }
-
-  &--focused {
-    .y-switch__thumb:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      bottom: 2px;
-      left: 2px;
-      right: 2px;
-      border-radius: 50%;
-      background-color: rgba(var(--y-switch__color), 0.4);
-    }
-  }
-
-  &--stick-out {
-    .y-switch__thumb {
-      box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, 0.54), 1px 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
-    }
-
-    .y-switch__track {
-      width: 80%;
-      height: 74%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.34);
-    }
-  }
-
-  &--disabled {
-    opacity: 0.8;
-    filter: brightness(0.88);
-
-    .y-switch__thumb {
-      opacity: 0.4;
-    }
-  }
-  &--disabled &__slot,
-  &--disabled &__input input {
-    cursor: default;
-  }
-
-  &__state {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    contain: content;
-  }
-
-  &__state-label {
-    font-size: 12px;
-    color: #ffffff;
-    position: absolute;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
-
-    &--on {
-      left: -40px;
-    }
-    &--off {
-      right: 10px;
-    }
-  }
-
-  &--active &__state-label {
-    transform: translateX(50px);
-  }
-
-  &--stick-out &__state-label--off {
-    right: 7px;
-  }
-}
+@use '../../styles/variables';
+
+.y-switch {
+  --y-switch__color: var(--y-theme-primary);
+  font-size: 1rem;
+
+  &__slot {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    color: inherit;
+    min-height: inherit;
+    position: relative;
+  }
+
+  &__input {
+    width: 3em;
+    height: 1.5em;
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    flex: 0 0 auto;
+
+    input[role='switch'] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+  &:not(&--loading) &__input:active &__thumb {
+    width: 1em;
+  }
+
+  &__track {
+    width: 100%;
+    height: 100%;
+    border-radius: 2em;
+    background-color: #e0e0e0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: 300ms;
+  }
+
+  &__thumb {
+    width: 1.1em;
+    height: 1.1em;
+    align-self: center;
+    left: 0.185em;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    pointer-events: none;
+    position: relative;
+    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
+    will-change: left, transform;
+  }
+
+  &__spinner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation: rotate 2s linear infinite;
+    contain: paint;
+
+    @keyframes spinner-blur {
+      0% {
+        filter: blur(4px);
+      }
+      50% {
+        filter: blur(1px);
+      }
+      100% {
+        filter: blur(4px);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      border-width: 2px 2px 0 0;
+      border-style: solid;
+      border-color: var(--y-switch__color) transparent;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        0deg,
+        transparent 60%,
+        rgba(var(--y-switch__color), 0.4)
+      );
+      filter: blur(4px);
+      animation: spinner-blur 3s infinite;
+    }
+  }
+
+  &--active {
+    .y-switch__track {
+      background-color: var(--y-switch__color);
+    }
+
+    .y-switch__thumb {
+      left: calc(100% - 1.1em - 0.24em);
+    }
+  }
+
+  &--active:not(&--loading):active &__thumb {
+    left: 1.8em;
+  }
+
+  &--focused {
+    .y-switch__thumb:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      bottom: 2px;
+      left: 2px;
+      right: 2px;
+      border-radius: 50%;
+      background-color: rgba(var(--y-switch__color), 0.4);
+    }
+  }
+
+  &--stick-out {
+    .y-switch__thumb {
+      box-shadow:
+        2px 2px 5px -2px rgba(0, 0, 0, 0.54),
+        1px 1px 4px rgba(0, 0, 0, 0.12),
+        0 0 0 1px rgba(0, 0, 0, 0.08);
+    }
+
+    .y-switch__track {
+      width: 80%;
+      height: 74%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.34);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.8;
+    filter: brightness(0.88);
+
+    .y-switch__thumb {
+      opacity: 0.4;
+    }
+  }
+  &--disabled &__slot,
+  &--disabled &__input input {
+    cursor: default;
+  }
+
+  &__state {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    contain: content;
+  }
+
+  &__state-label {
+    font-size: 12px;
+    color: #ffffff;
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
+
+    &--on {
+      left: -40px;
+    }
+    &--off {
+      right: 10px;
+    }
+  }
+
+  &--active &__state-label {
+    transform: translateX(50px);
+  }
+
+  &--stick-out &__state-label--off {
+    right: 7px;
+  }
+}

package/lib/components/tab/YTab.mjs

@@ -1,8 +1,7 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { shallowRef } from '@vue/runtime-core';
-import { computed, defineComponent, ref } from 'vue';
+import { computed, ref, shallowRef } from 'vue';
 import { useRender } from "../../composables/component.mjs";
-import { chooseProps, propsFactory } from "../../util/index.mjs";
+import { chooseProps, defineComponent, propsFactory } from "../../util/component/index.mjs";
 import { YButton, pressYButtonProps } from "../button/index.mjs";
 import { Y_TABS_KEY } from "./shared.mjs";
 import "./YTab.scss";

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","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","value","tabindex","onChoice","_ref2","yButtonProps","_createVNode","_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        <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    return {};\r\n  },\r\n});\r\n\r\nexport type YTab = InstanceType<typeof YTab>;\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,CAAA7B,OAAA,EAAA8B,WAAA;QAAA,SAEW,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTR,UAAU,CAACE,KAAK,EAChBN,KAAK,EACLU,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBK,OAAO,EAAEA,CAAA,KAAMjB,KAAK,CAACiB,OAAO,GAAG,CAAC,IAAIlB,KAAK,CAACT,IAAI;QAC9C4B,MAAM,EAAEA,CAAA,KACN,CAACnB,KAAK,CAACP,aAAa,IAAAuB,YAAA;UAAA,OAEXT,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAACG;QAAK;MAE/B;IAIX,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTab.mjs","names":["computed","ref","shallowRef","useRender","chooseProps","defineComponent","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","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { type PropType, type SlotsType, computed, ref, shallowRef } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\n\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    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      return (\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    return {};\n  },\n});\n\nexport type YTab = InstanceType<typeof YTab>;\n"],"mappings":";AAAA,SAAwCA,QAAQ,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAC,SAEtEC,SAAS;AAAA,SACTC,WAAW,EAAEC,eAAe,EAAEC,YAAY;AAAA,SAE1CC,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,GAAGb,eAAe,CAAC;EAClCc,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,GAAGxB,UAAU,CAAC,KAAK,CAAC;IAElC,MAAMyB,UAAU,GAAG1B,GAAG,CAAC,CAAC;IACxB,MAAM2B,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,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;IAEA5B,SAAS,CAAC,MAAM;MACd,MAAMgC,YAAY,GAAG/B,WAAW,CAACgB,KAAK,EAAEb,OAAO,CAACa,KAAK,CAAC;MACtD,OAAAgB,YAAA,CAAA7B,OAAA,EAAA8B,WAAA;QAAA,SAEW,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTR,UAAU,CAACE,KAAK,EAChBN,KAAK,EACLU,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBK,OAAO,EAAEA,CAAA,KAAMjB,KAAK,CAACiB,OAAO,GAAG,CAAC,IAAIlB,KAAK,CAACT,IAAI;QAC9C4B,MAAM,EAAEA,CAAA,KACN,CAACnB,KAAK,CAACP,aAAa,IAAAuB,YAAA;UAAA,OAEXT,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAACG;QAAK;MAE/B;IAIX,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/tab/YTab.scss

@@ -49,7 +49,8 @@
     }
   }
 
-  &--active, .y-button--active {
+  &--active,
+  .y-button--active {
     font-weight: 700;
     color: var(--y-tab-active-color);
 
@@ -58,12 +59,14 @@
     }
   }
 
-  &:hover:not(&--active) &__indicator, &:hover:not(.y-button--active) &__indicator {
+  &:hover:not(&--active) &__indicator,
+  &:hover:not(.y-button--active) &__indicator {
     transform: scaleY(1);
     color: var(--y-tab-hover-indicator-color);
   }
 
-  &--active &__indicator, .y-button--active &__indicator {
+  &--active &__indicator,
+  .y-button--active &__indicator {
     color: var(--y-tab-active-indicator-color);
     transform: scaleY(1);
   }

package/lib/components/tab/YTabs.mjs

@@ -1,9 +1,9 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import { pressChoicePropsOptions, useChoice } from "../../composables/choice.mjs";
 import { useRender } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resize-observer.mjs";
-import { propsFactory } from "../../util/component/index.mjs";
+import { defineComponent, propsFactory } from "../../util/component/index.mjs";
 import { YTab } from "./YTab.mjs";
 import { Y_TABS_KEY } from "./shared.mjs";
 import "./YTabs.scss";

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

@@ -1 +1 @@
-{"version":3,"file":"YTabs.mjs","names":["computed","defineComponent","pressChoicePropsOptions","useChoice","useRender","useResizeObserver","propsFactory","YTab","Y_TABS_KEY","pressYTabsPropOptions","items","type","Array","selectedClass","mandatory","YTabs","name","props","tag","String","default","emits","value","setup","_ref","slots","resizeObservedRef","container$","contentRect","containerRect","content$","choiceState","slotProps","next","prev","select","isSelected","tabItems","map","item","text","_createVNode","tabItem","_mergeProps","selected"],"sources":["../../../src/components/tab/YTabs.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\r\n\r\nimport { pressChoicePropsOptions, useChoice } from '../../composables/choice';\r\nimport { useRender } from '../../composables/component';\r\nimport { useResizeObserver } from '../../composables/resize-observer';\r\nimport { propsFactory } from '../../util/component';\r\nimport { YTab } from './YTab';\r\nimport { Y_TABS_KEY } from './shared';\r\nimport { YTabPropItem } from './types';\r\n\r\nimport './YTabs.scss';\r\n\r\nexport const pressYTabsPropOptions = propsFactory(\r\n  {\r\n    items: {\r\n      type: Array as PropType<YTabPropItem[]>,\r\n    },\r\n    ...pressChoicePropsOptions({\r\n      selectedClass: 'y-tab--active',\r\n      mandatory: 'force' as const,\r\n    }),\r\n  },\r\n  'YTabs',\r\n);\r\n\r\nexport const YTabs = defineComponent({\r\n  name: 'YTabs',\r\n  props: {\r\n    tag: {\r\n      type: String as PropType<'div' | 'nav' | 'ol' | 'ul'>,\r\n      default: 'div',\r\n    },\r\n    ...pressYTabsPropOptions(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: any) => true,\r\n  },\r\n  setup(props, { slots }) {\r\n    const { resizeObservedRef: container$, contentRect: containerRect } =\r\n      useResizeObserver();\r\n    const { resizeObservedRef: content$, contentRect } = useResizeObserver();\r\n\r\n    const choiceState = useChoice(props, Y_TABS_KEY);\r\n\r\n    const slotProps = computed(() => {\r\n      return {\r\n        next: choiceState.next,\r\n        prev: choiceState.prev,\r\n        select: choiceState.select,\r\n        isSelected: choiceState.isSelected,\r\n      };\r\n    });\r\n\r\n    const tabItems = computed(() => {\r\n      return (\r\n        props.items?.map((item) => {\r\n          if (typeof item !== 'object') {\r\n            return {\r\n              text: item,\r\n              value: item,\r\n            };\r\n          }\r\n          return item;\r\n        }) ?? []\r\n      );\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <props.tag class={['y-tabs']} role=\"tablist\">\r\n          <div key=\"container\" ref={container$} class={['y-tabs__container']}>\r\n            <div key=\"content\" ref={content$} class={['y-tabs__content']}>\r\n              {slots.default\r\n                ? slots.default(slotProps.value)\r\n                : tabItems.value.map((tabItem) => (\r\n                    <YTab {...tabItem} key={tabItem.text}></YTab>\r\n                  ))}\r\n            </div>\r\n          </div>\r\n        </props.tag>\r\n      );\r\n    });\r\n\r\n    return {\r\n      selected: choiceState.selected,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YTabs = InstanceType<typeof YTabs>;\r\n"],"mappings":";AAAA,SAAmBA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEjDC,uBAAuB,EAAEC,SAAS;AAAA,SAClCC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,YAAY;AAAA,SACZC,IAAI;AAAA,SACJC,UAAU;AAGnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGH,YAAY,CAC/C;EACEI,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACD,GAAGV,uBAAuB,CAAC;IACzBW,aAAa,EAAE,eAAe;IAC9BC,SAAS,EAAE;EACb,CAAC;AACH,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGd,eAAe,CAAC;EACnCe,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHP,IAAI,EAAEQ,MAA+C;MACrDC,OAAO,EAAE;IACX,CAAC;IACD,GAAGX,qBAAqB,CAAC;EAC3B,CAAC;EACDY,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EACDC,KAAKA,CAACN,KAAK,EAAAO,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB,EAAEC,UAAU;MAAEC,WAAW,EAAEC;IAAc,CAAC,GACjExB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEqB,iBAAiB,EAAEI,QAAQ;MAAEF;IAAY,CAAC,GAAGvB,iBAAiB,CAAC,CAAC;IAExE,MAAM0B,WAAW,GAAG5B,SAAS,CAACc,KAAK,EAAET,UAAU,CAAC;IAEhD,MAAMwB,SAAS,GAAGhC,QAAQ,CAAC,MAAM;MAC/B,OAAO;QACLiC,IAAI,EAAEF,WAAW,CAACE,IAAI;QACtBC,IAAI,EAAEH,WAAW,CAACG,IAAI;QACtBC,MAAM,EAAEJ,WAAW,CAACI,MAAM;QAC1BC,UAAU,EAAEL,WAAW,CAACK;MAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGrC,QAAQ,CAAC,MAAM;MAC9B,OACEiB,KAAK,CAACP,KAAK,EAAE4B,GAAG,CAAEC,IAAI,IAAK;QACzB,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;UAC5B,OAAO;YACLC,IAAI,EAAED,IAAI;YACVjB,KAAK,EAAEiB;UACT,CAAC;QACH;QACA,OAAOA,IAAI;MACb,CAAC,CAAC,IAAI,EAAE;IAEZ,CAAC,CAAC;IAEFnC,SAAS,CAAC,MAAM;MACd,OAAAqC,YAAA,CAAAxB,KAAA,CAAAC,GAAA;QAAA,SACoB,CAAC,QAAQ,CAAC;QAAA;MAAA;QAAAE,OAAA,EAAAA,CAAA,MAAAqB,YAAA;UAAA;UAAA,OACAd,UAAU;UAAA,SAAS,CAAC,mBAAmB;QAAC,IAAAc,YAAA;UAAA;UAAA,OACxCX,QAAQ;UAAA,SAAS,CAAC,iBAAiB;QAAC,IACzDL,KAAK,CAACL,OAAO,GACVK,KAAK,CAACL,OAAO,CAACY,SAAS,CAACV,KAAK,CAAC,GAC9Be,QAAQ,CAACf,KAAK,CAACgB,GAAG,CAAEI,OAAO,IAAAD,YAAA,CAAAlC,IAAA,EAAAoC,WAAA,CACfD,OAAO;UAAA,OAAOA,OAAO,CAACF;QAAI,SACrC,CAAC;MAAA;IAKhB,CAAC,CAAC;IAEF,OAAO;MACLI,QAAQ,EAAEb,WAAW,CAACa;IACxB,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTabs.mjs","names":["computed","pressChoicePropsOptions","useChoice","useRender","useResizeObserver","defineComponent","propsFactory","YTab","Y_TABS_KEY","pressYTabsPropOptions","items","type","Array","selectedClass","mandatory","YTabs","name","props","tag","String","default","emits","value","setup","_ref","slots","resizeObservedRef","container$","contentRect","containerRect","content$","choiceState","slotProps","next","prev","select","isSelected","tabItems","map","item","text","_createVNode","tabItem","_mergeProps","selected"],"sources":["../../../src/components/tab/YTabs.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\n\nimport { pressChoicePropsOptions, useChoice } from '@/composables/choice';\nimport { useRender } from '@/composables/component';\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { defineComponent, propsFactory } from '@/util/component';\n\nimport { YTab } from './YTab';\nimport { Y_TABS_KEY } from './shared';\nimport { YTabPropItem } from './types';\n\nimport './YTabs.scss';\n\nexport const pressYTabsPropOptions = propsFactory(\n  {\n    items: {\n      type: Array as PropType<YTabPropItem[]>,\n    },\n    ...pressChoicePropsOptions({\n      selectedClass: 'y-tab--active',\n      mandatory: 'force' as const,\n    }),\n  },\n  'YTabs',\n);\n\nexport const YTabs = defineComponent({\n  name: 'YTabs',\n  props: {\n    tag: {\n      type: String as PropType<'div' | 'nav' | 'ol' | 'ul'>,\n      default: 'div',\n    },\n    ...pressYTabsPropOptions(),\n  },\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef: container$, contentRect: containerRect } =\n      useResizeObserver();\n    const { resizeObservedRef: content$, contentRect } = useResizeObserver();\n\n    const choiceState = useChoice(props, Y_TABS_KEY);\n\n    const slotProps = computed(() => {\n      return {\n        next: choiceState.next,\n        prev: choiceState.prev,\n        select: choiceState.select,\n        isSelected: choiceState.isSelected,\n      };\n    });\n\n    const tabItems = computed(() => {\n      return (\n        props.items?.map((item) => {\n          if (typeof item !== 'object') {\n            return {\n              text: item,\n              value: item,\n            };\n          }\n          return item;\n        }) ?? []\n      );\n    });\n\n    useRender(() => {\n      return (\n        <props.tag class={['y-tabs']} role=\"tablist\">\n          <div key=\"container\" ref={container$} class={['y-tabs__container']}>\n            <div key=\"content\" ref={content$} class={['y-tabs__content']}>\n              {slots.default\n                ? slots.default(slotProps.value)\n                : tabItems.value.map((tabItem) => (\n                    <YTab {...tabItem} key={tabItem.text}></YTab>\n                  ))}\n            </div>\n          </div>\n        </props.tag>\n      );\n    });\n\n    return {\n      selected: choiceState.selected,\n    };\n  },\n});\n\nexport type YTabs = InstanceType<typeof YTabs>;\n"],"mappings":";AAAA,SAAwBA,QAAQ,QAAQ,KAAK;AAAC,SAErCC,uBAAuB,EAAEC,SAAS;AAAA,SAClCC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,eAAe,EAAEC,YAAY;AAAA,SAE7BC,IAAI;AAAA,SACJC,UAAU;AAGnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGH,YAAY,CAC/C;EACEI,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACD,GAAGX,uBAAuB,CAAC;IACzBY,aAAa,EAAE,eAAe;IAC9BC,SAAS,EAAE;EACb,CAAC;AACH,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGV,eAAe,CAAC;EACnCW,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHP,IAAI,EAAEQ,MAA+C;MACrDC,OAAO,EAAE;IACX,CAAC;IACD,GAAGX,qBAAqB,CAAC;EAC3B,CAAC;EACDY,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EACDC,KAAKA,CAACN,KAAK,EAAAO,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB,EAAEC,UAAU;MAAEC,WAAW,EAAEC;IAAc,CAAC,GACjEzB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEsB,iBAAiB,EAAEI,QAAQ;MAAEF;IAAY,CAAC,GAAGxB,iBAAiB,CAAC,CAAC;IAExE,MAAM2B,WAAW,GAAG7B,SAAS,CAACe,KAAK,EAAET,UAAU,CAAC;IAEhD,MAAMwB,SAAS,GAAGhC,QAAQ,CAAC,MAAM;MAC/B,OAAO;QACLiC,IAAI,EAAEF,WAAW,CAACE,IAAI;QACtBC,IAAI,EAAEH,WAAW,CAACG,IAAI;QACtBC,MAAM,EAAEJ,WAAW,CAACI,MAAM;QAC1BC,UAAU,EAAEL,WAAW,CAACK;MAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGrC,QAAQ,CAAC,MAAM;MAC9B,OACEiB,KAAK,CAACP,KAAK,EAAE4B,GAAG,CAAEC,IAAI,IAAK;QACzB,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;UAC5B,OAAO;YACLC,IAAI,EAAED,IAAI;YACVjB,KAAK,EAAEiB;UACT,CAAC;QACH;QACA,OAAOA,IAAI;MACb,CAAC,CAAC,IAAI,EAAE;IAEZ,CAAC,CAAC;IAEFpC,SAAS,CAAC,MAAM;MACd,OAAAsC,YAAA,CAAAxB,KAAA,CAAAC,GAAA;QAAA,SACoB,CAAC,QAAQ,CAAC;QAAA;MAAA;QAAAE,OAAA,EAAAA,CAAA,MAAAqB,YAAA;UAAA;UAAA,OACAd,UAAU;UAAA,SAAS,CAAC,mBAAmB;QAAC,IAAAc,YAAA;UAAA;UAAA,OACxCX,QAAQ;UAAA,SAAS,CAAC,iBAAiB;QAAC,IACzDL,KAAK,CAACL,OAAO,GACVK,KAAK,CAACL,OAAO,CAACY,SAAS,CAACV,KAAK,CAAC,GAC9Be,QAAQ,CAACf,KAAK,CAACgB,GAAG,CAAEI,OAAO,IAAAD,YAAA,CAAAlC,IAAA,EAAAoC,WAAA,CACfD,OAAO;UAAA,OAAOA,OAAO,CAACF;QAAI,SACrC,CAAC;MAAA;IAKhB,CAAC,CAAC;IAEF,OAAO;MACLI,QAAQ,EAAEb,WAAW,CAACa;IACxB,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/tab/YTabs.scss

@@ -1,10 +1,8 @@
-.y-tabs {
-  --y-tabs-gap: 16px;
-
-
-
-  &__content {
-    display: flex;
-    gap: var(--y-tabs-gap);
-  }
-}
+.y-tabs {
+  --y-tabs-gap: 16px;
+
+  &__content {
+    display: flex;
+    gap: var(--y-tabs-gap);
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Y_TABS_KEY"],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\r\nexport * from './YTab';\r\nexport {Y_TABS_KEY} from \"./shared\";\r\n"],"mappings":";;SAEQA,UAAU"}
+{"version":3,"file":"index.mjs","names":["Y_TABS_KEY"],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\nexport * from './YTab';\nexport { Y_TABS_KEY } from './shared';\n"],"mappings":";;SAESA,UAAU"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/components/tab/types.ts"],"sourcesContent":["export interface YTabPropItem {\r\n    text: string;\r\n    value?: string;\r\n    [Key: string]: any;\r\n}\r\n"],"mappings":""}
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/components/tab/types.ts"],"sourcesContent":["export interface YTabPropItem {\n  text: string;\n  value?: string;\n  [Key: string]: any;\n}\n"],"mappings":""}

package/lib/components/table/YDataTable.mjs

@@ -1,9 +1,9 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
-import { computed, defineComponent, provide, toRef } from 'vue';
+import { computed, provide, toRef } from 'vue';
 import { useRender } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resize-observer.mjs";
-import { toStyleSizeValue } from "../../util/index.mjs";
-import { chooseProps, propsFactory } from "../../util/component/index.mjs";
+import { chooseProps, defineComponent, propsFactory } from "../../util/component/index.mjs";
+import { toStyleSizeValue } from "../../util/ui.mjs";
 import { YDataTableBody, pressYDataTableBodyProps } from "./YDataTableBody.mjs";
 import { YDataTableControl } from "./YDataTableControl.mjs";
 import { YDataTableHead, pressYDataTableHeadProps } from "./YDataTableHead.mjs";
@@ -14,8 +14,8 @@ import { pressDataTableItemsProps, useItems } from "./composibles/items.mjs";
 import { useOptions } from "./composibles/options.mjs";
 import { createPagination, pressDataTablePaginationProps, providePagination, usePaginatedItems } from "./composibles/pagination.mjs";
 import { pressDataTableSelectionProps, provideSelection } from "./composibles/selection.mjs";
-import { createSorting, pressDataTableSortProps, provideSorting } from "./composibles/sorting.mjs";
 import { useSortedItems } from "./composibles/sorted-items.mjs";
+import { createSorting, pressDataTableSortProps, provideSorting } from "./composibles/sorting.mjs";
 export const pressDataTableProps = propsFactory({
   ...pressYDataTableBodyProps(),
   width: [String, Number],
@@ -40,7 +40,7 @@ export const YDataTable = defineComponent({
     'update:sortBy': sortBy => true,
     'update:options': options => true,
     'click:row': (e, value) => true,
-    'scroll': e => true
+    scroll: e => true
   },
   setup(props, _ref) {
     let {