yuyeon 0.0.19 → 0.0.21
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.
- package/dist/yuyeon.js +1893 -1785
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/index.mjs.map +1 -1
- package/lib/components/layer/YLayer.mjs +26 -3
- package/lib/components/layer/YLayer.mjs.map +1 -1
- package/lib/components/layer/active-delay.mjs +28 -0
- package/lib/components/layer/active-delay.mjs.map +1 -0
- package/lib/components/layer/active-stack.mjs +50 -0
- package/lib/components/layer/active-stack.mjs.map +1 -0
- package/lib/components/menu/YMenu.mjs +36 -11
- package/lib/components/menu/YMenu.mjs.map +1 -1
- package/lib/components/tab/YTab.mjs.map +1 -1
- package/lib/components/tab/YTabs.mjs.map +1 -1
- package/lib/components/tab/index.mjs.map +1 -1
- package/lib/composables/choice.mjs +186 -0
- package/lib/composables/choice.mjs.map +1 -0
- package/lib/util/dom.mjs +12 -0
- package/lib/util/dom.mjs.map +1 -1
- package/lib/util/vue-component.mjs.map +1 -1
- package/package.json +108 -108
- package/types/components/dialog/YDialog.d.ts +28 -0
- package/types/components/layer/YLayer.d.ts +61 -0
- package/types/components/layer/active-delay.d.ts +4 -0
- package/types/components/layer/active-stack.d.ts +16 -0
- package/types/components/menu/YMenu.d.ts +71 -10
- package/types/components/tab/YTab.d.ts +7 -0
- package/types/components/tab/YTabs.d.ts +15 -0
- package/types/components/tab/index.d.ts +2 -0
- package/types/components/tooltip/YTooltip.d.ts +29 -1
- package/types/util/dom.d.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\nexport * from './button';\nexport * from './input';\nexport * from './field-input';\nexport * from './form';\nexport * from './progress-bar';\nexport * from './card';\nexport * from './chip';\nexport * from './switch';\nexport * from './layer';\nexport * from './dialog';\nexport * from './snackbar';\nexport * from './tooltip';\nexport * from './transitions';\nexport * from './panel';\nexport * from './tree-view';\nexport * from './list';\nexport * from './icons';\nexport * from './table';\nexport * from './menu';\nexport * from './checkbox';\nexport * from './pagination';\nexport * from './loading';\nexport * from './dropdown';\nexport * from './select';\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\n"],"mappings":""}
|
|
@@ -38,6 +38,18 @@ export const pressYLayerProps = propsFactory({
|
|
|
38
38
|
type: Boolean,
|
|
39
39
|
default: false
|
|
40
40
|
},
|
|
41
|
+
openOnHover: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
default: false
|
|
44
|
+
},
|
|
45
|
+
openDelay: {
|
|
46
|
+
type: Number,
|
|
47
|
+
default: 200
|
|
48
|
+
},
|
|
49
|
+
closeDelay: {
|
|
50
|
+
type: Number,
|
|
51
|
+
default: 200
|
|
52
|
+
},
|
|
41
53
|
...pressThemePropsOptions(),
|
|
42
54
|
...polyTransitionPropOptions,
|
|
43
55
|
...pressCoordinateProps(),
|
|
@@ -97,7 +109,7 @@ export const YLayer = defineComponent({
|
|
|
97
109
|
const {
|
|
98
110
|
lazyValue,
|
|
99
111
|
onAfterUpdate
|
|
100
|
-
} = useLazy(!!props
|
|
112
|
+
} = useLazy(!!toRef(props, 'eager'), active);
|
|
101
113
|
const rendered = computed(() => !disabled.value && (lazyValue.value || active.value));
|
|
102
114
|
const {
|
|
103
115
|
coordinate,
|
|
@@ -119,7 +131,7 @@ export const YLayer = defineComponent({
|
|
|
119
131
|
}
|
|
120
132
|
}
|
|
121
133
|
function closeConditional() {
|
|
122
|
-
return active.value; // TODO: && groupTopLevel.value;
|
|
134
|
+
return (!props.openOnHover || props.openOnHover && !hovered.value) && active.value; // TODO: && groupTopLevel.value;
|
|
123
135
|
}
|
|
124
136
|
|
|
125
137
|
const complementClickOption = reactive({
|
|
@@ -172,6 +184,13 @@ export const YLayer = defineComponent({
|
|
|
172
184
|
...boundClasses
|
|
173
185
|
};
|
|
174
186
|
});
|
|
187
|
+
const hovered = ref(false);
|
|
188
|
+
function onMouseenter(event) {
|
|
189
|
+
hovered.value = true;
|
|
190
|
+
}
|
|
191
|
+
function onMouseleave(event) {
|
|
192
|
+
hovered.value = false;
|
|
193
|
+
}
|
|
175
194
|
expose({
|
|
176
195
|
scrim$,
|
|
177
196
|
base$,
|
|
@@ -179,7 +198,8 @@ export const YLayer = defineComponent({
|
|
|
179
198
|
baseEl,
|
|
180
199
|
active,
|
|
181
200
|
onAfterUpdate,
|
|
182
|
-
updateCoordinate
|
|
201
|
+
updateCoordinate,
|
|
202
|
+
hovered
|
|
183
203
|
});
|
|
184
204
|
useRender(() => {
|
|
185
205
|
const slotBase = slots.base?.({
|
|
@@ -204,6 +224,8 @@ export const YLayer = defineComponent({
|
|
|
204
224
|
...computedClass.value,
|
|
205
225
|
[themeClasses.value ?? '']: true
|
|
206
226
|
},
|
|
227
|
+
"onMouseenter": onMouseenter,
|
|
228
|
+
"onMouseleave": onMouseleave,
|
|
207
229
|
"style": computedStyle.value
|
|
208
230
|
}, attrs), [_createVNode(Transition, {
|
|
209
231
|
"name": "fade",
|
|
@@ -243,6 +265,7 @@ export const YLayer = defineComponent({
|
|
|
243
265
|
layerGroup,
|
|
244
266
|
active,
|
|
245
267
|
rendered,
|
|
268
|
+
lazyValue,
|
|
246
269
|
onAfterUpdate: onAfterUpdate,
|
|
247
270
|
scrim$,
|
|
248
271
|
content$,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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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"}
|
|
1
|
+
{"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","openOnHover","openDelay","Number","closeDelay","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","hovered","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","onMouseenter","event","onMouseleave","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 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 ...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(\n !!toRef(props, 'eager'),\n active,\n );\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 (\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 });\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 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 };\n },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export function useDelay(props, callback) {
|
|
2
|
+
const state = {};
|
|
3
|
+
function clearDelay(propKey) {
|
|
4
|
+
state[propKey] && window.clearTimeout(state[propKey]);
|
|
5
|
+
delete state[propKey];
|
|
6
|
+
}
|
|
7
|
+
function setDelay(propKey, timeout, resolve) {
|
|
8
|
+
state[propKey] = window.setTimeout(() => {
|
|
9
|
+
const active = propKey === 'openDelay';
|
|
10
|
+
callback?.(active);
|
|
11
|
+
resolve(active);
|
|
12
|
+
}, timeout);
|
|
13
|
+
}
|
|
14
|
+
const generateDelay = propKey => () => {
|
|
15
|
+
clearDelay('openDelay');
|
|
16
|
+
clearDelay('closeDelay');
|
|
17
|
+
const delayTime = props[propKey] ?? 0;
|
|
18
|
+
return new Promise(resolve => {
|
|
19
|
+
const delay = parseInt(String(delayTime), 10);
|
|
20
|
+
setDelay(propKey, delay, resolve);
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
return {
|
|
24
|
+
startOpenDelay: generateDelay('openDelay'),
|
|
25
|
+
startCloseDelay: generateDelay('closeDelay')
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=active-delay.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"active-delay.mjs","names":["useDelay","props","callback","state","clearDelay","propKey","window","clearTimeout","setDelay","timeout","resolve","setTimeout","active","generateDelay","delayTime","Promise","delay","parseInt","String","startOpenDelay","startCloseDelay"],"sources":["../../../src/components/layer/active-delay.ts"],"sourcesContent":["type DelayType = 'closeDelay' | 'openDelay';\n\nexport function useDelay(props: any, callback?: (active: boolean) => void) {\n const state: Partial<Record<DelayType, number>> = {};\n\n function clearDelay(propKey: DelayType) {\n state[propKey] && window.clearTimeout(state[propKey]);\n delete state[propKey];\n }\n\n function setDelay(propKey: DelayType, timeout: number, resolve: any) {\n state[propKey] = window.setTimeout(() => {\n const active = propKey === 'openDelay';\n callback?.(active);\n resolve(active);\n }, timeout);\n }\n\n const generateDelay = (propKey: DelayType) => () => {\n clearDelay('openDelay');\n clearDelay('closeDelay');\n const delayTime = props[propKey] ?? 0;\n return new Promise<boolean>((resolve) => {\n const delay = parseInt(String(delayTime), 10);\n setDelay(propKey, delay, resolve);\n });\n };\n\n return {\n startOpenDelay: generateDelay('openDelay'),\n startCloseDelay: generateDelay('closeDelay'),\n };\n}\n"],"mappings":"AAEA,OAAO,SAASA,QAAQA,CAACC,KAAU,EAAEC,QAAoC,EAAE;EACzE,MAAMC,KAAyC,GAAG,CAAC,CAAC;EAEpD,SAASC,UAAUA,CAACC,OAAkB,EAAE;IACtCF,KAAK,CAACE,OAAO,CAAC,IAAIC,MAAM,CAACC,YAAY,CAACJ,KAAK,CAACE,OAAO,CAAC,CAAC;IACrD,OAAOF,KAAK,CAACE,OAAO,CAAC;EACvB;EAEA,SAASG,QAAQA,CAACH,OAAkB,EAAEI,OAAe,EAAEC,OAAY,EAAE;IACnEP,KAAK,CAACE,OAAO,CAAC,GAAGC,MAAM,CAACK,UAAU,CAAC,MAAM;MACvC,MAAMC,MAAM,GAAGP,OAAO,KAAK,WAAW;MACtCH,QAAQ,GAAGU,MAAM,CAAC;MAClBF,OAAO,CAACE,MAAM,CAAC;IACjB,CAAC,EAAEH,OAAO,CAAC;EACb;EAEA,MAAMI,aAAa,GAAIR,OAAkB,IAAK,MAAM;IAClDD,UAAU,CAAC,WAAW,CAAC;IACvBA,UAAU,CAAC,YAAY,CAAC;IACxB,MAAMU,SAAS,GAAGb,KAAK,CAACI,OAAO,CAAC,IAAI,CAAC;IACrC,OAAO,IAAIU,OAAO,CAAWL,OAAO,IAAK;MACvC,MAAMM,KAAK,GAAGC,QAAQ,CAACC,MAAM,CAACJ,SAAS,CAAC,EAAE,EAAE,CAAC;MAC7CN,QAAQ,CAACH,OAAO,EAAEW,KAAK,EAAEN,OAAO,CAAC;IACnC,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IACLS,cAAc,EAAEN,aAAa,CAAC,WAAW,CAAC;IAC1CO,eAAe,EAAEP,aAAa,CAAC,YAAY;EAC7C,CAAC;AACH"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { getCurrentInstance, inject, provide, shallowRef, watch, watchPostEffect } from 'vue';
|
|
2
|
+
export const YUYEON_ACTIVE_STACK_KEY = Symbol.for('yuyeon.active-stack');
|
|
3
|
+
export function useActiveStack($el, active, sequential) {
|
|
4
|
+
const parent = inject(YUYEON_ACTIVE_STACK_KEY, null);
|
|
5
|
+
const children = shallowRef([]);
|
|
6
|
+
function push(instance) {
|
|
7
|
+
children.value.push(instance);
|
|
8
|
+
}
|
|
9
|
+
function pop(instance) {
|
|
10
|
+
if (instance) {
|
|
11
|
+
const index = children.value.findIndex(child => child === instance);
|
|
12
|
+
if (index > -1) {
|
|
13
|
+
children.value.splice(index, 1);
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
children.value.pop();
|
|
18
|
+
}
|
|
19
|
+
function clear() {
|
|
20
|
+
active.value = false;
|
|
21
|
+
const bubble = () => {
|
|
22
|
+
if (children.value.length === 0) {
|
|
23
|
+
parent?.clear();
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
if (!sequential?.value) {
|
|
27
|
+
watchPostEffect(bubble);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
watch(active, neo => {
|
|
31
|
+
if (neo) {
|
|
32
|
+
parent?.push(getCurrentInstance());
|
|
33
|
+
} else {
|
|
34
|
+
parent?.pop(getCurrentInstance());
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
provide(YUYEON_ACTIVE_STACK_KEY, {
|
|
38
|
+
push,
|
|
39
|
+
pop,
|
|
40
|
+
clear,
|
|
41
|
+
$el
|
|
42
|
+
});
|
|
43
|
+
return {
|
|
44
|
+
push,
|
|
45
|
+
pop,
|
|
46
|
+
parent,
|
|
47
|
+
children
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=active-stack.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"active-stack.mjs","names":["getCurrentInstance","inject","provide","shallowRef","watch","watchPostEffect","YUYEON_ACTIVE_STACK_KEY","Symbol","for","useActiveStack","$el","active","sequential","parent","children","push","instance","value","pop","index","findIndex","child","splice","clear","bubble","length","neo"],"sources":["../../../src/components/layer/active-stack.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\nimport {\n getCurrentInstance,\n inject,\n provide,\n shallowRef,\n watch,\n watchPostEffect,\n} from 'vue';\n\nimport { YLayer } from './YLayer';\n\ninterface ActiveStackProvide {\n push: (instance: any) => void;\n pop: (instance?: any) => void;\n clear: () => void;\n $el: Ref<typeof YLayer | undefined>\n}\n\nexport const YUYEON_ACTIVE_STACK_KEY: InjectionKey<ActiveStackProvide> =\n Symbol.for('yuyeon.active-stack');\n\nexport function useActiveStack(\n $el: Ref<typeof YLayer | undefined>,\n active: Ref<boolean>,\n sequential?: Ref<boolean | undefined>,\n) {\n const parent = inject(YUYEON_ACTIVE_STACK_KEY, null);\n const children = shallowRef<any[]>([]);\n\n function push(instance: any) {\n children.value.push(instance);\n }\n\n function pop(instance?: any) {\n if (instance) {\n const index = children.value.findIndex((child) => child === instance);\n if (index > -1) {\n children.value.splice(index, 1);\n return;\n }\n }\n children.value.pop();\n }\n\n function clear() {\n active.value = false;\n const bubble = () => {\n if (children.value.length === 0) {\n parent?.clear();\n }\n };\n if (!sequential?.value) {\n watchPostEffect(bubble);\n }\n }\n\n watch(active, (neo) => {\n if (neo) {\n parent?.push(getCurrentInstance());\n } else {\n parent?.pop(getCurrentInstance());\n }\n });\n\n provide(YUYEON_ACTIVE_STACK_KEY, {\n push,\n pop,\n clear,\n $el,\n });\n\n return {\n push,\n pop,\n parent,\n children,\n };\n}\n"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,KAAK,EACLC,eAAe,QACV,KAAK;AAWZ,OAAO,MAAMC,uBAAyD,GACpEC,MAAM,CAACC,GAAG,CAAC,qBAAqB,CAAC;AAEnC,OAAO,SAASC,cAAcA,CAC5BC,GAAmC,EACnCC,MAAoB,EACpBC,UAAqC,EACrC;EACA,MAAMC,MAAM,GAAGZ,MAAM,CAACK,uBAAuB,EAAE,IAAI,CAAC;EACpD,MAAMQ,QAAQ,GAAGX,UAAU,CAAQ,EAAE,CAAC;EAEtC,SAASY,IAAIA,CAACC,QAAa,EAAE;IAC3BF,QAAQ,CAACG,KAAK,CAACF,IAAI,CAACC,QAAQ,CAAC;EAC/B;EAEA,SAASE,GAAGA,CAACF,QAAc,EAAE;IAC3B,IAAIA,QAAQ,EAAE;MACZ,MAAMG,KAAK,GAAGL,QAAQ,CAACG,KAAK,CAACG,SAAS,CAAEC,KAAK,IAAKA,KAAK,KAAKL,QAAQ,CAAC;MACrE,IAAIG,KAAK,GAAG,CAAC,CAAC,EAAE;QACdL,QAAQ,CAACG,KAAK,CAACK,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC;QAC/B;MACF;IACF;IACAL,QAAQ,CAACG,KAAK,CAACC,GAAG,CAAC,CAAC;EACtB;EAEA,SAASK,KAAKA,CAAA,EAAG;IACfZ,MAAM,CAACM,KAAK,GAAG,KAAK;IACpB,MAAMO,MAAM,GAAGA,CAAA,KAAM;MACnB,IAAIV,QAAQ,CAACG,KAAK,CAACQ,MAAM,KAAK,CAAC,EAAE;QAC/BZ,MAAM,EAAEU,KAAK,CAAC,CAAC;MACjB;IACF,CAAC;IACD,IAAI,CAACX,UAAU,EAAEK,KAAK,EAAE;MACtBZ,eAAe,CAACmB,MAAM,CAAC;IACzB;EACF;EAEApB,KAAK,CAACO,MAAM,EAAGe,GAAG,IAAK;IACrB,IAAIA,GAAG,EAAE;MACPb,MAAM,EAAEE,IAAI,CAACf,kBAAkB,CAAC,CAAC,CAAC;IACpC,CAAC,MAAM;MACLa,MAAM,EAAEK,GAAG,CAAClB,kBAAkB,CAAC,CAAC,CAAC;IACnC;EACF,CAAC,CAAC;EAEFE,OAAO,CAACI,uBAAuB,EAAE;IAC/BS,IAAI;IACJG,GAAG;IACHK,KAAK;IACLb;EACF,CAAC,CAAC;EAEF,OAAO;IACLK,IAAI;IACJG,GAAG;IACHL,MAAM;IACNC;EACF,CAAC;AACH"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
|
|
2
|
-
import { computed, defineComponent, ref, watch } from 'vue';
|
|
2
|
+
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
6
|
import { toKebabCase } from "../../util/string.mjs";
|
|
7
7
|
import { bindClasses, chooseProps } from "../../util/vue-component.mjs";
|
|
8
8
|
import { YLayer, pressYLayerProps } from "../layer/index.mjs";
|
|
9
|
+
import { useDelay } from "../layer/active-delay.mjs";
|
|
9
10
|
import "./YMenu.scss";
|
|
11
|
+
import { useActiveStack } from "../layer/active-stack.mjs";
|
|
12
|
+
import { hasElementMouseEvent } from "../../util/dom.mjs";
|
|
10
13
|
const NAME = 'YMenu';
|
|
11
14
|
const CLASS_NAME = toKebabCase(NAME);
|
|
12
15
|
export const YMenuPropOptions = {
|
|
13
16
|
menuClasses: {
|
|
14
17
|
type: [Array, String, Object]
|
|
15
18
|
},
|
|
16
|
-
openOnHover: {
|
|
17
|
-
type: Boolean,
|
|
18
|
-
default: false
|
|
19
|
-
},
|
|
20
19
|
openOnClickBase: {
|
|
21
20
|
type: Boolean,
|
|
22
21
|
default: true
|
|
23
22
|
},
|
|
24
23
|
closeCondition: {
|
|
25
|
-
type: [Boolean, Function]
|
|
24
|
+
type: [Boolean, Function],
|
|
25
|
+
default: undefined
|
|
26
26
|
},
|
|
27
27
|
preventClip: {
|
|
28
28
|
type: Boolean,
|
|
@@ -30,11 +30,12 @@ export const YMenuPropOptions = {
|
|
|
30
30
|
},
|
|
31
31
|
...pressYLayerProps({
|
|
32
32
|
coordinateStrategy: 'levitation'
|
|
33
|
-
})
|
|
33
|
+
}),
|
|
34
|
+
preventCloseBubble: Boolean
|
|
34
35
|
};
|
|
35
36
|
|
|
36
|
-
/**
|
|
37
|
-
* # Component
|
|
37
|
+
/**
|
|
38
|
+
* # Component
|
|
38
39
|
*/
|
|
39
40
|
export const YMenu = defineComponent({
|
|
40
41
|
name: NAME,
|
|
@@ -69,16 +70,36 @@ export const YMenu = defineComponent({
|
|
|
69
70
|
if (!(v && props.disabled)) model.value = v;
|
|
70
71
|
}
|
|
71
72
|
});
|
|
73
|
+
const hovered = computed(() => !!el$.value?.hovered);
|
|
74
|
+
const {
|
|
75
|
+
children,
|
|
76
|
+
parent
|
|
77
|
+
} = useActiveStack(el$, active, toRef(props, 'preventCloseBubble'));
|
|
78
|
+
const {
|
|
79
|
+
startOpenDelay,
|
|
80
|
+
startCloseDelay
|
|
81
|
+
} = useDelay(props, changeActive => {
|
|
82
|
+
if (!changeActive && props.openOnHover && !hovered.value && children.value.length === 0) {
|
|
83
|
+
active.value = false;
|
|
84
|
+
} else if (changeActive) {
|
|
85
|
+
active.value = true;
|
|
86
|
+
}
|
|
87
|
+
});
|
|
72
88
|
function onMouseenter(e) {
|
|
73
89
|
if (props.openOnHover) {
|
|
74
|
-
|
|
90
|
+
startOpenDelay();
|
|
75
91
|
}
|
|
76
92
|
}
|
|
77
93
|
function onMouseleave(e) {
|
|
78
94
|
if (props.openOnHover) {
|
|
79
|
-
|
|
95
|
+
startCloseDelay();
|
|
80
96
|
}
|
|
81
97
|
}
|
|
98
|
+
watch(hovered, value => {
|
|
99
|
+
if (!value) {
|
|
100
|
+
startCloseDelay();
|
|
101
|
+
}
|
|
102
|
+
});
|
|
82
103
|
function onClick(e) {
|
|
83
104
|
e.stopPropagation();
|
|
84
105
|
if (!props.openOnClickBase) {
|
|
@@ -100,7 +121,11 @@ export const YMenu = defineComponent({
|
|
|
100
121
|
return;
|
|
101
122
|
}
|
|
102
123
|
if (active.value) {
|
|
124
|
+
const parentContent = parent?.$el.value?.content$;
|
|
103
125
|
active.value = false;
|
|
126
|
+
if (!(parentContent && !hasElementMouseEvent(e, parentContent))) {
|
|
127
|
+
parent?.clear();
|
|
128
|
+
}
|
|
104
129
|
}
|
|
105
130
|
}
|
|
106
131
|
function bindHover(el) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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","closeCondition","Function","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';\r\nimport { computed, defineComponent, ref, 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\n\r\nimport './YMenu.scss';\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 openOnHover: {\r\n type: Boolean as PropType<boolean>,\r\n default: false,\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 },\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};\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 el$ = 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 function onMouseenter(e: MouseEvent) {\r\n if (props.openOnHover) {\r\n active.value = true;\r\n }\r\n }\r\n\r\n function onMouseleave(e: MouseEvent) {\r\n if (props.openOnHover) {\r\n active.value = false;\r\n }\r\n }\r\n\r\n function 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\r\n if (active.value) {\r\n active.value = false;\r\n }\r\n }\r\n\r\n function bindHover(el: HTMLElement) {\r\n el.addEventListener('mouseenter', onMouseenter);\r\n el.addEventListener('mouseleave', onMouseleave);\r\n }\r\n\r\n function unbindHover(el: HTMLElement) {\r\n el.removeEventListener('mouseenter', onMouseenter);\r\n el.removeEventListener('mouseleave', onMouseleave);\r\n }\r\n\r\n watch(\r\n () => el$.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={el$}\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$,\r\n classes,\r\n };\r\n },\r\n});\r\n\r\nexport type YMenu = InstanceType<typeof YMenu>;\r\n"],"mappings":"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"}
|
|
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","el$","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$","clear","bindHover","el","addEventListener","unbindHover","removeEventListener","baseEl","neo","old","computedContentClasses","contentClasses","_createVNode","_Fragment","_mergeProps","onAfterLeave","scrim","$event","_len","arguments","args","_key","base","_len2","_key2"],"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 { toKebabCase } from '../../util/string';\nimport { bindClasses, chooseProps } from '../../util/vue-component';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useDelay } from '../layer/active-delay';\n\nimport './YMenu.scss';\nimport {useActiveStack} from \"../layer/active-stack\";\nimport {hasElementMouseEvent} from \"../../util/dom\";\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 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 const hovered = computed(() => !!el$.value?.hovered);\n const { children, parent } = useActiveStack(el$, active, toRef(props, 'preventCloseBubble'));\n const { startOpenDelay, startCloseDelay } = useDelay(\n props,\n (changeActive) => {\n if (!changeActive && props.openOnHover && !hovered.value && children.value.length === 0) {\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 if (typeof props.closeCondition === 'function') {\n if (props.closeCondition(e) === false) {\n active.value = false;\n }\n return;\n }\n if (active.value) {\n const parentContent = parent?.$el.value?.content$;\n active.value = false;\n if (!(parentContent && !hasElementMouseEvent(e, parentContent))) {\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 () => 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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YTab.mjs","names":["defineComponent","useRender","YButton","YTab","name","props","setup","_createVNode","_Fragment","default"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { YButton } from '../button';\n\nexport const YTab = defineComponent({\n name: 'YTab',\n props: {},\n setup() {\n useRender(() => {\n return (\n <>\n <YButton>\n <slot></slot>\n </YButton>\n </>\n );\n });\n\n return {};\n },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,OAAO;AAEhB,OAAO,MAAMC,IAAI,GAAGH,eAAe,CAAC;EAClCI,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,CAAC,CAAC;EACTC,KAAKA,CAAA,EAAG;IACNL,SAAS,CAAC,MAAM;MACd,OAAAM,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAAL,OAAA;QAAAO,OAAA,EAAAA,CAAA,MAAAF,YAAA;MAAA;IAOF,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YTab.mjs","names":["defineComponent","useRender","YButton","YTab","name","props","setup","_createVNode","_Fragment","default"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { YButton } from '../button';\r\n\r\nexport const YTab = defineComponent({\r\n name: 'YTab',\r\n props: {},\r\n setup() {\r\n useRender(() => {\r\n return (\r\n <>\r\n <YButton>\r\n <slot></slot>\r\n </YButton>\r\n </>\r\n );\r\n });\r\n\r\n return {};\r\n },\r\n});\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,OAAO;AAEhB,OAAO,MAAMC,IAAI,GAAGH,eAAe,CAAC;EAClCI,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,CAAC,CAAC;EACTC,KAAKA,CAAA,EAAG;IACNL,SAAS,CAAC,MAAM;MACd,OAAAM,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAAL,OAAA;QAAAO,OAAA,EAAAA,CAAA,MAAAF,YAAA;MAAA;IAOF,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YTabs.mjs","names":["defineComponent","useRender","useResizeObserver","propsFactory","pressYTabsPropOptions","YTabs","name","props","tag","type","String","default","setup","_ref","slots","resizeObservedRef","container$","contentRect","containerRect","content$","_createVNode"],"sources":["../../../src/components/tab/YTabs.tsx"],"sourcesContent":["import { PropType, defineComponent, ref } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { propsFactory } from '../../util/vue-component';\n\nexport const pressYTabsPropOptions = propsFactory({}, 'YTabs');\n\nexport const YTabs = defineComponent({\n name: 'YTabs',\n props: {\n tag: {\n type: String as PropType<'div' | 'nav' | 'ol' | 'ul'>,\n default: 'div',\n },\n },\n setup(props, { slots }) {\n const { resizeObservedRef: container$, contentRect: containerRect } =\n useResizeObserver();\n const { resizeObservedRef: content$, contentRect } = useResizeObserver();\n\n useRender(() => {\n return (\n <props.tag class={['y-tabs']}>\n <div\n key=\"container\"\n ref={container$}\n class={['y-tabs__container']}\n >\n <div key=\"content\" ref={content$}>\n {slots.default?.()}\n </div>\n </div>\n </props.tag>\n );\n });\n\n return {};\n },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAa,KAAK;AAAC,SAE5CC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,YAAY;AAErB,OAAO,MAAMC,qBAAqB,GAAGD,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;AAE9D,OAAO,MAAME,KAAK,GAAGL,eAAe,CAAC;EACnCM,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHC,IAAI,EAAEC,MAA+C;MACrDC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,KAAKA,CAACL,KAAK,EAAAM,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB,EAAEC,UAAU;MAAEC,WAAW,EAAEC;IAAc,CAAC,GACjEhB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEa,iBAAiB,EAAEI,QAAQ;MAAEF;IAAY,CAAC,GAAGf,iBAAiB,CAAC,CAAC;IAExED,SAAS,CAAC,MAAM;MACd,OAAAmB,YAAA,CAAAb,KAAA,CAAAC,GAAA;QAAA,SACoB,CAAC,QAAQ;MAAC;QAAAG,OAAA,EAAAA,CAAA,MAAAS,YAAA;UAAA,OAEpB,WAAW;UAAA,OACVJ,UAAU;UAAA,SACR,CAAC,mBAAmB;QAAC,IAAAI,YAAA;UAAA,OAEnB,SAAS;UAAA,OAAMD;QAAQ,IAC7BL,KAAK,CAACH,OAAO,GAAG,CAAC;MAAA;IAK5B,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YTabs.mjs","names":["defineComponent","useRender","useResizeObserver","propsFactory","pressYTabsPropOptions","YTabs","name","props","tag","type","String","default","setup","_ref","slots","resizeObservedRef","container$","contentRect","containerRect","content$","_createVNode"],"sources":["../../../src/components/tab/YTabs.tsx"],"sourcesContent":["import { PropType, defineComponent, ref } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useResizeObserver } from '../../composables/resize-observer';\r\nimport { propsFactory } from '../../util/vue-component';\r\n\r\nexport const pressYTabsPropOptions = propsFactory({}, 'YTabs');\r\n\r\nexport const YTabs = defineComponent({\r\n name: 'YTabs',\r\n props: {\r\n tag: {\r\n type: String as PropType<'div' | 'nav' | 'ol' | 'ul'>,\r\n default: 'div',\r\n },\r\n },\r\n setup(props, { slots }) {\r\n const { resizeObservedRef: container$, contentRect: containerRect } =\r\n useResizeObserver();\r\n const { resizeObservedRef: content$, contentRect } = useResizeObserver();\r\n\r\n useRender(() => {\r\n return (\r\n <props.tag class={['y-tabs']}>\r\n <div\r\n key=\"container\"\r\n ref={container$}\r\n class={['y-tabs__container']}\r\n >\r\n <div key=\"content\" ref={content$}>\r\n {slots.default?.()}\r\n </div>\r\n </div>\r\n </props.tag>\r\n );\r\n });\r\n\r\n return {};\r\n },\r\n});\r\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAa,KAAK;AAAC,SAE5CC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,YAAY;AAErB,OAAO,MAAMC,qBAAqB,GAAGD,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;AAE9D,OAAO,MAAME,KAAK,GAAGL,eAAe,CAAC;EACnCM,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHC,IAAI,EAAEC,MAA+C;MACrDC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,KAAKA,CAACL,KAAK,EAAAM,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB,EAAEC,UAAU;MAAEC,WAAW,EAAEC;IAAc,CAAC,GACjEhB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEa,iBAAiB,EAAEI,QAAQ;MAAEF;IAAY,CAAC,GAAGf,iBAAiB,CAAC,CAAC;IAExED,SAAS,CAAC,MAAM;MACd,OAAAmB,YAAA,CAAAb,KAAA,CAAAC,GAAA;QAAA,SACoB,CAAC,QAAQ;MAAC;QAAAG,OAAA,EAAAA,CAAA,MAAAS,YAAA;UAAA,OAEpB,WAAW;UAAA,OACVJ,UAAU;UAAA,SACR,CAAC,mBAAmB;QAAC,IAAAI,YAAA;UAAA,OAEnB,SAAS;UAAA,OAAMD;QAAQ,IAC7BL,KAAK,CAACH,OAAO,GAAG,CAAC;MAAA;IAK5B,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\nexport * from './YTab';\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\r\nexport * from './YTab';\r\n"],"mappings":""}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, provide, reactive, toRef, watch } from 'vue';
|
|
2
|
+
import { wrapInArray } from "../util/array.mjs";
|
|
3
|
+
import { deepEqual } from "../util/common.mjs";
|
|
4
|
+
import { findChildrenWithProvide, getUid, propsFactory } from "../util/vue-component.mjs";
|
|
5
|
+
import { useModelDuplex } from "./communication.mjs";
|
|
6
|
+
export const pressChoicePropsOptions = propsFactory({
|
|
7
|
+
modelValue: {
|
|
8
|
+
type: null,
|
|
9
|
+
default: undefined
|
|
10
|
+
},
|
|
11
|
+
multiple: Boolean,
|
|
12
|
+
mandatory: [Boolean, String],
|
|
13
|
+
max: Number,
|
|
14
|
+
selectedClass: String,
|
|
15
|
+
disabled: Boolean
|
|
16
|
+
}, 'choice');
|
|
17
|
+
export const pressChoiceItemPropsOptions = propsFactory({
|
|
18
|
+
value: null,
|
|
19
|
+
disabled: Boolean,
|
|
20
|
+
selectedClass: String
|
|
21
|
+
}, 'choice-item');
|
|
22
|
+
export function useChoiceItem(props, injectKey) {
|
|
23
|
+
let required = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
24
|
+
const vm = getCurrentInstance();
|
|
25
|
+
if (!vm) {
|
|
26
|
+
throw new Error('"useChoiceItem" must be used inside a component setup function');
|
|
27
|
+
}
|
|
28
|
+
const id = getUid();
|
|
29
|
+
provide(Symbol.for(`${injectKey.description}:id`), id);
|
|
30
|
+
const choiceProvider = inject(injectKey, null);
|
|
31
|
+
if (!choiceProvider) {
|
|
32
|
+
if (!required) return choiceProvider;
|
|
33
|
+
throw new Error(`Not found provider`);
|
|
34
|
+
}
|
|
35
|
+
const value = toRef(props, 'value');
|
|
36
|
+
const disabled = computed(() => !!(choiceProvider.disabled.value || props.disabled));
|
|
37
|
+
choiceProvider.register({
|
|
38
|
+
id,
|
|
39
|
+
value,
|
|
40
|
+
disabled
|
|
41
|
+
}, vm);
|
|
42
|
+
onBeforeUnmount(() => {
|
|
43
|
+
choiceProvider.unregister(id);
|
|
44
|
+
});
|
|
45
|
+
const isSelected = computed(() => {
|
|
46
|
+
return choiceProvider.isSelected(id);
|
|
47
|
+
});
|
|
48
|
+
const selectedClass = computed(() => isSelected.value && [choiceProvider.selectedClass.value, props.selectedClass]);
|
|
49
|
+
watch(isSelected, value => {
|
|
50
|
+
vm.emit('group:selected', {
|
|
51
|
+
value
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
return {
|
|
55
|
+
id,
|
|
56
|
+
isSelected,
|
|
57
|
+
toggle: () => choiceProvider.select(id, !isSelected.value),
|
|
58
|
+
select: value => choiceProvider.select(id, value),
|
|
59
|
+
selectedClass,
|
|
60
|
+
value,
|
|
61
|
+
disabled,
|
|
62
|
+
provider: choiceProvider
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
export function useChoice(props, injectKey) {
|
|
66
|
+
let isUnmounted = false;
|
|
67
|
+
const items = reactive([]);
|
|
68
|
+
const selected = useModelDuplex(props, 'modelValue', [], v => {
|
|
69
|
+
if (v == null) return [];
|
|
70
|
+
return getIds(items, wrapInArray(v));
|
|
71
|
+
}, v => {
|
|
72
|
+
const arr = getValues(items, v);
|
|
73
|
+
return props.multiple ? arr : arr[0];
|
|
74
|
+
});
|
|
75
|
+
const groupVm = getCurrentInstance();
|
|
76
|
+
function register(item, vm) {
|
|
77
|
+
const unwrapped = item;
|
|
78
|
+
const key = Symbol.for(`${injectKey.description}:id`);
|
|
79
|
+
const children = findChildrenWithProvide(key, groupVm?.vnode);
|
|
80
|
+
const index = children.indexOf(vm);
|
|
81
|
+
if (index > -1) {
|
|
82
|
+
items.splice(index, 0, unwrapped);
|
|
83
|
+
} else {
|
|
84
|
+
items.push(unwrapped);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
function unregister(id) {
|
|
88
|
+
if (isUnmounted) return;
|
|
89
|
+
forceMandatoryValue();
|
|
90
|
+
const index = items.findIndex(item => item.id === id);
|
|
91
|
+
items.splice(index, 1);
|
|
92
|
+
}
|
|
93
|
+
function forceMandatoryValue() {
|
|
94
|
+
const item = items.find(item => !item.disabled);
|
|
95
|
+
if (item && props.mandatory === 'force' && !selected.value.length) {
|
|
96
|
+
selected.value = [item.id];
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
onMounted(() => {
|
|
100
|
+
forceMandatoryValue();
|
|
101
|
+
});
|
|
102
|
+
onBeforeUnmount(() => {
|
|
103
|
+
isUnmounted = true;
|
|
104
|
+
});
|
|
105
|
+
function select(id, value) {
|
|
106
|
+
const item = items.find(item => item.id === id);
|
|
107
|
+
if (value && item?.disabled) return;
|
|
108
|
+
if (props.multiple) {
|
|
109
|
+
const internalValue = selected.value.slice();
|
|
110
|
+
const index = internalValue.findIndex(v => v === id);
|
|
111
|
+
const isSelected = ~index;
|
|
112
|
+
value = value ?? !isSelected;
|
|
113
|
+
if (isSelected && props.mandatory && internalValue.length <= 1) return;
|
|
114
|
+
if (!isSelected && props.max != null && internalValue.length + 1 > props.max) return;
|
|
115
|
+
if (index < 0 && value) internalValue.push(id);else if (index >= 0 && !value) internalValue.splice(index, 1);
|
|
116
|
+
selected.value = internalValue;
|
|
117
|
+
} else {
|
|
118
|
+
const isSelected = selected.value.includes(id);
|
|
119
|
+
if (props.mandatory && isSelected) return;
|
|
120
|
+
selected.value = value ?? !isSelected ? [id] : [];
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
function step(offset) {
|
|
124
|
+
if (props.multiple) {}
|
|
125
|
+
if (!selected.value.length) {
|
|
126
|
+
const item = items.find(item => !item.disabled);
|
|
127
|
+
item && (selected.value = [item.id]);
|
|
128
|
+
} else {
|
|
129
|
+
const currentId = selected.value[0];
|
|
130
|
+
const currentIndex = items.findIndex(i => i.id === currentId);
|
|
131
|
+
let newIndex = (currentIndex + offset) % items.length;
|
|
132
|
+
let newItem = items[newIndex];
|
|
133
|
+
while (newItem.disabled && newIndex !== currentIndex) {
|
|
134
|
+
newIndex = (newIndex + offset) % items.length;
|
|
135
|
+
newItem = items[newIndex];
|
|
136
|
+
}
|
|
137
|
+
if (newItem.disabled) return;
|
|
138
|
+
selected.value = [items[newIndex].id];
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
const state = {
|
|
142
|
+
register,
|
|
143
|
+
unregister,
|
|
144
|
+
selected,
|
|
145
|
+
select,
|
|
146
|
+
disabled: toRef(props, 'disabled'),
|
|
147
|
+
prev: () => step(items.length - 1),
|
|
148
|
+
next: () => step(1),
|
|
149
|
+
isSelected: id => selected.value.includes(id),
|
|
150
|
+
selectedClass: computed(() => props.selectedClass),
|
|
151
|
+
items: computed(() => items),
|
|
152
|
+
getItemIndex: value => getItemIndex(items, value)
|
|
153
|
+
};
|
|
154
|
+
provide(injectKey, state);
|
|
155
|
+
return state;
|
|
156
|
+
}
|
|
157
|
+
function getItemIndex(items, value) {
|
|
158
|
+
const ids = getIds(items, [value]);
|
|
159
|
+
if (!ids.length) return -1;
|
|
160
|
+
return items.findIndex(item => item.id === ids[0]);
|
|
161
|
+
}
|
|
162
|
+
function getIds(items, modelValue) {
|
|
163
|
+
const ids = [];
|
|
164
|
+
modelValue.forEach(value => {
|
|
165
|
+
const item = items.find(item => deepEqual(value, item.value));
|
|
166
|
+
const itemByIndex = items[value];
|
|
167
|
+
if (item?.value != null) {
|
|
168
|
+
ids.push(item.id);
|
|
169
|
+
} else if (itemByIndex != null) {
|
|
170
|
+
ids.push(itemByIndex.id);
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
return ids;
|
|
174
|
+
}
|
|
175
|
+
function getValues(items, ids) {
|
|
176
|
+
const values = [];
|
|
177
|
+
ids.forEach(id => {
|
|
178
|
+
const itemIndex = items.findIndex(item => item.id === id);
|
|
179
|
+
if (~itemIndex) {
|
|
180
|
+
const item = items[itemIndex];
|
|
181
|
+
values.push(item.value != null ? item.value : itemIndex);
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
return values;
|
|
185
|
+
}
|
|
186
|
+
//# sourceMappingURL=choice.mjs.map
|