@iris-ui-kit/vue 0.1.0 → 0.2.0

package/dist/admin.cjs

@@ -342,6 +342,10 @@ var IrisNavMenu = vue.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: {
@@ -397,7 +401,7 @@ var IrisNavMenu = vue.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)",
@@ -409,7 +413,8 @@ var IrisNavMenu = vue.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"
       };
     };
@@ -503,16 +508,40 @@ var IrisNavMenu = vue.defineComponent({
           }) : null
         ]
       );
+      const groupStyle = props.orientation === "horizontal" && depth === 0 ? { position: "relative" } : void 0;
       if (!branch || !open)
-        return vue.h("div", { key: node.key, "data-iris-nav-group": branch ? "" : void 0 }, [row]);
-      return vue.h("div", { key: node.key, "data-iris-nav-group": "", "data-open": "true" }, [
-        row,
-        vue.h(
+        return vue.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 vue.h(
+        "div",
+        { key: node.key, "data-iris-nav-group": "", "data-open": "true", style: groupStyle },
+        [
+          row,
+          vue.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;
@@ -565,11 +594,13 @@ var IrisNavMenu = vue.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 ?? {}
         }
@@ -759,6 +790,7 @@ function useTabsNav(nav) {
     closeRight: nav.closeRight,
     refresh: nav.refresh,
     setPinned: nav.setPinned,
+    move: nav.move,
     cacheKey: nav.cacheKey
   };
 }
@@ -1325,6 +1357,168 @@ var IrisDropdownSeparator = vue.defineComponent({
     });
   }
 });
+var SORTABLE_ITEM_ATTR = "data-iris-sortable-item";
+var IrisSortable = vue.defineComponent({
+  name: "IrisSortable",
+  inheritAttrs: false,
+  props: {
+    /** The ordered items. Used to detect which item is at which position. */
+    items: {
+      type: Array,
+      required: true
+    },
+    /** Called when the user drops an item in a new position. */
+    onReorder: {
+      type: Function,
+      default: void 0
+    },
+    /** Optional item key getter. Defaults to `String(index)`. */
+    getKey: {
+      type: Function,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    orientation: {
+      type: String,
+      default: "vertical"
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    reorder: (_next) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const containerRef = vue.ref(null);
+    const sortable = core.createSortable();
+    const activeKey = vue.ref(null);
+    const unsub = sortable.subscribe((state) => {
+      activeKey.value = state.activeId;
+    });
+    vue.onBeforeUnmount(unsub);
+    const indexOf = (key) => {
+      const container = containerRef.value;
+      if (!container) return -1;
+      return Array.from(
+        container.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`)
+      ).findIndex((el) => el.getAttribute(SORTABLE_ITEM_ATTR) === key);
+    };
+    const onPointerDown = (e) => {
+      if (props.disabled) return;
+      const target = e.target.closest(`[${SORTABLE_ITEM_ATTR}]`);
+      if (!target) return;
+      const container = containerRef.value;
+      if (!container) return;
+      const key = target.getAttribute(SORTABLE_ITEM_ATTR) ?? "";
+      const index = indexOf(key);
+      if (index < 0) return;
+      sortable.press(key, e.clientX, e.clientY);
+    };
+    const onPointerMove = (e) => {
+      if (!sortable.isPending() && sortable.getState().activeId === null) return;
+      const items = containerRef.value?.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`);
+      const rects = Array.from(items ?? []).map((el) => {
+        const rect = el.getBoundingClientRect();
+        return {
+          id: el.getAttribute(SORTABLE_ITEM_ATTR) ?? "",
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height
+        };
+      });
+      sortable.tryStart(e.clientX, e.clientY);
+      if (sortable.getState().activeId !== null) {
+        sortable.moveOver({ x: e.clientX, y: e.clientY }, rects);
+      }
+    };
+    const onPointerUp = () => {
+      const state = sortable.getState();
+      if (state.activeId === null) {
+        sortable.cancel();
+        return;
+      }
+      const result = sortable.end();
+      if (result.activeId && result.overId && result.activeId !== result.overId) {
+        const from = indexOf(result.activeId);
+        const to = indexOf(result.overId);
+        if (from >= 0 && to >= 0) {
+          const next = [...props.items];
+          const [moved] = next.splice(from, 1);
+          next.splice(to, 0, moved);
+          if (props.onReorder) {
+            props.onReorder(next);
+          }
+          emit("reorder", next);
+        }
+      }
+    };
+    const resolveKey = (item, index) => props.getKey ? props.getKey(item, index) : String(index);
+    return () => {
+      const children = [];
+      const defaultSlots = slots.default?.();
+      if (defaultSlots) {
+        const itemsArray = props.items;
+        defaultSlots.forEach((child, index) => {
+          const item = itemsArray[index];
+          const key = resolveKey(item, index);
+          const isDragging = key === activeKey.value;
+          children.push(
+            vue.h(
+              "div",
+              {
+                key,
+                [SORTABLE_ITEM_ATTR]: key,
+                "data-iris-sortable-dragging": isDragging ? "" : void 0,
+                style: {
+                  transition: isDragging ? "none" : "transform 150ms ease",
+                  opacity: isDragging ? 0.4 : 1,
+                  position: "relative",
+                  zIndex: isDragging ? 100 : void 0
+                }
+              },
+              [child]
+            )
+          );
+        });
+      }
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          ref: (el) => {
+            containerRef.value = el ?? null;
+          },
+          "data-iris-sortable": "",
+          "data-state": activeKey.value ? "dragging" : "idle",
+          class: props.class,
+          style: {
+            display: "flex",
+            flexDirection: props.orientation === "horizontal" ? "row" : "column",
+            gap: "var(--iris-gap-sm, 4px)",
+            opacity: props.disabled ? 0.6 : 1,
+            userSelect: activeKey.value ? "none" : void 0,
+            ...props.style ?? {}
+          },
+          onPointerdown: onPointerDown,
+          onPointermove: onPointerMove,
+          onPointerup: onPointerUp,
+          onPointerleave: onPointerUp
+        },
+        children
+      );
+    };
+  }
+});
 
 // src/admin/AdminTabs.ts
 var IrisAdminTabs = vue.defineComponent({
@@ -1332,12 +1526,14 @@ var IrisAdminTabs = vue.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();
@@ -1354,6 +1550,10 @@ var IrisAdminTabs = vue.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]");
@@ -1505,6 +1705,8 @@ var IrisAdminTabs = vue.defineComponent({
               action(tr("admin.refresh"), () => refresh(key)),
               action(tr("admin.close"), () => close(key)),
               vue.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())
             ];
@@ -1536,14 +1738,28 @@ var IrisAdminTabs = vue.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))
+          [
+            vue.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()
       ]
@@ -1599,6 +1815,8 @@ var IrisAdminLayout = vue.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 },
@@ -1607,7 +1825,16 @@ var IrisAdminLayout = vue.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 }
   },
@@ -1626,6 +1853,7 @@ var IrisAdminLayout = vue.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)
@@ -1744,11 +1972,37 @@ var IrisAdminLayout = vue.defineComponent({
         ) : null
       ]
     );
-    const renderContent = () => vue.h(
+    const renderContent = (horizontal = false) => vue.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 ? vue.h(IrisAdminBreadcrumb, { trail: trail.value, hideSingle: false, onSelect }) : null,
+        ...slots.default?.({ activeKey: activeKey.value }) ?? []
+      ]
     );
+    const renderTabs = () => props.tabs && props.showTabs ? vue.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"
+        }
+      },
+      [vue.h(IrisAdminTabs, { nav: props.tabs })]
+    ) : null;
     return () => {
       if (props.mode === "full-content") {
         return vue.h(
@@ -1765,6 +2019,80 @@ var IrisAdminLayout = vue.defineComponent({
           slots.default?.({ activeKey: activeKey.value }) ?? []
         );
       }
+      if (props.mode === "horizontal") {
+        const justifyContent = props.menuAlign === "center" ? "center" : props.menuAlign === "end" ? "flex-end" : "flex-start";
+        return vue.h(
+          "div",
+          {
+            ...attrs,
+            "data-iris-admin-layout": "",
+            "data-mode": "horizontal",
+            style: {
+              height: props.contentHeight === "viewport" ? "100vh" : "auto",
+              minHeight: "100vh",
+              ...attrs.style ?? {}
+            }
+          },
+          [
+            vue.h(
+              IrisHeaderLayout,
+              { sticky: props.stickyHeader },
+              {
+                header: () => vue.h("div", { "data-iris-admin-header": "" }, [
+                  vue.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 }),
+                      vue.h(
+                        "div",
+                        {
+                          "data-iris-admin-topnav": "",
+                          style: {
+                            display: "flex",
+                            flex: "1",
+                            minWidth: "0",
+                            justifyContent
+                          }
+                        },
+                        [
+                          vue.h(IrisNavMenu, {
+                            items: props.menus,
+                            activeKey: activeKey.value,
+                            orientation: "horizontal",
+                            onSelect
+                          })
+                        ]
+                      ),
+                      slots.toolbar ? vue.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 vue.h(
         IrisSidebarLayout,
         {
@@ -1811,12 +2139,9 @@ var IrisAdminLayout = vue.defineComponent({
           ),
           default: () => vue.h(
             IrisHeaderLayout,
-            { sticky: true },
+            { sticky: props.stickyHeader },
             {
-              header: () => vue.h("div", { "data-iris-admin-header": "" }, [
-                renderHeaderBar(),
-                props.tabs ? vue.h(IrisAdminTabs, { nav: props.tabs }) : null
-              ]),
+              header: () => vue.h("div", { "data-iris-admin-header": "" }, [renderHeaderBar(), renderTabs()]),
               default: () => renderContent(),
               ...slots.footer ? { footer: () => slots.footer() } : {}
             }
@@ -1826,11 +2151,37 @@ var IrisAdminLayout = vue.defineComponent({
     };
   }
 });
+function useAdminPreferences(preferences, hydrate = true) {
+  const state = vue.ref(preferences.getState());
+  const unsubscribe = preferences.subscribe((next) => {
+    state.value = next;
+  });
+  vue.onMounted(() => {
+    if (hydrate) void preferences.hydrate();
+  });
+  vue.onBeforeUnmount(unsubscribe);
+  return {
+    state: vue.computed(() => state.value),
+    set: preferences.set,
+    patch: preferences.patch,
+    reset: preferences.reset,
+    hydrate: preferences.hydrate,
+    flush: preferences.flush
+  };
+}
 
+Object.defineProperty(exports, "createAdminPreferences", {
+  enumerable: true,
+  get: function () { return core.createAdminPreferences; }
+});
 Object.defineProperty(exports, "createTabsNav", {
   enumerable: true,
   get: function () { return core.createTabsNav; }
 });
+Object.defineProperty(exports, "filterNavByAccess", {
+  enumerable: true,
+  get: function () { return core.filterNavByAccess; }
+});
 Object.defineProperty(exports, "findNavNode", {
   enumerable: true,
   get: function () { return core.findNavNode; }
@@ -1855,6 +2206,14 @@ Object.defineProperty(exports, "isClosable", {
   enumerable: true,
   get: function () { return core.isClosable; }
 });
+Object.defineProperty(exports, "localStorageAdminPreferencesStorage", {
+  enumerable: true,
+  get: function () { return core.localStorageAdminPreferencesStorage; }
+});
+Object.defineProperty(exports, "nodeAllowsRoles", {
+  enumerable: true,
+  get: function () { return core.nodeAllowsRoles; }
+});
 Object.defineProperty(exports, "visibleNav", {
   enumerable: true,
   get: function () { return core.visibleNav; }
@@ -1863,6 +2222,7 @@ exports.IrisAdminBreadcrumb = IrisAdminBreadcrumb;
 exports.IrisAdminLayout = IrisAdminLayout;
 exports.IrisAdminTabs = IrisAdminTabs;
 exports.IrisNavMenu = IrisNavMenu;
+exports.useAdminPreferences = useAdminPreferences;
 exports.useAdminShell = useAdminShell;
 exports.useTabsNav = useTabsNav;
 //# sourceMappingURL=admin.cjs.map