@mlightcad/ui-components 0.0.2 → 0.0.3

package/dist/style.css

@@ -1 +1 @@
-.vertical-button-group[data-v-d11b3637]{display:flex;flex-direction:column;align-items:flex-start}.horizontal-button-group[data-v-d11b3637]{display:flex;flex-direction:row}.custom-button[data-v-d11b3637]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}.icon-text-wrapper[data-v-d11b3637]{display:flex;flex-direction:column;align-items:center;justify-content:center}.button-text[data-v-d11b3637]{margin-left:0;margin-top:8px}
+.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}

package/dist/ui-components.es.js

@@ -4,11 +4,11 @@ import "element-plus/es/components/button-group/style/css";
 import "element-plus/es/components/tooltip/style/css";
 import "element-plus/es/components/button/style/css";
 import "element-plus/es/components/icon/style/css";
-import { defineComponent as B, computed as r, openBlock as l, createBlock as i, normalizeClass as E, withCtx as u, createElementBlock as m, Fragment as w, renderList as M, normalizeStyle as S, createElementVNode as I, createVNode as L, toDisplayString as N, createCommentVNode as V } from "vue";
-const G = { class: "icon-text-wrapper" }, H = {
+import { defineComponent as B, computed as r, openBlock as l, createBlock as i, normalizeClass as E, withCtx as u, createElementBlock as m, Fragment as M, renderList as S, normalizeStyle as w, createElementVNode as I, createVNode as L, toDisplayString as N, createCommentVNode as V } from "vue";
+const G = {
   key: 0,
-  class: "button-text"
-}, D = /* @__PURE__ */ B({
+  class: "ml-toolbar-button-text"
+}, H = /* @__PURE__ */ B({
   __name: "MlToolbar",
   props: {
     items: {},
@@ -19,7 +19,7 @@ const G = { class: "icon-text-wrapper" }, H = {
     click: null
   },
   setup(e, { emit: c }) {
-    const t = e, s = c, a = r(() => t.layout === "vertical" ? "vertical-button-group" : "horizontal-button-group"), _ = r(() => t.size === "small" ? 20 : 30), p = r(() => {
+    const t = e, s = c, a = r(() => t.layout === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), _ = r(() => t.size === "small" ? 20 : 30), p = r(() => {
       switch (t.size) {
         case "small":
           return 30;
@@ -27,32 +27,33 @@ const G = { class: "icon-text-wrapper" }, H = {
           return 50;
       }
       return 70;
-    }), d = (o) => o.description ? o.description : o.text, b = r(() => t.size === "large"), v = (o) => {
+    }), d = (o) => o.description ? o.description : o.text, b = r(() => t.size === "large"), f = (o) => {
       s("click", o);
     };
-    return (o, $) => {
-      const f = y, h = g, x = C, z = T;
-      return l(), i(z, {
+    return (o, O) => {
+      const v = y, z = g, h = C, k = T;
+      return l(), i(k, {
         class: E(a.value)
       }, {
         default: u(() => [
-          (l(!0), m(w, null, M(o.items, (n, k) => (l(), i(x, {
+          (l(!0), m(M, null, S(o.items, (n, x) => (l(), i(h, {
             key: n.text,
             content: d(n)
           }, {
             default: u(() => [
-              (l(), i(h, {
-                style: S({ width: p.value + "px", height: p.value + "px" }),
-                key: k,
-                onClick: (j) => v(n.command)
+              (l(), i(z, {
+                class: "ml-toolbar-button",
+                style: w({ width: p.value + "px", height: p.value + "px" }),
+                key: x,
+                onClick: ($) => f(n.command)
               }, {
                 default: u(() => [
-                  I("div", G, [
-                    L(f, {
+                  I("div", null, [
+                    L(v, {
                       size: _.value,
                       innerHTML: n.icon
                     }, null, 8, ["size", "innerHTML"]),
-                    b.value ? (l(), m("div", H, N(n.text), 1)) : V("", !0)
+                    b.value ? (l(), m("div", G, N(n.text), 1)) : V("", !0)
                   ])
                 ]),
                 _: 2
@@ -65,18 +66,18 @@ const G = { class: "icon-text-wrapper" }, H = {
       }, 8, ["class"]);
     };
   }
-}), F = (e, c) => {
+}), D = (e, c) => {
   const t = e.__vccOpts || e;
   for (const [s, a] of c)
     t[s] = a;
   return t;
-}, O = /* @__PURE__ */ F(D, [["__scopeId", "data-v-d11b3637"]]), U = {
+}, F = /* @__PURE__ */ D(H, [["__scopeId", "data-v-dce3ecfb"]]), R = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(e) {
-    e.component("MlToolbar", O);
+    e.component("MlToolbar", F);
   }
 };
 export {
-  O as MlToolbar,
-  U as default
+  F as MlToolbar,
+  R as default
 };

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,g,C,M,q,w,e){"use strict";const m={class:"icon-text-wrapper"},d={key:0,class:"button-text"},u=((l,r)=>{const n=l.__vccOpts||l;for(const[i,p]of r)n[i]=p;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,p=e.computed(()=>n.layout==="vertical"?"vertical-button-group":"horizontal-button-group"),f=e.computed(()=>n.size==="small"?20:30),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),y=s=>s.description?s.description:s.text,b=e.computed(()=>n.size==="large"),k=s=>{i("click",s)};return(s,$)=>{const h=o.ElIcon,x=o.ElButton,B=o.ElTooltip,z=o.ElButtonGroup;return e.openBlock(),e.createBlock(z,{class:e.normalizeClass(p.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(c,T)=>(e.openBlock(),e.createBlock(B,{key:c.text,content:y(c)},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(x,{style:e.normalizeStyle({width:a.value+"px",height:a.value+"px"}),key:T,onClick:I=>k(c.command)},{default:e.withCtx(()=>[e.createElementVNode("div",m,[e.createVNode(h,{size:f.value,innerHTML:c.icon},null,8,["size","innerHTML"]),b.value?(e.openBlock(),e.createElementBlock("div",d,e.toDisplayString(c.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-d11b3637"]]),_={install(l){l.component("MlToolbar",u)}};t.MlToolbar=u,t.default=_,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[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"}})});

package/lib/MlToolbar.vue.js

@@ -8,7 +8,7 @@ const emit = defineEmits({
     click: null
 });
 const buttonGroupClass = computed(() => {
-    return props.layout === 'vertical' ? 'vertical-button-group' : 'horizontal-button-group';
+    return props.layout === 'vertical' ? 'ml-vertical-toolbar-button-group' : 'ml-horizontal-toolbar-button-group';
 });
 const buttonIconSize = computed(() => {
     return (props.size === 'small') ? 20 : 30;
@@ -67,8 +67,8 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.items))) {
     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
-    const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ ...{ 'onClick': {} }, ...{ style: (({ width: __VLS_ctx.buttonSize + 'px', height: __VLS_ctx.buttonSize + 'px' })) }, key: ((index)), }));
-    const __VLS_14 = __VLS_13({ ...{ 'onClick': {} }, ...{ style: (({ width: __VLS_ctx.buttonSize + 'px', height: __VLS_ctx.buttonSize + 'px' })) }, key: ((index)), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+    const __VLS_13 = __VLS_asFunctionalComponent(__VLS_12, new __VLS_12({ ...{ 'onClick': {} }, ...{ class: ("ml-toolbar-button") }, ...{ style: (({ width: __VLS_ctx.buttonSize + 'px', height: __VLS_ctx.buttonSize + 'px' })) }, key: ((index)), }));
+    const __VLS_14 = __VLS_13({ ...{ 'onClick': {} }, ...{ class: ("ml-toolbar-button") }, ...{ style: (({ width: __VLS_ctx.buttonSize + 'px', height: __VLS_ctx.buttonSize + 'px' })) }, key: ((index)), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
     let __VLS_18;
     const __VLS_19 = {
         onClick: (...[$event]) => {
@@ -77,7 +77,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.items))) {
     };
     let __VLS_15;
     let __VLS_16;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("icon-text-wrapper") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
     const __VLS_20 = __VLS_resolvedLocalAndGlobalComponents.ElIcon;
     /** @type { [typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ] } */
     // @ts-ignore
@@ -85,7 +85,7 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.items))) {
     const __VLS_22 = __VLS_21({ size: ((__VLS_ctx.buttonIconSize)), }, ...__VLS_functionalComponentArgsRest(__VLS_21));
     __VLS_directiveAsFunction(__VLS_ctx.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (item.icon) }, null, null);
     if (__VLS_ctx.isShowButtonText) {
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("button-text") }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("ml-toolbar-button-text") }, });
         (item.text);
     }
     __VLS_nonNullable(__VLS_17.slots).default;
@@ -95,8 +95,8 @@ for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.items))) {
 }
 __VLS_nonNullable(__VLS_5.slots).default;
 const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
-__VLS_styleScopedClasses['icon-text-wrapper'];
-__VLS_styleScopedClasses['button-text'];
+__VLS_styleScopedClasses['ml-toolbar-button'];
+__VLS_styleScopedClasses['ml-toolbar-button-text'];
 var __VLS_slots;
 var __VLS_inheritedAttrs;
 const __VLS_refs = {};

package/package.json

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

package/src/MlToolbar.vue

@@ -6,14 +6,15 @@
       :content="buttonTooltip(item)"
     >
       <el-button
+        class="ml-toolbar-button"
         :style="{ width: buttonSize + 'px', height: buttonSize + 'px' }"
         :key="index"
         @click="handleCommand(item.command)"
       >
-        <div class="icon-text-wrapper">
+        <div>
           <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
           <el-icon :size="buttonIconSize" v-html="item.icon" />
-          <div v-if="isShowButtonText" class="button-text">{{ item.text }}</div>
+          <div v-if="isShowButtonText" class="ml-toolbar-button-text">{{ item.text }}</div>
         </div>
       </el-button>
     </el-tooltip>
@@ -78,7 +79,7 @@ const emit = defineEmits({
 })
 
 const buttonGroupClass = computed(() => {
-  return props.layout === 'vertical' ? 'vertical-button-group' : 'horizontal-button-group'
+  return props.layout === 'vertical' ? 'ml-vertical-toolbar-button-group' : 'ml-horizontal-toolbar-button-group'
 })
 
 const buttonIconSize = computed(() => {
@@ -109,33 +110,26 @@ const handleCommand = (command: string) => {
 </script>
 
 <style scoped>
-.vertical-button-group {
+.ml-vertical-toolbar-button-group {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.horizontal-button-group {
+.ml-horizontal-toolbar-button-group {
   display: flex;
   flex-direction: row;
 }
 
-.custom-button {
+.ml-toolbar-button {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 10px;
+  padding: 0px;
 }
 
-.icon-text-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.button-text {
+.ml-toolbar-button-text {
   margin-left: 0px;
   margin-top: 8px;
 }