yuyeon 0.0.0 → 0.0.3

package/lib/components/card/YCardHeader.mjs

@@ -0,0 +1,10 @@
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+  name: 'y-card-header',
+  render() {
+    return h('div', {
+      class: 'y-card__header'
+    }, this.$slots.default?.());
+  }
+});
+//# sourceMappingURL=YCardHeader.mjs.map

package/lib/components/card/YCardHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YCardHeader.mjs","names":["defineComponent","h","name","render","class","$slots","default"],"sources":["../../../src/components/card/YCardHeader.ts"],"sourcesContent":["import { defineComponent, h } from 'vue';\n\nexport default defineComponent({\n  name: 'y-card-header',\n  render() {\n    return h('div', { class: 'y-card__header' }, this.$slots.default?.());\n  },\n});\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,CAAC,QAAQ,KAAK;AAExC,eAAeD,eAAe,CAAC;EAC7BE,IAAI,EAAE,eAAe;EACrBC,MAAMA,CAAA,EAAG;IACP,OAAOF,CAAC,CAAC,KAAK,EAAE;MAAEG,KAAK,EAAE;IAAiB,CAAC,EAAE,IAAI,CAACC,MAAM,CAACC,OAAO,GAAG,CAAC,CAAC;EACvE;AACF,CAAC,CAAC"}

package/lib/components/card/index.mjs

@@ -0,0 +1,6 @@
+import YCard from "./YCard.mjs";
+import YCardBody from "./YCardBody.mjs";
+import YCardFooter from "./YCardFooter.mjs";
+import YCardHeader from "./YCardHeader.mjs";
+export { YCard, YCardHeader, YCardBody, YCardFooter };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["YCard","YCardBody","YCardFooter","YCardHeader"],"sources":["../../../src/components/card/index.ts"],"sourcesContent":["import YCard from './YCard';\nimport YCardBody from './YCardBody';\nimport YCardFooter from './YCardFooter';\nimport YCardHeader from './YCardHeader';\n\nexport { YCard, YCardHeader, YCardBody, YCardFooter };\n"],"mappings":"OAAOA,KAAK;AAAA,OACLC,SAAS;AAAA,OACTC,WAAW;AAAA,OACXC,WAAW;AAElB,SAASH,KAAK,EAAEG,WAAW,EAAEF,SAAS,EAAEC,WAAW"}

package/lib/components/checkbox/YCheckbox.mjs

@@ -0,0 +1,154 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent, ref, withModifiers } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { getUid } from "../../util/vue-component.mjs";
+import "./YCheckbox.scss";
+import YInputCheckbox from "./YInputCheckbox.mjs";
+export default defineComponent({
+  name: 'YCheckbox',
+  components: {
+    YInputCheckbox
+  },
+  model: {
+    prop: 'inputValue',
+    event: 'change'
+  },
+  emits: ['focus', 'blur', 'change'],
+  props: {
+    inputValue: [Boolean, Array],
+    value: [String, Number, Object],
+    label: String,
+    reverse: Boolean,
+    icon: {
+      type: [Object, String]
+    },
+    color: {
+      type: String,
+      default: () => 'primary'
+    },
+    disabled: Boolean,
+    readonly: Boolean
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const focused = ref(false);
+    const innerValue = ref(false);
+    const counterId = (getUid() ?? '').toString();
+    const inputId = `input-${counterId}`;
+    function onFocus(e) {
+      focused.value = true;
+      emit('focus', e);
+    }
+    function onBlur(e) {
+      focused.value = false;
+      emit('blur', e);
+    }
+    function onClick(e) {
+      if (props.disabled || props.readonly) return;
+      innerValue.value = !innerValue.value;
+      emit('change', innerValue.value, e);
+    }
+    function inputByValue() {
+      if (Array.isArray(props.inputValue)) {
+        const found = props.inputValue?.find(inp => inp === props.value);
+        if (found !== undefined) {
+          innerValue.value = true;
+        } else {
+          innerValue.value = false;
+        }
+      } else if (typeof props.inputValue === 'boolean') {
+        innerValue.value = props.inputValue;
+      }
+    }
+    const classes = computed(() => {
+      const {
+        reverse,
+        disabled,
+        readonly
+      } = props;
+      return {
+        'y-checkbox': true,
+        'y-checkbox--reverse': !!reverse,
+        'y-checkbox--focused': focused.value,
+        'y-checkbox--disabled': !!disabled,
+        'y-checkbox--readonly': !!readonly
+      };
+    });
+    const computedIcon = computed(() => {
+      if (typeof props.icon === 'string') {
+        return props.icon;
+      }
+      return undefined;
+    });
+    const isMultipleInput = computed(() => {
+      return Array.isArray(props.inputValue);
+    });
+    const multipleInputIndex = computed(() => {
+      if (!isMultipleInput.value) {
+        return -1;
+      }
+      return props.inputValue.findIndex(v => v === props.value);
+    });
+    useRender(() => {
+      return _createVNode("div", {
+        "class": classes
+      }, [_createVNode("slot", {
+        "name": "prepend"
+      }, null), _createVNode("div", {
+        "class": "y-checkbox__slot"
+      }, [_createVNode(YInputCheckbox, {
+        "onClick": function (e) {
+          e.stopPropagation();
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
+          onClick(e, ...args);
+        },
+        "onFocus": onFocus,
+        "onBlur": onBlur,
+        "id": 'counterId',
+        "value": innerValue.value,
+        "icon": computedIcon.value,
+        "color": props.color,
+        "disabled": props.disabled,
+        "readonly": props.readonly
+      }, {
+        default: () => [slots.icon && {
+          icon: function () {
+            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+              args[_key2] = arguments[_key2];
+            }
+            return slots.icon?.(...args);
+          }
+        }]
+      }), _createVNode("label", {
+        "onClick": withModifiers(() => {}, ['stop']),
+        "class": "y-checkbox__label",
+        "for": inputId
+      }, [slots.label ? slots.label?.() : props.label])]), slots.append?.()]);
+    });
+    return {
+      innerValue,
+      inputByValue
+    };
+  },
+  created() {
+    if (Array.isArray(this.inputValue)) {
+      this.inputByValue();
+    } else {
+      this.innerValue = !!this.inputValue;
+    }
+  },
+  watch: {
+    inputValue: {
+      handler() {
+        this.inputByValue();
+      },
+      immediate: true
+    }
+  }
+});
+//# sourceMappingURL=YCheckbox.mjs.map

package/lib/components/checkbox/YCheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YCheckbox.mjs","names":["computed","defineComponent","ref","withModifiers","useRender","getUid","YInputCheckbox","name","components","model","prop","event","emits","props","inputValue","Boolean","Array","value","String","Number","Object","label","reverse","icon","type","color","default","disabled","readonly","setup","_ref","emit","slots","focused","innerValue","counterId","toString","inputId","onFocus","e","onBlur","onClick","inputByValue","isArray","found","find","inp","undefined","classes","computedIcon","isMultipleInput","multipleInputIndex","findIndex","v","_createVNode","stopPropagation","_len","arguments","length","args","_key","_len2","_key2","append","created","watch","handler","immediate"],"sources":["../../../src/components/checkbox/YCheckbox.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref, withModifiers } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { getUid } from '../../util/vue-component';\n\nimport './YCheckbox.scss';\nimport YInputCheckbox from './YInputCheckbox';\n\nexport default defineComponent({\n  name: 'YCheckbox',\n  components: { YInputCheckbox },\n  model: {\n    prop: 'inputValue',\n    event: 'change',\n  },\n  emits: ['focus', 'blur', 'change'],\n  props: {\n    inputValue: [Boolean, Array] as PropType<boolean | any[]>,\n    value: [String, Number, Object] as PropType<any>,\n    label: String as PropType<string>,\n    reverse: Boolean as PropType<boolean>,\n    icon: {\n      type: [Object, String] as PropType<\n        { checked?: string; unchecked?: string } | string\n      >,\n    },\n    color: {\n      type: String as PropType<string>,\n      default: () => 'primary',\n    },\n    disabled: Boolean as PropType<boolean>,\n    readonly: Boolean as PropType<boolean>,\n  },\n  setup(props, { emit, slots }) {\n    const focused = ref(false);\n    const innerValue = ref(false);\n    const counterId = (getUid() ?? '').toString();\n    const inputId = `input-${counterId}`;\n\n    function onFocus(e: FocusEvent) {\n      focused.value = true;\n      emit('focus', e);\n    }\n\n    function onBlur(e: FocusEvent) {\n      focused.value = false;\n      emit('blur', e);\n    }\n\n    function onClick(e: Event, ...args: any[]) {\n      if (props.disabled || props.readonly) return;\n      innerValue.value = !innerValue.value;\n      emit('change', innerValue.value, e);\n    }\n\n    function inputByValue() {\n      if (Array.isArray(props.inputValue)) {\n        const found = props.inputValue?.find((inp: any) => inp === props.value);\n\n        if (found !== undefined) {\n          innerValue.value = true;\n        } else {\n          innerValue.value = false;\n        }\n      } else if (typeof props.inputValue === 'boolean') {\n        innerValue.value = props.inputValue;\n      }\n    }\n\n    const classes = computed<Record<string, boolean>>(() => {\n      const { reverse, disabled, readonly } = props;\n      return {\n        'y-checkbox': true,\n        'y-checkbox--reverse': !!reverse,\n        'y-checkbox--focused': focused.value,\n        'y-checkbox--disabled': !!disabled,\n        'y-checkbox--readonly': !!readonly,\n      };\n    });\n\n    const computedIcon = computed<string | undefined>(() => {\n      if (typeof props.icon === 'string') {\n        return props.icon;\n      }\n      return undefined;\n    });\n\n    const isMultipleInput = computed<boolean>(() => {\n      return Array.isArray(props.inputValue);\n    });\n\n    const multipleInputIndex = computed<number>(() => {\n      if (!isMultipleInput.value) {\n        return -1;\n      }\n      return (props.inputValue as any[]).findIndex(\n        (v: any) => v === props.value,\n      );\n    });\n\n    useRender(() => {\n      return (\n        <div class={classes}>\n          <slot name=\"prepend\"></slot>\n          <div class=\"y-checkbox__slot\">\n            <YInputCheckbox\n              onClick={(e: Event, ...args: any[]) => {\n                e.stopPropagation();\n                onClick(e, ...args);\n              }}\n              onFocus={onFocus}\n              onBlur={onBlur}\n              id={'counterId'}\n              value={innerValue.value}\n              icon={computedIcon.value}\n              color={props.color}\n              disabled={props.disabled}\n              readonly={props.readonly}\n            >\n              {slots.icon && {\n                icon: (...args: any[]) => slots.icon?.(...args),\n              }}\n            </YInputCheckbox>\n            <label\n              onClick={withModifiers(() => {}, ['stop'])}\n              class=\"y-checkbox__label\"\n              for={inputId}\n            >\n              {slots.label ? slots.label?.() : props.label}\n            </label>\n          </div>\n          {slots.append?.()}\n        </div>\n      );\n    });\n\n    return {\n      innerValue,\n      inputByValue,\n    };\n  },\n  created() {\n    if (Array.isArray(this.inputValue)) {\n      this.inputByValue();\n    } else {\n      this.innerValue = !!this.inputValue;\n    }\n  },\n  watch: {\n    inputValue: {\n      handler() {\n        this.inputByValue();\n      },\n      immediate: true,\n    },\n  },\n});\n"],"mappings":"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"}

package/lib/components/checkbox/YInputCheckbox.mjs

@@ -0,0 +1,113 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent, h } from 'vue';
+import { YIconCheckbox } from "../icons/YIconCheckbox.mjs";
+import "./YInputCheckbox.scss";
+export default defineComponent({
+  name: 'YInputCheckbox',
+  components: {
+    YIconCheckbox
+  },
+  props: {
+    id: String,
+    value: Boolean,
+    icon: String,
+    color: {
+      type: String,
+      default: () => 'primary'
+    },
+    disabled: Boolean,
+    readonly: Boolean
+  },
+  emits: ['focus', 'blur', 'click'],
+  data() {
+    return {
+      counterId: this.$.uid.toString(),
+      checked: false,
+      focused: false
+    };
+  },
+  computed: {
+    coloredClass() {
+      if (this.color.startsWith('#')) {
+        return undefined;
+      }
+      return `color--${this.color}`;
+    },
+    classes() {
+      const ret = {
+        'y-input': true,
+        'y-input--checkbox': true,
+        'y-input--active': this.checked,
+        'y-input--focused': this.focused
+      };
+      if (this.coloredClass) {
+        ret[this.coloredClass] = true;
+      }
+      return ret;
+    },
+    inputId() {
+      let id = this.counterId;
+      if (this.id) {
+        id = this.id;
+      }
+      return `input-${id}`;
+    },
+    iconComponent() {
+      if (!this.icon) {
+        return YIconCheckbox;
+      }
+      return null;
+    }
+  },
+  methods: {
+    onFocus(e) {
+      this.focused = true;
+      this.$emit('focus', e);
+    },
+    onBlur(e) {
+      this.focused = false;
+      this.$emit('blur', e);
+    },
+    onClick(event) {
+      this.$emit('click', event);
+    }
+  },
+  watch: {
+    value(neo) {
+      this.checked = neo;
+    }
+  },
+  created() {
+    this.checked = !!this.value;
+  },
+  render() {
+    const {
+      onClick,
+      classes,
+      inputId,
+      checked,
+      onFocus,
+      onBlur,
+      disabled,
+      readonly,
+      iconComponent
+    } = this;
+    return _createVNode(_Fragment, null, [_createVNode("div", {
+      "onClick": onClick,
+      "class": classes
+    }, [_createVNode("input", {
+      "id": inputId,
+      "aria-checked": checked,
+      "role": "checkbox",
+      "type": "checkbox",
+      "checked": checked,
+      "onFocus": onFocus,
+      "onBlur": onBlur,
+      "disabled": disabled,
+      "readonly": readonly
+    }, null), this.$slots.icon ? this.$slots.icon({
+      checked
+    }) : iconComponent ? h(iconComponent) : _createVNode(YIconCheckbox, null, null)])]);
+  }
+});
+//# sourceMappingURL=YInputCheckbox.mjs.map

package/lib/components/checkbox/YInputCheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YInputCheckbox.mjs","names":["defineComponent","h","YIconCheckbox","name","components","props","id","String","value","Boolean","icon","color","type","default","disabled","readonly","emits","data","counterId","$","uid","toString","checked","focused","computed","coloredClass","startsWith","undefined","classes","ret","inputId","iconComponent","methods","onFocus","e","$emit","onBlur","onClick","event","watch","neo","created","render","_createVNode","_Fragment","$slots"],"sources":["../../../src/components/checkbox/YInputCheckbox.tsx"],"sourcesContent":["import { PropType, defineComponent, h } from 'vue';\n\nimport { YIconCheckbox } from '../icons/YIconCheckbox';\n\nimport './YInputCheckbox.scss';\n\nexport default defineComponent({\n  name: 'YInputCheckbox',\n  components: { YIconCheckbox },\n  props: {\n    id: String as PropType<string>,\n    value: Boolean as PropType<boolean>,\n    icon: String as PropType<string>,\n    color: {\n      type: String as PropType<string>,\n      default: () => 'primary',\n    },\n    disabled: Boolean as PropType<boolean>,\n    readonly: Boolean as PropType<boolean>,\n  },\n  emits: ['focus', 'blur', 'click'],\n  data() {\n    return {\n      counterId: this.$.uid.toString(),\n      checked: false,\n      focused: false,\n    };\n  },\n  computed: {\n    coloredClass() {\n      if (this.color.startsWith('#')) {\n        return undefined;\n      }\n      return `color--${this.color}`;\n    },\n    classes() {\n      const ret: Record<string, boolean> = {\n        'y-input': true,\n        'y-input--checkbox': true,\n        'y-input--active': this.checked,\n        'y-input--focused': this.focused,\n      };\n      if (this.coloredClass) {\n        ret[this.coloredClass] = true;\n      }\n      return ret;\n    },\n    inputId() {\n      let id = this.counterId;\n      if (this.id) {\n        id = this.id;\n      }\n      return `input-${id}`;\n    },\n    iconComponent() {\n      if (!this.icon) {\n        return YIconCheckbox;\n      }\n      return null;\n    },\n  },\n  methods: {\n    onFocus(e: FocusEvent) {\n      this.focused = true;\n      this.$emit('focus', e);\n    },\n    onBlur(e: FocusEvent) {\n      this.focused = false;\n      this.$emit('blur', e);\n    },\n    onClick(event: MouseEvent) {\n      this.$emit('click', event);\n    },\n  },\n  watch: {\n    value(neo: boolean) {\n      this.checked = neo;\n    },\n  },\n  created() {\n    this.checked = !!this.value;\n  },\n  render() {\n    const {\n      onClick,\n      classes,\n      inputId,\n      checked,\n      onFocus,\n      onBlur,\n      disabled,\n      readonly,\n      iconComponent,\n    } = this;\n    return (\n      <>\n        <div onClick={onClick} class={classes}>\n          <input\n            id={inputId}\n            aria-checked={checked}\n            role=\"checkbox\"\n            type=\"checkbox\"\n            checked={checked}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            disabled={disabled}\n            readonly={readonly}\n          />\n          {this.$slots.icon ? (\n            this.$slots.icon({ checked })\n          ) : iconComponent ? h(iconComponent) :\n            <YIconCheckbox></YIconCheckbox>}\n        </div>\n      </>\n    );\n  },\n});\n"],"mappings":"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"}

package/{src/components/checkbox/y-input-checkbox.scss → lib/components/checkbox/YInputCheckbox.scss}

@@ -4,7 +4,7 @@ $checkbox__color: palette.$primary;
 $checkbox__border-color: #a4a4a4;
 
 .y-input--checkbox {
-  --y-checkbox__color: var(--y-palette--primary);
+  --y-checkbox__color: var(--y-theme--primary);
 
   position: relative;
   width: 24px;
@@ -22,7 +22,7 @@ $checkbox__border-color: #a4a4a4;
     user-select: none;
   }
 
-  .icon-checkbox__checkmark-path {
+  .y-icon-checkbox__checkmark-path {
     fill: none;
     stroke: #ffffff;
     stroke-width: 2px;
@@ -31,54 +31,54 @@ $checkbox__border-color: #a4a4a4;
     transition: stroke-dashoffset 120ms cubic-bezier(0.4, 0, 0.6, 1);
   }
 
-  .icon-checkbox__border-path {
-    fill: rgba($checkbox__color, 0);
+  .y-icon-checkbox__border-path {
+    fill: rgba(var(--y-checkbox__color), 0);
     stroke: rgba($checkbox__border-color, 0.8);
     stroke-width: 2;
     transition: fill 200ms 180ms ease-in;
   }
 
-  input:checked ~ .icon-checkbox,
-  &.y-input--active .icon-checkbox {
-    .icon-checkbox__checkmark-path {
+  input:checked ~ .y-icon-checkbox,
+  &.y-input--active .y-icon-checkbox {
+    .y-icon-checkbox__checkmark-path {
       stroke-dashoffset: 0;
       transition: stroke-dashoffset 120ms 140ms cubic-bezier(0.4, 0, 0.6, 1);
     }
 
-    .icon-checkbox__border-path {
-      fill: $checkbox__color;
-      stroke: rgba($checkbox__color, 0.8);
+    .y-icon-checkbox__border-path {
+      fill: rgb(var(--y-checkbox__color));
+      stroke: rgba(var(--y-checkbox__color), 0.8);
       transition: fill 200ms ease-in;
     }
   }
 
-  input:focus ~ .icon-checkbox {
-    .icon-checkbox__border-path {
-      outline: rgba($checkbox__color, 0.5) solid 4px;
+  input:focus ~ .y-icon-checkbox {
+    .y-icon-checkbox__border-path {
+      outline: rgba(var(--y-checkbox__color), 0.5) solid 4px;
       outline-offset: -6px;
     }
   }
 
   &:hover {
-    .icon-checkbox__border-path {
-      stroke: rgba($checkbox__color, 0.5);
+    .y-icon-checkbox__border-path {
+      stroke: rgba(var(--y-checkbox__color), 0.5);
     }
   }
 
   &.y-input--active:hover {
-    .icon-checkbox__border-path {
+    .y-icon-checkbox__border-path {
       fill: lighten($checkbox__color, 10);
     }
   }
 
-  &.y-input--indeterminate .icon-checkbox {
-    .icon-checkbox__checkmark-path {
+  &.y-input--indeterminate .y-icon-checkbox {
+    .y-icon-checkbox__checkmark-path {
       stroke-dashoffset: 0;
       d: path('M5.73,11.91 11.1,11.91 17.79,11.91');
       transition: stroke-dashoffset 400ms ease;
     }
 
-    .icon-checkbox__border-path {
+    .y-icon-checkbox__border-path {
       fill: rgba($checkbox__border-color, 0.8);
       stroke: rgba($checkbox__border-color, 0.8);
     }

package/lib/components/checkbox/index.mjs

@@ -0,0 +1,5 @@
+import YCheckbox from "./YCheckbox.mjs";
+import YInputCheckbox from "./YInputCheckbox.mjs";
+export { YCheckbox };
+export { YInputCheckbox };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["YCheckbox","YInputCheckbox"],"sources":["../../../src/components/checkbox/index.ts"],"sourcesContent":["import YCheckbox from './YCheckbox';\nimport YInputCheckbox from './YInputCheckbox';\n\nexport { YCheckbox };\nexport { YInputCheckbox };\n"],"mappings":"OAAOA,SAAS;AAAA,OACTC,cAAc;AAErB,SAASD,SAAS;AAClB,SAASC,cAAc"}

package/{src/components/chip/y-chip.vue → lib/components/chip/YChip.mjs}

@@ -1,22 +1,8 @@
-<!--
-  - Created by yeonyu 2022.
-  -->
-
-<template>
-  <span class="y-chip" :class="classes" :style="styles">
-    <span class="y-chip__content">
-      <slot></slot>
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
+import { createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue';
-import { hasOwnProperty } from '../../util/common';
-import { colorHexToRgb } from '../../util/ui';
-
-import './y-chip.scss';
-
+import { hasOwnProperty } from "../../util/common.mjs";
+import { colorHexToRgb } from "../../util/ui.mjs";
+import "./YChip.scss";
 export default defineComponent({
   name: 'y-chip',
   props: {
@@ -25,8 +11,8 @@ export default defineComponent({
     small: Boolean,
     bgOpacity: {
       type: Number,
-      default: 0.14,
-    },
+      default: 0.14
+    }
   },
   computed: {
     clickable() {
@@ -34,22 +20,23 @@ export default defineComponent({
     },
     classes() {
       return {
-        'y-chip--clickable': this.clickable,
+        'y-chip': true,
+        'y-chip--clickable': this.clickable
       };
     },
     backgroundColor() {
-      const color = (this.background as string) ?? this.color;
+      const color = this.background ?? this.color;
       return this.colorRgb(color);
     },
     styles() {
       return {
         color: this.color,
-        background: `rgba(${this.backgroundColor}, ${this.bgOpacity})`,
+        background: `rgba(${this.backgroundColor}, ${this.bgOpacity})`
       };
-    },
+    }
   },
   methods: {
-    colorRgb(color: string): string {
+    colorRgb(color) {
       if (color?.startsWith('#')) {
         return colorHexToRgb(color)?.join(',') || '';
       }
@@ -63,7 +50,19 @@ export default defineComponent({
         }
       }
       return '';
-    },
+    }
   },
+  render() {
+    const {
+      classes,
+      styles
+    } = this;
+    return _createVNode("span", {
+      "class": classes,
+      "style": styles
+    }, [_createVNode("span", {
+      "class": "y-chip__content"
+    }, [this.$slots.default?.()])]);
+  }
 });
-</script>
+//# sourceMappingURL=YChip.mjs.map

package/lib/components/chip/YChip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YChip.mjs","names":["defineComponent","hasOwnProperty","colorHexToRgb","name","props","color","String","background","small","Boolean","bgOpacity","type","Number","default","computed","clickable","$attrs","classes","backgroundColor","colorRgb","styles","methods","startsWith","join","RGBA_REGEX","test","value","exec","valueArray","trim","split","splice","render","_createVNode","$slots"],"sources":["../../../src/components/chip/YChip.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { hasOwnProperty } from '../../util/common';\nimport { colorHexToRgb } from '../../util/ui';\n\nimport './YChip.scss';\n\nexport default defineComponent({\n  name: 'y-chip',\n  props: {\n    color: String,\n    background: String,\n    small: Boolean,\n    bgOpacity: {\n      type: Number,\n      default: 0.14,\n    },\n  },\n  computed: {\n    clickable() {\n      return hasOwnProperty(this.$attrs, 'onClick');\n    },\n    classes() {\n      return {\n        'y-chip': true,\n        'y-chip--clickable': this.clickable,\n      };\n    },\n    backgroundColor() {\n      const color = (this.background as string) ?? this.color;\n      return this.colorRgb(color);\n    },\n    styles() {\n      return {\n        color: this.color,\n        background: `rgba(${this.backgroundColor}, ${this.bgOpacity})`,\n      };\n    },\n  },\n  methods: {\n    colorRgb(color: string): string {\n      if (color?.startsWith('#')) {\n        return colorHexToRgb(color)?.join(',') || '';\n      }\n      const RGBA_REGEX = /rgb(a?)\\((?<v>.*)\\)/;\n      if (RGBA_REGEX.test(color)) {\n        const value = RGBA_REGEX.exec(color)?.[2] || '';\n        if (value) {\n          const valueArray = value.trim().split(',');\n          valueArray.splice(3, 1);\n          return valueArray.join(',');\n        }\n      }\n      return '';\n    },\n  },\n  render() {\n    const { classes, styles } = this;\n    return (\n      <span class={classes} style={styles}>\n        <span class=\"y-chip__content\">\n          {this.$slots.default?.()}\n        </span>\n      </span>\n    );\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,cAAc;AAAA,SACdC,aAAa;AAEtB;AAEA,eAAeF,eAAe,CAAC;EAC7BG,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,UAAU,EAAED,MAAM;IAClBE,KAAK,EAAEC,OAAO;IACdC,SAAS,EAAE;MACTC,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,QAAQ,EAAE;IACRC,SAASA,CAAA,EAAG;MACV,OAAOd,cAAc,CAAC,IAAI,CAACe,MAAM,EAAE,SAAS,CAAC;IAC/C,CAAC;IACDC,OAAOA,CAAA,EAAG;MACR,OAAO;QACL,QAAQ,EAAE,IAAI;QACd,mBAAmB,EAAE,IAAI,CAACF;MAC5B,CAAC;IACH,CAAC;IACDG,eAAeA,CAAA,EAAG;MAChB,MAAMb,KAAK,GAAI,IAAI,CAACE,UAAU,IAAe,IAAI,CAACF,KAAK;MACvD,OAAO,IAAI,CAACc,QAAQ,CAACd,KAAK,CAAC;IAC7B,CAAC;IACDe,MAAMA,CAAA,EAAG;MACP,OAAO;QACLf,KAAK,EAAE,IAAI,CAACA,KAAK;QACjBE,UAAU,EAAG,QAAO,IAAI,CAACW,eAAgB,KAAI,IAAI,CAACR,SAAU;MAC9D,CAAC;IACH;EACF,CAAC;EACDW,OAAO,EAAE;IACPF,QAAQA,CAACd,KAAa,EAAU;MAC9B,IAAIA,KAAK,EAAEiB,UAAU,CAAC,GAAG,CAAC,EAAE;QAC1B,OAAOpB,aAAa,CAACG,KAAK,CAAC,EAAEkB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;MAC9C;MACA,MAAMC,UAAU,GAAG,qBAAqB;MACxC,IAAIA,UAAU,CAACC,IAAI,CAACpB,KAAK,CAAC,EAAE;QAC1B,MAAMqB,KAAK,GAAGF,UAAU,CAACG,IAAI,CAACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;QAC/C,IAAIqB,KAAK,EAAE;UACT,MAAME,UAAU,GAAGF,KAAK,CAACG,IAAI,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CF,UAAU,CAACG,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;UACvB,OAAOH,UAAU,CAACL,IAAI,CAAC,GAAG,CAAC;QAC7B;MACF;MACA,OAAO,EAAE;IACX;EACF,CAAC;EACDS,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEf,OAAO;MAAEG;IAAO,CAAC,GAAG,IAAI;IAChC,OAAAa,YAAA;MAAA,SACehB,OAAO;MAAA,SAASG;IAAM,IAAAa,YAAA;MAAA,SACrB;IAAiB,IAC1B,IAAI,CAACC,MAAM,CAACrB,OAAO,GAAG,CAAC;EAIhC;AACF,CAAC,CAAC"}

package/{src/components/chip/y-chip.scss → lib/components/chip/YChip.scss}

@@ -1,7 +1,3 @@
-/*!
- * Created by yeonyu 2022.
- */
-
 @use '../../styles/variables';
 
 $chip-border-radius: variables.$border-radius-root;

package/lib/components/chip/index.mjs

@@ -0,0 +1,3 @@
+import YChip from "./YChip.mjs";
+export { YChip };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["YChip"],"sources":["../../../src/components/chip/index.ts"],"sourcesContent":["import YChip from './YChip';\n\nexport { YChip };\n"],"mappings":"OAAOA,KAAK;AAEZ,SAASA,KAAK"}

package/lib/components/dialog/YDialog.mjs

@@ -0,0 +1,97 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { computed, defineComponent, ref, watch } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { bindClasses } from "../../util/vue-component.mjs";
+import { YCard } from "../card/index.mjs";
+import { YLayer } from "../layer/index.mjs";
+import "./YDialog.scss";
+export const YDialog = defineComponent({
+  name: 'YDialog',
+  components: {
+    YLayer,
+    YCard
+  },
+  props: {
+    modelValue: {
+      type: Boolean
+    },
+    dialogClasses: {
+      type: [Array, String, Object]
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const active = computed({
+      get: () => {
+        return !!props.modelValue;
+      },
+      set: v => {
+        emit('update:modelValue', v);
+      }
+    });
+    const classes = computed(() => {
+      const boundClasses = bindClasses(props.dialogClasses);
+      return {
+        ...boundClasses,
+        'y-dialog': true
+      };
+    });
+    const layer = ref();
+    function onFocusin(e) {
+      const prevTarget = e.relatedTarget;
+      const target = e.target;
+      if (prevTarget !== target && layer.value?.content$ && ![document, layer.value?.content$].includes(target) && !layer.value?.content$.contains(target)) {
+        const focusableSelector = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
+        const focusables = [...layer.value.content$.querySelectorAll(focusableSelector)].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
+        if (!focusables.length) return;
+        const firstChild = focusables[0];
+        const lastChild = focusables[focusables.length - 1];
+        if (firstChild === lastChild) {
+          lastChild.focus();
+        } else {
+          firstChild.focus();
+        }
+      }
+    }
+    function installFocusTrap() {
+      document.addEventListener('focusin', onFocusin);
+    }
+    function dismantleFocusTrap() {
+      document.removeEventListener('focusin', onFocusin);
+    }
+    function onUpdate(v) {
+      active.value = v;
+    }
+    watch(() => active.value, neo => {
+      neo ? installFocusTrap() : dismantleFocusTrap();
+    }, {
+      immediate: true
+    });
+    useRender(() => {
+      return _createVNode(_Fragment, null, [slots.base?.(), _createVNode(YLayer, {
+        "model-value": active.value,
+        "onUpdate:modelValue": onUpdate,
+        "scrim": true,
+        "classes": classes.value,
+        "ref": layer
+      }, {
+        default: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return slots.default?.(...args);
+        }
+      })]);
+    });
+    return {
+      active,
+      layer,
+      classes
+    };
+  }
+});
+//# sourceMappingURL=YDialog.mjs.map

package/lib/components/dialog/YDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","ref","watch","useRender","bindClasses","YCard","YLayer","YDialog","name","components","props","modelValue","type","Boolean","dialogClasses","Array","String","Object","emits","setup","_ref","emit","slots","active","get","set","v","classes","boundClasses","layer","onFocusin","e","prevTarget","relatedTarget","target","value","content$","document","includes","contains","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","onUpdate","neo","immediate","_createVNode","_Fragment","base","default","_len","arguments","args","_key"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, provide, ref, watch } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { bindClasses } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer } from '../layer';\n\nimport './YDialog.scss';\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const active = computed({\n      get: (): boolean => {\n        return !!props.modelValue;\n      },\n      set: (v: boolean) => {\n        emit('update:modelValue', v);\n      },\n    });\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n      };\n    });\n\n    const layer = ref<typeof YLayer>();\n\n    function onFocusin(e: FocusEvent) {\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n      if (\n        prevTarget !== target &&\n        layer.value?.content$ &&\n        ![document, layer.value?.content$].includes(target) &&\n        !layer.value?.content$.contains(target)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n      },\n      { immediate: true },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          {slots.base?.()}\n          <YLayer\n            model-value={active.value}\n            onUpdate:modelValue={onUpdate}\n            scrim\n            classes={classes.value}\n            ref={layer}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}