yuyeon 0.0.47-rc.1 → 0.0.47-rc.11

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/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(() => {

package/lib/components/pagination/YPagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","shallowRef","useModelDuplex","useRender","useRefs","useResizeObserver","getRangeArr","toStyleSizeValue","propsFactory","YButton","YIconPageControl","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","showEndButton","gap","color","activeColor","buttonVariation","align","YPagination","name","components","emits","value","change","control","setup","_ref","slots","emit","page","parseInt","itemCount","resizeObservedRef","entries","target","contentRect","firstItem","querySelector","listWidth","width","itemWidth","offsetWidth","parseFloat","getComputedStyle","marginRight","calcItemCount","fixedCount","fixedWidth","count","Math","max","floor","toFixed","innerWidth","controls","prevDisabled","nextDisabled","first","variation","onClick","e","preventDefault","prev","to","next","min","last","range","isNaN","MAX_SAFE_INTEGER","even","middle","left","right","rangeLength","rangeStart","ceil","refs","updateRef","changePage","event","arguments","undefined","items","map","item","index","ref","active","key","ellipsis","styles","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import {\n  ComponentPublicInstance,\n  PropType,\n  computed,\n  defineComponent,\n  shallowRef,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useRefs } from '../../composables/ref';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { getRangeArr } from '../../util/common';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YIconPageControl } from '../icons/YIconPageControl';\n\nimport './YPagination.scss';\n\nexport const pressYPaginationProps = propsFactory(\n  {\n    start: {\n      type: [Number, String],\n      default: 1,\n    },\n    modelValue: {\n      type: Number,\n      default: (props: any) => props.start as number,\n    },\n    disabled: Boolean,\n    length: {\n      type: [Number, String],\n      default: 1,\n      validator: (val: number) => val % 1 === 0,\n    },\n    totalVisible: [Number, String],\n    showEndButton: Boolean,\n    gap: {\n      type: [String, Number],\n      default: 4,\n    },\n    color: String,\n    activeColor: String,\n    buttonVariation: [String],\n    align: {\n      type: String as PropType<'start' | 'center' | 'end'>,\n      default: 'center',\n    },\n    // firstIcon: [String],\n    // lastIcon: [String],\n    // prevIcon: [String],\n    // nextIcon: [String],\n  },\n  'YPagination',\n);\n\nexport const YPagination = defineComponent({\n  name: 'YPagination',\n  components: {\n    YButton,\n  },\n  props: {\n    ...pressYPaginationProps(),\n  },\n  emits: {\n    'update:modelValue': (value: number) => true,\n    change: (value: number, control?: string) => true,\n  },\n  setup(props, { slots, emit }) {\n    const page = useModelDuplex(props);\n\n    const length = computed(() => parseInt(props.length as string, 10));\n    const start = computed(() => parseInt(props.start as string, 10));\n\n    const itemCount = shallowRef(-1);\n\n    const { resizeObservedRef } = useResizeObserver((entries) => {\n      if (1 > entries.length) return;\n      const { target, contentRect } = entries[0];\n\n      const firstItem = target.querySelector(\n        '.y-pagination__list > *',\n      ) as HTMLElement;\n      if (firstItem) {\n        const listWidth = contentRect.width;\n        const itemWidth =\n          firstItem.offsetWidth +\n          parseFloat(getComputedStyle(firstItem).marginRight) * 2;\n        itemCount.value = calcItemCount(listWidth, itemWidth);\n      }\n    });\n\n    function calcItemCount(listWidth: number, itemWidth: number) {\n      const fixedCount = props.showEndButton ? 5 : 3;\n      const gap = +(props.gap ?? 4);\n      const fixedWidth = (itemWidth + gap) * fixedCount - gap;\n      const count = Math.max(\n        0,\n        Math.floor(+((listWidth - fixedWidth) / (itemWidth + gap)).toFixed(2)),\n      );\n      return count;\n    }\n\n    const totalVisible = computed(() => {\n      if (props.totalVisible) return parseInt(props.totalVisible as string, 10);\n      else if (itemCount.value >= 0) return itemCount.value;\n      return calcItemCount(innerWidth, 58);\n    });\n\n    const controls = computed(() => {\n      const prevDisabled = !!props.disabled || page.value <= start.value;\n      const nextDisabled =\n        !!props.disabled || page.value >= start.value + length.value - 1;\n      return {\n        first: {\n          disabled: prevDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            page.value = 1;\n            emit('change', 1, 'first');\n          },\n        },\n        prev: {\n          disabled: prevDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.max(1, page.value - 1);\n            page.value = to;\n            emit('change', to, 'prev');\n          },\n        },\n        next: {\n          disabled: nextDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.min(+length.value, page.value + 1);\n            page.value = to;\n            emit('change', to, 'next');\n          },\n        },\n        last: {\n          disabled: nextDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = +length.value;\n            page.value = +length.value;\n            emit('change', to, 'last');\n          },\n        },\n      };\n    });\n\n    const range = computed(() => {\n      if (\n        length.value <= 0 ||\n        isNaN(length.value) ||\n        length.value > Number.MAX_SAFE_INTEGER\n      ) {\n        return [];\n      }\n      if (totalVisible.value <= 1) {\n        return [page.value];\n      }\n      if (length.value <= totalVisible.value) {\n        return getRangeArr(length.value, start.value);\n      }\n      const even = totalVisible.value % 2 === 0;\n      const middle = even\n        ? totalVisible.value / 2\n        : Math.floor(totalVisible.value / 2);\n      const left = even ? middle : middle + 1;\n      const right = length.value - middle;\n\n      if (left - page.value >= 0) {\n        return [\n          ...getRangeArr(Math.max(1, totalVisible.value - 1), start.value),\n          'ellipsis',\n          length.value,\n        ];\n      } else if (page.value - right >= (even ? 1 : 0)) {\n        const rangeLength = totalVisible.value - 1;\n        const rangeStart = length.value - rangeLength + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n        ];\n      } else {\n        const rangeLength = Math.max(1, totalVisible.value - 3);\n        const rangeStart =\n          rangeLength === 1\n            ? page.value\n            : page.value - Math.ceil(rangeLength / 2) + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n          'ellipsis',\n          length.value,\n        ];\n      }\n    });\n\n    const { refs, updateRef } = useRefs<ComponentPublicInstance>();\n\n    function changePage(event: Event, to = 1) {\n      event.preventDefault();\n      page.value = to;\n      emit('change', to);\n    }\n\n    const items = computed(() => {\n      return range.value.map((item, index) => {\n        const ref = (e: any) => updateRef(e, index);\n\n        if (item === 'ellipsis') {\n          return {\n            active: false,\n            key: `ellipsis-${index}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: true,\n              disabled: true, // TODO: skipper\n            },\n          };\n        } else {\n          const active = item === page.value;\n          return {\n            active,\n            key: `item-${item}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: false,\n              disabled: !!props.disabled || +props.length < 2,\n              color: active ? props.activeColor : props.color,\n              variation: props.buttonVariation,\n              onClick: (e: MouseEvent) => changePage(e, item),\n            },\n          };\n        }\n      });\n    });\n\n    const styles = computed(() => {\n      let gap = undefined;\n      if (props.gap) {\n        const value = +props.gap;\n        if (!isNaN(value)) {\n          gap = toStyleSizeValue(value);\n        } else if (typeof props.gap === 'string') {\n          gap = props.gap;\n        }\n      }\n      return {\n        '--y-pagination__gap': gap,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'y-pagination',\n            { [`y-pagination--align-${props.align}`]: props.align !== 'start' },\n          ]}\n          role={'navigation'}\n          style={styles.value}\n          ref={resizeObservedRef}\n        >\n          <ul class={['y-pagination__list']}>\n            {props.showEndButton && (\n              <li key=\"first\" class=\"y-pagination__first\">\n                {slots.first ? (\n                  slots.first(controls.value.first)\n                ) : (\n                  <YButton {...controls.value.first}>\n                    {slots['first-icon'] ? (\n                      slots['first-icon']()\n                    ) : (\n                      <YIconPageControl type={'first'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n            <li key=\"prev\" class=\"y-pagination__prev\">\n              {slots.prev ? (\n                slots.prev(controls.value.prev)\n              ) : (\n                <YButton {...controls.value.prev}>\n                  {slots['prev-icon'] ? (\n                    slots['prev-icon']()\n                  ) : (\n                    <YIconPageControl type={'prev'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {items.value.map((item, index) => {\n              return (\n                <li\n                  key={item.key}\n                  class={[\n                    'y-pagination__item',\n                    { 'y-pagination__item--active': item.active },\n                  ]}\n                >\n                  <YButton {...item.props}>\n                    {item.props.ellipsis\n                      ? slots.ellipsis\n                        ? slots.ellipsis()\n                        : '...'\n                      : item.page}\n                  </YButton>\n                </li>\n              );\n            })}\n            <li key=\"next\" class=\"y-pagination__next\">\n              {slots.next ? (\n                slots.next(controls.value.next)\n              ) : (\n                <YButton {...controls.value.next}>\n                  {slots['next-icon'] ? (\n                    slots['next-icon']()\n                  ) : (\n                    <YIconPageControl type={'next'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {props.showEndButton && (\n              <li key=\"last\" class=\"y-pagination__last\">\n                {slots.last ? (\n                  slots.last(controls.value.last)\n                ) : (\n                  <YButton {...controls.value.last}>\n                    {slots['last-icon'] ? (\n                      slots['last-icon']()\n                    ) : (\n                      <YIconPageControl type={'last'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n          </ul>\n        </div>\n      );\n    });\n\n    return {\n      itemCount,\n      page,\n      refs,\n    };\n  },\n});\n\nexport type YPagination = InstanceType<typeof YPagination>;\n"],"mappings":"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"}
+{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","shallowRef","useModelDuplex","useRender","useRefs","useResizeObserver","getRangeArr","toStyleSizeValue","propsFactory","YButton","YIconPageControl","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","maxVisible","showEndButton","gap","color","activeColor","buttonVariation","align","YPagination","name","components","emits","value","change","control","setup","_ref","slots","emit","page","parseInt","itemCount","resizeObservedRef","entries","target","contentRect","firstItem","querySelector","listWidth","width","itemWidth","offsetWidth","parseFloat","getComputedStyle","marginRight","calcItemCount","fixedCount","fixedWidth","count","Math","max","floor","toFixed","isNaN","min","total","innerWidth","controls","prevDisabled","nextDisabled","first","variation","onClick","e","preventDefault","prev","to","next","last","range","MAX_SAFE_INTEGER","even","middle","left","right","rangeLength","rangeStart","ceil","refs","updateRef","changePage","event","arguments","undefined","items","map","item","index","ref","active","key","ellipsis","styles","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import {\n  ComponentPublicInstance,\n  PropType,\n  computed,\n  defineComponent,\n  shallowRef,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useRefs } from '../../composables/ref';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { getRangeArr } from '../../util/common';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YIconPageControl } from '../icons/YIconPageControl';\n\nimport './YPagination.scss';\n\nexport const pressYPaginationProps = propsFactory(\n  {\n    start: {\n      type: [Number, String],\n      default: 1,\n    },\n    modelValue: {\n      type: Number,\n      default: (props: any) => props.start as number,\n    },\n    disabled: Boolean,\n    length: {\n      type: [Number, String],\n      default: 1,\n      validator: (val: number) => val % 1 === 0,\n    },\n    totalVisible: [Number, String],\n    maxVisible: [Number, String],\n    showEndButton: Boolean,\n    gap: {\n      type: [String, Number],\n      default: 4,\n    },\n    color: String,\n    activeColor: String,\n    buttonVariation: [String],\n    align: {\n      type: String as PropType<'start' | 'center' | 'end'>,\n      default: 'center',\n    },\n    // firstIcon: [String],\n    // lastIcon: [String],\n    // prevIcon: [String],\n    // nextIcon: [String],\n  },\n  'YPagination',\n);\n\nexport const YPagination = defineComponent({\n  name: 'YPagination',\n  components: {\n    YButton,\n  },\n  props: {\n    ...pressYPaginationProps(),\n  },\n  emits: {\n    'update:modelValue': (value: number) => true,\n    change: (value: number, control?: string) => true,\n  },\n  setup(props, { slots, emit }) {\n    const page = useModelDuplex(props);\n\n    const length = computed(() => parseInt(props.length as string, 10));\n    const start = computed(() => parseInt(props.start as string, 10));\n\n    const itemCount = shallowRef(-1);\n\n    const { resizeObservedRef } = useResizeObserver((entries) => {\n      if (1 > entries.length) return;\n      const { target, contentRect } = entries[0];\n\n      const firstItem = target.querySelector(\n        '.y-pagination__list > *',\n      ) as HTMLElement;\n      if (firstItem) {\n        const listWidth = contentRect.width;\n        const itemWidth =\n          firstItem.offsetWidth +\n          parseFloat(getComputedStyle(firstItem).marginRight) * 2;\n        itemCount.value = calcItemCount(listWidth, itemWidth);\n      }\n    });\n\n    function calcItemCount(listWidth: number, itemWidth: number) {\n      const fixedCount = props.showEndButton ? 5 : 3;\n      const gap = +(props.gap ?? 4);\n      const fixedWidth = (itemWidth + gap) * fixedCount - gap;\n      const count = Math.max(\n        0,\n        Math.floor(+((listWidth - fixedWidth) / (itemWidth + gap)).toFixed(2)),\n      );\n      const maxVisible = Number(props.maxVisible);\n      if (!isNaN(maxVisible)) {\n        return Math.min(maxVisible, count);\n      }\n      return count;\n    }\n\n    const totalVisible = computed(() => {\n      const maxVisible = Number(props.maxVisible);\n      if (props.totalVisible) {\n        const total = parseInt(props.totalVisible as string, 10);\n        if (!isNaN(maxVisible)) {\n          return Math.min(total, maxVisible)\n        }\n        return total;\n      }\n      else if (itemCount.value >= 0) return itemCount.value;\n      return calcItemCount(innerWidth, 58);\n    });\n\n    const controls = computed(() => {\n      const prevDisabled = !!props.disabled || page.value <= start.value;\n      const nextDisabled =\n        !!props.disabled || page.value >= start.value + length.value - 1;\n      return {\n        first: {\n          disabled: prevDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            page.value = 1;\n            emit('change', 1, 'first');\n          },\n        },\n        prev: {\n          disabled: prevDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.max(1, page.value - 1);\n            page.value = to;\n            emit('change', to, 'prev');\n          },\n        },\n        next: {\n          disabled: nextDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.min(+length.value, page.value + 1);\n            page.value = to;\n            emit('change', to, 'next');\n          },\n        },\n        last: {\n          disabled: nextDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = +length.value;\n            page.value = +length.value;\n            emit('change', to, 'last');\n          },\n        },\n      };\n    });\n\n    const range = computed(() => {\n      if (\n        length.value <= 0 ||\n        isNaN(length.value) ||\n        length.value > Number.MAX_SAFE_INTEGER\n      ) {\n        return [];\n      }\n      if (totalVisible.value <= 1) {\n        return [page.value];\n      }\n      if (length.value <= totalVisible.value) {\n        return getRangeArr(length.value, start.value);\n      }\n      const even = totalVisible.value % 2 === 0;\n      const middle = even\n        ? totalVisible.value / 2\n        : Math.floor(totalVisible.value / 2);\n      const left = even ? middle : middle + 1;\n      const right = length.value - middle;\n\n      if (left - page.value >= 0) {\n        return [\n          ...getRangeArr(Math.max(1, totalVisible.value - 1), start.value),\n          'ellipsis',\n          length.value,\n        ];\n      } else if (page.value - right >= (even ? 1 : 0)) {\n        const rangeLength = totalVisible.value - 1;\n        const rangeStart = length.value - rangeLength + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n        ];\n      } else {\n        const rangeLength = Math.max(1, totalVisible.value - 3);\n        const rangeStart =\n          rangeLength === 1\n            ? page.value\n            : page.value - Math.ceil(rangeLength / 2) + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n          'ellipsis',\n          length.value,\n        ];\n      }\n    });\n\n    const { refs, updateRef } = useRefs<ComponentPublicInstance>();\n\n    function changePage(event: Event, to = 1) {\n      event.preventDefault();\n      page.value = to;\n      emit('change', to);\n    }\n\n    const items = computed(() => {\n      return range.value.map((item, index) => {\n        const ref = (e: any) => updateRef(e, index);\n\n        if (item === 'ellipsis') {\n          return {\n            active: false,\n            key: `ellipsis-${index}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: true,\n              disabled: true, // TODO: skipper\n            },\n          };\n        } else {\n          const active = item === page.value;\n          return {\n            active,\n            key: `item-${item}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: false,\n              disabled: !!props.disabled || +props.length < 2,\n              color: active ? props.activeColor : props.color,\n              variation: props.buttonVariation,\n              onClick: (e: MouseEvent) => changePage(e, item),\n            },\n          };\n        }\n      });\n    });\n\n    const styles = computed(() => {\n      let gap = undefined;\n      if (props.gap) {\n        const value = +props.gap;\n        if (!isNaN(value)) {\n          gap = toStyleSizeValue(value);\n        } else if (typeof props.gap === 'string') {\n          gap = props.gap;\n        }\n      }\n      return {\n        '--y-pagination__gap': gap,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'y-pagination',\n            { [`y-pagination--align-${props.align}`]: props.align !== 'start' },\n          ]}\n          role={'navigation'}\n          style={styles.value}\n          ref={resizeObservedRef}\n        >\n          <ul class={['y-pagination__list']}>\n            {props.showEndButton && (\n              <li key=\"first\" class=\"y-pagination__first\">\n                {slots.first ? (\n                  slots.first(controls.value.first)\n                ) : (\n                  <YButton {...controls.value.first}>\n                    {slots['first-icon'] ? (\n                      slots['first-icon']()\n                    ) : (\n                      <YIconPageControl type={'first'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n            <li key=\"prev\" class=\"y-pagination__prev\">\n              {slots.prev ? (\n                slots.prev(controls.value.prev)\n              ) : (\n                <YButton {...controls.value.prev}>\n                  {slots['prev-icon'] ? (\n                    slots['prev-icon']()\n                  ) : (\n                    <YIconPageControl type={'prev'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {items.value.map((item, index) => {\n              return (\n                <li\n                  key={item.key}\n                  class={[\n                    'y-pagination__item',\n                    { 'y-pagination__item--active': item.active },\n                  ]}\n                >\n                  <YButton {...item.props}>\n                    {item.props.ellipsis\n                      ? slots.ellipsis\n                        ? slots.ellipsis()\n                        : '...'\n                      : item.page}\n                  </YButton>\n                </li>\n              );\n            })}\n            <li key=\"next\" class=\"y-pagination__next\">\n              {slots.next ? (\n                slots.next(controls.value.next)\n              ) : (\n                <YButton {...controls.value.next}>\n                  {slots['next-icon'] ? (\n                    slots['next-icon']()\n                  ) : (\n                    <YIconPageControl type={'next'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {props.showEndButton && (\n              <li key=\"last\" class=\"y-pagination__last\">\n                {slots.last ? (\n                  slots.last(controls.value.last)\n                ) : (\n                  <YButton {...controls.value.last}>\n                    {slots['last-icon'] ? (\n                      slots['last-icon']()\n                    ) : (\n                      <YIconPageControl type={'last'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n          </ul>\n        </div>\n      );\n    });\n\n    return {\n      itemCount,\n      page,\n      refs,\n    };\n  },\n});\n\nexport type YPagination = InstanceType<typeof YPagination>;\n"],"mappings":"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"}

package/lib/components/snackbar/YSnackbar.mjs

@@ -1,4 +1,5 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { toRef } from '@vue/runtime-core';
 import { animate } from 'motion';
 import { computed, defineComponent, ref, watch, withModifiers } from 'vue';
 import { useModelDuplex } from "../../composables/communication.mjs";
@@ -68,6 +69,10 @@ export const YSnackbar = defineComponent({
     duration: {
       type: Number,
       default: 4000
+    },
+    closeClickContent: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props, _ref) {
@@ -77,6 +82,7 @@ export const YSnackbar = defineComponent({
     } = _ref;
     const active = useModelDuplex(props);
     const hover = ref(false);
+    const duration = toRef(props, 'duration');
     const classes = computed(() => {
       return {
         'y-snackbar': true
@@ -96,6 +102,8 @@ export const YSnackbar = defineComponent({
       if (second) {
         x = second;
         y = first;
+      } else if (first === 'bottom') {
+        y = 'bottom';
       } else {
         x = first;
       }
@@ -115,7 +123,7 @@ export const YSnackbar = defineComponent({
       start,
       stop,
       reset
-    } = useTimer(dismiss, props.duration);
+    } = useTimer(dismiss, duration);
     function setTimer() {
       if (props.duration > 0) {
         start();
@@ -128,6 +136,14 @@ export const YSnackbar = defineComponent({
         setTimer();
       }
     });
+    watch(() => props.duration, neo => {
+      if (!isNaN(neo) && active.value) {
+        reset();
+        if (!hover.value) {
+          setTimer();
+        }
+      }
+    });
     watch(active, neo => {
       if (neo) {
         setTimer();
@@ -139,7 +155,9 @@ export const YSnackbar = defineComponent({
     });
     function onClickContent(event) {
       emit('click', event);
-      active.value = false;
+      if (props.closeClickContent) {
+        active.value = false;
+      }
     }
     const proxyTransition = computed(() => {
       const {

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

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

package/lib/components/table/YDataTable.mjs

@@ -144,7 +144,9 @@ export const YDataTable = defineComponent({
       const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);
       const yTableProps = chooseProps(props, YTable.props);
       return _createVNode(YTable, _mergeProps({
-        "class": ['y-data-table']
+        "class": ['y-data-table', {
+          'y-data-table--no-data': !props.loading && props.items.length < 1 && !props.hideNoData
+        }]
       }, yTableProps, {
         "style": {
           '--y-table-head-height': toStyleSizeValue(headRect.value?.height)

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","provide","toRef","useRender","useResizeObserver","toStyleSizeValue","chooseProps","propsFactory","YDataTableBody","pressYDataTableBodyProps","YDataTableControl","YDataTableHead","pressYDataTableHeadProps","YDataTableLayer","YTable","pressYTableProps","createHeader","pressDataTableHeader","pressDataTableItemsProps","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","usePaginatedItems","pressDataTableSelectionProps","provideSelection","createSorting","pressDataTableSortProps","provideSorting","pressDataTableProps","width","String","Number","search","YDataTable","name","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","columns","headers","enableSelect","items","toggleSort","total","length","startIndex","endIndex","pageLength","setPageSize","setPage","paginatedItems","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","resizeObservedRef","headObserveRef","contentRect","headRect","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend","append"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, provide, toRef } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YDataTableBody, pressYDataTableBodyProps } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead, pressYDataTableHeadProps } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable, pressYTableProps } from './YTable';\nimport { createHeader, pressDataTableHeader } from './composibles/header';\nimport { pressDataTableItemsProps, useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n  usePaginatedItems,\n} from './composibles/pagination';\nimport {\n  pressDataTableSelectionProps,\n  provideSelection,\n} from './composibles/selection';\nimport {\n  createSorting,\n  pressDataTableSortProps,\n  provideSorting,\n} from './composibles/sorting';\nimport { YDataTableSlotProps } from './types';\n\nexport const pressDataTableProps = propsFactory(\n  {\n    ...pressYDataTableBodyProps(),\n    width: [String, Number] as PropType<string | number>,\n    search: String as PropType<string>,\n    ...pressDataTableHeader(),\n    ...pressDataTableItemsProps(),\n    ...pressDataTableSortProps(),\n    ...pressDataTableSelectionProps(),\n    ...pressYDataTableHeadProps(),\n    ...pressYTableProps(),\n  },\n  'DataTable',\n);\n\nexport const YDataTable = defineComponent({\n  name: 'YDataTable',\n  props: {\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (page: number) => true,\n    'update:pageSize': (pageSize: number) => true,\n    'update:sortBy': (sortBy: any) => true,\n    'update:options': (options: any) => true,\n    'click:row': (e: Event, value: { row: any }) => true,\n  },\n  setup(props, { slots, emit }) {\n    const { page, pageSize } = createPagination(props);\n    const { sortBy, multiSort } = createSorting(props);\n    const { columns, headers } = createHeader(props, {\n      enableSelect: toRef(props, 'enableSelect'),\n    });\n    const { items } = useItems(props, columns);\n\n    const { toggleSort } = provideSorting({ sortBy, multiSort, page });\n    const total = computed(() => items.value.length);\n    const { startIndex, endIndex, pageLength, setPageSize, setPage } =\n      providePagination({\n        page,\n        pageSize,\n        total,\n      });\n    const { paginatedItems } = usePaginatedItems({\n      items,\n      startIndex,\n      endIndex,\n      pageSize,\n    });\n    const {\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      someSelected,\n      allSelected,\n    } = provideSelection(props, { allItems: items, pageItems: items });\n\n    const { resizeObservedRef: headObserveRef, contentRect: headRect } =\n      useResizeObserver();\n\n    useOptions(\n      {\n        page,\n        pageSize,\n        search: toRef(props, 'search'),\n        sortBy,\n      },\n      emit,\n    );\n\n    provide('y-data-table', {\n      toggleSort,\n      sortBy,\n      headRect,\n    });\n\n    const slotProps = computed<YDataTableSlotProps>(() => {\n      return {\n        // pagination\n        page: page.value,\n        pageSize: pageSize.value,\n        pageLength: pageLength.value,\n        setPageSize,\n        setPage,\n        // sorting\n        sortBy: sortBy.value,\n        toggleSort,\n        // selection\n        someSelected: someSelected.value,\n        allSelected: allSelected.value,\n        isSelected,\n        select,\n        selectAll,\n        toggleSelect,\n        //\n        items: items.value,\n        columns: columns.value,\n        headers: headers.value,\n      };\n    });\n\n    useRender(() => {\n      const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n      const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n      const yTableProps = chooseProps(props, YTable.props);\n      return (\n        <YTable\n          class={['y-data-table']}\n          {...yTableProps}\n          style={{\n            '--y-table-head-height': toStyleSizeValue(headRect.value?.height),\n          }}\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer\n                    v-slots={slots}\n                    slot-props={slotProps.value}\n                  ></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead ref={headObserveRef}>\n                    <YDataTableHead\n                      v-slots={slots}\n                      {...yDataTableHeadProps}\n                    ></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody\n                      v-slots={slots}\n                      {...yDataTableBodyProps}\n                      items={paginatedItems.value}\n                    ></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                    append: slots['control.append'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n    return { paginatedItems };\n  },\n});\n\nexport type YDataTable = InstanceType<typeof YDataTable>;\n"],"mappings":"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"}
+{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","provide","toRef","useRender","useResizeObserver","toStyleSizeValue","chooseProps","propsFactory","YDataTableBody","pressYDataTableBodyProps","YDataTableControl","YDataTableHead","pressYDataTableHeadProps","YDataTableLayer","YTable","pressYTableProps","createHeader","pressDataTableHeader","pressDataTableItemsProps","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","usePaginatedItems","pressDataTableSelectionProps","provideSelection","createSorting","pressDataTableSortProps","provideSorting","pressDataTableProps","width","String","Number","search","YDataTable","name","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","columns","headers","enableSelect","items","toggleSort","total","length","startIndex","endIndex","pageLength","setPageSize","setPage","paginatedItems","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","resizeObservedRef","headObserveRef","contentRect","headRect","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","loading","hideNoData","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend","append"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, provide, toRef } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YDataTableBody, pressYDataTableBodyProps } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead, pressYDataTableHeadProps } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable, pressYTableProps } from './YTable';\nimport { createHeader, pressDataTableHeader } from './composibles/header';\nimport { pressDataTableItemsProps, useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n  usePaginatedItems,\n} from './composibles/pagination';\nimport {\n  pressDataTableSelectionProps,\n  provideSelection,\n} from './composibles/selection';\nimport {\n  createSorting,\n  pressDataTableSortProps,\n  provideSorting,\n} from './composibles/sorting';\nimport { YDataTableSlotProps } from './types';\n\nexport const pressDataTableProps = propsFactory(\n  {\n    ...pressYDataTableBodyProps(),\n    width: [String, Number] as PropType<string | number>,\n    search: String as PropType<string>,\n    ...pressDataTableHeader(),\n    ...pressDataTableItemsProps(),\n    ...pressDataTableSortProps(),\n    ...pressDataTableSelectionProps(),\n    ...pressYDataTableHeadProps(),\n    ...pressYTableProps(),\n  },\n  'DataTable',\n);\n\nexport const YDataTable = defineComponent({\n  name: 'YDataTable',\n  props: {\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (page: number) => true,\n    'update:pageSize': (pageSize: number) => true,\n    'update:sortBy': (sortBy: any) => true,\n    'update:options': (options: any) => true,\n    'click:row': (e: Event, value: { row: any }) => true,\n  },\n  setup(props, { slots, emit }) {\n    const { page, pageSize } = createPagination(props);\n    const { sortBy, multiSort } = createSorting(props);\n    const { columns, headers } = createHeader(props, {\n      enableSelect: toRef(props, 'enableSelect'),\n    });\n    const { items } = useItems(props, columns);\n\n    const { toggleSort } = provideSorting({ sortBy, multiSort, page });\n    const total = computed(() => items.value.length);\n    const { startIndex, endIndex, pageLength, setPageSize, setPage } =\n      providePagination({\n        page,\n        pageSize,\n        total,\n      });\n    const { paginatedItems } = usePaginatedItems({\n      items,\n      startIndex,\n      endIndex,\n      pageSize,\n    });\n    const {\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      someSelected,\n      allSelected,\n    } = provideSelection(props, { allItems: items, pageItems: items });\n\n    const { resizeObservedRef: headObserveRef, contentRect: headRect } =\n      useResizeObserver();\n\n    useOptions(\n      {\n        page,\n        pageSize,\n        search: toRef(props, 'search'),\n        sortBy,\n      },\n      emit,\n    );\n\n    provide('y-data-table', {\n      toggleSort,\n      sortBy,\n      headRect,\n    });\n\n    const slotProps = computed<YDataTableSlotProps>(() => {\n      return {\n        // pagination\n        page: page.value,\n        pageSize: pageSize.value,\n        pageLength: pageLength.value,\n        setPageSize,\n        setPage,\n        // sorting\n        sortBy: sortBy.value,\n        toggleSort,\n        // selection\n        someSelected: someSelected.value,\n        allSelected: allSelected.value,\n        isSelected,\n        select,\n        selectAll,\n        toggleSelect,\n        //\n        items: items.value,\n        columns: columns.value,\n        headers: headers.value,\n      };\n    });\n\n    useRender(() => {\n      const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n      const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n      const yTableProps = chooseProps(props, YTable.props);\n      return (\n        <YTable\n          class={[\n            'y-data-table',\n            {\n              'y-data-table--no-data':\n                !props.loading && props.items.length < 1 && !props.hideNoData,\n            },\n          ]}\n          {...yTableProps}\n          style={{\n            '--y-table-head-height': toStyleSizeValue(headRect.value?.height),\n          }}\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer\n                    v-slots={slots}\n                    slot-props={slotProps.value}\n                  ></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead ref={headObserveRef}>\n                    <YDataTableHead\n                      v-slots={slots}\n                      {...yDataTableHeadProps}\n                    ></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody\n                      v-slots={slots}\n                      {...yDataTableBodyProps}\n                      items={paginatedItems.value}\n                    ></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                    append: slots['control.append'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n    return { paginatedItems };\n  },\n});\n\nexport type YDataTable = InstanceType<typeof YDataTable>;\n"],"mappings":"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"}