@bridge-ui/vue 0.0.1-beta.5 → 0.0.1-beta.7

package/dist/Components/Spinner/composables/useSpinner.js

@@ -0,0 +1,97 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i } from "vue";
+import { get as a, isNil as o } from "es-toolkit/compat";
+import { DEFAULT_SPINNER_THICKNESS as s, SPINNER_VIEWBOX_SIZE as c, cn as l, getSpinnerCircleGeometry as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core";
+import { colorProps as p, sizeProps as m, variantProps as h } from "@bridge-ui/core/Components/Spinner";
+//#region src/Components/Spinner/composables/useSpinner.ts
+var g = [
+	"size",
+	"color",
+	"value",
+	"classes",
+	"variant",
+	"thickness",
+	"customProps",
+	"enableTrack",
+	"disableShrink"
+];
+function _(e) {
+	return o(e) || Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+}
+function v(o, v) {
+	let y = i(), b = r(() => f({
+		props: {
+			...y,
+			...o
+		},
+		bridgeKeys: g
+	})), { merged: x, entry: S } = t({
+		libDefaults: v,
+		componentName: "Spinner",
+		props: () => b.value.componentProps
+	}), C = n({
+		entry: S,
+		props: () => b.value.componentProps
+	}), w = r(() => x.value.customProps), T = r(() => a(d(p, S.value?.customProps?.color), x.value.color)), E = r(() => a(d(m, S.value?.customProps?.size), x.value.size)), D = r(() => a(d(h, S.value?.customProps?.variant), x.value.variant)), O = r(() => x.value.thickness ?? s), k = r(() => x.value.variant === "determinate"), A = r(() => x.value.variant === "indeterminate"), j = r(() => !!x.value.enableTrack), M = r(() => !!x.value.disableShrink), N = r(() => _(x.value.value)), P = r(() => u(O.value)), F = c / 2, I = r(() => e(w.value?.root, b.value.inheritedAttrs, {
+		role: "progressbar",
+		...k.value ? {
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": N.value
+		} : {},
+		class: l({
+			"inline-block": !0,
+			[E.value ?? ""]: !0,
+			[D.value ?? ""]: A.value,
+			[C.value.root ?? ""]: !0
+		})
+	}));
+	return {
+		merged: x,
+		svgBind: r(() => e(w.value?.svg, { viewBox: `0 0 ${c} ${c}` }, l({
+			"block size-full": !0,
+			[C.value.svg ?? ""]: !0
+		}))),
+		rootBind: I,
+		trackBind: r(() => j.value ? e(w.value?.track, {
+			cx: F,
+			cy: F,
+			fill: "none",
+			r: P.value.radius,
+			"stroke-width": O.value
+		}, l({
+			[T.value?.track ?? ""]: !0,
+			[C.value.track ?? ""]: !0
+		})) : null),
+		circleBind: r(() => {
+			let { radius: t, circumference: n } = P.value, r = k.value ? {
+				transformOrigin: "50% 50%",
+				transform: "rotate(-90deg)",
+				strokeDasharray: n,
+				transition: "stroke-dashoffset 200ms linear",
+				strokeDashoffset: (100 - N.value) / 100 * n
+			} : {}, i = A.value ? {
+				strokeDashoffset: 0,
+				strokeDasharray: M.value ? `${n * .8}px, ${n}px` : "80px, 200px"
+			} : {};
+			return e(w.value?.circle, {
+				r: t,
+				cx: F,
+				cy: F,
+				fill: "none",
+				"stroke-width": O.value,
+				style: {
+					...r,
+					...i
+				}
+			}, l({
+				[T.value?.circle ?? ""]: !0,
+				"animate-bridge-spinner-dash": A.value && !M.value,
+				[C.value.circle ?? ""]: !0
+			}));
+		}),
+		enableTrack: j
+	};
+}
+//#endregion
+export { v as useSpinner };

package/dist/Components/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+export { useSpinner } from './composables/useSpinner';
+export type { SpinnerClasses, SpinnerColorOverrides, SpinnerCustomProps, SpinnerOwnProps, SpinnerProps, SpinnerSizeOverrides, SpinnerVariantOverrides, } from './spinner.types';
+export { default as Spinner } from './Spinner.vue';

package/dist/Components/Spinner/index.js

@@ -0,0 +1,3 @@
+import { useSpinner as e } from "./composables/useSpinner.js";
+import t from "./Spinner.js";
+export { t as Spinner, e as useSpinner };

package/dist/Components/Spinner/spinner.types.d.ts

@@ -0,0 +1,99 @@
+import { HTMLAttributes, SVGAttributes } from 'vue';
+import { MergeHtmlProps, MergeProps, SpinnerColor, SpinnerSize, SpinnerVariant } from '@bridge-ui/core';
+export interface SpinnerSizeOverrides {}
+export interface SpinnerColorOverrides {}
+export interface SpinnerVariantOverrides {}
+export interface SpinnerClasses {
+    /**
+     * The classes to apply to the progress circle.
+     */
+    circle?: string;
+    /**
+     * The classes to apply to the root.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the svg element.
+     */
+    svg?: string;
+    /**
+     * The classes to apply to the track circle.
+     */
+    track?: string;
+}
+export interface SpinnerCustomProps {
+    /**
+     * Props forwarded to the progress circle.
+     */
+    circle?: SVGAttributes;
+    /**
+     * Props forwarded to the root element.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the svg element.
+     */
+    svg?: SVGAttributes;
+    /**
+     * Props forwarded to the track circle.
+     */
+    track?: SVGAttributes;
+}
+export interface SpinnerOwnProps {
+    /**
+     * The classes to apply to spinner parts.
+     *
+     * @default undefined
+     */
+    classes?: SpinnerClasses;
+    /**
+     * The color of the spinner.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<SpinnerColor, SpinnerColorOverrides>;
+    /**
+     * Extra props for internal parts (`root`, `svg`, `circle`, `track`).
+     * Root HTML attributes stay on the component top level.
+     *
+     * @default undefined
+     */
+    customProps?: SpinnerCustomProps;
+    /**
+     * Disables the indeterminate shrink animation on the circle.
+     *
+     * @default false
+     */
+    disableShrink?: boolean;
+    /**
+     * Renders a subtle track circle behind the progress arc.
+     *
+     * @default false
+     */
+    enableTrack?: boolean;
+    /**
+     * The size of the spinner.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<SpinnerSize, SpinnerSizeOverrides>;
+    /**
+     * The stroke thickness of the circle.
+     *
+     * @default 3.6
+     */
+    thickness?: number;
+    /**
+     * Progress value from 0 to 100. Used by the `determinate` variant.
+     *
+     * @default undefined
+     */
+    value?: number;
+    /**
+     * Visual variant of the spinner.
+     *
+     * @default "indeterminate"
+     */
+    variant?: MergeProps<SpinnerVariant, SpinnerVariantOverrides>;
+}
+export type SpinnerProps = MergeHtmlProps<SpinnerOwnProps, HTMLAttributes>;

package/dist/augments.d.ts

@@ -11,17 +11,19 @@ import { FormFieldClasses, FormFieldProps } from './Components/FormField';
 import { IconProps } from './Components/Icon';
 import { LabelClasses, LabelProps } from './Components/Label';
 import { LinkClasses, LinkProps } from './Components/Link';
-import { ListClasses, ListProps } from './Components/List';
+import { ListClasses } from './Components/List';
 import { ListItemClasses, ListItemProps } from './Components/ListItem';
 import { ListSectionClasses } from './Components/ListSection';
 import { MenuClasses, MenuProps } from './Components/Menu';
 import { ModalClasses, ModalProps } from './Components/Modal';
 import { NumberFieldClasses } from './Components/NumberField';
 import { PasswordFieldClasses } from './Components/PasswordField';
+import { ProgressClasses, ProgressProps } from './Components/Progress';
 import { RadioClasses, RadioProps } from './Components/Radio';
 import { SelectClasses, SelectProps } from './Components/Select';
 import { SkeletonClasses, SkeletonProps } from './Components/Skeleton';
 import { SnackbarClasses, SnackbarProps } from './Components/Snackbar';
+import { SpinnerClasses, SpinnerProps } from './Components/Spinner';
 import { SwitchClasses, SwitchProps } from './Components/Switch';
 import { TextareaClasses, TextareaProps } from './Components/Textarea';
 declare module "@bridge-ui/core" {
@@ -78,11 +80,10 @@ declare module "@bridge-ui/core" {
     }
     interface ListConfigOverrides {
         classes: ListClasses;
-        defaultProps: Partial<Pick<ListProps, "padding">>;
     }
     interface ListItemConfigOverrides {
         classes: ListItemClasses;
-        defaultProps: Partial<Pick<ListItemProps, "role" | "align" | "selectedIcon">>;
+        defaultProps: Partial<Pick<ListItemProps, "role" | "selectedIcon">>;
     }
     interface ListSectionConfigOverrides {
         classes: ListSectionClasses;
@@ -101,6 +102,10 @@ declare module "@bridge-ui/core" {
     interface PasswordFieldConfigOverrides {
         classes: PasswordFieldClasses;
     }
+    interface ProgressConfigOverrides {
+        classes: ProgressClasses;
+        defaultProps: Partial<Pick<ProgressProps, "size" | "color" | "rounded" | "variant">>;
+    }
     interface RadioConfigOverrides {
         classes: RadioClasses;
         defaultProps: Partial<Pick<RadioProps, "size" | "color" | "rounded">>;
@@ -117,6 +122,10 @@ declare module "@bridge-ui/core" {
         classes: SkeletonClasses;
         defaultProps: Partial<Pick<SkeletonProps, "rounded">>;
     }
+    interface SpinnerConfigOverrides {
+        classes: SpinnerClasses;
+        defaultProps: Partial<Pick<SpinnerProps, "size" | "color" | "variant" | "thickness" | "enableTrack" | "disableShrink">>;
+    }
     interface SwitchConfigOverrides {
         classes: SwitchClasses;
         defaultProps: Partial<Pick<SwitchProps, "size" | "color" | "rounded">>;

package/dist/index.d.ts

@@ -25,11 +25,11 @@ export type { LabelClasses, LabelOwnProps, LabelProps, LabelSizeOverrides, } fro
 export { Link, useLink } from './Components/Link';
 export type { LinkClasses, LinkColorOverrides, LinkCustomProps, LinkOwnProps, LinkProps, LinkSizeOverrides, LinkSlots, LinkUnderlineOverrides, } from './Components/Link';
 export { List, useList } from './Components/List';
-export type { ListClasses, ListContextValue, ListCustomProps, ListOwnProps, ListPaddingOverrides, ListProps, } from './Components/List';
+export type { ListClasses, ListContextValue, ListCustomProps, ListOwnProps, ListProps, } from './Components/List';
 export { Listbox, findFirstEnabledOptionIndex, findLastEnabledOptionIndex, getListboxActiveDescendantId, getListboxOptionId, moveListboxHighlight, useListbox, useListboxNavigation, } from './Components/Listbox';
 export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './Components/Listbox';
 export { ListItem } from './Components/ListItem';
-export type { ListItemAlignOverrides, ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './Components/ListItem';
+export type { ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './Components/ListItem';
 export { ListSection } from './Components/ListSection';
 export type { ListSectionClasses, ListSectionCustomProps, ListSectionOwnProps, ListSectionProps, ListSectionSlots, } from './Components/ListSection';
 export { Menu, useMenu } from './Components/Menu';
@@ -40,6 +40,8 @@ export { NumberField, useNumberField } from './Components/NumberField';
 export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
 export { PasswordField, usePasswordField } from './Components/PasswordField';
 export type { PasswordFieldClasses, PasswordFieldCustomProps, PasswordFieldOwnProps, PasswordFieldProps, PasswordFieldSlots, } from './Components/PasswordField';
+export { Progress, useProgress } from './Components/Progress';
+export type { ProgressClasses, ProgressColorOverrides, ProgressCustomProps, ProgressOwnProps, ProgressProps, ProgressRoundedOverrides, ProgressSizeOverrides, ProgressVariantOverrides, } from './Components/Progress';
 export { Radio, useRadio } from './Components/Radio';
 export type { RadioClasses, RadioColorOverrides, RadioCustomProps, RadioOwnProps, RadioProps, RadioRoundedOverrides, RadioSizeOverrides, RadioSlots, } from './Components/Radio';
 export { Select, SelectOption } from './Components/Select';
@@ -48,6 +50,8 @@ export { Skeleton, useSkeleton } from './Components/Skeleton';
 export type { SkeletonClasses, SkeletonOwnProps, SkeletonProps, SkeletonRoundedOverrides, } from './Components/Skeleton';
 export { Snackbar, useSnackbar } from './Components/Snackbar';
 export type { SnackbarClasses, SnackbarColorOverrides, SnackbarCustomProps, SnackbarEmits, SnackbarOwnProps, SnackbarPaddingOverrides, SnackbarProps, SnackbarSlots, SnackbarTransitionOverrides, } from './Components/Snackbar';
+export { Spinner, useSpinner } from './Components/Spinner';
+export type { SpinnerClasses, SpinnerColorOverrides, SpinnerCustomProps, SpinnerOwnProps, SpinnerProps, SpinnerSizeOverrides, SpinnerVariantOverrides, } from './Components/Spinner';
 export { Switch, useSwitch } from './Components/Switch';
 export type { SwitchClasses, SwitchColorOverrides, SwitchCustomProps, SwitchOwnProps, SwitchProps, SwitchRoundedOverrides, SwitchSizeOverrides, SwitchSlots, } from './Components/Switch';
 export { Textarea, useTextarea } from './Components/Textarea';

package/dist/index.js

@@ -29,31 +29,35 @@ import O from "./Components/List/List.js";
 import { useListbox as k } from "./Components/Listbox/composables/useListbox.js";
 import { findFirstEnabledOptionIndex as A, findLastEnabledOptionIndex as j, getListboxActiveDescendantId as M, getListboxOptionId as N, moveListboxHighlight as P, useListboxNavigation as F } from "./Components/Listbox/composables/useListboxNavigation.js";
 import I from "./Components/ListItem/ListItem.js";
-import { useMenu as L } from "./Components/Menu/composables/useMenu.js";
-import R from "./Components/Menu/Menu.js";
-import z from "./Components/Listbox/Listbox.js";
-import B from "./Components/ListSection/ListSection.js";
-import { useModal as V } from "./Components/Modal/composables/useModal.js";
-import H from "./Components/Modal/Modal.js";
-import { useNumberField as U } from "./Components/NumberField/composables/useNumberField.js";
-import W from "./Components/NumberField/NumberField.js";
-import { usePasswordField as G } from "./Components/PasswordField/composables/usePasswordField.js";
-import K from "./Components/PasswordField/PasswordField.js";
-import { useRadio as q } from "./Components/Radio/composables/useRadio.js";
-import J from "./Components/Radio/Radio.js";
-import Y from "./Components/Select/Select.js";
-import X from "./Components/Select/SelectOption.js";
-import { useSkeleton as Z } from "./Components/Skeleton/composables/useSkeleton.js";
-import Q from "./Components/Skeleton/Skeleton.js";
-import { useSnackbar as $ } from "./Components/Snackbar/composables/useSnackbar.js";
-import ee from "./Components/Snackbar/Snackbar.js";
-import { useSwitch as te } from "./Components/Switch/composables/useSwitch.js";
-import ne from "./Components/Switch/Switch.js";
-import { useTextarea as re } from "./Components/Textarea/composables/useTextarea.js";
-import ie from "./Components/Textarea/Textarea.js";
-import { useTextField as ae } from "./Components/TextField/composables/useTextField.js";
-import oe from "./Components/TextField/TextField.js";
-import se from "./Provider/BridgeUIProvider.js";
-import { createBridgeUI as ce } from "./Provider/createBridgeUI.js";
-import { BRIDGE_UI_DEFAULT_GLOBAL as le, cn as ue, mergeBridgeUIComponents as de, mergeBridgeUIGlobal as fe, resolveBridgeUIOptions as pe } from "@bridge-ui/core";
-export { a as Alert, o as Avatar, le as BRIDGE_UI_DEFAULT_GLOBAL, c as Badge, se as BridgeUIProvider, u as Button, f as Card, g as Checkbox, v as Chip, b as Divider, m as FormControl, S as FormField, i as Icon, w as Label, E as Link, O as List, I as ListItem, B as ListSection, z as Listbox, R as Menu, H as Modal, W as NumberField, K as PasswordField, J as Radio, Y as Select, X as SelectOption, Q as Skeleton, ee as Snackbar, ne as Switch, oe as TextField, ie as Textarea, ue as cn, ce as createBridgeUI, A as findFirstEnabledOptionIndex, j as findLastEnabledOptionIndex, M as getListboxActiveDescendantId, N as getListboxOptionId, de as mergeBridgeUIComponents, fe as mergeBridgeUIGlobal, P as moveListboxHighlight, pe as resolveBridgeUIOptions, r as useAlert, s as useBadge, e as useBridgeUI, t as useBridgeUIComponent, n as useBridgeUIMergedRegistryClasses, l as useButton, d as useCard, h as useCheckbox, _ as useChip, y as useDivider, p as useFormControl, x as useFormField, C as useLabel, T as useLink, D as useList, k as useListbox, F as useListboxNavigation, L as useMenu, V as useModal, U as useNumberField, G as usePasswordField, q as useRadio, Z as useSkeleton, $ as useSnackbar, te as useSwitch, ae as useTextField, re as useTextarea };
+import L from "./Components/ListSection/ListSection.js";
+import { useMenu as R } from "./Components/Menu/composables/useMenu.js";
+import z from "./Components/Menu/Menu.js";
+import { useProgress as B } from "./Components/Progress/composables/useProgress.js";
+import V from "./Components/Progress/Progress.js";
+import H from "./Components/Listbox/Listbox.js";
+import { useModal as U } from "./Components/Modal/composables/useModal.js";
+import W from "./Components/Modal/Modal.js";
+import { useNumberField as G } from "./Components/NumberField/composables/useNumberField.js";
+import K from "./Components/NumberField/NumberField.js";
+import { usePasswordField as q } from "./Components/PasswordField/composables/usePasswordField.js";
+import J from "./Components/PasswordField/PasswordField.js";
+import { useRadio as Y } from "./Components/Radio/composables/useRadio.js";
+import X from "./Components/Radio/Radio.js";
+import Z from "./Components/Select/Select.js";
+import Q from "./Components/Select/SelectOption.js";
+import { useSkeleton as $ } from "./Components/Skeleton/composables/useSkeleton.js";
+import ee from "./Components/Skeleton/Skeleton.js";
+import { useSnackbar as te } from "./Components/Snackbar/composables/useSnackbar.js";
+import ne from "./Components/Snackbar/Snackbar.js";
+import { useSpinner as re } from "./Components/Spinner/composables/useSpinner.js";
+import ie from "./Components/Spinner/Spinner.js";
+import { useSwitch as ae } from "./Components/Switch/composables/useSwitch.js";
+import oe from "./Components/Switch/Switch.js";
+import { useTextarea as se } from "./Components/Textarea/composables/useTextarea.js";
+import ce from "./Components/Textarea/Textarea.js";
+import { useTextField as le } from "./Components/TextField/composables/useTextField.js";
+import ue from "./Components/TextField/TextField.js";
+import de from "./Provider/BridgeUIProvider.js";
+import { createBridgeUI as fe } from "./Provider/createBridgeUI.js";
+import { BRIDGE_UI_DEFAULT_GLOBAL as pe, cn as me, mergeBridgeUIComponents as he, mergeBridgeUIGlobal as ge, resolveBridgeUIOptions as _e } from "@bridge-ui/core";
+export { a as Alert, o as Avatar, pe as BRIDGE_UI_DEFAULT_GLOBAL, c as Badge, de as BridgeUIProvider, u as Button, f as Card, g as Checkbox, v as Chip, b as Divider, m as FormControl, S as FormField, i as Icon, w as Label, E as Link, O as List, I as ListItem, L as ListSection, H as Listbox, z as Menu, W as Modal, K as NumberField, J as PasswordField, V as Progress, X as Radio, Z as Select, Q as SelectOption, ee as Skeleton, ne as Snackbar, ie as Spinner, oe as Switch, ue as TextField, ce as Textarea, me as cn, fe as createBridgeUI, A as findFirstEnabledOptionIndex, j as findLastEnabledOptionIndex, M as getListboxActiveDescendantId, N as getListboxOptionId, he as mergeBridgeUIComponents, ge as mergeBridgeUIGlobal, P as moveListboxHighlight, _e as resolveBridgeUIOptions, r as useAlert, s as useBadge, e as useBridgeUI, t as useBridgeUIComponent, n as useBridgeUIMergedRegistryClasses, l as useButton, d as useCard, h as useCheckbox, _ as useChip, y as useDivider, p as useFormControl, x as useFormField, C as useLabel, T as useLink, D as useList, k as useListbox, F as useListboxNavigation, R as useMenu, U as useModal, G as useNumberField, q as usePasswordField, B as useProgress, Y as useRadio, $ as useSkeleton, te as useSnackbar, re as useSpinner, ae as useSwitch, le as useTextField, se as useTextarea };

package/dist/theme.css

@@ -98,12 +98,18 @@
   --color-info-900: var(--color-blue-900);
   --color-info-950: var(--color-blue-950);
 
-  /* Listbox indeterminate loading bar */
-  --animate-bridge-listbox-indeterminate: bridge-listbox-indeterminate 1.4s
+  /* Progress linear bar animations */
+  --animate-bridge-progress-indeterminate: bridge-progress-indeterminate 1.4s
     ease-in-out infinite;
+  --animate-bridge-progress-query: bridge-progress-query 1.4s ease-in-out
+    infinite;
+
+  /* Spinner circular animations */
+  --animate-bridge-spinner-rotate: bridge-spinner-rotate 1.4s linear infinite;
+  --animate-bridge-spinner-dash: bridge-spinner-dash 1.4s ease-in-out infinite;
 }
 
-@keyframes bridge-listbox-indeterminate {
+@keyframes bridge-progress-indeterminate {
   0% {
     transform: translateX(-100%);
   }
@@ -113,6 +119,43 @@
   }
 }
 
+@keyframes bridge-progress-query {
+  0% {
+    transform: translateX(400%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes bridge-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bridge-spinner-dash {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
+  }
+}
+
 /**
  * FormField slot adornments (`bridge-start-adornment` / `bridge-end-adornment`).
  * Parent `.group/field` sets `data-bridge-rounded` from FormField `rounded`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.0.1-beta.5",
+  "version": "0.0.1-beta.7",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -60,7 +60,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@bridge-ui/core": "^0.0.1-beta.5",
+    "@bridge-ui/core": "^0.0.1-beta.7",
     "@lucide/vue": ">=1.0.0",
     "vue": "^3.4.0"
   },