@oneb/ui-vue 0.0.16 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/layout/index.cjs +1 -1
- package/dist/layout/index.js +75 -79
- package/package.json +1 -1
package/dist/layout/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("../OneBrowserMenu.vue_vue_type_script_setup_true_lang-24874222.cjs");require("../common/index.cjs");const w={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:w.items,logoSrc:{type:String},helpUrl:{type:String},app:{required:!0,type:Object},user:{type:Object,required:!0},labels:{type:Object},handlers:{type:Object}},x={class:"flex flex-nowrap items-center transition-all w-full h-[24px]"},N={class:"whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink pl-1.5 w-full"},B=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",x,[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",N,e.toDisplayString(o.label),1)])]),_:1},8,["to","active-class","exact-active-class","exact","class"])}}}),V={class:"space-y-2 p-2"},b=e.defineComponent({__name:"OneSidebar",props:w,setup(a){return(l,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,o=>(e.openBlock(),e.createBlock(B,{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 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:"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"})])}function C(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 S={class:"min-h-screen relative"},O={class:"header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full"},j={class:"p-2 flex-shrink-0"},L={class:"w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0"},q=["src"],$={class:"whitespace-nowrap"},M={class:"text-xs whitespace-nowrap"},z={class:"w-full"},A={class:"w-full flex justify-end pr-2"},D={class:"flex items-center space-x-4"},I={key:0,class:"sm:block flex-shrink-0 hidden"},P=["href"],R={class:"body w-full h-full"},F=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,g;const v=e.resolveComponent("RouterLink");return e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",O,[e.createElementVNode("div",j,[e.createElementVNode("button",{onClick:r[0]||(r[0]=U=>n.value=!n.value),class:"w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"},[e.createVNode(e.unref(E),{class:"w-[24px] h-[24px]"})])]),e.createElementVNode("div",L,[t.logoSrc!=null?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSrc,class:"w-8 h-8 mx-auto",alt:"logo"},null,8,q)):e.createCommentVNode("",!0)]),t.app!=null?(e.openBlock(),e.createBlock(v,{key:0,to:"/",class:"pl-2 max-w-xs"},{default:e.withCtx(()=>[e.createElementVNode("div",$,e.toDisplayString(t.app.name),1),e.createElementVNode("div",M,e.toDisplayString(t.app.workspace),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",z,[e.createElementVNode("div",A,[e.createElementVNode("div",D,[e.renderSlot(t.$slots,"before-header-menu"),t.helpUrl?(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("a",{href:t.helpUrl,target:"_blank",title:"Help",class:"block btn-touch text-gray-dark"},[e.createVNode(e.unref(C),{class:"w-6 h-6 text-gray-600"})],8,P)])):e.createCommentVNode("",!0),e.createVNode(k._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(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":(g=t.handlers)==null?void 0:g.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 overflow-hidden bg-white lg:bg-transparent transition-all",[n.value?"w-0 lg:w-[60px]":"w-full lg:w-60"]])},[e.createVNode(b,{slim:n.value,items:t.sidebarItems},null,8,["slim","items"])],2),e.createElementVNode("div",R,[e.createElementVNode("div",{class:e.normalizeClass(["content transition-all pt-[56px]",[n.value?"pl-0 lg:pl-[60px]":"pl-0 lg:pl-60"]])},[e.renderSlot(t.$slots,"default")],2)])])}}});exports.OneMainLayout=F;exports.OneSidebar=b;
|
package/dist/layout/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as m, computed as C, resolveComponent as L, openBlock as
|
|
1
|
+
import { defineComponent as m, computed as C, resolveComponent as L, openBlock as o, createBlock as u, normalizeClass as d, withCtx as $, createElementVNode as t, resolveDynamicComponent as N, createCommentVNode as c, toDisplayString as h, createElementBlock as a, Fragment as M, renderList as A, ref as I, watch as R, createVNode as p, unref as O, renderSlot as j } from "vue";
|
|
2
2
|
import { c as z, b as F } from "../OneBrowserMenu.vue_vue_type_script_setup_true_lang-197489be.js";
|
|
3
3
|
import "../common/index.js";
|
|
4
4
|
const B = {
|
|
@@ -65,58 +65,54 @@ const B = {
|
|
|
65
65
|
handlers: {
|
|
66
66
|
type: Object
|
|
67
67
|
}
|
|
68
|
-
}, V = /* @__PURE__ */ m({
|
|
68
|
+
}, V = { class: "flex flex-nowrap items-center transition-all w-full h-[24px]" }, D = { class: "whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink pl-1.5 w-full" }, E = /* @__PURE__ */ m({
|
|
69
69
|
__name: "OneSidebarLink",
|
|
70
70
|
props: P,
|
|
71
71
|
setup(i) {
|
|
72
|
-
const
|
|
73
|
-
return (
|
|
74
|
-
const
|
|
75
|
-
return
|
|
72
|
+
const l = i, r = C(() => l.route != null ? l.route : l.routeName != null ? { name: l.routeName } : "/");
|
|
73
|
+
return (s, e) => {
|
|
74
|
+
const n = L("RouterLink");
|
|
75
|
+
return o(), u(n, {
|
|
76
76
|
to: r.value,
|
|
77
|
-
class:
|
|
78
|
-
"active-class":
|
|
79
|
-
"exact-active-class":
|
|
80
|
-
exact:
|
|
77
|
+
class: d(["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", [s.slim ? "w-[44px] h-[44px] justify-center" : "h-[44px] justify-start"]]),
|
|
78
|
+
"active-class": s.exact ? "" : "bg-primary-10 !text-primary-base",
|
|
79
|
+
"exact-active-class": s.exact ? "bg-primary-10 !text-primary-base" : "",
|
|
80
|
+
exact: s.exact
|
|
81
81
|
}, {
|
|
82
82
|
default: $(() => [
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}, [
|
|
86
|
-
t.icon ? (l(), d(N(t.icon), {
|
|
83
|
+
t("div", V, [
|
|
84
|
+
s.icon ? (o(), u(N(s.icon), {
|
|
87
85
|
key: 0,
|
|
88
86
|
class: "w-[24px] h-[24px] flex-shrink-0"
|
|
89
|
-
})) :
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}, h(t.label), 3)
|
|
93
|
-
], 2)
|
|
87
|
+
})) : c("", !0),
|
|
88
|
+
t("div", D, h(s.label), 1)
|
|
89
|
+
])
|
|
94
90
|
]),
|
|
95
91
|
_: 1
|
|
96
92
|
}, 8, ["to", "active-class", "exact-active-class", "exact", "class"]);
|
|
97
93
|
};
|
|
98
94
|
}
|
|
99
|
-
}),
|
|
95
|
+
}), H = { class: "space-y-2 p-2" }, G = /* @__PURE__ */ m({
|
|
100
96
|
__name: "OneSidebar",
|
|
101
97
|
props: B,
|
|
102
98
|
setup(i) {
|
|
103
|
-
return (
|
|
104
|
-
|
|
105
|
-
(
|
|
106
|
-
key:
|
|
107
|
-
icon:
|
|
108
|
-
label:
|
|
109
|
-
route:
|
|
110
|
-
"route-name":
|
|
111
|
-
exact:
|
|
112
|
-
slim:
|
|
99
|
+
return (l, r) => (o(), a("div", null, [
|
|
100
|
+
t("div", H, [
|
|
101
|
+
(o(!0), a(M, null, A(l.items, (s) => (o(), u(E, {
|
|
102
|
+
key: s.label,
|
|
103
|
+
icon: s.icon,
|
|
104
|
+
label: s.label,
|
|
105
|
+
route: s.route,
|
|
106
|
+
"route-name": s.routeName,
|
|
107
|
+
exact: s.exact || !1,
|
|
108
|
+
slim: l.slim
|
|
113
109
|
}, null, 8, ["icon", "label", "route", "route-name", "exact", "slim"]))), 128))
|
|
114
110
|
])
|
|
115
111
|
]));
|
|
116
112
|
}
|
|
117
113
|
});
|
|
118
|
-
function
|
|
119
|
-
return
|
|
114
|
+
function J(i, l) {
|
|
115
|
+
return o(), a("svg", {
|
|
120
116
|
xmlns: "http://www.w3.org/2000/svg",
|
|
121
117
|
fill: "none",
|
|
122
118
|
viewBox: "0 0 24 24",
|
|
@@ -124,15 +120,15 @@ function G(i, o) {
|
|
|
124
120
|
stroke: "currentColor",
|
|
125
121
|
"aria-hidden": "true"
|
|
126
122
|
}, [
|
|
127
|
-
|
|
123
|
+
t("path", {
|
|
128
124
|
"stroke-linecap": "round",
|
|
129
125
|
"stroke-linejoin": "round",
|
|
130
126
|
d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
|
131
127
|
})
|
|
132
128
|
]);
|
|
133
129
|
}
|
|
134
|
-
function
|
|
135
|
-
return
|
|
130
|
+
function K(i, l) {
|
|
131
|
+
return o(), a("svg", {
|
|
136
132
|
xmlns: "http://www.w3.org/2000/svg",
|
|
137
133
|
fill: "none",
|
|
138
134
|
viewBox: "0 0 24 24",
|
|
@@ -140,90 +136,90 @@ function J(i, o) {
|
|
|
140
136
|
stroke: "currentColor",
|
|
141
137
|
"aria-hidden": "true"
|
|
142
138
|
}, [
|
|
143
|
-
|
|
139
|
+
t("path", {
|
|
144
140
|
"stroke-linecap": "round",
|
|
145
141
|
"stroke-linejoin": "round",
|
|
146
142
|
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"
|
|
147
143
|
})
|
|
148
144
|
]);
|
|
149
145
|
}
|
|
150
|
-
const
|
|
146
|
+
const Q = { class: "min-h-screen relative" }, T = { class: "header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full" }, W = { class: "p-2 flex-shrink-0" }, X = { class: "w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0" }, Y = ["src"], Z = { class: "whitespace-nowrap" }, ee = { class: "text-xs whitespace-nowrap" }, te = { class: "w-full" }, se = { class: "w-full flex justify-end pr-2" }, le = { class: "flex items-center space-x-4" }, oe = {
|
|
151
147
|
key: 0,
|
|
152
148
|
class: "sm:block flex-shrink-0 hidden"
|
|
153
|
-
},
|
|
149
|
+
}, re = ["href"], ne = { class: "body w-full h-full" }, ue = /* @__PURE__ */ m({
|
|
154
150
|
__name: "OneMainLayout",
|
|
155
151
|
props: U,
|
|
156
152
|
setup(i) {
|
|
157
|
-
const
|
|
153
|
+
const l = i, r = I(window.localStorage.getItem("sidebar-slim") === "1");
|
|
158
154
|
R(r, (e) => {
|
|
159
155
|
window.localStorage.setItem("sidebar-slim", String(e ? 1 : 0));
|
|
160
156
|
});
|
|
161
|
-
const
|
|
162
|
-
var e,
|
|
157
|
+
const s = C(() => {
|
|
158
|
+
var e, n;
|
|
163
159
|
return {
|
|
164
|
-
name: ((e =
|
|
165
|
-
photo_url: ((
|
|
160
|
+
name: ((e = l.app) == null ? void 0 : e.workspace) || "",
|
|
161
|
+
photo_url: ((n = l.app) == null ? void 0 : n.photo_url) || ""
|
|
166
162
|
};
|
|
167
163
|
});
|
|
168
|
-
return (e,
|
|
169
|
-
var f, b, w,
|
|
164
|
+
return (e, n) => {
|
|
165
|
+
var f, b, w, g, v, y, x, k, _, S;
|
|
170
166
|
const q = L("RouterLink");
|
|
171
|
-
return
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
onClick:
|
|
167
|
+
return o(), a("div", Q, [
|
|
168
|
+
t("div", T, [
|
|
169
|
+
t("div", W, [
|
|
170
|
+
t("button", {
|
|
171
|
+
onClick: n[0] || (n[0] = (ae) => r.value = !r.value),
|
|
176
172
|
class: "w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"
|
|
177
173
|
}, [
|
|
178
|
-
p(O(
|
|
174
|
+
p(O(J), { class: "w-[24px] h-[24px]" })
|
|
179
175
|
])
|
|
180
176
|
]),
|
|
181
|
-
|
|
182
|
-
e.logoSrc != null ? (
|
|
177
|
+
t("div", X, [
|
|
178
|
+
e.logoSrc != null ? (o(), a("img", {
|
|
183
179
|
key: 0,
|
|
184
180
|
src: e.logoSrc,
|
|
185
181
|
class: "w-8 h-8 mx-auto",
|
|
186
182
|
alt: "logo"
|
|
187
|
-
}, null, 8,
|
|
183
|
+
}, null, 8, Y)) : c("", !0)
|
|
188
184
|
]),
|
|
189
|
-
e.app != null ? (
|
|
185
|
+
e.app != null ? (o(), u(q, {
|
|
190
186
|
key: 0,
|
|
191
187
|
to: "/",
|
|
192
188
|
class: "pl-2 max-w-xs"
|
|
193
189
|
}, {
|
|
194
190
|
default: $(() => [
|
|
195
|
-
|
|
196
|
-
|
|
191
|
+
t("div", Z, h(e.app.name), 1),
|
|
192
|
+
t("div", ee, h(e.app.workspace), 1)
|
|
197
193
|
]),
|
|
198
194
|
_: 1
|
|
199
|
-
})) :
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
195
|
+
})) : c("", !0),
|
|
196
|
+
t("div", te, [
|
|
197
|
+
t("div", se, [
|
|
198
|
+
t("div", le, [
|
|
203
199
|
j(e.$slots, "before-header-menu"),
|
|
204
|
-
e.helpUrl ? (
|
|
205
|
-
|
|
200
|
+
e.helpUrl ? (o(), a("div", oe, [
|
|
201
|
+
t("a", {
|
|
206
202
|
href: e.helpUrl,
|
|
207
203
|
target: "_blank",
|
|
208
204
|
title: "Help",
|
|
209
205
|
class: "block btn-touch text-gray-dark"
|
|
210
206
|
}, [
|
|
211
|
-
p(O(
|
|
212
|
-
], 8,
|
|
213
|
-
])) :
|
|
207
|
+
p(O(K), { class: "w-6 h-6 text-gray-600" })
|
|
208
|
+
], 8, re)
|
|
209
|
+
])) : c("", !0),
|
|
214
210
|
p(z, {
|
|
215
|
-
workspace:
|
|
211
|
+
workspace: s.value,
|
|
216
212
|
apps: ((f = e.app) == null ? void 0 : f.apps) || [],
|
|
217
213
|
"change-label": ((b = e.labels) == null ? void 0 : b.change) || "Change",
|
|
218
214
|
"apps-title": ((w = e.labels) == null ? void 0 : w.apps) || "Apps",
|
|
219
|
-
"on-app": (
|
|
220
|
-
"on-change": (
|
|
215
|
+
"on-app": (g = e.handlers) == null ? void 0 : g.onApp,
|
|
216
|
+
"on-change": (v = e.handlers) == null ? void 0 : v.onChange,
|
|
221
217
|
onOpen: (y = e.handlers) == null ? void 0 : y.onBrowse
|
|
222
218
|
}, null, 8, ["workspace", "apps", "change-label", "apps-title", "on-app", "on-change", "onOpen"]),
|
|
223
219
|
p(F, {
|
|
224
220
|
user: e.user,
|
|
225
|
-
"account-label": ((
|
|
226
|
-
"logout-label": ((
|
|
221
|
+
"account-label": ((x = e.labels) == null ? void 0 : x.account) || "Account",
|
|
222
|
+
"logout-label": ((k = e.labels) == null ? void 0 : k.logout) || "Logout",
|
|
227
223
|
"on-account": (_ = e.handlers) == null ? void 0 : _.onAccount,
|
|
228
224
|
"on-logout": (S = e.handlers) == null ? void 0 : S.onLogout
|
|
229
225
|
}, null, 8, ["user", "account-label", "logout-label", "on-account", "on-logout"])
|
|
@@ -231,17 +227,17 @@ const K = { class: "min-h-screen relative" }, Q = { class: "header h-[56px] flex
|
|
|
231
227
|
])
|
|
232
228
|
])
|
|
233
229
|
]),
|
|
234
|
-
|
|
235
|
-
class:
|
|
230
|
+
t("div", {
|
|
231
|
+
class: d(["sidebar absolute top-[56px] left-0 h-full overflow-hidden bg-white lg:bg-transparent transition-all", [r.value ? "w-0 lg:w-[60px]" : "w-full lg:w-60"]])
|
|
236
232
|
}, [
|
|
237
|
-
p(
|
|
233
|
+
p(G, {
|
|
238
234
|
slim: r.value,
|
|
239
235
|
items: e.sidebarItems
|
|
240
236
|
}, null, 8, ["slim", "items"])
|
|
241
237
|
], 2),
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
class:
|
|
238
|
+
t("div", ne, [
|
|
239
|
+
t("div", {
|
|
240
|
+
class: d(["content transition-all pt-[56px]", [r.value ? "pl-0 lg:pl-[60px]" : "pl-0 lg:pl-60"]])
|
|
245
241
|
}, [
|
|
246
242
|
j(e.$slots, "default")
|
|
247
243
|
], 2)
|
|
@@ -251,6 +247,6 @@ const K = { class: "min-h-screen relative" }, Q = { class: "header h-[56px] flex
|
|
|
251
247
|
}
|
|
252
248
|
});
|
|
253
249
|
export {
|
|
254
|
-
|
|
255
|
-
|
|
250
|
+
ue as OneMainLayout,
|
|
251
|
+
G as OneSidebar
|
|
256
252
|
};
|