@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/select/type.d.ts

@@ -1,13 +1,11 @@
-import type { NumberOrPercentage } from '../share/type';
-import type { GroupOption, Option } from '../share/type';
-import type { TagProps } from '../tag/type';
-export interface SelectOption extends Option<string> {
-    value: any;
-    disabled?: boolean;
+import type { OptionListGroupOption, OptionListOption } from '../option-list/type';
+import type { PopoverEvents, PopoverProps } from '../popover/type';
+import type { EmitEvent, NumberOrPercentage } from '../share/type';
+import type { TagEvents, TagProps } from '../tag/type';
+import type { VirtualListProps } from '../virtual-list/type';
+export interface SelectOption extends OptionListOption<any> {
 }
-export interface SelectGroupOption extends GroupOption {
-    label: string;
-    key: string | number | symbol;
+export interface SelectGroupOption extends OptionListGroupOption {
     children: (SelectOption | string)[];
 }
 export type SelectProps = {
@@ -92,7 +90,7 @@ export type SelectProps = {
      */
     collapseTags?: boolean;
     /**
-     * @property {number} [collapseTags]
+     * @property {number} [maxDisplayTags]
      * @version 0.0.2
      */
     maxDisplayTags?: number;
@@ -102,30 +100,30 @@ export type SelectProps = {
      */
     collapseTagsPopover?: boolean;
     /**
-     * @property {'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'} [tagTheme='info']
-     * @version 0.0.2
+     * @property {boolean} [virtualScroll=false]
+     * @version 0.0.3
      */
-    tagTheme?: TagProps['theme'];
+    virtualScroll?: boolean;
     /**
-     * @property {'primary' | 'plain' | 'outline'} [tagVariant='plain']
-     * @version 0.0.2
+     * @property {Omit<VirtualListProps, 'list' | 'fixedHeight'>} [virtualListProps]
+     * @version 0.0.3
      */
-    tagVariant?: TagProps['variant'];
+    virtualListProps?: Omit<VirtualListProps, 'list' | 'fixedHeight'>;
     /**
-     * @property {string} [tagColor]
-     * @version 0.0.2
+     * @property {Omit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents>} [tagProps]
+     * @version 0.0.3
      */
-    tagColor?: TagProps['color'];
+    tagProps?: Omit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents>;
     /**
      * @property {'medium' | 'large' | 'small'} [size='medium']
      * @version 0.0.2
      */
     size?: 'medium' | 'large' | 'small';
     /**
-     * @property {'default' | 'round'} [shape='default']
-     * @version 0.0.2
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round';
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
      * @version 0.0.2
@@ -136,6 +134,31 @@ export type SelectProps = {
      * @version 0.0.2
      */
     status?: 'success' | 'warning' | 'error' | 'normal';
+    /**
+     * @property {'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'} [tagTheme='info']
+     * @version 0.0.2
+     */
+    tagTheme?: TagProps['theme'];
+    /**
+     * @property {'primary' | 'plain' | 'outline'} [tagVariant='plain']
+     * @version 0.0.2
+     */
+    tagVariant?: TagProps['variant'];
+    /**
+     * @property {string} [tagColor]
+     * @version 0.0.2
+     */
+    tagColor?: TagProps['color'];
+    /**
+     * @property {Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>} [popoverProps]
+     * @version 0.0.3
+     */
+    popoverProps?: Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>;
+    /**
+     * @property {boolean} [optionsDestroyOnHide=false]
+     * @version 0.0.3
+     */
+    optionsDestroyOnHide?: boolean;
 };
 export type SelectEvents = {
     /**
@@ -180,12 +203,13 @@ export type SelectEvents = {
      * @event blur
      * @version 0.0.2
      */
-    blur: [];
+    blur: [event: FocusEvent];
     /**
      * @event focus
+     * @param {FocusEvent} event
      * @version 0.0.2
      */
-    focus: [];
+    focus: [event: FocusEvent];
     /**
      * @event select
      * @param {any} value
@@ -229,9 +253,20 @@ export type SelectSlots = {
      * @param {any} value
      * @param {string} label
      * @param {number} index
-     * @version 0.0.2
+     * @param {boolean} disabled
+     * @param {boolean} readonly
+     * @version 0.0.3
      */
     tag: {};
+    /**
+     * @slot label
+     * @param {any} value
+     * @param {string} label
+     * @param {boolean} disabled
+     * @param {boolean} readonly
+     * @version 0.0.3
+     */
+    label: {};
 };
 export type SelectExpose = {
     /**

package/es/share/const/event-bus-key.js

@@ -2,9 +2,4 @@ const BUTTON_GROUP_UPDATE = "px-button-group-update";
 const GRID_UPDATE = "px-grid-update";
 const GLOBAL_CSS_VAR_CHANGE = "px-global-css-var-change";
 const INPUT_GROUP_UPDATE = "px-input-group-update";
-export {
-  BUTTON_GROUP_UPDATE as B,
-  GRID_UPDATE as G,
-  INPUT_GROUP_UPDATE as I,
-  GLOBAL_CSS_VAR_CHANGE as a
-};
+export { INPUT_GROUP_UPDATE as i, GLOBAL_CSS_VAR_CHANGE as n, GRID_UPDATE as r, BUTTON_GROUP_UPDATE as t };

package/es/share/const/index.d.ts

@@ -13,3 +13,7 @@ export declare enum SCREEN_SIZE_TYPE {
 }
 export declare const GROUP_OPTION_TYPE = "group";
 export declare const BORDER_CORNER_RAD_RANGE: [number, number][];
+export declare const POPUP_CONTENT_DEFAULT_MAX_WIDTH = 400;
+export declare const SQRT3: number;
+export declare const INV_SQRT3: number;
+export declare const GET_ELEMENT_RENDERED = "getElementRendered";

package/es/share/const/index.js

@@ -1,30 +1,28 @@
 const TRANSPARENT_RGBA_COLOR_OBJECT = {
-  r: 0,
-  g: 0,
-  b: 0,
-  a: 0
+	r: 0,
+	g: 0,
+	b: 0,
+	a: 0
 };
 const COVER_Z_INDEX = 20;
-var SCREEN_SIZE_TYPE = /* @__PURE__ */ ((SCREEN_SIZE_TYPE2) => {
-  SCREEN_SIZE_TYPE2["XS"] = "xs";
-  SCREEN_SIZE_TYPE2["SM"] = "sm";
-  SCREEN_SIZE_TYPE2["MD"] = "md";
-  SCREEN_SIZE_TYPE2["LG"] = "lg";
-  SCREEN_SIZE_TYPE2["XL"] = "xl";
-  SCREEN_SIZE_TYPE2["XXL"] = "xxl";
-  return SCREEN_SIZE_TYPE2;
-})(SCREEN_SIZE_TYPE || {});
+let SCREEN_SIZE_TYPE = /* @__PURE__ */ function(SCREEN_SIZE_TYPE$1) {
+	SCREEN_SIZE_TYPE$1["XS"] = "xs";
+	SCREEN_SIZE_TYPE$1["SM"] = "sm";
+	SCREEN_SIZE_TYPE$1["MD"] = "md";
+	SCREEN_SIZE_TYPE$1["LG"] = "lg";
+	SCREEN_SIZE_TYPE$1["XL"] = "xl";
+	SCREEN_SIZE_TYPE$1["XXL"] = "xxl";
+	return SCREEN_SIZE_TYPE$1;
+}({});
 const GROUP_OPTION_TYPE = "group";
 const BORDER_CORNER_RAD_RANGE = [
-  [Math.PI, Math.PI * 3 / 2],
-  [Math.PI * 3 / 2, Math.PI * 2],
-  [0, Math.PI / 2],
-  [Math.PI / 2, Math.PI]
+	[Math.PI, Math.PI * 3 / 2],
+	[Math.PI * 3 / 2, Math.PI * 2],
+	[0, Math.PI / 2],
+	[Math.PI / 2, Math.PI]
 ];
-export {
-  BORDER_CORNER_RAD_RANGE as B,
-  COVER_Z_INDEX as C,
-  GROUP_OPTION_TYPE as G,
-  SCREEN_SIZE_TYPE as S,
-  TRANSPARENT_RGBA_COLOR_OBJECT as T
-};
+const POPUP_CONTENT_DEFAULT_MAX_WIDTH = 400;
+const SQRT3 = Math.sqrt(3);
+const INV_SQRT3 = 1 / SQRT3;
+const GET_ELEMENT_RENDERED = "getElementRendered";
+export { INV_SQRT3 as a, SQRT3 as c, GROUP_OPTION_TYPE as i, TRANSPARENT_RGBA_COLOR_OBJECT as l, COVER_Z_INDEX as n, POPUP_CONTENT_DEFAULT_MAX_WIDTH as o, GET_ELEMENT_RENDERED as r, SCREEN_SIZE_TYPE as s, BORDER_CORNER_RAD_RANGE as t };

package/es/share/const/provide-key.d.ts

@@ -1,3 +1,8 @@
 export declare const BUTTON_GROUP_PROVIDE = "px-button-group-provide";
 export declare const INPUT_GROUP_PROVIDE = "px-input-group-provide";
 export declare const GRID_PROVIDE = "px-grid-provide";
+export declare const CONTAINER_PROVIDE = "px-container-provide";
+export declare const FORM_PROVIDE = "px-form-provide";
+export declare const FORM_ITEM_PROVIDE = "px-form-item-provide";
+export declare const CHECKBOX_GROUP_PROVIDE = "px-checkbox-group-provide";
+export declare const RADIO_GROUP_PROVIDE = "px-radio-group-provide";

package/es/share/const/provide-key.js

@@ -1,8 +1,9 @@
 const BUTTON_GROUP_PROVIDE = "px-button-group-provide";
 const INPUT_GROUP_PROVIDE = "px-input-group-provide";
 const GRID_PROVIDE = "px-grid-provide";
-export {
-  BUTTON_GROUP_PROVIDE as B,
-  GRID_PROVIDE as G,
-  INPUT_GROUP_PROVIDE as I
-};
+const CONTAINER_PROVIDE = "px-container-provide";
+const FORM_PROVIDE = "px-form-provide";
+const FORM_ITEM_PROVIDE = "px-form-item-provide";
+const CHECKBOX_GROUP_PROVIDE = "px-checkbox-group-provide";
+const RADIO_GROUP_PROVIDE = "px-radio-group-provide";
+export { FORM_PROVIDE as a, RADIO_GROUP_PROVIDE as c, FORM_ITEM_PROVIDE as i, CHECKBOX_GROUP_PROVIDE as n, GRID_PROVIDE as o, CONTAINER_PROVIDE as r, INPUT_GROUP_PROVIDE as s, BUTTON_GROUP_PROVIDE as t };

package/es/share/const/style.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_PIXEL_SIZE = 4;
+export declare const INTERVAL = 4;
+export declare const INTERVAL_MINI = 2;
+export declare const LARGE_BASE_SIZE = 36;
+export declare const MEDIUM_BASE_SIZE = 28;
+export declare const SMALL_BASE_SIZE = 20;

package/es/share/const/style.js

@@ -0,0 +1,7 @@
+const DEFAULT_PIXEL_SIZE = 4;
+const INTERVAL = 4;
+const INTERVAL_MINI = 2;
+const LARGE_BASE_SIZE = 36;
+const MEDIUM_BASE_SIZE = 28;
+const SMALL_BASE_SIZE = 20;
+export { MEDIUM_BASE_SIZE as a, LARGE_BASE_SIZE as i, INTERVAL as n, SMALL_BASE_SIZE as o, INTERVAL_MINI as r, DEFAULT_PIXEL_SIZE as t };

package/es/share/hook/use-cancelable-delay.d.ts

@@ -0,0 +1 @@
+export declare function useCancelableDelay(delay?: number): readonly [(delayTime?: number) => Promise<boolean>, () => void, import("vue").ComputedRef<boolean>];

package/es/share/hook/use-cancelable-delay.js

@@ -0,0 +1,42 @@
+import { computed, ref } from "vue";
+function useCancelableDelay(delay = 150) {
+	const pendingReject = ref(null);
+	const isPending = computed(() => pendingReject.value !== null);
+	const cancel = () => {
+		if (pendingReject.value) {
+			pendingReject.value();
+			pendingReject.value = null;
+		}
+	};
+	async function wait(delayTime = delay) {
+		cancel();
+		let timer = null;
+		const p = new Promise((resolve, reject) => {
+			pendingReject.value = () => {
+				if (timer !== null) {
+					clearTimeout(timer);
+					timer = null;
+				}
+				pendingReject.value = null;
+				reject();
+			};
+			timer = setTimeout(() => {
+				timer = null;
+				pendingReject.value = null;
+				resolve();
+			}, delayTime);
+		});
+		try {
+			await p;
+			return true;
+		} catch {
+			return false;
+		}
+	}
+	return [
+		wait,
+		cancel,
+		isPending
+	];
+}
+export { useCancelableDelay as t };

package/es/share/hook/use-click-outside-listener.d.ts

@@ -1,4 +1,4 @@
 import { type ShallowRef, type VNode } from 'vue';
-type ElGetter = ShallowRef<HTMLElement | VNode | null> | (() => any);
+type ElGetter = ShallowRef<HTMLElement | SVGElement | VNode | null> | (() => any);
 export declare const useClickOutsideListener: (ref: ElGetter | ElGetter[], callback: (event: MouseEvent) => any) => void;
 export {};

package/es/share/hook/use-click-outside-listener.js

@@ -1,44 +1,31 @@
-import { $, m } from "../../aside/index.js";
-import { onMounted, onBeforeUnmount } from "vue";
-const check = (target, range) => {
-  if (!range) {
-    return true;
-  }
-  return range.contains(target);
+import { D as S, F as m } from "../../vendor.js";
+import { onBeforeUnmount, onMounted } from "vue";
+var check = (target, range) => {
+	if (!range) return true;
+	return range.contains(target);
 };
-const getEl = (ref) => {
-  if (m(ref)) {
-    const res = ref();
-    return res instanceof HTMLElement ? res : null;
-  }
-  if (!ref.value) {
-    return null;
-  }
-  return ref.value instanceof HTMLElement ? ref.value : ref.value.el && ref.value.el instanceof HTMLElement ? ref.value.el : null;
+var getEl = (ref$1) => {
+	if (m(ref$1)) {
+		const res = ref$1();
+		return res instanceof HTMLElement ? res : null;
+	}
+	if (!ref$1.value) return null;
+	return ref$1.value instanceof HTMLElement || ref$1.value instanceof SVGElement ? ref$1.value : ref$1.value.el && ref$1.value.el instanceof HTMLElement ? ref$1.value.el : null;
 };
-const useClickOutsideListener = (ref, callback) => {
-  const clickOutsideHandler = (event) => {
-    const target = event.target;
-    if (!(target instanceof HTMLElement)) {
-      return;
-    }
-    if ($(ref) ? ref.length === 0 : m(ref) ? false : !ref.value) {
-      return;
-    }
-    const clickInside = $(ref) ? ref.reduce((pre, cur) => {
-      return pre || check(target, getEl(cur));
-    }, false) : check(target, getEl(ref));
-    if (!clickInside) {
-      callback(event);
-    }
-  };
-  onMounted(() => {
-    document.addEventListener("click", clickOutsideHandler);
-  });
-  onBeforeUnmount(() => {
-    document.removeEventListener("click", clickOutsideHandler);
-  });
-};
-export {
-  useClickOutsideListener as u
+const useClickOutsideListener = (ref$1, callback) => {
+	const clickOutsideHandler = (event) => {
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		if (S(ref$1) ? ref$1.length === 0 : m(ref$1) ? false : !ref$1.value) return;
+		if (!(S(ref$1) ? ref$1.reduce((pre, cur) => {
+			return pre || check(target, getEl(cur));
+		}, false) : check(target, getEl(ref$1)))) callback(event);
+	};
+	onMounted(() => {
+		document.addEventListener("click", clickOutsideHandler);
+	});
+	onBeforeUnmount(() => {
+		document.removeEventListener("click", clickOutsideHandler);
+	});
 };
+export { useClickOutsideListener as t };

package/es/share/hook/use-composition.js

@@ -1,17 +1,19 @@
-import { ref, nextTick } from "vue";
+import { nextTick, ref } from "vue";
 function useComposition({ afterComposition }) {
-  const isComposing = ref(false);
-  const compositionStartHandler = (_) => {
-    isComposing.value = true;
-  };
-  const compositionEndHandler = (event) => {
-    if (isComposing.value) {
-      isComposing.value = false;
-      nextTick(() => afterComposition(event));
-    }
-  };
-  return [isComposing, compositionStartHandler, compositionEndHandler];
+	const isComposing = ref(false);
+	const compositionStartHandler = (_) => {
+		isComposing.value = true;
+	};
+	const compositionEndHandler = (event) => {
+		if (isComposing.value) {
+			isComposing.value = false;
+			nextTick(() => afterComposition(event));
+		}
+	};
+	return [
+		isComposing,
+		compositionStartHandler,
+		compositionEndHandler
+	];
 }
-export {
-  useComposition as u
-};
+export { useComposition as t };

package/es/share/hook/use-controlled-mode.d.ts

@@ -1,6 +1,6 @@
 import type { Nullish } from 'parsnip-kit';
 import { type Ref } from 'vue';
-export declare const useControlledMode: <T>(field: string, props: Record<string, any>, emits: Function, options?: {
+export declare const useControlledMode: <T extends any, K extends string = string, D extends string | undefined = undefined, const P extends { [key in (K | D) & string]: T | Nullish; } = { [key in (K | D) & string]: T | Nullish; }, const V extends P[K] = P[K]>(field: K, props: P, emits: Function, options?: {
     transform?: (nextValue: T | Nullish) => T | Nullish;
-    defaultField?: string;
-}) => readonly [Ref<Nullish | T, Nullish | T>, (nextValue: T) => Promise<void>, import("vue").ComputedRef<boolean>];
+    defaultField?: D;
+}) => readonly [Ref<Nullish | V, Nullish | V>, (nextValue: V) => Promise<void>, import("vue").ComputedRef<boolean>];

package/es/share/hook/use-controlled-mode.js

@@ -1,25 +1,22 @@
-import { computed, ref, watch, nextTick } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 const useControlledMode = (field, props, emits, options) => {
-  const controlledMode = computed(() => props[field] !== void 0);
-  const preValue = controlledMode.value ? props[field] : (options == null ? void 0 : options.defaultField) ? props[options.defaultField] : null;
-  const innerState = ref((options == null ? void 0 : options.transform) ? options == null ? void 0 : options.transform(preValue) : preValue);
-  const updateState = async (nextValue) => {
-    if (controlledMode.value) {
-      emits(`update:${field}`, nextValue);
-      await nextTick();
-      innerState.value = (options == null ? void 0 : options.transform) ? options == null ? void 0 : options.transform(props[field]) : props[field];
-    } else {
-      innerState.value = (options == null ? void 0 : options.transform) ? options == null ? void 0 : options.transform(nextValue) : nextValue;
-    }
-  };
-  watch(
-    () => props[field],
-    (val) => {
-      innerState.value = (options == null ? void 0 : options.transform) ? options == null ? void 0 : options.transform(val) : val;
-    }
-  );
-  return [innerState, updateState, controlledMode];
-};
-export {
-  useControlledMode as u
+	const controlledMode = computed(() => props[field] !== void 0);
+	const preValue = controlledMode.value ? props[field] : (options === null || options === void 0 ? void 0 : options.defaultField) ? props[options.defaultField] : null;
+	const innerState = ref((options === null || options === void 0 ? void 0 : options.transform) ? options === null || options === void 0 ? void 0 : options.transform(preValue) : preValue);
+	const updateState = async (nextValue) => {
+		if (controlledMode.value) {
+			emits(`update:${field}`, nextValue);
+			await nextTick();
+			innerState.value = (options === null || options === void 0 ? void 0 : options.transform) ? options === null || options === void 0 ? void 0 : options.transform(props[field]) : props[field];
+		} else innerState.value = (options === null || options === void 0 ? void 0 : options.transform) ? options === null || options === void 0 ? void 0 : options.transform(nextValue) : nextValue;
+	};
+	watch(() => props[field], (val) => {
+		innerState.value = (options === null || options === void 0 ? void 0 : options.transform) ? options === null || options === void 0 ? void 0 : options.transform(val) : val;
+	});
+	return [
+		innerState,
+		updateState,
+		controlledMode
+	];
 };
+export { useControlledMode as t };

package/es/share/hook/use-dark-mode.js

@@ -1,68 +1,54 @@
-import { ref, onBeforeUnmount, onMounted, computed } from "vue";
-import { i as inBrowser } from "../util/env.js";
-const observerMap = /* @__PURE__ */ new WeakMap();
-const observerCallbacksMap = /* @__PURE__ */ new WeakMap();
-const runCallbacks = (observed) => {
-  return () => {
-    const list = observerCallbacksMap.get(observed);
-    list == null ? void 0 : list.forEach((func) => func());
-  };
+import { t as inBrowser } from "../util/env.js";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+var observerMap = /* @__PURE__ */ new WeakMap();
+var observerCallbacksMap = /* @__PURE__ */ new WeakMap();
+var runCallbacks = (observed) => {
+	return () => {
+		const list = observerCallbacksMap.get(observed);
+		list === null || list === void 0 || list.forEach((func) => func());
+	};
 };
 const useDarkMode = () => {
-  const darkMode = ref(false);
-  const darkModeHtml = ref(void 0);
-  function handleDarkModeChange(e) {
-    darkMode.value = e.matches;
-  }
-  if (inBrowser()) {
-    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    handleDarkModeChange(darkModeQuery);
-    darkModeQuery.addEventListener("change", handleDarkModeChange);
-    onBeforeUnmount(() => {
-      darkModeQuery.removeEventListener("change", handleDarkModeChange);
-    });
-  }
-  const callback = () => {
-    if (inBrowser()) {
-      let hasDark = false, hasLight = false;
-      document.documentElement.className.split(" ").forEach((cls) => {
-        if (cls === "dark") {
-          hasDark = true;
-        }
-        if (cls === "light") {
-          hasLight = true;
-        }
-      });
-      darkModeHtml.value = hasDark ? true : hasLight ? false : void 0;
-    }
-  };
-  if (inBrowser()) {
-    onMounted(() => {
-      const observer = observerMap.get(document.documentElement) || new MutationObserver(runCallbacks(document.documentElement));
-      observerMap.set(document.documentElement, observer);
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["class"]
-      });
-      observerCallbacksMap.set(document.documentElement, [
-        ...observerCallbacksMap.get(document.documentElement) || [],
-        callback
-      ]);
-      callback();
-    });
-    onBeforeUnmount(() => {
-      observerCallbacksMap.set(
-        document.documentElement,
-        (observerCallbacksMap.get(document.documentElement) || []).filter(
-          (func) => func !== callback
-        )
-      );
-    });
-  }
-  return computed(() => {
-    return darkModeHtml.value ?? darkMode.value;
-  });
-};
-export {
-  useDarkMode as u
+	const darkMode = ref(false);
+	const darkModeHtml = ref(void 0);
+	function handleDarkModeChange(e) {
+		darkMode.value = e.matches;
+	}
+	if (inBrowser()) {
+		const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		handleDarkModeChange(darkModeQuery);
+		darkModeQuery.addEventListener("change", handleDarkModeChange);
+		onBeforeUnmount(() => {
+			darkModeQuery.removeEventListener("change", handleDarkModeChange);
+		});
+	}
+	const callback = () => {
+		if (inBrowser()) {
+			let hasDark = false, hasLight = false;
+			document.documentElement.className.split(" ").forEach((cls) => {
+				if (cls === "dark") hasDark = true;
+				if (cls === "light") hasLight = true;
+			});
+			darkModeHtml.value = hasDark ? true : hasLight ? false : void 0;
+		}
+	};
+	if (inBrowser()) {
+		onMounted(() => {
+			const observer = observerMap.get(document.documentElement) || new MutationObserver(runCallbacks(document.documentElement));
+			observerMap.set(document.documentElement, observer);
+			observer.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			observerCallbacksMap.set(document.documentElement, [...observerCallbacksMap.get(document.documentElement) || [], callback]);
+			callback();
+		});
+		onBeforeUnmount(() => {
+			observerCallbacksMap.set(document.documentElement, (observerCallbacksMap.get(document.documentElement) || []).filter((func) => func !== callback));
+		});
+	}
+	return computed(() => {
+		return darkModeHtml.value ?? darkMode.value;
+	});
 };
+export { useDarkMode as t };

package/es/share/hook/use-index-of-children.d.ts

@@ -1,2 +1,3 @@
-export declare const useIndexOfChildren: (eventBusKey: string) => readonly [import("vue").Ref<number, number>, import("vue").Ref<boolean, boolean>, import("vue").Ref<boolean, boolean>];
+import { type ComponentInternalInstance } from 'vue';
+export declare const useIndexOfChildren: (eventBusKey: string, elGetter?: (instance: ComponentInternalInstance | null) => HTMLElement | null) => readonly [import("vue").Ref<number, number>, import("vue").Ref<boolean, boolean>, import("vue").Ref<boolean, boolean>];
 export declare const emitParentUpdate: (eventBusKey: string) => void;