@mlightcad/ui-components 0.0.4 → 0.0.6

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/style.css

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

package/dist/ui-components.es.js

@@ -1,4 +1,4 @@
-import { ElIcon as y, ElButton as g, ElTooltip as C, ElButtonGroup as T } from "element-plus/es";
+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 +13,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,12 +31,12 @@ const G = {
       s("click", o);
     };
     return (o, O) => {
-      const v = y, h = g, z = 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(z, {
+          (l(!0), m(M, null, S(o.items, (n, z) => (l(), i(k, {
             key: n.text,
             content: d(n),
             "hide-after": 0
@@ -45,7 +45,7 @@ const G = {
               (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(() => [
@@ -72,7 +72,7 @@ const G = {
   for (const [s, a] of c)
     t[s] = a;
   return t;
-}, F = /* @__PURE__ */ D(H, [["__scopeId", "data-v-04772114"]]), 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 @@
-(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"}})});
+(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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlightcad/ui-components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "One common UI component library based on Element Plus",
   "license": "MIT",
   "author": "MLight Lee <mlight.lee@outlook.com>",
@@ -40,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

@@ -67,7 +67,7 @@ interface Props {
    * - vertical: arrange button vertically
    * - horizontal: arrange button horizontally
    */
-  layout?: 'vertical' | 'horizontal'
+  direction?: 'vertical' | 'horizontal'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -80,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(() => {
@@ -114,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 {