@semplice-studio/pa-design-system 0.2.0 → 0.3.0

package/dist/components/PaModal/PaModal.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as F, useModel as O, computed as y, ref as R, watch as U, nextTick as P, onBeforeUnmount as q, openBlock as a, createBlock as x, Teleport as j, createElementBlock as i, createElementVNode as b, normalizeClass as G, createVNode as S, createCommentVNode as n, resolveDynamicComponent as H, withCtx as J, createTextVNode as Q, toDisplayString as D, renderSlot as I, mergeModels as X } from "vue";
-import M from "../PaIcon/PaIcon.vue.js";
+import { defineComponent as W, useModel as F, useId as O, computed as y, ref as R, watch as P, nextTick as U, onBeforeUnmount as q, openBlock as n, createBlock as x, Teleport as j, createElementBlock as i, createElementVNode as b, normalizeClass as G, createVNode as S, createCommentVNode as a, resolveDynamicComponent as H, withCtx as J, createTextVNode as Q, toDisplayString as D, renderSlot as I, mergeModels as X } from "vue";
+import T from "../PaIcon/PaIcon.vue.js";
 const Y = {
   key: 0,
   class: "pa-modal__wrapper"
@@ -9,15 +9,10 @@ const Y = {
 }, le = {
   key: 3,
   class: "pa-modal__body"
-}, ae = {
+}, ne = {
   key: 4,
   class: "pa-modal__footer"
-};
-let ne = 0;
-function ie() {
-  return ++ne;
-}
-const ce = /* @__PURE__ */ F({
+}, ae = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', se = /* @__PURE__ */ W({
   __name: "PaModal",
   props: /* @__PURE__ */ X({
     title: {},
@@ -33,13 +28,12 @@ const ce = /* @__PURE__ */ F({
   }),
   emits: ["update:open"],
   setup(t) {
-    const s = t, c = O(t, "open"), v = ie(), p = `pa-modal-${v}__title`, h = `pa-modal-${v}__description`, T = y(() => s.title ? p : void 0), A = y(() => s.subtitle ? h : void 0), z = y(() => `h${s.titleLevel}`), o = R(null), m = R(null);
+    const s = t, c = F(t, "open"), v = O(), p = `pa-modal-${v}__title`, h = `pa-modal-${v}__description`, A = y(() => s.title ? p : void 0), M = y(() => s.subtitle ? h : void 0), z = y(() => `h${s.titleLevel}`), o = R(null), m = R(null);
     let d = null, _ = "", k = "", u = !1, r = !1;
-    const K = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
     function w(e) {
-      return Array.from(e.querySelectorAll(K));
+      return Array.from(e.querySelectorAll(ae));
     }
-    function N(e) {
+    function K(e) {
       if (e.key !== "Tab" || !o.value) return;
       const l = w(o.value);
       if (l.length === 0) {
@@ -52,7 +46,7 @@ const ce = /* @__PURE__ */ F({
     function g(e) {
       e.key === "Escape" && (e.preventDefault(), c.value = !1);
     }
-    function V() {
+    function N() {
       if (u) return;
       _ = document.body.style.overflow, k = document.body.style.paddingRight;
       const e = window.innerWidth - document.documentElement.clientWidth;
@@ -61,24 +55,25 @@ const ce = /* @__PURE__ */ F({
     function E() {
       u && (document.body.style.overflow = _, document.body.style.paddingRight = k, u = !1);
     }
-    function W() {
+    function V() {
       r || (window.addEventListener("keydown", g), r = !0);
     }
     function B() {
       r && (window.removeEventListener("keydown", g), r = !1);
     }
-    U(
+    P(
       c,
       async (e) => {
-        if (e) {
-          if (d = document.activeElement, V(), W(), await P(), s.showClose && m.value)
-            m.value.focus();
-          else if (o.value) {
-            const l = w(o.value);
-            l.length > 0 ? l[0].focus() : o.value.focus();
-          }
-        } else
-          B(), E(), d && document.contains(d) && d.focus(), d = null;
+        if (!(typeof document > "u"))
+          if (e) {
+            if (d = document.activeElement, N(), V(), await U(), s.showClose && m.value)
+              m.value.focus();
+            else if (o.value) {
+              const l = w(o.value);
+              l.length > 0 ? l[0].focus() : o.value.focus();
+            }
+          } else
+            B(), E(), d && document.contains(d) && d.focus(), d = null;
       },
       { flush: "post", immediate: !0 }
     ), q(() => {
@@ -87,8 +82,8 @@ const ce = /* @__PURE__ */ F({
     function C() {
       c.value = !1;
     }
-    return (e, l) => (a(), x(j, { to: "body" }, [
-      c.value ? (a(), i("div", Y, [
+    return (e, l) => (n(), x(j, { to: "body" }, [
+      c.value ? (n(), i("div", Y, [
         b("div", {
           class: "pa-modal__backdrop",
           onClick: C
@@ -99,12 +94,12 @@ const ce = /* @__PURE__ */ F({
           role: "dialog",
           "aria-modal": "true",
           tabindex: "-1",
-          "aria-labelledby": T.value,
-          "aria-describedby": A.value,
+          "aria-labelledby": A.value,
+          "aria-describedby": M.value,
           class: G(["pa-modal", [`pa-modal--${t.size}`]]),
-          onKeydown: N
+          onKeydown: K
         }, [
-          t.showClose ? (a(), i("button", {
+          t.showClose ? (n(), i("button", {
             key: 0,
             ref_key: "closeButtonRef",
             ref: m,
@@ -113,16 +108,16 @@ const ce = /* @__PURE__ */ F({
             "aria-label": t.closeLabel,
             onClick: C
           }, [
-            S(M, {
+            S(T, {
               name: "x",
               size: "sm"
             })
-          ], 8, ee)) : n("", !0),
+          ], 8, ee)) : a("", !0),
           b("div", te, [
-            t.leadingIcon ? (a(), i("div", oe, [
-              S(M, { name: t.leadingIcon }, null, 8, ["name"])
-            ])) : n("", !0),
-            t.title ? (a(), x(H(z.value), {
+            t.leadingIcon ? (n(), i("div", oe, [
+              S(T, { name: t.leadingIcon }, null, 8, ["name"])
+            ])) : a("", !0),
+            t.title ? (n(), x(H(z.value), {
               key: 1,
               id: p,
               class: "pa-modal__title"
@@ -131,25 +126,25 @@ const ce = /* @__PURE__ */ F({
                 Q(D(t.title), 1)
               ]),
               _: 1
-            })) : n("", !0),
-            t.subtitle ? (a(), i("p", {
+            })) : a("", !0),
+            t.subtitle ? (n(), i("p", {
               key: 2,
               id: h,
               class: "pa-modal__subtitle"
-            }, D(t.subtitle), 1)) : n("", !0),
-            e.$slots.default ? (a(), i("div", le, [
+            }, D(t.subtitle), 1)) : a("", !0),
+            e.$slots.default ? (n(), i("div", le, [
               I(e.$slots, "default", {}, void 0, !0)
-            ])) : n("", !0),
-            e.$slots.footer ? (a(), i("div", ae, [
+            ])) : a("", !0),
+            e.$slots.footer ? (n(), i("div", ne, [
               I(e.$slots, "footer", {}, void 0, !0)
-            ])) : n("", !0)
+            ])) : a("", !0)
           ])
         ], 42, Z)
-      ])) : n("", !0)
+      ])) : a("", !0)
     ]));
   }
 });
 export {
-  ce as default
+  se as default
 };
 //# sourceMappingURL=PaModal.vue2.js.map

package/dist/components/PaModal/PaModal.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaModal.vue2.js","sources":["../../../src/components/PaModal/PaModal.vue"],"sourcesContent":["<script lang=\"ts\">\nlet modalUid = 0\nfunction nextModalId() {\n  return ++modalUid\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\nimport type { PaIconName } from '../PaIcon/PaIcon.vue'\n\nexport type PaModalSize = 'sm' | 'md' | 'lg'\n\nexport interface PaModalProps {\n  title?: string\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  subtitle?: string\n  leadingIcon?: PaIconName\n  showClose?: boolean\n  closeLabel?: string\n  size?: PaModalSize\n}\n\nconst props = withDefaults(defineProps<PaModalProps>(), {\n  titleLevel: 2,\n  showClose: true,\n  closeLabel: 'Chiudi',\n  size: 'md',\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst uid = nextModalId()\nconst titleId = `pa-modal-${uid}__title`\nconst descriptionId = `pa-modal-${uid}__description`\n\nconst labelledBy = computed(() => (props.title ? titleId : undefined))\nconst describedBy = computed(() => (props.subtitle ? descriptionId : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n\nconst modalRef = ref<HTMLElement | null>(null)\nconst closeButtonRef = ref<HTMLButtonElement | null>(null)\n\nlet previouslyFocusedElement: HTMLElement | null = null\nlet originalBodyOverflow = ''\nlet originalBodyPaddingRight = ''\nlet scrollLockActive = false\nlet escListenerAttached = false\n\nconst FOCUSABLE_SELECTOR =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n}\n\nfunction onModalKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !modalRef.value) return\n  const focusable = getFocusable(modalRef.value)\n  if (focusable.length === 0) {\n    event.preventDefault()\n    modalRef.value.focus()\n    return\n  }\n  const first = focusable[0]!\n  const last = focusable[focusable.length - 1]!\n  const active = document.activeElement as HTMLElement | null\n  if (event.shiftKey) {\n    if (active === first || !modalRef.value.contains(active)) {\n      event.preventDefault()\n      last.focus()\n    }\n  } else {\n    if (active === last || !modalRef.value.contains(active)) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n}\n\nfunction onWindowKeydownEsc(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault()\n    open.value = false\n  }\n}\n\nfunction lockScroll() {\n  if (scrollLockActive) return\n  originalBodyOverflow = document.body.style.overflow\n  originalBodyPaddingRight = document.body.style.paddingRight\n  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth\n  document.body.style.overflow = 'hidden'\n  if (scrollbarWidth > 0) {\n    document.body.style.paddingRight = `${scrollbarWidth}px`\n  }\n  scrollLockActive = true\n}\n\nfunction unlockScroll() {\n  if (!scrollLockActive) return\n  document.body.style.overflow = originalBodyOverflow\n  document.body.style.paddingRight = originalBodyPaddingRight\n  scrollLockActive = false\n}\n\nfunction attachEsc() {\n  if (escListenerAttached) return\n  window.addEventListener('keydown', onWindowKeydownEsc)\n  escListenerAttached = true\n}\n\nfunction detachEsc() {\n  if (!escListenerAttached) return\n  window.removeEventListener('keydown', onWindowKeydownEsc)\n  escListenerAttached = false\n}\n\nwatch(\n  open,\n  async (next) => {\n    if (next) {\n      previouslyFocusedElement = document.activeElement as HTMLElement | null\n      lockScroll()\n      attachEsc()\n      await nextTick()\n      if (props.showClose && closeButtonRef.value) {\n        closeButtonRef.value.focus()\n      } else if (modalRef.value) {\n        const focusable = getFocusable(modalRef.value)\n        if (focusable.length > 0) {\n          focusable[0]!.focus()\n        } else {\n          modalRef.value.focus()\n        }\n      }\n    } else {\n      detachEsc()\n      unlockScroll()\n      if (previouslyFocusedElement && document.contains(previouslyFocusedElement)) {\n        previouslyFocusedElement.focus()\n      }\n      previouslyFocusedElement = null\n    }\n  },\n  { flush: 'post', immediate: true },\n)\n\nonBeforeUnmount(() => {\n  detachEsc()\n  unlockScroll()\n})\n\nfunction close() {\n  open.value = false\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div v-if=\"open\"\n         class=\"pa-modal__wrapper\">\n      <div class=\"pa-modal__backdrop\"\n           @click=\"close\" />\n      <div ref=\"modalRef\"\n           role=\"dialog\"\n           aria-modal=\"true\"\n           tabindex=\"-1\"\n           :aria-labelledby=\"labelledBy\"\n           :aria-describedby=\"describedBy\"\n           class=\"pa-modal\"\n           :class=\"[`pa-modal--${size}`]\"\n           @keydown=\"onModalKeydown\">\n        <button v-if=\"showClose\"\n                ref=\"closeButtonRef\"\n                type=\"button\"\n                class=\"pa-modal__close\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\">\n          <PaIcon name=\"x\"\n                  size=\"sm\" />\n        </button>\n\n        <div class=\"pa-modal__container\">\n          <div v-if=\"leadingIcon\"\n               class=\"pa-modal__leading-icon\">\n            <PaIcon :name=\"leadingIcon\" />\n          </div>\n\n          <component :is=\"titleTag\"\n                     v-if=\"title\"\n                     :id=\"titleId\"\n                     class=\"pa-modal__title\">\n            {{ title }}\n          </component>\n\n          <p v-if=\"subtitle\"\n             :id=\"descriptionId\"\n             class=\"pa-modal__subtitle\">\n            {{ subtitle }}\n          </p>\n\n          <div v-if=\"$slots.default\"\n               class=\"pa-modal__body\">\n            <slot />\n          </div>\n\n          <div v-if=\"$slots.footer\"\n               class=\"pa-modal__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n.pa-modal__wrapper {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  container-type: inline-size;\n}\n\n.pa-modal__backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n}\n\n.pa-modal {\n  position: relative;\n  z-index: 1001;\n  background: var(--pa-color-bg-white);\n  border-radius: 16px;\n  box-shadow: var(--pa-shadow-elevation-04);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding: 24px 32px 32px 32px;\n  width: var(--pa-modal-width);\n  max-width: calc(100vw - 32px);\n}\n\n.pa-modal:focus {\n  outline: none;\n}\n\n.pa-modal--sm {\n  --pa-modal-width: 400px;\n}\n\n.pa-modal--md {\n  --pa-modal-width: 600px;\n}\n\n.pa-modal--lg {\n  --pa-modal-width: 800px;\n}\n\n.pa-modal__close {\n  width: 50px;\n  height: 48px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  background: transparent;\n  border: none;\n  color: var(--pa-color-text-secondary-gray);\n  cursor: pointer;\n  padding: 0;\n}\n\n.pa-modal__close:hover {\n  background: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-modal__close:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-modal__container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 24px;\n  width: 100%;\n}\n\n.pa-modal__leading-icon {\n  display: flex;\n  align-items: flex-start;\n  padding-bottom: 16px;\n  width: 100%;\n}\n\n.pa-modal__leading-icon :deep(svg) {\n  width: 32px;\n  height: 32px;\n}\n\n.pa-modal__title {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 700;\n  font-size: 24px;\n  line-height: 28px;\n  letter-spacing: -0.5px;\n  color: var(--pa-color-text-secondary-gray);\n  width: 100%;\n}\n\n.pa-modal__subtitle {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 20px;\n  color: var(--pa-color-text-secondary-gray);\n  width: 100%;\n}\n\n.pa-modal__body {\n  width: 100%;\n}\n\n.pa-modal__footer {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n@container (max-width: 600px) {\n  .pa-modal {\n    width: calc(100vw - 32px);\n    max-width: none;\n    padding: 24px;\n  }\n\n  .pa-modal__container {\n    align-items: flex-start;\n    justify-content: flex-start;\n    gap: 16px;\n  }\n\n  .pa-modal__leading-icon :deep(svg) {\n    width: 24px;\n    height: 24px;\n  }\n\n  .pa-modal__footer {\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: flex-start;\n    gap: 24px;\n  }\n}\n</style>\n"],"names":["modalUid","nextModalId","props","__props","open","_useModel","uid","titleId","descriptionId","labelledBy","computed","describedBy","titleTag","modalRef","ref","closeButtonRef","previouslyFocusedElement","originalBodyOverflow","originalBodyPaddingRight","scrollLockActive","escListenerAttached","FOCUSABLE_SELECTOR","getFocusable","root","onModalKeydown","event","focusable","first","last","active","onWindowKeydownEsc","lockScroll","scrollbarWidth","unlockScroll","attachEsc","detachEsc","watch","next","nextTick","onBeforeUnmount","close","_createBlock","_Teleport","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_createVNode","PaIcon","_hoisted_4","_hoisted_5","_resolveDynamicComponent","$slots","_hoisted_6","_renderSlot","_ctx","_hoisted_7"],"mappings":"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"}
+{"version":3,"file":"PaModal.vue2.js","sources":["../../../src/components/PaModal/PaModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\nimport type { PaIconName } from '../PaIcon/PaIcon.vue'\n\nexport type PaModalSize = 'sm' | 'md' | 'lg'\n\nexport interface PaModalProps {\n  title?: string\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  subtitle?: string\n  leadingIcon?: PaIconName\n  showClose?: boolean\n  closeLabel?: string\n  size?: PaModalSize\n}\n\nconst props = withDefaults(defineProps<PaModalProps>(), {\n  titleLevel: 2,\n  showClose: true,\n  closeLabel: 'Chiudi',\n  size: 'md',\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst uid = useId()\nconst titleId = `pa-modal-${uid}__title`\nconst descriptionId = `pa-modal-${uid}__description`\n\nconst labelledBy = computed(() => (props.title ? titleId : undefined))\nconst describedBy = computed(() => (props.subtitle ? descriptionId : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n\nconst modalRef = ref<HTMLElement | null>(null)\nconst closeButtonRef = ref<HTMLButtonElement | null>(null)\n\nlet previouslyFocusedElement: HTMLElement | null = null\nlet originalBodyOverflow = ''\nlet originalBodyPaddingRight = ''\nlet scrollLockActive = false\nlet escListenerAttached = false\n\nconst FOCUSABLE_SELECTOR =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n}\n\nfunction onModalKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !modalRef.value) return\n  const focusable = getFocusable(modalRef.value)\n  if (focusable.length === 0) {\n    event.preventDefault()\n    modalRef.value.focus()\n    return\n  }\n  const first = focusable[0]!\n  const last = focusable[focusable.length - 1]!\n  const active = document.activeElement as HTMLElement | null\n  if (event.shiftKey) {\n    if (active === first || !modalRef.value.contains(active)) {\n      event.preventDefault()\n      last.focus()\n    }\n  } else {\n    if (active === last || !modalRef.value.contains(active)) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n}\n\nfunction onWindowKeydownEsc(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault()\n    open.value = false\n  }\n}\n\nfunction lockScroll() {\n  if (scrollLockActive) return\n  originalBodyOverflow = document.body.style.overflow\n  originalBodyPaddingRight = document.body.style.paddingRight\n  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth\n  document.body.style.overflow = 'hidden'\n  if (scrollbarWidth > 0) {\n    document.body.style.paddingRight = `${scrollbarWidth}px`\n  }\n  scrollLockActive = true\n}\n\nfunction unlockScroll() {\n  if (!scrollLockActive) return\n  document.body.style.overflow = originalBodyOverflow\n  document.body.style.paddingRight = originalBodyPaddingRight\n  scrollLockActive = false\n}\n\nfunction attachEsc() {\n  if (escListenerAttached) return\n  window.addEventListener('keydown', onWindowKeydownEsc)\n  escListenerAttached = true\n}\n\nfunction detachEsc() {\n  if (!escListenerAttached) return\n  window.removeEventListener('keydown', onWindowKeydownEsc)\n  escListenerAttached = false\n}\n\nwatch(\n  open,\n  async (next) => {\n    if (typeof document === 'undefined') return\n    if (next) {\n      previouslyFocusedElement = document.activeElement as HTMLElement | null\n      lockScroll()\n      attachEsc()\n      await nextTick()\n      if (props.showClose && closeButtonRef.value) {\n        closeButtonRef.value.focus()\n      } else if (modalRef.value) {\n        const focusable = getFocusable(modalRef.value)\n        if (focusable.length > 0) {\n          focusable[0]!.focus()\n        } else {\n          modalRef.value.focus()\n        }\n      }\n    } else {\n      detachEsc()\n      unlockScroll()\n      if (previouslyFocusedElement && document.contains(previouslyFocusedElement)) {\n        previouslyFocusedElement.focus()\n      }\n      previouslyFocusedElement = null\n    }\n  },\n  { flush: 'post', immediate: true },\n)\n\nonBeforeUnmount(() => {\n  detachEsc()\n  unlockScroll()\n})\n\nfunction close() {\n  open.value = false\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div v-if=\"open\"\n         class=\"pa-modal__wrapper\">\n      <div class=\"pa-modal__backdrop\"\n           @click=\"close\" />\n      <div ref=\"modalRef\"\n           role=\"dialog\"\n           aria-modal=\"true\"\n           tabindex=\"-1\"\n           :aria-labelledby=\"labelledBy\"\n           :aria-describedby=\"describedBy\"\n           class=\"pa-modal\"\n           :class=\"[`pa-modal--${size}`]\"\n           @keydown=\"onModalKeydown\">\n        <button v-if=\"showClose\"\n                ref=\"closeButtonRef\"\n                type=\"button\"\n                class=\"pa-modal__close\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\">\n          <PaIcon name=\"x\"\n                  size=\"sm\" />\n        </button>\n\n        <div class=\"pa-modal__container\">\n          <div v-if=\"leadingIcon\"\n               class=\"pa-modal__leading-icon\">\n            <PaIcon :name=\"leadingIcon\" />\n          </div>\n\n          <component :is=\"titleTag\"\n                     v-if=\"title\"\n                     :id=\"titleId\"\n                     class=\"pa-modal__title\">\n            {{ title }}\n          </component>\n\n          <p v-if=\"subtitle\"\n             :id=\"descriptionId\"\n             class=\"pa-modal__subtitle\">\n            {{ subtitle }}\n          </p>\n\n          <div v-if=\"$slots.default\"\n               class=\"pa-modal__body\">\n            <slot />\n          </div>\n\n          <div v-if=\"$slots.footer\"\n               class=\"pa-modal__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n.pa-modal__wrapper {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  container-type: inline-size;\n}\n\n.pa-modal__backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n}\n\n.pa-modal {\n  position: relative;\n  z-index: 1001;\n  background: var(--pa-color-bg-white);\n  border-radius: 16px;\n  box-shadow: var(--pa-shadow-elevation-04);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding: 24px 32px 32px 32px;\n  width: var(--pa-modal-width);\n  max-width: calc(100vw - 32px);\n}\n\n.pa-modal:focus {\n  outline: none;\n}\n\n.pa-modal--sm {\n  --pa-modal-width: 400px;\n}\n\n.pa-modal--md {\n  --pa-modal-width: 600px;\n}\n\n.pa-modal--lg {\n  --pa-modal-width: 800px;\n}\n\n.pa-modal__close {\n  width: 50px;\n  height: 48px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  background: transparent;\n  border: none;\n  color: var(--pa-color-text-secondary-gray);\n  cursor: pointer;\n  padding: 0;\n}\n\n.pa-modal__close:hover {\n  background: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-modal__close:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-modal__container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 24px;\n  width: 100%;\n}\n\n.pa-modal__leading-icon {\n  display: flex;\n  align-items: flex-start;\n  padding-bottom: 16px;\n  width: 100%;\n}\n\n.pa-modal__leading-icon :deep(svg) {\n  width: 32px;\n  height: 32px;\n}\n\n.pa-modal__title {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 700;\n  font-size: 24px;\n  line-height: 28px;\n  letter-spacing: -0.5px;\n  color: var(--pa-color-text-secondary-gray);\n  width: 100%;\n}\n\n.pa-modal__subtitle {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 20px;\n  color: var(--pa-color-text-secondary-gray);\n  width: 100%;\n}\n\n.pa-modal__body {\n  width: 100%;\n}\n\n.pa-modal__footer {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n@container (max-width: 600px) {\n  .pa-modal {\n    width: calc(100vw - 32px);\n    max-width: none;\n    padding: 24px;\n  }\n\n  .pa-modal__container {\n    align-items: flex-start;\n    justify-content: flex-start;\n    gap: 16px;\n  }\n\n  .pa-modal__leading-icon :deep(svg) {\n    width: 24px;\n    height: 24px;\n  }\n\n  .pa-modal__footer {\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: flex-start;\n    gap: 24px;\n  }\n}\n</style>\n"],"names":["FOCUSABLE_SELECTOR","props","__props","open","_useModel","uid","useId","titleId","descriptionId","labelledBy","computed","describedBy","titleTag","modalRef","ref","closeButtonRef","previouslyFocusedElement","originalBodyOverflow","originalBodyPaddingRight","scrollLockActive","escListenerAttached","getFocusable","root","onModalKeydown","event","focusable","first","last","active","onWindowKeydownEsc","lockScroll","scrollbarWidth","unlockScroll","attachEsc","detachEsc","watch","next","nextTick","onBeforeUnmount","close","_createBlock","_Teleport","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_createVNode","PaIcon","_hoisted_4","_hoisted_5","_resolveDynamicComponent","$slots","_hoisted_6","_renderSlot","_ctx","_hoisted_7"],"mappings":"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"}

package/dist/components/PaMonthPicker/PaMonthPicker.vue.d.ts

@@ -1,6 +1,5 @@
-export declare function nextPaMonthPickerId(): string;
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
-    display?: "popover" | "inline";
+type __VLS_Props = {
+    display?: 'popover' | 'inline';
     placeholder?: string;
     label?: string;
     required?: boolean;
@@ -14,28 +13,17 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     min?: Date | null;
     max?: Date | null;
     disabledMonths?: (date: Date) => boolean;
-} & {
+};
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: Date | null;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    suffix?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: Date | null) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    display?: "popover" | "inline";
-    placeholder?: string;
-    label?: string;
-    required?: boolean;
-    helperText?: string;
-    error?: string | boolean;
-    valid?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    id?: string;
-    name?: string;
-    min?: Date | null;
-    max?: Date | null;
-    disabledMonths?: (date: Date) => boolean;
-} & {
-    modelValue?: Date | null;
-}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: Date | null) => any) | undefined;
 }>, {
     error: string | boolean;
@@ -48,9 +36,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     max: Date | null;
     display: "popover" | "inline";
     disabledMonths: (date: Date) => boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    suffix?: (props: {}) => any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/components/PaMonthPicker/PaMonthPicker.vue.js

@@ -1,10 +1,8 @@
 import o from "./PaMonthPicker.vue2.js";
-import { nextPaMonthPickerId as p } from "./PaMonthPicker.vue2.js";
 /* empty css                   */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-f92c8373"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-bb0ffaf9"]]);
 export {
-  c as default,
-  p as nextPaMonthPickerId
+  m as default
 };
 //# sourceMappingURL=PaMonthPicker.vue.js.map

package/dist/components/PaMonthPicker/PaMonthPicker.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaMonthPicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"PaMonthPicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/PaMonthPicker/PaMonthPicker.vue2.js

@@ -1,20 +1,15 @@
-import { defineComponent as le, useModel as ie, ref as h, computed as o, watch as ue, onBeforeUnmount as se, openBlock as v, createElementBlock as f, normalizeClass as g, createTextVNode as de, toDisplayString as b, createCommentVNode as k, withKeys as S, withModifiers as q, createElementVNode as d, renderSlot as ce, createVNode as Y, withDirectives as ve, Fragment as fe, renderList as pe, vShow as me, mergeModels as he, nextTick as j } from "vue";
+import { defineComponent as ie, useModel as ue, ref as h, useId as j, computed as o, watch as se, onBeforeUnmount as de, openBlock as v, createElementBlock as p, normalizeClass as g, createTextVNode as ce, toDisplayString as b, createCommentVNode as k, withKeys as S, withModifiers as q, createElementVNode as d, renderSlot as ve, createVNode as Y, withDirectives as pe, Fragment as fe, renderList as me, vShow as he, mergeModels as ge, nextTick as J } from "vue";
 import B from "../PaIcon/PaIcon.vue.js";
-const ge = ["for"], be = {
+const be = ["for"], ke = {
   key: 0,
   class: "pa-month-picker__required",
   "aria-hidden": "true"
-}, ke = ["id", "disabled", "aria-expanded", "aria-required", "aria-invalid", "aria-readonly", "aria-describedby", "onKeydown"], ye = { class: "pa-month-picker__value" }, we = ["name", "value", "disabled", "readonly", "required"], De = { class: "pa-month-picker__header" }, _e = {
+}, ye = ["id", "disabled", "aria-expanded", "aria-required", "aria-invalid", "aria-readonly", "aria-describedby", "onKeydown"], we = { class: "pa-month-picker__value" }, De = ["name", "value", "disabled", "readonly", "required"], _e = { class: "pa-month-picker__header" }, Me = {
   class: "pa-month-picker__year-label",
   "aria-live": "polite"
-}, Me = ["disabled", "tabindex", "aria-pressed", "onClick", "onKeydown"], Te = ["id"];
-let Ae = 0;
-function Ee() {
-  return `pa-month-picker-${++Ae}`;
-}
-const Se = /* @__PURE__ */ le({
+}, Te = ["disabled", "tabindex", "aria-pressed", "onClick", "onKeydown"], Ae = ["id"], Ne = /* @__PURE__ */ ie({
   __name: "PaMonthPicker",
-  props: /* @__PURE__ */ he({
+  props: /* @__PURE__ */ ge({
     display: { default: "popover" },
     placeholder: { default: "mese / aaaa" },
     label: {},
@@ -35,7 +30,7 @@ const Se = /* @__PURE__ */ le({
   }),
   emits: ["update:modelValue"],
   setup(t) {
-    const n = t, i = ie(t, "modelValue"), _ = h(null), C = h(null), L = h(null), u = h(!1), P = `pa-month-picker-pop-${Math.random().toString(36).slice(2, 9)}`, J = Ee(), M = o(() => n.id ?? J), $ = o(() => `${M.value}-msg`), Q = [
+    const n = t, i = ue(t, "modelValue"), _ = h(null), C = h(null), L = h(null), u = h(!1), $ = `pa-month-picker-pop-${j()}`, Q = `pa-month-picker-${j()}`, M = o(() => n.id ?? Q), V = o(() => `${M.value}-msg`), X = [
       "Gennaio",
       "Febbraio",
       "Marzo",
@@ -50,39 +45,39 @@ const Se = /* @__PURE__ */ le({
       "Dicembre"
     ], c = h(
       i.value instanceof Date ? i.value.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear()
-    ), X = new Intl.DateTimeFormat("it-IT", {
+    ), Z = new Intl.DateTimeFormat("it-IT", {
       month: "long",
       year: "numeric"
-    }), Z = o(() => {
+    }), ee = o(() => {
       const e = i.value;
       if (!(e instanceof Date) || isNaN(e.getTime())) return n.placeholder;
-      const a = X.format(e);
+      const a = Z.format(e);
       return a.charAt(0).toUpperCase() + a.slice(1);
-    }), ee = o(() => !(i.value instanceof Date)), p = o(() => !!n.error), V = o(() => n.valid && !p.value), ae = o(
+    }), ae = o(() => !(i.value instanceof Date)), f = o(() => !!n.error), I = o(() => n.valid && !f.value), te = o(
       () => typeof n.error == "string" && n.error.length > 0 ? n.error : null
-    ), te = o(
-      () => !p.value && n.helperText ? n.helperText : null
-    ), T = o(() => ae.value ?? te.value), ne = o(() => {
+    ), ne = o(
+      () => !f.value && n.helperText ? n.helperText : null
+    ), T = o(() => te.value ?? ne.value), re = o(() => {
       const e = i.value;
       if (!(e instanceof Date) || isNaN(e.getTime())) return "";
       const a = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0");
       return `${a}-${r}`;
     });
-    function I(e) {
+    function K(e) {
       return new Date(e.getFullYear(), e.getMonth(), 1, 0, 0, 0, 0);
     }
-    const K = o(
-      () => n.min ? I(n.min) : null
+    const P = o(
+      () => n.min ? K(n.min) : null
     ), R = o(
-      () => n.max ? I(n.max) : null
+      () => n.max ? K(n.max) : null
     );
-    function x(e) {
+    function z(e) {
       const a = new Date(c.value, e, 1, 0, 0, 0, 0);
-      return K.value && a.getTime() < K.value.getTime() || R.value && a.getTime() > R.value.getTime() ? !0 : n.disabledMonths ? n.disabledMonths(a) === !0 : !1;
+      return P.value && a.getTime() < P.value.getTime() || R.value && a.getTime() > R.value.getTime() ? !0 : n.disabledMonths ? n.disabledMonths(a) === !0 : !1;
     }
     const m = o(
-      () => Array.from({ length: 12 }, (e, a) => x(a))
-    ), z = o(() => {
+      () => Array.from({ length: 12 }, (e, a) => z(a))
+    ), x = o(() => {
       const e = i.value;
       return !(e instanceof Date) || isNaN(e.getTime()) || e.getFullYear() !== c.value ? null : e.getMonth();
     });
@@ -102,8 +97,8 @@ const Se = /* @__PURE__ */ le({
     function H() {
       c.value += 1;
     }
-    function re(e) {
-      n.readonly || x(e) || (i.value = new Date(c.value, e, 1, 0, 0, 0, 0), n.display === "popover" && y());
+    function oe(e) {
+      n.readonly || z(e) || (i.value = new Date(c.value, e, 1, 0, 0, 0, 0), n.display === "popover" && y());
     }
     function E(e) {
       var s, W;
@@ -133,7 +128,7 @@ const Se = /* @__PURE__ */ le({
       const r = O(e, a);
       r >= 0 && E(r);
     }
-    function oe(e, a) {
+    function le(e, a) {
       switch (e.key) {
         case "ArrowRight":
           e.preventDefault(), w(a, 1);
@@ -154,10 +149,10 @@ const Se = /* @__PURE__ */ le({
           e.preventDefault(), D(11, -1);
           break;
         case "PageDown":
-          e.preventDefault(), H(), j(() => D(a, 1));
+          e.preventDefault(), H(), J(() => D(a, 1));
           break;
         case "PageUp":
-          e.preventDefault(), G(), j(() => D(a, 1));
+          e.preventDefault(), G(), J(() => D(a, 1));
           break;
       }
     }
@@ -167,11 +162,11 @@ const Se = /* @__PURE__ */ le({
     function N(e) {
       e.key === "Escape" && (e.preventDefault(), y());
     }
-    return ue(u, (e) => {
+    return se(u, (e) => {
       e ? (document.addEventListener("mousedown", F), window.addEventListener("keydown", N)) : (document.removeEventListener("mousedown", F), window.removeEventListener("keydown", N));
-    }), se(() => {
+    }), de(() => {
       document.removeEventListener("mousedown", F), window.removeEventListener("keydown", N);
-    }), (e, a) => (v(), f("div", {
+    }), (e, a) => (v(), p("div", {
       ref_key: "rootRef",
       ref: _,
       class: g([
@@ -181,20 +176,20 @@ const Se = /* @__PURE__ */ le({
           "pa-month-picker--open": u.value,
           "pa-month-picker--disabled": t.disabled,
           "pa-month-picker--readonly": t.readonly,
-          "pa-month-picker--error": p.value,
-          "pa-month-picker--valid": V.value
+          "pa-month-picker--error": f.value,
+          "pa-month-picker--valid": I.value
         }
       ])
     }, [
-      t.label ? (v(), f("label", {
+      t.label ? (v(), p("label", {
         key: 0,
         for: M.value,
         class: "pa-month-picker__label"
       }, [
-        de(b(t.label), 1),
-        t.required ? (v(), f("span", be, "*")) : k("", !0)
-      ], 8, ge)) : k("", !0),
-      t.display === "popover" ? (v(), f("button", {
+        ce(b(t.label), 1),
+        t.required ? (v(), p("span", ke, "*")) : k("", !0)
+      ], 8, be)) : k("", !0),
+      t.display === "popover" ? (v(), p("button", {
         key: 1,
         id: M.value,
         ref_key: "triggerRef",
@@ -203,21 +198,21 @@ const Se = /* @__PURE__ */ le({
         class: g([
           "pa-month-picker__trigger",
           {
-            "pa-month-picker__trigger--placeholder": ee.value,
+            "pa-month-picker__trigger--placeholder": ae.value,
             "pa-month-picker__trigger--disabled": t.disabled,
             "pa-month-picker__trigger--readonly": t.readonly && !t.disabled,
-            "pa-month-picker__trigger--error": p.value && !t.disabled,
-            "pa-month-picker__trigger--valid": V.value && !t.disabled
+            "pa-month-picker__trigger--error": f.value && !t.disabled,
+            "pa-month-picker__trigger--valid": I.value && !t.disabled
           }
         ]),
         disabled: t.disabled,
         "aria-expanded": u.value,
         "aria-haspopup": "dialog",
-        "aria-controls": P,
+        "aria-controls": $,
         "aria-required": t.required || void 0,
-        "aria-invalid": p.value || void 0,
+        "aria-invalid": f.value || void 0,
         "aria-readonly": t.readonly || void 0,
-        "aria-describedby": T.value ? $.value : void 0,
+        "aria-describedby": T.value ? V.value : void 0,
         onClick: A,
         onKeydown: [
           S(q(A, ["prevent"]), ["enter"]),
@@ -225,25 +220,25 @@ const Se = /* @__PURE__ */ le({
           S(q(U, ["prevent"]), ["down"])
         ]
       }, [
-        d("span", ye, b(Z.value), 1),
-        ce(e.$slots, "suffix", {}, () => [
+        d("span", we, b(ee.value), 1),
+        ve(e.$slots, "suffix", {}, () => [
           Y(B, {
             name: "calendar-blank",
             size: "md"
           })
         ], !0)
-      ], 42, ke)) : k("", !0),
-      t.name ? (v(), f("input", {
+      ], 42, ye)) : k("", !0),
+      t.name ? (v(), p("input", {
         key: 2,
         type: "hidden",
         name: t.name,
-        value: ne.value,
+        value: re.value,
         disabled: t.disabled,
         readonly: t.readonly,
         required: t.required
-      }, null, 8, we)) : k("", !0),
-      ve(d("div", {
-        id: P,
+      }, null, 8, De)) : k("", !0),
+      pe(d("div", {
+        id: $,
         class: g([
           "pa-month-picker__popover",
           { "pa-month-picker__popover--inline": t.display === "inline" }
@@ -251,7 +246,7 @@ const Se = /* @__PURE__ */ le({
         role: "dialog",
         "aria-modal": "false"
       }, [
-        d("div", De, [
+        d("div", _e, [
           d("button", {
             type: "button",
             class: "pa-month-picker__nav-arrow",
@@ -263,7 +258,7 @@ const Se = /* @__PURE__ */ le({
               size: "sm"
             })
           ]),
-          d("span", _e, b(c.value), 1),
+          d("span", Me, b(c.value), 1),
           d("button", {
             type: "button",
             class: "pa-month-picker__nav-arrow",
@@ -282,33 +277,32 @@ const Se = /* @__PURE__ */ le({
           class: "pa-month-picker__grid",
           role: "grid"
         }, [
-          (v(), f(fe, null, pe(Q, (r, l) => d("button", {
+          (v(), p(fe, null, me(X, (r, l) => d("button", {
             key: r,
             type: "button",
             class: g(["pa-month-picker__tile", {
-              "pa-month-picker__tile--selected": z.value === l,
+              "pa-month-picker__tile--selected": x.value === l,
               "pa-month-picker__tile--disabled": m.value[l]
             }]),
             disabled: m.value[l],
             tabindex: m.value[l] ? -1 : 0,
-            "aria-pressed": z.value === l,
-            onClick: (s) => re(l),
-            onKeydown: (s) => oe(s, l)
-          }, b(r), 43, Me)), 64))
+            "aria-pressed": x.value === l,
+            onClick: (s) => oe(l),
+            onKeydown: (s) => le(s, l)
+          }, b(r), 43, Te)), 64))
         ], 512)
       ], 2), [
-        [me, t.display === "inline" || u.value]
+        [he, t.display === "inline" || u.value]
       ]),
-      T.value ? (v(), f("div", {
+      T.value ? (v(), p("div", {
         key: 3,
-        id: $.value,
-        class: g(["pa-month-picker__message", { "pa-month-picker__message--error": p.value }])
-      }, b(T.value), 11, Te)) : k("", !0)
+        id: V.value,
+        class: g(["pa-month-picker__message", { "pa-month-picker__message--error": f.value }])
+      }, b(T.value), 11, Ae)) : k("", !0)
     ], 2));
   }
 });
 export {
-  Se as default,
-  Ee as nextPaMonthPickerId
+  Ne as default
 };
 //# sourceMappingURL=PaMonthPicker.vue2.js.map