@sentropic/design-system-vue 0.8.0 → 0.10.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.
- package/dist/Autosave.d.ts +92 -0
- package/dist/Autosave.d.ts.map +1 -0
- package/dist/Autosave.js +137 -0
- package/dist/Autosave.js.map +1 -0
- package/dist/Calendar.d.ts +135 -0
- package/dist/Calendar.d.ts.map +1 -0
- package/dist/Calendar.js +274 -0
- package/dist/Calendar.js.map +1 -0
- package/dist/Popper.d.ts +170 -0
- package/dist/Popper.d.ts.map +1 -0
- package/dist/Popper.js +216 -0
- package/dist/Popper.js.map +1 -0
- package/dist/Portal.d.ts +51 -0
- package/dist/Portal.d.ts.map +1 -0
- package/dist/Portal.js +26 -0
- package/dist/Portal.js.map +1 -0
- package/dist/Rating.d.ts +110 -0
- package/dist/Rating.d.ts.map +1 -0
- package/dist/Rating.js +154 -0
- package/dist/Rating.js.map +1 -0
- package/dist/SlideIndicator.d.ts +87 -0
- package/dist/SlideIndicator.d.ts.map +1 -0
- package/dist/SlideIndicator.js +73 -0
- package/dist/SlideIndicator.js.map +1 -0
- package/dist/TimePicker.d.ts +130 -0
- package/dist/TimePicker.d.ts.map +1 -0
- package/dist/TimePicker.js +179 -0
- package/dist/TimePicker.js.map +1 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -0
- package/dist/index.js.map +1 -1
- package/dist/styles.css +491 -0
- package/package.json +1 -1
package/dist/Rating.js
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { defineComponent, h, ref } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
function StarIcon(size, fill) {
|
|
4
|
+
return h("svg", {
|
|
5
|
+
width: size,
|
|
6
|
+
height: size,
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
fill,
|
|
9
|
+
stroke: "currentColor",
|
|
10
|
+
"stroke-width": 1.75,
|
|
11
|
+
"stroke-linecap": "round",
|
|
12
|
+
"stroke-linejoin": "round",
|
|
13
|
+
"aria-hidden": "true",
|
|
14
|
+
}, [
|
|
15
|
+
h("polygon", {
|
|
16
|
+
points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2",
|
|
17
|
+
}),
|
|
18
|
+
]);
|
|
19
|
+
}
|
|
20
|
+
function StarHalfIcon(size) {
|
|
21
|
+
return h("svg", {
|
|
22
|
+
width: size,
|
|
23
|
+
height: size,
|
|
24
|
+
viewBox: "0 0 24 24",
|
|
25
|
+
fill: "none",
|
|
26
|
+
stroke: "currentColor",
|
|
27
|
+
"stroke-width": 1.75,
|
|
28
|
+
"stroke-linecap": "round",
|
|
29
|
+
"stroke-linejoin": "round",
|
|
30
|
+
"aria-hidden": "true",
|
|
31
|
+
}, [
|
|
32
|
+
h("path", {
|
|
33
|
+
d: "M12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2v15.77z",
|
|
34
|
+
fill: "currentColor",
|
|
35
|
+
}),
|
|
36
|
+
h("path", { d: "M12 2v15.77l6.18 3.25L17 14.14 22 9.27l-6.91-1.01L12 2z" }),
|
|
37
|
+
]);
|
|
38
|
+
}
|
|
39
|
+
export const Rating = defineComponent({
|
|
40
|
+
name: "Rating",
|
|
41
|
+
props: {
|
|
42
|
+
value: { type: Number, default: undefined },
|
|
43
|
+
max: { type: Number, default: 5 },
|
|
44
|
+
onChange: {
|
|
45
|
+
type: Function,
|
|
46
|
+
default: undefined,
|
|
47
|
+
},
|
|
48
|
+
readonly: { type: Boolean, default: false },
|
|
49
|
+
allowHalf: { type: Boolean, default: false },
|
|
50
|
+
size: { type: String, default: "md" },
|
|
51
|
+
name: { type: String, default: undefined },
|
|
52
|
+
label: { type: String, default: undefined },
|
|
53
|
+
class: { type: String, default: undefined },
|
|
54
|
+
},
|
|
55
|
+
emits: ["change", "update:modelValue"],
|
|
56
|
+
setup(props, { emit, attrs }) {
|
|
57
|
+
const internal = ref(props.value ?? 0);
|
|
58
|
+
return () => {
|
|
59
|
+
const current = props.value ?? internal.value;
|
|
60
|
+
const max = props.max;
|
|
61
|
+
const iconSize = props.size === "sm" ? 16 : props.size === "lg" ? 28 : 22;
|
|
62
|
+
const stars = Array.from({ length: max }, (_, i) => i + 1);
|
|
63
|
+
// L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
|
|
64
|
+
const focusedStar = current > 0 ? Math.ceil(current) : 1;
|
|
65
|
+
const fill = (star) => {
|
|
66
|
+
if (current >= star)
|
|
67
|
+
return "full";
|
|
68
|
+
if (props.allowHalf && current >= star - 0.5)
|
|
69
|
+
return "half";
|
|
70
|
+
return "empty";
|
|
71
|
+
};
|
|
72
|
+
const commit = (next) => {
|
|
73
|
+
if (props.readonly)
|
|
74
|
+
return;
|
|
75
|
+
const clamped = Math.max(0, Math.min(max, next));
|
|
76
|
+
if (props.value === undefined)
|
|
77
|
+
internal.value = clamped;
|
|
78
|
+
emit("update:modelValue", clamped);
|
|
79
|
+
emit("change", clamped);
|
|
80
|
+
props.onChange?.(clamped);
|
|
81
|
+
};
|
|
82
|
+
const onStarClick = (event, star) => {
|
|
83
|
+
if (props.readonly)
|
|
84
|
+
return;
|
|
85
|
+
let next = star;
|
|
86
|
+
if (props.allowHalf) {
|
|
87
|
+
const target = event.currentTarget;
|
|
88
|
+
const rect = target.getBoundingClientRect();
|
|
89
|
+
const isLeftHalf = event.clientX - rect.left < rect.width / 2;
|
|
90
|
+
next = isLeftHalf ? star - 0.5 : star;
|
|
91
|
+
}
|
|
92
|
+
// Re-cliquer la valeur déjà sélectionnée remet à zéro.
|
|
93
|
+
if (next === current) {
|
|
94
|
+
commit(0);
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
commit(next);
|
|
98
|
+
};
|
|
99
|
+
const onKeyDown = (event) => {
|
|
100
|
+
if (props.readonly)
|
|
101
|
+
return;
|
|
102
|
+
const step = props.allowHalf ? 0.5 : 1;
|
|
103
|
+
let handled = true;
|
|
104
|
+
switch (event.key) {
|
|
105
|
+
case "ArrowRight":
|
|
106
|
+
case "ArrowUp":
|
|
107
|
+
commit(Math.min(max, current + step));
|
|
108
|
+
break;
|
|
109
|
+
case "ArrowLeft":
|
|
110
|
+
case "ArrowDown":
|
|
111
|
+
commit(Math.max(0, current - step));
|
|
112
|
+
break;
|
|
113
|
+
case "Home":
|
|
114
|
+
commit(0);
|
|
115
|
+
break;
|
|
116
|
+
case "End":
|
|
117
|
+
commit(max);
|
|
118
|
+
break;
|
|
119
|
+
default:
|
|
120
|
+
handled = false;
|
|
121
|
+
}
|
|
122
|
+
if (handled)
|
|
123
|
+
event.preventDefault();
|
|
124
|
+
};
|
|
125
|
+
return h("div", {
|
|
126
|
+
...attrs,
|
|
127
|
+
class: classNames("st-rating", `st-rating--${props.size}`, props.readonly && "st-rating--readonly", props.class),
|
|
128
|
+
role: "radiogroup",
|
|
129
|
+
"aria-label": props.label,
|
|
130
|
+
"aria-readonly": props.readonly ? "true" : undefined,
|
|
131
|
+
}, stars.map((star) => {
|
|
132
|
+
const state = fill(star);
|
|
133
|
+
return h("button", {
|
|
134
|
+
key: star,
|
|
135
|
+
type: "button",
|
|
136
|
+
class: classNames("st-rating__star", state === "full" && "st-rating__star--full", state === "half" && "st-rating__star--half"),
|
|
137
|
+
role: "radio",
|
|
138
|
+
name: props.name,
|
|
139
|
+
"aria-checked": Math.ceil(current) === star ? "true" : "false",
|
|
140
|
+
"aria-label": `${star} / ${max}`,
|
|
141
|
+
tabindex: !props.readonly && star === focusedStar ? 0 : -1,
|
|
142
|
+
disabled: props.readonly,
|
|
143
|
+
onClick: (event) => onStarClick(event, star),
|
|
144
|
+
onKeydown: onKeyDown,
|
|
145
|
+
}, [
|
|
146
|
+
state === "half"
|
|
147
|
+
? StarHalfIcon(iconSize)
|
|
148
|
+
: StarIcon(iconSize, state === "full" ? "currentColor" : "none"),
|
|
149
|
+
]);
|
|
150
|
+
}));
|
|
151
|
+
};
|
|
152
|
+
},
|
|
153
|
+
});
|
|
154
|
+
//# sourceMappingURL=Rating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../src/Rating.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
export type SlideIndicatorVariant = "dots" | "bars";
|
|
2
|
+
export type SlideIndicatorSize = "sm" | "md" | "lg";
|
|
3
|
+
export type SlideIndicatorProps = {
|
|
4
|
+
/** Nombre total de diapositives. */
|
|
5
|
+
count: number;
|
|
6
|
+
/** Index de la diapositive courante (0-based). */
|
|
7
|
+
current?: number;
|
|
8
|
+
/** Appelé avec l'index ciblé au clic ou au clavier. */
|
|
9
|
+
onChange?: (index: number) => void;
|
|
10
|
+
size?: SlideIndicatorSize;
|
|
11
|
+
variant?: SlideIndicatorVariant;
|
|
12
|
+
/** Préfixe d'étiquette accessible de chaque point ("Diapositive 1"...). */
|
|
13
|
+
label?: string;
|
|
14
|
+
class?: string;
|
|
15
|
+
};
|
|
16
|
+
export declare const SlideIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
17
|
+
count: {
|
|
18
|
+
type: NumberConstructor;
|
|
19
|
+
required: true;
|
|
20
|
+
};
|
|
21
|
+
current: {
|
|
22
|
+
type: NumberConstructor;
|
|
23
|
+
default: number;
|
|
24
|
+
};
|
|
25
|
+
onChange: {
|
|
26
|
+
type: () => (index: number) => void;
|
|
27
|
+
default: undefined;
|
|
28
|
+
};
|
|
29
|
+
size: {
|
|
30
|
+
type: () => SlideIndicatorSize;
|
|
31
|
+
default: string;
|
|
32
|
+
};
|
|
33
|
+
variant: {
|
|
34
|
+
type: () => SlideIndicatorVariant;
|
|
35
|
+
default: string;
|
|
36
|
+
};
|
|
37
|
+
label: {
|
|
38
|
+
type: StringConstructor;
|
|
39
|
+
default: string;
|
|
40
|
+
};
|
|
41
|
+
class: {
|
|
42
|
+
type: StringConstructor;
|
|
43
|
+
default: undefined;
|
|
44
|
+
};
|
|
45
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
46
|
+
[key: string]: any;
|
|
47
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
48
|
+
count: {
|
|
49
|
+
type: NumberConstructor;
|
|
50
|
+
required: true;
|
|
51
|
+
};
|
|
52
|
+
current: {
|
|
53
|
+
type: NumberConstructor;
|
|
54
|
+
default: number;
|
|
55
|
+
};
|
|
56
|
+
onChange: {
|
|
57
|
+
type: () => (index: number) => void;
|
|
58
|
+
default: undefined;
|
|
59
|
+
};
|
|
60
|
+
size: {
|
|
61
|
+
type: () => SlideIndicatorSize;
|
|
62
|
+
default: string;
|
|
63
|
+
};
|
|
64
|
+
variant: {
|
|
65
|
+
type: () => SlideIndicatorVariant;
|
|
66
|
+
default: string;
|
|
67
|
+
};
|
|
68
|
+
label: {
|
|
69
|
+
type: StringConstructor;
|
|
70
|
+
default: string;
|
|
71
|
+
};
|
|
72
|
+
class: {
|
|
73
|
+
type: StringConstructor;
|
|
74
|
+
default: undefined;
|
|
75
|
+
};
|
|
76
|
+
}>> & Readonly<{
|
|
77
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
78
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
79
|
+
}>, {
|
|
80
|
+
class: string;
|
|
81
|
+
onChange: (index: number) => void;
|
|
82
|
+
label: string;
|
|
83
|
+
size: SlideIndicatorSize;
|
|
84
|
+
variant: SlideIndicatorVariant;
|
|
85
|
+
current: number;
|
|
86
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
87
|
+
//# sourceMappingURL=SlideIndicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SlideIndicator.d.ts","sourceRoot":"","sources":["../src/SlideIndicator.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;cAMQ,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;cAGpC,MAAM,kBAAkB;;;;cACrB,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;cAJvB,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;cAGpC,MAAM,kBAAkB;;;;cACrB,MAAM,qBAAqB;;;;;;;;;;;;;;;;sBAJT,MAAM,KAAK,IAAI;;;;;4EA+E9D,CAAC"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { defineComponent, h } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
export const SlideIndicator = defineComponent({
|
|
4
|
+
name: "SlideIndicator",
|
|
5
|
+
props: {
|
|
6
|
+
count: { type: Number, required: true },
|
|
7
|
+
current: { type: Number, default: 0 },
|
|
8
|
+
onChange: {
|
|
9
|
+
type: Function,
|
|
10
|
+
default: undefined,
|
|
11
|
+
},
|
|
12
|
+
size: { type: String, default: "md" },
|
|
13
|
+
variant: { type: String, default: "dots" },
|
|
14
|
+
label: { type: String, default: "Diapositive" },
|
|
15
|
+
class: { type: String, default: undefined },
|
|
16
|
+
},
|
|
17
|
+
emits: ["change", "update:modelValue"],
|
|
18
|
+
setup(props, { emit, attrs }) {
|
|
19
|
+
return () => {
|
|
20
|
+
const count = props.count;
|
|
21
|
+
const current = props.current;
|
|
22
|
+
const items = Array.from({ length: Math.max(0, count) }, (_, i) => i);
|
|
23
|
+
const select = (index) => {
|
|
24
|
+
if (index < 0 || index >= count || index === current)
|
|
25
|
+
return;
|
|
26
|
+
emit("update:modelValue", index);
|
|
27
|
+
emit("change", index);
|
|
28
|
+
props.onChange?.(index);
|
|
29
|
+
};
|
|
30
|
+
const onKeyDown = (event, index) => {
|
|
31
|
+
let target = index;
|
|
32
|
+
switch (event.key) {
|
|
33
|
+
case "ArrowRight":
|
|
34
|
+
case "ArrowDown":
|
|
35
|
+
target = Math.min(count - 1, index + 1);
|
|
36
|
+
break;
|
|
37
|
+
case "ArrowLeft":
|
|
38
|
+
case "ArrowUp":
|
|
39
|
+
target = Math.max(0, index - 1);
|
|
40
|
+
break;
|
|
41
|
+
case "Home":
|
|
42
|
+
target = 0;
|
|
43
|
+
break;
|
|
44
|
+
case "End":
|
|
45
|
+
target = count - 1;
|
|
46
|
+
break;
|
|
47
|
+
default:
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
select(target);
|
|
52
|
+
};
|
|
53
|
+
return h("div", {
|
|
54
|
+
...attrs,
|
|
55
|
+
class: classNames("st-slideIndicator", `st-slideIndicator--${props.size}`, `st-slideIndicator--${props.variant}`, props.class),
|
|
56
|
+
role: "tablist",
|
|
57
|
+
"aria-label": props.label,
|
|
58
|
+
}, items.map((index) => h("button", {
|
|
59
|
+
key: index,
|
|
60
|
+
type: "button",
|
|
61
|
+
class: classNames("st-slideIndicator__dot", index === current && "st-slideIndicator__dot--current"),
|
|
62
|
+
role: "tab",
|
|
63
|
+
"aria-selected": index === current ? "true" : "false",
|
|
64
|
+
"aria-current": index === current ? "true" : undefined,
|
|
65
|
+
"aria-label": `${props.label} ${index + 1}`,
|
|
66
|
+
tabindex: index === current ? 0 : -1,
|
|
67
|
+
onClick: () => select(index),
|
|
68
|
+
onKeydown: (event) => onKeyDown(event, index),
|
|
69
|
+
})));
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
//# sourceMappingURL=SlideIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SlideIndicator.js","sourceRoot":"","sources":["../src/SlideIndicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAqB7C,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACvC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE;QACrC,QAAQ,EAAE;YACR,IAAI,EAAE,QAAoD;YAC1D,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE,EAAE,IAAI,EAAE,MAAkC,EAAE,OAAO,EAAE,IAAI,EAAE;QACjE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAqC,EAAE,OAAO,EAAE,MAAM,EAAE;QACzE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE;QAC/C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,QAAQ,EAAE,mBAAmB,CAAC;IACtC,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YAC1B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;YAEtE,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;gBAC/B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,OAAO;oBAAE,OAAO;gBAC7D,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;gBACjC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;gBACtB,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,CAAC;YAEF,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,KAAa,EAAE,EAAE;gBACxD,IAAI,MAAM,GAAG,KAAK,CAAC;gBACnB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;oBAClB,KAAK,YAAY,CAAC;oBAClB,KAAK,WAAW;wBACd,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;wBACxC,MAAM;oBACR,KAAK,WAAW,CAAC;oBACjB,KAAK,SAAS;wBACZ,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;wBAChC,MAAM;oBACR,KAAK,MAAM;wBACT,MAAM,GAAG,CAAC,CAAC;wBACX,MAAM;oBACR,KAAK,KAAK;wBACR,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;wBACnB,MAAM;oBACR;wBACE,OAAO;gBACX,CAAC;gBACD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,CAAC,MAAM,CAAC,CAAC;YACjB,CAAC,CAAC;YAEF,OAAO,CAAC,CACN,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CACf,mBAAmB,EACnB,sBAAsB,KAAK,CAAC,IAAI,EAAE,EAClC,sBAAsB,KAAK,CAAC,OAAO,EAAE,EACrC,KAAK,CAAC,KAAK,CACZ;gBACD,IAAI,EAAE,SAAS;gBACf,YAAY,EAAE,KAAK,CAAC,KAAK;aAC1B,EACD,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAClB,CAAC,CAAC,QAAQ,EAAE;gBACV,GAAG,EAAE,KAAK;gBACV,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,UAAU,CACf,wBAAwB,EACxB,KAAK,KAAK,OAAO,IAAI,iCAAiC,CACvD;gBACD,IAAI,EAAE,KAAK;gBACX,eAAe,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBACrD,cAAc,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;gBACtD,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE;gBAC3C,QAAQ,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;gBAC5B,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;aAC7D,CAAC,CACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
export type TimePickerFormat = "24" | "12";
|
|
2
|
+
export type TimePickerSize = "sm" | "md" | "lg";
|
|
3
|
+
export type TimePickerProps = {
|
|
4
|
+
/** Heure courante au format "HH:mm" (24h, toujours). Vide = non renseigné. */
|
|
5
|
+
value?: string;
|
|
6
|
+
/** Appelé avec "HH:mm" lors d'une sélection. */
|
|
7
|
+
onChange?: (value: string) => void;
|
|
8
|
+
/** Pas (en minutes) entre deux créneaux générés. */
|
|
9
|
+
step?: number;
|
|
10
|
+
/** Borne minimale "HH:mm" (inclusive). */
|
|
11
|
+
min?: string;
|
|
12
|
+
/** Borne maximale "HH:mm" (inclusive). */
|
|
13
|
+
max?: string;
|
|
14
|
+
/** Affichage 24h (par défaut) ou 12h (AM/PM). La valeur émise reste "HH:mm". */
|
|
15
|
+
format?: TimePickerFormat;
|
|
16
|
+
size?: TimePickerSize;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
label?: string;
|
|
19
|
+
class?: string;
|
|
20
|
+
id?: string;
|
|
21
|
+
};
|
|
22
|
+
export declare const TimePicker: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
23
|
+
value: {
|
|
24
|
+
type: StringConstructor;
|
|
25
|
+
default: undefined;
|
|
26
|
+
};
|
|
27
|
+
onChange: {
|
|
28
|
+
type: () => (value: string) => void;
|
|
29
|
+
default: undefined;
|
|
30
|
+
};
|
|
31
|
+
step: {
|
|
32
|
+
type: NumberConstructor;
|
|
33
|
+
default: number;
|
|
34
|
+
};
|
|
35
|
+
min: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
default: undefined;
|
|
38
|
+
};
|
|
39
|
+
max: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
default: undefined;
|
|
42
|
+
};
|
|
43
|
+
format: {
|
|
44
|
+
type: () => TimePickerFormat;
|
|
45
|
+
default: string;
|
|
46
|
+
};
|
|
47
|
+
size: {
|
|
48
|
+
type: () => TimePickerSize;
|
|
49
|
+
default: string;
|
|
50
|
+
};
|
|
51
|
+
disabled: {
|
|
52
|
+
type: BooleanConstructor;
|
|
53
|
+
default: boolean;
|
|
54
|
+
};
|
|
55
|
+
label: {
|
|
56
|
+
type: StringConstructor;
|
|
57
|
+
default: undefined;
|
|
58
|
+
};
|
|
59
|
+
class: {
|
|
60
|
+
type: StringConstructor;
|
|
61
|
+
default: undefined;
|
|
62
|
+
};
|
|
63
|
+
id: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
default: undefined;
|
|
66
|
+
};
|
|
67
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
68
|
+
[key: string]: any;
|
|
69
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
70
|
+
value: {
|
|
71
|
+
type: StringConstructor;
|
|
72
|
+
default: undefined;
|
|
73
|
+
};
|
|
74
|
+
onChange: {
|
|
75
|
+
type: () => (value: string) => void;
|
|
76
|
+
default: undefined;
|
|
77
|
+
};
|
|
78
|
+
step: {
|
|
79
|
+
type: NumberConstructor;
|
|
80
|
+
default: number;
|
|
81
|
+
};
|
|
82
|
+
min: {
|
|
83
|
+
type: StringConstructor;
|
|
84
|
+
default: undefined;
|
|
85
|
+
};
|
|
86
|
+
max: {
|
|
87
|
+
type: StringConstructor;
|
|
88
|
+
default: undefined;
|
|
89
|
+
};
|
|
90
|
+
format: {
|
|
91
|
+
type: () => TimePickerFormat;
|
|
92
|
+
default: string;
|
|
93
|
+
};
|
|
94
|
+
size: {
|
|
95
|
+
type: () => TimePickerSize;
|
|
96
|
+
default: string;
|
|
97
|
+
};
|
|
98
|
+
disabled: {
|
|
99
|
+
type: BooleanConstructor;
|
|
100
|
+
default: boolean;
|
|
101
|
+
};
|
|
102
|
+
label: {
|
|
103
|
+
type: StringConstructor;
|
|
104
|
+
default: undefined;
|
|
105
|
+
};
|
|
106
|
+
class: {
|
|
107
|
+
type: StringConstructor;
|
|
108
|
+
default: undefined;
|
|
109
|
+
};
|
|
110
|
+
id: {
|
|
111
|
+
type: StringConstructor;
|
|
112
|
+
default: undefined;
|
|
113
|
+
};
|
|
114
|
+
}>> & Readonly<{
|
|
115
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
116
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
117
|
+
}>, {
|
|
118
|
+
class: string;
|
|
119
|
+
onChange: (value: string) => void;
|
|
120
|
+
label: string;
|
|
121
|
+
id: string;
|
|
122
|
+
disabled: boolean;
|
|
123
|
+
min: string;
|
|
124
|
+
max: string;
|
|
125
|
+
size: TimePickerSize;
|
|
126
|
+
value: string;
|
|
127
|
+
step: number;
|
|
128
|
+
format: TimePickerFormat;
|
|
129
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
130
|
+
//# sourceMappingURL=TimePicker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../src/TimePicker.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIhD,MAAM,MAAM,eAAe,GAAG;IAC5B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AA4CF,eAAO,MAAM,UAAU;;;;;;cAKY,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;cAMlC,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;cAPb,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;cAMlC,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;sBAPC,MAAM,KAAK,IAAI;;;;;;;;;;4EAiK9D,CAAC"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import { defineComponent, h, onBeforeUnmount, onMounted, ref } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
let _tpCounter = 0;
|
|
4
|
+
function nextTpId() {
|
|
5
|
+
return `st-timepicker-${++_tpCounter}`;
|
|
6
|
+
}
|
|
7
|
+
function timeToMinutes(hhmm) {
|
|
8
|
+
if (!hhmm)
|
|
9
|
+
return null;
|
|
10
|
+
const match = /^(\d{1,2}):(\d{2})$/.exec(hhmm);
|
|
11
|
+
if (!match)
|
|
12
|
+
return null;
|
|
13
|
+
const h = Number(match[1]);
|
|
14
|
+
const m = Number(match[2]);
|
|
15
|
+
if (h < 0 || h > 23 || m < 0 || m > 59)
|
|
16
|
+
return null;
|
|
17
|
+
return h * 60 + m;
|
|
18
|
+
}
|
|
19
|
+
function timeFromMinutes(total) {
|
|
20
|
+
const h = Math.floor(total / 60);
|
|
21
|
+
const m = total % 60;
|
|
22
|
+
return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
|
|
23
|
+
}
|
|
24
|
+
function ClockIcon(size) {
|
|
25
|
+
return h("svg", {
|
|
26
|
+
width: size,
|
|
27
|
+
height: size,
|
|
28
|
+
viewBox: "0 0 24 24",
|
|
29
|
+
fill: "none",
|
|
30
|
+
stroke: "currentColor",
|
|
31
|
+
"stroke-width": 2,
|
|
32
|
+
"stroke-linecap": "round",
|
|
33
|
+
"stroke-linejoin": "round",
|
|
34
|
+
"aria-hidden": "true",
|
|
35
|
+
}, [
|
|
36
|
+
h("circle", { cx: "12", cy: "12", r: "10" }),
|
|
37
|
+
h("polyline", { points: "12 6 12 12 16 14" }),
|
|
38
|
+
]);
|
|
39
|
+
}
|
|
40
|
+
export const TimePicker = defineComponent({
|
|
41
|
+
name: "TimePicker",
|
|
42
|
+
props: {
|
|
43
|
+
value: { type: String, default: undefined },
|
|
44
|
+
onChange: {
|
|
45
|
+
type: Function,
|
|
46
|
+
default: undefined,
|
|
47
|
+
},
|
|
48
|
+
step: { type: Number, default: 15 },
|
|
49
|
+
min: { type: String, default: undefined },
|
|
50
|
+
max: { type: String, default: undefined },
|
|
51
|
+
format: { type: String, default: "24" },
|
|
52
|
+
size: { type: String, default: "md" },
|
|
53
|
+
disabled: { type: Boolean, default: false },
|
|
54
|
+
label: { type: String, default: undefined },
|
|
55
|
+
class: { type: String, default: undefined },
|
|
56
|
+
id: { type: String, default: undefined },
|
|
57
|
+
},
|
|
58
|
+
emits: ["change", "update:modelValue"],
|
|
59
|
+
setup(props, { emit, attrs }) {
|
|
60
|
+
const autoId = ref(nextTpId());
|
|
61
|
+
const internal = ref(props.value ?? "");
|
|
62
|
+
const open = ref(false);
|
|
63
|
+
const hostEl = ref(null);
|
|
64
|
+
const onDocumentMouseDown = (event) => {
|
|
65
|
+
if (!open.value)
|
|
66
|
+
return;
|
|
67
|
+
const target = event.target;
|
|
68
|
+
if (hostEl.value && target && !hostEl.value.contains(target)) {
|
|
69
|
+
open.value = false;
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
onMounted(() => {
|
|
73
|
+
document.addEventListener("mousedown", onDocumentMouseDown);
|
|
74
|
+
});
|
|
75
|
+
onBeforeUnmount(() => {
|
|
76
|
+
document.removeEventListener("mousedown", onDocumentMouseDown);
|
|
77
|
+
});
|
|
78
|
+
const display = (hhmm) => {
|
|
79
|
+
if (props.format === "24")
|
|
80
|
+
return hhmm;
|
|
81
|
+
const total = timeToMinutes(hhmm);
|
|
82
|
+
if (total === null)
|
|
83
|
+
return hhmm;
|
|
84
|
+
const h24 = Math.floor(total / 60);
|
|
85
|
+
const m = total % 60;
|
|
86
|
+
const period = h24 < 12 ? "AM" : "PM";
|
|
87
|
+
let h12 = h24 % 12;
|
|
88
|
+
if (h12 === 0)
|
|
89
|
+
h12 = 12;
|
|
90
|
+
return `${String(h12).padStart(2, "0")}:${String(m).padStart(2, "0")} ${period}`;
|
|
91
|
+
};
|
|
92
|
+
return () => {
|
|
93
|
+
const current = props.value ?? internal.value;
|
|
94
|
+
const fieldId = props.id ?? autoId.value;
|
|
95
|
+
const listId = `${fieldId}-list`;
|
|
96
|
+
const safeStep = props.step > 0 ? props.step : 15;
|
|
97
|
+
const lower = timeToMinutes(props.min) ?? 0;
|
|
98
|
+
const upper = timeToMinutes(props.max) ?? 23 * 60 + 59;
|
|
99
|
+
const slots = [];
|
|
100
|
+
for (let t = lower; t <= upper; t += safeStep) {
|
|
101
|
+
slots.push(timeFromMinutes(t));
|
|
102
|
+
}
|
|
103
|
+
const displayValue = current ? display(current) : "";
|
|
104
|
+
const toggleOpen = () => {
|
|
105
|
+
if (props.disabled)
|
|
106
|
+
return;
|
|
107
|
+
open.value = !open.value;
|
|
108
|
+
};
|
|
109
|
+
const pick = (slot) => {
|
|
110
|
+
if (props.value === undefined)
|
|
111
|
+
internal.value = slot;
|
|
112
|
+
emit("update:modelValue", slot);
|
|
113
|
+
emit("change", slot);
|
|
114
|
+
props.onChange?.(slot);
|
|
115
|
+
open.value = false;
|
|
116
|
+
};
|
|
117
|
+
return h("div", {
|
|
118
|
+
...attrs,
|
|
119
|
+
class: classNames("st-field", props.class),
|
|
120
|
+
ref: hostEl,
|
|
121
|
+
}, [
|
|
122
|
+
h("div", { class: "st-field__control" }, [
|
|
123
|
+
props.label
|
|
124
|
+
? h("label", { class: "st-field__label", for: fieldId }, props.label)
|
|
125
|
+
: null,
|
|
126
|
+
h("span", { class: classNames("st-timepicker", `st-timepicker--${props.size}`) }, [
|
|
127
|
+
h("input", {
|
|
128
|
+
id: fieldId,
|
|
129
|
+
type: "text",
|
|
130
|
+
readonly: true,
|
|
131
|
+
class: "st-timepicker__control",
|
|
132
|
+
value: displayValue,
|
|
133
|
+
placeholder: props.format === "24" ? "HH:mm" : "hh:mm AM",
|
|
134
|
+
disabled: props.disabled,
|
|
135
|
+
role: "combobox",
|
|
136
|
+
"aria-haspopup": "listbox",
|
|
137
|
+
"aria-controls": listId,
|
|
138
|
+
"aria-expanded": open.value ? "true" : "false",
|
|
139
|
+
onClick: toggleOpen,
|
|
140
|
+
}),
|
|
141
|
+
h("button", {
|
|
142
|
+
type: "button",
|
|
143
|
+
class: "st-timepicker__trigger",
|
|
144
|
+
"aria-label": "Ouvrir la liste des horaires",
|
|
145
|
+
"aria-haspopup": "listbox",
|
|
146
|
+
"aria-expanded": open.value ? "true" : "false",
|
|
147
|
+
disabled: props.disabled,
|
|
148
|
+
onClick: toggleOpen,
|
|
149
|
+
}, [ClockIcon(16)]),
|
|
150
|
+
]),
|
|
151
|
+
]),
|
|
152
|
+
open.value
|
|
153
|
+
? h("ul", {
|
|
154
|
+
id: listId,
|
|
155
|
+
class: "st-timepicker__list",
|
|
156
|
+
role: "listbox",
|
|
157
|
+
"aria-label": props.label ?? "Horaires",
|
|
158
|
+
tabindex: -1,
|
|
159
|
+
onKeydown: (event) => {
|
|
160
|
+
if (event.key === "Escape") {
|
|
161
|
+
event.preventDefault();
|
|
162
|
+
open.value = false;
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
}, slots.map((slot) => h("li", { key: slot, role: "presentation" }, [
|
|
166
|
+
h("button", {
|
|
167
|
+
type: "button",
|
|
168
|
+
class: classNames("st-timepicker__option", slot === current && "st-timepicker__option--selected"),
|
|
169
|
+
role: "option",
|
|
170
|
+
"aria-selected": slot === current ? "true" : "false",
|
|
171
|
+
onClick: () => pick(slot),
|
|
172
|
+
}, display(slot)),
|
|
173
|
+
])))
|
|
174
|
+
: null,
|
|
175
|
+
]);
|
|
176
|
+
};
|
|
177
|
+
},
|
|
178
|
+
});
|
|
179
|
+
//# sourceMappingURL=TimePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../src/TimePicker.ts"],"names":[],"mappings":"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"}
|