@oneb/ui-vue 0.0.9 → 0.0.11

package/dist/layout/index.js

@@ -0,0 +1,223 @@
+import { defineComponent as h, computed as O, resolveComponent as L, openBlock as l, createBlock as u, normalizeClass as i, withCtx as j, createElementVNode as s, resolveDynamicComponent as B, createCommentVNode as d, toDisplayString as m, createElementBlock as p, Fragment as $, renderList as N, ref as A, watch as I, createVNode as c, unref as M, renderSlot as R } from "vue";
+import { c as F, b as P } from "../OneBrowserMenu.vue_vue_type_script_setup_true_lang-197489be.js";
+import "../common/index.js";
+const C = {
+  items: {
+    required: !0,
+    type: Array
+  },
+  slim: {
+    type: Boolean,
+    default: !0
+  }
+}, V = {
+  route: {
+    required: !1,
+    type: [Object, String]
+  },
+  routeName: {
+    required: !1,
+    type: String
+  },
+  handler: {
+    required: !1,
+    type: Function,
+    default() {
+      return () => {
+      };
+    }
+  },
+  label: {
+    type: String,
+    required: !0
+  },
+  icon: {
+    type: [Function, Object]
+  },
+  exact: {
+    type: Boolean,
+    required: !1,
+    default: !1
+  },
+  slim: {
+    type: Boolean,
+    default: !0
+  }
+}, D = {
+  sidebarItems: C.items,
+  logoSrc: {
+    type: String
+  },
+  app: {
+    required: !0,
+    type: Object
+  },
+  user: {
+    type: Object,
+    required: !0
+  },
+  labels: {
+    type: Object
+  },
+  handlers: {
+    type: Object
+  }
+}, E = /* @__PURE__ */ h({
+  __name: "OneSidebarLink",
+  props: V,
+  setup(r) {
+    const o = r, a = O(() => o.route != null ? o.route : o.routeName != null ? { name: o.routeName } : "/");
+    return (t, e) => {
+      const n = L("RouterLink");
+      return l(), u(n, {
+        to: a.value,
+        class: i(["flex items-center w-full p-[8px] rounded-lg text-sm font-medium hover:bg-primary-10-hover hover:text-primary-base transition-all text-primary-content", [t.slim ? "w-[44px] h-[44px] justify-center" : "h-[44px] justify-start"]]),
+        "active-class": t.exact ? "" : "bg-primary-10 !text-primary-base",
+        "exact-active-class": t.exact ? "bg-primary-10 !text-primary-base" : "",
+        exact: t.exact
+      }, {
+        default: j(() => [
+          s("div", {
+            class: i(["flex flex-nowrap items-center", [t.slim ? "w-[24px] h-[24px]" : "w-full"]])
+          }, [
+            t.icon ? (l(), u(B(t.icon), {
+              key: 0,
+              class: "w-[24px] h-[24px] flex-shrink-0"
+            })) : d("", !0),
+            s("div", {
+              class: i(["whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink", [t.slim ? "w-0" : "pl-1.5 w-full"]])
+            }, m(t.label), 3)
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["to", "active-class", "exact-active-class", "exact", "class"]);
+    };
+  }
+}), z = { class: "" }, G = { class: "space-y-2 p-2" }, H = /* @__PURE__ */ h({
+  __name: "OneSidebar",
+  props: C,
+  setup(r) {
+    return (o, a) => (l(), p("div", z, [
+      s("div", G, [
+        (l(!0), p($, null, N(o.items, (t) => (l(), u(E, {
+          key: t.label,
+          icon: t.icon,
+          label: t.label,
+          route: t.route,
+          "route-name": t.routeName,
+          exact: t.exact || !1,
+          slim: o.slim
+        }, null, 8, ["icon", "label", "route", "route-name", "exact", "slim"]))), 128))
+      ])
+    ]));
+  }
+});
+function J(r, o) {
+  return l(), p("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    s("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+    })
+  ]);
+}
+const K = { class: "min-h-screen relative" }, Q = { class: "header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-screen" }, T = { class: "p-2 flex-shrink-0" }, U = { class: "w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0" }, W = ["src"], X = { class: "whitespace-nowrap" }, Y = { class: "text-xs whitespace-nowrap" }, Z = { class: "w-full" }, ee = { class: "w-full flex justify-end pr-2" }, te = { class: "flex items-center space-x-1" }, se = { class: "body w-full h-full" }, re = /* @__PURE__ */ h({
+  __name: "OneMainLayout",
+  props: D,
+  setup(r) {
+    const o = r, a = A(window.localStorage.getItem("sidebar-slim") === "1");
+    I(a, (e) => {
+      window.localStorage.setItem("sidebar-slim", String(e ? 1 : 0));
+    });
+    const t = O(() => {
+      var e, n;
+      return {
+        name: ((e = o.app) == null ? void 0 : e.workspace) || "",
+        photo_url: ((n = o.app) == null ? void 0 : n.photo_url) || ""
+      };
+    });
+    return (e, n) => {
+      var f, b, w, v, y, g, x, _, k, S;
+      const q = L("RouterLink");
+      return l(), p("div", K, [
+        s("div", Q, [
+          s("div", T, [
+            s("button", {
+              onClick: n[0] || (n[0] = (oe) => a.value = !a.value),
+              class: "w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"
+            }, [
+              c(M(J), { class: "w-[24px] h-[24px]" })
+            ])
+          ]),
+          s("div", U, [
+            e.logoSrc != null ? (l(), p("img", {
+              key: 0,
+              src: e.logoSrc,
+              class: "w-8 h-8 mx-auto",
+              alt: "logo"
+            }, null, 8, W)) : d("", !0)
+          ]),
+          e.app != null ? (l(), u(q, {
+            key: 0,
+            to: "/",
+            class: "pl-2 max-w-xs"
+          }, {
+            default: j(() => [
+              s("div", X, m(e.app.name), 1),
+              s("div", Y, m(e.app.workspace), 1)
+            ]),
+            _: 1
+          })) : d("", !0),
+          s("div", Z, [
+            s("div", ee, [
+              s("div", te, [
+                c(F, {
+                  workspace: t.value,
+                  apps: ((f = e.app) == null ? void 0 : f.apps) || [],
+                  "change-label": ((b = e.labels) == null ? void 0 : b.change) || "Change",
+                  "apps-title": ((w = e.labels) == null ? void 0 : w.apps) || "Apps",
+                  "on-app": (v = e.handlers) == null ? void 0 : v.onApp,
+                  "on-change": (y = e.handlers) == null ? void 0 : y.onChange,
+                  onOpen: (g = e.handlers) == null ? void 0 : g.onBrowse
+                }, null, 8, ["workspace", "apps", "change-label", "apps-title", "on-app", "on-change", "onOpen"]),
+                c(P, {
+                  user: e.user,
+                  "account-label": ((x = e.labels) == null ? void 0 : x.account) || "Account",
+                  "logout-label": ((_ = e.labels) == null ? void 0 : _.logout) || "Logout",
+                  "on-account": (k = e.handlers) == null ? void 0 : k.onAccount,
+                  "on-logout": (S = e.handlers) == null ? void 0 : S.onLogout
+                }, null, 8, ["user", "account-label", "logout-label", "on-account", "on-logout"])
+              ])
+            ])
+          ])
+        ]),
+        s("div", {
+          class: i(["sidebar transition-all absolute top-[56px] left-0 h-full", [a.value ? "w-[60px]" : "w-60"]])
+        }, [
+          c(H, {
+            slim: a.value,
+            items: e.sidebarItems
+          }, null, 8, ["slim", "items"])
+        ], 2),
+        s("div", se, [
+          s("div", {
+            class: i(["content transition-all pt-[56px]", [a.value ? "pl-[60px]" : "pl-60"]])
+          }, [
+            R(e.$slots, "default")
+          ], 2)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  re as OneMainLayout,
+  H as OneSidebar
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneb/ui-vue",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -41,6 +41,10 @@
       "types": "./dist/common/index.d.ts",
       "import": "./dist/common/index.js"
     },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout/index.js"
+    },
     "./icons": {
       "types": "./dist/icons/outline/index.d.ts",
       "import": "./dist/icons/outline/esm/index.js",