@mlightcad/ui-components 0.0.3 → 0.0.5

package/README.md

@@ -41,7 +41,7 @@ interface Props {
    * - vertical: arrange button vertically
    * - horizontal: arrange button horizontally
    */
-  layout?: 'vertical' | 'horizontal'
+  direction?: 'vertical' | 'horizontal'
 }
 ```
 

package/dist/ui-components.es.js

@@ -1,4 +1,5 @@
-import { ElIcon as y, ElButton as g, ElTooltip as C, ElButtonGroup as T } from "element-plus/es";
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-vertical-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-0fe7ba99]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-0fe7ba99]{margin-left:0;margin-top:5px}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { ElIcon as g, ElButton as y, ElTooltip as C, ElButtonGroup as T } from "element-plus/es";
 import "element-plus/es/components/base/style/css";
 import "element-plus/es/components/button-group/style/css";
 import "element-plus/es/components/tooltip/style/css";
@@ -13,13 +14,13 @@ const G = {
   props: {
     items: {},
     size: { default: "large" },
-    layout: { default: "horizontal" }
+    direction: {}
   },
   emits: {
     click: null
   },
   setup(e, { emit: c }) {
-    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(() => {
+    const t = e, s = c, a = r(() => t.direction === "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;
@@ -31,20 +32,21 @@ const G = {
       s("click", o);
     };
     return (o, O) => {
-      const v = y, z = g, h = C, k = T;
-      return l(), i(k, {
+      const v = g, h = y, k = C, x = T;
+      return l(), i(x, {
         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, z) => (l(), i(k, {
             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,
+                key: z,
                 onClick: ($) => f(n.command)
               }, {
                 default: u(() => [
@@ -71,7 +73,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-0fe7ba99"]]), R = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(e) {
     e.component("MlToolbar", F);

package/dist/ui-components.umd.js

@@ -1 +1,2 @@
-(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(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-vertical-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-0fe7ba99]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-0fe7ba99]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-0fe7ba99]{margin-left:0;margin-top:5px}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(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,z,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"},direction:{}},emits:{click:null},setup(l,{emit:r}){const n=l,i=r,u=e.computed(()=>n.direction==="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,T)=>(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:T,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-0fe7ba99"]]),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.d.ts

@@ -39,7 +39,7 @@ interface Props {
      * - vertical: arrange button vertically
      * - horizontal: arrange button horizontally
      */
-    layout?: 'vertical' | 'horizontal';
+    direction?: 'vertical' | 'horizontal';
 }
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     size: string;
@@ -53,7 +53,6 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     size: "small" | "medium" | "large";
-    layout: "vertical" | "horizontal";
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/lib/MlToolbar.vue.js

@@ -8,7 +8,7 @@ const emit = defineEmits({
     click: null
 });
 const buttonGroupClass = computed(() => {
-    return props.layout === 'vertical' ? 'ml-vertical-toolbar-button-group' : 'ml-horizontal-toolbar-button-group';
+    return props.direction === 'vertical' ? 'ml-vertical-toolbar-button-group' : 'ml-horizontal-toolbar-button-group';
 });
 const buttonIconSize = computed(() => {
     return (props.size === 'small') ? 20 : 30;
@@ -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.5",
   "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",
@@ -41,6 +40,7 @@
     "build": "vue-tsc && vite build",
     "generate": "vite-ssg build",
     "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
     "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit"
   }

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"
@@ -66,7 +67,7 @@ interface Props {
    * - vertical: arrange button vertically
    * - horizontal: arrange button horizontally
    */
-  layout?: 'vertical' | 'horizontal'
+  direction?: 'vertical' | 'horizontal'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -79,7 +80,7 @@ const emit = defineEmits({
 })
 
 const buttonGroupClass = computed(() => {
-  return props.layout === 'vertical' ? 'ml-vertical-toolbar-button-group' : 'ml-horizontal-toolbar-button-group'
+  return props.direction === 'vertical' ? 'ml-vertical-toolbar-button-group' : 'ml-horizontal-toolbar-button-group'
 })
 
 const buttonIconSize = computed(() => {
@@ -113,7 +114,6 @@ const handleCommand = (command: string) => {
 .ml-vertical-toolbar-button-group {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
 }
 
 .ml-horizontal-toolbar-button-group {
@@ -126,11 +126,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>

package/dist/style.css

@@ -1 +0,0 @@
-.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}