@bridge-ui/vue 0.3.0 → 0.5.0

package/ai/skills/bridge-ui-components/SKILL.md

@@ -2,7 +2,7 @@
 name: bridge-ui-components
 description: >-
   Use Bridge UI Vue components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
-  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, Progress, Stepper, Pagination, TextField, Select,
+  Link, List, Table, DataTable, Tabs, Spinner, Skeleton, EmptyState, Sidebar, Progress, Stepper, Pagination, TextField, Select,
   Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
   TimeField, TimePicker, DateTimeField, DateTimePicker, ColorField, ColorPicker,
   classes, customProps, slots. Use when building UI with Bridge components.
@@ -32,6 +32,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Tabs                          | `.ai/docs/components/Tabs.md`                                         |
 | Text input                    | `.ai/docs/components/TextField.md`                                    |
 | Select / autocomplete         | `.ai/docs/components/Select.md`, `Autocomplete.md`                    |
+| Sidebar / app shell           | `.ai/docs/components/Sidebar.md`                                      |
 | Date                          | `.ai/docs/components/DateField.md`, `DatePicker.md`                   |
 | Date range                    | `.ai/docs/components/DateRangeField.md`, `DateRangePicker.md`         |
 | Time                          | `.ai/docs/components/TimeField.md`, `TimePicker.md`                   |
@@ -40,6 +41,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Date-time range               | `.ai/docs/components/DateTimeRangeField.md`, `DateTimeRangePicker.md` |
 | Color                         | `.ai/docs/components/ColorField.md`, `ColorPicker.md`                 |
 | Spinner / skeleton / progress | `.ai/docs/components/Spinner.md`, `Skeleton.md`, `Progress.md`        |
+| Empty / no data               | `.ai/docs/components/EmptyState.md`                                   |
 | Scroll fade / scrollbar       | `.ai/docs/ScrollUtilities.md`                                         |
 | Index                         | `.ai/docs/README.md`                                                  |
 

package/dist/Components/Accordion/accordionInjectionKey.d.ts

@@ -10,6 +10,7 @@ export type AccordionTokenClasses = {
     itemSize?: string;
     itemVariant?: string;
     panelSize?: string;
+    panelVariant?: string;
     rootSize?: string;
     rootVariant?: string;
     triggerSize?: string;

package/dist/Components/Accordion/composables/useAccordion.js

@@ -61,9 +61,10 @@ function b(b, x, S, C) {
 			triggerSize: l(V.value, "trigger"),
 			rootVariant: l(H.value, "root"),
 			itemVariant: l(H.value, "item"),
+			panelVariant: l(H.value, "panel"),
 			triggerVariant: l(H.value, "trigger"),
-			colorIndicator: l(U.value, "indicator"),
-			colorTriggerExpanded: l(U.value, "triggerExpanded")
+			colorIndicator: A.value.variant === "plain" ? void 0 : l(U.value, "indicator"),
+			colorTriggerExpanded: A.value.variant === "plain" ? void 0 : l(U.value, "triggerExpanded")
 		}
 	}));
 	return a(e, W), {

package/dist/Components/AccordionItem/composables/useAccordionItem.js

@@ -111,6 +111,7 @@ function y(y) {
 			"aria-labelledby": p(C.value.id, D.value),
 			class: g({
 				[C.value.tokenClasses.panelSize ?? ""]: !0,
+				[C.value.tokenClasses.panelVariant ?? ""]: !0,
 				[d(N.value, "panel") ?? ""]: !0
 			})
 		})),

package/dist/Components/Autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t, presentSlotNames as n } from "../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as r } from "../../Utils/index.js";
-import i from "../Icon/Icon.js";
+import { useOptionalModel as r } from "../../Utils/useOptionalModel.js";
+import { mergeNestedComponentProps as i } from "../../Utils/index.js";
+import ee from "../Icon/Icon.js";
 import { AUTOCOMPLETE_OPTION_KEY as a } from "./autocompleteInjectionKey.js";
-import { useAutocomplete as ee } from "./composables/useAutocomplete.js";
-import o from "../Chip/Chip.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as te } from "../FormField/formField.types.js";
-import ne from "../FormField/FormField.js";
-import s from "../Listbox/Listbox.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as oe, withCtx as O, withKeys as k, withModifiers as A } from "vue";
-import { isUndefined as j } from "es-toolkit/compat";
+import { useAutocomplete as o } from "./composables/useAutocomplete.js";
+import te from "../Chip/Chip.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as ne } from "../FormField/formField.types.js";
+import s from "../FormField/FormField.js";
+import c from "../Listbox/Listbox.js";
+import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 import { cn as M } from "@bridge-ui/core/Utils";
 //#region src/Components/Autocomplete/Autocomplete.vue?vue&type=script&setup=true&lang.ts
 var N = {
@@ -102,12 +102,7 @@ var N = {
 		"update:modelValue"
 	], ["update:modelValue"]),
 	setup(g, { emit: y }) {
-		let L = ae(g, "modelValue"), R = g, z = e(), B = y, V = w(R.defaultValue), H = l({
-			set: (e) => {
-				L.value = e, V.value = e;
-			},
-			get: () => j(L.value) ? V.value : L.value
-		}), U = oe("trigger"), W = w([]);
+		let L = ae(g, "modelValue"), R = g, z = e(), B = y, V = w(R.defaultValue), H = r(L, V), U = O("trigger"), W = w([]);
 		C(a, {
 			unregister(e) {
 				W.value = W.value.filter((t) => String(t.value) !== String(e));
@@ -116,24 +111,24 @@ var N = {
 				W.value.some((t) => String(t.value) === String(e.value)) || (W.value = [...W.value, e]);
 			}
 		});
-		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: se, triggerBind: Z, handleApply: ce, selectOption: le, handleCancel: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, showClearIcon: me, selectedOptions: he, hasComposedList: $, handleRegisteredOptionsChange: ge } = ee(R, H, U, B, W);
-		return (e, a) => (S(), f(c, null, [
-			h(D(ne), { field: D(J) }, m({
-				default: O(() => [D(q) ? (S(), f("div", N, [(S(!0), f(c, null, T(D(he), (t) => (S(), u(D(o), b({
+		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: oe, triggerBind: Z, handleApply: se, selectOption: ce, handleCancel: le, containerRef: ue, listboxProps: Q, clearIconSize: de, mergedClasses: fe, showClearIcon: pe, selectedOptions: me, hasComposedList: $, handleRegisteredOptionsChange: he } = o(R, H, U, B, W);
+		return (e, r) => (S(), f(l, null, [
+			h(D(s), { field: D(J) }, m({
+				default: k(() => [D(q) ? (S(), f("div", N, [(S(!0), f(l, null, T(D(me), (t) => (S(), u(D(te), b({
 					dismissible: "",
 					key: String(t.value),
 					size: D(J).merged.value.size,
 					disabled: D(J).isDisabled.value,
 					"clear-label": `Remove ${t.label}`,
-					onDismiss: (e) => D(se)(t, e)
-				}, { ref_for: !0 }, D(r)(R.customProps?.chip, {
+					onDismiss: (e) => D(oe)(t, e)
+				}, { ref_for: !0 }, D(i)(R.customProps?.chip, {
 					customProps: { clear: D(Y) },
 					classes: { root: D(M)({
 						"bg-white ring-1 ring-inset ring-dark-200 dark:bg-dark-700 dark:ring-dark-600": !0,
-						[D(pe).chip ?? ""]: !0
+						[D(fe).chip ?? ""]: !0
 					}) }
 				})), {
-					default: O(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
+					default: k(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
 					_: 2
 				}, 1040, [
 					"size",
@@ -143,62 +138,62 @@ var N = {
 				]))), 128)), p("textarea", b({ ref: "trigger" }, D(Z)), null, 16)])) : (S(), f("div", P, [p("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, D(Z)), null, 16), D(me) ? (S(), f("span", b({ key: 0 }, D(Y), {
-					onClick: a[0] ||= (...e) => D(X) && D(X)(...e),
-					onKeydown: [a[1] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), a[2] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
+				}, D(Z)), null, 16), D(pe) ? (S(), f("span", b({ key: 0 }, D(Y), {
+					onClick: r[0] ||= (...e) => D(X) && D(X)(...e),
+					onKeydown: [r[1] ||= A(j((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), r[2] ||= A(j((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
 					"aria-label": D(z)("Clear selection")
-				}), [h(D(i), b({
+				}), [h(D(ee), b({
 					icon: "clear",
-					size: D(fe)
+					size: D(de)
 				}, R.customProps?.clearIcon), null, 16, ["size"])], 16, F)) : d("", !0)]))]),
 				_: 2
-			}, [T(D(n)(D(te), e.$slots), (t) => ({
+			}, [T(D(n)(D(ne), e.$slots), (t) => ({
 				name: t,
-				fn: O((n) => [E(e.$slots, t, x(_(n || {})))])
+				fn: k((n) => [E(e.$slots, t, x(_(n || {})))])
 			}))]), 1032, ["field"]),
-			h(D(s), b({
+			h(D(c), b({
 				modelValue: D(G),
-				"onUpdate:modelValue": a[3] ||= (e) => v(G) ? G.value = e : null
-			}, D(de), {
-				onApply: D(ce),
-				"anchor-el": D(Q),
-				onCancel: D(ue),
-				onSelect: D(le),
-				onRegisteredOptionsChange: D(ge)
+				"onUpdate:modelValue": r[3] ||= (e) => v(G) ? G.value = e : null
+			}, D(Q), {
+				onApply: D(se),
+				"anchor-el": D(ue),
+				onCancel: D(le),
+				onSelect: D(ce),
+				onRegisteredOptionsChange: D(he)
 			}), m({ _: 2 }, [
 				D($) ? {
 					name: "default",
-					fn: O(() => [E(e.$slots, "default")]),
+					fn: k(() => [E(e.$slots, "default")]),
 					key: "0"
 				} : void 0,
 				D(t)(D(K), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: O(() => [E(e.$slots, "beforeOptions")]),
+					fn: k(() => [E(e.$slots, "beforeOptions")]),
 					key: "1"
 				} : void 0,
 				D(t)(D(K), "loading") ? {
 					name: "loading",
-					fn: O(() => [E(e.$slots, "loading")]),
+					fn: k(() => [E(e.$slots, "loading")]),
 					key: "2"
 				} : void 0,
 				D(t)(D(K), "option") ? {
 					name: "option",
-					fn: O((t) => [E(e.$slots, "option", x(_(t)))]),
+					fn: k((t) => [E(e.$slots, "option", x(_(t)))]),
 					key: "3"
 				} : void 0,
 				D(t)(D(K), "empty") ? {
 					name: "empty",
-					fn: O(() => [E(e.$slots, "empty")]),
+					fn: k(() => [E(e.$slots, "empty")]),
 					key: "4"
 				} : void 0,
 				D(t)(D(K), "footer") ? {
 					name: "footer",
-					fn: O((t) => [E(e.$slots, "footer", x(_(t)))]),
+					fn: k((t) => [E(e.$slots, "footer", x(_(t)))]),
 					key: "5"
 				} : void 0,
 				D(t)(D(K), "afterOptions") ? {
 					name: "afterOptions",
-					fn: O(() => [E(e.$slots, "afterOptions")]),
+					fn: k(() => [E(e.$slots, "afterOptions")]),
 					key: "6"
 				} : void 0
 			]), 1040, [

package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts

@@ -449,6 +449,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;

package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,13 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import n from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
-import i from "../FormField/FormField.js";
-import a from "../FieldOverlay/FieldOverlay.js";
-import { useColorField as o } from "./composables/useColorField.js";
-import s from "../ColorPicker/ColorPicker.js";
-import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as ee, withCtx as E, withKeys as D, withModifiers as O } from "vue";
-import { isUndefined as k } from "es-toolkit/compat";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useColorField as s } from "./composables/useColorField.js";
+import c from "../ColorPicker/ColorPicker.js";
+import { Fragment as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
 //#region src/Components/ColorField/ColorField.vue?vue&type=script&setup=true&lang.ts
 var A = { class: "flex min-w-0 flex-1 items-center gap-2" }, j = ["aria-label"], M = /*@__PURE__*/ h({
 	inheritAttrs: !1,
@@ -74,52 +74,47 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-2" }, j = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(h, { emit: _ }) {
-		let M = ee(h, "modelValue"), N = h, P = _, F = e(), I = S(N.defaultValue ?? null), L = l({
-			set: (e) => {
-				M.value = e, I.value = e;
-			},
-			get: () => k(M.value) ? I.value : M.value
-		}), { open: R, fill: z, format: B, overlay: V, colorOnly: H, formField: U, inputBind: W, clearBind: G, swatchBind: K, clearValue: q, modelValue: J, showFooter: Y, showSwatch: X, pickerClass: Z, clearIconSize: Q, showClearIcon: $, swatchFillBind: te, handleOpenChange: ne, handlePickerChange: re, handlePickerCancel: ie, overlayCustomProps: ae, colorPickerCustomProps: oe } = o(N, L, P);
-		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
-			default: E(() => [f("div", A, [
-				T(X) ? (x(), d("span", b(v({ key: 0 }, T(K))), [f("span", b(g(T(te))), null, 16)], 16)) : u("", !0),
-				f("input", b(g(T(W))), null, 16),
-				T($) ? (x(), d("span", v({ key: 1 }, T(G), {
-					onClick: o[0] ||= (...e) => T(q) && T(q)(...e),
-					"aria-label": T(F)("Clear"),
-					onKeydown: [o[1] ||= D(O((...e) => T(q) && T(q)(...e), ["prevent"]), ["enter"]), o[2] ||= D(O((...e) => T(q) && T(q)(...e), ["prevent"]), ["space"])]
-				}), [m(T(n), v({
+		let M = E(h, "modelValue"), N = e(), P = _, F = h, I = S(F.defaultValue ?? null), L = n(M, I), { open: R, fill: z, format: B, overlay: ee, colorOnly: V, formField: H, inputBind: U, clearBind: W, swatchBind: G, clearValue: K, modelValue: q, showFooter: J, showSwatch: Y, pickerClass: X, clearIconSize: Z, showClearIcon: Q, swatchFillBind: $, handleOpenChange: te, handlePickerChange: ne, handlePickerCancel: re, overlayCustomProps: ie, colorPickerCustomProps: ae } = s(F, L, P);
+		return (e, n) => (x(), d(l, null, [m(T(a), { field: T(H) }, p({
+			default: D(() => [f("div", A, [
+				T(Y) ? (x(), d("span", b(v({ key: 0 }, T(G))), [f("span", b(g(T($))), null, 16)], 16)) : u("", !0),
+				f("input", b(g(T(U))), null, 16),
+				T(Q) ? (x(), d("span", v({ key: 1 }, T(W), {
+					onClick: n[0] ||= (...e) => T(K) && T(K)(...e),
+					"aria-label": T(N)("Clear"),
+					onKeydown: [n[1] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["enter"]), n[2] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["space"])]
+				}), [m(T(r), v({
 					icon: "clear",
-					size: T(Q)
-				}, N.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)
+					size: T(Z)
+				}, F.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)
 			])]),
 			_: 2
-		}, [C(T(t)(T(r), e.$slots), (t) => ({
+		}, [C(T(t)(T(i), e.$slots), (t) => ({
 			name: t,
-			fn: E((n) => [w(e.$slots, t, b(g(n || {})))])
-		}))]), 1032, ["field"]), m(T(a), {
-			overlay: T(V),
+			fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
+		}))]), 1032, ["field"]), m(T(o), {
+			overlay: T(ee),
 			"model-value": T(R),
-			"custom-props": T(ae),
-			"onUpdate:modelValue": T(ne)
+			"custom-props": T(ie),
+			"onUpdate:modelValue": T(te)
 		}, {
-			default: E(() => [m(T(s), {
+			default: D(() => [m(T(c), {
 				fill: T(z),
 				format: T(B),
-				value: T(J),
-				class: y(T(Z)),
-				alpha: T(H).alpha,
-				"show-footer": T(Y),
-				"read-only": N.readonly,
-				swatches: T(H).swatches,
-				onChange: T(re),
-				onCancel: T(ie),
-				"custom-props": T(oe),
-				disabled: T(U).isDisabled.value,
-				rounded: T(U).merged.value.rounded
+				value: T(q),
+				class: y(T(X)),
+				alpha: T(V).alpha,
+				"show-footer": T(J),
+				"read-only": F.readonly,
+				swatches: T(V).swatches,
+				onChange: T(ne),
+				onCancel: T(re),
+				"custom-props": T(ae),
+				disabled: T(H).isDisabled.value,
+				rounded: T(H).merged.value.rounded
 			}, p({ _: 2 }, [e.$slots.footer ? {
 				name: "footer",
-				fn: E((t) => [w(e.$slots, "footer", b(g(t)))]),
+				fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
 				key: "0"
 			} : void 0]), 1032, [
 				"fill",

package/dist/Components/ColorField/composables/useColorField.d.ts

@@ -451,6 +451,7 @@ export declare function useColorField(props: ColorFieldOwnProps, model: Ref<null
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;

package/dist/Components/DataTable/DataTable.vue.d.ts

@@ -2,26 +2,26 @@ import { VNodeChild } from 'vue';
 import { DataTableColumnSearch, DataTableFilters } from '@bridge-ui/core/Domain';
 import { DataTableItemSlotProps, DataTableOwnProps, DataTableSlots, DataTableSorting } from './dataTable.types';
 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<(Omit<DataTableOwnProps<T>, "search" | "page" | "filters" | "columnSearch" | "expanded" | "hiddenColumns" | "perPage" | "selection" | "sorting"> & {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(Omit<DataTableOwnProps<T>, "search" | "page" | "filters" | "expanded" | "columnSearch" | "hiddenColumns" | "perPage" | "selection" | "sorting"> & {
         page?: number;
         perPage?: number;
+        search?: string;
         expanded?: string[];
         selection?: string[];
         filters?: DataTableFilters;
         sorting?: DataTableSorting;
         hiddenColumns?: string[];
         columnSearch?: DataTableColumnSearch;
-        search?: string;
     }) & {
         "onUpdate:page"?: ((value: number | undefined) => any) | undefined;
         "onUpdate:perPage"?: ((value: number | undefined) => any) | undefined;
+        "onUpdate:search"?: ((value: string | undefined) => any) | undefined;
         "onUpdate:expanded"?: ((value: string[] | undefined) => any) | undefined;
         "onUpdate:selection"?: ((value: string[] | undefined) => any) | undefined;
         "onUpdate:filters"?: ((value: DataTableFilters | undefined) => any) | undefined;
         "onUpdate:sorting"?: ((value: DataTableSorting | undefined) => any) | undefined;
         "onUpdate:hiddenColumns"?: ((value: string[] | undefined) => any) | undefined;
         "onUpdate:columnSearch"?: ((value: DataTableColumnSearch | undefined) => any) | undefined;
-        "onUpdate:search"?: ((value: string | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -30,7 +30,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     slots: DataTableSlots<T> & {
         [x: `item.${string}`]: ((props: DataTableItemSlotProps<T>) => VNodeChild) | undefined;
     };
-    emit: ((event: "update:page", value: number | undefined) => void) & ((event: "update:perPage", value: number | undefined) => void) & ((event: "update:expanded", value: string[] | undefined) => void) & ((event: "update:selection", value: string[] | undefined) => void) & ((event: "update:filters", value: DataTableFilters | undefined) => void) & ((event: "update:sorting", value: DataTableSorting | undefined) => void) & ((event: "update:hiddenColumns", value: string[] | undefined) => void) & ((event: "update:columnSearch", value: DataTableColumnSearch | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
+    emit: ((event: "update:page", value: number | undefined) => void) & ((event: "update:perPage", value: number | undefined) => void) & ((event: "update:search", value: string | undefined) => void) & ((event: "update:expanded", value: string[] | undefined) => void) & ((event: "update:selection", value: string[] | undefined) => void) & ((event: "update:filters", value: DataTableFilters | undefined) => void) & ((event: "update:sorting", value: DataTableSorting | undefined) => void) & ((event: "update:hiddenColumns", value: string[] | undefined) => void) & ((event: "update:columnSearch", value: DataTableColumnSearch | undefined) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };