@davincihealthcare/elty-design-system-vue 2.14.0 → 2.14.2
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/src/ElActionButton.vue.cjs2.js +1 -1
- package/dist/src/ElActionButton.vue.cjs2.js.map +1 -1
- package/dist/src/ElActionButton.vue.esm2.js +1 -1
- package/dist/src/ElActionButton.vue.esm2.js.map +1 -1
- package/dist/{node_modules/swiper/swiper.css → src/ElCarousel.css} +1 -1
- package/dist/src/ElCarousel.vue.cjs.js +1 -1
- package/dist/src/ElCarousel.vue.cjs2.js +1 -1
- package/dist/src/ElCarousel.vue.cjs2.js.map +1 -1
- package/dist/src/ElCarousel.vue.esm.js +1 -1
- package/dist/src/ElCarousel.vue.esm2.js +1 -1
- package/dist/src/ElCarousel.vue.esm2.js.map +1 -1
- package/dist/src/ElContainerTemplate.vue.cjs2.js +1 -1
- package/dist/src/ElContainerTemplate.vue.cjs2.js.map +1 -1
- package/dist/src/ElContainerTemplate.vue.esm2.js +1 -1
- package/dist/src/ElContainerTemplate.vue.esm2.js.map +1 -1
- package/dist/src/forms/ElInputSearch.vue.cjs2.js +1 -1
- package/dist/src/forms/ElInputSearch.vue.cjs2.js.map +1 -1
- package/dist/src/forms/ElInputSearch.vue.esm2.js +1 -1
- package/dist/src/forms/ElInputSearch.vue.esm2.js.map +1 -1
- package/dist/src/index.cjs.js +1 -1
- package/dist/src/index.esm.js +1 -1
- package/dist/src/table/ElServerSideTable.vue.cjs2.js +1 -1
- package/dist/src/table/ElServerSideTable.vue.cjs2.js.map +1 -1
- package/dist/src/table/ElServerSideTable.vue.esm2.js +1 -1
- package/dist/src/table/ElServerSideTable.vue.esm2.js.map +1 -1
- package/package.json +1 -1
- package/dist/node_modules/swiper/modules/pagination.css +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const s=require("./ElIcon.vue.cjs2.js"),c=require("./ElBadge.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const s=require("./ElIcon.vue.cjs2.js"),c=require("./ElBadge.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css */require("./forms/ElInputSearch.vue.cjs2.js");require("./forms/ElInputAutocomplete.vue.cjs2.js");const d=["data-cy"],p={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},v=["base","l"],m=["primary","secondary"],f=["default","hover","pressed","active"],b=e.defineComponent({__name:"ElActionButton",props:{id:{default:void 0},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{default:void 0},trailingIcon:{default:void 0},badge:{default:void 0},onClick:{type:Function,default:void 0}},emits:["click"],setup(l,{emit:i}){const t=l,n=()=>{a.value=!0,u("click",t.onClick)},a=e.ref(t.status==="pressed"),u=i;return(r,o)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed",{"text-sm h-8":t.size==="base","text-base h-10":t.size==="l","border-transparent text-neutral-darker":t.status==="default","border-transparent text-neutral-darker bg-neutral-hover":t.status==="hover","border-transparent bg-neutral-pressed ":(a.value||t.status==="pressed")&&t.status!=="active"&&t.status!=="default"&&t.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":t.status==="active"&&t.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":t.status==="active"&&t.color==="secondary"}]),"data-cy":t.label?t.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:o[0]||(o[0]=g=>a.value=!0),onClick:n},[r.leadingIcon?(e.openBlock(),e.createBlock(e.unref(s.default),e.mergeProps({key:0},r.leadingIcon,{class:{"h-4 w-4":r.size==="base","h-5 w-5":r.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.label),1),r.trailingIcon?(e.openBlock(),e.createBlock(e.unref(s.default),e.mergeProps({key:1},r.trailingIcon,{class:{"h-4 w-4":r.size==="base","h-5 w-5":r.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),r.badge?(e.openBlock(),e.createElementBlock("div",p,[e.createVNode(e.unref(c.default),e.mergeProps(r.badge,{color:"red"}),null,16)])):e.createCommentVNode("",!0)],42,d))}});exports.default=b;exports.elActionButtonColors=m;exports.elActionButtonSizes=v;exports.elActionButtonStatus=f;
|
|
2
2
|
//# sourceMappingURL=ElActionButton.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElActionButton.vue.cjs2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n id?: string;\n label: string;\n size: ElActionButtonSizes;\n color: ElActionButtonColors;\n status: ElActionButtonStatus;\n leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n trailingIcon?: InstanceType<typeof ElIcon>['$props'] & { name: 'ChevronDownIcon' };\n badge?: Omit<InstanceType<typeof ElBadge>['$props'], 'badge'>;\n onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n id: undefined,\n size: 'base',\n color: 'primary',\n status: 'default',\n leadingIcon: undefined,\n trailingIcon: undefined,\n badge: undefined,\n onClick: undefined,\n});\n\nconst onClick = () => {\n isPressed.value = true;\n $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n <button\n class=\"transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed\"\n :class=\"{\n 'text-sm h-8': props.size === 'base',\n 'text-base h-10': props.size === 'l',\n 'border-transparent text-neutral-darker': props.status === 'default',\n 'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n 'border-transparent bg-neutral-pressed ':\n (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n 'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n 'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n }\"\n :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n @mouse-down=\"isPressed = true\"\n @click=\"onClick\"\n >\n <ElIcon\n v-if=\"leadingIcon\"\n v-bind=\"leadingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <span> {{ props.label }}</span>\n <ElIcon\n v-if=\"trailingIcon\"\n v-bind=\"trailingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n <ElBadge v-bind=\"badge\" color=\"red\" />\n </div>\n </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElActionButton.vue.cjs2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n id?: string;\n label: string;\n size: ElActionButtonSizes;\n color: ElActionButtonColors;\n status: ElActionButtonStatus;\n leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n trailingIcon?: InstanceType<typeof ElIcon>['$props'] & { name: 'ChevronDownIcon' };\n badge?: Omit<InstanceType<typeof ElBadge>['$props'], 'badge'>;\n onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n id: undefined,\n size: 'base',\n color: 'primary',\n status: 'default',\n leadingIcon: undefined,\n trailingIcon: undefined,\n badge: undefined,\n onClick: undefined,\n});\n\nconst onClick = () => {\n isPressed.value = true;\n $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n <button\n class=\"transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed\"\n :class=\"{\n 'text-sm h-8': props.size === 'base',\n 'text-base h-10': props.size === 'l',\n 'border-transparent text-neutral-darker': props.status === 'default',\n 'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n 'border-transparent bg-neutral-pressed ':\n (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n 'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n 'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n }\"\n :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n @mouse-down=\"isPressed = true\"\n @click=\"onClick\"\n >\n <ElIcon\n v-if=\"leadingIcon\"\n v-bind=\"leadingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <span> {{ props.label }}</span>\n <ElIcon\n v-if=\"trailingIcon\"\n v-bind=\"trailingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n <ElBadge v-bind=\"badge\" color=\"red\" />\n </div>\n </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"yyCACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,EAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,0TAoB5E,MAAMC,EAAQC,EAWRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAA,IAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as v,ref as b,openBlock as r,createElementBlock as n,normalizeClass as g,createBlock as c,unref as a,mergeProps as s,createCommentVNode as i,createElementVNode as y,toDisplayString as h,createVNode as k}from"vue";/* empty css */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import d from"./ElIcon.vue.esm2.js";import z from"./ElBadge.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"../node_modules/swiper/shared/swiper-core.esm.js";/* empty css
|
|
1
|
+
import{defineComponent as v,ref as b,openBlock as r,createElementBlock as n,normalizeClass as g,createBlock as c,unref as a,mergeProps as s,createCommentVNode as i,createElementVNode as y,toDisplayString as h,createVNode as k}from"vue";/* empty css */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import d from"./ElIcon.vue.esm2.js";import z from"./ElBadge.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"../node_modules/swiper/shared/swiper-core.esm.js";/* empty css */import"./forms/ElInputSearch.vue.esm2.js";import"./forms/ElInputAutocomplete.vue.esm2.js";const B=["data-cy"],C={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},W=["base","l"],X=["primary","secondary"],Y=["default","hover","pressed","active"],Z=v({__name:"ElActionButton",props:{id:{default:void 0},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{default:void 0},trailingIcon:{default:void 0},badge:{default:void 0},onClick:{type:Function,default:void 0}},emits:["click"],setup(u,{emit:m}){const e=u,p=()=>{o.value=!0,f("click",e.onClick)},o=b(e.status==="pressed"),f=m;return(t,l)=>(r(),n("button",{class:g(["transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed",{"text-sm h-8":e.size==="base","text-base h-10":e.size==="l","border-transparent text-neutral-darker":e.status==="default","border-transparent text-neutral-darker bg-neutral-hover":e.status==="hover","border-transparent bg-neutral-pressed ":(o.value||e.status==="pressed")&&e.status!=="active"&&e.status!=="default"&&e.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":e.status==="active"&&e.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":e.status==="active"&&e.color==="secondary"}]),"data-cy":e.label?e.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:l[0]||(l[0]=w=>o.value=!0),onClick:p},[t.leadingIcon?(r(),c(a(d),s({key:0},t.leadingIcon,{class:{"h-4 w-4":t.size==="base","h-5 w-5":t.size==="l"}}),null,16,["class"])):i("",!0),y("span",null,h(e.label),1),t.trailingIcon?(r(),c(a(d),s({key:1},t.trailingIcon,{class:{"h-4 w-4":t.size==="base","h-5 w-5":t.size==="l"}}),null,16,["class"])):i("",!0),t.badge?(r(),n("div",C,[k(a(z),s(t.badge,{color:"red"}),null,16)])):i("",!0)],42,B))}});export{Z as default,X as elActionButtonColors,W as elActionButtonSizes,Y as elActionButtonStatus};
|
|
2
2
|
//# sourceMappingURL=ElActionButton.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElActionButton.vue.esm2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n id?: string;\n label: string;\n size: ElActionButtonSizes;\n color: ElActionButtonColors;\n status: ElActionButtonStatus;\n leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n trailingIcon?: InstanceType<typeof ElIcon>['$props'] & { name: 'ChevronDownIcon' };\n badge?: Omit<InstanceType<typeof ElBadge>['$props'], 'badge'>;\n onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n id: undefined,\n size: 'base',\n color: 'primary',\n status: 'default',\n leadingIcon: undefined,\n trailingIcon: undefined,\n badge: undefined,\n onClick: undefined,\n});\n\nconst onClick = () => {\n isPressed.value = true;\n $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n <button\n class=\"transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed\"\n :class=\"{\n 'text-sm h-8': props.size === 'base',\n 'text-base h-10': props.size === 'l',\n 'border-transparent text-neutral-darker': props.status === 'default',\n 'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n 'border-transparent bg-neutral-pressed ':\n (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n 'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n 'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n }\"\n :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n @mouse-down=\"isPressed = true\"\n @click=\"onClick\"\n >\n <ElIcon\n v-if=\"leadingIcon\"\n v-bind=\"leadingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <span> {{ props.label }}</span>\n <ElIcon\n v-if=\"trailingIcon\"\n v-bind=\"trailingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n <ElBadge v-bind=\"badge\" color=\"red\" />\n </div>\n </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElActionButton.vue.esm2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n id?: string;\n label: string;\n size: ElActionButtonSizes;\n color: ElActionButtonColors;\n status: ElActionButtonStatus;\n leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n trailingIcon?: InstanceType<typeof ElIcon>['$props'] & { name: 'ChevronDownIcon' };\n badge?: Omit<InstanceType<typeof ElBadge>['$props'], 'badge'>;\n onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n id: undefined,\n size: 'base',\n color: 'primary',\n status: 'default',\n leadingIcon: undefined,\n trailingIcon: undefined,\n badge: undefined,\n onClick: undefined,\n});\n\nconst onClick = () => {\n isPressed.value = true;\n $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n <button\n class=\"transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed\"\n :class=\"{\n 'text-sm h-8': props.size === 'base',\n 'text-base h-10': props.size === 'l',\n 'border-transparent text-neutral-darker': props.status === 'default',\n 'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n 'border-transparent bg-neutral-pressed ':\n (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n 'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n 'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n }\"\n :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n @mouse-down=\"isPressed = true\"\n @click=\"onClick\"\n >\n <ElIcon\n v-if=\"leadingIcon\"\n v-bind=\"leadingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <span> {{ props.label }}</span>\n <ElIcon\n v-if=\"trailingIcon\"\n v-bind=\"trailingIcon\"\n :class=\"{\n 'h-4 w-4': size === 'base',\n 'h-5 w-5': size === 'l',\n }\"\n />\n <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n <ElBadge v-bind=\"badge\" color=\"red\" />\n </div>\n </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"80CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,EAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,0SAoB5E,MAAMC,EAAQC,EAWRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
|
1
|
+
@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ElCarousel.vue.cjs2.js")
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ElCarousel.vue.cjs2.js");;/* empty css */exports.default=e.default;exports.elCarouselSizes=e.elCarouselSizes;
|
|
2
2
|
//# sourceMappingURL=ElCarousel.vue.cjs.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("../node_modules/swiper/modules/keyboard.cjs.js"),f=require("../node_modules/swiper/modules/navigation.cjs.js"),p=require("../node_modules/swiper/modules/pagination.cjs.js"),n=require("../node_modules/swiper/swiper-vue.cjs.js");;/* empty css */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const g=require("./ElButton.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");const o=require("./utils.cjs.js"),u=require("./ElIconButton.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");;/* empty css
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("../node_modules/swiper/modules/keyboard.cjs.js"),f=require("../node_modules/swiper/modules/navigation.cjs.js"),p=require("../node_modules/swiper/modules/pagination.cjs.js"),n=require("../node_modules/swiper/swiper-vue.cjs.js");;/* empty css */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const g=require("./ElButton.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");const o=require("./utils.cjs.js"),u=require("./ElIconButton.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");;/* empty css */require("./forms/ElInputSearch.vue.cjs2.js");require("./forms/ElInputAutocomplete.vue.cjs2.js");const v={key:0,class:"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl"},w={class:"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl"},q={class:"py-2 md:py-3 lg:py-4"},b={key:0,class:"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between"},x={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},y={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},z=["sm","md","lg"],h=e.defineComponent({__name:"ElCarousel",props:{size:{},slides:{},opacity:{type:Boolean}},setup(k){const a=o.useMatchDevice(),d=e.computed(()=>{switch(a.value){case o.Device.Desktop:return"xl";case o.Device.Tablet:return"l";default:return"sm"}}),i=e.ref(),c=e.ref([f.default,p.default,m.default]);return(t,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full relative",{"max-w-2xl":t.size==="md","max-w-7xl":t.size==="lg"}])},[e.createVNode(e.unref(n.Swiper),{"space-between":30,"slides-per-view":1,keyboard:{enabled:!0},pagination:{clickable:!0},loop:!0,navigation:!0,modules:c.value,class:"",onSwiper:s[0]||(s[0]=r=>i.value=r)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.slides,(r,l)=>(e.openBlock(),e.createBlock(e.unref(n.SwiperSlide),{key:l},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24",{"justify-end items-end h-auto":t.size==="sm","h-96":t.size==="md","h-auto":t.size==="lg"}]),style:e.normalizeStyle({backgroundImage:"url("+r.picture+")"})},[t.opacity?(e.openBlock(),e.createElementBlock("div",v)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl",{"w-full":t.size==="sm","max-w-80":t.size==="md","max-w-96":t.size==="lg"}])},[e.createElementVNode("h1",w,e.toDisplayString(r.title),1),e.createElementVNode("p",{class:e.normalizeClass(["text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96",{"w-full":t.size==="sm","w-80 max-w-80":t.size==="md","w-96 max-w-96":t.size==="lg"}])},e.toDisplayString(r.description),3),e.createElementVNode("div",q,[e.createVNode(e.unref(g.default),e.mergeProps({ref_for:!0},r.button,{size:d.value}),null,16,["size"])])],2)],6)]),_:2},1024))),128))]),_:1},8,["modules"]),t.slides.length>1?(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",x,[e.createVNode(e.unref(u.default),{icon:{name:"ArrowSmallLeftIcon"},onClick:s[1]||(s[1]=r=>{var l;return(l=i.value)==null?void 0:l.slidePrev()})})]),e.createElementVNode("div",y,[e.createVNode(e.unref(u.default),{icon:{name:"ArrowSmallRightIcon"},onClick:s[2]||(s[2]=r=>{var l;return(l=i.value)==null?void 0:l.slideNext()})})])])):e.createCommentVNode("",!0)],2))}});exports.default=h;exports.elCarouselSizes=z;
|
|
2
2
|
//# sourceMappingURL=ElCarousel.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElCarousel.vue.cjs2.js","sources":["../../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport
|
|
1
|
+
{"version":3,"file":"ElCarousel.vue.cjs2.js","sources":["../../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport { computed, ref } from 'vue';\nimport { Device, useMatchDevice } from './utils';\n\ndefineProps<CarouselProps>();\n\nconst device = useMatchDevice();\n\nconst buttonSize = computed(() => {\n switch (device.value) {\n case Device.Desktop:\n return 'xl';\n case Device.Tablet:\n return 'l';\n default:\n return 'sm';\n }\n});\n\nconst swiperInstance = ref();\nconst modules = ref([Navigation, Pagination, Keyboard]);\n</script>\n\n<template>\n <div\n class=\"w-full relative\"\n :class=\"{\n 'max-w-2xl': size === 'md',\n 'max-w-7xl': size === 'lg',\n }\"\n >\n <swiper\n :space-between=\"30\"\n :slides-per-view=\"1\"\n :keyboard=\"{\n enabled: true,\n }\"\n :pagination=\"{\n clickable: true,\n }\"\n :loop=\"true\"\n :navigation=\"true\"\n :modules=\"modules\"\n class=\"\"\n @swiper=\"swiperInstance = $event\"\n >\n <swiper-slide v-for=\"(slide, index) in slides\" :key=\"index\">\n <div\n class=\"flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24\"\n :style=\"{\n backgroundImage: 'url(' + slide.picture + ')',\n }\"\n :class=\"{\n 'justify-end items-end h-auto': size === 'sm',\n 'h-96': size === 'md',\n 'h-auto': size === 'lg',\n }\"\n >\n <div v-if=\"opacity\" class=\"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl\"></div>\n\n <div\n class=\"z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl\"\n :class=\"{\n 'w-full': size === 'sm',\n 'max-w-80': size === 'md',\n 'max-w-96': size === 'lg',\n }\"\n >\n <h1 class=\"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl\">\n {{ slide.title }}\n </h1>\n <p\n class=\"text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96\"\n :class=\"{\n 'w-full': size === 'sm',\n 'w-80 max-w-80': size === 'md',\n 'w-96 max-w-96': size === 'lg',\n }\"\n >\n {{ slide.description }}\n </p>\n <div class=\"py-2 md:py-3 lg:py-4\">\n <ElButton v-bind=\"slide.button\" :size=\"buttonSize\" />\n </div>\n </div>\n </div>\n </swiper-slide>\n </swiper>\n <div v-if=\"slides.length > 1\" class=\"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between\">\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallLeftIcon' }\" @click=\"swiperInstance?.slidePrev()\" />\n </div>\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallRightIcon' }\" @click=\"swiperInstance?.slideNext()\" />\n </div>\n </div>\n </div>\n</template>\n\n<style>\n@import 'swiper/css';\n@import 'swiper/css/pagination';\n</style>\n"],"names":["elCarouselSizes","device","useMatchDevice","buttonSize","computed","Device","swiperInstance","ref","modules","Navigation","Pagination","Keyboard"],"mappings":"q6DACaA,EAAkB,CAAC,KAAM,KAAM,IAAI,qGA2BhD,MAAMC,EAASC,EAAAA,iBAETC,EAAaC,EAAAA,SAAS,IAAM,CAChC,OAAQH,EAAO,MAAO,CACpB,KAAKI,EAAO,OAAA,QACH,MAAA,KACT,KAAKA,EAAO,OAAA,OACH,MAAA,IACT,QACS,MAAA,IACX,CAAA,CACD,EAEKC,EAAiBC,EAAAA,MACjBC,EAAUD,EAAAA,IAAI,CAACE,EAAY,QAAAC,EAAA,QAAYC,EAAQ,OAAA,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import r from"./ElCarousel.vue.esm2.js";import{elCarouselSizes as a}from"./ElCarousel.vue.esm2.js";/* empty css */export{r as default,a as elCarouselSizes};
|
|
2
2
|
//# sourceMappingURL=ElCarousel.vue.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as y,computed as h,ref as p,openBlock as
|
|
1
|
+
import{defineComponent as y,computed as h,ref as p,openBlock as s,createElementBlock as m,normalizeClass as n,createVNode as a,unref as r,withCtx as u,Fragment as z,renderList as k,createBlock as S,createElementVNode as l,normalizeStyle as C,createCommentVNode as f,toDisplayString as c,mergeProps as _}from"vue";import j from"../node_modules/swiper/modules/keyboard.esm.js";import N from"../node_modules/swiper/modules/navigation.esm.js";import B from"../node_modules/swiper/modules/pagination.esm.js";import{Swiper as D,SwiperSlide as I}from"../node_modules/swiper/swiper-vue.esm.js";/* empty css */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import $ from"./ElButton.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import{useMatchDevice as E,Device as w}from"./utils.esm.js";import g from"./ElIconButton.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";/* empty css */import"./forms/ElInputSearch.vue.esm2.js";import"./forms/ElInputAutocomplete.vue.esm2.js";const P={key:0,class:"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl"},V={class:"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl"},A={class:"py-2 md:py-3 lg:py-4"},L={key:0,class:"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between"},F={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},K={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},ge=["sm","md","lg"],ve=y({__name:"ElCarousel",props:{size:{},slides:{},opacity:{type:Boolean}},setup(M){const v=E(),x=h(()=>{switch(v.value){case w.Desktop:return"xl";case w.Tablet:return"l";default:return"sm"}}),d=p(),b=p([N,B,j]);return(e,i)=>(s(),m("div",{class:n(["w-full relative",{"max-w-2xl":e.size==="md","max-w-7xl":e.size==="lg"}])},[a(r(D),{"space-between":30,"slides-per-view":1,keyboard:{enabled:!0},pagination:{clickable:!0},loop:!0,navigation:!0,modules:b.value,class:"",onSwiper:i[0]||(i[0]=t=>d.value=t)},{default:u(()=>[(s(!0),m(z,null,k(e.slides,(t,o)=>(s(),S(r(I),{key:o},{default:u(()=>[l("div",{class:n(["flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24",{"justify-end items-end h-auto":e.size==="sm","h-96":e.size==="md","h-auto":e.size==="lg"}]),style:C({backgroundImage:"url("+t.picture+")"})},[e.opacity?(s(),m("div",P)):f("",!0),l("div",{class:n(["z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl",{"w-full":e.size==="sm","max-w-80":e.size==="md","max-w-96":e.size==="lg"}])},[l("h1",V,c(t.title),1),l("p",{class:n(["text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96",{"w-full":e.size==="sm","w-80 max-w-80":e.size==="md","w-96 max-w-96":e.size==="lg"}])},c(t.description),3),l("div",A,[a(r($),_({ref_for:!0},t.button,{size:x.value}),null,16,["size"])])],2)],6)]),_:2},1024))),128))]),_:1},8,["modules"]),e.slides.length>1?(s(),m("div",L,[l("div",F,[a(r(g),{icon:{name:"ArrowSmallLeftIcon"},onClick:i[1]||(i[1]=t=>{var o;return(o=d.value)==null?void 0:o.slidePrev()})})]),l("div",K,[a(r(g),{icon:{name:"ArrowSmallRightIcon"},onClick:i[2]||(i[2]=t=>{var o;return(o=d.value)==null?void 0:o.slideNext()})})])])):f("",!0)],2))}});export{ve as default,ge as elCarouselSizes};
|
|
2
2
|
//# sourceMappingURL=ElCarousel.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElCarousel.vue.esm2.js","sources":["../../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport
|
|
1
|
+
{"version":3,"file":"ElCarousel.vue.esm2.js","sources":["../../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport { computed, ref } from 'vue';\nimport { Device, useMatchDevice } from './utils';\n\ndefineProps<CarouselProps>();\n\nconst device = useMatchDevice();\n\nconst buttonSize = computed(() => {\n switch (device.value) {\n case Device.Desktop:\n return 'xl';\n case Device.Tablet:\n return 'l';\n default:\n return 'sm';\n }\n});\n\nconst swiperInstance = ref();\nconst modules = ref([Navigation, Pagination, Keyboard]);\n</script>\n\n<template>\n <div\n class=\"w-full relative\"\n :class=\"{\n 'max-w-2xl': size === 'md',\n 'max-w-7xl': size === 'lg',\n }\"\n >\n <swiper\n :space-between=\"30\"\n :slides-per-view=\"1\"\n :keyboard=\"{\n enabled: true,\n }\"\n :pagination=\"{\n clickable: true,\n }\"\n :loop=\"true\"\n :navigation=\"true\"\n :modules=\"modules\"\n class=\"\"\n @swiper=\"swiperInstance = $event\"\n >\n <swiper-slide v-for=\"(slide, index) in slides\" :key=\"index\">\n <div\n class=\"flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24\"\n :style=\"{\n backgroundImage: 'url(' + slide.picture + ')',\n }\"\n :class=\"{\n 'justify-end items-end h-auto': size === 'sm',\n 'h-96': size === 'md',\n 'h-auto': size === 'lg',\n }\"\n >\n <div v-if=\"opacity\" class=\"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl\"></div>\n\n <div\n class=\"z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl\"\n :class=\"{\n 'w-full': size === 'sm',\n 'max-w-80': size === 'md',\n 'max-w-96': size === 'lg',\n }\"\n >\n <h1 class=\"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl\">\n {{ slide.title }}\n </h1>\n <p\n class=\"text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96\"\n :class=\"{\n 'w-full': size === 'sm',\n 'w-80 max-w-80': size === 'md',\n 'w-96 max-w-96': size === 'lg',\n }\"\n >\n {{ slide.description }}\n </p>\n <div class=\"py-2 md:py-3 lg:py-4\">\n <ElButton v-bind=\"slide.button\" :size=\"buttonSize\" />\n </div>\n </div>\n </div>\n </swiper-slide>\n </swiper>\n <div v-if=\"slides.length > 1\" class=\"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between\">\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallLeftIcon' }\" @click=\"swiperInstance?.slidePrev()\" />\n </div>\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallRightIcon' }\" @click=\"swiperInstance?.slideNext()\" />\n </div>\n </div>\n </div>\n</template>\n\n<style>\n@import 'swiper/css';\n@import 'swiper/css/pagination';\n</style>\n"],"names":["elCarouselSizes","device","useMatchDevice","buttonSize","computed","Device","swiperInstance","ref","modules","Navigation","Pagination","Keyboard"],"mappings":"ulEACaA,GAAkB,CAAC,KAAM,KAAM,IAAI,sFA2BhD,MAAMC,EAASC,IAETC,EAAaC,EAAS,IAAM,CAChC,OAAQH,EAAO,MAAO,CACpB,KAAKI,EAAO,QACH,MAAA,KACT,KAAKA,EAAO,OACH,MAAA,IACT,QACS,MAAA,IACX,CAAA,CACD,EAEKC,EAAiBC,IACjBC,EAAUD,EAAI,CAACE,EAAYC,EAAYC,CAAQ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const u=require("./ElDrawer.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");const c=require("./ElTabGroup.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const u=require("./ElDrawer.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");const c=require("./ElTabGroup.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css */require("./forms/ElInputSearch.vue.cjs2.js");require("./forms/ElInputAutocomplete.vue.cjs2.js");const m={class:"rounded-3xl border shadow-md border-neutral-surface bg-neutral-surface overflow-hidden"},p={class:"px-4 py-8 flex justify-between items-center text-neutral-darker"},_={class:"flex flex-col gap-5"},q={class:"text-3xl font-semibold"},v={key:0,class:"text-sm"},b={class:"flex items-center gap-2"},f={class:"min-w-44"},V={class:"px-4 pb-6"},h={key:1,class:"flex"},E={class:"min-w-72"},N={class:"flex-1 w-full"},g=["table","drawer"],k=e.defineComponent({__name:"ElContainerTemplate",props:{title:{},description:{},tabs:{},selectedTab:{},variant:{}},emits:["onTabChange"],setup(s,{emit:a}){const i=s,d=a,l=e.ref(i.selectedTab||"");return(t,r)=>{var n;return e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("div",p,[e.createElementVNode("div",_,[e.createElementVNode("h1",q,e.toDisplayString(t.title),1),(n=t.description)!=null&&n.length?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",b,[e.createElementVNode("div",f,[e.renderSlot(t.$slots,"input-select")]),e.renderSlot(t.$slots,"secondary-button"),e.renderSlot(t.$slots,"primary-button"),e.renderSlot(t.$slots,"icon-button")])]),e.createElementVNode("div",V,[t.tabs?(e.openBlock(),e.createBlock(c.default,e.mergeProps({key:0},t.tabs,{modelValue:l.value,"onUpdate:modelValue":[r[0]||(r[0]=o=>l.value=o),r[1]||(r[1]=o=>d("onTabChange",o))]}),null,16,["modelValue"])):e.createCommentVNode("",!0)]),e.createElementVNode("div",null,[t.variant.name==="table"?e.renderSlot(t.$slots,"table",{key:0}):e.createCommentVNode("",!0),t.variant.name==="drawer"?(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",E,[e.createVNode(e.unref(u.default),{headline:t.variant.drawerTitle},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"drawer-content")]),_:3},8,["headline"])]),e.createElementVNode("div",N,[e.renderSlot(t.$slots,"content-slot")])])):e.createCommentVNode("",!0)])])}}});exports.default=k;exports.elContainerTemplateVariants=g;
|
|
2
2
|
//# sourceMappingURL=ElContainerTemplate.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElContainerTemplate.vue.cjs2.js","sources":["../../src/ElContainerTemplate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elContainerTemplateVariants = ['table', 'drawer'] as const;\nexport type ElContainerTemplateVariant = (typeof elContainerTemplateVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { ElDrawer } from '.';\nimport ElTabGroup from './ElTabGroup.vue';\n\nconst props = defineProps<{\n title: string;\n description?: string;\n tabs?: InstanceType<typeof ElTabGroup>['$props'];\n selectedTab?: string;\n variant: { name: 'table' } | { name: 'drawer'; drawerTitle: string };\n}>();\n\nconst emit = defineEmits<{\n (event: 'onTabChange', tab: string): void;\n}>();\n\nconst selectedTab = ref<string>(props.selectedTab || '');\n</script>\n\n<template>\n <div class=\"rounded-3xl border shadow-md border-neutral-surface bg-neutral-surface overflow-hidden\">\n <div class=\"px-4 py-8 flex justify-between items-center text-neutral-darker\">\n <div class=\"flex flex-col gap-5\">\n <h1 class=\"text-3xl font-semibold\">{{ title }}</h1>\n <p v-if=\"description?.length\" class=\"text-sm\">{{ description }}</p>\n </div>\n <div class=\"flex items-center gap-2\">\n <div class=\"min-w-44\">\n <slot name=\"input-select\"> </slot>\n </div>\n <slot name=\"secondary-button\"></slot>\n <slot name=\"primary-button\"></slot>\n\n <slot name=\"icon-button\"></slot>\n </div>\n </div>\n <div class=\"px-4 pb-6\">\n <ElTabGroup v-if=\"tabs\" v-bind=\"tabs\" v-model=\"selectedTab\" @update:model-value=\"tab => emit('onTabChange', tab)\" />\n </div>\n <div>\n <slot v-if=\"variant.name === 'table'\" name=\"table\"> </slot>\n <div v-if=\"variant.name === 'drawer'\" class=\"flex\">\n <div class=\"min-w-72\">\n <ElDrawer :headline=\"variant.drawerTitle\">\n <slot name=\"drawer-content\"> </slot>\n </ElDrawer>\n </div>\n <div class=\"flex-1 w-full\">\n <slot name=\"content-slot\"> </slot>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["elContainerTemplateVariants","props","__props","emit","__emit","selectedTab","ref"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElContainerTemplate.vue.cjs2.js","sources":["../../src/ElContainerTemplate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elContainerTemplateVariants = ['table', 'drawer'] as const;\nexport type ElContainerTemplateVariant = (typeof elContainerTemplateVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { ElDrawer } from '.';\nimport ElTabGroup from './ElTabGroup.vue';\n\nconst props = defineProps<{\n title: string;\n description?: string;\n tabs?: InstanceType<typeof ElTabGroup>['$props'];\n selectedTab?: string;\n variant: { name: 'table' } | { name: 'drawer'; drawerTitle: string };\n}>();\n\nconst emit = defineEmits<{\n (event: 'onTabChange', tab: string): void;\n}>();\n\nconst selectedTab = ref<string>(props.selectedTab || '');\n</script>\n\n<template>\n <div class=\"rounded-3xl border shadow-md border-neutral-surface bg-neutral-surface overflow-hidden\">\n <div class=\"px-4 py-8 flex justify-between items-center text-neutral-darker\">\n <div class=\"flex flex-col gap-5\">\n <h1 class=\"text-3xl font-semibold\">{{ title }}</h1>\n <p v-if=\"description?.length\" class=\"text-sm\">{{ description }}</p>\n </div>\n <div class=\"flex items-center gap-2\">\n <div class=\"min-w-44\">\n <slot name=\"input-select\"> </slot>\n </div>\n <slot name=\"secondary-button\"></slot>\n <slot name=\"primary-button\"></slot>\n\n <slot name=\"icon-button\"></slot>\n </div>\n </div>\n <div class=\"px-4 pb-6\">\n <ElTabGroup v-if=\"tabs\" v-bind=\"tabs\" v-model=\"selectedTab\" @update:model-value=\"tab => emit('onTabChange', tab)\" />\n </div>\n <div>\n <slot v-if=\"variant.name === 'table'\" name=\"table\"> </slot>\n <div v-if=\"variant.name === 'drawer'\" class=\"flex\">\n <div class=\"min-w-72\">\n <ElDrawer :headline=\"variant.drawerTitle\">\n <slot name=\"drawer-content\"> </slot>\n </ElDrawer>\n </div>\n <div class=\"flex-1 w-full\">\n <slot name=\"content-slot\"> </slot>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["elContainerTemplateVariants","props","__props","emit","__emit","selectedTab","ref"],"mappings":"moDACaA,EAA8B,CAAC,QAAS,QAAQ,8JAS7D,MAAMC,EAAQC,EAQRC,EAAOC,EAIPC,EAAcC,EAAA,IAAYL,EAAM,aAAe,EAAE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as b,ref as h,openBlock as r,createElementBlock as a,createElementVNode as t,toDisplayString as d,createCommentVNode as i,renderSlot as o,createBlock as v,mergeProps as _,createVNode as w,unref as y,withCtx as $}from"vue";/* empty css */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import g from"./ElDrawer.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import k from"./ElTabGroup.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"../node_modules/swiper/shared/swiper-core.esm.js";/* empty css
|
|
1
|
+
import{defineComponent as b,ref as h,openBlock as r,createElementBlock as a,createElementVNode as t,toDisplayString as d,createCommentVNode as i,renderSlot as o,createBlock as v,mergeProps as _,createVNode as w,unref as y,withCtx as $}from"vue";/* empty css */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import g from"./ElDrawer.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import k from"./ElTabGroup.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"../node_modules/swiper/shared/swiper-core.esm.js";/* empty css */import"./forms/ElInputSearch.vue.esm2.js";import"./forms/ElInputAutocomplete.vue.esm2.js";const T={class:"rounded-3xl border shadow-md border-neutral-surface bg-neutral-surface overflow-hidden"},C={class:"px-4 py-8 flex justify-between items-center text-neutral-darker"},V={class:"flex flex-col gap-5"},B={class:"text-3xl font-semibold"},E={key:0,class:"text-sm"},N={class:"flex items-center gap-2"},S={class:"min-w-44"},j={class:"px-4 pb-6"},x={key:1,class:"flex"},D={class:"min-w-72"},P={class:"flex-1 w-full"},ne=["table","drawer"],ae=b({__name:"ElContainerTemplate",props:{title:{},description:{},tabs:{},selectedTab:{},variant:{}},emits:["onTabChange"],setup(p,{emit:c}){const u=p,f=c,l=h(u.selectedTab||"");return(e,s)=>{var m;return r(),a("div",T,[t("div",C,[t("div",V,[t("h1",B,d(e.title),1),(m=e.description)!=null&&m.length?(r(),a("p",E,d(e.description),1)):i("",!0)]),t("div",N,[t("div",S,[o(e.$slots,"input-select")]),o(e.$slots,"secondary-button"),o(e.$slots,"primary-button"),o(e.$slots,"icon-button")])]),t("div",j,[e.tabs?(r(),v(k,_({key:0},e.tabs,{modelValue:l.value,"onUpdate:modelValue":[s[0]||(s[0]=n=>l.value=n),s[1]||(s[1]=n=>f("onTabChange",n))]}),null,16,["modelValue"])):i("",!0)]),t("div",null,[e.variant.name==="table"?o(e.$slots,"table",{key:0}):i("",!0),e.variant.name==="drawer"?(r(),a("div",x,[t("div",D,[w(y(g),{headline:e.variant.drawerTitle},{default:$(()=>[o(e.$slots,"drawer-content")]),_:3},8,["headline"])]),t("div",P,[o(e.$slots,"content-slot")])])):i("",!0)])])}}});export{ae as default,ne as elContainerTemplateVariants};
|
|
2
2
|
//# sourceMappingURL=ElContainerTemplate.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElContainerTemplate.vue.esm2.js","sources":["../../src/ElContainerTemplate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elContainerTemplateVariants = ['table', 'drawer'] as const;\nexport type ElContainerTemplateVariant = (typeof elContainerTemplateVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { ElDrawer } from '.';\nimport ElTabGroup from './ElTabGroup.vue';\n\nconst props = defineProps<{\n title: string;\n description?: string;\n tabs?: InstanceType<typeof ElTabGroup>['$props'];\n selectedTab?: string;\n variant: { name: 'table' } | { name: 'drawer'; drawerTitle: string };\n}>();\n\nconst emit = defineEmits<{\n (event: 'onTabChange', tab: string): void;\n}>();\n\nconst selectedTab = ref<string>(props.selectedTab || '');\n</script>\n\n<template>\n <div class=\"rounded-3xl border shadow-md border-neutral-surface bg-neutral-surface overflow-hidden\">\n <div class=\"px-4 py-8 flex justify-between items-center text-neutral-darker\">\n <div class=\"flex flex-col gap-5\">\n <h1 class=\"text-3xl font-semibold\">{{ title }}</h1>\n <p v-if=\"description?.length\" class=\"text-sm\">{{ description }}</p>\n </div>\n <div class=\"flex items-center gap-2\">\n <div class=\"min-w-44\">\n <slot name=\"input-select\"> </slot>\n </div>\n <slot name=\"secondary-button\"></slot>\n <slot name=\"primary-button\"></slot>\n\n <slot name=\"icon-button\"></slot>\n </div>\n </div>\n <div class=\"px-4 pb-6\">\n <ElTabGroup v-if=\"tabs\" v-bind=\"tabs\" v-model=\"selectedTab\" @update:model-value=\"tab => emit('onTabChange', tab)\" />\n </div>\n <div>\n <slot v-if=\"variant.name === 'table'\" name=\"table\"> </slot>\n <div v-if=\"variant.name === 'drawer'\" class=\"flex\">\n <div class=\"min-w-72\">\n <ElDrawer :headline=\"variant.drawerTitle\">\n <slot name=\"drawer-content\"> </slot>\n </ElDrawer>\n </div>\n <div class=\"flex-1 w-full\">\n <slot name=\"content-slot\"> </slot>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["elContainerTemplateVariants","props","__props","emit","__emit","selectedTab","ref"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElContainerTemplate.vue.esm2.js","sources":["../../src/ElContainerTemplate.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elContainerTemplateVariants = ['table', 'drawer'] as const;\nexport type ElContainerTemplateVariant = (typeof elContainerTemplateVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { ElDrawer } from '.';\nimport ElTabGroup from './ElTabGroup.vue';\n\nconst props = defineProps<{\n title: string;\n description?: string;\n tabs?: InstanceType<typeof ElTabGroup>['$props'];\n selectedTab?: string;\n variant: { name: 'table' } | { name: 'drawer'; drawerTitle: string };\n}>();\n\nconst emit = defineEmits<{\n (event: 'onTabChange', tab: string): void;\n}>();\n\nconst selectedTab = ref<string>(props.selectedTab || '');\n</script>\n\n<template>\n <div class=\"rounded-3xl border shadow-md border-neutral-surface bg-neutral-surface overflow-hidden\">\n <div class=\"px-4 py-8 flex justify-between items-center text-neutral-darker\">\n <div class=\"flex flex-col gap-5\">\n <h1 class=\"text-3xl font-semibold\">{{ title }}</h1>\n <p v-if=\"description?.length\" class=\"text-sm\">{{ description }}</p>\n </div>\n <div class=\"flex items-center gap-2\">\n <div class=\"min-w-44\">\n <slot name=\"input-select\"> </slot>\n </div>\n <slot name=\"secondary-button\"></slot>\n <slot name=\"primary-button\"></slot>\n\n <slot name=\"icon-button\"></slot>\n </div>\n </div>\n <div class=\"px-4 pb-6\">\n <ElTabGroup v-if=\"tabs\" v-bind=\"tabs\" v-model=\"selectedTab\" @update:model-value=\"tab => emit('onTabChange', tab)\" />\n </div>\n <div>\n <slot v-if=\"variant.name === 'table'\" name=\"table\"> </slot>\n <div v-if=\"variant.name === 'drawer'\" class=\"flex\">\n <div class=\"min-w-72\">\n <ElDrawer :headline=\"variant.drawerTitle\">\n <slot name=\"drawer-content\"> </slot>\n </ElDrawer>\n </div>\n <div class=\"flex-1 w-full\">\n <slot name=\"content-slot\"> </slot>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["elContainerTemplateVariants","props","__props","emit","__emit","selectedTab","ref"],"mappings":"2qDACaA,GAA8B,CAAC,QAAS,QAAQ,+IAS7D,MAAMC,EAAQC,EAQRC,EAAOC,EAIPC,EAAcC,EAAYL,EAAM,aAAe,EAAE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("../ElDivider.vue.cjs2.js"),_=require("../ElIcon.vue.cjs2.js"),F=require("../ElVerticalTab.vue.cjs2.js");;/* empty css */require("../polyfills.cjs.js");require("vee-validate");require("../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../../node_modules/lodash/lodash.cjs.js");require("../tailwind.plugin.cjs.js");require("../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const T=require("../ElButton.vue.cjs2.js"),A=require("../_CustomTransition.vue.cjs2.js"),b=require("../../node_modules/@vueuse/core/index.cjs.js");require("./ElInputText.vue.cjs2.js");require("./ElInputCheckbox.vue.cjs2.js");require("./ElInputDate.vue.cjs2.js");require("./ElInputFile.vue.cjs2.js");require("./ElInputMeasureUnit.vue.cjs2.js");require("./ElInputNumber.vue.cjs2.js");require("./ElInputPhone.vue.cjs2.js");require("./ElInputSelect.vue.cjs2.js");require("./ElInputTextarea.vue.cjs2.js");require("../ElToast.vue.cjs2.js");require("./ElInputRadioButton.vue.cjs2.js");const P=require("../../node_modules/@vueuse/components/index.cjs.js"),q=require("./input.cjs.js");require("../../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("../ElDivider.vue.cjs2.js"),_=require("../ElIcon.vue.cjs2.js"),F=require("../ElVerticalTab.vue.cjs2.js");;/* empty css */require("../polyfills.cjs.js");require("vee-validate");require("../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../../node_modules/lodash/lodash.cjs.js");require("../tailwind.plugin.cjs.js");require("../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const T=require("../ElButton.vue.cjs2.js"),A=require("../_CustomTransition.vue.cjs2.js"),b=require("../../node_modules/@vueuse/core/index.cjs.js");require("./ElInputText.vue.cjs2.js");require("./ElInputCheckbox.vue.cjs2.js");require("./ElInputDate.vue.cjs2.js");require("./ElInputFile.vue.cjs2.js");require("./ElInputMeasureUnit.vue.cjs2.js");require("./ElInputNumber.vue.cjs2.js");require("./ElInputPhone.vue.cjs2.js");require("./ElInputSelect.vue.cjs2.js");require("./ElInputTextarea.vue.cjs2.js");require("../ElToast.vue.cjs2.js");require("./ElInputRadioButton.vue.cjs2.js");const P=require("../../node_modules/@vueuse/components/index.cjs.js"),q=require("./input.cjs.js");require("../../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css */require("./ElInputAutocomplete.vue.cjs2.js");const j=require("../../node_modules/@vueuse/integrations/useFocusTrap.cjs.js"),z={class:"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl"},H=["name","placeholder"],$={class:"flex flex-col gap-y-6 overflow-y-hidden"},L={key:1,class:"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter"},U={class:"text-sm font-semibold text-neutral-darker"},G={class:"text-sm font-normal"},K={key:2,class:"flex py-2 overflow-y-hidden"},J={key:0,class:"text-sm font-medium text-neutral-darker"},Q={class:"flex flex-col gap-1 w-full"},W={key:0},X={key:1,class:"flex-1 pl-6 overflow-y-auto"},Y={key:3,class:"flex items-center gap-1 self-stretch"},Z={class:"text-sm font-normal text-neutral-darker"},ee={class:"fixed inset-0 transition-opacity"},te={ref:"backdrop",class:"absolute inset-0 bg-gray-500 opacity-75"},oe=["primary","secondary"],re=["default","filled","blank"],le=e.defineComponent({__name:"ElInputSearch",props:e.mergeModels({...q.withTextualElInputProps(),status:{type:String,default:"default"},text:{type:String,default:void 0},results:{type:Array,default:void 0},footer:{type:Object,default:void 0},blankResults:{type:Object,default:void 0},shouldHoverFirstResultOnOpen:{type:Boolean,default:!1},color:{type:String,default:"primary"}},{isOpen:{default:!0,required:!0,type:Boolean},isOpenModifiers:{}}),emits:e.mergeModels(["update:modelValue","onResultClick","onResultHover"],["update:isOpen"]),setup(o,{emit:B}){const l=o,d=B,f=e.useSlots(),E=b.useScrollLock(document.body),m=e.ref(null),V=e.computed(()=>l.modelValue),w=e.computed(()=>[l.validation]),v=e.computed(()=>({default:!l.results,filled:l.results&&l.results.length>0,blank:l.results&&l.results.length===0})),S=e.ref(!1),k=e.ref(!1),y=e.ref([]),s=e.ref(),{value:u,uuid:C,setValue:N}=q.useInput(V,w,l.name,t=>{d("update:modelValue",t==null?void 0:t.trim())}),p=e.ref(),{hasFocus:R,activate:O,deactivate:I}=j.useFocusTrap(p),c=e.useModel(o,"isOpen"),h=()=>{c.value=!1,s.value=void 0,u.value=""},M=t=>{var r,a,n;(n=(a=(r=y.value)==null?void 0:r.at(t))==null?void 0:a.$el)==null||n.scrollIntoView({block:"nearest"})},x=t=>{d("onResultClick",t),N(""),s.value=void 0},i=t=>{s.value=t,M(t),d("onResultHover",t)},D=()=>h();return b.onKeyStroke(["ArrowUp","ArrowDown","Enter","Escape"],t=>{var r;if(t.preventDefault(),t.stopPropagation(),R&&((r=l.results)!=null&&r.length))switch(t.key){case"ArrowUp":const a=Math.max((s.value??0)-1,0);i(a);break;case"ArrowDown":const n=s.value!==void 0?Math.min(s.value+1,l.results.length-1):0;i(n);break;case"Enter":s.value!==void 0&&x(s.value);break}t.key==="Escape"&&h()},{target:p}),e.watch([c,m],async()=>{var t,r;E.value=c.value,c.value?((t=m.value)==null||t.focus(),l.shouldHoverFirstResultOnOpen&&((r=l.results)!=null&&r.length)&&i(0),await e.nextTick(),O()):(I(),u.value="")}),(t,r)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(A.default,{name:"fade"},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"searchBarRef",ref:p,class:"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0"},[e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md",{"gap-6":l.results}])},[e.createElementVNode("div",z,[e.createVNode(_.default,{name:"MagnifyingGlassIcon",class:"text-neutral-lighter w-6 h-6"}),e.withDirectives(e.createElementVNode("input",{ref_key:"searchInput",ref:m,"onUpdate:modelValue":r[0]||(r[0]=a=>e.isRef(u)?u.value=a:null),name:t.id||`${e.unref(C)}`,type:"text",class:"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0",placeholder:t.placeholder,onFocusin:r[1]||(r[1]=()=>{k.value=!0,S.value=!1}),onFocusout:r[2]||(r[2]=()=>{k.value=!1})},null,40,H),[[e.vModelText,e.unref(u)]])]),e.createElementVNode("span",$,[o.results?(e.openBlock(),e.createBlock(g.default,{key:0,direction:"horizontal"})):e.createCommentVNode("",!0),o.blankResults&&v.value.blank?(e.openBlock(),e.createElementBlock("div",L,[e.createVNode(_.default,e.mergeProps(o.blankResults.icon,{class:"w-7 h-7"}),null,16),e.createElementVNode("p",U,e.toDisplayString(o.blankResults.primaryRow),1),e.createElementVNode("p",G,e.toDisplayString(o.blankResults.secondaryRow),1)])):e.createCommentVNode("",!0),o.results&&v.value.filled?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen",{"pr-6":e.unref(f).info&&o.results.length>0}])},[o.text?(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.results,(a,n)=>(e.openBlock(),e.createBlock(F.default,e.mergeProps({key:n,ref_for:!0,ref_key:"itemRefs",ref:y,color:o.color},a,{status:s.value===n?"hover":"default",tabindex:"-1",onClick:()=>x(n),onMouseover:()=>i(n)}),null,16,["color","status","onClick","onMouseover"]))),128))])],2),e.unref(f).info?(e.openBlock(),e.createElementBlock("div",W,[e.createVNode(g.default,{direction:"vertical"})])):e.createCommentVNode("",!0),e.unref(f).info?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(t.$slots,"info")])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),o.results&&o.footer?(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("span",Z,e.toDisplayString(o.footer.text),1),e.createVNode(e.unref(T.default),e.mergeProps(o.footer.button,{variant:"tertiary"}),null,16)])):e.createCommentVNode("",!0)])],2)),[[e.unref(P.VOnClickOutside),D]]),e.createElementVNode("div",ee,[e.createElementVNode("div",te,null,512)])],512)):e.createCommentVNode("",!0)]),_:3})]))}});exports.default=le;exports.elInputSearchColors=oe;exports.elInputSearchStatus=re;
|
|
2
2
|
//# sourceMappingURL=ElInputSearch.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputSearch.vue.cjs2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n ...withTextualElInputProps(),\n status: {\n type: String as PropType<ElInputSearchStatus>,\n default: 'default',\n },\n text: {\n type: String,\n default: undefined,\n },\n results: {\n type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<{\n text: string;\n button: InstanceType<typeof ElButton>['$props'];\n }>,\n default: undefined,\n },\n blankResults: {\n type: Object as PropType<{\n icon: InstanceType<typeof ElIcon>['$props'];\n primaryRow: string;\n secondaryRow?: string;\n }>,\n default: undefined,\n },\n shouldHoverFirstResultOnOpen: {\n type: Boolean,\n default: false,\n },\n color: {\n type: String as PropType<ElInputSearchColors>,\n default: 'primary',\n },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n default: !props.results,\n filled: props.results && props.results.length > 0,\n blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n default: true,\n required: true,\n type: Boolean,\n});\n\nconst closeSearchBar = () => {\n isOpen.value = false;\n activeResult.value = undefined;\n value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n emit('onResultClick', index);\n setValue('');\n activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n activeResult.value = index;\n scrollToFocusedIndex(index);\n emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (hasFocus && props.results?.length) {\n switch (e.key) {\n case 'ArrowUp':\n const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n onResultHover(previousActiveIndex);\n break;\n case 'ArrowDown':\n const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n onResultHover(nextActiveIndex);\n break;\n case 'Enter':\n if (activeResult.value !== undefined) {\n onResultClick(activeResult.value);\n }\n break;\n }\n }\n\n if (e.key === 'Escape') {\n closeSearchBar();\n }\n },\n { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n isBodyScrollLocked.value = isOpen.value;\n\n if (isOpen.value) {\n searchInput.value?.focus();\n\n if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n onResultHover(0);\n }\n\n await nextTick();\n activate();\n } else {\n deactivate();\n value.value = '';\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div\n v-if=\"isOpen\"\n ref=\"searchBarRef\"\n class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n >\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n :class=\"{\n 'gap-6': props.results,\n }\"\n >\n <!-- Search bar -->\n <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n <input\n ref=\"searchInput\"\n v-model=\"value\"\n :name=\"id || `${uuid}`\"\n type=\"text\"\n class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n :placeholder=\"placeholder\"\n @focusin=\"\n () => {\n isSearchFocused = true; // Set search focused\n isClickOutside = false; // Set click outside to false\n }\n \"\n @focusout=\"\n () => {\n isSearchFocused = false;\n }\n \"\n />\n </div>\n\n <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n <ElDivider v-if=\"results\" direction=\"horizontal\" />\n <div\n v-if=\"blankResults && computedStatus.blank\"\n class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n >\n <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n </div>\n <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n <!-- Results Left column -->\n <div\n class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n >\n <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n <div class=\"flex flex-col gap-1 w-full\">\n <ElVerticalTab\n v-for=\"(result, index) in results\"\n :key=\"index\"\n ref=\"itemRefs\"\n :color=\"color\"\n v-bind=\"result\"\n :status=\"activeResult === index ? 'hover' : 'default'\"\n tabindex=\"-1\"\n @click=\"() => onResultClick(index)\"\n @mouseover=\"() => onResultHover(index)\"\n />\n </div>\n </div>\n <!-- Blank Results -->\n\n <div v-if=\"slots.info\">\n <ElDivider direction=\"vertical\" />\n </div>\n <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n <slot name=\"info\"></slot>\n </div>\n </div>\n <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n </div>\n </span>\n </div>\n\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 </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","e","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"0yEACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,8iBAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,EAAAA,WACRC,EAAqBC,EAAAA,cAAc,SAAS,IAAI,EAEhDC,EAAcC,MAA6B,IAAI,EAC/CC,EAAqBC,EAAA,SAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAAA,SAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAAA,SAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,MAAI,EAAK,EAC1BM,EAAkBN,MAAI,EAAK,EAE3BO,EAAWP,MAA0C,CAAA,CAAE,EACvDQ,EAAeR,EAAAA,MAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,EAAAA,SAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,EAAAA,MACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,EAAAA,aAAaJ,CAAmB,EAErEK,EAASC,EAAAA,SAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7BS,OAAAA,EAAA,YACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrCC,GAAA,OAIC,GAHJA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAEdhB,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQK,EAAE,IAAK,CACb,IAAK,UACH,MAAMC,EAAsB,KAAK,KAAKxB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcI,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBzB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcK,CAAe,EAC7B,MACF,IAAK,QACCzB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGEuB,EAAE,MAAQ,UACGV,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBoB,EAAAA,MAAM,CAACf,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMO,EAAS,SAAA,EACNnB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}
|
|
1
|
+
{"version":3,"file":"ElInputSearch.vue.cjs2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n ...withTextualElInputProps(),\n status: {\n type: String as PropType<ElInputSearchStatus>,\n default: 'default',\n },\n text: {\n type: String,\n default: undefined,\n },\n results: {\n type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<{\n text: string;\n button: InstanceType<typeof ElButton>['$props'];\n }>,\n default: undefined,\n },\n blankResults: {\n type: Object as PropType<{\n icon: InstanceType<typeof ElIcon>['$props'];\n primaryRow: string;\n secondaryRow?: string;\n }>,\n default: undefined,\n },\n shouldHoverFirstResultOnOpen: {\n type: Boolean,\n default: false,\n },\n color: {\n type: String as PropType<ElInputSearchColors>,\n default: 'primary',\n },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n default: !props.results,\n filled: props.results && props.results.length > 0,\n blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n default: true,\n required: true,\n type: Boolean,\n});\n\nconst closeSearchBar = () => {\n isOpen.value = false;\n activeResult.value = undefined;\n value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n emit('onResultClick', index);\n setValue('');\n activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n activeResult.value = index;\n scrollToFocusedIndex(index);\n emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (hasFocus && props.results?.length) {\n switch (e.key) {\n case 'ArrowUp':\n const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n onResultHover(previousActiveIndex);\n break;\n case 'ArrowDown':\n const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n onResultHover(nextActiveIndex);\n break;\n case 'Enter':\n if (activeResult.value !== undefined) {\n onResultClick(activeResult.value);\n }\n break;\n }\n }\n\n if (e.key === 'Escape') {\n closeSearchBar();\n }\n },\n { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n isBodyScrollLocked.value = isOpen.value;\n\n if (isOpen.value) {\n searchInput.value?.focus();\n\n if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n onResultHover(0);\n }\n\n await nextTick();\n activate();\n } else {\n deactivate();\n value.value = '';\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div\n v-if=\"isOpen\"\n ref=\"searchBarRef\"\n class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n >\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n :class=\"{\n 'gap-6': props.results,\n }\"\n >\n <!-- Search bar -->\n <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n <input\n ref=\"searchInput\"\n v-model=\"value\"\n :name=\"id || `${uuid}`\"\n type=\"text\"\n class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n :placeholder=\"placeholder\"\n @focusin=\"\n () => {\n isSearchFocused = true; // Set search focused\n isClickOutside = false; // Set click outside to false\n }\n \"\n @focusout=\"\n () => {\n isSearchFocused = false;\n }\n \"\n />\n </div>\n\n <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n <ElDivider v-if=\"results\" direction=\"horizontal\" />\n <div\n v-if=\"blankResults && computedStatus.blank\"\n class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n >\n <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n </div>\n <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n <!-- Results Left column -->\n <div\n class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n >\n <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n <div class=\"flex flex-col gap-1 w-full\">\n <ElVerticalTab\n v-for=\"(result, index) in results\"\n :key=\"index\"\n ref=\"itemRefs\"\n :color=\"color\"\n v-bind=\"result\"\n :status=\"activeResult === index ? 'hover' : 'default'\"\n tabindex=\"-1\"\n @click=\"() => onResultClick(index)\"\n @mouseover=\"() => onResultHover(index)\"\n />\n </div>\n </div>\n <!-- Blank Results -->\n\n <div v-if=\"slots.info\">\n <ElDivider direction=\"vertical\" />\n </div>\n <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n <slot name=\"info\"></slot>\n </div>\n </div>\n <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n </div>\n </span>\n </div>\n\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 </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","e","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"qtEACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,8iBAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,EAAAA,WACRC,EAAqBC,EAAAA,cAAc,SAAS,IAAI,EAEhDC,EAAcC,MAA6B,IAAI,EAC/CC,EAAqBC,EAAA,SAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAAA,SAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAAA,SAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,MAAI,EAAK,EAC1BM,EAAkBN,MAAI,EAAK,EAE3BO,EAAWP,MAA0C,CAAA,CAAE,EACvDQ,EAAeR,EAAAA,MAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,EAAAA,SAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,EAAAA,MACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,EAAAA,aAAaJ,CAAmB,EAErEK,EAASC,EAAAA,SAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7BS,OAAAA,EAAA,YACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrCC,GAAA,OAIC,GAHJA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAEdhB,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQK,EAAE,IAAK,CACb,IAAK,UACH,MAAMC,EAAsB,KAAK,KAAKxB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcI,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBzB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcK,CAAe,EAC7B,MACF,IAAK,QACCzB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGEuB,EAAE,MAAQ,UACGV,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBoB,EAAAA,MAAM,CAACf,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMO,EAAS,SAAA,EACNnB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as K,mergeModels as B,useSlots as J,ref as f,computed as w,useModel as Q,watch as W,nextTick as X,openBlock as l,createBlock as R,Teleport as Y,createVNode as v,withCtx as Z,createElementBlock as i,withDirectives as F,normalizeClass as E,createElementVNode as r,isRef as ee,unref as d,vModelText as te,createCommentVNode as c,mergeProps as O,toDisplayString as y,Fragment as oe,renderList as se,renderSlot as le}from"vue";import V from"../ElDivider.vue.esm2.js";import $ from"../ElIcon.vue.esm2.js";import re from"../ElVerticalTab.vue.esm2.js";/* empty css */import"../polyfills.esm.js";import"vee-validate";import"../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../../node_modules/lodash/lodash.esm.js";import"../tailwind.plugin.esm.js";import"../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import ae from"../ElButton.vue.esm2.js";import ne from"../_CustomTransition.vue.esm2.js";import{useScrollLock as ie,onKeyStroke as ue}from"../../node_modules/@vueuse/core/index.esm.js";import"./ElInputText.vue.esm2.js";import"./ElInputCheckbox.vue.esm2.js";import"./ElInputDate.vue.esm2.js";import"./ElInputFile.vue.esm2.js";import"./ElInputMeasureUnit.vue.esm2.js";import"./ElInputNumber.vue.esm2.js";import"./ElInputPhone.vue.esm2.js";import"./ElInputSelect.vue.esm2.js";import"./ElInputTextarea.vue.esm2.js";import"../ElToast.vue.esm2.js";import"./ElInputRadioButton.vue.esm2.js";import{VOnClickOutside as ce}from"../../node_modules/@vueuse/components/index.esm.js";import{withTextualElInputProps as de,useInput as fe}from"./input.esm.js";import"../../node_modules/swiper/shared/swiper-core.esm.js";/* empty css
|
|
1
|
+
import{defineComponent as K,mergeModels as B,useSlots as J,ref as f,computed as w,useModel as Q,watch as W,nextTick as X,openBlock as l,createBlock as R,Teleport as Y,createVNode as v,withCtx as Z,createElementBlock as i,withDirectives as F,normalizeClass as E,createElementVNode as r,isRef as ee,unref as d,vModelText as te,createCommentVNode as c,mergeProps as O,toDisplayString as y,Fragment as oe,renderList as se,renderSlot as le}from"vue";import V from"../ElDivider.vue.esm2.js";import $ from"../ElIcon.vue.esm2.js";import re from"../ElVerticalTab.vue.esm2.js";/* empty css */import"../polyfills.esm.js";import"vee-validate";import"../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../../node_modules/lodash/lodash.esm.js";import"../tailwind.plugin.esm.js";import"../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import ae from"../ElButton.vue.esm2.js";import ne from"../_CustomTransition.vue.esm2.js";import{useScrollLock as ie,onKeyStroke as ue}from"../../node_modules/@vueuse/core/index.esm.js";import"./ElInputText.vue.esm2.js";import"./ElInputCheckbox.vue.esm2.js";import"./ElInputDate.vue.esm2.js";import"./ElInputFile.vue.esm2.js";import"./ElInputMeasureUnit.vue.esm2.js";import"./ElInputNumber.vue.esm2.js";import"./ElInputPhone.vue.esm2.js";import"./ElInputSelect.vue.esm2.js";import"./ElInputTextarea.vue.esm2.js";import"../ElToast.vue.esm2.js";import"./ElInputRadioButton.vue.esm2.js";import{VOnClickOutside as ce}from"../../node_modules/@vueuse/components/index.esm.js";import{withTextualElInputProps as de,useInput as fe}from"./input.esm.js";import"../../node_modules/swiper/shared/swiper-core.esm.js";/* empty css */import"./ElInputAutocomplete.vue.esm2.js";import{useFocusTrap as me}from"../../node_modules/@vueuse/integrations/useFocusTrap.esm.js";const pe={class:"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl"},ve=["name","placeholder"],he={class:"flex flex-col gap-y-6 overflow-y-hidden"},ye={key:1,class:"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter"},xe={class:"text-sm font-semibold text-neutral-darker"},ke={class:"text-sm font-normal"},ge={key:2,class:"flex py-2 overflow-y-hidden"},be={key:0,class:"text-sm font-medium text-neutral-darker"},we={class:"flex flex-col gap-1 w-full"},Re={key:0},Oe={key:1,class:"flex-1 pl-6 overflow-y-auto"},Se={key:3,class:"flex items-center gap-1 self-stretch"},Ce={class:"text-sm font-normal text-neutral-darker"},Ie={class:"fixed inset-0 transition-opacity"},Me={ref:"backdrop",class:"absolute inset-0 bg-gray-500 opacity-75"},at=["primary","secondary"],nt=["default","filled","blank"],it=K({__name:"ElInputSearch",props:B({...de(),status:{type:String,default:"default"},text:{type:String,default:void 0},results:{type:Array,default:void 0},footer:{type:Object,default:void 0},blankResults:{type:Object,default:void 0},shouldHoverFirstResultOnOpen:{type:Boolean,default:!1},color:{type:String,default:"primary"}},{isOpen:{default:!0,required:!0,type:Boolean},isOpenModifiers:{}}),emits:B(["update:modelValue","onResultClick","onResultHover"],["update:isOpen"]),setup(t,{emit:A}){const s=t,x=A,k=J(),T=ie(document.body),g=f(null),D=w(()=>s.modelValue),H=w(()=>[s.validation]),S=w(()=>({default:!s.results,filled:s.results&&s.results.length>0,blank:s.results&&s.results.length===0})),j=f(!1),C=f(!1),I=f([]),a=f(),{value:m,uuid:z,setValue:L}=fe(D,H,s.name,e=>{x("update:modelValue",e==null?void 0:e.trim())}),b=f(),{hasFocus:N,activate:P,deactivate:U}=me(b),p=Q(t,"isOpen"),M=()=>{p.value=!1,a.value=void 0,m.value=""},q=e=>{var o,u,n;(n=(u=(o=I.value)==null?void 0:o.at(e))==null?void 0:u.$el)==null||n.scrollIntoView({block:"nearest"})},_=e=>{x("onResultClick",e),L(""),a.value=void 0},h=e=>{a.value=e,q(e),x("onResultHover",e)},G=()=>M();return ue(["ArrowUp","ArrowDown","Enter","Escape"],e=>{var o;if(e.preventDefault(),e.stopPropagation(),N&&((o=s.results)!=null&&o.length))switch(e.key){case"ArrowUp":const u=Math.max((a.value??0)-1,0);h(u);break;case"ArrowDown":const n=a.value!==void 0?Math.min(a.value+1,s.results.length-1):0;h(n);break;case"Enter":a.value!==void 0&&_(a.value);break}e.key==="Escape"&&M()},{target:b}),W([p,g],async()=>{var e,o;T.value=p.value,p.value?((e=g.value)==null||e.focus(),s.shouldHoverFirstResultOnOpen&&((o=s.results)!=null&&o.length)&&h(0),await X(),P()):(U(),m.value="")}),(e,o)=>(l(),R(Y,{to:"body"},[v(ne,{name:"fade"},{default:Z(()=>[p.value?(l(),i("div",{key:0,ref_key:"searchBarRef",ref:b,class:"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0"},[F((l(),i("div",{class:E(["m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md",{"gap-6":s.results}])},[r("div",pe,[v($,{name:"MagnifyingGlassIcon",class:"text-neutral-lighter w-6 h-6"}),F(r("input",{ref_key:"searchInput",ref:g,"onUpdate:modelValue":o[0]||(o[0]=u=>ee(m)?m.value=u:null),name:e.id||`${d(z)}`,type:"text",class:"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0",placeholder:e.placeholder,onFocusin:o[1]||(o[1]=()=>{C.value=!0,j.value=!1}),onFocusout:o[2]||(o[2]=()=>{C.value=!1})},null,40,ve),[[te,d(m)]])]),r("span",he,[t.results?(l(),R(V,{key:0,direction:"horizontal"})):c("",!0),t.blankResults&&S.value.blank?(l(),i("div",ye,[v($,O(t.blankResults.icon,{class:"w-7 h-7"}),null,16),r("p",xe,y(t.blankResults.primaryRow),1),r("p",ke,y(t.blankResults.secondaryRow),1)])):c("",!0),t.results&&S.value.filled?(l(),i("div",ge,[r("div",{class:E(["flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen",{"pr-6":d(k).info&&t.results.length>0}])},[t.text?(l(),i("span",be,y(t.text),1)):c("",!0),r("div",we,[(l(!0),i(oe,null,se(t.results,(u,n)=>(l(),R(re,O({key:n,ref_for:!0,ref_key:"itemRefs",ref:I,color:t.color},u,{status:a.value===n?"hover":"default",tabindex:"-1",onClick:()=>_(n),onMouseover:()=>h(n)}),null,16,["color","status","onClick","onMouseover"]))),128))])],2),d(k).info?(l(),i("div",Re,[v(V,{direction:"vertical"})])):c("",!0),d(k).info?(l(),i("div",Oe,[le(e.$slots,"info")])):c("",!0)])):c("",!0),t.results&&t.footer?(l(),i("div",Se,[r("span",Ce,y(t.footer.text),1),v(d(ae),O(t.footer.button,{variant:"tertiary"}),null,16)])):c("",!0)])],2)),[[d(ce),G]]),r("div",Ie,[r("div",Me,null,512)])],512)):c("",!0)]),_:3})]))}});export{it as default,at as elInputSearchColors,nt as elInputSearchStatus};
|
|
2
2
|
//# sourceMappingURL=ElInputSearch.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElInputSearch.vue.esm2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n ...withTextualElInputProps(),\n status: {\n type: String as PropType<ElInputSearchStatus>,\n default: 'default',\n },\n text: {\n type: String,\n default: undefined,\n },\n results: {\n type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<{\n text: string;\n button: InstanceType<typeof ElButton>['$props'];\n }>,\n default: undefined,\n },\n blankResults: {\n type: Object as PropType<{\n icon: InstanceType<typeof ElIcon>['$props'];\n primaryRow: string;\n secondaryRow?: string;\n }>,\n default: undefined,\n },\n shouldHoverFirstResultOnOpen: {\n type: Boolean,\n default: false,\n },\n color: {\n type: String as PropType<ElInputSearchColors>,\n default: 'primary',\n },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n default: !props.results,\n filled: props.results && props.results.length > 0,\n blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n default: true,\n required: true,\n type: Boolean,\n});\n\nconst closeSearchBar = () => {\n isOpen.value = false;\n activeResult.value = undefined;\n value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n emit('onResultClick', index);\n setValue('');\n activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n activeResult.value = index;\n scrollToFocusedIndex(index);\n emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (hasFocus && props.results?.length) {\n switch (e.key) {\n case 'ArrowUp':\n const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n onResultHover(previousActiveIndex);\n break;\n case 'ArrowDown':\n const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n onResultHover(nextActiveIndex);\n break;\n case 'Enter':\n if (activeResult.value !== undefined) {\n onResultClick(activeResult.value);\n }\n break;\n }\n }\n\n if (e.key === 'Escape') {\n closeSearchBar();\n }\n },\n { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n isBodyScrollLocked.value = isOpen.value;\n\n if (isOpen.value) {\n searchInput.value?.focus();\n\n if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n onResultHover(0);\n }\n\n await nextTick();\n activate();\n } else {\n deactivate();\n value.value = '';\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div\n v-if=\"isOpen\"\n ref=\"searchBarRef\"\n class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n >\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n :class=\"{\n 'gap-6': props.results,\n }\"\n >\n <!-- Search bar -->\n <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n <input\n ref=\"searchInput\"\n v-model=\"value\"\n :name=\"id || `${uuid}`\"\n type=\"text\"\n class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n :placeholder=\"placeholder\"\n @focusin=\"\n () => {\n isSearchFocused = true; // Set search focused\n isClickOutside = false; // Set click outside to false\n }\n \"\n @focusout=\"\n () => {\n isSearchFocused = false;\n }\n \"\n />\n </div>\n\n <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n <ElDivider v-if=\"results\" direction=\"horizontal\" />\n <div\n v-if=\"blankResults && computedStatus.blank\"\n class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n >\n <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n </div>\n <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n <!-- Results Left column -->\n <div\n class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n >\n <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n <div class=\"flex flex-col gap-1 w-full\">\n <ElVerticalTab\n v-for=\"(result, index) in results\"\n :key=\"index\"\n ref=\"itemRefs\"\n :color=\"color\"\n v-bind=\"result\"\n :status=\"activeResult === index ? 'hover' : 'default'\"\n tabindex=\"-1\"\n @click=\"() => onResultClick(index)\"\n @mouseover=\"() => onResultHover(index)\"\n />\n </div>\n </div>\n <!-- Blank Results -->\n\n <div v-if=\"slots.info\">\n <ElDivider direction=\"vertical\" />\n </div>\n <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n <slot name=\"info\"></slot>\n </div>\n </div>\n <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n </div>\n </span>\n </div>\n\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 </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"4qFACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,+eAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,IACRC,EAAqBC,GAAc,SAAS,IAAI,EAEhDC,EAAcC,EAA6B,IAAI,EAC/CC,EAAqBC,EAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,EAAI,EAAK,EAC1BM,EAAkBN,EAAI,EAAK,EAE3BO,EAAWP,EAA0C,CAAA,CAAE,EACvDQ,EAAeR,IAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,GAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,IACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,GAAaJ,CAAmB,EAErEK,EAASC,EAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7B,OAAAS,GACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrC,GAAA,OAIC,GAHJ,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAEdf,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQ,EAAE,IAAK,CACb,IAAK,UACH,MAAMK,EAAsB,KAAK,KAAKvB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcG,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBxB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcI,CAAe,EAC7B,MACF,IAAK,QACCxB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGE,EAAE,MAAQ,UACGa,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBmB,EAAM,CAACd,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMM,EAAS,EACNlB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}
|
|
1
|
+
{"version":3,"file":"ElInputSearch.vue.esm2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n ...withTextualElInputProps(),\n status: {\n type: String as PropType<ElInputSearchStatus>,\n default: 'default',\n },\n text: {\n type: String,\n default: undefined,\n },\n results: {\n type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<{\n text: string;\n button: InstanceType<typeof ElButton>['$props'];\n }>,\n default: undefined,\n },\n blankResults: {\n type: Object as PropType<{\n icon: InstanceType<typeof ElIcon>['$props'];\n primaryRow: string;\n secondaryRow?: string;\n }>,\n default: undefined,\n },\n shouldHoverFirstResultOnOpen: {\n type: Boolean,\n default: false,\n },\n color: {\n type: String as PropType<ElInputSearchColors>,\n default: 'primary',\n },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n default: !props.results,\n filled: props.results && props.results.length > 0,\n blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n default: true,\n required: true,\n type: Boolean,\n});\n\nconst closeSearchBar = () => {\n isOpen.value = false;\n activeResult.value = undefined;\n value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n emit('onResultClick', index);\n setValue('');\n activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n activeResult.value = index;\n scrollToFocusedIndex(index);\n emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (hasFocus && props.results?.length) {\n switch (e.key) {\n case 'ArrowUp':\n const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n onResultHover(previousActiveIndex);\n break;\n case 'ArrowDown':\n const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n onResultHover(nextActiveIndex);\n break;\n case 'Enter':\n if (activeResult.value !== undefined) {\n onResultClick(activeResult.value);\n }\n break;\n }\n }\n\n if (e.key === 'Escape') {\n closeSearchBar();\n }\n },\n { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n isBodyScrollLocked.value = isOpen.value;\n\n if (isOpen.value) {\n searchInput.value?.focus();\n\n if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n onResultHover(0);\n }\n\n await nextTick();\n activate();\n } else {\n deactivate();\n value.value = '';\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div\n v-if=\"isOpen\"\n ref=\"searchBarRef\"\n class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n >\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n :class=\"{\n 'gap-6': props.results,\n }\"\n >\n <!-- Search bar -->\n <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n <input\n ref=\"searchInput\"\n v-model=\"value\"\n :name=\"id || `${uuid}`\"\n type=\"text\"\n class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n :placeholder=\"placeholder\"\n @focusin=\"\n () => {\n isSearchFocused = true; // Set search focused\n isClickOutside = false; // Set click outside to false\n }\n \"\n @focusout=\"\n () => {\n isSearchFocused = false;\n }\n \"\n />\n </div>\n\n <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n <ElDivider v-if=\"results\" direction=\"horizontal\" />\n <div\n v-if=\"blankResults && computedStatus.blank\"\n class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n >\n <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n </div>\n <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n <!-- Results Left column -->\n <div\n class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n >\n <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n <div class=\"flex flex-col gap-1 w-full\">\n <ElVerticalTab\n v-for=\"(result, index) in results\"\n :key=\"index\"\n ref=\"itemRefs\"\n :color=\"color\"\n v-bind=\"result\"\n :status=\"activeResult === index ? 'hover' : 'default'\"\n tabindex=\"-1\"\n @click=\"() => onResultClick(index)\"\n @mouseover=\"() => onResultHover(index)\"\n />\n </div>\n </div>\n <!-- Blank Results -->\n\n <div v-if=\"slots.info\">\n <ElDivider direction=\"vertical\" />\n </div>\n <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n <slot name=\"info\"></slot>\n </div>\n </div>\n <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n </div>\n </span>\n </div>\n\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 </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"0lFACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,+eAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,IACRC,EAAqBC,GAAc,SAAS,IAAI,EAEhDC,EAAcC,EAA6B,IAAI,EAC/CC,EAAqBC,EAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,EAAI,EAAK,EAC1BM,EAAkBN,EAAI,EAAK,EAE3BO,EAAWP,EAA0C,CAAA,CAAE,EACvDQ,EAAeR,IAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,GAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,IACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,GAAaJ,CAAmB,EAErEK,EAASC,EAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7B,OAAAS,GACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrC,GAAA,OAIC,GAHJ,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAEdf,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQ,EAAE,IAAK,CACb,IAAK,UACH,MAAMK,EAAsB,KAAK,KAAKvB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcG,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBxB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcI,CAAe,EAC7B,MACF,IAAK,QACCxB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGE,EAAE,MAAQ,UACGa,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBmB,EAAM,CAACd,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMM,EAAS,EACNlB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}
|
package/dist/src/index.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */require("./polyfills.cjs.js");const k=require("./vue.plugin.cjs.js"),E=require("./tailwind.plugin.cjs.js"),F=require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js"),e=require("./types.cjs.js"),g=require("./ElAccordion.vue.cjs2.js"),C=require("./ElAvatar.vue.cjs2.js"),S=require("./ElBadge.vue.cjs2.js"),n=require("./ElButton.vue.cjs2.js"),s=require("./ElCalendarCard.vue.cjs2.js"),a=require("./ElCalendarCell.vue.cjs2.js"),H=require("./ElDrawer.vue.cjs2.js"),T=require("./ElDropdown.vue.cjs2.js"),y=require("./ElFile.vue.cjs2.js"),I=require("./ElIcon.vue.cjs2.js"),q=require("./ElIconButton.vue.cjs2.js"),t=require("./forms/ElInputCheckbox.vue.cjs2.js"),f=require("./forms/ElInputContainer.vue.cjs2.js"),b=require("./forms/ElInputDate.vue.cjs2.js"),h=require("./forms/ElInputFile.vue.cjs2.js"),L=require("./forms/ElInputMeasureUnit.vue.cjs2.js"),U=require("./forms/ElInputNumber.vue.cjs2.js"),G=require("./forms/ElInputPhone.vue.cjs2.js"),N=require("./forms/ElInputSelect.vue.cjs2.js"),B=require("./forms/ElInputText.vue.cjs2.js"),W=require("./forms/ElInputTextarea.vue.cjs2.js"),j=require("./ElItem.vue.cjs2.js"),i=require("./ElLogo.vue.cjs2.js"),A=require("./ElSortingHeader.vue.cjs2.js"),M=require("./ElSuggestionChip.vue.cjs2.js"),o=require("./ElTab.vue.cjs2.js"),O=require("./ElTabGroup.vue.cjs2.js"),J=require("./ElTableHead.vue.cjs2.js"),K=require("./ElTabs.vue.cjs2.js"),l=require("./ElTag.vue.cjs2.js"),p=require("./ElToast.vue.cjs2.js"),D=require("./ElInlineBanner.vue.cjs2.js"),c=require("./forms/ElInputRadioButton.vue.cjs2.js"),z=require("./ElClipToAnchor.vue.cjs2.js"),Q=require("./table/ElTable.vue.cjs2.js"),X=require("./table/ElServerSideTable.vue.cjs2.js"),x=require("./ElSpinner.vue.cjs2.js"),V=require("./ElDivider.vue.cjs2.js"),u=require("./ElModal.vue.cjs2.js"),v=require("./ElVerticalTab.vue.cjs2.js"),w=require("./ElContainerTemplate.vue.cjs2.js"),r=require("./forms/ElInputSwitch.vue.cjs2.js"),m=require("./ElCarousel.vue.cjs2.js")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */require("./polyfills.cjs.js");const k=require("./vue.plugin.cjs.js"),E=require("./tailwind.plugin.cjs.js"),F=require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js"),e=require("./types.cjs.js"),g=require("./ElAccordion.vue.cjs2.js"),C=require("./ElAvatar.vue.cjs2.js"),S=require("./ElBadge.vue.cjs2.js"),n=require("./ElButton.vue.cjs2.js"),s=require("./ElCalendarCard.vue.cjs2.js"),a=require("./ElCalendarCell.vue.cjs2.js"),H=require("./ElDrawer.vue.cjs2.js"),T=require("./ElDropdown.vue.cjs2.js"),y=require("./ElFile.vue.cjs2.js"),I=require("./ElIcon.vue.cjs2.js"),q=require("./ElIconButton.vue.cjs2.js"),t=require("./forms/ElInputCheckbox.vue.cjs2.js"),f=require("./forms/ElInputContainer.vue.cjs2.js"),b=require("./forms/ElInputDate.vue.cjs2.js"),h=require("./forms/ElInputFile.vue.cjs2.js"),L=require("./forms/ElInputMeasureUnit.vue.cjs2.js"),U=require("./forms/ElInputNumber.vue.cjs2.js"),G=require("./forms/ElInputPhone.vue.cjs2.js"),N=require("./forms/ElInputSelect.vue.cjs2.js"),B=require("./forms/ElInputText.vue.cjs2.js"),W=require("./forms/ElInputTextarea.vue.cjs2.js"),j=require("./ElItem.vue.cjs2.js"),i=require("./ElLogo.vue.cjs2.js"),A=require("./ElSortingHeader.vue.cjs2.js"),M=require("./ElSuggestionChip.vue.cjs2.js"),o=require("./ElTab.vue.cjs2.js"),O=require("./ElTabGroup.vue.cjs2.js"),J=require("./ElTableHead.vue.cjs2.js"),K=require("./ElTabs.vue.cjs2.js"),l=require("./ElTag.vue.cjs2.js"),p=require("./ElToast.vue.cjs2.js"),D=require("./ElInlineBanner.vue.cjs2.js"),c=require("./forms/ElInputRadioButton.vue.cjs2.js"),z=require("./ElClipToAnchor.vue.cjs2.js"),Q=require("./table/ElTable.vue.cjs2.js"),X=require("./table/ElServerSideTable.vue.cjs2.js"),x=require("./ElSpinner.vue.cjs2.js"),V=require("./ElDivider.vue.cjs2.js"),u=require("./ElModal.vue.cjs2.js"),v=require("./ElVerticalTab.vue.cjs2.js"),w=require("./ElContainerTemplate.vue.cjs2.js"),r=require("./forms/ElInputSwitch.vue.cjs2.js"),m=require("./ElCarousel.vue.cjs2.js");;/* empty css */const _=require("./ElActionButton.vue.cjs2.js"),Y=require("./ElListItem.vue.cjs2.js"),Z=require("./table/ElMobileTable.vue.cjs2.js"),d=require("./forms/ElInputSearch.vue.cjs2.js"),$=require("./forms/ElInputRichText.vue.cjs2.js"),ee=require("./table/ElResponsiveTable.vue.cjs2.js"),te=require("./table/ElServerSideMobileTable.vue.cjs2.js"),le=require("./table/ElServerSideResponsiveTable.vue.cjs2.js"),R=require("./ElTooltip.vue.cjs2.js"),ue=require("./forms/validation-rules.cjs.js"),re=require("./composable/mobileComposable.cjs.js"),P=require("./ElInputChip.vue.cjs2.js"),_e=require("./forms/ElInputAutocomplete.vue.cjs2.js");exports.EltyVuePlugin=k.default;exports.EltyTailwindPlugin=E.defaultPlugin;exports.EltyTailwindPluginWithoutStyle=E.pluginWithoutStyles;exports.EltyTailwindPreset=F.preset;exports.DrugDurationMeasures=e.DrugDurationMeasures;exports.DrugTimeMeasures=e.DrugTimeMeasures;exports.DrugUnitMeasures=e.DrugUnitMeasures;exports.Role=e.Role;exports.ElAccordion=g.default;exports.elAccordionColors=g.elAccordionColors;exports.ElAvatar=C.default;exports.elAvatarSizes=C.elAvatarSizes;exports.ElBadge=S.default;exports.elBadgeColors=S.elBadgeColors;exports.ElButton=n.default;exports.elButtonSizes=n.elButtonSizes;exports.elButtonVariants=n.elButtonVariants;exports.ElCalendarCard=s.default;exports.elCalendarCardColors=s.elCalendarCardColors;exports.elCalendarCardStatuses=s.elCalendarCardStatuses;exports.ElCalendarCell=a.default;exports.elCalendarCellAvailabilities=a.elCalendarCellAvailabilities;exports.elCalendarCellColors=a.elCalendarCellColors;exports.ElDrawer=H.default;exports.ElDropdown=T.default;exports.elDropdownMaxHeight=T.elDropdownMaxHeight;exports.ElFile=y.default;exports.elFileVariants=y.elFileVariants;exports.ElIcon=I.default;exports.elIconColors=I.elIconColors;exports.ElIconButton=q.default;exports.elIconButtonSizes=q.elIconButtonSizes;exports.ElInputCheckbox=t.default;exports.elInputCheckboxColors=t.elInputCheckboxColors;exports.elInputCheckboxModelValues=t.elInputCheckboxModelValues;exports.elInputCheckboxSizes=t.elInputCheckboxSizes;exports.ElInputContainer=f.default;exports.elInputContainerColor=f.elInputContainerColor;exports.ElInputDate=b.default;exports.elInputDateTypes=b.elInputDateTypes;exports.ElInputFile=h.default;exports.elInputFileTypes=h.elInputFileTypes;exports.ElInputMeasureUnit=L.default;exports.ElInputNumber=U.default;exports.ElInputPhone=G.default;exports.ElInputSelect=N.default;exports.ElInputText=B.default;exports.elInputTextTypes=B.elInputTextTypes;exports.ElInputTextarea=W.default;exports.ElItem=j.default;exports.ElLogo=i.default;exports.elLogoColors=i.elLogoColors;exports.elLogoVariants=i.elLogoVariants;exports.ElSortingHeader=A.default;exports.elSortingHeaderDirections=A.elSortingHeaderDirections;exports.ElSuggestionChip=M.default;exports.elSuggestionChipColors=M.elSuggestionChipColors;exports.ElTab=o.default;exports.elTabColors=o.elTabColors;exports.elTabStatuses=o.elTabStatuses;exports.ElTabGroup=O.default;exports.ElTableHead=J.default;exports.ElTabs=K.default;exports.ElTag=l.default;exports.elTagAppearance=l.elTagAppearance;exports.elTagColors=l.elTagColors;exports.elTagSizes=l.elTagSizes;exports.ElToast=p.default;exports.elToastStates=p.elToastStates;exports.toast=p.toast;exports.ElInlineBanner=D.default;exports.elInlineBannerStatuses=D.elInlineBannerStatuses;exports.ElInputRadioButton=c.default;exports.elRadioButtonColors=c.elRadioButtonColors;exports.elRadioButtonSizes=c.elRadioButtonSizes;exports.ElClipToAnchor=z.default;exports.elClipToAnchorPositions=z.elClipToAnchorPositions;exports.ElTable=Q.default;exports.ElServerSideTable=X.default;exports.ElSpinner=x.default;exports.elSpinnerSize=x.elSpinnerSize;exports.ElDivider=V.default;exports.elDividerDirection=V.elDividerDirection;exports.ElModal=u.default;exports.elModalColors=u.elModalColors;exports.elModalSizes=u.elModalSizes;exports.elModalSizesBreakpoints=u.elModalSizesBreakpoints;exports.ElVerticalTab=v.default;exports.elVerticalTabColors=v.elVerticalTabColors;exports.elVerticalTabStatus=v.elVerticalTabStatus;exports.ElContainerTemplate=w.default;exports.elContainerTemplateVariants=w.elContainerTemplateVariants;exports.ElInputSwitch=r.default;exports.elSwitchAligns=r.elSwitchAligns;exports.elSwitchColors=r.elSwitchColors;exports.elSwitchSizes=r.elSwitchSizes;exports.ElCarousel=m.default;exports.elCarouselSizes=m.elCarouselSizes;exports.ElActionButton=_.default;exports.elActionButtonColors=_.elActionButtonColors;exports.elActionButtonSizes=_.elActionButtonSizes;exports.elActionButtonStatus=_.elActionButtonStatus;exports.ElListItem=Y.default;exports.ElMobileTable=Z.default;exports.ElInputSearch=d.default;exports.elInputSearchColors=d.elInputSearchColors;exports.elInputSearchStatus=d.elInputSearchStatus;exports.ElInputRichText=$.default;exports.ElResponsiveTable=ee.default;exports.ElServerSideMobileTable=te.default;exports.ElServerSideResponsiveTable=le.default;exports.ElTooltip=R.default;exports.elTooltipPositions=R.elTooltipPositions;exports.defineValidationRules=ue.defineValidationRules;exports.useMobile=re.useMobile;exports.ElInputChip=P.default;exports.elInputChipStatus=P.elInputChipStatus;exports.ElInputAutocomplete=_e.default;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
package/dist/src/index.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* empty css */import"./polyfills.esm.js";import{default as
|
|
1
|
+
/* empty css */import"./polyfills.esm.js";import{default as r}from"./vue.plugin.esm.js";import{defaultPlugin as u,pluginWithoutStyles as f}from"./tailwind.plugin.esm.js";import{preset as n}from"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import{DrugDurationMeasures as d,DrugTimeMeasures as m,DrugUnitMeasures as x,Role as E}from"./types.esm.js";import{default as S,elAccordionColors as T}from"./ElAccordion.vue.esm2.js";import{default as I,elAvatarSizes as g}from"./ElAvatar.vue.esm2.js";import{default as h,elBadgeColors as B}from"./ElBadge.vue.esm2.js";import{default as D,elButtonSizes as M,elButtonVariants as z}from"./ElButton.vue.esm2.js";import{default as w,elCalendarCardColors as V,elCalendarCardStatuses as y}from"./ElCalendarCard.vue.esm2.js";import{default as R,elCalendarCellAvailabilities as k,elCalendarCellColors as F}from"./ElCalendarCell.vue.esm2.js";import{default as L}from"./ElDrawer.vue.esm2.js";import{default as W,elDropdownMaxHeight as G}from"./ElDropdown.vue.esm2.js";import{default as j,elFileVariants as q}from"./ElFile.vue.esm2.js";import{default as K,elIconColors as O}from"./ElIcon.vue.esm2.js";import{default as X,elIconButtonSizes as Y}from"./ElIconButton.vue.esm2.js";import{default as _,elInputCheckboxColors as $,elInputCheckboxModelValues as ee,elInputCheckboxSizes as te}from"./forms/ElInputCheckbox.vue.esm2.js";import{default as oe,elInputContainerColor as ae}from"./forms/ElInputContainer.vue.esm2.js";import{default as se,elInputDateTypes as ue}from"./forms/ElInputDate.vue.esm2.js";import{default as pe,elInputFileTypes as ne}from"./forms/ElInputFile.vue.esm2.js";import{default as de}from"./forms/ElInputMeasureUnit.vue.esm2.js";import{default as xe}from"./forms/ElInputNumber.vue.esm2.js";import{default as Ce}from"./forms/ElInputPhone.vue.esm2.js";import{default as Te}from"./forms/ElInputSelect.vue.esm2.js";import{default as Ie,elInputTextTypes as ge}from"./forms/ElInputText.vue.esm2.js";import{default as he}from"./forms/ElInputTextarea.vue.esm2.js";import{default as Ae}from"./ElItem.vue.esm2.js";import{default as Me,elLogoColors as ze,elLogoVariants as ve}from"./ElLogo.vue.esm2.js";import{default as Ve,elSortingHeaderDirections as ye}from"./ElSortingHeader.vue.esm2.js";import{default as Re,elSuggestionChipColors as ke}from"./ElSuggestionChip.vue.esm2.js";import{default as He,elTabColors as Le,elTabStatuses as Ue}from"./ElTab.vue.esm2.js";import{default as Ge}from"./ElTabGroup.vue.esm2.js";import{default as je}from"./ElTableHead.vue.esm2.js";import{default as Je}from"./ElTabs.vue.esm2.js";import{default as Oe,elTagAppearance as Qe,elTagColors as Xe,elTagSizes as Ye}from"./ElTag.vue.esm2.js";import{default as _e,elToastStates as $e,toast as et}from"./ElToast.vue.esm2.js";import{default as lt,elInlineBannerStatuses as ot}from"./ElInlineBanner.vue.esm2.js";import{default as rt,elRadioButtonColors as st,elRadioButtonSizes as ut}from"./forms/ElInputRadioButton.vue.esm2.js";import{default as pt,elClipToAnchorPositions as nt}from"./ElClipToAnchor.vue.esm2.js";import{default as dt}from"./table/ElTable.vue.esm2.js";import{default as xt}from"./table/ElServerSideTable.vue.esm2.js";import{default as Ct,elSpinnerSize as St}from"./ElSpinner.vue.esm2.js";import{default as ct,elDividerDirection as It}from"./ElDivider.vue.esm2.js";import{default as bt,elModalColors as ht,elModalSizes as Bt,elModalSizesBreakpoints as At}from"./ElModal.vue.esm2.js";import{default as Mt,elVerticalTabColors as zt,elVerticalTabStatus as vt}from"./ElVerticalTab.vue.esm2.js";import{default as Vt,elContainerTemplateVariants as yt}from"./ElContainerTemplate.vue.esm2.js";import{default as Rt,elSwitchAligns as kt,elSwitchColors as Ft,elSwitchSizes as Ht}from"./forms/ElInputSwitch.vue.esm2.js";import{default as Ut,elCarouselSizes as Wt}from"./ElCarousel.vue.esm2.js";/* empty css */import{default as Nt,elActionButtonColors as jt,elActionButtonSizes as qt,elActionButtonStatus as Jt}from"./ElActionButton.vue.esm2.js";import{default as Ot}from"./ElListItem.vue.esm2.js";import{default as Xt}from"./table/ElMobileTable.vue.esm2.js";import{default as Zt,elInputSearchColors as _t,elInputSearchStatus as $t}from"./forms/ElInputSearch.vue.esm2.js";import{default as tl}from"./forms/ElInputRichText.vue.esm2.js";import{default as ol}from"./table/ElResponsiveTable.vue.esm2.js";import{default as rl}from"./table/ElServerSideMobileTable.vue.esm2.js";import{default as ul}from"./table/ElServerSideResponsiveTable.vue.esm2.js";import{default as pl,elTooltipPositions as nl}from"./ElTooltip.vue.esm2.js";import{defineValidationRules as dl}from"./forms/validation-rules.esm.js";import{useMobile as xl}from"./composable/mobileComposable.esm.js";import{default as Cl,elInputChipStatus as Sl}from"./ElInputChip.vue.esm2.js";import{default as cl}from"./forms/ElInputAutocomplete.vue.esm2.js";export{d as DrugDurationMeasures,m as DrugTimeMeasures,x as DrugUnitMeasures,S as ElAccordion,Nt as ElActionButton,I as ElAvatar,h as ElBadge,D as ElButton,w as ElCalendarCard,R as ElCalendarCell,Ut as ElCarousel,pt as ElClipToAnchor,Vt as ElContainerTemplate,ct as ElDivider,L as ElDrawer,W as ElDropdown,j as ElFile,K as ElIcon,X as ElIconButton,lt as ElInlineBanner,cl as ElInputAutocomplete,_ as ElInputCheckbox,Cl as ElInputChip,oe as ElInputContainer,se as ElInputDate,pe as ElInputFile,de as ElInputMeasureUnit,xe as ElInputNumber,Ce as ElInputPhone,rt as ElInputRadioButton,tl as ElInputRichText,Zt as ElInputSearch,Te as ElInputSelect,Rt as ElInputSwitch,Ie as ElInputText,he as ElInputTextarea,Ae as ElItem,Ot as ElListItem,Me as ElLogo,Xt as ElMobileTable,bt as ElModal,ol as ElResponsiveTable,rl as ElServerSideMobileTable,ul as ElServerSideResponsiveTable,xt as ElServerSideTable,Ve as ElSortingHeader,Ct as ElSpinner,Re as ElSuggestionChip,He as ElTab,Ge as ElTabGroup,dt as ElTable,je as ElTableHead,Je as ElTabs,Oe as ElTag,_e as ElToast,pl as ElTooltip,Mt as ElVerticalTab,u as EltyTailwindPlugin,f as EltyTailwindPluginWithoutStyle,n as EltyTailwindPreset,r as EltyVuePlugin,E as Role,dl as defineValidationRules,T as elAccordionColors,jt as elActionButtonColors,qt as elActionButtonSizes,Jt as elActionButtonStatus,g as elAvatarSizes,B as elBadgeColors,M as elButtonSizes,z as elButtonVariants,V as elCalendarCardColors,y as elCalendarCardStatuses,k as elCalendarCellAvailabilities,F as elCalendarCellColors,Wt as elCarouselSizes,nt as elClipToAnchorPositions,yt as elContainerTemplateVariants,It as elDividerDirection,G as elDropdownMaxHeight,q as elFileVariants,Y as elIconButtonSizes,O as elIconColors,ot as elInlineBannerStatuses,$ as elInputCheckboxColors,ee as elInputCheckboxModelValues,te as elInputCheckboxSizes,Sl as elInputChipStatus,ae as elInputContainerColor,ue as elInputDateTypes,ne as elInputFileTypes,_t as elInputSearchColors,$t as elInputSearchStatus,ge as elInputTextTypes,ze as elLogoColors,ve as elLogoVariants,ht as elModalColors,Bt as elModalSizes,At as elModalSizesBreakpoints,st as elRadioButtonColors,ut as elRadioButtonSizes,ye as elSortingHeaderDirections,St as elSpinnerSize,ke as elSuggestionChipColors,kt as elSwitchAligns,Ft as elSwitchColors,Ht as elSwitchSizes,Le as elTabColors,Ue as elTabStatuses,Qe as elTagAppearance,Xe as elTagColors,Ye as elTagSizes,$e as elToastStates,nl as elTooltipPositions,zt as elVerticalTabColors,vt as elVerticalTabStatus,et as toast,xl as useMobile};
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),K=require("./ElServerSideTablePagination.vue.cjs2.js"),Q=require("../_CustomTransition.vue.cjs2.js"),b=require("../forms/ElInputCheckbox.vue.cjs2.js"),W=require("../forms/ElInputSelect.vue.cjs2.js"),Y=require("../forms/ElInputDate.vue.cjs2.js"),Z=require("../forms/ElInputText.vue.cjs2.js"),ee=require("../ElSpinner.vue.cjs2.js"),te=require("./ElTableCell.vue.cjs2.js"),le=require("../ElButton.vue.cjs2.js"),x=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),oe={class:"flex flex-col"},re={class:"overflow-x-auto"},ae={class:"inline-block min-w-full bg-white align-middle"},ne={class:"min-w-full"},se={class:"bg-neutral-surface-raised font-semibold"},ce={key:1,class:"w-7"},ue=["title","onClick"],ie={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},de={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},pe={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},fe={key:0},ge={key:0,scope:"col"},me={key:1,class:"flex flex-col"},_e={key:3,class:"flex justify-end"},ve={key:"loading"},we=["colspan"],ye={key:"tableFull",class:"bg-white"},Se={key:0,class:"flex h-20 items-center justify-center py-3"},ke=["data-cy"],Ee={key:"tableEmpty"},he=["colspan"],Be=e.defineComponent({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(A,{expose:F,emit:T}){const r=A,N=T,f=e.ref(!0),_=10,d=e.ref([]),S=e.ref(null);e.onMounted(async()=>{const t=await r.dataController({paginationStatus:{currentPage:0},sortStatus:w.value,filterStatus:i.value.filter(c=>c),triggeredEvent:"firstLoad"});d.value=t.data,v.value=t.totalRows,f.value=!1});function P(){const t=e.ref(0),c=e.computed(()=>{var a;return((a=S.value)==null?void 0:a.currentPage)??0});return{newPageSelected:async a=>{f.value=!0,d.value=(await r.dataController({paginationStatus:{currentPage:a},sortStatus:w.value,filterStatus:i.value.filter(n=>n),triggeredEvent:"paginate"})).data,f.value=!1},totalRowsCount:t,currentPage:c,goToFirstPage:()=>{var a;return(a=S.value)==null?void 0:a.goToPage(0,{doNotEmitEvent:!0})}}}function M(){const t=e.ref({currentlySortColIndex:r.sortByCol>-1?r.sortByCol:-1,arrows:[]}),c=()=>{t.value={currentlySortColIndex:-1,arrows:[]}},o=e.computed(()=>({columnToSort:t.value.currentlySortColIndex,order:t.value.arrows[t.value.currentlySortColIndex]?"asc":"desc"}));return e.onMounted(async()=>{r.columns.length>_?t.value.arrows=new Array(_):t.value.arrows=new Array(r.columns.length-1),r.sortByCol>-1&&(t.value.arrows[r.sortByCol]=r.sortByColAsc)}),{sortStatus:t,toggleSortArrow:async a=>{t.value.currentlySortColIndex=a,t.value.arrows.splice(a,1,!t.value.arrows[a]),f.value=!0;try{const n=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:o.value,filterStatus:i.value.filter(s=>s),triggeredEvent:"sort"});d.value=n.data,v.value=n.totalRows}catch(n){console.error(n)}finally{f.value=!1}},currentSortStatus:o,resetSort:c}}function D(){const t=e.ref([]),c=e.ref(!1);e.onMounted(()=>{o(),x.watchDeep(t,async n=>{c.value?(l(n),c.value=!1):a(n)})});const o=()=>{var n;c.value=!0,r.columns.length>_?t.value=new Array(_):t.value=new Array(r.columns.length-1);for(let s=0;s<_;s++){const u=(n=r.columns[s])==null?void 0:n.filter;u&&(u.type==="FREE_SEARCH"?t.value.splice(s,1,{id:u.id,textSearch:u.initialValue??"",type:"FREE_SEARCH",columnTitle:r.columns[s].title}):u.type==="MULTI_VALUE"?t.value.splice(s,1,{id:u.id,textSearch:u.initialValue??"",type:"MULTI_VALUE",columnTitle:r.columns[s].title}):u.type==="DATE_RANGE"&&t.value.splice(s,1,{id:u.id,dateFrom:u.initialValue??0,type:"DATE_RANGE",columnTitle:r.columns[s].title}))}},l=async n=>{console.log("applyFilters"),f.value=!0,H();const s=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:w.value,filterStatus:n.filter(u=>u),triggeredEvent:"filter"});d.value=s.data,v.value=s.totalRows,f.value=!1},a=x.useDebounceFn(l,500);return{filterStatus:t,resetFilters:o}}function U(){const t=e.ref([]),c=()=>{N("rows-selected",t.value)},o=p=>{a(p.map(g=>g.id))},l=p=>{const g=t.value.findIndex(m=>m.id===p);t.value.splice(g,1),c()},a=async p=>{r.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const g=d.value.filter(m=>p.includes(m.id));r.rowsSelectionMode==="single"&&(g.length=Math.min(1,g.length));for(const m of g)t.value.some(J=>J.id===m.id)||t.value.push(m);c()},n=()=>{t.value=[],c()},s=()=>d.value,u=()=>t.value,y=e.computed(()=>t.value.length>0&&t.value.length===d.value.length);return{selectedRows:t,rowsSelected:o,rowUnselected:l,selectRows:a,unselectAllRows:n,getDataRows:s,getSelectedRows:u,allRowsSelected:y}}const{selectedRows:B,rowsSelected:C,rowUnselected:L,selectRows:I,unselectAllRows:k,getDataRows:q,getSelectedRows:z,allRowsSelected:V}=U(),{filterStatus:i,resetFilters:E}=D(),{sortStatus:R,toggleSortArrow:O,currentSortStatus:w,resetSort:G}=M(),{newPageSelected:j,totalRowsCount:v,currentPage:h,goToFirstPage:H}=P(),X=async()=>{G(),E(),k()},$=async()=>{f.value=!0;const t=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:w.value,filterStatus:i.value.filter(c=>c),triggeredEvent:"trigger"});d.value=t.data,v.value=t.totalRows,f.value=!1};return e.watch(()=>r.columns,()=>E(),{deep:!0,immediate:!0}),F({selectRows:I,resetAllAndFetch:X,unselectAllRows:k,getDataRows:q,getSelectedRows:z,triggerDataController:$}),(t,c)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",re,[e.createElementVNode("div",ae,[e.createElementVNode("table",ne,[e.createElementVNode("thead",null,[e.createElementVNode("tr",se,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",{key:0,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":t.rowsSelectionMode==="multiple"}])},[t.rowsSelectionMode==="multiple"?(e.openBlock(),e.createBlock(b.default,{key:0,"model-value":e.unref(V),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:c[0]||(c[0]=()=>e.unref(V)?e.unref(k)():e.unref(C)(d.value))},null,8,["model-value","disabled"])):(e.openBlock(),e.createElementBlock("div",ce))],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.columns,(o,l)=>(e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider",[o.alignRight?"text-right":"text-left",o.noSort?"cursor-default":"cursor-pointer"]]),title:o.noSort?"Colonna non ordinabile":e.unref(R).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:a=>!o.noSort&&e.unref(O)(l)},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),o.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",ie,[e.unref(R).arrows[l]?(e.openBlock(),e.createElementBlock("path",de)):(e.openBlock(),e.createElementBlock("path",pe))]))],10,ue))),128))]),e.unref(i).length>0&&!t.noFilters?(e.openBlock(),e.createElementBlock("tr",fe,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",ge)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(o,l)=>{var a,n,s,u,y;return e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((a=o.filter)==null?void 0:a.type)==="FREE_SEARCH"&&e.unref(i)[l].type==="FREE_SEARCH"?(e.openBlock(),e.createBlock(Z.default,{key:0,modelValue:e.unref(i)[l].textSearch,"onUpdate:modelValue":p=>e.unref(i)[l].textSearch=p,placeholder:((n=o.filter)==null?void 0:n.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((s=o.filter)==null?void 0:s.type)==="DATE_RANGE"&&e.unref(i)[l].type==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(Y.default,{modelValue:e.unref(i)[l].dateFrom,"onUpdate:modelValue":p=>e.unref(i)[l].dateFrom=p,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((u=o.filter)==null?void 0:u.type)==="MULTI_VALUE"&&e.unref(i)[l].type==="MULTI_VALUE"?(e.openBlock(),e.createBlock(W.default,{key:2,modelValue:e.unref(i)[l].textSearch,"onUpdate:modelValue":p=>e.unref(i)[l].textSearch=p,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((y=o.filter)==null?void 0:y.type)==="RESET_FILTERS_BUTTON"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(le.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(E)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(Q.default,{name:"fade"},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createElementBlock("tbody",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:r.columns.length+1},[e.createVNode(ee.default,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,we)])])):d.value.length>0?(e.openBlock(),e.createElementBlock("tbody",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,o=>(e.openBlock(),e.createElementBlock("tr",{key:o.id,class:e.normalizeClass(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":t.rowsSelectionMode&&e.unref(B).find(l=>l.id===o.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",Se,[e.createVNode(b.default,{"model-value":!!e.unref(B).find(l=>l.id===o.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(C)([o]):e.unref(L)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.cells,(l,a)=>(e.openBlock(),e.createElementBlock("td",{key:a,class:"max-w-sm px-2.5 py-2.5","data-cy":l.type==="default"&&l.mainText.trim().replaceAll(" ","").replaceAll(",","")},[e.createVNode(te.default,{cell:l},null,8,["cell"])],8,ke))),128))],2))),128))])):d.value.length===0?(e.openBlock(),e.createElementBlock("tbody",Ee,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:r.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,he)])])):e.createCommentVNode("",!0)]),_:1})])])]),e.createVNode(K.default,{ref_key:"pagination",ref:S,"total-rows-count":e.unref(v),"rows-per-page":r.rowsPerPage,"hide-footer":r.noFooter,"onUpdate:currentPage":e.unref(j)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});exports.default=Be;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),K=require("./ElServerSideTablePagination.vue.cjs2.js"),Q=require("../_CustomTransition.vue.cjs2.js"),b=require("../forms/ElInputCheckbox.vue.cjs2.js"),W=require("../forms/ElInputSelect.vue.cjs2.js"),Y=require("../forms/ElInputDate.vue.cjs2.js"),Z=require("../forms/ElInputText.vue.cjs2.js"),ee=require("../ElSpinner.vue.cjs2.js"),te=require("./ElTableCell.vue.cjs2.js"),le=require("../ElButton.vue.cjs2.js"),x=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),oe={class:"flex flex-col"},re={class:"overflow-x-auto"},ae={class:"inline-block min-w-full bg-white align-middle"},ne={class:"min-w-full"},se={class:"bg-neutral-surface-raised font-semibold"},ce={key:1,class:"w-7"},ue=["title","onClick"],ie={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},de={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},pe={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},fe={key:0},ge={key:0,scope:"col"},me={key:1,class:"flex flex-col"},_e={key:3,class:"flex justify-end"},ve={key:"loading"},we=["colspan"],Se={key:"tableFull",class:"bg-white"},ye={key:0,class:"flex h-20 items-center justify-center py-3"},ke=["data-cy"],Ee={key:"tableEmpty"},he=["colspan"],Be=e.defineComponent({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(A,{expose:F,emit:T}){const a=A,N=T,f=e.ref(!0),S=10,d=e.ref([]),y=e.ref(null);e.onMounted(async()=>{const t=await a.dataController({paginationStatus:{currentPage:0},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"firstLoad"});d.value=t.data,_.value=t.totalRows,f.value=!1});function P(){const t=e.ref(0),i=e.computed(()=>{var r;return((r=y.value)==null?void 0:r.currentPage)??0});return{newPageSelected:async r=>{f.value=!0,d.value=(await a.dataController({paginationStatus:{currentPage:r},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"paginate"})).data,f.value=!1},totalRowsCount:t,currentPage:i,goToFirstPage:()=>{var r;return(r=y.value)==null?void 0:r.goToPage(0,{doNotEmitEvent:!0})}}}function D(){const t=e.ref({currentlySortColIndex:a.sortByCol>-1?a.sortByCol:-1,arrows:[...new Array(S)].map((r,n)=>n===a.sortByCol?a.sortByColAsc:r)}),i=()=>{t.value={currentlySortColIndex:-1,arrows:[]}},o=e.computed(()=>({columnToSort:t.value.currentlySortColIndex,order:t.value.arrows[t.value.currentlySortColIndex]?"asc":"desc"}));return{sortStatus:t,toggleSortArrow:async r=>{t.value.currentlySortColIndex=r,t.value.arrows.splice(r,1,!t.value.arrows[r]),f.value=!0;try{const n=await a.dataController({paginationStatus:{currentPage:h.value},sortStatus:o.value,filterStatus:u.value,triggeredEvent:"sort"});d.value=n.data,_.value=n.totalRows}catch(n){console.error(n)}finally{f.value=!1}},currentSortStatus:o,resetSort:i}}function M(){const t=e.ref([]),i=e.ref(!1);e.onMounted(()=>{o(),x.watchDeep(t,async n=>{i.value?(l(n),i.value=!1):r(n)})});const o=()=>{var n;i.value=!0,t.value=new Array(S);for(let s=0;s<S;s++){const c=(n=a.columns[s])==null?void 0:n.filter;c&&(c.type==="FREE_SEARCH"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"FREE_SEARCH",columnTitle:a.columns[s].title}):c.type==="MULTI_VALUE"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:a.columns[s].title}):c.type==="DATE_RANGE"&&t.value.splice(s,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:a.columns[s].title}))}},l=async n=>{console.log("applyFilters"),f.value=!0,H();const s=await a.dataController({paginationStatus:{currentPage:h.value},sortStatus:v.value,filterStatus:n,triggeredEvent:"filter"});d.value=s.data,_.value=s.totalRows,f.value=!1},r=x.useDebounceFn(l,500);return{filterStatus:t,resetFilters:o}}function U(){const t=e.ref([]),i=()=>{N("rows-selected",t.value)},o=p=>{r(p.map(g=>g.id))},l=p=>{const g=t.value.findIndex(m=>m.id===p);t.value.splice(g,1),i()},r=async p=>{a.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const g=d.value.filter(m=>p.includes(m.id));a.rowsSelectionMode==="single"&&(g.length=Math.min(1,g.length));for(const m of g)t.value.some(J=>J.id===m.id)||t.value.push(m);i()},n=()=>{t.value=[],i()},s=()=>d.value,c=()=>t.value,w=e.computed(()=>t.value.length>0&&t.value.length===d.value.length);return{selectedRows:t,rowsSelected:o,rowUnselected:l,selectRows:r,unselectAllRows:n,getDataRows:s,getSelectedRows:c,allRowsSelected:w}}const{selectedRows:B,rowsSelected:C,rowUnselected:L,selectRows:I,unselectAllRows:k,getDataRows:q,getSelectedRows:z,allRowsSelected:V}=U(),{filterStatus:u,resetFilters:E}=M(),{sortStatus:R,toggleSortArrow:O,currentSortStatus:v,resetSort:G}=D(),{newPageSelected:j,totalRowsCount:_,currentPage:h,goToFirstPage:H}=P(),X=async()=>{G(),E(),k()},$=async()=>{f.value=!0;const t=await a.dataController({paginationStatus:{currentPage:h.value},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"trigger"});d.value=t.data,_.value=t.totalRows,f.value=!1};return e.watch(()=>a.columns,()=>E(),{deep:!0,immediate:!0}),F({selectRows:I,resetAllAndFetch:X,unselectAllRows:k,getDataRows:q,getSelectedRows:z,triggerDataController:$}),(t,i)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",re,[e.createElementVNode("div",ae,[e.createElementVNode("table",ne,[e.createElementVNode("thead",null,[e.createElementVNode("tr",se,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",{key:0,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":t.rowsSelectionMode==="multiple"}])},[t.rowsSelectionMode==="multiple"?(e.openBlock(),e.createBlock(b.default,{key:0,"model-value":e.unref(V),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:i[0]||(i[0]=()=>e.unref(V)?e.unref(k)():e.unref(C)(d.value))},null,8,["model-value","disabled"])):(e.openBlock(),e.createElementBlock("div",ce))],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columns,(o,l)=>(e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider",[o.alignRight?"text-right":"text-left",o.noSort?"cursor-default":"cursor-pointer"]]),title:o.noSort?"Colonna non ordinabile":e.unref(R).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:r=>!o.noSort&&e.unref(O)(l)},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),o.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",ie,[e.unref(R).arrows[l]?(e.openBlock(),e.createElementBlock("path",de)):(e.openBlock(),e.createElementBlock("path",pe))]))],10,ue))),128))]),e.unref(u).length>0&&!t.noFilters?(e.openBlock(),e.createElementBlock("tr",fe,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",ge)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(o,l)=>{var r,n,s,c,w;return e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((r=o.filter)==null?void 0:r.type)==="FREE_SEARCH"&&e.unref(u)[l].type==="FREE_SEARCH"?(e.openBlock(),e.createBlock(Z.default,{key:0,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":p=>e.unref(u)[l].textSearch=p,placeholder:((n=o.filter)==null?void 0:n.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((s=o.filter)==null?void 0:s.type)==="DATE_RANGE"&&e.unref(u)[l].type==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(Y.default,{modelValue:e.unref(u)[l].dateFrom,"onUpdate:modelValue":p=>e.unref(u)[l].dateFrom=p,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((c=o.filter)==null?void 0:c.type)==="MULTI_VALUE"&&e.unref(u)[l].type==="MULTI_VALUE"?(e.openBlock(),e.createBlock(W.default,{key:2,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":p=>e.unref(u)[l].textSearch=p,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((w=o.filter)==null?void 0:w.type)==="RESET_FILTERS_BUTTON"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(le.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(E)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(Q.default,{name:"fade"},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createElementBlock("tbody",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:a.columns.length+1},[e.createVNode(ee.default,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,we)])])):d.value.length>0?(e.openBlock(),e.createElementBlock("tbody",Se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,o=>(e.openBlock(),e.createElementBlock("tr",{key:o.id,class:e.normalizeClass(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":t.rowsSelectionMode&&e.unref(B).find(l=>l.id===o.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",ye,[e.createVNode(b.default,{"model-value":!!e.unref(B).find(l=>l.id===o.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(C)([o]):e.unref(L)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.cells,(l,r)=>(e.openBlock(),e.createElementBlock("td",{key:r,class:"max-w-sm px-2.5 py-2.5","data-cy":l.type==="default"&&l.mainText.trim().replaceAll(" ","").replaceAll(",","")},[e.createVNode(te.default,{cell:l},null,8,["cell"])],8,ke))),128))],2))),128))])):d.value.length===0?(e.openBlock(),e.createElementBlock("tbody",Ee,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:a.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,he)])])):e.createCommentVNode("",!0)]),_:1})])])]),e.createVNode(K.default,{ref_key:"pagination",ref:y,"total-rows-count":e.unref(_),"rows-per-page":a.rowsPerPage,"hide-footer":a.noFooter,"onUpdate:currentPage":e.unref(j)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});exports.default=Be;
|
|
2
2
|
//# sourceMappingURL=ElServerSideTable.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElServerSideTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n onMounted(async () => {\n if (props.columns.length > MAX_COLS) {\n sortStatus.value.arrows = new Array(MAX_COLS);\n } else {\n sortStatus.value.arrows = new Array(props.columns.length - 1);\n }\n\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n if (props.columns.length > MAX_COLS) {\n filterStatus.value = new Array(MAX_COLS);\n } else {\n filterStatus.value = new Array(props.columns.length - 1);\n }\n\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters.filter(f => f),\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","f","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElServerSideTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [...new Array(MAX_COLS)].map((v, i) => (i === props.sortByCol ? props.sortByColAsc : v)),\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters,\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","v","i","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as se,ref as v,onMounted as
|
|
1
|
+
import{defineComponent as se,ref as v,onMounted as N,watch as ne,openBlock as l,createElementBlock as s,createElementVNode as w,normalizeClass as T,createBlock as U,unref as r,createCommentVNode as y,Fragment as E,renderList as A,createTextVNode as ie,toDisplayString as ue,createVNode as _,withCtx as ce,computed as D,nextTick as de}from"vue";import pe from"./ElServerSideTablePagination.vue.esm2.js";import ge from"../_CustomTransition.vue.esm2.js";import $ from"../forms/ElInputCheckbox.vue.esm2.js";import fe from"../forms/ElInputSelect.vue.esm2.js";import me from"../forms/ElInputDate.vue.esm2.js";import we from"../forms/ElInputText.vue.esm2.js";import ve from"../ElSpinner.vue.esm2.js";import Se from"./ElTableCell.vue.esm2.js";import ye from"../ElButton.vue.esm2.js";import{watchDeep as _e,useDebounceFn as he}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const Re={class:"flex flex-col"},Ce={class:"overflow-x-auto"},ke={class:"inline-block min-w-full bg-white align-middle"},Ee={class:"min-w-full"},Ae={class:"bg-neutral-surface-raised font-semibold"},xe={key:1,class:"w-7"},be=["title","onClick"],Fe={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},Ve={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},Pe={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},Te={key:0},Ue={key:0,scope:"col"},De={key:1,class:"flex flex-col"},Me={key:3,class:"flex justify-end"},Be={key:"loading"},Le=["colspan"],Ie={key:"tableFull",class:"bg-white"},Ne={key:0,class:"flex h-20 items-center justify-center py-3"},$e=["data-cy"],ze={key:"tableEmpty"},Oe=["colspan"],et=se({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(z,{expose:O,emit:G}){const n=z,H=G,m=v(!0),x=10,g=v([]),b=v(null);N(async()=>{const e=await n.dataController({paginationStatus:{currentPage:0},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"firstLoad"});g.value=e.data,R.value=e.totalRows,m.value=!1});function j(){const e=v(0),p=D(()=>{var a;return((a=b.value)==null?void 0:a.currentPage)??0});return{newPageSelected:async a=>{m.value=!0,g.value=(await n.dataController({paginationStatus:{currentPage:a},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"paginate"})).data,m.value=!1},totalRowsCount:e,currentPage:p,goToFirstPage:()=>{var a;return(a=b.value)==null?void 0:a.goToPage(0,{doNotEmitEvent:!0})}}}function X(){const e=v({currentlySortColIndex:n.sortByCol>-1?n.sortByCol:-1,arrows:[...new Array(x)].map((a,i)=>i===n.sortByCol?n.sortByColAsc:a)}),p=()=>{e.value={currentlySortColIndex:-1,arrows:[]}},o=D(()=>({columnToSort:e.value.currentlySortColIndex,order:e.value.arrows[e.value.currentlySortColIndex]?"asc":"desc"}));return{sortStatus:e,toggleSortArrow:async a=>{e.value.currentlySortColIndex=a,e.value.arrows.splice(a,1,!e.value.arrows[a]),m.value=!0;try{const i=await n.dataController({paginationStatus:{currentPage:P.value},sortStatus:o.value,filterStatus:d.value,triggeredEvent:"sort"});g.value=i.data,R.value=i.totalRows}catch(i){console.error(i)}finally{m.value=!1}},currentSortStatus:o,resetSort:p}}function q(){const e=v([]),p=v(!1);N(()=>{o(),_e(e,async i=>{p.value?(t(i),p.value=!1):a(i)})});const o=()=>{var i;p.value=!0,e.value=new Array(x);for(let u=0;u<x;u++){const c=(i=n.columns[u])==null?void 0:i.filter;c&&(c.type==="FREE_SEARCH"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"FREE_SEARCH",columnTitle:n.columns[u].title}):c.type==="MULTI_VALUE"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:n.columns[u].title}):c.type==="DATE_RANGE"&&e.value.splice(u,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:n.columns[u].title}))}},t=async i=>{console.log("applyFilters"),m.value=!0,oe();const u=await n.dataController({paginationStatus:{currentPage:P.value},sortStatus:C.value,filterStatus:i,triggeredEvent:"filter"});g.value=u.data,R.value=u.totalRows,m.value=!1},a=he(t,500);return{filterStatus:e,resetFilters:o}}function J(){const e=v([]),p=()=>{H("rows-selected",e.value)},o=f=>{a(f.map(S=>S.id))},t=f=>{const S=e.value.findIndex(h=>h.id===f);e.value.splice(S,1),p()},a=async f=>{n.rowsSelectionMode==="single"&&(e.value=[],await de());const S=g.value.filter(h=>f.includes(h.id));n.rowsSelectionMode==="single"&&(S.length=Math.min(1,S.length));for(const h of S)e.value.some(re=>re.id===h.id)||e.value.push(h);p()},i=()=>{e.value=[],p()},u=()=>g.value,c=()=>e.value,k=D(()=>e.value.length>0&&e.value.length===g.value.length);return{selectedRows:e,rowsSelected:o,rowUnselected:t,selectRows:a,unselectAllRows:i,getDataRows:u,getSelectedRows:c,allRowsSelected:k}}const{selectedRows:M,rowsSelected:B,rowUnselected:K,selectRows:Q,unselectAllRows:F,getDataRows:W,getSelectedRows:Y,allRowsSelected:L}=J(),{filterStatus:d,resetFilters:V}=q(),{sortStatus:I,toggleSortArrow:Z,currentSortStatus:C,resetSort:ee}=X(),{newPageSelected:te,totalRowsCount:R,currentPage:P,goToFirstPage:oe}=j(),le=async()=>{ee(),V(),F()},ae=async()=>{m.value=!0;const e=await n.dataController({paginationStatus:{currentPage:P.value},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"trigger"});g.value=e.data,R.value=e.totalRows,m.value=!1};return ne(()=>n.columns,()=>V(),{deep:!0,immediate:!0}),O({selectRows:Q,resetAllAndFetch:le,unselectAllRows:F,getDataRows:W,getSelectedRows:Y,triggerDataController:ae}),(e,p)=>(l(),s("div",Re,[w("div",Ce,[w("div",ke,[w("table",Ee,[w("thead",null,[w("tr",Ae,[e.rowsSelectionMode?(l(),s("th",{key:0,scope:"col",class:T(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":e.rowsSelectionMode==="multiple"}])},[e.rowsSelectionMode==="multiple"?(l(),U($,{key:0,"model-value":r(L),disabled:e.rowsSelectionDisabled,size:"xxs",onClick:p[0]||(p[0]=()=>r(L)?r(F)():r(B)(g.value))},null,8,["model-value","disabled"])):(l(),s("div",xe))],2)):y("",!0),(l(!0),s(E,null,A(n.columns,(o,t)=>(l(),s("th",{key:t,scope:"col",class:T(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider",[o.alignRight?"text-right":"text-left",o.noSort?"cursor-default":"cursor-pointer"]]),title:o.noSort?"Colonna non ordinabile":r(I).arrows[t]?"Ordine crescente":"Ordine decrescente",onClick:a=>!o.noSort&&r(Z)(t)},[ie(ue(o.title)+" ",1),o.noSort?y("",!0):(l(),s("svg",Fe,[r(I).arrows[t]?(l(),s("path",Ve)):(l(),s("path",Pe))]))],10,be))),128))]),r(d).length>0&&!e.noFilters?(l(),s("tr",Te,[e.rowsSelectionMode?(l(),s("th",Ue)):y("",!0),(l(!0),s(E,null,A(e.columns,(o,t)=>{var a,i,u,c,k;return l(),s("th",{key:t,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((a=o.filter)==null?void 0:a.type)==="FREE_SEARCH"&&r(d)[t].type==="FREE_SEARCH"?(l(),U(we,{key:0,modelValue:r(d)[t].textSearch,"onUpdate:modelValue":f=>r(d)[t].textSearch=f,placeholder:((i=o.filter)==null?void 0:i.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((u=o.filter)==null?void 0:u.type)==="DATE_RANGE"&&r(d)[t].type==="DATE_RANGE"?(l(),s("div",De,[_(me,{modelValue:r(d)[t].dateFrom,"onUpdate:modelValue":f=>r(d)[t].dateFrom=f,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((c=o.filter)==null?void 0:c.type)==="MULTI_VALUE"&&r(d)[t].type==="MULTI_VALUE"?(l(),U(fe,{key:2,modelValue:r(d)[t].textSearch,"onUpdate:modelValue":f=>r(d)[t].textSearch=f,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((k=o.filter)==null?void 0:k.type)==="RESET_FILTERS_BUTTON"?(l(),s("div",Me,[_(ye,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:r(V)},null,8,["onClick"])])):y("",!0)])}),128))])):y("",!0)]),_(ge,{name:"fade"},{default:ce(()=>[m.value?(l(),s("tbody",Be,[w("tr",null,[w("td",{colspan:n.columns.length+1},[_(ve,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,Le)])])):g.value.length>0?(l(),s("tbody",Ie,[(l(!0),s(E,null,A(g.value,o=>(l(),s("tr",{key:o.id,class:T(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":e.rowsSelectionMode&&r(M).find(t=>t.id===o.id)}]),"data-cy":"table-row"},[e.rowsSelectionMode?(l(),s("td",Ne,[_($,{"model-value":!!r(M).find(t=>t.id===o.id),disabled:e.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":t=>t?r(B)([o]):r(K)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):y("",!0),(l(!0),s(E,null,A(o.cells,(t,a)=>(l(),s("td",{key:a,class:"max-w-sm px-2.5 py-2.5","data-cy":t.type==="default"&&t.mainText.trim().replaceAll(" ","").replaceAll(",","")},[_(Se,{cell:t},null,8,["cell"])],8,$e))),128))],2))),128))])):g.value.length===0?(l(),s("tbody",ze,[w("tr",null,[w("td",{colspan:n.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,Oe)])])):y("",!0)]),_:1})])])]),_(pe,{ref_key:"pagination",ref:b,"total-rows-count":r(R),"rows-per-page":n.rowsPerPage,"hide-footer":n.noFooter,"onUpdate:currentPage":r(te)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});export{et as default};
|
|
2
2
|
//# sourceMappingURL=ElServerSideTable.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElServerSideTable.vue.esm2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n onMounted(async () => {\n if (props.columns.length > MAX_COLS) {\n sortStatus.value.arrows = new Array(MAX_COLS);\n } else {\n sortStatus.value.arrows = new Array(props.columns.length - 1);\n }\n\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n if (props.columns.length > MAX_COLS) {\n filterStatus.value = new Array(MAX_COLS);\n } else {\n filterStatus.value = new Array(props.columns.length - 1);\n }\n\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters.filter(f => f),\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value.filter(f => f),\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","f","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"ioEAgGA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAUC,EAAI,EAAI,EAElBC,EAAW,GAEXC,EAAsBF,EAAe,CAAA,CAAE,EAEvCG,EAAaH,EAA6D,IAAI,EAEpFI,EAAU,SAAY,CACd,MAAAC,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAa,CACf,EACA,WAAYW,EAAkB,MAC9B,aAAcC,EAAa,MAAM,UAAYC,CAAC,EAC9C,eAAgB,WAAA,CACjB,EACDN,EAAoB,MAAQG,EAAQ,KACpCI,EAAe,MAAQJ,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,CACjB,EAED,SAASW,GAAgB,CACjBD,MAAAA,EAAiBT,EAAI,CAAC,EACtBW,EAAcC,EAAS,IAAM,OAAA,QAAAC,EAAAV,EAAW,QAAX,YAAAU,EAAkB,cAAe,EAAC,EAmB9D,MAAA,CACL,gBAhBsB,MAAOC,GAAoB,CACjDf,EAAQ,MAAQ,GACIG,EAAA,OAClB,MAAMP,EAAM,eAAe,CACzB,iBAAkB,CAChB,YAAamB,CACf,EACA,WAAYR,EAAkB,MAC9B,aAAcC,EAAa,MAAM,UAAYC,CAAC,EAC9C,eAAgB,UACjB,CAAA,GACD,KACFT,EAAQ,MAAQ,EAAA,EAKhB,eAAAU,EACA,YAAAE,EACA,cArBoB,WAAM,OAAAE,EAAAV,EAAW,QAAX,YAAAU,EAAkB,SAAS,EAAG,CAAE,eAAgB,EAAA,GAqB1E,CAEJ,CAEA,SAASE,GAAa,CACpB,MAAMC,EAAahB,EAGhB,CACD,sBAAuBL,EAAM,UAAY,GAAKA,EAAM,UAAY,GAChE,OAAQ,CAAC,CAAA,CACV,EAEKsB,EAAY,IAAM,CACtBD,EAAW,MAAQ,CACjB,sBAAuB,GACvB,OAAQ,CAAC,CAAA,CACX,EAEIV,EAAoBM,EAAqC,KACtD,CACL,aAAcI,EAAW,MAAM,sBAC/B,MAAOA,EAAW,MAAM,OAAOA,EAAW,MAAM,qBAAqB,EAAI,MAAQ,MAAA,EAEpF,EAED,OAAAZ,EAAU,SAAY,CAChBT,EAAM,QAAQ,OAASM,EACzBe,EAAW,MAAM,OAAS,IAAI,MAAMf,CAAQ,EAE5Ce,EAAW,MAAM,OAAS,IAAI,MAAMrB,EAAM,QAAQ,OAAS,CAAC,EAG1DA,EAAM,UAAY,KACpBqB,EAAW,MAAM,OAAOrB,EAAM,SAAS,EAAIA,EAAM,aACnD,CACD,EAyBM,CACL,WAAAqB,EACA,gBAzBsB,MAAOE,GAAqB,CAClDF,EAAW,MAAM,sBAAwBE,EACzCF,EAAW,MAAM,OAAO,OAAOE,EAAU,EAAG,CAACF,EAAW,MAAM,OAAOE,CAAQ,CAAC,EAC9EnB,EAAQ,MAAQ,GACZ,GAAA,CACI,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAagB,EAAY,KAC3B,EACA,WAAYL,EAAkB,MAC9B,aAAcC,EAAa,MAAM,UAAYC,CAAC,EAC9C,eAAgB,MAAA,CACjB,EACDN,EAAoB,MAAQG,EAAQ,KACpCI,EAAe,MAAQJ,EAAQ,gBACxBc,EAAO,CAEd,QAAQ,MAAMA,CAAK,CAAA,QACnB,CACApB,EAAQ,MAAQ,EAClB,CAAA,EAMA,kBAAAO,EACA,UAAAW,CAAA,CAEJ,CAEA,SAASG,GAAa,CACdb,MAAAA,EAAeP,EAAoB,CAAA,CAAE,EACrCqB,EAAqBrB,EAAI,EAAK,EAEpCI,EAAU,IAAM,CACdkB,IACUf,GAAAA,EAAc,MAAMgB,GAAW,CACnCF,EAAmB,OACrBG,EAAaD,CAAO,EACpBF,EAAmB,MAAQ,IAE3BI,EAAsBF,CAAO,CAC/B,CACD,CAAA,CACF,EAED,MAAMD,EAAe,IAAM,OACzBD,EAAmB,MAAQ,GAEvB1B,EAAM,QAAQ,OAASM,EACzBM,EAAa,MAAQ,IAAI,MAAMN,CAAQ,EAEvCM,EAAa,MAAQ,IAAI,MAAMZ,EAAM,QAAQ,OAAS,CAAC,EAGzD,QAAS+B,EAAI,EAAGA,EAAIzB,EAAUyB,IAAK,CACjC,MAAMC,GAASd,EAAAlB,EAAM,QAAQ+B,CAAC,IAAf,YAAAb,EAAkB,OAC7Bc,IACEA,EAAO,OAAS,cAClBpB,EAAa,MAAM,OAAOmB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAahC,EAAM,QAAQ+B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBpB,EAAa,MAAM,OAAOmB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAahC,EAAM,QAAQ+B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBpB,EAAa,MAAM,OAAOmB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,SAAUA,EAAO,cAAgB,EACjC,KAAM,aACN,YAAahC,EAAM,QAAQ+B,CAAC,EAAE,KAAA,CAC/B,EAGP,CAAA,EAGIF,EAAe,MAAOD,GAA4B,CACtD,QAAQ,IAAI,cAAc,EAC1BxB,EAAQ,MAAQ,GACF6B,KACR,MAAAvB,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAagB,EAAY,KAC3B,EACA,WAAYL,EAAkB,MAC9B,aAAciB,EAAQ,OAAOf,GAAKA,CAAC,EACnC,eAAgB,QAAA,CACjB,EACDN,EAAoB,MAAQG,EAAQ,KACpCI,EAAe,MAAQJ,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGZ0B,EAAwBI,GAAcL,EAAc,GAAG,EAEtD,MAAA,CACL,aAAAjB,EACA,aAAAe,CAAA,CAEJ,CAEA,SAASQ,GAAmB,CACpBC,MAAAA,EAAe/B,EAAsC,CAAA,CAAE,EAEvDgC,EAAmB,IAAM,CACxBnC,EAAA,gBAAiBkC,EAAa,KAAK,CAAA,EAGpCE,EAAgBC,GAAoB,CACxCC,EAAWD,EAAK,IAASE,GAAAA,EAAE,EAAE,CAAC,CAAA,EAG1BC,EAAiBC,GAAkB,CACvC,MAAMC,EAAQR,EAAa,MAAM,UAAeK,GAAAA,EAAE,KAAOE,CAAK,EAC9DP,EAAa,MAAM,OAAOQ,EAAO,CAAC,EACjBP,GAAA,EAIbG,EAAa,MAAOK,GAAsB,CAC1C7C,EAAM,oBAAsB,WAC9BoC,EAAa,MAAQ,GACrB,MAAMU,GAAS,GAEX,MAAAC,EAAexC,EAAoB,MAAM,UAAYsC,EAAQ,SAASJ,EAAE,EAAE,CAAC,EAC7EzC,EAAM,oBAAsB,WAC9B+C,EAAa,OAAS,KAAK,IAAI,EAAGA,EAAa,MAAM,GAGvD,UAAWC,KAAOD,EACXX,EAAa,MAAM,SAAUK,GAAE,KAAOO,EAAI,EAAE,GAC/CZ,EAAa,MAAM,KAAKY,CAAG,EAIdX,GAAA,EAGbY,EAAkB,IAAM,CAC5Bb,EAAa,MAAQ,GACJC,GAAA,EAGba,EAAc,IAAiB3C,EAAoB,MACnD4C,EAAkB,IAAiBf,EAAa,MAEhDgB,EAAkBnC,EAAS,IACxBmB,EAAa,MAAM,OAAS,GAAKA,EAAa,MAAM,SAAW7B,EAAoB,MAAM,MACjG,EAEM,MAAA,CACL,aAAA6B,EACA,aAAAE,EACA,cAAAI,EACA,WAAAF,EACA,gBAAAS,EACA,YAAAC,EACA,gBAAAC,EACA,gBAAAC,CAAA,CAEJ,CAEM,KAAA,CAAE,aAAAhB,EAAc,aAAAE,EAAc,cAAAI,EAAe,WAAAF,EAAY,gBAAAS,EAAiB,YAAAC,EAAa,gBAAAC,EAAiB,gBAAAC,CAAgB,EAC5HjB,EAAiB,EACb,CAAE,aAAAvB,EAAc,aAAAe,CAAa,EAAIF,EAAW,EAC5C,CAAE,WAAAJ,EAAY,gBAAAgC,EAAiB,kBAAA1C,EAAmB,UAAAW,EAAA,EAAcF,IAChE,CAAE,gBAAAkC,GAAiB,eAAAxC,EAAgB,YAAAE,EAAa,cAAAiB,EAAA,EAAkBlB,IAElEwC,GAAmB,SAAY,CAEzBjC,KACGK,IACGsB,GAAA,EAGZO,GAAwB,SAAY,CACxCpD,EAAQ,MAAQ,GACV,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAagB,EAAY,KAC3B,EACA,WAAYL,EAAkB,MAC9B,aAAcC,EAAa,MAAM,UAAYC,CAAC,EAC9C,eAAgB,SAAA,CACjB,EACDN,EAAoB,MAAQG,EAAQ,KACpCI,EAAe,MAAQJ,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGlB,OAAAqD,GACE,IAAMzD,EAAM,QACZ,IAAM2B,EAAa,EACnB,CAAE,KAAM,GAAM,UAAW,EAAK,CAAA,EAGnB+B,EAAA,CACX,WAAAlB,EACA,iBAAAe,GACA,gBAAAN,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAK,EAAA,CACD"}
|
|
1
|
+
{"version":3,"file":"ElServerSideTable.vue.esm2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [...new Array(MAX_COLS)].map((v, i) => (i === props.sortByCol ? props.sortByColAsc : v)),\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters,\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","v","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
|