@davincihealthcare/elty-design-system-vue 1.82.0 → 1.83.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.
|
@@ -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"}
|