@oneb/ui-vue 0.0.5 → 0.0.6

package/README.md

@@ -19,27 +19,30 @@
 </template>
 
 <script setup>
-import { OneButton, OneLink, OneCard, OneCardHeader, OneCardBody } from 'onebui-vue'
+import { OneButton, OneLink, OneCard, OneCardHeader, OneCardBody } from '@oneb/ui-vue'
 </script>
 ```
 
 ## Setup
 
 ### 1. src/assets/mains.css
-add line: `@import 'onebui-vue/styles.css';`
+add line: `@import '@oneb/ui-vue/style.css';`
 add line: `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');`
 
 ### 2. tailwind.config.cjs
 
 1. Import config `const onebui = require('onebui-vue/tailwind.config')`
-2. Add `'onebui-vue/dist/**/*.{vue,js,ts,jsx,tsx}'` to `content`
+2. Add `'./node_modules/@oneb/ui-vue/dist/**/*.{vue,js,ts,jsx,tsx}'` to `content`
 3. Extend config
 
 ```
 const onebui = require('onebui-vue/tailwind.config')
 
 module.exports = {
-   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'onebui-vue/dist/**/*.{vue,js,ts,jsx,tsx}'],
+   content: [
+        ..., 
+        "./node_modules/@oneb/ui-vue/dist/**/*.{vue,js,ts,jsx,tsx}"
+   ],
    theme: onebui.theme,
    plugins: [require('@tailwindcss/forms')]
 }

package/dist/dropdown/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-26c86446.cjs");require("vue");require("../_plugin-vue_export-helper-f246444f.cjs");exports.OneBrowserMenu=e._sfc_main$3;exports.OneDropdown=e._sfc_main;exports.OneDropdownDivider=e.OneDropdownDivider;exports.OneDropdownItem=e._sfc_main$1;exports.OneUserMenu=e._sfc_main$2;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-3196cf32.cjs");require("vue");require("../_plugin-vue_export-helper-f246444f.cjs");exports.OneBrowserMenu=e._sfc_main$3;exports.OneDropdown=e._sfc_main;exports.OneDropdownDivider=e.OneDropdownDivider;exports.OneDropdownItem=e._sfc_main$1;exports.OneUserMenu=e._sfc_main$2;

package/dist/dropdown/index.js

@@ -1,4 +1,4 @@
-import { c as s, _ as a, O as p, a as O, b as d } from "../index-6f93552a.js";
+import { c as s, _ as a, O as p, a as O, b as d } from "../index-6423ecce.js";
 import "vue";
 import "../_plugin-vue_export-helper-dad06003.js";
 export {

package/dist/dropdown/menu.d.ts

@@ -16,6 +16,10 @@ export declare const userMenuProps: {
         }[]>;
         default: () => any[];
     };
+    iconSize: {
+        type: StringConstructor;
+        default: string;
+    };
     accountLabel: {
         type: StringConstructor;
         default: string;
@@ -48,6 +52,10 @@ export declare const browserMenuProps: {
         }[]>;
         required: boolean;
     };
+    iconSize: {
+        type: StringConstructor;
+        default: string;
+    };
     appsTitle: {
         type: StringConstructor;
         default: string;

package/dist/index-3196cf32.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),f=require("./_plugin-vue_export-helper-f246444f.cjs"),g={title:{type:String},stick:{type:String,default:"right"}},k={variant:{type:String,default:"primary"},label:{type:String},icon:{type:[Function,Object]}},y=["data-opened"],v={key:0,class:"text-sm text-secondary-content px-3 py-2 text-left"},h=e.defineComponent({__name:"OneDropdown",props:g,emits:["open"],setup(d,{emit:o}){const a=d,c=e.ref(!1),r=e.ref(null),l=()=>{c.value=!c.value,c.value&&o("open")};e.provide("OneDropdown",{onToggle:l});const t=e.computed(()=>{const n=r.value!=null&&r.value.offsetLeft<270;return r.value!=null&&r.value.offsetTop+270>window.innerHeight?"up"+(n?"-right":"-left"):"down"+(n?"-right":"-left")}),s=e.computed(()=>{const n=["absolute z-10 w-fit rounded-md bg-white","py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none","overflow-auto max-h-[540px] min-w-[150px] max-w-[540px]"];return t.value==="up"?n.push("bottom-1 mb-10"):t.value==="down"?n.push("top-1 mt-10"):t.value==="up-right"?n.push("left-0 bottom-1 mb-10"):t.value==="down-right"&&n.push("left-0 top-1 mt-10"),a.stick==="right"?n.push("right-0"):a.stick==="left"&&n.push("left-0"),n});return(n,i)=>(e.openBlock(),e.createElementBlock("div",{class:"relative inline-block",ref_key:"menuRef",ref:r,"data-opened":c.value},[e.renderSlot(n.$slots,"button",e.normalizeProps(e.guardReactiveProps({onToggle:l,isExpanded:c.value}))),c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fixed top-0 left-0 w-screen h-screen z-10",onClick:l})):e.createCommentVNode("",!0),e.createVNode(e.Transition,{"enter-active-class":"transition ease-out duration-100","enter-from-class":"transform opacity-0 scale-95","enter-to-class":"transform opacity-100 scale-100","leave-active-class":"transition ease-in duration-75","leave-from-class":"transform opacity-100 scale-100","leave-to-class":"transform opacity-0 scale-95"},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["menu",s.value]),role:"menu","aria-orientation":"vertical",tabindex:"-1"},[n.title?(e.openBlock(),e.createElementBlock("div",v,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"menu",e.normalizeProps(e.guardReactiveProps({onToggle:l})))],2)):e.createCommentVNode("",!0)]),_:3})],8,y))}}),x=["onClick"],m=e.defineComponent({__name:"OneDropdownItem",props:k,emits:["click"],setup(d,{emit:o}){const a=d,c=e.inject("OneDropdown"),r=()=>{c!==void 0&&c.onToggle(),o("click")},l=e.computed(()=>{const t=[];return a.variant==="secondary"?t.push("text-secondary-content hover:bg-secondary-body-hover"):a.variant==="danger"?t.push("text-danger-content hover:bg-danger-10"):a.variant==="warning"?t.push("text-warning-content hover:bg-warning-10"):a.variant==="info"?t.push("text-info-content hover:bg-info-10"):t.push("hover:bg-secondary-body-hover"),t});return(t,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["px-3 py-1.5 flex items-center space-x-3 w-full whitespace-nowrap",l.value]),onClick:e.withModifiers(r,["prevent"])},[t.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:0,class:"w-4 h-4"})):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.label),1)],10,x))}}),w={},_={class:"border-t border-secondary-stroke my-1"};function b(d,o){return e.openBlock(),e.createElementBlock("div",_)}const C=f._export_sfc(w,[["render",b]]),E={size:{type:[String,Number],default:"50"},rounded:{type:Boolean,default:!1},text:{type:String,required:!1,default:""},src:{type:[String,null],required:!1}},V=["src"],p=e.defineComponent({__name:"OneAvatar",props:E,setup(d){const o=d,a=e.computed(()=>{const t=o.text.trim().split(" ");return t.length<2?o.text.slice(0,2).toUpperCase():t.map(s=>s.slice(0,1)).join("").toUpperCase()}),c=e.computed(()=>({fill:"rgba(255, 255, 255, .75)",fontSize:`${Number(o.size)*.4}px`})),r=e.computed(()=>{const t=o.text.split("").map(i=>i.charCodeAt(0)).reduce((i,u)=>i+u,0),n=`hsl(${360/26*t}, 68%, 48%)`;return{width:`${o.size}px`,height:`${o.size}px`,borderRadius:o.rounded?"100%":"9%",background:n}}),l=e.computed(()=>({width:`${o.size}px`,height:`${o.size}px`,borderRadius:o.rounded?"100%":"9%"}));return(t,s)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(l.value),class:"overflow-hidden"},[t.src?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.src,alt:"",class:"w-full h-full"},null,8,V)):(e.openBlock(),e.createElementBlock("svg",{key:1,style:e.normalizeStyle(r.value),class:"block"},[a.value?(e.openBlock(),e.createElementBlock("text",{key:0,x:"50%",y:"50%","text-anchor":"middle","dominant-baseline":"central",class:"font-light",style:e.normalizeStyle(c.value)},e.toDisplayString(a.value),5)):e.createCommentVNode("",!0)],4))],4))}});function B(d,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:"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"})])}function N(d,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:"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"})])}const S={user:{type:Object,required:!0},menu:{type:Array,default:()=>[]},iconSize:{type:String,default:"34"},accountLabel:{type:String,default:"Account"},logoutLabel:{type:String,default:"Logout"},onAccount:{type:Function},onLogout:{type:Function}},z={workspace:{type:Object,required:!0},apps:{type:Array,required:!0},iconSize:{type:String,default:"18"},appsTitle:{type:String,default:"Apps"},changeLabel:{type:String,default:"Change"},onChange:{type:Function},onApp:{type:Function}},$=["onClick"],D={class:"space-y-2 text-center py-6",style:{width:"240px"}},A={class:"text-sm text-secondary-content"},L={class:"px-2"},O=e.defineComponent({__name:"OneUserMenu",props:S,setup(d){const o=d,a=e.computed(()=>{var l;return(l=o.menu)==null?void 0:l.map(t=>{let s={label:t.label};t.icon!=null&&(s={...s,icon:t.icon});const n=typeof t.click=="function"?t.click:()=>{};return{key:t.label,args:s,click:n}})}),c=()=>{typeof o.onAccount=="function"&&o.onAccount()},r=()=>{typeof o.onLogout=="function"&&o.onLogout()};return(l,t)=>(e.openBlock(),e.createBlock(h,{stick:"right"},{button:e.withCtx(({onToggle:s,isExpanded:n})=>{var i,u;return[e.createElementVNode("button",{onClick:s,class:e.normalizeClass(["p-1 rounded-full hover:bg-secondary-10",[n?"bg-secondary-25":""]])},[e.createVNode(p,{text:((i=l.user)==null?void 0:i.name)||"",size:l.iconSize,src:(u=l.user)==null?void 0:u.photo_url,rounded:!0},null,8,["text","size","src"])],10,$)]}),menu:e.withCtx(()=>{var s,n,i;return[e.createElementVNode("div",D,[e.createElementVNode("div",null,[e.createVNode(p,{text:((s=l.user)==null?void 0:s.name)||"",size:80,rounded:!0,class:"mx-auto"},null,8,["text"])]),e.createElementVNode("div",null,[e.createElementVNode("div",null,e.toDisplayString((n=l.user)==null?void 0:n.name),1),e.createElementVNode("div",A,e.toDisplayString((i=l.user)==null?void 0:i.email),1)])]),e.createElementVNode("div",L,[e.createVNode(m,{icon:e.unref(B),label:l.accountLabel,class:"rounded",onClick:c},null,8,["icon","label"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,u=>(e.openBlock(),e.createBlock(m,e.mergeProps({key:u.key},u.args,{onClick:u.click}),null,16,["onClick"]))),128)),e.createVNode(m,{icon:e.unref(N),label:l.logoutLabel,class:"rounded",onClick:r},null,8,["icon","label"])])]}),_:1}))}});function P(d,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("rect",{width:"2.94",height:"2.94",x:"17.16",y:"3.9",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"10.53",y:"3.9",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"3.9",y:"3.9",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"17.16",y:"10.53",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"10.53",y:"10.53",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"3.9",y:"10.53",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"17.16",y:"17.16",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"10.53",y:"17.16",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"3.9",y:"17.16",fill:"currentColor","stroke-width":"1.8",rx:"1.1"})])}const j=["onClick"],M={class:"space-x-2 flex items-center px-3 py-2",style:{width:"300px"}},q={class:"flex-shrink-0"},F={class:"w-full text-left"},R={class:"flex-shrink-0"},T={class:"px-3 py-2 border-t border-secondary-stroke"},H={class:"text-secondary-content text-left pb-1 text-sm"},I={class:"grid grid-cols-3 gap-1"},U=["onClick"],G={class:"block bg-white mx-auto flex-shrink-0 border border-secondary-stroke p-1 rounded-lg"},J={class:"w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm mt-1"},K=e.defineComponent({__name:"OneBrowserMenu",props:z,setup(d){const o=d,a=()=>{typeof o.onChange=="function"&&o.onChange()},c=r=>{typeof o.onApp=="function"&&o.onApp(r)};return(r,l)=>(e.openBlock(),e.createBlock(h,{stick:"right"},{button:e.withCtx(({onToggle:t,isExpanded:s})=>[e.createElementVNode("button",{onClick:t,class:e.normalizeClass(["p-1 rounded-md hover:bg-secondary-10",[s?"bg-secondary-25":""]])},[e.createVNode(e.unref(P),{class:"text-secondary-base",style:e.normalizeStyle(`width: ${r.iconSize}px; height: ${r.iconSize}px`)},null,8,["style"])],10,j)]),menu:e.withCtx(()=>{var t,s,n;return[e.createElementVNode("div",M,[e.createElementVNode("div",q,[e.createVNode(p,{text:((t=r.workspace)==null?void 0:t.name)||"",src:(s=r.workspace)==null?void 0:s.photo_url,size:44,rounded:!1,class:"mx-auto"},null,8,["text","src"])]),e.createElementVNode("div",F,e.toDisplayString((n=r.workspace)==null?void 0:n.name),1),e.createElementVNode("div",R,[e.createElementVNode("button",{class:"text-sm border border-secondary-stroke rounded px-2 py-0.5 text-secondary-content hover:text-primary-content",onClick:a},e.toDisplayString(r.changeLabel),1)])]),e.createElementVNode("div",T,[e.createElementVNode("div",H,e.toDisplayString(r.appsTitle),1),e.createElementVNode("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.apps,i=>(e.openBlock(),e.createElementBlock("button",{key:i.id,onClick:u=>c(i),class:"p-1.5 flex flex-col items-center justify-center rounded hover:bg-secondary-10",style:{width:"88px",height:"88px"}},[e.createElementVNode("span",G,[e.createVNode(p,{text:i.name,src:i.photo_url,size:44,rounded:!1},null,8,["text","src"])]),e.createElementVNode("span",J,e.toDisplayString(i.name),1)],8,U))),128))])])]}),_:1}))}});exports.OneDropdownDivider=C;exports._sfc_main=h;exports._sfc_main$1=m;exports._sfc_main$2=O;exports._sfc_main$3=K;exports._sfc_main$4=p;

package/dist/{index-6f93552a.js → index-6423ecce.js}

@@ -1,4 +1,4 @@
-import { defineComponent as v, ref as z, provide as D, computed as g, openBlock as i, createElementBlock as u, renderSlot as S, normalizeProps as A, guardReactiveProps as L, createCommentVNode as m, createVNode as y, Transition as M, withCtx as x, normalizeClass as _, toDisplayString as f, inject as P, withModifiers as F, createBlock as w, resolveDynamicComponent as T, createElementVNode as t, normalizeStyle as b, unref as $, Fragment as O, renderList as j, mergeProps as q } from "vue";
+import { defineComponent as x, ref as S, provide as D, computed as g, openBlock as l, createElementBlock as u, renderSlot as z, normalizeProps as A, guardReactiveProps as L, createCommentVNode as m, createVNode as y, Transition as M, withCtx as v, normalizeClass as _, toDisplayString as f, inject as P, withModifiers as F, createBlock as k, resolveDynamicComponent as T, createElementVNode as t, normalizeStyle as w, unref as $, Fragment as O, renderList as j, mergeProps as q } from "vue";
 import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
 const R = {
   title: {
@@ -22,12 +22,12 @@ const R = {
 }, E = ["data-opened"], H = {
   key: 0,
   class: "text-sm text-secondary-content px-3 py-2 text-left"
-}, B = /* @__PURE__ */ v({
+}, B = /* @__PURE__ */ x({
   __name: "OneDropdown",
   props: R,
   emits: ["open"],
   setup(p, { emit: n }) {
-    const d = p, c = z(!1), r = z(null), s = () => {
+    const d = p, c = S(!1), r = S(null), s = () => {
       c.value = !c.value, c.value && n("open");
     };
     D("OneDropdown", {
@@ -36,7 +36,7 @@ const R = {
     const e = g(() => {
       const o = r.value != null && r.value.offsetLeft < 270;
       return r.value != null && r.value.offsetTop + 270 > window.innerHeight ? "up" + (o ? "-right" : "-left") : "down" + (o ? "-right" : "-left");
-    }), l = g(() => {
+    }), i = g(() => {
       const o = [
         "absolute z-10 w-fit rounded-md bg-white",
         "py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
@@ -44,14 +44,14 @@ const R = {
       ];
       return e.value === "up" ? o.push("bottom-1 mb-10") : e.value === "down" ? o.push("top-1 mt-10") : e.value === "up-right" ? o.push("left-0 bottom-1 mb-10") : e.value === "down-right" && o.push("left-0 top-1 mt-10"), d.stick === "right" ? o.push("right-0") : d.stick === "left" && o.push("left-0"), o;
     });
-    return (o, a) => (i(), u("div", {
+    return (o, a) => (l(), u("div", {
       class: "relative inline-block",
       ref_key: "menuRef",
       ref: r,
       "data-opened": c.value
     }, [
-      S(o.$slots, "button", A(L({ onToggle: s, isExpanded: c.value }))),
-      c.value ? (i(), u("div", {
+      z(o.$slots, "button", A(L({ onToggle: s, isExpanded: c.value }))),
+      c.value ? (l(), u("div", {
         key: 0,
         class: "fixed top-0 left-0 w-screen h-screen z-10",
         onClick: s
@@ -64,23 +64,23 @@ const R = {
         "leave-from-class": "transform opacity-100 scale-100",
         "leave-to-class": "transform opacity-0 scale-95"
       }, {
-        default: x(() => [
-          c.value ? (i(), u("div", {
+        default: v(() => [
+          c.value ? (l(), u("div", {
             key: 0,
-            class: _(["menu", l.value]),
+            class: _(["menu", i.value]),
             role: "menu",
             "aria-orientation": "vertical",
             tabindex: "-1"
           }, [
-            o.title ? (i(), u("div", H, f(o.title), 1)) : m("", !0),
-            S(o.$slots, "menu", A(L({ onToggle: s })))
+            o.title ? (l(), u("div", H, f(o.title), 1)) : m("", !0),
+            z(o.$slots, "menu", A(L({ onToggle: s })))
           ], 2)) : m("", !0)
         ]),
         _: 3
       })
     ], 8, E));
   }
-}), I = ["onClick"], C = /* @__PURE__ */ v({
+}), I = ["onClick"], C = /* @__PURE__ */ x({
   __name: "OneDropdownItem",
   props: V,
   emits: ["click"],
@@ -91,11 +91,11 @@ const R = {
       const e = [];
       return d.variant === "secondary" ? e.push("text-secondary-content hover:bg-secondary-body-hover") : d.variant === "danger" ? e.push("text-danger-content hover:bg-danger-10") : d.variant === "warning" ? e.push("text-warning-content hover:bg-warning-10") : d.variant === "info" ? e.push("text-info-content hover:bg-info-10") : e.push("hover:bg-secondary-body-hover"), e;
     });
-    return (e, l) => (i(), u("button", {
+    return (e, i) => (l(), u("button", {
       class: _(["px-3 py-1.5 flex items-center space-x-3 w-full whitespace-nowrap", s.value]),
       onClick: F(r, ["prevent"])
     }, [
-      e.icon ? (i(), w(T(e.icon), {
+      e.icon ? (l(), k(T(e.icon), {
         key: 0,
         class: "w-4 h-4"
       })) : m("", !0),
@@ -104,9 +104,9 @@ const R = {
   }
 }), U = {}, G = { class: "border-t border-secondary-stroke my-1" };
 function J(p, n) {
-  return i(), u("div", G);
+  return l(), u("div", G);
 }
-const xe = /* @__PURE__ */ N(U, [["render", J]]), K = {
+const ve = /* @__PURE__ */ N(U, [["render", J]]), K = {
   size: {
     type: [String, Number],
     default: "50"
@@ -124,13 +124,13 @@ const xe = /* @__PURE__ */ N(U, [["render", J]]), K = {
     type: [String, null],
     required: !1
   }
-}, Q = ["src"], k = /* @__PURE__ */ v({
+}, Q = ["src"], b = /* @__PURE__ */ x({
   __name: "OneAvatar",
   props: K,
   setup(p) {
     const n = p, d = g(() => {
       const e = n.text.trim().split(" ");
-      return e.length < 2 ? n.text.slice(0, 2).toUpperCase() : e.map((l) => l.slice(0, 1)).join("").toUpperCase();
+      return e.length < 2 ? n.text.slice(0, 2).toUpperCase() : e.map((i) => i.slice(0, 1)).join("").toUpperCase();
     }), c = g(() => ({
       fill: "rgba(255, 255, 255, .75)",
       fontSize: `${Number(n.size) * 0.4}px`
@@ -147,35 +147,35 @@ const xe = /* @__PURE__ */ N(U, [["render", J]]), K = {
       height: `${n.size}px`,
       borderRadius: n.rounded ? "100%" : "9%"
     }));
-    return (e, l) => (i(), u("div", {
-      style: b(s.value),
+    return (e, i) => (l(), u("div", {
+      style: w(s.value),
       class: "overflow-hidden"
     }, [
-      e.src ? (i(), u("img", {
+      e.src ? (l(), u("img", {
         key: 0,
         src: e.src,
         alt: "",
         class: "w-full h-full"
-      }, null, 8, Q)) : (i(), u("svg", {
+      }, null, 8, Q)) : (l(), u("svg", {
         key: 1,
-        style: b(r.value),
+        style: w(r.value),
         class: "block"
       }, [
-        d.value ? (i(), u("text", {
+        d.value ? (l(), u("text", {
           key: 0,
           x: "50%",
           y: "50%",
           "text-anchor": "middle",
           "dominant-baseline": "central",
           class: "font-light",
-          style: b(c.value)
+          style: w(c.value)
         }, f(d.value), 5)) : m("", !0)
       ], 4))
     ], 4));
   }
 });
 function W(p, n) {
-  return i(), u("svg", {
+  return l(), u("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -191,7 +191,7 @@ function W(p, n) {
   ]);
 }
 function X(p, n) {
-  return i(), u("svg", {
+  return l(), u("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -215,6 +215,10 @@ const Y = {
     type: Array,
     default: () => []
   },
+  iconSize: {
+    type: String,
+    default: "34"
+  },
   accountLabel: {
     type: String,
     default: "Account"
@@ -238,6 +242,10 @@ const Y = {
     type: Array,
     required: !0
   },
+  iconSize: {
+    type: String,
+    default: "18"
+  },
   appsTitle: {
     type: String,
     default: "Apps"
@@ -255,20 +263,20 @@ const Y = {
 }, ee = ["onClick"], te = {
   class: "space-y-2 text-center py-6",
   style: { width: "240px" }
-}, ne = { class: "text-sm text-secondary-content" }, oe = { class: "px-2" }, ve = /* @__PURE__ */ v({
+}, ne = { class: "text-sm text-secondary-content" }, oe = { class: "px-2" }, xe = /* @__PURE__ */ x({
   __name: "OneUserMenu",
   props: Y,
   setup(p) {
     const n = p, d = g(() => {
       var s;
       return (s = n.menu) == null ? void 0 : s.map((e) => {
-        let l = { label: e.label };
-        e.icon != null && (l = { ...l, icon: e.icon });
+        let i = { label: e.label };
+        e.icon != null && (i = { ...i, icon: e.icon });
         const o = typeof e.click == "function" ? e.click : () => {
         };
         return {
           key: e.label,
-          args: l,
+          args: i,
           click: o
         };
       });
@@ -277,30 +285,30 @@ const Y = {
     }, r = () => {
       typeof n.onLogout == "function" && n.onLogout();
     };
-    return (s, e) => (i(), w(B, { stick: "right" }, {
-      button: x(({ onToggle: l, isExpanded: o }) => {
+    return (s, e) => (l(), k(B, { stick: "right" }, {
+      button: v(({ onToggle: i, isExpanded: o }) => {
         var a, h;
         return [
           t("button", {
-            onClick: l,
+            onClick: i,
             class: _(["p-1 rounded-full hover:bg-secondary-10", [o ? "bg-secondary-25" : ""]])
           }, [
-            y(k, {
+            y(b, {
               text: ((a = s.user) == null ? void 0 : a.name) || "",
-              size: 34,
+              size: s.iconSize,
               src: (h = s.user) == null ? void 0 : h.photo_url,
               rounded: !0
-            }, null, 8, ["text", "src"])
+            }, null, 8, ["text", "size", "src"])
           ], 10, ee)
         ];
       }),
-      menu: x(() => {
-        var l, o, a;
+      menu: v(() => {
+        var i, o, a;
         return [
           t("div", te, [
             t("div", null, [
-              y(k, {
-                text: ((l = s.user) == null ? void 0 : l.name) || "",
+              y(b, {
+                text: ((i = s.user) == null ? void 0 : i.name) || "",
                 size: 80,
                 rounded: !0,
                 class: "mx-auto"
@@ -318,7 +326,7 @@ const Y = {
               class: "rounded",
               onClick: c
             }, null, 8, ["icon", "label"]),
-            (i(!0), u(O, null, j(d.value, (h) => (i(), w(C, q({
+            (l(!0), u(O, null, j(d.value, (h) => (l(), k(C, q({
               key: h.key
             }, h.args, {
               onClick: h.click
@@ -337,7 +345,7 @@ const Y = {
   }
 });
 function re(p, n) {
-  return i(), u("svg", {
+  return l(), u("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -428,10 +436,10 @@ function re(p, n) {
     })
   ]);
 }
-const se = ["onClick"], le = {
+const se = ["onClick"], ie = {
   class: "space-x-2 flex items-center px-3 py-2",
   style: { width: "300px" }
-}, ie = { class: "flex-shrink-0" }, ce = { class: "w-full text-left" }, ae = { class: "flex-shrink-0" }, ue = { class: "px-3 py-2 border-t border-secondary-stroke" }, de = { class: "text-secondary-content text-left pb-1 text-sm" }, pe = { class: "grid grid-cols-3 gap-1" }, he = ["onClick"], fe = { class: "block bg-white mx-auto flex-shrink-0 border border-secondary-stroke p-1 rounded-lg" }, ge = { class: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm mt-1" }, we = /* @__PURE__ */ v({
+}, le = { class: "flex-shrink-0" }, ce = { class: "w-full text-left" }, ae = { class: "flex-shrink-0" }, ue = { class: "px-3 py-2 border-t border-secondary-stroke" }, de = { class: "text-secondary-content text-left pb-1 text-sm" }, pe = { class: "grid grid-cols-3 gap-1" }, he = ["onClick"], fe = { class: "block bg-white mx-auto flex-shrink-0 border border-secondary-stroke p-1 rounded-lg" }, ge = { class: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm mt-1" }, we = /* @__PURE__ */ x({
   __name: "OneBrowserMenu",
   props: Z,
   setup(p) {
@@ -440,26 +448,26 @@ const se = ["onClick"], le = {
     }, c = (r) => {
       typeof n.onApp == "function" && n.onApp(r);
     };
-    return (r, s) => (i(), w(B, { stick: "right" }, {
-      button: x(({ onToggle: e, isExpanded: l }) => [
+    return (r, s) => (l(), k(B, { stick: "right" }, {
+      button: v(({ onToggle: e, isExpanded: i }) => [
         t("button", {
           onClick: e,
-          class: _(["p-1 rounded-md hover:bg-secondary-10", [l ? "bg-secondary-25" : ""]])
+          class: _(["p-1 rounded-md hover:bg-secondary-10", [i ? "bg-secondary-25" : ""]])
         }, [
           y($(re), {
             class: "text-secondary-base",
-            style: { width: "34px", height: "34px" }
-          })
+            style: w(`width: ${r.iconSize}px; height: ${r.iconSize}px`)
+          }, null, 8, ["style"])
         ], 10, se)
       ]),
-      menu: x(() => {
-        var e, l, o;
+      menu: v(() => {
+        var e, i, o;
         return [
-          t("div", le, [
-            t("div", ie, [
-              y(k, {
+          t("div", ie, [
+            t("div", le, [
+              y(b, {
                 text: ((e = r.workspace) == null ? void 0 : e.name) || "",
-                src: (l = r.workspace) == null ? void 0 : l.photo_url,
+                src: (i = r.workspace) == null ? void 0 : i.photo_url,
                 size: 44,
                 rounded: !1,
                 class: "mx-auto"
@@ -476,14 +484,14 @@ const se = ["onClick"], le = {
           t("div", ue, [
             t("div", de, f(r.appsTitle), 1),
             t("div", pe, [
-              (i(!0), u(O, null, j(r.apps, (a) => (i(), u("button", {
+              (l(!0), u(O, null, j(r.apps, (a) => (l(), u("button", {
                 key: a.id,
                 onClick: (h) => c(a),
                 class: "p-1.5 flex flex-col items-center justify-center rounded hover:bg-secondary-10",
                 style: { width: "88px", height: "88px" }
               }, [
                 t("span", fe, [
-                  y(k, {
+                  y(b, {
                     text: a.name,
                     src: a.photo_url,
                     size: 44,
@@ -501,10 +509,10 @@ const se = ["onClick"], le = {
   }
 });
 export {
-  xe as O,
+  ve as O,
   B as _,
   C as a,
-  ve as b,
+  xe as b,
   we as c,
-  k as d
+  b as d
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./button/index.cjs"),n=require("./card/index.cjs"),r=require("./form/index.cjs"),e=require("./index-26c86446.cjs");require("vue");require("./_plugin-vue_export-helper-f246444f.cjs");exports.OneButton=o.OneButton;exports.OneCard=n.OneCard;exports.OneCardBody=n.OneCardBody;exports.OneCardFooter=n.OneCardFooter;exports.OneCardHeader=n.OneCardHeader;exports.OneForm=r.OneForm;exports.OneFormFeedback=r.OneFormFeedback;exports.OneFormField=r.OneFormField;exports.OneFormInput=r.OneFormInput;exports.OneFormLabel=r.OneFormLabel;exports.OneAvatar=e._sfc_main$4;exports.OneBrowserMenu=e._sfc_main$3;exports.OneDropdown=e._sfc_main;exports.OneDropdownDivider=e.OneDropdownDivider;exports.OneDropdownItem=e._sfc_main$1;exports.OneUserMenu=e._sfc_main$2;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./button/index.cjs"),n=require("./card/index.cjs"),r=require("./form/index.cjs"),e=require("./index-3196cf32.cjs");require("vue");require("./_plugin-vue_export-helper-f246444f.cjs");exports.OneButton=o.OneButton;exports.OneCard=n.OneCard;exports.OneCardBody=n.OneCardBody;exports.OneCardFooter=n.OneCardFooter;exports.OneCardHeader=n.OneCardHeader;exports.OneForm=r.OneForm;exports.OneFormFeedback=r.OneFormFeedback;exports.OneFormField=r.OneFormField;exports.OneFormInput=r.OneFormInput;exports.OneFormLabel=r.OneFormLabel;exports.OneAvatar=e._sfc_main$4;exports.OneBrowserMenu=e._sfc_main$3;exports.OneDropdown=e._sfc_main;exports.OneDropdownDivider=e.OneDropdownDivider;exports.OneDropdownItem=e._sfc_main$1;exports.OneUserMenu=e._sfc_main$2;

package/dist/index.js

@@ -1,7 +1,7 @@
 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-6f93552a.js";
+import { d as C, c as D, _ as b, O as B, a as c, b as l } from "./index-6423ecce.js";
 import "vue";
 import "./_plugin-vue_export-helper-dad06003.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneb/ui-vue",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -34,6 +34,10 @@
       "types": "./dist/form/index.d.ts",
       "import": "./dist/form/index.js"
     },
+    "./dropdown": {
+      "types": "./dist/dropdown/index.d.ts",
+      "import": "./dist/dropdown/index.js"
+    },
     "./icons": {
       "types": "./dist/icons/outline/index.d.ts",
       "import": "./dist/icons/outline/esm/index.js",

package/dist/index-26c86446.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),f=require("./_plugin-vue_export-helper-f246444f.cjs"),k={title:{type:String},stick:{type:String,default:"right"}},g={variant:{type:String,default:"primary"},label:{type:String},icon:{type:[Function,Object]}},y=["data-opened"],x={key:0,class:"text-sm text-secondary-content px-3 py-2 text-left"},h=e.defineComponent({__name:"OneDropdown",props:k,emits:["open"],setup(d,{emit:o}){const i=d,c=e.ref(!1),r=e.ref(null),l=()=>{c.value=!c.value,c.value&&o("open")};e.provide("OneDropdown",{onToggle:l});const t=e.computed(()=>{const n=r.value!=null&&r.value.offsetLeft<270;return r.value!=null&&r.value.offsetTop+270>window.innerHeight?"up"+(n?"-right":"-left"):"down"+(n?"-right":"-left")}),s=e.computed(()=>{const n=["absolute z-10 w-fit rounded-md bg-white","py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none","overflow-auto max-h-[540px] min-w-[150px] max-w-[540px]"];return t.value==="up"?n.push("bottom-1 mb-10"):t.value==="down"?n.push("top-1 mt-10"):t.value==="up-right"?n.push("left-0 bottom-1 mb-10"):t.value==="down-right"&&n.push("left-0 top-1 mt-10"),i.stick==="right"?n.push("right-0"):i.stick==="left"&&n.push("left-0"),n});return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:"relative inline-block",ref_key:"menuRef",ref:r,"data-opened":c.value},[e.renderSlot(n.$slots,"button",e.normalizeProps(e.guardReactiveProps({onToggle:l,isExpanded:c.value}))),c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fixed top-0 left-0 w-screen h-screen z-10",onClick:l})):e.createCommentVNode("",!0),e.createVNode(e.Transition,{"enter-active-class":"transition ease-out duration-100","enter-from-class":"transform opacity-0 scale-95","enter-to-class":"transform opacity-100 scale-100","leave-active-class":"transition ease-in duration-75","leave-from-class":"transform opacity-100 scale-100","leave-to-class":"transform opacity-0 scale-95"},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["menu",s.value]),role:"menu","aria-orientation":"vertical",tabindex:"-1"},[n.title?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"menu",e.normalizeProps(e.guardReactiveProps({onToggle:l})))],2)):e.createCommentVNode("",!0)]),_:3})],8,y))}}),v=["onClick"],m=e.defineComponent({__name:"OneDropdownItem",props:g,emits:["click"],setup(d,{emit:o}){const i=d,c=e.inject("OneDropdown"),r=()=>{c!==void 0&&c.onToggle(),o("click")},l=e.computed(()=>{const t=[];return i.variant==="secondary"?t.push("text-secondary-content hover:bg-secondary-body-hover"):i.variant==="danger"?t.push("text-danger-content hover:bg-danger-10"):i.variant==="warning"?t.push("text-warning-content hover:bg-warning-10"):i.variant==="info"?t.push("text-info-content hover:bg-info-10"):t.push("hover:bg-secondary-body-hover"),t});return(t,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["px-3 py-1.5 flex items-center space-x-3 w-full whitespace-nowrap",l.value]),onClick:e.withModifiers(r,["prevent"])},[t.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:0,class:"w-4 h-4"})):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.label),1)],10,v))}}),w={},_={class:"border-t border-secondary-stroke my-1"};function b(d,o){return e.openBlock(),e.createElementBlock("div",_)}const C=f._export_sfc(w,[["render",b]]),E={size:{type:[String,Number],default:"50"},rounded:{type:Boolean,default:!1},text:{type:String,required:!1,default:""},src:{type:[String,null],required:!1}},V=["src"],p=e.defineComponent({__name:"OneAvatar",props:E,setup(d){const o=d,i=e.computed(()=>{const t=o.text.trim().split(" ");return t.length<2?o.text.slice(0,2).toUpperCase():t.map(s=>s.slice(0,1)).join("").toUpperCase()}),c=e.computed(()=>({fill:"rgba(255, 255, 255, .75)",fontSize:`${Number(o.size)*.4}px`})),r=e.computed(()=>{const t=o.text.split("").map(a=>a.charCodeAt(0)).reduce((a,u)=>a+u,0),n=`hsl(${360/26*t}, 68%, 48%)`;return{width:`${o.size}px`,height:`${o.size}px`,borderRadius:o.rounded?"100%":"9%",background:n}}),l=e.computed(()=>({width:`${o.size}px`,height:`${o.size}px`,borderRadius:o.rounded?"100%":"9%"}));return(t,s)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(l.value),class:"overflow-hidden"},[t.src?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.src,alt:"",class:"w-full h-full"},null,8,V)):(e.openBlock(),e.createElementBlock("svg",{key:1,style:e.normalizeStyle(r.value),class:"block"},[i.value?(e.openBlock(),e.createElementBlock("text",{key:0,x:"50%",y:"50%","text-anchor":"middle","dominant-baseline":"central",class:"font-light",style:e.normalizeStyle(c.value)},e.toDisplayString(i.value),5)):e.createCommentVNode("",!0)],4))],4))}});function B(d,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:"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"})])}function N(d,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:"M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"})])}const S={user:{type:Object,required:!0},menu:{type:Array,default:()=>[]},accountLabel:{type:String,default:"Account"},logoutLabel:{type:String,default:"Logout"},onAccount:{type:Function},onLogout:{type:Function}},$={workspace:{type:Object,required:!0},apps:{type:Array,required:!0},appsTitle:{type:String,default:"Apps"},changeLabel:{type:String,default:"Change"},onChange:{type:Function},onApp:{type:Function}},z=["onClick"],D={class:"space-y-2 text-center py-6",style:{width:"240px"}},A={class:"text-sm text-secondary-content"},L={class:"px-2"},O=e.defineComponent({__name:"OneUserMenu",props:S,setup(d){const o=d,i=e.computed(()=>{var l;return(l=o.menu)==null?void 0:l.map(t=>{let s={label:t.label};t.icon!=null&&(s={...s,icon:t.icon});const n=typeof t.click=="function"?t.click:()=>{};return{key:t.label,args:s,click:n}})}),c=()=>{typeof o.onAccount=="function"&&o.onAccount()},r=()=>{typeof o.onLogout=="function"&&o.onLogout()};return(l,t)=>(e.openBlock(),e.createBlock(h,{stick:"right"},{button:e.withCtx(({onToggle:s,isExpanded:n})=>{var a,u;return[e.createElementVNode("button",{onClick:s,class:e.normalizeClass(["p-1 rounded-full hover:bg-secondary-10",[n?"bg-secondary-25":""]])},[e.createVNode(p,{text:((a=l.user)==null?void 0:a.name)||"",size:34,src:(u=l.user)==null?void 0:u.photo_url,rounded:!0},null,8,["text","src"])],10,z)]}),menu:e.withCtx(()=>{var s,n,a;return[e.createElementVNode("div",D,[e.createElementVNode("div",null,[e.createVNode(p,{text:((s=l.user)==null?void 0:s.name)||"",size:80,rounded:!0,class:"mx-auto"},null,8,["text"])]),e.createElementVNode("div",null,[e.createElementVNode("div",null,e.toDisplayString((n=l.user)==null?void 0:n.name),1),e.createElementVNode("div",A,e.toDisplayString((a=l.user)==null?void 0:a.email),1)])]),e.createElementVNode("div",L,[e.createVNode(m,{icon:e.unref(B),label:l.accountLabel,class:"rounded",onClick:c},null,8,["icon","label"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,u=>(e.openBlock(),e.createBlock(m,e.mergeProps({key:u.key},u.args,{onClick:u.click}),null,16,["onClick"]))),128)),e.createVNode(m,{icon:e.unref(N),label:l.logoutLabel,class:"rounded",onClick:r},null,8,["icon","label"])])]}),_:1}))}});function P(d,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("rect",{width:"2.94",height:"2.94",x:"17.16",y:"3.9",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"10.53",y:"3.9",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"3.9",y:"3.9",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"17.16",y:"10.53",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"10.53",y:"10.53",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"3.9",y:"10.53",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"17.16",y:"17.16",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"10.53",y:"17.16",fill:"currentColor","stroke-width":"1.8",rx:"1.1"}),e.createElementVNode("rect",{width:"2.94",height:"2.94",x:"3.9",y:"17.16",fill:"currentColor","stroke-width":"1.8",rx:"1.1"})])}const j=["onClick"],M={class:"space-x-2 flex items-center px-3 py-2",style:{width:"300px"}},q={class:"flex-shrink-0"},F={class:"w-full text-left"},R={class:"flex-shrink-0"},T={class:"px-3 py-2 border-t border-secondary-stroke"},H={class:"text-secondary-content text-left pb-1 text-sm"},I={class:"grid grid-cols-3 gap-1"},U=["onClick"],G={class:"block bg-white mx-auto flex-shrink-0 border border-secondary-stroke p-1 rounded-lg"},J={class:"w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm mt-1"},K=e.defineComponent({__name:"OneBrowserMenu",props:$,setup(d){const o=d,i=()=>{typeof o.onChange=="function"&&o.onChange()},c=r=>{typeof o.onApp=="function"&&o.onApp(r)};return(r,l)=>(e.openBlock(),e.createBlock(h,{stick:"right"},{button:e.withCtx(({onToggle:t,isExpanded:s})=>[e.createElementVNode("button",{onClick:t,class:e.normalizeClass(["p-1 rounded-md hover:bg-secondary-10",[s?"bg-secondary-25":""]])},[e.createVNode(e.unref(P),{class:"text-secondary-base",style:{width:"34px",height:"34px"}})],10,j)]),menu:e.withCtx(()=>{var t,s,n;return[e.createElementVNode("div",M,[e.createElementVNode("div",q,[e.createVNode(p,{text:((t=r.workspace)==null?void 0:t.name)||"",src:(s=r.workspace)==null?void 0:s.photo_url,size:44,rounded:!1,class:"mx-auto"},null,8,["text","src"])]),e.createElementVNode("div",F,e.toDisplayString((n=r.workspace)==null?void 0:n.name),1),e.createElementVNode("div",R,[e.createElementVNode("button",{class:"text-sm border border-secondary-stroke rounded px-2 py-0.5 text-secondary-content hover:text-primary-content",onClick:i},e.toDisplayString(r.changeLabel),1)])]),e.createElementVNode("div",T,[e.createElementVNode("div",H,e.toDisplayString(r.appsTitle),1),e.createElementVNode("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.apps,a=>(e.openBlock(),e.createElementBlock("button",{key:a.id,onClick:u=>c(a),class:"p-1.5 flex flex-col items-center justify-center rounded hover:bg-secondary-10",style:{width:"88px",height:"88px"}},[e.createElementVNode("span",G,[e.createVNode(p,{text:a.name,src:a.photo_url,size:44,rounded:!1},null,8,["text","src"])]),e.createElementVNode("span",J,e.toDisplayString(a.name),1)],8,U))),128))])])]}),_:1}))}});exports.OneDropdownDivider=C;exports._sfc_main=h;exports._sfc_main$1=m;exports._sfc_main$2=O;exports._sfc_main$3=K;exports._sfc_main$4=p;