@davincihealthcare/elty-design-system-vue 1.78.0 → 1.80.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/ElModal.vue.d.ts +11 -11
- 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/dist/src/style.cjs +1 -1
- package/dist/src/style.css +1 -1
- package/package.json +1 -1
package/dist/ElModal.vue.d.ts
CHANGED
|
@@ -7,9 +7,9 @@ export interface ElModalProps {
|
|
|
7
7
|
headerIcon: InstanceType<typeof ElIcon>['$props'];
|
|
8
8
|
title: string;
|
|
9
9
|
description?: string;
|
|
10
|
-
primaryAction: Omit<InstanceType<typeof ElButton>['$props'], '
|
|
11
|
-
secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], '
|
|
12
|
-
tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], '
|
|
10
|
+
primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;
|
|
11
|
+
secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;
|
|
12
|
+
tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;
|
|
13
13
|
isNestedModal?: boolean;
|
|
14
14
|
}
|
|
15
15
|
export declare const elModalSizes: readonly ["xs", "m", "l", "xl"];
|
|
@@ -142,7 +142,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
142
142
|
type: import('vue').PropType<boolean>;
|
|
143
143
|
default: boolean;
|
|
144
144
|
};
|
|
145
|
-
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "
|
|
145
|
+
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "variant">>;
|
|
146
146
|
required: true;
|
|
147
147
|
};
|
|
148
148
|
secondaryAction: {
|
|
@@ -220,7 +220,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
220
220
|
type: import('vue').PropType<boolean>;
|
|
221
221
|
default: boolean;
|
|
222
222
|
};
|
|
223
|
-
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "
|
|
223
|
+
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "variant">>;
|
|
224
224
|
default: undefined;
|
|
225
225
|
};
|
|
226
226
|
tertiaryAction: {
|
|
@@ -298,7 +298,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
298
298
|
type: import('vue').PropType<boolean>;
|
|
299
299
|
default: boolean;
|
|
300
300
|
};
|
|
301
|
-
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "
|
|
301
|
+
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "variant">>;
|
|
302
302
|
default: undefined;
|
|
303
303
|
};
|
|
304
304
|
isNestedModal: {
|
|
@@ -426,7 +426,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
426
426
|
type: import('vue').PropType<boolean>;
|
|
427
427
|
default: boolean;
|
|
428
428
|
};
|
|
429
|
-
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "
|
|
429
|
+
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "variant">>;
|
|
430
430
|
required: true;
|
|
431
431
|
};
|
|
432
432
|
secondaryAction: {
|
|
@@ -504,7 +504,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
504
504
|
type: import('vue').PropType<boolean>;
|
|
505
505
|
default: boolean;
|
|
506
506
|
};
|
|
507
|
-
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "
|
|
507
|
+
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "variant">>;
|
|
508
508
|
default: undefined;
|
|
509
509
|
};
|
|
510
510
|
tertiaryAction: {
|
|
@@ -582,7 +582,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
582
582
|
type: import('vue').PropType<boolean>;
|
|
583
583
|
default: boolean;
|
|
584
584
|
};
|
|
585
|
-
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "
|
|
585
|
+
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "variant" | "dark" | "loading" | "loadOnClick">, "size" | "variant">>;
|
|
586
586
|
default: undefined;
|
|
587
587
|
};
|
|
588
588
|
isNestedModal: {
|
|
@@ -595,8 +595,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
595
595
|
title: string;
|
|
596
596
|
color: ElModalColor;
|
|
597
597
|
description: string;
|
|
598
|
-
secondaryAction: Omit<InstanceType<typeof ElButton>["$props"], "
|
|
599
|
-
tertiaryAction: Omit<InstanceType<typeof ElButton>["$props"], "
|
|
598
|
+
secondaryAction: Omit<InstanceType<typeof ElButton>["$props"], "size" | "variant">;
|
|
599
|
+
tertiaryAction: Omit<InstanceType<typeof ElButton>["$props"], "size" | "variant">;
|
|
600
600
|
}, {}>, {
|
|
601
601
|
default?(_: {}): any;
|
|
602
602
|
}>;
|
|
@@ -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 t=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={key:0,class:"font-semibold min-h-6"},f={key:1},m=["error","warning","info"],v=t.defineComponent({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(o){const n=o,l=t.computed(()=>{var e;if((e=n.icon)!=null&&e.name)return n.icon.name;switch(n.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(e,g)=>{var r,a;return t.openBlock(),t.createElementBlock("div",{class:t.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":e.status==="info","bg-yellow-50 text-yellow-700":e.status==="warning","bg-red-50 text-red-700":e.status==="error"}])},[t.createElementVNode("div",u,[e.loading?(t.openBlock(),t.createBlock(c.default,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(t.openBlock(),t.createBlock(i.default,t.mergeProps({key:1},e.icon,{name:l.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"])),t.createElementVNode("div",d,[e.title?(t.openBlock(),t.createElementBlock("span",p,t.toDisplayString(e.title),1)):t.createCommentVNode("",!0),e.description?(t.openBlock(),t.createElementBlock("span",f,t.toDisplayString(e.description),1)):t.createCommentVNode("",!0)])]),e.action?(t.openBlock(),t.createBlock(s.default,t.mergeProps({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:(r=e.action)==null?void 0:r.label,onClick:(a=e.action)==null?void 0:a.onClick}),null,16,["variant","class","label","onClick"])):t.createCommentVNode("",!0)],2)}}});exports.default=v;exports.elInlineBannerStatuses=m;
|
|
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 <span v-if=\"description\">{{ description }}</span>\n </div>\n </div>\n <ElButton\n v-if=\"action
|
|
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 <span v-if=\"description\">{{ description }}</span>\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":"oZACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,mMAUjE,MAAMC,EAAQC,EAoBRC,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 m,computed as p,openBlock as t,createElementBlock as r,normalizeClass as g,createElementVNode as l,createBlock as a,mergeProps as c,toDisplayString as d,createCommentVNode as o}from"vue";import v from"./ElIcon.vue.esm2.js";import w from"./ElButton.vue.esm2.js";import b from"./ElSpinner.vue.esm2.js";const y={class:"flex flex-row items-start gap-x-2 flex-grow basis-64"},h={class:"text-sm flex flex-col flex-grow mt-0.5"},k={key:0,class:"font-semibold min-h-6"},B={key:1},$=["error","warning","info"],S=m({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(u){const n=u,f=p(()=>{var e;if((e=n.icon)!=null&&e.name)return n.icon.name;switch(n.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(e,x)=>{var i,s;return t(),r("div",{class:g(["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",y,[e.loading?(t(),a(b,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(t(),a(v,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",h,[e.title?(t(),r("span",k,d(e.title),1)):o("",!0),e.description?(t(),r("span",B,d(e.description),1)):o("",!0)])]),e.action?(t(),a(w,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"])):o("",!0)],2)}}});export{S as default,$ 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 <span v-if=\"description\">{{ description }}</span>\n </div>\n </div>\n <ElButton\n v-if=\"action
|
|
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 <span v-if=\"description\">{{ description }}</span>\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":"kfACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,mLAUjE,MAAMC,EAAQC,EAoBRC,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"),w=require("../node_modules/@vueuse/components/index.cjs.js"),d=require("./ElButton.vue.cjs2.js"),z=require("./ElIcon.vue.cjs2.js"),C=require("./ElIconButton.vue.cjs2.js"),h=require("./_CustomTransition.vue.cjs2.js"),E={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"},N={class:"fixed inset-0 transition-opacity"},S={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},M={class:"text-xl font-semibold truncate flex-1"},V={key:0,class:"text-base font-normal text-wrap break-words"},n=["xs","m","l","xl"],v={xs:360,m:576,l:768,xl:1280},A=["primary","secondary","error"],O=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:y}){const i=e.useModel(u,"isOpen"),x=y,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:k}=a.useElementSize(l),{width:
|
|
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"),w=require("../node_modules/@vueuse/components/index.cjs.js"),d=require("./ElButton.vue.cjs2.js"),z=require("./ElIcon.vue.cjs2.js"),C=require("./ElIconButton.vue.cjs2.js"),h=require("./_CustomTransition.vue.cjs2.js"),E={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"},N={class:"fixed inset-0 transition-opacity"},S={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},M={class:"text-xl font-semibold truncate flex-1"},V={key:0,class:"text-base font-normal text-wrap break-words"},n=["xs","m","l","xl"],v={xs:360,m:576,l:768,xl:1280},A=["primary","secondary","error"],O=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:y}){const i=e.useModel(u,"isOpen"),x=y,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:k}=a.useElementSize(l),{width:b}=a.useWindowSize(),f=e.computed(()=>l.value&&l.value.scrollHeight>k.value),g=a.useScrollLock(document.body),o=e.computed(()=>{for(let r=n.indexOf(s.size);r>=0;r--)if(b.value>=v[n[r]])return n[r];return s.size}),_=r=>{r.target===p.value&&c()};return e.watch(()=>i.value,r=>{(!s.isNestedModal||r)&&(g.value=r),r||x("closed")}),a.onKeyStroke("Escape",r=>{r.preventDefault(),c()}),(r,B)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(h.default,{name:"fade"},{default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",N,[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"}])},[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",S,[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(z.default,e.mergeProps(t.value?{name:"ExclamationCircleIcon"}:r.headerIcon,{class:"p-1"}),null,16)],2),e.createElementVNode("div",M,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",V,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)],2)),[[e.unref(w.VOnClickOutside),_]])])):e.createCommentVNode("",!0)]),_:3})]))}});exports.default=O;exports.elModalColors=A;exports.elModalSizes=n;exports.elModalSizesBreakpoints=v;
|
|
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'], '
|
|
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":"ouBACaA,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 z,useModel as $,ref as
|
|
1
|
+
import{defineComponent as N,mergeModels as z,useModel as $,ref as A,computed as m,watch as V,openBlock as o,createBlock as c,Teleport as j,createVNode as v,withCtx as D,createElementBlock as d,createElementVNode as t,withDirectives as L,normalizeClass as a,mergeProps as u,toDisplayString as S,unref as y,createCommentVNode as s,renderSlot as W}from"vue";import{useScroll as q,useElementSize as H,useWindowSize as K,useScrollLock as P,onKeyStroke as T}from"../node_modules/@vueuse/core/index.esm.js";import{VOnClickOutside as X}from"../node_modules/@vueuse/components/index.esm.js";import x from"./ElButton.vue.esm2.js";import F from"./ElIcon.vue.esm2.js";import G from"./ElIconButton.vue.esm2.js";import J from"./_CustomTransition.vue.esm2.js";const Q={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"},R={class:"fixed inset-0 transition-opacity"},U={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},Y={class:"text-xl font-semibold truncate flex-1"},Z={key:0,class:"text-base font-normal text-wrap break-words"},b=["xs","m","l","xl"],ee={xs:360,m:576,l:768,xl:1280},ne=["primary","secondary","error"],ce=N({__name:"ElModal",props:z({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:z(["closed"],["update:isOpen"]),setup(k,{emit:O}){const f=$(k,"isOpen"),C=O,n=k,p=()=>f.value=!1,w=A(null),i=A(null),l=m(()=>n.color==="error"),{arrivedState:h}=q(i),{height:M}=H(i),{width:B}=K(),g=m(()=>i.value&&i.value.scrollHeight>M.value),E=P(document.body),r=m(()=>{for(let e=b.indexOf(n.size);e>=0;e--)if(B.value>=ee[b[e]])return b[e];return n.size}),_=e=>{e.target===w.value&&p()};return V(()=>f.value,e=>{(!n.isNestedModal||e)&&(E.value=e),e||C("closed")}),T("Escape",e=>{e.preventDefault(),p()}),(e,I)=>(o(),c(j,{to:"body"},[v(J,{name:"fade"},{default:D(()=>[f.value?(o(),d("div",Q,[t("div",R,[t("div",{ref_key:"backdrop",ref:w,class:"absolute inset-0 bg-gray-500 opacity-75"},null,512)]),L((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"}])},[t("div",{class:a(["flex items-center justify-between gap-2",{"px-4":r.value==="xs","px-8":r.value!=="xs"}])},[t("div",U,[t("div",{class:a([{"text-error bg-error-light-active":l.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(F,u(l.value?{name:"ExclamationCircleIcon"}:e.headerIcon,{class:"p-1"}),null,16)],2),t("div",Y,S(e.title),1)]),v(G,{icon:{name:"XMarkIcon"},error:l.value,onClick:p},null,8,["error"])],2),t("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",Z,S(e.description),1)):s("",!0),W(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:l.value||e.tertiaryAction.error}),null,16,["class","size","error"])):s("",!0),t("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:l.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:l.value||e.primaryAction.error}),null,16,["size","error"])):s("",!0)],2)],2)):s("",!0)],2)),[[y(X),_]])])):s("",!0)]),_:3})]))}});export{ce as default,ne as elModalColors,b as elModalSizes,ee 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'], '
|
|
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":"ikCACaA,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"}
|