sard 1.0.0 → 1.0.2

package/components/dnd/dnd-item.js

@@ -0,0 +1,131 @@
+import { createBem } from "../../utils/bem.js";
+import { OnlyChild } from "../../utils/vnode.js";
+import { dndContextKey, dndItemContextKey } from "./common.js";
+import { computed, createBlock, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, unref, watchPostEffect, withCtx } from "vue";
+//#region packages/sard/components/dnd/dnd-item.vue
+var dnd_item_default = /*@__PURE__*/ defineComponent({
+	__name: "dnd-item",
+	props: { itemInfo: {
+		type: Object,
+		required: true
+	} },
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("dnd-item");
+		const dndContext = inject(dndContextKey);
+		if (!dndContext) throw new Error("DndItem must be included in Dnd.");
+		const elRef = shallowRef(null);
+		const onUpdate = (el) => {
+			elRef.value = el;
+		};
+		let dropItemInfo = null;
+		let currentIndex = -1;
+		let targetIndex = 0;
+		const translateY = ref(0);
+		const getNodeRect = () => {
+			return elRef.value.getBoundingClientRect();
+		};
+		onMounted(() => {
+			dndContext.addRectItem(getNodeRect);
+		});
+		onBeforeUnmount(() => {
+			dndContext.removeRectItem(getNodeRect);
+		});
+		let rectInfoList = null;
+		const immediateStart = async () => {
+			Promise.all(dndContext.rectItems.map((getRect) => getRect())).then((rects) => {
+				rectInfoList = rects.sort((a, b) => a.top - b.top).map((rect, i) => {
+					return {
+						rect,
+						itemInfo: dndContext.list[i].itemInfo
+					};
+				});
+			});
+		};
+		const start = async () => {
+			dndContext.dragging = true;
+			const itemInfo = props.itemInfo;
+			itemInfo.dragging = true;
+		};
+		const move = (delta) => {
+			if (!rectInfoList) return;
+			if (currentIndex === -1) {
+				currentIndex = rectInfoList.findIndex((item) => item.itemInfo === props.itemInfo);
+				dndContext.currentHeight = rectInfoList[currentIndex].rect.height;
+				dndContext.dragStart(currentIndex);
+			}
+			translateY.value = delta;
+			const { rect } = rectInfoList[currentIndex];
+			targetIndex = (() => {
+				if (delta < 0) {
+					const top = rect.top + delta;
+					for (let i = 0; i < currentIndex; i++) {
+						const targetRect = rectInfoList[i].rect;
+						if (top < targetRect.top + targetRect.height / 2) return i;
+					}
+				} else if (delta > 0) {
+					const bottom = rect.bottom + delta;
+					for (let i = rectInfoList.length - 1; i > currentIndex; i--) {
+						const targetRect = rectInfoList[i].rect;
+						if (bottom > targetRect.bottom - targetRect.height / 2) return i;
+					}
+				}
+				return currentIndex;
+			})();
+			const targetItemInfo = rectInfoList[targetIndex].itemInfo;
+			if (dropItemInfo !== targetItemInfo) {
+				rectInfoList.forEach((item, index) => {
+					item.itemInfo.offset = index < currentIndex ? index >= targetIndex ? 1 : 0 : index > currentIndex ? index <= targetIndex ? -1 : 0 : 0;
+				});
+				if (dropItemInfo) dndContext.dragMove(currentIndex, targetIndex);
+				dropItemInfo = targetItemInfo;
+			}
+		};
+		const end = () => {
+			const _currentIndex = currentIndex;
+			const _targetIndex = dropItemInfo ? targetIndex : currentIndex;
+			rectInfoList = null;
+			dropItemInfo = null;
+			dndContext.dragging = false;
+			const itemInfo = props.itemInfo;
+			itemInfo.dragging = false;
+			translateY.value = 0;
+			currentIndex = -1;
+			dndContext.list.forEach(({ itemInfo }) => {
+				itemInfo.offset = 0;
+			});
+			dndContext.drop(_currentIndex, _targetIndex);
+		};
+		provide(dndItemContextKey, {
+			immediateStart,
+			start,
+			move,
+			end
+		});
+		__expose({});
+		const dndItemClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("active", props.itemInfo.dragging),
+				bem.m("passive", !props.itemInfo.dragging && dndContext.dragging)
+			];
+		});
+		watchPostEffect(() => {
+			const el = elRef.value;
+			if (!el) return;
+			const y = props.itemInfo.dragging ? translateY.value : dndContext.currentHeight * props.itemInfo.offset;
+			el.style.setProperty("transform", `translate3d(0,${y}px,0)`);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(OnlyChild), {
+				class: normalizeClass(dndItemClass.value),
+				onUpdate
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { dnd_item_default as default };

package/components/dnd/dnd.d.ts

@@ -0,0 +1,40 @@
+import { type DndProps, type DndSlots, type DndExpose } from './common';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DndProps<T> & {
+        "onItem-drag-start"?: ((event: {
+            itemIndex: number;
+        }) => any) | undefined;
+        "onItem-drag-move"?: ((event: {
+            itemIndex: number;
+            insertIndex: number;
+        }) => any) | undefined;
+        "onItem-drop"?: ((event: {
+            itemIndex: number;
+            insertIndex: number;
+        }) => any) | undefined;
+        "onUpdate:list"?: ((list: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<DndExpose>) => void;
+    attrs: any;
+    slots: DndSlots<T>;
+    emit: ((evt: "item-drag-start", event: {
+        itemIndex: number;
+    }) => void) & ((evt: "item-drag-move", event: {
+        itemIndex: number;
+        insertIndex: number;
+    }) => void) & ((evt: "item-drop", event: {
+        itemIndex: number;
+        insertIndex: number;
+    }) => void) & ((evt: "update:list", list: T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/components/dnd/dnd.js

@@ -0,0 +1,85 @@
+import { arrayMove } from "../../utils/array.js";
+import { uniqid } from "../../utils/string.js";
+import { dndContextKey } from "./common.js";
+import { computed, defineComponent, provide, reactive, ref, renderSlot, unref, watch } from "vue";
+//#region packages/sard/components/dnd/dnd.vue
+var dnd_default = /*@__PURE__*/ defineComponent({
+	__name: "dnd",
+	props: { list: {
+		type: Array,
+		required: false
+	} },
+	emits: [
+		"item-drag-start",
+		"item-drag-move",
+		"item-drop",
+		"update:list"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const keyMap = /* @__PURE__ */ new WeakMap();
+		const innerList = ref(props.list || []);
+		watch(() => props.list, () => {
+			innerList.value = props.list || [];
+		});
+		const dndList = computed(() => {
+			return unref(innerList.value).map((item) => {
+				const key = keyMap.get(item) || uniqid();
+				keyMap.set(item, key);
+				return reactive({
+					data: item,
+					itemInfo: reactive({
+						offset: 0,
+						dragging: false
+					}),
+					key
+				});
+			});
+		});
+		const dragStart = (itemIndex) => {
+			emit("item-drag-start", { itemIndex });
+		};
+		const dragMove = (itemIndex, insertIndex) => {
+			emit("item-drag-move", {
+				itemIndex,
+				insertIndex
+			});
+		};
+		const drop = (itemIndex, insertIndex) => {
+			if (itemIndex !== insertIndex) {
+				innerList.value = arrayMove(props.list || [], itemIndex, insertIndex);
+				emit("update:list", innerList.value);
+			}
+			emit("item-drop", {
+				itemIndex,
+				insertIndex
+			});
+		};
+		const dragging = ref(false);
+		const rectItems = [];
+		const addRectItem = (getRect) => {
+			if (!rectItems.includes(getRect)) rectItems.push(getRect);
+		};
+		const removeRectItem = (getRect) => {
+			if (rectItems.includes(getRect)) rectItems.splice(rectItems.indexOf(getRect), 1);
+		};
+		provide(dndContextKey, reactive({
+			list: dndList,
+			dragging,
+			currentHeight: 0,
+			dragStart,
+			dragMove,
+			drop,
+			rectItems,
+			addRectItem,
+			removeRectItem
+		}));
+		__expose({});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", { list: dndList.value });
+		};
+	}
+});
+//#endregion
+export { dnd_default as default };

package/components/dnd/index.css

@@ -0,0 +1 @@
+.s-dnd-item{position:relative}.s-dnd-item--active{z-index:1;box-shadow:var(--s-box-shadow-secondary)}.s-dnd-item--passive{transition:transform var(--s-duration)}.s-dnd-handle{cursor:pointer;-webkit-user-select:none;user-select:none}.s-dnd-handle--dragging{touch-action:none}

package/components/dnd/index.d.ts

@@ -0,0 +1,9 @@
+import { type EnhancedComponent } from '../../utils';
+import _Dnd from './dnd.vue';
+import _DndItem from './dnd-item.vue';
+import _DndHandle from './dnd-handle.vue';
+export declare const Dnd: EnhancedComponent<typeof _Dnd>;
+export declare const DndItem: EnhancedComponent<typeof _DndItem>;
+export declare const DndHandle: EnhancedComponent<typeof _DndHandle>;
+export default Dnd;
+export type { DndProps, DndSlots, DndEmits, DndExpose, DndItemProps, DndItemSlots, DndItemEmits, DndItemExpose, DndHandleProps, DndHandleSlots, DndHandleEmits, DndHandleExpose, } from './common';

package/components/dnd/index.js

@@ -0,0 +1,10 @@
+import { enhanceComponent } from "../../utils/component.js";
+import dnd_default from "./dnd.js";
+import dnd_item_default from "./dnd-item.js";
+import dnd_handle_default from "./dnd-handle.js";
+//#region packages/sard/components/dnd/index.ts
+const Dnd = enhanceComponent(dnd_default);
+const DndItem = enhanceComponent(dnd_item_default);
+const DndHandle = enhanceComponent(dnd_handle_default);
+//#endregion
+export { Dnd, Dnd as default, DndHandle, DndItem };

package/components/dropdown/common.d.ts

@@ -0,0 +1,62 @@
+import { type InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+export interface DropdownProps {
+    direction?: 'down' | 'up';
+    disabled?: boolean;
+    awayClosable?: boolean;
+    overlayClosable?: boolean;
+    togglable?: boolean;
+    valueOnClear?: () => any;
+    separator?: 'shadow' | 'line' | 'none';
+}
+export declare const defaultDropdownProps: DefaultProps<DropdownProps>;
+export interface DropdownSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DropdownOption {
+    label?: string;
+    value?: any;
+}
+export type DropdownCloseType = 'overlay' | 'away' | 'other-button' | 'option' | 'button';
+export type DropdownBeforeClose = (type: DropdownCloseType) => any;
+export type DropdownBeforeOpen = () => any;
+export interface DropdownItemProps {
+    title?: string;
+    label?: string;
+    options?: DropdownOption[];
+    disabled?: boolean;
+    modelValue?: any;
+    visible?: boolean;
+    placeholder?: string;
+    togglable?: boolean;
+    valueOnClear?: () => any;
+    beforeClose?: DropdownBeforeClose;
+    beforeOpen?: DropdownBeforeOpen;
+}
+export declare const defaultDropdownItemProps: DefaultProps<DropdownItemProps>;
+export interface DropdownItemSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DropdownItemEmits extends MotionEmits {
+    (e: 'update:modelValue', value: any): void;
+    (e: 'change', value: any): void;
+    (e: 'update:visible', visible: boolean): void;
+}
+export interface DropdownItemInstacne {
+    hide: () => void;
+    visible: boolean;
+}
+export interface DropdownContext {
+    direction: DropdownProps['direction'];
+    disabled: DropdownProps['disabled'];
+    awayClosable: DropdownProps['awayClosable'];
+    overlayClosable: DropdownProps['overlayClosable'];
+    togglable: DropdownProps['togglable'];
+    valueOnClear: DropdownProps['valueOnClear'];
+    hideOthers: (instance: DropdownItemInstacne) => void;
+    register: (instance: DropdownItemInstacne) => void;
+    unregister: (instance: DropdownItemInstacne) => void;
+}
+export declare const dropdownContextKey: InjectionKey<DropdownContext>;
+export declare const defaultValueOnClear: () => undefined;

package/components/dropdown/common.js

@@ -0,0 +1,13 @@
+//#region packages/sard/components/dropdown/common.ts
+const defaultDropdownProps = {
+	direction: "down",
+	disabled: false,
+	awayClosable: true,
+	overlayClosable: true,
+	separator: "line"
+};
+const defaultDropdownItemProps = { options: () => [] };
+const dropdownContextKey = Symbol("dropdownContext");
+const defaultValueOnClear = () => void 0;
+//#endregion
+export { defaultDropdownItemProps, defaultDropdownProps, defaultValueOnClear, dropdownContextKey };

package/components/dropdown/dropdown-item.d.ts

@@ -0,0 +1,50 @@
+import { type DropdownItemProps, type DropdownItemSlots, type DropdownOption } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = DropdownItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<DropdownItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: any) => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<DropdownItemProps> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    label: string;
+    title: string;
+    options: DropdownOption[];
+    visible: boolean;
+    disabled: boolean;
+    modelValue: any;
+    beforeClose: import("./common").DropdownBeforeClose;
+    placeholder: string;
+    valueOnClear: () => any;
+    togglable: boolean;
+    beforeOpen: import("./common").DropdownBeforeOpen;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/dropdown/dropdown-item.js

@@ -0,0 +1,261 @@
+import { createBem } from "../../utils/bem.js";
+import { isFunction, isNullish } from "../../utils/is.js";
+import { noop } from "../../utils/utils.js";
+import { useLockScroll } from "../../use/useLockScroll.js";
+import { useClickOutside } from "../../use/useClickOutside.js";
+import motion_default from "../motion/motion.js";
+import overlay_default from "../overlay/overlay.js";
+import list_default from "../list/list.js";
+import list_item_default from "../list/list-item.js";
+import { defaultDropdownItemProps, defaultValueOnClear, dropdownContextKey } from "./common.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeDefaults, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, unref, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
+import { CaretDown, CaretUp, Success } from "@sard/icons";
+//#region packages/sard/components/dropdown/dropdown-item.vue
+var dropdown_item_default = /*@__PURE__*/ defineComponent({
+	__name: "dropdown-item",
+	props: /*@__PURE__*/ mergeDefaults({
+		title: {
+			type: String,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: null,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		togglable: {
+			type: Boolean,
+			required: false
+		},
+		valueOnClear: {
+			type: Function,
+			required: false
+		},
+		beforeClose: {
+			type: Function,
+			required: false
+		},
+		beforeOpen: {
+			type: Function,
+			required: false
+		}
+	}, defaultDropdownItemProps),
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:visible",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("dropdown-item");
+		const context = inject(dropdownContextKey);
+		if (!context) throw new Error("DropdownItem must be included in Dropdown.");
+		const currentLabel = computed(() => {
+			return props.options?.find((option) => option.value === innerValue.value)?.label;
+		});
+		const innerVisible = useModel(props, "visible");
+		const isDisplayed = ref(innerVisible.value);
+		const popupEffect = computed(() => {
+			return context.direction === "up" ? "slide-bottom" : "slide-top";
+		});
+		const onVisibleHook = (name, el) => {
+			if (name === "before-enter") {
+				isDisplayed.value = true;
+				context.hideOthers(member);
+			} else if (name === "enter") setPosition();
+			else if (name === "after-leave") isDisplayed.value = false;
+			if (name === "after-enter" || name === "enter-cancelled") waitingOpen = false;
+			if (name === "after-leave" || name === "leave-cancelled") waitingClose = false;
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		useLockScroll(innerVisible);
+		const popperInset = ref();
+		const itemRef = useTemplateRef("item");
+		const setPosition = () => {
+			const itemRect = itemRef.value.getBoundingClientRect();
+			const windowHeight = window.innerHeight;
+			const nextPopperInset = {
+				left: 0,
+				right: 0,
+				top: 0,
+				bottom: 0
+			};
+			if (context.direction === "down") {
+				nextPopperInset.top = `${itemRect.bottom}px`;
+				nextPopperInset.bottom = 0;
+			} else {
+				nextPopperInset.top = 0;
+				nextPopperInset.bottom = `${windowHeight - itemRect.top}px`;
+			}
+			popperInset.value = nextPopperInset;
+		};
+		let waitingClose = false;
+		const perhapsClose = (type) => {
+			if (waitingClose) return;
+			if (isFunction(props.beforeClose)) {
+				const result = props.beforeClose(type);
+				if (result instanceof Promise) {
+					waitingClose = true;
+					return result.then(() => {
+						innerVisible.value = false;
+					}).catch(noop);
+				} else if (result === false) return;
+			}
+			innerVisible.value = false;
+		};
+		let waitingOpen = false;
+		const perhapsOpen = () => {
+			if (waitingOpen) return;
+			if (isFunction(props.beforeOpen)) {
+				const result = props.beforeOpen();
+				if (result instanceof Promise) {
+					waitingOpen = true;
+					return result.then(() => {
+						innerVisible.value = true;
+					}).catch(noop);
+				} else if (result === false) return;
+			}
+			innerVisible.value = true;
+		};
+		const onItemClick = () => {
+			if (!context.disabled && !props.disabled) if (innerVisible.value) perhapsClose("button");
+			else perhapsOpen();
+		};
+		const onOverlayClick = () => {
+			if (context.overlayClosable) perhapsClose("overlay");
+		};
+		useClickOutside(useTemplateRef("popper"), () => {
+			if (context.awayClosable) perhapsClose("away");
+		}, innerVisible);
+		const innerValue = useModel(props, "modelValue");
+		const mergedTogglable = computed(() => props.togglable || context.togglable);
+		const mergedValueOnClear = computed(() => props.valueOnClear || context.valueOnClear || defaultValueOnClear);
+		const onOptionClick = (option) => {
+			let nextValue = option.value;
+			if (option.value === innerValue.value && mergedTogglable.value) nextValue = mergedValueOnClear.value();
+			if (nextValue !== innerValue.value) {
+				innerValue.value = nextValue;
+				emit("change", nextValue);
+			}
+			perhapsClose("option");
+		};
+		const hide = () => {
+			if (innerVisible.value) perhapsClose("other-button");
+		};
+		const member = reactive({
+			hide,
+			visible: isDisplayed
+		});
+		onMounted(() => {
+			context.register(member);
+		});
+		onUnmounted(() => {
+			context.unregister(member);
+		});
+		const dropdownItemClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(context.direction),
+				bem.is("displayed", isDisplayed.value),
+				bem.is("disabled", context.disabled || props.disabled)
+			];
+		});
+		const popoverClass = computed(() => {
+			return bem.e("popover");
+		});
+		const popoverStyle = computed(() => {
+			return popperInset.value;
+		});
+		const popupClass = computed(() => {
+			return [bem.e("popup"), bem.em("popup", popupEffect.value)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", {
+				ref: "item",
+				class: normalizeClass(dropdownItemClass.value),
+				onClick: onItemClick
+			}, [
+				__props.label ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("label"))
+				}, toDisplayString(__props.label), 3)) : createCommentVNode("v-if", true),
+				__props.title ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("title"))
+				}, toDisplayString(__props.title), 3)) : createCommentVNode("v-if", true),
+				!unref(isNullish)(unref(innerValue)) ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(bem).e("value"))
+				}, toDisplayString(currentLabel.value), 3)) : __props.placeholder ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(unref(bem).e("placeholder"))
+				}, toDisplayString(__props.placeholder), 3)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("arrow")) }, [isDisplayed.value ? (openBlock(), createBlock(unref(CaretUp), { key: 0 })) : (openBlock(), createBlock(unref(CaretDown), { key: 1 }))], 2)
+			], 2), withDirectives(createElementVNode("div", {
+				ref: "popper",
+				class: normalizeClass(popoverClass.value),
+				style: normalizeStyle(popoverStyle.value)
+			}, [createVNode(overlay_default, {
+				style: { "position": "absolute" },
+				visible: unref(innerVisible),
+				onClick: onOverlayClick
+			}, null, 8, ["visible"]), createVNode(motion_default, {
+				name: popupEffect.value,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", { class: normalizeClass(popupClass.value) }, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(list_default, { inlaid: "" }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, i) => {
+						return openBlock(), createBlock(list_item_default, {
+							key: i,
+							title: option.label,
+							hover: "",
+							class: normalizeClass([unref(bem).e("option"), unref(bem).is("active", option.value === unref(innerValue))]),
+							onClick: ($event) => onOptionClick(option)
+						}, {
+							arrow: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(bem).e("option-icon")) }, [createVNode(unref(Success))], 2)]),
+							_: 1
+						}, 8, [
+							"title",
+							"class",
+							"onClick"
+						]);
+					}), 128))]),
+					_: 1
+				})])], 2), [[vShow, unref(innerVisible)]])]),
+				_: 3
+			}, 8, ["name"])], 6), [[vShow, isDisplayed.value]])], 64);
+		};
+	}
+});
+//#endregion
+export { dropdown_item_default as default };