@greghowe79/the-lib 2.0.4 → 2.0.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/text_area/styles.css.qwik.cjs +1 -1
  2. package/lib/components/text_area/styles.css.qwik.mjs +1 -1
  3. package/lib/components/text_area/text_area.qwik.cjs +10 -1
  4. package/lib/components/text_area/text_area.qwik.mjs +10 -1
  5. package/lib-types/components/text_area/text_area.d.ts +1 -0
  6. package/lib-types/stories/text-area.stories.d.ts +1 -0
  7. package/package.json +1 -1
package/lib/components/text_area/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = ".text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n";
2
+ const styles = ".text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #888;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/text_area/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = ".text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n";
1
+ const styles = ".text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #888;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib/components/text_area/text_area.qwik.cjs CHANGED
@@ -4,8 +4,9 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
4
4
  const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/500.css");
7
- const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight, maxLength }) => {
7
+ const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
8
8
  qwik.useStylesScoped$(styles);
9
+ const currentLength = content?.value?.length ?? 0;
9
10
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
10
11
  class: "text-area-container",
11
12
  children: [
@@ -25,6 +26,14 @@ const TextArea = qwik.component$(({ id, title, content, required = false, placeh
25
26
  class: `text-area ${bgLight ? "bg_light" : ""}`,
26
27
  maxLength,
27
28
  children: content.value
29
+ }),
30
+ showCounter && maxLength && /* @__PURE__ */ jsxRuntime.jsxs("div", {
31
+ class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
32
+ children: [
33
+ currentLength,
34
+ "/",
35
+ maxLength
36
+ ]
28
37
  })
29
38
  ]
30
39
  });
package/lib/components/text_area/text_area.qwik.mjs CHANGED
@@ -2,8 +2,9 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
2
2
  import { component$, useStylesScoped$ } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import "@fontsource/roboto-condensed/500.css";
5
- const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight, maxLength }) => {
5
+ const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
6
6
  useStylesScoped$(styles);
7
+ const currentLength = content?.value?.length ?? 0;
7
8
  return /* @__PURE__ */ jsxs("div", {
8
9
  class: "text-area-container",
9
10
  children: [
@@ -23,6 +24,14 @@ const TextArea = component$(({ id, title, content, required = false, placeholder
23
24
  class: `text-area ${bgLight ? "bg_light" : ""}`,
24
25
  maxLength,
25
26
  children: content.value
27
+ }),
28
+ showCounter && maxLength && /* @__PURE__ */ jsxs("div", {
29
+ class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
30
+ children: [
31
+ currentLength,
32
+ "/",
33
+ maxLength
34
+ ]
26
35
  })
27
36
  ]
28
37
  });
package/lib-types/components/text_area/text_area.d.ts CHANGED
@@ -8,5 +8,6 @@ export interface TextAreaProps {
8
8
  placeholder?: string;
9
9
  bgLight?: boolean;
10
10
  maxLength?: number;
11
+ showCounter?: boolean;
11
12
  }
12
13
  export declare const TextArea: import("@builder.io/qwik").Component<TextAreaProps>;
package/lib-types/stories/text-area.stories.d.ts CHANGED
@@ -4,3 +4,4 @@ declare const meta: Meta<TextAreaProps>;
4
4
  export default meta;
5
5
  type Story = StoryObj<TextAreaProps>;
6
6
  export declare const TextAreaWithHideLabel: Story;
7
+ export declare const TextAreaWithCounter: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",