@codeandfunction/callaloo 5.11.0 → 5.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/callaloo.global.js +1 -1
- package/dist/chunks/{CLCard.vue_vue_type_style_index_0_lang-BipF7MT1.js → CLCard.vue_vue_type_style_index_0_lang-Chi6OUG_.js} +1 -1
- package/dist/chunks/utils-DBEZS7WA.js +1 -0
- package/dist/components/Containers/CLCard/CLCard.js +1 -1
- package/dist/components/Containers/CLDisclosure/CLDisclosure.js +1 -1
- package/dist/components/Containers/CLDrawer/CLDrawer.css +1 -1
- package/dist/components/Containers/CLDrawer/CLDrawer.js +1 -1
- package/dist/components/Containers/CLDrawer/CLDrawer.vue.d.ts +21 -2
- package/dist/components/Containers/utils.d.ts +3 -1
- package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.js +1 -1
- package/dist/components/Form/CLInputTimePicker/CLInputTimePicker.js +1 -1
- package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.js +1 -1
- package/dist/composables/useElementSize.d.ts +4 -4
- package/dist/composables/useElementSize.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/chunks/utils-OYa6vYYI.js +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import '../components/Containers/CLCard/CLCard.css';
|
|
2
|
-
import{defineComponent as e,useSlots as a,ref as t,computed as l,onMounted as i,nextTick as r,createElementBlock as o,openBlock as d,withKeys as s,normalizeStyle as n,normalizeClass as u,unref as c,createCommentVNode as g,createElementVNode as h,createBlock as y,renderSlot as m,Fragment as f,withCtx as b,createTextVNode as _,toDisplayString as v}from"vue";import{_ as $}from"./CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{_ as p}from"./CLLink.vue_vue_type_style_index_0_lang-Dfcq8WIX.js";import{_ as k}from"./CLSkeleton.vue_vue_type_style_index_0_lang-_qLiUhKp.js";import{_ as C}from"./CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{c as w,k as x,l as L,d as H,i as T,a as R}from"./index-CGlfDAYR.js";import{b as j,a as B,c as S,d as A,e as O}from"./index-C9S3C1LU.js";import{c as W}from"./utils-
|
|
2
|
+
import{defineComponent as e,useSlots as a,ref as t,computed as l,onMounted as i,nextTick as r,createElementBlock as o,openBlock as d,withKeys as s,normalizeStyle as n,normalizeClass as u,unref as c,createCommentVNode as g,createElementVNode as h,createBlock as y,renderSlot as m,Fragment as f,withCtx as b,createTextVNode as _,toDisplayString as v}from"vue";import{_ as $}from"./CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{_ as p}from"./CLLink.vue_vue_type_style_index_0_lang-Dfcq8WIX.js";import{_ as k}from"./CLSkeleton.vue_vue_type_style_index_0_lang-_qLiUhKp.js";import{_ as C}from"./CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{c as w,k as x,l as L,d as H,i as T,a as R}from"./index-CGlfDAYR.js";import{b as j,a as B,c as S,d as A,e as O}from"./index-C9S3C1LU.js";import{c as W}from"./utils-DBEZS7WA.js";import{useHasSlotContent as q}from"../composables/useHasSlotContent.js";import{useTheme as E}from"../composables/useTheme.js";const I=["data-testid","tabindex"],N=["alt","loading","src"],G={key:0,class:"clll-card__header-skeleton"},K=["alt","loading","src"],M=["aria-label","href","target"],z=/* @__PURE__ */e({name:"CLCard",__name:"CLCard",props:{active:{type:Boolean,default:!1},align:{default:T.Left},ariaLabel:{},borderRadius:{},bordered:{type:Boolean,default:!0},busy:{type:Boolean,default:!1},byline:{},color:{default:H.Neutral},compact:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},forwardRef:{},height:{default:"auto"},href:{},image:{},imageAltText:{default:""},imageHeight:{default:"auto"},imageLoading:{default:A.Eager},imageOrder:{},imageWidth:{default:"auto"},onClick:{},overflow:{default:S.Hidden},padded:{type:Boolean,default:!0},rounded:{type:Boolean,default:!0},target:{default:B.Self},testId:{default:"clll-card"},title:{},titleHLevel:{default:j.H2},titleType:{default:L.SubSection},truncateTitle:{type:Boolean,default:!1},type:{default:x.Medium},variant:{default:w.Soft},width:{default:"auto"}},setup(e){const x="clll-card",L=E(),H=e,T=q(),j=a(),B=t(),S=t(),A=["a","button"],z=t(),D=l(()=>[x,`${x}--${H.type}`,`${x}--${H.color}-${H.variant}`,`${x}--${H.variant}`,`${x}--align-${H.align}`,H.rounded?`${x}--rounded`:`${x}--box`,H.bordered?`${x}--bordered`:"",H.borderRadius?`${x}--${H.borderRadius}`:"",H.busy?`${x}--busy`:`${x}--ready`,H.compact?`${x}--compact`:`${x}--no-compact`,H.title||H.byline?`${x}--has-header`:`${x}--no-header`,H.byline?`${x}--has-byline`:`${x}--no-byline`,B.value?`${x}--has-heading`:`${x}--no-heading`,T.value?`${x}--has-content`:`${x}--no-content`,S.value?`${x}--has-footer`:`${x}--no-footer`,H.image?`${x}--has-image`:`${x}--has-no-image`,H.imageOrder?`${x}--image-${H.imageOrder}`:"",H.active?`${x}--active`:`${x}--inactive`,H.onClick?`${x}--has-link`:"",H.truncateTitle?`${x}--has-truncated-title`:"",H.elevated?`${x}--elevated`:"",H.overflow?`${x}--overflow-${H.overflow}`:"",H.padded?"":`${x}--no-padding`]),F=e=>{if(H.busy||!H.onClick)return;const{target:a}=e,t=a?a.closest("a,button"):void 0,l=[...z.value?.querySelectorAll("[data-expand-click-area]")??[]];if(l.length){const a=l[0],i=t?A.includes(t.tagName.toLowerCase()):null;t||a===e.target||i||a.click()}};return i(async()=>{await r(),z.value&&H.forwardRef?.(z.value),B.value=j?.heading,S.value=j?.footer}),(a,t)=>(d(),o("div",{ref_key:"refExpandedArea",ref:z,class:u(c(D)),style:n({...c(W)({color:e.color,variant:e.variant,theme:c(L)}),width:e.width,height:e.height,overflow:e.overflow}),"data-testid":e.testId,tabindex:e.onClick?0:void 0,onClick:F,onKeyup:s(F,["enter"])},[!e.image||e.imageOrder!==c(O).Before&&e.imageOrder?g("",!0):(d(),o("div",{key:0,class:u(["clll-card__image",{busy:e.busy}]),style:n({width:e.imageWidth,height:e.imageHeight})},[e.busy?(d(),y(c(k),{key:0,"border-radius":e.borderRadius,width:e.imageWidth,height:e.imageHeight,rounded:!1},null,8,["border-radius","width","height"])):g("",!0),e.image?(d(),o("img",{key:1,alt:e.imageAltText,class:u(`${x}__image__elem`),loading:e.imageLoading,src:e.image},null,10,N)):g("",!0)],6)),h("div",{class:u(`${x}__content`)},[h("div",{class:u(["clll-card__header",{busy:e.busy}])},[e.busy&&(c(B)||e.title||e.byline)?(d(),o("div",G,[c(B)||e.title?(d(),y(c(k),{key:0,"border-radius":e.borderRadius,height:"27px"},null,8,["border-radius"])):g("",!0),e.byline?(d(),y(c(k),{key:1,"border-radius":e.borderRadius,width:"70%",height:"20px"},null,8,["border-radius"])):g("",!0)])):g("",!0),e.onClick||e.href?e.title||c(B)&&(e.onClick||e.href)?(d(),y(c(p),{key:2,"aria-label":e.ariaLabel,color:e.color,href:e.href,target:e.target,"on-click":e.onClick,"data-expand-click-area":""},{default:b(()=>[m(a.$slots,"heading"),e.title?(d(),y(c($),{key:0,align:e.align,class:u(`${x}__heading`),color:e.color,level:e.titleHLevel,truncate:e.truncateTitle,type:e.titleType},{default:b(()=>[_(v(e.title),1)]),_:1},8,["align","class","color","level","truncate","type"])):g("",!0)]),_:3},8,["aria-label","color","href","target","on-click"])):g("",!0):(d(),o(f,{key:1},[m(a.$slots,"heading"),e.title?(d(),y(c($),{key:0,align:e.align,class:u(`${x}__heading`),color:e.color,level:e.titleHLevel,truncate:e.truncateTitle,type:e.titleType},{default:b(()=>[_(v(e.title),1)]),_:1},8,["align","class","color","level","truncate","type"])):g("",!0)],64)),m(a.$slots,"byline"),e.byline?(d(),y(c(C),{key:3,align:e.align,class:u(`${x}__byline`),color:e.color,type:c(R).Small},{default:b(()=>[_(v(e.byline),1)]),_:1},8,["align","class","color","type"])):g("",!0)],2),h("div",{class:u(`${x}__slot`)},[h("div",{ref:"slot-content",class:u([`${x}__slot-content`,{busy:e.busy}])},[c(T)&&e.busy?(d(),y(c(k),{key:0,"border-radius":e.borderRadius,width:"100%",height:"100%"},null,8,["border-radius"])):g("",!0),h("div",null,[m(a.$slots,"default")])],2)],2),h("div",{class:u(["clll-card__footer",{busy:e.busy}])},[c(S)&&e.busy?(d(),y(c(k),{key:0,"border-radius":e.borderRadius,width:"100%",height:"20px"},null,8,["border-radius"])):g("",!0),m(a.$slots,"footer")],2)],2),e.image&&e.imageOrder===c(O).After?(d(),o("div",{key:1,class:u(["clll-card__image",{busy:e.busy}]),style:n({width:e.imageWidth,height:e.imageHeight})},[e.busy?(d(),y(c(k),{key:0,"border-radius":e.borderRadius,width:e.imageWidth,height:e.imageHeight,rounded:!1},null,8,["border-radius","width","height"])):g("",!0),m(a.$slots,"image"),e.image?(d(),o("img",{key:1,alt:e.imageAltText,class:u(`${x}__image__elem`),loading:e.imageLoading,src:e.image},null,10,K)):g("",!0)],6)):g("",!0),e.title||!e.onClick&&!e.href?g("",!0):(d(),o("a",{key:2,"aria-label":e.ariaLabel,class:"sr-only",href:e.href,target:e.target,"data-expand-click-area":"",onClick:t[0]||(t[0]=(...a)=>e.onClick&&e.onClick(...a))},null,8,M)),e.onClick&&e.variant!==c(w).Ghost?(d(),o("div",{key:3,class:u(`${x}__hover-elem`)},null,2)):g("",!0)],46,I))}});export{z as _};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as r,c as l,g as a,d as e}from"./index-CGlfDAYR.js";import{useTheme as o}from"../composables/useTheme.js";const t=({color:e,variant:t,theme:c})=>{const{colors:s,darkMode:d}=c??o(),n=d.value?r.Dark:r.Light,u=t===l.Ghost,i=a({color:e,colors:s.value,mode:n,variant:t});return{"--clll-card-border-color":u?"transparent":i?.border??"transparent","--clll-card-bg-color":i?.bg??"transparent","--clll-card-image-bg":i?.bg??"transparent","--clll-card-text-color":i?.text??"inherit","--clll-card-focus-border":i?.focus??"transparent","--clll-card-focus-shadow":i?.shadow??"transparent","--clll-card-theme-radius":"var(--clll-default-radius)"}},c=({color:e,variant:t,theme:c})=>{const{colors:s,darkMode:d}=c??o(),n=d.value?r.Dark:r.Light,u=t===l.Ghost,i=a({color:e,colors:s.value,mode:n,variant:t});return{"--clll-disclosure-border-color":u?"transparent":i?.focus??"transparent","--clll-disclosure-text-color":i?.text??"inherit","--clll-disclosure-content-border":u?"transparent":i?.focus??"transparent","--clll-disclosure-trigger-bg-color":i?.bg??"transparent","--clll-disclosure-trigger-hover-bg-color":i?.hover??"transparent","--clll-disclosure-theme-radius":"var(--clll-default-radius)"}},s=t=>{const{borderRadius:c,colors:s,darkMode:d}=t??o(),n=d.value?r.Dark:r.Light,u=a({color:e.Neutral,colors:s.value,mode:n,variant:l.Solid}),i=d.value?"black":"white";let v;return c?.value&&(v=`var(--clll-${c.value})`),{"--clll-drawer-overlay-bg":u?.bg??"transparent","--clll-drawer-content-bg":i,"--clll-drawer-theme-radius":v??"var(--clll-rounded-md)"}};export{s as a,t as c,c as d};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLCard.css';
|
|
3
|
-
import{_ as a}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import{_ as a}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-Chi6OUG_.js";export{a as CLCard,a as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLDisclosure.css';
|
|
3
|
-
import{defineComponent as e,ref as a,watch as t,computed as d,onBeforeUnmount as o,createElementBlock as n,openBlock as s,normalizeStyle as l,normalizeClass as i,unref as r,createVNode as u,createElementVNode as c,withKeys as p,withCtx as _,createBlock as g,createCommentVNode as f,renderSlot as m,createTextVNode as $,toDisplayString as y}from"vue";import{_ as v}from"../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-DmZZOodW.js";import{_ as h}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{_ as b}from"../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-C21socAp.js";import{_ as x}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{c as B,C,a as S,e as k,f as z,l as I,d as L}from"../../../chunks/index-CGlfDAYR.js";import{d as j}from"../../../chunks/utils-
|
|
3
|
+
import{defineComponent as e,ref as a,watch as t,computed as d,onBeforeUnmount as o,createElementBlock as n,openBlock as s,normalizeStyle as l,normalizeClass as i,unref as r,createVNode as u,createElementVNode as c,withKeys as p,withCtx as _,createBlock as g,createCommentVNode as f,renderSlot as m,createTextVNode as $,toDisplayString as y}from"vue";import{_ as v}from"../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-DmZZOodW.js";import{_ as h}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{_ as b}from"../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-C21socAp.js";import{_ as x}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{c as B,C,a as S,e as k,f as z,l as I,d as L}from"../../../chunks/index-CGlfDAYR.js";import{d as j}from"../../../chunks/utils-DBEZS7WA.js";import{useEsc as H}from"../../../composables/useEsc.js";import{useHasSlotContent as T}from"../../../composables/useHasSlotContent.js";import{useTheme as A}from"../../../composables/useTheme.js";const D=["data-testid"],E=["id","aria-labelledby","aria-hidden"],R=/* @__PURE__ */e({name:"CLDisclosure",__name:"CLDisclosure",props:{bordered:{type:Boolean,default:!0},borderRadius:{},color:{default:L.Neutral},compact:{type:Boolean,default:!1},contentSpacing:{type:Boolean,default:!0},disclosureId:{},expanded:{type:Boolean,default:!1},expandedIcon:{default:z.ChevronUp},heading:{},headingLevel:{},headingType:{default:I.Section},iconAfter:{default:z.ChevronDown},iconBefore:{},iconSize:{default:k.Medium},rounded:{type:Boolean,default:!0},subHeading:{},subHeadingType:{default:S.Body},testId:{default:"clll-disclosure"},triggerButtonSize:{default:C.Medium},variant:{default:B.Soft}},emits:["disclosure-toggle","update:expanded"],setup(e,{expose:B,emit:C}){const S=C,k="clll-disclosure",z=A(),I=e;let L=a();const R=a(I.expanded);t(()=>I.expanded,e=>{R.value=e});const M=T("trailing"),q=d(()=>[k,`${k}--${I.color}--${I.variant}`,`${k}--${I.triggerButtonSize}`,I.bordered?`${k}--bordered`:"",I.borderRadius?`${k}--${I.borderRadius}`:"",I.contentSpacing?`${k}--padded`:`${k}--nopadding`,I.compact?`${k}--compact`:"",R.value?`${k}--expanded`:`${k}--collapsed`,I.heading?`${k}--hasheading`:"",I.subHeading||M.value?`${k}--hassubheading`:"",I.rounded?`${k}--rounded`:`${k}--box`,`${k}--${I.triggerButtonSize}`]),w=d(()=>[`${k}__content`,`${k}__content--${I.triggerButtonSize}`]),K=e=>{R.value="boolean"==typeof e?e:!R.value,S("update:expanded",R.value),S("disclosure-toggle",R.value)},N=()=>{K()},{clearEventListeners:U}=H({escHandler:N,triggerElem:L});return o(()=>{U()}),B({close:()=>{K(!1)},expanded:R,open:()=>{K(!0)},toggle:K}),(a,t)=>(s(),n("div",{class:i(r(q)),style:l(r(j)({color:e.color,variant:e.variant,theme:r(z)})),"data-testid":e.testId},[u(r(v),{id:`${k}__button--${e.disclosureId}`,"aria-controls":`${k}--${e.disclosureId}`,"aria-expanded":r(R),color:e.color,enabled:!0,fluid:!0,rounded:e.rounded,role:"button",onClick:N,onKeyup:p(N,["enter"])},{default:_(()=>[c("div",{class:i(`${k}__trigger`)},[c("span",{class:i(`${k}__heading`)},[e.iconBefore?(s(),g(r(b),{key:0,name:e.iconBefore,size:e.iconSize},null,8,["name","size"])):f("",!0),c("span",{class:i(`${k}__heading-text`)},[e.heading?(s(),g(r(h),{key:0,class:i(`${k}__text-heading`),type:e.headingType,level:e.headingLevel,truncate:""},{default:_(()=>[$(y(e.heading),1)]),_:1},8,["class","type","level"])):f("",!0),e.subHeading?(s(),g(r(x),{key:1,class:i(`${k}__text-subheading`),type:e.subHeadingType,truncate:""},{default:_(()=>[$(y(e.subHeading),1)]),_:1},8,["class","type"])):f("",!0)],2),m(a.$slots,"trailing"),e.iconAfter?(s(),g(r(b),{key:1,name:r(R)?e.expandedIcon:e.iconAfter,size:e.iconSize},null,8,["name","size"])):f("",!0)],2)],2)]),_:3},8,["id","aria-controls","aria-expanded","color","rounded"]),c("div",{id:`${k}--${e.disclosureId}`,"aria-labelledby":`${k}__button--${e.disclosureId}`,"aria-hidden":!r(R),class:i(r(w))},[m(a.$slots,"default")],10,E)],14,D))}});export{R as CLDisclosure,R as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.clll-prevent-scroll{overflow:initial}.clll-drawer{position:fixed;inset:0;height:100dvh;width:100vw;pointer-events:none}.clll-drawer__overlay{position:absolute;inset:0;opacity:0;background-color:var(--clll-drawer-overlay-bg, transparent);pointer-events:auto;transition-property:all;transition-duration:.3s;transition-timing-function:ease}.clll-drawer__content{position:absolute;background:var(--clll-drawer-content-bg, white);pointer-events:auto;overflow-y:auto;overflow-x:hidden;transition-property:all;transition-duration:.3s;transition-timing-function:ease;box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}.clll-drawer__content--top{top:0;left:0;right:0;width:100%;max-height:100%;transform:translateY(-100%)}.clll-drawer__content--bottom{bottom:0;left:0;right:0;width:100%;max-height:100%;transform:translateY(100%)}.clll-drawer__content--left{top:0;left:0;bottom:0;max-width:100%;height:100%;transform:translate(-100%)}.clll-drawer__content--right{top:0;right:0;bottom:0;max-width:100%;height:100%;transform:translate(100%)}.clll-drawer--mounted .clll-drawer__overlay{opacity:.4}.clll-drawer--mounted .clll-drawer__content--top,.clll-drawer--mounted .clll-drawer__content--bottom{transform:translateY(0)}.clll-drawer--mounted .clll-drawer__content--left,.clll-drawer--mounted .clll-drawer__content--right{transform:translate(0)}
|
|
1
|
+
.clll-prevent-scroll{overflow:initial}.clll-drawer{position:fixed;inset:0;height:100dvh;width:100vw;pointer-events:none}.clll-drawer__overlay{position:absolute;inset:0;opacity:0;background-color:var(--clll-drawer-overlay-bg, transparent);pointer-events:auto;transition-property:all;transition-duration:.3s;transition-timing-function:ease}.clll-drawer__content{position:absolute;background:var(--clll-drawer-content-bg, white);pointer-events:auto;overflow-y:auto;overflow-x:hidden;border-radius:0;transition-property:all;transition-duration:.3s;transition-timing-function:ease;box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}.clll-drawer__content.clll-drawer__content--rounded-full,.clll-drawer__content.clll-drawer__content--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-drawer__content.clll-drawer__content--rounded-lg,.clll-drawer__content.clll-drawer__content--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-drawer__content.clll-drawer__content--rounded-md,.clll-drawer__content.clll-drawer__content--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-drawer__content.clll-drawer__content--rounded-sm,.clll-drawer__content.clll-drawer__content--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-drawer__content.clll-drawer__content--rounded-xs,.clll-drawer__content.clll-drawer__content--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-drawer__content.clll-drawer__content--rounded-xl,.clll-drawer__content.clll-drawer__content--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-drawer__content.clll-drawer__content--rounded-2xl,.clll-drawer__content.clll-drawer__content--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-drawer__content.clll-drawer__content--rounded-3xl,.clll-drawer__content.clll-drawer__content--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-drawer__content.clll-drawer__content--rounded-none,.clll-drawer__content.clll-drawer__content--rounded-none .clll-{border-radius:0}.clll-drawer__content.clll-drawer__content--rounded:not([class*=clll-drawer__content--rounded-]){border-radius:var(--clll-drawer-theme-radius, var(--clll-rounded-md))}.clll-drawer__content--top{top:0;left:0;right:0;width:100%;max-height:100%;transform:translateY(-100%)}.clll-drawer__content--bottom{bottom:0;left:0;right:0;width:100%;max-height:100%;transform:translateY(100%)}.clll-drawer__content--left{top:0;left:0;bottom:0;max-width:100%;height:100%;transform:translate(-100%)}.clll-drawer__content--right{top:0;right:0;bottom:0;max-width:100%;height:100%;transform:translate(100%)}.clll-drawer__content--detached.clll-drawer__content--top{top:var(--clll-unit-4);left:var(--clll-unit-4);right:var(--clll-unit-4);width:calc(100% - var(--clll-unit-8));max-height:calc(100% - var(--clll-unit-8));transform:translateY(calc(-100% - var(--clll-unit-4)))}.clll-drawer__content--detached.clll-drawer__content--bottom{bottom:var(--clll-unit-4);left:var(--clll-unit-4);right:var(--clll-unit-4);width:calc(100% - var(--clll-unit-8));max-height:calc(100% - var(--clll-unit-8));transform:translateY(calc(100% + var(--clll-unit-4)))}.clll-drawer__content--detached.clll-drawer__content--left{top:var(--clll-unit-4);left:var(--clll-unit-4);bottom:var(--clll-unit-4);height:calc(100% - var(--clll-unit-8));max-width:calc(100% - var(--clll-unit-8));transform:translate(calc(-100% - var(--clll-unit-4)))}.clll-drawer__content--detached.clll-drawer__content--right{top:var(--clll-unit-4);right:var(--clll-unit-4);bottom:var(--clll-unit-4);height:calc(100% - var(--clll-unit-8));max-width:calc(100% - var(--clll-unit-8));transform:translate(calc(100% + var(--clll-unit-4)))}.clll-drawer--mounted .clll-drawer__overlay{opacity:.4}.clll-drawer--mounted .clll-drawer__content--top,.clll-drawer--mounted .clll-drawer__content--bottom{transform:translateY(0)}.clll-drawer--mounted .clll-drawer__content--left,.clll-drawer--mounted .clll-drawer__content--right{transform:translate(0)}.clll-drawer--mounted .clll-drawer__content--detached--top,.clll-drawer--mounted .clll-drawer__content--detached--bottom{transform:translateY(0)}.clll-drawer--mounted .clll-drawer__content--detached--left,.clll-drawer--mounted .clll-drawer__content--detached--right{transform:translate(0)}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLDrawer.css';
|
|
3
|
-
import{defineComponent as e,useTemplateRef as t,ref as o,computed as a,watch as s,onMounted as
|
|
3
|
+
import{defineComponent as e,useTemplateRef as t,ref as o,computed as a,watch as l,nextTick as s,onMounted as n,onBeforeUnmount as r,createElementBlock as d,createCommentVNode as i,unref as u,openBlock as v,normalizeStyle as c,normalizeClass as p,createElementVNode as m,renderSlot as f}from"vue";import{m as w}from"../../../chunks/index-CGlfDAYR.js";import{a as h}from"../../../chunks/utils-DBEZS7WA.js";import{useEsc as y}from"../../../composables/useEsc.js";import{useTheme as b}from"../../../composables/useTheme.js";import{SizeDimension as x,useElementSize as z,SizeMode as I}from"../../../composables/useElementSize.js";import{b as _,i as S,g as O,a as $}from"../../../chunks/helper-BlxFN3eF.js";const g=["data-testid"],C=/* @__PURE__ */e({name:"CLDrawer",__name:"CLDrawer",props:{autoSize:{type:Boolean,default:!1},borderRadius:{default:void 0},detached:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},isOpen:{type:Boolean,default:!1},left:{default:void 0},onClose:{type:Function,default:void 0},overlay:{type:Boolean,default:!0},position:{default:w.Left},resetScrollKey:{default:void 0},resetScrollOnOpen:{type:Boolean,default:!0},rounded:{type:Boolean,default:!1},snapPoint:{default:1},testId:{default:"clll-drawer"},width:{default:void 0},zIndex:{default:100}},emits:["drawer-open","drawer-close"],setup(e,{expose:C,emit:L}){const B=L,T=b(),k=t("drawer-content"),j=300,E=o(!1),D=o(),M=o(0),P=o(!1),R=a(()=>H.isOpen||P.value),H=e,A="clll-drawer",K="clll-prevent-scroll",W=a(()=>H.position===w.Top||H.position===w.Bottom?x.Height:x.Width),{size:F,measure:q,destroy:G}=z({elementRef:k,dimension:W,mode:a(()=>H.autoSize?I.Auto:I.Percentage),snapPoint:a(()=>H.snapPoint),observeChanges:!0,debounceDelay:50,isActive:a(()=>H.isOpen&&E.value)}),J=()=>{S&&window?.document.body.classList.add(K)},N=()=>{S&&window?.document.body.classList.remove(K)},Q=a(()=>[A,`${A}--${H.position}`,E.value?`${A}--mounted`:""]),U=a(()=>[`${A}__content`,`${A}__content--${H.position}`,H.detached?`${A}__content--detached`:"",H.rounded?`${A}__content--rounded`:"",H.borderRadius?`${A}__content--${H.borderRadius}`:""]),V=a(()=>{if("auto"===H.zIndex)return H.zIndex;const e=_(H.zIndex)?parseInt(H.zIndex,10):H.zIndex;return e>0?e.toString():M.value.toString()}),X=a(()=>((_(H.zIndex)?parseInt(H.zIndex,10):H.zIndex)-1).toString()),Y=a(()=>{const e={...h(T),zIndex:V.value};return void 0!==H.left&&(e.left=H.left,void 0===H.width&&(e.width="auto")),void 0!==H.width&&(e.width=H.width),e}),Z=a(()=>{const e=H.position===w.Top||H.position===w.Bottom,t=e?"height":"width",o={zIndex:V.value,[t]:F.value};return H.autoSize&&(e?o.maxHeight=H.detached?"calc(100dvh - var(--clll-unit-8))":"100dvh":o.maxWidth=H.detached?"calc(100vw - var(--clll-unit-8))":"100vw"),o}),ee=e=>{try{(e=>{try{const t=e?.target,o=k.value;return!(!S||!o||o.contains(t))}catch(t){return console.error(t),!1}})(e)&&(S&&window.removeEventListener("mousedown",ee),ae())}catch(t){console.error(t)}},te=()=>{S&&window.removeEventListener("mousedown",ee)},oe=()=>{S&&(D.value&&D.value.stop(),te(),N(),P.value=!1,G())},ae=()=>{H.isOpen&&(P.value=!0,E.value=!1,S?(D.value&&D.value.stop(),D.value||(D.value=$()),D.value.start(j,e=>{Math.min(e,j)===j&&(D.value?.stop(),H.onClose?.(),oe())})):(H.onClose?.(),oe()))},le=e=>{k.value&&("number"==typeof e?k.value.scrollTop=e:e?k.value.scrollTo(e):k.value.scrollTop=0)};l(()=>H.resetScrollKey,()=>{le()}),l(()=>H.isOpen,e=>{e?(H.resetScrollOnOpen&&s(()=>le()),P.value=!1,B("drawer-open"),J(),S&&(M.value=O()+1,D.value||(D.value=$()),D.value.start(100,e=>{100===Math.min(e,100)&&(D.value?.stop(),E.value=!0,H.dismissible&&(te(),setTimeout(()=>{S&&window.addEventListener("mousedown",ee)},100)))}),k.value&&k.value.focus())):(P.value=!0,k.value&&k.value.blur(),N(),te(),D.value?(E.value=!1,D.value.start(j,e=>{Math.min(e,j)===j&&(D.value?.stop(),H.onClose?.(),oe())})):(E.value=!1,H.onClose?.(),oe()),B("drawer-close"))}),n(()=>{H.isOpen&&S&&(H.resetScrollOnOpen&&s(()=>le()),J(),M.value=O()+1,D.value||(D.value=$()),D.value.start(100,e=>{100===Math.min(e,100)&&(D.value?.stop(),E.value=!0)}),k.value&&k.value.focus())});const{clearEventListeners:se}=y({escHandler:H.dismissible?ae:void 0});return r(()=>{oe(),se(),D.value&&D.value.stop()}),C({drawerContent:k,recalculateSize:()=>{s(()=>{q()})},scrollToTop:le}),(t,o)=>u(R)?(v(),d("div",{key:0,class:p(u(Q)),"data-testid":e.testId,style:c(u(Y))},[m("div",{ref:"drawer-content",class:p(u(U)),style:c(u(Z)),role:"dialog",tabindex:-1},[f(t.$slots,"default")],6),e.overlay?(v(),d("div",{key:0,class:p(`${A}__overlay`),style:c({zIndex:u(X)}),onClick:o[0]||(o[0]=t=>e.dismissible?ae():void 0)},null,6)):i("",!0)],14,g)):i("",!0)}});export{C as CLDrawer,C as default};
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import { CLDrawerPosition, CLGenericFunction } from '../../../index.ts';
|
|
1
|
+
import { CLBorderRadius, CLDrawerPosition, CLGenericFunction } from '../../../index.ts';
|
|
2
2
|
export interface CLDrawerProps {
|
|
3
3
|
/** When set to `true`, the drawer will automatically size based on its content. When `false`, it uses `snapPoint` for percentage-based sizing. Defaults to `false`. */
|
|
4
4
|
autoSize?: boolean;
|
|
5
|
+
/** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
|
|
6
|
+
borderRadius?: CLBorderRadius;
|
|
7
|
+
/** When set to `true`, the drawer is detached from the edges of the screen/container with gaps around it. Defaults to `false`. */
|
|
8
|
+
detached?: boolean;
|
|
5
9
|
/** When `false,` the drawer will not close when clicking outside or pressing escape. It's default value is `true`. */
|
|
6
10
|
dismissible?: boolean;
|
|
7
11
|
/** When set to `true`, the Drawer is visible. */
|
|
@@ -14,6 +18,12 @@ export interface CLDrawerProps {
|
|
|
14
18
|
overlay?: boolean;
|
|
15
19
|
/** Sets the position of the drawer. The property can be one of `CLDrawerPosition`, e.g. `CLDrawerPosition.Left`. */
|
|
16
20
|
position?: CLDrawerPosition;
|
|
21
|
+
/** Optional key or value that, when changed, resets the drawer's scroll position to top. */
|
|
22
|
+
resetScrollKey?: unknown;
|
|
23
|
+
/** When set to `true`, automatically resets scroll to top when drawer opens. Defaults to `true`. */
|
|
24
|
+
resetScrollOnOpen?: boolean;
|
|
25
|
+
/** When set to `true`, it renders a Drawer with rounded corners using theme border radius or `borderRadius` prop. Defaults to `false`. */
|
|
26
|
+
rounded?: boolean;
|
|
17
27
|
/** A decimal value from 0 to 1 that determines how much of the screen the drawer should open to. For example, 0.2 means 20% of the available screen. Defaults to 1 (100%). Only used when `autoSize` is `false`. */
|
|
18
28
|
snapPoint?: number;
|
|
19
29
|
/** Sets a custom ID used for unit tests. */
|
|
@@ -23,23 +33,32 @@ export interface CLDrawerProps {
|
|
|
23
33
|
/** The z-index of the Drawer. */
|
|
24
34
|
zIndex?: number | string;
|
|
25
35
|
}
|
|
26
|
-
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CLDrawerProps, {
|
|
36
|
+
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CLDrawerProps, {
|
|
37
|
+
drawerContent: Readonly<globalThis.ShallowRef<HTMLDivElement | null>>;
|
|
38
|
+
recalculateSize: () => void;
|
|
39
|
+
scrollToTop: (options?: ScrollToOptions | number) => void;
|
|
40
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
27
41
|
"drawer-open": () => any;
|
|
28
42
|
"drawer-close": () => any;
|
|
29
43
|
}, string, import('vue').PublicProps, Readonly<CLDrawerProps> & Readonly<{
|
|
30
44
|
"onDrawer-open"?: (() => any) | undefined;
|
|
31
45
|
"onDrawer-close"?: (() => any) | undefined;
|
|
32
46
|
}>, {
|
|
47
|
+
rounded: boolean;
|
|
33
48
|
testId: string;
|
|
34
49
|
left: string;
|
|
35
50
|
width: string;
|
|
51
|
+
borderRadius: CLBorderRadius;
|
|
36
52
|
position: CLDrawerPosition;
|
|
37
53
|
snapPoint: number;
|
|
38
54
|
overlay: boolean;
|
|
39
55
|
autoSize: boolean;
|
|
56
|
+
detached: boolean;
|
|
40
57
|
dismissible: boolean;
|
|
41
58
|
isOpen: boolean;
|
|
42
59
|
onClose: CLGenericFunction;
|
|
60
|
+
resetScrollKey: undefined;
|
|
61
|
+
resetScrollOnOpen: boolean;
|
|
43
62
|
zIndex: number | string;
|
|
44
63
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
45
64
|
'drawer-content': HTMLDivElement;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
|
-
import { CLColors, CLColorVariants, CLPalette } from '../../index.ts';
|
|
2
|
+
import { CLBorderRadius, CLColors, CLColorVariants, CLPalette } from '../../index.ts';
|
|
3
3
|
interface ThemeContext {
|
|
4
|
+
borderRadius?: Ref<CLBorderRadius | undefined>;
|
|
4
5
|
colors: Ref<CLPalette>;
|
|
5
6
|
darkMode: Ref<boolean | undefined>;
|
|
6
7
|
}
|
|
@@ -29,5 +30,6 @@ export declare const disclosureTheme: ({ color, variant, theme }: ThemeProps) =>
|
|
|
29
30
|
export declare const drawerTheme: (theme?: ThemeContext) => {
|
|
30
31
|
'--clll-drawer-overlay-bg': string;
|
|
31
32
|
'--clll-drawer-content-bg': string;
|
|
33
|
+
'--clll-drawer-theme-radius': string;
|
|
32
34
|
};
|
|
33
35
|
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLInputDatePicker.css';
|
|
3
|
-
import{defineComponent as e,mergeModels as a,ref as l,useModel as t,watch as u,computed as n,onMounted as d,onBeforeUnmount as s,createElementBlock as o,openBlock as i,normalizeClass as r,createVNode as f,createCommentVNode as m,unref as p,isRef as c,normalizeStyle as v,withCtx as b,createElementVNode as y}from"vue";import{u as g,a as _,o as h,f as k,s as C}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as D}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import{defineComponent as e,mergeModels as a,ref as l,useModel as t,watch as u,computed as n,onMounted as d,onBeforeUnmount as s,createElementBlock as o,openBlock as i,normalizeClass as r,createVNode as f,createCommentVNode as m,unref as p,isRef as c,normalizeStyle as v,withCtx as b,createElementVNode as y}from"vue";import{u as g,a as _,o as h,f as k,s as C}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as D}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-Chi6OUG_.js";import{CLInput as Y}from"../CLInput/CLInput.js";import{_ as R}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DcHQwUiD.js";import{f as I,c as L,n as V,C as x,d as M}from"../../../chunks/index-CGlfDAYR.js";import{f as B}from"../../../chunks/index-C9S3C1LU.js";import{i as j}from"../../../chunks/helper-BlxFN3eF.js";import{useEsc as E}from"../../../composables/useEsc.js";import{useDateInputMask as F}from"../../../composables/useDateInputMask.js";const S=/* @__PURE__ */e({name:"CLInputDatePicker",__name:"CLInputDatePicker",props:/* @__PURE__ */a({ariaLabel:{default:void 0},borderRadius:{default:void 0},color:{default:M.Neutral},size:{default:x.Small},variant:{default:L.Outline},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},form:{default:void 0},id:{},isRange:{type:Boolean,default:!0},label:{default:void 0},messages:{default:()=>[]},messageType:{default:void 0},name:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},orientation:{default:B.Vertical},placement:{default:V.BottomStart},placeholder:{default:void 0},required:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},testId:{default:"clll-input-date-picker"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,V="clll-input-date-picker",x=l(!1),M=l(),B=l(),S=l(),$=t(e,"modelValue"),z=l(""),{handleDateInput:w,isoToSlash:q,slashToISO:T,validateDate:O}=F();u($,()=>{const e=q($.value?.start??null),l=q($.value?.end??null);e?a.isRange&&l?z.value=`${e} - ${l}`:z.value=e:z.value=""},{immediate:!0,deep:!0});const P=n(()=>M.value?.$el),{floatingStyles:U}=g(P,S,{middleware:[h(8),k(),C()],placement:l(a.placement),whileElementsMounted:_,open:x}),G=()=>{a.disabled||a.busy||(x.value=!x.value,x.value?(a.onFocus?.(new FocusEvent("focus")),B.value?.initializeDraft()):a.onBlur?.(new FocusEvent("blur")))},H=n(()=>{const e=B.value?.draftStart,l=B.value?.draftEnd;return a.isRange?!!e&&!!l:!!e}),N=()=>{x.value&&(x.value=!1,a.onBlur?.(new FocusEvent("blur")))};E({escHandler:N});const A=e=>{const a=e.target,l=M.value?.$el,t=S.value;x.value&&l&&t&&!l.contains(a)&&!t.contains(a)&&N()},J=()=>{H.value&&(B.value?.apply(),N(),a.onChange?.())},K=e=>{const l=O(e,a.isRange),t=M.value?.inputRef;return t&&(e&&!l?t.setCustomValidity("Invalid date format. Use YYYY/MM/DD"):t.setCustomValidity("")),l},Q=e=>{e&&w(e,z,a.isRange,()=>{K(z.value)})},W=e=>{if(!e)return;const l=e.target.value,t=K(l);if(!l.trim())return $.value={start:null,end:null},void a.onChange?.();if(t){if(a.isRange){const[e,a]=l.split("-").map(e=>e.trim());$.value={start:T(e),end:T(a)}}else $.value={start:T(l.trim()),end:null};a.onChange?.()}};return d(()=>{j&&document.addEventListener("click",A)}),s(()=>{j&&document.removeEventListener("click",A)}),(a,l)=>(i(),o("div",{class:r([V,e.fluid?`${V}--fluid`:""])},[f(p(Y),{id:e.id,ref_key:"inputRef",ref:M,modelValue:p(z),"onUpdate:modelValue":l[0]||(l[0]=e=>c(z)?z.value=e:null),"aria-label":e.ariaLabel,"border-radius":e.borderRadius,busy:e.busy,color:e.color,disabled:e.disabled,fluid:e.fluid,form:e.form,label:e.label,messages:e.messages,"message-type":e.messageType,name:e.name,orientation:e.orientation,placeholder:e.placeholder||(e.isRange?"YYYY/MM/DD - YYYY/MM/DD":"YYYY/MM/DD"),required:e.required,rounded:e.rounded,size:e.size,suffix:p(I).Calendar,"suffix-aria-label":e.ariaLabel||"Open calendar","test-id":e.testId,variant:e.variant,onInput:Q,onChange:W,onSuffixClick:G},null,8,["id","modelValue","aria-label","border-radius","busy","color","disabled","fluid","form","label","messages","message-type","name","orientation","placeholder","required","rounded","size","suffix","suffix-aria-label","test-id","variant"]),p(x)?(i(),o("div",{key:0,ref_key:"popoverRef",ref:S,class:r(`${V}__popover`),style:v({...p(U),zIndex:100})},[f(p(D),{"border-radius":e.borderRadius,variant:p(L).Ghost,padded:!1,rounded:e.rounded,elevated:""},{default:b(()=>[y("div",{class:r(`${V}__calendar-container`)},[f(p(R),{ref_key:"calendarRef",ref:B,modelValue:$.value,"onUpdate:modelValue":l[1]||(l[1]=e=>$.value=e),disabled:e.disabled,busy:e.busy,"is-range":e.isRange,fluid:"",onDateSelect:J},null,8,["modelValue","disabled","busy","is-range"])],2)]),_:1},8,["border-radius","variant","rounded"])],6)):m("",!0)],2))}});export{S as CLInputDatePicker,S as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLInputTimePicker.css';
|
|
3
|
-
import{defineComponent as e,mergeModels as a,ref as l,useModel as t,watch as o,computed as u,onMounted as i,onBeforeUnmount as s,createElementBlock as r,openBlock as d,normalizeClass as n,createVNode as m,createCommentVNode as f,unref as c,normalizeStyle as p,withCtx as v,createElementVNode as b,createTextVNode as y}from"vue";import{u as _,a as h,o as k,f as C,s as g}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as I}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as L}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import{defineComponent as e,mergeModels as a,ref as l,useModel as t,watch as o,computed as u,onMounted as i,onBeforeUnmount as s,createElementBlock as r,openBlock as d,normalizeClass as n,createVNode as m,createCommentVNode as f,unref as c,normalizeStyle as p,withCtx as v,createElementVNode as b,createTextVNode as y}from"vue";import{u as _,a as h,o as k,f as C,s as g}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as I}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as L}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-Chi6OUG_.js";import{CLInput as z}from"../CLInput/CLInput.js";import{CLTimePicker as V}from"../CLTimePicker/CLTimePicker.js";import{f as x,c as B,C as H,d as j,n as R}from"../../../chunks/index-CGlfDAYR.js";import{f as F}from"../../../chunks/index-C9S3C1LU.js";import{useEsc as T}from"../../../composables/useEsc.js";import{useTimeInputMask as P}from"../../../composables/useTimeInputMask.js";import{i as $}from"../../../chunks/helper-BlxFN3eF.js";const E=["data-testid"],M=/* @__PURE__ */e({name:"CLInputTimePicker",__name:"CLInputTimePicker",props:/* @__PURE__ */a({ariaLabel:{default:void 0},borderRadius:{default:void 0},color:{default:j.Neutral},size:{default:H.Small},variant:{default:B.Outline},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},form:{default:void 0},id:{},label:{default:void 0},messages:{default:()=>[]},messageType:{default:void 0},name:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{type:Function,default:void 0},orientation:{default:F.Vertical},placement:{default:R.BottomStart},placeholder:{default:void 0},required:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},testId:{default:"clll-input-time-picker"},use24Hour:{type:Boolean,default:!1}},{modelValue:{default:null},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,R="clll-input-time-picker",F=l(!1),M=l(),S=l(),w=l(),q=t(e,"modelValue"),U=l(""),{handleTimeInput:A,validateTime:G}=P();o(q,()=>{U.value=q.value??""},{immediate:!0});const N=u(()=>M.value?.$el),{floatingStyles:O}=_(N,w,{middleware:[k(8),C(),g()],placement:l(a.placement),whileElementsMounted:h,open:F}),D=()=>{a.disabled||a.busy||(F.value=!F.value,F.value?(a.onFocus?.(new FocusEvent("focus")),S.value?.initializeDraft()):a.onBlur?.(new FocusEvent("blur")))},J=()=>{F.value&&(F.value=!1,S.value?.cancel(),a.onBlur?.(new FocusEvent("blur")))};T({escHandler:J});const K=e=>{const a=e.target,l=M.value?.$el,t=w.value;F.value&&l&&t&&!l.contains(a)&&!t.contains(a)&&J()},Q=()=>{S.value?.apply(),F.value=!1,a.onChange?.()},W=()=>{S.value?.reset(),a.onReset?.(),a.onChange?.()},X=()=>{J()},Y=e=>{const l=G(e,a.use24Hour),t=M.value?.inputRef;return t&&(e&&!l?t.setCustomValidity(a.use24Hour?"Invalid format. Use HH:mm":"Invalid format. Use hh:mm AM/PM"):t.setCustomValidity("")),l},Z=e=>{e&&A(e,U,a.use24Hour,()=>{Y(U.value)})},ee=e=>{if(!e)return;const l=e.target.value,t=Y(l);if(!l.trim())return q.value=null,void a.onChange?.();t&&(q.value=l.trim(),a.onChange?.())};return i(()=>{$&&document.addEventListener("click",K)}),s(()=>{$&&document.removeEventListener("click",K)}),(a,l)=>(d(),r("div",{class:n([R,e.fluid?`${R}--fluid`:""]),"data-testid":e.testId},[m(c(z),{id:e.id,ref_key:"inputRef",ref:M,modelValue:U.value,"onUpdate:modelValue":l[0]||(l[0]=e=>U.value=e),"aria-label":e.ariaLabel,"border-radius":e.borderRadius,busy:e.busy,color:e.color,disabled:e.disabled,fluid:e.fluid,form:e.form,label:e.label,messages:e.messages,"message-type":e.messageType,name:e.name,orientation:e.orientation,placeholder:e.placeholder||(e.use24Hour?"HH:mm":"hh:mm AM/PM"),required:e.required,rounded:e.rounded,size:e.size,suffix:c(x).Clock,"suffix-aria-label":e.ariaLabel||"Open time picker","test-id":`${e.testId}__input`,variant:e.variant,onInput:Z,onChange:ee,onSuffixClick:D},null,8,["id","modelValue","aria-label","border-radius","busy","color","disabled","fluid","form","label","messages","message-type","name","orientation","placeholder","required","rounded","size","suffix","suffix-aria-label","test-id","variant"]),F.value?(d(),r("div",{key:0,ref_key:"popoverRef",ref:w,class:n(`${R}__popover`),style:p({...c(O),zIndex:100})},[m(c(L),{"border-radius":e.borderRadius,variant:c(B).Ghost,padded:!1,rounded:e.rounded,elevated:""},{default:v(()=>[b("div",{class:n(`${R}__container`)},[m(c(V),{ref_key:"timePickerRef",ref:S,modelValue:q.value,"onUpdate:modelValue":l[1]||(l[1]=e=>q.value=e),disabled:e.disabled,busy:e.busy,"use24-hour":e.use24Hour,fluid:""},null,8,["modelValue","disabled","busy","use24-hour"]),b("div",{class:n(`${R}__footer`)},[m(c(I),{color:c(j).Neutral,variant:c(B).Ghost,size:c(H).Small,onClick:X},{default:v(()=>[...l[2]||(l[2]=[y(" Cancel ",-1)])]),_:1},8,["color","variant","size"]),b("div",{class:n(`${R}__footer-right`)},[m(c(I),{color:c(j).Neutral,variant:c(B).Ghost,size:c(H).Small,onClick:W},{default:v(()=>[...l[3]||(l[3]=[y(" Reset ",-1)])]),_:1},8,["color","variant","size"]),m(c(I),{color:c(j).Primary,size:c(H).Small,onClick:Q},{default:v(()=>[...l[4]||(l[4]=[y(" Apply ",-1)])]),_:1},8,["color","size"])],2)],2)],2)]),_:1},8,["border-radius","variant","rounded"])],6)):f("",!0)],10,E))}});export{M as CLInputTimePicker,M as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLDropdownMenu.css';
|
|
3
|
-
import{defineComponent as e,ref as t,computed as o,onBeforeUnmount as n,createElementBlock as a,openBlock as d,normalizeClass as r,createVNode as l,createCommentVNode as i,unref as s,withCtx as u,createTextVNode as c,toDisplayString as p,normalizeStyle as f,renderSlot as b}from"vue";import{u as m,a as _,f as v,o as w,s as g}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as h}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as y}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import{defineComponent as e,ref as t,computed as o,onBeforeUnmount as n,createElementBlock as a,openBlock as d,normalizeClass as r,createVNode as l,createCommentVNode as i,unref as s,withCtx as u,createTextVNode as c,toDisplayString as p,normalizeStyle as f,renderSlot as b}from"vue";import{u as m,a as _,f as v,o as w,s as g}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as h}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as y}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-Chi6OUG_.js";import{b as B,i as $}from"../../../chunks/helper-BlxFN3eF.js";import{useDropdown as z}from"../../../composables/useDropdown.js";import{useEsc as k}from"../../../composables/useEsc.js";import{n as x,e as C,f as I,c as E,C as L,d as D,i as S}from"../../../chunks/index-CGlfDAYR.js";const H=["data-testid"],j=["id","aria-labelledby","aria-hidden"],O=/* @__PURE__ */e({name:"CLDropdownMenu",__name:"CLDropdownMenu",props:{buttonAlign:{default:S.Center},buttonAriaLabel:{},buttonBorderRadius:{},buttonBusy:{type:Boolean},buttonColor:{default:D.Secondary},buttonDisabled:{type:Boolean},buttonHeight:{default:"auto"},buttonSize:{default:L.Small},buttonVariant:{default:E.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean},containerBordered:{type:Boolean,default:!0},containerBorderRadius:{},containerElevated:{type:Boolean,default:!1},contentWidth:{default:"auto"},dropdownId:{},fluid:{type:Boolean,default:!1},iconAfter:{default:I.ChevronDown},iconBefore:{},iconSize:{default:C.Tiny},isOpen:{type:Boolean,default:!1},label:{},onCloseHandler:{},onOpenHandler:{},placement:{default:x.BottomStart},testId:{default:"clll-dropdown-menu"},zIndex:{default:30}},setup(e,{expose:x}){const C=e;let I=t(),L=t();const S=t(),O=t(),A=t(C.isOpen),W=t(C.placement),R="clll-dropdown-menu",M=o(()=>"auto"===C.zIndex||B(C.zIndex)?C.zIndex:C.zIndex.toString()),V=e=>{e&&(I.value=e)},G=e=>{e&&(L.value=e)},N=()=>{T.value?F():q()},{open:T,openDropdown:q,closeDropdown:F,clearEventListeners:J}=z({triggerElem:I,dropdownRef:O,openDropdownHandler:()=>{A.value=!0,C?.onOpenHandler?.(),P(),$&&document.addEventListener("click",Q)},closeDropdownHandler:()=>{A.value=!1,C?.onCloseHandler?.(),$&&document.removeEventListener("click",Q),U(),J()}});x({close:()=>{F(),J(),U()},open:()=>{q()}});const{floatingStyles:K,update:P}=m(S,O,{middleware:[v(),w(10),g()],placement:W,open:A,whileElementsMounted:_}),Q=e=>{A.value&&O.value?.contains(e?.target)&&F()},{clearEventListeners:U}=k({escHandler:F,triggerElem:I});return n(()=>{$&&document.removeEventListener("click",Q),U(),J()}),(t,o)=>(d(),a("div",{class:r([`${R}__menu`,e.fluid?`${R}__menu--fluid`:""]),"data-testid":e.testId},[l(s(h),{id:`${R}__toggle--${e.dropdownId}`,ref_key:"anchor",ref:S,"aria-controls":`${R}--${e.dropdownId}`,"aria-expanded":s(A)||e.isOpen,"aria-label":e.buttonAriaLabel,"align-content":e.buttonAlign,busy:e.buttonBusy,disabled:e.buttonDisabled||e.buttonBusy,class:r(`${R}__toggle`),color:e.buttonColor,"border-radius":e.buttonBorderRadius,"forward-ref":V,height:e.buttonHeight,"icon-after":e.iconAfter,"icon-before":e.iconBefore,"icon-size":e.iconSize,size:e.buttonSize,"test-id":`${R}__toggle`,variant:e.buttonVariant,width:e.fluid?"100%":e.buttonWidth,wrap:e.buttonWrapped,"on-click":N},{default:u(()=>[c(p(e.label),1)]),_:1},8,["id","aria-controls","aria-expanded","aria-label","align-content","busy","disabled","class","color","border-radius","height","icon-after","icon-before","icon-size","size","test-id","variant","width","wrap"]),s(A)||e.isOpen?(d(),a("div",{key:0,id:`${R}--${e.dropdownId}`,ref_key:"dropdownElem",ref:O,"aria-labelledby":`${R}__toggle--${e.dropdownId}`,"aria-hidden":!(s(A)||e.isOpen),class:r([`${R}__dropdown`,`${R}__dropdown--${s(W)}`]),style:f({...s(K),zIndex:s(M)})},[l(s(y),{bordered:e.containerBordered,"border-radius":e.containerBorderRadius,color:s(D).Neutral,elevated:e.containerElevated,"forward-ref":G,padded:!1,"test-id":`${R}__content`,variant:s(E).Ghost,width:e.contentWidth},{default:u(()=>[b(t.$slots,"content")]),_:3},8,["bordered","border-radius","color","elevated","test-id","variant","width"])],14,j)):i("",!0)],10,H))}});export{O as CLDropdownMenu,O as default};
|
|
@@ -11,17 +11,17 @@ interface Input {
|
|
|
11
11
|
/** The element reference to measure */
|
|
12
12
|
elementRef?: Ref<HTMLElement | undefined | null>;
|
|
13
13
|
/** The dimension to measure ('width' or 'height') */
|
|
14
|
-
dimension?: SizeDimension
|
|
14
|
+
dimension?: SizeDimension | ComputedRef<SizeDimension> | Ref<SizeDimension>;
|
|
15
15
|
/** Size calculation mode: 'percentage' uses snapPoint, 'auto' measures content */
|
|
16
|
-
mode?: SizeMode
|
|
16
|
+
mode?: SizeMode | ComputedRef<SizeMode> | Ref<SizeMode>;
|
|
17
17
|
/** When mode is 'percentage', this value (0-1) determines the size as a percentage of viewport */
|
|
18
|
-
snapPoint?: number
|
|
18
|
+
snapPoint?: number | ComputedRef<number> | Ref<number>;
|
|
19
19
|
/** When mode is 'auto', whether to observe content changes */
|
|
20
20
|
observeChanges?: boolean;
|
|
21
21
|
/** Debounce delay in milliseconds for ResizeObserver updates */
|
|
22
22
|
debounceDelay?: number;
|
|
23
23
|
/** Whether the element is currently visible/mounted */
|
|
24
|
-
isActive?: boolean | ComputedRef<boolean>;
|
|
24
|
+
isActive?: boolean | ComputedRef<boolean> | Ref<boolean>;
|
|
25
25
|
}
|
|
26
26
|
interface Return {
|
|
27
27
|
/** Computed size value (e.g., '50%' or '300px') */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import '../assets/core.css';
|
|
2
|
-
import{ref as e,computed as t,watch as a,nextTick as l}from"vue";import{i as u,a as i}from"../chunks/helper-BlxFN3eF.js";var o=/* @__PURE__ */(e=>(e.Width="width",e.Height="height",e))(o||{}),r=/* @__PURE__ */(e=>(e.Percentage="percentage",e.Auto="auto",e))(r||{});const n=({elementRef:o,dimension:r="width",mode:n="percentage",snapPoint:s=1,observeChanges:h=!0,debounceDelay:v=50,isActive:c=!1})=>{const d=e({}),m=e(null),g=e(),y=e(n),
|
|
2
|
+
import{ref as e,computed as t,watch as a,nextTick as l}from"vue";import{i as u,a as i}from"../chunks/helper-BlxFN3eF.js";var o=/* @__PURE__ */(e=>(e.Width="width",e.Height="height",e))(o||{}),r=/* @__PURE__ */(e=>(e.Percentage="percentage",e.Auto="auto",e))(r||{});const n=({elementRef:o,dimension:r="width",mode:n="percentage",snapPoint:s=1,observeChanges:h=!0,debounceDelay:v=50,isActive:c=!1})=>{const d=e({}),m=e(null),g=e(),y=e=>"object"==typeof e&&null!==e&&"value"in e?e.value:e,p=t(()=>y(n)),w=t(()=>y(s)),f=t(()=>y(r)),x=t(()=>{const e=w.value??1;return Math.max(0,Math.min(1,e))}),b=t(()=>"boolean"==typeof c?c:c.value),H=()=>{if(u&&o?.value&&"auto"===p.value)try{const e=o.value,t=e.style.width,a=e.style.height,l=e.style.maxWidth,u=e.style.maxHeight;e.style.width="auto",e.style.height="auto",e.style.maxWidth="none",e.style.maxHeight="none";const i=e.scrollWidth,r=e.scrollHeight,n=window.innerWidth,s=window.innerHeight;if(e.style.width=t,e.style.height=a,e.style.maxWidth=l,e.style.maxHeight=u,"height"===f.value){const e=Math.min(r,s);d.value={height:`${e}px`}}else{const e=Math.min(i,n);d.value={width:`${e}px`}}}catch(e){console.error("Error measuring element size:",e)}},W=()=>{if(u&&o?.value&&"auto"===p.value&&h)try{m.value&&m.value.disconnect(),m.value=new ResizeObserver(()=>{(()=>{if(u)try{g.value&&g.value.stop(),g.value||(g.value=i()),g.value.start(v,e=>{Math.min(e,v)===v&&(g.value?.stop(),H())})}catch(e){console.error("Error in debounced measure:",e)}})()}),m.value.observe(o.value)}catch(e){console.error("Error setting up ResizeObserver:",e)}},M=()=>{m.value&&(m.value.disconnect(),m.value=null)},z=t(()=>{if(!u)return"100%";if("auto"===p.value)return"height"===f.value?d.value.height||"auto":d.value.width||"auto";return 100*x.value+"%"});a(p,e=>{"auto"===e&&b.value?l(()=>{H(),W()}):(M(),d.value={})}),a(b,e=>{e&&"auto"===p.value?l(()=>{H(),W()}):(M(),e||(d.value={}))});return{size:z,measure:H,destroy:()=>{u&&(M(),g.value&&g.value.stop(),d.value={})}}};export{o as SizeDimension,r as SizeMode,n as useElementSize};
|