@davincihealthcare/elty-design-system-vue 1.89.1 → 1.90.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/forms/ElInputDate.vue.d.ts +11 -0
- package/dist/src/forms/ElInputCheckbox.vue.cjs2.js +1 -1
- package/dist/src/forms/ElInputCheckbox.vue.cjs2.js.map +1 -1
- package/dist/src/forms/ElInputCheckbox.vue.esm2.js +1 -1
- package/dist/src/forms/ElInputCheckbox.vue.esm2.js.map +1 -1
- package/dist/src/forms/ElInputDate.vue.cjs2.js +1 -1
- package/dist/src/forms/ElInputDate.vue.cjs2.js.map +1 -1
- package/dist/src/forms/ElInputDate.vue.esm2.js +1 -1
- package/dist/src/forms/ElInputDate.vue.esm2.js.map +1 -1
- package/dist/src/style.cjs +1 -1
- package/dist/src/style.css +1 -1
- package/package.json +1 -1
|
@@ -8,6 +8,11 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
8
8
|
type: PropType<ElInputDateType>;
|
|
9
9
|
default: string;
|
|
10
10
|
};
|
|
11
|
+
zone: {
|
|
12
|
+
type: StringConstructor;
|
|
13
|
+
default: undefined;
|
|
14
|
+
required: false;
|
|
15
|
+
};
|
|
11
16
|
modelValue: {
|
|
12
17
|
type: PropType<NumberValueType>;
|
|
13
18
|
};
|
|
@@ -74,6 +79,11 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
74
79
|
type: PropType<ElInputDateType>;
|
|
75
80
|
default: string;
|
|
76
81
|
};
|
|
82
|
+
zone: {
|
|
83
|
+
type: StringConstructor;
|
|
84
|
+
default: undefined;
|
|
85
|
+
required: false;
|
|
86
|
+
};
|
|
77
87
|
modelValue: {
|
|
78
88
|
type: PropType<NumberValueType>;
|
|
79
89
|
};
|
|
@@ -148,5 +158,6 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
148
158
|
min: number;
|
|
149
159
|
max: number;
|
|
150
160
|
validation: import('./validation-rules').InputValidation;
|
|
161
|
+
zone: string;
|
|
151
162
|
}, {}>;
|
|
152
163
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./ElInputContainer.vue.cjs2.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./ElInputContainer.vue.cjs2.js"),t=require("./input.cjs.js"),g=["id","name","checked","indeterminate","disabled","data-cy"],y={class:"flex gap-2 items-start"},k=["for"],h={key:0,class:"text-error mt-1 text-sm ml-8"},C=["xs","xxs"],v=["primary","secondary","brand-blue","brand-green","green","purple","indigo","yellow","orange","cyan","red","pink","rose","gray"],z=[!0,!1,"indeterminate"],V=e.defineComponent({__name:"ElInputCheckbox",props:{...t.withNumberElInputProps(),modelValue:{type:[Boolean,String],default:!1,required:!0},size:{type:String,default:"xs",required:!1},color:{type:String,default:"primary",required:!1},inputClass:{type:String,default:"text-neutral-darker"}},emits:["update:modelValue"],setup(r,{emit:i}){const n=r,s=i,u=e.computed(()=>n.modelValue||!1),b=e.computed(()=>[n.validation]),c=e.useSlots(),{value:a,errorMessage:o,uuid:d}=t.useInput(u,b,n.name,l=>{s("update:modelValue",l)}),m=()=>{n.disabled||(n.modelValue==="indeterminate"?a.value=!0:a.value=!a.value)};return(l,w)=>(e.openBlock(),e.createBlock(f.default,e.mergeProps(l.$attrs,{"hidden-error-message":!0,"no-icon":!0,name:e.unref(d)}),{after:e.withCtx(()=>[n.errorMessage!==!1&&(n.errorMessage||e.unref(o))&&!l.hiddenErrorMessage?(e.openBlock(),e.createElementBlock("p",h,e.toDisplayString(n.errorMessage||e.unref(o)),1)):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[e.createElementVNode("input",{id:e.unref(d),name:n.name,checked:typeof r.modelValue=="boolean"&&r.modelValue,indeterminate:r.modelValue==="indeterminate",type:"checkbox",class:"sr-only",disabled:l.disabled,"data-cy":l.label?`${l.label.trim().replaceAll(" ","")}-checkbox`:"checkbox",hidden:""},null,8,g),e.createElementVNode("div",y,[e.createElementVNode("label",{role:"checkbox",class:e.normalizeClass(["flex items-start justify-center gap-2",{"cursor-not-allowed":l.disabled,"cursor-pointer":!l.disabled}]),onClick:m},[e.createElementVNode("div",{class:e.normalizeClass(["flex justify-center items-center",{"h-6 w-6":r.size==="xs","h-5 w-5":r.size==="xxs"}])},[e.createElementVNode("div",{class:e.normalizeClass(["rounded focus:ring-0 flex items-center justify-center shrink-0",{"h-5 w-5":r.size==="xs","h-4 w-4":r.size==="xxs","border-2":!e.unref(a),"border-neutral-inactive":!e.unref(a)&&l.disabled,"border-neutral-500":(r.color==="primary"||r.color==="secondary")&&!e.unref(a)&&!l.disabled,"border-brandBlue-500":r.color==="brand-blue"&&!e.unref(a)&&!l.disabled,"border-brandGreen-500":r.color==="brand-green"&&!e.unref(a)&&!l.disabled,"border-green-500":r.color==="green"&&!e.unref(a)&&!l.disabled,"border-purple-500":r.color==="purple"&&!e.unref(a)&&!l.disabled,"border-indigo-500":r.color==="indigo"&&!e.unref(a)&&!l.disabled,"border-yellow-500":r.color==="yellow"&&!e.unref(a)&&!l.disabled,"border-orange-500":r.color==="orange"&&!e.unref(a)&&!l.disabled,"border-cyan-500":r.color==="cyan"&&!e.unref(a)&&!l.disabled,"border-pink-500":r.color==="pink"&&!e.unref(a)&&!l.disabled,"border-rose-500":r.color==="rose"&&!e.unref(a)&&!l.disabled,"border-gray-500":r.color==="gray"&&!e.unref(a)&&!l.disabled,"border-red-500":r.color==="red"&&!e.unref(a)&&!l.disabled||(n.errorMessage===!1?!1:n.errorMessage||e.unref(o))&&!l.hiddenErrorMessage,"bg-neutral-inactive":e.unref(a)&&l.disabled,"bg-primary-active":r.color==="primary"&&e.unref(a)&&!l.disabled,"bg-secondary-active":r.color==="secondary"&&e.unref(a)&&!l.disabled,"bg-brandBlue-500":r.color==="brand-blue"&&e.unref(a)&&!l.disabled,"bg-brandGreen-500":r.color==="brand-green"&&e.unref(a)&&!l.disabled,"bg-green-500":r.color==="green"&&e.unref(a)&&!l.disabled,"bg-purple-500":r.color==="purple"&&e.unref(a)&&!l.disabled,"bg-indigo-500":r.color==="indigo"&&e.unref(a)&&!l.disabled,"bg-yellow-500":r.color==="yellow"&&e.unref(a)&&!l.disabled,"bg-orange-500":r.color==="orange"&&e.unref(a)&&!l.disabled,"bg-cyan-500":r.color==="cyan"&&e.unref(a)&&!l.disabled,"bg-red-500":r.color==="red"&&e.unref(a)&&!l.disabled,"bg-pink-500":r.color==="pink"&&e.unref(a)&&!l.disabled,"bg-rose-500":r.color==="rose"&&e.unref(a)&&!l.disabled,"bg-gray-500":r.color==="gray"&&e.unref(a)&&!l.disabled,inputClass:r.inputClass}])},[r.modelValue==="indeterminate"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["bg-white",{"h-[0.2rem] w-3":r.size==="xs","h-[0.15rem] w-[0.6rem]":r.size==="xxs"}])},null,2)):e.unref(a)?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["border border-neutral-inverse rotate-45 border-t-0 border-l-0",{"w-[0.5rem] h-[0.8rem] border-b-[0.2rem] border-r-[0.2rem] -mt-[0.15rem]":r.size==="xs","w-[0.35rem] h-[0.7rem] border-b-[0.15rem] border-r-[0.15rem] -mt-[0.15rem]":r.size==="xxs"}])},null,2)):e.createCommentVNode("",!0)],2)],2),l.label?(e.openBlock(),e.createElementBlock("div",{key:0,for:e.unref(d),class:e.normalizeClass(["font-normal text-left",{"text-base mt-[0.1rem]":r.size==="xs","text-sm mt-[0.05rem]":r.size==="xxs","text-neutral-darker cursor-pointer":!l.disabled,"text-neutral-inactive cursor-not-allowed":l.disabled}])},e.toDisplayString(l.label),11,k)):e.createCommentVNode("",!0)],2),e.unref(c).default?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["font-normal text-left",{"text-base mt-[0.1rem]":r.size==="xs","text-sm mt-[0.05rem]":r.size==="xxs","text-neutral-darker":e.unref(a)&&!l.disabled,"text-neutral-inactive":l.disabled}])},[e.renderSlot(l.$slots,"default")],2)):e.createCommentVNode("",!0)])]),_:3},16,["name"]))}});exports.default=V;exports.elInputCheckboxColors=v;exports.elInputCheckboxModelValues=z;exports.elInputCheckboxSizes=C;
|
|
2
2
|
//# sourceMappingURL=ElInputCheckbox.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputCheckbox.vue.cjs2.js","sources":["../../../src/forms/ElInputCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputCheckboxSizes = ['xs', 'xxs'] as const;\nexport type ElInputCheckboxSizes = (typeof elInputCheckboxSizes)[number];\n\nexport const elInputCheckboxColors = [\n 'primary',\n 'secondary',\n 'brand-blue',\n 'brand-green',\n 'green',\n 'purple',\n 'indigo',\n 'yellow',\n 'orange',\n 'cyan',\n 'red',\n 'pink',\n 'rose',\n 'gray',\n] as const;\nexport type ElInputCheckboxColors = (typeof elInputCheckboxColors)[number];\n\nexport const elInputCheckboxModelValues = [true, false, 'indeterminate'] as const;\nexport type ElInputCheckboxModelValues = (typeof elInputCheckboxModelValues)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType, useSlots } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, withNumberElInputProps } from '@/forms/input';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n modelValue: {\n type: [Boolean, String] as PropType<ElInputCheckboxModelValues>,\n default: false,\n required: true,\n },\n size: {\n type: String as PropType<ElInputCheckboxSizes>,\n default: 'xs',\n required: false,\n },\n color: {\n type: String as PropType<ElInputCheckboxColors>,\n default: 'primary',\n required: false,\n },\n inputClass: {\n type: String,\n default: 'text-neutral-darker',\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', val: ElInputCheckboxModelValues): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue || false);\nconst computedValidation = computed(() => [props.validation]);\n\nconst slots = useSlots();\n\nconst { value, errorMessage, uuid } = useInput(\n computedModelValue,\n computedValidation,\n props.name,\n (newValue: ElInputCheckboxModelValues) => {\n emit('update:modelValue', newValue);\n },\n);\n\nconst toggleCheckbox = () => {\n if (props.disabled) return;\n if (props.modelValue === 'indeterminate') {\n value.value = true;\n } else {\n value.value = !value.value;\n }\n};\n</script>\n\n<template>\n <ElInputContainer
|
|
1
|
+
{"version":3,"file":"ElInputCheckbox.vue.cjs2.js","sources":["../../../src/forms/ElInputCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputCheckboxSizes = ['xs', 'xxs'] as const;\nexport type ElInputCheckboxSizes = (typeof elInputCheckboxSizes)[number];\n\nexport const elInputCheckboxColors = [\n 'primary',\n 'secondary',\n 'brand-blue',\n 'brand-green',\n 'green',\n 'purple',\n 'indigo',\n 'yellow',\n 'orange',\n 'cyan',\n 'red',\n 'pink',\n 'rose',\n 'gray',\n] as const;\nexport type ElInputCheckboxColors = (typeof elInputCheckboxColors)[number];\n\nexport const elInputCheckboxModelValues = [true, false, 'indeterminate'] as const;\nexport type ElInputCheckboxModelValues = (typeof elInputCheckboxModelValues)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType, useSlots } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, withNumberElInputProps } from '@/forms/input';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n modelValue: {\n type: [Boolean, String] as PropType<ElInputCheckboxModelValues>,\n default: false,\n required: true,\n },\n size: {\n type: String as PropType<ElInputCheckboxSizes>,\n default: 'xs',\n required: false,\n },\n color: {\n type: String as PropType<ElInputCheckboxColors>,\n default: 'primary',\n required: false,\n },\n inputClass: {\n type: String,\n default: 'text-neutral-darker',\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', val: ElInputCheckboxModelValues): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue || false);\nconst computedValidation = computed(() => [props.validation]);\n\nconst slots = useSlots();\n\nconst { value, errorMessage, uuid } = useInput(\n computedModelValue,\n computedValidation,\n props.name,\n (newValue: ElInputCheckboxModelValues) => {\n emit('update:modelValue', newValue);\n },\n);\n\nconst toggleCheckbox = () => {\n if (props.disabled) return;\n if (props.modelValue === 'indeterminate') {\n value.value = true;\n } else {\n value.value = !value.value;\n }\n};\n</script>\n\n<template>\n <ElInputContainer v-bind=\"$attrs\" :hidden-error-message=\"true\" :no-icon=\"true\" :name=\"uuid\">\n <input\n :id=\"uuid\"\n :name=\"props.name\"\n :checked=\"typeof modelValue === 'boolean' && modelValue\"\n :indeterminate=\"modelValue === 'indeterminate'\"\n type=\"checkbox\"\n class=\"sr-only\"\n :disabled=\"disabled\"\n :data-cy=\"label ? `${label.trim().replaceAll(' ', '')}-checkbox` : 'checkbox'\"\n hidden\n />\n\n <div class=\"flex gap-2 items-start\">\n <label\n role=\"checkbox\"\n class=\"flex items-start justify-center gap-2\"\n :class=\"{ 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }\"\n @click=\"toggleCheckbox\"\n >\n <!-- Checkbox container -->\n <div\n class=\"flex justify-center items-center\"\n :class=\"{\n 'h-6 w-6': size === 'xs',\n 'h-5 w-5': size === 'xxs',\n }\"\n >\n <!-- Checkbox border/background -->\n <div\n class=\"rounded focus:ring-0 flex items-center justify-center shrink-0\"\n :class=\"{\n 'h-5 w-5': size === 'xs',\n 'h-4 w-4': size === 'xxs',\n 'border-2': !value,\n 'border-neutral-inactive': !value && disabled,\n 'border-neutral-500': (color === 'primary' || color === 'secondary') && !value && !disabled,\n 'border-brandBlue-500': color === 'brand-blue' && !value && !disabled,\n 'border-brandGreen-500': color === 'brand-green' && !value && !disabled,\n 'border-green-500': color === 'green' && !value && !disabled,\n 'border-purple-500': color === 'purple' && !value && !disabled,\n 'border-indigo-500': color === 'indigo' && !value && !disabled,\n 'border-yellow-500': color === 'yellow' && !value && !disabled,\n 'border-orange-500': color === 'orange' && !value && !disabled,\n 'border-cyan-500': color === 'cyan' && !value && !disabled,\n 'border-pink-500': color === 'pink' && !value && !disabled,\n 'border-rose-500': color === 'rose' && !value && !disabled,\n 'border-gray-500': color === 'gray' && !value && !disabled,\n 'border-red-500':\n (color === 'red' && !value && !disabled) ||\n ((props.errorMessage === false ? false : props.errorMessage || errorMessage) && !hiddenErrorMessage),\n 'bg-neutral-inactive': value && disabled,\n 'bg-primary-active': color === 'primary' && value && !disabled,\n 'bg-secondary-active': color === 'secondary' && value && !disabled,\n 'bg-brandBlue-500': color === 'brand-blue' && value && !disabled,\n 'bg-brandGreen-500': color === 'brand-green' && value && !disabled,\n 'bg-green-500': color === 'green' && value && !disabled,\n 'bg-purple-500': color === 'purple' && value && !disabled,\n 'bg-indigo-500': color === 'indigo' && value && !disabled,\n 'bg-yellow-500': color === 'yellow' && value && !disabled,\n 'bg-orange-500': color === 'orange' && value && !disabled,\n 'bg-cyan-500': color === 'cyan' && value && !disabled,\n 'bg-red-500': color === 'red' && value && !disabled,\n 'bg-pink-500': color === 'pink' && value && !disabled,\n 'bg-rose-500': color === 'rose' && value && !disabled,\n 'bg-gray-500': color === 'gray' && value && !disabled,\n inputClass,\n }\"\n >\n <!-- Minus icon -->\n <div\n v-if=\"modelValue === 'indeterminate'\"\n class=\"bg-white\"\n :class=\"{\n 'h-[0.2rem] w-3': size === 'xs',\n 'h-[0.15rem] w-[0.6rem]': size === 'xxs',\n }\"\n ></div>\n\n <!-- Check icon -->\n <div\n v-else-if=\"value\"\n class=\"border border-neutral-inverse rotate-45 border-t-0 border-l-0\"\n :class=\"{\n 'w-[0.5rem] h-[0.8rem] border-b-[0.2rem] border-r-[0.2rem] -mt-[0.15rem]': size === 'xs',\n 'w-[0.35rem] h-[0.7rem] border-b-[0.15rem] border-r-[0.15rem] -mt-[0.15rem]': size === 'xxs',\n }\"\n ></div>\n </div>\n </div>\n\n <div\n v-if=\"label\"\n :for=\"uuid\"\n class=\"font-normal text-left\"\n :class=\"{\n 'text-base mt-[0.1rem]': size === 'xs',\n 'text-sm mt-[0.05rem]': size === 'xxs',\n 'text-neutral-darker cursor-pointer': !disabled,\n 'text-neutral-inactive cursor-not-allowed': disabled,\n }\"\n >\n {{ label }}\n </div>\n </label>\n\n <div\n v-if=\"slots.default\"\n class=\"font-normal text-left\"\n :class=\"{\n 'text-base mt-[0.1rem]': size === 'xs',\n 'text-sm mt-[0.05rem]': size === 'xxs',\n 'text-neutral-darker': value && !disabled,\n 'text-neutral-inactive': disabled,\n }\"\n >\n <slot />\n </div>\n </div>\n <template #after>\n <p\n v-if=\"!!(props.errorMessage === false ? false : props.errorMessage || errorMessage) && !hiddenErrorMessage\"\n class=\"text-error mt-1 text-sm ml-8\"\n >\n {{ props.errorMessage || errorMessage }}\n </p>\n </template>\n </ElInputContainer>\n</template>\n"],"names":["elInputCheckboxSizes","elInputCheckboxColors","elInputCheckboxModelValues","props","__props","emit","__emit","computedModelValue","computed","computedValidation","slots","useSlots","value","errorMessage","uuid","useInput","newValue","toggleCheckbox"],"mappings":"sWACaA,EAAuB,CAAC,KAAM,KAAK,EAGnCC,EAAwB,CACnC,UACA,YACA,aACA,cACA,QACA,SACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,MACF,EAGaC,EAA6B,CAAC,GAAM,GAAO,eAAe,mVASvE,MAAMC,EAAQC,EAuBRC,EAAOC,EAIPC,EAAqBC,EAAAA,SAAS,IAAML,EAAM,YAAc,EAAK,EAC7DM,EAAqBD,EAAAA,SAAS,IAAM,CAACL,EAAM,UAAU,CAAC,EAEtDO,EAAQC,EAAAA,WAER,CAAE,MAAAC,EAAO,aAAAC,EAAc,KAAAC,CAAS,EAAAC,EAAA,SACpCR,EACAE,EACAN,EAAM,KACLa,GAAyC,CACxCX,EAAK,oBAAqBW,CAAQ,CACpC,CAAA,EAGIC,EAAiB,IAAM,CACvBd,EAAM,WACNA,EAAM,aAAe,gBACvBS,EAAM,MAAQ,GAERA,EAAA,MAAQ,CAACA,EAAM,MACvB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as z,computed as m,useSlots as C,openBlock as i,createBlock as V,mergeProps as M,unref as l,withCtx as c,createElementBlock as n,toDisplayString as g,createCommentVNode as t,createElementVNode as s,normalizeClass as o,renderSlot as S}from"vue";import x from"./ElInputContainer.vue.esm2.js";import{withNumberElInputProps as B,useInput as E}from"./input.esm.js";const I=["id","name","checked","indeterminate","disabled","data-cy"],$={class:"flex gap-2 items-start"},j=["for"],q={key:0,class:"text-error mt-1 text-sm ml-8"},D=["xs","xxs"],F=["primary","secondary","brand-blue","brand-green","green","purple","indigo","yellow","orange","cyan","red","pink","rose","gray"],H=[!0,!1,"indeterminate"],J=z({__name:"ElInputCheckbox",props:{...B(),modelValue:{type:[Boolean,String],default:!1,required:!0},size:{type:String,default:"xs",required:!1},color:{type:String,default:"primary",required:!1},inputClass:{type:String,default:"text-neutral-darker"}},emits:["update:modelValue"],setup(e,{emit:f}){const d=e,y=f,h=m(()=>d.modelValue||!1),k=m(()=>[d.validation]),v=C(),{value:a,errorMessage:b,uuid:u}=E(h,k,d.name,r=>{y("update:modelValue",r)}),w=()=>{d.disabled||(d.modelValue==="indeterminate"?a.value=!0:a.value=!a.value)};return(r,N)=>(i(),V(x,M(r.$attrs,{"hidden-error-message":!0,"no-icon":!0,name:l(u)}),{after:c(()=>[d.errorMessage!==!1&&(d.errorMessage||l(b))&&!r.hiddenErrorMessage?(i(),n("p",q,g(d.errorMessage||l(b)),1)):t("",!0)]),default:c(()=>[s("input",{id:l(u),name:d.name,checked:typeof e.modelValue=="boolean"&&e.modelValue,indeterminate:e.modelValue==="indeterminate",type:"checkbox",class:"sr-only",disabled:r.disabled,"data-cy":r.label?`${r.label.trim().replaceAll(" ","")}-checkbox`:"checkbox",hidden:""},null,8,I),s("div",$,[s("label",{role:"checkbox",class:o(["flex items-start justify-center gap-2",{"cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}]),onClick:w},[s("div",{class:o(["flex justify-center items-center",{"h-6 w-6":e.size==="xs","h-5 w-5":e.size==="xxs"}])},[s("div",{class:o(["rounded focus:ring-0 flex items-center justify-center shrink-0",{"h-5 w-5":e.size==="xs","h-4 w-4":e.size==="xxs","border-2":!l(a),"border-neutral-inactive":!l(a)&&r.disabled,"border-neutral-500":(e.color==="primary"||e.color==="secondary")&&!l(a)&&!r.disabled,"border-brandBlue-500":e.color==="brand-blue"&&!l(a)&&!r.disabled,"border-brandGreen-500":e.color==="brand-green"&&!l(a)&&!r.disabled,"border-green-500":e.color==="green"&&!l(a)&&!r.disabled,"border-purple-500":e.color==="purple"&&!l(a)&&!r.disabled,"border-indigo-500":e.color==="indigo"&&!l(a)&&!r.disabled,"border-yellow-500":e.color==="yellow"&&!l(a)&&!r.disabled,"border-orange-500":e.color==="orange"&&!l(a)&&!r.disabled,"border-cyan-500":e.color==="cyan"&&!l(a)&&!r.disabled,"border-pink-500":e.color==="pink"&&!l(a)&&!r.disabled,"border-rose-500":e.color==="rose"&&!l(a)&&!r.disabled,"border-gray-500":e.color==="gray"&&!l(a)&&!r.disabled,"border-red-500":e.color==="red"&&!l(a)&&!r.disabled||(d.errorMessage===!1?!1:d.errorMessage||l(b))&&!r.hiddenErrorMessage,"bg-neutral-inactive":l(a)&&r.disabled,"bg-primary-active":e.color==="primary"&&l(a)&&!r.disabled,"bg-secondary-active":e.color==="secondary"&&l(a)&&!r.disabled,"bg-brandBlue-500":e.color==="brand-blue"&&l(a)&&!r.disabled,"bg-brandGreen-500":e.color==="brand-green"&&l(a)&&!r.disabled,"bg-green-500":e.color==="green"&&l(a)&&!r.disabled,"bg-purple-500":e.color==="purple"&&l(a)&&!r.disabled,"bg-indigo-500":e.color==="indigo"&&l(a)&&!r.disabled,"bg-yellow-500":e.color==="yellow"&&l(a)&&!r.disabled,"bg-orange-500":e.color==="orange"&&l(a)&&!r.disabled,"bg-cyan-500":e.color==="cyan"&&l(a)&&!r.disabled,"bg-red-500":e.color==="red"&&l(a)&&!r.disabled,"bg-pink-500":e.color==="pink"&&l(a)&&!r.disabled,"bg-rose-500":e.color==="rose"&&l(a)&&!r.disabled,"bg-gray-500":e.color==="gray"&&l(a)&&!r.disabled,inputClass:e.inputClass}])},[e.modelValue==="indeterminate"?(i(),n("div",{key:0,class:o(["bg-white",{"h-[0.2rem] w-3":e.size==="xs","h-[0.15rem] w-[0.6rem]":e.size==="xxs"}])},null,2)):l(a)?(i(),n("div",{key:1,class:o(["border border-neutral-inverse rotate-45 border-t-0 border-l-0",{"w-[0.5rem] h-[0.8rem] border-b-[0.2rem] border-r-[0.2rem] -mt-[0.15rem]":e.size==="xs","w-[0.35rem] h-[0.7rem] border-b-[0.15rem] border-r-[0.15rem] -mt-[0.15rem]":e.size==="xxs"}])},null,2)):t("",!0)],2)],2),r.label?(i(),n("div",{key:0,for:l(u),class:o(["font-normal text-left",{"text-base mt-[0.1rem]":e.size==="xs","text-sm mt-[0.05rem]":e.size==="xxs","text-neutral-darker cursor-pointer":!r.disabled,"text-neutral-inactive cursor-not-allowed":r.disabled}])},g(r.label),11,j)):t("",!0)],2),l(v).default?(i(),n("div",{key:0,class:o(["font-normal text-left",{"text-base mt-[0.1rem]":e.size==="xs","text-sm mt-[0.05rem]":e.size==="xxs","text-neutral-darker":l(a)&&!r.disabled,"text-neutral-inactive":r.disabled}])},[S(r.$slots,"default")],2)):t("",!0)])]),_:3},16,["name"]))}});export{J as default,F as elInputCheckboxColors,H as elInputCheckboxModelValues,D as elInputCheckboxSizes};
|
|
2
2
|
//# sourceMappingURL=ElInputCheckbox.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputCheckbox.vue.esm2.js","sources":["../../../src/forms/ElInputCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputCheckboxSizes = ['xs', 'xxs'] as const;\nexport type ElInputCheckboxSizes = (typeof elInputCheckboxSizes)[number];\n\nexport const elInputCheckboxColors = [\n 'primary',\n 'secondary',\n 'brand-blue',\n 'brand-green',\n 'green',\n 'purple',\n 'indigo',\n 'yellow',\n 'orange',\n 'cyan',\n 'red',\n 'pink',\n 'rose',\n 'gray',\n] as const;\nexport type ElInputCheckboxColors = (typeof elInputCheckboxColors)[number];\n\nexport const elInputCheckboxModelValues = [true, false, 'indeterminate'] as const;\nexport type ElInputCheckboxModelValues = (typeof elInputCheckboxModelValues)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType, useSlots } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, withNumberElInputProps } from '@/forms/input';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n modelValue: {\n type: [Boolean, String] as PropType<ElInputCheckboxModelValues>,\n default: false,\n required: true,\n },\n size: {\n type: String as PropType<ElInputCheckboxSizes>,\n default: 'xs',\n required: false,\n },\n color: {\n type: String as PropType<ElInputCheckboxColors>,\n default: 'primary',\n required: false,\n },\n inputClass: {\n type: String,\n default: 'text-neutral-darker',\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', val: ElInputCheckboxModelValues): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue || false);\nconst computedValidation = computed(() => [props.validation]);\n\nconst slots = useSlots();\n\nconst { value, errorMessage, uuid } = useInput(\n computedModelValue,\n computedValidation,\n props.name,\n (newValue: ElInputCheckboxModelValues) => {\n emit('update:modelValue', newValue);\n },\n);\n\nconst toggleCheckbox = () => {\n if (props.disabled) return;\n if (props.modelValue === 'indeterminate') {\n value.value = true;\n } else {\n value.value = !value.value;\n }\n};\n</script>\n\n<template>\n <ElInputContainer
|
|
1
|
+
{"version":3,"file":"ElInputCheckbox.vue.esm2.js","sources":["../../../src/forms/ElInputCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputCheckboxSizes = ['xs', 'xxs'] as const;\nexport type ElInputCheckboxSizes = (typeof elInputCheckboxSizes)[number];\n\nexport const elInputCheckboxColors = [\n 'primary',\n 'secondary',\n 'brand-blue',\n 'brand-green',\n 'green',\n 'purple',\n 'indigo',\n 'yellow',\n 'orange',\n 'cyan',\n 'red',\n 'pink',\n 'rose',\n 'gray',\n] as const;\nexport type ElInputCheckboxColors = (typeof elInputCheckboxColors)[number];\n\nexport const elInputCheckboxModelValues = [true, false, 'indeterminate'] as const;\nexport type ElInputCheckboxModelValues = (typeof elInputCheckboxModelValues)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType, useSlots } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, withNumberElInputProps } from '@/forms/input';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n modelValue: {\n type: [Boolean, String] as PropType<ElInputCheckboxModelValues>,\n default: false,\n required: true,\n },\n size: {\n type: String as PropType<ElInputCheckboxSizes>,\n default: 'xs',\n required: false,\n },\n color: {\n type: String as PropType<ElInputCheckboxColors>,\n default: 'primary',\n required: false,\n },\n inputClass: {\n type: String,\n default: 'text-neutral-darker',\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', val: ElInputCheckboxModelValues): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue || false);\nconst computedValidation = computed(() => [props.validation]);\n\nconst slots = useSlots();\n\nconst { value, errorMessage, uuid } = useInput(\n computedModelValue,\n computedValidation,\n props.name,\n (newValue: ElInputCheckboxModelValues) => {\n emit('update:modelValue', newValue);\n },\n);\n\nconst toggleCheckbox = () => {\n if (props.disabled) return;\n if (props.modelValue === 'indeterminate') {\n value.value = true;\n } else {\n value.value = !value.value;\n }\n};\n</script>\n\n<template>\n <ElInputContainer v-bind=\"$attrs\" :hidden-error-message=\"true\" :no-icon=\"true\" :name=\"uuid\">\n <input\n :id=\"uuid\"\n :name=\"props.name\"\n :checked=\"typeof modelValue === 'boolean' && modelValue\"\n :indeterminate=\"modelValue === 'indeterminate'\"\n type=\"checkbox\"\n class=\"sr-only\"\n :disabled=\"disabled\"\n :data-cy=\"label ? `${label.trim().replaceAll(' ', '')}-checkbox` : 'checkbox'\"\n hidden\n />\n\n <div class=\"flex gap-2 items-start\">\n <label\n role=\"checkbox\"\n class=\"flex items-start justify-center gap-2\"\n :class=\"{ 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }\"\n @click=\"toggleCheckbox\"\n >\n <!-- Checkbox container -->\n <div\n class=\"flex justify-center items-center\"\n :class=\"{\n 'h-6 w-6': size === 'xs',\n 'h-5 w-5': size === 'xxs',\n }\"\n >\n <!-- Checkbox border/background -->\n <div\n class=\"rounded focus:ring-0 flex items-center justify-center shrink-0\"\n :class=\"{\n 'h-5 w-5': size === 'xs',\n 'h-4 w-4': size === 'xxs',\n 'border-2': !value,\n 'border-neutral-inactive': !value && disabled,\n 'border-neutral-500': (color === 'primary' || color === 'secondary') && !value && !disabled,\n 'border-brandBlue-500': color === 'brand-blue' && !value && !disabled,\n 'border-brandGreen-500': color === 'brand-green' && !value && !disabled,\n 'border-green-500': color === 'green' && !value && !disabled,\n 'border-purple-500': color === 'purple' && !value && !disabled,\n 'border-indigo-500': color === 'indigo' && !value && !disabled,\n 'border-yellow-500': color === 'yellow' && !value && !disabled,\n 'border-orange-500': color === 'orange' && !value && !disabled,\n 'border-cyan-500': color === 'cyan' && !value && !disabled,\n 'border-pink-500': color === 'pink' && !value && !disabled,\n 'border-rose-500': color === 'rose' && !value && !disabled,\n 'border-gray-500': color === 'gray' && !value && !disabled,\n 'border-red-500':\n (color === 'red' && !value && !disabled) ||\n ((props.errorMessage === false ? false : props.errorMessage || errorMessage) && !hiddenErrorMessage),\n 'bg-neutral-inactive': value && disabled,\n 'bg-primary-active': color === 'primary' && value && !disabled,\n 'bg-secondary-active': color === 'secondary' && value && !disabled,\n 'bg-brandBlue-500': color === 'brand-blue' && value && !disabled,\n 'bg-brandGreen-500': color === 'brand-green' && value && !disabled,\n 'bg-green-500': color === 'green' && value && !disabled,\n 'bg-purple-500': color === 'purple' && value && !disabled,\n 'bg-indigo-500': color === 'indigo' && value && !disabled,\n 'bg-yellow-500': color === 'yellow' && value && !disabled,\n 'bg-orange-500': color === 'orange' && value && !disabled,\n 'bg-cyan-500': color === 'cyan' && value && !disabled,\n 'bg-red-500': color === 'red' && value && !disabled,\n 'bg-pink-500': color === 'pink' && value && !disabled,\n 'bg-rose-500': color === 'rose' && value && !disabled,\n 'bg-gray-500': color === 'gray' && value && !disabled,\n inputClass,\n }\"\n >\n <!-- Minus icon -->\n <div\n v-if=\"modelValue === 'indeterminate'\"\n class=\"bg-white\"\n :class=\"{\n 'h-[0.2rem] w-3': size === 'xs',\n 'h-[0.15rem] w-[0.6rem]': size === 'xxs',\n }\"\n ></div>\n\n <!-- Check icon -->\n <div\n v-else-if=\"value\"\n class=\"border border-neutral-inverse rotate-45 border-t-0 border-l-0\"\n :class=\"{\n 'w-[0.5rem] h-[0.8rem] border-b-[0.2rem] border-r-[0.2rem] -mt-[0.15rem]': size === 'xs',\n 'w-[0.35rem] h-[0.7rem] border-b-[0.15rem] border-r-[0.15rem] -mt-[0.15rem]': size === 'xxs',\n }\"\n ></div>\n </div>\n </div>\n\n <div\n v-if=\"label\"\n :for=\"uuid\"\n class=\"font-normal text-left\"\n :class=\"{\n 'text-base mt-[0.1rem]': size === 'xs',\n 'text-sm mt-[0.05rem]': size === 'xxs',\n 'text-neutral-darker cursor-pointer': !disabled,\n 'text-neutral-inactive cursor-not-allowed': disabled,\n }\"\n >\n {{ label }}\n </div>\n </label>\n\n <div\n v-if=\"slots.default\"\n class=\"font-normal text-left\"\n :class=\"{\n 'text-base mt-[0.1rem]': size === 'xs',\n 'text-sm mt-[0.05rem]': size === 'xxs',\n 'text-neutral-darker': value && !disabled,\n 'text-neutral-inactive': disabled,\n }\"\n >\n <slot />\n </div>\n </div>\n <template #after>\n <p\n v-if=\"!!(props.errorMessage === false ? false : props.errorMessage || errorMessage) && !hiddenErrorMessage\"\n class=\"text-error mt-1 text-sm ml-8\"\n >\n {{ props.errorMessage || errorMessage }}\n </p>\n </template>\n </ElInputContainer>\n</template>\n"],"names":["elInputCheckboxSizes","elInputCheckboxColors","elInputCheckboxModelValues","props","__props","emit","__emit","computedModelValue","computed","computedValidation","slots","useSlots","value","errorMessage","uuid","useInput","newValue","toggleCheckbox"],"mappings":"giBACaA,EAAuB,CAAC,KAAM,KAAK,EAGnCC,EAAwB,CACnC,UACA,YACA,aACA,cACA,QACA,SACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,MACF,EAGaC,EAA6B,CAAC,GAAM,GAAO,eAAe,4SASvE,MAAMC,EAAQC,EAuBRC,EAAOC,EAIPC,EAAqBC,EAAS,IAAML,EAAM,YAAc,EAAK,EAC7DM,EAAqBD,EAAS,IAAM,CAACL,EAAM,UAAU,CAAC,EAEtDO,EAAQC,IAER,CAAE,MAAAC,EAAO,aAAAC,EAAc,KAAAC,CAAS,EAAAC,EACpCR,EACAE,EACAN,EAAM,KACLa,GAAyC,CACxCX,EAAK,oBAAqBW,CAAQ,CACpC,CAAA,EAGIC,EAAiB,IAAM,CACvBd,EAAM,WACNA,EAAM,aAAe,gBACvBS,EAAM,MAAQ,GAERA,EAAA,MAAQ,CAACA,EAAM,MACvB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),h=require("./ElInputContainer.vue.cjs2.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),h=require("./ElInputContainer.vue.cjs2.js"),n=require("./input.cjs.js"),d=require("../../node_modules/luxon/src/datetime.cjs.js");require("../../node_modules/luxon/src/duration.cjs.js");const q=["id","name","type","placeholder","disabled","data-cy"],V=["date","datetime-local","time","month"],z=e.defineComponent({__name:"ElInputDate",props:{...n.withNumberElInputProps(),type:{type:String,default:"date"},zone:{type:String,default:void 0,required:!1}},emits:["update:modelValue","update:readableString"],setup(s,{emit:y}){const t=s,i=y,l=t.modelValue?d.default.fromSeconds(t.modelValue,{zone:t.zone}):void 0,m=e.computed(()=>{switch(t.type){case"date":return"yyyy-MM-dd";case"time":return"HH:mm";case"datetime-local":return"yyyy-MM-dd'T'HH:mm";default:return""}}),f=e.computed(()=>t.modelValue),v=e.computed(()=>[t.validation]),{value:o,errorMessage:g,uuid:p,fieldContext:b}=n.useInput(f,v,t.name,a=>{i("update:modelValue",a),i("update:readableString",u.value)}),u=e.computed({get:()=>o.value?d.default.fromSeconds(o.value,{zone:t.zone}).toFormat(m.value):"",set:a=>{if(a){let r=d.default.fromFormat(a,m.value,{zone:t.zone});t.type==="time"&&l&&(r=r.set({day:l.day,month:l.month,year:l.year})),o.value=Math.round(r.toSeconds())}else o.value=void 0}});return(a,r)=>(e.openBlock(),e.createBlock(h.default,e.mergeProps(a.$attrs,{name:e.unref(p),label:a.label,"error-message":t.errorMessage===!1?!1:t.errorMessage||e.unref(g),"hidden-error-message":a.hiddenErrorMessage,"set-required-mark":e.unref(n.showRequiredMark)([a.validation])}),{default:e.withCtx(({error:M})=>[e.withDirectives(e.createElementVNode("input",{id:e.unref(p),"onUpdate:modelValue":r[0]||(r[0]=c=>u.value=c),name:t.name,type:s.type,class:e.normalizeClass(["el-input",{error:M,"text-neutral-darker border-primary":u.value!==""}]),placeholder:a.placeholder,disabled:t.disabled,"data-cy":`${a.label.trim().replaceAll(" ","")}-input`,max:"9999-12-31",onBlur:r[1]||(r[1]=c=>e.unref(b).validate())},null,42,q),[[e.vModelDynamic,u.value]])]),_:1},16,["name","label","error-message","hidden-error-message","set-required-mark"]))}});exports.default=z;exports.elInputDateTypes=V;
|
|
2
2
|
//# sourceMappingURL=ElInputDate.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputDate.vue.cjs2.js","sources":["../../../src/forms/ElInputDate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputDateTypes = ['date', 'datetime-local', 'time', 'month'] as const;\nexport type ElInputDateType = (typeof elInputDateTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, NumberValueType, showRequiredMark, withNumberElInputProps } from '@/forms/input';\nimport { DateTime } from 'luxon';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n type: {\n type: String as PropType<ElInputDateType>,\n default: 'date',\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: NumberValueType): void;\n (event: 'update:readableString', value: string): void;\n}>();\n\nconst initialDate = props.modelValue ? DateTime.fromSeconds(props.modelValue) : undefined;\n\nconst dateFormat = computed(() => {\n switch (props.type) {\n case 'date':\n return 'yyyy-MM-dd';\n case 'time':\n return 'HH:mm';\n case 'datetime-local':\n // eslint-disable-next-line quotes\n return `yyyy-MM-dd'T'HH:mm`;\n default:\n return '';\n }\n});\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue);\n emit('update:readableString', valueToNumber.value);\n});\n\n// this is needed to have vee-validate only work on number values, this way we don't have to deal with date format, but only timestamps\nconst valueToNumber = computed<string>({\n get: () => {\n if (!value.value) return '';\n return DateTime.fromSeconds(value.value).toFormat(dateFormat.value);\n },\n set: (valueAsString: string) => {\n if (valueAsString) {\n let newDate = DateTime.fromFormat(valueAsString, dateFormat.value);\n if (props.type === 'time' && initialDate) {\n // when parsing from time, it loses reference of the actual date. Set it manually\n newDate = newDate.set({ day: initialDate.day, month: initialDate.month, year: initialDate.year });\n }\n value.value = Math.round(newDate.toSeconds());\n } else {\n value.value = undefined;\n }\n },\n});\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n :set-required-mark=\"showRequiredMark([validation])\"\n >\n <template #default=\"{ error }\">\n <input\n :id=\"uuid\"\n v-model=\"valueToNumber\"\n :name=\"props.name\"\n :type=\"type\"\n class=\"el-input\"\n :class=\"{\n error: error,\n 'text-neutral-darker border-primary': valueToNumber !== '',\n }\"\n :placeholder=\"placeholder\"\n :disabled=\"props.disabled\"\n :data-cy=\"`${label.trim().replaceAll(' ', '')}-input`\"\n max=\"9999-12-31\"\n @blur=\"fieldContext.validate()\"\n />\n </template>\n </ElInputContainer>\n</template>\n"],"names":["elInputDateTypes","props","__props","emit","__emit","initialDate","DateTime","dateFormat","computed","computedModelValue","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","valueToNumber","valueAsString","newDate"],"mappings":"6XACaA,EAAmB,CAAC,OAAQ,iBAAkB,OAAQ,OAAO,
|
|
1
|
+
{"version":3,"file":"ElInputDate.vue.cjs2.js","sources":["../../../src/forms/ElInputDate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputDateTypes = ['date', 'datetime-local', 'time', 'month'] as const;\nexport type ElInputDateType = (typeof elInputDateTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, NumberValueType, showRequiredMark, withNumberElInputProps } from '@/forms/input';\nimport { DateTime } from 'luxon';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n type: {\n type: String as PropType<ElInputDateType>,\n default: 'date',\n },\n zone: {\n type: String,\n default: undefined,\n required: false,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: NumberValueType): void;\n (event: 'update:readableString', value: string): void;\n}>();\n\nconst initialDate = props.modelValue ? DateTime.fromSeconds(props.modelValue, { zone: props.zone }) : undefined;\n\nconst dateFormat = computed(() => {\n switch (props.type) {\n case 'date':\n return 'yyyy-MM-dd';\n case 'time':\n return 'HH:mm';\n case 'datetime-local':\n // eslint-disable-next-line quotes\n return `yyyy-MM-dd'T'HH:mm`;\n default:\n return '';\n }\n});\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue);\n emit('update:readableString', valueToNumber.value);\n});\n\n// this is needed to have vee-validate only work on number values, this way we don't have to deal with date format, but only timestamps\nconst valueToNumber = computed<string>({\n get: () => {\n if (!value.value) return '';\n return DateTime.fromSeconds(value.value, { zone: props.zone }).toFormat(dateFormat.value);\n },\n set: (valueAsString: string) => {\n if (valueAsString) {\n let newDate = DateTime.fromFormat(valueAsString, dateFormat.value, { zone: props.zone });\n if (props.type === 'time' && initialDate) {\n // when parsing from time, it loses reference of the actual date. Set it manually\n newDate = newDate.set({ day: initialDate.day, month: initialDate.month, year: initialDate.year });\n }\n value.value = Math.round(newDate.toSeconds());\n } else {\n value.value = undefined;\n }\n },\n});\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n :set-required-mark=\"showRequiredMark([validation])\"\n >\n <template #default=\"{ error }\">\n <input\n :id=\"uuid\"\n v-model=\"valueToNumber\"\n :name=\"props.name\"\n :type=\"type\"\n class=\"el-input\"\n :class=\"{\n error: error,\n 'text-neutral-darker border-primary': valueToNumber !== '',\n }\"\n :placeholder=\"placeholder\"\n :disabled=\"props.disabled\"\n :data-cy=\"`${label.trim().replaceAll(' ', '')}-input`\"\n max=\"9999-12-31\"\n @blur=\"fieldContext.validate()\"\n />\n </template>\n </ElInputContainer>\n</template>\n"],"names":["elInputDateTypes","props","__props","emit","__emit","initialDate","DateTime","dateFormat","computed","computedModelValue","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","valueToNumber","valueAsString","newDate"],"mappings":"6XACaA,EAAmB,CAAC,OAAQ,iBAAkB,OAAQ,OAAO,wOAU1E,MAAMC,EAAQC,EAaRC,EAAOC,EAKPC,EAAcJ,EAAM,WAAaK,EAAA,QAAS,YAAYL,EAAM,WAAY,CAAE,KAAMA,EAAM,IAAK,CAAC,EAAI,OAEhGM,EAAaC,EAAAA,SAAS,IAAM,CAChC,OAAQP,EAAM,KAAM,CAClB,IAAK,OACI,MAAA,aACT,IAAK,OACI,MAAA,QACT,IAAK,iBAEI,MAAA,qBACT,QACS,MAAA,EACX,CAAA,CACD,EAEKQ,EAAqBD,EAAA,SAAS,IAAMP,EAAM,UAAU,EACpDS,EAAqBF,EAAAA,SAAS,IAAM,CAACP,EAAM,UAAU,CAAC,EAEtD,CAAE,MAAAU,EAAO,aAAAC,EAAc,KAAAC,EAAM,aAAAC,CAAiB,EAAAC,WAASN,EAAoBC,EAAoBT,EAAM,KAAkBe,GAAA,CAC3Hb,EAAK,oBAAqBa,CAAQ,EAC7Bb,EAAA,wBAAyBc,EAAc,KAAK,CAAA,CAClD,EAGKA,EAAgBT,EAAAA,SAAiB,CACrC,IAAK,IACEG,EAAM,MACJL,EAAS,QAAA,YAAYK,EAAM,MAAO,CAAE,KAAMV,EAAM,IAAM,CAAA,EAAE,SAASM,EAAW,KAAK,EAD/D,GAG3B,IAAMW,GAA0B,CAC9B,GAAIA,EAAe,CACb,IAAAC,EAAUb,EAAAA,QAAS,WAAWY,EAAeX,EAAW,MAAO,CAAE,KAAMN,EAAM,IAAM,CAAA,EACnFA,EAAM,OAAS,QAAUI,IAE3Bc,EAAUA,EAAQ,IAAI,CAAE,IAAKd,EAAY,IAAK,MAAOA,EAAY,MAAO,KAAMA,EAAY,IAAM,CAAA,GAElGM,EAAM,MAAQ,KAAK,MAAMQ,EAAQ,WAAW,CAAA,MAE5CR,EAAM,MAAQ,MAElB,CAAA,CACD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as M,computed as n,openBlock as V,createBlock as
|
|
1
|
+
import{defineComponent as M,computed as n,openBlock as V,createBlock as z,mergeProps as D,unref as r,withCtx as k,withDirectives as w,createElementVNode as S,normalizeClass as q,vModelDynamic as C}from"vue";import E from"./ElInputContainer.vue.esm2.js";import{withNumberElInputProps as H,useInput as I,showRequiredMark as T}from"./input.esm.js";import m from"../../node_modules/luxon/src/datetime.esm.js";import"../../node_modules/luxon/src/duration.esm.js";const $=["id","name","type","placeholder","disabled","data-cy"],U=["date","datetime-local","time","month"],j=M({__name:"ElInputDate",props:{...H(),type:{type:String,default:"date"},zone:{type:String,default:void 0,required:!1}},emits:["update:modelValue","update:readableString"],setup(i,{emit:y}){const e=i,s=y,o=e.modelValue?m.fromSeconds(e.modelValue,{zone:e.zone}):void 0,u=n(()=>{switch(e.type){case"date":return"yyyy-MM-dd";case"time":return"HH:mm";case"datetime-local":return"yyyy-MM-dd'T'HH:mm";default:return""}}),f=n(()=>e.modelValue),v=n(()=>[e.validation]),{value:l,errorMessage:g,uuid:p,fieldContext:h}=I(f,v,e.name,t=>{s("update:modelValue",t),s("update:readableString",d.value)}),d=n({get:()=>l.value?m.fromSeconds(l.value,{zone:e.zone}).toFormat(u.value):"",set:t=>{if(t){let a=m.fromFormat(t,u.value,{zone:e.zone});e.type==="time"&&o&&(a=a.set({day:o.day,month:o.month,year:o.year})),l.value=Math.round(a.toSeconds())}else l.value=void 0}});return(t,a)=>(V(),z(E,D(t.$attrs,{name:r(p),label:t.label,"error-message":e.errorMessage===!1?!1:e.errorMessage||r(g),"hidden-error-message":t.hiddenErrorMessage,"set-required-mark":r(T)([t.validation])}),{default:k(({error:b})=>[w(S("input",{id:r(p),"onUpdate:modelValue":a[0]||(a[0]=c=>d.value=c),name:e.name,type:i.type,class:q(["el-input",{error:b,"text-neutral-darker border-primary":d.value!==""}]),placeholder:t.placeholder,disabled:e.disabled,"data-cy":`${t.label.trim().replaceAll(" ","")}-input`,max:"9999-12-31",onBlur:a[1]||(a[1]=c=>r(h).validate())},null,42,$),[[C,d.value]])]),_:1},16,["name","label","error-message","hidden-error-message","set-required-mark"]))}});export{j as default,U as elInputDateTypes};
|
|
2
2
|
//# sourceMappingURL=ElInputDate.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputDate.vue.esm2.js","sources":["../../../src/forms/ElInputDate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputDateTypes = ['date', 'datetime-local', 'time', 'month'] as const;\nexport type ElInputDateType = (typeof elInputDateTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, NumberValueType, showRequiredMark, withNumberElInputProps } from '@/forms/input';\nimport { DateTime } from 'luxon';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n type: {\n type: String as PropType<ElInputDateType>,\n default: 'date',\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: NumberValueType): void;\n (event: 'update:readableString', value: string): void;\n}>();\n\nconst initialDate = props.modelValue ? DateTime.fromSeconds(props.modelValue) : undefined;\n\nconst dateFormat = computed(() => {\n switch (props.type) {\n case 'date':\n return 'yyyy-MM-dd';\n case 'time':\n return 'HH:mm';\n case 'datetime-local':\n // eslint-disable-next-line quotes\n return `yyyy-MM-dd'T'HH:mm`;\n default:\n return '';\n }\n});\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue);\n emit('update:readableString', valueToNumber.value);\n});\n\n// this is needed to have vee-validate only work on number values, this way we don't have to deal with date format, but only timestamps\nconst valueToNumber = computed<string>({\n get: () => {\n if (!value.value) return '';\n return DateTime.fromSeconds(value.value).toFormat(dateFormat.value);\n },\n set: (valueAsString: string) => {\n if (valueAsString) {\n let newDate = DateTime.fromFormat(valueAsString, dateFormat.value);\n if (props.type === 'time' && initialDate) {\n // when parsing from time, it loses reference of the actual date. Set it manually\n newDate = newDate.set({ day: initialDate.day, month: initialDate.month, year: initialDate.year });\n }\n value.value = Math.round(newDate.toSeconds());\n } else {\n value.value = undefined;\n }\n },\n});\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n :set-required-mark=\"showRequiredMark([validation])\"\n >\n <template #default=\"{ error }\">\n <input\n :id=\"uuid\"\n v-model=\"valueToNumber\"\n :name=\"props.name\"\n :type=\"type\"\n class=\"el-input\"\n :class=\"{\n error: error,\n 'text-neutral-darker border-primary': valueToNumber !== '',\n }\"\n :placeholder=\"placeholder\"\n :disabled=\"props.disabled\"\n :data-cy=\"`${label.trim().replaceAll(' ', '')}-input`\"\n max=\"9999-12-31\"\n @blur=\"fieldContext.validate()\"\n />\n </template>\n </ElInputContainer>\n</template>\n"],"names":["elInputDateTypes","props","__props","emit","__emit","initialDate","DateTime","dateFormat","computed","computedModelValue","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","valueToNumber","valueAsString","newDate"],"mappings":"0gBACaA,EAAmB,CAAC,OAAQ,iBAAkB,OAAQ,OAAO,
|
|
1
|
+
{"version":3,"file":"ElInputDate.vue.esm2.js","sources":["../../../src/forms/ElInputDate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputDateTypes = ['date', 'datetime-local', 'time', 'month'] as const;\nexport type ElInputDateType = (typeof elInputDateTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, PropType } from 'vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport { useInput, NumberValueType, showRequiredMark, withNumberElInputProps } from '@/forms/input';\nimport { DateTime } from 'luxon';\n\nconst props = defineProps({\n ...withNumberElInputProps(),\n type: {\n type: String as PropType<ElInputDateType>,\n default: 'date',\n },\n zone: {\n type: String,\n default: undefined,\n required: false,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: NumberValueType): void;\n (event: 'update:readableString', value: string): void;\n}>();\n\nconst initialDate = props.modelValue ? DateTime.fromSeconds(props.modelValue, { zone: props.zone }) : undefined;\n\nconst dateFormat = computed(() => {\n switch (props.type) {\n case 'date':\n return 'yyyy-MM-dd';\n case 'time':\n return 'HH:mm';\n case 'datetime-local':\n // eslint-disable-next-line quotes\n return `yyyy-MM-dd'T'HH:mm`;\n default:\n return '';\n }\n});\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue);\n emit('update:readableString', valueToNumber.value);\n});\n\n// this is needed to have vee-validate only work on number values, this way we don't have to deal with date format, but only timestamps\nconst valueToNumber = computed<string>({\n get: () => {\n if (!value.value) return '';\n return DateTime.fromSeconds(value.value, { zone: props.zone }).toFormat(dateFormat.value);\n },\n set: (valueAsString: string) => {\n if (valueAsString) {\n let newDate = DateTime.fromFormat(valueAsString, dateFormat.value, { zone: props.zone });\n if (props.type === 'time' && initialDate) {\n // when parsing from time, it loses reference of the actual date. Set it manually\n newDate = newDate.set({ day: initialDate.day, month: initialDate.month, year: initialDate.year });\n }\n value.value = Math.round(newDate.toSeconds());\n } else {\n value.value = undefined;\n }\n },\n});\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n :set-required-mark=\"showRequiredMark([validation])\"\n >\n <template #default=\"{ error }\">\n <input\n :id=\"uuid\"\n v-model=\"valueToNumber\"\n :name=\"props.name\"\n :type=\"type\"\n class=\"el-input\"\n :class=\"{\n error: error,\n 'text-neutral-darker border-primary': valueToNumber !== '',\n }\"\n :placeholder=\"placeholder\"\n :disabled=\"props.disabled\"\n :data-cy=\"`${label.trim().replaceAll(' ', '')}-input`\"\n max=\"9999-12-31\"\n @blur=\"fieldContext.validate()\"\n />\n </template>\n </ElInputContainer>\n</template>\n"],"names":["elInputDateTypes","props","__props","emit","__emit","initialDate","DateTime","dateFormat","computed","computedModelValue","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","valueToNumber","valueAsString","newDate"],"mappings":"0gBACaA,EAAmB,CAAC,OAAQ,iBAAkB,OAAQ,OAAO,iMAU1E,MAAMC,EAAQC,EAaRC,EAAOC,EAKPC,EAAcJ,EAAM,WAAaK,EAAS,YAAYL,EAAM,WAAY,CAAE,KAAMA,EAAM,IAAK,CAAC,EAAI,OAEhGM,EAAaC,EAAS,IAAM,CAChC,OAAQP,EAAM,KAAM,CAClB,IAAK,OACI,MAAA,aACT,IAAK,OACI,MAAA,QACT,IAAK,iBAEI,MAAA,qBACT,QACS,MAAA,EACX,CAAA,CACD,EAEKQ,EAAqBD,EAAS,IAAMP,EAAM,UAAU,EACpDS,EAAqBF,EAAS,IAAM,CAACP,EAAM,UAAU,CAAC,EAEtD,CAAE,MAAAU,EAAO,aAAAC,EAAc,KAAAC,EAAM,aAAAC,CAAiB,EAAAC,EAASN,EAAoBC,EAAoBT,EAAM,KAAkBe,GAAA,CAC3Hb,EAAK,oBAAqBa,CAAQ,EAC7Bb,EAAA,wBAAyBc,EAAc,KAAK,CAAA,CAClD,EAGKA,EAAgBT,EAAiB,CACrC,IAAK,IACEG,EAAM,MACJL,EAAS,YAAYK,EAAM,MAAO,CAAE,KAAMV,EAAM,IAAM,CAAA,EAAE,SAASM,EAAW,KAAK,EAD/D,GAG3B,IAAMW,GAA0B,CAC9B,GAAIA,EAAe,CACb,IAAAC,EAAUb,EAAS,WAAWY,EAAeX,EAAW,MAAO,CAAE,KAAMN,EAAM,IAAM,CAAA,EACnFA,EAAM,OAAS,QAAUI,IAE3Bc,EAAUA,EAAQ,IAAI,CAAE,IAAKd,EAAY,IAAK,MAAOA,EAAY,MAAO,KAAMA,EAAY,IAAM,CAAA,GAElGM,EAAM,MAAQ,KAAK,MAAMQ,EAAQ,WAAW,CAAA,MAE5CR,EAAM,MAAQ,MAElB,CAAA,CACD"}
|