yuyeon 0.0.46 → 0.0.47-rc.10

package/lib/components/dialog/YDialog.mjs

@@ -18,6 +18,7 @@ export const pressYDialogPropsOptions = propsFactory({
     type: [Array, String, Object]
   },
   maximized: Boolean,
+  focusTrap: [Boolean, String, Object, Array],
   offset: {
     type: String
   },
@@ -60,8 +61,32 @@ export const YDialog = defineComponent({
       children
     } = useActiveStack(layer$, active, shallowRef(true));
     function onFocusin(e) {
+      if (props.focusTrap === false) {
+        return;
+      }
       const prevTarget = e.relatedTarget;
       const target = e.target;
+      const excludeTarget = props.focusTrap;
+      if (typeof excludeTarget === 'string' && document.querySelector(excludeTarget) == target) {
+        return;
+      }
+      if (typeof excludeTarget === 'object') {
+        if (Array.isArray(excludeTarget)) {
+          const excluded = excludeTarget.some(exclude => {
+            if (typeof exclude === 'string') {
+              return document.querySelector(exclude) == target;
+            }
+            if (typeof exclude === 'object') {
+              return exclude == target;
+            }
+          });
+          if (excluded) {
+            return;
+          }
+        } else if (excludeTarget == target) {
+          return;
+        }
+      }
       function testChildrenContains(layers) {
         return layers.some(layer => {
           return !layer.content$?.contains(target);

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","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","testChildrenContains","layers","some","layer","content$","contains","value","document","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    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      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\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: [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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"}

package/lib/components/dropdown/YDropdown.mjs

@@ -34,6 +34,7 @@ export const YDropdown = defineComponent({
   props: {
     ...pressYDropdownPropsOptions()
   },
+  slots: Object,
   emits: ['update:modelValue', 'click'],
   setup(props, _ref) {
     let {
@@ -80,7 +81,10 @@ export const YDropdown = defineComponent({
               return _createVNode(YListItem, {
                 "onClick": e => onClickItem(item)
               }, {
-                default: () => [text]
+                default: () => [slots.item ? slots.item({
+                  text,
+                  item
+                }) : text]
               });
             })]
           }) : _createVNode("div", {

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","emits","setup","_ref","slots","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 } 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  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                              {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","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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"}

package/lib/components/hover/YHover.mjs

@@ -0,0 +1,47 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent } from 'vue';
+import { useModelDuplex } from 'yuyeon/composables';
+import { useRender } from "../../composables/component.mjs";
+import { useDelay } from "../../composables/timing.mjs";
+import { propsFactory } from "../../util/index.mjs";
+export const pressYHoverPropsOptions = propsFactory({
+  disabled: Boolean,
+  modelValue: {
+    type: Boolean,
+    default: undefined
+  },
+  openDelay: {
+    type: Number,
+    default: 100
+  },
+  closeDelay: {
+    type: Number,
+    default: 100
+  }
+}, 'YHover');
+export const YHover = defineComponent({
+  name: 'YHover',
+  props: pressYHoverPropsOptions(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isHovering = useModelDuplex(props, 'modelValue');
+    const {
+      startOpenDelay,
+      startCloseDelay
+    } = useDelay(props, value => {
+      !props.disabled && (isHovering.value = value);
+    });
+    useRender(() => {
+      return _createVNode(_Fragment, null, [slots.default?.({
+        isHovering: isHovering.value,
+        props: {
+          onMouseenter: () => startOpenDelay(),
+          onMouseleave: () => startCloseDelay()
+        }
+      })]);
+    });
+  }
+});
+//# sourceMappingURL=YHover.mjs.map

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

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

package/lib/components/layer/YLayer.mjs

@@ -10,7 +10,7 @@ import { PolyTransition, polyTransitionPropOptions, usePolyTransition } from "..
 import { ComplementClick } from "../../directives/complement-click/index.mjs";
 import { bindClasses, propsFactory } from "../../util/vue-component.mjs";
 import "./YLayer.scss";
-import { useBase } from "./base.mjs";
+import { pressBasePropsOptions, useBase } from "./base.mjs";
 export const pressYLayerProps = propsFactory({
   modelValue: {
     type: Boolean
@@ -55,6 +55,7 @@ export const pressYLayerProps = propsFactory({
   },
   ...pressThemePropsOptions(),
   ...polyTransitionPropOptions,
+  ...pressBasePropsOptions(),
   ...pressCoordinateProps(),
   ...pressDimensionPropsOptions()
 }, 'YLayer');
@@ -88,10 +89,11 @@ export const YLayer = defineComponent({
     const scrim$ = ref();
     const content$ = ref();
     const {
+      base,
       base$,
       baseEl,
       baseSlot
-    } = useBase();
+    } = useBase(props);
     const {
       themeClasses
     } = useLocalTheme(props);
@@ -127,7 +129,7 @@ export const YLayer = defineComponent({
       updateCoordinate
     } = useCoordinate(props, {
       contentEl: content$,
-      baseEl,
+      base,
       active
     });
     function onClickComplementLayer(mouseEvent) {

package/lib/components/layer/YLayer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","getCurrentInstance","mergeProps","reactive","ref","shallowRef","toRef","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","propsFactory","useBase","pressYLayerProps","modelValue","type","Boolean","scrim","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","openOnHover","openDelay","closeDelay","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","slots","setup","_ref","emit","expose","attrs","vm","scrim$","content$","base$","baseEl","baseSlot","themeClasses","layerGroup","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","hovered","lazyValue","onAfterUpdate","rendered","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","onMouseenter","event","onMouseleave","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","isMe","vnode","slotBase","base","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type {\r\n  CSSProperties,\r\n  ComponentInternalInstance,\r\n  PropType,\r\n  SlotsType,\r\n} from 'vue';\r\nimport {\r\n  Teleport,\r\n  Transition,\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  mergeProps,\r\n  reactive,\r\n  ref,\r\n  shallowRef,\r\n  toRef,\r\n  watchEffect,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport {\r\n  pressCoordinateProps,\r\n  useCoordinate,\r\n} from '../../composables/coordinate';\r\nimport {\r\n  pressDimensionPropsOptions,\r\n  useDimension,\r\n} from '../../composables/dimension';\r\nimport { useLayerGroup } from '../../composables/layer-group';\r\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\r\nimport { useLazy } from '../../composables/timing';\r\nimport {\r\n  PolyTransition,\r\n  polyTransitionPropOptions,\r\n  usePolyTransition,\r\n} from '../../composables/transition';\r\nimport {\r\n  ComplementClick,\r\n  ComplementClickBindingOptions,\r\n} from '../../directives/complement-click';\r\nimport { bindClasses, propsFactory } from '../../util/vue-component';\r\n\r\nimport './YLayer.scss';\r\nimport {useBase} from \"./base\";\r\n\r\nexport const pressYLayerProps = propsFactory(\r\n  {\r\n    modelValue: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    scrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    scrimOpacity: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    eager: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    classes: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    contentClasses: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    closeClickScrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    contentStyles: {\r\n      type: Object as PropType<CSSProperties>,\r\n      default: () => {},\r\n    },\r\n    disabled: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openOnHover: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    closeDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    ...pressThemePropsOptions(),\r\n    ...polyTransitionPropOptions,\r\n    ...pressCoordinateProps(),\r\n    ...pressDimensionPropsOptions(),\r\n  },\r\n  'YLayer',\r\n);\r\n\r\nexport const YLayer = defineComponent({\r\n  name: 'YLayer',\r\n  inheritAttrs: false,\r\n  components: {\r\n    PolyTransition,\r\n  },\r\n  directives: {\r\n    ComplementClick,\r\n  },\r\n  props: {\r\n    modal: Boolean as PropType<boolean>,\r\n    ...pressYLayerProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: boolean) => true,\r\n    'click:complement': (mouseEvent: MouseEvent) => true,\r\n    afterLeave: () => true,\r\n  },\r\n  slots: Object as SlotsType<{\r\n    base: any;\r\n    default: any;\r\n  }>,\r\n  setup(props, { emit, expose, attrs, slots }) {\r\n    const vm = getCurrentInstance();\r\n\r\n    const scrim$ = ref<HTMLElement>();\r\n    const content$ = ref<HTMLElement>();\r\n\r\n    const { base$, baseEl, baseSlot } = useBase();\r\n\r\n    const { themeClasses } = useLocalTheme(props);\r\n    const { layerGroup, layerGroupState, getActiveLayers } = useLayerGroup();\r\n    const { polyTransitionBindProps } = usePolyTransition(props);\r\n    const { dimensionStyles } = useDimension(props);\r\n    const active = computed<boolean>({\r\n      get: (): boolean => {\r\n        return !!props.modelValue;\r\n      },\r\n      set: (v: boolean) => {\r\n        emit('update:modelValue', v);\r\n      },\r\n    });\r\n    const finish = shallowRef(false);\r\n    const hovered = ref(false);\r\n\r\n    const disabled = toRef(props, 'disabled');\r\n    const { lazyValue, onAfterUpdate } = useLazy(toRef(props, 'eager'), active);\r\n    const rendered = computed<boolean>(\r\n      () => !disabled.value && (lazyValue.value || active.value),\r\n    );\r\n\r\n    const { coordinateStyles, updateCoordinate } = useCoordinate(props, {\r\n      contentEl: content$,\r\n      baseEl,\r\n      active,\r\n    });\r\n\r\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\r\n      emit('click:complement', mouseEvent);\r\n      if (!props.modal) {\r\n        if (\r\n          scrim$.value !== null &&\r\n          scrim$.value === mouseEvent.target &&\r\n          props.closeClickScrim\r\n        ) {\r\n          active.value = false;\r\n        }\r\n      } else {\r\n        // TODO: shrug ani\r\n      }\r\n    }\r\n\r\n    function closeConditional(): boolean {\r\n      return (\r\n        (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\r\n        active.value && finish.value\r\n      ); // TODO: && groupTopLevel.value;\r\n    }\r\n\r\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\r\n      handler: onClickComplementLayer,\r\n      determine: closeConditional,\r\n      include: () => [baseEl.value],\r\n    });\r\n\r\n    function onAfterEnter() {\r\n      finish.value = true;\r\n    }\r\n\r\n    function onAfterLeave() {\r\n      onAfterUpdate();\r\n      finish.value = false;\r\n      emit('afterLeave');\r\n    }\r\n\r\n    function onClickScrim() {\r\n      if (props.closeClickScrim) {\r\n        active.value = false;\r\n      }\r\n    }\r\n\r\n    function onMouseenter(event: Event) {\r\n      hovered.value = true;\r\n    }\r\n\r\n    function onMouseleave(event: Event) {\r\n      hovered.value = false;\r\n    }\r\n\r\n    const computedStyle = computed(() => {\r\n      return {\r\n        zIndex: '2000',\r\n      };\r\n    });\r\n\r\n    const computedClass = computed<Record<string, boolean>>(() => {\r\n      const { classes } = props;\r\n      const boundClasses = bindClasses(classes);\r\n      return {\r\n        ...boundClasses,\r\n        'y-layer--active': !!active.value,\r\n      };\r\n    });\r\n\r\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\r\n      const boundClasses = bindClasses(props.contentClasses);\r\n      return {\r\n        ...boundClasses,\r\n      };\r\n    });\r\n\r\n    expose({\r\n      scrim$,\r\n      base$,\r\n      content$: computed(() => content$.value),\r\n      baseEl,\r\n      active,\r\n      onAfterUpdate,\r\n      updateCoordinate,\r\n      hovered,\r\n      finish,\r\n      modal: computed(() => props.modal),\r\n      getActiveLayers,\r\n      isMe: (vnode: ComponentInternalInstance) => {\r\n        return vnode === vm;\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          class: {\r\n            'y-layer-base': true,\r\n            'y-layer-base--active': active.value,\r\n          },\r\n        }),\r\n      });\r\n      baseSlot.value = slotBase;\r\n      return (\r\n        <>\r\n          {slotBase}\r\n          <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\r\n            {rendered.value && (\r\n              <div\r\n                class={{\r\n                  'y-layer': true,\r\n                  'y-layer--finish': finish.value,\r\n                  ...computedClass.value,\r\n                  [themeClasses.value ?? '']: true,\r\n                }}\r\n                onMouseenter={onMouseenter}\r\n                onMouseleave={onMouseleave}\r\n                style={computedStyle.value}\r\n                {...attrs}\r\n              >\r\n                <Transition name=\"fade\" appear>\r\n                  {active.value && props.scrim && (\r\n                    <div\r\n                      class=\"y-layer__scrim\"\r\n                      style={{ '--y-layer-scrim-opacity': props.scrimOpacity }}\r\n                      onClick={onClickScrim}\r\n                      ref=\"scrim$\"\r\n                    ></div>\r\n                  )}\r\n                </Transition>\r\n                <PolyTransition\r\n                  onAfterEnter={onAfterEnter}\r\n                  onAfterLeave={onAfterLeave}\r\n                  appear\r\n                  {...polyTransitionBindProps.value}\r\n                >\r\n                  <div\r\n                    v-show={active.value}\r\n                    v-complement-click={{ ...complementClickOption }}\r\n                    class={{\r\n                      'y-layer__content': true,\r\n                      ...computedContentClasses.value,\r\n                    }}\r\n                    style={[\r\n                      {\r\n                        ...dimensionStyles.value,\r\n                        ...coordinateStyles.value,\r\n                        ...props.contentStyles,\r\n                      },\r\n                    ]}\r\n                    ref={content$}\r\n                  >\r\n                    {slots.default?.({ active: active.value })}\r\n                  </div>\r\n                </PolyTransition>\r\n              </div>\r\n            )}\r\n          </Teleport>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      complementClickOption,\r\n      layerGroup,\r\n      active,\r\n      finish,\r\n      rendered,\r\n      lazyValue,\r\n      onAfterUpdate: onAfterUpdate as () => void,\r\n      scrim$,\r\n      content$,\r\n      base$,\r\n      baseEl,\r\n      polyTransitionBindProps,\r\n      coordinateStyles,\r\n      layerGroupState,\r\n      getActiveLayers,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YLayer = InstanceType<typeof YLayer>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","getCurrentInstance","mergeProps","reactive","ref","shallowRef","toRef","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","propsFactory","pressBasePropsOptions","useBase","pressYLayerProps","modelValue","type","Boolean","scrim","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","openOnHover","openDelay","closeDelay","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","slots","setup","_ref","emit","expose","attrs","vm","scrim$","content$","base","base$","baseEl","baseSlot","themeClasses","layerGroup","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","hovered","lazyValue","onAfterUpdate","rendered","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","onMouseenter","event","onMouseleave","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","isMe","vnode","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type {\r\n  CSSProperties,\r\n  ComponentInternalInstance,\r\n  PropType,\r\n  SlotsType,\r\n} from 'vue';\r\nimport {\r\n  Teleport,\r\n  Transition,\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  mergeProps,\r\n  reactive,\r\n  ref,\r\n  shallowRef,\r\n  toRef,\r\n  watchEffect,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport {\r\n  pressCoordinateProps,\r\n  useCoordinate,\r\n} from '../../composables/coordinate';\r\nimport {\r\n  pressDimensionPropsOptions,\r\n  useDimension,\r\n} from '../../composables/dimension';\r\nimport { useLayerGroup } from '../../composables/layer-group';\r\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\r\nimport { useLazy } from '../../composables/timing';\r\nimport {\r\n  PolyTransition,\r\n  polyTransitionPropOptions,\r\n  usePolyTransition,\r\n} from '../../composables/transition';\r\nimport {\r\n  ComplementClick,\r\n  ComplementClickBindingOptions,\r\n} from '../../directives/complement-click';\r\nimport { bindClasses, propsFactory } from '../../util/vue-component';\r\n\r\nimport './YLayer.scss';\r\nimport { pressBasePropsOptions, useBase } from './base';\r\n\r\nexport const pressYLayerProps = propsFactory(\r\n  {\r\n    modelValue: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    scrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    scrimOpacity: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    eager: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    classes: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    contentClasses: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    closeClickScrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    contentStyles: {\r\n      type: Object as PropType<CSSProperties>,\r\n      default: () => {},\r\n    },\r\n    disabled: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openOnHover: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    closeDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    ...pressThemePropsOptions(),\r\n    ...polyTransitionPropOptions,\r\n    ...pressBasePropsOptions(),\r\n    ...pressCoordinateProps(),\r\n    ...pressDimensionPropsOptions(),\r\n  },\r\n  'YLayer',\r\n);\r\n\r\nexport const YLayer = defineComponent({\r\n  name: 'YLayer',\r\n  inheritAttrs: false,\r\n  components: {\r\n    PolyTransition,\r\n  },\r\n  directives: {\r\n    ComplementClick,\r\n  },\r\n  props: {\r\n    modal: Boolean as PropType<boolean>,\r\n    ...pressYLayerProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: boolean) => true,\r\n    'click:complement': (mouseEvent: MouseEvent) => true,\r\n    afterLeave: () => true,\r\n  },\r\n  slots: Object as SlotsType<{\r\n    base: any;\r\n    default: any;\r\n  }>,\r\n  setup(props, { emit, expose, attrs, slots }) {\r\n    const vm = getCurrentInstance();\r\n\r\n    const scrim$ = ref<HTMLElement>();\r\n    const content$ = ref<HTMLElement>();\r\n\r\n    const { base, base$, baseEl, baseSlot } = useBase(props);\r\n\r\n    const { themeClasses } = useLocalTheme(props);\r\n    const { layerGroup, layerGroupState, getActiveLayers } = useLayerGroup();\r\n    const { polyTransitionBindProps } = usePolyTransition(props);\r\n    const { dimensionStyles } = useDimension(props);\r\n    const active = computed<boolean>({\r\n      get: (): boolean => {\r\n        return !!props.modelValue;\r\n      },\r\n      set: (v: boolean) => {\r\n        emit('update:modelValue', v);\r\n      },\r\n    });\r\n    const finish = shallowRef(false);\r\n    const hovered = ref(false);\r\n\r\n    const disabled = toRef(props, 'disabled');\r\n    const { lazyValue, onAfterUpdate } = useLazy(toRef(props, 'eager'), active);\r\n    const rendered = computed<boolean>(\r\n      () => !disabled.value && (lazyValue.value || active.value),\r\n    );\r\n\r\n    const { coordinateStyles, updateCoordinate } = useCoordinate(props, {\r\n      contentEl: content$,\r\n      base,\r\n      active,\r\n    });\r\n\r\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\r\n      emit('click:complement', mouseEvent);\r\n      if (!props.modal) {\r\n        if (\r\n          scrim$.value !== null &&\r\n          scrim$.value === mouseEvent.target &&\r\n          props.closeClickScrim\r\n        ) {\r\n          active.value = false;\r\n        }\r\n      } else {\r\n        // TODO: shrug ani\r\n      }\r\n    }\r\n\r\n    function closeConditional(): boolean {\r\n      return (\r\n        (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\r\n        active.value && finish.value\r\n      ); // TODO: && groupTopLevel.value;\r\n    }\r\n\r\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\r\n      handler: onClickComplementLayer,\r\n      determine: closeConditional,\r\n      include: () => [baseEl.value],\r\n    });\r\n\r\n    function onAfterEnter() {\r\n      finish.value = true;\r\n    }\r\n\r\n    function onAfterLeave() {\r\n      onAfterUpdate();\r\n      finish.value = false;\r\n      emit('afterLeave');\r\n    }\r\n\r\n    function onClickScrim() {\r\n      if (props.closeClickScrim) {\r\n        active.value = false;\r\n      }\r\n    }\r\n\r\n    function onMouseenter(event: Event) {\r\n      hovered.value = true;\r\n    }\r\n\r\n    function onMouseleave(event: Event) {\r\n      hovered.value = false;\r\n    }\r\n\r\n    const computedStyle = computed(() => {\r\n      return {\r\n        zIndex: '2000',\r\n      };\r\n    });\r\n\r\n    const computedClass = computed<Record<string, boolean>>(() => {\r\n      const { classes } = props;\r\n      const boundClasses = bindClasses(classes);\r\n      return {\r\n        ...boundClasses,\r\n        'y-layer--active': !!active.value,\r\n      };\r\n    });\r\n\r\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\r\n      const boundClasses = bindClasses(props.contentClasses);\r\n      return {\r\n        ...boundClasses,\r\n      };\r\n    });\r\n\r\n    expose({\r\n      scrim$,\r\n      base$,\r\n      content$: computed(() => content$.value),\r\n      baseEl,\r\n      active,\r\n      onAfterUpdate,\r\n      updateCoordinate,\r\n      hovered,\r\n      finish,\r\n      modal: computed(() => props.modal),\r\n      getActiveLayers,\r\n      isMe: (vnode: ComponentInternalInstance) => {\r\n        return vnode === vm;\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          class: {\r\n            'y-layer-base': true,\r\n            'y-layer-base--active': active.value,\r\n          },\r\n        }),\r\n      });\r\n      baseSlot.value = slotBase;\r\n      return (\r\n        <>\r\n          {slotBase}\r\n          <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\r\n            {rendered.value && (\r\n              <div\r\n                class={{\r\n                  'y-layer': true,\r\n                  'y-layer--finish': finish.value,\r\n                  ...computedClass.value,\r\n                  [themeClasses.value ?? '']: true,\r\n                }}\r\n                onMouseenter={onMouseenter}\r\n                onMouseleave={onMouseleave}\r\n                style={computedStyle.value}\r\n                {...attrs}\r\n              >\r\n                <Transition name=\"fade\" appear>\r\n                  {active.value && props.scrim && (\r\n                    <div\r\n                      class=\"y-layer__scrim\"\r\n                      style={{ '--y-layer-scrim-opacity': props.scrimOpacity }}\r\n                      onClick={onClickScrim}\r\n                      ref=\"scrim$\"\r\n                    ></div>\r\n                  )}\r\n                </Transition>\r\n                <PolyTransition\r\n                  onAfterEnter={onAfterEnter}\r\n                  onAfterLeave={onAfterLeave}\r\n                  appear\r\n                  {...polyTransitionBindProps.value}\r\n                >\r\n                  <div\r\n                    v-show={active.value}\r\n                    v-complement-click={{ ...complementClickOption }}\r\n                    class={{\r\n                      'y-layer__content': true,\r\n                      ...computedContentClasses.value,\r\n                    }}\r\n                    style={[\r\n                      {\r\n                        ...dimensionStyles.value,\r\n                        ...coordinateStyles.value,\r\n                        ...props.contentStyles,\r\n                      },\r\n                    ]}\r\n                    ref={content$}\r\n                  >\r\n                    {slots.default?.({ active: active.value })}\r\n                  </div>\r\n                </PolyTransition>\r\n              </div>\r\n            )}\r\n          </Teleport>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      complementClickOption,\r\n      layerGroup,\r\n      active,\r\n      finish,\r\n      rendered,\r\n      lazyValue,\r\n      onAfterUpdate: onAfterUpdate as () => void,\r\n      scrim$,\r\n      content$,\r\n      base$,\r\n      baseEl,\r\n      polyTransitionBindProps,\r\n      coordinateStyles,\r\n      layerGroupState,\r\n      getActiveLayers,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YLayer = InstanceType<typeof YLayer>;\r\n"],"mappings":"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"}

package/lib/components/layer/base.mjs

@@ -1,15 +1,25 @@
 import { computed, getCurrentInstance, ref, watchEffect } from 'vue';
 import { propsFactory } from "../../util/vue-component.mjs";
 export const pressBasePropsOptions = propsFactory({
-  base: String
+  base: [String, Object, Array]
 }, 'YLayer.base');
-export function useBase() {
+export function useBase(props) {
   const vm = getCurrentInstance();
   const base$ = ref();
   const baseSlot = ref();
   const baseEl = ref();
   const baseFromSlotEl = computed(() => {
-    return baseSlot.value?.[0]?.el;
+    const el = baseSlot.value?.[0]?.el;
+    if (el && el.nodeType === Node.ELEMENT_NODE) {
+      return el;
+    }
+    return undefined;
+  });
+  const base = computed(() => {
+    if (baseEl.value) {
+      return baseEl.value;
+    }
+    return getBase(props.base, vm);
   });
   watchEffect(() => {
     if (!base$.value) {
@@ -21,7 +31,7 @@ export function useBase() {
       base = base.baseEl;
     }
     if (base$.value?.$el) {
-      if (base$.value.$el.nodeType === 1) {
+      if (base$.value.$el.nodeType === Node.ELEMENT_NODE) {
         base = base$.value.$el;
       }
     }
@@ -30,7 +40,32 @@ export function useBase() {
   return {
     base$,
     baseEl,
-    baseSlot
+    baseSlot,
+    base
   };
 }
+function getBase(selector, vm) {
+  if (!selector) return;
+  let ret;
+  if (selector === 'parent') {
+    let el = vm?.proxy?.$el?.parentNode;
+    while (el?.hasAttribute('data-base-parent')) {
+      el = el.parentNode;
+    }
+    ret = el;
+  }
+  // Selector
+  else if (typeof selector === 'string') {
+    ret = document.querySelector(selector);
+  }
+  // Component
+  else if ('$el' in selector) {
+    ret = selector.$el;
+  }
+  // HTMLElement | Element | [x, y]
+  else {
+    ret = selector;
+  }
+  return ret;
+}
 //# sourceMappingURL=base.mjs.map

package/lib/components/layer/base.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"base.mjs","names":["computed","getCurrentInstance","ref","watchEffect","propsFactory","pressBasePropsOptions","base","String","useBase","vm","base$","baseSlot","baseEl","baseFromSlotEl","value","el","$el","nodeType"],"sources":["../../../src/components/layer/base.ts"],"sourcesContent":["import { computed, getCurrentInstance, ref, watchEffect } from 'vue';\n\nimport { propsFactory } from '../../util/vue-component';\n\nexport const pressBasePropsOptions = propsFactory(\n  {\n    base: String,\n  },\n  'YLayer.base',\n);\n\nexport function useBase() {\n  const vm = getCurrentInstance();\n\n  const base$ = ref();\n  const baseSlot = ref();\n  const baseEl = ref<HTMLElement>();\n\n  const baseFromSlotEl = computed(() => {\n    return baseSlot.value?.[0]?.el;\n  });\n\n  watchEffect(() => {\n    if (!base$.value) {\n      baseEl.value = baseFromSlotEl.value;\n      return;\n    }\n    let base = base$.value;\n    if (base.baseEl) {\n      base = base.baseEl;\n    }\n    if (base$.value?.$el) {\n      if (base$.value.$el.nodeType === 1) {\n        base = base$.value.$el;\n      }\n    }\n    baseEl.value = base;\n  });\n\n  return {\n    base$,\n    baseEl,\n    baseSlot,\n  };\n}\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,kBAAkB,EAAEC,GAAG,EAAEC,WAAW,QAAQ,KAAK;AAAC,SAE5DC,YAAY;AAErB,OAAO,MAAMC,qBAAqB,GAAGD,YAAY,CAC/C;EACEE,IAAI,EAAEC;AACR,CAAC,EACD,aACF,CAAC;AAED,OAAO,SAASC,OAAOA,CAAA,EAAG;EACxB,MAAMC,EAAE,GAAGR,kBAAkB,CAAC,CAAC;EAE/B,MAAMS,KAAK,GAAGR,GAAG,CAAC,CAAC;EACnB,MAAMS,QAAQ,GAAGT,GAAG,CAAC,CAAC;EACtB,MAAMU,MAAM,GAAGV,GAAG,CAAc,CAAC;EAEjC,MAAMW,cAAc,GAAGb,QAAQ,CAAC,MAAM;IACpC,OAAOW,QAAQ,CAACG,KAAK,GAAG,CAAC,CAAC,EAAEC,EAAE;EAChC,CAAC,CAAC;EAEFZ,WAAW,CAAC,MAAM;IAChB,IAAI,CAACO,KAAK,CAACI,KAAK,EAAE;MAChBF,MAAM,CAACE,KAAK,GAAGD,cAAc,CAACC,KAAK;MACnC;IACF;IACA,IAAIR,IAAI,GAAGI,KAAK,CAACI,KAAK;IACtB,IAAIR,IAAI,CAACM,MAAM,EAAE;MACfN,IAAI,GAAGA,IAAI,CAACM,MAAM;IACpB;IACA,IAAIF,KAAK,CAACI,KAAK,EAAEE,GAAG,EAAE;MACpB,IAAIN,KAAK,CAACI,KAAK,CAACE,GAAG,CAACC,QAAQ,KAAK,CAAC,EAAE;QAClCX,IAAI,GAAGI,KAAK,CAACI,KAAK,CAACE,GAAG;MACxB;IACF;IACAJ,MAAM,CAACE,KAAK,GAAGR,IAAI;EACrB,CAAC,CAAC;EAEF,OAAO;IACLI,KAAK;IACLE,MAAM;IACND;EACF,CAAC;AACH"}
+{"version":3,"file":"base.mjs","names":["computed","getCurrentInstance","ref","watchEffect","propsFactory","pressBasePropsOptions","base","String","Object","Array","useBase","props","vm","base$","baseSlot","baseEl","baseFromSlotEl","el","value","nodeType","Node","ELEMENT_NODE","undefined","getBase","$el","selector","ret","proxy","parentNode","hasAttribute","document","querySelector"],"sources":["../../../src/components/layer/base.ts"],"sourcesContent":["import {\n  ComponentInternalInstance,\n  ComponentPublicInstance,\n  PropType,\n  computed,\n  getCurrentInstance,\n  ref,\n  watchEffect,\n} from 'vue';\n\nimport { propsFactory } from '../../util/vue-component';\n\nexport type BaseType =\n  | string\n  | Element\n  | ComponentPublicInstance\n  | [x: number, y: number]\n  | undefined;\n\nexport const pressBasePropsOptions = propsFactory(\n  {\n    base: [String, Object, Array] as PropType<BaseType>,\n  },\n  'YLayer.base',\n);\n\ninterface BaseProps {\n  base: BaseType;\n}\n\nexport function useBase(props: BaseProps) {\n  const vm = getCurrentInstance()!;\n\n  const base$ = ref();\n  const baseSlot = ref();\n  const baseEl = ref<HTMLElement>();\n\n  const baseFromSlotEl = computed(() => {\n    const el = baseSlot.value?.[0]?.el;\n    if (el && el.nodeType === Node.ELEMENT_NODE) {\n      return el;\n    }\n    return undefined;\n  });\n\n  const base = computed(() => {\n    if (baseEl.value) {\n      return baseEl.value;\n    }\n    return getBase(props.base, vm);\n  });\n\n  watchEffect(() => {\n    if (!base$.value) {\n      baseEl.value = baseFromSlotEl.value;\n      return;\n    }\n    let base = base$.value;\n    if (base.baseEl) {\n      base = base.baseEl;\n    }\n    if (base$.value?.$el) {\n      if (base$.value.$el.nodeType === Node.ELEMENT_NODE) {\n        base = base$.value.$el;\n      }\n    }\n    baseEl.value = base;\n  });\n\n  return {\n    base$,\n    baseEl,\n    baseSlot,\n    base,\n  };\n}\n\nfunction getBase(selector: BaseType, vm: ComponentInternalInstance) {\n  if (!selector) return;\n\n  let ret;\n\n  if (selector === 'parent') {\n    let el = vm?.proxy?.$el?.parentNode;\n    while (el?.hasAttribute('data-base-parent')) {\n      el = el.parentNode;\n    }\n    ret = el;\n  }\n  // Selector\n  else if (typeof selector === 'string') {\n    ret = document.querySelector(selector);\n  }\n  // Component\n  else if ('$el' in selector) {\n    ret = selector.$el;\n  }\n  // HTMLElement | Element | [x, y]\n  else {\n    ret = selector;\n  }\n\n  return ret;\n}\n"],"mappings":"AAAA,SAIEA,QAAQ,EACRC,kBAAkB,EAClBC,GAAG,EACHC,WAAW,QACN,KAAK;AAAC,SAEJC,YAAY;AASrB,OAAO,MAAMC,qBAAqB,GAAGD,YAAY,CAC/C;EACEE,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,EAAEC,KAAK;AAC9B,CAAC,EACD,aACF,CAAC;AAMD,OAAO,SAASC,OAAOA,CAACC,KAAgB,EAAE;EACxC,MAAMC,EAAE,GAAGX,kBAAkB,CAAC,CAAE;EAEhC,MAAMY,KAAK,GAAGX,GAAG,CAAC,CAAC;EACnB,MAAMY,QAAQ,GAAGZ,GAAG,CAAC,CAAC;EACtB,MAAMa,MAAM,GAAGb,GAAG,CAAc,CAAC;EAEjC,MAAMc,cAAc,GAAGhB,QAAQ,CAAC,MAAM;IACpC,MAAMiB,EAAE,GAAGH,QAAQ,CAACI,KAAK,GAAG,CAAC,CAAC,EAAED,EAAE;IAClC,IAAIA,EAAE,IAAIA,EAAE,CAACE,QAAQ,KAAKC,IAAI,CAACC,YAAY,EAAE;MAC3C,OAAOJ,EAAE;IACX;IACA,OAAOK,SAAS;EAClB,CAAC,CAAC;EAEF,MAAMhB,IAAI,GAAGN,QAAQ,CAAC,MAAM;IAC1B,IAAIe,MAAM,CAACG,KAAK,EAAE;MAChB,OAAOH,MAAM,CAACG,KAAK;IACrB;IACA,OAAOK,OAAO,CAACZ,KAAK,CAACL,IAAI,EAAEM,EAAE,CAAC;EAChC,CAAC,CAAC;EAEFT,WAAW,CAAC,MAAM;IAChB,IAAI,CAACU,KAAK,CAACK,KAAK,EAAE;MAChBH,MAAM,CAACG,KAAK,GAAGF,cAAc,CAACE,KAAK;MACnC;IACF;IACA,IAAIZ,IAAI,GAAGO,KAAK,CAACK,KAAK;IACtB,IAAIZ,IAAI,CAACS,MAAM,EAAE;MACfT,IAAI,GAAGA,IAAI,CAACS,MAAM;IACpB;IACA,IAAIF,KAAK,CAACK,KAAK,EAAEM,GAAG,EAAE;MACpB,IAAIX,KAAK,CAACK,KAAK,CAACM,GAAG,CAACL,QAAQ,KAAKC,IAAI,CAACC,YAAY,EAAE;QAClDf,IAAI,GAAGO,KAAK,CAACK,KAAK,CAACM,GAAG;MACxB;IACF;IACAT,MAAM,CAACG,KAAK,GAAGZ,IAAI;EACrB,CAAC,CAAC;EAEF,OAAO;IACLO,KAAK;IACLE,MAAM;IACND,QAAQ;IACRR;EACF,CAAC;AACH;AAEA,SAASiB,OAAOA,CAACE,QAAkB,EAAEb,EAA6B,EAAE;EAClE,IAAI,CAACa,QAAQ,EAAE;EAEf,IAAIC,GAAG;EAEP,IAAID,QAAQ,KAAK,QAAQ,EAAE;IACzB,IAAIR,EAAE,GAAGL,EAAE,EAAEe,KAAK,EAAEH,GAAG,EAAEI,UAAU;IACnC,OAAOX,EAAE,EAAEY,YAAY,CAAC,kBAAkB,CAAC,EAAE;MAC3CZ,EAAE,GAAGA,EAAE,CAACW,UAAU;IACpB;IACAF,GAAG,GAAGT,EAAE;EACV;EACA;EAAA,KACK,IAAI,OAAOQ,QAAQ,KAAK,QAAQ,EAAE;IACrCC,GAAG,GAAGI,QAAQ,CAACC,aAAa,CAACN,QAAQ,CAAC;EACxC;EACA;EAAA,KACK,IAAI,KAAK,IAAIA,QAAQ,EAAE;IAC1BC,GAAG,GAAGD,QAAQ,CAACD,GAAG;EACpB;EACA;EAAA,KACK;IACHE,GAAG,GAAGD,QAAQ;EAChB;EAEA,OAAOC,GAAG;AACZ"}

package/lib/components/pagination/YPagination.mjs

@@ -26,6 +26,7 @@ export const pressYPaginationProps = propsFactory({
     validator: val => val % 1 === 0
   },
   totalVisible: [Number, String],
+  maxVisible: [Number, String],
   showEndButton: Boolean,
   gap: {
     type: [String, Number],
@@ -84,10 +85,21 @@ export const YPagination = defineComponent({
       const gap = +(props.gap ?? 4);
       const fixedWidth = (itemWidth + gap) * fixedCount - gap;
       const count = Math.max(0, Math.floor(+((listWidth - fixedWidth) / (itemWidth + gap)).toFixed(2)));
+      const maxVisible = Number(props.maxVisible);
+      if (!isNaN(maxVisible)) {
+        return Math.min(maxVisible, count);
+      }
       return count;
     }
     const totalVisible = computed(() => {
-      if (props.totalVisible) return parseInt(props.totalVisible, 10);else if (itemCount.value >= 0) return itemCount.value;
+      const maxVisible = Number(props.maxVisible);
+      if (props.totalVisible) {
+        const total = parseInt(props.totalVisible, 10);
+        if (!isNaN(maxVisible)) {
+          return Math.min(total, maxVisible);
+        }
+        return total;
+      } else if (itemCount.value >= 0) return itemCount.value;
       return calcItemCount(innerWidth, 58);
     });
     const controls = computed(() => {