yuyeon 0.0.37 → 0.0.38-rc1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","getCurrentInstance","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","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","openOnHover","openDelay","closeDelay","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","setup","_ref","emit","expose","attrs","slots","vm","base$","scrim$","content$","baseSlot","baseEl","themeClasses","layerGroup","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","lazyValue","onAfterUpdate","rendered","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","hovered","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","onMouseenter","event","onMouseleave","isMe","vnode","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { CSSProperties, PropType, ComponentInternalInstance } from 'vue';\nimport {\n Teleport,\n Transition,\n computed,\n defineComponent,\n getCurrentInstance,\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 scrimOpacity: {\n type: Number as PropType<number>,\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\n contentStyles: {\n type: Object as PropType<CSSProperties>,\n default: () => {},\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 openDelay: {\n type: Number as PropType<number>,\n default: 200,\n },\n closeDelay: {\n type: Number as PropType<number>,\n default: 200,\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 modal: Boolean as PropType<boolean>,\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 vm = getCurrentInstance();\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, layerGroupState, getActiveLayers } = 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(toRef(props, 'eager'), active);\n const rendered = computed<boolean>(\n () => !disabled.value && (lazyValue.value || active.value),\n );\n\n const { coordinateStyles, updateCoordinate } = useCoordinate(props, {\n contentEl: content$,\n baseEl,\n 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 (\n (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\n active.value\n ); // 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 const hovered = ref(false);\n\n function onMouseenter(event: Event) {\n hovered.value = true;\n }\n\n function onMouseleave(event: Event) {\n hovered.value = false;\n }\n\n expose({\n scrim$,\n base$,\n content$,\n baseEl,\n active,\n onAfterUpdate,\n updateCoordinate,\n hovered,\n modal: computed(() => props.modal),\n getActiveLayers,\n isMe: (vnode: ComponentInternalInstance) => {\n return vnode === vm;\n },\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 onMouseenter={onMouseenter}\n onMouseleave={onMouseleave}\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 style={{ '--y-layer-scrim-opacity': props.scrimOpacity }}\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 lazyValue,\n onAfterUpdate: onAfterUpdate as () => void,\n scrim$,\n content$,\n baseEl,\n polyTransitionBindProps,\n coordinateStyles,\n layerGroupState,\n getActiveLayers,\n };\n },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","getCurrentInstance","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","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","openOnHover","openDelay","closeDelay","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","setup","_ref","emit","expose","attrs","slots","vm","base$","scrim$","content$","baseSlot","baseEl","themeClasses","layerGroup","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","lazyValue","onAfterUpdate","rendered","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","hovered","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","onMouseenter","event","onMouseleave","isMe","vnode","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { CSSProperties, ComponentInternalInstance, PropType } from 'vue';\nimport {\n Teleport,\n Transition,\n computed,\n defineComponent,\n getCurrentInstance,\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 scrimOpacity: {\n type: Number as PropType<number>,\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\n contentStyles: {\n type: Object as PropType<CSSProperties>,\n default: () => {},\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 openDelay: {\n type: Number as PropType<number>,\n default: 200,\n },\n closeDelay: {\n type: Number as PropType<number>,\n default: 200,\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 modal: Boolean as PropType<boolean>,\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 vm = getCurrentInstance();\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, layerGroupState, getActiveLayers } = 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(toRef(props, 'eager'), active);\n const rendered = computed<boolean>(\n () => !disabled.value && (lazyValue.value || active.value),\n );\n\n const { coordinateStyles, updateCoordinate } = useCoordinate(props, {\n contentEl: content$,\n baseEl,\n 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 (\n (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\n active.value\n ); // 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 const hovered = ref(false);\n\n function onMouseenter(event: Event) {\n hovered.value = true;\n }\n\n function onMouseleave(event: Event) {\n hovered.value = false;\n }\n\n expose({\n scrim$,\n base$,\n content$,\n baseEl,\n active,\n onAfterUpdate,\n updateCoordinate,\n hovered,\n modal: computed(() => props.modal),\n getActiveLayers,\n isMe: (vnode: ComponentInternalInstance) => {\n return vnode === vm;\n },\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 onMouseenter={onMouseenter}\n onMouseleave={onMouseleave}\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 style={{ '--y-layer-scrim-opacity': props.scrimOpacity }}\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 lazyValue,\n onAfterUpdate: onAfterUpdate as () => void,\n scrim$,\n content$,\n baseEl,\n polyTransitionBindProps,\n coordinateStyles,\n layerGroupState,\n getActiveLayers,\n };\n },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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"}
|
|
@@ -3,13 +3,13 @@ import { computed, defineComponent, ref, toRef, watch } from 'vue';
|
|
|
3
3
|
import { useModelDuplex } from "../../composables/communication.mjs";
|
|
4
4
|
import { useRender } from "../../composables/component.mjs";
|
|
5
5
|
import { polyTransitionPropOptions } from "../../composables/transition.mjs";
|
|
6
|
+
import { hasElementMouseEvent } from "../../util/dom.mjs";
|
|
6
7
|
import { toKebabCase } from "../../util/string.mjs";
|
|
7
8
|
import { bindClasses, chooseProps } from "../../util/vue-component.mjs";
|
|
8
9
|
import { YLayer, pressYLayerProps } from "../layer/index.mjs";
|
|
9
10
|
import { useDelay } from "../layer/active-delay.mjs";
|
|
10
|
-
import "./YMenu.scss";
|
|
11
11
|
import { useActiveStack } from "../layer/active-stack.mjs";
|
|
12
|
-
import
|
|
12
|
+
import "./YMenu.scss";
|
|
13
13
|
const NAME = 'YMenu';
|
|
14
14
|
const CLASS_NAME = toKebabCase(NAME);
|
|
15
15
|
export const YMenuPropOptions = {
|
|
@@ -34,8 +34,8 @@ export const YMenuPropOptions = {
|
|
|
34
34
|
preventCloseBubble: Boolean
|
|
35
35
|
};
|
|
36
36
|
|
|
37
|
-
/**
|
|
38
|
-
* # Component
|
|
37
|
+
/**
|
|
38
|
+
* # Component
|
|
39
39
|
*/
|
|
40
40
|
export const YMenu = defineComponent({
|
|
41
41
|
name: NAME,
|
|
@@ -120,10 +120,18 @@ export const YMenu = defineComponent({
|
|
|
120
120
|
}
|
|
121
121
|
return;
|
|
122
122
|
}
|
|
123
|
+
function testChildrenContains(target, layers) {
|
|
124
|
+
return layers.some(layer => {
|
|
125
|
+
return !layer.content$?.contains(target);
|
|
126
|
+
});
|
|
127
|
+
}
|
|
123
128
|
if (active.value) {
|
|
124
129
|
const parentContent = parent?.$el.value?.content$;
|
|
125
130
|
const parentModal = parent?.$el.value?.modal;
|
|
126
|
-
|
|
131
|
+
if (!(e.target && children.value.length && testChildrenContains(e.target, children.value))) {
|
|
132
|
+
active.value = false;
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
127
135
|
if (!(parentContent && !hasElementMouseEvent(e, parentContent)) && !parentModal) {
|
|
128
136
|
parent?.clear();
|
|
129
137
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YMenu.mjs","names":["computed","defineComponent","ref","toRef","watch","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","chooseProps","YLayer","pressYLayerProps","useDelay","useActiveStack","hasElementMouseEvent","NAME","CLASS_NAME","YMenuPropOptions","menuClasses","type","Array","String","Object","openOnClickBase","Boolean","default","closeCondition","Function","undefined","preventClip","coordinateStrategy","preventCloseBubble","YMenu","name","props","transition","emits","setup","_ref","slots","emit","expose","layer$","classes","boundClasses","model","active","get","value","set","v","disabled","hovered","children","parent","startOpenDelay","startCloseDelay","changeActive","openOnHover","length","onMouseenter","e","onMouseleave","onClick","stopPropagation","currentActive","onComplementClick","parentContent","$el","content$","parentModal","modal","clear","bindHover","el","addEventListener","unbindHover","removeEventListener","baseEl","neo","old","computedContentClasses","contentClasses","_createVNode","_Fragment","_mergeProps","onAfterLeave","scrim","$event","_len","arguments","args","_key","base","_len2","_key2","el$"],"sources":["../../../src/components/menu/YMenu.tsx"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport {computed, defineComponent, ref, toRef, watch} from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { pressCoordinateProps } from '../../composables/coordinate';\r\nimport { polyTransitionPropOptions } from '../../composables/transition';\r\nimport { toKebabCase } from '../../util/string';\r\nimport { bindClasses, chooseProps } from '../../util/vue-component';\r\nimport { YLayer, pressYLayerProps } from '../layer';\r\nimport { useDelay } from '../layer/active-delay';\r\n\r\nimport './YMenu.scss';\r\nimport {useActiveStack} from \"../layer/active-stack\";\r\nimport {hasElementMouseEvent} from \"../../util/dom\";\r\n\r\nconst NAME = 'YMenu';\r\nconst CLASS_NAME = toKebabCase(NAME);\r\n\r\nexport const YMenuPropOptions = {\r\n menuClasses: {\r\n type: [Array, String, Object] as PropType<\r\n string[] | string | Record<string, any>\r\n >,\r\n },\r\n openOnClickBase: {\r\n type: Boolean as PropType<boolean>,\r\n default: true,\r\n },\r\n closeCondition: {\r\n type: [Boolean, Function],\r\n default: undefined,\r\n },\r\n preventClip: {\r\n type: Boolean as PropType<boolean>,\r\n default: true,\r\n },\r\n ...pressYLayerProps({\r\n coordinateStrategy: 'levitation',\r\n }),\r\n preventCloseBubble: Boolean as PropType<boolean>,\r\n};\r\n\r\n/**\r\n * # Component\r\n */\r\nexport const YMenu = defineComponent({\r\n name: NAME,\r\n props: {\r\n ...YMenuPropOptions,\r\n transition: {\r\n ...polyTransitionPropOptions.transition,\r\n default: 'fade',\r\n },\r\n },\r\n emits: ['update:modelValue', 'afterLeave'],\r\n setup(props, { slots, emit, expose }) {\r\n const layer$ = ref<typeof YLayer>();\r\n\r\n const classes = computed(() => {\r\n const boundClasses = bindClasses(props.menuClasses);\r\n return {\r\n ...boundClasses,\r\n 'y-menu': true,\r\n };\r\n });\r\n\r\n const model = useModelDuplex(props);\r\n\r\n const active = computed({\r\n get: (): boolean => {\r\n return !!model.value;\r\n },\r\n set: (v: boolean) => {\r\n if (!(v && props.disabled)) model.value = v;\r\n },\r\n });\r\n\r\n const hovered = computed(() => !!layer$.value?.hovered);\r\n const { children, parent } = useActiveStack(layer$, active, toRef(props, 'preventCloseBubble'));\r\n const { startOpenDelay, startCloseDelay } = useDelay(\r\n props,\r\n (changeActive) => {\r\n if (!changeActive && props.openOnHover && !hovered.value && children.value.length === 0) {\r\n active.value = false;\r\n } else if (changeActive) {\r\n active.value = true;\r\n }\r\n },\r\n );\r\n\r\n function onMouseenter(e: MouseEvent) {\r\n if (props.openOnHover) {\r\n startOpenDelay();\r\n }\r\n }\r\n\r\n function onMouseleave(e: MouseEvent) {\r\n if (props.openOnHover) {\r\n startCloseDelay();\r\n }\r\n }\r\n\r\n watch(hovered, (value) => {\r\n if (!value) {\r\n startCloseDelay();\r\n }\r\n });\r\n\r\n function onClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n if (!props.openOnClickBase) {\r\n return;\r\n }\r\n const currentActive = active.value;\r\n if (!props.disabled) {\r\n active.value = !currentActive;\r\n }\r\n }\r\n\r\n function onComplementClick(e: Event) {\r\n if (props.closeCondition === false) {\r\n return;\r\n }\r\n if (typeof props.closeCondition === 'function') {\r\n if (props.closeCondition(e) === false) {\r\n active.value = false;\r\n }\r\n return;\r\n }\r\n if (active.value) {\r\n const parentContent = parent?.$el.value?.content$;\r\n const parentModal = parent?.$el.value?.modal;\r\n active.value = false;\r\n if (!(parentContent && !hasElementMouseEvent(e, parentContent)) && !parentModal) {\r\n parent?.clear();\r\n }\r\n }\r\n }\r\n\r\n function bindHover(el: HTMLElement) {\r\n el.addEventListener('mouseenter', onMouseenter);\r\n el.addEventListener('mouseleave', onMouseleave);\r\n }\r\n\r\n function unbindHover(el: HTMLElement) {\r\n el.removeEventListener('mouseenter', onMouseenter);\r\n el.removeEventListener('mouseleave', onMouseleave);\r\n }\r\n\r\n watch(\r\n () => layer$.value?.baseEl,\r\n (neo, old) => {\r\n if (neo) {\r\n bindHover(neo);\r\n neo.addEventListener('click', onClick);\r\n } else if (old) {\r\n unbindHover(old);\r\n old.removeEventListener('click', onClick);\r\n }\r\n },\r\n );\r\n\r\n const computedContentClasses = computed<Record<string, boolean>>(() => {\r\n const boundClasses = bindClasses(props.contentClasses);\r\n return {\r\n ...boundClasses,\r\n };\r\n });\r\n\r\n useRender(() => {\r\n return (\r\n <>\r\n <YLayer\r\n ref={layer$}\r\n transition={props.transition}\r\n onClick:complement={onComplementClick}\r\n onAfterLeave={() => emit('afterLeave')}\r\n {...{\r\n ...chooseProps(props, YLayer.props),\r\n classes: classes.value,\r\n scrim: false,\r\n contentClasses: {\r\n 'y-menu__content': true,\r\n ...computedContentClasses.value,\r\n },\r\n }}\r\n v-model={active.value}\r\n >\r\n {{\r\n default: (...args: any) => {\r\n return <>{slots.default?.(...args) ?? ''}</>;\r\n },\r\n base: (...args: any[]) => slots.base?.(...args),\r\n }}\r\n </YLayer>\r\n </>\r\n );\r\n });\r\n\r\n return {\r\n el$: layer$,\r\n classes,\r\n };\r\n },\r\n});\r\n\r\nexport type YMenu = InstanceType<typeof YMenu>;\r\n"],"mappings":";AACA,SAAQA,QAAQ,EAAEC,eAAe,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,QAAO,KAAK;AAAC,SAExDC,cAAc;AAAA,SACdC,SAAS;AAAA,SAETC,yBAAyB;AAAA,SACzBC,WAAW;AAAA,SACXC,WAAW,EAAEC,WAAW;AAAA,SACxBC,MAAM,EAAEC,gBAAgB;AAAA,SACxBC,QAAQ;AAEjB;AAAsB,SACdC,cAAc;AAAA,SACdC,oBAAoB;AAE5B,MAAMC,IAAI,GAAG,OAAO;AACpB,MAAMC,UAAU,GAAGT,WAAW,CAACQ,IAAI,CAAC;AAEpC,OAAO,MAAME,gBAAgB,GAAG;EAC9BC,WAAW,EAAE;IACXC,IAAI,EAAE,CAACC,KAAK,EAAEC,MAAM,EAAEC,MAAM;EAG9B,CAAC;EACDC,eAAe,EAAE;IACfJ,IAAI,EAAEK,OAA4B;IAClCC,OAAO,EAAE;EACX,CAAC;EACDC,cAAc,EAAE;IACdP,IAAI,EAAE,CAACK,OAAO,EAAEG,QAAQ,CAAC;IACzBF,OAAO,EAAEG;EACX,CAAC;EACDC,WAAW,EAAE;IACXV,IAAI,EAAEK,OAA4B;IAClCC,OAAO,EAAE;EACX,CAAC;EACD,GAAGd,gBAAgB,CAAC;IAClBmB,kBAAkB,EAAE;EACtB,CAAC,CAAC;EACFC,kBAAkB,EAAEP;AACtB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMQ,KAAK,GAAGhC,eAAe,CAAC;EACnCiC,IAAI,EAAElB,IAAI;EACVmB,KAAK,EAAE;IACL,GAAGjB,gBAAgB;IACnBkB,UAAU,EAAE;MACV,GAAG7B,yBAAyB,CAAC6B,UAAU;MACvCV,OAAO,EAAE;IACX;EACF,CAAC;EACDW,KAAK,EAAE,CAAC,mBAAmB,EAAE,YAAY,CAAC;EAC1CC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAA2B;IAAA,IAAzB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAO,CAAC,GAAAH,IAAA;IAClC,MAAMI,MAAM,GAAGzC,GAAG,CAAgB,CAAC;IAEnC,MAAM0C,OAAO,GAAG5C,QAAQ,CAAC,MAAM;MAC7B,MAAM6C,YAAY,GAAGpC,WAAW,CAAC0B,KAAK,CAAChB,WAAW,CAAC;MACnD,OAAO;QACL,GAAG0B,YAAY;QACf,QAAQ,EAAE;MACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,KAAK,GAAGzC,cAAc,CAAC8B,KAAK,CAAC;IAEnC,MAAMY,MAAM,GAAG/C,QAAQ,CAAC;MACtBgD,GAAG,EAAEA,CAAA,KAAe;QAClB,OAAO,CAAC,CAACF,KAAK,CAACG,KAAK;MACtB,CAAC;MACDC,GAAG,EAAGC,CAAU,IAAK;QACnB,IAAI,EAAEA,CAAC,IAAIhB,KAAK,CAACiB,QAAQ,CAAC,EAAEN,KAAK,CAACG,KAAK,GAAGE,CAAC;MAC7C;IACF,CAAC,CAAC;IAEF,MAAME,OAAO,GAAGrD,QAAQ,CAAC,MAAM,CAAC,CAAC2C,MAAM,CAACM,KAAK,EAAEI,OAAO,CAAC;IACvD,MAAM;MAAEC,QAAQ;MAAEC;IAAO,CAAC,GAAGzC,cAAc,CAAC6B,MAAM,EAAEI,MAAM,EAAE5C,KAAK,CAACgC,KAAK,EAAE,oBAAoB,CAAC,CAAC;IAC/F,MAAM;MAAEqB,cAAc;MAAEC;IAAgB,CAAC,GAAG5C,QAAQ,CAClDsB,KAAK,EACJuB,YAAY,IAAK;MAChB,IAAI,CAACA,YAAY,IAAIvB,KAAK,CAACwB,WAAW,IAAI,CAACN,OAAO,CAACJ,KAAK,IAAIK,QAAQ,CAACL,KAAK,CAACW,MAAM,KAAK,CAAC,EAAE;QACvFb,MAAM,CAACE,KAAK,GAAG,KAAK;MACtB,CAAC,MAAM,IAAIS,YAAY,EAAE;QACvBX,MAAM,CAACE,KAAK,GAAG,IAAI;MACrB;IACF,CACF,CAAC;IAED,SAASY,YAAYA,CAACC,CAAa,EAAE;MACnC,IAAI3B,KAAK,CAACwB,WAAW,EAAE;QACrBH,cAAc,CAAC,CAAC;MAClB;IACF;IAEA,SAASO,YAAYA,CAACD,CAAa,EAAE;MACnC,IAAI3B,KAAK,CAACwB,WAAW,EAAE;QACrBF,eAAe,CAAC,CAAC;MACnB;IACF;IAEArD,KAAK,CAACiD,OAAO,EAAGJ,KAAK,IAAK;MACxB,IAAI,CAACA,KAAK,EAAE;QACVQ,eAAe,CAAC,CAAC;MACnB;IACF,CAAC,CAAC;IAEF,SAASO,OAAOA,CAACF,CAAa,EAAE;MAC9BA,CAAC,CAACG,eAAe,CAAC,CAAC;MACnB,IAAI,CAAC9B,KAAK,CAACX,eAAe,EAAE;QAC1B;MACF;MACA,MAAM0C,aAAa,GAAGnB,MAAM,CAACE,KAAK;MAClC,IAAI,CAACd,KAAK,CAACiB,QAAQ,EAAE;QACnBL,MAAM,CAACE,KAAK,GAAG,CAACiB,aAAa;MAC/B;IACF;IAEA,SAASC,iBAAiBA,CAACL,CAAQ,EAAE;MACnC,IAAI3B,KAAK,CAACR,cAAc,KAAK,KAAK,EAAE;QAClC;MACF;MACA,IAAI,OAAOQ,KAAK,CAACR,cAAc,KAAK,UAAU,EAAE;QAC9C,IAAIQ,KAAK,CAACR,cAAc,CAACmC,CAAC,CAAC,KAAK,KAAK,EAAE;UACrCf,MAAM,CAACE,KAAK,GAAG,KAAK;QACtB;QACA;MACF;MACA,IAAIF,MAAM,CAACE,KAAK,EAAE;QAChB,MAAMmB,aAAa,GAAGb,MAAM,EAAEc,GAAG,CAACpB,KAAK,EAAEqB,QAAQ;QACjD,MAAMC,WAAW,GAAGhB,MAAM,EAAEc,GAAG,CAACpB,KAAK,EAAEuB,KAAK;QAC5CzB,MAAM,CAACE,KAAK,GAAG,KAAK;QACpB,IAAI,EAAEmB,aAAa,IAAI,CAACrD,oBAAoB,CAAC+C,CAAC,EAAEM,aAAa,CAAC,CAAC,IAAI,CAACG,WAAW,EAAE;UAC/EhB,MAAM,EAAEkB,KAAK,CAAC,CAAC;QACjB;MACF;IACF;IAEA,SAASC,SAASA,CAACC,EAAe,EAAE;MAClCA,EAAE,CAACC,gBAAgB,CAAC,YAAY,EAAEf,YAAY,CAAC;MAC/Cc,EAAE,CAACC,gBAAgB,CAAC,YAAY,EAAEb,YAAY,CAAC;IACjD;IAEA,SAASc,WAAWA,CAACF,EAAe,EAAE;MACpCA,EAAE,CAACG,mBAAmB,CAAC,YAAY,EAAEjB,YAAY,CAAC;MAClDc,EAAE,CAACG,mBAAmB,CAAC,YAAY,EAAEf,YAAY,CAAC;IACpD;IAEA3D,KAAK,CACH,MAAMuC,MAAM,CAACM,KAAK,EAAE8B,MAAM,EAC1B,CAACC,GAAG,EAAEC,GAAG,KAAK;MACZ,IAAID,GAAG,EAAE;QACPN,SAAS,CAACM,GAAG,CAAC;QACdA,GAAG,CAACJ,gBAAgB,CAAC,OAAO,EAAEZ,OAAO,CAAC;MACxC,CAAC,MAAM,IAAIiB,GAAG,EAAE;QACdJ,WAAW,CAACI,GAAG,CAAC;QAChBA,GAAG,CAACH,mBAAmB,CAAC,OAAO,EAAEd,OAAO,CAAC;MAC3C;IACF,CACF,CAAC;IAED,MAAMkB,sBAAsB,GAAGlF,QAAQ,CAA0B,MAAM;MACrE,MAAM6C,YAAY,GAAGpC,WAAW,CAAC0B,KAAK,CAACgD,cAAc,CAAC;MACtD,OAAO;QACL,GAAGtC;MACL,CAAC;IACH,CAAC,CAAC;IAEFvC,SAAS,CAAC,MAAM;MACd,OAAA8E,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAAzE,MAAA,EAAA2E,WAAA;QAAA,OAGW3C,MAAM;QAAA,cACCR,KAAK,CAACC,UAAU;QAAA,sBACR+B,iBAAiB;QAAA,gBACvBoB,CAAA,KAAM9C,IAAI,CAAC,YAAY;MAAC;QAEpC,GAAG/B,WAAW,CAACyB,KAAK,EAAExB,MAAM,CAACwB,KAAK,CAAC;QACnCS,OAAO,EAAEA,OAAO,CAACK,KAAK;QACtBuC,KAAK,EAAE,KAAK;QACZL,cAAc,EAAE;UACd,iBAAiB,EAAE,IAAI;UACvB,GAAGD,sBAAsB,CAACjC;QAC5B;MAAC;QAAA,cAEMF,MAAM,CAACE,KAAK;QAAA,uBAAAwC,MAAA,IAAZ1C,MAAM,CAACE,KAAK,GAAAwC;MAAA;QAGnB/D,OAAO,EAAE,SAAAA,CAAA,EAAkB;UAAA,SAAAgE,IAAA,GAAAC,SAAA,CAAA/B,MAAA,EAAdgC,IAAI,OAAAvE,KAAA,CAAAqE,IAAA,GAAAG,IAAA,MAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA;YAAJD,IAAI,CAAAC,IAAA,IAAAF,SAAA,CAAAE,IAAA;UAAA;UACf,OAAAT,YAAA,CAAAC,SAAA,SAAU7C,KAAK,CAACd,OAAO,GAAG,GAAGkE,IAAI,CAAC,IAAI,EAAE;QAC1C,CAAC;QACDE,IAAI,EAAE,SAAAA,CAAA;UAAA,SAAAC,KAAA,GAAAJ,SAAA,CAAA/B,MAAA,EAAIgC,IAAI,OAAAvE,KAAA,CAAA0E,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA;YAAJJ,IAAI,CAAAI,KAAA,IAAAL,SAAA,CAAAK,KAAA;UAAA;UAAA,OAAYxD,KAAK,CAACsD,IAAI,GAAG,GAAGF,IAAI,CAAC;QAAA;MAAA;IAKzD,CAAC,CAAC;IAEF,OAAO;MACLK,GAAG,EAAEtD,MAAM;MACXC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YMenu.mjs","names":["computed","defineComponent","ref","toRef","watch","useModelDuplex","useRender","polyTransitionPropOptions","hasElementMouseEvent","toKebabCase","bindClasses","chooseProps","YLayer","pressYLayerProps","useDelay","useActiveStack","NAME","CLASS_NAME","YMenuPropOptions","menuClasses","type","Array","String","Object","openOnClickBase","Boolean","default","closeCondition","Function","undefined","preventClip","coordinateStrategy","preventCloseBubble","YMenu","name","props","transition","emits","setup","_ref","slots","emit","expose","layer$","classes","boundClasses","model","active","get","value","set","v","disabled","hovered","children","parent","startOpenDelay","startCloseDelay","changeActive","openOnHover","length","onMouseenter","e","onMouseleave","onClick","stopPropagation","currentActive","onComplementClick","testChildrenContains","target","layers","some","layer","content$","contains","parentContent","$el","parentModal","modal","clear","bindHover","el","addEventListener","unbindHover","removeEventListener","baseEl","neo","old","computedContentClasses","contentClasses","_createVNode","_Fragment","_mergeProps","onAfterLeave","scrim","$event","_len","arguments","args","_key","base","_len2","_key2","el$"],"sources":["../../../src/components/menu/YMenu.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, ref, toRef, 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 { hasElementMouseEvent } from '../../util/dom';\nimport { toKebabCase } from '../../util/string';\nimport { bindClasses, chooseProps } from '../../util/vue-component';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useDelay } from '../layer/active-delay';\nimport { useActiveStack } from '../layer/active-stack';\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 openOnClickBase: {\n type: Boolean as PropType<boolean>,\n default: true,\n },\n closeCondition: {\n type: [Boolean, Function],\n default: undefined,\n },\n preventClip: {\n type: Boolean as PropType<boolean>,\n default: true,\n },\n ...pressYLayerProps({\n coordinateStrategy: 'levitation',\n }),\n preventCloseBubble: Boolean as PropType<boolean>,\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 layer$ = 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 const hovered = computed(() => !!layer$.value?.hovered);\n\n const { children, parent } = useActiveStack(\n layer$,\n active,\n toRef(props, 'preventCloseBubble'),\n );\n\n const { startOpenDelay, startCloseDelay } = useDelay(\n props,\n (changeActive) => {\n if (\n !changeActive &&\n props.openOnHover &&\n !hovered.value &&\n children.value.length === 0\n ) {\n active.value = false;\n } else if (changeActive) {\n active.value = true;\n }\n },\n );\n\n function onMouseenter(e: MouseEvent) {\n if (props.openOnHover) {\n startOpenDelay();\n }\n }\n\n function onMouseleave(e: MouseEvent) {\n if (props.openOnHover) {\n startCloseDelay();\n }\n }\n\n watch(hovered, (value) => {\n if (!value) {\n startCloseDelay();\n }\n });\n\n function 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 (props.closeCondition === false) {\n return;\n }\n\n if (typeof props.closeCondition === 'function') {\n if (props.closeCondition(e) === false) {\n active.value = false;\n }\n return;\n }\n\n function testChildrenContains(target: HTMLElement, layers: YLayer[]) {\n return layers.some((layer) => {\n return !layer.content$?.contains(target);\n });\n }\n\n if (active.value) {\n const parentContent = parent?.$el.value?.content$;\n const parentModal = parent?.$el.value?.modal;\n\n if (!(e.target && children.value.length && testChildrenContains(e.target as HTMLElement, children.value))) {\n active.value = false;\n return;\n }\n\n if (\n !(parentContent && !hasElementMouseEvent(e, parentContent)) &&\n !parentModal\n ) {\n parent?.clear();\n }\n }\n }\n\n function bindHover(el: HTMLElement) {\n el.addEventListener('mouseenter', onMouseenter);\n el.addEventListener('mouseleave', onMouseleave);\n }\n\n function unbindHover(el: HTMLElement) {\n el.removeEventListener('mouseenter', onMouseenter);\n el.removeEventListener('mouseleave', onMouseleave);\n }\n\n watch(\n () => layer$.value?.baseEl,\n (neo, old) => {\n if (neo) {\n bindHover(neo);\n 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={layer$}\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$: layer$,\n classes,\n };\n },\n});\n\nexport type YMenu = InstanceType<typeof YMenu>;\n"],"mappings":"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"}
|
package/package.json
CHANGED