@codeandfunction/callaloo 5.10.0 → 5.11.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.
|
@@ -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:
|
|
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,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 s,onMounted as l,onBeforeUnmount as n,createElementBlock as i,createCommentVNode as u,unref as r,openBlock as d,normalizeStyle as v,normalizeClass as p,createElementVNode as m,renderSlot as c}from"vue";import{m as w}from"../../../chunks/index-CGlfDAYR.js";import{a as f}from"../../../chunks/utils-OYa6vYYI.js";import{useEsc as h}from"../../../composables/useEsc.js";import{useTheme as y}from"../../../composables/useTheme.js";import{SizeDimension as x,useElementSize as z,SizeMode as I}from"../../../composables/useElementSize.js";import{b,i as g,g as C,a as L}from"../../../chunks/helper-BlxFN3eF.js";const $=["data-testid"],_=/* @__PURE__ */e({name:"CLDrawer",__name:"CLDrawer",props:{autoSize:{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},snapPoint:{default:1},testId:{default:"clll-drawer"},width:{default:void 0},zIndex:{default:100}},emits:["drawer-open","drawer-close"],setup(e,{emit:_}){const k=_,S=y(),j=t("drawer-content"),B=300,E=o(!1),O=o(),D=o(0),M=o(!1),P=a(()=>T.isOpen||M.value),T=e,H="clll-drawer",A="clll-prevent-scroll",W=a(()=>T.position===w.Top||T.position===w.Bottom?x.Height:x.Width),{size:F,destroy:R}=z({elementRef:j,dimension:W.value,mode:T.autoSize?I.Auto:I.Percentage,snapPoint:T.snapPoint,observeChanges:!0,debounceDelay:50,isActive:a(()=>T.isOpen&&E.value)}),q=()=>{g&&window?.document.body.classList.add(A)},G=()=>{g&&window?.document.body.classList.remove(A)},J=a(()=>[H,`${H}--${T.position}`,E.value?`${H}--mounted`:""]),K=a(()=>[`${H}__content`,`${H}__content--${T.position}`]),N=a(()=>{if("auto"===T.zIndex)return T.zIndex;const e=b(T.zIndex)?parseInt(T.zIndex,10):T.zIndex;return e>0?e.toString():D.value.toString()}),Q=a(()=>((b(T.zIndex)?parseInt(T.zIndex,10):T.zIndex)-1).toString()),U=a(()=>{const e={...f(S),zIndex:N.value};return void 0!==T.left&&(e.left=T.left,void 0===T.width&&(e.width="auto")),void 0!==T.width&&(e.width=T.width),e}),V=a(()=>{const e=T.position===w.Top||T.position===w.Bottom,t=e?"height":"width",o={zIndex:N.value,[t]:F.value};return T.autoSize&&(e?o.maxHeight="100dvh":o.maxWidth="100vw"),o}),X=e=>{try{(e=>{try{const t=e?.target,o=j.value;return!(!g||!o||o.contains(t))}catch(t){return console.error(t),!1}})(e)&&(g&&window.removeEventListener("mousedown",X),ee())}catch(t){console.error(t)}},Y=()=>{g&&window.removeEventListener("mousedown",X)},Z=()=>{g&&(O.value&&O.value.stop(),Y(),G(),M.value=!1,R())},ee=()=>{T.isOpen&&(M.value=!0,E.value=!1,g?(O.value&&O.value.stop(),O.value||(O.value=L()),O.value.start(B,e=>{Math.min(e,B)===B&&(O.value?.stop(),T.onClose?.(),Z())})):(T.onClose?.(),Z()))};s(()=>T.isOpen,e=>{e?(M.value=!1,k("drawer-open"),q(),g&&(D.value=C()+1,O.value||(O.value=L()),O.value.start(100,e=>{100===Math.min(e,100)&&(O.value?.stop(),E.value=!0,T.dismissible&&(Y(),setTimeout(()=>{g&&window.addEventListener("mousedown",X)},100)))}),j.value&&j.value.focus())):(M.value=!0,j.value&&j.value.blur(),G(),Y(),O.value?(E.value=!1,O.value.start(B,e=>{Math.min(e,B)===B&&(O.value?.stop(),T.onClose?.(),Z())})):(E.value=!1,T.onClose?.(),Z()),k("drawer-close"))}),l(()=>{T.isOpen&&g&&(q(),D.value=C()+1,O.value||(O.value=L()),O.value.start(100,e=>{100===Math.min(e,100)&&(O.value?.stop(),E.value=!0)}),j.value&&j.value.focus())});const{clearEventListeners:te}=h({escHandler:T.dismissible?ee:void 0});return n(()=>{Z(),te(),O.value&&O.value.stop()}),(t,o)=>r(P)?(d(),i("div",{key:0,class:p(r(J)),"data-testid":e.testId,style:v(r(U))},[m("div",{ref:"drawer-content",class:p(r(K)),style:v(r(V)),role:"dialog",tabindex:-1},[c(t.$slots,"default")],6),e.overlay?(d(),i("div",{key:0,class:p(`${H}__overlay`),style:v({zIndex:r(Q)}),onClick:o[0]||(o[0]=t=>e.dismissible?ee():void 0)},null,6)):u("",!0)],14,$)):u("",!0)}});export{_ as CLDrawer,_ as default};
|
|
@@ -6,6 +6,8 @@ export interface CLDrawerProps {
|
|
|
6
6
|
dismissible?: boolean;
|
|
7
7
|
/** When set to `true`, the Drawer is visible. */
|
|
8
8
|
isOpen?: boolean;
|
|
9
|
+
/** Sets the CSS left position for the main container. Accepts any valid CSS `left` value (e.g. '250px', '20%'). */
|
|
10
|
+
left?: string;
|
|
9
11
|
/** A callback function to be called when the Drawer is closed. */
|
|
10
12
|
onClose?: CLGenericFunction;
|
|
11
13
|
/** When set to `true`, it renders an overlay behind the drawer. It's default value is `true`. */
|
|
@@ -16,6 +18,8 @@ export interface CLDrawerProps {
|
|
|
16
18
|
snapPoint?: number;
|
|
17
19
|
/** Sets a custom ID used for unit tests. */
|
|
18
20
|
testId?: string;
|
|
21
|
+
/** Sets the CSS width for the main container. Accepts any valid CSS `width` value (e.g. '400px', '100%'). */
|
|
22
|
+
width?: string;
|
|
19
23
|
/** The z-index of the Drawer. */
|
|
20
24
|
zIndex?: number | string;
|
|
21
25
|
}
|
|
@@ -27,6 +31,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
|
|
|
27
31
|
"onDrawer-close"?: (() => any) | undefined;
|
|
28
32
|
}>, {
|
|
29
33
|
testId: string;
|
|
34
|
+
left: string;
|
|
35
|
+
width: string;
|
|
30
36
|
position: CLDrawerPosition;
|
|
31
37
|
snapPoint: number;
|
|
32
38
|
overlay: boolean;
|