@iris-ui-kit/vue 0.1.0 → 0.2.0

package/dist/{chunk-FJBYAIL4.js → chunk-4V4CT3Z4.js}

@@ -1,13 +1,14 @@
 import { useFloating, useDismiss } from './chunk-3FJUCHCC.js';
 import { useMachine } from './chunk-TQB5LVOH.js';
 import { findFirstElement, mergeSlotProps } from './chunk-F77KIPOH.js';
-import { IrisSidebarLayout, IrisHeaderLayout } from './chunk-I6D5VXQK.js';
+import { IrisHeaderLayout, IrisSidebarLayout } from './chunk-I6D5VXQK.js';
 import { IrisThemeKey } from './chunk-72PZMU6R.js';
+import { IrisSortable } from './chunk-W3B6E5GN.js';
 import { useStore } from './chunk-75GSYEJS.js';
 import { useI18n } from './chunk-TCAXRWT6.js';
-import { defineComponent, inject, h, computed, shallowRef, onBeforeUnmount, watch, ref, provide, useId, nextTick, Teleport, Fragment, watchEffect, toValue } from 'vue';
+import { defineComponent, inject, h, computed, shallowRef, onBeforeUnmount, watch, ref, provide, useId, nextTick, Teleport, Fragment, watchEffect, toValue, onMounted } from 'vue';
 import { visibleNav, findNavPath, createExpansion, branchTrail, createFloatingMachine, findNavNode, isBranch, firstLeaf, matchTypeahead, nextEnabledIndex, isClosable, createAdminShell } from '@iris-ui-kit/core';
-export { createTabsNav, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, visibleNav } from '@iris-ui-kit/core';
+export { createAdminPreferences, createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, localStorageAdminPreferencesStorage, nodeAllowsRoles, visibleNav } from '@iris-ui-kit/core';
 import { defaultIconRegistry, resolveThemedIcon } from '@iris-ui-kit/icons';
 
 var IrisIcon = defineComponent({
@@ -82,6 +83,10 @@ var IrisNavMenu = defineComponent({
     defaultExpandedKeys: { type: Array, default: void 0 },
     /** Icon-only rail (top-level items only). */
     collapsed: { type: Boolean, default: false },
+    orientation: {
+      type: String,
+      default: "vertical"
+    },
     ariaLabel: { type: String, default: void 0 }
   },
   emits: {
@@ -137,7 +142,7 @@ var IrisNavMenu = defineComponent({
         display: "flex",
         alignItems: "center",
         gap: "10px",
-        width: "100%",
+        width: props.orientation === "horizontal" && opts.depth === 0 ? "auto" : "100%",
         boxSizing: "border-box",
         border: "none",
         borderRadius: "var(--iris-radius-md, 6px)",
@@ -149,7 +154,8 @@ var IrisNavMenu = defineComponent({
         textAlign: "start",
         cursor: opts.disabled ? "not-allowed" : "pointer",
         opacity: opts.disabled ? "0.5" : "1",
-        padding: props.collapsed ? "10px" : `8px 10px 8px ${12 + opts.depth * 16}px`,
+        padding: props.collapsed ? "10px" : "8px 10px",
+        paddingInlineStart: props.collapsed ? "10px" : `${12 + opts.depth * 16}px`,
         justifyContent: props.collapsed ? "center" : "flex-start"
       };
     };
@@ -243,16 +249,40 @@ var IrisNavMenu = defineComponent({
           }) : null
         ]
       );
+      const groupStyle = props.orientation === "horizontal" && depth === 0 ? { position: "relative" } : void 0;
       if (!branch || !open)
-        return h("div", { key: node.key, "data-iris-nav-group": branch ? "" : void 0 }, [row]);
-      return h("div", { key: node.key, "data-iris-nav-group": "", "data-open": "true" }, [
-        row,
-        h(
+        return h(
           "div",
-          { "data-iris-nav-children": "", role: "group" },
-          (node.children ?? []).map((child) => renderItem(child, depth + 1))
-        )
-      ]);
+          { key: node.key, "data-iris-nav-group": branch ? "" : void 0, style: groupStyle },
+          [row]
+        );
+      return h(
+        "div",
+        { key: node.key, "data-iris-nav-group": "", "data-open": "true", style: groupStyle },
+        [
+          row,
+          h(
+            "div",
+            {
+              "data-iris-nav-children": "",
+              role: "group",
+              style: props.orientation === "horizontal" && depth === 0 ? {
+                position: "absolute",
+                insetBlockStart: "calc(100% + 4px)",
+                insetInlineStart: "0",
+                zIndex: "60",
+                minWidth: "220px",
+                padding: "6px",
+                border: "1px solid var(--iris-border)",
+                borderRadius: "var(--iris-radius-md, 6px)",
+                background: "var(--iris-surface)",
+                boxShadow: "var(--iris-shadow-md)"
+              } : void 0
+            },
+            (node.children ?? []).map((child) => renderItem(child, depth + 1))
+          )
+        ]
+      );
     };
     const onKeydown = (e) => {
       const root = e.currentTarget;
@@ -305,11 +335,13 @@ var IrisNavMenu = defineComponent({
         ...attrs,
         "data-iris-nav-menu": "",
         "data-collapsed": props.collapsed ? "true" : void 0,
+        "data-orientation": props.orientation,
         "aria-label": props.ariaLabel ?? t("admin.nav"),
         onKeydown,
         style: {
           display: "flex",
-          flexDirection: "column",
+          flexDirection: props.orientation === "horizontal" ? "row" : "column",
+          alignItems: props.orientation === "horizontal" ? "center" : void 0,
           gap: "2px",
           ...attrs.style ?? {}
         }
@@ -499,6 +531,7 @@ function useTabsNav(nav) {
     closeRight: nav.closeRight,
     refresh: nav.refresh,
     setPinned: nav.setPinned,
+    move: nav.move,
     cacheKey: nav.cacheKey
   };
 }
@@ -825,12 +858,14 @@ var IrisAdminTabs = defineComponent({
   inheritAttrs: false,
   props: {
     /** Shared tabs store (from `createTabsNav`). */
-    nav: { type: Object, required: true }
+    nav: { type: Object, required: true },
+    reorderable: { type: Boolean, default: true }
   },
   emits: {
     change: (_key) => true,
     close: (_key) => true,
-    refresh: (_key) => true
+    refresh: (_key) => true,
+    reorder: (_tabs) => true
   },
   setup(props, { emit, attrs }) {
     const { t: tr } = useI18n();
@@ -847,6 +882,10 @@ var IrisAdminTabs = defineComponent({
       props.nav.refresh(key);
       emit("refresh", key);
     };
+    const reorder = (tabs) => {
+      tabs.forEach((tab, index) => props.nav.move(tab.key, index));
+      emit("reorder", tabs);
+    };
     const focusTab = (root, key) => {
       if (!root || !key) return;
       const labels = root.querySelectorAll("[data-iris-tab-label]");
@@ -998,6 +1037,8 @@ var IrisAdminTabs = defineComponent({
               action(tr("admin.refresh"), () => refresh(key)),
               action(tr("admin.close"), () => close(key)),
               h(IrisDropdownSeparator),
+              action(tr("admin.closeLeft"), () => props.nav.closeLeft(key)),
+              action(tr("admin.closeRight"), () => props.nav.closeRight(key)),
               action(tr("admin.closeOthers"), () => props.nav.closeOthers(key)),
               action(tr("admin.closeAll"), () => props.nav.closeAll())
             ];
@@ -1029,14 +1070,28 @@ var IrisAdminTabs = defineComponent({
             "aria-label": tr("admin.openPages"),
             onKeydown: onTablistKeydown,
             style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "6px",
               overflowX: "auto",
               flex: "1"
             }
           },
-          t.tabs.value.map((tab) => chip(tab))
+          [
+            h(
+              IrisSortable,
+              {
+                items: t.tabs.value,
+                getKey: (item) => item.key,
+                onReorder: (items) => reorder(items),
+                disabled: !props.reorderable,
+                orientation: "horizontal",
+                style: {
+                  alignItems: "center",
+                  gap: "6px",
+                  width: "max-content"
+                }
+              },
+              { default: () => t.tabs.value.map((tab) => chip(tab)) }
+            )
+          ]
         ),
         actionsMenu()
       ]
@@ -1085,6 +1140,8 @@ var IrisAdminLayout = defineComponent({
     menus: { type: Array, required: true },
     /** Active page key (v-model:activeKey). */
     activeKey: { type: String, default: void 0 },
+    /** Initial active page key when `activeKey` is uncontrolled. */
+    defaultActiveKey: { type: String, default: void 0 },
     /** Sidebar collapsed (v-model:collapsed); undefined = uncontrolled. */
     collapsed: { type: Boolean, default: void 0 },
     defaultCollapsed: { type: Boolean, default: false },
@@ -1093,7 +1150,16 @@ var IrisAdminLayout = defineComponent({
     appTitle: { type: String, default: "Iris Admin" },
     /** Optional shared tabs store; when present the tab bar is rendered. */
     tabs: { type: Object, default: void 0 },
+    showTabs: { type: Boolean, default: true },
     showBreadcrumb: { type: Boolean, default: true },
+    stickyHeader: { type: Boolean, default: true },
+    stickyTabs: { type: Boolean, default: true },
+    menuAlign: { type: String, default: "start" },
+    contentWidth: { type: String, default: "fluid" },
+    contentHeight: {
+      type: String,
+      default: "viewport"
+    },
     sidebarWidth: { type: [Number, String], default: 240 },
     collapsedWidth: { type: [Number, String], default: 64 }
   },
@@ -1112,6 +1178,7 @@ var IrisAdminLayout = defineComponent({
     } = useAdminShell({
       menus: () => props.menus,
       activeKey: () => props.activeKey,
+      defaultActiveKey: props.defaultActiveKey,
       tabs: props.tabs,
       onActiveKeyChange: (key) => emit("update:activeKey", key),
       onSelect: (key, node) => emit("select", key, node)
@@ -1230,11 +1297,37 @@ var IrisAdminLayout = defineComponent({
         ) : null
       ]
     );
-    const renderContent = () => h(
+    const renderContent = (horizontal = false) => h(
       "div",
-      { "data-iris-admin-content": "", style: { padding: "16px" } },
-      slots.default?.({ activeKey: activeKey.value }) ?? []
+      {
+        "data-iris-admin-content": "",
+        "data-width": props.contentWidth,
+        style: {
+          boxSizing: "border-box",
+          width: "100%",
+          maxWidth: props.contentWidth === "centered" ? "72rem" : void 0,
+          marginInline: props.contentWidth === "centered" ? "auto" : void 0,
+          padding: "16px"
+        }
+      },
+      [
+        horizontal && props.showBreadcrumb ? h(IrisAdminBreadcrumb, { trail: trail.value, hideSingle: false, onSelect }) : null,
+        ...slots.default?.({ activeKey: activeKey.value }) ?? []
+      ]
     );
+    const renderTabs = () => props.tabs && props.showTabs ? h(
+      "div",
+      {
+        "data-iris-admin-tabs-region": "",
+        "data-sticky": props.stickyTabs ? "true" : void 0,
+        style: {
+          position: props.stickyTabs && !props.stickyHeader ? "sticky" : "relative",
+          top: "0",
+          zIndex: "49"
+        }
+      },
+      [h(IrisAdminTabs, { nav: props.tabs })]
+    ) : null;
     return () => {
       if (props.mode === "full-content") {
         return h(
@@ -1251,6 +1344,80 @@ var IrisAdminLayout = defineComponent({
           slots.default?.({ activeKey: activeKey.value }) ?? []
         );
       }
+      if (props.mode === "horizontal") {
+        const justifyContent = props.menuAlign === "center" ? "center" : props.menuAlign === "end" ? "flex-end" : "flex-start";
+        return h(
+          "div",
+          {
+            ...attrs,
+            "data-iris-admin-layout": "",
+            "data-mode": "horizontal",
+            style: {
+              height: props.contentHeight === "viewport" ? "100vh" : "auto",
+              minHeight: "100vh",
+              ...attrs.style ?? {}
+            }
+          },
+          [
+            h(
+              IrisHeaderLayout,
+              { sticky: props.stickyHeader },
+              {
+                header: () => h("div", { "data-iris-admin-header": "" }, [
+                  h(
+                    "div",
+                    {
+                      "data-iris-admin-headerbar": "",
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "12px",
+                        minHeight: "52px",
+                        padding: "0 16px",
+                        background: "var(--iris-background)"
+                      }
+                    },
+                    [
+                      renderLogo({ collapsed: false }),
+                      h(
+                        "div",
+                        {
+                          "data-iris-admin-topnav": "",
+                          style: {
+                            display: "flex",
+                            flex: "1",
+                            minWidth: "0",
+                            justifyContent
+                          }
+                        },
+                        [
+                          h(IrisNavMenu, {
+                            items: props.menus,
+                            activeKey: activeKey.value,
+                            orientation: "horizontal",
+                            onSelect
+                          })
+                        ]
+                      ),
+                      slots.toolbar ? h(
+                        "div",
+                        {
+                          "data-iris-admin-toolbar": "",
+                          style: { display: "flex", alignItems: "center", gap: "8px" }
+                        },
+                        slots.toolbar()
+                      ) : null
+                    ]
+                  ),
+                  renderTabs()
+                ]),
+                default: () => renderContent(true),
+                ...slots.footer ? { footer: () => slots.footer() } : {}
+              }
+            )
+          ]
+        );
+      }
       return h(
         IrisSidebarLayout,
         {
@@ -1297,12 +1464,9 @@ var IrisAdminLayout = defineComponent({
           ),
           default: () => h(
             IrisHeaderLayout,
-            { sticky: true },
+            { sticky: props.stickyHeader },
             {
-              header: () => h("div", { "data-iris-admin-header": "" }, [
-                renderHeaderBar(),
-                props.tabs ? h(IrisAdminTabs, { nav: props.tabs }) : null
-              ]),
+              header: () => h("div", { "data-iris-admin-header": "" }, [renderHeaderBar(), renderTabs()]),
               default: () => renderContent(),
               ...slots.footer ? { footer: () => slots.footer() } : {}
             }
@@ -1312,7 +1476,25 @@ var IrisAdminLayout = defineComponent({
     };
   }
 });
+function useAdminPreferences(preferences, hydrate = true) {
+  const state = ref(preferences.getState());
+  const unsubscribe = preferences.subscribe((next) => {
+    state.value = next;
+  });
+  onMounted(() => {
+    if (hydrate) void preferences.hydrate();
+  });
+  onBeforeUnmount(unsubscribe);
+  return {
+    state: computed(() => state.value),
+    set: preferences.set,
+    patch: preferences.patch,
+    reset: preferences.reset,
+    hydrate: preferences.hydrate,
+    flush: preferences.flush
+  };
+}
 
-export { DropdownContextKey, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, useAdminShell, useTabsNav };
-//# sourceMappingURL=chunk-FJBYAIL4.js.map
-//# sourceMappingURL=chunk-FJBYAIL4.js.map
+export { DropdownContextKey, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, useAdminPreferences, useAdminShell, useTabsNav };
+//# sourceMappingURL=chunk-4V4CT3Z4.js.map
+//# sourceMappingURL=chunk-4V4CT3Z4.js.map