@greghowe79/the-lib 1.0.9 → 1.1.1
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/lib/components/input/input.qwik.cjs +59 -45
- package/lib/components/input/input.qwik.mjs +59 -45
- package/lib/components/modal/modal.qwik.cjs +2 -2
- package/lib/components/modal/modal.qwik.mjs +2 -2
- package/lib/components/modal/styles.css.qwik.cjs +1 -1
- package/lib/components/modal/styles.css.qwik.mjs +1 -1
- package/lib-types/components/modal/modal.d.ts +1 -0
- package/lib-types/stories/modal.stories.d.ts +1 -0
- package/package.json +1 -1
|
@@ -88,31 +88,38 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
88
88
|
})
|
|
89
89
|
]
|
|
90
90
|
})
|
|
91
|
-
}) : type === "tel" ? /* @__PURE__ */ jsxRuntime.
|
|
91
|
+
}) : type === "tel" ? /* @__PURE__ */ jsxRuntime.jsxs("label", {
|
|
92
92
|
class: `input-label ${bgLight ? "bg_light" : ""}`,
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
93
|
+
for: id,
|
|
94
|
+
children: [
|
|
95
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
96
|
+
class: "sr-only",
|
|
97
|
+
children: label
|
|
98
|
+
}),
|
|
99
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
100
|
+
class: "input-wrapper",
|
|
101
|
+
children: [
|
|
102
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
103
|
+
class: "input-icon",
|
|
104
|
+
"aria-hidden": "true",
|
|
105
|
+
children: prefix
|
|
106
|
+
}),
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
108
|
+
id,
|
|
109
|
+
type,
|
|
110
|
+
inputMode: "tel",
|
|
111
|
+
pattern: "[0-9]*",
|
|
112
|
+
class: `input ${showError.value ? "error" : ""}`,
|
|
113
|
+
placeholder,
|
|
114
|
+
"bind:value": value,
|
|
115
|
+
onInput$: inputHandler,
|
|
116
|
+
onBlur$: inputHandler,
|
|
117
|
+
maxLength: 14,
|
|
118
|
+
required
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
})
|
|
122
|
+
]
|
|
116
123
|
}) : type === "radio" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
117
124
|
children: [
|
|
118
125
|
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
@@ -132,28 +139,35 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
132
139
|
children: label
|
|
133
140
|
})
|
|
134
141
|
]
|
|
135
|
-
}) : /* @__PURE__ */ jsxRuntime.
|
|
142
|
+
}) : /* @__PURE__ */ jsxRuntime.jsxs("label", {
|
|
136
143
|
class: `input-label ${bgLight ? "bg_light" : ""}`,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
144
|
+
for: id,
|
|
145
|
+
children: [
|
|
146
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
147
|
+
class: "sr-only",
|
|
148
|
+
children: label
|
|
149
|
+
}),
|
|
150
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
151
|
+
class: icon ? "input-wrapper" : "no_icon",
|
|
152
|
+
children: [
|
|
153
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
154
|
+
class: "input-icon",
|
|
155
|
+
"aria-hidden": "true",
|
|
156
|
+
children: typeof icon === "function" ? icon({}, null, 0) : icon
|
|
157
|
+
}),
|
|
158
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
159
|
+
id,
|
|
160
|
+
type,
|
|
161
|
+
class: `input ${showError.value ? "error" : ""}`,
|
|
162
|
+
placeholder,
|
|
163
|
+
"bind:value": value,
|
|
164
|
+
onInput$: inputHandler,
|
|
165
|
+
onBlur$: inputHandler,
|
|
166
|
+
required
|
|
167
|
+
})
|
|
168
|
+
]
|
|
169
|
+
})
|
|
170
|
+
]
|
|
157
171
|
}),
|
|
158
172
|
showError.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
159
173
|
class: "error-message",
|
|
@@ -86,31 +86,38 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
86
86
|
})
|
|
87
87
|
]
|
|
88
88
|
})
|
|
89
|
-
}) : type === "tel" ? /* @__PURE__ */
|
|
89
|
+
}) : type === "tel" ? /* @__PURE__ */ jsxs("label", {
|
|
90
90
|
class: `input-label ${bgLight ? "bg_light" : ""}`,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
91
|
+
for: id,
|
|
92
|
+
children: [
|
|
93
|
+
label && /* @__PURE__ */ jsx("span", {
|
|
94
|
+
class: "sr-only",
|
|
95
|
+
children: label
|
|
96
|
+
}),
|
|
97
|
+
/* @__PURE__ */ jsxs("div", {
|
|
98
|
+
class: "input-wrapper",
|
|
99
|
+
children: [
|
|
100
|
+
/* @__PURE__ */ jsx("span", {
|
|
101
|
+
class: "input-icon",
|
|
102
|
+
"aria-hidden": "true",
|
|
103
|
+
children: prefix
|
|
104
|
+
}),
|
|
105
|
+
/* @__PURE__ */ jsx("input", {
|
|
106
|
+
id,
|
|
107
|
+
type,
|
|
108
|
+
inputMode: "tel",
|
|
109
|
+
pattern: "[0-9]*",
|
|
110
|
+
class: `input ${showError.value ? "error" : ""}`,
|
|
111
|
+
placeholder,
|
|
112
|
+
"bind:value": value,
|
|
113
|
+
onInput$: inputHandler,
|
|
114
|
+
onBlur$: inputHandler,
|
|
115
|
+
maxLength: 14,
|
|
116
|
+
required
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
})
|
|
120
|
+
]
|
|
114
121
|
}) : type === "radio" ? /* @__PURE__ */ jsxs(Fragment, {
|
|
115
122
|
children: [
|
|
116
123
|
/* @__PURE__ */ jsx("input", {
|
|
@@ -130,28 +137,35 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
130
137
|
children: label
|
|
131
138
|
})
|
|
132
139
|
]
|
|
133
|
-
}) : /* @__PURE__ */
|
|
140
|
+
}) : /* @__PURE__ */ jsxs("label", {
|
|
134
141
|
class: `input-label ${bgLight ? "bg_light" : ""}`,
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
142
|
+
for: id,
|
|
143
|
+
children: [
|
|
144
|
+
label && /* @__PURE__ */ jsx("span", {
|
|
145
|
+
class: "sr-only",
|
|
146
|
+
children: label
|
|
147
|
+
}),
|
|
148
|
+
/* @__PURE__ */ jsxs("div", {
|
|
149
|
+
class: icon ? "input-wrapper" : "no_icon",
|
|
150
|
+
children: [
|
|
151
|
+
icon && /* @__PURE__ */ jsx("span", {
|
|
152
|
+
class: "input-icon",
|
|
153
|
+
"aria-hidden": "true",
|
|
154
|
+
children: typeof icon === "function" ? icon({}, null, 0) : icon
|
|
155
|
+
}),
|
|
156
|
+
/* @__PURE__ */ jsx("input", {
|
|
157
|
+
id,
|
|
158
|
+
type,
|
|
159
|
+
class: `input ${showError.value ? "error" : ""}`,
|
|
160
|
+
placeholder,
|
|
161
|
+
"bind:value": value,
|
|
162
|
+
onInput$: inputHandler,
|
|
163
|
+
onBlur$: inputHandler,
|
|
164
|
+
required
|
|
165
|
+
})
|
|
166
|
+
]
|
|
167
|
+
})
|
|
168
|
+
]
|
|
155
169
|
}),
|
|
156
170
|
showError.value && /* @__PURE__ */ jsx("div", {
|
|
157
171
|
class: "error-message",
|
|
@@ -6,13 +6,13 @@ const styles = require("./styles.css.qwik.cjs");
|
|
|
6
6
|
const button = require("../button/button.qwik.cjs");
|
|
7
7
|
const closeIcon = require("../icons/closeIcon.qwik.cjs");
|
|
8
8
|
require("@fontsource/roboto-condensed");
|
|
9
|
-
const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default" }) => {
|
|
9
|
+
const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default", light = false }) => {
|
|
10
10
|
qwik.useStylesScoped$(styles);
|
|
11
11
|
const isDisabled = typeof primaryButtonDisabled === "object" ? primaryButtonDisabled.value : primaryButtonDisabled ?? false;
|
|
12
12
|
const modalClass = type === "small" ? "modal small" : "modal";
|
|
13
13
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
14
14
|
id: "modal",
|
|
15
|
-
class: "modal-overlay",
|
|
15
|
+
class: light ? "light-overlay" : "modal-overlay",
|
|
16
16
|
"aria-hidden": !open?.value,
|
|
17
17
|
role: "dialog",
|
|
18
18
|
"aria-modal": "true",
|
|
@@ -4,13 +4,13 @@ import styles from "./styles.css.qwik.mjs";
|
|
|
4
4
|
import { Button } from "../button/button.qwik.mjs";
|
|
5
5
|
import { CloseIcon } from "../icons/closeIcon.qwik.mjs";
|
|
6
6
|
import "@fontsource/roboto-condensed";
|
|
7
|
-
const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default" }) => {
|
|
7
|
+
const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default", light = false }) => {
|
|
8
8
|
useStylesScoped$(styles);
|
|
9
9
|
const isDisabled = typeof primaryButtonDisabled === "object" ? primaryButtonDisabled.value : primaryButtonDisabled ?? false;
|
|
10
10
|
const modalClass = type === "small" ? "modal small" : "modal";
|
|
11
11
|
return /* @__PURE__ */ jsx("div", {
|
|
12
12
|
id: "modal",
|
|
13
|
-
class: "modal-overlay",
|
|
13
|
+
class: light ? "light-overlay" : "modal-overlay",
|
|
14
14
|
"aria-hidden": !open?.value,
|
|
15
15
|
role: "dialog",
|
|
16
16
|
"aria-modal": "true",
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = "
|
|
2
|
+
const styles = ".modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n}\r\n.light-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n}\r\n\r\n.modal {\r\n background: white;\r\n border-radius: 8px;\r\n width: 90%;\r\n max-width: 800px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\r\n outline: none;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n color: #333;\r\n}\r\n\r\n.modal-header {\r\n padding: 16px 24px;\r\n border-bottom: 1px solid #e0e0e0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.modal-header h2 {\r\n margin: 0;\r\n font-size: 1.25rem;\r\n}\r\n\r\n.modal-body {\r\n padding: 24px;\r\n max-height: 60vh;\r\n overflow-y: auto;\r\n font-weight: 400;\r\n}\r\n\r\n.modal-footer {\r\n padding: 16px 24px;\r\n /* border-top: 1px solid #e0e0e0; */\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n}\r\n\r\n/* Stili per la versione small */\r\n.modal.small {\r\n max-width: 500px;\r\n}\r\n\r\n.modal.small .modal-header {\r\n justify-content: center;\r\n position: relative; /* Per posizionare eventuale bottone chiusura */\r\n}\r\n\r\n.modal.small .modal-header h2 {\r\n text-align: center;\r\n}\r\n\r\n/* Se vuoi mantenere il bottone chiusura a destra */\r\n.modal.small .modal-header .close-button {\r\n position: absolute;\r\n right: 16px;\r\n}\r\n\r\n.modal.small .modal-body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n padding: 20px; /* Riduci il padding se necessario */\r\n}\r\n\r\n.modal.small .modal-footer {\r\n justify-content: center;\r\n}\r\n\r\n/* Stili comuni */\r\n.close-button {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n padding: 4px;\r\n}\r\n\r\n[aria-hidden='true'] {\r\n display: none;\r\n}\r\n\r\nbutton:focus-visible,\r\n[tabindex='0']:focus-visible {\r\n outline: 2px solid #005fcc;\r\n outline-offset: 2px;\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = "
|
|
1
|
+
const styles = ".modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n}\r\n.light-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n}\r\n\r\n.modal {\r\n background: white;\r\n border-radius: 8px;\r\n width: 90%;\r\n max-width: 800px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\r\n outline: none;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n color: #333;\r\n}\r\n\r\n.modal-header {\r\n padding: 16px 24px;\r\n border-bottom: 1px solid #e0e0e0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.modal-header h2 {\r\n margin: 0;\r\n font-size: 1.25rem;\r\n}\r\n\r\n.modal-body {\r\n padding: 24px;\r\n max-height: 60vh;\r\n overflow-y: auto;\r\n font-weight: 400;\r\n}\r\n\r\n.modal-footer {\r\n padding: 16px 24px;\r\n /* border-top: 1px solid #e0e0e0; */\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n}\r\n\r\n/* Stili per la versione small */\r\n.modal.small {\r\n max-width: 500px;\r\n}\r\n\r\n.modal.small .modal-header {\r\n justify-content: center;\r\n position: relative; /* Per posizionare eventuale bottone chiusura */\r\n}\r\n\r\n.modal.small .modal-header h2 {\r\n text-align: center;\r\n}\r\n\r\n/* Se vuoi mantenere il bottone chiusura a destra */\r\n.modal.small .modal-header .close-button {\r\n position: absolute;\r\n right: 16px;\r\n}\r\n\r\n.modal.small .modal-body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n padding: 20px; /* Riduci il padding se necessario */\r\n}\r\n\r\n.modal.small .modal-footer {\r\n justify-content: center;\r\n}\r\n\r\n/* Stili comuni */\r\n.close-button {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n padding: 4px;\r\n}\r\n\r\n[aria-hidden='true'] {\r\n display: none;\r\n}\r\n\r\nbutton:focus-visible,\r\n[tabindex='0']:focus-visible {\r\n outline: 2px solid #005fcc;\r\n outline-offset: 2px;\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|