@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/select/type.d.ts

@@ -0,0 +1,252 @@
+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;
+}
+export interface SelectGroupOption extends GroupOption {
+    label: string;
+    key: string | number | symbol;
+    children: (SelectOption | string)[];
+}
+export type SelectProps = {
+    /**
+     * @property {any} [modelValue]
+     * @version 0.0.2
+     */
+    modelValue?: any;
+    /**
+     * @property {any} [defaultValue]
+     * @version 0.0.2
+     */
+    defaultValue?: any;
+    /**
+     * @property {string} [options]
+     * @version 0.0.2
+     */
+    options?: (string | SelectOption | SelectGroupOption)[];
+    /**
+     * @property {string} [placeholder]
+     * @version 0.0.2
+     */
+    placeholder?: string;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.2
+     */
+    readonly?: boolean;
+    /**
+     * @property {boolean} [clearable=false]
+     * @version 0.0.2
+     */
+    clearable?: boolean;
+    /**
+     * @property {boolean} [multiple=false]
+     * @version 0.0.2
+     */
+    multiple?: boolean;
+    /**
+     * @property {boolean} [loading=false]
+     * @version 0.0.2
+     */
+    loading?: boolean;
+    /**
+     * @property {string | null} [inputValue]
+     * @version 0.0.2
+     */
+    inputValue?: string | null;
+    /**
+     * @property {string | null} [defaultInputValue]
+     * @version 0.0.2
+     */
+    defaultInputValue?: string | null;
+    /**
+     * @property {boolean} [filterable=false]
+     * @version 0.0.2
+     */
+    filterable?: boolean;
+    /**
+     * @property {(value: string, optionsFiltered: (string | SelectOption | SelectGroupOption)[]) => boolean} [shouldShowPopover]
+     * @version 0.0.2
+     */
+    shouldShowPopover?: (value: string, optionsFiltered: (string | SelectOption | SelectGroupOption)[]) => boolean;
+    /**
+     * @property {(keyword: string, options: (string | SelectOption | SelectGroupOption)[]) => (string | SelectOption | SelectGroupOption)[]} [filter]
+     * @version 0.0.2
+     */
+    filter?: (keyword: string, options: (string | SelectOption | SelectGroupOption)[]) => (string | SelectOption | SelectGroupOption)[];
+    /**
+     * @property {boolean} [creatable=false]
+     * @version 0.0.2
+     */
+    creatable?: boolean;
+    /**
+     * @property {boolean} [collapseTags=false]
+     * @version 0.0.2
+     */
+    collapseTags?: boolean;
+    /**
+     * @property {number} [collapseTags]
+     * @version 0.0.2
+     */
+    maxDisplayTags?: number;
+    /**
+     * @property {boolean} [collapseTagsPopover=true]
+     * @version 0.0.2
+     */
+    collapseTagsPopover?: boolean;
+    /**
+     * @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 {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * @property {'default' | 'round'} [shape='default']
+     * @version 0.0.2
+     */
+    shape?: 'default' | 'round';
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.2
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {'success' | 'warning' | 'error' | 'normal'} [status='normal']
+     * @version 0.0.2
+     */
+    status?: 'success' | 'warning' | 'error' | 'normal';
+};
+export type SelectEvents = {
+    /**
+     * @event input
+     * @param {string} value
+     * @param {Event} e
+     * @version 0.0.2
+     */
+    input: [value: string, e: Event];
+    /**
+     * @event update:modelValue
+     * @param {any} value
+     * @version 0.0.2
+     */
+    'update:modelValue': [value: any];
+    /**
+     * @event update:inputValue
+     * @param {string} value
+     * @version 0.0.2
+     */
+    'update:inputValue': [value: string];
+    /**
+     * @event change
+     * @param {any} value
+     * @version 0.0.2
+     */
+    change: [value: any];
+    /**
+     * @event change
+     * @param {string} value
+     * @param {Event | undefined} e
+     * @version 0.0.2
+     */
+    inputChange: [value: string, e?: Event];
+    /**
+     * @event clear
+     * @param {any} value
+     * @version 0.0.2
+     */
+    clear: [value: any];
+    /**
+     * @event blur
+     * @version 0.0.2
+     */
+    blur: [];
+    /**
+     * @event focus
+     * @version 0.0.2
+     */
+    focus: [];
+    /**
+     * @event select
+     * @param {any} value
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    select: [value: any, option: string | SelectOption, e: MouseEvent];
+    /**
+     * @event tagClose
+     * @param {any} value
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    tagClose: [value: any, e: MouseEvent];
+};
+export type SelectSlots = {
+    /**
+     * @slot prefix
+     * @version 0.0.2
+     */
+    prefix: {};
+    /**
+     * @slot suffix
+     * @version 0.0.2
+     */
+    suffix: {};
+    /**
+     * @slot option
+     * @param {string | SelectOption} option
+     * @version 0.0.2
+     */
+    option: {};
+    /**
+     * @slot group-label
+     * @param {SelectGroupOption} option
+     * @version 0.0.2
+     */
+    'group-label': {};
+    /**
+     * @slot tag
+     * @param {any} value
+     * @param {string} label
+     * @param {number} index
+     * @version 0.0.2
+     */
+    tag: {};
+};
+export type SelectExpose = {
+    /**
+     * @property {() => void} focus
+     * @version 0.0.2
+     */
+    focus: () => void;
+    /**
+     * @property {() => void} blur
+     * @version 0.0.2
+     */
+    blur: () => void;
+    /**
+     * @property {() => void} clear
+     * @version 0.0.2
+     */
+    clear: () => void;
+};

package/es/share/const/event-bus-key.d.ts

@@ -0,0 +1,4 @@
+export declare const BUTTON_GROUP_UPDATE = "px-button-group-update";
+export declare const GRID_UPDATE = "px-grid-update";
+export declare const GLOBAL_CSS_VAR_CHANGE = "px-global-css-var-change";
+export declare const INPUT_GROUP_UPDATE = "px-input-group-update";

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

@@ -0,0 +1,10 @@
+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
+};

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

@@ -1,6 +1,8 @@
 import type { RgbaColor } from '../type';
 export declare const TRANSPARENT_RGBA_COLOR_OBJECT: RgbaColor;
 export declare const MESSAGE_Z_INDEX = 3000;
+export declare const Z_INDEX = 1000;
+export declare const COVER_Z_INDEX = 20;
 export declare enum SCREEN_SIZE_TYPE {
     XS = "xs",
     SM = "sm",
@@ -9,3 +11,5 @@ export declare enum SCREEN_SIZE_TYPE {
     XL = "xl",
     XXL = "xxl"
 }
+export declare const GROUP_OPTION_TYPE = "group";
+export declare const BORDER_CORNER_RAD_RANGE: [number, number][];

package/es/share/const/index.js

@@ -4,7 +4,7 @@ const TRANSPARENT_RGBA_COLOR_OBJECT = {
   b: 0,
   a: 0
 };
-const MESSAGE_Z_INDEX = 3e3;
+const COVER_Z_INDEX = 20;
 var SCREEN_SIZE_TYPE = /* @__PURE__ */ ((SCREEN_SIZE_TYPE2) => {
   SCREEN_SIZE_TYPE2["XS"] = "xs";
   SCREEN_SIZE_TYPE2["SM"] = "sm";
@@ -14,8 +14,17 @@ var SCREEN_SIZE_TYPE = /* @__PURE__ */ ((SCREEN_SIZE_TYPE2) => {
   SCREEN_SIZE_TYPE2["XXL"] = "xxl";
   return SCREEN_SIZE_TYPE2;
 })(SCREEN_SIZE_TYPE || {});
+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]
+];
 export {
-  MESSAGE_Z_INDEX as M,
+  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
 };

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

@@ -0,0 +1,3 @@
+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";

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

@@ -0,0 +1,8 @@
+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
+};

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

@@ -0,0 +1,4 @@
+import { type ShallowRef, type VNode } from 'vue';
+type ElGetter = ShallowRef<HTMLElement | 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

@@ -0,0 +1,44 @@
+import { $, m } from "../../aside/index.js";
+import { onMounted, onBeforeUnmount } from "vue";
+const 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;
+};
+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
+};

package/es/share/hook/use-composition.d.ts

@@ -0,0 +1,5 @@
+interface UseCompositionOptions {
+    afterComposition: (event: CompositionEvent) => void;
+}
+export declare function useComposition({ afterComposition }: UseCompositionOptions): readonly [import("vue").Ref<boolean, boolean>, (_: CompositionEvent) => void, (event: CompositionEvent) => void];
+export {};

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

@@ -0,0 +1,17 @@
+import { ref, nextTick } 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];
+}
+export {
+  useComposition as u
+};

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

@@ -0,0 +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?: {
+    transform?: (nextValue: T | Nullish) => T | Nullish;
+    defaultField?: string;
+}) => readonly [Ref<Nullish | T, Nullish | T>, (nextValue: T) => Promise<void>, import("vue").ComputedRef<boolean>];

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

@@ -0,0 +1,25 @@
+import { computed, ref, watch, nextTick } 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
+};

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

@@ -40,14 +40,22 @@ const useDarkMode = () => {
     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]);
+      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)
+        (observerCallbacksMap.get(document.documentElement) || []).filter(
+          (func) => func !== callback
+        )
       );
     });
   }

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

@@ -1 +1,2 @@
-export declare const useIndexOfChildren: () => import("vue").Ref<number, number>;
+export declare const useIndexOfChildren: (eventBusKey: string) => readonly [import("vue").Ref<number, number>, import("vue").Ref<boolean, boolean>, import("vue").Ref<boolean, boolean>];
+export declare const emitParentUpdate: (eventBusKey: string) => void;

package/es/share/hook/use-index-of-children.js

@@ -1,58 +1,48 @@
-import { ref, getCurrentInstance, onMounted, onUpdated, onBeforeUnmount } from "vue";
+import { onUpdated, ref, getCurrentInstance, onMounted, nextTick, onBeforeUnmount } 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());
-  };
-};
-const useIndexOfChildren = () => {
+import { E as EventBus } from "../util/event-bus.js";
+const useIndexOfChildren = (eventBusKey) => {
   const index = ref(-1);
+  const last = ref(false);
+  const first = ref(false);
   const instance = getCurrentInstance();
   const callback = () => {
     if (instance && instance.vnode.el instanceof HTMLElement) {
-      const parent2 = instance.vnode.el.parentElement;
-      if (parent2 && parent2.children.length) {
-        const arr = [...parent2.children];
+      const parent = instance.vnode.el.parentElement;
+      if (parent && parent.children.length) {
+        const arr = [...parent.children];
         index.value = arr.indexOf(instance.vnode.el);
+        last.value = index.value === parent.children.length - 1;
+        first.value = index.value === 0;
+      } else {
+        index.value = -1;
+        last.value = false;
+        first.value = false;
       }
     }
   };
-  let parent = null;
   if (inBrowser()) {
+    EventBus.on(eventBusKey, callback);
     onMounted(() => {
-      setTimeout(() => {
-        var _a;
-        parent = ((_a = instance == null ? void 0 : instance.vnode) == null ? void 0 : _a.el) instanceof HTMLElement ? instance.vnode.el.parentElement : null;
-        if (parent) {
-          const observer = observerMap.get(parent) || new MutationObserver(runCallbacks(parent));
-          observerMap.set(parent, observer);
-          observerCallbacksMap.set(parent, [...observerCallbacksMap.get(parent) || [], callback]);
-          observer.observe(parent, { childList: true });
-        }
+      nextTick(() => {
         callback();
       });
     });
     onUpdated(() => {
-      setTimeout(() => {
-        callback();
-      });
+      callback();
     });
     onBeforeUnmount(() => {
-      var _a;
-      if (parent) {
-        (_a = observerMap.get(parent)) == null ? void 0 : _a.disconnect();
-        observerCallbacksMap.set(
-          parent,
-          (observerCallbacksMap.get(parent) || []).filter((func) => func !== callback)
-        );
-      }
+      EventBus.off(eventBusKey, callback);
     });
   }
-  return index;
+  return [index, first, last];
+};
+const emitParentUpdate = (eventBusKey) => {
+  onUpdated(() => {
+    EventBus.emit(eventBusKey);
+  });
 };
 export {
+  emitParentUpdate as e,
   useIndexOfChildren as u
 };

package/es/share/hook/use-resize-observer.js

@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount } from "vue";
 import { i as inBrowser } from "../util/env.js";
-const useResizeObserver = (ref, callback, leading = true) => {
+const useResizeObserver = (ref, callback, leading) => {
   if (!inBrowser()) {
     return null;
   }

package/es/share/hook/use-textarea-height.d.ts

@@ -0,0 +1,5 @@
+import { type Ref } from 'vue';
+export declare const useTextareaHeight: (textareaRef: Ref<null | HTMLTextAreaElement>, props: {
+    minRows?: number;
+    maxRows?: number;
+}) => readonly [Ref<number | undefined, number | undefined>, Ref<number | undefined, number | undefined>, Ref<number | undefined, number | undefined>, () => void];

package/es/share/hook/use-textarea-height.js

@@ -0,0 +1,116 @@
+import { C as Cn } from "../../aside/index.js";
+import { c as clamp } from "../util/common.js";
+import { ref, onBeforeUnmount } from "vue";
+import { u as useResizeObserver } from "./use-resize-observer.js";
+import { i as inBrowser } from "../util/env.js";
+let hiddenTextarea = null;
+const HIDDEN_STYLE = `
+  position:absolute!important;
+  top:-9999px!important;
+  left:-9999px!important;
+  overflow:hidden!important;
+  opacity:0!important;
+  pointer-events:none!important;
+  width:{width}px!important;
+  min-height:0!important;
+  height:0!important;
+  z-index:-9999!important;
+`;
+const SIZING_STYLE = [
+  "letter-spacing",
+  "line-height",
+  "padding-top",
+  "padding-bottom",
+  "font-family",
+  "font-weight",
+  "font-size",
+  "font-variant",
+  "text-rendering",
+  "text-transform",
+  "width",
+  "padding-left",
+  "padding-right",
+  "border-width",
+  "box-sizing"
+];
+function calculateNodeStyling(target) {
+  const style = window.getComputedStyle(target);
+  const boxSizing = style.getPropertyValue("box-sizing");
+  const paddingSize = parseFloat(style.getPropertyValue("padding-top")) + parseFloat(style.getPropertyValue("padding-bottom"));
+  const borderSize = parseFloat(style.getPropertyValue("border-top-width")) + parseFloat(style.getPropertyValue("border-bottom-width"));
+  const sizingStyle = SIZING_STYLE.map(
+    (name) => `${name}:${style.getPropertyValue(name)}`
+  ).join(";");
+  return { sizingStyle, paddingSize, borderSize, boxSizing };
+}
+function getHeight(node, minRows = 1, maxRows = Infinity) {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement("textarea");
+    document.body.appendChild(hiddenTextarea);
+  }
+  const { sizingStyle, paddingSize, borderSize, boxSizing } = calculateNodeStyling(node);
+  const nodeWidth = node.getBoundingClientRect().width;
+  hiddenTextarea.setAttribute(
+    "style",
+    `${sizingStyle};${Cn(HIDDEN_STYLE, (pattern) => pattern === "width" ? String(nodeWidth) : "")}`
+  );
+  hiddenTextarea.value = "";
+  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  const minHeight = singleRowHeight * minRows + (boxSizing === "border-box" ? paddingSize + borderSize : 0);
+  const maxHeight = singleRowHeight * maxRows + (boxSizing === "border-box" ? paddingSize + borderSize : 0);
+  hiddenTextarea.value = node.value || node.placeholder || "";
+  let height = hiddenTextarea.scrollHeight;
+  height += +(boxSizing === "border-box") * borderSize;
+  height = clamp(height, minHeight, maxHeight);
+  return {
+    height,
+    minHeight,
+    maxHeight
+  };
+}
+let textareaMounted = 0;
+function calcTextareaHeight(textarea, minRows, maxRows) {
+  const height = getHeight(textarea, minRows, maxRows);
+  return height;
+}
+function destroyHiddenTextarea() {
+  textareaMounted--;
+  if (hiddenTextarea && textareaMounted <= 0) {
+    hiddenTextarea.remove();
+    hiddenTextarea = null;
+  }
+}
+function recordTextareaMounted() {
+  textareaMounted++;
+}
+const useTextareaHeight = (textareaRef, props) => {
+  const height = ref(void 0);
+  const minHeight = ref(void 0);
+  const maxHeight = ref(void 0);
+  const callback = () => {
+    if (!inBrowser()) {
+      return;
+    }
+    if (textareaRef.value) {
+      const data = calcTextareaHeight(
+        textareaRef.value,
+        props.minRows || 1,
+        props.maxRows || Infinity
+      );
+      height.value = data.height;
+      maxHeight.value = data.maxHeight;
+      minHeight.value = data.minHeight;
+    }
+  };
+  if (inBrowser()) {
+    recordTextareaMounted();
+    useResizeObserver(textareaRef, callback, true);
+    onBeforeUnmount(() => {
+      destroyHiddenTextarea();
+    });
+  }
+  return [height, minHeight, maxHeight, callback];
+};
+export {
+  useTextareaHeight as u
+};