@oneb/ui-vue 0.0.13 → 0.0.15

package/dist/button/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),p=require("../_plugin-vue_export-helper-f246444f.cjs");const b={},g={class:"spinner",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",style:{animation:"one-sp-ico-rot 2.7s linear infinite"}},m=e.createElementVNode("circle",{style:{"stroke-linecap":"round",animation:"one-sp-ico-dash 1.7s ease-in-out infinite"},class:"opacity-75",cx:"12",cy:"12",r:"8",fill:"none",stroke:"currentColor","stroke-width":"2"},null,-1),h=[m];function f(t,n){return e.openBlock(),e.createElementBlock("svg",g,h)}const y=p._export_sfc(b,[["render",f]]),v={variant:{type:String,default:"primary"},size:{type:String,default:"md"},label:{type:String},icon:{type:[Function,Object]},isLoading:{type:Boolean},isSubmit:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},iconClass:{type:[String,Array]}},w=["relative inline-flex","border","items-center justify-center","font-medium whitespace-nowrap","disabled:opacity-50 disabled:cursor-default","focus:outline-none focus:ring-2 focus:ring-offset-2","transition-colors duration-200"],k={sm:["px-2 py-1 text-sm"],md:["px-3 py-2"],lg:["px-4 py-3"]},_={primary:["rounded-md   border-transparent    bg-primary-base disabled:bg-primary-hover text-white hover:bg-primary-hover focus:ring-primary-glow"],secondary:["rounded-md border-primary-stroke bg-primary-body disabled:bg-primary-body-hover text-black hover:bg-primary-body-hover focus:ring-tertiary-glow"],info:["rounded-md   border-transparent bg-info-base disabled:bg-info-hover text-white hover:bg-info-hover focus:ring-info-glow"],success:["rounded-md   border-transparent bg-success-base disabled:bg-success-hover text-white hover:bg-success-hover focus:ring-success-glow"],warning:["rounded-md   border-transparent bg-warning-base disabled:bg-warning-hover text-white hover:bg-warning-hover focus:ring-warning-glow"],danger:["rounded-md   border-transparent bg-danger-base disabled:bg-danger-hover text-white hover:bg-danger-hover focus:ring-danger-glow"],touch:["rounded-full border-transparent text-black hover:bg-primary-body-hover hover:shadow p-3 focus:ring-tertiary-glow"],link:["rounded-md   border-transparent items-center text-info-base hover:text-info-hover"],none:["rounded-md   border-transparent text-gray-500"]},C=(t="primary",n="md")=>{const o=[];return o.push(...w),o.push(..._[t]??[]),t!=="touch"&&o.push(...k[n]??[]),o},B=["disabled","title","type","onClick"],x=e.defineComponent({__name:"OneButton",props:v,emits:["click"],setup(t,{emit:n}){const o=t,a=()=>{n("click")},r=e.computed(()=>o.icon),l=e.computed(()=>{const s=C(o.variant,o.size);return o.variant==="touch"&&o.active&&s.push("bg-primary-body-active"),s}),c=e.computed(()=>o.disabled||o.isLoading),d=e.computed(()=>o.label&&o.label.length>0&&o.variant!=="touch"),u=e.computed(()=>{const s=["inline-block text-ellipsis overflow-hidden"];return(o.icon!=null||o.isLoading)&&s.push("ml-2"),s}),i=e.computed(()=>{const s=[];return o.size==="sm"?s.push("w-3 h-3"):o.size==="lg"?s.push("w-5 h-5"):s.push("w-4 h-4"),typeof o.iconClass=="string"?s.push(o.iconClass):o.iconClass instanceof Array&&s.push(...o.iconClass),s});return(s,L)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(l.value),disabled:c.value,title:s.label,type:s.isSubmit?"submit":"button",onClick:e.withModifiers(a,["stop"])},[s.isLoading?(e.openBlock(),e.createBlock(y,{key:0,class:e.normalizeClass(i.value)},null,8,["class"])):r.value!=null?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),{key:1,class:e.normalizeClass(i.value)},null,8,["class"])):e.createCommentVNode("",!0),d.value?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(u.value)},e.toDisplayString(s.label),3)):e.createCommentVNode("",!0)],10,B))}});exports.OneButton=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),p=require("../_plugin-vue_export-helper-f246444f.cjs");const b={},m={class:"spinner",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",style:{animation:"one-sp-ico-rot 2.7s linear infinite"}},g=e.createElementVNode("circle",{style:{"stroke-linecap":"round",animation:"one-sp-ico-dash 1.7s ease-in-out infinite"},class:"opacity-75",cx:"12",cy:"12",r:"8",fill:"none",stroke:"currentColor","stroke-width":"2"},null,-1),h=[g];function f(o,n){return e.openBlock(),e.createElementBlock("svg",m,h)}const y=p._export_sfc(b,[["render",f]]),v={variant:{type:String,default:"primary"},size:{type:String,default:"md"},label:{type:String},icon:{type:[Function,Object]},isLoading:{type:Boolean},isSubmit:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},iconClass:{type:[String,Array]}},w=["relative inline-flex","border","items-center justify-center","font-medium whitespace-nowrap","disabled:opacity-50 disabled:cursor-default","focus:outline-none focus:ring-2 focus:ring-offset-2","transition-colors duration-200"],x={sm:["px-2 py-1 text-sm"],md:["px-3 py-2"],lg:["px-4 py-3"]},k={primary:["rounded-md   border-transparent bg-primary-base disabled:bg-primary-hover text-sm text-white hover:bg-primary-hover focus:ring-primary-glow"],secondary:["rounded-md border-primary-stroke bg-primary-body disabled:bg-primary-body-hover text-black text-sm hover:bg-primary-body-hover focus:ring-tertiary-glow"],info:["rounded-md   border-transparent bg-info-base disabled:bg-info-hover text-white text-sm hover:bg-info-hover focus:ring-info-glow"],success:["rounded-md   border-transparent bg-success-base disabled:bg-success-hover text-white text-sm hover:bg-success-hover focus:ring-success-glow"],warning:["rounded-md   border-transparent bg-warning-base disabled:bg-warning-hover text-white text-sm hover:bg-warning-hover focus:ring-warning-glow"],danger:["rounded-md   border-transparent bg-danger-base disabled:bg-danger-hover text-white text-sm hover:bg-danger-hover focus:ring-danger-glow"],touch:["rounded-full border-transparent text-black hover:bg-primary-body-hover hover:shadow p-3 text-sm focus:ring-tertiary-glow"],link:["rounded-md   border-transparent items-center text-info-base hover:text-info-hover text-sm"],none:["rounded-md   border-transparent text-gray-500"]},_=(o="primary",n="md")=>{const t=[];return t.push(...w),t.push(...k[o]??[]),o!=="touch"&&t.push(...x[n]??[]),t},C=["disabled","title","type","onClick"],B=e.defineComponent({__name:"OneButton",props:v,emits:["click"],setup(o,{emit:n}){const t=o,a=()=>{n("click")},r=e.computed(()=>t.icon),l=e.computed(()=>{const s=_(t.variant,t.size);return t.variant==="touch"&&t.active&&s.push("bg-primary-body-active"),s}),c=e.computed(()=>t.disabled||t.isLoading),d=e.computed(()=>t.label&&t.label.length>0&&t.variant!=="touch"),u=e.computed(()=>{const s=["inline-block text-ellipsis overflow-hidden"];return(t.icon!=null||t.isLoading)&&s.push("ml-2"),s}),i=e.computed(()=>{const s=[];return t.size==="sm"?s.push("w-3 h-3"):t.size==="lg"?s.push("w-5 h-5"):s.push("w-4 h-4"),typeof t.iconClass=="string"?s.push(t.iconClass):t.iconClass instanceof Array&&s.push(...t.iconClass),s});return(s,L)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(l.value),disabled:c.value,title:s.label,type:s.isSubmit?"submit":"button",onClick:e.withModifiers(a,["stop"])},[s.isLoading?(e.openBlock(),e.createBlock(y,{key:0,class:e.normalizeClass(i.value)},null,8,["class"])):r.value!=null?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),{key:1,class:e.normalizeClass(i.value)},null,8,["class"])):e.createCommentVNode("",!0),d.value?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(u.value)},e.toDisplayString(s.label),3)):e.createCommentVNode("",!0)],10,C))}});exports.OneButton=B;

package/dist/button/index.js

@@ -1,11 +1,11 @@
-import { openBlock as o, createElementBlock as a, createElementVNode as m, defineComponent as y, computed as t, normalizeClass as i, withModifiers as v, createBlock as d, resolveDynamicComponent as w, createCommentVNode as u, toDisplayString as _ } from "vue";
-import { _ as k } from "../_plugin-vue_export-helper-dad06003.js";
-const x = {}, C = {
+import { openBlock as o, createElementBlock as a, createElementVNode as f, defineComponent as y, computed as t, normalizeClass as i, withModifiers as v, createBlock as d, resolveDynamicComponent as w, createCommentVNode as u, toDisplayString as x } from "vue";
+import { _ } from "../_plugin-vue_export-helper-dad06003.js";
+const k = {}, C = {
   class: "spinner",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   style: { animation: "one-sp-ico-rot 2.7s linear infinite" }
-}, B = /* @__PURE__ */ m("circle", {
+}, B = /* @__PURE__ */ f("circle", {
   style: { "stroke-linecap": "round", animation: "one-sp-ico-dash 1.7s ease-in-out infinite" },
   class: "opacity-75",
   cx: "12",
@@ -20,7 +20,7 @@ const x = {}, C = {
 function S(n, r) {
   return o(), a("svg", C, L);
 }
-const z = /* @__PURE__ */ k(x, [["render", S]]), I = {
+const z = /* @__PURE__ */ _(k, [["render", S]]), I = {
   variant: {
     type: String,
     default: "primary"
@@ -66,14 +66,14 @@ const z = /* @__PURE__ */ k(x, [["render", S]]), I = {
   md: ["px-3 py-2"],
   lg: ["px-4 py-3"]
 }, j = {
-  primary: ["rounded-md   border-transparent    bg-primary-base disabled:bg-primary-hover text-white hover:bg-primary-hover focus:ring-primary-glow"],
-  secondary: ["rounded-md border-primary-stroke bg-primary-body disabled:bg-primary-body-hover text-black hover:bg-primary-body-hover focus:ring-tertiary-glow"],
-  info: ["rounded-md   border-transparent bg-info-base disabled:bg-info-hover text-white hover:bg-info-hover focus:ring-info-glow"],
-  success: ["rounded-md   border-transparent bg-success-base disabled:bg-success-hover text-white hover:bg-success-hover focus:ring-success-glow"],
-  warning: ["rounded-md   border-transparent bg-warning-base disabled:bg-warning-hover text-white hover:bg-warning-hover focus:ring-warning-glow"],
-  danger: ["rounded-md   border-transparent bg-danger-base disabled:bg-danger-hover text-white hover:bg-danger-hover focus:ring-danger-glow"],
-  touch: ["rounded-full border-transparent text-black hover:bg-primary-body-hover hover:shadow p-3 focus:ring-tertiary-glow"],
-  link: ["rounded-md   border-transparent items-center text-info-base hover:text-info-hover"],
+  primary: ["rounded-md   border-transparent bg-primary-base disabled:bg-primary-hover text-sm text-white hover:bg-primary-hover focus:ring-primary-glow"],
+  secondary: ["rounded-md border-primary-stroke bg-primary-body disabled:bg-primary-body-hover text-black text-sm hover:bg-primary-body-hover focus:ring-tertiary-glow"],
+  info: ["rounded-md   border-transparent bg-info-base disabled:bg-info-hover text-white text-sm hover:bg-info-hover focus:ring-info-glow"],
+  success: ["rounded-md   border-transparent bg-success-base disabled:bg-success-hover text-white text-sm hover:bg-success-hover focus:ring-success-glow"],
+  warning: ["rounded-md   border-transparent bg-warning-base disabled:bg-warning-hover text-white text-sm hover:bg-warning-hover focus:ring-warning-glow"],
+  danger: ["rounded-md   border-transparent bg-danger-base disabled:bg-danger-hover text-white text-sm hover:bg-danger-hover focus:ring-danger-glow"],
+  touch: ["rounded-full border-transparent text-black hover:bg-primary-body-hover hover:shadow p-3 text-sm focus:ring-tertiary-glow"],
+  link: ["rounded-md   border-transparent items-center text-info-base hover:text-info-hover text-sm"],
   none: ["rounded-md   border-transparent text-gray-500"]
 }, A = (n = "primary", r = "md") => {
   const e = [];
@@ -88,7 +88,7 @@ const z = /* @__PURE__ */ k(x, [["render", S]]), I = {
     }, l = t(() => e.icon), b = t(() => {
       const s = A(e.variant, e.size);
       return e.variant === "touch" && e.active && s.push("bg-primary-body-active"), s;
-    }), g = t(() => e.disabled || e.isLoading), h = t(() => e.label && e.label.length > 0 && e.variant !== "touch"), f = t(() => {
+    }), g = t(() => e.disabled || e.isLoading), m = t(() => e.label && e.label.length > 0 && e.variant !== "touch"), h = t(() => {
       const s = [
         "inline-block text-ellipsis overflow-hidden"
       ];
@@ -111,10 +111,10 @@ const z = /* @__PURE__ */ k(x, [["render", S]]), I = {
         key: 1,
         class: i(c.value)
       }, null, 8, ["class"])) : u("", !0),
-      h.value ? (o(), a("span", {
+      m.value ? (o(), a("span", {
         key: 2,
-        class: i(f.value)
-      }, _(s.label), 3)) : u("", !0)
+        class: i(h.value)
+      }, x(s.label), 3)) : u("", !0)
     ], 10, E));
   }
 });

package/dist/layout/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w=require("../OneBrowserMenu.vue_vue_type_script_setup_true_lang-24874222.cjs");require("../common/index.cjs");const v={items:{required:!0,type:Array},slim:{type:Boolean,default:!0}},k={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}},_={sidebarItems:v.items,logoSrc:{type:String},app:{required:!0,type:Object},user:{type:Object,required:!0},labels:{type:Object},handlers:{type:Object}},x=e.defineComponent({__name:"OneSidebarLink",props:k,setup(r){const l=r,n=e.computed(()=>l.route!=null?l.route:l.routeName!=null?{name:l.routeName}:"/");return(o,t)=>{const a=e.resolveComponent("RouterLink");return e.openBlock(),e.createBlock(a,{to:n.value,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"])}}}),N={class:""},B={class:"space-y-2 p-2"},y=e.defineComponent({__name:"OneSidebar",props:v,setup(r){return(l,n)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,o=>(e.openBlock(),e.createBlock(x,{key:o.label,icon:o.icon,label:o.label,route:o.route,"route-name":o.routeName,exact:o.exact||!1,slim:l.slim},null,8,["icon","label","route","route-name","exact","slim"]))),128))])]))}});function V(r,l){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 C={class:"min-h-screen relative"},E={class:"header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-screen"},S={class:"p-2 flex-shrink-0"},O={class:"w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0"},j=["src"],L={class:"whitespace-nowrap"},q={class:"text-xs whitespace-nowrap"},$={class:"w-full"},M={class:"w-full flex justify-end pr-2"},z={class:"flex items-center space-x-1"},A={class:"body w-full h-full"},D=e.defineComponent({__name:"OneMainLayout",props:_,setup(r){const l=r,n=e.ref(window.localStorage.getItem("sidebar-slim")==="1");e.watch(n,t=>{window.localStorage.setItem("sidebar-slim",String(t?1:0))});const o=e.computed(()=>{var t,a;return{name:((t=l.app)==null?void 0:t.workspace)||"",photo_url:((a=l.app)==null?void 0:a.photo_url)||""}});return(t,a)=>{var s,c,i,p,u,d,m,h,f,b;const g=e.resolveComponent("RouterLink");return e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",E,[e.createElementVNode("div",S,[e.createElementVNode("button",{onClick:a[0]||(a[0]=I=>n.value=!n.value),class:"w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"},[e.createVNode(e.unref(V),{class:"w-[24px] h-[24px]"})])]),e.createElementVNode("div",O,[t.logoSrc!=null?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSrc,class:"w-8 h-8 mx-auto",alt:"logo"},null,8,j)):e.createCommentVNode("",!0)]),t.app!=null?(e.openBlock(),e.createBlock(g,{key:0,to:"/",class:"pl-2 max-w-xs"},{default:e.withCtx(()=>[e.createElementVNode("div",L,e.toDisplayString(t.app.name),1),e.createElementVNode("div",q,e.toDisplayString(t.app.workspace),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",$,[e.createElementVNode("div",M,[e.createElementVNode("div",z,[e.createVNode(w._sfc_main$3,{workspace:o.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(w._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",[n.value?"w-[60px]":"w-60"]])},[e.createVNode(y,{slim:n.value,items:t.sidebarItems},null,8,["slim","items"])],2),e.createElementVNode("div",A,[e.createElementVNode("div",{class:e.normalizeClass(["content transition-all pt-[56px]",[n.value?"pl-[60px]":"pl-60"]])},[e.renderSlot(t.$slots,"default")],2)])])}}});exports.OneMainLayout=D;exports.OneSidebar=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w=require("../OneBrowserMenu.vue_vue_type_script_setup_true_lang-24874222.cjs");require("../common/index.cjs");const b={items:{required:!0,type:Array},slim:{type:Boolean,default:!0}},y={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}},_={sidebarItems:b.items,logoSrc:{type:String},helpUrl:{type:String},app:{required:!0,type:Object},user:{type:Object,required:!0},labels:{type:Object},handlers:{type:Object}},x=e.defineComponent({__name:"OneSidebarLink",props:y,setup(a){const l=a,n=e.computed(()=>l.route!=null?l.route:l.routeName!=null?{name:l.routeName}:"/");return(o,t)=>{const r=e.resolveComponent("RouterLink");return e.openBlock(),e.createBlock(r,{to:n.value,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"])}}}),N={class:""},B={class:"space-y-2 p-2"},v=e.defineComponent({__name:"OneSidebar",props:b,setup(a){return(l,n)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,o=>(e.openBlock(),e.createBlock(x,{key:o.label,icon:o.icon,label:o.label,route:o.route,"route-name":o.routeName,exact:o.exact||!1,slim:l.slim},null,8,["icon","label","route","route-name","exact","slim"]))),128))])]))}});function V(a,l){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"})])}function E(a,l){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:"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"})])}const C={class:"min-h-screen relative"},S={class:"header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full"},O={class:"p-2 flex-shrink-0"},j={class:"w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0"},L=["src"],q={class:"whitespace-nowrap"},$={class:"text-xs whitespace-nowrap"},M={class:"w-full"},z={class:"w-full flex justify-end pr-2"},A={class:"flex items-center space-x-1"},D={key:0,class:"sm:block flex-shrink-0 hidden"},I=["href"],P={class:"body w-full h-full"},R=e.defineComponent({__name:"OneMainLayout",props:_,setup(a){const l=a,n=e.ref(window.localStorage.getItem("sidebar-slim")==="1");e.watch(n,t=>{window.localStorage.setItem("sidebar-slim",String(t?1:0))});const o=e.computed(()=>{var t,r;return{name:((t=l.app)==null?void 0:t.workspace)||"",photo_url:((r=l.app)==null?void 0:r.photo_url)||""}});return(t,r)=>{var s,c,i,p,u,d,m,h,f,k;const g=e.resolveComponent("RouterLink");return e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",S,[e.createElementVNode("div",O,[e.createElementVNode("button",{onClick:r[0]||(r[0]=F=>n.value=!n.value),class:"w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"},[e.createVNode(e.unref(V),{class:"w-[24px] h-[24px]"})])]),e.createElementVNode("div",j,[t.logoSrc!=null?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSrc,class:"w-8 h-8 mx-auto",alt:"logo"},null,8,L)):e.createCommentVNode("",!0)]),t.app!=null?(e.openBlock(),e.createBlock(g,{key:0,to:"/",class:"pl-2 max-w-xs"},{default:e.withCtx(()=>[e.createElementVNode("div",q,e.toDisplayString(t.app.name),1),e.createElementVNode("div",$,e.toDisplayString(t.app.workspace),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",M,[e.createElementVNode("div",z,[e.createElementVNode("div",A,[e.renderSlot(t.$slots,"before-header-menu"),t.helpUrl?(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("a",{href:t.helpUrl,target:"_blank",title:"Help",class:"block btn-touch text-gray-dark"},[e.createVNode(e.unref(E),{class:"w-6 h-6 text-gray-600"})],8,I)])):e.createCommentVNode("",!0),e.createVNode(w._sfc_main$3,{workspace:o.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(w._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":(k=t.handlers)==null?void 0:k.onLogout},null,8,["user","account-label","logout-label","on-account","on-logout"])])])])]),e.createElementVNode("div",{class:e.normalizeClass(["sidebar absolute top-[56px] left-0 h-full",[n.value?"w-[60px]":"w-60"]])},[e.createVNode(v,{slim:n.value,items:t.sidebarItems},null,8,["slim","items"])],2),e.createElementVNode("div",P,[e.createElementVNode("div",{class:e.normalizeClass(["content transition-all pt-[56px]",[n.value?"pl-[60px]":"pl-60"]])},[e.renderSlot(t.$slots,"default")],2)])])}}});exports.OneMainLayout=R;exports.OneSidebar=v;

package/dist/layout/index.d.ts

@@ -1,2 +1,3 @@
 export { default as OneSidebar } from './OneSidebar.vue';
 export { default as OneMainLayout } from './OneMainLayout.vue';
+export type { MainLayoutProps } from './layout';

package/dist/layout/index.js

@@ -1,7 +1,7 @@
-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 { defineComponent as m, computed as C, resolveComponent as L, openBlock as l, createBlock as d, normalizeClass as c, withCtx as $, createElementVNode as s, resolveDynamicComponent as N, createCommentVNode as u, toDisplayString as h, createElementBlock as n, Fragment as M, renderList as A, ref as I, watch as R, createVNode as p, unref as O, renderSlot as j } from "vue";
+import { c as z, b as F } from "../OneBrowserMenu.vue_vue_type_script_setup_true_lang-197489be.js";
 import "../common/index.js";
-const C = {
+const B = {
   items: {
     required: !0,
     type: Array
@@ -10,7 +10,7 @@ const C = {
     type: Boolean,
     default: !0
   }
-}, V = {
+}, P = {
   route: {
     required: !1,
     type: [Object, String]
@@ -43,11 +43,14 @@ const C = {
     type: Boolean,
     default: !0
   }
-}, D = {
-  sidebarItems: C.items,
+}, U = {
+  sidebarItems: B.items,
   logoSrc: {
     type: String
   },
+  helpUrl: {
+    type: String
+  },
   app: {
     required: !0,
     type: Object
@@ -62,44 +65,44 @@ const C = {
   handlers: {
     type: Object
   }
-}, E = /* @__PURE__ */ h({
+}, V = /* @__PURE__ */ m({
   __name: "OneSidebarLink",
-  props: V,
-  setup(r) {
-    const o = r, a = O(() => o.route != null ? o.route : o.routeName != null ? { name: o.routeName } : "/");
+  props: P,
+  setup(i) {
+    const o = i, r = C(() => 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"]]),
+      const a = L("RouterLink");
+      return l(), d(a, {
+        to: r.value,
+        class: c(["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(() => [
+        default: $(() => [
           s("div", {
-            class: i(["flex flex-nowrap items-center", [t.slim ? "w-[24px] h-[24px]" : "w-full"]])
+            class: c(["flex flex-nowrap items-center", [t.slim ? "w-[24px] h-[24px]" : "w-full"]])
           }, [
-            t.icon ? (l(), u(B(t.icon), {
+            t.icon ? (l(), d(N(t.icon), {
               key: 0,
               class: "w-[24px] h-[24px] flex-shrink-0"
-            })) : d("", !0),
+            })) : u("", !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)
+              class: c(["whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink", [t.slim ? "w-0" : "pl-1.5 w-full"]])
+            }, h(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({
+}), D = { class: "" }, E = { class: "space-y-2 p-2" }, H = /* @__PURE__ */ m({
   __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, {
+  props: B,
+  setup(i) {
+    return (o, r) => (l(), n("div", D, [
+      s("div", E, [
+        (l(!0), n(M, null, A(o.items, (t) => (l(), d(V, {
           key: t.label,
           icon: t.icon,
           label: t.label,
@@ -112,8 +115,8 @@ const C = {
     ]));
   }
 });
-function J(r, o) {
-  return l(), p("svg", {
+function G(i, o) {
+  return l(), n("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -128,70 +131,100 @@ function J(r, o) {
     })
   ]);
 }
-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({
+function J(i, o) {
+  return l(), n("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: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+    })
+  ]);
+}
+const K = { class: "min-h-screen relative" }, Q = { class: "header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full" }, T = { class: "p-2 flex-shrink-0" }, W = { class: "w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0" }, X = ["src"], Y = { class: "whitespace-nowrap" }, Z = { class: "text-xs whitespace-nowrap" }, ee = { class: "w-full" }, te = { class: "w-full flex justify-end pr-2" }, se = { class: "flex items-center space-x-1" }, oe = {
+  key: 0,
+  class: "sm:block flex-shrink-0 hidden"
+}, le = ["href"], re = { class: "body w-full h-full" }, ce = /* @__PURE__ */ m({
   __name: "OneMainLayout",
-  props: D,
-  setup(r) {
-    const o = r, a = A(window.localStorage.getItem("sidebar-slim") === "1");
-    I(a, (e) => {
+  props: U,
+  setup(i) {
+    const o = i, r = I(window.localStorage.getItem("sidebar-slim") === "1");
+    R(r, (e) => {
       window.localStorage.setItem("sidebar-slim", String(e ? 1 : 0));
     });
-    const t = O(() => {
-      var e, n;
+    const t = C(() => {
+      var e, a;
       return {
         name: ((e = o.app) == null ? void 0 : e.workspace) || "",
-        photo_url: ((n = o.app) == null ? void 0 : n.photo_url) || ""
+        photo_url: ((a = o.app) == null ? void 0 : a.photo_url) || ""
       };
     });
-    return (e, n) => {
-      var f, b, w, v, y, g, x, _, k, S;
+    return (e, a) => {
+      var f, b, w, v, g, y, k, x, _, S;
       const q = L("RouterLink");
-      return l(), p("div", K, [
+      return l(), n("div", K, [
         s("div", Q, [
           s("div", T, [
             s("button", {
-              onClick: n[0] || (n[0] = (oe) => a.value = !a.value),
+              onClick: a[0] || (a[0] = (ae) => r.value = !r.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]" })
+              p(O(G), { class: "w-[24px] h-[24px]" })
             ])
           ]),
-          s("div", U, [
-            e.logoSrc != null ? (l(), p("img", {
+          s("div", W, [
+            e.logoSrc != null ? (l(), n("img", {
               key: 0,
               src: e.logoSrc,
               class: "w-8 h-8 mx-auto",
               alt: "logo"
-            }, null, 8, W)) : d("", !0)
+            }, null, 8, X)) : u("", !0)
           ]),
-          e.app != null ? (l(), u(q, {
+          e.app != null ? (l(), d(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)
+            default: $(() => [
+              s("div", Y, h(e.app.name), 1),
+              s("div", Z, h(e.app.workspace), 1)
             ]),
             _: 1
-          })) : d("", !0),
-          s("div", Z, [
-            s("div", ee, [
-              s("div", te, [
-                c(F, {
+          })) : u("", !0),
+          s("div", ee, [
+            s("div", te, [
+              s("div", se, [
+                j(e.$slots, "before-header-menu"),
+                e.helpUrl ? (l(), n("div", oe, [
+                  s("a", {
+                    href: e.helpUrl,
+                    target: "_blank",
+                    title: "Help",
+                    class: "block btn-touch text-gray-dark"
+                  }, [
+                    p(O(J), { class: "w-6 h-6 text-gray-600" })
+                  ], 8, le)
+                ])) : u("", !0),
+                p(z, {
                   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
+                  "on-change": (g = e.handlers) == null ? void 0 : g.onChange,
+                  onOpen: (y = e.handlers) == null ? void 0 : y.onBrowse
                 }, null, 8, ["workspace", "apps", "change-label", "apps-title", "on-app", "on-change", "onOpen"]),
-                c(P, {
+                p(F, {
                   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,
+                  "account-label": ((k = e.labels) == null ? void 0 : k.account) || "Account",
+                  "logout-label": ((x = e.labels) == null ? void 0 : x.logout) || "Logout",
+                  "on-account": (_ = e.handlers) == null ? void 0 : _.onAccount,
                   "on-logout": (S = e.handlers) == null ? void 0 : S.onLogout
                 }, null, 8, ["user", "account-label", "logout-label", "on-account", "on-logout"])
               ])
@@ -199,18 +232,18 @@ const K = { class: "min-h-screen relative" }, Q = { class: "header h-[56px] flex
           ])
         ]),
         s("div", {
-          class: i(["sidebar transition-all absolute top-[56px] left-0 h-full", [a.value ? "w-[60px]" : "w-60"]])
+          class: c(["sidebar absolute top-[56px] left-0 h-full", [r.value ? "w-[60px]" : "w-60"]])
         }, [
-          c(H, {
-            slim: a.value,
+          p(H, {
+            slim: r.value,
             items: e.sidebarItems
           }, null, 8, ["slim", "items"])
         ], 2),
-        s("div", se, [
+        s("div", re, [
           s("div", {
-            class: i(["content transition-all pt-[56px]", [a.value ? "pl-[60px]" : "pl-60"]])
+            class: c(["content transition-all pt-[56px]", [r.value ? "pl-[60px]" : "pl-60"]])
           }, [
-            R(e.$slots, "default")
+            j(e.$slots, "default")
           ], 2)
         ])
       ]);
@@ -218,6 +251,6 @@ const K = { class: "min-h-screen relative" }, Q = { class: "header h-[56px] flex
   }
 });
 export {
-  re as OneMainLayout,
+  ce as OneMainLayout,
   H as OneSidebar
 };

package/dist/layout/layout.d.ts

@@ -0,0 +1,96 @@
+import type { FunctionalComponent, Component, ExtractPropTypes } from "vue";
+export type SidebarItemType = {
+    label: string;
+    route?: string | Record<string, any>;
+    routeName?: string;
+    exact?: boolean;
+    icon?: FunctionalComponent | Component;
+};
+export declare const sidebarProps: {
+    items: {
+        required: boolean;
+        type: PropType<SidebarItemType[]>;
+    };
+    slim: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare const sidebarLinkProps: {
+    route: {
+        required: boolean;
+        type: PropType<RouteLocationRaw>;
+    };
+    routeName: {
+        required: boolean;
+        type: StringConstructor;
+    };
+    handler: {
+        required: boolean;
+        type: PropType<() => void>;
+        default(): () => void;
+    };
+    label: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    icon: {
+        type: PropType<any>;
+    };
+    exact: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    slim: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare const mainLayoutProps: {
+    sidebarItems: {
+        required: boolean;
+        type: PropType<SidebarItemType[]>;
+    };
+    logoSrc: {
+        type: StringConstructor;
+    };
+    helpUrl: {
+        type: StringConstructor;
+    };
+    app: {
+        required: boolean;
+        type: PropType<{
+            name: string;
+            workspace: string;
+            photo_url: string;
+            apps: Array<any>;
+        }>;
+    };
+    user: {
+        type: PropType<{
+            name: string;
+            email: string;
+            photo_url?: string;
+        }>;
+        required: boolean;
+    };
+    labels: {
+        type: PropType<{
+            apps: string;
+            change: string;
+            account: string;
+            logout: string;
+        }>;
+    };
+    handlers: {
+        type: PropType<{
+            onApp: (e?: any) => void;
+            onChange: (e?: any) => void;
+            onBrowse: (e?: any) => void;
+            onAccount: (e?: any) => void;
+            onLogout: (e?: any) => void;
+        }>;
+    };
+};
+export type MainLayoutProps = ExtractPropTypes<typeof mainLayoutProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneb/ui-vue",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "license": "MIT",
   "files": [