@codeandfunction/callaloo 5.13.0 → 5.14.0

package/dist/chunks/CLModal.vue_vue_type_style_index_0_lang-CMwoV-Lu.js

@@ -0,0 +1,2 @@
+import '../components/Modals/CLModal/CLModal.css';
+import{defineComponent as e,useTemplateRef as o,useSlots as t,ref as l,computed as a,watch as n,onMounted as s,onBeforeUnmount as d,createBlock as r,openBlock as i,Teleport as c,createElementBlock as _,createCommentVNode as u,normalizeStyle as m,normalizeClass as v,unref as f,createElementVNode as p,renderSlot as b,withCtx as y,createTextVNode as h,toDisplayString as $}from"vue";import{_ as w}from"./CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as x}from"./CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{b as I,g as z,d as g,c as L,h as k,e as B,f as C,l as T}from"./index-CGlfDAYR.js";import{useTheme as j}from"../composables/useTheme.js";import{useEsc as E}from"../composables/useEsc.js";import{b as O,i as R}from"./helper-BlxFN3eF.js";const S=e=>{const{colors:o,darkMode:t}=e??j(),l=t.value?I.Dark:I.Light,a=z({color:g.Neutral,colors:o.value,mode:l,variant:L.Solid}),n=t.value?"black":"white";return{"--clll-modal-overlay-bg":a?.bg??"transparent","--clll-modal-content-bg":n,"--clll-modal-theme-radius":"var(--clll-default-radius)"}},M=["id","data-testid"],D=["aria-labelledby"],F=/* @__PURE__ */e({name:"CLModal",__name:"CLModal",props:{borderRadius:{default:void 0},close:{type:Boolean,default:!0},closeBorderRadius:{default:k.Full},dismissible:{type:Boolean,default:!0},fullscreen:{type:Boolean,default:!1},isOpen:{type:Boolean,default:!1},maxWidth:{default:"640px"},modalId:{},onClose:{type:Function,default:void 0},overlay:{type:Boolean,default:!0},teleport:{type:Boolean,default:!0},teleportTo:{default:"body"},testId:{default:"clll-modal"},title:{default:void 0},zIndex:{default:100}},emits:["modal-open","modal-close"],setup(e,{emit:I}){const z=I,k=j(),F=o("modal-window"),H=t(),N=e,W="clll-modal",q="clll-prevent-scroll",A=l(),G=()=>{R&&window?.document.body.classList.add(q)},J=()=>{R&&window?.document.body.classList.remove(q)},K=a(()=>[W]),P=a(()=>[`${W}__window`,N.fullscreen?`${W}__window--fullscreen`:""]),Q=a(()=>[`${W}__content`,N.borderRadius?`${W}__content--${N.borderRadius}`:"",N.close?`${W}__content--has-close-button`:`${W}__content--has-no-close-button`,H.body?`${W}__content--has-body`:`${W}__content--has-no-body`,H.footer?`${W}__content--has-footer`:`${W}__content--has-no-footer`,H.header||N.title?`${W}__content--has-header`:`${W}__content--has-no-header`,N.title?`${W}__content--has-title`:`${W}__content--has-no-title`]),U=a(()=>"auto"===N.zIndex||O(N.zIndex)?N.zIndex:N.zIndex.toString()),V=a(()=>{if("auto"===N.zIndex)return N.zIndex;return((O(N.zIndex)?parseInt(N.zIndex,10):N.zIndex)+100).toString()}),X=e=>{try{(e=>{try{const o=e?.target,t=F.value;return!(!R||!t||t.contains(o))||void 0}catch(o){return void console.error(o)}})(e)&&(R&&window.removeEventListener("mousedown",X),ee())}catch(o){console.error(o)}},Y=()=>{R&&window.removeEventListener("mousedown",X)},Z=()=>{R&&(A.value&&R&&window.clearTimeout(A.value),Y(),J())},ee=()=>{N.isOpen&&(N.onClose?.(),Z())};n(N,e=>{e.isOpen?(z("modal-open"),G(),F.value&&F.value.focus(),R&&e.dismissible&&(Y(),A.value=window.setTimeout(()=>{window.addEventListener("mousedown",X)},100))):(F.value&&F.value.blur(),J(),Y(),A.value&&R&&window.clearTimeout(A.value),z("modal-close"))}),s(()=>{N.isOpen&&R&&(G(),F.value&&F.value.focus())});const{clearEventListeners:oe}=E({escHandler:N.dismissible?ee:void 0});return d(()=>{Z(),oe()}),(o,t)=>(i(),r(c,{to:e.teleportTo,disabled:!e.teleport},[e.isOpen?(i(),_("div",{key:0,id:e.modalId,class:v(f(K)),"data-testid":e.testId,style:m({...f(S)(f(k)),zIndex:f(U)})},[p("div",{class:v(f(P)),style:m({zIndex:f(V)})},[p("div",{ref:"modal-window","aria-modal":"true","aria-labelledby":`${W}__content__header__title`,class:v(f(Q)),role:"dialog",tabindex:-1,style:m({"--clll-modal-max-width":e.maxWidth})},[p("div",{class:v(`${W}__close-button`)},[e.onClose&&e.close?(i(),r(f(w),{key:0,"aria-label":"Close modal","border-radius":e.closeBorderRadius,color:f(g).Neutral,"icon-before":f(C).Delete,"icon-size":f(B).Tiny,"on-click":e.onClose,"test-id":`${W}__close-button`,variant:f(L).Text},null,8,["border-radius","color","icon-before","icon-size","on-click","test-id","variant"])):u("",!0)],2),p("div",{class:v(`${W}__content__header`)},[p("div",{class:v(`${W}__content__title`)},[p("div",{class:v(`${W}__content__header__container`)},[e.title?(i(),r(f(x),{key:0,id:`${W}__content__header__title`,class:v(`${W}__content__header__title`),type:f(T).Section},{default:y(()=>[h($(e.title),1)]),_:1},8,["id","class","type"])):u("",!0),b(o.$slots,"header")],2)],2)],2),p("div",{class:v(`${W}__content__scroller`)},[p("div",{class:v(`${W}__content__body`)},[b(o.$slots,"body")],2)],2),p("div",{class:v(`${W}__content__footer`)},[b(o.$slots,"footer")],2)],14,D)],6),e.overlay?(i(),_("div",{key:0,ref:"overlay-ref",class:v(`${W}__overlay`),style:m({zIndex:e.zIndex})},null,6)):u("",!0)],14,M)):u("",!0)],8,["to","disabled"]))}});export{F as _};

package/dist/components/Modals/CLModal/CLModal.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLModal.css';
-import{_ as a}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";export{a as CLModal,a as default};
+import{_ as a}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CMwoV-Lu.js";export{a as CLModal,a as default};

package/dist/components/Modals/CLModal/CLModal.vue.d.ts

@@ -20,6 +20,10 @@ export interface CLModalProps {
     onClose?: CLGenericFunction;
     /** When set to `true`, it renders an overlay behind the modal. It's default value is `true`. */
     overlay?: boolean;
+    /** When set to `true`, teleports the modal to the target element. Defaults to `true`. */
+    teleport?: boolean;
+    /** Target element or selector to teleport the modal to. Defaults to `'body'`. */
+    teleportTo?: string | HTMLElement;
     /** Sets a custom ID used for unit tests. */
     testId?: string;
     /** The title content of the Modal. */
@@ -46,14 +50,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     maxWidth: string;
     closeBorderRadius: CLBorderRadius;
     fullscreen: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    'modal-window': HTMLDivElement;
-    'overlay-ref': HTMLDivElement;
-}, any>, {
-    header?(_: {}): any;
-    body?(_: {}): any;
-    footer?(_: {}): any;
-}>;
+    teleport: boolean;
+    teleportTo: string | HTMLElement;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, any, any>, any>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLModalDatePicker.css';
-import{defineComponent as e,mergeModels as a,ref as t,computed as l,useModel as d,onMounted as o,onBeforeUnmount as i,createElementBlock as u,openBlock as n,normalizeClass as r,unref as s,createVNode as b,withCtx as c,createTextVNode as f,toDisplayString as p,createElementVNode as v,nextTick as m}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DcHQwUiD.js";import{C as X,e as k,f as g,h,c as $,d as C}from"../../../chunks/index-CGlfDAYR.js";import{i as w}from"../../../chunks/helper-BlxFN3eF.js";import{useDatePicker as R}from"../../../composables/useDatePicker.js";const S=["data-testid"],B=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:C.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:$.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},isRange:{type:Boolean,default:!0},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{},testId:{default:"clll-date-picker-modal"},title:{default:"Select dates"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,B="clll-date-picker-modal",z=t(!1),V=l(()=>`date-picker-modal-${a.id}`),x=t(),M=d(e,"modelValue"),{rangeLabel:E}=R({appliedStart:l(()=>M.value?.start??null),appliedEnd:l(()=>M.value?.end??null),isRange:a.isRange}),F=t(!1),j=()=>{w&&(F.value=window.innerWidth<480)},P=()=>{if(a.disabled||a.busy)return;j(),z.value=!0,m(()=>{x.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},D=()=>{z.value=!1,x.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},W=()=>{x.value?.apply(),z.value=!1,a.onChange?.()},A=()=>{x.value?.reset(),a.onReset?.()},I=l(()=>F.value);o(()=>{w&&(j(),window.addEventListener("resize",j))}),i(()=>{w&&window.removeEventListener("resize",j)});const N={[X.Tiny]:k.Tiny,[X.Small]:k.Small,[X.Medium]:k.Medium,[X.Large]:k.Large,[X.XL]:k.XL,[X.XXL]:k.XXL,[X.XXXL]:k.XXXL,[X.XXXXL]:k.XXXXL},G=l(()=>[B,a.buttonBorderRadius?`${B}--${a.buttonBorderRadius}`:"",a.busy?`${B}--busy`:`${B}--ready`,`${B}--${a.buttonColor}`,`${B}--${a.buttonSize}`,`${B}--${a.buttonVariant}`,a.disabled||a.busy?`${B}--disabled`:`${B}--active`,a.fluid?`${B}--fluid`:`${B}--fixed`]),T=l(()=>{const e=x.value?.draftStart,t=x.value?.draftEnd;return a.isRange?!!e&&!!t:!!e});return(a,t)=>(n(),u("div",{class:r(s(G)),"data-testid":e.testId},[b(s(y),{"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":s(g).Calendar,"icon-size":N[e.buttonSize],"on-click":P,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:c(()=>[f(p(s(E)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),b(s(_),{"border-radius":s(I)?s(h).None:s(h).Medium,fullscreen:s(I),"is-open":s(z),"max-width":"336px","modal-id":s(V),"on-close":D,title:e.title},{body:c(()=>[b(s(L),{ref_key:"calendarRef",ref:x,modelValue:M.value,"onUpdate:modelValue":t[0]||(t[0]=e=>M.value=e),busy:e.busy,disabled:e.disabled,fluid:s(I),"is-range":e.isRange},null,8,["modelValue","busy","disabled","fluid","is-range"])]),footer:c(()=>[v("div",{class:r(`${B}__footer-actions`)},[b(s(y),{color:s(C).Neutral,"on-click":D,variant:s($).Ghost},{default:c(()=>[...t[1]||(t[1]=[f(" Cancel ",-1)])]),_:1},8,["color","variant"]),v("div",{class:r(`${B}__footer-right`)},[b(s(y),{color:s(C).Neutral,disabled:!s(x)?.draftStart&&!s(x)?.draftEnd,"on-click":A,variant:s($).Ghost},{default:c(()=>[...t[2]||(t[2]=[f(" Reset ",-1)])]),_:1},8,["color","disabled","variant"]),b(s(y),{color:s(C).Primary,disabled:!s(T),"on-click":W},{default:c(()=>[...t[3]||(t[3]=[f(" Apply ",-1)])]),_:1},8,["color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,S))}});export{B as CLModalDatePicker,B as default};
+import{defineComponent as e,mergeModels as a,ref as t,computed as l,useModel as d,onMounted as o,onBeforeUnmount as i,createElementBlock as u,openBlock as n,normalizeClass as r,unref as s,createVNode as b,withCtx as c,createTextVNode as f,toDisplayString as p,createElementVNode as v,nextTick as m}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CMwoV-Lu.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DcHQwUiD.js";import{C as X,e as k,f as g,h,c as $,d as C}from"../../../chunks/index-CGlfDAYR.js";import{i as w}from"../../../chunks/helper-BlxFN3eF.js";import{useDatePicker as R}from"../../../composables/useDatePicker.js";const S=["data-testid"],B=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:C.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:$.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},isRange:{type:Boolean,default:!0},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{},testId:{default:"clll-date-picker-modal"},title:{default:"Select dates"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,B="clll-date-picker-modal",z=t(!1),V=l(()=>`date-picker-modal-${a.id}`),x=t(),M=d(e,"modelValue"),{rangeLabel:E}=R({appliedStart:l(()=>M.value?.start??null),appliedEnd:l(()=>M.value?.end??null),isRange:a.isRange}),F=t(!1),j=()=>{w&&(F.value=window.innerWidth<480)},P=()=>{if(a.disabled||a.busy)return;j(),z.value=!0,m(()=>{x.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},D=()=>{z.value=!1,x.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},W=()=>{x.value?.apply(),z.value=!1,a.onChange?.()},A=()=>{x.value?.reset(),a.onReset?.()},I=l(()=>F.value);o(()=>{w&&(j(),window.addEventListener("resize",j))}),i(()=>{w&&window.removeEventListener("resize",j)});const N={[X.Tiny]:k.Tiny,[X.Small]:k.Small,[X.Medium]:k.Medium,[X.Large]:k.Large,[X.XL]:k.XL,[X.XXL]:k.XXL,[X.XXXL]:k.XXXL,[X.XXXXL]:k.XXXXL},G=l(()=>[B,a.buttonBorderRadius?`${B}--${a.buttonBorderRadius}`:"",a.busy?`${B}--busy`:`${B}--ready`,`${B}--${a.buttonColor}`,`${B}--${a.buttonSize}`,`${B}--${a.buttonVariant}`,a.disabled||a.busy?`${B}--disabled`:`${B}--active`,a.fluid?`${B}--fluid`:`${B}--fixed`]),T=l(()=>{const e=x.value?.draftStart,t=x.value?.draftEnd;return a.isRange?!!e&&!!t:!!e});return(a,t)=>(n(),u("div",{class:r(s(G)),"data-testid":e.testId},[b(s(y),{"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":s(g).Calendar,"icon-size":N[e.buttonSize],"on-click":P,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:c(()=>[f(p(s(E)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),b(s(_),{"border-radius":s(I)?s(h).None:s(h).Medium,fullscreen:s(I),"is-open":s(z),"max-width":"336px","modal-id":s(V),"on-close":D,title:e.title},{body:c(()=>[b(s(L),{ref_key:"calendarRef",ref:x,modelValue:M.value,"onUpdate:modelValue":t[0]||(t[0]=e=>M.value=e),busy:e.busy,disabled:e.disabled,fluid:s(I),"is-range":e.isRange},null,8,["modelValue","busy","disabled","fluid","is-range"])]),footer:c(()=>[v("div",{class:r(`${B}__footer-actions`)},[b(s(y),{color:s(C).Neutral,"on-click":D,variant:s($).Ghost},{default:c(()=>[...t[1]||(t[1]=[f(" Cancel ",-1)])]),_:1},8,["color","variant"]),v("div",{class:r(`${B}__footer-right`)},[b(s(y),{color:s(C).Neutral,disabled:!s(x)?.draftStart&&!s(x)?.draftEnd,"on-click":A,variant:s($).Ghost},{default:c(()=>[...t[2]||(t[2]=[f(" Reset ",-1)])]),_:1},8,["color","disabled","variant"]),b(s(y),{color:s(C).Primary,disabled:!s(T),"on-click":W},{default:c(()=>[...t[3]||(t[3]=[f(" Apply ",-1)])]),_:1},8,["color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,S))}});export{B as CLModalDatePicker,B as default};

package/dist/components/Modals/CLModalTimePicker/CLModalTimePicker.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLModalTimePicker.css';
-import{defineComponent as e,mergeModels as t,ref as o,computed as a,useModel as l,onMounted as i,onBeforeUnmount as u,createElementBlock as d,openBlock as r,normalizeClass as n,createVNode as s,unref as c,withCtx as b,createTextVNode as m,toDisplayString as f,createElementVNode as p,nextTick as v}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{CLTimePicker as _}from"../../Form/CLTimePicker/CLTimePicker.js";import{_ as L}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";import{C as k,e as h,f as X,h as $,c as C,d as w}from"../../../chunks/index-CGlfDAYR.js";import{useTimePicker as B}from"../../../composables/useTimePicker.js";import{i as z}from"../../../chunks/helper-BlxFN3eF.js";const g=["data-testid"],S=/* @__PURE__ */e({name:"CLModalTimePicker",__name:"CLModalTimePicker",props:/* @__PURE__ */t({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:w.Primary},buttonLabel:{default:"Select time"},buttonSize:{default:k.Small},buttonVariant:{default:C.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{type:Function,default:void 0},testId:{default:"clll-time-picker-modal"},title:{default:"Select time"},use24Hour:{type:Boolean,default:!1}},{modelValue:{default:null},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const t=e,S="clll-time-picker-modal",F=o(!1),V=a(()=>`time-picker-modal-${t.id}`),P=o(),R=l(e,"modelValue"),{formattedLabel:T}=B({appliedTime:R,use24Hour:t.use24Hour}),x=o(!1),M=()=>{z&&(x.value=window.innerWidth<480)},j=()=>{if(t.disabled||t.busy)return;M(),F.value=!0,v(()=>{P.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});t.onFocus?.(e)},W=()=>{F.value=!1,P.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});t.onBlur?.(e)},E=()=>{P.value?.apply(),F.value=!1,t.onChange?.()},H=()=>{P.value?.reset(),t.onReset?.(),t.onChange?.()},A=a(()=>x.value);i(()=>{z&&(M(),window.addEventListener("resize",M))}),u(()=>{z&&window.removeEventListener("resize",M)});const I={[k.Tiny]:h.Tiny,[k.Small]:h.Small,[k.Medium]:h.Medium,[k.Large]:h.Large,[k.XL]:h.XL,[k.XXL]:h.XXL,[k.XXXL]:h.XXXL,[k.XXXXL]:h.XXXXL},N=a(()=>[S,t.buttonBorderRadius?`${S}--${t.buttonBorderRadius}`:"",t.busy?`${S}--busy`:`${S}--ready`,`${S}--${t.buttonColor}`,`${S}--${t.buttonSize}`,`${S}--${t.buttonVariant}`,t.disabled||t.busy?`${S}--disabled`:`${S}--active`,t.fluid?`${S}--fluid`:`${S}--fixed`]);return(t,o)=>(r(),d("div",{class:n(N.value),"data-testid":e.testId},[s(c(y),{"aria-label":e.buttonAriaLabel||"Open time picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":c(X).Clock,"icon-size":I[e.buttonSize],"on-click":j,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:b(()=>[m(f(c(T)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),s(c(L),{"border-radius":A.value?c($).None:c($).Medium,fullscreen:A.value,"is-open":F.value,"max-width":"340px","modal-id":V.value,"on-close":W,title:e.title},{body:b(()=>[s(c(_),{ref_key:"timePickerRef",ref:P,modelValue:R.value,"onUpdate:modelValue":o[0]||(o[0]=e=>R.value=e),busy:e.busy,disabled:e.disabled,fluid:A.value,"use24-hour":e.use24Hour},null,8,["modelValue","busy","disabled","fluid","use24-hour"])]),footer:b(()=>[p("div",{class:n(`${S}__footer-actions`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":W},{default:b(()=>[...o[1]||(o[1]=[m(" Cancel ",-1)])]),_:1},8,["color","variant"]),p("div",{class:n(`${S}__footer-right`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":H},{default:b(()=>[...o[2]||(o[2]=[m(" Reset ",-1)])]),_:1},8,["color","variant"]),s(c(y),{color:c(w).Primary,"on-click":E},{default:b(()=>[...o[3]||(o[3]=[m(" Apply ",-1)])]),_:1},8,["color"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,g))}});export{S as CLModalTimePicker,S as default};
+import{defineComponent as e,mergeModels as t,ref as o,computed as a,useModel as l,onMounted as i,onBeforeUnmount as u,createElementBlock as d,openBlock as r,normalizeClass as n,createVNode as s,unref as c,withCtx as b,createTextVNode as m,toDisplayString as f,createElementVNode as p,nextTick as v}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{CLTimePicker as _}from"../../Form/CLTimePicker/CLTimePicker.js";import{_ as L}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CMwoV-Lu.js";import{C as k,e as h,f as X,h as $,c as C,d as w}from"../../../chunks/index-CGlfDAYR.js";import{useTimePicker as B}from"../../../composables/useTimePicker.js";import{i as z}from"../../../chunks/helper-BlxFN3eF.js";const g=["data-testid"],S=/* @__PURE__ */e({name:"CLModalTimePicker",__name:"CLModalTimePicker",props:/* @__PURE__ */t({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:w.Primary},buttonLabel:{default:"Select time"},buttonSize:{default:k.Small},buttonVariant:{default:C.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{type:Function,default:void 0},testId:{default:"clll-time-picker-modal"},title:{default:"Select time"},use24Hour:{type:Boolean,default:!1}},{modelValue:{default:null},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const t=e,S="clll-time-picker-modal",F=o(!1),V=a(()=>`time-picker-modal-${t.id}`),P=o(),R=l(e,"modelValue"),{formattedLabel:T}=B({appliedTime:R,use24Hour:t.use24Hour}),x=o(!1),M=()=>{z&&(x.value=window.innerWidth<480)},j=()=>{if(t.disabled||t.busy)return;M(),F.value=!0,v(()=>{P.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});t.onFocus?.(e)},W=()=>{F.value=!1,P.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});t.onBlur?.(e)},E=()=>{P.value?.apply(),F.value=!1,t.onChange?.()},H=()=>{P.value?.reset(),t.onReset?.(),t.onChange?.()},A=a(()=>x.value);i(()=>{z&&(M(),window.addEventListener("resize",M))}),u(()=>{z&&window.removeEventListener("resize",M)});const I={[k.Tiny]:h.Tiny,[k.Small]:h.Small,[k.Medium]:h.Medium,[k.Large]:h.Large,[k.XL]:h.XL,[k.XXL]:h.XXL,[k.XXXL]:h.XXXL,[k.XXXXL]:h.XXXXL},N=a(()=>[S,t.buttonBorderRadius?`${S}--${t.buttonBorderRadius}`:"",t.busy?`${S}--busy`:`${S}--ready`,`${S}--${t.buttonColor}`,`${S}--${t.buttonSize}`,`${S}--${t.buttonVariant}`,t.disabled||t.busy?`${S}--disabled`:`${S}--active`,t.fluid?`${S}--fluid`:`${S}--fixed`]);return(t,o)=>(r(),d("div",{class:n(N.value),"data-testid":e.testId},[s(c(y),{"aria-label":e.buttonAriaLabel||"Open time picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":c(X).Clock,"icon-size":I[e.buttonSize],"on-click":j,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:b(()=>[m(f(c(T)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),s(c(L),{"border-radius":A.value?c($).None:c($).Medium,fullscreen:A.value,"is-open":F.value,"max-width":"340px","modal-id":V.value,"on-close":W,title:e.title},{body:b(()=>[s(c(_),{ref_key:"timePickerRef",ref:P,modelValue:R.value,"onUpdate:modelValue":o[0]||(o[0]=e=>R.value=e),busy:e.busy,disabled:e.disabled,fluid:A.value,"use24-hour":e.use24Hour},null,8,["modelValue","busy","disabled","fluid","use24-hour"])]),footer:b(()=>[p("div",{class:n(`${S}__footer-actions`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":W},{default:b(()=>[...o[1]||(o[1]=[m(" Cancel ",-1)])]),_:1},8,["color","variant"]),p("div",{class:n(`${S}__footer-right`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":H},{default:b(()=>[...o[2]||(o[2]=[m(" Reset ",-1)])]),_:1},8,["color","variant"]),s(c(y),{color:c(w).Primary,"on-click":E},{default:b(()=>[...o[3]||(o[3]=[m(" Apply ",-1)])]),_:1},8,["color"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,g))}});export{S as CLModalTimePicker,S as default};

package/package.json

@@ -17,7 +17,7 @@
     "ui components",
     "vuejs"
   ],
-  "version": "5.13.0",
+  "version": "5.14.0",
   "license": "MIT",
   "type": "module",
   "unpkg": "dist/callaloo.global.js",

package/dist/chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js

@@ -1,2 +0,0 @@
-import '../components/Modals/CLModal/CLModal.css';
-import{defineComponent as e,useTemplateRef as o,useSlots as t,ref as l,computed as a,watch as n,onMounted as s,onBeforeUnmount as d,createElementBlock as i,createCommentVNode as r,openBlock as c,normalizeStyle as _,normalizeClass as u,unref as m,createElementVNode as v,createBlock as f,renderSlot as y,withCtx as b,createTextVNode as p,toDisplayString as h}from"vue";import{_ as $}from"./CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as w}from"./CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{b as x,g as I,d as z,c as g,h as L,e as k,f as C,l as B}from"./index-CGlfDAYR.js";import{useTheme as j}from"../composables/useTheme.js";import{useEsc as T}from"../composables/useEsc.js";import{b as E,i as O}from"./helper-BlxFN3eF.js";const R=e=>{const{colors:o,darkMode:t}=e??j(),l=t.value?x.Dark:x.Light,a=I({color:z.Neutral,colors:o.value,mode:l,variant:g.Solid}),n=t.value?"black":"white";return{"--clll-modal-overlay-bg":a?.bg??"transparent","--clll-modal-content-bg":n,"--clll-modal-theme-radius":"var(--clll-default-radius)"}},S=["id","data-testid"],M=["aria-labelledby"],D=/* @__PURE__ */e({name:"CLModal",__name:"CLModal",props:{borderRadius:{default:void 0},close:{type:Boolean,default:!0},closeBorderRadius:{default:L.Full},dismissible:{type:Boolean,default:!0},fullscreen:{type:Boolean,default:!1},isOpen:{type:Boolean,default:!1},maxWidth:{default:"640px"},modalId:{},onClose:{type:Function,default:void 0},overlay:{type:Boolean,default:!0},testId:{default:"clll-modal"},title:{default:void 0},zIndex:{default:100}},emits:["modal-open","modal-close"],setup(e,{emit:x}){const I=x,L=j(),D=o("modal-window"),F=t(),H=e,N="clll-modal",W="clll-prevent-scroll",q=l(),A=()=>{O&&window?.document.body.classList.add(W)},G=()=>{O&&window?.document.body.classList.remove(W)},J=a(()=>[N]),K=a(()=>[`${N}__window`,H.fullscreen?`${N}__window--fullscreen`:""]),P=a(()=>[`${N}__content`,H.borderRadius?`${N}__content--${H.borderRadius}`:"",H.close?`${N}__content--has-close-button`:`${N}__content--has-no-close-button`,F.body?`${N}__content--has-body`:`${N}__content--has-no-body`,F.footer?`${N}__content--has-footer`:`${N}__content--has-no-footer`,F.header||H.title?`${N}__content--has-header`:`${N}__content--has-no-header`,H.title?`${N}__content--has-title`:`${N}__content--has-no-title`]),Q=a(()=>"auto"===H.zIndex||E(H.zIndex)?H.zIndex:H.zIndex.toString()),U=a(()=>{if("auto"===H.zIndex)return H.zIndex;return((E(H.zIndex)?parseInt(H.zIndex,10):H.zIndex)+100).toString()}),V=e=>{try{(e=>{try{const o=e?.target,t=D.value;return!(!O||!t||t.contains(o))||void 0}catch(o){return void console.error(o)}})(e)&&(O&&window.removeEventListener("mousedown",V),Z())}catch(o){console.error(o)}},X=()=>{O&&window.removeEventListener("mousedown",V)},Y=()=>{O&&(q.value&&O&&window.clearTimeout(q.value),X(),G())},Z=()=>{H.isOpen&&(H.onClose?.(),Y())};n(H,e=>{e.isOpen?(I("modal-open"),A(),D.value&&D.value.focus(),O&&e.dismissible&&(X(),q.value=window.setTimeout(()=>{window.addEventListener("mousedown",V)},100))):(D.value&&D.value.blur(),G(),X(),q.value&&O&&window.clearTimeout(q.value),I("modal-close"))}),s(()=>{H.isOpen&&O&&(A(),D.value&&D.value.focus())});const{clearEventListeners:ee}=T({escHandler:H.dismissible?Z:void 0});return d(()=>{Y(),ee()}),(o,t)=>e.isOpen?(c(),i("div",{key:0,id:e.modalId,class:u(m(J)),"data-testid":e.testId,style:_({...m(R)(m(L)),zIndex:m(Q)})},[v("div",{class:u(m(K)),style:_({zIndex:m(U)})},[v("div",{ref:"modal-window","aria-modal":"true","aria-labelledby":`${N}__content__header__title`,class:u(m(P)),role:"dialog",tabindex:-1,style:_({"--clll-modal-max-width":e.maxWidth})},[v("div",{class:u(`${N}__close-button`)},[e.onClose&&e.close?(c(),f(m($),{key:0,"aria-label":"Close modal","border-radius":e.closeBorderRadius,color:m(z).Neutral,"icon-before":m(C).Delete,"icon-size":m(k).Tiny,"on-click":e.onClose,"test-id":`${N}__close-button`,variant:m(g).Text},null,8,["border-radius","color","icon-before","icon-size","on-click","test-id","variant"])):r("",!0)],2),v("div",{class:u(`${N}__content__header`)},[v("div",{class:u(`${N}__content__title`)},[v("div",{class:u(`${N}__content__header__container`)},[e.title?(c(),f(m(w),{key:0,id:`${N}__content__header__title`,class:u(`${N}__content__header__title`),type:m(B).Section},{default:b(()=>[p(h(e.title),1)]),_:1},8,["id","class","type"])):r("",!0),y(o.$slots,"header")],2)],2)],2),v("div",{class:u(`${N}__content__scroller`)},[v("div",{class:u(`${N}__content__body`)},[y(o.$slots,"body")],2)],2),v("div",{class:u(`${N}__content__footer`)},[y(o.$slots,"footer")],2)],14,M)],6),e.overlay?(c(),i("div",{key:0,ref:"overlay-ref",class:u(`${N}__overlay`),style:_({zIndex:e.zIndex})},null,6)):r("",!0)],14,S)):r("",!0)}});export{D as _};