@uva-glass/component-library 2.6.3 → 2.7.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
._form-
|
|
1
|
+
._form-input__container_g2j8x_1{align-items:center;display:flex;flex-wrap:wrap}._form-input__container--label-left_g2j8x_7{align-items:flex-start;flex-direction:row;gap:1rem;line-height:2.5rem}._form-input__container--label-left_g2j8x_7>label:after{line-height:3.6}._form-input__container--label-top_g2j8x_18{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._form-input__input-feedback-container_g2j8x_25{display:flex;flex:1;flex-direction:column;gap:.5rem;line-height:1.5;position:relative;width:100%}._form-input__input-container_g2j8x_35{display:flex;flex:1}._form-input__input_g2j8x_25{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;min-height:2.5rem;padding:0 1rem;text-align:inherit}._form-input__input_g2j8x_25::-webkit-outer-spin-button,._form-input__input_g2j8x_25::-webkit-inner-spin-button{margin:0}
|
|
@@ -13,7 +13,7 @@ export interface FormInputProps {
|
|
|
13
13
|
/** error text to display if set */
|
|
14
14
|
notValidatedText?: string;
|
|
15
15
|
/** Returns array of selected values as number */
|
|
16
|
-
onChange
|
|
16
|
+
onChange?: (value: string) => void;
|
|
17
17
|
/** Determines if the container wrapper is rendered. */
|
|
18
18
|
noContainer?: boolean;
|
|
19
19
|
/** Optional custom input that will replace the default input */
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsx as t, jsxs as c, Fragment as b } from "react/jsx-runtime";
|
|
2
|
+
import { c as g } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "../Buttons/Button.js";
|
|
5
5
|
import "../Buttons/LinkButton.js";
|
|
6
6
|
import "@react-aria/button";
|
|
7
7
|
import "../Checkbox/Checkbox.js";
|
|
8
|
-
import { Label as
|
|
8
|
+
import { Label as x } from "../Label/Label.js";
|
|
9
9
|
import "@react-aria/dialog";
|
|
10
10
|
import "@react-aria/focus";
|
|
11
11
|
import "@react-aria/overlays";
|
|
12
12
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
13
|
-
import { FeedbackBox as
|
|
13
|
+
import { FeedbackBox as h } from "../FeedbackBox/FeedbackBox.js";
|
|
14
14
|
import "../GridRow/GridRow.js";
|
|
15
15
|
import "../IconButton/IconButton.js";
|
|
16
16
|
import "../Input/Input.js";
|
|
@@ -25,46 +25,43 @@ import "../SelectListbox/SelectListbox.js";
|
|
|
25
25
|
import "../SelectListbox/SelectProvider.js";
|
|
26
26
|
import "../Sortable/components/SortableItem.js";
|
|
27
27
|
import "../../SortableProvider-RaH_ZXB3.js";
|
|
28
|
-
import '../../assets/FormInput.css';const
|
|
29
|
-
"form-
|
|
30
|
-
"form-
|
|
31
|
-
"form-
|
|
32
|
-
"form-
|
|
33
|
-
"form-
|
|
34
|
-
"form-
|
|
35
|
-
"form-field__input--error": "_form-field__input--error_pfk4n_60"
|
|
28
|
+
import '../../assets/FormInput.css';const o = {
|
|
29
|
+
"form-input__container": "_form-input__container_g2j8x_1",
|
|
30
|
+
"form-input__container--label-left": "_form-input__container--label-left_g2j8x_7",
|
|
31
|
+
"form-input__container--label-top": "_form-input__container--label-top_g2j8x_18",
|
|
32
|
+
"form-input__input-feedback-container": "_form-input__input-feedback-container_g2j8x_25",
|
|
33
|
+
"form-input__input-container": "_form-input__input-container_g2j8x_35",
|
|
34
|
+
"form-input__input": "_form-input__input_g2j8x_25"
|
|
36
35
|
}, U = ({
|
|
37
|
-
id:
|
|
36
|
+
id: i,
|
|
38
37
|
label: n,
|
|
39
|
-
labelPosition:
|
|
40
|
-
type:
|
|
41
|
-
required:
|
|
42
|
-
notValidatedText:
|
|
43
|
-
onChange:
|
|
44
|
-
noContainer:
|
|
45
|
-
customInput:
|
|
38
|
+
labelPosition: f = "top",
|
|
39
|
+
type: e = "text",
|
|
40
|
+
required: l = !1,
|
|
41
|
+
notValidatedText: p = "",
|
|
42
|
+
onChange: m,
|
|
43
|
+
noContainer: u = !1,
|
|
44
|
+
customInput: _
|
|
46
45
|
}) => {
|
|
47
|
-
const
|
|
48
|
-
typeof
|
|
49
|
-
},
|
|
50
|
-
n && /* @__PURE__ */
|
|
51
|
-
/* @__PURE__ */
|
|
52
|
-
|
|
46
|
+
const s = (r) => ["e", "E", "+", "-"].includes(r.key) && r.preventDefault(), d = (r) => {
|
|
47
|
+
typeof m == "function" && m(r.target.value);
|
|
48
|
+
}, a = /* @__PURE__ */ c(b, { children: [
|
|
49
|
+
n && /* @__PURE__ */ t(x, { htmlFor: i, required: l, alignRight: !0, children: n }),
|
|
50
|
+
/* @__PURE__ */ c("div", { className: o["form-input__input-feedback-container"], children: [
|
|
51
|
+
_ || /* @__PURE__ */ t("div", { className: o["form-input__input-container"], children: /* @__PURE__ */ t(
|
|
53
52
|
"input",
|
|
54
53
|
{
|
|
55
|
-
id:
|
|
56
|
-
type:
|
|
57
|
-
...
|
|
58
|
-
onChange:
|
|
59
|
-
className:
|
|
60
|
-
e !== "" && r["form-field__input--error"]
|
|
61
|
-
])
|
|
54
|
+
id: i,
|
|
55
|
+
type: e,
|
|
56
|
+
...e === "number" && { onKeyDown: s },
|
|
57
|
+
onChange: d,
|
|
58
|
+
className: o["form-input__input"]
|
|
62
59
|
}
|
|
63
60
|
) }),
|
|
64
|
-
|
|
61
|
+
p !== "" && /* @__PURE__ */ t(h, { level: "error", feedback: p })
|
|
65
62
|
] })
|
|
66
63
|
] });
|
|
67
|
-
return
|
|
64
|
+
return u ? a : /* @__PURE__ */ t("div", { className: g(o["form-input__container"], o[`form-input__container--label-${f}`]), children: a });
|
|
68
65
|
};
|
|
69
66
|
export {
|
|
70
67
|
U as FormInput
|
|
@@ -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 /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange
|
|
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 /** 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 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={styles['form-input__input']}\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","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;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,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOJ,KAAa,cACbA,EAAAI,EAAM,OAAO,KAAK;AAAA,EAE/B,GAEME,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAb,uBACEc,GAAM,EAAA,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UACHH,EAAA,CAAA;AAAA,IAGD,gBAAAY,EAAA,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGE,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAkB,CAAA;AAAA,IAAA,EACrF,CAAA;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UACHU,GAAA;AAEJ;"}
|