@iris-ui-kit/vue 0.2.22 → 0.2.23

package/dist/index.cjs

@@ -3089,12 +3089,17 @@ function useUndoStack(options) {
     index: raw.index
   });
   const sync = () => {
-    state.value = {
+    const next = {
       canUndo: raw.canUndo(),
       canRedo: raw.canRedo(),
       depth: raw.depth,
       index: raw.index
     };
+    const cur = state.value;
+    if (next.canUndo === cur.canUndo && next.canRedo === cur.canRedo && next.depth === cur.depth && next.index === cur.index) {
+      return;
+    }
+    state.value = next;
   };
   const stack = trackUndoStack(raw, sync);
   const push = (snapshot) => stack.push(snapshot);
@@ -6345,7 +6350,10 @@ var IrisList = vue.defineComponent({
     const { state, isContent, stateKey, stateProps } = useDataState(() => ({
       loading: props.loading,
       error: props.error,
-      empty: props.items.length === 0
+      empty: props.items.length === 0,
+      // Already-loaded items stay mounted during a revalidate (SWR): a load
+      // in flight no longer replaces them with the loading/error state.
+      hasContent: props.items.length > 0
     }));
     const isEnabled = (i) => !props.items[i]?.disabled;
     const nav = core.createKeyboardNav({
@@ -6482,7 +6490,9 @@ var IrisList = vue.defineComponent({
         role: "listbox",
         "aria-label": props.ariaLabel,
         "aria-multiselectable": props.multi ? "true" : void 0,
-        "aria-busy": state.value === "loading" ? "true" : void 0,
+        // Decoupled from resolved state: signals both the initial load and
+        // an in-flight background revalidate (content stays mounted).
+        "aria-busy": props.loading ? "true" : void 0,
         "data-iris-list": "",
         onKeydown: onKeyDown,
         style: {
@@ -12059,7 +12069,10 @@ var IrisTree = vue.defineComponent({
     const { state, isContent, stateKey, stateProps } = useDataState(() => ({
       loading: props.loading,
       error: props.error,
-      empty: props.nodes.length === 0
+      empty: props.nodes.length === 0,
+      // Already-loaded nodes stay mounted during a revalidate (SWR): a load
+      // in flight no longer replaces them with the loading/error state.
+      hasContent: props.nodes.length > 0
     }));
     const lazyCache = vue.ref(/* @__PURE__ */ new Map());
     const loadingIds = vue.ref(/* @__PURE__ */ new Set());
@@ -12379,7 +12392,9 @@ var IrisTree = vue.defineComponent({
         role: "tree",
         "aria-label": props.ariaLabel ?? t("tree.label"),
         "aria-multiselectable": props.selectionMode === "multi" ? "true" : void 0,
-        "aria-busy": state.value === "loading" ? "true" : void 0,
+        // Decoupled from resolved state: signals both the initial load and
+        // an in-flight background revalidate (content stays mounted).
+        "aria-busy": props.loading ? "true" : void 0,
         "data-iris-tree": "",
         style: {
           display: "flex",
@@ -18439,14 +18454,32 @@ var IrisDashboardTemplate = vue.defineComponent({
     activeId: { type: String, default: "" },
     /** Cards to render in the main grid. Skip to use the `default` slot only. */
     cards: { type: Array, default: () => [] },
-    defaultCollapsed: { type: Boolean, default: false }
+    defaultCollapsed: { type: Boolean, default: false },
+    /**
+     * Controlled collapsed state. When unset (`undefined`), the component
+     * manages its own state seeded from `defaultCollapsed`; when set, this
+     * value takes precedence and changes are re-emitted via
+     * `update:collapsed` (`v-model:collapsed`).
+     */
+    collapsed: { type: Boolean, default: void 0 }
   },
   emits: {
     "update:activeId": (_id) => true,
     "update:collapsed": (_value) => true
   },
   setup(props, { attrs, slots, emit }) {
-    const collapsed = vue.ref(props.defaultCollapsed);
+    const isControlled = vue.computed(() => props.collapsed !== void 0);
+    const internalCollapsed = vue.ref(props.defaultCollapsed);
+    const collapsed = vue.computed(
+      () => isControlled.value ? Boolean(props.collapsed) : internalCollapsed.value
+    );
+    vue.watch(
+      () => props.collapsed,
+      (value) => {
+        if (value !== void 0) internalCollapsed.value = value;
+      },
+      { immediate: true }
+    );
     const onSelectNav = (id) => {
       emit("update:activeId", id);
     };
@@ -18468,7 +18501,7 @@ var IrisDashboardTemplate = vue.defineComponent({
         {
           collapsed: collapsed.value,
           "onUpdate:collapsed": (v) => {
-            collapsed.value = v;
+            if (!isControlled.value) internalCollapsed.value = v;
             emit("update:collapsed", v);
           },
           width: 240,
@@ -18655,6 +18688,72 @@ function handlePosition2(handle) {
   s.cursor = HANDLE_CURSORS2[handle];
   return s;
 }
+var ResizableHandle = vue.defineComponent({
+  name: "ResizableHandle",
+  props: {
+    handle: { type: String, required: true },
+    disabled: { type: Boolean, default: false },
+    keepAspect: { type: Boolean, default: false },
+    minWidth: { type: Number, default: 40 },
+    minHeight: { type: Number, default: 40 },
+    maxWidth: { type: Number, default: Infinity },
+    maxHeight: { type: Number, default: Infinity },
+    /** Stable computed ref from the parent; read only (never mutated). */
+    sizeRef: { type: Object, required: true },
+    /** Stable setup-level callbacks from the parent. */
+    onUpdate: { type: Function, required: true },
+    onResizeStart: {
+      type: Function,
+      default: void 0
+    },
+    onResizeEnd: { type: Function, default: void 0 }
+  },
+  setup(props) {
+    const handleRef = vue.ref(null);
+    let startSize = { width: 0, height: 0 };
+    let aspect = 1;
+    useDrag({
+      handle: handleRef,
+      disabled: vue.computed(() => props.disabled),
+      onStart: () => {
+        startSize = { ...props.sizeRef.value };
+        aspect = startSize.width / Math.max(1, startSize.height);
+        props.onResizeStart?.(startSize);
+      },
+      onDrag: ({ dx, dy }) => {
+        const t = props.handle.includes("top");
+        const b = props.handle.includes("bottom");
+        const l = props.handle.includes("left");
+        const r = props.handle.includes("right");
+        let nextW = startSize.width;
+        let nextH = startSize.height;
+        if (r) nextW = startSize.width + dx;
+        if (l) nextW = startSize.width - dx;
+        if (b) nextH = startSize.height + dy;
+        if (t) nextH = startSize.height - dy;
+        if (props.keepAspect && (t || b) && (l || r)) {
+          nextH = nextW / aspect;
+        }
+        nextW = Math.max(props.minWidth, Math.min(props.maxWidth, nextW));
+        nextH = Math.max(props.minHeight, Math.min(props.maxHeight, nextH));
+        props.onUpdate({ width: nextW, height: nextH });
+      },
+      onEnd: () => props.onResizeEnd?.()
+    });
+    return () => vue.h("div", {
+      ref: (el) => {
+        handleRef.value = el ?? null;
+      },
+      "data-iris-resizable-handle": props.handle,
+      style: {
+        ...handlePosition2(props.handle),
+        touchAction: "none",
+        background: "transparent",
+        zIndex: "1"
+      }
+    });
+  }
+});
 var IrisResizable = vue.defineComponent({
   name: "IrisResizable",
   inheritAttrs: false,
@@ -18687,53 +18786,8 @@ var IrisResizable = vue.defineComponent({
       if (!isControlled.value) internal.value = next;
       emit("update:size", next);
     };
-    const renderHandle = (handle) => {
-      const handleRef = vue.ref(null);
-      let startSize = { width: 0, height: 0 };
-      let aspect = 1;
-      useDrag({
-        handle: handleRef,
-        disabled: vue.computed(() => props.disabled),
-        onStart: () => {
-          startSize = { ...size.value };
-          aspect = startSize.width / Math.max(1, startSize.height);
-          emit("resizeStart", startSize);
-        },
-        onDrag: ({ dx, dy }) => {
-          const t = handle.includes("top");
-          const b = handle.includes("bottom");
-          const l = handle.includes("left");
-          const r = handle.includes("right");
-          let nextW = startSize.width;
-          let nextH = startSize.height;
-          if (r) nextW = startSize.width + dx;
-          if (l) nextW = startSize.width - dx;
-          if (b) nextH = startSize.height + dy;
-          if (t) nextH = startSize.height - dy;
-          if (props.keepAspect && (t || b) && (l || r)) {
-            nextH = nextW / aspect;
-          }
-          nextW = Math.max(props.minWidth, Math.min(props.maxWidth, nextW));
-          nextH = Math.max(props.minHeight, Math.min(props.maxHeight, nextH));
-          setSize({ width: nextW, height: nextH });
-        },
-        onEnd: () => {
-          emit("resizeEnd", size.value);
-        }
-      });
-      return vue.h("div", {
-        ref: (el) => {
-          handleRef.value = el ?? null;
-        },
-        "data-iris-resizable-handle": handle,
-        style: {
-          ...handlePosition2(handle),
-          touchAction: "none",
-          background: "transparent",
-          zIndex: "1"
-        }
-      });
-    };
+    const emitResizeStart = (s) => emit("resizeStart", s);
+    const emitResizeEnd = () => emit("resizeEnd", size.value);
     return () => vue.h(
       "div",
       {
@@ -18748,7 +18802,25 @@ var IrisResizable = vue.defineComponent({
           ...attrs.style ?? {}
         }
       },
-      [slots.default?.(), ...props.handles.map(renderHandle)]
+      [
+        slots.default?.(),
+        ...props.handles.map(
+          (handle) => vue.h(ResizableHandle, {
+            key: handle,
+            handle,
+            disabled: props.disabled,
+            keepAspect: props.keepAspect,
+            minWidth: props.minWidth,
+            minHeight: props.minHeight,
+            maxWidth: props.maxWidth,
+            maxHeight: props.maxHeight,
+            sizeRef: size,
+            onUpdate: setSize,
+            onResizeStart: emitResizeStart,
+            onResizeEnd: emitResizeEnd
+          })
+        )
+      ]
     );
   }
 });