@iris-ui-kit/vue 0.2.20 → 0.2.22

package/dist/index.cjs

@@ -80,7 +80,7 @@ var ThemeProvider = vue.defineComponent({
   },
   setup(props, { slots }) {
     const current = vue.ref(props.store.store.getState());
-    const unsubscribe = props.store.store.subscribe((next) => {
+    let unsubscribe = props.store.store.subscribe((next) => {
       current.value = next;
     });
     let applied = null;
@@ -102,6 +102,24 @@ var ThemeProvider = vue.defineComponent({
     vue.watch(current, () => {
       if (applied) applyCurrent();
     });
+    vue.watch(
+      () => props.store,
+      (nextStore) => {
+        unsubscribe();
+        unsubscribe = nextStore.store.subscribe((next) => {
+          current.value = next;
+        });
+        current.value = nextStore.store.getState();
+        if (applied) applyCurrent();
+      }
+    );
+    vue.watch(
+      () => props.target,
+      () => {
+        if (applied) applyCurrent();
+        if (dirApplied) applyDir();
+      }
+    );
     vue.watch(
       () => props.dir,
       () => {
@@ -172,6 +190,12 @@ var SkinProvider = vue.defineComponent({
     vue.watch(current, () => {
       if (applied) apply();
     });
+    vue.watch(
+      () => props.target,
+      () => {
+        if (applied) apply();
+      }
+    );
     vue.onBeforeUnmount(() => {
       unsubscribe();
       applied?.revert();
@@ -202,14 +226,21 @@ function useSkin() {
     errors: engine.errors
   };
 }
-function useMachine(machine) {
+function useMachine(machine, options = {}) {
   const state = vue.ref(machine.store.getState());
   const unsubscribe = machine.store.subscribe((next) => {
     state.value = next;
   });
-  vue.onBeforeUnmount(() => {
-    unsubscribe();
-  });
+  vue.onScopeDispose(
+    () => {
+      unsubscribe();
+      if (options.stopOnUnmount !== false) machine.stop();
+    },
+    // failSilently: outside any effect scope there is nothing to dispose —
+    // registering is a no-op and must not emit the "no active effect scope"
+    // dev warning. Within a component/effectScope this arg changes nothing.
+    true
+  );
   return { state, send: machine.send };
 }
 var FormInjectionKey = /* @__PURE__ */ Symbol("IrisForm");
@@ -269,11 +300,7 @@ var IrisForm = vue.defineComponent({
 });
 function useForm(config) {
   const form = core.createFormStore(config);
-  const state = vue.ref(form.getState());
-  const unsubscribe = form.subscribe((next) => {
-    state.value = next;
-  });
-  vue.onBeforeUnmount(unsubscribe);
+  const state = useStore(form.store);
   return {
     form,
     state,
@@ -298,22 +325,24 @@ function useForm(config) {
 }
 function useField(name) {
   const form = useFormContext();
-  const state = vue.ref(form.getState());
-  const unsubscribe = form.subscribe((next) => {
-    state.value = next;
-  });
-  vue.onBeforeUnmount(unsubscribe);
   const key = core.formatPath(name);
-  const value = vue.computed(() => core.getByPath(state.value.values, name));
-  const error = vue.computed(() => state.value.errors[key]);
+  const segments = core.parsePath(name);
+  const valueSlice = useStoreSelector(form.store, (s) => core.getByPath(s.values, segments));
+  const errorSlice = useStoreSelector(form.store, (s) => s.errors[key]);
+  const touchedSlice = useStoreSelector(form.store, (s) => Boolean(s.touched[key]));
+  const dirtySlice = useStoreSelector(form.store, (s) => Boolean(s.dirty[key]));
+  const value = vue.computed(() => valueSlice.value);
+  const error = vue.computed(() => errorSlice.value);
+  const touched = vue.computed(() => touchedSlice.value);
+  const dirty = vue.computed(() => dirtySlice.value);
   return {
     name,
     value,
     error,
-    touched: vue.computed(() => Boolean(state.value.touched[key])),
-    dirty: vue.computed(() => Boolean(state.value.dirty[key])),
+    touched,
+    dirty,
     setValue: (next) => form.setFieldValue(name, next),
-    setTouched: (touched = true) => form.setFieldTouched(name, touched),
+    setTouched: (touched2 = true) => form.setFieldTouched(name, touched2),
     fieldProps: vue.computed(() => ({
       modelValue: value.value,
       "onUpdate:modelValue": (next) => form.setFieldValue(name, next),
@@ -324,16 +353,11 @@ function useField(name) {
 }
 function useFieldArray(name) {
   const form = useFormContext();
-  const state = vue.ref(form.getState());
-  const unsubscribe = form.subscribe((next) => {
-    state.value = next;
-  });
-  vue.onBeforeUnmount(unsubscribe);
+  const raw = useStoreSelector(form.store, (s) => s.values[name]);
+  const fields = vue.computed(() => Array.isArray(raw.value) ? raw.value : []);
   return {
     name,
-    fields: vue.computed(
-      () => Array.isArray(state.value.values[name]) ? state.value.values[name] : []
-    ),
+    fields,
     push: (item) => form.arrayPush(name, item),
     remove: (index) => form.arrayRemove(name, index),
     insert: (index, item) => form.arrayInsert(name, index, item),
@@ -441,8 +465,31 @@ function useI18n() {
   };
 }
 function useAsyncResource(fetcher, options = {}) {
+  const holder = {
+    // isRef-only resolution. NEVER toValue() here: the element type is itself
+    // a function, so toValue(fetcher) would *invoke the fetcher at setup*
+    // (spurious request) and toValue(getter) would do the same. isRef narrows
+    // to the only unambiguous reactive form: ref(fetcher) / computed(() =>
+    // fetcher) / shallowRef(fetcher) — a ComputedRef IS a Ref.
+    // F3 elision point — the ONE explicit narrowing cast: after the isRef
+    // guard the else arm is `F | (() => F)`, and the bare-getter arm's return
+    // `F` (a function) is not assignable to `F` (TS2322). No runtime
+    // discriminant distinguishes a plain fetcher from a bare getter (both are
+    // functions), so the cast encodes exactly the documented F3 ambiguity and
+    // adds no unsafety beyond F3.
+    current: vue.isRef(fetcher) ? fetcher.value : fetcher
+  };
+  if (vue.isRef(fetcher)) {
+    vue.watch(
+      fetcher,
+      (next) => {
+        holder.current = next;
+      },
+      { flush: "sync" }
+    );
+  }
   const config = "initialData" in options ? { initialData: options.initialData } : {};
-  const resource = core.createAsyncResource(fetcher, config);
+  const resource = core.createAsyncResource((...params) => holder.current(...params), config);
   const state = vue.ref(resource.getState());
   const unsubscribe = resource.subscribe((next) => {
     state.value = next;
@@ -470,7 +517,30 @@ function useAsyncResource(fetcher, options = {}) {
   };
 }
 function usePaginatedResource(fetcher, options = {}) {
-  const resource = core.createPaginatedResource(fetcher, {
+  const holder = {
+    // isRef-only resolution. NEVER toValue() here: the element type is itself
+    // a function, so toValue(fetcher) would *invoke the fetcher at setup*
+    // (spurious request) and toValue(getter) would do the same. isRef narrows
+    // to the only unambiguous reactive form: ref(fetcher) / computed(() =>
+    // fetcher) / shallowRef(fetcher) — a ComputedRef IS a Ref.
+    // F3 elision point — the ONE explicit narrowing cast: after the isRef
+    // guard the else arm is `F | (() => F)`, and the bare-getter arm's return
+    // `F` (a function) is not assignable to `F` (TS2322). No runtime
+    // discriminant distinguishes a plain fetcher from a bare getter (both are
+    // functions), so the cast encodes exactly the documented F3 ambiguity and
+    // adds no unsafety beyond F3.
+    current: vue.isRef(fetcher) ? fetcher.value : fetcher
+  };
+  if (vue.isRef(fetcher)) {
+    vue.watch(
+      fetcher,
+      (next) => {
+        holder.current = next;
+      },
+      { flush: "sync" }
+    );
+  }
+  const resource = core.createPaginatedResource((query) => holder.current(query), {
     pageSize: options.pageSize,
     mode: options.mode
   });
@@ -506,10 +576,14 @@ function usePaginatedResource(fetcher, options = {}) {
   };
 }
 function useResourceController(config) {
-  const controller = core.createResourceController(config);
+  const controller = core.createResourceController({ ...config, immediate: false });
+  const immediate = config.immediate !== false;
+  if (immediate) {
+    vue.onMounted(() => void controller.load());
+  }
+  vue.onScopeDispose(() => controller.destroy());
   const state = vue.shallowRef(controller.getState());
-  vue.onBeforeUnmount(controller.subscribe((next) => state.value = next));
-  vue.onBeforeUnmount(() => controller.destroy());
+  vue.onScopeDispose(controller.subscribe((next) => state.value = next));
   return { ...controller, state };
 }
 function useDataSource(config) {
@@ -641,7 +715,8 @@ var IrisSidebarLayout = vue.defineComponent({
       () => props.collapsed,
       (value) => {
         if (value !== void 0) internalCollapsed.value = value;
-      }
+      },
+      { immediate: true }
     );
     const setCollapsed = (value) => {
       if (!isControlled.value) internalCollapsed.value = value;
@@ -2459,6 +2534,10 @@ var IrisAdminTabs = vue.defineComponent({
           onClick: (e) => {
             e.stopPropagation();
             close(tab.key);
+            const root = e.currentTarget.closest(
+              '[role="tablist"]'
+            );
+            void vue.nextTick(() => focusTab(root, props.nav.getState().activeKey));
           }
         },
         [vue.h(IrisIcon, { name: "x", size: 12 })]
@@ -3042,25 +3121,45 @@ var IrisProvider = vue.defineComponent({
     target: { type: Object, default: null }
   },
   setup(props, { slots }) {
-    const collected = core.runPlugins(props.plugins ?? []);
+    const collected = vue.shallowRef(core.runPlugins(props.plugins ?? []));
+    const ctx = vue.shallowReactive({
+      stores: collected.value.stores,
+      installed: new Set((props.plugins ?? []).map((p) => p.name))
+    });
+    vue.provide(PluginStoreContextKey, ctx);
     let applied = null;
+    let mounted = false;
     vue.onMounted(() => {
+      mounted = true;
       if (typeof document === "undefined") return;
       const el = props.target ?? document.documentElement;
-      applied = theme.applyCssVars(Object.entries(collected.tokens), el);
+      applied = theme.applyCssVars(Object.entries(collected.value.tokens), el);
     });
+    vue.watch(
+      () => props.plugins,
+      (next) => {
+        const prev = collected.value;
+        const nextCollected = core.runPlugins(next ?? []);
+        applied?.revert();
+        applied = null;
+        prev.teardown();
+        collected.value = nextCollected;
+        ctx.stores = nextCollected.stores;
+        ctx.installed = new Set((next ?? []).map((p) => p.name));
+        if (mounted && typeof document !== "undefined") {
+          const el = props.target ?? document.documentElement;
+          applied = theme.applyCssVars(Object.entries(nextCollected.tokens), el);
+        }
+      }
+    );
     vue.onBeforeUnmount(() => {
       applied?.revert();
       applied = null;
-      collected.teardown();
-    });
-    vue.provide(PluginStoreContextKey, {
-      stores: collected.stores,
-      installed: new Set((props.plugins ?? []).map((p) => p.name))
+      collected.value.teardown();
     });
     return () => {
       const locale = props.locale ?? DEFAULT_LOCALE;
-      const messages = { ...collected.messages[locale], ...props.messages ?? {} };
+      const messages = { ...collected.value.messages[locale], ...props.messages ?? {} };
       let tree = vue.h(
         IrisI18nProvider,
         { locale: props.locale, messages },
@@ -6255,6 +6354,7 @@ var IrisList = vue.defineComponent({
       isEnabled
     });
     const activeIndex = vue.ref(nav.index);
+    const hoveredIndex = vue.ref(-1);
     vue.watch(
       () => props.items,
       () => {
@@ -6337,7 +6437,7 @@ var IrisList = vue.defineComponent({
         cursor: item.disabled ? "not-allowed" : "pointer",
         opacity: item.disabled ? "0.5" : "1",
         fontSize: "14px",
-        background: selected ? "var(--iris-primary)" : active ? "var(--iris-surface-hover)" : "transparent",
+        background: selected ? "var(--iris-primary)" : hoveredIndex.value === index ? "var(--iris-surface-hover)" : active ? "var(--iris-surface-hover)" : "transparent",
         color: selected ? "var(--iris-primary-foreground)" : "var(--iris-foreground)",
         outline: "none"
       };
@@ -6358,8 +6458,15 @@ var IrisList = vue.defineComponent({
           "data-iris-list-index": index,
           "data-iris-list-item": "",
           "data-state": selected ? "selected" : active ? "active" : "idle",
+          "data-hovered": hoveredIndex.value === index ? "true" : "false",
           onClick: item.disabled ? void 0 : onClick,
           onFocus,
+          onMouseenter: () => {
+            hoveredIndex.value = index;
+          },
+          onMouseleave: () => {
+            if (hoveredIndex.value === index) hoveredIndex.value = -1;
+          },
           style: baseStyle
         },
         slotContent ?? item.label ?? String(item.value)
@@ -13497,6 +13604,7 @@ var IrisTreeSelect = vue.defineComponent({
     const { t } = useI18n();
     const open = vue.ref(false);
     const focused = vue.ref(false);
+    const hoveredValue = vue.ref(null);
     const expanded = vue.ref(new Set(props.defaultExpanded));
     let rootEl = null;
     const selectNode = (node) => {
@@ -13534,6 +13642,12 @@ var IrisTreeSelect = vue.defineComponent({
           vue.h(
             "div",
             {
+              onMouseenter: () => {
+                hoveredValue.value = node.value;
+              },
+              onMouseleave: () => {
+                if (hoveredValue.value === node.value) hoveredValue.value = null;
+              },
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -13542,7 +13656,7 @@ var IrisTreeSelect = vue.defineComponent({
                 paddingInlineEnd: "6px",
                 paddingBlock: "4px",
                 borderRadius: "var(--iris-radius-sm, 4px)",
-                background: isSelected ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
+                background: isSelected || hoveredValue.value === node.value ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
               }
             },
             [
@@ -13950,6 +14064,7 @@ var IrisCascader = vue.defineComponent({
     const open = vue.ref(false);
     const focused = vue.ref(false);
     const activePath = vue.ref([...props.modelValue]);
+    const hoveredValue = vue.ref(null);
     let rootEl = null;
     const toggleOpen = () => {
       if (props.disabled) return;
@@ -14103,6 +14218,12 @@ var IrisCascader = vue.defineComponent({
                       "data-iris-cascader-option": "",
                       "data-value": node.value,
                       onClick: () => selectOption(ci, node),
+                      onMouseenter: () => {
+                        hoveredValue.value = node.value;
+                      },
+                      onMouseleave: () => {
+                        if (hoveredValue.value === node.value) hoveredValue.value = null;
+                      },
                       style: {
                         display: "flex",
                         alignItems: "center",
@@ -14113,7 +14234,7 @@ var IrisCascader = vue.defineComponent({
                         borderRadius: "var(--iris-radius-sm, 4px)",
                         cursor: node.disabled ? "not-allowed" : "pointer",
                         color: node.disabled ? "var(--iris-muted)" : "var(--iris-foreground)",
-                        background: isActive ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
+                        background: isActive || hoveredValue.value === node.value ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
                       }
                     },
                     [