@nuxt/ui 4.11.0 → 4.11.2

package/dist/runtime/components/Slider.vue

@@ -35,7 +35,7 @@ defineOptions({ inheritAttrs: false });
 const props = useComponentProps("slider", _props);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
-const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"));
 const { id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const color = computed(() => formFieldColor.value ?? props.color);
 const size = computed(() => formFieldSize.value ?? props.size);

package/dist/runtime/components/Splitter.d.vue.ts

@@ -12,7 +12,7 @@ export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'>
     id?: string;
     slot?: string;
     class?: any;
-    ui?: Pick<Splitter['slots'], 'panel'>;
+    ui?: Partial<Pick<Splitter['slots'], 'panel'>>;
     [key: string]: any;
 }
 export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {

package/dist/runtime/components/Splitter.vue.d.ts

@@ -12,7 +12,7 @@ export interface SplitterItem extends Omit<SplitterPanelProps, 'as' | 'asChild'>
     id?: string;
     slot?: string;
     class?: any;
-    ui?: Pick<Splitter['slots'], 'panel'>;
+    ui?: Partial<Pick<Splitter['slots'], 'panel'>>;
     [key: string]: any;
 }
 export interface SplitterProps<T extends SplitterItem = SplitterItem> extends Pick<SplitterGroupProps, 'autoSaveId' | 'keyboardResizeBy' | 'storage'>, Pick<SplitterResizeHandleProps, 'hitAreaMargins'> {

package/dist/runtime/components/Stepper.d.vue.ts

@@ -18,7 +18,7 @@ export interface StepperItem {
     content?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>;
+    ui?: Partial<Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface StepperProps<T extends StepperItem = StepperItem> extends Pick<StepperRootProps, 'linear'> {

package/dist/runtime/components/Stepper.vue.d.ts

@@ -18,7 +18,7 @@ export interface StepperItem {
     content?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>;
+    ui?: Partial<Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface StepperProps<T extends StepperItem = StepperItem> extends Pick<StepperRootProps, 'linear'> {

package/dist/runtime/components/Table.vue

@@ -259,12 +259,15 @@ function onRowSelect(e, row) {
     return;
   }
   const target = e.target;
-  const isInteractive = target.closest("button") || target.closest("a");
+  const isInteractive = target.closest("a, button, input, label, select, textarea");
   if (isInteractive) {
     return;
   }
   e.preventDefault();
   e.stopPropagation();
+  if (e.repeat) {
+    return;
+  }
   props.onSelect(e, row);
 }
 function onRowHover(e, row) {
@@ -299,6 +302,24 @@ function getColumnStyles(column) {
   }
   return styles;
 }
+function isSortable(column) {
+  return column.columnDef.enableSorting === true && column.getCanSort();
+}
+function getAriaSort(header) {
+  if (header.isPlaceholder || !isSortable(header.column)) {
+    return void 0;
+  }
+  const sorted = header.column.getIsSorted();
+  if (!sorted) {
+    return "none";
+  }
+  const sortableIds = new Set(tableApi.getVisibleLeafColumns().filter(isSortable).map((column) => column.id));
+  const primary = tableApi.getState().sorting.find(({ id }) => sortableIds.has(id));
+  if (primary?.id !== header.column.id) {
+    return "none";
+  }
+  return sorted === "asc" ? "ascending" : "descending";
+}
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : [];
 }, props.watchOptions);
@@ -318,7 +339,6 @@ defineExpose({
       :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu"
       :data-expanded="row.getIsExpanded()"
       :data-pinned="row.getIsPinned() || void 0"
-      :role="props.onSelect ? 'button' : void 0"
       :tabindex="props.onSelect ? 0 : void 0"
       data-slot="tr"
       :class="ui.tr({
@@ -329,6 +349,7 @@ defineExpose({
 })"
       :style="[resolveValue(tableApi.options.meta?.style?.tr, row), style]"
       @click="onRowSelect($event, row)"
+      @keydown.self.exact.enter.space="onRowSelect($event, row)"
       @pointerenter="onRowHover($event, row)"
       @pointerleave="onRowHover($event, null)"
       @contextmenu="onRowContextmenu($event, row)"
@@ -359,7 +380,7 @@ defineExpose({
     </tr>
 
     <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
-      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [props.ui?.td] })">
+      <td :colspan="row.getVisibleCells().length" data-slot="td" :class="ui.td({ class: [props.ui?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
@@ -382,6 +403,7 @@ defineExpose({
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : void 0"
             :rowspan="header.rowSpan > 1 ? header.rowSpan : void 0"
+            :aria-sort="getAriaSort(header)"
             data-slot="th"
             :class="ui.th({
   class: [
@@ -412,7 +434,7 @@ defineExpose({
 
           <template v-if="virtualizer">
             <tr v-if="virtualPaddingTop > 0" :style="{ height: `${virtualPaddingTop}px` }" aria-hidden="true">
-              <td :colspan="tableApi.getAllLeafColumns().length" />
+              <td :colspan="tableApi.getVisibleLeafColumns().length" />
             </tr>
             <template v-for="virtualRow in virtualItems" :key="centerRows[virtualRow.index]?.id ?? `virtual-${virtualRow.index}`">
               <ReuseRowTemplate
@@ -422,7 +444,7 @@ defineExpose({
               />
             </template>
             <tr v-if="virtualPaddingBottom > 0" :style="{ height: `${virtualPaddingBottom}px` }" aria-hidden="true">
-              <td :colspan="tableApi.getAllLeafColumns().length" />
+              <td :colspan="tableApi.getVisibleLeafColumns().length" />
             </tr>
           </template>
 
@@ -434,13 +456,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="props.loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
+          <td :colspan="tableApi.getVisibleLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
+          <td :colspan="tableApi.getVisibleLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ props.empty || t("table.noData") }}
             </slot>

package/dist/runtime/components/Tabs.d.vue.ts

@@ -30,7 +30,7 @@ export interface TabsItem {
     value?: string | number;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>;
+    ui?: Partial<Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>>;
     [key: string]: any;
 }
 export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {

package/dist/runtime/components/Tabs.vue.d.ts

@@ -30,7 +30,7 @@ export interface TabsItem {
     value?: string | number;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>;
+    ui?: Partial<Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>>;
     [key: string]: any;
 }
 export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {

package/dist/runtime/components/Textarea.vue

@@ -10,7 +10,7 @@ import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
-import { looseToNumber } from "../utils";
+import { isEmpty, looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -77,11 +77,11 @@ function updateInput(value) {
   if (props.modelModifiers?.number) {
     value = looseToNumber(value);
   }
-  if (props.modelModifiers?.nullable) {
-    value ||= null;
+  if (props.modelModifiers?.nullable && isEmpty(value)) {
+    value = null;
   }
-  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
-    value ||= void 0;
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null && isEmpty(value)) {
+    value = void 0;
   }
   modelValue.value = value;
   emitFormInput();

package/dist/runtime/components/Timeline.d.vue.ts

@@ -15,7 +15,7 @@ export interface TimelineItem {
     value?: string | number;
     slot?: string;
     class?: any;
-    ui?: Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>;
+    ui?: Partial<Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface TimelineProps<T extends TimelineItem = TimelineItem> {

package/dist/runtime/components/Timeline.vue.d.ts

@@ -15,7 +15,7 @@ export interface TimelineItem {
     value?: string | number;
     slot?: string;
     class?: any;
-    ui?: Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>;
+    ui?: Partial<Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>>;
     [key: string]: any;
 }
 export interface TimelineProps<T extends TimelineItem = TimelineItem> {

package/dist/runtime/components/Toaster.vue

@@ -81,7 +81,7 @@ function getOffset(index) {
       :key="toast.id"
       ref="refs"
       :progress="props.progress"
-      v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated'])"
+      v-bind="omit(toast, ['id', 'close', '_duplicate', '_updated', 'onClick'])"
       :close="toast.close"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"

package/dist/runtime/components/Tree.d.vue.ts

@@ -23,7 +23,7 @@ export type TreeItem = {
     onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
     onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
-    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    ui?: Partial<Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>>;
     [key: string]: any;
 };
 export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {

package/dist/runtime/components/Tree.vue

@@ -66,7 +66,7 @@ const flattenedPaddingFormula = computed(() => {
     xl: { base: 3, perLevel: 7.5 }
     // px-3, ms-6 + ps-1.5
   };
-  const config = sizeConfig[props.size || "md"];
+  const config = sizeConfig[props.size] ?? sizeConfig.md;
   return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
 });
 const virtualizerProps = toRef(() => {

package/dist/runtime/components/Tree.vue.d.ts

@@ -23,7 +23,7 @@ export type TreeItem = {
     onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
     onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
-    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    ui?: Partial<Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>>;
     [key: string]: any;
 };
 export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {

package/dist/runtime/components/color-mode/ColorModeSelect.vue

@@ -32,6 +32,7 @@ const props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
   filterFields: { type: Array, required: false },
   ignoreFilter: { type: Boolean, required: false },

package/dist/runtime/components/content/ContentNavigation.d.vue.ts

@@ -28,7 +28,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
     defaultOpen?: boolean;
     active?: boolean;
     class?: any;
-    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+    ui?: Partial<Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>>;
 }
 export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
     /**

package/dist/runtime/components/content/ContentNavigation.vue.d.ts

@@ -28,7 +28,7 @@ export interface ContentNavigationLink extends ContentNavigationItem {
     defaultOpen?: boolean;
     active?: boolean;
     class?: any;
-    ui?: Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>;
+    ui?: Partial<Pick<ContentNavigation['slots'], 'link' | 'linkLeadingIcon' | 'linkTitle' | 'linkTrailing' | 'linkTrailingIcon' | 'linkTrailingBadge' | 'linkTrailingBadgeSize' | 'linkTrailingIcon' | 'linkTitleExternalIcon' | 'trigger' | 'content' | 'item' | 'itemWithChildren'>>;
 }
 export interface ContentNavigationProps<T extends ContentNavigationLink = ContentNavigationLink> extends Pick<AccordionRootProps, 'disabled' | 'type' | 'unmountOnHide'> {
     /**

package/dist/runtime/components/content/ContentSurround.d.vue.ts

@@ -12,7 +12,7 @@ export interface ContentSurroundLink extends ContentNavigationItem {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>;
+    ui?: Partial<Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>>;
 }
 export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSurroundLink> {
     /**

package/dist/runtime/components/content/ContentSurround.vue.d.ts

@@ -12,7 +12,7 @@ export interface ContentSurroundLink extends ContentNavigationItem {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>;
+    ui?: Partial<Pick<ContentSurround['slots'], 'link' | 'linkLeading' | 'linkLeadingIcon' | 'linkTitle' | 'linkDescription'>>;
 }
 export interface ContentSurroundProps<T extends ContentSurroundLink = ContentSurroundLink> {
     /**

package/dist/runtime/components/content/ContentToc.d.vue.ts

@@ -8,7 +8,7 @@ import type { ComponentConfig } from '../../types/tv';
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>;
 export type ContentTocLink = TocLink & {
     class?: any;
-    ui?: Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>;
+    ui?: Partial<Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>>;
 };
 export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
     /**

package/dist/runtime/components/content/ContentToc.vue.d.ts

@@ -8,7 +8,7 @@ import type { ComponentConfig } from '../../types/tv';
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>;
 export type ContentTocLink = TocLink & {
     class?: any;
-    ui?: Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>;
+    ui?: Partial<Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>>;
 };
 export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
     /**

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -31,6 +31,7 @@ const props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
   filterFields: { type: Array, required: false },
   ignoreFilter: { type: Boolean, required: false },

package/dist/runtime/components/prose/CodeTree.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/prose/code-tree";
 </script>
 
 <script setup>
-import { computed, watch, onBeforeUpdate, ref } from "vue";
+import { computed, watch, onBeforeUpdate, onMounted, ref } from "vue";
 import { TreeRoot, TreeItem } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -28,7 +28,6 @@ const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.codeTree || {} })());
 const initialPath = props.modelValue ?? props.defaultValue;
 const model = ref(initialPath ? { path: initialPath } : void 0);
-const lastSelectedItem = ref();
 watch(model, (value) => {
   if (value?.path !== props.modelValue) {
     emits("update:modelValue", value?.path);
@@ -37,12 +36,13 @@ watch(model, (value) => {
 watch(() => props.modelValue, (value) => {
   if (value === model.value?.path) return;
   model.value = value ? { path: value } : void 0;
-  const pathsToExpand = getExpandedPaths(value);
-  for (const path of pathsToExpand) {
-    if (!expanded.value.includes(path)) {
-      expanded.value.push(path);
+  const next = [...expanded.value];
+  for (const path of getExpandedPaths(value)) {
+    if (!next.includes(path)) {
+      next.push(path);
     }
   }
+  expanded.value = next;
 });
 const rerenderCount = ref(1);
 const flatItems = computed(() => {
@@ -101,21 +101,34 @@ function getExpandedPaths(path) {
   const parts = path.split("/");
   return parts.slice(0, -1).map((_, index) => parts.slice(0, index + 1).join("/"));
 }
-const expanded = ref(getExpandedPaths(model.value?.path));
-watch(flatItems, (newItems, oldItems) => {
-  if (!props.expandAll) return;
-  const newLabels = newItems.map((i) => i.label).join("\n");
-  const oldLabels = oldItems?.map((i) => i.label).join("\n") ?? "";
-  if (newLabels !== oldLabels) {
-    expanded.value = getExpandedPaths();
+const expandedOverride = ref(props.expandAll ? null : getExpandedPaths(model.value?.path));
+const expanded = computed({
+  get: () => expandedOverride.value ?? getExpandedPaths(),
+  set: (value) => {
+    expandedOverride.value = value;
   }
 });
-watch(model, (value) => {
-  const item = flatItems.value.find((item2) => value?.path === item2.label);
+watch(() => props.expandAll, (value) => {
+  expandedOverride.value = value ? null : getExpandedPaths(model.value?.path);
+});
+onMounted(() => {
+  watch(flatItems, (newItems, oldItems) => {
+    if (!props.expandAll) return;
+    const newLabels = newItems.map((i) => i.label).join("\n");
+    const oldLabels = oldItems?.map((i) => i.label).join("\n") ?? "";
+    if (newLabels !== oldLabels) {
+      expandedOverride.value = null;
+    }
+  });
+});
+let lastFile;
+const currentFile = computed(() => {
+  const item = flatItems.value.find((item2) => model.value?.path === item2.label);
   if (item?.component) {
-    lastSelectedItem.value = item;
+    lastFile = item;
   }
-}, { immediate: true });
+  return lastFile;
+});
 onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
@@ -183,7 +196,7 @@ onBeforeUpdate(() => rerenderCount.value++);
     </TreeRoot>
 
     <div :class="ui.content({ class: props.ui?.content })">
-      <component :is="lastSelectedItem?.component" />
+      <component :is="currentFile?.component" />
     </div>
   </div>
 </template>

package/dist/runtime/composables/useForwardProps.js

@@ -1,9 +1,9 @@
-import { computed, isRef } from "vue";
+import { computed, unref } from "vue";
 import { useEmitAsProps } from "reka-ui";
 export function useForwardProps(source, emits) {
   const emitAsProps = emits ? useEmitAsProps(emits) : {};
   return computed(() => {
-    const src = isRef(source) ? source.value : source;
+    const src = unref(source);
     const out = { ...emitAsProps };
     for (const key in src) {
       const value = src[key];

package/dist/runtime/composables/useResizable.js

@@ -15,7 +15,7 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     collapsedSize: 0,
     resizable: true,
     unit: "%",
-    ...isRef(options) ? options.value : options
+    ...unref(options)
   }));
   const { dir } = useLocale();
   const defaultStorageValue = {

package/dist/runtime/utils/form.d.ts

@@ -4,6 +4,6 @@ import type { FormSchema, ValidateReturnSchema } from '../types/form';
 export declare function isSuperStructSchema(schema: any): schema is Struct<any, any>;
 export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
 export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
-export declare function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;
+export declare function validateSchema<T extends object>(state: T, _schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;
 export declare function getAtPath<T extends object>(data: T, path?: string): any;
 export declare function setAtPath<T extends object>(data: T, path: string, value: any): T;

package/dist/runtime/utils/form.js

@@ -1,3 +1,4 @@
+import { toRaw } from "vue";
 export function isSuperStructSchema(schema) {
   return "schema" in schema && typeof schema.coercer === "function" && typeof schema.validator === "function" && typeof schema.refiner === "function";
 }
@@ -37,7 +38,8 @@ async function validateSuperstructSchema(state, schema) {
     result
   };
 }
-export function validateSchema(state, schema) {
+export function validateSchema(state, _schema) {
+  const schema = toRaw(_schema);
   if (isStandardSchema(schema)) {
     return validateStandardSchema(state, schema);
   } else if (isSuperStructSchema(schema)) {

package/dist/runtime/utils/prefetch.d.ts

@@ -0,0 +1,5 @@
+type IdleCallbackHandle = ReturnType<typeof setTimeout> | number;
+export declare function requestIdleCallback(callback: () => void): IdleCallbackHandle | undefined;
+export declare function cancelIdleCallback(handle: IdleCallbackHandle | undefined): void;
+export declare function observeIntersection(element: Element, callback: () => void): () => void;
+export {};

package/dist/runtime/utils/prefetch.js

@@ -0,0 +1,45 @@
+export function requestIdleCallback(callback) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (typeof window.requestIdleCallback === "function") {
+    return window.requestIdleCallback(callback);
+  }
+  return setTimeout(callback, 1);
+}
+export function cancelIdleCallback(handle) {
+  if (typeof window === "undefined" || handle === void 0) {
+    return;
+  }
+  if (typeof window.cancelIdleCallback === "function") {
+    window.cancelIdleCallback(handle);
+    return;
+  }
+  clearTimeout(handle);
+}
+let observer = null;
+const callbacks = /* @__PURE__ */ new Map();
+export function observeIntersection(element, callback) {
+  if (typeof IntersectionObserver === "undefined") {
+    return () => {
+    };
+  }
+  observer ||= new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      const callback2 = callbacks.get(entry.target);
+      if ((entry.isIntersecting || entry.intersectionRatio > 0) && callback2) {
+        callback2();
+      }
+    }
+  });
+  callbacks.set(element, callback);
+  observer.observe(element);
+  return () => {
+    callbacks.delete(element);
+    observer?.unobserve(element);
+    if (callbacks.size === 0) {
+      observer?.disconnect();
+      observer = null;
+    }
+  };
+}

package/dist/runtime/utils/search.js

@@ -12,19 +12,21 @@ function truncateHTMLFromStart(html, maxLength) {
   let truncated = "";
   let totalLength = 0;
   let insideTag = false;
-  for (let i = html.length - 1; i >= 0; i--) {
-    if (html[i] === ">") {
+  const chars = Array.from(html);
+  for (let i = chars.length - 1; i >= 0; i--) {
+    const char = chars[i];
+    if (char === ">") {
       insideTag = true;
-    } else if (html[i] === "<") {
+    } else if (char === "<") {
       insideTag = false;
-      truncated = html[i] + truncated;
+      truncated = char + truncated;
       continue;
     }
     if (!insideTag) {
       totalLength++;
     }
     if (totalLength <= maxLength) {
-      truncated = html[i] + truncated;
+      truncated = char + truncated;
     } else {
       truncated = "..." + truncated;
       break;
@@ -63,7 +65,7 @@ export function highlight(item, searchTerm, forceKey, omitKeys, useTokenSearch)
     content += escapeHTML(value.substring(nextUnhighlightedRegionStartingIndex));
     const markIndex = content.indexOf("<mark>");
     if (markIndex !== -1) {
-      content = truncateHTMLFromStart(content, content.length - markIndex);
+      content = truncateHTMLFromStart(content, Array.from(content.slice(markIndex)).length);
     }
     return content;
   }

package/dist/runtime/utils/virtualizer.d.ts

@@ -1,4 +1,4 @@
 /**
  * Get estimate size for virtualizers that checks each item individually
  */
-export declare function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', descriptionKey?: string, hasDescriptionSlot?: boolean): (index: number) => number;
+export declare function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}), descriptionKey?: string, hasDescriptionSlot?: boolean): (index: number) => number;

package/dist/runtime/utils/virtualizer.js

@@ -7,22 +7,20 @@ function itemHasDescription(item, descriptionKey) {
   return value !== void 0 && value !== null && value !== "";
 }
 function getSize(size, hasDescription) {
-  if (hasDescription) {
-    return {
-      xs: 44,
-      sm: 48,
-      md: 52,
-      lg: 56,
-      xl: 60
-    }[size];
-  }
-  return {
+  const sizes = hasDescription ? {
+    xs: 44,
+    sm: 48,
+    md: 52,
+    lg: 56,
+    xl: 60
+  } : {
     xs: 24,
     sm: 28,
     md: 32,
     lg: 36,
     xl: 40
-  }[size];
+  };
+  return sizes[size] ?? sizes.md;
 }
 export function getEstimateSize(items, size, descriptionKey, hasDescriptionSlot) {
   const sizeWithDescription = getSize(size, true);

package/dist/runtime/vue/components/color-mode/ColorModeSelect.vue

@@ -32,6 +32,7 @@ const props = defineProps({
   modelModifiers: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
   filterFields: { type: Array, required: false },
   ignoreFilter: { type: Boolean, required: false },