yuyeon 0.0.38-rc9 → 0.0.39

package/lib/components/select/YSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YSelect.mjs","names":["shallowRef","computed","defineComponent","mergeProps","ref","useModelDuplex","useRender","pressCoordinateProps","pressListItemsPropsOptions","useItems","wrapInArray","deepEqual","getObjectValueByPath","omit","chooseProps","propsFactory","YCard","YFieldInput","pressYFieldInputPropsOptions","YIconDropdown","YList","YListItem","YMenu","returnItemEquals","optionsItem","valueItem","valueKey","arguments","length","undefined","valueItemType","itemValue","pressSelectPropsOptions","opened","Boolean","multiple","weakEquals","valueEquals","type","Function","default","defaultSelect","pressYSelectPropsOptions","maxHeight","Number","String","expandIcon","Object","position","YSelect","name","props","emits","value","click:item","item","e","setup","_ref","slots","fieldInputRef","menuRef","listRef","focused","items","toRefineItems","toEmitItems","model","v","emitValue","selections","map","find","selected","selection","isSelected","selectedItem","onMousedownDisplay","event","disabled","onBlur","onClickItem","select","onAfterLeave","focus","index","findIndex","neo","slice","splice","displayText","text","join","fieldInputProps","_createVNode","$event","offset","origin","base","_len","args","Array","_key","_mergeProps","leading","_len2","_key2","trailing","menu","_createTextVNode"],"sources":["../../../src/components/select/YSelect.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\r\nimport type { PropType } from 'vue';\r\nimport { computed, defineComponent, mergeProps, ref } from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { pressCoordinateProps } from '../../composables/coordinate';\r\nimport {\r\n  ListItem,\r\n  pressListItemsPropsOptions,\r\n  useItems,\r\n} from '../../composables/list-items';\r\nimport { wrapInArray } from '../../util/array';\r\nimport {deepEqual, getObjectValueByPath, getPropertyFromItem, omit} from '../../util/common';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YCard } from '../card';\r\nimport { YFieldInput, pressYFieldInputPropsOptions } from '../field-input';\r\nimport { YIconDropdown } from '../icons/YIconDropdown';\r\nimport { YList, YListItem } from '../list';\r\nimport { YMenu } from '../menu';\r\n\r\nimport './YSelect.scss';\r\n\r\nexport type SelectEquals = (\r\n  optionsItem: any,\r\n  valueItem: any,\r\n  valueKey?: string,\r\n) => boolean;\r\n\r\nexport function returnItemEquals(\r\n  optionsItem: any,\r\n  valueItem: any,\r\n  valueKey = 'value',\r\n) {\r\n  const valueItemType = typeof valueItem;\r\n  const itemValue =\r\n    valueItemType === 'string' || valueItemType === 'number'\r\n      ? getObjectValueByPath(optionsItem, valueKey)\r\n      : optionsItem;\r\n  return deepEqual(itemValue, valueItem);\r\n}\r\n\r\nexport const pressSelectPropsOptions = propsFactory(\r\n  {\r\n    opened: Boolean as PropType<boolean>,\r\n    multiple: Boolean,\r\n    weakEquals: Boolean,\r\n    valueEquals: {\r\n      type: Function as PropType<SelectEquals>,\r\n      default: deepEqual,\r\n    },\r\n    defaultSelect: Boolean,\r\n    ...pressListItemsPropsOptions(),\r\n  },\r\n  'Select',\r\n);\r\n\r\nexport const pressYSelectPropsOptions = propsFactory(\r\n  {\r\n    maxHeight: {\r\n      type: [Number, String],\r\n      default: 310,\r\n    },\r\n    expandIcon: {\r\n      type: Object,\r\n    },\r\n    ...pressSelectPropsOptions(),\r\n    ...pressYFieldInputPropsOptions(),\r\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\r\n      'coordinateStrategy',\r\n    ]),\r\n  },\r\n  'YSelect',\r\n);\r\n\r\nexport const YSelect = defineComponent({\r\n  name: 'YSelect',\r\n  props: {\r\n    ...pressYSelectPropsOptions(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: any) => true,\r\n    'update:opened': (opened: boolean) => true,\r\n    'click:item': (item: any, e: MouseEvent) => true,\r\n  },\r\n  setup(props, { slots }) {\r\n    const fieldInputRef = ref();\r\n    const menuRef = ref();\r\n    const listRef = ref<InstanceType<typeof YList>>();\r\n\r\n    const opened = useModelDuplex(props, 'opened');\r\n    const focused = shallowRef(false);\r\n\r\n    const { items, toRefineItems, toEmitItems } = useItems(props);\r\n    const model = useModelDuplex(\r\n      props,\r\n      'modelValue',\r\n      [],\r\n      (v) => toRefineItems(v === null ? [null] : wrapInArray(v)),\r\n      (v) => {\r\n        const emitValue = toEmitItems(wrapInArray(v));\r\n        return props.multiple ? emitValue : emitValue[0] ?? null;\r\n      },\r\n    );\r\n\r\n    const selections = computed<ListItem[]>(() => {\r\n      return model.value.map((v: any) => {\r\n        return items.value.find((item) => {\r\n          return props.valueEquals(item.value, v.value);\r\n        });\r\n      });\r\n    });\r\n\r\n    const selected = computed(() => {\r\n      return selections.value.map((selection) => selection.props.value);\r\n    });\r\n\r\n    function isSelected(item: ListItem) {\r\n      return !!selections.value.find((selectedItem) => {\r\n        return selectedItem.value === item.value;\r\n      });\r\n    }\r\n\r\n    // Field\r\n    function onMousedownDisplay(event: MouseEvent) {\r\n      if (props.disabled) {\r\n        return;\r\n      }\r\n      opened.value = !opened.value;\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      // if (listRef.value?.$el.contains(event.relatedTarget)) {\r\n      //   opened.value = false;\r\n      // }\r\n    }\r\n\r\n    // Menu Contents\r\n    function onClickItem(item: ListItem, e: MouseEvent) {\r\n      select(item);\r\n      if (!props.multiple) {\r\n        opened.value = false;\r\n      }\r\n    }\r\n\r\n    function onAfterLeave() {\r\n      if (focused.value) {\r\n        fieldInputRef.value?.focus();\r\n      }\r\n    }\r\n\r\n    function select(item: ListItem) {\r\n      if (props.multiple) {\r\n        const index = selections.value.findIndex((selectedItem) => {\r\n          return selectedItem.value === item.value;\r\n        });\r\n        if (index === -1) {\r\n          model.value = [...model.value, item];\r\n        } else {\r\n          const neo = model.value.slice();\r\n          neo.splice(index, 1);\r\n          model.value = neo;\r\n        }\r\n      } else {\r\n        model.value = [item];\r\n      }\r\n    }\r\n\r\n    const displayText = computed(() => {\r\n      if (props.multiple) {\r\n        return selections.value.map((item) => item.text).join(', ');\r\n      }\r\n      return selections.value?.[0]?.text ?? '';\r\n    });\r\n\r\n    useRender(() => {\r\n      const fieldInputProps = chooseProps(props, YFieldInput.props);\r\n      return (\r\n        <YMenu\r\n          v-model={opened.value}\r\n          ref={menuRef}\r\n          offset={props.offset}\r\n          position={props.position}\r\n          origin={props.origin}\r\n          content-classes={['y-select__content']}\r\n          maxHeight={props.maxHeight}\r\n          open-on-click-base={false}\r\n          onAfterLeave={onAfterLeave}\r\n        >\r\n          {{\r\n            base: (...args: any[]) =>\r\n              slots.base ? (\r\n                slots.base?.(...args)\r\n              ) : (\r\n                <YFieldInput\r\n                  {...{\r\n                    ...fieldInputProps,\r\n                    ...mergeProps({ ...args[0].props }, { ref: fieldInputRef }),\r\n                  }}\r\n                  onMousedown:display={onMousedownDisplay}\r\n                  onBlur={onBlur}\r\n                  readonly\r\n                  class={['y-select', { 'y-select--opened': opened.value }]}\r\n                  v-model:focused={focused.value}\r\n                >\r\n                  {{\r\n                    default: () => {\r\n                      return (\r\n                        <div class={['y-select__selection']}>\r\n                          {slots.selection\r\n                            ? slots.selection?.()\r\n                            : displayText.value}\r\n                        </div>\r\n                      );\r\n                    },\r\n                    leading: slots.leading\r\n                      ? (...args: any[]) => slots.leading?.(...args)\r\n                      : undefined,\r\n                    trailing: (...args: any[]) => {\r\n                      return slots['expand-icon'] ? (\r\n                        slots['expand-icon']()\r\n                      ) : (\r\n                        <i class=\"y-select__icon\">\r\n                          <YIconDropdown></YIconDropdown>\r\n                        </i>\r\n                      );\r\n                    },\r\n                    'helper-text': slots['helper-text']\r\n                      ? slots['helper-text']?.()\r\n                      : undefined,\r\n                  }}\r\n                </YFieldInput>\r\n              ),\r\n            default: () =>\r\n              slots.menu ? (\r\n                slots.menu()\r\n              ) : (\r\n                <YCard>\r\n                  {items.value.length > 0 ? (\r\n                    <YList ref={listRef}>\r\n                      {items.value.map((item) => {\r\n                        return (\r\n                          <YListItem\r\n                            onClick={(e) => onClickItem(item, e)}\r\n                            class={{ 'y-list-item--active': isSelected(item) }}\r\n                          >\r\n                            {item.text}\r\n                          </YListItem>\r\n                        );\r\n                      })}\r\n                    </YList>\r\n                  ) : (\r\n                    <div class=\"y-select__no-options\">항목이 없습니다.</div>\r\n                  )}\r\n                </YCard>\r\n              ),\r\n          }}\r\n        </YMenu>\r\n      );\r\n    });\r\n\r\n    return {\r\n      fieldInputRef,\r\n      model,\r\n      selections,\r\n      selected,\r\n    };\r\n  },\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"YSelect.mjs","names":["shallowRef","computed","defineComponent","mergeProps","onMounted","ref","useModelDuplex","useRender","pressCoordinateProps","pressListItemsPropsOptions","useItems","wrapInArray","deepEqual","getObjectValueByPath","omit","chooseProps","propsFactory","YCard","YFieldInput","pressYFieldInputPropsOptions","YIconDropdown","YList","YListItem","YMenu","returnItemEquals","optionsItem","valueItem","valueKey","arguments","length","undefined","valueItemType","itemValue","pressSelectPropsOptions","opened","Boolean","multiple","weakEquals","valueEquals","type","Function","default","defaultSelect","pressYSelectPropsOptions","maxHeight","Number","String","expandIcon","Object","position","YSelect","name","inheritAttrs","props","emits","value","click:item","item","e","slots","setup","_ref","attrs","fieldInputRef","menuRef","listRef","focused","items","toRefineItems","toEmitItems","model","v","emitValue","selections","map","find","selected","selection","isSelected","selectedItem","onMousedownDisplay","event","disabled","onBlur","onClickItem","select","onAfterLeave","focus","index","findIndex","neo","slice","splice","displayText","text","join","fieldInputProps","_createVNode","$event","offset","origin","base","_len","args","Array","_key","_mergeProps","leading","_len2","_key2","trailing","menu","_createTextVNode","modelValue","isArray"],"sources":["../../../src/components/select/YSelect.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\nimport type { PropType, SlotsType } from 'vue';\nimport { computed, defineComponent, mergeProps, onMounted, ref } from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport {\n  ListItem,\n  pressListItemsPropsOptions,\n  useItems,\n} from '../../composables/list-items';\nimport { wrapInArray } from '../../util/array';\nimport {\n  deepEqual,\n  getObjectValueByPath,\n  getPropertyFromItem,\n  omit,\n} from '../../util/common';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YFieldInput, pressYFieldInputPropsOptions } from '../field-input';\nimport { YIconDropdown } from '../icons/YIconDropdown';\nimport { YList, YListItem } from '../list';\nimport { YMenu } from '../menu';\n\nimport './YSelect.scss';\n\nexport type SelectEquals = (\n  optionsItem: any,\n  valueItem: any,\n  valueKey?: string,\n) => boolean;\n\nexport function returnItemEquals(\n  optionsItem: any,\n  valueItem: any,\n  valueKey = 'value',\n) {\n  const valueItemType = typeof valueItem;\n  const itemValue =\n    valueItemType === 'string' || valueItemType === 'number'\n      ? getObjectValueByPath(optionsItem, valueKey)\n      : optionsItem;\n  return deepEqual(itemValue, valueItem);\n}\n\nexport const pressSelectPropsOptions = propsFactory(\n  {\n    opened: Boolean as PropType<boolean>,\n    multiple: Boolean,\n    weakEquals: Boolean,\n    valueEquals: {\n      type: Function as PropType<SelectEquals>,\n      default: deepEqual,\n    },\n    defaultSelect: Boolean,\n    ...pressListItemsPropsOptions(),\n  },\n  'Select',\n);\n\nexport const pressYSelectPropsOptions = propsFactory(\n  {\n    maxHeight: {\n      type: [Number, String],\n      default: 310,\n    },\n    expandIcon: {\n      type: Object,\n    },\n    ...pressSelectPropsOptions(),\n    ...pressYFieldInputPropsOptions(),\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n      'coordinateStrategy',\n    ]),\n  },\n  'YSelect',\n);\n\nexport const YSelect = defineComponent({\n  name: 'YSelect',\n  inheritAttrs: false,\n  props: {\n    ...pressYSelectPropsOptions(),\n  },\n  emits: {\n    'update:modelValue': (value: any) => true,\n    'update:opened': (opened: boolean) => true,\n    'click:item': (item: any, e: MouseEvent) => true,\n  },\n  slots: Object as SlotsType<{\n    base: any;\n    selection: any;\n    leading: any;\n    'helper-text': any;\n    menu: any;\n    'menu-prepend': any;\n    'menu-append': any;\n    'expand-icon': any;\n    item: { item: any; selected: boolean };\n  }>,\n  setup(props, { slots, attrs }) {\n    const fieldInputRef = ref();\n    const menuRef = ref();\n    const listRef = ref<InstanceType<typeof YList>>();\n\n    const opened = useModelDuplex(props, 'opened');\n    const focused = shallowRef(false);\n\n    const { items, toRefineItems, toEmitItems } = useItems(props);\n    const model = useModelDuplex(\n      props,\n      'modelValue',\n      [],\n      (v) => toRefineItems(v === null ? [null] : wrapInArray(v)),\n      (v) => {\n        const emitValue = toEmitItems(wrapInArray(v));\n        return props.multiple ? emitValue : emitValue[0] ?? null;\n      },\n    );\n\n    const selections = computed<ListItem[]>(() => {\n      return model.value.map((v: any) => {\n        return items.value.find((item) => {\n          return props.valueEquals(item.value, v.value);\n        });\n      });\n    });\n\n    const selected = computed(() => {\n      return selections.value.map((selection) => selection.props.value);\n    });\n\n    function isSelected(item: ListItem) {\n      return !!selections.value.find((selectedItem) => {\n        return selectedItem?.value === item.value;\n      });\n    }\n\n    // Field\n    function onMousedownDisplay(event: MouseEvent) {\n      if (props.disabled) {\n        return;\n      }\n      opened.value = !opened.value;\n    }\n\n    function onBlur(event: FocusEvent) {\n      // if (listRef.value?.$el.contains(event.relatedTarget)) {\n      //   opened.value = false;\n      // }\n    }\n\n    // Menu Contents\n    function onClickItem(item: ListItem, e: MouseEvent) {\n      select(item);\n      if (!props.multiple) {\n        opened.value = false;\n      }\n    }\n\n    function onAfterLeave() {\n      if (focused.value) {\n        fieldInputRef.value?.focus();\n      }\n    }\n\n    function select(item: ListItem) {\n      if (props.multiple) {\n        const index = selections.value.findIndex((selectedItem) => {\n          return selectedItem.value === item.value;\n        });\n        if (index === -1) {\n          model.value = [...model.value, item];\n        } else {\n          const neo = model.value.slice();\n          neo.splice(index, 1);\n          model.value = neo;\n        }\n      } else {\n        model.value = [item];\n      }\n    }\n\n    const displayText = computed(() => {\n      if (props.multiple) {\n        return selections.value.map((item) => item.text).join(', ');\n      }\n      return selections.value?.[0]?.text ?? '';\n    });\n\n    useRender(() => {\n      const fieldInputProps = chooseProps(props, YFieldInput.props);\n      return (\n        <YMenu\n          v-model={opened.value}\n          ref={menuRef}\n          offset={props.offset}\n          position={props.position}\n          origin={props.origin}\n          content-classes={['y-select__content']}\n          maxHeight={props.maxHeight}\n          open-on-click-base={false}\n          onAfterLeave={onAfterLeave}\n        >\n          {{\n            base: (...args: any[]) =>\n              slots.base ? (\n                slots.base?.(...args)\n              ) : (\n                <YFieldInput\n                  {...{\n                    ...fieldInputProps,\n                    ...mergeProps({ ...args[0].props }, { ref: fieldInputRef }),\n                  }}\n                  onMousedown:display={onMousedownDisplay}\n                  onBlur={onBlur}\n                  readonly\n                  class={['y-select', { 'y-select--opened': opened.value }]}\n                  {...attrs}\n                  v-model:focused={focused.value}\n                >\n                  {{\n                    default: () => {\n                      return (\n                        <div class={['y-select__selection']}>\n                          {slots.selection\n                            ? slots.selection?.()\n                            : displayText.value}\n                        </div>\n                      );\n                    },\n                    leading: slots.leading\n                      ? (...args: any[]) => slots.leading?.(...args)\n                      : undefined,\n                    trailing: (...args: any[]) => {\n                      return slots['expand-icon'] ? (\n                        slots['expand-icon']()\n                      ) : (\n                        <i class=\"y-select__icon\">\n                          <YIconDropdown></YIconDropdown>\n                        </i>\n                      );\n                    },\n                    'helper-text': slots['helper-text']\n                      ? slots['helper-text']?.()\n                      : undefined,\n                  }}\n                </YFieldInput>\n              ),\n            default: () =>\n              slots.menu ? (\n                slots.menu()\n              ) : (\n                <YCard>\n                  {slots['menu-prepend']?.()}\n                  {items.value.length > 0 ? (\n                    <YList ref={listRef}>\n                      {items.value.map((item) => {\n                        return (\n                          <YListItem\n                            onClick={(e) => onClickItem(item, e)}\n                            class={{ 'y-list-item--active': isSelected(item) }}\n                          >\n                            {slots.item\n                              ? slots.item({ item, selected: isSelected(item) })\n                              : item.text}\n                          </YListItem>\n                        );\n                      })}\n                    </YList>\n                  ) : (\n                    <div class=\"y-select__no-options\">항목이 없습니다.</div>\n                  )}\n                  {slots['menu-append']?.()}\n                </YCard>\n              ),\n          }}\n        </YMenu>\n      );\n    });\n\n    onMounted(() => {\n      if (\n        props.defaultSelect &&\n        (props.modelValue === undefined ||\n          (Array.isArray(props.modelValue) && props.modelValue.length === 0)) &&\n        items.value?.length\n      ) {\n        select(items.value[0]);\n      }\n    });\n\n    return {\n      fieldInputRef,\n      model,\n      selections,\n      selected,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/select/YSelect.scss

@@ -26,6 +26,7 @@
     height: 100%;
     width: 100%;
     padding: 8px 10px;
+    contain: content;
   }
 
   .y-input__display {

package/lib/components/table/YTable.mjs

@@ -33,6 +33,10 @@ export const YTable = defineComponent({
       resizeObservedRef,
       contentRect
     } = useResizeObserver();
+    const {
+      resizeObservedRef: wrapperRef,
+      contentRect: wrapperRect
+    } = useResizeObserver();
     const {
       resizeObservedRef: tableRef,
       contentRect: tableRect
@@ -51,13 +55,14 @@ export const YTable = defineComponent({
         }],
         "style": {
           '--y-table-container-width': toStyleSizeValue(contentRect.value?.width),
-          '--y-table-wrapper-width': toStyleSizeValue(tableRect.value?.width)
+          '--y-table-wrapper-width': toStyleSizeValue(wrapperRect.value?.width)
         }
       }, {
         default: () => [slots.top?.(), slots.default ? _createVNode("div", {
-          "class": ['y-table__container'],
-          "ref": resizeObservedRef
+          "ref": resizeObservedRef,
+          "class": ['y-table__container']
         }, [slots.leading?.(), _createVNode("div", {
+          "ref": wrapperRef,
           "class": ['y-table__wrapper'],
           "style": {
             height: toStyleSizeValue(containerHeight)

package/lib/components/table/YTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTable.mjs","names":["defineComponent","provide","useRender","useResizeObserver","toStyleSizeValue","propsFactory","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","YTable","name","props","setup","_ref","slots","resizeObservedRef","contentRect","tableRef","tableRect","containerRect","ElTag","containerHeight","value","_createVNode","width","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, defineComponent, provide } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YTable.scss';\n\nexport const pressYTableProps = propsFactory(\n  {\n    tag: {\n      type: String as PropType<string>,\n      default: 'div',\n    },\n    fixedHead: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: [Number, String] as PropType<number | string>,\n    },\n    flexHeight: {\n      type: Boolean as PropType<boolean>,\n    },\n  },\n  'YTable',\n);\n\nexport const YTable = defineComponent({\n  name: 'YTable',\n  props: {\n    ...pressYTableProps(),\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef, contentRect } = useResizeObserver();\n    const { resizeObservedRef: tableRef, contentRect: tableRect } =\n      useResizeObserver();\n    provide('YTable', { containerRect: contentRect });\n    useRender(() => {\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n      const containerHeight = props.flexHeight\n        ? contentRect.value?.height ?? props.height\n        : props.height;\n      return (\n        <ElTag\n          class={[\n            'y-table',\n            {\n              'y-table--fixed-head': props.fixedHead,\n              'y-table--fixed-height': props.flexHeight || props.height,\n              'y-table--flex-height': props.flexHeight,\n            },\n          ]}\n          style={{\n            '--y-table-container-width': toStyleSizeValue(\n              contentRect.value?.width,\n            ),\n            '--y-table-wrapper-width': toStyleSizeValue(tableRect.value?.width),\n          }}\n        >\n          {slots.top?.()}\n          {slots.default ? (\n            <div class={['y-table__container']} ref={resizeObservedRef}>\n              {slots.leading?.()}\n              <div\n                class={['y-table__wrapper']}\n                style={{\n                  height: toStyleSizeValue(containerHeight),\n                }}\n              >\n                <table ref={tableRef}>{slots.default()}</table>\n              </div>\n              {slots.trailing?.()}\n            </div>\n          ) : (\n            slots.container?.(resizeObservedRef, contentRect)\n          )}\n          {slots.bottom?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,OAAO,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,YAAY;AAErB;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,YAAY,CAC1C;EACEE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI;EACR,CAAC;EACDC,MAAM,EAAE;IACNL,IAAI,EAAE,CAACM,MAAM,EAAEL,MAAM;EACvB,CAAC;EACDM,UAAU,EAAE;IACVP,IAAI,EAAEI;EACR;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMI,MAAM,GAAGhB,eAAe,CAAC;EACpCiB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGZ,gBAAgB,CAAC;EACtB,CAAC;EACDa,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB;MAAEC;IAAY,CAAC,GAAGpB,iBAAiB,CAAC,CAAC;IAC9D,MAAM;MAAEmB,iBAAiB,EAAEE,QAAQ;MAAED,WAAW,EAAEE;IAAU,CAAC,GAC3DtB,iBAAiB,CAAC,CAAC;IACrBF,OAAO,CAAC,QAAQ,EAAE;MAAEyB,aAAa,EAAEH;IAAY,CAAC,CAAC;IACjDrB,SAAS,CAAC,MAAM;MACd,MAAMyB,KAAK,GAAIT,KAAK,CAACX,GAAG,IAAoC,KAAK;MACjE,MAAMqB,eAAe,GAAGV,KAAK,CAACH,UAAU,GACpCQ,WAAW,CAACM,KAAK,EAAEhB,MAAM,IAAIK,KAAK,CAACL,MAAM,GACzCK,KAAK,CAACL,MAAM;MAChB,OAAAiB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAET,KAAK,CAACP,SAAS;UACtC,uBAAuB,EAAEO,KAAK,CAACH,UAAU,IAAIG,KAAK,CAACL,MAAM;UACzD,sBAAsB,EAAEK,KAAK,CAACH;QAChC,CAAC,CACF;QAAA,SACM;UACL,2BAA2B,EAAEX,gBAAgB,CAC3CmB,WAAW,CAACM,KAAK,EAAEE,KACrB,CAAC;UACD,yBAAyB,EAAE3B,gBAAgB,CAACqB,SAAS,CAACI,KAAK,EAAEE,KAAK;QACpE;MAAC;QAAArB,OAAA,EAAAA,CAAA,MAEAW,KAAK,CAACW,GAAG,GAAG,CAAC,EACbX,KAAK,CAACX,OAAO,GAAAoB,YAAA;UAAA,SACA,CAAC,oBAAoB,CAAC;UAAA,OAAOR;QAAiB,IACvDD,KAAK,CAACY,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,SAET,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLjB,MAAM,EAAET,gBAAgB,CAACwB,eAAe;UAC1C;QAAC,IAAAE,YAAA;UAAA,OAEWN;QAAQ,IAAGH,KAAK,CAACX,OAAO,CAAC,CAAC,MAEvCW,KAAK,CAACa,QAAQ,GAAG,CAAC,KAGrBb,KAAK,CAACc,SAAS,GAAGb,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACe,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTable.mjs","names":["defineComponent","provide","useRender","useResizeObserver","toStyleSizeValue","propsFactory","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","YTable","name","props","setup","_ref","slots","resizeObservedRef","contentRect","wrapperRef","wrapperRect","tableRef","tableRect","containerRect","ElTag","containerHeight","value","_createVNode","width","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, defineComponent, provide } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YTable.scss';\n\nexport const pressYTableProps = propsFactory(\n  {\n    tag: {\n      type: String as PropType<string>,\n      default: 'div',\n    },\n    fixedHead: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: [Number, String] as PropType<number | string>,\n    },\n    flexHeight: {\n      type: Boolean as PropType<boolean>,\n    },\n  },\n  'YTable',\n);\n\nexport const YTable = defineComponent({\n  name: 'YTable',\n  props: {\n    ...pressYTableProps(),\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef, contentRect } = useResizeObserver();\n    const { resizeObservedRef: wrapperRef, contentRect: wrapperRect } =\n      useResizeObserver();\n    const { resizeObservedRef: tableRef, contentRect: tableRect } =\n      useResizeObserver();\n    provide('YTable', { containerRect: contentRect });\n    useRender(() => {\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n      const containerHeight = props.flexHeight\n        ? contentRect.value?.height ?? props.height\n        : props.height;\n      return (\n        <ElTag\n          class={[\n            'y-table',\n            {\n              'y-table--fixed-head': props.fixedHead,\n              'y-table--fixed-height': props.flexHeight || props.height,\n              'y-table--flex-height': props.flexHeight,\n            },\n          ]}\n          style={{\n            '--y-table-container-width': toStyleSizeValue(\n              contentRect.value?.width,\n            ),\n            '--y-table-wrapper-width': toStyleSizeValue(\n              wrapperRect.value?.width,\n            ),\n          }}\n        >\n          {slots.top?.()}\n          {slots.default ? (\n            <div ref={resizeObservedRef} class={['y-table__container']}>\n              {slots.leading?.()}\n              <div\n                ref={wrapperRef}\n                class={['y-table__wrapper']}\n                style={{\n                  height: toStyleSizeValue(containerHeight),\n                }}\n              >\n                <table ref={tableRef}>{slots.default()}</table>\n              </div>\n              {slots.trailing?.()}\n            </div>\n          ) : (\n            slots.container?.(resizeObservedRef, contentRect)\n          )}\n          {slots.bottom?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,OAAO,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,YAAY;AAErB;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,YAAY,CAC1C;EACEE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI;EACR,CAAC;EACDC,MAAM,EAAE;IACNL,IAAI,EAAE,CAACM,MAAM,EAAEL,MAAM;EACvB,CAAC;EACDM,UAAU,EAAE;IACVP,IAAI,EAAEI;EACR;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMI,MAAM,GAAGhB,eAAe,CAAC;EACpCiB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGZ,gBAAgB,CAAC;EACtB,CAAC;EACDa,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB;MAAEC;IAAY,CAAC,GAAGpB,iBAAiB,CAAC,CAAC;IAC9D,MAAM;MAAEmB,iBAAiB,EAAEE,UAAU;MAAED,WAAW,EAAEE;IAAY,CAAC,GAC/DtB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEmB,iBAAiB,EAAEI,QAAQ;MAAEH,WAAW,EAAEI;IAAU,CAAC,GAC3DxB,iBAAiB,CAAC,CAAC;IACrBF,OAAO,CAAC,QAAQ,EAAE;MAAE2B,aAAa,EAAEL;IAAY,CAAC,CAAC;IACjDrB,SAAS,CAAC,MAAM;MACd,MAAM2B,KAAK,GAAIX,KAAK,CAACX,GAAG,IAAoC,KAAK;MACjE,MAAMuB,eAAe,GAAGZ,KAAK,CAACH,UAAU,GACpCQ,WAAW,CAACQ,KAAK,EAAElB,MAAM,IAAIK,KAAK,CAACL,MAAM,GACzCK,KAAK,CAACL,MAAM;MAChB,OAAAmB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEX,KAAK,CAACP,SAAS;UACtC,uBAAuB,EAAEO,KAAK,CAACH,UAAU,IAAIG,KAAK,CAACL,MAAM;UACzD,sBAAsB,EAAEK,KAAK,CAACH;QAChC,CAAC,CACF;QAAA,SACM;UACL,2BAA2B,EAAEX,gBAAgB,CAC3CmB,WAAW,CAACQ,KAAK,EAAEE,KACrB,CAAC;UACD,yBAAyB,EAAE7B,gBAAgB,CACzCqB,WAAW,CAACM,KAAK,EAAEE,KACrB;QACF;MAAC;QAAAvB,OAAA,EAAAA,CAAA,MAEAW,KAAK,CAACa,GAAG,GAAG,CAAC,EACbb,KAAK,CAACX,OAAO,GAAAsB,YAAA;UAAA,OACFV,iBAAiB;UAAA,SAAS,CAAC,oBAAoB;QAAC,IACvDD,KAAK,CAACc,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,OAEXR,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLX,MAAM,EAAET,gBAAgB,CAAC0B,eAAe;UAC1C;QAAC,IAAAE,YAAA;UAAA,OAEWN;QAAQ,IAAGL,KAAK,CAACX,OAAO,CAAC,CAAC,MAEvCW,KAAK,CAACe,QAAQ,GAAG,CAAC,KAGrBf,KAAK,CAACgB,SAAS,GAAGf,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACiB,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YTable.scss

@@ -20,6 +20,7 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
   &--flex-height > &__container {
     flex: 1 1;
     min-height: 0;
+    position: relative;
   }
 
   &__wrapper > table {

package/lib/components/table/composibles/pagination.mjs

@@ -14,7 +14,7 @@ export const pressDataTablePaginationProps = propsFactory({
   }
 }, 'YDataTable--pagination');
 export function createPagination(props) {
-  const page = useModelDuplex(props, 'page', undefined, value => +(value ?? 0));
+  const page = useModelDuplex(props, 'page', undefined, value => +(value ?? 1));
   const pageSize = useModelDuplex(props, 'pageSize', undefined, value => +(value ?? 10));
   return {
     page,

package/lib/components/table/composibles/pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.mjs","names":["computed","inject","provide","watchEffect","useModelDuplex","clamp","propsFactory","Y_DATA_TABLE_PAGINATION_KEY","Symbol","for","pressDataTablePaginationProps","page","type","Number","String","default","pageSize","createPagination","props","undefined","value","providePagination","options","total","startIndex","endIndex","Math","min","pageLength","ceil","setPageSize","nextPage","prevPage","setPage","data","usePagination","Error","description","usePaginatedItems","items","paginatedItems","slice"],"sources":["../../../../src/components/table/composibles/pagination.ts"],"sourcesContent":["import type { InjectionKey, PropType, Ref } from 'vue';\nimport { computed, inject, provide, watchEffect } from 'vue';\n\nimport { useModelDuplex } from '../../../composables/communication';\nimport { clamp } from '../../../util/common';\nimport { propsFactory } from '../../../util/vue-component';\nimport { DataTableProvidePaginationData } from \"../types\";\n\nexport const Y_DATA_TABLE_PAGINATION_KEY: InjectionKey<{\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  startIndex: Ref<number>;\n  endIndex: Ref<number>;\n  pageLength: Ref<number>;\n  total: Ref<number>;\n  prevPage: () => void;\n  nextPage: () => void;\n  setPage: (page: number) => void;\n  setPageSize: (size: number) => void;\n}> = Symbol.for('yuyeon.data-table.pagination');\n\nexport const pressDataTablePaginationProps = propsFactory(\n  {\n    page: {\n      type: [Number, String] as PropType<number | string>,\n      default: 1,\n    },\n    pageSize: {\n      type: [Number, String] as PropType<number | string>,\n      default: 10,\n    },\n  },\n  'YDataTable--pagination',\n);\n\ntype PaginationProps = {\n  page: number | string;\n  'onUpdate:page': ((v: any) => void) | undefined;\n  pageSize: number | string;\n  'onUpdate:pageSize': ((v: any) => void) | undefined;\n  total?: number | string;\n};\n\nexport function createPagination(props: PaginationProps) {\n  const page = useModelDuplex(\n    props,\n    'page',\n    undefined,\n    (value) => +(value ?? 0),\n  );\n  const pageSize = useModelDuplex(\n    props,\n    'pageSize',\n    undefined,\n    (value) => +(value ?? 10),\n  );\n  return { page, pageSize };\n}\n\nexport function providePagination(options: {\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  total: Ref<number>;\n}) {\n  const { page, pageSize, total } = options;\n  const startIndex = computed(() => {\n    if (pageSize.value === -1) return 0;\n\n    return pageSize.value * (page.value - 1);\n  });\n  const endIndex = computed(() => {\n    if (pageSize.value === -1) return total.value;\n\n    return Math.min(total.value, startIndex.value + pageSize.value);\n  });\n\n  const pageLength = computed(() => {\n    if (pageSize.value === -1 || total.value === 0) return 1;\n\n    return Math.ceil(total.value / pageSize.value);\n  });\n\n  watchEffect(() => {\n    if (page.value > pageLength.value) {\n      page.value = pageLength.value;\n    }\n  });\n\n  function setPageSize(value: number) {\n    pageSize.value = value;\n    page.value = 1;\n  }\n\n  function nextPage() {\n    page.value = clamp(page.value + 1, 1, pageLength.value);\n  }\n\n  function prevPage() {\n    page.value = clamp(page.value - 1, 1, pageLength.value);\n  }\n\n  function setPage(value: number) {\n    page.value = clamp(value, 1, pageLength.value);\n  }\n\n  const data: DataTableProvidePaginationData = {\n    page,\n    pageSize,\n    startIndex,\n    endIndex,\n    pageLength,\n    total,\n    nextPage,\n    prevPage,\n    setPage,\n    setPageSize,\n  };\n\n  provide(Y_DATA_TABLE_PAGINATION_KEY, data);\n\n  return data;\n}\n\nexport function usePagination() {\n  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);\n  if (!data) {\n    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);\n  }\n  return data;\n}\n\nexport function usePaginatedItems <T> (options: {\n  items: Ref<readonly (T)[]>\n  startIndex: Ref<number>\n  endIndex: Ref<number>\n  pageSize: Ref<number>\n}) {\n  const { items, startIndex, endIndex, pageSize } = options\n  const paginatedItems = computed(() => {\n    if (pageSize.value <= 0) return items.value\n\n    return items.value.slice(startIndex.value, endIndex.value)\n  })\n\n  return { paginatedItems }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pagination.mjs","names":["computed","inject","provide","watchEffect","useModelDuplex","clamp","propsFactory","Y_DATA_TABLE_PAGINATION_KEY","Symbol","for","pressDataTablePaginationProps","page","type","Number","String","default","pageSize","createPagination","props","undefined","value","providePagination","options","total","startIndex","endIndex","Math","min","pageLength","ceil","setPageSize","nextPage","prevPage","setPage","data","usePagination","Error","description","usePaginatedItems","items","paginatedItems","slice"],"sources":["../../../../src/components/table/composibles/pagination.ts"],"sourcesContent":["import type { InjectionKey, PropType, Ref } from 'vue';\nimport { computed, inject, provide, watchEffect } from 'vue';\n\nimport { useModelDuplex } from '../../../composables/communication';\nimport { clamp } from '../../../util/common';\nimport { propsFactory } from '../../../util/vue-component';\nimport { DataTableProvidePaginationData } from \"../types\";\n\nexport const Y_DATA_TABLE_PAGINATION_KEY: InjectionKey<{\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  startIndex: Ref<number>;\n  endIndex: Ref<number>;\n  pageLength: Ref<number>;\n  total: Ref<number>;\n  prevPage: () => void;\n  nextPage: () => void;\n  setPage: (page: number) => void;\n  setPageSize: (size: number) => void;\n}> = Symbol.for('yuyeon.data-table.pagination');\n\nexport const pressDataTablePaginationProps = propsFactory(\n  {\n    page: {\n      type: [Number, String] as PropType<number | string>,\n      default: 1,\n    },\n    pageSize: {\n      type: [Number, String] as PropType<number | string>,\n      default: 10,\n    },\n  },\n  'YDataTable--pagination',\n);\n\ntype PaginationProps = {\n  page: number | string;\n  'onUpdate:page': ((v: any) => void) | undefined;\n  pageSize: number | string;\n  'onUpdate:pageSize': ((v: any) => void) | undefined;\n  total?: number | string;\n};\n\nexport function createPagination(props: PaginationProps) {\n  const page = useModelDuplex(\n    props,\n    'page',\n    undefined,\n    (value) => +(value ?? 1),\n  );\n  const pageSize = useModelDuplex(\n    props,\n    'pageSize',\n    undefined,\n    (value) => +(value ?? 10),\n  );\n  return { page, pageSize };\n}\n\nexport function providePagination(options: {\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  total: Ref<number>;\n}) {\n  const { page, pageSize, total } = options;\n  const startIndex = computed(() => {\n    if (pageSize.value === -1) return 0;\n\n    return pageSize.value * (page.value - 1);\n  });\n  const endIndex = computed(() => {\n    if (pageSize.value === -1) return total.value;\n\n    return Math.min(total.value, startIndex.value + pageSize.value);\n  });\n\n  const pageLength = computed(() => {\n    if (pageSize.value === -1 || total.value === 0) return 1;\n\n    return Math.ceil(total.value / pageSize.value);\n  });\n\n  watchEffect(() => {\n    if (page.value > pageLength.value) {\n      page.value = pageLength.value;\n    }\n  });\n\n  function setPageSize(value: number) {\n    pageSize.value = value;\n    page.value = 1;\n  }\n\n  function nextPage() {\n    page.value = clamp(page.value + 1, 1, pageLength.value);\n  }\n\n  function prevPage() {\n    page.value = clamp(page.value - 1, 1, pageLength.value);\n  }\n\n  function setPage(value: number) {\n    page.value = clamp(value, 1, pageLength.value);\n  }\n\n  const data: DataTableProvidePaginationData = {\n    page,\n    pageSize,\n    startIndex,\n    endIndex,\n    pageLength,\n    total,\n    nextPage,\n    prevPage,\n    setPage,\n    setPageSize,\n  };\n\n  provide(Y_DATA_TABLE_PAGINATION_KEY, data);\n\n  return data;\n}\n\nexport function usePagination() {\n  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);\n  if (!data) {\n    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);\n  }\n  return data;\n}\n\nexport function usePaginatedItems <T> (options: {\n  items: Ref<readonly (T)[]>\n  startIndex: Ref<number>\n  endIndex: Ref<number>\n  pageSize: Ref<number>\n}) {\n  const { items, startIndex, endIndex, pageSize } = options\n  const paginatedItems = computed(() => {\n    if (pageSize.value <= 0) return items.value\n\n    return items.value.slice(startIndex.value, endIndex.value)\n  })\n\n  return { paginatedItems }\n}\n"],"mappings":"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"}

package/lib/components/tooltip/YTooltip.mjs

@@ -1,52 +1,38 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { computed, defineComponent, mergeProps, nextTick, ref, watch, watchEffect } from 'vue';
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { computed, defineComponent, nextTick, ref, watch, watchEffect } from 'vue';
 import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
 import { polyTransitionPropOptions } from "../../composables/transition.mjs";
-import { toKebabCase } from "../../util/string.mjs";
-import { bindClasses } from "../../util/vue-component.mjs";
-import { YLayer } from "../layer/index.mjs";
+import { omit } from "../../util/index.mjs";
+import { bindClasses, chooseProps } from "../../util/vue-component.mjs";
+import { YLayer, pressYLayerProps } from "../layer/index.mjs";
+import { useDelay } from "../layer/active-delay.mjs";
 import { YPlate } from "../plate/index.mjs";
 import "./YTooltip.scss";
 const NAME = 'YTooltip';
-const KEBAB_NAME = toKebabCase(NAME);
 const YTooltipPropOptions = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
   tooltipClasses: {
     type: [Array, String, Object]
   },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  position: {
-    type: String,
-    default: 'default'
-  },
-  align: {
-    type: String,
-    default: 'center'
-  },
-  openOnHover: {
-    type: Boolean,
-    default: true
-  },
   preventClip: {
     type: Boolean,
     default: true
   }
 };
 
-/**
- * #  Component
+/**
+ * #  Component
  */
 export const YTooltip = defineComponent({
   name: NAME,
   props: {
     ...YTooltipPropOptions,
+    ...pressYLayerProps({
+      coordinateStrategy: 'levitation',
+      openOnHover: true,
+      align: 'center',
+      offset: 8
+    }),
     transition: {
       ...polyTransitionPropOptions.transition,
       default: 'fade'
@@ -59,7 +45,7 @@ export const YTooltip = defineComponent({
       emit,
       expose
     } = _ref;
-    const el$ = ref();
+    const layer$ = ref();
     const base$ = ref();
     const baseSlot = ref();
     const baseEl = ref();
@@ -80,44 +66,7 @@ export const YTooltip = defineComponent({
         if (!(v && props.disabled)) model.value = v;
       }
     });
-    const coordinatesStyles = computed(() => {
-      const $base = baseEl.value;
-      if ($base) {
-        const {
-          position,
-          align
-        } = props;
-        const $content = contentEl.value;
-        const rect = $base.getBoundingClientRect();
-        let top = rect.top;
-        let left = rect.left + rect.width / 2;
-        if ($content) {
-          if (position === 'top' || position === 'bottom') {
-            if (position === 'top') {
-              top -= $content.clientHeight;
-              top -= 8; // Offset
-            }
-
-            if (position === 'bottom') {
-              top += rect.height;
-              top += 8; // Offset
-            }
-
-            if (align === 'center') {
-              left -= $content.clientWidth / 2;
-            } else if (align === 'end') {
-              left = rect.right;
-              left -= $content.clientWidth;
-            }
-          } else if (position === 'left' || position === 'right') {}
-        }
-        return {
-          top: `${top}px`,
-          left: `${left}px`
-        };
-      }
-      return {};
-    });
+    const hovered = computed(() => !!layer$.value?.hovered);
     const baseFromSlotEl = computed(() => {
       return baseSlot.value?.[0]?.el;
     });
@@ -134,21 +83,36 @@ export const YTooltip = defineComponent({
     watch(active, neo => {
       if (neo) {
         nextTick(() => {
-          const $content = el$.value?.content$;
+          const $content = layer$.value?.content$;
           contentEl.value = $content;
         });
       }
     });
+    const {
+      startOpenDelay,
+      startCloseDelay
+    } = useDelay(props, changeActive => {
+      if (!changeActive && props.openOnHover && !hovered.value) {
+        active.value = false;
+      } else if (changeActive) {
+        active.value = true;
+      }
+    });
     function onMouseenter(e) {
       if (props.openOnHover) {
-        active.value = true;
+        startOpenDelay();
       }
     }
     function onMouseleave(e) {
       if (props.openOnHover) {
-        active.value = false;
+        startCloseDelay();
       }
     }
+    watch(hovered, value => {
+      if (!value) {
+        startCloseDelay();
+      }
+    });
     function bindHover(el) {
       el.addEventListener('mouseenter', onMouseenter);
       el.addEventListener('mouseleave', onMouseleave);
@@ -157,7 +121,7 @@ export const YTooltip = defineComponent({
       el.removeEventListener('mouseenter', onMouseenter);
       el.removeEventListener('mouseleave', onMouseleave);
     }
-    watch(baseEl, (neo, old) => {
+    watch(() => layer$.value?.baseEl, (neo, old) => {
       if (neo) {
         bindHover(neo);
       } else if (old) {
@@ -165,25 +129,15 @@ export const YTooltip = defineComponent({
       }
     });
     useRender(() => {
-      const slotBase = slots.base?.({
-        active: active.value,
-        props: mergeProps({
-          ref: base$
-        })
-      });
-      baseSlot.value = slotBase;
-      return _createVNode(_Fragment, null, [slotBase, _createVNode(YLayer, {
-        "modelValue": active.value,
-        "onUpdate:modelValue": $event => active.value = $event,
-        "ref": el$,
+      return _createVNode(_Fragment, null, [_createVNode(YLayer, _mergeProps({
+        "ref": layer$
+      }, omit(chooseProps(props, YLayer.props), ['scrim']), {
         "classes": classes.value,
         "scrim": false,
-        "disabled": props.disabled,
-        "content-styles": {
-          ...coordinatesStyles.value
-        },
-        "transition": props.transition
-      }, {
+        "transition": props.transition,
+        "modelValue": active.value,
+        "onUpdate:modelValue": $event => active.value = $event
+      }), {
         default: function () {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
@@ -191,14 +145,19 @@ export const YTooltip = defineComponent({
           return _createVNode(_Fragment, null, [_createVNode(YPlate, null, null), _createVNode("div", {
             "class": "y-tooltip__content"
           }, [slots.default?.(...args) ?? ''])]);
+        },
+        base: function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+          return slots.base?.(...args);
         }
       })]);
     });
     return {
       base$,
-      el$,
+      el$: layer$,
       baseEl,
-      coordinatesStyles,
       baseSlot,
       active
     };

package/lib/components/tooltip/YTooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTooltip.mjs","names":["computed","defineComponent","mergeProps","nextTick","ref","watch","watchEffect","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","YLayer","YPlate","NAME","KEBAB_NAME","YTooltipPropOptions","modelValue","type","Boolean","default","tooltipClasses","Array","String","Object","disabled","position","align","openOnHover","preventClip","YTooltip","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","base$","baseSlot","baseEl","contentEl","classes","boundClasses","model","active","get","value","set","v","coordinatesStyles","$base","$content","rect","getBoundingClientRect","top","left","width","clientHeight","height","clientWidth","right","baseFromSlotEl","el","nodeType","base","$el","neo","content$","onMouseenter","e","onMouseleave","bindHover","addEventListener","unbindHover","removeEventListener","old","slotBase","_createVNode","_Fragment","$event","_len","arguments","length","args","_key"],"sources":["../../../src/components/tooltip/YTooltip.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  mergeProps,\r\n  nextTick,\r\n  ref,\r\n  watch,\r\n  watchEffect,\r\n} from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { polyTransitionPropOptions } from '../../composables/transition';\r\nimport { toKebabCase } from '../../util/string';\r\nimport { bindClasses } from '../../util/vue-component';\r\nimport { YLayer } from '../layer';\r\nimport { YPlate } from '../plate';\r\n\r\nimport './YTooltip.scss';\r\n\r\nconst NAME = 'YTooltip';\r\nconst KEBAB_NAME = toKebabCase(NAME);\r\n\r\nconst YTooltipPropOptions = {\r\n  modelValue: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: false,\r\n  },\r\n  tooltipClasses: {\r\n    type: [Array, String, Object] as PropType<\r\n      string[] | string | Record<string, any>\r\n    >,\r\n  },\r\n  disabled: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: false,\r\n  },\r\n  position: {\r\n    type: String as PropType<'default' | 'top' | 'bottom' | 'left' | 'right'>,\r\n    default: 'default',\r\n  },\r\n  align: {\r\n    type: String as PropType<'center' | 'start' | 'end'>,\r\n    default: 'center',\r\n  },\r\n  openOnHover: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: true,\r\n  },\r\n  preventClip: {\r\n    type: Boolean as PropType<boolean>,\r\n    default: true,\r\n  },\r\n};\r\n\r\n/**\r\n * #  Component\r\n */\r\nexport const YTooltip = defineComponent({\r\n  name: NAME,\r\n  props: {\r\n    ...YTooltipPropOptions,\r\n    transition: {\r\n      ...polyTransitionPropOptions.transition,\r\n      default: 'fade',\r\n    },\r\n  },\r\n  emits: ['update:modelValue'],\r\n  setup(props, { slots, emit, expose }) {\r\n    const el$ = ref<typeof YLayer>();\r\n    const base$ = ref();\r\n    const baseSlot = ref();\r\n    const baseEl = ref<HTMLElement>();\r\n    const contentEl = ref<HTMLElement>();\r\n\r\n    const classes = computed(() => {\r\n      const boundClasses = bindClasses(props.tooltipClasses);\r\n      return {\r\n        ...boundClasses,\r\n        'y-tooltip': true,\r\n      };\r\n    });\r\n\r\n    const model = useModelDuplex(props);\r\n\r\n    const active = computed({\r\n      get: (): boolean => {\r\n        return !!model.value;\r\n      },\r\n      set: (v: boolean) => {\r\n        if (!(v && props.disabled)) model.value = v;\r\n      },\r\n    });\r\n\r\n    const coordinatesStyles = computed<CSSProperties>(() => {\r\n      const $base = baseEl.value;\r\n      if ($base) {\r\n        const { position, align } = props;\r\n        const $content = contentEl.value;\r\n        const rect = $base.getBoundingClientRect();\r\n\r\n        let top = rect.top;\r\n        let left = rect.left + rect.width / 2;\r\n\r\n        if ($content) {\r\n          if (position === 'top' || position === 'bottom') {\r\n            if (position === 'top') {\r\n              top -= $content.clientHeight;\r\n              top -= 8; // Offset\r\n            }\r\n\r\n            if (position === 'bottom') {\r\n              top += rect.height;\r\n              top += 8; // Offset\r\n            }\r\n\r\n            if (align === 'center') {\r\n              left -= $content.clientWidth / 2;\r\n            } else if (align === 'end') {\r\n              left = rect.right;\r\n              left -= $content.clientWidth;\r\n            }\r\n          } else if (position === 'left' || position === 'right') {\r\n\r\n          }\r\n        }\r\n\r\n        return {\r\n          top: `${top}px`,\r\n          left: `${left}px`,\r\n        };\r\n      }\r\n      return {};\r\n    });\r\n\r\n    const baseFromSlotEl = computed(() => {\r\n      return baseSlot.value?.[0]?.el;\r\n    });\r\n\r\n    watchEffect(() => {\r\n      if (!base$.value) {\r\n        if (baseFromSlotEl.value?.nodeType !== 3) {\r\n          baseEl.value = baseFromSlotEl.value;\r\n        }\r\n        return;\r\n      }\r\n      const base = base$.value;\r\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\r\n    });\r\n\r\n    watch(active, (neo) => {\r\n      if (neo) {\r\n        nextTick(() => {\r\n          const $content = el$.value?.content$;\r\n          contentEl.value = $content;\r\n        });\r\n      }\r\n    });\r\n\r\n    function onMouseenter(e: MouseEvent) {\r\n      if (props.openOnHover) {\r\n        active.value = true;\r\n      }\r\n    }\r\n\r\n    function onMouseleave(e: MouseEvent) {\r\n      if (props.openOnHover) {\r\n        active.value = false;\r\n      }\r\n    }\r\n\r\n    function bindHover(el: HTMLElement) {\r\n      el.addEventListener('mouseenter', onMouseenter);\r\n      el.addEventListener('mouseleave', onMouseleave);\r\n    }\r\n\r\n    function unbindHover(el: HTMLElement) {\r\n      el.removeEventListener('mouseenter', onMouseenter);\r\n      el.removeEventListener('mouseleave', onMouseleave);\r\n    }\r\n\r\n    watch(baseEl, (neo, old) => {\r\n      if (neo) {\r\n        bindHover(neo);\r\n      } else if (old) {\r\n        unbindHover(old);\r\n      }\r\n    });\r\n\r\n    useRender(() => {\r\n      const slotBase = slots.base?.({\r\n        active: active.value,\r\n        props: mergeProps({\r\n          ref: base$,\r\n        }),\r\n      });\r\n      baseSlot.value = slotBase;\r\n      return (\r\n        <>\r\n          {slotBase}\r\n          <YLayer\r\n            v-model={active.value}\r\n            ref={el$}\r\n            classes={classes.value}\r\n            scrim={false}\r\n            disabled={props.disabled}\r\n            content-styles={{ ...coordinatesStyles.value }}\r\n            transition={props.transition}\r\n          >\r\n            {{\r\n              default: (...args: any) => {\r\n                return (\r\n                  <>\r\n                    <YPlate></YPlate>\r\n                    <div class=\"y-tooltip__content\">\r\n                      {slots.default?.(...args) ?? ''}\r\n                    </div>\r\n                  </>\r\n                );\r\n              },\r\n            }}\r\n          </YLayer>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      base$,\r\n      el$,\r\n      baseEl,\r\n      coordinatesStyles,\r\n      baseSlot,\r\n      active,\r\n    };\r\n  },\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"YTooltip.mjs","names":["computed","defineComponent","nextTick","ref","watch","watchEffect","useModelDuplex","useRender","polyTransitionPropOptions","omit","bindClasses","chooseProps","YLayer","pressYLayerProps","useDelay","YPlate","NAME","YTooltipPropOptions","tooltipClasses","type","Array","String","Object","preventClip","Boolean","default","YTooltip","name","props","coordinateStrategy","openOnHover","align","offset","transition","emits","setup","_ref","slots","emit","expose","layer$","base$","baseSlot","baseEl","contentEl","classes","boundClasses","model","active","get","value","set","v","disabled","hovered","baseFromSlotEl","el","nodeType","base","$el","neo","$content","content$","startOpenDelay","startCloseDelay","changeActive","onMouseenter","e","onMouseleave","bindHover","addEventListener","unbindHover","removeEventListener","old","_createVNode","_Fragment","_mergeProps","$event","_len","arguments","length","args","_key","_len2","_key2","el$"],"sources":["../../../src/components/tooltip/YTooltip.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { omit } from '../../util';\nimport { bindClasses, chooseProps } from '../../util/vue-component';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useDelay } from '../layer/active-delay';\nimport { YPlate } from '../plate';\n\nimport './YTooltip.scss';\n\nconst NAME = 'YTooltip';\n\nconst YTooltipPropOptions = {\n  tooltipClasses: {\n    type: [Array, String, Object] as PropType<\n      string[] | string | Record<string, any>\n    >,\n  },\n  preventClip: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n};\n\n/**\n * #  Component\n */\nexport const YTooltip = defineComponent({\n  name: NAME,\n  props: {\n    ...YTooltipPropOptions,\n    ...pressYLayerProps({\n      coordinateStrategy: 'levitation',\n      openOnHover: true,\n      align: 'center',\n      offset: 8,\n    }),\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { slots, emit, expose }) {\n    const layer$ = ref<typeof YLayer>();\n    const base$ = ref();\n    const baseSlot = ref();\n    const baseEl = ref<HTMLElement>();\n    const contentEl = ref<HTMLElement>();\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.tooltipClasses);\n      return {\n        ...boundClasses,\n        'y-tooltip': true,\n      };\n    });\n\n    const model = useModelDuplex(props);\n\n    const active = computed({\n      get: (): boolean => {\n        return !!model.value;\n      },\n      set: (v: boolean) => {\n        if (!(v && props.disabled)) model.value = v;\n      },\n    });\n\n    const hovered = computed(() => !!layer$.value?.hovered);\n\n    const baseFromSlotEl = computed(() => {\n      return baseSlot.value?.[0]?.el;\n    });\n\n    watchEffect(() => {\n      if (!base$.value) {\n        if (baseFromSlotEl.value?.nodeType !== 3) {\n          baseEl.value = baseFromSlotEl.value;\n        }\n        return;\n      }\n      const base = base$.value;\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\n    });\n\n    watch(active, (neo) => {\n      if (neo) {\n        nextTick(() => {\n          const $content = layer$.value?.content$;\n          contentEl.value = $content;\n        });\n      }\n    });\n\n    const { startOpenDelay, startCloseDelay } = useDelay(\n      props,\n      (changeActive) => {\n        if (!changeActive && props.openOnHover && !hovered.value) {\n          active.value = false;\n        } else if (changeActive) {\n          active.value = true;\n        }\n      },\n    );\n\n    function onMouseenter(e: MouseEvent) {\n      if (props.openOnHover) {\n        startOpenDelay();\n      }\n    }\n\n    function onMouseleave(e: MouseEvent) {\n      if (props.openOnHover) {\n        startCloseDelay();\n      }\n    }\n\n    watch(hovered, (value) => {\n      if (!value) {\n        startCloseDelay();\n      }\n    });\n\n    function bindHover(el: HTMLElement) {\n      el.addEventListener('mouseenter', onMouseenter);\n      el.addEventListener('mouseleave', onMouseleave);\n    }\n\n    function unbindHover(el: HTMLElement) {\n      el.removeEventListener('mouseenter', onMouseenter);\n      el.removeEventListener('mouseleave', onMouseleave);\n    }\n\n    watch(\n      () => layer$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          bindHover(neo);\n        } else if (old) {\n          unbindHover(old);\n        }\n      },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            ref={layer$}\n            {...omit(chooseProps(props, YLayer.props), ['scrim'])}\n            classes={classes.value}\n            scrim={false}\n            transition={props.transition}\n            v-model={active.value}\n          >\n            {{\n              default: (...args: any) => {\n                return (\n                  <>\n                    <YPlate></YPlate>\n                    <div class=\"y-tooltip__content\">\n                      {slots.default?.(...args) ?? ''}\n                    </div>\n                  </>\n                );\n              },\n              base: (...args: any[]) => slots.base?.(...args),\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      base$,\n      el$: layer$,\n      baseEl,\n      baseSlot,\n      active,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/util/dom.mjs

@@ -17,4 +17,7 @@ export function hasElementMouseEvent(mouseEvent, element, include) {
   elements.push(element);
   return !elements.some(el => el?.contains(mouseEvent.target));
 }
+export function isOverflow(el) {
+  return el.offsetWidth < el.scrollWidth;
+}
 //# sourceMappingURL=dom.mjs.map

package/lib/util/dom.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dom.mjs","names":["documentRoot","domNode","root","getRootNode","document","composed","hasElementMouseEvent","mouseEvent","element","include","ShadowRoot","host","target","elements","push","some","el","contains"],"sources":["../../src/util/dom.ts"],"sourcesContent":["export function documentRoot(domNode: Node): null | HTMLDocument | ShadowRoot {\r\n  const root = domNode.getRootNode();\r\n  if (root !== document && root.getRootNode({ composed: true }) !== document)\r\n    return null;\r\n  return root as HTMLDocument | ShadowRoot;\r\n}\r\n\r\nexport function hasElementMouseEvent(\r\n  mouseEvent: Event,\r\n  element: HTMLElement,\r\n  include?: HTMLElement[],\r\n): boolean {\r\n  if (!mouseEvent) {\r\n    return false;\r\n  }\r\n  const root = documentRoot(element);\r\n  if (\r\n    typeof ShadowRoot !== 'undefined' &&\r\n    root instanceof ShadowRoot &&\r\n    root.host === mouseEvent.target\r\n  ) {\r\n    return false;\r\n  }\r\n  const elements = include ?? [];\r\n  elements.push(element);\r\n  return !elements.some((el) => el?.contains(mouseEvent.target as Node));\r\n}\r\n"],"mappings":"AAAA,OAAO,SAASA,YAAYA,CAACC,OAAa,EAAoC;EAC5E,MAAMC,IAAI,GAAGD,OAAO,CAACE,WAAW,CAAC,CAAC;EAClC,IAAID,IAAI,KAAKE,QAAQ,IAAIF,IAAI,CAACC,WAAW,CAAC;IAAEE,QAAQ,EAAE;EAAK,CAAC,CAAC,KAAKD,QAAQ,EACxE,OAAO,IAAI;EACb,OAAOF,IAAI;AACb;AAEA,OAAO,SAASI,oBAAoBA,CAClCC,UAAiB,EACjBC,OAAoB,EACpBC,OAAuB,EACd;EACT,IAAI,CAACF,UAAU,EAAE;IACf,OAAO,KAAK;EACd;EACA,MAAML,IAAI,GAAGF,YAAY,CAACQ,OAAO,CAAC;EAClC,IACE,OAAOE,UAAU,KAAK,WAAW,IACjCR,IAAI,YAAYQ,UAAU,IAC1BR,IAAI,CAACS,IAAI,KAAKJ,UAAU,CAACK,MAAM,EAC/B;IACA,OAAO,KAAK;EACd;EACA,MAAMC,QAAQ,GAAGJ,OAAO,IAAI,EAAE;EAC9BI,QAAQ,CAACC,IAAI,CAACN,OAAO,CAAC;EACtB,OAAO,CAACK,QAAQ,CAACE,IAAI,CAAEC,EAAE,IAAKA,EAAE,EAAEC,QAAQ,CAACV,UAAU,CAACK,MAAc,CAAC,CAAC;AACxE"}
+{"version":3,"file":"dom.mjs","names":["documentRoot","domNode","root","getRootNode","document","composed","hasElementMouseEvent","mouseEvent","element","include","ShadowRoot","host","target","elements","push","some","el","contains","isOverflow","offsetWidth","scrollWidth"],"sources":["../../src/util/dom.ts"],"sourcesContent":["export function documentRoot(domNode: Node): null | HTMLDocument | ShadowRoot {\r\n  const root = domNode.getRootNode();\r\n  if (root !== document && root.getRootNode({ composed: true }) !== document)\r\n    return null;\r\n  return root as HTMLDocument | ShadowRoot;\r\n}\r\n\r\nexport function hasElementMouseEvent(\r\n  mouseEvent: Event,\r\n  element: HTMLElement,\r\n  include?: HTMLElement[],\r\n): boolean {\r\n  if (!mouseEvent) {\r\n    return false;\r\n  }\r\n  const root = documentRoot(element);\r\n  if (\r\n    typeof ShadowRoot !== 'undefined' &&\r\n    root instanceof ShadowRoot &&\r\n    root.host === mouseEvent.target\r\n  ) {\r\n    return false;\r\n  }\r\n  const elements = include ?? [];\r\n  elements.push(element);\r\n  return !elements.some((el) => el?.contains(mouseEvent.target as Node));\r\n}\r\n\r\nexport function isOverflow(el: HTMLElement) {\r\n  return el.offsetWidth < el.scrollWidth;\r\n}\r\n"],"mappings":"AAAA,OAAO,SAASA,YAAYA,CAACC,OAAa,EAAoC;EAC5E,MAAMC,IAAI,GAAGD,OAAO,CAACE,WAAW,CAAC,CAAC;EAClC,IAAID,IAAI,KAAKE,QAAQ,IAAIF,IAAI,CAACC,WAAW,CAAC;IAAEE,QAAQ,EAAE;EAAK,CAAC,CAAC,KAAKD,QAAQ,EACxE,OAAO,IAAI;EACb,OAAOF,IAAI;AACb;AAEA,OAAO,SAASI,oBAAoBA,CAClCC,UAAiB,EACjBC,OAAoB,EACpBC,OAAuB,EACd;EACT,IAAI,CAACF,UAAU,EAAE;IACf,OAAO,KAAK;EACd;EACA,MAAML,IAAI,GAAGF,YAAY,CAACQ,OAAO,CAAC;EAClC,IACE,OAAOE,UAAU,KAAK,WAAW,IACjCR,IAAI,YAAYQ,UAAU,IAC1BR,IAAI,CAACS,IAAI,KAAKJ,UAAU,CAACK,MAAM,EAC/B;IACA,OAAO,KAAK;EACd;EACA,MAAMC,QAAQ,GAAGJ,OAAO,IAAI,EAAE;EAC9BI,QAAQ,CAACC,IAAI,CAACN,OAAO,CAAC;EACtB,OAAO,CAACK,QAAQ,CAACE,IAAI,CAAEC,EAAE,IAAKA,EAAE,EAAEC,QAAQ,CAACV,UAAU,CAACK,MAAc,CAAC,CAAC;AACxE;AAEA,OAAO,SAASM,UAAUA,CAACF,EAAe,EAAE;EAC1C,OAAOA,EAAE,CAACG,WAAW,GAAGH,EAAE,CAACI,WAAW;AACxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.0.38-rc9",
+  "version": "0.0.39",
   "keywords": [
     "UI Library",
     "Vue"

package/types/components/dialog/YDialog.d.ts

@@ -116,6 +116,7 @@ export declare const YDialog: import("vue").DefineComponent<{
         onAfterUpdate: () => void;
         scrim$: import("vue").Ref<HTMLElement | undefined>;
         content$: import("vue").Ref<HTMLElement | undefined>;
+        base$: import("vue").Ref<any>;
         baseEl: import("vue").Ref<HTMLElement | undefined>;
         polyTransitionBindProps: import("vue").ComputedRef<{
             is: any;

package/types/components/divider/YDivider.d.ts

@@ -0,0 +1,15 @@
+import type { PropType } from 'vue';
+export declare const pressYDividerPropsOptions: <Defaults extends {
+    vertical?: unknown;
+} = {}>(defaults?: Defaults | undefined) => {
+    vertical: unknown extends Defaults["vertical"] ? PropType<boolean> : {
+        type: PropType<unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"]>;
+        default: unknown extends Defaults["vertical"] ? boolean : boolean | Defaults["vertical"];
+    };
+};
+export declare const YDivider: import("vue").DefineComponent<{
+    vertical: PropType<boolean>;
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    vertical: PropType<boolean>;
+}>>, {}, {}>;
+export type YDivider = InstanceType<typeof YDivider>;

package/types/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from './YDivider';

package/types/components/dropdown/YDropdown.d.ts

@@ -76,8 +76,8 @@ export declare const pressYDropdownPropsOptions: <Defaults extends {
         type: PropType<"end" | "start" | "center">;
         default: string;
     }, "default" | "type"> & {
-        type: PropType<unknown extends Defaults["align"] ? "end" | "start" | "center" : Defaults["align"] | NonNullable<"end" | "start" | "center">>;
-        default: unknown extends Defaults["align"] ? "end" | "start" | "center" : Defaults["align"] | NonNullable<"end" | "start" | "center">;
+        type: PropType<unknown extends Defaults["align"] ? "end" | "start" | "center" : NonNullable<"end" | "start" | "center"> | Defaults["align"]>;
+        default: unknown extends Defaults["align"] ? "end" | "start" | "center" : NonNullable<"end" | "start" | "center"> | Defaults["align"];
     };
     origin: unknown extends Defaults["origin"] ? {
         type: StringConstructor;
@@ -94,8 +94,8 @@ export declare const pressYDropdownPropsOptions: <Defaults extends {
     } : Omit<{
         type: (ArrayConstructor | StringConstructor | NumberConstructor)[];
     }, "default" | "type"> & {
-        type: PropType<unknown extends Defaults["offset"] ? string | number | unknown[] : Defaults["offset"] | NonNullable<string | number | unknown[]>>;
-        default: unknown extends Defaults["offset"] ? string | number | unknown[] : Defaults["offset"] | NonNullable<string | number | unknown[]>;
+        type: PropType<unknown extends Defaults["offset"] ? string | number | unknown[] : NonNullable<string | number | unknown[]> | Defaults["offset"]>;
+        default: unknown extends Defaults["offset"] ? string | number | unknown[] : NonNullable<string | number | unknown[]> | Defaults["offset"];
     };
     viewportMargin: unknown extends Defaults["viewportMargin"] ? {
         type: NumberConstructor;

package/types/components/field-input/YFieldInput.d.ts

@@ -68,12 +68,12 @@ export declare const pressYFieldInputPropsOptions: <Defaults extends {
         default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
     };
     modelValue: unknown extends Defaults["modelValue"] ? {
-        type: PropType<string | number>;
+        type: PropType<any>;
     } : Omit<{
-        type: PropType<string | number>;
+        type: PropType<any>;
     }, "default" | "type"> & {
-        type: PropType<unknown extends Defaults["modelValue"] ? string | number : NonNullable<string | number> | Defaults["modelValue"]>;
-        default: unknown extends Defaults["modelValue"] ? string | number : NonNullable<string | number> | Defaults["modelValue"];
+        type: PropType<unknown extends Defaults["modelValue"] ? any : any>;
+        default: unknown extends Defaults["modelValue"] ? any : any;
     };
     autoSelect: unknown extends Defaults["autoSelect"] ? {
         type: PropType<boolean>;
@@ -212,7 +212,7 @@ export declare const YFieldInput: import("vue").DefineComponent<{
     };
     label: PropType<string>;
     modelValue: {
-        type: PropType<string | number>;
+        type: PropType<any>;
     };
     autoSelect: {
         type: PropType<boolean>;
@@ -272,7 +272,7 @@ export declare const YFieldInput: import("vue").DefineComponent<{
     };
     label: PropType<string>;
     modelValue: {
-        type: PropType<string | number>;
+        type: PropType<any>;
     };
     autoSelect: {
         type: PropType<boolean>;