@semplice-studio/pa-design-system 0.1.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -128
- package/dist/components/PaAccordion/PaAccordion.vue.d.ts +0 -1
- package/dist/components/PaAccordion/PaAccordion.vue.js +3 -5
- package/dist/components/PaAccordion/PaAccordion.vue.js.map +1 -1
- package/dist/components/PaAccordion/PaAccordion.vue2.js +24 -30
- package/dist/components/PaAccordion/PaAccordion.vue2.js.map +1 -1
- package/dist/components/PaBanner/PaBanner.vue.js +6 -6
- package/dist/components/PaBanner/PaBanner.vue2.js +26 -28
- package/dist/components/PaBanner/PaBanner.vue2.js.map +1 -1
- package/dist/components/PaCard/PaCard.vue.d.ts +17 -14
- package/dist/components/PaCard/PaCard.vue.js +2 -2
- package/dist/components/PaCard/PaCard.vue2.js +37 -42
- package/dist/components/PaCard/PaCard.vue2.js.map +1 -1
- package/dist/components/PaCheckbox/PaCheckbox.vue.d.ts +5 -6
- package/dist/components/PaCheckbox/PaCheckbox.vue.js +2 -4
- package/dist/components/PaCheckbox/PaCheckbox.vue.js.map +1 -1
- package/dist/components/PaCheckbox/PaCheckbox.vue2.js +20 -26
- package/dist/components/PaCheckbox/PaCheckbox.vue2.js.map +1 -1
- package/dist/components/PaCheckboxGroup/PaCheckboxGroup.vue.d.ts +5 -6
- package/dist/components/PaCheckboxGroup/PaCheckboxGroup.vue.js +2 -4
- package/dist/components/PaCheckboxGroup/PaCheckboxGroup.vue.js.map +1 -1
- package/dist/components/PaCheckboxGroup/PaCheckboxGroup.vue2.js +25 -31
- package/dist/components/PaCheckboxGroup/PaCheckboxGroup.vue2.js.map +1 -1
- package/dist/components/PaDatePicker/PaDatePicker.vue.d.ts +13 -26
- package/dist/components/PaDatePicker/PaDatePicker.vue.js +4 -6
- package/dist/components/PaDatePicker/PaDatePicker.vue.js.map +1 -1
- package/dist/components/PaDatePicker/PaDatePicker.vue2.js +53 -59
- package/dist/components/PaDatePicker/PaDatePicker.vue2.js.map +1 -1
- package/dist/components/PaDrawer/PaDrawer.vue.js +2 -2
- package/dist/components/PaDrawer/PaDrawer.vue2.js +37 -41
- package/dist/components/PaDrawer/PaDrawer.vue2.js.map +1 -1
- package/dist/components/PaFileUpload/PaFileUpload.vue.d.ts +0 -1
- package/dist/components/PaFileUpload/PaFileUpload.vue.js +3 -5
- package/dist/components/PaFileUpload/PaFileUpload.vue.js.map +1 -1
- package/dist/components/PaFileUpload/PaFileUpload.vue2.js +22 -28
- package/dist/components/PaFileUpload/PaFileUpload.vue2.js.map +1 -1
- package/dist/components/PaFooter/PaFooter.vue.js +1 -1
- package/dist/components/PaFooter/PaFooter.vue2.js +43 -48
- package/dist/components/PaFooter/PaFooter.vue2.js.map +1 -1
- package/dist/components/PaHeaderDesktop/PaHeaderDesktop.vue.js +1 -1
- package/dist/components/PaHeaderDesktop/PaHeaderDesktop.vue2.js +61 -66
- package/dist/components/PaHeaderDesktop/PaHeaderDesktop.vue2.js.map +1 -1
- package/dist/components/PaHeaderMobile/PaHeaderMobile.vue.js +2 -2
- package/dist/components/PaHeaderMobile/PaHeaderMobile.vue2.js +69 -74
- package/dist/components/PaHeaderMobile/PaHeaderMobile.vue2.js.map +1 -1
- package/dist/components/PaHero/PaHero.vue.d.ts +15 -12
- package/dist/components/PaHero/PaHero.vue.js +2 -2
- package/dist/components/PaHero/PaHero.vue2.js +36 -41
- package/dist/components/PaHero/PaHero.vue2.js.map +1 -1
- package/dist/components/PaInput/PaInput.vue.d.ts +15 -13
- package/dist/components/PaInput/PaInput.vue.js +4 -6
- package/dist/components/PaInput/PaInput.vue.js.map +1 -1
- package/dist/components/PaInput/PaInput.vue2.js +27 -33
- package/dist/components/PaInput/PaInput.vue2.js.map +1 -1
- package/dist/components/PaModal/PaModal.vue.d.ts +14 -11
- package/dist/components/PaModal/PaModal.vue.js +3 -3
- package/dist/components/PaModal/PaModal.vue2.js +41 -46
- package/dist/components/PaModal/PaModal.vue2.js.map +1 -1
- package/dist/components/PaMonthPicker/PaMonthPicker.vue.d.ts +13 -26
- package/dist/components/PaMonthPicker/PaMonthPicker.vue.js +2 -4
- package/dist/components/PaMonthPicker/PaMonthPicker.vue.js.map +1 -1
- package/dist/components/PaMonthPicker/PaMonthPicker.vue2.js +64 -70
- package/dist/components/PaMonthPicker/PaMonthPicker.vue2.js.map +1 -1
- package/dist/components/PaPagination/PaPagination.vue.js +2 -2
- package/dist/components/PaPagination/PaPagination.vue2.js +41 -46
- package/dist/components/PaPagination/PaPagination.vue2.js.map +1 -1
- package/dist/components/PaRadioGroup/PaRadioGroup.vue.d.ts +5 -6
- package/dist/components/PaRadioGroup/PaRadioGroup.vue.js +2 -4
- package/dist/components/PaRadioGroup/PaRadioGroup.vue.js.map +1 -1
- package/dist/components/PaRadioGroup/PaRadioGroup.vue2.js +22 -28
- package/dist/components/PaRadioGroup/PaRadioGroup.vue2.js.map +1 -1
- package/dist/components/PaRangePicker/PaRangePicker.vue.d.ts +0 -1
- package/dist/components/PaRangePicker/PaRangePicker.vue.js +4 -6
- package/dist/components/PaRangePicker/PaRangePicker.vue.js.map +1 -1
- package/dist/components/PaRangePicker/PaRangePicker.vue2.js +76 -82
- package/dist/components/PaRangePicker/PaRangePicker.vue2.js.map +1 -1
- package/dist/components/PaSearchBar/PaSearchBar.vue.d.ts +0 -1
- package/dist/components/PaSearchBar/PaSearchBar.vue.js +3 -5
- package/dist/components/PaSearchBar/PaSearchBar.vue.js.map +1 -1
- package/dist/components/PaSearchBar/PaSearchBar.vue2.js +55 -61
- package/dist/components/PaSearchBar/PaSearchBar.vue2.js.map +1 -1
- package/dist/components/PaSelect/PaSelect.vue.d.ts +5 -6
- package/dist/components/PaSelect/PaSelect.vue.js +4 -6
- package/dist/components/PaSelect/PaSelect.vue.js.map +1 -1
- package/dist/components/PaSelect/PaSelect.vue2.js +25 -31
- package/dist/components/PaSelect/PaSelect.vue2.js.map +1 -1
- package/dist/components/PaTabs/PaTabs.vue.js +1 -1
- package/dist/components/PaTabs/PaTabs.vue2.js +17 -19
- package/dist/components/PaTabs/PaTabs.vue2.js.map +1 -1
- package/dist/components/PaTextarea/PaTextarea.vue.d.ts +5 -6
- package/dist/components/PaTextarea/PaTextarea.vue.js +4 -6
- package/dist/components/PaTextarea/PaTextarea.vue.js.map +1 -1
- package/dist/components/PaTextarea/PaTextarea.vue2.js +16 -22
- package/dist/components/PaTextarea/PaTextarea.vue2.js.map +1 -1
- package/dist/components/PaTimePicker/PaTimePicker.vue.d.ts +0 -1
- package/dist/components/PaTimePicker/PaTimePicker.vue.js +2 -4
- package/dist/components/PaTimePicker/PaTimePicker.vue.js.map +1 -1
- package/dist/components/PaTimePicker/PaTimePicker.vue2.js +44 -50
- package/dist/components/PaTimePicker/PaTimePicker.vue2.js.map +1 -1
- package/dist/components/PaTitleBar/PaTitleBar.vue.d.ts +12 -9
- package/dist/components/PaTitleBar/PaTitleBar.vue.js +2 -2
- package/dist/components/PaTitleBar/PaTitleBar.vue2.js +34 -39
- package/dist/components/PaTitleBar/PaTitleBar.vue2.js.map +1 -1
- package/dist/components/PaToggle/PaToggle.vue.d.ts +0 -1
- package/dist/components/PaToggle/PaToggle.vue.js +2 -4
- package/dist/components/PaToggle/PaToggle.vue.js.map +1 -1
- package/dist/components/PaToggle/PaToggle.vue2.js +20 -26
- package/dist/components/PaToggle/PaToggle.vue2.js.map +1 -1
- package/dist/components/PaYearPicker/PaYearPicker.vue.d.ts +13 -26
- package/dist/components/PaYearPicker/PaYearPicker.vue.js +4 -6
- package/dist/components/PaYearPicker/PaYearPicker.vue.js.map +1 -1
- package/dist/components/PaYearPicker/PaYearPicker.vue2.js +70 -76
- package/dist/components/PaYearPicker/PaYearPicker.vue2.js.map +1 -1
- package/dist/style.css +1 -1
- package/docs/design-system.md +590 -0
- package/docs/layouts.md +297 -0
- package/docs/page-composition-examples.md +286 -0
- package/docs/public-surface.md +68 -0
- package/package.json +8 -4
|
@@ -11,23 +11,26 @@ export interface PaHeroProps {
|
|
|
11
11
|
imageRatio?: PaImageRatio;
|
|
12
12
|
imagePosition?: PaHeroImagePosition;
|
|
13
13
|
}
|
|
14
|
-
declare
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
imagePosition: PaHeroImagePosition;
|
|
18
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
19
|
-
breadcrumb?: (props: {}) => any;
|
|
14
|
+
declare var __VLS_1: {}, __VLS_3: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
|
|
15
|
+
type __VLS_Slots = {} & {
|
|
16
|
+
breadcrumb?: (props: typeof __VLS_1) => any;
|
|
20
17
|
} & {
|
|
21
|
-
label?: (props:
|
|
18
|
+
label?: (props: typeof __VLS_3) => any;
|
|
22
19
|
} & {
|
|
23
|
-
title?: (props:
|
|
20
|
+
title?: (props: typeof __VLS_9) => any;
|
|
24
21
|
} & {
|
|
25
|
-
subtitle?: (props:
|
|
22
|
+
subtitle?: (props: typeof __VLS_11) => any;
|
|
26
23
|
} & {
|
|
27
|
-
body?: (props:
|
|
24
|
+
body?: (props: typeof __VLS_13) => any;
|
|
28
25
|
} & {
|
|
29
|
-
cta?: (props:
|
|
30
|
-
}
|
|
26
|
+
cta?: (props: typeof __VLS_15) => any;
|
|
27
|
+
};
|
|
28
|
+
declare const __VLS_component: import("vue").DefineComponent<PaHeroProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PaHeroProps> & Readonly<{}>, {
|
|
29
|
+
titleLevel: PaHeroTitleLevel;
|
|
30
|
+
imageRatio: PaImageRatio;
|
|
31
|
+
imagePosition: PaHeroImagePosition;
|
|
32
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
33
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
31
34
|
export default _default;
|
|
32
35
|
type __VLS_WithSlots<T, S> = T & {
|
|
33
36
|
new (): {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./PaHero.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import r from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const
|
|
4
|
+
const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-26280ba5"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
p as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=PaHero.vue.js.map
|
|
@@ -1,32 +1,27 @@
|
|
|
1
|
-
import { defineComponent as k, useSlots as f, computed as s, openBlock as l, createElementBlock as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as k, useSlots as f, useId as p, computed as s, openBlock as l, createElementBlock as a, createElementVNode as v, normalizeClass as $, renderSlot as i, createCommentVNode as o, createBlock as S, resolveDynamicComponent as B, withCtx as C, createTextVNode as u, toDisplayString as n, createVNode as N } from "vue";
|
|
2
|
+
import P from "../PaImage/PaImage.vue.js";
|
|
3
|
+
const T = ["aria-labelledby"], V = { class: "pa-hero__text" }, I = {
|
|
4
4
|
key: 0,
|
|
5
5
|
class: "pa-hero__breadcrumb"
|
|
6
|
-
},
|
|
6
|
+
}, A = {
|
|
7
7
|
key: 1,
|
|
8
8
|
class: "pa-hero__label"
|
|
9
|
-
},
|
|
9
|
+
}, D = {
|
|
10
10
|
key: 2,
|
|
11
11
|
class: "pa-hero__title-block"
|
|
12
|
-
},
|
|
12
|
+
}, E = {
|
|
13
13
|
key: 1,
|
|
14
14
|
class: "pa-hero__subtitle"
|
|
15
|
-
},
|
|
15
|
+
}, L = {
|
|
16
16
|
key: 2,
|
|
17
17
|
class: "pa-hero__body"
|
|
18
|
-
},
|
|
18
|
+
}, R = {
|
|
19
19
|
key: 3,
|
|
20
20
|
class: "pa-hero__cta"
|
|
21
|
-
},
|
|
21
|
+
}, w = {
|
|
22
22
|
key: 0,
|
|
23
23
|
class: "pa-hero__image-col"
|
|
24
|
-
}
|
|
25
|
-
let R = 0;
|
|
26
|
-
function w() {
|
|
27
|
-
return ++R;
|
|
28
|
-
}
|
|
29
|
-
const q = /* @__PURE__ */ k({
|
|
24
|
+
}, q = /* @__PURE__ */ k({
|
|
30
25
|
__name: "PaHero",
|
|
31
26
|
props: {
|
|
32
27
|
title: {},
|
|
@@ -39,60 +34,60 @@ const q = /* @__PURE__ */ k({
|
|
|
39
34
|
imagePosition: { default: "right" }
|
|
40
35
|
},
|
|
41
36
|
setup(e) {
|
|
42
|
-
const r = e, c = f(), h = `pa-hero-${
|
|
37
|
+
const r = e, c = f(), h = `pa-hero-${p()}__title`, d = s(() => !!c.title || !!r.title), m = s(() => !!c.subtitle || !!r.subtitle), b = s(() => !!c.body || !!r.body), _ = s(
|
|
43
38
|
() => d.value || m.value || b.value
|
|
44
39
|
), y = s(() => d.value ? h : void 0), g = s(() => `h${r.titleLevel}`);
|
|
45
|
-
return (t, z) => (l(),
|
|
40
|
+
return (t, z) => (l(), a("section", {
|
|
46
41
|
class: "pa-hero",
|
|
47
42
|
"aria-labelledby": y.value
|
|
48
43
|
}, [
|
|
49
44
|
v("div", {
|
|
50
|
-
class:
|
|
45
|
+
class: $(["pa-hero__inner", { "pa-hero__inner--image-left": e.imagePosition === "left" }])
|
|
51
46
|
}, [
|
|
52
|
-
v("div",
|
|
53
|
-
t.$slots.breadcrumb ? (l(),
|
|
47
|
+
v("div", V, [
|
|
48
|
+
t.$slots.breadcrumb ? (l(), a("div", I, [
|
|
54
49
|
i(t.$slots, "breadcrumb", {}, void 0, !0)
|
|
55
|
-
])) :
|
|
56
|
-
t.$slots.label ? (l(),
|
|
50
|
+
])) : o("", !0),
|
|
51
|
+
t.$slots.label ? (l(), a("div", A, [
|
|
57
52
|
i(t.$slots, "label", {}, void 0, !0)
|
|
58
|
-
])) :
|
|
59
|
-
_.value ? (l(),
|
|
60
|
-
d.value ? (l(),
|
|
53
|
+
])) : o("", !0),
|
|
54
|
+
_.value ? (l(), a("div", D, [
|
|
55
|
+
d.value ? (l(), S(B(g.value), {
|
|
61
56
|
key: 0,
|
|
62
57
|
id: h,
|
|
63
58
|
class: "pa-hero__title"
|
|
64
59
|
}, {
|
|
65
|
-
default:
|
|
60
|
+
default: C(() => [
|
|
66
61
|
i(t.$slots, "title", {}, () => [
|
|
67
|
-
n(
|
|
62
|
+
u(n(e.title), 1)
|
|
68
63
|
], !0)
|
|
69
64
|
]),
|
|
70
65
|
_: 3
|
|
71
|
-
})) :
|
|
72
|
-
m.value ? (l(),
|
|
66
|
+
})) : o("", !0),
|
|
67
|
+
m.value ? (l(), a("h4", E, [
|
|
73
68
|
i(t.$slots, "subtitle", {}, () => [
|
|
74
|
-
n(
|
|
69
|
+
u(n(e.subtitle), 1)
|
|
75
70
|
], !0)
|
|
76
|
-
])) :
|
|
77
|
-
b.value ? (l(),
|
|
71
|
+
])) : o("", !0),
|
|
72
|
+
b.value ? (l(), a("p", L, [
|
|
78
73
|
i(t.$slots, "body", {}, () => [
|
|
79
|
-
n(
|
|
74
|
+
u(n(e.body), 1)
|
|
80
75
|
], !0)
|
|
81
|
-
])) :
|
|
82
|
-
])) :
|
|
83
|
-
t.$slots.cta ? (l(),
|
|
76
|
+
])) : o("", !0)
|
|
77
|
+
])) : o("", !0),
|
|
78
|
+
t.$slots.cta ? (l(), a("div", R, [
|
|
84
79
|
i(t.$slots, "cta", {}, void 0, !0)
|
|
85
|
-
])) :
|
|
80
|
+
])) : o("", !0)
|
|
86
81
|
]),
|
|
87
|
-
e.imageSrc ? (l(),
|
|
88
|
-
|
|
82
|
+
e.imageSrc ? (l(), a("div", w, [
|
|
83
|
+
N(P, {
|
|
89
84
|
src: e.imageSrc,
|
|
90
85
|
alt: e.imageAlt ?? "",
|
|
91
86
|
ratio: e.imageRatio
|
|
92
87
|
}, null, 8, ["src", "alt", "ratio"])
|
|
93
|
-
])) :
|
|
88
|
+
])) : o("", !0)
|
|
94
89
|
], 2)
|
|
95
|
-
], 8,
|
|
90
|
+
], 8, T));
|
|
96
91
|
}
|
|
97
92
|
});
|
|
98
93
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaHero.vue2.js","sources":["../../../src/components/PaHero/PaHero.vue"],"sourcesContent":["<script
|
|
1
|
+
{"version":3,"file":"PaHero.vue2.js","sources":["../../../src/components/PaHero/PaHero.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useId, useSlots } from 'vue'\nimport PaImage from '../PaImage/PaImage.vue'\nimport type { PaImageRatio } from '../PaImage/PaImage.vue'\n\nexport type PaHeroImagePosition = 'left' | 'right'\nexport type PaHeroTitleLevel = 1 | 2 | 3 | 4 | 5 | 6\n\nexport interface PaHeroProps {\n title?: string\n titleLevel?: PaHeroTitleLevel\n subtitle?: string\n body?: string\n imageSrc?: string\n imageAlt?: string\n imageRatio?: PaImageRatio\n imagePosition?: PaHeroImagePosition\n}\n\nconst props = withDefaults(defineProps<PaHeroProps>(), {\n titleLevel: 1,\n imageRatio: '3:2',\n imagePosition: 'right',\n})\n\nconst slots = useSlots()\n\nconst titleId = `pa-hero-${useId()}__title`\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasSubtitle = computed(() => !!slots.subtitle || !!props.subtitle)\nconst hasBody = computed(() => !!slots.body || !!props.body)\nconst hasTitleBlock = computed(\n () => hasTitle.value || hasSubtitle.value || hasBody.value,\n)\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n</script>\n\n<template>\n <section class=\"pa-hero\"\n :aria-labelledby=\"labelledBy\">\n <div class=\"pa-hero__inner\"\n :class=\"{ 'pa-hero__inner--image-left': imagePosition === 'left' }\">\n <div class=\"pa-hero__text\">\n <div v-if=\"$slots.breadcrumb\"\n class=\"pa-hero__breadcrumb\">\n <slot name=\"breadcrumb\" />\n </div>\n\n <div v-if=\"$slots.label\"\n class=\"pa-hero__label\">\n <slot name=\"label\" />\n </div>\n\n <div v-if=\"hasTitleBlock\"\n class=\"pa-hero__title-block\">\n <component :is=\"titleTag\"\n v-if=\"hasTitle\"\n :id=\"titleId\"\n class=\"pa-hero__title\">\n <slot name=\"title\">{{ title }}</slot>\n </component>\n <h4 v-if=\"hasSubtitle\"\n class=\"pa-hero__subtitle\">\n <slot name=\"subtitle\">{{ subtitle }}</slot>\n </h4>\n <p v-if=\"hasBody\"\n class=\"pa-hero__body\">\n <slot name=\"body\">{{ body }}</slot>\n </p>\n </div>\n\n <div v-if=\"$slots.cta\"\n class=\"pa-hero__cta\">\n <slot name=\"cta\" />\n </div>\n </div>\n\n <div v-if=\"imageSrc\"\n class=\"pa-hero__image-col\">\n <PaImage :src=\"imageSrc\"\n :alt=\"imageAlt ?? ''\"\n :ratio=\"imageRatio\" />\n </div>\n </div>\n </section>\n</template>\n\n<style scoped>\n.pa-hero {\n display: block;\n container-type: inline-size;\n background-color: var(--pa-color-bg-white);\n}\n\n.pa-hero__title {\n font-family: var(--pa-font-family-base);\n font-weight: var(--pa-font-h2-weight);\n font-size: var(--pa-font-h2-size);\n line-height: var(--pa-font-h2-line-height);\n letter-spacing: var(--pa-font-h2-letter-spacing);\n color: var(--pa-color-bg-primary-dark-110);\n}\n\n.pa-hero__subtitle {\n font-family: var(--pa-font-family-base);\n font-weight: var(--pa-font-h4-weight);\n font-size: var(--pa-font-h4-size);\n line-height: var(--pa-font-h4-line-height);\n letter-spacing: var(--pa-font-h4-letter-spacing);\n color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-hero__body {\n font-family: var(--pa-font-family-base);\n font-weight: var(--pa-font-body-weight);\n font-size: var(--pa-font-body-size);\n line-height: var(--pa-font-body-line-height);\n color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-hero__body :deep(a) {\n color: var(--pa-hero-body-link-color, #2f6dd5);\n text-decoration: none;\n}\n\n.pa-hero__body :deep(a:hover) {\n text-decoration: underline;\n}\n\n.pa-hero__inner {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--pa-space-md);\n}\n\n.pa-hero__inner--image-left {\n flex-direction: row-reverse;\n}\n\n.pa-hero__text {\n flex: 1 0 0;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding-bottom: var(--pa-space-md);\n}\n\n.pa-hero__breadcrumb {\n width: 100%;\n padding: 10px 0 8px 0;\n}\n\n.pa-hero__label {\n padding: 8px 0;\n}\n\n.pa-hero__title-block {\n width: 100%;\n padding: 10px 0 24px 0;\n display: flex;\n flex-direction: column;\n}\n\n.pa-hero__title,\n.pa-hero__subtitle,\n.pa-hero__body {\n margin: 0;\n width: 100%;\n}\n\n.pa-hero__subtitle:not(:first-child) {\n margin-top: 8px;\n}\n\n.pa-hero__body:not(:first-child) {\n margin-top: var(--pa-space-md);\n}\n\n.pa-hero__cta {\n align-self: flex-start;\n}\n\n.pa-hero__image-col {\n flex: 1 0 0;\n min-width: 0;\n align-self: center;\n}\n\n@container (max-width: 720px) {\n .pa-hero {\n padding: var(--pa-space-sm);\n border-bottom: var(--pa-border-xs) solid var(--pa-color-bg-primary-light-50);\n }\n\n .pa-hero__inner,\n .pa-hero__inner--image-left {\n flex-direction: column;\n align-items: stretch;\n }\n\n .pa-hero__image-col {\n flex: 0 0 auto;\n align-self: auto;\n width: 100%;\n }\n}\n</style>\n"],"names":["props","__props","slots","useSlots","titleId","useId","hasTitle","computed","hasSubtitle","hasBody","hasTitleBlock","labelledBy","titleTag","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_2","$slots","_openBlock","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_hoisted_5","_createBlock","_resolveDynamicComponent","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_createVNode","PaImage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,UAAMA,IAAQC,GAMRC,IAAQC,EAAA,GAERC,IAAU,WAAWC,EAAA,CAAO,WAE5BC,IAAWC,EAAS,MAAM,CAAC,CAACL,EAAM,SAAS,CAAC,CAACF,EAAM,KAAK,GACxDQ,IAAcD,EAAS,MAAM,CAAC,CAACL,EAAM,YAAY,CAAC,CAACF,EAAM,QAAQ,GACjES,IAAUF,EAAS,MAAM,CAAC,CAACL,EAAM,QAAQ,CAAC,CAACF,EAAM,IAAI,GACrDU,IAAgBH;AAAA,MACpB,MAAMD,EAAS,SAASE,EAAY,SAASC,EAAQ;AAAA,IAAA,GAEjDE,IAAaJ,EAAS,MAAOD,EAAS,QAAQF,IAAU,MAAU,GAClEQ,IAAWL,EAAS,MAAM,IAAIP,EAAM,UAAU,EAAW;2BAI7Da,EA8CU,WAAA;AAAA,MA9CD,OAAM;AAAA,MACL,mBAAiBF,EAAA;AAAA,IAAA;MACzBG,EA2CM,OAAA;AAAA,QA3CD,OAAKC,EAAA,CAAC,kBAAgB,EAAA,8BACkBd,EAAA,kBAAa,QAAA,CAAA;AAAA,MAAA;QACxDa,EAiCM,OAjCNE,GAiCM;AAAA,UAhCOC,EAAAA,OAAO,cAAlBC,KAAAL,EAGM,OAHNM,GAGM;AAAA,YADJC,EAA0BC,EAAA,QAAA,cAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;UAGjBJ,EAAAA,OAAO,SAAlBC,KAAAL,EAGM,OAHNS,GAGM;AAAA,YADJF,EAAqBC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;UAGZX,EAAA,SAAXQ,EAAA,GAAAL,EAgBM,OAhBNU,GAgBM;AAAA,YAbajB,EAAA,SADjBY,EAAA,GAAAM,EAKYC,EALIb,EAAA,KAAQ,GAAA;AAAA;cAEZ,IAAIR;AAAA,cACL,OAAM;AAAA,YAAA;yBACf,MAAqC;AAAA,gBAArCgB,EAAqCC,uBAArC,MAAqC;AAAA,sBAAfpB,EAAA,KAAK,GAAA,CAAA;AAAA,gBAAA;;;;YAEnBO,EAAA,SAAVU,EAAA,GAAAL,EAGK,MAHLa,GAGK;AAAA,cADHN,EAA2CC,0BAA3C,MAA2C;AAAA,oBAAlBpB,EAAA,QAAQ,GAAA,CAAA;AAAA,cAAA;;YAE1BQ,EAAA,SAATS,EAAA,GAAAL,EAGI,KAHJc,GAGI;AAAA,cADFP,EAAmCC,sBAAnC,MAAmC;AAAA,oBAAdpB,EAAA,IAAI,GAAA,CAAA;AAAA,cAAA;;;UAIlBgB,EAAAA,OAAO,OAAlBC,KAAAL,EAGM,OAHNe,GAGM;AAAA,YADJR,EAAmBC,EAAA,QAAA,OAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;QAIZpB,EAAA,YAAXiB,EAAA,GAAAL,EAKM,OALNgB,GAKM;AAAA,UAHJC,EAE+BC,GAAA;AAAA,YAFrB,KAAK9B,EAAA;AAAA,YACL,KAAKA,EAAA,YAAQ;AAAA,YACb,OAAOA,EAAA;AAAA,UAAA;;;;;;"}
|
|
@@ -21,17 +21,22 @@ export interface PaInputProps {
|
|
|
21
21
|
maxlength?: number;
|
|
22
22
|
minlength?: number;
|
|
23
23
|
}
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
type __VLS_Props = PaInputProps;
|
|
25
|
+
type __VLS_PublicProps = __VLS_Props & {
|
|
26
26
|
modelValue?: string;
|
|
27
|
-
}
|
|
28
|
-
|
|
27
|
+
};
|
|
28
|
+
declare var __VLS_1: {}, __VLS_3: {};
|
|
29
|
+
type __VLS_Slots = {} & {
|
|
30
|
+
'icon-prefix'?: (props: typeof __VLS_1) => any;
|
|
31
|
+
} & {
|
|
32
|
+
'icon-suffix'?: (props: typeof __VLS_3) => any;
|
|
33
|
+
};
|
|
34
|
+
declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
29
35
|
clear: () => any;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}> & Readonly<{
|
|
33
|
-
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
36
|
+
"update:modelValue": (value: string) => any;
|
|
37
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
34
38
|
onClear?: (() => any) | undefined;
|
|
39
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
35
40
|
}>, {
|
|
36
41
|
error: string | boolean;
|
|
37
42
|
size: PaInputSize;
|
|
@@ -41,11 +46,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaInputPro
|
|
|
41
46
|
required: boolean;
|
|
42
47
|
readonly: boolean;
|
|
43
48
|
clearable: boolean;
|
|
44
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any
|
|
45
|
-
|
|
46
|
-
} & {
|
|
47
|
-
'icon-suffix'?: (props: {}) => any;
|
|
48
|
-
}>;
|
|
49
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
50
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
49
51
|
export default _default;
|
|
50
52
|
type __VLS_WithSlots<T, S> = T & {
|
|
51
53
|
new (): {
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { nextPaInputId as _ } from "./PaInput.vue2.js";
|
|
1
|
+
import o from "./PaInput.vue2.js";
|
|
3
2
|
/* empty css */
|
|
4
|
-
import
|
|
5
|
-
const
|
|
3
|
+
import t from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
+
const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6979f665"]]);
|
|
6
5
|
export {
|
|
7
|
-
|
|
8
|
-
_ as nextPaInputId
|
|
6
|
+
f as default
|
|
9
7
|
};
|
|
10
8
|
//# sourceMappingURL=PaInput.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaInput.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaInput.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent as N, useModel as P, computed as t, ref as x, openBlock as i, createElementBlock as n, normalizeClass as k, createTextVNode as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as N, useModel as D, useId as P, computed as t, ref as x, openBlock as i, createElementBlock as n, normalizeClass as k, createTextVNode as S, toDisplayString as w, createCommentVNode as s, createElementVNode as r, renderSlot as B, withDirectives as j, vModelDynamic as A, mergeModels as M, nextTick as E } from "vue";
|
|
2
|
+
const R = ["for"], U = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "pa-input__required",
|
|
5
5
|
"aria-hidden": "true"
|
|
6
|
-
},
|
|
6
|
+
}, F = { class: "pa-input__field" }, G = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "pa-input__icon pa-input__icon--prefix"
|
|
9
|
-
},
|
|
9
|
+
}, H = ["id", "type", "placeholder", "disabled", "readonly", "required", "min", "max", "step", "name", "autocomplete", "maxlength", "minlength", "inputmode", "aria-required", "aria-invalid", "aria-describedby"], J = ["aria-label"], K = {
|
|
10
10
|
key: 0,
|
|
11
11
|
width: "20",
|
|
12
12
|
height: "20",
|
|
@@ -15,7 +15,7 @@ const E = ["for"], R = {
|
|
|
15
15
|
stroke: "currentColor",
|
|
16
16
|
"stroke-width": "1.5",
|
|
17
17
|
"aria-hidden": "true"
|
|
18
|
-
},
|
|
18
|
+
}, L = {
|
|
19
19
|
key: 1,
|
|
20
20
|
width: "20",
|
|
21
21
|
height: "20",
|
|
@@ -24,15 +24,10 @@ const E = ["for"], R = {
|
|
|
24
24
|
stroke: "currentColor",
|
|
25
25
|
"stroke-width": "1.5",
|
|
26
26
|
"aria-hidden": "true"
|
|
27
|
-
},
|
|
27
|
+
}, O = {
|
|
28
28
|
key: 2,
|
|
29
29
|
class: "pa-input__icon pa-input__icon--suffix"
|
|
30
|
-
},
|
|
31
|
-
let Q = 0;
|
|
32
|
-
function W() {
|
|
33
|
-
return `pa-input-${++Q}`;
|
|
34
|
-
}
|
|
35
|
-
const Y = /* @__PURE__ */ N({
|
|
30
|
+
}, Q = ["id"], X = /* @__PURE__ */ N({
|
|
36
31
|
__name: "PaInput",
|
|
37
32
|
props: /* @__PURE__ */ M({
|
|
38
33
|
type: { default: "text" },
|
|
@@ -60,19 +55,19 @@ const Y = /* @__PURE__ */ N({
|
|
|
60
55
|
}),
|
|
61
56
|
emits: /* @__PURE__ */ M(["clear"], ["update:modelValue"]),
|
|
62
57
|
setup(e, { emit: C }) {
|
|
63
|
-
const a = e, $ = C, c =
|
|
58
|
+
const a = e, $ = C, c = D(e, "modelValue"), q = `pa-input-${P()}`, v = t(() => a.id ?? q), h = t(() => `${v.value}-msg`), u = t(() => !!a.error), y = t(() => a.valid && !u.value), V = t(
|
|
64
59
|
() => typeof a.error == "string" && a.error.length > 0 ? a.error : null
|
|
65
60
|
), T = t(
|
|
66
61
|
() => !u.value && !y.value && a.helperText ? a.helperText : null
|
|
67
62
|
), m = t(() => V.value ?? T.value), g = x(null), d = x(!1), p = t(
|
|
68
63
|
() => a.type === "password" && !a.disabled && !a.readonly
|
|
69
|
-
),
|
|
64
|
+
), z = t(
|
|
70
65
|
() => a.type === "password" && d.value ? "text" : a.type
|
|
71
66
|
), f = t(
|
|
72
67
|
() => a.clearable && c.value.length > 0 && !a.disabled && !a.readonly && !p.value
|
|
73
68
|
);
|
|
74
|
-
function
|
|
75
|
-
c.value = "", $("clear"),
|
|
69
|
+
function I() {
|
|
70
|
+
c.value = "", $("clear"), E(() => {
|
|
76
71
|
var o;
|
|
77
72
|
return (o = g.value) == null ? void 0 : o.focus();
|
|
78
73
|
});
|
|
@@ -96,19 +91,19 @@ const Y = /* @__PURE__ */ N({
|
|
|
96
91
|
for: v.value,
|
|
97
92
|
class: "pa-input__label"
|
|
98
93
|
}, [
|
|
99
|
-
|
|
100
|
-
e.required ? (i(), n("span",
|
|
101
|
-
], 8,
|
|
102
|
-
r("div",
|
|
103
|
-
o.$slots["icon-prefix"] ? (i(), n("span",
|
|
94
|
+
S(w(e.label), 1),
|
|
95
|
+
e.required ? (i(), n("span", U, "*")) : s("", !0)
|
|
96
|
+
], 8, R)) : s("", !0),
|
|
97
|
+
r("div", F, [
|
|
98
|
+
o.$slots["icon-prefix"] ? (i(), n("span", G, [
|
|
104
99
|
B(o.$slots, "icon-prefix", {}, void 0, !0)
|
|
105
100
|
])) : s("", !0),
|
|
106
|
-
|
|
101
|
+
j(r("input", {
|
|
107
102
|
id: v.value,
|
|
108
103
|
ref_key: "inputRef",
|
|
109
104
|
ref: g,
|
|
110
105
|
"onUpdate:modelValue": l[0] || (l[0] = (b) => c.value = b),
|
|
111
|
-
type:
|
|
106
|
+
type: z.value,
|
|
112
107
|
placeholder: e.placeholder,
|
|
113
108
|
disabled: e.disabled,
|
|
114
109
|
readonly: e.readonly,
|
|
@@ -125,8 +120,8 @@ const Y = /* @__PURE__ */ N({
|
|
|
125
120
|
"aria-invalid": u.value || void 0,
|
|
126
121
|
"aria-describedby": m.value ? h.value : void 0,
|
|
127
122
|
class: "pa-input__control"
|
|
128
|
-
}, null, 8,
|
|
129
|
-
[
|
|
123
|
+
}, null, 8, H), [
|
|
124
|
+
[A, c.value]
|
|
130
125
|
]),
|
|
131
126
|
p.value ? (i(), n("button", {
|
|
132
127
|
key: 1,
|
|
@@ -135,7 +130,7 @@ const Y = /* @__PURE__ */ N({
|
|
|
135
130
|
class: "pa-input__action",
|
|
136
131
|
onClick: l[1] || (l[1] = (b) => d.value = !d.value)
|
|
137
132
|
}, [
|
|
138
|
-
d.value ? (i(), n("svg",
|
|
133
|
+
d.value ? (i(), n("svg", K, [...l[2] || (l[2] = [
|
|
139
134
|
r("path", {
|
|
140
135
|
d: "M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z",
|
|
141
136
|
"stroke-linejoin": "round"
|
|
@@ -149,7 +144,7 @@ const Y = /* @__PURE__ */ N({
|
|
|
149
144
|
d: "M2 2l12 12",
|
|
150
145
|
"stroke-linecap": "round"
|
|
151
146
|
}, null, -1)
|
|
152
|
-
])])) : (i(), n("svg",
|
|
147
|
+
])])) : (i(), n("svg", L, [...l[3] || (l[3] = [
|
|
153
148
|
r("path", {
|
|
154
149
|
d: "M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z",
|
|
155
150
|
"stroke-linejoin": "round"
|
|
@@ -160,8 +155,8 @@ const Y = /* @__PURE__ */ N({
|
|
|
160
155
|
r: "2"
|
|
161
156
|
}, null, -1)
|
|
162
157
|
])]))
|
|
163
|
-
], 8,
|
|
164
|
-
o.$slots["icon-suffix"] && !f.value && !p.value ? (i(), n("span",
|
|
158
|
+
], 8, J)) : s("", !0),
|
|
159
|
+
o.$slots["icon-suffix"] && !f.value && !p.value ? (i(), n("span", O, [
|
|
165
160
|
B(o.$slots, "icon-suffix", {}, void 0, !0)
|
|
166
161
|
])) : s("", !0),
|
|
167
162
|
f.value ? (i(), n("button", {
|
|
@@ -169,7 +164,7 @@ const Y = /* @__PURE__ */ N({
|
|
|
169
164
|
type: "button",
|
|
170
165
|
"aria-label": "Cancella",
|
|
171
166
|
class: "pa-input__action",
|
|
172
|
-
onClick:
|
|
167
|
+
onClick: I
|
|
173
168
|
}, [...l[4] || (l[4] = [
|
|
174
169
|
r("svg", {
|
|
175
170
|
width: "16",
|
|
@@ -190,12 +185,11 @@ const Y = /* @__PURE__ */ N({
|
|
|
190
185
|
key: 1,
|
|
191
186
|
id: h.value,
|
|
192
187
|
class: k(["pa-input__message", { "pa-input__message--error": u.value }])
|
|
193
|
-
}, w(m.value), 11,
|
|
188
|
+
}, w(m.value), 11, Q)) : s("", !0)
|
|
194
189
|
], 2));
|
|
195
190
|
}
|
|
196
191
|
});
|
|
197
192
|
export {
|
|
198
|
-
|
|
199
|
-
W as nextPaInputId
|
|
193
|
+
X as default
|
|
200
194
|
};
|
|
201
195
|
//# sourceMappingURL=PaInput.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaInput.vue2.js","sources":["../../../src/components/PaInput/PaInput.vue"],"sourcesContent":["<script lang=\"ts\">\nlet uid = 0\nexport function nextPaInputId() {\n return `pa-input-${++uid}`\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue'\n\nexport type PaInputSize = 'sm' | 'lg'\n\nexport type PaInputType =\n | 'text'\n | 'email'\n | 'tel'\n | 'url'\n | 'password'\n | 'number'\n | 'date'\n\nexport interface PaInputProps {\n type?: PaInputType\n size?: PaInputSize\n label?: string\n placeholder?: string\n disabled?: boolean\n id?: string\n helperText?: string\n error?: string | boolean\n valid?: boolean\n required?: boolean\n readonly?: boolean\n clearable?: boolean\n min?: string | number\n max?: string | number\n step?: string | number\n name?: string\n autocomplete?: string\n maxlength?: number\n minlength?: number\n}\n\nconst props = withDefaults(defineProps<PaInputProps>(), {\n type: 'text',\n size: 'sm',\n disabled: false,\n error: false,\n valid: false,\n required: false,\n readonly: false,\n clearable: false,\n})\n\nconst emit = defineEmits<{\n clear: []\n}>()\n\nconst model = defineModel<string>({ default: '' })\n\nconst generatedId = nextPaInputId()\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.value}-msg`)\n\nconst errorActive = computed(() => Boolean(props.error))\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n typeof props.error === 'string' && props.error.length > 0 ? props.error : null,\n)\nconst helperMessage = computed(() =>\n !errorActive.value && !validActive.value && props.helperText ? props.helperText : null,\n)\nconst message = computed(() => errorMessage.value ?? helperMessage.value)\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst isPasswordVisible = ref(false)\nconst showPasswordToggle = computed(\n () => props.type === 'password' && !props.disabled && !props.readonly,\n)\nconst effectiveType = computed(() =>\n props.type === 'password' && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst showClear = computed(\n () =>\n props.clearable &&\n model.value.length > 0 &&\n !props.disabled &&\n !props.readonly &&\n !showPasswordToggle.value,\n)\n\nfunction onClear() {\n model.value = ''\n emit('clear')\n nextTick(() => inputRef.value?.focus())\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'pa-input',\n `pa-input--${size}`,\n {\n 'pa-input--disabled': disabled,\n 'pa-input--readonly': readonly,\n 'pa-input--error': errorActive,\n 'pa-input--valid': validActive,\n 'pa-input--has-prefix': !!$slots['icon-prefix'],\n 'pa-input--has-suffix': !!$slots['icon-suffix'] && !showClear && !showPasswordToggle,\n },\n ]\"\n >\n <label v-if=\"label\" :for=\"inputId\" class=\"pa-input__label\">\n {{ label }}<span v-if=\"required\" class=\"pa-input__required\" aria-hidden=\"true\">*</span>\n </label>\n <div class=\"pa-input__field\">\n <span v-if=\"$slots['icon-prefix']\" class=\"pa-input__icon pa-input__icon--prefix\">\n <slot name=\"icon-prefix\" />\n </span>\n <input\n :id=\"inputId\"\n ref=\"inputRef\"\n v-model=\"model\"\n :type=\"effectiveType\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :required=\"required\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :name=\"name\"\n :autocomplete=\"autocomplete\"\n :maxlength=\"maxlength\"\n :minlength=\"minlength\"\n :inputmode=\"type === 'number' ? 'numeric' : undefined\"\n :aria-required=\"required || undefined\"\n :aria-invalid=\"errorActive || undefined\"\n :aria-describedby=\"message ? messageId : undefined\"\n class=\"pa-input__control\"\n />\n <button\n v-if=\"showPasswordToggle\"\n type=\"button\"\n :aria-label=\"isPasswordVisible ? 'Nascondi password' : 'Mostra password'\"\n class=\"pa-input__action\"\n @click=\"isPasswordVisible = !isPasswordVisible\"\n >\n <svg\n v-if=\"isPasswordVisible\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n aria-hidden=\"true\"\n >\n <path d=\"M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z\" stroke-linejoin=\"round\" />\n <circle cx=\"8\" cy=\"8\" r=\"2\" />\n <path d=\"M2 2l12 12\" stroke-linecap=\"round\" />\n </svg>\n <svg\n v-else\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n aria-hidden=\"true\"\n >\n <path d=\"M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z\" stroke-linejoin=\"round\" />\n <circle cx=\"8\" cy=\"8\" r=\"2\" />\n </svg>\n </button>\n <span\n v-if=\"$slots['icon-suffix'] && !showClear && !showPasswordToggle\"\n class=\"pa-input__icon pa-input__icon--suffix\"\n >\n <slot name=\"icon-suffix\" />\n </span>\n <button\n v-if=\"showClear\"\n type=\"button\"\n aria-label=\"Cancella\"\n class=\"pa-input__action\"\n @click=\"onClear\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <path\n d=\"M4 4l8 8M12 4l-8 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n </div>\n <div\n v-if=\"message\"\n :id=\"messageId\"\n :class=\"['pa-input__message', { 'pa-input__message--error': errorActive }]\"\n >\n {{ message }}\n </div>\n </div>\n</template>\n\n<style scoped>\n.pa-input {\n display: flex;\n flex-direction: column;\n gap: var(--pa-space-2xs);\n font-family: var(--pa-font-family-base);\n}\n\n.pa-input__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-input__field {\n display: flex;\n align-items: center;\n gap: var(--pa-space-xs);\n box-sizing: border-box;\n background: var(--pa-color-bg-white);\n border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n border-radius: var(--pa-radius-smooth);\n transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.pa-input__field:hover {\n border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-input__field:focus-within {\n outline: 3px solid var(--pa-color-primary-focus-border);\n outline-offset: 0;\n border-color: var(--pa-color-primary);\n}\n\n.pa-input__control {\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n color: var(--pa-color-text-black);\n font-family: inherit;\n font-size: var(--pa-font-body-size);\n line-height: var(--pa-font-body-line-height);\n font-weight: var(--pa-font-body-weight);\n}\n\n.pa-input__control::placeholder {\n color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-input__control[type=\"number\"] {\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.pa-input__control[type=\"number\"]::-webkit-outer-spin-button,\n.pa-input__control[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n -webkit-appearance: none;\n margin: 0;\n}\n\n.pa-input--sm .pa-input__field {\n height: 44px;\n padding: 0 var(--pa-space-sm);\n}\n\n.pa-input--lg .pa-input__field {\n height: 60px;\n padding: 0 var(--pa-space-sm);\n}\n\n.pa-input--lg .pa-input__label {\n font-size: var(--pa-font-label-md-size);\n line-height: var(--pa-font-label-md-line-height);\n font-weight: var(--pa-font-label-md-weight);\n}\n\n.pa-input__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-input--disabled .pa-input__icon {\n color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-input--disabled .pa-input__field {\n background: var(--pa-color-bg-disabled-gray);\n border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-input--disabled .pa-input__field:hover {\n border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-input--disabled .pa-input__label,\n.pa-input--disabled .pa-input__control {\n color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-input--disabled .pa-input__control {\n cursor: not-allowed;\n}\n\n.pa-input--error .pa-input__field {\n border-color: var(--pa-color-error);\n border-width: var(--pa-border-sm);\n}\n.pa-input--error .pa-input__field:hover {\n border-color: var(--pa-color-error);\n}\n\n.pa-input--valid .pa-input__field {\n border-color: var(--pa-color-success);\n border-width: var(--pa-border-sm);\n}\n.pa-input--valid .pa-input__field:hover {\n border-color: var(--pa-color-success);\n}\n\n.pa-input__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-input__message--error {\n color: var(--pa-color-error);\n}\n\n.pa-input__required {\n margin-left: var(--pa-space-3xs);\n color: var(--pa-color-error);\n}\n\n.pa-input--readonly .pa-input__field {\n background: var(--pa-color-bg-primary-light-40);\n}\n\n.pa-input__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n margin: 0;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--pa-radius-smooth);\n color: var(--pa-color-text-secondary-gray);\n cursor: pointer;\n}\n\n.pa-input__action:hover {\n color: var(--pa-color-neutral-charcoal);\n}\n\n.pa-input__action:focus { outline: none; }\n\n.pa-input__action:focus-visible {\n outline: 2px solid var(--pa-color-primary-focus-border);\n outline-offset: 1px;\n}\n</style>\n"],"names":["uid","nextPaInputId","props","__props","emit","__emit","model","_useModel","generatedId","inputId","computed","messageId","errorActive","validActive","errorMessage","helperMessage","message","inputRef","ref","isPasswordVisible","showPasswordToggle","effectiveType","showClear","onClear","nextTick","_a","_createElementBlock","_normalizeClass","$slots","_hoisted_2","_createElementVNode","_hoisted_3","_openBlock","_hoisted_4","_renderSlot","_ctx","$event","_cache","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PaInput.vue2.js","sources":["../../../src/components/PaInput/PaInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useId } from 'vue'\n\nexport type PaInputSize = 'sm' | 'lg'\n\nexport type PaInputType =\n | 'text'\n | 'email'\n | 'tel'\n | 'url'\n | 'password'\n | 'number'\n | 'date'\n\nexport interface PaInputProps {\n type?: PaInputType\n size?: PaInputSize\n label?: string\n placeholder?: string\n disabled?: boolean\n id?: string\n helperText?: string\n error?: string | boolean\n valid?: boolean\n required?: boolean\n readonly?: boolean\n clearable?: boolean\n min?: string | number\n max?: string | number\n step?: string | number\n name?: string\n autocomplete?: string\n maxlength?: number\n minlength?: number\n}\n\nconst props = withDefaults(defineProps<PaInputProps>(), {\n type: 'text',\n size: 'sm',\n disabled: false,\n error: false,\n valid: false,\n required: false,\n readonly: false,\n clearable: false,\n})\n\nconst emit = defineEmits<{\n clear: []\n}>()\n\nconst model = defineModel<string>({ default: '' })\n\nconst generatedId = `pa-input-${useId()}`\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.value}-msg`)\n\nconst errorActive = computed(() => Boolean(props.error))\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n typeof props.error === 'string' && props.error.length > 0 ? props.error : null,\n)\nconst helperMessage = computed(() =>\n !errorActive.value && !validActive.value && props.helperText ? props.helperText : null,\n)\nconst message = computed(() => errorMessage.value ?? helperMessage.value)\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst isPasswordVisible = ref(false)\nconst showPasswordToggle = computed(\n () => props.type === 'password' && !props.disabled && !props.readonly,\n)\nconst effectiveType = computed(() =>\n props.type === 'password' && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst showClear = computed(\n () =>\n props.clearable &&\n model.value.length > 0 &&\n !props.disabled &&\n !props.readonly &&\n !showPasswordToggle.value,\n)\n\nfunction onClear() {\n model.value = ''\n emit('clear')\n nextTick(() => inputRef.value?.focus())\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'pa-input',\n `pa-input--${size}`,\n {\n 'pa-input--disabled': disabled,\n 'pa-input--readonly': readonly,\n 'pa-input--error': errorActive,\n 'pa-input--valid': validActive,\n 'pa-input--has-prefix': !!$slots['icon-prefix'],\n 'pa-input--has-suffix': !!$slots['icon-suffix'] && !showClear && !showPasswordToggle,\n },\n ]\"\n >\n <label v-if=\"label\" :for=\"inputId\" class=\"pa-input__label\">\n {{ label }}<span v-if=\"required\" class=\"pa-input__required\" aria-hidden=\"true\">*</span>\n </label>\n <div class=\"pa-input__field\">\n <span v-if=\"$slots['icon-prefix']\" class=\"pa-input__icon pa-input__icon--prefix\">\n <slot name=\"icon-prefix\" />\n </span>\n <input\n :id=\"inputId\"\n ref=\"inputRef\"\n v-model=\"model\"\n :type=\"effectiveType\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :required=\"required\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :name=\"name\"\n :autocomplete=\"autocomplete\"\n :maxlength=\"maxlength\"\n :minlength=\"minlength\"\n :inputmode=\"type === 'number' ? 'numeric' : undefined\"\n :aria-required=\"required || undefined\"\n :aria-invalid=\"errorActive || undefined\"\n :aria-describedby=\"message ? messageId : undefined\"\n class=\"pa-input__control\"\n />\n <button\n v-if=\"showPasswordToggle\"\n type=\"button\"\n :aria-label=\"isPasswordVisible ? 'Nascondi password' : 'Mostra password'\"\n class=\"pa-input__action\"\n @click=\"isPasswordVisible = !isPasswordVisible\"\n >\n <svg\n v-if=\"isPasswordVisible\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n aria-hidden=\"true\"\n >\n <path d=\"M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z\" stroke-linejoin=\"round\" />\n <circle cx=\"8\" cy=\"8\" r=\"2\" />\n <path d=\"M2 2l12 12\" stroke-linecap=\"round\" />\n </svg>\n <svg\n v-else\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n aria-hidden=\"true\"\n >\n <path d=\"M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z\" stroke-linejoin=\"round\" />\n <circle cx=\"8\" cy=\"8\" r=\"2\" />\n </svg>\n </button>\n <span\n v-if=\"$slots['icon-suffix'] && !showClear && !showPasswordToggle\"\n class=\"pa-input__icon pa-input__icon--suffix\"\n >\n <slot name=\"icon-suffix\" />\n </span>\n <button\n v-if=\"showClear\"\n type=\"button\"\n aria-label=\"Cancella\"\n class=\"pa-input__action\"\n @click=\"onClear\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <path\n d=\"M4 4l8 8M12 4l-8 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n </div>\n <div\n v-if=\"message\"\n :id=\"messageId\"\n :class=\"['pa-input__message', { 'pa-input__message--error': errorActive }]\"\n >\n {{ message }}\n </div>\n </div>\n</template>\n\n<style scoped>\n.pa-input {\n display: flex;\n flex-direction: column;\n gap: var(--pa-space-2xs);\n font-family: var(--pa-font-family-base);\n}\n\n.pa-input__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-input__field {\n display: flex;\n align-items: center;\n gap: var(--pa-space-xs);\n box-sizing: border-box;\n background: var(--pa-color-bg-white);\n border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n border-radius: var(--pa-radius-smooth);\n transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.pa-input__field:hover {\n border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-input__field:focus-within {\n outline: 3px solid var(--pa-color-primary-focus-border);\n outline-offset: 0;\n border-color: var(--pa-color-primary);\n}\n\n.pa-input__control {\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n color: var(--pa-color-text-black);\n font-family: inherit;\n font-size: var(--pa-font-body-size);\n line-height: var(--pa-font-body-line-height);\n font-weight: var(--pa-font-body-weight);\n}\n\n.pa-input__control::placeholder {\n color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-input__control[type=\"number\"] {\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.pa-input__control[type=\"number\"]::-webkit-outer-spin-button,\n.pa-input__control[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n -webkit-appearance: none;\n margin: 0;\n}\n\n.pa-input--sm .pa-input__field {\n height: 44px;\n padding: 0 var(--pa-space-sm);\n}\n\n.pa-input--lg .pa-input__field {\n height: 60px;\n padding: 0 var(--pa-space-sm);\n}\n\n.pa-input--lg .pa-input__label {\n font-size: var(--pa-font-label-md-size);\n line-height: var(--pa-font-label-md-line-height);\n font-weight: var(--pa-font-label-md-weight);\n}\n\n.pa-input__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-input--disabled .pa-input__icon {\n color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-input--disabled .pa-input__field {\n background: var(--pa-color-bg-disabled-gray);\n border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-input--disabled .pa-input__field:hover {\n border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-input--disabled .pa-input__label,\n.pa-input--disabled .pa-input__control {\n color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-input--disabled .pa-input__control {\n cursor: not-allowed;\n}\n\n.pa-input--error .pa-input__field {\n border-color: var(--pa-color-error);\n border-width: var(--pa-border-sm);\n}\n.pa-input--error .pa-input__field:hover {\n border-color: var(--pa-color-error);\n}\n\n.pa-input--valid .pa-input__field {\n border-color: var(--pa-color-success);\n border-width: var(--pa-border-sm);\n}\n.pa-input--valid .pa-input__field:hover {\n border-color: var(--pa-color-success);\n}\n\n.pa-input__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-input__message--error {\n color: var(--pa-color-error);\n}\n\n.pa-input__required {\n margin-left: var(--pa-space-3xs);\n color: var(--pa-color-error);\n}\n\n.pa-input--readonly .pa-input__field {\n background: var(--pa-color-bg-primary-light-40);\n}\n\n.pa-input__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n margin: 0;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--pa-radius-smooth);\n color: var(--pa-color-text-secondary-gray);\n cursor: pointer;\n}\n\n.pa-input__action:hover {\n color: var(--pa-color-neutral-charcoal);\n}\n\n.pa-input__action:focus { outline: none; }\n\n.pa-input__action:focus-visible {\n outline: 2px solid var(--pa-color-primary-focus-border);\n outline-offset: 1px;\n}\n</style>\n"],"names":["props","__props","emit","__emit","model","_useModel","generatedId","useId","inputId","computed","messageId","errorActive","validActive","errorMessage","helperMessage","message","inputRef","ref","isPasswordVisible","showPasswordToggle","effectiveType","showClear","onClear","nextTick","_a","_createElementBlock","_normalizeClass","$slots","_hoisted_2","_createElementVNode","_hoisted_3","_openBlock","_hoisted_4","_renderSlot","_ctx","$event","_cache","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10"],"mappings":"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"}
|
|
@@ -9,24 +9,27 @@ export interface PaModalProps {
|
|
|
9
9
|
closeLabel?: string;
|
|
10
10
|
size?: PaModalSize;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
type __VLS_Props = PaModalProps;
|
|
13
|
+
type __VLS_PublicProps = __VLS_Props & {
|
|
14
|
+
'open'?: boolean;
|
|
15
|
+
};
|
|
16
|
+
declare var __VLS_15: {}, __VLS_17: {};
|
|
17
|
+
type __VLS_Slots = {} & {
|
|
18
|
+
default?: (props: typeof __VLS_15) => any;
|
|
19
|
+
} & {
|
|
20
|
+
footer?: (props: typeof __VLS_17) => any;
|
|
21
|
+
};
|
|
22
|
+
declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
15
23
|
"update:open": (value: boolean) => any;
|
|
16
|
-
}, string, import("vue").PublicProps, Readonly<
|
|
17
|
-
open?: boolean;
|
|
18
|
-
}> & Readonly<{
|
|
24
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
19
25
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
20
26
|
}>, {
|
|
21
27
|
size: PaModalSize;
|
|
22
28
|
titleLevel: 1 | 2 | 3 | 4 | 5 | 6;
|
|
23
29
|
showClose: boolean;
|
|
24
30
|
closeLabel: string;
|
|
25
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any
|
|
26
|
-
|
|
27
|
-
} & {
|
|
28
|
-
footer?: (props: {}) => any;
|
|
29
|
-
}>;
|
|
31
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
32
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
30
33
|
export default _default;
|
|
31
34
|
type __VLS_WithSlots<T, S> = T & {
|
|
32
35
|
new (): {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./PaModal.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
|
-
import
|
|
4
|
-
const
|
|
3
|
+
import t from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0f898bd4"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
m as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=PaModal.vue.js.map
|