diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 340feab..756c046 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -3,15 +3,23 @@ name: Publish package on NPM 📦 on: release: types: [created] + workflow_dispatch: + +permissions: + id-token: write # Required for OIDC + contents: read jobs: build: runs-on: macos-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 with: node-version: 20 + # Ensure npm 11.5.1 or later is installed + - name: Update npm + run: npm install -g npm@latest - run: yarn ci - run: yarn build:lib @@ -19,11 +27,12 @@ jobs: needs: build runs-on: macos-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 with: node-version: 20 registry-url: https://registry.npmjs.org/ - - run: npm publish --access public - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + # Ensure npm 11.5.1 or later is installed + - name: Update npm + run: npm install -g npm@latest + - run: npm publish 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..4d1bde5 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,11 @@ { "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", + "repository": { + "type": "git", + "url": "git+https://github.com/allomambo/queso.git" + }, "homepage": "https://allomambo.github.io/queso/", "author": "MamboMambo (https://mambomambo.ca)", "contributors": [ 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, +});