yuyeon 0.1.2-rc.2 → 0.2.1-rc.2

package/lib/components/snackbar/YSnackbar.scss

@@ -1,38 +1,38 @@
-.y-snackbar {
-  font-size: 1rem;
-  margin: 8px;
-
-  &__display {
-    display: flex;
-    align-items: center;
-    min-height: 48px;
-    min-width: 240px;
-    z-index: inherit;
-  }
-
-  &__content {
-    position: relative;
-    flex-grow: 1;
-    font-size: 0.875em;
-    font-weight: 400;
-    line-height: 0.625em;
-    padding: 0.875em;
-    z-index: inherit;
-    color: #fff;
-  }
-
-  .y-plate {
-    background-color: rgba(0, 0, 0, 0.74);
-    backdrop-filter: blur(4px);
-    box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4);
-    z-index: inherit;
-  }
-
-  &-leave-active {
-    transition: all 300ms ease-in-out;
-  }
-
-  &-leave-to {
-    opacity: 0;
-  }
-}
+.y-snackbar {
+  font-size: 1rem;
+  margin: 8px;
+
+  &__display {
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    min-width: 240px;
+    z-index: inherit;
+  }
+
+  &__content {
+    position: relative;
+    flex-grow: 1;
+    font-size: 0.875em;
+    font-weight: 400;
+    line-height: 0.625em;
+    padding: 0.875em;
+    z-index: inherit;
+    color: #fff;
+  }
+
+  .y-plate {
+    background-color: rgba(0, 0, 0, 0.74);
+    backdrop-filter: blur(4px);
+    box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.4);
+    z-index: inherit;
+  }
+
+  &-leave-active {
+    transition: all 300ms ease-in-out;
+  }
+
+  &-leave-to {
+    opacity: 0;
+  }
+}

package/lib/components/switch/YSwitch.mjs

@@ -1,5 +1,6 @@
 import { createVNode as _createVNode } from "vue";
-import { defineComponent, withModifiers } from 'vue';
+import { withModifiers } from 'vue';
+import { defineComponent } from "../../util/component/index.mjs";
 import "./YSwitch.scss";
 let uidCounter = 0;
 export const YSwitch = defineComponent({

package/lib/components/switch/YSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YSwitch.mjs","names":["defineComponent","withModifiers","uidCounter","YSwitch","name","model","prop","event","props","input","type","Boolean","Array","default","value","String","Number","Object","max","loading","disabled","stickOut","stateLabel","color","labelOn","labelOff","data","innerValue","counterId","focused","created","iid","toString","isArray","inputByValue","computed","isMultipleInput","multipleInputIndex","findIndex","inp","inputId","id","trackStyles","backgroundColor","classes","methods","found","find","undefined","changeMultipleInput","checked","multipleInput","slice","length","$emit","nextChange","push","splice","$nextTick","onClick","$event","changeInput","onFocus","onBlur","onKeydown","onChange","$checkbox","target","stopImmediatePropagation","watch","render","$slots","_createVNode","label"],"sources":["../../../src/components/switch/YSwitch.tsx"],"sourcesContent":["import { PropType, defineComponent, withModifiers } from 'vue';\n\nimport './YSwitch.scss';\n\nlet uidCounter = 0;\n\nexport const YSwitch = defineComponent({\n  name: 'YSwitch',\n  model: {\n    prop: 'input',\n    event: 'change',\n  },\n  props: {\n    input: {\n      type: [Boolean, Array] as PropType<boolean | any[]>,\n      default: false,\n    },\n    value: {\n      type: [String, Number, Object] as PropType<any>,\n    },\n    max: {\n      type: Number,\n    },\n    loading: {\n      type: Boolean,\n    },\n    disabled: {\n      type: Boolean,\n    },\n    stickOut: {\n      type: Boolean,\n    },\n    stateLabel: {\n      type: Boolean,\n    },\n    color: {\n      type: String,\n    },\n    labelOn: {\n      type: String,\n      default: 'ON',\n    },\n    labelOff: {\n      type: String,\n      default: 'OFF',\n    },\n  },\n  data() {\n    return {\n      innerValue: false,\n      counterId: '',\n      focused: false,\n    };\n  },\n  created() {\n    const iid = uidCounter.toString();\n    uidCounter += 1;\n    this.counterId = iid;\n    if (Array.isArray(this.input)) {\n      this.inputByValue();\n    } else {\n      this.innerValue = this.input;\n    }\n  },\n  computed: {\n    isMultipleInput() {\n      return Array.isArray(this.input);\n    },\n    multipleInputIndex() {\n      if (!Array.isArray(this.input)) {\n        return -1;\n      }\n      return this.input.findIndex((inp) => {\n        return inp === this.value;\n      });\n    },\n    inputId() {\n      const id = this.counterId;\n      return `y-switch--${id}`;\n    },\n    trackStyles() {\n      return {\n        backgroundColor: this.color,\n      };\n    },\n    classes() {\n      return {\n        'y-switch--disabled': this.disabled,\n        'y-switch--loading': this.loading,\n        'y-switch--active': this.innerValue,\n        'y-switch--stick-out': this.stickOut,\n        'y-switch--focused': this.focused,\n      };\n    },\n  },\n  methods: {\n    inputByValue() {\n      if (Array.isArray(this.input)) {\n        const found = this.input.find((inp: any) => {\n          return inp === this.value;\n        });\n\n        if (found !== undefined) {\n          this.innerValue = true;\n        } else {\n          this.innerValue = false;\n        }\n      } else if (typeof this.input === 'boolean') {\n        this.innerValue = this.input;\n      }\n    },\n    changeMultipleInput(checked: boolean) {\n      if (Array.isArray(this.input)) {\n        const multipleInput = this.input.slice();\n        if (\n          checked &&\n          this.max !== undefined &&\n          multipleInput.length >= this.max\n        ) {\n          this.$emit('overmax');\n          this.nextChange(false, multipleInput);\n          return;\n        }\n        if (checked && this.multipleInputIndex < 0) {\n          multipleInput.push(this.value);\n        } else if (this.multipleInputIndex > -1) {\n          multipleInput.splice(this.multipleInputIndex, 1);\n        }\n        this.$emit('change', multipleInput);\n      }\n    },\n    nextChange(checked: boolean, value: any) {\n      this.$nextTick(() => {\n        this.innerValue = checked;\n      });\n    },\n    onClick($event: Event) {\n      if (this.disabled || this.loading) return;\n      this.changeInput(!this.innerValue, $event);\n    },\n    onFocus() {\n      this.focused = true;\n    },\n    onBlur() {\n      this.focused = false;\n    },\n    onKeydown($event: KeyboardEvent) {\n      // nothing\n    },\n    onChange($event: Event) {\n      const $checkbox = $event.target as HTMLInputElement;\n      const { checked } = $checkbox;\n      $event.stopImmediatePropagation();\n      this.changeInput(checked, $event);\n    },\n    changeInput(checked: boolean, event?: Event) {\n      this.innerValue = checked;\n      if (this.isMultipleInput) {\n        this.changeMultipleInput(checked);\n      } else {\n        this.$emit('change', checked);\n      }\n    },\n  },\n  watch: {\n    input() {\n      this.inputByValue();\n    },\n  },\n  render() {\n    const {\n      $slots,\n      classes,\n      onClick,\n      onKeydown,\n      onFocus,\n      onBlur,\n      onChange,\n      inputId,\n      innerValue,\n      disabled,\n      trackStyles,\n      stateLabel,\n      labelOn,\n      labelOff,\n      loading,\n    } = this;\n    return (\n      <div class={{ 'y-switch': true, ...classes }}>\n        <div class=\"y-switch__slot\">\n          <div\n            class=\"y-switch__input\"\n            onClick={withModifiers(onClick, ['exact'])}\n            onKeydown={onKeydown}\n          >\n            <input\n              id={inputId}\n              aria-checked={innerValue}\n              type=\"checkbox\"\n              role=\"switch\"\n              onFocus={onFocus}\n              onBlur={onBlur}\n              onChange={onChange}\n              disabled={disabled}\n              checked={innerValue}\n              ref=\"checkbox\"\n            />\n            <div class=\"y-switch__track\" style={trackStyles}>\n              {stateLabel && (\n                <div class=\"y-switch__state\">\n                  <span class=\"y-switch__state-label y-switch__state-label--on\">\n                    {{ labelOn }}\n                  </span>\n                  <span class=\"y-switch__state-label y-switch__state-label--off\">\n                    {{ labelOff }}\n                  </span>\n                </div>\n              )}\n            </div>\n            <div class=\"y-switch__thumb\">\n              {loading && <div class=\"y-switch__spinner\"></div>}\n            </div>\n          </div>\n          {$slots.label && (\n            <label for={inputId} class=\"y-switch__label\">\n              {$slots.label?.()}\n              <input hidden />\n            </label>\n          )}\n        </div>\n      </div>\n    );\n  },\n});\n\nexport type YSwitch = InstanceType<typeof YSwitch>;\n"],"mappings":"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"}
+{"version":3,"file":"YSwitch.mjs","names":["withModifiers","defineComponent","uidCounter","YSwitch","name","model","prop","event","props","input","type","Boolean","Array","default","value","String","Number","Object","max","loading","disabled","stickOut","stateLabel","color","labelOn","labelOff","data","innerValue","counterId","focused","created","iid","toString","isArray","inputByValue","computed","isMultipleInput","multipleInputIndex","findIndex","inp","inputId","id","trackStyles","backgroundColor","classes","methods","found","find","undefined","changeMultipleInput","checked","multipleInput","slice","length","$emit","nextChange","push","splice","$nextTick","onClick","$event","changeInput","onFocus","onBlur","onKeydown","onChange","$checkbox","target","stopImmediatePropagation","watch","render","$slots","_createVNode","label"],"sources":["../../../src/components/switch/YSwitch.tsx"],"sourcesContent":["import { type PropType, withModifiers } from 'vue';\n\nimport { defineComponent } from '@/util/component';\n\nimport './YSwitch.scss';\n\nlet uidCounter = 0;\n\nexport const YSwitch = defineComponent({\n  name: 'YSwitch',\n  model: {\n    prop: 'input',\n    event: 'change',\n  },\n  props: {\n    input: {\n      type: [Boolean, Array] as PropType<boolean | any[]>,\n      default: false,\n    },\n    value: {\n      type: [String, Number, Object] as PropType<any>,\n    },\n    max: {\n      type: Number,\n    },\n    loading: {\n      type: Boolean,\n    },\n    disabled: {\n      type: Boolean,\n    },\n    stickOut: {\n      type: Boolean,\n    },\n    stateLabel: {\n      type: Boolean,\n    },\n    color: {\n      type: String,\n    },\n    labelOn: {\n      type: String,\n      default: 'ON',\n    },\n    labelOff: {\n      type: String,\n      default: 'OFF',\n    },\n  },\n  data() {\n    return {\n      innerValue: false,\n      counterId: '',\n      focused: false,\n    };\n  },\n  created() {\n    const iid = uidCounter.toString();\n    uidCounter += 1;\n    this.counterId = iid;\n    if (Array.isArray(this.input)) {\n      this.inputByValue();\n    } else {\n      this.innerValue = this.input;\n    }\n  },\n  computed: {\n    isMultipleInput() {\n      return Array.isArray(this.input);\n    },\n    multipleInputIndex() {\n      if (!Array.isArray(this.input)) {\n        return -1;\n      }\n      return this.input.findIndex((inp) => {\n        return inp === this.value;\n      });\n    },\n    inputId() {\n      const id = this.counterId;\n      return `y-switch--${id}`;\n    },\n    trackStyles() {\n      return {\n        backgroundColor: this.color,\n      };\n    },\n    classes() {\n      return {\n        'y-switch--disabled': this.disabled,\n        'y-switch--loading': this.loading,\n        'y-switch--active': this.innerValue,\n        'y-switch--stick-out': this.stickOut,\n        'y-switch--focused': this.focused,\n      };\n    },\n  },\n  methods: {\n    inputByValue() {\n      if (Array.isArray(this.input)) {\n        const found = this.input.find((inp: any) => {\n          return inp === this.value;\n        });\n\n        if (found !== undefined) {\n          this.innerValue = true;\n        } else {\n          this.innerValue = false;\n        }\n      } else if (typeof this.input === 'boolean') {\n        this.innerValue = this.input;\n      }\n    },\n    changeMultipleInput(checked: boolean) {\n      if (Array.isArray(this.input)) {\n        const multipleInput = this.input.slice();\n        if (\n          checked &&\n          this.max !== undefined &&\n          multipleInput.length >= this.max\n        ) {\n          this.$emit('overmax');\n          this.nextChange(false, multipleInput);\n          return;\n        }\n        if (checked && this.multipleInputIndex < 0) {\n          multipleInput.push(this.value);\n        } else if (this.multipleInputIndex > -1) {\n          multipleInput.splice(this.multipleInputIndex, 1);\n        }\n        this.$emit('change', multipleInput);\n      }\n    },\n    nextChange(checked: boolean, value: any) {\n      this.$nextTick(() => {\n        this.innerValue = checked;\n      });\n    },\n    onClick($event: Event) {\n      if (this.disabled || this.loading) return;\n      this.changeInput(!this.innerValue, $event);\n    },\n    onFocus() {\n      this.focused = true;\n    },\n    onBlur() {\n      this.focused = false;\n    },\n    onKeydown($event: KeyboardEvent) {\n      // nothing\n    },\n    onChange($event: Event) {\n      const $checkbox = $event.target as HTMLInputElement;\n      const { checked } = $checkbox;\n      $event.stopImmediatePropagation();\n      this.changeInput(checked, $event);\n    },\n    changeInput(checked: boolean, event?: Event) {\n      this.innerValue = checked;\n      if (this.isMultipleInput) {\n        this.changeMultipleInput(checked);\n      } else {\n        this.$emit('change', checked);\n      }\n    },\n  },\n  watch: {\n    input() {\n      this.inputByValue();\n    },\n  },\n  render() {\n    const {\n      $slots,\n      classes,\n      onClick,\n      onKeydown,\n      onFocus,\n      onBlur,\n      onChange,\n      inputId,\n      innerValue,\n      disabled,\n      trackStyles,\n      stateLabel,\n      labelOn,\n      labelOff,\n      loading,\n    } = this;\n    return (\n      <div class={{ 'y-switch': true, ...classes }}>\n        <div class=\"y-switch__slot\">\n          <div\n            class=\"y-switch__input\"\n            onClick={withModifiers(onClick, ['exact'])}\n            onKeydown={onKeydown}\n          >\n            <input\n              id={inputId}\n              aria-checked={innerValue}\n              type=\"checkbox\"\n              role=\"switch\"\n              onFocus={onFocus}\n              onBlur={onBlur}\n              onChange={onChange}\n              disabled={disabled}\n              checked={innerValue}\n              ref=\"checkbox\"\n            />\n            <div class=\"y-switch__track\" style={trackStyles}>\n              {stateLabel && (\n                <div class=\"y-switch__state\">\n                  <span class=\"y-switch__state-label y-switch__state-label--on\">\n                    {{ labelOn }}\n                  </span>\n                  <span class=\"y-switch__state-label y-switch__state-label--off\">\n                    {{ labelOff }}\n                  </span>\n                </div>\n              )}\n            </div>\n            <div class=\"y-switch__thumb\">\n              {loading && <div class=\"y-switch__spinner\"></div>}\n            </div>\n          </div>\n          {$slots.label && (\n            <label for={inputId} class=\"y-switch__label\">\n              {$slots.label?.()}\n              <input hidden />\n            </label>\n          )}\n        </div>\n      </div>\n    );\n  },\n});\n\nexport type YSwitch = InstanceType<typeof YSwitch>;\n"],"mappings":";AAAA,SAAwBA,aAAa,QAAQ,KAAK;AAAC,SAE1CC,eAAe;AAExB;AAEA,IAAIC,UAAU,GAAG,CAAC;AAElB,OAAO,MAAMC,OAAO,GAAGF,eAAe,CAAC;EACrCG,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;IACLC,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE;EACT,CAAC;EACDC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAE,CAACC,OAAO,EAAEC,KAAK,CAA8B;MACnDC,OAAO,EAAE;IACX,CAAC;IACDC,KAAK,EAAE;MACLJ,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,EAAEC,MAAM;IAC/B,CAAC;IACDC,GAAG,EAAE;MACHR,IAAI,EAAEM;IACR,CAAC;IACDG,OAAO,EAAE;MACPT,IAAI,EAAEC;IACR,CAAC;IACDS,QAAQ,EAAE;MACRV,IAAI,EAAEC;IACR,CAAC;IACDU,QAAQ,EAAE;MACRX,IAAI,EAAEC;IACR,CAAC;IACDW,UAAU,EAAE;MACVZ,IAAI,EAAEC;IACR,CAAC;IACDY,KAAK,EAAE;MACLb,IAAI,EAAEK;IACR,CAAC;IACDS,OAAO,EAAE;MACPd,IAAI,EAAEK,MAAM;MACZF,OAAO,EAAE;IACX,CAAC;IACDY,QAAQ,EAAE;MACRf,IAAI,EAAEK,MAAM;MACZF,OAAO,EAAE;IACX;EACF,CAAC;EACDa,IAAIA,CAAA,EAAG;IACL,OAAO;MACLC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE,EAAE;MACbC,OAAO,EAAE;IACX,CAAC;EACH,CAAC;EACDC,OAAOA,CAAA,EAAG;IACR,MAAMC,GAAG,GAAG7B,UAAU,CAAC8B,QAAQ,CAAC,CAAC;IACjC9B,UAAU,IAAI,CAAC;IACf,IAAI,CAAC0B,SAAS,GAAGG,GAAG;IACpB,IAAInB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;MAC7B,IAAI,CAACyB,YAAY,CAAC,CAAC;IACrB,CAAC,MAAM;MACL,IAAI,CAACP,UAAU,GAAG,IAAI,CAAClB,KAAK;IAC9B;EACF,CAAC;EACD0B,QAAQ,EAAE;IACRC,eAAeA,CAAA,EAAG;MAChB,OAAOxB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC;IAClC,CAAC;IACD4B,kBAAkBA,CAAA,EAAG;MACnB,IAAI,CAACzB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;QAC9B,OAAO,CAAC,CAAC;MACX;MACA,OAAO,IAAI,CAACA,KAAK,CAAC6B,SAAS,CAAEC,GAAG,IAAK;QACnC,OAAOA,GAAG,KAAK,IAAI,CAACzB,KAAK;MAC3B,CAAC,CAAC;IACJ,CAAC;IACD0B,OAAOA,CAAA,EAAG;MACR,MAAMC,EAAE,GAAG,IAAI,CAACb,SAAS;MACzB,OAAQ,aAAYa,EAAG,EAAC;IAC1B,CAAC;IACDC,WAAWA,CAAA,EAAG;MACZ,OAAO;QACLC,eAAe,EAAE,IAAI,CAACpB;MACxB,CAAC;IACH,CAAC;IACDqB,OAAOA,CAAA,EAAG;MACR,OAAO;QACL,oBAAoB,EAAE,IAAI,CAACxB,QAAQ;QACnC,mBAAmB,EAAE,IAAI,CAACD,OAAO;QACjC,kBAAkB,EAAE,IAAI,CAACQ,UAAU;QACnC,qBAAqB,EAAE,IAAI,CAACN,QAAQ;QACpC,mBAAmB,EAAE,IAAI,CAACQ;MAC5B,CAAC;IACH;EACF,CAAC;EACDgB,OAAO,EAAE;IACPX,YAAYA,CAAA,EAAG;MACb,IAAItB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;QAC7B,MAAMqC,KAAK,GAAG,IAAI,CAACrC,KAAK,CAACsC,IAAI,CAAER,GAAQ,IAAK;UAC1C,OAAOA,GAAG,KAAK,IAAI,CAACzB,KAAK;QAC3B,CAAC,CAAC;QAEF,IAAIgC,KAAK,KAAKE,SAAS,EAAE;UACvB,IAAI,CAACrB,UAAU,GAAG,IAAI;QACxB,CAAC,MAAM;UACL,IAAI,CAACA,UAAU,GAAG,KAAK;QACzB;MACF,CAAC,MAAM,IAAI,OAAO,IAAI,CAAClB,KAAK,KAAK,SAAS,EAAE;QAC1C,IAAI,CAACkB,UAAU,GAAG,IAAI,CAAClB,KAAK;MAC9B;IACF,CAAC;IACDwC,mBAAmBA,CAACC,OAAgB,EAAE;MACpC,IAAItC,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;QAC7B,MAAM0C,aAAa,GAAG,IAAI,CAAC1C,KAAK,CAAC2C,KAAK,CAAC,CAAC;QACxC,IACEF,OAAO,IACP,IAAI,CAAChC,GAAG,KAAK8B,SAAS,IACtBG,aAAa,CAACE,MAAM,IAAI,IAAI,CAACnC,GAAG,EAChC;UACA,IAAI,CAACoC,KAAK,CAAC,SAAS,CAAC;UACrB,IAAI,CAACC,UAAU,CAAC,KAAK,EAAEJ,aAAa,CAAC;UACrC;QACF;QACA,IAAID,OAAO,IAAI,IAAI,CAACb,kBAAkB,GAAG,CAAC,EAAE;UAC1Cc,aAAa,CAACK,IAAI,CAAC,IAAI,CAAC1C,KAAK,CAAC;QAChC,CAAC,MAAM,IAAI,IAAI,CAACuB,kBAAkB,GAAG,CAAC,CAAC,EAAE;UACvCc,aAAa,CAACM,MAAM,CAAC,IAAI,CAACpB,kBAAkB,EAAE,CAAC,CAAC;QAClD;QACA,IAAI,CAACiB,KAAK,CAAC,QAAQ,EAAEH,aAAa,CAAC;MACrC;IACF,CAAC;IACDI,UAAUA,CAACL,OAAgB,EAAEpC,KAAU,EAAE;MACvC,IAAI,CAAC4C,SAAS,CAAC,MAAM;QACnB,IAAI,CAAC/B,UAAU,GAAGuB,OAAO;MAC3B,CAAC,CAAC;IACJ,CAAC;IACDS,OAAOA,CAACC,MAAa,EAAE;MACrB,IAAI,IAAI,CAACxC,QAAQ,IAAI,IAAI,CAACD,OAAO,EAAE;MACnC,IAAI,CAAC0C,WAAW,CAAC,CAAC,IAAI,CAAClC,UAAU,EAAEiC,MAAM,CAAC;IAC5C,CAAC;IACDE,OAAOA,CAAA,EAAG;MACR,IAAI,CAACjC,OAAO,GAAG,IAAI;IACrB,CAAC;IACDkC,MAAMA,CAAA,EAAG;MACP,IAAI,CAAClC,OAAO,GAAG,KAAK;IACtB,CAAC;IACDmC,SAASA,CAACJ,MAAqB,EAAE;MAC/B;IAAA,CACD;IACDK,QAAQA,CAACL,MAAa,EAAE;MACtB,MAAMM,SAAS,GAAGN,MAAM,CAACO,MAA0B;MACnD,MAAM;QAAEjB;MAAQ,CAAC,GAAGgB,SAAS;MAC7BN,MAAM,CAACQ,wBAAwB,CAAC,CAAC;MACjC,IAAI,CAACP,WAAW,CAACX,OAAO,EAAEU,MAAM,CAAC;IACnC,CAAC;IACDC,WAAWA,CAACX,OAAgB,EAAE3C,KAAa,EAAE;MAC3C,IAAI,CAACoB,UAAU,GAAGuB,OAAO;MACzB,IAAI,IAAI,CAACd,eAAe,EAAE;QACxB,IAAI,CAACa,mBAAmB,CAACC,OAAO,CAAC;MACnC,CAAC,MAAM;QACL,IAAI,CAACI,KAAK,CAAC,QAAQ,EAAEJ,OAAO,CAAC;MAC/B;IACF;EACF,CAAC;EACDmB,KAAK,EAAE;IACL5D,KAAKA,CAAA,EAAG;MACN,IAAI,CAACyB,YAAY,CAAC,CAAC;IACrB;EACF,CAAC;EACDoC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,MAAM;MACN3B,OAAO;MACPe,OAAO;MACPK,SAAS;MACTF,OAAO;MACPC,MAAM;MACNE,QAAQ;MACRzB,OAAO;MACPb,UAAU;MACVP,QAAQ;MACRsB,WAAW;MACXpB,UAAU;MACVE,OAAO;MACPC,QAAQ;MACRN;IACF,CAAC,GAAG,IAAI;IACR,OAAAqD,YAAA;MAAA,SACc;QAAE,UAAU,EAAE,IAAI;QAAE,GAAG5B;MAAQ;IAAC,IAAA4B,YAAA;MAAA;IAAA,IAAAA,YAAA;MAAA;MAAA,WAI7BxE,aAAa,CAAC2D,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;MAAA,aAC/BK;IAAS,IAAAQ,YAAA;MAAA,MAGdhC,OAAO;MAAA,gBACGb,UAAU;MAAA;MAAA;MAAA,WAGfmC,OAAO;MAAA,UACRC,MAAM;MAAA,YACJE,QAAQ;MAAA,YACR7C,QAAQ;MAAA,WACTO,UAAU;MAAA;IAAA,UAAA6C,YAAA;MAAA;MAAA,SAGe9B;IAAW,IAC5CpB,UAAU,IAAAkD,YAAA;MAAA;IAAA,IAAAA,YAAA;MAAA;IAAA;MAGFhD;IAAO,IAAAgD,YAAA;MAAA;IAAA;MAGP/C;IAAQ,IAGhB,IAAA+C,YAAA;MAAA;IAAA,IAGArD,OAAO,IAAAqD,YAAA;MAAA;IAAA,QAAyC,MAGpDD,MAAM,CAACE,KAAK,IAAAD,YAAA;MAAA,OACChC,OAAO;MAAA;IAAA,IAChB+B,MAAM,CAACE,KAAK,GAAG,CAAC,EAAAD,YAAA;MAAA;IAAA,UAGpB;EAIT;AACF,CAAC,CAAC"}

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/vue-component.mjs";
+import { defineComponent, propsFactory } from "../../util/component/index.mjs";
 import { YTab } from "./YTab.mjs";
 import { Y_TABS_KEY } from "./shared.mjs";
 import "./YTabs.scss";