@ptlm-azulejo/datepicker 0.0.2-alpha.14

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 +134 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +97 -0
  6. package/dist/index.umd.cjs +1 -0
  7. package/dist/src/index.stories.d.ts +18 -0
  8. package/dist/src/index.stories.d.ts.map +1 -0
  9. package/dist/src/index.vue.d.ts +144 -0
  10. package/dist/src/index.vue.d.ts.map +1 -0
  11. package/dist/style.css +1 -0
  12. package/package.json +46 -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,134 @@
1
+ # Datepicker
2
+
3
+ A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
4
+
5
+ To put a label, requirement text, help text or to apply a valid or invalid message, pair this component with the [Field component](../field/README.md).
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @ptlm-azulejo/datepicker @ptlm-azulejo/themes
11
+ # or
12
+ yarn add @ptlm-azulejo/datepicker @ptlm-azulejo/themes
13
+ ```
14
+
15
+ ## Styles & theming
16
+
17
+ The component reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
18
+ brand preset (it bundles the base tokens) and the component styles, then set the
19
+ brand class on the root element:
20
+
21
+ ```js
22
+ import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
23
+ import '@ptlm-azulejo/datepicker/style.css'
24
+ ```
25
+
26
+ ```html
27
+ <html class="preset-lm" data-theme="dark">
28
+ ```
29
+
30
+ > Without a preset **and** the `.preset-*` class, the component renders uncolored.
31
+ > See the [themes package](../themes/README.md) for brand switching, dark mode,
32
+ > and custom brands.
33
+
34
+ ## Props
35
+
36
+ | Name | Type | Default | Description |
37
+ | --- | --- | --- | --- |
38
+ | `id` | `string` | — | **Required.** A unique identifier for the datepicker element, used to associate the label with the form element. |
39
+ | `name` | `string` | — | The name attribute for the datepicker element, typically used for form submission. |
40
+ | `modelValue` | `string` \| `number` | — | The current value of the datepicker field. |
41
+ | `isInvalid` | `boolean` | — | If `true`, applies an invalid state to the datepicker. |
42
+ | `disabled` | `boolean` | — | If `true`, disables the datepicker, making it non-interactive. |
43
+ | `size` | `"s"` \| `"m"` | `"m"` | Determines the size of the datepicker. |
44
+ | `readonly` | `boolean` | — | If `true`, the datepicker is read-only (cannot be edited). |
45
+ | `isClearable` | `boolean` | — | If `true`, a clear button will appear when the datepicker has a value. |
46
+ | `clearLabel` | `string` | `"clear content"` | The label text for the clear button. |
47
+ | `minDate` | `string` | — | The minimum selectable date (format: YYYY-MM-DD). |
48
+ | `maxDate` | `string` | — | The maximum selectable date (format: YYYY-MM-DD). |
49
+ | `enabledDates` | `string[]` | — | Array of specific dates that should be enabled; all others disabled. Takes priority over `disabledDates`. |
50
+ | `disabledDates` | `string[]` | — | Array of specific dates that should be disabled; all others in range remain enabled. |
51
+
52
+ ## Events
53
+
54
+ | Name | Payload | Description |
55
+ | --- | --- | --- |
56
+ | `update:modelValue` | `string` \| `number` | Emitted when the datepicker value changes. |
57
+
58
+ ## Basic Usage
59
+
60
+ ```vue
61
+ <script setup>
62
+ import { AzDatepicker } from '@ptlm-azulejo/datepicker'
63
+ </script>
64
+
65
+ <template>
66
+ <AzDatepicker id="birthdate" name="birthdate" />
67
+ </template>
68
+ ```
69
+
70
+ ### With clear button
71
+
72
+ ```vue
73
+ <template>
74
+ <AzDatepicker
75
+ id="appointment"
76
+ v-model="appointment"
77
+ is-clearable
78
+ clear-label="Effacer la date"
79
+ />
80
+ </template>
81
+ ```
82
+
83
+ ### Invalid state
84
+
85
+ ```vue
86
+ <template>
87
+ <AzDatepicker id="deadline" :is-invalid="true" />
88
+ </template>
89
+ ```
90
+
91
+ ### Small size
92
+
93
+ ```vue
94
+ <template>
95
+ <AzDatepicker id="date-s" size="s" />
96
+ </template>
97
+ ```
98
+
99
+ ### Date range
100
+
101
+ ```vue
102
+ <template>
103
+ <AzDatepicker
104
+ id="range"
105
+ v-model="range"
106
+ min-date="2026-06-01"
107
+ max-date="2026-06-30"
108
+ />
109
+ </template>
110
+ ```
111
+
112
+ ### Disabled dates
113
+
114
+ ```vue
115
+ <template>
116
+ <AzDatepicker
117
+ id="disabled"
118
+ v-model="date"
119
+ :disabled-dates="['2026-06-10', '2026-06-20']"
120
+ />
121
+ </template>
122
+ ```
123
+
124
+ ### Enabled dates
125
+
126
+ ```vue
127
+ <template>
128
+ <AzDatepicker
129
+ id="enabled"
130
+ v-model="date"
131
+ :enabled-dates="['2026-06-15', '2026-06-20', '2026-06-25']"
132
+ />
133
+ </template>
134
+ ```
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as AzDatepicker } 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,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,97 @@
1
+ import { defineComponent as x, computed as u, openBlock as m, createElementBlock as p, normalizeClass as g, createElementVNode as o, mergeProps as z, toDisplayString as y, createCommentVNode as k } from "vue";
2
+ import "@ptlm-azulejo/icons/style.css";
3
+ const h = ["id", "value", "name", "disabled", "aria-invalid", "readonly", "min", "max"], V = {
4
+ key: 0,
5
+ class: "absolute right-11 top-3 az-datepicker__controls-options"
6
+ }, _ = { class: "sr-only" }, B = /* @__PURE__ */ x({
7
+ inheritAttrs: !1,
8
+ __name: "index",
9
+ props: {
10
+ id: {},
11
+ name: {},
12
+ modelValue: {},
13
+ isInvalid: { type: Boolean },
14
+ disabled: { type: Boolean },
15
+ size: { default: "m" },
16
+ readonly: { type: Boolean },
17
+ isClearable: { type: Boolean },
18
+ clearLabel: { default: "clear content" },
19
+ minDate: {},
20
+ maxDate: {},
21
+ enabledDates: {},
22
+ disabledDates: {}
23
+ },
24
+ emits: ["update:modelValue"],
25
+ setup(n, { emit: i }) {
26
+ const e = n, r = u(() => ({
27
+ [`az-text-input--${e.size} az-datepicker--${e.size}`]: e.size && e.size != "m",
28
+ "is-invalid": e.isInvalid
29
+ })), s = u(() => {
30
+ var a;
31
+ const t = (a = e.enabledDates) != null && a.length ? [...e.enabledDates].sort()[0] : void 0;
32
+ return e.minDate && t ? e.minDate > t ? e.minDate : t : t != null ? t : e.minDate;
33
+ }), b = u(() => {
34
+ var a;
35
+ const t = (a = e.enabledDates) != null && a.length ? [...e.enabledDates].sort().pop() : void 0;
36
+ return e.maxDate && t ? e.maxDate < t ? e.maxDate : t : t != null ? t : e.maxDate;
37
+ }), f = (t) => {
38
+ var a, l;
39
+ return t ? (a = e.enabledDates) != null && a.length ? !e.enabledDates.includes(t) : (l = e.disabledDates) != null && l.length ? e.disabledDates.includes(t) : !1 : !1;
40
+ }, v = () => {
41
+ d("update:modelValue", "");
42
+ }, D = (t) => {
43
+ var c;
44
+ const a = t.target, l = a.value;
45
+ if (!l) {
46
+ d("update:modelValue", "");
47
+ return;
48
+ }
49
+ if (f(l)) {
50
+ a.value = String((c = e.modelValue) != null ? c : "");
51
+ return;
52
+ }
53
+ d("update:modelValue", l);
54
+ }, d = i;
55
+ return (t, a) => (m(), p("div", {
56
+ class: g(["relative flex items-center gap-2 w-full h-12 bg-surface text-fg rounded border border-[var(--forms-color-border-default)] transition-all duration-200 az-text-input az-datepicker", r.value])
57
+ }, [
58
+ o("input", z({
59
+ id: n.id,
60
+ class: "bg-transparent border-0 outline-none grow text-base font-normal text-fg az-text-input__control az-datepicker__control",
61
+ value: e.modelValue,
62
+ type: "date",
63
+ name: n.name,
64
+ disabled: n.disabled,
65
+ "aria-invalid": n.isInvalid,
66
+ readonly: n.readonly,
67
+ min: s.value,
68
+ max: b.value
69
+ }, t.$attrs, { onInput: D }), null, 16, h),
70
+ a[1] || (a[1] = o("span", {
71
+ class: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 block w-4 h-4 az-datepicker__icon",
72
+ "aria-hidden": "true"
73
+ }, null, -1)),
74
+ n.isClearable && e.modelValue ? (m(), p("div", V, [
75
+ o("button", {
76
+ type: "button",
77
+ class: "flex items-center justify-center bg-transparent border-0 p-0 cursor-pointer",
78
+ onClick: v
79
+ }, [
80
+ a[0] || (a[0] = o("i", {
81
+ class: "az az-ui-cross-circle-filled az-controls-options__icon",
82
+ "aria-hidden": "true"
83
+ }, null, -1)),
84
+ o("span", _, y(n.clearLabel), 1)
85
+ ])
86
+ ])) : k("", !0)
87
+ ], 2));
88
+ }
89
+ }), C = (n, i) => {
90
+ const e = n.__vccOpts || n;
91
+ for (const [r, s] of i)
92
+ e[r] = s;
93
+ return e;
94
+ }, $ = /* @__PURE__ */ C(B, [["__scopeId", "data-v-3708ac20"]]);
95
+ export {
96
+ $ as AzDatepicker
97
+ };
package/dist/index.umd.cjs ADDED
@@ -0,0 +1 @@
1
+ (function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@ptlm-azulejo/icons/style.css")):typeof define=="function"&&define.amd?define(["exports","vue","@ptlm-azulejo/icons/style.css"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.datepicker={},o.Vue))})(this,function(o,t){"use strict";const m=["id","value","name","disabled","aria-invalid","readonly","min","max"],p={key:0,class:"absolute right-11 top-3 az-datepicker__controls-options"},f={class:"sr-only"},b=((l,s)=>{const e=l.__vccOpts||l;for(const[r,d]of s)e[r]=d;return e})(t.defineComponent({inheritAttrs:!1,__name:"index",props:{id:{},name:{},modelValue:{},isInvalid:{type:Boolean},disabled:{type:Boolean},size:{default:"m"},readonly:{type:Boolean},isClearable:{type:Boolean},clearLabel:{default:"clear content"},minDate:{},maxDate:{},enabledDates:{},disabledDates:{}},emits:["update:modelValue"],setup(l,{emit:s}){const e=l,r=t.computed(()=>({[`az-text-input--${e.size} az-datepicker--${e.size}`]:e.size&&e.size!="m","is-invalid":e.isInvalid})),d=t.computed(()=>{var n;const a=(n=e.enabledDates)!=null&&n.length?[...e.enabledDates].sort()[0]:void 0;return e.minDate&&a?e.minDate>a?e.minDate:a:a!=null?a:e.minDate}),D=t.computed(()=>{var n;const a=(n=e.enabledDates)!=null&&n.length?[...e.enabledDates].sort().pop():void 0;return e.maxDate&&a?e.maxDate<a?e.maxDate:a:a!=null?a:e.maxDate}),x=a=>{var n,i;return a?(n=e.enabledDates)!=null&&n.length?!e.enabledDates.includes(a):(i=e.disabledDates)!=null&&i.length?e.disabledDates.includes(a):!1:!1},y=()=>{c("update:modelValue","")},g=a=>{var u;const n=a.target,i=n.value;if(!i){c("update:modelValue","");return}if(x(i)){n.value=String((u=e.modelValue)!=null?u:"");return}c("update:modelValue",i)},c=s;return(a,n)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["relative flex items-center gap-2 w-full h-12 bg-surface text-fg rounded border border-[var(--forms-color-border-default)] transition-all duration-200 az-text-input az-datepicker",r.value])},[t.createElementVNode("input",t.mergeProps({id:l.id,class:"bg-transparent border-0 outline-none grow text-base font-normal text-fg az-text-input__control az-datepicker__control",value:e.modelValue,type:"date",name:l.name,disabled:l.disabled,"aria-invalid":l.isInvalid,readonly:l.readonly,min:d.value,max:D.value},a.$attrs,{onInput:g}),null,16,m),n[1]||(n[1]=t.createElementVNode("span",{class:"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 block w-4 h-4 az-datepicker__icon","aria-hidden":"true"},null,-1)),l.isClearable&&e.modelValue?(t.openBlock(),t.createElementBlock("div",p,[t.createElementVNode("button",{type:"button",class:"flex items-center justify-center bg-transparent border-0 p-0 cursor-pointer",onClick:y},[n[0]||(n[0]=t.createElementVNode("i",{class:"az az-ui-cross-circle-filled az-controls-options__icon","aria-hidden":"true"},null,-1)),t.createElementVNode("span",f,t.toDisplayString(l.clearLabel),1)])])):t.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-3708ac20"]]);o.AzDatepicker=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
package/dist/src/index.stories.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { Meta, StoryObj } from '@storybook/vue3';
2
+ import { default as Datepicker } from './index.vue';
3
+
4
+ declare const meta: Meta<typeof Datepicker>;
5
+ export default meta;
6
+ type Story = StoryObj<typeof meta>;
7
+ export declare const Default: Story;
8
+ export declare const WithValue: Story;
9
+ export declare const Invalid: Story;
10
+ export declare const Disabled: Story;
11
+ export declare const Readonly: Story;
12
+ export declare const Clearable: Story;
13
+ export declare const Small: Story;
14
+ export declare const SmallClearable: Story;
15
+ export declare const WithMinMax: Story;
16
+ export declare const WithDisabledDates: Story;
17
+ export declare const WithEnabledDates: Story;
18
+ //# 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,CAAA;AACrD,OAAO,UAAU,MAAM,aAAa,CAAA;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA8HjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAA"}
package/dist/src/index.vue.d.ts ADDED
@@ -0,0 +1,144 @@
1
+
2
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
3
+ /**
4
+ * A unique identifier for the datepicker element, used to associate the label with the form element.
5
+ */
6
+ id: string;
7
+ /**
8
+ * The name attribute for the datepicker element, typically used for form submission.
9
+ */
10
+ name?: string;
11
+ /**
12
+ * The current value of the datepicker field.
13
+ */
14
+ modelValue?: string | number;
15
+ /**
16
+ * If `true`, applies an invalid state to the datepicker.
17
+ */
18
+ isInvalid?: boolean;
19
+ /**
20
+ * If `true`, disables the datepicker, making it non-interactive.
21
+ */
22
+ disabled?: boolean;
23
+ /**
24
+ * Determines the size of the datepicker.
25
+ */
26
+ size?: "s" | "m";
27
+ /**
28
+ * If `true`, the datepicker is read-only (cannot be edited).
29
+ */
30
+ readonly?: boolean;
31
+ /**
32
+ * If `true`, a clear button will appear when the datepicker has a value.
33
+ */
34
+ isClearable?: boolean;
35
+ /**
36
+ * The label text for the clear button.
37
+ */
38
+ clearLabel?: string;
39
+ /**
40
+ * The minimum selectable date (format: YYYY-MM-DD).
41
+ */
42
+ minDate?: string;
43
+ /**
44
+ * The maximum selectable date (format: YYYY-MM-DD).
45
+ */
46
+ maxDate?: string;
47
+ /**
48
+ * Array of specific dates that should be enabled. All other dates will be disabled.
49
+ * Takes priority over disabled-dates. Format: ["YYYY-MM-DD", ...]
50
+ */
51
+ enabledDates?: string[];
52
+ /**
53
+ * Array of specific dates that should be disabled. All other dates within
54
+ * the min/max range remain enabled. Format: ["YYYY-MM-DD", ...]
55
+ */
56
+ disabledDates?: string[];
57
+ }>, {
58
+ size: string;
59
+ clearLabel: string;
60
+ }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
61
+ "update:modelValue": (value: string | number) => void;
62
+ }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
63
+ /**
64
+ * A unique identifier for the datepicker element, used to associate the label with the form element.
65
+ */
66
+ id: string;
67
+ /**
68
+ * The name attribute for the datepicker element, typically used for form submission.
69
+ */
70
+ name?: string;
71
+ /**
72
+ * The current value of the datepicker field.
73
+ */
74
+ modelValue?: string | number;
75
+ /**
76
+ * If `true`, applies an invalid state to the datepicker.
77
+ */
78
+ isInvalid?: boolean;
79
+ /**
80
+ * If `true`, disables the datepicker, making it non-interactive.
81
+ */
82
+ disabled?: boolean;
83
+ /**
84
+ * Determines the size of the datepicker.
85
+ */
86
+ size?: "s" | "m";
87
+ /**
88
+ * If `true`, the datepicker is read-only (cannot be edited).
89
+ */
90
+ readonly?: boolean;
91
+ /**
92
+ * If `true`, a clear button will appear when the datepicker has a value.
93
+ */
94
+ isClearable?: boolean;
95
+ /**
96
+ * The label text for the clear button.
97
+ */
98
+ clearLabel?: string;
99
+ /**
100
+ * The minimum selectable date (format: YYYY-MM-DD).
101
+ */
102
+ minDate?: string;
103
+ /**
104
+ * The maximum selectable date (format: YYYY-MM-DD).
105
+ */
106
+ maxDate?: string;
107
+ /**
108
+ * Array of specific dates that should be enabled. All other dates will be disabled.
109
+ * Takes priority over disabled-dates. Format: ["YYYY-MM-DD", ...]
110
+ */
111
+ enabledDates?: string[];
112
+ /**
113
+ * Array of specific dates that should be disabled. All other dates within
114
+ * the min/max range remain enabled. Format: ["YYYY-MM-DD", ...]
115
+ */
116
+ disabledDates?: string[];
117
+ }>, {
118
+ size: string;
119
+ clearLabel: string;
120
+ }>>> & Readonly<{
121
+ "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
122
+ }>, {
123
+ size: "s" | "m";
124
+ clearLabel: string;
125
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
126
+ export default _default;
127
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
128
+ type __VLS_TypePropsToRuntimeProps<T> = {
129
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
130
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
131
+ } : {
132
+ type: import('vue').PropType<T[K]>;
133
+ required: true;
134
+ };
135
+ };
136
+ type __VLS_WithDefaults<P, D> = {
137
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
138
+ default: D[K];
139
+ }> : P[K];
140
+ };
141
+ type __VLS_Prettify<T> = {
142
+ [K in keyof T]: T[K];
143
+ } & {};
144
+ //# 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":"AAGA,OAAO,+BAA+B,CAAC;;IA+XnC;;OAEG;QACC,MAAM;IACV;;OAEG;WACI,MAAM;IACb;;OAEG;iBACU,MAAM,GAAG,MAAM;IAC5B;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;WACI,GAAG,GAAG,GAAG;IAChB;;OAEG;eACQ,OAAO;IAClB;;OAEG;kBACW,OAAO;IACrB;;OAEG;iBACU,MAAM;IACnB;;OAEG;cACO,MAAM;IAChB;;OAEG;cACO,MAAM;IAChB;;;OAGG;mBACY,MAAM,EAAE;IACvB;;;OAGG;oBACa,MAAM,EAAE;;;;;;;IArDxB;;OAEG;QACC,MAAM;IACV;;OAEG;WACI,MAAM;IACb;;OAEG;iBACU,MAAM,GAAG,MAAM;IAC5B;;OAEG;gBACS,OAAO;IACnB;;OAEG;eACQ,OAAO;IAClB;;OAEG;WACI,GAAG,GAAG,GAAG;IAChB;;OAEG;eACQ,OAAO;IAClB;;OAEG;kBACW,OAAO;IACrB;;OAEG;iBACU,MAAM;IACnB;;OAEG;cACO,MAAM;IAChB;;OAEG;cACO,MAAM;IAChB;;;OAGG;mBACY,MAAM,EAAE;IACvB;;;OAGG;oBACa,MAAM,EAAE;;;;;;;UA9BjB,GAAG,GAAG,GAAG;gBAYH,MAAM;;AAzCvB,wBA8DG;AACH,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,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */.az-text-input[data-v-3708ac20]:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid,#fff),0 0 0 .25rem var(--focus-color-outer,#000);outline-offset:.125rem;outline:.125rem solid #0000}.az-text-input[data-v-3708ac20]:hover:not(:focus-within){border-color:var(--forms-color-border-hover,#4d4d4d);box-shadow:0 0 0 .0625rem var(--forms-color-border-hover,#4d4d4d)}.az-text-input[data-v-3708ac20]:has(input:disabled){background-color:var(--color-background-disabled);cursor:not-allowed;box-shadow:none;color:var(--color-text-disabled);pointer-events:none;border-color:#0000}.az-text-input[data-v-3708ac20]:has(input[readonly]){border-color:var(--color-border-readonly,#ccc);pointer-events:none}.az-text-input.is-invalid[data-v-3708ac20]{border-color:var(--color-status-standalone-error,#ea302d);box-shadow:0 0 0 .0625rem var(--color-status-standalone-error,#ea302d)}.az-text-input.is-invalid[data-v-3708ac20]:hover:not(:focus-within){border-color:var(--color-status-standalone-error-hover,#c61112);box-shadow:0 0 0 .0625rem var(--color-status-standalone-error-hover,#c61112)}.az-text-input[data-v-3708ac20]:has(.az-datepicker__controls-options),.az-text-input:has(.az-datepicker__controls-options) .az-text-input__control[data-v-3708ac20]{padding-inline-end:0}.az-text-input--s[data-v-3708ac20]{height:2rem}.az-text-input--s .az-text-input__control[data-v-3708ac20]{padding:.375rem .6875rem;font-size:.875rem;line-height:1.3}.az-text-input__control[data-v-3708ac20]{padding:.75rem .6875rem;line-height:1.3}.az-text-input__control[data-v-3708ac20]::placeholder{color:var(--forms-color-placeholder,#666)}.az-datepicker__control[data-v-3708ac20]{background-position:right .75rem center;background-repeat:no-repeat;padding:0 .75rem}.az-datepicker__control[data-v-3708ac20]::-webkit-calendar-picker-indicator{opacity:0;padding-right:1rem;transform:scale(2)}.az-datepicker__icon[data-v-3708ac20]{background-color:var(--color-icon-primary,#000);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%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.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") 50%/contain no-repeat}.az-datepicker__control[data-v-3708ac20]:disabled{background-color:var(--color-background-disabled);cursor:not-allowed;box-shadow:none;color:var(--color-text-disabled);border-color:#0000}.az-text-input:has(input:disabled) .az-datepicker__icon[data-v-3708ac20]{background-color:var(--color-icon-disabled,#737373)}.az-datepicker--s .az-datepicker__icon[data-v-3708ac20]{width:1.25rem;height:1.25rem;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%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' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") 50%/contain no-repeat}.az-controls-options__icon[data-v-3708ac20]{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);color:var(--forms-color-icon-clear,#666)}.az-text-input[data-v-3708ac20] *{box-sizing:border-box}
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@ptlm-azulejo/datepicker",
3
+ "version": "0.0.2-alpha.14",
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
+ "vue": ">=3.0.0"
42
+ },
43
+ "dependencies": {
44
+ "@ptlm-azulejo/icons": "^1.0.0-alpha.6"
45
+ }
46
+ }