yuyeon 0.1.0-rc.9 → 0.1.1-rc.1

package/lib/components/badge/YBadge.scss

@@ -70,7 +70,6 @@
   &--inline &__base {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
     margin: var(--y-badge__inline-margin);
   }
 }

package/lib/components/card/YCard.mjs

@@ -1,20 +1,27 @@
-import { defineComponent, h, withDirectives } from 'vue';
-import ThemeClass from "../../directives/theme-class.mjs";
+import { defineComponent, h } from 'vue';
+import { useRender } from "../../composables/index.mjs";
+import { pressThemePropsOptions, useLocalTheme } from "../../composables/theme/index.mjs";
 import "./YCard.scss";
 export const YCard = defineComponent({
   name: 'YCard',
   props: {
     outline: {
       type: Boolean
-    }
+    },
+    ...pressThemePropsOptions()
   },
-  render() {
-    const theme = ThemeClass;
-    return withDirectives(h('div', {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = useLocalTheme(props);
+    useRender(() => h('div', {
       class: ['y-card', {
-        'y-card--outlined': this.$props.outline
-      }]
-    }, this.$slots.default?.call(this)), [[theme]]);
+        'y-card--outlined': props.outline
+      }, themeClasses.value]
+    }, slots.default?.()));
   }
 });
 //# sourceMappingURL=YCard.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"YCard.mjs","names":["defineComponent","h","withDirectives","ThemeClass","YCard","name","props","outline","type","Boolean","render","theme","class","$props","$slots","default","call"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import type { Directive, PropType, VNode } from 'vue';\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport ThemeClass from '../../directives/theme-class';\n\nimport './YCard.scss';\n\nexport const YCard = defineComponent({\n  name: 'YCard',\n  props: {\n    outline: {\n      type: Boolean as PropType<boolean>,\n    },\n  },\n  render(): VNode {\n    const theme = ThemeClass as Directive;\n    return withDirectives(\n      h(\n        'div',\n        {\n          class: ['y-card', { 'y-card--outlined': this.$props.outline }],\n        },\n        this.$slots.default?.call(this),\n      ),\n      [[theme]],\n    );\n  },\n});\n\nexport type YCard = InstanceType<typeof YCard>;\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,CAAC,EAAEC,cAAc,QAAQ,KAAK;AAAC,OAElDC,UAAU;AAEjB;AAEA,OAAO,MAAMC,KAAK,GAAGJ,eAAe,CAAC;EACnCK,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR;EACF,CAAC;EACDC,MAAMA,CAAA,EAAU;IACd,MAAMC,KAAK,GAAGR,UAAuB;IACrC,OAAOD,cAAc,CACnBD,CAAC,CACC,KAAK,EACL;MACEW,KAAK,EAAE,CAAC,QAAQ,EAAE;QAAE,kBAAkB,EAAE,IAAI,CAACC,MAAM,CAACN;MAAQ,CAAC;IAC/D,CAAC,EACD,IAAI,CAACO,MAAM,CAACC,OAAO,EAAEC,IAAI,CAAC,IAAI,CAChC,CAAC,EACD,CAAC,CAACL,KAAK,CAAC,CACV,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YCard.mjs","names":["defineComponent","h","useRender","pressThemePropsOptions","useLocalTheme","YCard","name","props","outline","type","Boolean","setup","_ref","slots","themeClasses","class","value","default"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import type { Directive, PropType, VNode } from 'vue';\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport { useRender } from '../../composables';\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\n\nimport './YCard.scss';\n\nexport const YCard = defineComponent({\n  name: 'YCard',\n  props: {\n    outline: {\n      type: Boolean as PropType<boolean>,\n    },\n    ...pressThemePropsOptions(),\n  },\n  setup(props, { slots }) {\n    const { themeClasses } = useLocalTheme(props);\n\n    useRender(() =>\n      h(\n        'div',\n        {\n          class: ['y-card', { 'y-card--outlined': props.outline }, themeClasses.value],\n        },\n        slots.default?.(),\n      ),\n    );\n  },\n});\n\nexport type YCard = InstanceType<typeof YCard>;\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,CAAC,QAAwB,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,sBAAsB,EAAEC,aAAa;AAE9C;AAEA,OAAO,MAAMC,KAAK,GAAGL,eAAe,CAAC;EACnCM,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR,CAAC;IACD,GAAGP,sBAAsB,CAAC;EAC5B,CAAC;EACDQ,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE;IAAa,CAAC,GAAGV,aAAa,CAACG,KAAK,CAAC;IAE7CL,SAAS,CAAC,MACRD,CAAC,CACC,KAAK,EACL;MACEc,KAAK,EAAE,CAAC,QAAQ,EAAE;QAAE,kBAAkB,EAAER,KAAK,CAACC;MAAQ,CAAC,EAAEM,YAAY,CAACE,KAAK;IAC7E,CAAC,EACDH,KAAK,CAACI,OAAO,GAAG,CAClB,CACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/dialog/YDialog.mjs

@@ -18,7 +18,10 @@ export const pressYDialogPropsOptions = propsFactory({
     type: [Array, String, Object]
   },
   maximized: Boolean,
-  focusTrap: [Boolean, String, Object, Array],
+  focusTrap: {
+    type: [Boolean, String, Object, Array],
+    default: true
+  },
   offset: {
     type: String
   },

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

@@ -1 +1 @@
-{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","getCurrentInstance","onBeforeUnmount","ref","shallowRef","watch","useModelDuplex","useRender","chooseProps","omit","toStyleSizeValue","bindClasses","propsFactory","YCard","YLayer","pressYLayerProps","useActiveStack","pressYDialogPropsOptions","persistent","type","Boolean","default","dialogClasses","Array","String","Object","maximized","focusTrap","offset","scrim","YDialog","name","components","props","emits","setup","_ref","emit","slots","vm","$yuyeon","appContext","config","globalProperties","active","classes","boundClasses","styles","contentStyles","paddingTop","layer$","children","onFocusin","e","prevTarget","relatedTarget","target","excludeTarget","document","querySelector","isArray","excluded","some","exclude","testChildrenContains","layers","layer","content$","contains","value","includes","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","isSameNode","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","tempScrollTop","tempScrollLeft","preventInteractionBackground","toggle","root$","root","activeLayers","getActiveLayers","filtered","ctx","modal","classList","scrollTop","documentElement","scrollLeft","add","style","top","left","isMe","remove","onUpdate","v","onClick","currentActive","disabled","baseEl","neo","old","immediate","_createVNode","_Fragment","_mergeProps","$event","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { chooseProps, omit } from '../../util';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { bindClasses, propsFactory } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useActiveStack } from '../layer/active-stack';\n\nimport './YDialog.scss';\n\nexport const pressYDialogPropsOptions = propsFactory(\n  {\n    persistent: {\n      type: Boolean as PropType<boolean>,\n      default: true,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    maximized: Boolean as PropType<boolean>,\n    focusTrap: [Boolean, String, Object, Array] as PropType<\n      false | string | string[] | HTMLElement\n    >,\n    offset: {\n      type: String as PropType<string>,\n    },\n    ...omit(\n      pressYLayerProps({\n        scrim: true,\n      }),\n      ['offset', 'classes'],\n    ),\n  },\n  'YDialog',\n);\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: pressYDialogPropsOptions(),\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const vm = getCurrentInstance();\n    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n        'y-dialog--maximized': props.maximized,\n      };\n    });\n\n    const styles = computed(() => {\n      return {\n        ...(props.contentStyles ?? {}),\n        paddingTop: toStyleSizeValue(props.offset),\n      };\n    });\n\n    const layer$ = ref<typeof YLayer>();\n    const { children } = useActiveStack(layer$, active, shallowRef(true));\n\n    function onFocusin(e: FocusEvent) {\n      if (props.focusTrap === false) {\n        return;\n      }\n\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n\n      const excludeTarget = props.focusTrap;\n\n      if (\n        typeof excludeTarget === 'string' &&\n        document.querySelector(excludeTarget) == target\n      ) {\n        return;\n      }\n\n      if (typeof excludeTarget === 'object') {\n        if (Array.isArray(excludeTarget)) {\n          const excluded = excludeTarget.some((exclude) => {\n            if (typeof exclude === 'string') {\n              return document.querySelector(exclude) == target;\n            }\n            if (typeof exclude === 'object') {\n              return exclude == target;\n            }\n          });\n          if (excluded) {\n            return;\n          }\n        } else if (excludeTarget == target) {\n          return;\n        }\n      }\n\n      function testChildrenContains(layers: YLayer[]) {\n        return layers.some((layer) => {\n          return !layer.content$?.contains(target);\n        });\n      }\n\n      if (\n        prevTarget !== target &&\n        layer$.value?.content$ &&\n        ![document, layer$.value?.content$].includes(target) &&\n        !layer$.value?.content$.contains(target) &&\n        !testChildrenContains(children.value)\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 (target?.isSameNode(firstChild) || target?.isSameNode(lastChild)) {\n          return;\n        }\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    const tempScrollTop = ref(0);\n    const tempScrollLeft = ref(0);\n\n    function preventInteractionBackground(toggle: boolean) {\n      const root$ = $yuyeon.root as HTMLElement;\n      const activeLayers = layer$.value?.getActiveLayers();\n      if (toggle) {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return layer.ctx.modal;\n        });\n        if (\n          (filtered && !filtered.length) ||\n          !root$.classList.contains('y-dialog--virtual-scroll')\n        ) {\n          const scrollTop = document.documentElement.scrollTop;\n          const scrollLeft = document.documentElement.scrollLeft;\n          tempScrollTop.value = scrollTop;\n          tempScrollLeft.value = scrollLeft;\n          if (props.maximized) {\n            document.documentElement.classList.add('y-dialog--prevent-scroll');\n          }\n          root$.classList.add('y-dialog--virtual-scroll');\n          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';\n          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';\n        }\n      } else {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return !layer$.value?.isMe(layer) && layer.ctx.modal;\n        });\n        if (filtered && !filtered.length) {\n          root$.classList.remove('y-dialog--virtual-scroll');\n          document.documentElement.classList.remove('y-dialog--prevent-scroll');\n          root$.style.top = '';\n          root$.style.left = '';\n          document.documentElement.scrollTop = tempScrollTop.value;\n          document.documentElement.scrollLeft = tempScrollLeft.value;\n        }\n      }\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(\n      () => layer$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n        preventInteractionBackground(neo);\n      },\n      { immediate: true },\n    );\n\n    onBeforeUnmount(() => {\n      preventInteractionBackground(false);\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            classes={classes.value}\n            content-styles={styles.value}\n            modal\n            ref={layer$}\n            {...omit(chooseProps(props, YLayer.props), ['contentStyles'])}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base,\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer: layer$,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","getCurrentInstance","onBeforeUnmount","ref","shallowRef","watch","useModelDuplex","useRender","chooseProps","omit","toStyleSizeValue","bindClasses","propsFactory","YCard","YLayer","pressYLayerProps","useActiveStack","pressYDialogPropsOptions","persistent","type","Boolean","default","dialogClasses","Array","String","Object","maximized","focusTrap","offset","scrim","YDialog","name","components","props","emits","setup","_ref","emit","slots","vm","$yuyeon","appContext","config","globalProperties","active","classes","boundClasses","styles","contentStyles","paddingTop","layer$","children","onFocusin","e","prevTarget","relatedTarget","target","excludeTarget","document","querySelector","isArray","excluded","some","exclude","testChildrenContains","layers","layer","content$","contains","value","includes","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","isSameNode","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","tempScrollTop","tempScrollLeft","preventInteractionBackground","toggle","root$","root","activeLayers","getActiveLayers","filtered","ctx","modal","classList","scrollTop","documentElement","scrollLeft","add","style","top","left","isMe","remove","onUpdate","v","onClick","currentActive","disabled","baseEl","neo","old","immediate","_createVNode","_Fragment","_mergeProps","$event","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { chooseProps, omit } from '../../util';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { bindClasses, propsFactory } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useActiveStack } from '../layer/active-stack';\n\nimport './YDialog.scss';\n\nexport const pressYDialogPropsOptions = propsFactory(\n  {\n    persistent: {\n      type: Boolean as PropType<boolean>,\n      default: true,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    maximized: Boolean as PropType<boolean>,\n    focusTrap: {\n      type: [Boolean, String, Object, Array] as PropType<\n        false | string | string[] | HTMLElement\n      >,\n      default: true,\n    },\n    offset: {\n      type: String as PropType<string>,\n    },\n    ...omit(\n      pressYLayerProps({\n        scrim: true,\n      }),\n      ['offset', 'classes'],\n    ),\n  },\n  'YDialog',\n);\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: pressYDialogPropsOptions(),\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const vm = getCurrentInstance();\n    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n        'y-dialog--maximized': props.maximized,\n      };\n    });\n\n    const styles = computed(() => {\n      return {\n        ...(props.contentStyles ?? {}),\n        paddingTop: toStyleSizeValue(props.offset),\n      };\n    });\n\n    const layer$ = ref<typeof YLayer>();\n    const { children } = useActiveStack(layer$, active, shallowRef(true));\n\n    function onFocusin(e: FocusEvent) {\n      if (props.focusTrap === false) {\n        return;\n      }\n\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n\n      const excludeTarget = props.focusTrap;\n\n      if (\n        typeof excludeTarget === 'string' &&\n        document.querySelector(excludeTarget) == target\n      ) {\n        return;\n      }\n\n      if (typeof excludeTarget === 'object') {\n        if (Array.isArray(excludeTarget)) {\n          const excluded = excludeTarget.some((exclude) => {\n            if (typeof exclude === 'string') {\n              return document.querySelector(exclude) == target;\n            }\n            if (typeof exclude === 'object') {\n              return exclude == target;\n            }\n          });\n          if (excluded) {\n            return;\n          }\n        } else if (excludeTarget == target) {\n          return;\n        }\n      }\n\n      function testChildrenContains(layers: YLayer[]) {\n        return layers.some((layer) => {\n          return !layer.content$?.contains(target);\n        });\n      }\n\n      if (\n        prevTarget !== target &&\n        layer$.value?.content$ &&\n        ![document, layer$.value?.content$].includes(target) &&\n        !layer$.value?.content$.contains(target) &&\n        !testChildrenContains(children.value)\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 (target?.isSameNode(firstChild) || target?.isSameNode(lastChild)) {\n          return;\n        }\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    const tempScrollTop = ref(0);\n    const tempScrollLeft = ref(0);\n\n    function preventInteractionBackground(toggle: boolean) {\n      const root$ = $yuyeon.root as HTMLElement;\n      const activeLayers = layer$.value?.getActiveLayers();\n      if (toggle) {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return layer.ctx.modal;\n        });\n        if (\n          (filtered && !filtered.length) ||\n          !root$.classList.contains('y-dialog--virtual-scroll')\n        ) {\n          const scrollTop = document.documentElement.scrollTop;\n          const scrollLeft = document.documentElement.scrollLeft;\n          tempScrollTop.value = scrollTop;\n          tempScrollLeft.value = scrollLeft;\n          if (props.maximized) {\n            document.documentElement.classList.add('y-dialog--prevent-scroll');\n          }\n          root$.classList.add('y-dialog--virtual-scroll');\n          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';\n          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';\n        }\n      } else {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return !layer$.value?.isMe(layer) && layer.ctx.modal;\n        });\n        if (filtered && !filtered.length) {\n          root$.classList.remove('y-dialog--virtual-scroll');\n          document.documentElement.classList.remove('y-dialog--prevent-scroll');\n          root$.style.top = '';\n          root$.style.left = '';\n          document.documentElement.scrollTop = tempScrollTop.value;\n          document.documentElement.scrollLeft = tempScrollLeft.value;\n        }\n      }\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(\n      () => layer$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n        preventInteractionBackground(neo);\n      },\n      { immediate: true },\n    );\n\n    onBeforeUnmount(() => {\n      preventInteractionBackground(false);\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            classes={classes.value}\n            content-styles={styles.value}\n            modal\n            ref={layer$}\n            {...omit(chooseProps(props, YLayer.props), ['contentStyles'])}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base,\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer: layer$,\n      classes,\n    };\n  },\n});\n"],"mappings":";AACA,SACEA,QAAQ,EACRC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,EACfC,GAAG,EACHC,UAAU,EACVC,KAAK,QACA,KAAK;AAAC,SAEJC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,WAAW,EAAEC,IAAI;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,WAAW,EAAEC,YAAY;AAAA,SACzBC,KAAK;AAAA,SACLC,MAAM,EAAEC,gBAAgB;AAAA,SACxBC,cAAc;AAEvB;AAEA,OAAO,MAAMC,wBAAwB,GAAGL,YAAY,CAClD;EACEM,UAAU,EAAE;IACVC,IAAI,EAAEC,OAA4B;IAClCC,OAAO,EAAE;EACX,CAAC;EACDC,aAAa,EAAE;IACbH,IAAI,EAAE,CAACI,KAAK,EAAEC,MAAM,EAAEC,MAAM;EAG9B,CAAC;EACDC,SAAS,EAAEN,OAA4B;EACvCO,SAAS,EAAE;IACTR,IAAI,EAAE,CAACC,OAAO,EAAEI,MAAM,EAAEC,MAAM,EAAEF,KAAK,CAEpC;IACDF,OAAO,EAAE;EACX,CAAC;EACDO,MAAM,EAAE;IACNT,IAAI,EAAEK;EACR,CAAC;EACD,GAAGf,IAAI,CACLM,gBAAgB,CAAC;IACfc,KAAK,EAAE;EACT,CAAC,CAAC,EACF,CAAC,QAAQ,EAAE,SAAS,CACtB;AACF,CAAC,EACD,SACF,CAAC;AAED,OAAO,MAAMC,OAAO,GAAG9B,eAAe,CAAC;EACrC+B,IAAI,EAAE,SAAS;EACfC,UAAU,EAAE;IACVlB,MAAM;IACND;EACF,CAAC;EACDoB,KAAK,EAAEhB,wBAAwB,CAAC,CAAC;EACjCiB,KAAK,EAAE,CAAC,mBAAmB,CAAC;EAC5BC,KAAKA,CAACF,KAAK,EAAAG,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC1B,MAAMG,EAAE,GAAGtC,kBAAkB,CAAC,CAAC;IAC/B,MAAMuC,OAAO,GAAGD,EAAE,EAAEE,UAAU,CAACC,MAAM,CAACC,gBAAgB,CAACH,OAAO;IAC9D,MAAMI,MAAM,GAAGtC,cAAc,CAAC2B,KAAK,CAAC;IAEpC,MAAMY,OAAO,GAAG9C,QAAQ,CAAC,MAAM;MAC7B,MAAM+C,YAAY,GAAGnC,WAAW,CAACsB,KAAK,CAACX,aAAa,CAAC;MACrD,OAAO;QACL,GAAGwB,YAAY;QACf,UAAU,EAAE,IAAI;QAChB,qBAAqB,EAAEb,KAAK,CAACP;MAC/B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMqB,MAAM,GAAGhD,QAAQ,CAAC,MAAM;MAC5B,OAAO;QACL,IAAIkC,KAAK,CAACe,aAAa,IAAI,CAAC,CAAC,CAAC;QAC9BC,UAAU,EAAEvC,gBAAgB,CAACuB,KAAK,CAACL,MAAM;MAC3C,CAAC;IACH,CAAC,CAAC;IAEF,MAAMsB,MAAM,GAAG/C,GAAG,CAAgB,CAAC;IACnC,MAAM;MAAEgD;IAAS,CAAC,GAAGnC,cAAc,CAACkC,MAAM,EAAEN,MAAM,EAAExC,UAAU,CAAC,IAAI,CAAC,CAAC;IAErE,SAASgD,SAASA,CAACC,CAAa,EAAE;MAChC,IAAIpB,KAAK,CAACN,SAAS,KAAK,KAAK,EAAE;QAC7B;MACF;MAEA,MAAM2B,UAAU,GAAGD,CAAC,CAACE,aAAmC;MACxD,MAAMC,MAAM,GAAGH,CAAC,CAACG,MAA4B;MAE7C,MAAMC,aAAa,GAAGxB,KAAK,CAACN,SAAS;MAErC,IACE,OAAO8B,aAAa,KAAK,QAAQ,IACjCC,QAAQ,CAACC,aAAa,CAACF,aAAa,CAAC,IAAID,MAAM,EAC/C;QACA;MACF;MAEA,IAAI,OAAOC,aAAa,KAAK,QAAQ,EAAE;QACrC,IAAIlC,KAAK,CAACqC,OAAO,CAACH,aAAa,CAAC,EAAE;UAChC,MAAMI,QAAQ,GAAGJ,aAAa,CAACK,IAAI,CAAEC,OAAO,IAAK;YAC/C,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;cAC/B,OAAOL,QAAQ,CAACC,aAAa,CAACI,OAAO,CAAC,IAAIP,MAAM;YAClD;YACA,IAAI,OAAOO,OAAO,KAAK,QAAQ,EAAE;cAC/B,OAAOA,OAAO,IAAIP,MAAM;YAC1B;UACF,CAAC,CAAC;UACF,IAAIK,QAAQ,EAAE;YACZ;UACF;QACF,CAAC,MAAM,IAAIJ,aAAa,IAAID,MAAM,EAAE;UAClC;QACF;MACF;MAEA,SAASQ,oBAAoBA,CAACC,MAAgB,EAAE;QAC9C,OAAOA,MAAM,CAACH,IAAI,CAAEI,KAAK,IAAK;UAC5B,OAAO,CAACA,KAAK,CAACC,QAAQ,EAAEC,QAAQ,CAACZ,MAAM,CAAC;QAC1C,CAAC,CAAC;MACJ;MAEA,IACEF,UAAU,KAAKE,MAAM,IACrBN,MAAM,CAACmB,KAAK,EAAEF,QAAQ,IACtB,CAAC,CAACT,QAAQ,EAAER,MAAM,CAACmB,KAAK,EAAEF,QAAQ,CAAC,CAACG,QAAQ,CAACd,MAAM,CAAC,IACpD,CAACN,MAAM,CAACmB,KAAK,EAAEF,QAAQ,CAACC,QAAQ,CAACZ,MAAM,CAAC,IACxC,CAACQ,oBAAoB,CAACb,QAAQ,CAACkB,KAAK,CAAC,EACrC;QACA,MAAME,iBAAiB,GACrB,+FAA+F;QACjG,MAAMC,UAAU,GAAG,CACjB,GAAGtB,MAAM,CAACmB,KAAK,CAACF,QAAQ,CAACM,gBAAgB,CAACF,iBAAiB,CAAC,CAC7D,CAACG,MAAM,CACLC,EAAE,IACD,CAACA,EAAE,CAACC,YAAY,CAAC,UAAU,CAAC,IAAI,CAACD,EAAE,CAACE,OAAO,CAAC,iBAAiB,CACjE,CAAkB;QAClB,IAAI,CAACL,UAAU,CAACM,MAAM,EAAE;QACxB,MAAMC,UAAU,GAAGP,UAAU,CAAC,CAAC,CAAC;QAChC,MAAMQ,SAAS,GAAGR,UAAU,CAACA,UAAU,CAACM,MAAM,GAAG,CAAC,CAAC;QACnD,IAAItB,MAAM,EAAEyB,UAAU,CAACF,UAAU,CAAC,IAAIvB,MAAM,EAAEyB,UAAU,CAACD,SAAS,CAAC,EAAE;UACnE;QACF;QACA,IAAID,UAAU,KAAKC,SAAS,EAAE;UAC5BA,SAAS,CAACE,KAAK,CAAC,CAAC;QACnB,CAAC,MAAM;UACLH,UAAU,CAACG,KAAK,CAAC,CAAC;QACpB;MACF;IACF;IAEA,SAASC,gBAAgBA,CAAA,EAAG;MAC1BzB,QAAQ,CAAC0B,gBAAgB,CAAC,SAAS,EAAEhC,SAAS,CAAC;IACjD;IAEA,SAASiC,kBAAkBA,CAAA,EAAG;MAC5B3B,QAAQ,CAAC4B,mBAAmB,CAAC,SAAS,EAAElC,SAAS,CAAC;IACpD;IAEA,MAAMmC,aAAa,GAAGpF,GAAG,CAAC,CAAC,CAAC;IAC5B,MAAMqF,cAAc,GAAGrF,GAAG,CAAC,CAAC,CAAC;IAE7B,SAASsF,4BAA4BA,CAACC,MAAe,EAAE;MACrD,MAAMC,KAAK,GAAGnD,OAAO,CAACoD,IAAmB;MACzC,MAAMC,YAAY,GAAG3C,MAAM,CAACmB,KAAK,EAAEyB,eAAe,CAAC,CAAC;MACpD,IAAIJ,MAAM,EAAE;QACV,MAAMK,QAAQ,GAAGF,YAAY,EAAEnB,MAAM,CAAER,KAAU,IAAK;UACpD,OAAOA,KAAK,CAAC8B,GAAG,CAACC,KAAK;QACxB,CAAC,CAAC;QACF,IACGF,QAAQ,IAAI,CAACA,QAAQ,CAACjB,MAAM,IAC7B,CAACa,KAAK,CAACO,SAAS,CAAC9B,QAAQ,CAAC,0BAA0B,CAAC,EACrD;UACA,MAAM+B,SAAS,GAAGzC,QAAQ,CAAC0C,eAAe,CAACD,SAAS;UACpD,MAAME,UAAU,GAAG3C,QAAQ,CAAC0C,eAAe,CAACC,UAAU;UACtDd,aAAa,CAAClB,KAAK,GAAG8B,SAAS;UAC/BX,cAAc,CAACnB,KAAK,GAAGgC,UAAU;UACjC,IAAIpE,KAAK,CAACP,SAAS,EAAE;YACnBgC,QAAQ,CAAC0C,eAAe,CAACF,SAAS,CAACI,GAAG,CAAC,0BAA0B,CAAC;UACpE;UACAX,KAAK,CAACO,SAAS,CAACI,GAAG,CAAC,0BAA0B,CAAC;UAC/CX,KAAK,CAACY,KAAK,CAACC,GAAG,GAAG9F,gBAAgB,CAAC,CAAC,CAAC,GAAGyF,SAAS,CAAC,IAAI,EAAE;UACxDR,KAAK,CAACY,KAAK,CAACE,IAAI,GAAG/F,gBAAgB,CAAC,CAAC,CAAC,GAAG2F,UAAU,CAAC,IAAI,EAAE;QAC5D;MACF,CAAC,MAAM;QACL,MAAMN,QAAQ,GAAGF,YAAY,EAAEnB,MAAM,CAAER,KAAU,IAAK;UACpD,OAAO,CAAChB,MAAM,CAACmB,KAAK,EAAEqC,IAAI,CAACxC,KAAK,CAAC,IAAIA,KAAK,CAAC8B,GAAG,CAACC,KAAK;QACtD,CAAC,CAAC;QACF,IAAIF,QAAQ,IAAI,CAACA,QAAQ,CAACjB,MAAM,EAAE;UAChCa,KAAK,CAACO,SAAS,CAACS,MAAM,CAAC,0BAA0B,CAAC;UAClDjD,QAAQ,CAAC0C,eAAe,CAACF,SAAS,CAACS,MAAM,CAAC,0BAA0B,CAAC;UACrEhB,KAAK,CAACY,KAAK,CAACC,GAAG,GAAG,EAAE;UACpBb,KAAK,CAACY,KAAK,CAACE,IAAI,GAAG,EAAE;UACrB/C,QAAQ,CAAC0C,eAAe,CAACD,SAAS,GAAGZ,aAAa,CAAClB,KAAK;UACxDX,QAAQ,CAAC0C,eAAe,CAACC,UAAU,GAAGb,cAAc,CAACnB,KAAK;QAC5D;MACF;IACF;IAEA,SAASuC,QAAQA,CAACC,CAAU,EAAE;MAC5BjE,MAAM,CAACyB,KAAK,GAAGwC,CAAC;IAClB;IAEA,SAASC,OAAOA,CAACzD,CAAa,EAAE;MAC9B,MAAM0D,aAAa,GAAGnE,MAAM,CAACyB,KAAK;MAClC,IAAI,CAACpC,KAAK,CAAC+E,QAAQ,EAAE;QACnBpE,MAAM,CAACyB,KAAK,GAAG,CAAC0C,aAAa;MAC/B;IACF;IAEA1G,KAAK,CACH,MAAM6C,MAAM,CAACmB,KAAK,EAAE4C,MAAM,EAC1B,CAACC,GAAG,EAAEC,GAAG,KAAK;MACZ,IAAID,GAAG,EAAE;QACPA,GAAG,CAAC9B,gBAAgB,CAAC,OAAO,EAAE0B,OAAO,CAAC;MACxC,CAAC,MAAM,IAAIK,GAAG,EAAE;QACdA,GAAG,CAAC7B,mBAAmB,CAAC,OAAO,EAAEwB,OAAO,CAAC;MAC3C;IACF,CACF,CAAC;IAEDzG,KAAK,CACH,MAAMuC,MAAM,CAACyB,KAAK,EACjB6C,GAAG,IAAK;MACPA,GAAG,GAAG/B,gBAAgB,CAAC,CAAC,GAAGE,kBAAkB,CAAC,CAAC;MAC/CI,4BAA4B,CAACyB,GAAG,CAAC;IACnC,CAAC,EACD;MAAEE,SAAS,EAAE;IAAK,CACpB,CAAC;IAEDlH,eAAe,CAAC,MAAM;MACpBuF,4BAA4B,CAAC,KAAK,CAAC;IACrC,CAAC,CAAC;IAEFlF,SAAS,CAAC,MAAM;MACd,OAAA8G,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAAvG,MAAA,EAAAyG,WAAA;QAAA,cAGe3E,MAAM,CAACyB,KAAK;QAAA,uBAAAmD,MAAA,IAAZ5E,MAAM,CAACyB,KAAK,GAAAmD,MAAA;QAAA,WACZ3E,OAAO,CAACwB,KAAK;QAAA,kBACNtB,MAAM,CAACsB,KAAK;QAAA;QAAA,OAEvBnB;MAAM,GACPzC,IAAI,CAACD,WAAW,CAACyB,KAAK,EAAEnB,MAAM,CAACmB,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;QAG3DZ,OAAO,EAAE,SAAAA,CAAA;UAAA,SAAAoG,IAAA,GAAAC,SAAA,CAAA5C,MAAA,EAAI6C,IAAI,OAAApG,KAAA,CAAAkG,IAAA,GAAAG,IAAA,MAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA;YAAJD,IAAI,CAAAC,IAAA,IAAAF,SAAA,CAAAE,IAAA;UAAA;UAAA,OAAYtF,KAAK,CAACjB,OAAO,GAAG,GAAGsG,IAAI,CAAC;QAAA;QACrDE,IAAI,EAAEvF,KAAK,CAACuF;MAAI;IAK1B,CAAC,CAAC;IAEF,OAAO;MACLjF,MAAM;MACNsB,KAAK,EAAEhB,MAAM;MACbL;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/dropdown/YDropdown.mjs

@@ -4,15 +4,17 @@ import { pressItemsPropsOptions } from "../../abstract/items.mjs";
 import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
 import { pressCoordinateProps } from "../../composables/coordinate/index.mjs";
+import { polyTransitionPropOptions } from "../../composables/transition.mjs";
 import { getObjectValueByPath, omit } from "../../util/common.mjs";
-import { chooseProps, propsFactory } from "../../util/vue-component.mjs";
+import { bindClasses, chooseProps, propsFactory } from "../../util/vue-component.mjs";
 import { YButton } from "../button/index.mjs";
 import { YCard } from "../card/index.mjs";
 import { YIcon } from "../icon/index.mjs";
 import { YList, YListItem } from "../list/index.mjs";
-import { YMenu } from "../menu/index.mjs";
+import { YMenu, YMenuPropOptions } from "../menu/index.mjs";
 import "./YDropdown.scss";
 export const pressYDropdownPropsOptions = propsFactory({
+  ...omit(YMenuPropOptions, ['modelValue', 'coordinateStrategy']),
   modelValue: Boolean,
   variation: String,
   color: String,
@@ -23,7 +25,11 @@ export const pressYDropdownPropsOptions = propsFactory({
     type: [String, Array, Object],
     default: '$dropdown'
   },
-  ...pressItemsPropsOptions()
+  ...pressItemsPropsOptions(),
+  transition: {
+    ...polyTransitionPropOptions.transition,
+    default: 'fade'
+  }
 }, 'YDropdown');
 export const YDropdown = defineComponent({
   name: 'YDropdown',
@@ -53,7 +59,7 @@ export const YDropdown = defineComponent({
       return _createVNode(_Fragment, null, [_createVNode(YMenu, _mergeProps(menuProps, {
         "modelValue": opened.value,
         "onUpdate:modelValue": $event => opened.value = $event,
-        "content-classes": ['y-dropdown__content']
+        "content-classes": bindClasses(['y-dropdown__content', props.contentClasses])
       }), {
         base: function () {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

package/lib/components/dropdown/YDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDropdown.mjs","names":["defineComponent","mergeProps","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","getObjectValueByPath","omit","chooseProps","propsFactory","YButton","YCard","YIcon","YList","YListItem","YMenu","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","dropdownIcon","type","Array","Object","default","YDropdown","name","inheritAttrs","components","props","slots","emits","setup","_ref","attrs","emit","opened","onClickItem","item","value","menuProps","dropdownIconProps","_createVNode","_Fragment","_mergeProps","$event","base","_len","arguments","length","args","_key","menu","isArray","items","map","text","itemText","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { PropType, defineComponent, mergeProps, SlotsType } from 'vue';\n\nimport { pressItemsPropsOptions } from '../../abstract/items';\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { getObjectValueByPath, omit } from '../../util/common';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YCard } from '../card';\nimport { YIcon, YIconIconProp } from '../icon';\nimport { YList, YListItem } from '../list';\nimport { YMenu } from '../menu';\n\nimport './YDropdown.scss';\n\nexport const pressYDropdownPropsOptions = propsFactory(\n  {\n    modelValue: Boolean as PropType<boolean>,\n    variation: String as PropType<string>,\n    color: String as PropType<string>,\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n      'coordinateStrategy',\n    ]),\n    dropdownIcon: {\n      type: [String, Array, Object] as PropType<YIconIconProp>,\n      default: '$dropdown',\n    },\n    ...pressItemsPropsOptions(),\n  },\n  'YDropdown',\n);\n\nexport const YDropdown = defineComponent({\n  name: 'YDropdown',\n  inheritAttrs: false,\n  components: {\n    YMenu,\n  },\n  props: {\n    ...pressYDropdownPropsOptions(),\n  },\n  slots: Object as SlotsType<{\n    base: any,\n    default: any,\n    'dropdown-icon': any,\n    menu: any,\n    item: { text: string, item: any },\n  }>,\n  emits: ['update:modelValue', 'click'],\n  setup(props, { slots, attrs, emit }) {\n    const opened = useModelDuplex(props);\n\n    function onClickItem(item: any) {\n      opened.value = false;\n      emit('click', item);\n    }\n\n    useRender(() => {\n      const menuProps = chooseProps(props, YMenu.props);\n      const dropdownIconProps = chooseProps(\n        typeof props.dropdownIcon === 'object' ? props.dropdownIcon : {},\n        YIcon.props,\n      );\n      return (\n        <>\n          <YMenu\n            {...menuProps}\n            v-model={opened.value}\n            content-classes={['y-dropdown__content']}\n          >\n            {{\n              base: (...args: any[]) =>\n                slots.base ? (\n                  slots.base?.(...args)\n                ) : (\n                  <YButton\n                    variation={props.variation}\n                    color={props.color}\n                    class={[\n                      'y-dropdown',\n                      { 'y-dropdown--opened': opened.value },\n                    ]}\n                    {...attrs}\n                  >\n                    {\n                      <span class=\"y-dropdown__default\">\n                        {slots.default?.()}\n                      </span>\n                    }\n                    {slots['dropdown-icon'] ? (\n                      slots['dropdown-icon']()\n                    ) : (\n                      <YIcon\n                        {...mergeProps(dropdownIconProps)}\n                        icon={props.dropdownIcon}\n                        class={['y-dropdown__icon']}\n                      ></YIcon>\n                    )}\n                  </YButton>\n                ),\n              default: () =>\n                slots.menu ? (\n                  slots.menu()\n                ) : (\n                  <YCard>\n                    {Array.isArray(props.items) && props.items.length > 0 ? (\n                      <YList>\n                        {props.items.map((item) => {\n                          const text = getObjectValueByPath(\n                            item,\n                            props.itemText,\n                          );\n                          return (\n                            <YListItem onClick={(e) => onClickItem(item)}>\n                              {slots.item ? slots.item({ text, item }) : text}\n                            </YListItem>\n                          );\n                        })}\n                      </YList>\n                    ) : (\n                      <div class=\"y-dropdown__no-options\">항목이 없습니다.</div>\n                    )}\n                  </YCard>\n                ),\n            }}\n          </YMenu>\n        </>\n      );\n    });\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YDropdown.mjs","names":["defineComponent","mergeProps","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","polyTransitionPropOptions","getObjectValueByPath","omit","bindClasses","chooseProps","propsFactory","YButton","YCard","YIcon","YList","YListItem","YMenu","YMenuPropOptions","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","dropdownIcon","type","Array","Object","default","transition","YDropdown","name","inheritAttrs","components","props","slots","emits","setup","_ref","attrs","emit","opened","onClickItem","item","value","menuProps","dropdownIconProps","_createVNode","_Fragment","_mergeProps","$event","contentClasses","base","_len","arguments","length","args","_key","menu","isArray","items","map","text","itemText","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { PropType, SlotsType, defineComponent, mergeProps } from 'vue';\n\nimport { pressItemsPropsOptions } from '../../abstract/items';\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { getObjectValueByPath, omit } from '../../util/common';\nimport {\n  bindClasses,\n  chooseProps,\n  propsFactory,\n} from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YCard } from '../card';\nimport { YIcon, YIconIconProp } from '../icon';\nimport { YList, YListItem } from '../list';\nimport { YMenu, YMenuPropOptions } from '../menu';\n\nimport './YDropdown.scss';\n\nexport const pressYDropdownPropsOptions = propsFactory(\n  {\n    ...omit(YMenuPropOptions, ['modelValue', 'coordinateStrategy']),\n    modelValue: Boolean as PropType<boolean>,\n    variation: String as PropType<string>,\n    color: String as PropType<string>,\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n      'coordinateStrategy',\n    ]),\n    dropdownIcon: {\n      type: [String, Array, Object] as PropType<YIconIconProp>,\n      default: '$dropdown',\n    },\n    ...pressItemsPropsOptions(),\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  'YDropdown',\n);\n\nexport const YDropdown = defineComponent({\n  name: 'YDropdown',\n  inheritAttrs: false,\n  components: {\n    YMenu,\n  },\n  props: {\n    ...pressYDropdownPropsOptions(),\n  },\n  slots: Object as SlotsType<{\n    base: any;\n    default: any;\n    'dropdown-icon': any;\n    menu: any;\n    item: { text: string; item: any };\n  }>,\n  emits: ['update:modelValue', 'click'],\n  setup(props, { slots, attrs, emit }) {\n    const opened = useModelDuplex(props);\n\n    function onClickItem(item: any) {\n      opened.value = false;\n      emit('click', item);\n    }\n\n    useRender(() => {\n      const menuProps = chooseProps(props, YMenu.props);\n      const dropdownIconProps = chooseProps(\n        typeof props.dropdownIcon === 'object' ? props.dropdownIcon : {},\n        YIcon.props,\n      );\n      return (\n        <>\n          <YMenu\n            {...menuProps}\n            v-model={opened.value}\n            content-classes={bindClasses([\n              'y-dropdown__content',\n              props.contentClasses,\n            ])}\n          >\n            {{\n              base: (...args: any[]) =>\n                slots.base ? (\n                  slots.base?.(...args)\n                ) : (\n                  <YButton\n                    variation={props.variation}\n                    color={props.color}\n                    class={[\n                      'y-dropdown',\n                      { 'y-dropdown--opened': opened.value },\n                    ]}\n                    {...attrs}\n                  >\n                    {\n                      <span class=\"y-dropdown__default\">\n                        {slots.default?.()}\n                      </span>\n                    }\n                    {slots['dropdown-icon'] ? (\n                      slots['dropdown-icon']()\n                    ) : (\n                      <YIcon\n                        {...mergeProps(dropdownIconProps)}\n                        icon={props.dropdownIcon}\n                        class={['y-dropdown__icon']}\n                      ></YIcon>\n                    )}\n                  </YButton>\n                ),\n              default: () =>\n                slots.menu ? (\n                  slots.menu()\n                ) : (\n                  <YCard>\n                    {Array.isArray(props.items) && props.items.length > 0 ? (\n                      <YList>\n                        {props.items.map((item) => {\n                          const text = getObjectValueByPath(\n                            item,\n                            props.itemText,\n                          );\n                          return (\n                            <YListItem onClick={(e) => onClickItem(item)}>\n                              {slots.item ? slots.item({ text, item }) : text}\n                            </YListItem>\n                          );\n                        })}\n                      </YList>\n                    ) : (\n                      <div class=\"y-dropdown__no-options\">항목이 없습니다.</div>\n                    )}\n                  </YCard>\n                ),\n            }}\n          </YMenu>\n        </>\n      );\n    });\n  },\n});\n"],"mappings":"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"}

package/lib/components/field-input/YFieldInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","slots","Object","setup","_ref","attrs","expose","emit","yInput$","input$","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","onClick","event","onFocus","value","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","focus","select","vm","undefined","text","call","modelValue","neo","immediate","extended","validate","invokeValidators","onUpdateModel","_createVNode","_mergeProps","$event","leading","args","leadingChildren","slot","push","defaultProps","attrId","floating","createLabel","readonly","loading","placeholder","disabled","autocomplete","maxlength","min","max","style","textAlign","trailing","_Fragment","label","prepend","append","_ref2","error","errorResult"],"sources":["../../../src/components/field-input/YFieldInput.tsx"],"sourcesContent":["import type { PropType, SlotsType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  nextTick,\n  ref,\n  toRef,\n  watch,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { pressFocusPropsOptions, useFocus } from '../../composables/focus';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YIconClear } from '../icons/YIconClear';\nimport {\n  YInput,\n  YInputDefaultSlotProps,\n  pressYInputPropsOptions,\n} from '../input';\n\nimport './YFieldInput.scss';\n\nconst NAME = 'y-field-input';\n\nexport const pressYFieldInputPropsOptions = propsFactory(\n  {\n    enableClear: Boolean as PropType<boolean>,\n    inputAlign: String as PropType<string>,\n    displayText: [String, Function] as PropType<\n      string | ((value: any) => string)\n    >,\n    whenInputValid: [Boolean, Number] as PropType<boolean | number>,\n    tabindex: {\n      type: String as PropType<string>,\n      default: '0',\n    },\n    type: {\n      type: String as PropType<string>,\n      default: 'text',\n    },\n    ...pressYInputPropsOptions({\n      variation: 'filled',\n    }),\n  },\n  'YFieldInput',\n);\n\nexport const YFieldInput = defineComponent({\n  name: 'YFieldInput',\n  props: {\n    ...pressYFieldInputPropsOptions(),\n  },\n  emits: [\n    'update:modelValue',\n    'update:focused',\n    'input',\n    'change',\n    'click',\n    'mousedown',\n    'mouseup',\n    'keydown',\n    'keyup',\n    'focus',\n    'blur',\n    'mousedown:display',\n  ],\n  slots: Object as SlotsType<{\n    prepend: any;\n    append: any;\n    label: any;\n    default: YInputDefaultSlotProps;\n    leading: { error: boolean };\n    trailing: any;\n    'leading-out': any;\n    'trailing-out': any;\n    'helper-text': { error: boolean; errorResult: string | undefined };\n  }>,\n  setup(props, { attrs, expose, emit, slots }) {\n    const yInput$ = ref<YInput>();\n    const input$ = ref<HTMLInputElement>();\n    const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\n    const inValue = ref<any>('');\n    const displayValue = ref('');\n    const inputType = toRef(props, 'type');\n\n    const classes = computed(() => {\n      return {\n        [NAME]: true,\n      };\n    });\n\n    function onClick(event: MouseEvent) {\n      emit('click', event);\n    }\n\n    function onFocus(event: FocusEvent) {\n      whenFocus();\n      displayValue.value = inValue.value as string;\n      emit('focus', event);\n    }\n\n    function onBlur(event: FocusEvent) {\n      whenBlur();\n      emit('blur', event);\n      changeDisplay();\n    }\n\n    function onInput(event: Event) {\n      emit('input', event);\n      const target = event.target as HTMLInputElement | null;\n      inValue.value = target?.value;\n      displayValue.value = target?.value as string;\n    }\n\n    function onChange(event: Event) {\n      emit('change', inValue.value);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      emit('keydown', event);\n    }\n\n    function onKeyup(event: KeyboardEvent) {\n      emit('keyup', event);\n    }\n\n    function onClickClear(event: MouseEvent) {\n      clear();\n    }\n\n    function onKeydownClear(event: KeyboardEvent) {\n      if (event.code === 'Space' || event.code === 'Enter') {\n        clear();\n      }\n    }\n\n    function focus() {\n      input$.value?.focus();\n    }\n\n    function select() {\n      input$.value?.select();\n    }\n\n    function clear() {\n      inValue.value = '';\n      displayValue.value = '';\n      emit('update:modelValue', inValue.value);\n    }\n\n    function changeDisplay() {\n      const vm = getCurrentInstance();\n      const { displayText } = props;\n      if (displayText !== undefined) {\n        let text = inValue.value;\n        if (typeof displayText === 'string') {\n          text = displayText;\n        }\n        if (displayText && typeof displayText === 'function') {\n          text = (displayText as any).call(vm, text);\n        }\n        nextTick(() => {\n          displayValue.value = text as string;\n        });\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      (neo: any) => {\n        inValue.value = neo;\n        displayValue.value = neo;\n      },\n      {\n        immediate: true,\n      },\n    );\n\n    watch(\n      inValue,\n      (neo: string) => {\n        if (!focused.value) {\n          changeDisplay();\n        } else {\n          displayValue.value = neo;\n        }\n      },\n      { immediate: true },\n    );\n\n    const extended = {\n      focus,\n      select,\n      clear,\n    };\n\n    expose({\n      ...extended,\n      input$,\n      validate: () => yInput$.value?.invokeValidators(),\n    });\n\n    function onUpdateModel(value: any) {\n      emit('update:modelValue', value);\n    }\n\n    useRender(() => (\n      <YInput\n        class={classes.value}\n        ref={yInput$}\n        {...chooseProps(props, YInput.props)}\n        modelValue={inValue.value}\n        focused={focused.value}\n        extended={extended}\n        onUpdate:modelValue={onUpdateModel}\n        onClick={onClick}\n        onMousedown:display={($event) => emit('mousedown:display', $event)}\n      >\n        {{\n          leading: slots.leading\n            ? (args: any) => {\n                const leadingChildren = [];\n                const slot = slots.leading?.(args);\n                if (slot) {\n                  leadingChildren.push(slot);\n                } else {\n                  return undefined;\n                }\n                return leadingChildren;\n              }\n            : undefined,\n          default: (defaultProps: YInputDefaultSlotProps) => (\n            <div\n              class={[`${NAME}__field`]}\n              data-id={defaultProps.attrId}\n              ref={'field'}\n            >\n              {props.floating ? yInput$.value?.createLabel?.() : undefined}\n              {slots.default?.(defaultProps)}\n              {\n                <input\n                  ref={input$}\n                  value={displayValue.value}\n                  name={props.name}\n                  id={defaultProps.attrId}\n                  type={inputType.value}\n                  readonly={\n                    props.readonly || props.loading || defaultProps.loading\n                  }\n                  placeholder={props.placeholder}\n                  disabled={props.disabled}\n                  tabindex={props.tabindex || '0'}\n                  autocomplete={attrs.autocomplete as string}\n                  maxlength={attrs.maxlength as number | string}\n                  min={attrs.min as number | string}\n                  max={attrs.max as number | string}\n                  style={[attrs?.style, { textAlign: props.inputAlign } as any]}\n                  onInput={onInput}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                  onChange={onChange}\n                  onKeydown={onKeydown}\n                  onKeyup={onKeyup}\n                />\n              }\n            </div>\n          ),\n          trailing:\n            slots.trailing || (props.enableClear && inValue.value)\n              ? () => (\n                  <>\n                    {props.enableClear && inValue.value && (\n                      <div\n                        class={[\n                          'y-input__trailing',\n                          'y-input__trailing--clear',\n                        ]}\n                      >\n                        <button\n                          class={[`${NAME}__clear`]}\n                          onClick={onClickClear}\n                          onKeydown={onKeydownClear}\n                          tabindex={2}\n                        >\n                          <YIconClear></YIconClear>\n                        </button>\n                      </div>\n                    )}\n                    {slots.trailing && (\n                      <div class={['y-input__trailing']}>\n                        {slots.trailing()}\n                      </div>\n                    )}\n                  </>\n                )\n              : undefined,\n          label: slots.label ? () => slots.label?.() : undefined,\n          prepend: slots.prepend ? () => slots.prepend?.() : undefined,\n          append: slots.append ? () => slots.append?.() : undefined,\n          'leading-out': slots['leading-out'] ? () => slots['leading-out']?.() : undefined,\n          'trailing-out': slots['trailing-out'] ? () => slots['trailing-out']?.() : undefined,\n          'helper-text': slots['helper-text']\n            ? ({ error, errorResult }: any) =>\n                slots['helper-text']?.({ error, errorResult })\n            : undefined,\n        }}\n      </YInput>\n    ));\n\n    return {\n      focused,\n      inValue,\n    };\n  },\n});\n\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\n"],"mappings":"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"}
+{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","slots","Object","setup","_ref","attrs","expose","emit","yInput$","input$","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","onClick","event","onFocus","value","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","focus","select","vm","undefined","text","call","modelValue","neo","immediate","extended","validate","invokeValidators","onUpdateModel","_createVNode","_mergeProps","$event","leading","args","leadingChildren","slot","push","defaultProps","attrId","floating","createLabel","readonly","loading","placeholder","disabled","autocomplete","maxlength","min","max","style","textAlign","trailing","_Fragment","label","prepend","append","_ref2","error","errorResult"],"sources":["../../../src/components/field-input/YFieldInput.tsx"],"sourcesContent":["import type { PropType, SlotsType } from 'vue';\nimport { computed, defineComponent, getCurrentInstance, nextTick, ref, toRef, watch } from 'vue';\n\n\n\nimport { useRender } from '../../composables/component';\nimport { pressFocusPropsOptions, useFocus } from '../../composables/focus';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YIconClear } from '../icons/YIconClear';\nimport { YInput, YInputDefaultSlotProps, pressYInputPropsOptions } from '../input';\n\n\n\nimport './YFieldInput.scss';\n\n\nconst NAME = 'y-field-input';\n\nexport const pressYFieldInputPropsOptions = propsFactory(\n  {\n    enableClear: Boolean as PropType<boolean>,\n    inputAlign: String as PropType<string>,\n    displayText: [String, Function] as PropType<\n      string | ((value: any) => string)\n    >,\n    whenInputValid: [Boolean, Number] as PropType<boolean | number>,\n    tabindex: {\n      type: String as PropType<string>,\n      default: '0',\n    },\n    type: {\n      type: String as PropType<string>,\n      default: 'text',\n    },\n    ...pressYInputPropsOptions({\n      variation: 'filled',\n    }),\n  },\n  'YFieldInput',\n);\n\nexport const YFieldInput = defineComponent({\n  name: 'YFieldInput',\n  props: {\n    ...pressYFieldInputPropsOptions(),\n  },\n  emits: [\n    'update:modelValue',\n    'update:focused',\n    'input',\n    'change',\n    'click',\n    'mousedown',\n    'mouseup',\n    'keydown',\n    'keyup',\n    'focus',\n    'blur',\n    'mousedown:display',\n  ],\n  slots: Object as SlotsType<{\n    prepend: any;\n    append: any;\n    label: any;\n    default: YInputDefaultSlotProps;\n    leading: { error: boolean };\n    trailing: any;\n    'leading-out': any;\n    'trailing-out': any;\n    'helper-text': { error: boolean; errorResult: string | undefined };\n  }>,\n  setup(props, { attrs, expose, emit, slots }) {\n    const yInput$ = ref<YInput>();\n    const input$ = ref<HTMLInputElement>();\n    const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\n    const inValue = ref<any>('');\n    const displayValue = ref('');\n    const inputType = toRef(props, 'type');\n\n    const classes = computed(() => {\n      return {\n        [NAME]: true,\n      };\n    });\n\n    function onClick(event: MouseEvent) {\n      emit('click', event);\n    }\n\n    function onFocus(event: FocusEvent) {\n      whenFocus();\n      displayValue.value = inValue.value as string;\n      emit('focus', event);\n    }\n\n    function onBlur(event: FocusEvent) {\n      whenBlur();\n      emit('blur', event);\n      changeDisplay();\n    }\n\n    function onInput(event: Event) {\n      emit('input', event);\n      const target = event.target as HTMLInputElement | null;\n      inValue.value = target?.value;\n      displayValue.value = target?.value as string;\n    }\n\n    function onChange(event: Event) {\n      emit('change', inValue.value);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      emit('keydown', event);\n    }\n\n    function onKeyup(event: KeyboardEvent) {\n      emit('keyup', event);\n    }\n\n    function onClickClear(event: MouseEvent) {\n      clear();\n    }\n\n    function onKeydownClear(event: KeyboardEvent) {\n      if (event.code === 'Space' || event.code === 'Enter') {\n        clear();\n      }\n    }\n\n    function focus() {\n      input$.value?.focus();\n    }\n\n    function select() {\n      input$.value?.select();\n    }\n\n    function clear() {\n      inValue.value = '';\n      displayValue.value = '';\n      emit('update:modelValue', inValue.value);\n    }\n\n    function changeDisplay() {\n      const vm = getCurrentInstance();\n      const { displayText } = props;\n      if (displayText !== undefined) {\n        let text = inValue.value;\n        if (typeof displayText === 'string') {\n          text = displayText;\n        }\n        if (displayText && typeof displayText === 'function') {\n          text = (displayText as any).call(vm, text);\n        }\n        nextTick(() => {\n          displayValue.value = text as string;\n        });\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      (neo: any) => {\n        inValue.value = neo;\n        displayValue.value = neo;\n      },\n      {\n        immediate: true,\n      },\n    );\n\n    watch(\n      inValue,\n      (neo: string) => {\n        if (!focused.value) {\n          changeDisplay();\n        } else {\n          displayValue.value = neo;\n        }\n      },\n      { immediate: true },\n    );\n\n    const extended = {\n      focus,\n      select,\n      clear,\n    };\n\n    expose({\n      ...extended,\n      input$,\n      validate: () => yInput$.value?.invokeValidators(),\n    });\n\n    function onUpdateModel(value: any) {\n      emit('update:modelValue', value);\n    }\n\n    useRender(() => (\n      <YInput\n        class={classes.value}\n        ref={yInput$}\n        {...chooseProps(props, YInput.props)}\n        modelValue={inValue.value}\n        focused={focused.value}\n        extended={extended}\n        onUpdate:modelValue={onUpdateModel}\n        onClick={onClick}\n        onMousedown:display={($event) => emit('mousedown:display', $event)}\n      >\n        {{\n          leading: slots.leading\n            ? (args: any) => {\n                const leadingChildren = [];\n                const slot = slots.leading?.(args);\n                if (slot) {\n                  leadingChildren.push(slot);\n                } else {\n                  return undefined;\n                }\n                return leadingChildren;\n              }\n            : undefined,\n          default: (defaultProps: YInputDefaultSlotProps) => (\n            <div\n              class={[`${NAME}__field`]}\n              data-id={defaultProps.attrId}\n              ref={'field'}\n            >\n              {props.floating ? yInput$.value?.createLabel?.() : undefined}\n              {slots.default?.(defaultProps)}\n              {\n                <input\n                  ref={input$}\n                  value={displayValue.value}\n                  name={props.name}\n                  id={defaultProps.attrId}\n                  type={inputType.value}\n                  readonly={\n                    props.readonly || props.loading || defaultProps.loading\n                  }\n                  placeholder={props.placeholder}\n                  disabled={props.disabled}\n                  tabindex={props.tabindex || '0'}\n                  autocomplete={attrs.autocomplete as string}\n                  maxlength={attrs.maxlength as number | string}\n                  min={attrs.min as number | string}\n                  max={attrs.max as number | string}\n                  style={[attrs?.style, { textAlign: props.inputAlign } as any]}\n                  onInput={onInput}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                  onChange={onChange}\n                  onKeydown={onKeydown}\n                  onKeyup={onKeyup}\n                />\n              }\n            </div>\n          ),\n          trailing:\n            slots.trailing || (props.enableClear && inValue.value)\n              ? () => (\n                  <>\n                    {props.enableClear && inValue.value && (\n                      <div\n                        class={[\n                          'y-input__trailing',\n                          'y-input__trailing--clear',\n                        ]}\n                      >\n                        <button\n                          class={[`${NAME}__clear`]}\n                          onClick={onClickClear}\n                          onKeydown={onKeydownClear}\n                          tabindex={2}\n                        >\n                          <YIconClear></YIconClear>\n                        </button>\n                      </div>\n                    )}\n                    {slots.trailing && (\n                      <div class={['y-input__trailing']}>\n                        {slots.trailing()}\n                      </div>\n                    )}\n                  </>\n                )\n              : undefined,\n          label: slots.label ? () => slots.label?.() : undefined,\n          prepend: slots.prepend ? () => slots.prepend?.() : undefined,\n          append: slots.append ? () => slots.append?.() : undefined,\n          'leading-out': slots['leading-out']\n            ? () => slots['leading-out']?.()\n            : undefined,\n          'trailing-out': slots['trailing-out']\n            ? () => slots['trailing-out']?.()\n            : undefined,\n          'helper-text': slots['helper-text']\n            ? ({ error, errorResult }: any) =>\n                slots['helper-text']?.({ error, errorResult })\n            : undefined,\n        }}\n      </YInput>\n    ));\n\n    return {\n      focused,\n      inValue,\n    };\n  },\n});\n\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\n"],"mappings":"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"}

package/lib/components/field-input/YFieldInput.scss

@@ -5,7 +5,7 @@
 
   .y-input {
     &__display {
-      padding: 0 2px;
+      padding: 0 1px;
       flex: 0 0 auto;
     }
 

package/lib/components/hover/YHover.mjs

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { defineComponent } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import { useModelDuplex } from 'yuyeon/composables';
 import { useRender } from "../../composables/component.mjs";
 import { useDelay } from "../../composables/timing.mjs";
@@ -22,9 +22,11 @@ export const pressYHoverPropsOptions = propsFactory({
 export const YHover = defineComponent({
   name: 'YHover',
   props: pressYHoverPropsOptions(),
+  emits: ['update:modelValue', 'hover'],
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const isHovering = useModelDuplex(props, 'modelValue');
     const {
@@ -33,14 +35,19 @@ export const YHover = defineComponent({
     } = useDelay(props, value => {
       !props.disabled && (isHovering.value = value);
     });
+    const defaultSlot = ref();
+    watch(isHovering, neo => {
+      emit('hover', neo, defaultSlot);
+    });
     useRender(() => {
-      return _createVNode(_Fragment, null, [slots.default?.({
+      defaultSlot.value = slots.default?.({
         isHovering: isHovering.value,
         props: {
           onMouseenter: () => startOpenDelay(),
           onMouseleave: () => startCloseDelay()
         }
-      })]);
+      });
+      return _createVNode(_Fragment, null, [defaultSlot.value]);
     });
   }
 });

package/lib/components/hover/YHover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YHover.mjs","names":["defineComponent","useModelDuplex","useRender","useDelay","propsFactory","pressYHoverPropsOptions","disabled","Boolean","modelValue","type","default","undefined","openDelay","Number","closeDelay","YHover","name","props","setup","_ref","slots","isHovering","startOpenDelay","startCloseDelay","value","_createVNode","_Fragment","onMouseenter","onMouseleave"],"sources":["../../../src/components/hover/YHover.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { useModelDuplex } from 'yuyeon/composables';\n\nimport { useRender } from '../../composables/component';\nimport { useDelay } from '../../composables/timing';\nimport { propsFactory } from '../../util';\n\nexport const pressYHoverPropsOptions = propsFactory(\n  {\n    disabled: Boolean,\n    modelValue: {\n      type: Boolean,\n      default: undefined,\n    },\n    openDelay: {\n      type: Number,\n      default: 100,\n    },\n    closeDelay: {\n      type: Number,\n      default: 100,\n    },\n  },\n  'YHover',\n);\n\nexport const YHover = defineComponent({\n  name: 'YHover',\n  props: pressYHoverPropsOptions(),\n  setup(props, { slots }) {\n    const isHovering = useModelDuplex(props, 'modelValue');\n    const { startOpenDelay, startCloseDelay } = useDelay(\n      props,\n      (value: any) => {\n        !props.disabled && (isHovering.value = value);\n      },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          {slots.default?.({\n            isHovering: isHovering.value,\n            props: {\n              onMouseenter: () => startOpenDelay(),\n              onMouseleave: () => startCloseDelay(),\n            },\n          })}\n        </>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AACrC,SAASC,cAAc,QAAQ,oBAAoB;AAAC,SAE3CC,SAAS;AAAA,SACTC,QAAQ;AAAA,SACRC,YAAY;AAErB,OAAO,MAAMC,uBAAuB,GAAGD,YAAY,CACjD;EACEE,QAAQ,EAAEC,OAAO;EACjBC,UAAU,EAAE;IACVC,IAAI,EAAEF,OAAO;IACbG,OAAO,EAAEC;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI,MAAM;IACZH,OAAO,EAAE;EACX,CAAC;EACDI,UAAU,EAAE;IACVL,IAAI,EAAEI,MAAM;IACZH,OAAO,EAAE;EACX;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMK,MAAM,GAAGf,eAAe,CAAC;EACpCgB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEZ,uBAAuB,CAAC,CAAC;EAChCa,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,UAAU,GAAGpB,cAAc,CAACgB,KAAK,EAAE,YAAY,CAAC;IACtD,MAAM;MAAEK,cAAc;MAAEC;IAAgB,CAAC,GAAGpB,QAAQ,CAClDc,KAAK,EACJO,KAAU,IAAK;MACd,CAACP,KAAK,CAACX,QAAQ,KAAKe,UAAU,CAACG,KAAK,GAAGA,KAAK,CAAC;IAC/C,CACF,CAAC;IAEDtB,SAAS,CAAC,MAAM;MACd,OAAAuB,YAAA,CAAAC,SAAA,SAEKN,KAAK,CAACV,OAAO,GAAG;QACfW,UAAU,EAAEA,UAAU,CAACG,KAAK;QAC5BP,KAAK,EAAE;UACLU,YAAY,EAAEA,CAAA,KAAML,cAAc,CAAC,CAAC;UACpCM,YAAY,EAAEA,CAAA,KAAML,eAAe,CAAC;QACtC;MACF,CAAC,CAAC;IAGR,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YHover.mjs","names":["defineComponent","ref","watch","useModelDuplex","useRender","useDelay","propsFactory","pressYHoverPropsOptions","disabled","Boolean","modelValue","type","default","undefined","openDelay","Number","closeDelay","YHover","name","props","emits","setup","_ref","slots","emit","isHovering","startOpenDelay","startCloseDelay","value","defaultSlot","neo","onMouseenter","onMouseleave","_createVNode","_Fragment"],"sources":["../../../src/components/hover/YHover.tsx"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport { useModelDuplex } from 'yuyeon/composables';\n\nimport { useRender } from '../../composables/component';\nimport { useDelay } from '../../composables/timing';\nimport { propsFactory } from '../../util';\n\nexport const pressYHoverPropsOptions = propsFactory(\n  {\n    disabled: Boolean,\n    modelValue: {\n      type: Boolean,\n      default: undefined,\n    },\n    openDelay: {\n      type: Number,\n      default: 100,\n    },\n    closeDelay: {\n      type: Number,\n      default: 100,\n    },\n  },\n  'YHover',\n);\n\nexport const YHover = defineComponent({\n  name: 'YHover',\n  props: pressYHoverPropsOptions(),\n  emits: ['update:modelValue', 'hover'],\n  setup(props, { slots, emit }) {\n    const isHovering = useModelDuplex(props, 'modelValue');\n    const { startOpenDelay, startCloseDelay } = useDelay(\n      props,\n      (value: any) => {\n        !props.disabled && (isHovering.value = value);\n      },\n    );\n\n    const defaultSlot = ref<any>();\n\n    watch(isHovering, (neo) => {\n      emit('hover', neo, defaultSlot);\n    });\n\n    useRender(() => {\n      defaultSlot.value = slots.default?.({\n        isHovering: isHovering.value,\n        props: {\n          onMouseenter: () => startOpenDelay(),\n          onMouseleave: () => startCloseDelay(),\n        },\n      });\n      return <>{defaultSlot.value}</>;\n    });\n  },\n});\n\nexport type YHover = InstanceType<typeof YHover>;\n"],"mappings":";AAAA,SAASA,eAAe,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AACjD,SAASC,cAAc,QAAQ,oBAAoB;AAAC,SAE3CC,SAAS;AAAA,SACTC,QAAQ;AAAA,SACRC,YAAY;AAErB,OAAO,MAAMC,uBAAuB,GAAGD,YAAY,CACjD;EACEE,QAAQ,EAAEC,OAAO;EACjBC,UAAU,EAAE;IACVC,IAAI,EAAEF,OAAO;IACbG,OAAO,EAAEC;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI,MAAM;IACZH,OAAO,EAAE;EACX,CAAC;EACDI,UAAU,EAAE;IACVL,IAAI,EAAEI,MAAM;IACZH,OAAO,EAAE;EACX;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMK,MAAM,GAAGjB,eAAe,CAAC;EACpCkB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEZ,uBAAuB,CAAC,CAAC;EAChCa,KAAK,EAAE,CAAC,mBAAmB,EAAE,OAAO,CAAC;EACrCC,KAAKA,CAACF,KAAK,EAAAG,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAMG,UAAU,GAAGtB,cAAc,CAACgB,KAAK,EAAE,YAAY,CAAC;IACtD,MAAM;MAAEO,cAAc;MAAEC;IAAgB,CAAC,GAAGtB,QAAQ,CAClDc,KAAK,EACJS,KAAU,IAAK;MACd,CAACT,KAAK,CAACX,QAAQ,KAAKiB,UAAU,CAACG,KAAK,GAAGA,KAAK,CAAC;IAC/C,CACF,CAAC;IAED,MAAMC,WAAW,GAAG5B,GAAG,CAAM,CAAC;IAE9BC,KAAK,CAACuB,UAAU,EAAGK,GAAG,IAAK;MACzBN,IAAI,CAAC,OAAO,EAAEM,GAAG,EAAED,WAAW,CAAC;IACjC,CAAC,CAAC;IAEFzB,SAAS,CAAC,MAAM;MACdyB,WAAW,CAACD,KAAK,GAAGL,KAAK,CAACX,OAAO,GAAG;QAClCa,UAAU,EAAEA,UAAU,CAACG,KAAK;QAC5BT,KAAK,EAAE;UACLY,YAAY,EAAEA,CAAA,KAAML,cAAc,CAAC,CAAC;UACpCM,YAAY,EAAEA,CAAA,KAAML,eAAe,CAAC;QACtC;MACF,CAAC,CAAC;MACF,OAAAM,YAAA,CAAAC,SAAA,SAAUL,WAAW,CAACD,KAAK;IAC7B,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/hover/index.mjs

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

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

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

package/lib/components/index.mjs

@@ -31,4 +31,7 @@ export * from "./date-picker/index.mjs";
 export * from "./icon/index.mjs";
 export * from "./badge/index.mjs";
 export * from "./text-ellipsis/index.mjs";
+export * from "./ip-field/index.mjs";
+export * from "./hover/index.mjs";
+export * from "./text-interpolation/index.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/index.mjs.map

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

package/lib/components/input/YInput.scss

@@ -172,24 +172,22 @@ $input-border-radius: variables.$border-radius-root !default;
     --y-input-outlined-opacity: 0.64;
     --y-input-outlined-opacity-hover: 0.87;
 
-    .y-input {
-      &__plate {
-        border: 1px solid rgba(var(--y-theme-outline-rgb), var(--y-input-outlined-opacity));
-        box-sizing: border-box;
-        inset: 0;
-
-        &:before {
-          top: 0;
-          height: 100%;
-          background: transparent;
-          border-radius: inherit;
-        }
-      }
+    .y-input__plate {
+      border: 1px solid rgba(var(--y-theme-outline-rgb), var(--y-input-outlined-opacity));
+      box-sizing: border-box;
+      inset: 0;
 
-      &__display:hover {
-        --y-input-outlined-opacity: var(--y-input-outlined-opacity-hover);
+      &:before {
+        top: 0;
+        height: 100%;
+        background: transparent;
+        border-radius: inherit;
       }
     }
+
+    &:not(.y-input--disabled) .y-input__display:hover {
+      --y-input-outlined-opacity: var(--y-input-outlined-opacity-hover);
+    }
   }
 
   &--ceramic {

package/lib/components/ip-field/YIpField.scss

@@ -0,0 +1,74 @@
+.y-ip-field {
+  font-size: 1rem;
+  max-width: 12.8em;
+  color: var(--y-theme-on-background);
+
+  &.y-input--rounded .y-input__plate {
+    border-radius: calc(var(--display-height) / 2);
+  }
+
+  &--text {
+    color: inherit;
+    pointer-events: none;
+
+    input {
+      color: inherit;
+    }
+  }
+
+  .y-input {
+    &__display {
+      cursor: default;
+    }
+  }
+
+  &.y-input--error {
+    input {
+      color: inherit;
+    }
+  }
+
+  &__field {
+    flex: 1 1;
+    min-width: 0;
+    display: flex;
+    position: relative;
+    padding: 2px 16px;
+  }
+
+  &__part {
+    flex: 1 1;
+    display: flex;
+    align-items: center;
+    outline: none;
+
+    &-input {
+      position: relative;
+      flex: 1 1;
+      width: 2em;
+      text-align: center;
+      padding: 4px 0;
+      color: var(--y-theme-on-background);
+
+      &:focus {
+        outline: none;
+      }
+
+      &--fixed {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  &__part-delimiter {
+    flex: 0 0 auto;
+    font-size: inherit;
+    padding: 0 0.2em;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .y-input__leading {
+    padding-right: 0;
+  }
+}