@ptlm-azulejo/field 1.0.0-alpha.10

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 (12) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +110 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +60 -0
  6. package/dist/index.umd.cjs +1 -0
  7. package/dist/src/index.stories.d.ts +14 -0
  8. package/dist/src/index.stories.d.ts.map +1 -0
  9. package/dist/src/index.vue.d.ts +113 -0
  10. package/dist/src/index.vue.d.ts.map +1 -0
  11. package/dist/style.css +1 -0
  12. package/package.json +44 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,4 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
package/README.md ADDED
@@ -0,0 +1,110 @@
1
+ # FormField
2
+
3
+ A form field wrapper that provides a label, optional help text, a slot for the form control, and a validation message area with visual states (valid, invalid, loading).
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @ptlm-azulejo/field @ptlm-azulejo/themes
9
+ # or
10
+ yarn add @ptlm-azulejo/field @ptlm-azulejo/themes
11
+ ```
12
+
13
+ ## Styles & theming
14
+
15
+ The component reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
16
+ brand preset (it bundles the base tokens) and the component styles, then set the
17
+ brand class on the root element:
18
+
19
+ ```js
20
+ import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
21
+ import '@ptlm-azulejo/field/style.css'
22
+ ```
23
+
24
+ ```html
25
+ <html class="preset-lm" data-theme="dark">
26
+ ```
27
+
28
+ > Without a preset **and** the `.preset-*` class, the component renders uncolored.
29
+ > See the [themes package](../themes/README.md) for brand switching, dark mode,
30
+ > and custom brands.
31
+
32
+ ## Props
33
+
34
+ | Name | Type | Default | Description |
35
+ | --- | --- | --- | --- |
36
+ | `id` | `string` | — | A unique identifier used to associate the label with the form element via the `for` attribute. **Required.** |
37
+ | `label` | `string` | — | The text displayed as the label for the form field. **Required.** |
38
+ | `requirementText` | `string` | — | Additional text displayed alongside the label, typically used to indicate if the field is required or optional (e.g. `"required"`, `"optional"`). |
39
+ | `helpText` | `string` | — | Text shown below the label to provide additional context or instructions for the user. |
40
+ | `helpId` | `string` | — | The `id` attribute set on the help text element. **Mandatory when using `helpText`** to guarantee accessibility (`aria-describedby`). |
41
+ | `isValid` | `boolean` | — | If `true`, applies a valid state (green icon + accent-colored message). |
42
+ | `isInvalid` | `boolean` | — | If `true`, applies an invalid state (red icon + error-colored message, `role="alert"`). |
43
+ | `isLoading` | `boolean` | — | If `true`, displays a loading spinner alongside the message. |
44
+ | `messageId` | `string` | — | The `id` attribute set on the validation message element. **Mandatory when using a `message`** to guarantee accessibility (`aria-describedby`). |
45
+ | `message` | `string` | — | Message displayed when the form field has a valid, invalid, or loading state, usually indicating validation or status. |
46
+
47
+ ## Slots
48
+
49
+ | Name | Description |
50
+ | --- | --- |
51
+ | `default` | Use this slot to insert the form element of your choice (e.g. `<input>`, `<select>`, or another component). |
52
+
53
+ ## Validation states
54
+
55
+ The validation message is rendered when at least one of `isValid`, `isInvalid`, or `isLoading` is `true` **and** `message` is provided.
56
+
57
+ | State | Icon | Color | Accessibility |
58
+ | --- | --- | --- | --- |
59
+ | `isValid` | Checkmark circle | Accent (green) | `role="status"` |
60
+ | `isInvalid` | Exclamation circle | Error (red) | `role="alert"` |
61
+ | `isLoading` | Loader spinner | Tertiary (neutral) | `role="status"` |
62
+
63
+ ## Accessibility
64
+
65
+ Bind `helpId` to the `aria-describedby` attribute of your form element and `messageId` to its `aria-describedby` as well so assistive technologies announce the help text and validation message:
66
+
67
+ ```vue
68
+ <AzField id="email" label="Email" helpText="Enter your work email" helpId="email-help"
69
+ :isInvalid="!!error" messageId="email-msg" :message="error">
70
+ <input id="email" aria-describedby="email-help email-msg" v-model="value" />
71
+ </AzField>
72
+ ```
73
+
74
+ ## Basic Usage
75
+
76
+ ```vue
77
+ <script setup>
78
+ import { AzField } from '@ptlm-azulejo/field'
79
+ </script>
80
+
81
+ <template>
82
+ <AzField id="name" label="Full name" requirementText="required"
83
+ helpText="As it appears on your ID" helpId="name-help">
84
+ <input id="name" aria-describedby="name-help" />
85
+ </AzField>
86
+ </template>
87
+ ```
88
+
89
+ ### With validation
90
+
91
+ ```vue
92
+ <script setup>
93
+ import { ref } from 'vue'
94
+ import { AzField } from '@ptlm-azulejo/field'
95
+
96
+ const value = ref('')
97
+ const error = ref('')
98
+
99
+ function validate() {
100
+ error.value = value.value.length < 3 ? 'Must be at least 3 characters' : ''
101
+ }
102
+ </script>
103
+
104
+ <template>
105
+ <AzField id="name" label="Full name"
106
+ :isInvalid="!!error" messageId="name-msg" :message="error">
107
+ <input id="name" aria-describedby="name-msg" v-model="value" @input="validate" />
108
+ </AzField>
109
+ </template>
110
+ ```
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as AzField } from './src/index.vue';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA"}
package/dist/index.js ADDED
@@ -0,0 +1,60 @@
1
+ import { defineComponent as c, computed as u, openBlock as a, createElementBlock as i, createElementVNode as r, createTextVNode as m, toDisplayString as l, createCommentVNode as s, renderSlot as f, normalizeClass as g, createBlock as x, unref as v } from "vue";
2
+ import { AzLoader as h } from "@ptlm-azulejo/loader";
3
+ const I = ["for"], k = {
4
+ key: 0,
5
+ class: "text-xs leading-normal font-normal align-top field-requirement"
6
+ }, y = ["id"], T = { class: "mt-2" }, B = ["id", "role"], V = /* @__PURE__ */ c({
7
+ __name: "index",
8
+ props: {
9
+ id: {},
10
+ label: {},
11
+ requirementText: {},
12
+ helpText: {},
13
+ helpId: {},
14
+ isValid: { type: Boolean },
15
+ isInvalid: { type: Boolean },
16
+ isLoading: { type: Boolean },
17
+ messageId: {},
18
+ message: {}
19
+ },
20
+ setup(e) {
21
+ const t = e, n = u(() => t.isValid ? "state-valid" : t.isInvalid ? "state-invalid" : t.isLoading ? "state-loading" : "");
22
+ return (o, d) => (a(), i("div", null, [
23
+ r("label", {
24
+ class: "text-sm leading-[1.3] font-normal field-label",
25
+ for: e.id
26
+ }, [
27
+ m(l(e.label) + " ", 1),
28
+ e.requirementText ? (a(), i("span", k, "(" + l(e.requirementText) + ")", 1)) : s("", !0)
29
+ ], 8, I),
30
+ e.helpId && e.helpText ? (a(), i("span", {
31
+ key: 0,
32
+ id: e.helpId,
33
+ class: "text-xs leading-normal font-normal align-top field-help block mt-0.5"
34
+ }, l(e.helpText), 9, y)) : s("", !0),
35
+ r("div", T, [
36
+ f(o.$slots, "default", {}, void 0, !0)
37
+ ]),
38
+ (e.isValid || e.isInvalid || e.isLoading) && e.message ? (a(), i("span", {
39
+ key: 1,
40
+ class: g(["validation-message text-sm leading-normal inline-flex gap-1 mt-1", [n.value]]),
41
+ id: e.messageId,
42
+ role: e.isInvalid ? "alert" : "status"
43
+ }, [
44
+ e.isLoading ? (a(), x(v(h), {
45
+ key: 0,
46
+ size: "xs"
47
+ })) : s("", !0),
48
+ m(" " + l(e.message), 1)
49
+ ], 10, B)) : s("", !0)
50
+ ]));
51
+ }
52
+ }), b = (e, t) => {
53
+ const n = e.__vccOpts || e;
54
+ for (const [o, d] of t)
55
+ n[o] = d;
56
+ return n;
57
+ }, z = /* @__PURE__ */ b(V, [["__scopeId", "data-v-37620eea"]]);
58
+ export {
59
+ z as AzField
60
+ };
package/dist/index.umd.cjs ADDED
@@ -0,0 +1 @@
1
+ (function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@ptlm-azulejo/loader")):typeof define=="function"&&define.amd?define(["exports","vue","@ptlm-azulejo/loader"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.field={},n.Vue,n.loader))})(this,function(n,e,d){"use strict";const s=["for"],r={key:0,class:"text-xs leading-normal font-normal align-top field-requirement"},c=["id"],m={class:"mt-2"},f=["id","role"],g=((t,l)=>{const i=t.__vccOpts||t;for(const[a,o]of l)i[a]=o;return i})(e.defineComponent({__name:"index",props:{id:{},label:{},requirementText:{},helpText:{},helpId:{},isValid:{type:Boolean},isInvalid:{type:Boolean},isLoading:{type:Boolean},messageId:{},message:{}},setup(t){const l=t,i=e.computed(()=>l.isValid?"state-valid":l.isInvalid?"state-invalid":l.isLoading?"state-loading":"");return(a,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("label",{class:"text-sm leading-[1.3] font-normal field-label",for:t.id},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.requirementText?(e.openBlock(),e.createElementBlock("span",r,"("+e.toDisplayString(t.requirementText)+")",1)):e.createCommentVNode("",!0)],8,s),t.helpId&&t.helpText?(e.openBlock(),e.createElementBlock("span",{key:0,id:t.helpId,class:"text-xs leading-normal font-normal align-top field-help block mt-0.5"},e.toDisplayString(t.helpText),9,c)):e.createCommentVNode("",!0),e.createElementVNode("div",m,[e.renderSlot(a.$slots,"default",{},void 0,!0)]),(t.isValid||t.isInvalid||t.isLoading)&&t.message?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["validation-message text-sm leading-normal inline-flex gap-1 mt-1",[i.value]]),id:t.messageId,role:t.isInvalid?"alert":"status"},[t.isLoading?(e.openBlock(),e.createBlock(e.unref(d.AzLoader),{key:0,size:"xs"})):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.message),1)],10,f)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-37620eea"]]);n.AzField=g,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
package/dist/src/index.stories.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { Meta, StoryObj } from '@storybook/vue3';
2
+ import { default as AzField } from './index.vue';
3
+
4
+ declare const meta: Meta<typeof AzField>;
5
+ export default meta;
6
+ type Story = StoryObj<typeof meta>;
7
+ export declare const Default: Story;
8
+ export declare const WithHelpText: Story;
9
+ export declare const WithRequirement: Story;
10
+ export declare const Valid: Story;
11
+ export declare const Invalid: Story;
12
+ export declare const Loading: Story;
13
+ export declare const FullExample: Story;
14
+ //# sourceMappingURL=index.stories.d.ts.map
package/dist/src/index.stories.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,OAAO,MAAM,aAAa,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAyF9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA6BnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmCzB,CAAC"}
package/dist/src/index.vue.d.ts ADDED
@@ -0,0 +1,113 @@
1
+ import { VNode } from 'vue';
2
+
3
+ declare function __VLS_template(): Readonly<{
4
+ /**
5
+ * Use this slot to insert the form element of your choice
6
+ */
7
+ default: VNode;
8
+ }> & {
9
+ /**
10
+ * Use this slot to insert the form element of your choice
11
+ */
12
+ default: VNode;
13
+ };
14
+ declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
15
+ /**
16
+ * A unique identifier for the form field, used to associate the label with the form element.
17
+ */
18
+ id: string;
19
+ /**
20
+ * The text displayed as the label for the form field.
21
+ */
22
+ label: string;
23
+ /**
24
+ * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
25
+ */
26
+ requirementText?: string;
27
+ /**
28
+ * Text shown below the form field to provide additional context or instructions for the user.
29
+ */
30
+ helpText?: string;
31
+ /**
32
+ * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
33
+ */
34
+ helpId?: string;
35
+ /**
36
+ * If `true`, applies a valid state to the form field.
37
+ */
38
+ isValid?: boolean;
39
+ /**
40
+ * If `true`, applies an invalid state to the form field.
41
+ */
42
+ isInvalid?: boolean;
43
+ /**
44
+ * If `true`, applies a loading state to the form field.
45
+ */
46
+ isLoading?: boolean;
47
+ /**
48
+ * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
49
+ */
50
+ messageId?: string;
51
+ /**
52
+ * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
53
+ */
54
+ message?: string;
55
+ }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
56
+ /**
57
+ * A unique identifier for the form field, used to associate the label with the form element.
58
+ */
59
+ id: string;
60
+ /**
61
+ * The text displayed as the label for the form field.
62
+ */
63
+ label: string;
64
+ /**
65
+ * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
66
+ */
67
+ requirementText?: string;
68
+ /**
69
+ * Text shown below the form field to provide additional context or instructions for the user.
70
+ */
71
+ helpText?: string;
72
+ /**
73
+ * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
74
+ */
75
+ helpId?: string;
76
+ /**
77
+ * If `true`, applies a valid state to the form field.
78
+ */
79
+ isValid?: boolean;
80
+ /**
81
+ * If `true`, applies an invalid state to the form field.
82
+ */
83
+ isInvalid?: boolean;
84
+ /**
85
+ * If `true`, applies a loading state to the form field.
86
+ */
87
+ isLoading?: boolean;
88
+ /**
89
+ * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
90
+ */
91
+ messageId?: string;
92
+ /**
93
+ * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
94
+ */
95
+ message?: string;
96
+ }>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
97
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
98
+ export default _default;
99
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
100
+ type __VLS_TypePropsToRuntimeProps<T> = {
101
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
102
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
103
+ } : {
104
+ type: import('vue').PropType<T[K]>;
105
+ required: true;
106
+ };
107
+ };
108
+ type __VLS_WithTemplateSlots<T, S> = T & {
109
+ new (): {
110
+ $slots: S;
111
+ };
112
+ };
113
+ //# sourceMappingURL=index.vue.d.ts.map
package/dist/src/index.vue.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,KAAK,CAAC;AAmE3C,iBAAS,cAAc;IAhBrB;;OAEG;aACM,KAAK;;IAHd;;OAEG;aACM,KAAK;EAyKf;AAmDD,QAAA,MAAM,eAAe;IAMnB;;OAEG;QACC,MAAM;IACV;;OAEG;WACI,MAAM;IACb;;OAEG;sBACe,MAAM;IACxB;;OAEG;eACQ,MAAM;IACjB;;OAEG;aACM,MAAM;IACf;;OAEG;cACO,OAAO;IACjB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,MAAM;IAClB;;OAEG;cACO,MAAM;;IAvChB;;OAEG;QACC,MAAM;IACV;;OAEG;WACI,MAAM;IACb;;OAEG;sBACe,MAAM;IACxB;;OAEG;eACQ,MAAM;IACjB;;OAEG;aACM,MAAM;IACf;;OAEG;cACO,OAAO;IACjB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,MAAM;IAClB;;OAEG;cACO,MAAM;kGAEhB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */.field-label[data-v-37620eea]{color:var(--field-color-label,var(--color-text-primary))}.field-requirement[data-v-37620eea]{color:var(--field-color-requirement,var(--color-text-tertiary))}.field-help[data-v-37620eea]{color:var(--field-color-help,var(--color-text-tertiary))}.validation-message.state-valid[data-v-37620eea]{color:var(--field-color-validation-valid,var(--color-text-accent))}.validation-message.state-invalid[data-v-37620eea]{color:var(--field-color-validation-invalid,var(--color-status-text-error))}.validation-message.state-loading[data-v-37620eea]{color:var(--field-color-validation-loading,var(--color-text-tertiary))}.validation-message[data-v-37620eea]:before{content:"";width:1.25rem;height:1.25rem}.validation-message.state-valid[data-v-37620eea]:before{background-color:var(--field-color-validation-valid,var(--color-text-accent));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") 50%/contain no-repeat}.validation-message.state-invalid[data-v-37620eea]:before{background-color:var(--field-color-validation-invalid,var(--color-status-text-error));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") 50%/contain no-repeat}
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "@ptlm-azulejo/field",
3
+ "version": "1.0.0-alpha.10",
4
+ "type": "module",
5
+ "main": "./dist/index.umd.cjs",
6
+ "module": "./dist/index.js",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.js",
12
+ "require": "./dist/index.umd.cjs"
13
+ },
14
+ "./style.css": "./dist/style.css"
15
+ },
16
+ "scripts": {
17
+ "build": "vite build",
18
+ "test": "vitest --run --passWithNoTests",
19
+ "storybook": "storybook dev -p 6006",
20
+ "build-storybook": "storybook build"
21
+ },
22
+ "publishConfig": {
23
+ "access": "public",
24
+ "registry": "https://registry.npmjs.org"
25
+ },
26
+ "files": [
27
+ "dist/*"
28
+ ],
29
+ "devDependencies": {
30
+ "@ptlm-azulejo/themes": "*",
31
+ "@storybook/addon-essentials": "^7.0.0",
32
+ "@storybook/addon-interactions": "^7.0.0",
33
+ "@storybook/vue3": "^7.0.0",
34
+ "@storybook/vue3-vite": "^7.0.0",
35
+ "@tailwindcss/vite": "^4.0.0",
36
+ "storybook": "^7.0.0",
37
+ "tailwindcss": "^4.0.0",
38
+ "vue": "^3.3.4"
39
+ },
40
+ "peerDependencies": {
41
+ "@ptlm-azulejo/loader": "^1.0.0-alpha.5",
42
+ "vue": ">=3.0.0"
43
+ }
44
+ }