@davincihealthcare/elty-design-system-vue 2.9.0 → 2.9.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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../ElTag.vue.cjs2.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../ElTag.vue.cjs2.js"),k=require("../ElButton.vue.cjs2.js"),i=require("../ElIconButton.vue.cjs2.js"),u=require("../ElTextCell.vue.cjs2.js"),_=require("../ElAvatar.vue.cjs2.js"),d=require("../ElIcon.vue.cjs2.js"),v=require("../forms/ElInputText.vue.cjs2.js"),g=require("../ElDropdown.vue.cjs2.js"),p=require("../ElTooltip.vue.cjs2.js"),y={class:"flex flex-col gap-2 grow min-w-8"},C={class:"flex gap-2 items-center"},T={class:"overflow-hidden"},b={key:0,class:"flex gap-2 items-center"},B={class:"flex gap-2 items-center"},h={key:1,class:"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis"},V={key:1,class:"overflow-y-hidden h-12 flex items-center"},E={class:"flex flex-col gap-2 grow min-w-8"},w={class:"text-neutral-darker text-xs inline font-normal text-nowrap"},N={key:0,class:"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis"},I={key:2,class:"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2"},S={key:3,class:"flex items-center h-12"},q=["default","tag","action","input"],a=t=>!t.type||t.type==="default",s=t=>t.type==="tag",A=t=>t.type==="action",m=t=>t.type==="input",x=t=>a(t)?t.mainText:s(t)?t.tag.text:null,z=t=>{var l;return(l=t.sortableAndFilterableValue)!=null&&l.length?t.sortableAndFilterableValue:a(t)?t.mainText:s(t)?t.tag.text:m(t)&&t.value||""},F=e.defineComponent({__name:"ElTableCell",props:{cell:{}},setup(t){return(l,r)=>a(l.cell)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex h-12 gap-3 items-center text-nowrap",l.cell.clickAction&&"cursor-pointer"])},[l.cell.avatar?(e.openBlock(),e.createBlock(_.default,{key:0,size:"sm",picture:l.cell.avatar.picture,label:l.cell.avatar.label,class:"shrink-0"},null,8,["picture","label"])):e.createCommentVNode("",!0),e.createElementVNode("div",y,[e.createElementVNode("div",C,[l.cell.mainIcon?(e.openBlock(),e.createBlock(p.default,{key:0,title:l.cell.mainIconTooltip??""},{default:e.withCtx(()=>[e.createVNode(d.default,{name:l.cell.mainIcon.name,solid:l.cell.mainIcon.solid,color:l.cell.mainIcon.color,class:e.normalizeClass(["w-4 h-4 shrink-0",[!l.cell.mainIcon.color&&l.cell.mainTextColor&&l.cell.mainTextStyle!=="underline"?e.unref(u.getTextColorClass)(l.cell.mainTextColor,l.cell.mainTextStyle):"text-neutral-darker",l.cell.mainIconTooltip?"cursor-pointer":""]])},null,8,["name","solid","color","class"])]),_:1},8,["title"])):e.createCommentVNode("",!0),e.createElementVNode("div",T,[e.createVNode(u.default,{label:l.cell.mainText,style:e.normalizeStyle(l.cell.mainTextStyle),"color-text":l.cell.mainTextColor,onClick:r[0]||(r[0]=()=>{a(l.cell)&&l.cell.clickAction&&l.cell.clickAction()})},null,8,["label","style","color-text"])])]),l.cell.subIcon||l.cell.subText?(e.openBlock(),e.createElementBlock("div",b,[l.cell.subIcon?(e.openBlock(),e.createBlock(p.default,{key:0,title:l.cell.subIconTooltip??""},{default:e.withCtx(()=>[e.createElementVNode("div",B,[e.createVNode(d.default,{name:l.cell.subIcon.name,solid:l.cell.subIcon.solid,color:l.cell.subIcon.color,class:e.normalizeClass(["w-4 h-4 shrink-0",[l.cell.subIconTooltip?"cursor-pointer":"",l.cell.subIcon.color?"":"text-neutral-lighter"]])},null,8,["name","solid","color","class"])])]),_:1},8,["title"])):e.createCommentVNode("",!0),l.cell.subText?(e.openBlock(),e.createElementBlock("div",h,e.toDisplayString(l.cell.subText),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)])],2)):s(l.cell)?(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("div",E,[e.createElementVNode("div",w,[e.createVNode(f.default,e.normalizeProps(e.guardReactiveProps({size:"xs",...l.cell.tag})),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.cell.tag.text),1)]),_:1},16)]),l.cell.subText?(e.openBlock(),e.createElementBlock("div",N,e.toDisplayString(l.cell.subText),1)):e.createCommentVNode("",!0)])])):A(l.cell)?(e.openBlock(),e.createElementBlock("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.cell.buttons,(o,n)=>(e.openBlock(),e.createBlock(k.default,e.mergeProps({key:n,ref_for:!0},o),null,16))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.cell.iconButtons,(o,n)=>(e.openBlock(),e.createBlock(i.default,e.mergeProps({key:n,ref_for:!0},o),null,16))),128)),l.cell.dropdown?(e.openBlock(),e.createBlock(g.default,e.mergeProps({key:0},l.cell.dropdown,{left:""}),{anchor:e.withCtx(({toggle:o})=>[e.createVNode(i.default,{disabled:l.cell.dropdown.disabled,icon:{name:"EllipsisVerticalIcon"},onClick:o},null,8,["disabled","onClick"])]),_:1},16)):e.createCommentVNode("",!0)])):m(l.cell)?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(v.default,{class:"w-full","model-value":l.cell.value,"onUpdate:modelValue":r[1]||(r[1]=o=>{var n,c;return(c=(n=l.cell).onUpdate)==null?void 0:c.call(n,o)})},null,8,["model-value"])])):e.createCommentVNode("",!0)}});exports.dataCellTypes=q;exports.default=F;exports.getCellSortableAndFilterableValue=z;exports.getCellText=x;
|
|
2
2
|
//# sourceMappingURL=ElTableCell.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTableCell.vue.cjs2.js","sources":["../../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n sortableAndFilterableValue?: string;\n type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n type?: 'default';\n mainIcon?: ElIconProps;\n mainIconTooltip?: string;\n mainText: string;\n mainTextStyle?: ElTextCellStyle;\n mainTextColor?: ElTextCellColor;\n subIcon?: ElIconProps;\n subIconTooltip?: string;\n subText?: string;\n avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n clickAction?: (payload?: PointerEvent) => void;\n longText?: boolean;\n truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n type?: 'tag';\n tag: InstanceType<typeof ElTag>['$props'];\n subText?: string;\n truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n type?: 'action';\n buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n type?: 'input';\n value?: string;\n onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n if (isCellTypeInput(cell)) return cell.value || '';\n return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n cell: DataCell;\n}>();\n</script>\n\n<template>\n <!-- type DEFAULT -->\n <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n <div class=\"flex flex-col gap-2 grow min-w-8\">\n <div class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n <ElIcon\n :name=\"cell.mainIcon.name\"\n :solid=\"cell.mainIcon.solid\"\n class=\"w-4 h-4 shrink-0\"\n :class=\"[\n cell.mainTextColor && cell.mainTextStyle !== 'underline'\n ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n : 'text-neutral-darker',\n cell.mainIconTooltip ? 'cursor-pointer' : '',\n ]\"\n />\n </ElTooltip>\n <div class=\"overflow-hidden\">\n <ElTextCell\n :label=\"cell.mainText\"\n :style=\"cell.mainTextStyle\"\n :color-text=\"cell.mainTextColor\"\n @click=\"\n () => {\n if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n }\n \"\n />\n </div>\n </div>\n <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n <div class=\"flex gap-2 items-center\">\n <ElIcon\n :name=\"cell.subIcon.name\"\n :solid=\"cell.subIcon.solid\"\n class=\"w-4 h-4
|
|
1
|
+
{"version":3,"file":"ElTableCell.vue.cjs2.js","sources":["../../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n sortableAndFilterableValue?: string;\n type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n type?: 'default';\n mainIcon?: ElIconProps;\n mainIconTooltip?: string;\n mainText: string;\n mainTextStyle?: ElTextCellStyle;\n mainTextColor?: ElTextCellColor;\n subIcon?: ElIconProps;\n subIconTooltip?: string;\n subText?: string;\n avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n clickAction?: (payload?: PointerEvent) => void;\n longText?: boolean;\n truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n type?: 'tag';\n tag: InstanceType<typeof ElTag>['$props'];\n subText?: string;\n truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n type?: 'action';\n buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n type?: 'input';\n value?: string;\n onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n if (isCellTypeInput(cell)) return cell.value || '';\n return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n cell: DataCell;\n}>();\n</script>\n\n<template>\n <!-- type DEFAULT -->\n <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n <div class=\"flex flex-col gap-2 grow min-w-8\">\n <div class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n <ElIcon\n :name=\"cell.mainIcon.name\"\n :solid=\"cell.mainIcon.solid\"\n :color=\"cell.mainIcon.color\"\n class=\"w-4 h-4 shrink-0\"\n :class=\"[\n !cell.mainIcon.color && cell.mainTextColor && cell.mainTextStyle !== 'underline'\n ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n : 'text-neutral-darker',\n cell.mainIconTooltip ? 'cursor-pointer' : '',\n ]\"\n />\n </ElTooltip>\n <div class=\"overflow-hidden\">\n <ElTextCell\n :label=\"cell.mainText\"\n :style=\"cell.mainTextStyle\"\n :color-text=\"cell.mainTextColor\"\n @click=\"\n () => {\n if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n }\n \"\n />\n </div>\n </div>\n <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n <div class=\"flex gap-2 items-center\">\n <ElIcon\n :name=\"cell.subIcon.name\"\n :solid=\"cell.subIcon.solid\"\n :color=\"cell.subIcon.color\"\n class=\"w-4 h-4 shrink-0\"\n :class=\"[cell.subIconTooltip ? 'cursor-pointer' : '', cell.subIcon.color ? '' : 'text-neutral-lighter']\"\n />\n </div>\n </ElTooltip>\n <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n {{ cell.subText }}\n </div>\n </div>\n </div>\n </div>\n\n <!-- type TAG -->\n <div v-else-if=\"isCellTypeTag(cell)\" class=\"overflow-y-hidden h-12 flex items-center\">\n <div class=\"flex flex-col gap-2 grow min-w-8\">\n <div class=\"text-neutral-darker text-xs inline font-normal text-nowrap\">\n <ElTag v-bind=\"{ size: 'xs', ...cell.tag }\">\n {{ cell.tag.text }}\n </ElTag>\n </div>\n\n <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n {{ cell.subText }}\n </div>\n </div>\n </div>\n\n <!-- ACTION -->\n <div v-else-if=\"isCellTypeAction(cell)\" class=\"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2\">\n <ElButton v-for=\"(button, index) in cell.buttons\" :key=\"index\" v-bind=\"button\" />\n <ElIconButton v-for=\"(iconButton, index) in cell.iconButtons\" :key=\"index\" v-bind=\"iconButton\" />\n <ElDropdown v-if=\"cell.dropdown\" v-bind=\"cell.dropdown\" left>\n <template #anchor=\"{ toggle }\">\n <ElIconButton :disabled=\"cell.dropdown.disabled\" :icon=\"{ name: 'EllipsisVerticalIcon' }\" @click=\"toggle\" />\n </template>\n </ElDropdown>\n </div>\n\n <!-- INPUT -->\n <div v-else-if=\"isCellTypeInput(cell)\" class=\"flex items-center h-12\">\n <ElInputText class=\"w-full\" :model-value=\"cell.value\" @update:model-value=\"cell.onUpdate?.($event)\" />\n </div>\n</template>\n"],"names":["dataCellTypes","isCellTypeDefault","cell","isCellTypeTag","isCellTypeAction","isCellTypeInput","getCellText","getCellSortableAndFilterableValue","_a"],"mappings":"8nCAYaA,EAAgB,CAAC,UAAW,MAAO,SAAU,OAAO,EA8C3DC,EAAqBC,GAAwC,CAACA,EAAK,MAAQA,EAAK,OAAS,UACzFC,EAAiBD,GAAoCA,EAAK,OAAS,MACnEE,EAAoBF,GAAuCA,EAAK,OAAS,SACzEG,EAAmBH,GAAsCA,EAAK,OAAS,QAEhEI,EAAeJ,GACtBD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KAClC,KAGIK,EAAqCL,GAA2B,OAC3E,OAAIM,EAAAN,EAAK,6BAAL,MAAAM,EAAiC,OAAeN,EAAK,2BACrDD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KACrCG,EAAgBH,CAAI,GAAUA,EAAK,OAAS,EAElD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as I,openBlock as t,createElementBlock as o,normalizeClass as f,createBlock as
|
|
1
|
+
import{defineComponent as I,openBlock as t,createElementBlock as o,normalizeClass as f,createBlock as s,createCommentVNode as n,createElementVNode as a,withCtx as m,createVNode as c,unref as V,normalizeStyle as $,toDisplayString as p,normalizeProps as A,guardReactiveProps as S,createTextVNode as z,Fragment as T,renderList as g,mergeProps as y}from"vue";import _ from"../ElTag.vue.esm2.js";import B from"../ElButton.vue.esm2.js";import k from"../ElIconButton.vue.esm2.js";import E,{getTextColorClass as F}from"../ElTextCell.vue.esm2.js";import N from"../ElAvatar.vue.esm2.js";import v from"../ElIcon.vue.esm2.js";import x from"../forms/ElInputText.vue.esm2.js";import P from"../ElDropdown.vue.esm2.js";import C from"../ElTooltip.vue.esm2.js";const D={class:"flex flex-col gap-2 grow min-w-8"},U={class:"flex gap-2 items-center"},j={class:"overflow-hidden"},L={key:0,class:"flex gap-2 items-center"},R={class:"flex gap-2 items-center"},q={key:1,class:"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis"},G={key:1,class:"overflow-y-hidden h-12 flex items-center"},H={class:"flex flex-col gap-2 grow min-w-8"},J={class:"text-neutral-darker text-xs inline font-normal text-nowrap"},K={key:0,class:"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis"},M={key:2,class:"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2"},O={key:3,class:"flex items-center h-12"},ie=["default","tag","action","input"],d=l=>!l.type||l.type==="default",b=l=>l.type==="tag",Q=l=>l.type==="action",w=l=>l.type==="input",se=l=>d(l)?l.mainText:b(l)?l.tag.text:null,ae=l=>{var e;return(e=l.sortableAndFilterableValue)!=null&&e.length?l.sortableAndFilterableValue:d(l)?l.mainText:b(l)?l.tag.text:w(l)&&l.value||""},ce=I({__name:"ElTableCell",props:{cell:{}},setup(l){return(e,u)=>d(e.cell)?(t(),o("div",{key:0,class:f(["flex h-12 gap-3 items-center text-nowrap",e.cell.clickAction&&"cursor-pointer"])},[e.cell.avatar?(t(),s(N,{key:0,size:"sm",picture:e.cell.avatar.picture,label:e.cell.avatar.label,class:"shrink-0"},null,8,["picture","label"])):n("",!0),a("div",D,[a("div",U,[e.cell.mainIcon?(t(),s(C,{key:0,title:e.cell.mainIconTooltip??""},{default:m(()=>[c(v,{name:e.cell.mainIcon.name,solid:e.cell.mainIcon.solid,color:e.cell.mainIcon.color,class:f(["w-4 h-4 shrink-0",[!e.cell.mainIcon.color&&e.cell.mainTextColor&&e.cell.mainTextStyle!=="underline"?V(F)(e.cell.mainTextColor,e.cell.mainTextStyle):"text-neutral-darker",e.cell.mainIconTooltip?"cursor-pointer":""]])},null,8,["name","solid","color","class"])]),_:1},8,["title"])):n("",!0),a("div",j,[c(E,{label:e.cell.mainText,style:$(e.cell.mainTextStyle),"color-text":e.cell.mainTextColor,onClick:u[0]||(u[0]=()=>{d(e.cell)&&e.cell.clickAction&&e.cell.clickAction()})},null,8,["label","style","color-text"])])]),e.cell.subIcon||e.cell.subText?(t(),o("div",L,[e.cell.subIcon?(t(),s(C,{key:0,title:e.cell.subIconTooltip??""},{default:m(()=>[a("div",R,[c(v,{name:e.cell.subIcon.name,solid:e.cell.subIcon.solid,color:e.cell.subIcon.color,class:f(["w-4 h-4 shrink-0",[e.cell.subIconTooltip?"cursor-pointer":"",e.cell.subIcon.color?"":"text-neutral-lighter"]])},null,8,["name","solid","color","class"])])]),_:1},8,["title"])):n("",!0),e.cell.subText?(t(),o("div",q,p(e.cell.subText),1)):n("",!0)])):n("",!0)])],2)):b(e.cell)?(t(),o("div",G,[a("div",H,[a("div",J,[c(_,A(S({size:"xs",...e.cell.tag})),{default:m(()=>[z(p(e.cell.tag.text),1)]),_:1},16)]),e.cell.subText?(t(),o("div",K,p(e.cell.subText),1)):n("",!0)])])):Q(e.cell)?(t(),o("div",M,[(t(!0),o(T,null,g(e.cell.buttons,(r,i)=>(t(),s(B,y({key:i,ref_for:!0},r),null,16))),128)),(t(!0),o(T,null,g(e.cell.iconButtons,(r,i)=>(t(),s(k,y({key:i,ref_for:!0},r),null,16))),128)),e.cell.dropdown?(t(),s(P,y({key:0},e.cell.dropdown,{left:""}),{anchor:m(({toggle:r})=>[c(k,{disabled:e.cell.dropdown.disabled,icon:{name:"EllipsisVerticalIcon"},onClick:r},null,8,["disabled","onClick"])]),_:1},16)):n("",!0)])):w(e.cell)?(t(),o("div",O,[c(x,{class:"w-full","model-value":e.cell.value,"onUpdate:modelValue":u[1]||(u[1]=r=>{var i,h;return(h=(i=e.cell).onUpdate)==null?void 0:h.call(i,r)})},null,8,["model-value"])])):n("",!0)}});export{ie as dataCellTypes,ce as default,ae as getCellSortableAndFilterableValue,se as getCellText};
|
|
2
2
|
//# sourceMappingURL=ElTableCell.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTableCell.vue.esm2.js","sources":["../../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n sortableAndFilterableValue?: string;\n type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n type?: 'default';\n mainIcon?: ElIconProps;\n mainIconTooltip?: string;\n mainText: string;\n mainTextStyle?: ElTextCellStyle;\n mainTextColor?: ElTextCellColor;\n subIcon?: ElIconProps;\n subIconTooltip?: string;\n subText?: string;\n avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n clickAction?: (payload?: PointerEvent) => void;\n longText?: boolean;\n truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n type?: 'tag';\n tag: InstanceType<typeof ElTag>['$props'];\n subText?: string;\n truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n type?: 'action';\n buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n type?: 'input';\n value?: string;\n onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n if (isCellTypeInput(cell)) return cell.value || '';\n return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n cell: DataCell;\n}>();\n</script>\n\n<template>\n <!-- type DEFAULT -->\n <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n <div class=\"flex flex-col gap-2 grow min-w-8\">\n <div class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n <ElIcon\n :name=\"cell.mainIcon.name\"\n :solid=\"cell.mainIcon.solid\"\n class=\"w-4 h-4 shrink-0\"\n :class=\"[\n cell.mainTextColor && cell.mainTextStyle !== 'underline'\n ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n : 'text-neutral-darker',\n cell.mainIconTooltip ? 'cursor-pointer' : '',\n ]\"\n />\n </ElTooltip>\n <div class=\"overflow-hidden\">\n <ElTextCell\n :label=\"cell.mainText\"\n :style=\"cell.mainTextStyle\"\n :color-text=\"cell.mainTextColor\"\n @click=\"\n () => {\n if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n }\n \"\n />\n </div>\n </div>\n <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n <div class=\"flex gap-2 items-center\">\n <ElIcon\n :name=\"cell.subIcon.name\"\n :solid=\"cell.subIcon.solid\"\n class=\"w-4 h-4
|
|
1
|
+
{"version":3,"file":"ElTableCell.vue.esm2.js","sources":["../../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n sortableAndFilterableValue?: string;\n type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n type?: 'default';\n mainIcon?: ElIconProps;\n mainIconTooltip?: string;\n mainText: string;\n mainTextStyle?: ElTextCellStyle;\n mainTextColor?: ElTextCellColor;\n subIcon?: ElIconProps;\n subIconTooltip?: string;\n subText?: string;\n avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n clickAction?: (payload?: PointerEvent) => void;\n longText?: boolean;\n truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n type?: 'tag';\n tag: InstanceType<typeof ElTag>['$props'];\n subText?: string;\n truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n type?: 'action';\n buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n type?: 'input';\n value?: string;\n onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n if (isCellTypeDefault(cell)) return cell.mainText;\n if (isCellTypeTag(cell)) return cell.tag.text;\n if (isCellTypeInput(cell)) return cell.value || '';\n return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n cell: DataCell;\n}>();\n</script>\n\n<template>\n <!-- type DEFAULT -->\n <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n <div class=\"flex flex-col gap-2 grow min-w-8\">\n <div class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n <ElIcon\n :name=\"cell.mainIcon.name\"\n :solid=\"cell.mainIcon.solid\"\n :color=\"cell.mainIcon.color\"\n class=\"w-4 h-4 shrink-0\"\n :class=\"[\n !cell.mainIcon.color && cell.mainTextColor && cell.mainTextStyle !== 'underline'\n ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n : 'text-neutral-darker',\n cell.mainIconTooltip ? 'cursor-pointer' : '',\n ]\"\n />\n </ElTooltip>\n <div class=\"overflow-hidden\">\n <ElTextCell\n :label=\"cell.mainText\"\n :style=\"cell.mainTextStyle\"\n :color-text=\"cell.mainTextColor\"\n @click=\"\n () => {\n if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n }\n \"\n />\n </div>\n </div>\n <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n <div class=\"flex gap-2 items-center\">\n <ElIcon\n :name=\"cell.subIcon.name\"\n :solid=\"cell.subIcon.solid\"\n :color=\"cell.subIcon.color\"\n class=\"w-4 h-4 shrink-0\"\n :class=\"[cell.subIconTooltip ? 'cursor-pointer' : '', cell.subIcon.color ? '' : 'text-neutral-lighter']\"\n />\n </div>\n </ElTooltip>\n <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n {{ cell.subText }}\n </div>\n </div>\n </div>\n </div>\n\n <!-- type TAG -->\n <div v-else-if=\"isCellTypeTag(cell)\" class=\"overflow-y-hidden h-12 flex items-center\">\n <div class=\"flex flex-col gap-2 grow min-w-8\">\n <div class=\"text-neutral-darker text-xs inline font-normal text-nowrap\">\n <ElTag v-bind=\"{ size: 'xs', ...cell.tag }\">\n {{ cell.tag.text }}\n </ElTag>\n </div>\n\n <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n {{ cell.subText }}\n </div>\n </div>\n </div>\n\n <!-- ACTION -->\n <div v-else-if=\"isCellTypeAction(cell)\" class=\"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2\">\n <ElButton v-for=\"(button, index) in cell.buttons\" :key=\"index\" v-bind=\"button\" />\n <ElIconButton v-for=\"(iconButton, index) in cell.iconButtons\" :key=\"index\" v-bind=\"iconButton\" />\n <ElDropdown v-if=\"cell.dropdown\" v-bind=\"cell.dropdown\" left>\n <template #anchor=\"{ toggle }\">\n <ElIconButton :disabled=\"cell.dropdown.disabled\" :icon=\"{ name: 'EllipsisVerticalIcon' }\" @click=\"toggle\" />\n </template>\n </ElDropdown>\n </div>\n\n <!-- INPUT -->\n <div v-else-if=\"isCellTypeInput(cell)\" class=\"flex items-center h-12\">\n <ElInputText class=\"w-full\" :model-value=\"cell.value\" @update:model-value=\"cell.onUpdate?.($event)\" />\n </div>\n</template>\n"],"names":["dataCellTypes","isCellTypeDefault","cell","isCellTypeTag","isCellTypeAction","isCellTypeInput","getCellText","getCellSortableAndFilterableValue","_a"],"mappings":"84CAYaA,GAAgB,CAAC,UAAW,MAAO,SAAU,OAAO,EA8C3DC,EAAqBC,GAAwC,CAACA,EAAK,MAAQA,EAAK,OAAS,UACzFC,EAAiBD,GAAoCA,EAAK,OAAS,MACnEE,EAAoBF,GAAuCA,EAAK,OAAS,SACzEG,EAAmBH,GAAsCA,EAAK,OAAS,QAEhEI,GAAeJ,GACtBD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KAClC,KAGIK,GAAqCL,GAA2B,OAC3E,OAAIM,EAAAN,EAAK,6BAAL,MAAAM,EAAiC,OAAeN,EAAK,2BACrDD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KACrCG,EAAgBH,CAAI,GAAUA,EAAK,OAAS,EAElD"}
|