@davincihealthcare/elty-design-system-vue 1.82.0 → 1.83.1
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/ElInlineBanner.vue.d.ts +2 -0
- package/dist/src/ElInlineBanner.vue.cjs2.js +1 -1
- package/dist/src/ElInlineBanner.vue.cjs2.js.map +1 -1
- package/dist/src/ElInlineBanner.vue.esm2.js +1 -1
- package/dist/src/ElInlineBanner.vue.esm2.js.map +1 -1
- package/dist/src/ElModal.vue.cjs2.js +1 -1
- package/dist/src/ElModal.vue.cjs2.js.map +1 -1
- package/dist/src/ElModal.vue.esm2.js +1 -1
- package/dist/src/ElModal.vue.esm2.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
7
7
|
status?: ElInlineBannerStatuses;
|
|
8
8
|
title?: string;
|
|
9
9
|
description: string;
|
|
10
|
+
html?: boolean;
|
|
10
11
|
loading?: boolean;
|
|
11
12
|
action?: Pick<InstanceType<typeof ElButton>["$props"], "label" | "variant" | "onClick" | "icon" | "iconRight" | "loading" | "loadOnClick">;
|
|
12
13
|
icon?: InstanceType<typeof ElIcon>["$props"];
|
|
@@ -19,6 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
19
20
|
status?: ElInlineBannerStatuses;
|
|
20
21
|
title?: string;
|
|
21
22
|
description: string;
|
|
23
|
+
html?: boolean;
|
|
22
24
|
loading?: boolean;
|
|
23
25
|
action?: Pick<InstanceType<typeof ElButton>["$props"], "label" | "variant" | "onClick" | "icon" | "iconRight" | "loading" | "loadOnClick">;
|
|
24
26
|
icon?: InstanceType<typeof ElIcon>["$props"];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("./ElIcon.vue.cjs2.js"),s=require("./ElButton.vue.cjs2.js"),c=require("./ElSpinner.vue.cjs2.js"),u={class:"flex flex-row items-start gap-x-2 flex-grow basis-64"},d={class:"text-sm flex flex-col flex-grow mt-0.5"},p=["innerHTML"],m=["innerHTML"],f={key:0,class:"font-semibold min-h-6"},k={key:1},g=["error","warning","info"],v=e.defineComponent({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},html:{type:Boolean},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(l){const n=l,a=e.computed(()=>{var t;if((t=n.icon)!=null&&t.name)return n.icon.name;switch(n.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(t,B)=>{var o,r;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md",{"bg-brandBlue-50 text-brandBlue-800":t.status==="info","bg-yellow-50 text-yellow-700":t.status==="warning","bg-red-50 text-red-700":t.status==="error"}])},[e.createElementVNode("div",u,[t.loading?(e.openBlock(),e.createBlock(c.default,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(e.openBlock(),e.createBlock(i.default,e.mergeProps({key:1},t.icon,{name:a.value,class:["w-6 h-6 flex-shrink-0",{"text-brandBlue-500":t.status==="info","text-yellow-500":t.status==="warning","text-red-500":t.status==="error"}]}),null,16,["name","class"])),e.createElementVNode("div",d,[t.html?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.title?(e.openBlock(),e.createElementBlock("span",{key:0,class:"font-semibold min-h-6",innerHTML:t.title},null,8,p)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("span",{key:1,innerHTML:t.description},null,8,m)):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.title?(e.openBlock(),e.createElementBlock("span",f,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("span",k,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)],64))])]),t.action?(e.openBlock(),e.createBlock(s.default,e.mergeProps({key:0},t.action,{variant:t.action.variant??"tertiary",class:["flex-shrink-0",{underline:!t.action.variant||t.action.variant==="tertiary","text-red-700 hover:text-red-500 hover:bg-transparent active:text-red-500 active:bg-red-100":t.status==="error","text-yellow-700 hover:text-yellow-500 hover:bg-transparent active:text-yellow-500 active:bg-yellow-100":t.status==="warning","text-brandBlue-800 hover:text-brandBlue-500 hover:bg-transparent":t.status==="info"}],label:(o=t.action)==null?void 0:o.label,onClick:(r=t.action)==null?void 0:r.onClick}),null,16,["variant","class","label","onClick"])):e.createCommentVNode("",!0)],2)}}});exports.default=v;exports.elInlineBannerStatuses=g;
|
|
2
2
|
//# sourceMappingURL=ElInlineBanner.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInlineBanner.vue.cjs2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n defineProps<{\n status?: ElInlineBannerStatuses;\n title?: string;\n description: string;\n loading?: boolean;\n action?: Pick<\n InstanceType<typeof ElButton>['$props'],\n 'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n >;\n icon?: InstanceType<typeof ElIcon>['$props'];\n }>(),\n {\n status: 'info',\n title: undefined,\n action: undefined,\n icon: undefined,\n },\n);\n\nconst iconName = computed(() => {\n if (props.icon?.name) return props.icon.name;\n\n switch (props.status) {\n case 'info':\n return 'InformationCircleIcon';\n case 'warning':\n return 'ExclamationTriangleIcon';\n case 'error':\n return 'InformationCircleIcon';\n default:\n return 'InformationCircleIcon';\n }\n});\n</script>\n\n<template>\n <div\n class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n :class=\"{\n 'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n 'bg-yellow-50 text-yellow-700': status === 'warning',\n 'bg-red-50 text-red-700': status === 'error',\n }\"\n >\n <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n <ElIcon\n v-else\n v-bind=\"icon\"\n :name=\"iconName\"\n class=\"w-6 h-6 flex-shrink-0\"\n :class=\"{\n 'text-brandBlue-500': status === 'info',\n 'text-yellow-500': status === 'warning',\n 'text-red-500': status === 'error',\n }\"\n />\n <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n
|
|
1
|
+
{"version":3,"file":"ElInlineBanner.vue.cjs2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n defineProps<{\n status?: ElInlineBannerStatuses;\n title?: string;\n description: string;\n html?: boolean;\n loading?: boolean;\n action?: Pick<\n InstanceType<typeof ElButton>['$props'],\n 'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n >;\n icon?: InstanceType<typeof ElIcon>['$props'];\n }>(),\n {\n status: 'info',\n title: undefined,\n action: undefined,\n icon: undefined,\n },\n);\n\nconst iconName = computed(() => {\n if (props.icon?.name) return props.icon.name;\n\n switch (props.status) {\n case 'info':\n return 'InformationCircleIcon';\n case 'warning':\n return 'ExclamationTriangleIcon';\n case 'error':\n return 'InformationCircleIcon';\n default:\n return 'InformationCircleIcon';\n }\n});\n</script>\n\n<template>\n <div\n class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n :class=\"{\n 'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n 'bg-yellow-50 text-yellow-700': status === 'warning',\n 'bg-red-50 text-red-700': status === 'error',\n }\"\n >\n <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n <ElIcon\n v-else\n v-bind=\"icon\"\n :name=\"iconName\"\n class=\"w-6 h-6 flex-shrink-0\"\n :class=\"{\n 'text-brandBlue-500': status === 'info',\n 'text-yellow-500': status === 'warning',\n 'text-red-500': status === 'error',\n }\"\n />\n <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n <template v-if=\"!!html\">\n <span v-if=\"title\" class=\"font-semibold min-h-6\" v-html=\"title\"></span>\n <span v-if=\"description\" v-html=\"description\"></span>\n </template>\n <template v-else>\n <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n <span v-if=\"description\">{{ description }}</span>\n </template>\n </div>\n </div>\n <ElButton\n v-if=\"action\"\n v-bind=\"action\"\n :variant=\"action.variant ?? 'tertiary'\"\n class=\"flex-shrink-0\"\n :class=\"{\n underline: !action.variant || action.variant === 'tertiary',\n 'text-red-700 hover:text-red-500 hover:bg-transparent active:text-red-500 active:bg-red-100': status === 'error',\n 'text-yellow-700 hover:text-yellow-500 hover:bg-transparent active:text-yellow-500 active:bg-yellow-100': status === 'warning',\n 'text-brandBlue-800 hover:text-brandBlue-500 hover:bg-transparent': status === 'info',\n }\"\n :label=\"action?.label\"\n @click=\"action?.onClick\"\n />\n </div>\n</template>\n"],"names":["elInlineBannerStatuses","props","__props","iconName","computed","_a"],"mappings":"obACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,uNAUjE,MAAMC,EAAQC,EAqBRC,EAAWC,EAAAA,SAAS,IAAM,OAC9B,IAAIC,EAAAJ,EAAM,OAAN,MAAAI,EAAY,KAAM,OAAOJ,EAAM,KAAK,KAExC,OAAQA,EAAM,OAAQ,CACpB,IAAK,OACI,MAAA,wBACT,IAAK,UACI,MAAA,0BACT,IAAK,QACI,MAAA,wBACT,QACS,MAAA,uBACX,CAAA,CACD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as p,computed as g,openBlock as n,createElementBlock as t,normalizeClass as y,createElementVNode as l,createBlock as o,mergeProps as c,Fragment as d,createCommentVNode as r,toDisplayString as u}from"vue";import h from"./ElIcon.vue.esm2.js";import v from"./ElButton.vue.esm2.js";import w from"./ElSpinner.vue.esm2.js";const b={class:"flex flex-row items-start gap-x-2 flex-grow basis-64"},k={class:"text-sm flex flex-col flex-grow mt-0.5"},B=["innerHTML"],C=["innerHTML"],I={key:0,class:"font-semibold min-h-6"},x={key:1},N=["error","warning","info"],$=p({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},html:{type:Boolean},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(m){const a=m,f=g(()=>{var e;if((e=a.icon)!=null&&e.name)return a.icon.name;switch(a.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(e,T)=>{var i,s;return n(),t("div",{class:y(["inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md",{"bg-brandBlue-50 text-brandBlue-800":e.status==="info","bg-yellow-50 text-yellow-700":e.status==="warning","bg-red-50 text-red-700":e.status==="error"}])},[l("div",b,[e.loading?(n(),o(w,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(n(),o(h,c({key:1},e.icon,{name:f.value,class:["w-6 h-6 flex-shrink-0",{"text-brandBlue-500":e.status==="info","text-yellow-500":e.status==="warning","text-red-500":e.status==="error"}]}),null,16,["name","class"])),l("div",k,[e.html?(n(),t(d,{key:0},[e.title?(n(),t("span",{key:0,class:"font-semibold min-h-6",innerHTML:e.title},null,8,B)):r("",!0),e.description?(n(),t("span",{key:1,innerHTML:e.description},null,8,C)):r("",!0)],64)):(n(),t(d,{key:1},[e.title?(n(),t("span",I,u(e.title),1)):r("",!0),e.description?(n(),t("span",x,u(e.description),1)):r("",!0)],64))])]),e.action?(n(),o(v,c({key:0},e.action,{variant:e.action.variant??"tertiary",class:["flex-shrink-0",{underline:!e.action.variant||e.action.variant==="tertiary","text-red-700 hover:text-red-500 hover:bg-transparent active:text-red-500 active:bg-red-100":e.status==="error","text-yellow-700 hover:text-yellow-500 hover:bg-transparent active:text-yellow-500 active:bg-yellow-100":e.status==="warning","text-brandBlue-800 hover:text-brandBlue-500 hover:bg-transparent":e.status==="info"}],label:(i=e.action)==null?void 0:i.label,onClick:(s=e.action)==null?void 0:s.onClick}),null,16,["variant","class","label","onClick"])):r("",!0)],2)}}});export{$ as default,N as elInlineBannerStatuses};
|
|
2
2
|
//# sourceMappingURL=ElInlineBanner.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInlineBanner.vue.esm2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n defineProps<{\n status?: ElInlineBannerStatuses;\n title?: string;\n description: string;\n loading?: boolean;\n action?: Pick<\n InstanceType<typeof ElButton>['$props'],\n 'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n >;\n icon?: InstanceType<typeof ElIcon>['$props'];\n }>(),\n {\n status: 'info',\n title: undefined,\n action: undefined,\n icon: undefined,\n },\n);\n\nconst iconName = computed(() => {\n if (props.icon?.name) return props.icon.name;\n\n switch (props.status) {\n case 'info':\n return 'InformationCircleIcon';\n case 'warning':\n return 'ExclamationTriangleIcon';\n case 'error':\n return 'InformationCircleIcon';\n default:\n return 'InformationCircleIcon';\n }\n});\n</script>\n\n<template>\n <div\n class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n :class=\"{\n 'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n 'bg-yellow-50 text-yellow-700': status === 'warning',\n 'bg-red-50 text-red-700': status === 'error',\n }\"\n >\n <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n <ElIcon\n v-else\n v-bind=\"icon\"\n :name=\"iconName\"\n class=\"w-6 h-6 flex-shrink-0\"\n :class=\"{\n 'text-brandBlue-500': status === 'info',\n 'text-yellow-500': status === 'warning',\n 'text-red-500': status === 'error',\n }\"\n />\n <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n
|
|
1
|
+
{"version":3,"file":"ElInlineBanner.vue.esm2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n defineProps<{\n status?: ElInlineBannerStatuses;\n title?: string;\n description: string;\n html?: boolean;\n loading?: boolean;\n action?: Pick<\n InstanceType<typeof ElButton>['$props'],\n 'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n >;\n icon?: InstanceType<typeof ElIcon>['$props'];\n }>(),\n {\n status: 'info',\n title: undefined,\n action: undefined,\n icon: undefined,\n },\n);\n\nconst iconName = computed(() => {\n if (props.icon?.name) return props.icon.name;\n\n switch (props.status) {\n case 'info':\n return 'InformationCircleIcon';\n case 'warning':\n return 'ExclamationTriangleIcon';\n case 'error':\n return 'InformationCircleIcon';\n default:\n return 'InformationCircleIcon';\n }\n});\n</script>\n\n<template>\n <div\n class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n :class=\"{\n 'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n 'bg-yellow-50 text-yellow-700': status === 'warning',\n 'bg-red-50 text-red-700': status === 'error',\n }\"\n >\n <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n <ElIcon\n v-else\n v-bind=\"icon\"\n :name=\"iconName\"\n class=\"w-6 h-6 flex-shrink-0\"\n :class=\"{\n 'text-brandBlue-500': status === 'info',\n 'text-yellow-500': status === 'warning',\n 'text-red-500': status === 'error',\n }\"\n />\n <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n <template v-if=\"!!html\">\n <span v-if=\"title\" class=\"font-semibold min-h-6\" v-html=\"title\"></span>\n <span v-if=\"description\" v-html=\"description\"></span>\n </template>\n <template v-else>\n <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n <span v-if=\"description\">{{ description }}</span>\n </template>\n </div>\n </div>\n <ElButton\n v-if=\"action\"\n v-bind=\"action\"\n :variant=\"action.variant ?? 'tertiary'\"\n class=\"flex-shrink-0\"\n :class=\"{\n underline: !action.variant || action.variant === 'tertiary',\n 'text-red-700 hover:text-red-500 hover:bg-transparent active:text-red-500 active:bg-red-100': status === 'error',\n 'text-yellow-700 hover:text-yellow-500 hover:bg-transparent active:text-yellow-500 active:bg-yellow-100': status === 'warning',\n 'text-brandBlue-800 hover:text-brandBlue-500 hover:bg-transparent': status === 'info',\n }\"\n :label=\"action?.label\"\n @click=\"action?.onClick\"\n />\n </div>\n</template>\n"],"names":["elInlineBannerStatuses","props","__props","iconName","computed","_a"],"mappings":"giBACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,uMAUjE,MAAMC,EAAQC,EAqBRC,EAAWC,EAAS,IAAM,OAC9B,IAAIC,EAAAJ,EAAM,OAAN,MAAAI,EAAY,KAAM,OAAOJ,EAAM,KAAK,KAExC,OAAQA,EAAM,OAAQ,CACpB,IAAK,OACI,MAAA,wBACT,IAAK,UACI,MAAA,0BACT,IAAK,QACI,MAAA,wBACT,QACS,MAAA,uBACX,CAAA,CACD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../node_modules/@vueuse/core/index.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../node_modules/@vueuse/core/index.cjs.js"),z=require("../node_modules/@vueuse/components/index.cjs.js"),d=require("./ElButton.vue.cjs2.js"),h=require("./ElIcon.vue.cjs2.js"),C=require("./ElIconButton.vue.cjs2.js"),E=require("./_CustomTransition.vue.cjs2.js"),N={key:0,class:"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0"},S={class:"fixed inset-0 transition-opacity"},M=["data-cy"],V={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},A={class:"text-xl font-semibold truncate flex-1"},O={key:0,class:"text-base font-normal text-wrap break-words"},n=["xs","m","l","xl"],y={xs:360,m:576,l:768,xl:1280},q=["primary","secondary","error"],I=e.defineComponent({__name:"ElModal",props:e.mergeModels({size:{default:"m"},color:{default:"primary"},headerIcon:{},title:{default:void 0},description:{default:void 0},primaryAction:{},secondaryAction:{default:void 0},tertiaryAction:{default:void 0},isNestedModal:{type:Boolean}},{isOpen:{default:!1,required:!0,type:Boolean},isOpenModifiers:{}}),emits:e.mergeModels(["closed"],["update:isOpen"]),setup(u,{emit:x}){const i=e.useModel(u,"isOpen"),k=x,s=u,c=()=>i.value=!1,p=e.ref(null),l=e.ref(null),t=e.computed(()=>s.color==="error"),{arrivedState:m}=a.useScroll(l),{height:b}=a.useElementSize(l),{width:g}=a.useWindowSize(),f=e.computed(()=>l.value&&l.value.scrollHeight>b.value),_=a.useScrollLock(document.body),o=e.computed(()=>{for(let r=n.indexOf(s.size);r>=0;r--)if(g.value>=y[n[r]])return n[r];return s.size}),B=r=>{r.target===p.value&&c()};return e.watch(()=>i.value,r=>{(!s.isNestedModal||r)&&(_.value=r),r||k("closed")}),a.onKeyStroke("Escape",r=>{r.preventDefault(),c()}),(r,w)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(E.default,{name:"fade"},{default:e.withCtx(()=>{var v;return[i.value?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",S,[e.createElementVNode("div",{ref_key:"backdrop",ref:p,class:"absolute inset-0 bg-gray-500 opacity-75"},null,512)]),e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker",{"w-[360px]":o.value==="xs","w-[576px]":o.value==="m","w-[768px]":o.value==="l","w-[1280px]":o.value==="xl"}]),"data-cy":`el-modal-${(v=r.title)==null?void 0:v.replaceAll(" ","")}`},[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center justify-between gap-2",{"px-4":o.value==="xs","px-8":o.value!=="xs"}])},[e.createElementVNode("div",V,[e.createElementVNode("div",{class:e.normalizeClass([{"text-error bg-error-light-active":t.value,"text-primary bg-neutral-surface-raised":r.color==="primary","text-secondary bg-neutral-surface-raised":r.color==="secondary"},"!h-8 !w-8 rounded-full"])},[e.createVNode(h.default,e.mergeProps(t.value?{name:"ExclamationCircleIcon"}:r.headerIcon,{class:"p-1"}),null,16)],2),e.createElementVNode("div",A,e.toDisplayString(r.title),1)]),e.createVNode(C.default,{icon:{name:"XMarkIcon"},error:t.value,onClick:c},null,8,["error"])],2),e.createElementVNode("div",{ref_key:"modalBody",ref:l,class:e.normalizeClass(["flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden",{"px-4":o.value==="xs","px-8":o.value!=="xs","border-t":f.value&&!e.unref(m).top,"border-b":f.value&&!e.unref(m).bottom}])},[r.description?(e.openBlock(),e.createElementBlock("p",O,e.toDisplayString(r.description),1)):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default")],2),r.primaryAction||r.secondaryAction||r.tertiaryAction?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-4",{"flex-col-reverse px-4":o.value==="xs","flex-row px-8":o.value!=="xs"}])},[r.tertiaryAction?(e.openBlock(),e.createBlock(d.default,e.mergeProps({key:0},r.tertiaryAction,{variant:"tertiary",class:{"w-full":o.value==="xs"},size:o.value==="xs"?"l":"base",error:t.value||r.tertiaryAction.error}),null,16,["class","size","error"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-4",{"flex-col-reverse w-full":o.value==="xs","flex-row ml-auto":o.value!=="xs"}])},[r.secondaryAction?(e.openBlock(),e.createBlock(d.default,e.mergeProps({key:0},r.secondaryAction,{variant:"secondary",size:o.value==="xs"?"l":"base",error:t.value||r.secondaryAction.error}),null,16,["size","error"])):e.createCommentVNode("",!0),r.primaryAction?(e.openBlock(),e.createBlock(d.default,e.mergeProps({key:1},r.primaryAction,{variant:"primary",size:o.value==="xs"?"l":"base",error:t.value||r.primaryAction.error}),null,16,["size","error"])):e.createCommentVNode("",!0)],2)],2)):e.createCommentVNode("",!0)],10,M)),[[e.unref(z.VOnClickOutside),B]])])):e.createCommentVNode("",!0)]}),_:3})]))}});exports.default=I;exports.elModalColors=q;exports.elModalSizes=n;exports.elModalSizesBreakpoints=y;
|
|
2
2
|
//# sourceMappingURL=ElModal.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElModal.vue.cjs2.js","sources":["../../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n isNestedModal?: boolean;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n if (!props.isNestedModal || value) isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || tertiaryAction.error\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || secondaryAction.error\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || primaryAction.error\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","e","watch","value","onKeyStroke"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElModal.vue.cjs2.js","sources":["../../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n isNestedModal?: boolean;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n if (!props.isNestedModal || value) isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n :data-cy=\"`el-modal-${title?.replaceAll(' ', '')}`\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || tertiaryAction.error\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || secondaryAction.error\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || primaryAction.error\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","e","watch","value","onKeyStroke"],"mappings":"kvBACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,EAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,EAAgB,CAAC,UAAW,YAAa,OAAO,maA0BvD,MAAAC,EAASC,EAAAA,SAAYC,EAAA,QAI1B,EAEKC,EAAOC,EAEPC,EAAQH,EASRI,EAAa,IAAON,EAAO,MAAQ,GAEnCO,EAAWC,MAAwB,IAAI,EACvCC,EAAYD,MAAwB,IAAI,EAExCE,EAAiBC,EAAAA,SAAS,IAAMN,EAAM,QAAU,OAAO,EAEvD,CAAE,aAAAO,CAAA,EAAiBC,EAAA,UAAUJ,CAAS,EACtC,CAAE,OAAAK,CAAA,EAAWC,EAAA,eAAeN,CAAS,EACrC,CAAE,MAAOO,CAAY,EAAIC,EAAc,cAAA,EAEvCC,EAAoBP,EAAAA,SAAS,IAAMF,EAAU,OAASA,EAAU,MAAM,aAAeK,EAAO,KAAK,EACjGK,EAAqBC,EAAAA,cAAc,SAAS,IAAI,EAEhDC,EAAiBV,EAAAA,SAAS,IAAM,CAC3B,QAAAW,EAAIzB,EAAa,QAAQQ,EAAM,IAAI,EAAGiB,GAAK,EAAGA,IACrD,GAAIN,EAAY,OAASlB,EAAwBD,EAAayB,CAAC,CAAC,EAAG,OAAOzB,EAAayB,CAAC,EAG1F,OAAOjB,EAAM,IAAA,CACd,EAEKkB,EAAkBC,GAA+B,CAE3BA,EAAE,SAAWjB,EAAS,OAEdD,GAAA,EAGpCmB,OAAAA,EAAA,MACE,IAAMzB,EAAO,MACJ0B,GAAA,EACH,CAACrB,EAAM,eAAiBqB,KAAOP,EAAmB,MAAQO,GACzDA,GAAOvB,EAAK,QAAQ,CAC3B,CAAA,EAGFwB,cAAY,SAAeH,GAAA,CACzBA,EAAE,eAAe,EACNlB,GAAA,CACZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as N,mergeModels as
|
|
1
|
+
import{defineComponent as N,mergeModels as A,useModel as V,ref as S,computed as m,watch as j,openBlock as o,createBlock as c,Teleport as D,createVNode as v,withCtx as L,createElementBlock as d,createElementVNode as l,withDirectives as W,normalizeClass as a,mergeProps as u,toDisplayString as O,unref as y,createCommentVNode as s,renderSlot as q}from"vue";import{useScroll as H,useElementSize as K,useWindowSize as P,useScrollLock as T,onKeyStroke as X}from"../node_modules/@vueuse/core/index.esm.js";import{VOnClickOutside as F}from"../node_modules/@vueuse/components/index.esm.js";import x from"./ElButton.vue.esm2.js";import G from"./ElIcon.vue.esm2.js";import J from"./ElIconButton.vue.esm2.js";import Q from"./_CustomTransition.vue.esm2.js";const R={key:0,class:"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0"},U={class:"fixed inset-0 transition-opacity"},Y=["data-cy"],Z={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},ee={class:"text-xl font-semibold truncate flex-1"},re={key:0,class:"text-base font-normal text-wrap break-words"},b=["xs","m","l","xl"],oe={xs:360,m:576,l:768,xl:1280},de=["primary","secondary","error"],ue=N({__name:"ElModal",props:A({size:{default:"m"},color:{default:"primary"},headerIcon:{},title:{default:void 0},description:{default:void 0},primaryAction:{},secondaryAction:{default:void 0},tertiaryAction:{default:void 0},isNestedModal:{type:Boolean}},{isOpen:{default:!1,required:!0,type:Boolean},isOpenModifiers:{}}),emits:A(["closed"],["update:isOpen"]),setup(k,{emit:C}){const f=V(k,"isOpen"),M=C,n=k,p=()=>f.value=!1,w=S(null),i=S(null),t=m(()=>n.color==="error"),{arrivedState:h}=H(i),{height:B}=K(i),{width:E}=P(),g=m(()=>i.value&&i.value.scrollHeight>B.value),_=T(document.body),r=m(()=>{for(let e=b.indexOf(n.size);e>=0;e--)if(E.value>=oe[b[e]])return b[e];return n.size}),$=e=>{e.target===w.value&&p()};return j(()=>f.value,e=>{(!n.isNestedModal||e)&&(_.value=e),e||M("closed")}),X("Escape",e=>{e.preventDefault(),p()}),(e,I)=>(o(),c(D,{to:"body"},[v(Q,{name:"fade"},{default:L(()=>{var z;return[f.value?(o(),d("div",R,[l("div",U,[l("div",{ref_key:"backdrop",ref:w,class:"absolute inset-0 bg-gray-500 opacity-75"},null,512)]),W((o(),d("div",{class:a(["flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker",{"w-[360px]":r.value==="xs","w-[576px]":r.value==="m","w-[768px]":r.value==="l","w-[1280px]":r.value==="xl"}]),"data-cy":`el-modal-${(z=e.title)==null?void 0:z.replaceAll(" ","")}`},[l("div",{class:a(["flex items-center justify-between gap-2",{"px-4":r.value==="xs","px-8":r.value!=="xs"}])},[l("div",Z,[l("div",{class:a([{"text-error bg-error-light-active":t.value,"text-primary bg-neutral-surface-raised":e.color==="primary","text-secondary bg-neutral-surface-raised":e.color==="secondary"},"!h-8 !w-8 rounded-full"])},[v(G,u(t.value?{name:"ExclamationCircleIcon"}:e.headerIcon,{class:"p-1"}),null,16)],2),l("div",ee,O(e.title),1)]),v(J,{icon:{name:"XMarkIcon"},error:t.value,onClick:p},null,8,["error"])],2),l("div",{ref_key:"modalBody",ref:i,class:a(["flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden",{"px-4":r.value==="xs","px-8":r.value!=="xs","border-t":g.value&&!y(h).top,"border-b":g.value&&!y(h).bottom}])},[e.description?(o(),d("p",re,O(e.description),1)):s("",!0),q(e.$slots,"default")],2),e.primaryAction||e.secondaryAction||e.tertiaryAction?(o(),d("div",{key:0,class:a(["flex items-center gap-4",{"flex-col-reverse px-4":r.value==="xs","flex-row px-8":r.value!=="xs"}])},[e.tertiaryAction?(o(),c(x,u({key:0},e.tertiaryAction,{variant:"tertiary",class:{"w-full":r.value==="xs"},size:r.value==="xs"?"l":"base",error:t.value||e.tertiaryAction.error}),null,16,["class","size","error"])):s("",!0),l("div",{class:a(["flex gap-4",{"flex-col-reverse w-full":r.value==="xs","flex-row ml-auto":r.value!=="xs"}])},[e.secondaryAction?(o(),c(x,u({key:0},e.secondaryAction,{variant:"secondary",size:r.value==="xs"?"l":"base",error:t.value||e.secondaryAction.error}),null,16,["size","error"])):s("",!0),e.primaryAction?(o(),c(x,u({key:1},e.primaryAction,{variant:"primary",size:r.value==="xs"?"l":"base",error:t.value||e.primaryAction.error}),null,16,["size","error"])):s("",!0)],2)],2)):s("",!0)],10,Y)),[[y(F),$]])])):s("",!0)]}),_:3})]))}});export{ue as default,de as elModalColors,b as elModalSizes,oe as elModalSizesBreakpoints};
|
|
2
2
|
//# sourceMappingURL=ElModal.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElModal.vue.esm2.js","sources":["../../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n isNestedModal?: boolean;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n if (!props.isNestedModal || value) isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || tertiaryAction.error\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || secondaryAction.error\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || primaryAction.error\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","watch","value","onKeyStroke"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElModal.vue.esm2.js","sources":["../../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n isNestedModal?: boolean;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n if (!props.isNestedModal || value) isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n :data-cy=\"`el-modal-${title?.replaceAll(' ', '')}`\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || tertiaryAction.error\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || secondaryAction.error\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState || primaryAction.error\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","watch","value","onKeyStroke"],"mappings":"ilCACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,GAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,GAAgB,CAAC,UAAW,YAAa,OAAO,4XA0BvD,MAAAC,EAASC,EAAYC,EAAA,QAI1B,EAEKC,EAAOC,EAEPC,EAAQH,EASRI,EAAa,IAAON,EAAO,MAAQ,GAEnCO,EAAWC,EAAwB,IAAI,EACvCC,EAAYD,EAAwB,IAAI,EAExCE,EAAiBC,EAAS,IAAMN,EAAM,QAAU,OAAO,EAEvD,CAAE,aAAAO,CAAA,EAAiBC,EAAUJ,CAAS,EACtC,CAAE,OAAAK,CAAA,EAAWC,EAAeN,CAAS,EACrC,CAAE,MAAOO,CAAY,EAAIC,EAAc,EAEvCC,EAAoBP,EAAS,IAAMF,EAAU,OAASA,EAAU,MAAM,aAAeK,EAAO,KAAK,EACjGK,EAAqBC,EAAc,SAAS,IAAI,EAEhDC,EAAiBV,EAAS,IAAM,CAC3B,QAAAW,EAAIzB,EAAa,QAAQQ,EAAM,IAAI,EAAGiB,GAAK,EAAGA,IACrD,GAAIN,EAAY,OAASlB,GAAwBD,EAAayB,CAAC,CAAC,EAAG,OAAOzB,EAAayB,CAAC,EAG1F,OAAOjB,EAAM,IAAA,CACd,EAEKkB,EAAkB,GAA+B,CAE3B,EAAE,SAAWhB,EAAS,OAEdD,GAAA,EAGpC,OAAAkB,EACE,IAAMxB,EAAO,MACJyB,GAAA,EACH,CAACpB,EAAM,eAAiBoB,KAAON,EAAmB,MAAQM,GACzDA,GAAOtB,EAAK,QAAQ,CAC3B,CAAA,EAGFuB,EAAY,SAAe,GAAA,CACzB,EAAE,eAAe,EACNpB,GAAA,CACZ"}
|