@iris-ui-kit/vue 0.2.22 → 0.2.24

package/dist/skeletons.cjs

@@ -1483,14 +1483,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);
     };
@@ -1512,7 +1530,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,