From d79dda69ad644c1d1dd11b61b46331d368672d30 Mon Sep 17 00:00:00 2001 From: Alexandre Belley <101218124+belleymambo@users.noreply.github.com> Date: Tue, 16 Dec 2025 12:01:14 -0500 Subject: [PATCH 1/7] Expose missing component types (#268) Closes #267 --- src/types.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/types.ts b/src/types.ts index 4035d4d..e21f8b0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -9,7 +9,7 @@ import type { QuesoDropdownOptions, QuesoDropdownProps, } from "@components/QuesoDropdown"; -import type { QuesoModalOpen, QuesoModalClose, QuesoModalMethods } from "@components/QuesoModal"; +import type { QuesoModalProps, QuesoModalOpen, QuesoModalClose, QuesoModalMethods } from "@components/QuesoModal"; import type { QuesoScrollableProps } from "@components/QuesoScrollable"; // Fields @@ -23,7 +23,12 @@ import type { QuesoCheckboxMultipleChoices, QuesoCheckboxMultipleProps, } from "@components/QuesoCheckboxMultiple"; -import type { QuesoSelectModel, QuesoSelectProps } from "@components/QuesoSelect"; +import type { + QuesoSelectModel, + QuesoSelectOption, + QuesoSelectOptions, + QuesoSelectProps, +} from "@components/QuesoSelect"; import type { QuesoSelectMultipleModel, QuesoSelectMultipleOption, @@ -53,6 +58,7 @@ export type { QuesoDropdownOptions, QuesoDropdownProps, // Modal + QuesoModalProps, QuesoModalOpen, QuesoModalClose, QuesoModalMethods, @@ -81,6 +87,8 @@ export type { QuesoCheckboxMultipleProps, // Select QuesoSelectModel, + QuesoSelectOption, + QuesoSelectOptions, QuesoSelectProps, QuesoSelectMultipleModel, QuesoSelectMultipleOption, From 856f76ee3469c5356e1231e039b210c1c64c9aaf Mon Sep 17 00:00:00 2001 From: Alexandre Belley <101218124+belleymambo@users.noreply.github.com> Date: Tue, 16 Dec 2025 12:25:43 -0500 Subject: [PATCH 2/7] Release/v0.5.2 (#269) * Bum version to v0.5.2 * New build * Missing Type Declaration for QuesoScrollable and QuesoModal in docs * FIX QuesoModal test * New new build --- dist/components/QuesoModal-B_td4Ajq.cjs | 1 + ...dal-CXRP75T5.js => QuesoModal-DgH5cWUl.js} | 50 ++++++++++--------- dist/components/QuesoModal-U4IC0VZm.cjs | 1 - .../components/QuesoModal/QuesoModal.vue.d.ts | 2 +- dist/declaration/types.d.ts | 6 +-- dist/index.cjs | 2 +- dist/index.js | 2 +- docs/components/modal.md | 18 +++++++ docs/components/scrollable.md | 9 ++++ package.json | 2 +- src/components/QuesoModal/QuesoModal.test.js | 18 ++++--- src/components/QuesoModal/QuesoModal.vue | 6 ++- 12 files changed, 79 insertions(+), 38 deletions(-) create mode 100644 dist/components/QuesoModal-B_td4Ajq.cjs rename dist/components/{QuesoModal-CXRP75T5.js => QuesoModal-DgH5cWUl.js} (65%) delete mode 100644 dist/components/QuesoModal-U4IC0VZm.cjs diff --git a/dist/components/QuesoModal-B_td4Ajq.cjs b/dist/components/QuesoModal-B_td4Ajq.cjs new file mode 100644 index 0000000..bbfa19f --- /dev/null +++ b/dist/components/QuesoModal-B_td4Ajq.cjs @@ -0,0 +1 @@ +"use strict";require('../assets/components/QuesoModal.css');const e=require("vue"),g=require("./QuesoDropdown-o5F1b4fx.cjs"),P=require("./QuesoCollapsible-D3MZTStb.cjs"),f=Symbol(),k=e.defineComponent({__name:"QuesoModalOverlay",setup(p){const{closeModal:l}=e.inject(f);return(m,n)=>(e.openBlock(),e.createElementBlock("div",{class:"queso-modal__overlay",onClick:n[0]||(n[0]=(...r)=>e.unref(l)&&e.unref(l)(...r))}))}}),S=["aria-expanded"],h={class:"queso-modal__content"},M=e.defineComponent({__name:"QuesoModal",props:{hasOverlay:{type:Boolean,default:!0},isScrollLocked:{type:Boolean,default:!0}},emits:["modal:open","modal:close"],setup(p,{expose:l,emit:m}){const n=p,r=m,s=e.ref(null),{activate:v,deactivate:b}=g.useFocusTrap(s),_=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed",'[tabindex]:not([tabindex="-1"])',"[contenteditable]"],y=e.computed(()=>s.value===null?!1:_.some(o=>s.value.querySelector(o)!==null)),c=o=>{y.value&&(o?v():b())},t=e.ref(!1),d=()=>{t.value=!0},u=()=>{t.value=!1};e.provide(f,{openModal:d,closeModal:u});const i=(o=!0)=>{n.isScrollLocked&&(document.documentElement.style.overflow=o?"hidden":"")};e.watch(t,o=>{o?(c(!0),i(!0),r("modal:open")):(c(!1),i(!1),r("modal:close"))}),e.onMounted(()=>{t.value&&(c(!0),i(!0))}),P.onKeyStroke("Escape",()=>{t.value&&(t.value=!1)});const a=e.reactive({isModalOpen:t,openModal:d,closeModal:u});return l({isModalOpen:e.computed(()=>t.value),openModal:d,closeModal:u}),(o,C)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(o.$slots,"trigger",e.normalizeProps(e.guardReactiveProps(a))),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",e.mergeProps({ref_key:"modalContainer",ref:s,class:["queso-modal",{"is-modal-open":t.value}],"aria-expanded":t.value},o.$attrs),[e.renderSlot(o.$slots,"beforeContent",e.normalizeProps(e.guardReactiveProps(a))),e.createElementVNode("div",h,[e.renderSlot(o.$slots,"content",e.normalizeProps(e.guardReactiveProps(a)),()=>[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps(a)))])]),e.renderSlot(o.$slots,"afterContent",e.normalizeProps(e.guardReactiveProps(a))),o.hasOverlay?e.renderSlot(o.$slots,"overlay",e.normalizeProps(e.mergeProps({key:0},a)),()=>[e.createVNode(e.unref(k))]):e.createCommentVNode("",!0)],16,S)]))],64))}});exports._sfc_main=M; diff --git a/dist/components/QuesoModal-CXRP75T5.js b/dist/components/QuesoModal-DgH5cWUl.js similarity index 65% rename from dist/components/QuesoModal-CXRP75T5.js rename to dist/components/QuesoModal-DgH5cWUl.js index 44894f9..6303284 100644 --- a/dist/components/QuesoModal-CXRP75T5.js +++ b/dist/components/QuesoModal-DgH5cWUl.js @@ -1,14 +1,14 @@ -import { defineComponent as k, inject as B, openBlock as m, createElementBlock as M, unref as p, ref as _, computed as E, provide as q, watch as w, onMounted as N, reactive as P, Fragment as Q, renderSlot as a, normalizeProps as l, guardReactiveProps as s, createBlock as V, Teleport as j, createElementVNode as h, mergeProps as g, createVNode as x, createCommentVNode as D } from "vue"; +import { defineComponent as k, inject as E, openBlock as f, createElementBlock as $, unref as v, ref as _, computed as h, provide as q, watch as w, onMounted as N, reactive as P, Fragment as Q, renderSlot as a, normalizeProps as l, guardReactiveProps as s, createBlock as V, Teleport as j, createElementVNode as M, mergeProps as g, createVNode as x, createCommentVNode as D } from "vue"; import { u as K } from "./QuesoDropdown-Dxd1nopn.js"; import { o as L } from "./QuesoCollapsible-BAoVzf7E.js"; -import '../assets/components/QuesoModal.css';const $ = Symbol(), T = /* @__PURE__ */ k({ +import '../assets/components/QuesoModal.css';const C = Symbol(), T = /* @__PURE__ */ k({ __name: "QuesoModalOverlay", - setup(f) { - const { closeModal: n } = B($); - return (v, r) => (m(), M("div", { + setup(b) { + const { closeModal: n } = E(C); + return (y, r) => (f(), $("div", { class: "queso-modal__overlay", onClick: r[0] || (r[0] = //@ts-ignore - (...d) => p(n) && p(n)(...d)) + (...d) => v(n) && v(n)(...d)) })); } }), z = ["aria-expanded"], R = { class: "queso-modal__content" }, J = /* @__PURE__ */ k({ @@ -18,8 +18,8 @@ import '../assets/components/QuesoModal.css';const $ = Symbol(), T = /* @__PURE_ isScrollLocked: { type: Boolean, default: !0 } }, emits: ["modal:open", "modal:close"], - setup(f, { expose: n, emit: v }) { - const r = f, d = v, c = _(null), { activate: C, deactivate: S } = K(c), F = [ + setup(b, { expose: n, emit: y }) { + const r = b, d = y, c = _(null), { activate: O, deactivate: S } = K(c), F = [ "a[href]", "area[href]", "input:not([disabled])", @@ -31,21 +31,21 @@ import '../assets/components/QuesoModal.css';const $ = Symbol(), T = /* @__PURE_ "embed", '[tabindex]:not([tabindex="-1"])', "[contenteditable]" - ], O = E(() => c.value === null ? !1 : F.some((e) => c.value.querySelector(e) !== null)), u = (e) => { - O.value && (e ? C() : S()); - }, o = _(!1), b = () => { + ], B = h(() => c.value === null ? !1 : F.some((e) => c.value.querySelector(e) !== null)), u = (e) => { + B.value && (e ? O() : S()); + }, o = _(!1), i = () => { o.value = !0; - }, y = () => { + }, m = () => { o.value = !1; }; - q($, { openModal: b, closeModal: y }); - const i = (e = !0) => { + q(C, { openModal: i, closeModal: m }); + const p = (e = !0) => { r.isScrollLocked && (document.documentElement.style.overflow = e ? "hidden" : ""); }; w(o, (e) => { - e ? (u(!0), i(!0), d("modal:open")) : (u(!1), i(!1), d("modal:close")); + e ? (u(!0), p(!0), d("modal:open")) : (u(!1), p(!1), d("modal:close")); }), N(() => { - o.value && (u(!0), i(!0)); + o.value && (u(!0), p(!0)); }), L("Escape", () => { o.value && (o.value = !1); }); @@ -53,27 +53,31 @@ import '../assets/components/QuesoModal.css';const $ = Symbol(), T = /* @__PURE_ // States isModalOpen: o, // Methods - openModal: b, - closeModal: y + openModal: i, + closeModal: m }); - return n({ ...t }), (e, A) => (m(), M(Q, null, [ + return n({ + isModalOpen: h(() => o.value), + openModal: i, + closeModal: m + }), (e, A) => (f(), $(Q, null, [ a(e.$slots, "trigger", l(s(t))), - (m(), V(j, { to: "body" }, [ - h("div", g({ + (f(), V(j, { to: "body" }, [ + M("div", g({ ref_key: "modalContainer", ref: c, class: ["queso-modal", { "is-modal-open": o.value }], "aria-expanded": o.value }, e.$attrs), [ a(e.$slots, "beforeContent", l(s(t))), - h("div", R, [ + M("div", R, [ a(e.$slots, "content", l(s(t)), () => [ a(e.$slots, "default", l(s(t))) ]) ]), a(e.$slots, "afterContent", l(s(t))), e.hasOverlay ? a(e.$slots, "overlay", l(g({ key: 0 }, t)), () => [ - x(p(T)) + x(v(T)) ]) : D("", !0) ], 16, z) ])) diff --git a/dist/components/QuesoModal-U4IC0VZm.cjs b/dist/components/QuesoModal-U4IC0VZm.cjs deleted file mode 100644 index 223234d..0000000 --- a/dist/components/QuesoModal-U4IC0VZm.cjs +++ /dev/null @@ -1 +0,0 @@ -"use strict";require('../assets/components/QuesoModal.css');const e=require("vue"),g=require("./QuesoDropdown-o5F1b4fx.cjs"),P=require("./QuesoCollapsible-D3MZTStb.cjs"),f=Symbol(),k=e.defineComponent({__name:"QuesoModalOverlay",setup(u){const{closeModal:r}=e.inject(f);return(i,l)=>(e.openBlock(),e.createElementBlock("div",{class:"queso-modal__overlay",onClick:l[0]||(l[0]=(...n)=>e.unref(r)&&e.unref(r)(...n))}))}}),S=["aria-expanded"],h={class:"queso-modal__content"},C=e.defineComponent({__name:"QuesoModal",props:{hasOverlay:{type:Boolean,default:!0},isScrollLocked:{type:Boolean,default:!0}},emits:["modal:open","modal:close"],setup(u,{expose:r,emit:i}){const l=u,n=i,s=e.ref(null),{activate:v,deactivate:b}=g.useFocusTrap(s),_=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed",'[tabindex]:not([tabindex="-1"])',"[contenteditable]"],y=e.computed(()=>s.value===null?!1:_.some(o=>s.value.querySelector(o)!==null)),c=o=>{y.value&&(o?v():b())},t=e.ref(!1),m=()=>{t.value=!0},p=()=>{t.value=!1};e.provide(f,{openModal:m,closeModal:p});const d=(o=!0)=>{l.isScrollLocked&&(document.documentElement.style.overflow=o?"hidden":"")};e.watch(t,o=>{o?(c(!0),d(!0),n("modal:open")):(c(!1),d(!1),n("modal:close"))}),e.onMounted(()=>{t.value&&(c(!0),d(!0))}),P.onKeyStroke("Escape",()=>{t.value&&(t.value=!1)});const a=e.reactive({isModalOpen:t,openModal:m,closeModal:p});return r({...a}),(o,M)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(o.$slots,"trigger",e.normalizeProps(e.guardReactiveProps(a))),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",e.mergeProps({ref_key:"modalContainer",ref:s,class:["queso-modal",{"is-modal-open":t.value}],"aria-expanded":t.value},o.$attrs),[e.renderSlot(o.$slots,"beforeContent",e.normalizeProps(e.guardReactiveProps(a))),e.createElementVNode("div",h,[e.renderSlot(o.$slots,"content",e.normalizeProps(e.guardReactiveProps(a)),()=>[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps(a)))])]),e.renderSlot(o.$slots,"afterContent",e.normalizeProps(e.guardReactiveProps(a))),o.hasOverlay?e.renderSlot(o.$slots,"overlay",e.normalizeProps(e.mergeProps({key:0},a)),()=>[e.createVNode(e.unref(k))]):e.createCommentVNode("",!0)],16,S)]))],64))}});exports._sfc_main=C; diff --git a/dist/declaration/components/QuesoModal/QuesoModal.vue.d.ts b/dist/declaration/components/QuesoModal/QuesoModal.vue.d.ts index 561b948..5643f4e 100644 --- a/dist/declaration/components/QuesoModal/QuesoModal.vue.d.ts +++ b/dist/declaration/components/QuesoModal/QuesoModal.vue.d.ts @@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots, { - isModalOpen: boolean; + isModalOpen: import('vue').ComputedRef; openModal: QuesoModalOpen; closeModal: QuesoModalClose; }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { diff --git a/dist/declaration/types.d.ts b/dist/declaration/types.d.ts index d8c8ddf..5f65275 100644 --- a/dist/declaration/types.d.ts +++ b/dist/declaration/types.d.ts @@ -1,16 +1,16 @@ import { QuesoClickableMarkup, QuesoClickableProps } from './components/QuesoClickable'; import { QuesoCollapsibleProps } from './components/QuesoCollapsible'; import { QuesoDropdownModel, QuesoDropdownOptionValue, QuesoDropdownOptionValues, QuesoDropdownOption, QuesoDropdownOptions, QuesoDropdownProps } from './components/QuesoDropdown'; -import { QuesoModalOpen, QuesoModalClose, QuesoModalMethods } from './components/QuesoModal'; +import { QuesoModalProps, QuesoModalOpen, QuesoModalClose, QuesoModalMethods } from './components/QuesoModal'; import { QuesoScrollableProps } from './components/QuesoScrollable'; import { QuesoFieldBaseExtraAttributes, QuesoFieldBase, QuesoFieldProps } from './components/QuesoField'; import { QuesoTextFieldModel, QuesoTextFieldType, QuesoTextFieldProps } from './components/QuesoTextField'; import { QuesoTextAreaModel, QuesoTextAreaProps } from './components/QuesoTextArea'; import { QuesoCheckboxModel, QuesoCheckboxProps } from './components/QuesoCheckbox'; import { QuesoCheckboxMultipleModel, QuesoCheckboxMultipleChoice, QuesoCheckboxMultipleChoices, QuesoCheckboxMultipleProps } from './components/QuesoCheckboxMultiple'; -import { QuesoSelectModel, QuesoSelectProps } from './components/QuesoSelect'; +import { QuesoSelectModel, QuesoSelectOption, QuesoSelectOptions, QuesoSelectProps } from './components/QuesoSelect'; import { QuesoSelectMultipleModel, QuesoSelectMultipleOption, QuesoSelectMultipleOptions, QuesoSelectMultipleProps } from './components/QuesoSelectMultiple'; import { QuesoRadioModel, QuesoRadioChoice, QuesoRadioChoices, QuesoRadioProps } from './components/QuesoRadio'; import { QuesoPasswordModel, QuesoPasswordProps } from './components/QuesoPassword'; -export type { QuesoClickableMarkup, QuesoClickableProps, QuesoCollapsibleProps, QuesoDropdownModel, QuesoDropdownOptionValue, QuesoDropdownOptionValues, QuesoDropdownOption, QuesoDropdownOptions, QuesoDropdownProps, QuesoModalOpen, QuesoModalClose, QuesoModalMethods, QuesoScrollableProps, QuesoFieldBaseExtraAttributes, QuesoFieldBase, QuesoFieldProps, QuesoTextFieldModel, QuesoTextFieldType, QuesoTextFieldProps, QuesoTextAreaModel, QuesoTextAreaProps, QuesoCheckboxModel, QuesoCheckboxProps, QuesoCheckboxMultipleModel, QuesoCheckboxMultipleChoice, QuesoCheckboxMultipleChoices, QuesoCheckboxMultipleProps, QuesoSelectModel, QuesoSelectProps, QuesoSelectMultipleModel, QuesoSelectMultipleOption, QuesoSelectMultipleOptions, QuesoSelectMultipleProps, QuesoRadioModel, QuesoRadioChoice, QuesoRadioChoices, QuesoRadioProps, QuesoPasswordModel, QuesoPasswordProps, }; +export type { QuesoClickableMarkup, QuesoClickableProps, QuesoCollapsibleProps, QuesoDropdownModel, QuesoDropdownOptionValue, QuesoDropdownOptionValues, QuesoDropdownOption, QuesoDropdownOptions, QuesoDropdownProps, QuesoModalProps, QuesoModalOpen, QuesoModalClose, QuesoModalMethods, QuesoScrollableProps, QuesoFieldBaseExtraAttributes, QuesoFieldBase, QuesoFieldProps, QuesoTextFieldModel, QuesoTextFieldType, QuesoTextFieldProps, QuesoTextAreaModel, QuesoTextAreaProps, QuesoCheckboxModel, QuesoCheckboxProps, QuesoCheckboxMultipleModel, QuesoCheckboxMultipleChoice, QuesoCheckboxMultipleChoices, QuesoCheckboxMultipleProps, QuesoSelectModel, QuesoSelectOption, QuesoSelectOptions, QuesoSelectProps, QuesoSelectMultipleModel, QuesoSelectMultipleOption, QuesoSelectMultipleOptions, QuesoSelectMultipleProps, QuesoRadioModel, QuesoRadioChoice, QuesoRadioChoices, QuesoRadioProps, QuesoPasswordModel, QuesoPasswordProps, }; diff --git a/dist/index.cjs b/dist/index.cjs index 7f7c595..4cf22f1 100644 --- a/dist/index.cjs +++ b/dist/index.cjs @@ -1 +1 @@ -"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/QuesoClickable-DhoVGYFp.cjs"),o=require("./components/QuesoDropdown-o5F1b4fx.cjs"),s=require("./components/QuesoModal-U4IC0VZm.cjs"),n=require("./components/QuesoCollapsible-D3MZTStb.cjs"),c=require("./components/QuesoScrollable-CIlahxa0.cjs"),u=require("./components/QuesoField-KPDzm51d.cjs"),t=require("./components/QuesoTextField-BQhlc_rx.cjs"),i=require("./components/QuesoTextArea-4HYucbzJ.cjs"),_=require("./components/QuesoCheckbox-D98YmG-z.cjs"),r=require("./components/QuesoCheckboxMultiple-E_XU_R8T.cjs"),l=require("./components/QuesoSelect-BADlh7Pw.cjs"),a=require("./components/QuesoPassword-OODaM-HJ.cjs"),m=require("./components/QuesoSelectMultiple-ps-tg5D5.cjs"),Q=require("./components/QuesoRadio-Bc23o1vp.cjs");exports.QuesoClickable=e._sfc_main;exports.QuesoDropdown=o._sfc_main;exports.QuesoModal=s._sfc_main;exports.QuesoCollapsible=n._sfc_main;exports.QuesoScrollable=c._sfc_main;exports.QuesoField=u._sfc_main;exports.QuesoTextField=t._sfc_main;exports.QuesoTextArea=i._sfc_main;exports.QuesoCheckbox=_._sfc_main;exports.QuesoCheckboxMultiple=r._sfc_main;exports.QuesoSelect=l._sfc_main;exports.QuesoPassword=a._sfc_main;exports.QuesoSelectMultiple=m._sfc_main;exports.QuesoRadio=Q._sfc_main; +"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/QuesoClickable-DhoVGYFp.cjs"),o=require("./components/QuesoDropdown-o5F1b4fx.cjs"),s=require("./components/QuesoModal-B_td4Ajq.cjs"),n=require("./components/QuesoCollapsible-D3MZTStb.cjs"),c=require("./components/QuesoScrollable-CIlahxa0.cjs"),u=require("./components/QuesoField-KPDzm51d.cjs"),t=require("./components/QuesoTextField-BQhlc_rx.cjs"),i=require("./components/QuesoTextArea-4HYucbzJ.cjs"),_=require("./components/QuesoCheckbox-D98YmG-z.cjs"),r=require("./components/QuesoCheckboxMultiple-E_XU_R8T.cjs"),l=require("./components/QuesoSelect-BADlh7Pw.cjs"),a=require("./components/QuesoPassword-OODaM-HJ.cjs"),m=require("./components/QuesoSelectMultiple-ps-tg5D5.cjs"),Q=require("./components/QuesoRadio-Bc23o1vp.cjs");exports.QuesoClickable=e._sfc_main;exports.QuesoDropdown=o._sfc_main;exports.QuesoModal=s._sfc_main;exports.QuesoCollapsible=n._sfc_main;exports.QuesoScrollable=c._sfc_main;exports.QuesoField=u._sfc_main;exports.QuesoTextField=t._sfc_main;exports.QuesoTextArea=i._sfc_main;exports.QuesoCheckbox=_._sfc_main;exports.QuesoCheckboxMultiple=r._sfc_main;exports.QuesoSelect=l._sfc_main;exports.QuesoPassword=a._sfc_main;exports.QuesoSelectMultiple=m._sfc_main;exports.QuesoRadio=Q._sfc_main; diff --git a/dist/index.js b/dist/index.js index 6ca9c36..23b292e 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,6 +1,6 @@ import { _ as r } from "./components/QuesoClickable-BNDFhhSl.js"; import { _ as a } from "./components/QuesoDropdown-Dxd1nopn.js"; -import { _ as p } from "./components/QuesoModal-CXRP75T5.js"; +import { _ as p } from "./components/QuesoModal-DgH5cWUl.js"; import { _ as l } from "./components/QuesoCollapsible-BAoVzf7E.js"; import { _ as f } from "./components/QuesoScrollable-BTC_jFP5.js"; import { _ as Q } from "./components/QuesoField-DYBEGM8C.js"; diff --git a/docs/components/modal.md b/docs/components/modal.md index e92eb49..dcf6196 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -185,3 +185,21 @@ The component applies the following CSS classes: - `--queso-modal-max-width` - Content max width (default: 80%) - `--queso-modal-max-height` - Content max height (default: 80%) - `--queso-modal-z` - Modal z-index (default: 400) + +## Type Declaration + +```ts +export type QuesoModalProps = { + hasOverlay?: boolean; + isScrollLocked?: boolean; +}; + +// Methods +export type QuesoModalOpen = () => void; +export type QuesoModalClose = () => void; + +export interface QuesoModalMethods { + openModal: QuesoModalOpen; + closeModal: QuesoModalClose; +} +``` diff --git a/docs/components/scrollable.md b/docs/components/scrollable.md index e5799a4..9cdb6f6 100644 --- a/docs/components/scrollable.md +++ b/docs/components/scrollable.md @@ -119,3 +119,12 @@ The component applies the following CSS classes: - `--overflow-shadow-before-opacity` - Top shadow opacity (controlled by component) - `--overflow-shadow-after-opacity` - Bottom shadow opacity (controlled by component) + +## Type Declaration + +```ts +export interface QuesoScrollableProps { + shadows?: boolean; + offset?: number; +} +``` diff --git a/package.json b/package.json index 00846f6..f7078ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@allomambo/queso", - "version": "0.5.1", + "version": "0.5.2", "description": "VueJS component library to use in conjunction with Arepa", "repository": "https://github.com/allomambo/queso.git", "homepage": "https://allomambo.github.io/queso/", diff --git a/src/components/QuesoModal/QuesoModal.test.js b/src/components/QuesoModal/QuesoModal.test.js index 07b201d..62e36a5 100644 --- a/src/components/QuesoModal/QuesoModal.test.js +++ b/src/components/QuesoModal/QuesoModal.test.js @@ -15,29 +15,35 @@ describe("QuesoModal", () => { test("openModal opens the modal", async () => { const wrapper = mount(QuesoModal, {}); - await wrapper.vm.openModal(); + wrapper.vm.openModal(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.isModalOpen).toBe(true); }); test("closeModal closes the modal", async () => { const wrapper = mount(QuesoModal, {}); - await wrapper.vm.openModal(); + wrapper.vm.openModal(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.isModalOpen).toBe(true); - await wrapper.vm.closeModal(); + wrapper.vm.closeModal(); + await wrapper.vm.$nextTick(); expect(wrapper.vm.isModalOpen).toBe(false); }); test("emits modal:open when opened", async () => { const wrapper = mount(QuesoModal, {}); - await wrapper.vm.openModal(); + wrapper.vm.openModal(); + await wrapper.vm.$nextTick(); expect(wrapper.emitted("modal:open")).toBeTruthy(); expect(wrapper.emitted("modal:open")).toHaveLength(1); }); test("emits modal:close when closed", async () => { const wrapper = mount(QuesoModal, {}); - await wrapper.vm.openModal(); - await wrapper.vm.closeModal(); + wrapper.vm.openModal(); + await wrapper.vm.$nextTick(); + wrapper.vm.closeModal(); + await wrapper.vm.$nextTick(); expect(wrapper.emitted("modal:close")).toBeTruthy(); expect(wrapper.emitted("modal:close")).toHaveLength(1); }); diff --git a/src/components/QuesoModal/QuesoModal.vue b/src/components/QuesoModal/QuesoModal.vue index 71b2fb6..50f4c6a 100644 --- a/src/components/QuesoModal/QuesoModal.vue +++ b/src/components/QuesoModal/QuesoModal.vue @@ -129,7 +129,11 @@ const exposedData = reactive({ closeModal, }); -defineExpose({ ...exposedData }); +defineExpose({ + isModalOpen: computed(() => isModalOpen.value), + openModal, + closeModal, +});