@maltjoy/core-vue 1.0.0-alpha.1.1 → 1.0.0-alpha.2

package/README.md

@@ -4,7 +4,7 @@ Vue version of [@maltjoy/core](https://www.npmjs.com/package/@maltjoy/core) pack
 
 In order to inherit from all [@maltjoy/themes](https://www.npmjs.com/package/@maltjoy/themes) custom properties, you will need to import as well the default theme:
 
-> If you already use @maltjoy/core in your project, it already include the theme.
+> If you already use @maltjoy/core in your project, it already includes the theme.
 
 ```
 npm install @maltjoy/themes

package/dist/components/main.d.ts

@@ -1,5 +1,6 @@
 import type { App } from 'vue';
-declare const _default: {
+import { JoyButton, JoySpinner, JoyInput, JoyLabel, JoyWrapper } from './';
+declare const JoyVuePlugin: {
     install: (app: App) => void;
 };
-export default _default;
+export { JoyVuePlugin, JoyButton, JoySpinner, JoyInput, JoyLabel, JoyWrapper, };

package/dist/joy-vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as _, openBlock as a, createElementBlock as r, normalizeClass as y, useAttrs as $, computed as v, createBlock as I, resolveDynamicComponent as L, unref as l, withCtx as J, createCommentVNode as c, createElementVNode as S, renderSlot as g, mergeProps as x, toDisplayString as N, ref as m, useSlots as E, onBeforeMount as q } from "vue";
+import { defineComponent as _, openBlock as a, createElementBlock as r, normalizeClass as y, useAttrs as $, computed as v, createBlock as I, resolveDynamicComponent as L, unref as l, withCtx as J, createCommentVNode as d, createElementVNode as g, renderSlot as S, mergeProps as x, toDisplayString as N, ref as m, useSlots as E, onBeforeMount as q } from "vue";
 const T = ["teal", "white"], A = /* @__PURE__ */ _({
   __name: "JoySpinner",
   props: {
@@ -23,7 +23,7 @@ const b = (e, n) => {
 }, z = /* @__PURE__ */ b(A, [["__scopeId", "data-v-e97b61a5"]]), O = ["primary", "secondary"], F = ["xlarge", "large", "medium", "small", "xsmall", "xxsmall"], R = ["main", "admin", "white", "ghost"], W = [
   ...O,
   ...R
-], Z = [...F], D = ["xxsmall", "xsmall", "small"], M = ["name", "size"], P = { class: "joy-button--slot" }, U = /* @__PURE__ */ _({
+], P = [...F], Z = ["xxsmall", "xsmall", "small"], D = ["name", "size"], M = { class: "joy-button--slot" }, U = /* @__PURE__ */ _({
   __name: "JoyButton",
   props: {
     /**
@@ -54,7 +54,7 @@ const b = (e, n) => {
       type: String,
       default: "medium",
       validator(e) {
-        return Z.includes(e);
+        return P.includes(e);
       }
     },
     /** Override the icon size. Default to xsmall */
@@ -62,7 +62,7 @@ const b = (e, n) => {
       type: String,
       default: "xsmall",
       validator(e) {
-        return D.includes(e);
+        return Z.includes(e);
       }
     }
   },
@@ -86,13 +86,13 @@ const b = (e, n) => {
           name: e.icon,
           size: e.iconSize,
           lazy: !1
-        }, null, 8, M)) : c("", !0),
+        }, null, 8, D)) : d("", !0),
         e.loading ? (a(), I(z, {
           key: 1,
           color: l(p)
-        }, null, 8, ["color"])) : c("", !0),
-        S("span", P, [
-          g(s.$slots, "default", {}, void 0, !0)
+        }, null, 8, ["color"])) : d("", !0),
+        g("span", M, [
+          S(s.$slots, "default", {}, void 0, !0)
         ])
       ]),
       _: 3
@@ -128,9 +128,9 @@ const G = /* @__PURE__ */ b(U, [["__scopeId", "data-v-107b2043"]]), H = ["small"
     return (t, p) => (a(), r("label", x({
       class: ["joy-label", `joy-label--${e.size}`]
     }, t.$attrs), [
-      g(t.$slots, "default", {}, void 0, !0),
-      n.required ? (a(), r("span", K, "*")) : c("", !0),
-      n.optionalLabel ? (a(), r("span", Q, " - " + N(n.optionalLabel), 1)) : c("", !0)
+      S(t.$slots, "default", {}, void 0, !0),
+      n.required ? (a(), r("span", K, "*")) : d("", !0),
+      n.optionalLabel ? (a(), r("span", Q, " - " + N(n.optionalLabel), 1)) : d("", !0)
     ], 16));
   }
 });
@@ -203,7 +203,7 @@ const h = /* @__PURE__ */ b(X, [["__scopeId", "data-v-21392cc3"]]), Y = ["id", "
       ref: s,
       class: y([`joy-input--${t.size}`])
     }, [
-      S("div", {
+      g("div", {
         class: y([
           "joy-input",
           {
@@ -222,11 +222,11 @@ const h = /* @__PURE__ */ b(X, [["__scopeId", "data-v-21392cc3"]]), Y = ["id", "
           size: e.labelSize
         }, {
           default: J(() => [
-            g(u.$slots, "default", {}, void 0, !0)
+            S(u.$slots, "default", {}, void 0, !0)
           ]),
           _: 3
-        }, 8, ["for", "required", "optional-label", "size"])) : c("", !0),
-        S("div", {
+        }, 8, ["for", "required", "optional-label", "size"])) : d("", !0),
+        g("div", {
           class: y([
             "joy-input--wrapper",
             {
@@ -237,7 +237,7 @@ const h = /* @__PURE__ */ b(X, [["__scopeId", "data-v-21392cc3"]]), Y = ["id", "
             }
           ])
         }, [
-          S("input", x(u.$attrs, {
+          g("input", x(u.$attrs, {
             id: t.name,
             ref_key: "input",
             ref: p,
@@ -250,11 +250,11 @@ const h = /* @__PURE__ */ b(X, [["__scopeId", "data-v-21392cc3"]]), Y = ["id", "
             type: B.value,
             value: e.modelValue,
             onFocus: o[0] || (o[0] = //@ts-ignore
-            (...d) => i.onFocus && i.onFocus(...d)),
+            (...c) => i.onFocus && i.onFocus(...c)),
             onBlur: o[1] || (o[1] = //@ts-ignore
-            (...d) => i.onBlur && i.onBlur(...d)),
+            (...c) => i.onBlur && i.onBlur(...c)),
             onInput: o[2] || (o[2] = //@ts-ignore
-            (...d) => i.onInput && i.onInput(...d))
+            (...c) => i.onInput && i.onInput(...c))
           }), null, 16, Y),
           l(k) ? (a(), r("joy-icon", {
             key: 0,
@@ -262,13 +262,13 @@ const h = /* @__PURE__ */ b(X, [["__scopeId", "data-v-21392cc3"]]), Y = ["id", "
             name: "cross",
             class: "joy-input--clear",
             onClick: o[3] || (o[3] = //@ts-ignore
-            (...d) => i.clearValue && i.clearValue(...d))
-          })) : c("", !0),
+            (...c) => i.clearValue && i.clearValue(...c))
+          })) : d("", !0),
           t.unit ? (a(), r("div", {
             key: 1,
             "data-unit": t.unit,
             class: "joy-input--unit"
-          }, null, 8, ee)) : c("", !0)
+          }, null, 8, ee)) : d("", !0)
         ], 2)
       ], 2)
     ], 2));
@@ -304,7 +304,7 @@ const ne = /* @__PURE__ */ b(te, [["__scopeId", "data-v-2249f4f9"]]), oe = /* @_
         `joy-wrapper--wrap-${e.wrap}`
       ])
     }, [
-      g(n.$slots, "default")
+      S(n.$slots, "default")
     ], 2));
   }
 });
@@ -314,5 +314,10 @@ const le = {
   }
 };
 export {
-  le as default
+  G as JoyButton,
+  ne as JoyInput,
+  h as JoyLabel,
+  z as JoySpinner,
+  le as JoyVuePlugin,
+  oe as JoyWrapper
 };

package/dist/joy-vue.umd.cjs

@@ -1 +1 @@
-(function(e,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis<"u"?globalThis:e||self,e["@maltjoy/core-vue"]=d(e.Vue))})(this,function(e){"use strict";const d=["teal","white"],g=e.defineComponent({__name:"JoySpinner",props:{color:{type:String,validator(t){return d.includes(t)}}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["joy-spinner",`joy-spinner_${t.color}`])},null,2))}}),P="",p=(t,o)=>{const n=t.__vccOpts||t;for(const[c,r]of o)n[c]=r;return n},m=p(g,[["__scopeId","data-v-e97b61a5"]]),B=["primary","secondary"],b=["xlarge","large","medium","small","xsmall","xxsmall"],j=["main","admin","white","ghost"],k=[...B,...j],C=[...b],w=["xxsmall","xsmall","small"],I=["name","size"],V={class:"joy-button--slot"},$=e.defineComponent({__name:"JoyButton",props:{circle:{type:Boolean,default:!1},icon:String,loading:{type:Boolean,default:!1},variant:{type:String,default:"primary",validator(t){return k.includes(t)}},size:{type:String,default:"medium",validator(t){return C.includes(t)}},iconSize:{type:String,default:"xsmall",validator(t){return w.includes(t)}}},setup(t){const o=t,n=e.useAttrs(),c=e.computed(()=>["white","ghost","secondary"].includes(o.variant)?"teal":"white");return(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n).href?"a":"button"),{disabled:t.loading||e.unref(n).disabled,class:e.normalizeClass(["joy-button",`joy-button_${t.variant}`,`joy-button_${t.size}`,{"joy-button_circle":o.circle,"joy-button_loading":o.loading}])},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createElementBlock("joy-icon",{key:0,name:t.icon,size:t.iconSize,lazy:!1},null,8,I)):e.createCommentVNode("",!0),t.loading?(e.openBlock(),e.createBlock(m,{key:1,color:e.unref(c)},null,8,["color"])):e.createCommentVNode("",!0),e.createElementVNode("span",V,[e.renderSlot(r.$slots,"default",{},void 0,!0)])]),_:3},8,["disabled","class"]))}}),W="",z=p($,[["__scopeId","data-v-107b2043"]]),E=["small","medium","large"],x={key:0,class:"joy-label-required"},N={key:1,class:"joy-label-optional"},h=e.defineComponent({__name:"JoyLabel",props:{size:{type:String,default:"medium",validator(t){return E.includes(t)}},required:{type:Boolean,default:!1},optionalLabel:{type:String}},setup(t){const o=t;return(n,c)=>(e.openBlock(),e.createElementBlock("label",e.mergeProps({class:["joy-label",`joy-label--${t.size}`]},n.$attrs),[e.renderSlot(n.$slots,"default",{},void 0,!0),o.required?(e.openBlock(),e.createElementBlock("span",x,"*")):e.createCommentVNode("",!0),o.optionalLabel?(e.openBlock(),e.createElementBlock("span",N," - "+e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)],16))}}),Z="",f=p(h,[["__scopeId","data-v-21392cc3"]]),J=["id","type","value"],L=["data-unit"],T=e.defineComponent({__name:"JoyInput",props:{clearable:{type:Boolean,default:!1},icon:String,invalid:{type:Boolean,default:!1},labelSize:String,modelValue:{type:String,default:""},name:{type:String,required:!0},optionalLabel:String,required:{type:Boolean,default:!1},requiredMark:{type:Boolean,default:!1},size:{type:String,default:"medium"},type:String,unit:String},emits:["update:modelValue"],setup(t,{emit:o}){const n=t,c=e.ref(),r=e.ref(),u=e.useAttrs(),_=e.useSlots(),y=e.ref(!1),O=e.computed(()=>n.clearable&&n.modelValue.length>0&&!n.unit),F=e.computed(()=>_.default&&_.default()),R=e.computed(()=>{var i,l;return!!((i=r.value)!=null&&i.closest("joy-wrapper"))||!!((l=r.value)!=null&&l.closest(".joy-wrapper"))}),S=e.ref(n.type);e.onBeforeMount(()=>{S.value=n.unit?"number":n.unit||"text"});const a={onFocus:()=>{y.value=!0},onBlur:()=>{y.value=!1},onInput:i=>{let l=i.target.value;o("update:modelValue",l)},clearValue:()=>{o("update:modelValue","")}};return(i,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"root",ref:r,class:e.normalizeClass([`joy-input--${n.size}`])},[e.createElementVNode("div",{class:e.normalizeClass(["joy-input",{"joy-input--focusing":y.value,"joy-input--disabled":e.unref(u).disabled,"joy-input--invalid":n.invalid,"joy-input--valid":!n.invalid&&!e.unref(u).disabled}])},[e.unref(F)?(e.openBlock(),e.createBlock(f,{key:0,for:n.name,required:n.required&&n.requiredMark,"optional-label":t.optionalLabel,size:t.labelSize},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},void 0,!0)]),_:3},8,["for","required","optional-label","size"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["joy-input--wrapper",{"joy-input--wrapper-has-icon":!!n.icon,"joy-input--wrapper---clearable":n.clearable,"joy-input--wrapper-unit":!!n.unit,"joy-input--wrapper-margin":!e.unref(R)}])},[e.createElementVNode("input",e.mergeProps(i.$attrs,{id:n.name,ref_key:"input",ref:c,class:[{"joy-input--field-disabled":e.unref(u).disabled,"joy-input--field-invalid":n.invalid}],type:S.value,value:t.modelValue,onFocus:l[0]||(l[0]=(...s)=>a.onFocus&&a.onFocus(...s)),onBlur:l[1]||(l[1]=(...s)=>a.onBlur&&a.onBlur(...s)),onInput:l[2]||(l[2]=(...s)=>a.onInput&&a.onInput(...s))}),null,16,J),e.unref(O)?(e.openBlock(),e.createElementBlock("joy-icon",{key:0,size:"xxsmall",name:"cross",class:"joy-input--clear",onClick:l[3]||(l[3]=(...s)=>a.clearValue&&a.clearValue(...s))})):e.createCommentVNode("",!0),n.unit?(e.openBlock(),e.createElementBlock("div",{key:1,"data-unit":n.unit,class:"joy-input--unit"},null,8,L)):e.createCommentVNode("",!0)],2)],2)],2))}}),D="",q=p(T,[["__scopeId","data-v-2249f4f9"]]),A=e.defineComponent({__name:"JoyWrapper",props:{justify:{type:String,default:"flex-start"},align:{type:String,default:"center"},direction:{type:String,default:"row"},wrap:{type:String,default:"wrap"}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["joy-wrapper",`joy-wrapper--justify-${t.justify}`,`joy-wrapper--align-${t.align}`,`joy-wrapper--direction-${t.direction}`,`joy-wrapper--wrap-${t.wrap}`])},[e.renderSlot(o.$slots,"default")],2))}}),M="";return{install:t=>{t.component("JoyButton",z),t.component("JoyInput",q),t.component("JoyLabel",f),t.component("JoySpinner",m),t.component("JoyWrapper",A)}}});
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a["@maltjoy/core-vue"]={},a.Vue))})(this,function(a,e){"use strict";const j=["teal","white"],k=e.defineComponent({__name:"JoySpinner",props:{color:{type:String,validator(t){return j.includes(t)}}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["joy-spinner",`joy-spinner_${t.color}`])},null,2))}}),M="",p=(t,o)=>{const n=t.__vccOpts||t;for(const[d,i]of o)n[d]=i;return n},y=p(k,[["__scopeId","data-v-e97b61a5"]]),C=["primary","secondary"],J=["xlarge","large","medium","small","xsmall","xxsmall"],I=["main","admin","white","ghost"],V=[...C,...I],w=[...J],$=["xxsmall","xsmall","small"],z=["name","size"],E={class:"joy-button--slot"},N=e.defineComponent({__name:"JoyButton",props:{circle:{type:Boolean,default:!1},icon:String,loading:{type:Boolean,default:!1},variant:{type:String,default:"primary",validator(t){return V.includes(t)}},size:{type:String,default:"medium",validator(t){return w.includes(t)}},iconSize:{type:String,default:"xsmall",validator(t){return $.includes(t)}}},setup(t){const o=t,n=e.useAttrs(),d=e.computed(()=>["white","ghost","secondary"].includes(o.variant)?"teal":"white");return(i,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n).href?"a":"button"),{disabled:t.loading||e.unref(n).disabled,class:e.normalizeClass(["joy-button",`joy-button_${t.variant}`,`joy-button_${t.size}`,{"joy-button_circle":o.circle,"joy-button_loading":o.loading}])},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createElementBlock("joy-icon",{key:0,name:t.icon,size:t.iconSize,lazy:!1},null,8,z)):e.createCommentVNode("",!0),t.loading?(e.openBlock(),e.createBlock(y,{key:1,color:e.unref(d)},null,8,["color"])):e.createCommentVNode("",!0),e.createElementVNode("span",E,[e.renderSlot(i.$slots,"default",{},void 0,!0)])]),_:3},8,["disabled","class"]))}}),Z="",_=p(N,[["__scopeId","data-v-107b2043"]]),h=["small","medium","large"],x={key:0,class:"joy-label-required"},L={key:1,class:"joy-label-optional"},T=e.defineComponent({__name:"JoyLabel",props:{size:{type:String,default:"medium",validator(t){return h.includes(t)}},required:{type:Boolean,default:!1},optionalLabel:{type:String}},setup(t){const o=t;return(n,d)=>(e.openBlock(),e.createElementBlock("label",e.mergeProps({class:["joy-label",`joy-label--${t.size}`]},n.$attrs),[e.renderSlot(n.$slots,"default",{},void 0,!0),o.required?(e.openBlock(),e.createElementBlock("span",x,"*")):e.createCommentVNode("",!0),o.optionalLabel?(e.openBlock(),e.createElementBlock("span",L," - "+e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)],16))}}),D="",m=p(T,[["__scopeId","data-v-21392cc3"]]),q=["id","type","value"],A=["data-unit"],O=e.defineComponent({__name:"JoyInput",props:{clearable:{type:Boolean,default:!1},icon:String,invalid:{type:Boolean,default:!1},labelSize:String,modelValue:{type:String,default:""},name:{type:String,required:!0},optionalLabel:String,required:{type:Boolean,default:!1},requiredMark:{type:Boolean,default:!1},size:{type:String,default:"medium"},type:String,unit:String},emits:["update:modelValue"],setup(t,{emit:o}){const n=t,d=e.ref(),i=e.ref(),u=e.useAttrs(),b=e.useSlots(),f=e.ref(!1),F=e.computed(()=>n.clearable&&n.modelValue.length>0&&!n.unit),R=e.computed(()=>b.default&&b.default()),W=e.computed(()=>{var s,l;return!!((s=i.value)!=null&&s.closest("joy-wrapper"))||!!((l=i.value)!=null&&l.closest(".joy-wrapper"))}),B=e.ref(n.type);e.onBeforeMount(()=>{B.value=n.unit?"number":n.unit||"text"});const r={onFocus:()=>{f.value=!0},onBlur:()=>{f.value=!1},onInput:s=>{let l=s.target.value;o("update:modelValue",l)},clearValue:()=>{o("update:modelValue","")}};return(s,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"root",ref:i,class:e.normalizeClass([`joy-input--${n.size}`])},[e.createElementVNode("div",{class:e.normalizeClass(["joy-input",{"joy-input--focusing":f.value,"joy-input--disabled":e.unref(u).disabled,"joy-input--invalid":n.invalid,"joy-input--valid":!n.invalid&&!e.unref(u).disabled}])},[e.unref(R)?(e.openBlock(),e.createBlock(m,{key:0,for:n.name,required:n.required&&n.requiredMark,"optional-label":t.optionalLabel,size:t.labelSize},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},void 0,!0)]),_:3},8,["for","required","optional-label","size"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["joy-input--wrapper",{"joy-input--wrapper-has-icon":!!n.icon,"joy-input--wrapper---clearable":n.clearable,"joy-input--wrapper-unit":!!n.unit,"joy-input--wrapper-margin":!e.unref(W)}])},[e.createElementVNode("input",e.mergeProps(s.$attrs,{id:n.name,ref_key:"input",ref:d,class:[{"joy-input--field-disabled":e.unref(u).disabled,"joy-input--field-invalid":n.invalid}],type:B.value,value:t.modelValue,onFocus:l[0]||(l[0]=(...c)=>r.onFocus&&r.onFocus(...c)),onBlur:l[1]||(l[1]=(...c)=>r.onBlur&&r.onBlur(...c)),onInput:l[2]||(l[2]=(...c)=>r.onInput&&r.onInput(...c))}),null,16,q),e.unref(F)?(e.openBlock(),e.createElementBlock("joy-icon",{key:0,size:"xxsmall",name:"cross",class:"joy-input--clear",onClick:l[3]||(l[3]=(...c)=>r.clearValue&&r.clearValue(...c))})):e.createCommentVNode("",!0),n.unit?(e.openBlock(),e.createElementBlock("div",{key:1,"data-unit":n.unit,class:"joy-input--unit"},null,8,A)):e.createCommentVNode("",!0)],2)],2)],2))}}),U="",S=p(O,[["__scopeId","data-v-2249f4f9"]]),g=e.defineComponent({__name:"JoyWrapper",props:{justify:{type:String,default:"flex-start"},align:{type:String,default:"center"},direction:{type:String,default:"row"},wrap:{type:String,default:"wrap"}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["joy-wrapper",`joy-wrapper--justify-${t.justify}`,`joy-wrapper--align-${t.align}`,`joy-wrapper--direction-${t.direction}`,`joy-wrapper--wrap-${t.wrap}`])},[e.renderSlot(o.$slots,"default")],2))}}),G="",P={install:t=>{t.component("JoyButton",_),t.component("JoyInput",S),t.component("JoyLabel",m),t.component("JoySpinner",y),t.component("JoyWrapper",g)}};a.JoyButton=_,a.JoyInput=S,a.JoyLabel=m,a.JoySpinner=y,a.JoyVuePlugin=P,a.JoyWrapper=g,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maltjoy/core-vue",
-  "version": "1.0.0-alpha.1.1",
+  "version": "1.0.0-alpha.2",
   "type": "module",
   "files": [
     "dist",