@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/grid/interface.d.ts

@@ -0,0 +1,135 @@
+import type { CSSProperties } from 'vue';
+import type { Key, Numeric, VueNode } from '../_util/type';
+export type RowAlign = 'top' | 'middle' | 'bottom' | 'stretch';
+export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+export type RowGutter = number | string;
+export interface RowProps {
+    /** Spacing between columns, `[horizontal, vertical]` for both directions. Numbers are px. */
+    gutter?: RowGutter | [RowGutter, RowGutter];
+    align?: RowAlign;
+    justify?: RowJustify;
+    /** Auto wrap line */
+    wrap?: boolean;
+    rootClass?: string;
+}
+export interface RowSlots {
+    default?: () => any;
+}
+export type ColSpanType = number | string;
+export type ColFlexType = number | 'none' | 'auto' | string;
+export interface ColProps {
+    /** Number of cells to occupy (24 columns), `0` hides the column */
+    span?: ColSpanType;
+    /** Number of cells to offset from the start */
+    offset?: ColSpanType;
+    /** Raster order */
+    order?: Numeric;
+    /** Number of cells that the column is moved to the end */
+    push?: ColSpanType;
+    /** Number of cells that the column is moved to the start */
+    pull?: ColSpanType;
+    /** `flex` layout style, e.g. `1`, `'100px'`, `'auto'`, `'1 1 200px'` */
+    flex?: ColFlexType;
+    rootClass?: string;
+}
+export interface ColSlots {
+    default?: () => any;
+}
+export type GridGap = number | string;
+export type GridOrientation = 'horizontal' | 'vertical';
+export interface GridItemType {
+    key?: Key;
+    icon?: VueNode;
+    title?: VueNode;
+    /** Number / text badge, `true` renders a dot */
+    badge?: number | string | boolean;
+    /** Number of columns the item spans */
+    span?: Numeric;
+    disabled?: boolean;
+    class?: string;
+    style?: CSSProperties;
+}
+export interface GridSemanticClassNames {
+    root?: string;
+    item?: string;
+    icon?: string;
+    title?: string;
+    badge?: string;
+}
+export interface GridSemanticStyles {
+    root?: CSSProperties;
+    item?: CSSProperties;
+    icon?: CSSProperties;
+    title?: CSSProperties;
+    badge?: CSSProperties;
+}
+export interface GridProps {
+    /** Data-driven items; `GridItem` children of the default slot are rendered after them */
+    items?: GridItemType[];
+    /** Number of columns */
+    columns?: Numeric;
+    /** Spacing between items, `[horizontal, vertical]` for both directions. Numbers are px. */
+    gap?: GridGap | [GridGap, GridGap];
+    /** Show the hairlines between items */
+    bordered?: boolean;
+    /** Keep every item square */
+    square?: boolean;
+    /** `vertical`: icon above the title; `horizontal`: icon beside the title */
+    orientation?: GridOrientation;
+    /** Press feedback and button semantics on the items */
+    clickable?: boolean;
+    /** Size of the icons. Numbers are px. */
+    iconSize?: Numeric;
+    rootClass?: string;
+    classes?: GridSemanticClassNames;
+    styles?: GridSemanticStyles;
+}
+export interface GridEmits {
+    /** An item of `items` was tapped (disabled items do not fire) */
+    itemClick: [item: GridItemType, index: number, event: MouseEvent];
+}
+export interface GridItemSlotContext {
+    item: GridItemType;
+    index: number;
+}
+export interface GridSlots {
+    /** `GridItem`s */
+    default?: () => any;
+    /** Icon of the `items` entries */
+    icon?: (ctx: GridItemSlotContext) => any;
+    /** Title of the `items` entries */
+    title?: (ctx: GridItemSlotContext) => any;
+}
+export interface GridItemSemanticClassNames {
+    root?: string;
+    icon?: string;
+    title?: string;
+    badge?: string;
+}
+export interface GridItemSemanticStyles {
+    root?: CSSProperties;
+    icon?: CSSProperties;
+    title?: CSSProperties;
+    badge?: CSSProperties;
+}
+export interface GridItemProps {
+    icon?: VueNode;
+    title?: VueNode;
+    /** Number / text badge, `true` renders a dot */
+    badge?: number | string | boolean;
+    /** Number of columns the item spans */
+    span?: Numeric;
+    disabled?: boolean;
+    rootClass?: string;
+    classes?: GridItemSemanticClassNames;
+    styles?: GridItemSemanticStyles;
+}
+export interface GridItemEmits {
+    click: [event: MouseEvent];
+}
+export interface GridItemSlots {
+    /** Replaces the whole content of the item */
+    default?: () => any;
+    icon?: () => any;
+    title?: () => any;
+}

package/dist/grid/style/grid.css

@@ -0,0 +1,172 @@
+.am-grid {
+  /* component tokens */
+  --am-grid-columns: 4;
+  --am-grid-background: var(--am-color-bg-container);
+  --am-grid-color: var(--am-color-text);
+  --am-grid-font-size: var(--am-font-size-sm);
+  --am-grid-icon-size: 28px;
+  --am-grid-icon-color: currentcolor;
+  --am-grid-item-padding: var(--am-padding) var(--am-padding-xs);
+  --am-grid-item-gap: var(--am-padding-xs);
+  --am-grid-item-radius: 0px;
+  --am-grid-border-color: var(--am-color-split);
+  --am-grid-badge-color: var(--am-color-error);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--am-grid-columns), minmax(0, 1fr));
+  box-sizing: border-box;
+  color: var(--am-grid-color);
+  font-size: var(--am-grid-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+}
+
+.am-grid-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--am-grid-item-gap);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--am-grid-item-padding);
+  color: var(--am-grid-color, var(--am-color-text));
+  background: var(--am-grid-background, var(--am-color-bg-container));
+  border-radius: var(--am-grid-item-radius, 0);
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.am-grid-horizontal > .am-grid-item {
+  flex-direction: row;
+}
+
+.am-grid-square > .am-grid-item {
+  aspect-ratio: 1;
+}
+
+.am-grid-item-clickable {
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition: background var(--am-motion-duration-fast);
+}
+
+.am-grid-item-clickable:active {
+  background: color-mix(in srgb, var(--am-grid-background, var(--am-color-bg-container)), var(--am-color-text-base) 5%);
+}
+
+.am-grid-item-clickable:focus-visible {
+  outline: 2px solid var(--am-color-primary-border);
+  outline-offset: -2px;
+}
+
+.am-grid-item-disabled {
+  cursor: not-allowed;
+}
+
+.am-grid-item-disabled > * {
+  opacity: var(--am-opacity-disabled);
+}
+
+.am-grid-item-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--am-grid-icon-color, currentcolor);
+  font-size: var(--am-grid-icon-size, 28px);
+  line-height: 1;
+}
+
+.am-grid-item-icon img {
+  display: block;
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
+
+.am-grid-item-title {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+/* the title holds the badge when there is no icon */
+.am-grid-item-title:has(> .am-grid-item-badge) {
+  overflow: visible;
+}
+
+/* the bubble is BaseBadge; only its size tokens and position are set here */
+.am-grid-item-badge {
+  --am-base-badge-size: 16px;
+  --am-base-badge-font-size: 10px;
+  --am-base-badge-bg: var(--am-grid-badge-color, var(--am-color-error));
+
+  position: absolute;
+  top: 0;
+  inset-inline-start: 100%;
+  padding: 0 4px;
+  font-weight: 500;
+  transform: translate(-50%, -25%);
+}
+
+[dir='rtl'] .am-grid-item-badge {
+  transform: translate(50%, -25%);
+}
+
+.am-grid-item-badge-dot {
+  padding: 0;
+  transform: translate(-50%, 0);
+}
+
+[dir='rtl'] .am-grid-item-badge-dot {
+  transform: translate(50%, 0);
+}
+
+/* hairlines: the grid draws top + start, every item draws end + bottom */
+.am-grid-bordered::before,
+.am-grid-bordered > .am-grid-item::after {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  border: 0 var(--am-line-type) var(--am-grid-border-color);
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  content: '';
+  pointer-events: none;
+}
+
+[dir='rtl'] .am-grid-bordered::before,
+[dir='rtl'] .am-grid-bordered > .am-grid-item::after {
+  transform-origin: 100% 0;
+}
+
+.am-grid-bordered::before {
+  border-block-start-width: var(--am-line-width);
+  border-inline-start-width: var(--am-line-width);
+}
+
+.am-grid-bordered > .am-grid-item::after {
+  border-block-end-width: var(--am-line-width);
+  border-inline-end-width: var(--am-line-width);
+}
+
+/* with a gap every item is a card with its own outline */
+.am-grid-gapped.am-grid-bordered::before {
+  display: none;
+}
+
+.am-grid-gapped.am-grid-bordered > .am-grid-item::after {
+  border-width: var(--am-line-width);
+  border-radius: calc(var(--am-grid-item-radius) * 2);
+}

package/dist/grid/style/index.css

@@ -0,0 +1,75 @@
+.am-row {
+  /* component tokens */
+  --am-row-gutter-x: 0px;
+
+  display: flex;
+  flex-flow: row wrap;
+  box-sizing: border-box;
+  min-width: 0;
+  margin-inline: calc(var(--am-row-gutter-x) / -2);
+}
+
+.am-row-no-wrap {
+  flex-wrap: nowrap;
+}
+
+.am-row-start {
+  justify-content: flex-start;
+}
+
+.am-row-center {
+  justify-content: center;
+}
+
+.am-row-end {
+  justify-content: flex-end;
+}
+
+.am-row-space-between {
+  justify-content: space-between;
+}
+
+.am-row-space-around {
+  justify-content: space-around;
+}
+
+.am-row-space-evenly {
+  justify-content: space-evenly;
+}
+
+.am-row-top {
+  align-items: flex-start;
+}
+
+.am-row-middle {
+  align-items: center;
+}
+
+.am-row-bottom {
+  align-items: flex-end;
+}
+
+.am-row-stretch {
+  align-items: stretch;
+}
+
+.am-col {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-height: 1px;
+  padding-inline: calc(var(--am-row-gutter-x) / 2);
+}
+
+.am-col-hidden {
+  display: none;
+}
+
+.am-col-flex {
+  max-width: none;
+}
+
+.am-row-no-wrap > .am-col-flex {
+  min-width: 0;
+}

package/dist/highlight/Highlight.js

@@ -0,0 +1,4 @@
+import Highlight_vue_vue_type_script_setup_true_lang_default from "./Highlight.vue_vue_type_script_setup_true_lang.js";
+// src/highlight/Highlight.vue
+var Highlight_default = Highlight_vue_vue_type_script_setup_true_lang_default;
+export { Highlight_default as default };

package/dist/highlight/Highlight.vue.d.ts

@@ -0,0 +1,19 @@
+import type { HighlightProps, HighlightSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = HighlightSlots;
+declare const __VLS_base: import("vue").DefineComponent<HighlightProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HighlightProps> & Readonly<{}>, {
+    content: string;
+    tag: string;
+    caseSensitive: boolean;
+    autoEscape: boolean;
+    highlightTag: string;
+}, {}, {}, {}, 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/dist/highlight/Highlight.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,66 @@
+import { getHighlightChunks } from "./utils.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, withCtx } from "vue";
+// src/highlight/Highlight.vue?vue&type=script&setup=true&lang.ts
+var Highlight_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmHighlight",
+	inheritAttrs: false,
+	__name: "Highlight",
+	props: {
+		content: { default: "" },
+		keywords: {},
+		caseSensitive: {
+			type: Boolean,
+			default: false
+		},
+		autoEscape: {
+			type: Boolean,
+			default: true
+		},
+		tag: { default: "span" },
+		highlightTag: { default: "mark" },
+		highlightClass: {},
+		unhighlightTag: {},
+		unhighlightClass: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const chunks = computed(() => getHighlightChunks(props.content, props.keywords, {
+			caseSensitive: props.caseSensitive,
+			autoEscape: props.autoEscape
+		}));
+		const wrapPlain = computed(() => !!props.unhighlightTag || !!props.unhighlightClass);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps(_ctx.$attrs, {
+				class: ["am-highlight", [__props.rootClass, __props.classes?.root]],
+				style: __props.styles?.root
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(chunks.value, (chunk) => {
+					return openBlock(), createElementBlock(Fragment, { key: chunk.start }, [chunk.highlight ? (openBlock(), createBlock(resolveDynamicComponent(__props.highlightTag), {
+						key: 0,
+						class: normalizeClass(["am-highlight-tag", [__props.highlightClass, __props.classes?.highlight]]),
+						style: normalizeStyle(__props.styles?.highlight)
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "highlight", {
+							text: chunk.text,
+							index: chunk.index
+						}, () => [createTextVNode(toDisplayString(chunk.text), 1)])]),
+						_: 2
+					}, 1032, ["class", "style"])) : wrapPlain.value ? (openBlock(), createBlock(resolveDynamicComponent(__props.unhighlightTag || "span"), {
+						key: 1,
+						class: normalizeClass(["am-highlight-text", __props.unhighlightClass])
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(chunk.text), 1)]),
+						_: 2
+					}, 1032, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(chunk.text), 1)], 64))], 64);
+				}), 128))]),
+				_: 3
+			}, 16, ["class", "style"]);
+		};
+	}
+});
+export { Highlight_vue_vue_type_script_setup_true_lang_default as default };

package/dist/highlight/index.d.ts

@@ -0,0 +1,36 @@
+export type * from './interface';
+export { getHighlightChunks } from './utils';
+declare const Highlight: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").HighlightProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        content: string;
+        tag: string;
+        caseSensitive: boolean;
+        autoEscape: boolean;
+        highlightTag: string;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").HighlightProps> & Readonly<{}>, {}, {}, {}, {}, {
+        content: string;
+        tag: string;
+        caseSensitive: boolean;
+        autoEscape: boolean;
+        highlightTag: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").HighlightProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    content: string;
+    tag: string;
+    caseSensitive: boolean;
+    autoEscape: boolean;
+    highlightTag: string;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").HighlightSlots;
+}), object>;
+export default Highlight;

package/dist/highlight/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from "../_util/withInstall.js";
+import { getHighlightChunks } from "./utils.js";
+import Highlight_default from "./Highlight.js";
+// src/highlight/index.ts
+var Highlight = withInstall(Highlight_default, "AmHighlight");
+export { Highlight as default, getHighlightChunks };

package/dist/highlight/interface.d.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties } from 'vue';
+export interface HighlightChunk {
+    /** Slice of `content` */
+    text: string;
+    /** Whether the slice matched a keyword */
+    highlight: boolean;
+    /** Position in `content` */
+    start: number;
+    end: number;
+    /** Index among the highlighted chunks, `-1` for plain text */
+    index: number;
+}
+export interface HighlightSemanticClassNames {
+    root?: string;
+    highlight?: string;
+}
+export interface HighlightSemanticStyles {
+    root?: CSSProperties;
+    highlight?: CSSProperties;
+}
+export interface HighlightProps {
+    /** Source text */
+    content?: string;
+    /** Keyword(s) to highlight */
+    keywords?: string | string[];
+    /** Match case */
+    caseSensitive?: boolean;
+    /** Treat keywords as literal text (escape RegExp special characters). `false` turns them into RegExp sources */
+    autoEscape?: boolean;
+    /** Root tag */
+    tag?: string;
+    /** Tag wrapping a match */
+    highlightTag?: string;
+    /** Extra class of a match */
+    highlightClass?: string;
+    /** Tag wrapping the text between matches. Plain text nodes when neither it nor `unhighlightClass` is set */
+    unhighlightTag?: string;
+    /** Extra class of the text between matches (wrapped in `unhighlightTag`, `span` by default) */
+    unhighlightClass?: string;
+    rootClass?: string;
+    classes?: HighlightSemanticClassNames;
+    styles?: HighlightSemanticStyles;
+}
+export interface HighlightSlots {
+    /** Custom render of a match */
+    highlight?: (props: {
+        text: string;
+        index: number;
+    }) => any;
+}

package/dist/highlight/style/index.css

@@ -0,0 +1,30 @@
+/*
+ * Highlight is inline text: the root deliberately inherits font and color from its context
+ * instead of setting its own (the exception to the "root sets its own font" rule).
+ */
+.am-highlight {
+  /* component tokens */
+  --am-highlight-color: var(--am-color-primary);
+  --am-highlight-background: transparent;
+  --am-highlight-font-weight: inherit;
+  --am-highlight-padding-inline: 0;
+  --am-highlight-border-radius: 0;
+
+  box-sizing: border-box;
+}
+
+.am-highlight-tag {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 var(--am-highlight-padding-inline);
+  color: var(--am-highlight-color);
+  font-weight: var(--am-highlight-font-weight);
+  font-style: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  text-decoration: inherit;
+  background: var(--am-highlight-background);
+  border-radius: var(--am-highlight-border-radius);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}

package/dist/highlight/utils.d.ts

@@ -0,0 +1,7 @@
+import type { HighlightChunk } from './interface';
+export interface HighlightOptions {
+    caseSensitive?: boolean;
+    autoEscape?: boolean;
+}
+/** Splits `content` into plain / highlighted chunks. Overlapping and adjacent matches are merged. */
+export declare function getHighlightChunks(content: string, keywords: string | string[] | undefined, options?: HighlightOptions): HighlightChunk[];

package/dist/highlight/utils.js

@@ -0,0 +1,60 @@
+// src/highlight/utils.ts
+function escapeRegExp(source) {
+	return source.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/** Splits `content` into plain / highlighted chunks. Overlapping and adjacent matches are merged. */
+function getHighlightChunks(content, keywords, options = {}) {
+	const { caseSensitive = false, autoEscape = true } = options;
+	if (!content) return [];
+	const list = (Array.isArray(keywords) ? keywords : [keywords]).filter((item) => typeof item === "string" && item !== "");
+	const ranges = [];
+	list.forEach((keyword) => {
+		let regexp;
+		try {
+			regexp = new RegExp(autoEscape ? escapeRegExp(keyword) : keyword, caseSensitive ? "g" : "gi");
+		} catch {
+			return;
+		}
+		let match = regexp.exec(content);
+		while (match) {
+			if (match[0].length === 0) regexp.lastIndex += 1;
+			else ranges.push([match.index, match.index + match[0].length]);
+			match = regexp.exec(content);
+		}
+	});
+	ranges.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+	const merged = [];
+	ranges.forEach(([start, end]) => {
+		const last = merged[merged.length - 1];
+		if (last && start <= last[1]) last[1] = Math.max(last[1], end);
+		else merged.push([start, end]);
+	});
+	const chunks = [];
+	let cursor = 0;
+	merged.forEach(([start, end], index) => {
+		if (start > cursor) chunks.push({
+			text: content.slice(cursor, start),
+			highlight: false,
+			start: cursor,
+			end: start,
+			index: -1
+		});
+		chunks.push({
+			text: content.slice(start, end),
+			highlight: true,
+			start,
+			end,
+			index
+		});
+		cursor = end;
+	});
+	if (cursor < content.length) chunks.push({
+		text: content.slice(cursor),
+		highlight: false,
+		start: cursor,
+		end: content.length,
+		index: -1
+	});
+	return chunks;
+}
+export { getHighlightChunks };

package/dist/hooks/browser.d.ts

@@ -0,0 +1,23 @@
+import type { Ref } from 'vue';
+export interface UseClipboardOptions {
+    /** how long `copied` stays true, in ms. Default `1500`. */
+    copiedDuring?: number;
+}
+/** Copy text, with a fallback for WebViews without the async Clipboard API. */
+export declare function useClipboard(options?: UseClipboardOptions): {
+    copy: (value: string) => Promise<boolean>;
+    copied: Ref<boolean, boolean>;
+    text: Ref<string, string>;
+};
+export interface UseStorageOptions<T> {
+    /** default: `localStorage` */
+    storage?: Storage;
+    serializer?: {
+        read: (raw: string) => T;
+        write: (value: T) => string;
+    };
+    /** follow changes made in other tabs. Default `true`. */
+    listenToStorageChanges?: boolean;
+}
+/** A ref persisted in `localStorage` (or any Storage). `null` / `undefined` removes the key. */
+export declare function useStorage<T>(key: string, defaultValue: T, options?: UseStorageOptions<T>): Ref<T>;