@oneb/ui-vue 0.0.8 → 0.0.10

package/dist/index.js

@@ -1,24 +1,26 @@
 import { OneButton as O } from "./button/index.js";
-import { OneCard as d, OneCardBody as m, OneCardFooter as t, OneCardHeader as p } from "./card/index.js";
-import { OneForm as F, OneFormFeedback as i, OneFormField as f, OneFormInput as u, OneFormLabel as w } from "./form/index.js";
-import { d as C, c as D, _ as b, O as B, a as c, b as l } from "./index-8ee43fa4.js";
+import { OneCard as m, OneCardBody as t, OneCardFooter as d, OneCardHeader as p } from "./card/index.js";
+import { OneForm as f, OneFormFeedback as s, OneFormField as x, OneFormInput as i, OneFormLabel as u } from "./form/index.js";
+import { c as C, _ as D, a as b, b as B } from "./OneBrowserMenu.vue_vue_type_script_setup_true_lang-8d34213c.js";
+import { OneDropdownDivider as l } from "./dropdown/index.js";
+import { OneAvatar as I } from "./common/index.js";
 import "vue";
 import "./_plugin-vue_export-helper-dad06003.js";
 export {
-  C as OneAvatar,
-  D as OneBrowserMenu,
+  I as OneAvatar,
+  C as OneBrowserMenu,
   O as OneButton,
-  d as OneCard,
-  m as OneCardBody,
-  t as OneCardFooter,
+  m as OneCard,
+  t as OneCardBody,
+  d as OneCardFooter,
   p as OneCardHeader,
-  b as OneDropdown,
-  B as OneDropdownDivider,
-  c as OneDropdownItem,
-  F as OneForm,
-  i as OneFormFeedback,
-  f as OneFormField,
-  u as OneFormInput,
-  w as OneFormLabel,
-  l as OneUserMenu
+  D as OneDropdown,
+  l as OneDropdownDivider,
+  b as OneDropdownItem,
+  f as OneForm,
+  s as OneFormFeedback,
+  x as OneFormField,
+  i as OneFormInput,
+  u as OneFormLabel,
+  B as OneUserMenu
 };

package/dist/layout/index.cjs

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

package/dist/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OneHeader } from './OneHeader.vue';
+export { default as OneSidebar } from './OneSidebar.vue';
+export { default as OneMainLayout } from './OneMainLayout.vue';

package/dist/layout/index.js

@@ -0,0 +1,228 @@
+import { openBlock as a, createElementBlock as l, defineComponent as h, resolveComponent as O, createBlock as u, normalizeClass as p, withCtx as L, createElementVNode as s, resolveDynamicComponent as $, createCommentVNode as d, toDisplayString as m, Fragment as q, renderList as B, ref as N, watch as A, computed as I, createVNode as c, unref as M, renderSlot as R } from "vue";
+import { _ as F } from "../_plugin-vue_export-helper-dad06003.js";
+import { c as P, b as V } from "../OneBrowserMenu.vue_vue_type_script_setup_true_lang-8d34213c.js";
+import "../common/index.js";
+const D = {};
+function E(r, t) {
+  return a(), l("div", null, " header ");
+}
+const ce = /* @__PURE__ */ F(D, [["render", E]]), j = {
+  items: {
+    required: !0,
+    type: Array
+  },
+  slim: {
+    type: Boolean,
+    default: !0
+  }
+}, z = {
+  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
+  }
+}, H = {
+  sidebarItems: j.items,
+  logoSrc: {
+    type: String
+  },
+  app: {
+    required: !0,
+    type: Object
+  },
+  user: {
+    type: Object,
+    required: !0
+  },
+  labels: {
+    type: Object
+  },
+  handlers: {
+    type: Object
+  }
+}, G = /* @__PURE__ */ h({
+  __name: "OneSidebarLink",
+  props: z,
+  setup(r) {
+    return (t, n) => {
+      const o = O("RouterLink");
+      return a(), u(o, {
+        to: t.routeName ? { name: t.routeName } : t.route,
+        class: p(["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: L(() => [
+          s("div", {
+            class: p(["flex flex-nowrap items-center", [t.slim ? "w-[24px] h-[24px]" : "w-full"]])
+          }, [
+            t.icon ? (a(), u($(t.icon), {
+              key: 0,
+              class: "w-[24px] h-[24px] flex-shrink-0"
+            })) : d("", !0),
+            s("div", {
+              class: p(["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"]);
+    };
+  }
+}), J = { class: "" }, K = { class: "space-y-2 p-2" }, Q = /* @__PURE__ */ h({
+  __name: "OneSidebar",
+  props: j,
+  setup(r) {
+    return (t, n) => (a(), l("div", J, [
+      s("div", K, [
+        (a(!0), l(q, null, B(t.items, (o) => (a(), u(G, {
+          key: o.label,
+          icon: o.icon,
+          label: o.label,
+          route: o.route,
+          "route-name": o.routeName,
+          exact: o.exact || !1,
+          slim: t.slim
+        }, null, 8, ["icon", "label", "route", "route-name", "exact", "slim"]))), 128))
+      ])
+    ]));
+  }
+});
+function T(r, t) {
+  return a(), l("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 U = { class: "min-h-screen relative" }, W = { class: "header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-screen" }, X = { class: "p-2 flex-shrink-0" }, Y = { class: "w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0" }, Z = ["src"], ee = { class: "text-xs" }, te = { class: "w-full" }, se = { class: "w-full flex justify-end pr-2" }, oe = { class: "flex items-center space-x-1" }, ae = { class: "body w-full h-full" }, ue = /* @__PURE__ */ h({
+  __name: "OneMainLayout",
+  props: H,
+  setup(r) {
+    const t = r, n = N(window.localStorage.getItem("sidebar-slim") === "1");
+    A(n, (e) => {
+      window.localStorage.setItem("sidebar-slim", String(e ? 1 : 0));
+    });
+    const o = I(() => {
+      var e, i;
+      return {
+        name: ((e = t.app) == null ? void 0 : e.workspace) || "",
+        photo_url: ((i = t.app) == null ? void 0 : i.photo_url) || ""
+      };
+    });
+    return (e, i) => {
+      var f, b, w, v, y, g, _, x, k, S;
+      const C = O("RouterLink");
+      return a(), l("div", U, [
+        s("div", W, [
+          s("div", X, [
+            s("button", {
+              onClick: i[0] || (i[0] = (ne) => n.value = !n.value),
+              class: "w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"
+            }, [
+              c(M(T), { class: "w-[24px] h-[24px]" })
+            ])
+          ]),
+          s("div", Y, [
+            e.logoSrc != null ? (a(), l("img", {
+              key: 0,
+              src: e.logoSrc,
+              class: "w-8 h-8 mx-auto",
+              alt: "logo"
+            }, null, 8, Z)) : d("", !0)
+          ]),
+          e.app != null ? (a(), u(C, {
+            key: 0,
+            to: "/",
+            class: "pl-2 max-w-xs"
+          }, {
+            default: L(() => [
+              s("div", null, m(e.app.name), 1),
+              s("div", ee, m(e.app.workspace), 1)
+            ]),
+            _: 1
+          })) : d("", !0),
+          s("div", te, [
+            s("div", se, [
+              s("div", oe, [
+                c(P, {
+                  workspace: o.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(V, {
+                  user: e.user,
+                  "account-label": ((_ = e.labels) == null ? void 0 : _.account) || "Account",
+                  "logout-label": ((x = e.labels) == null ? void 0 : x.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: p(["sidebar transition-all absolute top-[56px] left-0 h-full", [n.value ? "w-[60px]" : "w-60"]])
+        }, [
+          c(Q, {
+            slim: n.value,
+            items: e.sidebarItems
+          }, null, 8, ["slim", "items"])
+        ], 2),
+        s("div", ae, [
+          s("div", {
+            class: p(["content transition-all pt-[56px]", [n.value ? "pl-[60px]" : "pl-60"]])
+          }, [
+            R(e.$slots, "default")
+          ], 2)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  ce as OneHeader,
+  ue as OneMainLayout,
+  Q as OneSidebar
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneb/ui-vue",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -37,6 +37,14 @@
       "types": "./dist/dropdown/index.d.ts",
       "import": "./dist/dropdown/index.js"
     },
+    "./common": {
+      "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",