Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,36 @@ 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

publish:
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
1 change: 1 addition & 0 deletions dist/components/QuesoModal-B_td4Ajq.cjs
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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])",
Expand All @@ -31,49 +31,53 @@ 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);
});
const t = P({
// 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)
]))
Expand Down
1 change: 0 additions & 1 deletion dist/components/QuesoModal-U4IC0VZm.cjs

This file was deleted.

2 changes: 1 addition & 1 deletion dist/declaration/components/QuesoModal/QuesoModal.vue.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
hasOverlay: boolean;
isScrollLocked: boolean;
}>, {
isModalOpen: boolean;
isModalOpen: import('vue').ComputedRef<boolean>;
openModal: QuesoModalOpen;
closeModal: QuesoModalClose;
}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
Expand Down
6 changes: 3 additions & 3 deletions dist/declaration/types.d.ts
Original file line number Diff line number Diff line change
@@ -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, };
2 changes: 1 addition & 1 deletion dist/index.cjs
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion dist/index.js
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
18 changes: 18 additions & 0 deletions docs/components/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
```
9 changes: 9 additions & 0 deletions docs/components/scrollable.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
```
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -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 <allo@mambomambo.ca> (https://mambomambo.ca)",
"contributors": [
Expand Down
Loading