@greghowe79/the-lib 0.7.3 → 0.7.5

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.
Files changed (7) hide show
  1. package/lib/components/input/input.qwik.cjs +49 -10
  2. package/lib/components/input/input.qwik.mjs +49 -10
  3. package/lib/components/input/styles.css.qwik.cjs +1 -1
  4. package/lib/components/input/styles.css.qwik.mjs +1 -1
  5. package/lib-types/components/input/input.d.ts +4 -2
  6. package/lib-types/stories/input.stories.d.ts +2 -0
  7. package/package.json +1 -1
package/lib/components/input/input.qwik.cjs CHANGED
@@ -26,7 +26,7 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
26
26
  if (selectedFile) selectedFile.value = file.name;
27
27
  }
28
28
  });
29
- const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile }) => {
29
+ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix }) => {
30
30
  qwik.useStylesScoped$(styles);
31
31
  const internalError = qwik.useSignal(null);
32
32
  const showError = error ?? internalError;
@@ -80,17 +80,56 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
80
80
  })
81
81
  ]
82
82
  })
83
+ }) : type === "tel" ? /* @__PURE__ */ jsxRuntime.jsx("label", {
84
+ class: `input-label ${bgLight ? "bg_light" : ""}`,
85
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
86
+ class: "input-wrapper",
87
+ children: [
88
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
89
+ class: "input-icon",
90
+ "aria-hidden": "true",
91
+ children: prefix
92
+ }),
93
+ /* @__PURE__ */ jsxRuntime.jsx("input", {
94
+ id,
95
+ type,
96
+ inputMode: "tel",
97
+ pattern: "[0-9]*",
98
+ class: `input ${showError.value ? "error" : ""}`,
99
+ placeholder,
100
+ "bind:value": value,
101
+ onInput$: inputHandler,
102
+ onBlur$: inputHandler,
103
+ onKeyDown$: (e) => {
104
+ const allowed = /[0-9]/;
105
+ if (!allowed.test(e.key) && e.key.length === 1) {
106
+ e.preventDefault();
107
+ }
108
+ }
109
+ })
110
+ ]
111
+ })
83
112
  }) : /* @__PURE__ */ jsxRuntime.jsx("label", {
84
113
  class: `input-label ${bgLight ? "bg_light" : ""}`,
85
- children: /* @__PURE__ */ jsxRuntime.jsx("input", {
86
- id,
87
- type,
88
- class: `input ${showError.value ? "error" : ""}`,
89
- placeholder,
90
- "bind:value": value,
91
- onInput$: inputHandler,
92
- onBlur$: inputHandler,
93
- required: true
114
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
115
+ class: icon ? "input-wrapper" : "no_icon",
116
+ children: [
117
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
118
+ class: "input-icon",
119
+ "aria-hidden": "true",
120
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
121
+ }),
122
+ /* @__PURE__ */ jsxRuntime.jsx("input", {
123
+ id,
124
+ type,
125
+ class: `input ${showError.value ? "error" : ""}`,
126
+ placeholder,
127
+ "bind:value": value,
128
+ onInput$: inputHandler,
129
+ onBlur$: inputHandler,
130
+ required: true
131
+ })
132
+ ]
94
133
  })
95
134
  }),
96
135
  showError.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
package/lib/components/input/input.qwik.mjs CHANGED
@@ -24,7 +24,7 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
24
24
  if (selectedFile) selectedFile.value = file.name;
25
25
  }
26
26
  });
27
- const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile }) => {
27
+ const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix }) => {
28
28
  useStylesScoped$(styles);
29
29
  const internalError = useSignal(null);
30
30
  const showError = error ?? internalError;
@@ -78,17 +78,56 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
78
78
  })
79
79
  ]
80
80
  })
81
+ }) : type === "tel" ? /* @__PURE__ */ jsx("label", {
82
+ class: `input-label ${bgLight ? "bg_light" : ""}`,
83
+ children: /* @__PURE__ */ jsxs("div", {
84
+ class: "input-wrapper",
85
+ children: [
86
+ /* @__PURE__ */ jsx("span", {
87
+ class: "input-icon",
88
+ "aria-hidden": "true",
89
+ children: prefix
90
+ }),
91
+ /* @__PURE__ */ jsx("input", {
92
+ id,
93
+ type,
94
+ inputMode: "tel",
95
+ pattern: "[0-9]*",
96
+ class: `input ${showError.value ? "error" : ""}`,
97
+ placeholder,
98
+ "bind:value": value,
99
+ onInput$: inputHandler,
100
+ onBlur$: inputHandler,
101
+ onKeyDown$: (e) => {
102
+ const allowed = /[0-9]/;
103
+ if (!allowed.test(e.key) && e.key.length === 1) {
104
+ e.preventDefault();
105
+ }
106
+ }
107
+ })
108
+ ]
109
+ })
81
110
  }) : /* @__PURE__ */ jsx("label", {
82
111
  class: `input-label ${bgLight ? "bg_light" : ""}`,
83
- children: /* @__PURE__ */ jsx("input", {
84
- id,
85
- type,
86
- class: `input ${showError.value ? "error" : ""}`,
87
- placeholder,
88
- "bind:value": value,
89
- onInput$: inputHandler,
90
- onBlur$: inputHandler,
91
- required: true
112
+ children: /* @__PURE__ */ jsxs("div", {
113
+ class: icon ? "input-wrapper" : "no_icon",
114
+ children: [
115
+ icon && /* @__PURE__ */ jsx("span", {
116
+ class: "input-icon",
117
+ "aria-hidden": "true",
118
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
119
+ }),
120
+ /* @__PURE__ */ jsx("input", {
121
+ id,
122
+ type,
123
+ class: `input ${showError.value ? "error" : ""}`,
124
+ placeholder,
125
+ "bind:value": value,
126
+ onInput$: inputHandler,
127
+ onBlur$: inputHandler,
128
+ required: true
129
+ })
130
+ ]
92
131
  })
93
132
  }),
94
133
  showError.value && /* @__PURE__ */ jsx("div", {
package/lib/components/input/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n border-radius: 0.5rem;\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.125rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.5rem 0 0 0.5rem;\r\n height: 3.4375rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.4375rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.5rem 0.5rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n";
2
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n border-radius: 0.5rem;\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.125rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n opacity: 0.4;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.5rem 0 0 0.5rem;\r\n height: 3.4375rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.4375rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.5rem 0.5rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/input/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n border-radius: 0.5rem;\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.125rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.5rem 0 0 0.5rem;\r\n height: 3.4375rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.4375rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.5rem 0.5rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n";
1
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n border-radius: 0.5rem;\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.125rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n opacity: 0.4;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.5rem 0 0 0.5rem;\r\n height: 3.4375rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.4375rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.5rem 0.5rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib-types/components/input/input.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { QRL, Signal } from '@builder.io/qwik';
1
+ import { Component, JSXOutput, QRL, Signal } from '@builder.io/qwik';
2
2
  import '@fontsource/roboto-condensed/500.css';
3
3
  export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'hidden' | 'checkbox' | 'radio' | 'file';
4
4
  export interface InputProps {
@@ -12,7 +12,9 @@ export interface InputProps {
12
12
  bgLight?: boolean;
13
13
  currentFile?: Signal<any>;
14
14
  selectedFile?: Signal<string>;
15
+ icon?: JSXOutput | Component<unknown>;
16
+ prefix?: Signal<string>;
15
17
  }
16
18
  export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
17
19
  export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;
18
- export declare const Input: import("@builder.io/qwik").Component<InputProps>;
20
+ export declare const Input: Component<InputProps>;
package/lib-types/stories/input.stories.d.ts CHANGED
@@ -5,4 +5,6 @@ export default meta;
5
5
  type Story = StoryObj<InputProps>;
6
6
  export declare const Email: Story;
7
7
  export declare const InputLightBackground: Story;
8
+ export declare const InputWithIcon: Story;
9
+ export declare const PhoneInput: Story;
8
10
  export declare const FileUpload: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "0.7.3",
3
+ "version": "0.7.5",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",