@mlightcad/ui-components 0.0.3 → 0.0.4

package/dist/style.css

@@ -1 +1 @@
-.ml-vertical-toolbar-button-group[data-v-dce3ecfb]{display:flex;flex-direction:column;align-items:flex-start}.ml-horizontal-toolbar-button-group[data-v-dce3ecfb]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-dce3ecfb]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}.ml-toolbar-button-text[data-v-dce3ecfb]{margin-left:0;margin-top:8px}
+.ml-vertical-toolbar-button-group[data-v-04772114]{display:flex;flex-direction:column;align-items:flex-start}.ml-horizontal-toolbar-button-group[data-v-04772114]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-04772114]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-04772114]{margin-left:0;margin-top:5px}

package/dist/ui-components.es.js

@@ -31,17 +31,18 @@ const G = {
       s("click", o);
     };
     return (o, O) => {
-      const v = y, z = g, h = C, k = T;
+      const v = y, h = g, z = C, k = T;
       return l(), i(k, {
         class: E(a.value)
       }, {
         default: u(() => [
-          (l(!0), m(M, null, S(o.items, (n, x) => (l(), i(h, {
+          (l(!0), m(M, null, S(o.items, (n, x) => (l(), i(z, {
             key: n.text,
-            content: d(n)
+            content: d(n),
+            "hide-after": 0
           }, {
             default: u(() => [
-              (l(), i(z, {
+              (l(), i(h, {
                 class: "ml-toolbar-button",
                 style: w({ width: p.value + "px", height: p.value + "px" }),
                 key: x,
@@ -71,7 +72,7 @@ const G = {
   for (const [s, a] of c)
     t[s] = a;
   return t;
-}, F = /* @__PURE__ */ D(H, [["__scopeId", "data-v-dce3ecfb"]]), R = {
+}, F = /* @__PURE__ */ D(H, [["__scopeId", "data-v-04772114"]]), R = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(e) {
     e.component("MlToolbar", F);

package/dist/ui-components.umd.js

@@ -1 +1 @@
-(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/icon/style/css"),require("vue")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/icon/style/css","vue"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.UIComponents={},t.es,null,null,null,null,null,t.Vue))})(this,function(t,o,T,g,C,M,q,e){"use strict";const m={key:0,class:"ml-toolbar-button-text"},p=((l,r)=>{const n=l.__vccOpts||l;for(const[u,i]of r)n[u]=i;return n})(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},layout:{default:"horizontal"}},emits:{click:null},setup(l,{emit:r}){const n=l,u=r,i=e.computed(()=>n.layout==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),_=e.computed(()=>n.size==="small"?20:30),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),b=s=>s.description?s.description:s.text,f=e.computed(()=>n.size==="large"),y=s=>{u("click",s)};return(s,w)=>{const k=o.ElIcon,h=o.ElButton,x=o.ElTooltip,B=o.ElButtonGroup;return e.openBlock(),e.createBlock(B,{class:e.normalizeClass(i.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(c,z)=>(e.openBlock(),e.createBlock(x,{key:c.text,content:b(c)},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(h,{class:"ml-toolbar-button",style:e.normalizeStyle({width:a.value+"px",height:a.value+"px"}),key:z,onClick:$=>y(c.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(k,{size:_.value,innerHTML:c.icon},null,8,["size","innerHTML"]),f.value?(e.openBlock(),e.createElementBlock("div",m,e.toDisplayString(c.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-dce3ecfb"]]),d={install(l){l.component("MlToolbar",p)}};t.MlToolbar=p,t.default=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/icon/style/css"),require("vue")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/icon/style/css","vue"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.UIComponents={},t.es,null,null,null,null,null,t.Vue))})(this,function(t,o,T,g,C,M,q,e){"use strict";const m={key:0,class:"ml-toolbar-button-text"},p=((l,r)=>{const n=l.__vccOpts||l;for(const[i,u]of r)n[i]=u;return n})(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},layout:{default:"horizontal"}},emits:{click:null},setup(l,{emit:r}){const n=l,i=r,u=e.computed(()=>n.layout==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),_=e.computed(()=>n.size==="small"?20:30),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),b=s=>s.description?s.description:s.text,f=e.computed(()=>n.size==="large"),y=s=>{i("click",s)};return(s,w)=>{const k=o.ElIcon,h=o.ElButton,x=o.ElTooltip,B=o.ElButtonGroup;return e.openBlock(),e.createBlock(B,{class:e.normalizeClass(u.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(c,z)=>(e.openBlock(),e.createBlock(x,{key:c.text,content:b(c),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(h,{class:"ml-toolbar-button",style:e.normalizeStyle({width:a.value+"px",height:a.value+"px"}),key:z,onClick:$=>y(c.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(k,{size:_.value,innerHTML:c.icon},null,8,["size","innerHTML"]),f.value?(e.openBlock(),e.createElementBlock("div",m,e.toDisplayString(c.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-04772114"]]),d={install(l){l.component("MlToolbar",p)}};t.MlToolbar=p,t.default=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/MlToolbar.vue.js

@@ -62,8 +62,8 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.items))) {
     const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.ElTooltip;
     /** @type { [typeof __VLS_components.ElTooltip, typeof __VLS_components.elTooltip, typeof __VLS_components.ElTooltip, typeof __VLS_components.elTooltip, ] } */
     // @ts-ignore
-    const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ key: ((item.text)), content: ((__VLS_ctx.buttonTooltip(item))), }));
-    const __VLS_8 = __VLS_7({ key: ((item.text)), content: ((__VLS_ctx.buttonTooltip(item))), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ key: ((item.text)), content: ((__VLS_ctx.buttonTooltip(item))), hideAfter: ((0)), }));
+    const __VLS_8 = __VLS_7({ key: ((item.text)), content: ((__VLS_ctx.buttonTooltip(item))), hideAfter: ((0)), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
     const __VLS_12 = __VLS_resolvedLocalAndGlobalComponents.ElButton;
     /** @type { [typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ] } */
     // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlightcad/ui-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "One common UI component library based on Element Plus",
   "license": "MIT",
   "author": "MLight Lee <mlight.lee@outlook.com>",
@@ -29,8 +29,7 @@
     "package.json"
   ],
   "devDependencies": {
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "vite-plugin-css-injected-by-js": "^3.5.1"
+    "rollup-plugin-peer-deps-external": "^2.2.4"
   },
   "peerDependencies": {
     "element-plus": "^2.8.1",

package/src/MlToolbar.vue

@@ -4,6 +4,7 @@
       v-for="(item, index) in items"
       :key="item.text"
       :content="buttonTooltip(item)"
+      :hide-after=0
     >
       <el-button
         class="ml-toolbar-button"
@@ -126,11 +127,11 @@ const handleCommand = (command: string) => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0px;
+  padding: 5px;
 }
 
 .ml-toolbar-button-text {
   margin-left: 0px;
-  margin-top: 8px;
+  margin-top: 5px;
 }
 </style>