@davincihealthcare/elty-design-system-vue 2.10.4 → 2.11.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"},m=["innerHTML"],p=["innerHTML"],y={key:0,class:"font-semibold min-h-6"},f={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,k)=>{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,m)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("span",{key:1,innerHTML:t.description},null,8,p)):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.title?(e.openBlock(),e.createElementBlock("span",y,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("span",f,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","hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500":t.status==="warning","text-yellow-700":t.action.variant==="tertiary"&&t.status==="warning","hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500":t.action.variant==="secondary"&&t.status==="warning","bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500":t.action.variant==="primary"&&t.status==="warning"}],error:t.status==="error",label:(o=t.action)==null?void 0:o.label,onClick:(r=t.action)==null?void 0:r.onClick}),null,16,["variant","class","error","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 'hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500': status === 'warning',\n 'text-yellow-700': action.variant === 'tertiary' && status === 'warning',\n 'hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500': action.variant === 'secondary' && status === 'warning',\n 'bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500':\n action.variant === 'primary' && status === 'warning',\n }\"\n :error=\"status === 'error'\"\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 w,computed as y,openBlock as n,createElementBlock as t,normalizeClass as p,createElementVNode as s,createBlock as a,mergeProps as c,Fragment as d,createCommentVNode as r,toDisplayString as u}from"vue";import g from"./ElIcon.vue.esm2.js";import v from"./ElButton.vue.esm2.js";import h 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"},T={key:1},$=["error","warning","info"],S=w({__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 o=m,f=y(()=>{var e;if((e=o.icon)!=null&&e.name)return o.icon.name;switch(o.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(e,E)=>{var i,l;return n(),t("div",{class:p(["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"}])},[s("div",b,[e.loading?(n(),a(h,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(n(),a(g,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"])),s("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",T,u(e.description),1)):r("",!0)],64))])]),e.action?(n(),a(v,c({key:0},e.action,{variant:e.action.variant??"tertiary",class:["flex-shrink-0",{underline:!e.action.variant||e.action.variant==="tertiary","hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500":e.status==="warning","text-yellow-700":e.action.variant==="tertiary"&&e.status==="warning","hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500":e.action.variant==="secondary"&&e.status==="warning","bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500":e.action.variant==="primary"&&e.status==="warning"}],error:e.status==="error",label:(i=e.action)==null?void 0:i.label,onClick:(l=e.action)==null?void 0:l.onClick}),null,16,["variant","class","error","label","onClick"])):r("",!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
|
|
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 'hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500': status === 'warning',\n 'text-yellow-700': action.variant === 'tertiary' && status === 'warning',\n 'hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500': action.variant === 'secondary' && status === 'warning',\n 'bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500':\n action.variant === 'primary' && status === 'warning',\n }\"\n :error=\"status === 'error'\"\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"}
|