@uva-glass/component-library 3.52.10 → 3.52.11
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.
|
@@ -16,9 +16,11 @@ export interface FormInputProps {
|
|
|
16
16
|
notValidatedText?: string;
|
|
17
17
|
/** Returns array of selected values as number */
|
|
18
18
|
onChange?: (value: string) => void;
|
|
19
|
+
/** Sets max length for the standard input */
|
|
20
|
+
maxLength?: number;
|
|
19
21
|
/** Determines if the container wrapper is rendered. */
|
|
20
22
|
noContainer?: boolean;
|
|
21
23
|
/** Optional custom input that will replace the default input */
|
|
22
24
|
customInput?: ReactNode;
|
|
23
25
|
}
|
|
24
|
-
export declare const FormInput: ({ id, label, labelPosition, type, required, notValid, notValidatedText, onChange, noContainer, customInput, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare const FormInput: ({ id, label, labelPosition, type, required, notValid, notValidatedText, onChange, maxLength, noContainer, customInput, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsxs as l, Fragment as k, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { c as f } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import "../Accordion/Accordion.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import "../Buttons/Button.js";
|
|
6
6
|
import "../Buttons/LinkButton.js";
|
|
7
7
|
import "@react-aria/button";
|
|
8
8
|
import "../Checkbox/Checkbox.js";
|
|
9
|
-
import { Label as
|
|
10
|
-
import { FeedbackBox as
|
|
9
|
+
import { Label as g } from "../Label/Label.js";
|
|
10
|
+
import { FeedbackBox as x } from "../FeedbackBox/FeedbackBox.js";
|
|
11
11
|
import "@react-aria/dialog";
|
|
12
12
|
import "@react-aria/focus";
|
|
13
13
|
import "@react-aria/overlays";
|
|
@@ -37,41 +37,43 @@ import '../../assets/FormInput.css';const t = {
|
|
|
37
37
|
"form-input__input-container": "_form-input__input-container_rt0pn_35",
|
|
38
38
|
"form-input__input": "_form-input__input_rt0pn_25",
|
|
39
39
|
"not-valid": "_not-valid_rt0pn_60"
|
|
40
|
-
},
|
|
40
|
+
}, V = ({
|
|
41
41
|
id: o,
|
|
42
42
|
label: i,
|
|
43
|
-
labelPosition:
|
|
43
|
+
labelPosition: u = "top",
|
|
44
44
|
type: p = "text",
|
|
45
|
-
required:
|
|
46
|
-
notValid:
|
|
45
|
+
required: s = !1,
|
|
46
|
+
notValid: d = !1,
|
|
47
47
|
notValidatedText: e = "",
|
|
48
48
|
onChange: m,
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
maxLength: _,
|
|
50
|
+
noContainer: b = !1,
|
|
51
|
+
customInput: a
|
|
51
52
|
}) => {
|
|
52
|
-
const
|
|
53
|
+
const h = (n) => ["e", "E", "+", "-"].includes(n.key) && n.preventDefault(), v = (n) => {
|
|
53
54
|
typeof m == "function" && m(n.target.value);
|
|
54
|
-
},
|
|
55
|
-
i && /* @__PURE__ */ r(
|
|
56
|
-
/* @__PURE__ */
|
|
57
|
-
|
|
55
|
+
}, c = /* @__PURE__ */ l(k, { children: [
|
|
56
|
+
i && /* @__PURE__ */ r(g, { htmlFor: o, required: s, alignRight: !0, children: i }),
|
|
57
|
+
/* @__PURE__ */ l("div", { className: t["form-input__input-feedback-container"], children: [
|
|
58
|
+
a || /* @__PURE__ */ r("div", { className: t["form-input__input-container"], children: /* @__PURE__ */ r(
|
|
58
59
|
"input",
|
|
59
60
|
{
|
|
60
61
|
id: o,
|
|
61
62
|
type: p,
|
|
62
|
-
...p === "number" && { onKeyDown:
|
|
63
|
-
onChange:
|
|
64
|
-
className:
|
|
65
|
-
[t["not-valid"]]:
|
|
66
|
-
})
|
|
63
|
+
...p === "number" && { onKeyDown: h },
|
|
64
|
+
onChange: v,
|
|
65
|
+
className: f(t["form-input__input"], {
|
|
66
|
+
[t["not-valid"]]: d
|
|
67
|
+
}),
|
|
68
|
+
..._ ? { maxLength: _ } : {}
|
|
67
69
|
}
|
|
68
70
|
) }),
|
|
69
|
-
e !== "" && /* @__PURE__ */ r(
|
|
71
|
+
e !== "" && /* @__PURE__ */ r(x, { level: "error", feedback: e })
|
|
70
72
|
] })
|
|
71
73
|
] });
|
|
72
|
-
return
|
|
74
|
+
return b ? c : /* @__PURE__ */ r("div", { className: f(t["form-input__container"], t[`form-input__container--label-${u}`]), children: c });
|
|
73
75
|
};
|
|
74
76
|
export {
|
|
75
|
-
|
|
77
|
+
V as FormInput
|
|
76
78
|
};
|
|
77
79
|
//# sourceMappingURL=FormInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\n /** Shows red * */\n required?: boolean;\n /** `true` to color border red to show not valid; otherwise, `false`. */\n notValid?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange?: (value: string) => void;\n /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n /** Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValid = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={clsx(styles['form-input__input'], {\n [styles['not-valid']]: notValid,\n })}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValid","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","clsx","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\n /** Shows red * */\n required?: boolean;\n /** `true` to color border red to show not valid; otherwise, `false`. */\n notValid?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange?: (value: string) => void;\n /** Sets max length for the standard input */\n maxLength?: number;\n /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n /** Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValid = false,\n notValidatedText = '',\n onChange,\n maxLength,\n noContainer = false,\n customInput,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={clsx(styles['form-input__input'], {\n [styles['not-valid']]: notValid,\n })}\n {...(maxLength ? { maxLength } : {})}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValid","notValidatedText","onChange","maxLength","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","clsx","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOL,KAAa,cACtBA,EAASK,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAf,uBACEgB,GAAA,EAAM,SAASjB,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAc,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAnB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWQ,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWO,EAAKF,EAAO,mBAAmB,GAAG;AAAA,YAC3C,CAACA,EAAO,WAAW,CAAC,GAAGb;AAAA,UAAA,CACxB;AAAA,UACA,GAAIG,IAAY,EAAE,WAAAA,MAAc,CAAA;AAAA,QAAC;AAAA,MAAA,GAEtC;AAAA,MAEDF,MAAqB,MAAM,gBAAAa,EAACE,KAAY,OAAM,SAAQ,UAAUf,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOG,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWC,EAAKF,EAAO,uBAAuB,GAAGA,EAAO,gCAAgChB,CAAa,EAAE,CAAC,GAC1G,UAAAY,GACH;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.52.
|
|
5
|
+
"version": "3.52.11",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"semantic-release": "^25.0.2",
|
|
86
86
|
"storybook": "^10.0.8",
|
|
87
87
|
"style-dictionary": "^5.1.1",
|
|
88
|
-
"stylelint": "^16.
|
|
88
|
+
"stylelint": "^16.26.0",
|
|
89
89
|
"stylelint-config-recommended": "^17.0.0",
|
|
90
90
|
"stylelint-config-standard": "^39.0.1",
|
|
91
91
|
"stylelint-order": "^7.0.0",
|