yuyeon 0.0.14 → 0.0.16

package/lib/components/layer/YLayer.mjs

@@ -1,13 +1,15 @@
 import { mergeProps as _mergeProps, withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { Teleport, Transition, computed, defineComponent, mergeProps, reactive, ref, toRef, watchEffect, shallowRef } from "vue";
+import { Teleport, Transition, computed, defineComponent, mergeProps, reactive, ref, shallowRef, toRef, watchEffect } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { pressCoordinateProps, useCoordinate } from "../../composables/coordinate/index.mjs";
+import { pressDimensionPropsOptions, useDimension } from "../../composables/dimension.mjs";
 import { useLayerGroup } from "../../composables/layer-group.mjs";
+import { pressThemePropsOptions, useLocalTheme } from "../../composables/theme/index.mjs";
 import { useLazy } from "../../composables/timing.mjs";
 import { PolyTransition, polyTransitionPropOptions, usePolyTransition } from "../../composables/transition.mjs";
 import { ComplementClick } from "../../directives/complement-click/index.mjs";
 import { bindClasses, propsFactory } from "../../util/vue-component.mjs";
 import "./YLayer.scss";
-import { pressCoordinateProps, useCoordinate } from "../../composables/coordinate/index.mjs";
 export const pressYLayerProps = propsFactory({
   modelValue: {
     type: Boolean
@@ -27,7 +29,7 @@ export const pressYLayerProps = propsFactory({
   closeClickScrim: {
     type: Boolean
   },
-  persistent: Boolean,
+  modal: Boolean,
   contentStyles: {
     type: Object,
     default: () => {}
@@ -36,8 +38,10 @@ export const pressYLayerProps = propsFactory({
     type: Boolean,
     default: false
   },
+  ...pressThemePropsOptions(),
   ...polyTransitionPropOptions,
-  ...pressCoordinateProps()
+  ...pressCoordinateProps(),
+  ...pressDimensionPropsOptions()
 }, 'YLayer');
 export const YLayer = defineComponent({
   name: 'YLayer',
@@ -54,7 +58,7 @@ export const YLayer = defineComponent({
   emits: {
     'update:modelValue': value => true,
     'click:complement': mouseEvent => true,
-    'afterLeave': () => true
+    afterLeave: () => true
   },
   setup(props, _ref) {
     let {
@@ -63,18 +67,23 @@ export const YLayer = defineComponent({
       attrs,
       slots
     } = _ref;
-    const el$ = ref();
     const base$ = ref();
     const scrim$ = ref();
     const content$ = ref();
     const baseSlot = ref();
     const baseEl = ref();
+    const {
+      themeClasses
+    } = useLocalTheme(props);
     const {
       layerGroup
     } = useLayerGroup();
     const {
       polyTransitionBindProps
     } = usePolyTransition(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const active = computed({
       get: () => {
         return !!props.modelValue;
@@ -101,7 +110,7 @@ export const YLayer = defineComponent({
     });
     function onClickComplementLayer(mouseEvent) {
       emit('click:complement', mouseEvent);
-      if (!props.persistent) {
+      if (!props.modal) {
         if (scrim$.value !== null && scrim$.value === mouseEvent.target && props.closeClickScrim) {
           active.value = false;
         }
@@ -116,7 +125,7 @@ export const YLayer = defineComponent({
     const complementClickOption = reactive({
       handler: onClickComplementLayer,
       determine: closeConditional,
-      include: () => []
+      include: () => [baseEl.value]
     });
     function onAfterEnter() {
       finish.value = true;
@@ -192,7 +201,8 @@ export const YLayer = defineComponent({
           "class": {
             'y-layer': true,
             'y-layer--finish': finish.value,
-            ...computedClass.value
+            ...computedClass.value,
+            [themeClasses.value ?? '']: true
           },
           "style": computedStyle.value
         }, attrs), [_createVNode(Transition, {
@@ -215,6 +225,7 @@ export const YLayer = defineComponent({
               ...computedContentClasses.value
             },
             "style": [{
+              ...dimensionStyles.value,
               ...coordinateStyles.value,
               ...props.contentStyles
             }],
@@ -235,6 +246,7 @@ export const YLayer = defineComponent({
       onAfterUpdate: onAfterUpdate,
       scrim$,
       content$,
+      baseEl,
       polyTransitionBindProps,
       coordinateStyles
     };

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

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

package/lib/components/layer/YLayer.scss

@@ -12,6 +12,7 @@
   display: flex;
   inset: 0;
   position: fixed;
+  color: rgba(var(--y-theme-on-background), 1);
 
   &__scrim {
     pointer-events: auto;

package/lib/components/layer/scroll-strategies.mjs

@@ -1,5 +1,5 @@
 import { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue';
-import { FrameScheduler } from "../../util/FrameScheduler.mjs";
+import { FrameScheduler } from "../../util/frame-scheduler.mjs";
 import { getScrollParents, hasScrollbar } from "../../util/scroll.mjs";
 import { toStyleSizeValue } from "../../util/ui.mjs";
 import { propsFactory } from "../../util/vue-component.mjs";

package/lib/components/layer/scroll-strategies.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-strategies.mjs","names":["effectScope","nextTick","onScopeDispose","watchEffect","FrameScheduler","getScrollParents","hasScrollbar","toStyleSizeValue","propsFactory","frameScheduler","scrollStrategies","none","close","closeScrollStrategy","block","blockScrollStrategy","reposition","repositionScrollStrategy","pressScrollStrategyProps","scrollStrategy","type","String","Function","default","validator","val","useScrollStrategies","props","data","scope","stop","active","value","run","onScroll","e","bindScroll","baseEl","contentEl","BLOCKER_LAYER_CLASS","BLOCKER_CLASS","BLOCKER_SCROLL_X_VAR","BLOCKER_SCROLL_Y_VAR","BLOCKER_SCROLL_OFFSET_VAR","offsetParent","root","scrollElements","Set","contained","undefined","filter","el","classList","contains","scrollbarWidth","window","innerWidth","document","documentElement","offsetWidth","scrollableParent","add","forEach","i","style","setProperty","scrollLeft","scrollTop","x","parseFloat","getPropertyValue","y","removeProperty","remove","slow","raf","ric","update","requestNewFrame","start","performance","now","updateLevitation","time","requestIdleCallback","cb","cancelAnimationFrame","requestAnimationFrame","cancelIdleCallback","addEventListener","passive","removeEventListener"],"sources":["../../../src/components/layer/scroll-strategies.ts"],"sourcesContent":["import type { EffectScope, PropType, Ref } from 'vue';\nimport { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue';\n\nimport { FrameScheduler } from '../../util/FrameScheduler';\nimport { getScrollParents, hasScrollbar } from '../../util/scroll';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nconst frameScheduler = new FrameScheduler();\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>;\n  contentEl: Ref<HTMLElement | undefined>;\n  baseEl: Ref<HTMLElement | undefined>;\n  active: Ref<boolean>;\n  updateLevitation: Ref<((e: Event) => void) | undefined>;\n}\n\ntype ScrollStrategyFn = (\n  data: ScrollStrategyData,\n  props: StrategyProps,\n  scope: EffectScope,\n) => void;\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy,\n};\n\nexport interface StrategyProps {\n  scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFn;\n  contained: boolean | undefined;\n}\n\nexport const pressScrollStrategyProps = propsFactory(\n  {\n    scrollStrategy: {\n      type: [String, Function] as PropType<StrategyProps['scrollStrategy']>,\n      default: 'block',\n      validator: (val: any) =>\n        typeof val === 'function' || val in scrollStrategies,\n    },\n  },\n  'YLayer__scroll-strategies',\n);\n\nexport function useScrollStrategies(\n  props: StrategyProps,\n  data: ScrollStrategyData,\n) {\n  let scope: EffectScope | undefined;\n  watchEffect(async () => {\n    scope?.stop();\n\n    if (!(data.active.value && props.scrollStrategy)) return;\n\n    scope = effectScope();\n    await nextTick();\n    scope.active &&\n      scope.run(() => {\n        if (typeof props.scrollStrategy === 'function') {\n          props.scrollStrategy(data, props, scope!);\n        } else {\n          scrollStrategies[props.scrollStrategy]?.(data, props, scope!);\n        }\n      });\n  });\n\n  onScopeDispose(() => {\n    scope?.stop();\n  });\n}\n\nfunction closeScrollStrategy(data: ScrollStrategyData) {\n  function onScroll(e: Event) {\n    data.active.value = false;\n  }\n\n  bindScroll(data.baseEl.value ?? data.contentEl.value, onScroll);\n}\n\nconst BLOCKER_LAYER_CLASS = 'y-layer--scroll-blocked';\nconst BLOCKER_CLASS = 'y-layer-scroll-blocked';\nconst BLOCKER_SCROLL_X_VAR = '--y-body-scroll-x';\nconst BLOCKER_SCROLL_Y_VAR = '--y-body-scroll-y';\nconst BLOCKER_SCROLL_OFFSET_VAR = '--y-scrollbar-offset';\n\nfunction blockScrollStrategy(data: ScrollStrategyData, props: StrategyProps) {\n  const offsetParent = data.root.value?.offsetParent;\n  const scrollElements = [\n    ...new Set([\n      ...getScrollParents(\n        data.baseEl.value,\n        props.contained ? offsetParent : undefined,\n      ),\n      ...getScrollParents(\n        data.contentEl.value,\n        props.contained ? offsetParent : undefined,\n      ),\n    ]),\n  ].filter((el) => !el.classList.contains(BLOCKER_CLASS));\n  const scrollbarWidth =\n    window.innerWidth - document.documentElement.offsetWidth;\n\n  const scrollableParent = ((el) => hasScrollbar(el) && el)(\n    offsetParent || document.documentElement,\n  );\n  if (scrollableParent) {\n    data.root.value!.classList.add(BLOCKER_LAYER_CLASS);\n  }\n\n  scrollElements.forEach((el, i) => {\n    el.style.setProperty(\n      BLOCKER_SCROLL_X_VAR,\n      toStyleSizeValue(-el.scrollLeft) ?? null,\n    );\n    el.style.setProperty(\n      BLOCKER_SCROLL_Y_VAR,\n      toStyleSizeValue(-el.scrollTop) ?? null,\n    );\n    el.style.setProperty(\n      BLOCKER_SCROLL_OFFSET_VAR,\n      toStyleSizeValue(scrollbarWidth) ?? null,\n    );\n    el.classList.add(BLOCKER_LAYER_CLASS);\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el, i) => {\n      const x = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_X_VAR));\n      const y = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_Y_VAR));\n\n      el.style.removeProperty(BLOCKER_SCROLL_X_VAR);\n      el.style.removeProperty(BLOCKER_SCROLL_Y_VAR);\n      el.style.removeProperty(BLOCKER_SCROLL_OFFSET_VAR);\n      el.classList.remove(BLOCKER_CLASS);\n\n      el.scrollLeft = -x;\n      el.scrollTop = -y;\n    });\n    if (scrollableParent) {\n      data.root.value!.classList.remove(BLOCKER_LAYER_CLASS);\n    }\n  });\n}\n\nfunction repositionScrollStrategy(\n  data: ScrollStrategyData,\n  props: StrategyProps,\n  scope: EffectScope,\n) {\n  let slow = false;\n  let raf = -1;\n  let ric = -1;\n\n  function update(e: Event) {\n    frameScheduler.requestNewFrame(() => {\n      const start = performance.now();\n      data.updateLevitation.value?.(e);\n      const time = performance.now() - start;\n      slow = time / (1000 / 60) > 2;\n    });\n  }\n\n  ric = (\n    typeof requestIdleCallback === 'undefined'\n      ? (cb: Function) => cb()\n      : requestIdleCallback\n  )(() => {\n    scope.run(() => {\n      bindScroll(data.baseEl.value ?? data.contentEl.value, (e) => {\n        if (slow) {\n          // If the position calculation is slow,\n          // defer updates until scrolling is finished.\n          // Browsers usually fire one scroll event per frame so\n          // we just wait until we've got two frames without an event\n          cancelAnimationFrame(raf);\n          raf = requestAnimationFrame(() => {\n            raf = requestAnimationFrame(() => {\n              update(e);\n            });\n          });\n        } else {\n          update(e);\n        }\n      });\n    });\n  });\n\n  onScopeDispose(() => {\n    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);\n    cancelAnimationFrame(raf);\n  });\n}\n\n/** @private */\nfunction bindScroll(el: HTMLElement | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)];\n  scrollElements.forEach((el) => {\n    el.addEventListener('scroll', onScroll, { passive: true });\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el) => {\n      el.removeEventListener('scroll', onScroll);\n    });\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"scroll-strategies.mjs","names":["effectScope","nextTick","onScopeDispose","watchEffect","FrameScheduler","getScrollParents","hasScrollbar","toStyleSizeValue","propsFactory","frameScheduler","scrollStrategies","none","close","closeScrollStrategy","block","blockScrollStrategy","reposition","repositionScrollStrategy","pressScrollStrategyProps","scrollStrategy","type","String","Function","default","validator","val","useScrollStrategies","props","data","scope","stop","active","value","run","onScroll","e","bindScroll","baseEl","contentEl","BLOCKER_LAYER_CLASS","BLOCKER_CLASS","BLOCKER_SCROLL_X_VAR","BLOCKER_SCROLL_Y_VAR","BLOCKER_SCROLL_OFFSET_VAR","offsetParent","root","scrollElements","Set","contained","undefined","filter","el","classList","contains","scrollbarWidth","window","innerWidth","document","documentElement","offsetWidth","scrollableParent","add","forEach","i","style","setProperty","scrollLeft","scrollTop","x","parseFloat","getPropertyValue","y","removeProperty","remove","slow","raf","ric","update","requestNewFrame","start","performance","now","updateLevitation","time","requestIdleCallback","cb","cancelAnimationFrame","requestAnimationFrame","cancelIdleCallback","addEventListener","passive","removeEventListener"],"sources":["../../../src/components/layer/scroll-strategies.ts"],"sourcesContent":["import type { EffectScope, PropType, Ref } from 'vue';\nimport { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue';\n\nimport { FrameScheduler } from '../../util/frame-scheduler';\nimport { getScrollParents, hasScrollbar } from '../../util/scroll';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nconst frameScheduler = new FrameScheduler();\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>;\n  contentEl: Ref<HTMLElement | undefined>;\n  baseEl: Ref<HTMLElement | undefined>;\n  active: Ref<boolean>;\n  updateLevitation: Ref<((e: Event) => void) | undefined>;\n}\n\ntype ScrollStrategyFn = (\n  data: ScrollStrategyData,\n  props: StrategyProps,\n  scope: EffectScope,\n) => void;\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy,\n};\n\nexport interface StrategyProps {\n  scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFn;\n  contained: boolean | undefined;\n}\n\nexport const pressScrollStrategyProps = propsFactory(\n  {\n    scrollStrategy: {\n      type: [String, Function] as PropType<StrategyProps['scrollStrategy']>,\n      default: 'block',\n      validator: (val: any) =>\n        typeof val === 'function' || val in scrollStrategies,\n    },\n  },\n  'YLayer__scroll-strategies',\n);\n\nexport function useScrollStrategies(\n  props: StrategyProps,\n  data: ScrollStrategyData,\n) {\n  let scope: EffectScope | undefined;\n  watchEffect(async () => {\n    scope?.stop();\n\n    if (!(data.active.value && props.scrollStrategy)) return;\n\n    scope = effectScope();\n    await nextTick();\n    scope.active &&\n      scope.run(() => {\n        if (typeof props.scrollStrategy === 'function') {\n          props.scrollStrategy(data, props, scope!);\n        } else {\n          scrollStrategies[props.scrollStrategy]?.(data, props, scope!);\n        }\n      });\n  });\n\n  onScopeDispose(() => {\n    scope?.stop();\n  });\n}\n\nfunction closeScrollStrategy(data: ScrollStrategyData) {\n  function onScroll(e: Event) {\n    data.active.value = false;\n  }\n\n  bindScroll(data.baseEl.value ?? data.contentEl.value, onScroll);\n}\n\nconst BLOCKER_LAYER_CLASS = 'y-layer--scroll-blocked';\nconst BLOCKER_CLASS = 'y-layer-scroll-blocked';\nconst BLOCKER_SCROLL_X_VAR = '--y-body-scroll-x';\nconst BLOCKER_SCROLL_Y_VAR = '--y-body-scroll-y';\nconst BLOCKER_SCROLL_OFFSET_VAR = '--y-scrollbar-offset';\n\nfunction blockScrollStrategy(data: ScrollStrategyData, props: StrategyProps) {\n  const offsetParent = data.root.value?.offsetParent;\n  const scrollElements = [\n    ...new Set([\n      ...getScrollParents(\n        data.baseEl.value,\n        props.contained ? offsetParent : undefined,\n      ),\n      ...getScrollParents(\n        data.contentEl.value,\n        props.contained ? offsetParent : undefined,\n      ),\n    ]),\n  ].filter((el) => !el.classList.contains(BLOCKER_CLASS));\n  const scrollbarWidth =\n    window.innerWidth - document.documentElement.offsetWidth;\n\n  const scrollableParent = ((el) => hasScrollbar(el) && el)(\n    offsetParent || document.documentElement,\n  );\n  if (scrollableParent) {\n    data.root.value!.classList.add(BLOCKER_LAYER_CLASS);\n  }\n\n  scrollElements.forEach((el, i) => {\n    el.style.setProperty(\n      BLOCKER_SCROLL_X_VAR,\n      toStyleSizeValue(-el.scrollLeft) ?? null,\n    );\n    el.style.setProperty(\n      BLOCKER_SCROLL_Y_VAR,\n      toStyleSizeValue(-el.scrollTop) ?? null,\n    );\n    el.style.setProperty(\n      BLOCKER_SCROLL_OFFSET_VAR,\n      toStyleSizeValue(scrollbarWidth) ?? null,\n    );\n    el.classList.add(BLOCKER_LAYER_CLASS);\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el, i) => {\n      const x = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_X_VAR));\n      const y = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_Y_VAR));\n\n      el.style.removeProperty(BLOCKER_SCROLL_X_VAR);\n      el.style.removeProperty(BLOCKER_SCROLL_Y_VAR);\n      el.style.removeProperty(BLOCKER_SCROLL_OFFSET_VAR);\n      el.classList.remove(BLOCKER_CLASS);\n\n      el.scrollLeft = -x;\n      el.scrollTop = -y;\n    });\n    if (scrollableParent) {\n      data.root.value!.classList.remove(BLOCKER_LAYER_CLASS);\n    }\n  });\n}\n\nfunction repositionScrollStrategy(\n  data: ScrollStrategyData,\n  props: StrategyProps,\n  scope: EffectScope,\n) {\n  let slow = false;\n  let raf = -1;\n  let ric = -1;\n\n  function update(e: Event) {\n    frameScheduler.requestNewFrame(() => {\n      const start = performance.now();\n      data.updateLevitation.value?.(e);\n      const time = performance.now() - start;\n      slow = time / (1000 / 60) > 2;\n    });\n  }\n\n  ric = (\n    typeof requestIdleCallback === 'undefined'\n      ? (cb: Function) => cb()\n      : requestIdleCallback\n  )(() => {\n    scope.run(() => {\n      bindScroll(data.baseEl.value ?? data.contentEl.value, (e) => {\n        if (slow) {\n          // If the position calculation is slow,\n          // defer updates until scrolling is finished.\n          // Browsers usually fire one scroll event per frame so\n          // we just wait until we've got two frames without an event\n          cancelAnimationFrame(raf);\n          raf = requestAnimationFrame(() => {\n            raf = requestAnimationFrame(() => {\n              update(e);\n            });\n          });\n        } else {\n          update(e);\n        }\n      });\n    });\n  });\n\n  onScopeDispose(() => {\n    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);\n    cancelAnimationFrame(raf);\n  });\n}\n\n/** @private */\nfunction bindScroll(el: HTMLElement | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)];\n  scrollElements.forEach((el) => {\n    el.addEventListener('scroll', onScroll, { passive: true });\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el) => {\n      el.removeEventListener('scroll', onScroll);\n    });\n  });\n}\n"],"mappings":"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"}

package/lib/components/list/YList.mjs

@@ -1,15 +1,53 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { defineComponent } from 'vue';
+import { defineComponent, ref, shallowRef } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { pressThemePropsOptions, useLocalTheme } from "../../composables/theme/index.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
 import "./YList.scss";
+export const pressYListPropsOptions = propsFactory({
+  disabled: Boolean,
+  ...pressThemePropsOptions()
+}, 'YList');
 export const YList = defineComponent({
   name: 'YList',
+  props: {
+    ...pressYListPropsOptions()
+  },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
+    const el$ = ref();
+    const {
+      themeClasses
+    } = useLocalTheme(props);
+    const focused = shallowRef(false);
+    function onFocus(event) {
+      if (!focused.value && !(event.relatedTarget && el$.value?.contains(event.relatedTarget))) {
+        focus();
+      }
+    }
+    function onFocusIn(event) {
+      focused.value = true;
+    }
+    function onFocusOut(event) {
+      focused.value = false;
+    }
+    function onKeydown(event) {
+      //
+    }
+    function focus(target) {
+      //
+    }
     useRender(() => _createVNode(_Fragment, null, [_createVNode("div", {
-      "class": 'y-list'
+      "ref": el$,
+      "class": ['y-list', themeClasses.value],
+      "role": "listbox",
+      "tabindex": props.disabled || focused.value ? -1 : 0,
+      "onFocus": onFocus,
+      "onFocusin": onFocusIn,
+      "onFocusout": onFocusOut,
+      "onKeydown": onKeydown
     }, [slots.default?.()])]));
   }
 });

package/lib/components/list/YList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YList.mjs","names":["defineComponent","useRender","YList","name","setup","props","_ref","slots","_createVNode","_Fragment","default"],"sources":["../../../src/components/list/YList.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\n\r\nimport './YList.scss';\r\n\r\nexport const YList = defineComponent({\r\n  name: 'YList',\r\n  setup(props, { slots }) {\r\n    useRender(() => (\r\n      <>\r\n        <div class={'y-list'}>{slots.default?.()}</div>\r\n      </>\r\n    ));\r\n  },\r\n});\r\n\r\nexport type YList = InstanceType<typeof YList>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB;AAEA,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;EACnCG,IAAI,EAAE,OAAO;EACbC,KAAKA,CAACC,KAAK,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBL,SAAS,CAAC,MAAAO,YAAA,CAAAC,SAAA,SAAAD,YAAA;MAAA,SAEM;IAAQ,IAAGD,KAAK,CAACG,OAAO,GAAG,CAAC,IAE3C,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YList.mjs","names":["defineComponent","ref","shallowRef","useRender","pressThemePropsOptions","useLocalTheme","propsFactory","pressYListPropsOptions","disabled","Boolean","YList","name","props","setup","_ref","slots","el$","themeClasses","focused","onFocus","event","value","relatedTarget","contains","focus","onFocusIn","onFocusOut","onKeydown","target","_createVNode","_Fragment","default"],"sources":["../../../src/components/list/YList.tsx"],"sourcesContent":["import { defineComponent, ref, shallowRef } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YList.scss';\n\nexport const pressYListPropsOptions = propsFactory(\n  {\n    disabled: Boolean,\n    ...pressThemePropsOptions(),\n  },\n  'YList',\n);\n\nexport const YList = defineComponent({\n  name: 'YList',\n  props: {\n    ...pressYListPropsOptions(),\n  },\n  setup(props, { slots }) {\n    const el$ = ref<HTMLElement>();\n\n    const { themeClasses } = useLocalTheme(props);\n\n    const focused = shallowRef(false);\n\n    function onFocus(event: FocusEvent) {\n      if (!focused.value && !(event.relatedTarget && el$.value?.contains(event.relatedTarget as Node))) {\n        focus();\n      }\n    }\n\n    function onFocusIn(event: FocusEvent) {\n      focused.value = true;\n    }\n\n    function onFocusOut(event: FocusEvent) {\n      focused.value = false;\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      //\n    }\n\n    function focus(target?: string) {\n      //\n    }\n\n    useRender(() => (\n      <>\n        <div\n          ref={el$}\n          class={['y-list', themeClasses.value]}\n          role=\"listbox\"\n          tabindex={props.disabled || focused.value ? -1 : 0}\n          onFocus={onFocus}\n          onFocusin={onFocusIn}\n          onFocusout={onFocusOut}\n          onKeydown={onKeydown}\n        >\n          {slots.default?.()}\n        </div>\n      </>\n    ));\n  },\n});\n\nexport type YList = InstanceType<typeof YList>;\n"],"mappings":";AAAA,SAASA,eAAe,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAC,SAE9CC,SAAS;AAAA,SACTC,sBAAsB,EAAEC,aAAa;AAAA,SACrCC,YAAY;AAErB;AAEA,OAAO,MAAMC,sBAAsB,GAAGD,YAAY,CAChD;EACEE,QAAQ,EAAEC,OAAO;EACjB,GAAGL,sBAAsB,CAAC;AAC5B,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMM,KAAK,GAAGV,eAAe,CAAC;EACnCW,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACL,GAAGL,sBAAsB,CAAC;EAC5B,CAAC;EACDM,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,GAAG,GAAGf,GAAG,CAAc,CAAC;IAE9B,MAAM;MAAEgB;IAAa,CAAC,GAAGZ,aAAa,CAACO,KAAK,CAAC;IAE7C,MAAMM,OAAO,GAAGhB,UAAU,CAAC,KAAK,CAAC;IAEjC,SAASiB,OAAOA,CAACC,KAAiB,EAAE;MAClC,IAAI,CAACF,OAAO,CAACG,KAAK,IAAI,EAAED,KAAK,CAACE,aAAa,IAAIN,GAAG,CAACK,KAAK,EAAEE,QAAQ,CAACH,KAAK,CAACE,aAAqB,CAAC,CAAC,EAAE;QAChGE,KAAK,CAAC,CAAC;MACT;IACF;IAEA,SAASC,SAASA,CAACL,KAAiB,EAAE;MACpCF,OAAO,CAACG,KAAK,GAAG,IAAI;IACtB;IAEA,SAASK,UAAUA,CAACN,KAAiB,EAAE;MACrCF,OAAO,CAACG,KAAK,GAAG,KAAK;IACvB;IAEA,SAASM,SAASA,CAACP,KAAoB,EAAE;MACvC;IAAA;IAGF,SAASI,KAAKA,CAACI,MAAe,EAAE;MAC9B;IAAA;IAGFzB,SAAS,CAAC,MAAA0B,YAAA,CAAAC,SAAA,SAAAD,YAAA;MAAA,OAGCb,GAAG;MAAA,SACD,CAAC,QAAQ,EAAEC,YAAY,CAACI,KAAK,CAAC;MAAA,QAChC,SAAS;MAAA,YACJT,KAAK,CAACJ,QAAQ,IAAIU,OAAO,CAACG,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;MAAA,WACzCF,OAAO;MAAA,aACLM,SAAS;MAAA,cACRC,UAAU;MAAA,aACXC;IAAS,IAEnBZ,KAAK,CAACgB,OAAO,GAAG,CAAC,IAGvB,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/list/YListItem.mjs

@@ -1,35 +1,55 @@
 import { createVNode as _createVNode } from "vue";
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { pressThemePropsOptions, useLocalTheme } from "../../composables/theme/index.mjs";
 import { propsFactory } from "../../util/vue-component.mjs";
 import "./YListItem.scss";
 export const pressYListItemProps = propsFactory({
   tag: {
     type: String,
     default: 'div'
-  }
-}, 'y-list-item');
+  },
+  onClick: Function,
+  disabled: Boolean,
+  ...pressThemePropsOptions()
+}, 'YListItem');
 export const YListItem = defineComponent({
   name: 'YListItem',
   props: {
     ...pressYListItemProps()
   },
+  emits: {
+    click: e => true
+  },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
+    const {
+      themeClasses
+    } = useLocalTheme(props);
+    function onClick(e) {
+      emit('click', e);
+    }
+    const clickable = computed(() => {
+      return !props.disabled;
+    });
     useRender(() => {
       const ElTag = props.tag;
       return _createVNode(ElTag, {
-        "class": ['y-list-item']
+        "class": ['y-list-item', {
+          'y-list-item--pointer': clickable.value
+        }, themeClasses.value],
+        "onClick": onClick
       }, {
-        default: () => [slots.prepend && _createVNode("div", {
-          "class": 'y-list-item__prepend'
-        }, [slots.prepend()]), _createVNode("div", {
+        default: () => [slots.leading && _createVNode("div", {
+          "class": 'y-list-item__leading'
+        }, [slots.leading()]), _createVNode("div", {
           "class": 'y-list-item__content'
-        }, [slots.default?.()]), slots.append && _createVNode("div", {
-          "class": 'y-list-item__append'
-        }, [slots.append()])]
+        }, [slots.default?.()]), slots.trailing && _createVNode("div", {
+          "class": 'y-list-item__trailing'
+        }, [slots.trailing()])]
       });
     });
   }

package/lib/components/list/YListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YListItem.mjs","names":["defineComponent","useRender","propsFactory","pressYListItemProps","tag","type","String","default","YListItem","name","props","setup","_ref","slots","ElTag","_createVNode","prepend","append"],"sources":["../../../src/components/list/YListItem.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport './YListItem.scss';\n\nexport const pressYListItemProps = propsFactory({\n  tag: {\n    type: String,\n    default: 'div',\n  },\n}, 'y-list-item');\n\nexport const YListItem = defineComponent({\n  name: 'YListItem',\n  props: {\n    ...pressYListItemProps(),\n  },\n  setup(props, { slots }) {\n    useRender(() => {\n      const ElTag = props.tag as keyof HTMLElementTagNameMap;\n      return (\n        <ElTag class={['y-list-item']}>\n          {slots.prepend && (\n            <div class={'y-list-item__prepend'}>{slots.prepend()}</div>\n          )}\n          <div class={'y-list-item__content'}>{slots.default?.()}</div>\n          {slots.append && (\n            <div class={'y-list-item__append'}>{slots.append()}</div>\n          )}\n        </ElTag>\n      )\n    });\n  },\n});\n\nexport type YListItem = InstanceType<typeof YListItem>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,YAAY;AACrB;AAEA,OAAO,MAAMC,mBAAmB,GAAGD,YAAY,CAAC;EAC9CE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX;AACF,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMC,SAAS,GAAGR,eAAe,CAAC;EACvCS,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE;IACL,GAAGP,mBAAmB,CAAC;EACzB,CAAC;EACDQ,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBX,SAAS,CAAC,MAAM;MACd,MAAMa,KAAK,GAAGJ,KAAK,CAACN,GAAkC;MACtD,OAAAW,YAAA,CAAAD,KAAA;QAAA,SACgB,CAAC,aAAa;MAAC;QAAAP,OAAA,EAAAA,CAAA,MAC1BM,KAAK,CAACG,OAAO,IAAAD,YAAA;UAAA,SACA;QAAsB,IAAGF,KAAK,CAACG,OAAO,CAAC,CAAC,EACrD,EAAAD,YAAA;UAAA,SACW;QAAsB,IAAGF,KAAK,CAACN,OAAO,GAAG,CAAC,IACrDM,KAAK,CAACI,MAAM,IAAAF,YAAA;UAAA,SACC;QAAqB,IAAGF,KAAK,CAACI,MAAM,CAAC,CAAC,EACnD;MAAA;IAGP,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YListItem.mjs","names":["computed","defineComponent","useRender","pressThemePropsOptions","useLocalTheme","propsFactory","pressYListItemProps","tag","type","String","default","onClick","Function","disabled","Boolean","YListItem","name","props","emits","click","e","setup","_ref","slots","emit","themeClasses","clickable","ElTag","_createVNode","value","leading","trailing"],"sources":["../../../src/components/list/YListItem.tsx"],"sourcesContent":["import { computed, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YListItem.scss';\n\nexport const pressYListItemProps = propsFactory(\n  {\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    onClick: Function,\n    disabled: Boolean,\n    ...pressThemePropsOptions(),\n  },\n  'YListItem',\n);\n\nexport const YListItem = defineComponent({\n  name: 'YListItem',\n  props: {\n    ...pressYListItemProps(),\n  },\n  emits: {\n    click: (e: MouseEvent) => true,\n  },\n  setup(props, { slots, emit }) {\n    const { themeClasses } = useLocalTheme(props);\n\n    function onClick(e: MouseEvent) {\n      emit('click', e);\n    }\n\n    const clickable = computed(() => {\n      return !props.disabled;\n    });\n\n    useRender(() => {\n      const ElTag = props.tag as keyof HTMLElementTagNameMap;\n      return (\n        <ElTag\n          class={[\n            'y-list-item',\n            { 'y-list-item--pointer': clickable.value },\n            themeClasses.value,\n          ]}\n          onClick={onClick}\n        >\n          {slots.leading && (\n            <div class={'y-list-item__leading'}>{slots.leading()}</div>\n          )}\n          <div class={'y-list-item__content'}>{slots.default?.()}</div>\n          {slots.trailing && (\n            <div class={'y-list-item__trailing'}>{slots.trailing()}</div>\n          )}\n        </ElTag>\n      );\n    });\n  },\n});\n\nexport type YListItem = InstanceType<typeof YListItem>;\n"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEvCC,SAAS;AAAA,SACTC,sBAAsB,EAAEC,aAAa;AAAA,SACrCC,YAAY;AAErB;AAEA,OAAO,MAAMC,mBAAmB,GAAGD,YAAY,CAC7C;EACEE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDC,OAAO,EAAEC,QAAQ;EACjBC,QAAQ,EAAEC,OAAO;EACjB,GAAGX,sBAAsB,CAAC;AAC5B,CAAC,EACD,WACF,CAAC;AAED,OAAO,MAAMY,SAAS,GAAGd,eAAe,CAAC;EACvCe,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE;IACL,GAAGX,mBAAmB,CAAC;EACzB,CAAC;EACDY,KAAK,EAAE;IACLC,KAAK,EAAGC,CAAa,IAAK;EAC5B,CAAC;EACDC,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAM;MAAEG;IAAa,CAAC,GAAGrB,aAAa,CAACa,KAAK,CAAC;IAE7C,SAASN,OAAOA,CAACS,CAAa,EAAE;MAC9BI,IAAI,CAAC,OAAO,EAAEJ,CAAC,CAAC;IAClB;IAEA,MAAMM,SAAS,GAAG1B,QAAQ,CAAC,MAAM;MAC/B,OAAO,CAACiB,KAAK,CAACJ,QAAQ;IACxB,CAAC,CAAC;IAEFX,SAAS,CAAC,MAAM;MACd,MAAMyB,KAAK,GAAGV,KAAK,CAACV,GAAkC;MACtD,OAAAqB,YAAA,CAAAD,KAAA;QAAA,SAEW,CACL,aAAa,EACb;UAAE,sBAAsB,EAAED,SAAS,CAACG;QAAM,CAAC,EAC3CJ,YAAY,CAACI,KAAK,CACnB;QAAA,WACQlB;MAAO;QAAAD,OAAA,EAAAA,CAAA,MAEfa,KAAK,CAACO,OAAO,IAAAF,YAAA;UAAA,SACA;QAAsB,IAAGL,KAAK,CAACO,OAAO,CAAC,CAAC,EACrD,EAAAF,YAAA;UAAA,SACW;QAAsB,IAAGL,KAAK,CAACb,OAAO,GAAG,CAAC,IACrDa,KAAK,CAACQ,QAAQ,IAAAH,YAAA;UAAA,SACD;QAAuB,IAAGL,KAAK,CAACQ,QAAQ,CAAC,CAAC,EACvD;MAAA;IAGP,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/list/YListItem.scss

@@ -2,7 +2,6 @@
   position: relative;
   list-style: none;
   padding: 8px;
-  border-radius: 8px;
   display: flex;
   align-items: center;
   transition-duration: 0.24s;
@@ -40,11 +39,15 @@
     cursor: pointer;
   }
 
+  &--pointer {
+    cursor: pointer;
+  }
+
   &--category:hover:before {
     opacity: 0;
   }
 
-  &__prepend {
+  &__leading {
   }
 
   &__content {

package/lib/components/menu/YMenu.mjs

@@ -2,29 +2,24 @@ import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fr
 import { computed, defineComponent, ref, watch } from 'vue';
 import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
-import { pressCoordinateProps } from "../../composables/coordinate/index.mjs";
 import { polyTransitionPropOptions } from "../../composables/transition.mjs";
 import { toKebabCase } from "../../util/string.mjs";
 import { bindClasses, chooseProps } from "../../util/vue-component.mjs";
-import { YLayer } from "../layer/index.mjs";
+import { YLayer, pressYLayerProps } from "../layer/index.mjs";
 import "./YMenu.scss";
 const NAME = 'YMenu';
 const CLASS_NAME = toKebabCase(NAME);
 export const YMenuPropOptions = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
   menuClasses: {
     type: [Array, String, Object]
   },
-  disabled: {
+  openOnHover: {
     type: Boolean,
     default: false
   },
-  openOnHover: {
+  openOnClickBase: {
     type: Boolean,
-    default: false
+    default: true
   },
   closeOnClick: {
     type: Boolean
@@ -33,7 +28,7 @@ export const YMenuPropOptions = {
     type: Boolean,
     default: true
   },
-  ...pressCoordinateProps({
+  ...pressYLayerProps({
     coordinateStrategy: 'levitation'
   })
 };
@@ -50,7 +45,7 @@ export const YMenu = defineComponent({
       default: 'fade'
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'afterLeave'],
   setup(props, _ref) {
     let {
       slots,
@@ -85,6 +80,10 @@ export const YMenu = defineComponent({
       }
     }
     function onClick(e) {
+      e.stopPropagation();
+      if (!props.openOnClickBase) {
+        return;
+      }
       const currentActive = active.value;
       if (!props.disabled) {
         active.value = !currentActive;
@@ -112,16 +111,27 @@ export const YMenu = defineComponent({
         old.removeEventListener('click', onClick);
       }
     });
+    const computedContentClasses = computed(() => {
+      const boundClasses = bindClasses(props.contentClasses);
+      return {
+        ...boundClasses
+      };
+    });
     useRender(() => {
       return _createVNode(_Fragment, null, [_createVNode(YLayer, _mergeProps({
         "ref": el$,
-        "classes": classes.value,
-        "scrim": false,
-        "disabled": props.disabled,
-        "content-classes": ['y-menu__content'],
         "transition": props.transition,
-        "onClick:complement": onComplementClick
-      }, chooseProps(props, YLayer.props), {
+        "onClick:complement": onComplementClick,
+        "onAfterLeave": () => emit('afterLeave')
+      }, {
+        ...chooseProps(props, YLayer.props),
+        classes: classes.value,
+        scrim: false,
+        contentClasses: {
+          'y-menu__content': true,
+          ...computedContentClasses.value
+        }
+      }, {
         "modelValue": active.value,
         "onUpdate:modelValue": $event => active.value = $event
       }), {
@@ -140,7 +150,8 @@ export const YMenu = defineComponent({
       })]);
     });
     return {
-      el$
+      el$,
+      classes
     };
   }
 });

package/lib/components/menu/YMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YMenu.mjs","names":["computed","defineComponent","ref","watch","useModelDuplex","useRender","pressCoordinateProps","polyTransitionPropOptions","toKebabCase","bindClasses","chooseProps","YLayer","NAME","CLASS_NAME","YMenuPropOptions","modelValue","type","Boolean","default","menuClasses","Array","String","Object","disabled","openOnHover","closeOnClick","preventClip","coordinateStrategy","YMenu","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","classes","boundClasses","model","active","get","value","set","v","onMouseenter","e","onMouseleave","onClick","currentActive","onComplementClick","bindHover","el","addEventListener","unbindHover","removeEventListener","baseEl","neo","old","_createVNode","_Fragment","_mergeProps","$event","_len","arguments","length","args","_key","base","_len2","_key2"],"sources":["../../../src/components/menu/YMenu.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  ref,\n  watch,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport {\n  pressCoordinateProps,\n} from '../../composables/coordinate';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { toKebabCase } from '../../util/string';\nimport { bindClasses, chooseProps } from \"../../util/vue-component\";\nimport { YLayer } from '../layer';\n\nimport './YMenu.scss';\n\nconst NAME = 'YMenu';\nconst CLASS_NAME = toKebabCase(NAME);\n\nexport const YMenuPropOptions = {\n  modelValue: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  menuClasses: {\n    type: [Array, String, Object] as PropType<\n      string[] | string | Record<string, any>\n    >,\n  },\n  disabled: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  openOnHover: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  closeOnClick: {\n    type: Boolean,\n  },\n  preventClip: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  ...pressCoordinateProps({\n    coordinateStrategy: 'levitation',\n  }),\n};\n\n/**\n * #  Component\n */\nexport const YMenu = defineComponent({\n  name: NAME,\n  props: {\n    ...YMenuPropOptions,\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { slots, emit, expose }) {\n    const el$ = ref<typeof YLayer>();\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.menuClasses);\n      return {\n        ...boundClasses,\n        'y-menu': true,\n      };\n    });\n\n    const model = useModelDuplex(props);\n\n    const active = computed({\n      get: (): boolean => {\n        return !!model.value;\n      },\n      set: (v: boolean) => {\n        if (!(v && props.disabled)) model.value = v;\n      },\n    });\n\n    function onMouseenter(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = true;\n      }\n    }\n\n    function onMouseleave(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = false;\n      }\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    function onComplementClick(e: MouseEvent) {\n      if (active.value) {\n        active.value = false;\n      }\n    }\n\n    function bindHover(el: HTMLElement) {\n      el.addEventListener('mouseenter', onMouseenter);\n      el.addEventListener('mouseleave', onMouseleave);\n    }\n\n    function unbindHover(el: HTMLElement) {\n      el.removeEventListener('mouseenter', onMouseenter);\n      el.removeEventListener('mouseleave', onMouseleave);\n    }\n\n    watch(() => el$.value?.baseEl, (neo, old) => {\n      if (neo) {\n        bindHover(neo);\n        neo.addEventListener('click', onClick);\n      } else if (old) {\n        unbindHover(old);\n        old.removeEventListener('click', onClick);\n      }\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            ref={el$}\n            classes={classes.value}\n            scrim={false}\n            disabled={props.disabled}\n            content-classes={['y-menu__content']}\n            transition={props.transition}\n            onClick:complement={onComplementClick}\n            {...chooseProps(props, YLayer.props)}\n            v-model={active.value}\n          >\n            {{\n              default: (...args: any) => {\n                return <>{slots.default?.(...args) ?? ''}</>;\n              },\n              base: (...args: any[]) => slots.base?.(...args),\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      el$,\n    };\n  },\n});\n\nexport type YMenu = InstanceType<typeof YMenu>;\n"],"mappings":"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"}
+{"version":3,"file":"YMenu.mjs","names":["computed","defineComponent","ref","watch","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","chooseProps","YLayer","pressYLayerProps","NAME","CLASS_NAME","YMenuPropOptions","menuClasses","type","Array","String","Object","openOnHover","Boolean","default","openOnClickBase","closeOnClick","preventClip","coordinateStrategy","YMenu","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","classes","boundClasses","model","active","get","value","set","v","disabled","onMouseenter","e","onMouseleave","onClick","stopPropagation","currentActive","onComplementClick","bindHover","el","addEventListener","unbindHover","removeEventListener","baseEl","neo","old","computedContentClasses","contentClasses","_createVNode","_Fragment","_mergeProps","onAfterLeave","scrim","$event","_len","arguments","length","args","_key","base","_len2","_key2"],"sources":["../../../src/components/menu/YMenu.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, ref, watch } from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { toKebabCase } from '../../util/string';\nimport { bindClasses, chooseProps } from '../../util/vue-component';\nimport { YLayer, pressYLayerProps } from '../layer';\n\nimport './YMenu.scss';\n\nconst NAME = 'YMenu';\nconst CLASS_NAME = toKebabCase(NAME);\n\nexport const YMenuPropOptions = {\n  menuClasses: {\n    type: [Array, String, Object] as PropType<\n      string[] | string | Record<string, any>\n    >,\n  },\n  openOnHover: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  openOnClickBase: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  closeOnClick: {\n    type: Boolean,\n  },\n  preventClip: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  ...pressYLayerProps({\n    coordinateStrategy: 'levitation',\n  }),\n};\n\n/**\n * #  Component\n */\nexport const YMenu = defineComponent({\n  name: NAME,\n  props: {\n    ...YMenuPropOptions,\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  emits: ['update:modelValue', 'afterLeave'],\n  setup(props, { slots, emit, expose }) {\n    const el$ = ref<typeof YLayer>();\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.menuClasses);\n      return {\n        ...boundClasses,\n        'y-menu': true,\n      };\n    });\n\n    const model = useModelDuplex(props);\n\n    const active = computed({\n      get: (): boolean => {\n        return !!model.value;\n      },\n      set: (v: boolean) => {\n        if (!(v && props.disabled)) model.value = v;\n      },\n    });\n\n    function onMouseenter(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = true;\n      }\n    }\n\n    function onMouseleave(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = false;\n      }\n    }\n\n    function onClick(e: MouseEvent) {\n      e.stopPropagation();\n      if (!props.openOnClickBase) {\n        return;\n      }\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    function onComplementClick(e: Event) {\n      if (active.value) {\n        active.value = false;\n      }\n    }\n\n    function bindHover(el: HTMLElement) {\n      el.addEventListener('mouseenter', onMouseenter);\n      el.addEventListener('mouseleave', onMouseleave);\n    }\n\n    function unbindHover(el: HTMLElement) {\n      el.removeEventListener('mouseenter', onMouseenter);\n      el.removeEventListener('mouseleave', onMouseleave);\n    }\n\n    watch(\n      () => el$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          bindHover(neo);\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          unbindHover(old);\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\n      const boundClasses = bindClasses(props.contentClasses);\n      return {\n        ...boundClasses,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            ref={el$}\n            transition={props.transition}\n            onClick:complement={onComplementClick}\n            onAfterLeave={() => emit('afterLeave')}\n            {...{\n              ...chooseProps(props, YLayer.props),\n              classes: classes.value,\n              scrim: false,\n              contentClasses: {\n                'y-menu__content': true,\n                ...computedContentClasses.value,\n              },\n            }}\n            v-model={active.value}\n          >\n            {{\n              default: (...args: any) => {\n                return <>{slots.default?.(...args) ?? ''}</>;\n              },\n              base: (...args: any[]) => slots.base?.(...args),\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      el$,\n      classes,\n    };\n  },\n});\n\nexport type YMenu = InstanceType<typeof YMenu>;\n"],"mappings":"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"}