yuyeon 0.0.0 → 0.0.3

package/lib/components/snackbar/YSnackbar.mjs

@@ -0,0 +1,187 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { animate } from 'motion';
+import { computed, defineComponent, ref, watch, withModifiers } from 'vue';
+import { useModelDuplex } from "../../composables/communication.mjs";
+import { useRender } from "../../composables/component.mjs";
+import { useTimer } from "../../composables/timing.mjs";
+import { bindClasses } from "../../util/vue-component.mjs";
+import { YLayer } from "../layer/index.mjs";
+import { YPlate } from "../plate/index.mjs";
+import "./YSnackbar.scss";
+const defaultSnackbarTransition = {
+  name: 'y-snackbar',
+  onBeforeEnter: direction => el => {
+    if (!el.getAttribute('data-transform')) {
+      const cache = el.style.getPropertyValue('transform');
+      el.setAttribute('data-transform', cache);
+      el.style.setProperty('transform', `${cache} translateY(${direction === 'top' ? '-' : ''}40px)`);
+    }
+  },
+  onEnter(el, done) {
+    const cache = el.getAttribute('data-transform');
+    const motion = el.getAttribute('data-motion');
+    if (motion || !cache) {
+      return;
+    }
+    el.setAttribute('data-motion', 'true');
+    animate(el, {
+      transform: `${cache.replace(/translateY(.+)/, 'translateY(0)')}`
+    }, {
+      duration: 0.1
+    }).finished.then(() => {
+      el.removeAttribute('data-transform');
+      el.removeAttribute('data-motion');
+      done();
+    });
+  }
+};
+export const YSnackbar = defineComponent({
+  name: 'YSnackbar',
+  components: {
+    YPlate,
+    YLayer
+  },
+  emits: ['update:modelValue', 'click'],
+  props: {
+    modelValue: {
+      type: Boolean
+    },
+    contentClasses: {
+      type: [Array, String, Object]
+    },
+    position: {
+      type: String,
+      default: 'top center'
+    },
+    transition: {
+      type: [String, Object],
+      default: () => ({
+        ...defaultSnackbarTransition
+      })
+    },
+    /**
+     * @property Number
+     *
+     * The amount of time the snackbar should be displayed.
+     * @default 4000
+     */
+    duration: {
+      type: Number,
+      default: 4000
+    }
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const active = useModelDuplex(props);
+    const hover = ref(false);
+    const classes = computed(() => {
+      return {
+        'y-snackbar': true
+      };
+    });
+    const computedContentClasses = computed(() => {
+      const boundClasses = bindClasses(props.contentClasses);
+      return {
+        ...boundClasses,
+        'y-snackbar__display': true
+      };
+    });
+    const computedInset = computed(() => {
+      const [first, second] = props.position?.split(' ');
+      let y = 'top';
+      let x = 'left';
+      if (second) {
+        x = second;
+        y = first;
+      } else {
+        x = first;
+      }
+      const ret = {
+        [x === 'center' ? 'left' : x]: x === 'center' ? `50%` : 0,
+        [y]: 0
+      };
+      if (x === 'center') {
+        ret.transform = 'translateX(-50%)';
+      }
+      return ret;
+    });
+    function dismiss() {
+      active.value = false;
+    }
+    const {
+      start,
+      stop,
+      reset
+    } = useTimer(dismiss, props.duration);
+    function setTimer() {
+      if (props.duration > 0) {
+        start();
+      }
+    }
+    watch(hover, neo => {
+      if (neo) {
+        stop();
+      } else {
+        setTimer();
+      }
+    });
+    watch(active, neo => {
+      if (neo) {
+        setTimer();
+      } else {
+        reset();
+      }
+    }, {
+      immediate: true
+    });
+    function onClickContent(event) {
+      emit('click', event);
+      active.value = false;
+    }
+    const proxyTransition = computed(() => {
+      const {
+        transition,
+        position
+      } = props;
+      if (transition?.name === 'y-snackbar') {
+        transition.onBeforeEnter = defaultSnackbarTransition.onBeforeEnter(position.includes('top') ? 'top' : 'bottom');
+        return {
+          ...transition
+        };
+      }
+      return props.transition;
+    });
+    useRender(() => {
+      return _createVNode(YLayer, {
+        "modelValue": active.value,
+        "onUpdate:modelValue": v => active.value = v,
+        "classes": classes.value,
+        "content-classes": computedContentClasses.value,
+        "scrim": false,
+        "content-styles": computedInset.value,
+        "transition": proxyTransition.value,
+        "ref": "layer"
+      }, {
+        default: () => _createVNode(_Fragment, null, [_createVNode(YPlate, null, null), _createVNode("div", {
+          "class": "y-snackbar__content",
+          "onClick": withModifiers(onClickContent, ['capture']),
+          "onMouseenter": () => hover.value = true,
+          "onMouseleave": () => hover.value = false
+        }, [slots.default?.()])])
+      });
+    });
+    return {
+      active,
+      hover,
+      classes,
+      computedContentClasses,
+      computedInset,
+      proxyTransition,
+      onClickContent
+    };
+  }
+});
+//# sourceMappingURL=YSnackbar.mjs.map

package/lib/components/snackbar/YSnackbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YSnackbar.mjs","names":["animate","computed","defineComponent","ref","watch","withModifiers","useModelDuplex","useRender","useTimer","bindClasses","YLayer","YPlate","defaultSnackbarTransition","name","onBeforeEnter","direction","el","getAttribute","cache","style","getPropertyValue","setAttribute","setProperty","onEnter","done","motion","transform","replace","duration","finished","then","removeAttribute","YSnackbar","components","emits","props","modelValue","type","Boolean","contentClasses","Array","String","Object","position","default","transition","Number","setup","_ref","emit","slots","active","hover","classes","computedContentClasses","boundClasses","computedInset","first","second","split","y","x","ret","dismiss","value","start","stop","reset","setTimer","neo","immediate","onClickContent","event","proxyTransition","includes","_createVNode","v","_Fragment","onMouseenter","onMouseleave"],"sources":["../../../src/components/snackbar/YSnackbar.tsx"],"sourcesContent":["import { animate } from 'motion';\nimport {\n  PropType,\n  computed,\n  defineComponent,\n  ref,\n  watch,\n  withModifiers,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useTimer } from '../../composables/timing';\nimport { bindClasses } from '../../util/vue-component';\nimport { YLayer } from '../layer';\nimport { YPlate } from '../plate';\n\nimport './YSnackbar.scss';\n\nconst defaultSnackbarTransition = {\n  name: 'y-snackbar',\n  onBeforeEnter: (direction: 'top' | 'bottom') => (el: HTMLElement) => {\n    if (!el.getAttribute('data-transform')) {\n      const cache = el.style.getPropertyValue('transform');\n      el.setAttribute('data-transform', cache);\n      el.style.setProperty(\n        'transform',\n        `${cache} translateY(${direction === 'top' ? '-' : ''}40px)`,\n      );\n    }\n  },\n  onEnter(el: HTMLElement, done: () => void) {\n    const cache = el.getAttribute('data-transform');\n    const motion = el.getAttribute('data-motion');\n    if (motion || !cache) {\n      return;\n    }\n    el.setAttribute('data-motion', 'true');\n    animate(\n      el,\n      {\n        transform: `${cache.replace(/translateY(.+)/, 'translateY(0)')}`,\n      },\n      { duration: 0.1 },\n    ).finished.then(() => {\n      el.removeAttribute('data-transform');\n      el.removeAttribute('data-motion');\n      done();\n    });\n  },\n};\n\nexport const YSnackbar = defineComponent({\n  name: 'YSnackbar',\n  components: { YPlate, YLayer },\n  emits: ['update:modelValue', 'click'],\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    contentClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    position: {\n      type: String as PropType<string>,\n      default: 'top center',\n    },\n    transition: {\n      type: [String, Object] as PropType<string | any>,\n      default: () => ({ ...defaultSnackbarTransition }),\n    },\n    /**\n     * @property Number\n     *\n     * The amount of time the snackbar should be displayed.\n     * @default 4000\n     */\n    duration: {\n      type: Number as PropType<number>,\n      default: 4000,\n    },\n  },\n  setup(props, { emit, slots }) {\n    const active = useModelDuplex(props);\n    const hover = ref(false);\n\n    const classes = computed(() => {\n      return {\n        'y-snackbar': true,\n      };\n    });\n\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\n      const boundClasses = bindClasses(props.contentClasses);\n      return {\n        ...boundClasses,\n        'y-snackbar__display': true,\n      };\n    });\n\n    const computedInset = computed(() => {\n      const [first, second] = props.position?.split(' ');\n      let y = 'top';\n      let x = 'left';\n      if (second) {\n        x = second;\n        y = first;\n      } else {\n        x = first;\n      }\n      const ret = {\n        [x === 'center' ? 'left' : x]: x === 'center' ? `50%` : 0,\n        [y]: 0,\n      } as any;\n      if (x === 'center') {\n        ret.transform = 'translateX(-50%)';\n      }\n      return ret;\n    });\n\n    function dismiss() {\n      active.value = false;\n    }\n\n    const { start, stop, reset } = useTimer(dismiss, props.duration);\n    function setTimer() {\n      if (props.duration > 0) {\n        start();\n      }\n    }\n\n    watch(hover, (neo: boolean) => {\n      if (neo) {\n        stop();\n      } else {\n        setTimer();\n      }\n    });\n\n    watch(\n      active,\n      (neo: boolean) => {\n        if (neo) {\n          setTimer();\n        } else {\n          reset();\n        }\n      },\n      { immediate: true },\n    );\n\n    function onClickContent(event: MouseEvent) {\n      emit('click', event);\n      active.value = false;\n    }\n\n    const proxyTransition = computed(() => {\n      const { transition, position } = props;\n      if (transition?.name === 'y-snackbar') {\n        transition.onBeforeEnter = defaultSnackbarTransition.onBeforeEnter(\n          position.includes('top') ? 'top' : 'bottom',\n        );\n        return { ...transition };\n      }\n      return props.transition;\n    });\n\n    useRender(() => {\n      return (\n        <YLayer\n          modelValue={active.value}\n          onUpdate:modelValue={(v) => (active.value = v)}\n          classes={classes.value}\n          content-classes={computedContentClasses.value}\n          scrim={false}\n          content-styles={computedInset.value}\n          transition={proxyTransition.value as any}\n          ref=\"layer\"\n        >\n          {{\n            default: () => (\n              <>\n                <YPlate></YPlate>\n                <div\n                  class=\"y-snackbar__content\"\n                  onClick={withModifiers(onClickContent, ['capture'])}\n                  onMouseenter={() => (hover.value = true)}\n                  onMouseleave={() => (hover.value = false)}\n                >\n                  {slots.default?.()}\n                </div>\n              </>\n            ),\n          }}\n        </YLayer>\n      );\n    });\n\n    return {\n      active,\n      hover,\n      classes,\n      computedContentClasses,\n      computedInset,\n      proxyTransition,\n      onClickContent,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/snackbar/YSnackbar.scss

@@ -0,0 +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;
+  }
+}

package/lib/components/snackbar/index.mjs

@@ -0,0 +1,2 @@
+export * from "./YSnackbar.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/snackbar/index.ts"],"sourcesContent":["export * from './YSnackbar';\n"],"mappings":""}

package/lib/components/switch/YSwitch.mjs

@@ -0,0 +1,228 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, withModifiers } from 'vue';
+import "./YSwitch.scss";
+let uidCounter = 0;
+export const YSwitch = defineComponent({
+  name: 'YSwitch',
+  model: {
+    prop: 'input',
+    event: 'change'
+  },
+  props: {
+    input: {
+      type: [Boolean, Array],
+      default: false
+    },
+    value: {
+      type: [String, Number, Object]
+    },
+    max: {
+      type: Number
+    },
+    loading: {
+      type: Boolean
+    },
+    disabled: {
+      type: Boolean
+    },
+    stickOut: {
+      type: Boolean
+    },
+    stateLabel: {
+      type: Boolean
+    },
+    color: {
+      type: String
+    },
+    labelOn: {
+      type: String,
+      default: 'ON'
+    },
+    labelOff: {
+      type: String,
+      default: 'OFF'
+    }
+  },
+  data() {
+    return {
+      innerValue: false,
+      counterId: '',
+      focused: false
+    };
+  },
+  created() {
+    const iid = uidCounter.toString();
+    uidCounter += 1;
+    this.counterId = iid;
+    if (Array.isArray(this.input)) {
+      this.inputByValue();
+    } else {
+      this.innerValue = this.input;
+    }
+  },
+  computed: {
+    isMultipleInput() {
+      return Array.isArray(this.input);
+    },
+    multipleInputIndex() {
+      if (!Array.isArray(this.input)) {
+        return -1;
+      }
+      return this.input.findIndex(inp => {
+        return inp === this.value;
+      });
+    },
+    inputId() {
+      const id = this.counterId;
+      return `y-switch--${id}`;
+    },
+    trackStyles() {
+      return {
+        backgroundColor: this.color
+      };
+    },
+    classes() {
+      return {
+        'y-switch--disabled': this.disabled,
+        'y-switch--loading': this.loading,
+        'y-switch--active': this.innerValue,
+        'y-switch--stick-out': this.stickOut,
+        'y-switch--focused': this.focused
+      };
+    }
+  },
+  methods: {
+    inputByValue() {
+      if (Array.isArray(this.input)) {
+        const found = this.input.find(inp => {
+          return inp === this.value;
+        });
+        if (found !== undefined) {
+          this.innerValue = true;
+        } else {
+          this.innerValue = false;
+        }
+      }
+    },
+    changeMultipleInput(checked) {
+      if (Array.isArray(this.input)) {
+        const multipleInput = this.input.slice();
+        if (checked && this.max !== undefined && multipleInput.length >= this.max) {
+          this.$emit('overmax');
+          this.nextChange(false, multipleInput);
+          return;
+        }
+        if (checked && this.multipleInputIndex < 0) {
+          multipleInput.push(this.value);
+        } else if (this.multipleInputIndex > -1) {
+          multipleInput.splice(this.multipleInputIndex, 1);
+        }
+        this.$emit('change', multipleInput);
+      }
+    },
+    nextChange(checked, value) {
+      this.$nextTick(() => {
+        this.innerValue = checked;
+      });
+    },
+    onClick($event) {
+      if (this.disabled || this.loading) return;
+      this.changeInput(!this.innerValue, $event);
+    },
+    onFocus() {
+      this.focused = true;
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onKeydown($event) {
+      // nothing
+    },
+    onChange($event) {
+      const $checkbox = $event.target;
+      const {
+        checked
+      } = $checkbox;
+      this.changeInput(checked, $event);
+    },
+    changeInput(checked, event) {
+      this.innerValue = checked;
+      if (this.isMultipleInput) {
+        this.changeMultipleInput(checked);
+      } else {
+        this.$emit('change', checked);
+      }
+    }
+  },
+  watch: {
+    input() {
+      this.inputByValue();
+    }
+  },
+  render() {
+    const {
+      classes,
+      onClick,
+      onKeydown,
+      onFocus,
+      onBlur,
+      onChange,
+      inputId,
+      innerValue,
+      disabled,
+      trackStyles,
+      stateLabel,
+      labelOn,
+      labelOff,
+      loading
+    } = this;
+    return _createVNode("div", {
+      "class": {
+        'y-switch': true,
+        ...classes
+      }
+    }, [_createVNode("div", {
+      "class": "y-switch__slot"
+    }, [_createVNode("div", {
+      "class": "y-switch__input",
+      "onClick": withModifiers(onClick, ['capture']),
+      "onKeydown": onKeydown
+    }, [_createVNode("input", {
+      "id": inputId,
+      "aria-checked": innerValue,
+      "type": "checkbox",
+      "role": "switch",
+      "onFocus": onFocus,
+      "onBlur": onBlur,
+      "onChange": onChange,
+      "disabled": disabled,
+      "checked": innerValue,
+      "ref": "checkbox"
+    }, null), _createVNode("div", {
+      "class": "y-switch__track",
+      "style": trackStyles
+    }, [stateLabel && _createVNode("div", {
+      "class": "y-switch__state"
+    }, [_createVNode("span", {
+      "class": "y-switch__state-label y-switch__state-label--on"
+    }, {
+      labelOn
+    }), _createVNode("span", {
+      "class": "y-switch__state-label y-switch__state-label--off"
+    }, {
+      labelOff
+    })])]), _createVNode("div", {
+      "class": "y-switch__thumb"
+    }, [loading && _createVNode("div", {
+      "class": "y-switch__spinner"
+    }, null)])]), _createVNode("label", {
+      "for": inputId,
+      "class": "y-switch__label"
+    }, [_createVNode("slot", {
+      "name": "label"
+    }, null), _createVNode("input", {
+      "hidden": true
+    }, null)])])]);
+  }
+});
+//# sourceMappingURL=YSwitch.mjs.map

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

@@ -0,0 +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","watch","render","_createVNode"],"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      }\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      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      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, ['capture'])}\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 && (<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            </div>\n            <div class=\"y-switch__thumb\">\n              {loading && (<div class=\"y-switch__spinner\"></div>)}\n            </div>\n          </div>\n          <label for={inputId} class=\"y-switch__label\">\n            <slot name=\"label\"></slot>\n            <input hidden />\n          </label>\n        </div>\n      </div>\n    );\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,aAAa,QAAQ,KAAK;AAE9D;AAEA,IAAIC,UAAU,GAAG,CAAC;AAElB,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAAC;EACrCI,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;IACF,CAAC;IACDsB,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;MAC7B,IAAI,CAACL,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;EACDkB,KAAK,EAAE;IACL3D,KAAKA,CAAA,EAAG;MACN,IAAI,CAACyB,YAAY,CAAC,CAAC;IACrB;EACF,CAAC;EACDmC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJzB,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,OAAAmD,YAAA;MAAA,SACc;QAAE,UAAU,EAAE,IAAI;QAAE,GAAG1B;MAAQ;IAAC,IAAA0B,YAAA;MAAA,SAC/B;IAAgB,IAAAA,YAAA;MAAA,SAEjB,iBAAiB;MAAA,WACdrE,aAAa,CAAC0D,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC;MAAA,aACjCK;IAAS,IAAAM,YAAA;MAAA,MAGd9B,OAAO;MAAA,gBACGb,UAAU;MAAA,QACnB,UAAU;MAAA,QACV,QAAQ;MAAA,WACJmC,OAAO;MAAA,UACRC,MAAM;MAAA,YACJE,QAAQ;MAAA,YACR7C,QAAQ;MAAA,WACTO,UAAU;MAAA,OACf;IAAU,UAAA2C,YAAA;MAAA,SAEL,iBAAiB;MAAA,SAAQ5B;IAAW,IAC5CpB,UAAU,IAAAgD,YAAA;MAAA,SAAgB;IAAiB,IAAAA,YAAA;MAAA,SAC9B;IAAiD;MACxD9C;IAAO,IAAA8C,YAAA;MAAA,SAEA;IAAkD;MACzD7C;IAAQ,IAER,IAAA6C,YAAA;MAAA,SAEE;IAAiB,IACzBnD,OAAO,IAAAmD,YAAA;MAAA,SAAgB;IAAmB,QAAQ,MAAAA,YAAA;MAAA,OAG3C9B,OAAO;MAAA,SAAQ;IAAiB,IAAA8B,YAAA;MAAA,QAC/B;IAAO,UAAAA,YAAA;MAAA;IAAA;EAM5B;AACF,CAAC,CAAC"}

package/{src/components/switch/y-switch.scss → lib/components/switch/YSwitch.scss}

@@ -1,11 +1,8 @@
-/*!
- * Created by yeonyu 2022.
- */
 @use '../../styles/palette';
 @use '../../styles/variables';
 
 .y-switch {
-  $primary: palette.$basic-violet-400;
+  --y-switch__color: rgba(var(--y-theme--primary), 1);
   font-size: 1rem;
 
   &__slot {
@@ -43,7 +40,7 @@
     width: 100%;
     height: 100%;
     border-radius: 2em;
-    background-color: #a0a0a0;
+    background-color: #e0e0e0;
     position: absolute;
     left: 0;
     top: 0;
@@ -53,8 +50,8 @@
   &__thumb {
     width: 1.1em;
     height: 1.1em;
-    top: calc(50% - 0.56em);
-    left: 0.2em;
+    align-self: center;
+    left: 0.185em;
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -63,6 +60,7 @@
     pointer-events: none;
     position: relative;
     transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
+    will-change: left, transform;
   }
 
   &__spinner {
@@ -95,7 +93,7 @@
       border-radius: 50%;
       border-width: 2px 2px 0 0;
       border-style: solid;
-      border-color: $primary transparent;
+      border-color: var(--y-switch__color) transparent;
     }
 
     &:after {
@@ -105,30 +103,23 @@
       top: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(0deg, transparent 60%, rgba($primary, 0.4));
+      background: linear-gradient(0deg, transparent 60%, rgba(var(--y-switch__color), 0.4));
       filter: blur(4px);
       animation: spinner-blur 3s infinite;
     }
   }
 
-  &:hover:not(&--disabled) {
-    .y-switch__thumb {
-      //background: map-get($light-theme, 'hover-bg');
-    }
-  }
-
   &--active {
     .y-switch__track {
-      background-color: $primary;
+      background-color: var(--y-switch__color);
     }
 
     .y-switch__thumb {
-      left: 1.7em;
-      //transform: translateX(1.6em);
+      left: calc(100% - 1.1em - 0.24em);
     }
   }
+
   &--active:not(&--loading):active &__thumb {
-    //left: 0.2em;
     left: 1.8em;
   }
 
@@ -141,21 +132,22 @@
       left: 2px;
       right: 2px;
       border-radius: 50%;
-      background-color: rgba($primary, 0.4);
+      background-color: rgba(var(--y-switch__color), 0.4);
     }
   }
 
   &--stick-out {
     .y-switch__thumb {
-      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.32);
+      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: 90%;
-      height: 80%;
-      left: 5%;
-      top: 12%;
-      box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.4);
+      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);
     }
   }
 

package/lib/components/switch/index.mjs

@@ -0,0 +1,2 @@
+export * from "./YSwitch.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/switch/index.ts"],"sourcesContent":["export * from './YSwitch';\n"],"mappings":""}

package/lib/components/table/YDataTable.mjs

@@ -0,0 +1,46 @@
+import { createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
+import { computed, defineComponent } from "vue";
+import { useRender } from "../../composables/component.mjs";
+import { YDataTableBody } from "./YDataTableBody.mjs";
+import { YDataTableControl } from "./YDataTableControl.mjs";
+import { YDataTableHead } from "./YDataTableHead.mjs";
+import { YDataTableLayer } from "./YDataTableLayer.mjs";
+import { YTable } from "./YTable.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+import { pressDataTablePaginationProps } from "./pagination.mjs";
+export const pressDataTableProps = propsFactory({
+  width: [String, Number],
+  search: String,
+  ...pressDataTablePaginationProps()
+}, 'YDataTable');
+export const YDataTable = defineComponent({
+  name: 'YDataTable',
+  props: {
+    ...pressDataTableProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const slotProps = computed(() => {
+      return {};
+    });
+    useRender(() => {
+      return _createVNode(YTable, {
+        "class": ['y-data-table']
+      }, {
+        default: () => [{
+          top: () => slots.top?.(slotProps.value),
+          leading: () => slots.leading ? slots.leading(slotProps.value) : _createVNode(_Fragment, null, [_createVNode(YDataTableLayer, null, slots)]),
+          default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", null, [_createVNode(YDataTableHead, null, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, null, slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+          trailing: () => slots.trailing?.(slotProps.value),
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : _createVNode(YDataTableControl, null, {
+            prepend: slots['control.prepend']
+          })
+        }],
+        ...slots
+      });
+    });
+  }
+});
+//# sourceMappingURL=YDataTable.mjs.map