@davincihealthcare/elty-design-system-vue 1.73.3 → 1.73.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/ElModal.vue.cjs2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("./node_modules/@vueuse/core/index.cjs.js"),w=require("./node_modules/@vueuse/components/index.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("./node_modules/@vueuse/core/index.cjs.js"),w=require("./node_modules/@vueuse/components/index.cjs.js"),d=require("./ElButton.vue.cjs2.js"),z=require("./ElIcon.vue.cjs2.js"),C=require("./ElIconButton.vue.cjs2.js"),h=require("./_CustomTransition.vue.cjs2.js"),E={key:0,class:"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0"},N={class:"fixed inset-0 transition-opacity"},S={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},M={class:"text-xl font-semibold truncate flex-1"},V={key:0,class:"text-base font-normal text-wrap break-words"},n=["xs","m","l","xl"],v={xs:360,m:576,l:768,xl:1280},A=["primary","secondary","error"],O=e.defineComponent({__name:"ElModal",props:e.mergeModels({size:{default:"m"},color:{default:"primary"},headerIcon:{},title:{default:void 0},description:{default:void 0},primaryAction:{},secondaryAction:{default:void 0},tertiaryAction:{default:void 0},isNestedModal:{type:Boolean}},{isOpen:{default:!1,required:!0,type:Boolean},isOpenModifiers:{}}),emits:e.mergeModels(["closed"],["update:isOpen"]),setup(u,{emit:y}){const i=e.useModel(u,"isOpen"),x=y,s=u,c=()=>i.value=!1,p=e.ref(null),l=e.ref(null),t=e.computed(()=>s.color==="error"),{arrivedState:m}=a.useScroll(l),{height:k}=a.useElementSize(l),{width:_}=a.useWindowSize(),f=e.computed(()=>l.value&&l.value.scrollHeight>k.value),b=a.useScrollLock(document.body),r=e.computed(()=>{for(let o=n.indexOf(s.size);o>=0;o--)if(_.value>=v[n[o]])return n[o];return s.size}),g=o=>{o.target===p.value&&c()};return e.watch(()=>i.value,o=>{(!s.isNestedModal||o)&&(b.value=o),o||x("closed")}),a.onKeyStroke("Escape",o=>{o.preventDefault(),c()}),(o,B)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(h.default,{name:"fade"},{default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",N,[e.createElementVNode("div",{ref_key:"backdrop",ref:p,class:"absolute inset-0 bg-gray-500 opacity-75"},null,512)]),e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker",{"w-[360px]":r.value==="xs","w-[576px]":r.value==="m","w-[768px]":r.value==="l","w-[1280px]":r.value==="xl"}])},[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center justify-between gap-2",{"px-4":r.value==="xs","px-8":r.value!=="xs"}])},[e.createElementVNode("div",S,[e.createElementVNode("div",{class:e.normalizeClass([{"text-error bg-error-light-active":t.value,"text-primary bg-neutral-surface-raised":o.color==="primary","text-secondary bg-neutral-surface-raised":o.color==="secondary"},"!h-8 !w-8 rounded-full"])},[e.createVNode(z.default,e.mergeProps(t.value?{name:"ExclamationCircleIcon"}:o.headerIcon,{class:"p-1"}),null,16)],2),e.createElementVNode("div",M,e.toDisplayString(o.title),1)]),e.createVNode(C.default,{icon:{name:"XMarkIcon"},error:t.value,onClick:c},null,8,["error"])],2),e.createElementVNode("div",{ref_key:"modalBody",ref:l,class:e.normalizeClass(["flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden",{"px-4":r.value==="xs","px-8":r.value!=="xs","border-t":f.value&&!e.unref(m).top,"border-b":f.value&&!e.unref(m).bottom}])},[o.description?(e.openBlock(),e.createElementBlock("p",V,e.toDisplayString(o.description),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default")],2),o.primaryAction||o.secondaryAction||o.tertiaryAction?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-4",{"flex-col-reverse px-4":r.value==="xs","flex-row px-8":r.value!=="xs"}])},[o.tertiaryAction?(e.openBlock(),e.createBlock(d.default,e.mergeProps({key:0},o.tertiaryAction,{variant:"tertiary",class:{"w-full":r.value==="xs"},size:r.value==="xs"?"l":"base",error:t.value}),null,16,["class","size","error"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-4",{"flex-col-reverse w-full":r.value==="xs","flex-row ml-auto":r.value!=="xs"}])},[o.secondaryAction?(e.openBlock(),e.createBlock(d.default,e.mergeProps({key:0},o.secondaryAction,{variant:"secondary",size:r.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):e.createCommentVNode("",!0),o.primaryAction?(e.openBlock(),e.createBlock(d.default,e.mergeProps({key:1},o.primaryAction,{variant:"primary",size:r.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):e.createCommentVNode("",!0)],2)],2)):e.createCommentVNode("",!0)],2)),[[e.unref(w.VOnClickOutside),g]])])):e.createCommentVNode("",!0)]),_:3})]))}});exports.default=O;exports.elModalColors=A;exports.elModalSizes=n;exports.elModalSizesBreakpoints=v;
|
|
2
2
|
//# sourceMappingURL=ElModal.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElModal.vue.cjs2.js","sources":["../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","e","watch","value","onKeyStroke"],"mappings":"kuBACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,EAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,EAAgB,CAAC,UAAW,YAAa,OAAO,
|
|
1
|
+
{"version":3,"file":"ElModal.vue.cjs2.js","sources":["../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n isNestedModal?: boolean;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n if (!props.isNestedModal || value) isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","e","watch","value","onKeyStroke"],"mappings":"kuBACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,EAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,EAAgB,CAAC,UAAW,YAAa,OAAO,maA0BvD,MAAAC,EAASC,EAAAA,SAAYC,EAAA,QAI1B,EAEKC,EAAOC,EAEPC,EAAQH,EASRI,EAAa,IAAON,EAAO,MAAQ,GAEnCO,EAAWC,MAAwB,IAAI,EACvCC,EAAYD,MAAwB,IAAI,EAExCE,EAAiBC,EAAAA,SAAS,IAAMN,EAAM,QAAU,OAAO,EAEvD,CAAE,aAAAO,CAAA,EAAiBC,EAAA,UAAUJ,CAAS,EACtC,CAAE,OAAAK,CAAA,EAAWC,EAAA,eAAeN,CAAS,EACrC,CAAE,MAAOO,CAAY,EAAIC,EAAc,cAAA,EAEvCC,EAAoBP,EAAAA,SAAS,IAAMF,EAAU,OAASA,EAAU,MAAM,aAAeK,EAAO,KAAK,EACjGK,EAAqBC,EAAAA,cAAc,SAAS,IAAI,EAEhDC,EAAiBV,EAAAA,SAAS,IAAM,CAC3B,QAAAW,EAAIzB,EAAa,QAAQQ,EAAM,IAAI,EAAGiB,GAAK,EAAGA,IACrD,GAAIN,EAAY,OAASlB,EAAwBD,EAAayB,CAAC,CAAC,EAAG,OAAOzB,EAAayB,CAAC,EAG1F,OAAOjB,EAAM,IAAA,CACd,EAEKkB,EAAkBC,GAA+B,CAE3BA,EAAE,SAAWjB,EAAS,OAEdD,GAAA,EAGpCmB,OAAAA,EAAA,MACE,IAAMzB,EAAO,MACJ0B,GAAA,EACH,CAACrB,EAAM,eAAiBqB,KAAOP,EAAmB,MAAQO,GACzDA,GAAOvB,EAAK,QAAQ,CAC3B,CAAA,EAGFwB,cAAY,SAAeH,GAAA,CACzBA,EAAE,eAAe,EACNlB,GAAA,CACZ"}
|
package/dist/ElModal.vue.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export interface ElModalProps {
|
|
|
10
10
|
primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;
|
|
11
11
|
secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;
|
|
12
12
|
tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;
|
|
13
|
+
isNestedModal?: boolean;
|
|
13
14
|
}
|
|
14
15
|
export declare const elModalSizes: readonly ["xs", "m", "l", "xl"];
|
|
15
16
|
export type ElModalSize = (typeof elModalSizes)[number];
|
|
@@ -296,6 +297,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
296
297
|
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "dark" | "loading" | "variant" | "loadOnClick">, "size" | "error" | "variant">>;
|
|
297
298
|
default: undefined;
|
|
298
299
|
};
|
|
300
|
+
isNestedModal: {
|
|
301
|
+
type: import('vue').PropType<boolean>;
|
|
302
|
+
};
|
|
299
303
|
}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
300
304
|
closed: () => void;
|
|
301
305
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
@@ -573,6 +577,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
573
577
|
}>>, "type" | "size" | "label" | "onClick" | "disabled" | "icon" | "error" | "dark" | "loading" | "variant" | "loadOnClick">, "size" | "error" | "variant">>;
|
|
574
578
|
default: undefined;
|
|
575
579
|
};
|
|
580
|
+
isNestedModal: {
|
|
581
|
+
type: import('vue').PropType<boolean>;
|
|
582
|
+
};
|
|
576
583
|
}>> & {
|
|
577
584
|
onClosed?: (() => any) | undefined;
|
|
578
585
|
}, {
|
package/dist/ElModal.vue.esm2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as N,mergeModels as z,useModel as $,ref as S,computed as m,watch as V,openBlock as o,createBlock as c,Teleport as j,createVNode as v,withCtx as D,createElementBlock as d,createElementVNode as l,withDirectives as L,normalizeClass as s,mergeProps as u,toDisplayString as O,unref as y,createCommentVNode as a,renderSlot as W}from"vue";import{useScroll as q,useElementSize as H,useWindowSize as K,useScrollLock as P,onKeyStroke as T}from"./node_modules/@vueuse/core/index.esm.js";import{VOnClickOutside as X}from"./node_modules/@vueuse/components/index.esm.js";import x from"./ElButton.vue.esm2.js";import F from"./ElIcon.vue.esm2.js";import G from"./ElIconButton.vue.esm2.js";import J from"./_CustomTransition.vue.esm2.js";const Q={key:0,class:"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0"},R={class:"fixed inset-0 transition-opacity"},U={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},Y={class:"text-xl font-semibold truncate flex-1"},Z={key:0,class:"text-base font-normal text-wrap break-words"},b=["xs","m","l","xl"],ee={xs:360,m:576,l:768,xl:1280},ne=["primary","secondary","error"],ce=N({__name:"ElModal",props:z({size:{default:"m"},color:{default:"primary"},headerIcon:{},title:{default:void 0},description:{default:void 0},primaryAction:{},secondaryAction:{default:void 0},tertiaryAction:{default:void 0},isNestedModal:{type:Boolean}},{isOpen:{default:!1,required:!0,type:Boolean},isOpenModifiers:{}}),emits:z(["closed"],["update:isOpen"]),setup(k,{emit:A}){const f=$(k,"isOpen"),C=A,n=k,p=()=>f.value=!1,w=S(null),i=S(null),t=m(()=>n.color==="error"),{arrivedState:h}=q(i),{height:M}=H(i),{width:B}=K(),g=m(()=>i.value&&i.value.scrollHeight>M.value),_=P(document.body),r=m(()=>{for(let e=b.indexOf(n.size);e>=0;e--)if(B.value>=ee[b[e]])return b[e];return n.size}),E=e=>{e.target===w.value&&p()};return V(()=>f.value,e=>{(!n.isNestedModal||e)&&(_.value=e),e||C("closed")}),T("Escape",e=>{e.preventDefault(),p()}),(e,I)=>(o(),c(j,{to:"body"},[v(J,{name:"fade"},{default:D(()=>[f.value?(o(),d("div",Q,[l("div",R,[l("div",{ref_key:"backdrop",ref:w,class:"absolute inset-0 bg-gray-500 opacity-75"},null,512)]),L((o(),d("div",{class:s(["flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker",{"w-[360px]":r.value==="xs","w-[576px]":r.value==="m","w-[768px]":r.value==="l","w-[1280px]":r.value==="xl"}])},[l("div",{class:s(["flex items-center justify-between gap-2",{"px-4":r.value==="xs","px-8":r.value!=="xs"}])},[l("div",U,[l("div",{class:s([{"text-error bg-error-light-active":t.value,"text-primary bg-neutral-surface-raised":e.color==="primary","text-secondary bg-neutral-surface-raised":e.color==="secondary"},"!h-8 !w-8 rounded-full"])},[v(F,u(t.value?{name:"ExclamationCircleIcon"}:e.headerIcon,{class:"p-1"}),null,16)],2),l("div",Y,O(e.title),1)]),v(G,{icon:{name:"XMarkIcon"},error:t.value,onClick:p},null,8,["error"])],2),l("div",{ref_key:"modalBody",ref:i,class:s(["flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden",{"px-4":r.value==="xs","px-8":r.value!=="xs","border-t":g.value&&!y(h).top,"border-b":g.value&&!y(h).bottom}])},[e.description?(o(),d("p",Z,O(e.description),1)):a("",!0),W(e.$slots,"default")],2),e.primaryAction||e.secondaryAction||e.tertiaryAction?(o(),d("div",{key:0,class:s(["flex items-center gap-4",{"flex-col-reverse px-4":r.value==="xs","flex-row px-8":r.value!=="xs"}])},[e.tertiaryAction?(o(),c(x,u({key:0},e.tertiaryAction,{variant:"tertiary",class:{"w-full":r.value==="xs"},size:r.value==="xs"?"l":"base",error:t.value}),null,16,["class","size","error"])):a("",!0),l("div",{class:s(["flex gap-4",{"flex-col-reverse w-full":r.value==="xs","flex-row ml-auto":r.value!=="xs"}])},[e.secondaryAction?(o(),c(x,u({key:0},e.secondaryAction,{variant:"secondary",size:r.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):a("",!0),e.primaryAction?(o(),c(x,u({key:1},e.primaryAction,{variant:"primary",size:r.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):a("",!0)],2)],2)):a("",!0)],2)),[[y(X),E]])])):a("",!0)]),_:3})]))}});export{ce as default,ne as elModalColors,b as elModalSizes,ee as elModalSizesBreakpoints};
|
|
2
2
|
//# sourceMappingURL=ElModal.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElModal.vue.esm2.js","sources":["../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","watch","value","onKeyStroke"],"mappings":"+jCACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,GAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,GAAgB,CAAC,UAAW,YAAa,OAAO
|
|
1
|
+
{"version":3,"file":"ElModal.vue.esm2.js","sources":["../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n size?: ElModalSize;\n color?: ElModalColor;\n headerIcon: InstanceType<typeof ElIcon>['$props'];\n title: string;\n description?: string;\n primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>;\n isNestedModal?: boolean;\n}\n\nconst isOpen = defineModel('isOpen', {\n default: false,\n required: true,\n type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n size: 'm',\n color: 'primary',\n title: undefined,\n description: undefined,\n secondaryAction: undefined,\n tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n }\n\n return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n const isClickOnBackdrop = e.target === backdrop.value;\n\n if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n () => isOpen.value,\n value => {\n if (!props.isNestedModal || value) isBodyScrollLocked.value = value;\n if (!value) emit('closed');\n },\n);\n\nonKeyStroke('Escape', e => {\n e.preventDefault();\n closeModal();\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <CustomTransition name=\"fade\">\n <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n <!-- Backdrop -->\n <div class=\"fixed inset-0 transition-opacity\">\n <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n </div>\n\n <!-- Modal -->\n <div\n v-on-click-outside=\"onClickOutside\"\n class=\"flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker\"\n :class=\"{\n 'w-[360px]': responsiveSize === 'xs',\n 'w-[576px]': responsiveSize === 'm',\n 'w-[768px]': responsiveSize === 'l',\n 'w-[1280px]': responsiveSize === 'xl',\n }\"\n >\n <!-- Header -->\n <div\n class=\"flex items-center justify-between gap-2\"\n :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n >\n <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n <div\n :class=\"{\n 'text-error bg-error-light-active': isInErrorState,\n 'text-primary bg-neutral-surface-raised': color === 'primary',\n 'text-secondary bg-neutral-surface-raised': color === 'secondary',\n }\"\n class=\"!h-8 !w-8 rounded-full\"\n >\n <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n </div>\n\n <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n </div>\n\n <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n </div>\n\n <!-- Body -->\n <div\n ref=\"modalBody\"\n class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n :class=\"{\n 'px-4': responsiveSize === 'xs',\n 'px-8': responsiveSize !== 'xs',\n 'border-t': isModalScrollable && !arrivedState.top,\n 'border-b': isModalScrollable && !arrivedState.bottom,\n }\"\n >\n <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n <slot name=\"default\"></slot>\n </div>\n\n <!-- Footer -->\n <div\n v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n class=\"flex items-center gap-4\"\n :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"tertiaryAction\"\n v-bind=\"tertiaryAction\"\n variant=\"tertiary\"\n :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <div\n class=\"flex gap-4\"\n :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n >\n <ElButton\n v-if=\"secondaryAction\"\n v-bind=\"secondaryAction\"\n variant=\"secondary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n\n <ElButton\n v-if=\"primaryAction\"\n v-bind=\"primaryAction\"\n variant=\"primary\"\n :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n :error=\"isInErrorState\"\n />\n </div>\n </div>\n </div>\n </div>\n </CustomTransition>\n </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","watch","value","onKeyStroke"],"mappings":"+jCACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,GAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,GAAgB,CAAC,UAAW,YAAa,OAAO,4XA0BvD,MAAAC,EAASC,EAAYC,EAAA,QAI1B,EAEKC,EAAOC,EAEPC,EAAQH,EASRI,EAAa,IAAON,EAAO,MAAQ,GAEnCO,EAAWC,EAAwB,IAAI,EACvCC,EAAYD,EAAwB,IAAI,EAExCE,EAAiBC,EAAS,IAAMN,EAAM,QAAU,OAAO,EAEvD,CAAE,aAAAO,CAAA,EAAiBC,EAAUJ,CAAS,EACtC,CAAE,OAAAK,CAAA,EAAWC,EAAeN,CAAS,EACrC,CAAE,MAAOO,CAAY,EAAIC,EAAc,EAEvCC,EAAoBP,EAAS,IAAMF,EAAU,OAASA,EAAU,MAAM,aAAeK,EAAO,KAAK,EACjGK,EAAqBC,EAAc,SAAS,IAAI,EAEhDC,EAAiBV,EAAS,IAAM,CAC3B,QAAAW,EAAIzB,EAAa,QAAQQ,EAAM,IAAI,EAAGiB,GAAK,EAAGA,IACrD,GAAIN,EAAY,OAASlB,GAAwBD,EAAayB,CAAC,CAAC,EAAG,OAAOzB,EAAayB,CAAC,EAG1F,OAAOjB,EAAM,IAAA,CACd,EAEKkB,EAAkB,GAA+B,CAE3B,EAAE,SAAWhB,EAAS,OAEdD,GAAA,EAGpC,OAAAkB,EACE,IAAMxB,EAAO,MACJyB,GAAA,EACH,CAACpB,EAAM,eAAiBoB,KAAON,EAAmB,MAAQM,GACzDA,GAAOtB,EAAK,QAAQ,CAC3B,CAAA,EAGFuB,EAAY,SAAe,GAAA,CACzB,EAAE,eAAe,EACNpB,GAAA,CACZ"}
|