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

package/dist/components/PaDrawer/PaDrawer.vue2.js

@@ -1,16 +1,11 @@
-import { defineComponent as M, useModel as O, computed as f, ref as x, watch as U, nextTick as P, onBeforeUnmount as q, openBlock as n, createBlock as D, Teleport as j, createElementVNode as v, normalizeClass as R, createVNode as w, Transition as S, withCtx as y, createElementBlock as p, createCommentVNode as i, resolveDynamicComponent as G, createTextVNode as H, toDisplayString as J, renderSlot as T, mergeModels as Q } from "vue";
-import X from "../PaIcon/PaIcon.vue.js";
-const Y = ["aria-labelledby"], Z = { class: "pa-drawer__header" }, ee = ["aria-label"], te = { class: "pa-drawer__body" }, oe = {
+import { defineComponent as M, useModel as O, useId as P, computed as f, ref as R, watch as U, nextTick as q, onBeforeUnmount as j, openBlock as n, createBlock as x, Teleport as G, createElementVNode as v, normalizeClass as D, createVNode as y, Transition as S, withCtx as w, createElementBlock as p, createCommentVNode as r, resolveDynamicComponent as H, createTextVNode as J, toDisplayString as Q, renderSlot as T, mergeModels as X } from "vue";
+import Y from "../PaIcon/PaIcon.vue.js";
+const Z = ["aria-labelledby"], ee = { class: "pa-drawer__header" }, te = ["aria-label"], oe = { class: "pa-drawer__body" }, ae = {
   key: 0,
   class: "pa-drawer__footer"
-};
-let ae = 0;
-function le() {
-  return ++ae;
-}
-const ie = /* @__PURE__ */ M({
+}, ie = /* @__PURE__ */ M({
   __name: "PaDrawer",
-  props: /* @__PURE__ */ Q({
+  props: /* @__PURE__ */ X({
     title: {},
     titleLevel: { default: 2 },
     showClose: { type: Boolean, default: !0 },
@@ -24,8 +19,8 @@ const ie = /* @__PURE__ */ M({
   }),
   emits: ["update:open"],
   setup(t) {
-    const d = t, l = O(t, "open"), A = le(), z = f(() => d.id ?? `pa-drawer-${A}`), b = f(() => `${z.value}__title`), K = f(() => d.title ? b.value : void 0), N = f(() => `h${d.titleLevel}`), o = x(null), m = x(null);
-    let r = null, h = "", _ = "", s = !1, c = !1;
+    const d = t, l = O(t, "open"), A = P(), z = f(() => d.id ?? `pa-drawer-${A}`), b = f(() => `${z.value}__title`), K = f(() => d.title ? b.value : void 0), N = f(() => `h${d.titleLevel}`), o = R(null), m = R(null);
+    let i = null, h = "", _ = "", s = !1, c = !1;
     const V = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
     function k(e) {
       return Array.from(e.querySelectorAll(V));
@@ -61,45 +56,46 @@ const ie = /* @__PURE__ */ M({
     U(
       l,
       async (e) => {
-        if (e) {
-          if (r = document.activeElement, F(), I(), await P(), d.showClose && m.value)
-            m.value.focus();
-          else if (o.value) {
-            const a = k(o.value);
-            a.length > 0 ? a[0].focus() : o.value.focus();
-          }
-        } else
-          C(), E(), r && document.contains(r) && r.focus(), r = null;
+        if (!(typeof document > "u"))
+          if (e) {
+            if (i = document.activeElement, F(), I(), await q(), d.showClose && m.value)
+              m.value.focus();
+            else if (o.value) {
+              const a = k(o.value);
+              a.length > 0 ? a[0].focus() : o.value.focus();
+            }
+          } else
+            C(), E(), i && document.contains(i) && i.focus(), i = null;
       },
       { flush: "post", immediate: !0 }
-    ), q(() => {
+    ), j(() => {
       C(), E();
     });
     function B() {
       l.value = !1;
     }
-    return (e, a) => (n(), D(j, { to: "body" }, [
+    return (e, a) => (n(), x(G, { to: "body" }, [
       v("div", {
-        class: R(["pa-drawer__wrapper", { "pa-drawer__wrapper--active": l.value }])
+        class: D(["pa-drawer__wrapper", { "pa-drawer__wrapper--active": l.value }])
       }, [
-        w(S, {
+        y(S, {
           name: "pa-drawer-backdrop",
           appear: ""
         }, {
-          default: y(() => [
+          default: w(() => [
             l.value ? (n(), p("div", {
               key: 0,
               class: "pa-drawer__backdrop",
               onClick: B
-            })) : i("", !0)
+            })) : r("", !0)
           ]),
           _: 1
         }),
-        w(S, {
+        y(S, {
           name: `pa-drawer-${t.position}`,
           appear: ""
         }, {
-          default: y(() => [
+          default: w(() => [
             l.value ? (n(), p("div", {
               key: 0,
               ref_key: "drawerRef",
@@ -108,24 +104,24 @@ const ie = /* @__PURE__ */ M({
               "aria-modal": "true",
               tabindex: "-1",
               "aria-labelledby": K.value,
-              class: R([
+              class: D([
                 "pa-drawer",
                 `pa-drawer--${t.position}`,
                 `pa-drawer--${t.size}`
               ]),
               onKeydown: W
             }, [
-              v("div", Z, [
-                t.title ? (n(), D(G(N.value), {
+              v("div", ee, [
+                t.title ? (n(), x(H(N.value), {
                   key: 0,
                   id: b.value,
                   class: "pa-drawer__title"
                 }, {
-                  default: y(() => [
-                    H(J(t.title), 1)
+                  default: w(() => [
+                    J(Q(t.title), 1)
                   ]),
                   _: 1
-                }, 8, ["id"])) : i("", !0),
+                }, 8, ["id"])) : r("", !0),
                 t.showClose ? (n(), p("button", {
                   key: 1,
                   ref_key: "closeButtonRef",
@@ -135,19 +131,19 @@ const ie = /* @__PURE__ */ M({
                   "aria-label": t.closeLabel,
                   onClick: B
                 }, [
-                  w(X, {
+                  y(Y, {
                     name: "x",
                     size: "sm"
                   })
-                ], 8, ee)) : i("", !0)
+                ], 8, te)) : r("", !0)
               ]),
-              v("div", te, [
+              v("div", oe, [
                 T(e.$slots, "default", {}, void 0, !0)
               ]),
-              e.$slots.footer ? (n(), p("div", oe, [
+              e.$slots.footer ? (n(), p("div", ae, [
                 T(e.$slots, "footer", {}, void 0, !0)
-              ])) : i("", !0)
-            ], 42, Y)) : i("", !0)
+              ])) : r("", !0)
+            ], 42, Z)) : r("", !0)
           ]),
           _: 3
         }, 8, ["name"])

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

@@ -1 +1 @@
-{"version":3,"file":"PaDrawer.vue2.js","sources":["../../../src/components/PaDrawer/PaDrawer.vue"],"sourcesContent":["<script lang=\"ts\">\nlet drawerUid = 0\nfunction nextDrawerId() {\n  return ++drawerUid\n}\n\nexport type PaDrawerPosition = 'right' | 'left' | 'top' | 'bottom'\nexport type PaDrawerSize = 'sm' | 'md' | 'lg'\n\nexport interface PaDrawerProps {\n  title?: string\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  showClose?: boolean\n  closeLabel?: string\n  position?: PaDrawerPosition\n  size?: PaDrawerSize\n  id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaDrawerProps>(), {\n  titleLevel: 2,\n  showClose: true,\n  closeLabel: 'Chiudi',\n  position: 'right',\n  size: 'md',\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst uid = nextDrawerId()\nconst baseId = computed(() => props.id ?? `pa-drawer-${uid}`)\nconst titleId = computed(() => `${baseId.value}__title`)\nconst labelledBy = computed(() => (props.title ? titleId.value : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n\nconst drawerRef = 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 onDrawerKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !drawerRef.value) return\n  const focusable = getFocusable(drawerRef.value)\n  if (focusable.length === 0) {\n    event.preventDefault()\n    drawerRef.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 || !drawerRef.value.contains(active)) {\n      event.preventDefault()\n      last.focus()\n    }\n  } else {\n    if (active === last || !drawerRef.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 (drawerRef.value) {\n        const focusable = getFocusable(drawerRef.value)\n        if (focusable.length > 0) {\n          focusable[0]!.focus()\n        } else {\n          drawerRef.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 class=\"pa-drawer__wrapper\" :class=\"{ 'pa-drawer__wrapper--active': open }\">\n      <Transition name=\"pa-drawer-backdrop\" appear>\n        <div v-if=\"open\" class=\"pa-drawer__backdrop\" @click=\"close\" />\n      </Transition>\n      <Transition :name=\"`pa-drawer-${position}`\" appear>\n        <div\n          v-if=\"open\"\n          ref=\"drawerRef\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          tabindex=\"-1\"\n          :aria-labelledby=\"labelledBy\"\n          :class=\"[\n            'pa-drawer',\n            `pa-drawer--${position}`,\n            `pa-drawer--${size}`,\n          ]\"\n          @keydown=\"onDrawerKeydown\"\n        >\n          <div class=\"pa-drawer__header\">\n            <component\n              :is=\"titleTag\"\n              v-if=\"title\"\n              :id=\"titleId\"\n              class=\"pa-drawer__title\"\n            >\n              {{ title }}\n            </component>\n            <button\n              v-if=\"showClose\"\n              ref=\"closeButtonRef\"\n              type=\"button\"\n              class=\"pa-drawer__close\"\n              :aria-label=\"closeLabel\"\n              @click=\"close\"\n            >\n              <PaIcon name=\"x\" size=\"sm\" />\n            </button>\n          </div>\n          <div class=\"pa-drawer__body\">\n            <slot />\n          </div>\n          <div v-if=\"$slots.footer\" class=\"pa-drawer__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n.pa-drawer__wrapper {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  container-type: inline-size;\n  pointer-events: none;\n}\n\n.pa-drawer__backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  pointer-events: auto;\n}\n\n.pa-drawer {\n  position: fixed;\n  z-index: 1001;\n  background: var(--pa-color-bg-white);\n  box-shadow: var(--pa-shadow-elevation-01);\n  display: flex;\n  flex-direction: column;\n  padding: 32px;\n  pointer-events: auto;\n  font-family: var(--pa-font-family-base);\n  box-sizing: border-box;\n}\n\n.pa-drawer:focus {\n  outline: none;\n}\n\n.pa-drawer--sm {\n  --pa-drawer-width: 400px;\n  --pa-drawer-height: 320px;\n}\n\n.pa-drawer--md {\n  --pa-drawer-width: 550px;\n  --pa-drawer-height: 480px;\n}\n\n.pa-drawer--lg {\n  --pa-drawer-width: 720px;\n  --pa-drawer-height: 640px;\n}\n\n.pa-drawer--right {\n  top: 0;\n  right: 0;\n  height: 100vh;\n  width: var(--pa-drawer-width);\n  max-width: 100vw;\n}\n\n.pa-drawer--left {\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: var(--pa-drawer-width);\n  max-width: 100vw;\n}\n\n.pa-drawer--top {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: var(--pa-drawer-height);\n  max-height: 100vh;\n}\n\n.pa-drawer--bottom {\n  bottom: 0;\n  left: 0;\n  width: 100vw;\n  height: var(--pa-drawer-height);\n  max-height: 100vh;\n}\n\n.pa-drawer__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--pa-space-sm);\n  width: 100%;\n  flex-shrink: 0;\n}\n\n.pa-drawer__title {\n  margin: 0;\n  flex: 1 1 auto;\n  min-width: 0;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n  color: var(--pa-color-primary);\n}\n\n.pa-drawer__close {\n  flex: 0 0 auto;\n  width: 44px;\n  height: 44px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--pa-radius-smooth);\n  background: transparent;\n  border: none;\n  color: var(--pa-color-primary);\n  cursor: pointer;\n  padding: 0;\n  margin: -10px -10px 0 0;\n}\n\n.pa-drawer__close:hover {\n  background: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-drawer__close:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-drawer__body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  width: 100%;\n  margin-top: var(--pa-space-sm);\n}\n\n.pa-drawer__footer {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-sm);\n  min-height: 64px;\n  padding: var(--pa-space-xs) var(--pa-space-lg);\n  margin: 0 calc(-1 * var(--pa-space-lg)) calc(-1 * var(--pa-space-lg))\n    calc(-1 * var(--pa-space-lg));\n  background: var(--pa-color-primary);\n  color: var(--pa-color-text-white);\n  flex-shrink: 0;\n}\n\n.pa-drawer-backdrop-enter-from,\n.pa-drawer-backdrop-leave-to {\n  opacity: 0;\n}\n\n.pa-drawer-backdrop-enter-active {\n  transition: opacity 200ms ease-out;\n}\n\n.pa-drawer-backdrop-leave-active {\n  transition: opacity 200ms ease-in;\n}\n\n.pa-drawer-right-enter-from,\n.pa-drawer-right-leave-to {\n  transform: translateX(100%);\n}\n\n.pa-drawer-left-enter-from,\n.pa-drawer-left-leave-to {\n  transform: translateX(-100%);\n}\n\n.pa-drawer-top-enter-from,\n.pa-drawer-top-leave-to {\n  transform: translateY(-100%);\n}\n\n.pa-drawer-bottom-enter-from,\n.pa-drawer-bottom-leave-to {\n  transform: translateY(100%);\n}\n\n.pa-drawer-right-enter-active,\n.pa-drawer-left-enter-active,\n.pa-drawer-top-enter-active,\n.pa-drawer-bottom-enter-active {\n  transition: transform 250ms ease-out;\n}\n\n.pa-drawer-right-leave-active,\n.pa-drawer-left-leave-active,\n.pa-drawer-top-leave-active,\n.pa-drawer-bottom-leave-active {\n  transition: transform 200ms ease-in;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pa-drawer-backdrop-enter-active,\n  .pa-drawer-backdrop-leave-active,\n  .pa-drawer-right-enter-active,\n  .pa-drawer-right-leave-active,\n  .pa-drawer-left-enter-active,\n  .pa-drawer-left-leave-active,\n  .pa-drawer-top-enter-active,\n  .pa-drawer-top-leave-active,\n  .pa-drawer-bottom-enter-active,\n  .pa-drawer-bottom-leave-active {\n    transition-duration: 0ms;\n  }\n}\n\n@container (max-width: 600px) {\n  .pa-drawer {\n    padding: var(--pa-space-md);\n  }\n\n  .pa-drawer--right,\n  .pa-drawer--left {\n    width: 100vw;\n    max-width: none;\n  }\n\n  .pa-drawer--top,\n  .pa-drawer--bottom {\n    height: 100vh;\n    max-height: none;\n  }\n\n  .pa-drawer__title {\n    font-size: 18px;\n    line-height: 22px;\n  }\n\n  .pa-drawer__footer {\n    padding: var(--pa-space-xs) var(--pa-space-md);\n    margin: 0 calc(-1 * var(--pa-space-md)) calc(-1 * var(--pa-space-md))\n      calc(-1 * var(--pa-space-md));\n  }\n}\n</style>\n"],"names":["drawerUid","nextDrawerId","props","__props","open","_useModel","uid","baseId","computed","titleId","labelledBy","titleTag","drawerRef","ref","closeButtonRef","previouslyFocusedElement","originalBodyOverflow","originalBodyPaddingRight","scrollLockActive","escListenerAttached","FOCUSABLE_SELECTOR","getFocusable","root","onDrawerKeydown","event","focusable","first","last","active","onWindowKeydownEsc","lockScroll","scrollbarWidth","unlockScroll","attachEsc","detachEsc","watch","next","nextTick","onBeforeUnmount","close","_createBlock","_Teleport","_createElementVNode","_normalizeClass","_createVNode","_Transition","_createElementBlock","_hoisted_2","_openBlock","_resolveDynamicComponent","PaIcon","_hoisted_4","_renderSlot","_ctx","$slots","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"PaDrawer.vue2.js","sources":["../../../src/components/PaDrawer/PaDrawer.vue"],"sourcesContent":["<script lang=\"ts\">\n\nexport type PaDrawerPosition = 'right' | 'left' | 'top' | 'bottom'\nexport type PaDrawerSize = 'sm' | 'md' | 'lg'\n\nexport interface PaDrawerProps {\n  title?: string\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  showClose?: boolean\n  closeLabel?: string\n  position?: PaDrawerPosition\n  size?: PaDrawerSize\n  id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaDrawerProps>(), {\n  titleLevel: 2,\n  showClose: true,\n  closeLabel: 'Chiudi',\n  position: 'right',\n  size: 'md',\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\nconst uid = useId()\nconst baseId = computed(() => props.id ?? `pa-drawer-${uid}`)\nconst titleId = computed(() => `${baseId.value}__title`)\nconst labelledBy = computed(() => (props.title ? titleId.value : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n\nconst drawerRef = 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 onDrawerKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !drawerRef.value) return\n  const focusable = getFocusable(drawerRef.value)\n  if (focusable.length === 0) {\n    event.preventDefault()\n    drawerRef.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 || !drawerRef.value.contains(active)) {\n      event.preventDefault()\n      last.focus()\n    }\n  } else {\n    if (active === last || !drawerRef.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 (drawerRef.value) {\n        const focusable = getFocusable(drawerRef.value)\n        if (focusable.length > 0) {\n          focusable[0]!.focus()\n        } else {\n          drawerRef.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 class=\"pa-drawer__wrapper\" :class=\"{ 'pa-drawer__wrapper--active': open }\">\n      <Transition name=\"pa-drawer-backdrop\" appear>\n        <div v-if=\"open\" class=\"pa-drawer__backdrop\" @click=\"close\" />\n      </Transition>\n      <Transition :name=\"`pa-drawer-${position}`\" appear>\n        <div\n          v-if=\"open\"\n          ref=\"drawerRef\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          tabindex=\"-1\"\n          :aria-labelledby=\"labelledBy\"\n          :class=\"[\n            'pa-drawer',\n            `pa-drawer--${position}`,\n            `pa-drawer--${size}`,\n          ]\"\n          @keydown=\"onDrawerKeydown\"\n        >\n          <div class=\"pa-drawer__header\">\n            <component\n              :is=\"titleTag\"\n              v-if=\"title\"\n              :id=\"titleId\"\n              class=\"pa-drawer__title\"\n            >\n              {{ title }}\n            </component>\n            <button\n              v-if=\"showClose\"\n              ref=\"closeButtonRef\"\n              type=\"button\"\n              class=\"pa-drawer__close\"\n              :aria-label=\"closeLabel\"\n              @click=\"close\"\n            >\n              <PaIcon name=\"x\" size=\"sm\" />\n            </button>\n          </div>\n          <div class=\"pa-drawer__body\">\n            <slot />\n          </div>\n          <div v-if=\"$slots.footer\" class=\"pa-drawer__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n.pa-drawer__wrapper {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  container-type: inline-size;\n  pointer-events: none;\n}\n\n.pa-drawer__backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  pointer-events: auto;\n}\n\n.pa-drawer {\n  position: fixed;\n  z-index: 1001;\n  background: var(--pa-color-bg-white);\n  box-shadow: var(--pa-shadow-elevation-01);\n  display: flex;\n  flex-direction: column;\n  padding: 32px;\n  pointer-events: auto;\n  font-family: var(--pa-font-family-base);\n  box-sizing: border-box;\n}\n\n.pa-drawer:focus {\n  outline: none;\n}\n\n.pa-drawer--sm {\n  --pa-drawer-width: 400px;\n  --pa-drawer-height: 320px;\n}\n\n.pa-drawer--md {\n  --pa-drawer-width: 550px;\n  --pa-drawer-height: 480px;\n}\n\n.pa-drawer--lg {\n  --pa-drawer-width: 720px;\n  --pa-drawer-height: 640px;\n}\n\n.pa-drawer--right {\n  top: 0;\n  right: 0;\n  height: 100vh;\n  width: var(--pa-drawer-width);\n  max-width: 100vw;\n}\n\n.pa-drawer--left {\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: var(--pa-drawer-width);\n  max-width: 100vw;\n}\n\n.pa-drawer--top {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: var(--pa-drawer-height);\n  max-height: 100vh;\n}\n\n.pa-drawer--bottom {\n  bottom: 0;\n  left: 0;\n  width: 100vw;\n  height: var(--pa-drawer-height);\n  max-height: 100vh;\n}\n\n.pa-drawer__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--pa-space-sm);\n  width: 100%;\n  flex-shrink: 0;\n}\n\n.pa-drawer__title {\n  margin: 0;\n  flex: 1 1 auto;\n  min-width: 0;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n  color: var(--pa-color-primary);\n}\n\n.pa-drawer__close {\n  flex: 0 0 auto;\n  width: 44px;\n  height: 44px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--pa-radius-smooth);\n  background: transparent;\n  border: none;\n  color: var(--pa-color-primary);\n  cursor: pointer;\n  padding: 0;\n  margin: -10px -10px 0 0;\n}\n\n.pa-drawer__close:hover {\n  background: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-drawer__close:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-drawer__body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  width: 100%;\n  margin-top: var(--pa-space-sm);\n}\n\n.pa-drawer__footer {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-sm);\n  min-height: 64px;\n  padding: var(--pa-space-xs) var(--pa-space-lg);\n  margin: 0 calc(-1 * var(--pa-space-lg)) calc(-1 * var(--pa-space-lg))\n    calc(-1 * var(--pa-space-lg));\n  background: var(--pa-color-primary);\n  color: var(--pa-color-text-white);\n  flex-shrink: 0;\n}\n\n.pa-drawer-backdrop-enter-from,\n.pa-drawer-backdrop-leave-to {\n  opacity: 0;\n}\n\n.pa-drawer-backdrop-enter-active {\n  transition: opacity 200ms ease-out;\n}\n\n.pa-drawer-backdrop-leave-active {\n  transition: opacity 200ms ease-in;\n}\n\n.pa-drawer-right-enter-from,\n.pa-drawer-right-leave-to {\n  transform: translateX(100%);\n}\n\n.pa-drawer-left-enter-from,\n.pa-drawer-left-leave-to {\n  transform: translateX(-100%);\n}\n\n.pa-drawer-top-enter-from,\n.pa-drawer-top-leave-to {\n  transform: translateY(-100%);\n}\n\n.pa-drawer-bottom-enter-from,\n.pa-drawer-bottom-leave-to {\n  transform: translateY(100%);\n}\n\n.pa-drawer-right-enter-active,\n.pa-drawer-left-enter-active,\n.pa-drawer-top-enter-active,\n.pa-drawer-bottom-enter-active {\n  transition: transform 250ms ease-out;\n}\n\n.pa-drawer-right-leave-active,\n.pa-drawer-left-leave-active,\n.pa-drawer-top-leave-active,\n.pa-drawer-bottom-leave-active {\n  transition: transform 200ms ease-in;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pa-drawer-backdrop-enter-active,\n  .pa-drawer-backdrop-leave-active,\n  .pa-drawer-right-enter-active,\n  .pa-drawer-right-leave-active,\n  .pa-drawer-left-enter-active,\n  .pa-drawer-left-leave-active,\n  .pa-drawer-top-enter-active,\n  .pa-drawer-top-leave-active,\n  .pa-drawer-bottom-enter-active,\n  .pa-drawer-bottom-leave-active {\n    transition-duration: 0ms;\n  }\n}\n\n@container (max-width: 600px) {\n  .pa-drawer {\n    padding: var(--pa-space-md);\n  }\n\n  .pa-drawer--right,\n  .pa-drawer--left {\n    width: 100vw;\n    max-width: none;\n  }\n\n  .pa-drawer--top,\n  .pa-drawer--bottom {\n    height: 100vh;\n    max-height: none;\n  }\n\n  .pa-drawer__title {\n    font-size: 18px;\n    line-height: 22px;\n  }\n\n  .pa-drawer__footer {\n    padding: var(--pa-space-xs) var(--pa-space-md);\n    margin: 0 calc(-1 * var(--pa-space-md)) calc(-1 * var(--pa-space-md))\n      calc(-1 * var(--pa-space-md));\n  }\n}\n</style>\n"],"names":["props","__props","open","_useModel","uid","useId","baseId","computed","titleId","labelledBy","titleTag","drawerRef","ref","closeButtonRef","previouslyFocusedElement","originalBodyOverflow","originalBodyPaddingRight","scrollLockActive","escListenerAttached","FOCUSABLE_SELECTOR","getFocusable","root","onDrawerKeydown","event","focusable","first","last","active","onWindowKeydownEsc","lockScroll","scrollbarWidth","unlockScroll","attachEsc","detachEsc","watch","next","nextTick","onBeforeUnmount","close","_createBlock","_Teleport","_createElementVNode","_normalizeClass","_createVNode","_Transition","_createElementBlock","_hoisted_2","_openBlock","_resolveDynamicComponent","PaIcon","_hoisted_4","_renderSlot","_ctx","$slots","_hoisted_5"],"mappings":"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"}

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

@@ -1,4 +1,3 @@
-export declare function nextPaFileUploadId(): string;
 export interface PaFileUploadProps {
     label?: string;
     helperText?: string;

package/dist/components/PaFileUpload/PaFileUpload.vue.js

@@ -1,10 +1,8 @@
 import o from "./PaFileUpload.vue2.js";
-import { nextPaFileUploadId as f } from "./PaFileUpload.vue2.js";
 /* empty css                  */
-import a from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ a(o, [["__scopeId", "data-v-3ba1b228"]]);
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d1518cb0"]]);
 export {
-  e as default,
-  f as nextPaFileUploadId
+  m as default
 };
 //# sourceMappingURL=PaFileUpload.vue.js.map

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

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

package/dist/components/PaFileUpload/PaFileUpload.vue2.js

@@ -1,19 +1,14 @@
-import { defineComponent as R, useModel as U, computed as t, ref as y, openBlock as u, createElementBlock as f, normalizeClass as C, createTextVNode as k, toDisplayString as p, createCommentVNode as m, createElementVNode as z, createVNode as q, withCtx as M, createBlock as D, mergeModels as T } from "vue";
-import G from "../PaButton/PaButton.vue.js";
-import K from "../PaChip/PaChip.vue.js";
-import j from "../PaIcon/PaIcon.vue.js";
-const H = ["for"], J = {
+import { defineComponent as R, useModel as D, useId as G, computed as t, ref as y, openBlock as u, createElementBlock as f, normalizeClass as C, createTextVNode as k, toDisplayString as p, createCommentVNode as m, createElementVNode as z, createVNode as q, withCtx as M, createBlock as K, mergeModels as T } from "vue";
+import U from "../PaButton/PaButton.vue.js";
+import j from "../PaChip/PaChip.vue.js";
+import H from "../PaIcon/PaIcon.vue.js";
+const J = ["for"], O = {
   key: 0,
   class: "pa-file-upload__required"
-}, O = {
+}, Q = {
   key: 1,
   class: "pa-file-upload__helper"
-}, Q = { class: "pa-file-upload__row" }, X = ["id", "accept", "name", "required", "disabled", "aria-invalid", "aria-describedby"], Y = ["id"];
-let Z = 0;
-function ee() {
-  return `pa-file-upload-${++Z}`;
-}
-const re = /* @__PURE__ */ R({
+}, X = { class: "pa-file-upload__row" }, Y = ["id", "accept", "name", "required", "disabled", "aria-invalid", "aria-describedby"], Z = ["id"], te = /* @__PURE__ */ R({
   __name: "PaFileUpload",
   props: /* @__PURE__ */ T({
     label: {},
@@ -34,7 +29,7 @@ const re = /* @__PURE__ */ R({
   }),
   emits: /* @__PURE__ */ T(["invalid"], ["update:modelValue"]),
   setup(e, { emit: $ }) {
-    const l = e, d = U(e, "modelValue"), g = $, L = ee(), h = t(() => l.id ?? L), x = t(() => `${h.value}-msg`), v = y(null), o = y("");
+    const l = e, d = D(e, "modelValue"), g = $, L = `pa-file-upload-${G()}`, h = t(() => l.id ?? L), x = t(() => `${h.value}-msg`), v = y(null), o = y("");
     function S(a) {
       return a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${(a / 1024).toFixed(1)} KB` : a < 1024 * 1024 * 1024 ? `${(a / (1024 * 1024)).toFixed(1)} MB` : `${(a / (1024 * 1024 * 1024)).toFixed(1)} GB`;
     }
@@ -53,13 +48,13 @@ const re = /* @__PURE__ */ R({
     }
     const w = t(
       () => typeof l.error == "string" && l.error.length > 0 ? l.error : ""
-    ), F = t(() => !!l.error), s = t(
-      () => F.value || o.value !== ""
-    ), B = t(() => l.valid && !s.value), E = t(
+    ), E = t(() => !!l.error), s = t(
+      () => E.value || o.value !== ""
+    ), B = t(() => l.valid && !s.value), F = t(
       () => w.value || o.value || ""
     ), I = t(
       () => !s.value && !B.value && l.helperText ? l.helperText : ""
-    ), b = t(() => E.value || I.value);
+    ), b = t(() => F.value || I.value);
     function N() {
       var a;
       l.disabled || (a = v.value) == null || a.click();
@@ -103,18 +98,18 @@ const re = /* @__PURE__ */ R({
         class: "pa-file-upload__label"
       }, [
         k(p(e.label), 1),
-        e.required ? (u(), f("span", J, "*")) : m("", !0)
-      ], 8, H)) : m("", !0),
-      e.helperText ? (u(), f("div", O, p(e.helperText), 1)) : m("", !0),
-      z("div", Q, [
-        q(G, {
+        e.required ? (u(), f("span", O, "*")) : m("", !0)
+      ], 8, J)) : m("", !0),
+      e.helperText ? (u(), f("div", Q, p(e.helperText), 1)) : m("", !0),
+      z("div", X, [
+        q(U, {
           variant: "primary",
           size: "sm",
           disabled: e.disabled,
           onClick: N
         }, {
           "icon-right": M(() => [
-            q(j, {
+            q(H, {
               name: "arrow-right",
               size: "sm"
             })
@@ -137,9 +132,9 @@ const re = /* @__PURE__ */ R({
           "aria-invalid": s.value || void 0,
           "aria-describedby": b.value ? x.value : void 0,
           onChange: P
-        }, null, 40, X)
+        }, null, 40, Y)
       ]),
-      d.value ? (u(), D(K, {
+      d.value ? (u(), K(j, {
         key: 2,
         variant: "dismissible",
         label: e.chipLabel(d.value),
@@ -153,12 +148,11 @@ const re = /* @__PURE__ */ R({
           "pa-file-upload__message",
           { "pa-file-upload__message--error": s.value }
         ])
-      }, p(b.value), 11, Y)) : m("", !0)
+      }, p(b.value), 11, Z)) : m("", !0)
     ], 2));
   }
 });
 export {
-  re as default,
-  ee as nextPaFileUploadId
+  te as default
 };
 //# sourceMappingURL=PaFileUpload.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaFileUpload.vue2.js","sources":["../../../src/components/PaFileUpload/PaFileUpload.vue"],"sourcesContent":["<script lang=\"ts\">\nlet uid = 0\nexport function nextPaFileUploadId() {\n  return `pa-file-upload-${++uid}`\n}\n\nexport interface PaFileUploadProps {\n  label?: string\n  helperText?: string\n  buttonLabel?: string\n  chipLabel?: (file: File) => string\n  accept?: string\n  maxSize?: number\n  id?: string\n  name?: string\n  error?: string | boolean\n  valid?: boolean\n  required?: boolean\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport PaButton from '../PaButton/PaButton.vue'\nimport PaChip from '../PaChip/PaChip.vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaFileUploadProps>(), {\n  buttonLabel: 'Carica file',\n  chipLabel: (file: File) => file.name,\n  error: false,\n  valid: false,\n  required: false,\n  disabled: false,\n})\n\nconst model = defineModel<File | null>({ default: null })\n\nconst emit = defineEmits<{\n  invalid: [{ file: File; reason: 'maxSize' | 'accept' }]\n}>()\n\nconst generatedId = nextPaFileUploadId()\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.value}-msg`)\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst internalError = ref('')\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\nfunction acceptMatches(file: File, accept: string): boolean {\n  const tokens = accept\n    .split(',')\n    .map((t) => t.trim().toLowerCase())\n    .filter(Boolean)\n  if (tokens.length === 0) return true\n  const fileType = file.type.toLowerCase()\n  const fileName = file.name.toLowerCase()\n  return tokens.some((token) => {\n    if (token.startsWith('.')) return fileName.endsWith(token)\n    if (token.endsWith('/*')) {\n      const prefix = token.slice(0, -1)\n      return fileType.startsWith(prefix)\n    }\n    return fileType === token\n  })\n}\n\nconst consumerErrorMessage = computed(() =>\n  typeof props.error === 'string' && props.error.length > 0 ? props.error : '',\n)\nconst consumerErrorActive = computed(() => Boolean(props.error))\n\nconst errorActive = computed(\n  () => consumerErrorActive.value || internalError.value !== '',\n)\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n  consumerErrorMessage.value || internalError.value || '',\n)\nconst helperMessage = computed(() =>\n  !errorActive.value && !validActive.value && props.helperText\n    ? props.helperText\n    : '',\n)\nconst message = computed(() => errorMessage.value || helperMessage.value)\n\nfunction openPicker() {\n  if (props.disabled) return\n  inputRef.value?.click()\n}\n\nfunction onChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const file = target.files?.[0] ?? null\n\n  if (!file) {\n    model.value = null\n    return\n  }\n\n  internalError.value = ''\n\n  if (props.maxSize !== undefined && file.size > props.maxSize) {\n    internalError.value = `Il file supera la dimensione massima di ${formatBytes(\n      props.maxSize,\n    )}`\n    emit('invalid', { file, reason: 'maxSize' })\n    target.value = ''\n    return\n  }\n\n  if (props.accept && !acceptMatches(file, props.accept)) {\n    internalError.value = 'Tipo di file non supportato'\n    emit('invalid', { file, reason: 'accept' })\n    target.value = ''\n    return\n  }\n\n  model.value = file\n}\n\nfunction clear() {\n  model.value = null\n  internalError.value = ''\n  if (inputRef.value) inputRef.value.value = ''\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-file-upload',\n      {\n        'pa-file-upload--error': errorActive,\n        'pa-file-upload--valid': validActive,\n        'pa-file-upload--required': required,\n        'pa-file-upload--disabled': disabled,\n      },\n    ]\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"inputId\"\n      class=\"pa-file-upload__label\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"pa-file-upload__required\">*</span>\n    </label>\n    <div\n      v-if=\"helperText\"\n      class=\"pa-file-upload__helper\"\n    >{{ helperText }}</div>\n    <div class=\"pa-file-upload__row\">\n      <PaButton\n        variant=\"primary\"\n        size=\"sm\"\n        :disabled=\"disabled\"\n        @click=\"openPicker\"\n      >\n        <template #icon-right>\n          <PaIcon name=\"arrow-right\" size=\"sm\" />\n        </template>\n        {{ buttonLabel }}\n      </PaButton>\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        type=\"file\"\n        class=\"pa-file-upload__input\"\n        :accept=\"accept\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"errorActive || undefined\"\n        :aria-describedby=\"message ? messageId : undefined\"\n        @change=\"onChange\"\n      />\n    </div>\n    <PaChip\n      v-if=\"model\"\n      variant=\"dismissible\"\n      :label=\"chipLabel(model)\"\n      :disabled=\"disabled\"\n      @close=\"clear\"\n    />\n    <div\n      v-if=\"message\"\n      :id=\"messageId\"\n      :class=\"[\n        'pa-file-upload__message',\n        { 'pa-file-upload__message--error': errorActive },\n      ]\"\n    >{{ message }}</div>\n  </div>\n</template>\n\n<style scoped>\n.pa-file-upload {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-file-upload__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-file-upload__required {\n  margin-left: 2px;\n  color: var(--pa-color-error);\n}\n\n.pa-file-upload__helper {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-file-upload__row {\n  display: inline-flex;\n  align-items: center;\n  margin-top: var(--pa-space-2xs);\n}\n\n.pa-file-upload__input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pa-file-upload__row + .pa-chip {\n  margin-top: var(--pa-space-2xs);\n}\n\n.pa-file-upload__message {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-file-upload__message--error {\n  color: var(--pa-color-error);\n}\n</style>\n"],"names":["uid","nextPaFileUploadId","props","__props","model","_useModel","emit","__emit","generatedId","inputId","computed","messageId","inputRef","ref","internalError","formatBytes","bytes","acceptMatches","file","accept","tokens","t","fileType","fileName","token","prefix","consumerErrorMessage","consumerErrorActive","errorActive","validActive","errorMessage","helperMessage","message","openPicker","_a","onChange","event","target","clear","_createElementBlock","_normalizeClass","_hoisted_2","_hoisted_3","_toDisplayString","_createElementVNode","_hoisted_4","_createVNode","PaButton","PaIcon","_createTextVNode","_createBlock","PaChip","_hoisted_6"],"mappings":"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"}
+{"version":3,"file":"PaFileUpload.vue2.js","sources":["../../../src/components/PaFileUpload/PaFileUpload.vue"],"sourcesContent":["<script lang=\"ts\">\n\nexport interface PaFileUploadProps {\n  label?: string\n  helperText?: string\n  buttonLabel?: string\n  chipLabel?: (file: File) => string\n  accept?: string\n  maxSize?: number\n  id?: string\n  name?: string\n  error?: string | boolean\n  valid?: boolean\n  required?: boolean\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId } from 'vue'\nimport PaButton from '../PaButton/PaButton.vue'\nimport PaChip from '../PaChip/PaChip.vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaFileUploadProps>(), {\n  buttonLabel: 'Carica file',\n  chipLabel: (file: File) => file.name,\n  error: false,\n  valid: false,\n  required: false,\n  disabled: false,\n})\n\nconst model = defineModel<File | null>({ default: null })\n\nconst emit = defineEmits<{\n  invalid: [{ file: File; reason: 'maxSize' | 'accept' }]\n}>()\n\nconst generatedId = `pa-file-upload-${useId()}`\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.value}-msg`)\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst internalError = ref('')\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\nfunction acceptMatches(file: File, accept: string): boolean {\n  const tokens = accept\n    .split(',')\n    .map((t) => t.trim().toLowerCase())\n    .filter(Boolean)\n  if (tokens.length === 0) return true\n  const fileType = file.type.toLowerCase()\n  const fileName = file.name.toLowerCase()\n  return tokens.some((token) => {\n    if (token.startsWith('.')) return fileName.endsWith(token)\n    if (token.endsWith('/*')) {\n      const prefix = token.slice(0, -1)\n      return fileType.startsWith(prefix)\n    }\n    return fileType === token\n  })\n}\n\nconst consumerErrorMessage = computed(() =>\n  typeof props.error === 'string' && props.error.length > 0 ? props.error : '',\n)\nconst consumerErrorActive = computed(() => Boolean(props.error))\n\nconst errorActive = computed(\n  () => consumerErrorActive.value || internalError.value !== '',\n)\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n  consumerErrorMessage.value || internalError.value || '',\n)\nconst helperMessage = computed(() =>\n  !errorActive.value && !validActive.value && props.helperText\n    ? props.helperText\n    : '',\n)\nconst message = computed(() => errorMessage.value || helperMessage.value)\n\nfunction openPicker() {\n  if (props.disabled) return\n  inputRef.value?.click()\n}\n\nfunction onChange(event: Event) {\n  const target = event.target as HTMLInputElement\n  const file = target.files?.[0] ?? null\n\n  if (!file) {\n    model.value = null\n    return\n  }\n\n  internalError.value = ''\n\n  if (props.maxSize !== undefined && file.size > props.maxSize) {\n    internalError.value = `Il file supera la dimensione massima di ${formatBytes(\n      props.maxSize,\n    )}`\n    emit('invalid', { file, reason: 'maxSize' })\n    target.value = ''\n    return\n  }\n\n  if (props.accept && !acceptMatches(file, props.accept)) {\n    internalError.value = 'Tipo di file non supportato'\n    emit('invalid', { file, reason: 'accept' })\n    target.value = ''\n    return\n  }\n\n  model.value = file\n}\n\nfunction clear() {\n  model.value = null\n  internalError.value = ''\n  if (inputRef.value) inputRef.value.value = ''\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-file-upload',\n      {\n        'pa-file-upload--error': errorActive,\n        'pa-file-upload--valid': validActive,\n        'pa-file-upload--required': required,\n        'pa-file-upload--disabled': disabled,\n      },\n    ]\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"inputId\"\n      class=\"pa-file-upload__label\"\n    >\n      {{ label }}<span v-if=\"required\" class=\"pa-file-upload__required\">*</span>\n    </label>\n    <div\n      v-if=\"helperText\"\n      class=\"pa-file-upload__helper\"\n    >{{ helperText }}</div>\n    <div class=\"pa-file-upload__row\">\n      <PaButton\n        variant=\"primary\"\n        size=\"sm\"\n        :disabled=\"disabled\"\n        @click=\"openPicker\"\n      >\n        <template #icon-right>\n          <PaIcon name=\"arrow-right\" size=\"sm\" />\n        </template>\n        {{ buttonLabel }}\n      </PaButton>\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        type=\"file\"\n        class=\"pa-file-upload__input\"\n        :accept=\"accept\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"errorActive || undefined\"\n        :aria-describedby=\"message ? messageId : undefined\"\n        @change=\"onChange\"\n      />\n    </div>\n    <PaChip\n      v-if=\"model\"\n      variant=\"dismissible\"\n      :label=\"chipLabel(model)\"\n      :disabled=\"disabled\"\n      @close=\"clear\"\n    />\n    <div\n      v-if=\"message\"\n      :id=\"messageId\"\n      :class=\"[\n        'pa-file-upload__message',\n        { 'pa-file-upload__message--error': errorActive },\n      ]\"\n    >{{ message }}</div>\n  </div>\n</template>\n\n<style scoped>\n.pa-file-upload {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-file-upload__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-file-upload__required {\n  margin-left: 2px;\n  color: var(--pa-color-error);\n}\n\n.pa-file-upload__helper {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-file-upload__row {\n  display: inline-flex;\n  align-items: center;\n  margin-top: var(--pa-space-2xs);\n}\n\n.pa-file-upload__input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pa-file-upload__row + .pa-chip {\n  margin-top: var(--pa-space-2xs);\n}\n\n.pa-file-upload__message {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-file-upload__message--error {\n  color: var(--pa-color-error);\n}\n</style>\n"],"names":["props","__props","model","_useModel","emit","__emit","generatedId","useId","inputId","computed","messageId","inputRef","ref","internalError","formatBytes","bytes","acceptMatches","file","accept","tokens","t","fileType","fileName","token","prefix","consumerErrorMessage","consumerErrorActive","errorActive","validActive","errorMessage","helperMessage","message","openPicker","_a","onChange","event","target","clear","_createElementBlock","_normalizeClass","_hoisted_2","_hoisted_3","_toDisplayString","_createElementVNode","_hoisted_4","_createVNode","PaButton","PaIcon","_createTextVNode","_createBlock","PaChip","_hoisted_6"],"mappings":"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"}

package/dist/components/PaFooter/PaFooter.vue.js

@@ -1,7 +1,7 @@
 import o from "./PaFooter.vue2.js";
 /* empty css              */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-920bddf5"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0e4e7bbd"]]);
 export {
   m as default
 };