@antify/ui 4.1.33 → 4.1.35
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/components/calendar/AntDatePicker.vue +21 -4
- package/dist/components/calendar/__stories/AntDatePicker.stories.d.ts +1 -0
- package/dist/components/calendar/__stories/AntDatePicker.stories.js +90 -1
- package/dist/components/calendar/__stories/AntDatePicker.stories.mjs +89 -0
- package/package.json +1 -1
|
@@ -35,11 +35,21 @@ const props = withDefaults(defineProps<{
|
|
|
35
35
|
date: string;
|
|
36
36
|
color: string;
|
|
37
37
|
}[];
|
|
38
|
+
/**
|
|
39
|
+
* Color token used for weekNumberTextColor of week number column (e.g., 'base-200-font', 'primary-500-font').
|
|
40
|
+
*/
|
|
41
|
+
weekNumberTextColor?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Color token used for weekNumberBackgroundColor of week number column (e.g., 'base-200', 'primary-500').
|
|
44
|
+
*/
|
|
45
|
+
weekNumberBackgroundColor?: string;
|
|
38
46
|
}>(), {
|
|
39
47
|
showWeekend: false,
|
|
40
48
|
showWeekNumbers: false,
|
|
41
49
|
skeleton: false,
|
|
42
50
|
specialDays: () => [],
|
|
51
|
+
weekNumberTextColor: 'base-300-font',
|
|
52
|
+
weekNumberBackgroundColor: 'base-300',
|
|
43
53
|
});
|
|
44
54
|
const emit = defineEmits([
|
|
45
55
|
'select',
|
|
@@ -134,6 +144,11 @@ const getColorNumber = (color: string) => {
|
|
|
134
144
|
return match ? parseInt(match[0], 10) : null;
|
|
135
145
|
};
|
|
136
146
|
|
|
147
|
+
const weekNumberStyles = computed(() => ({
|
|
148
|
+
backgroundColor: `var(--color-${props.weekNumberBackgroundColor})`,
|
|
149
|
+
color: `var(--color-${props.weekNumberTextColor})`,
|
|
150
|
+
}));
|
|
151
|
+
|
|
137
152
|
watch(() => props.modelValue, (val) => {
|
|
138
153
|
const date = new Date(val);
|
|
139
154
|
currentMonthIndex.value = date.getMonth();
|
|
@@ -179,9 +194,10 @@ onMounted(() => {
|
|
|
179
194
|
}"
|
|
180
195
|
>
|
|
181
196
|
<div
|
|
182
|
-
v-for="day in weekDays"
|
|
183
|
-
:key="day"
|
|
184
|
-
class="text-
|
|
197
|
+
v-for="(day, index) in weekDays"
|
|
198
|
+
:key="`${day}-${index}`"
|
|
199
|
+
class="text-center flex items-center justify-center rounded-md"
|
|
200
|
+
:style="showWeekNumbers && index === 0 ? weekNumberStyles : {}"
|
|
185
201
|
>
|
|
186
202
|
<AntSkeleton
|
|
187
203
|
:visible="skeleton"
|
|
@@ -200,7 +216,8 @@ onMounted(() => {
|
|
|
200
216
|
>
|
|
201
217
|
<div
|
|
202
218
|
v-if="showWeekNumbers"
|
|
203
|
-
class="flex
|
|
219
|
+
class="flex font-semibold rounded-md transition-colors"
|
|
220
|
+
:style="weekNumberStyles"
|
|
204
221
|
>
|
|
205
222
|
<AntSkeleton
|
|
206
223
|
:visible="skeleton"
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
module.exports = exports.Summary = exports.Docs = void 0;
|
|
6
|
+
module.exports = exports.WeekNumberStyling = exports.Summary = exports.Docs = void 0;
|
|
7
7
|
var _AntDatePicker = _interopRequireDefault(require("../AntDatePicker.vue"));
|
|
8
8
|
var _AntDateSwitcher = _interopRequireDefault(require("../AntDateSwitcher.vue"));
|
|
9
9
|
var _vue = require("vue");
|
|
@@ -31,6 +31,33 @@ const meta = {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
|
+
weekNumberTextColor: {
|
|
35
|
+
control: "text",
|
|
36
|
+
description: "Color token e.g. 'base-300-font', 'primary-500-font'. Automatically calculates contrast text color.",
|
|
37
|
+
table: {
|
|
38
|
+
type: {
|
|
39
|
+
summary: "string"
|
|
40
|
+
},
|
|
41
|
+
defaultValue: {
|
|
42
|
+
summary: "base-300-font"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
weekNumberBackgroundColor: {
|
|
47
|
+
control: "text",
|
|
48
|
+
description: "Color token e.g. 'base-300', 'primary-500'. Automatically calculates contrast text color.",
|
|
49
|
+
table: {
|
|
50
|
+
type: {
|
|
51
|
+
summary: "string"
|
|
52
|
+
},
|
|
53
|
+
defaultValue: {
|
|
54
|
+
summary: "base-300"
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
showWeekNumbers: {
|
|
59
|
+
control: "boolean"
|
|
60
|
+
},
|
|
34
61
|
onSelect: {
|
|
35
62
|
action: "select"
|
|
36
63
|
}
|
|
@@ -66,6 +93,68 @@ const Docs = exports.Docs = {
|
|
|
66
93
|
}]
|
|
67
94
|
}
|
|
68
95
|
};
|
|
96
|
+
const WeekNumberStyling = exports.WeekNumberStyling = {
|
|
97
|
+
render: args => ({
|
|
98
|
+
components: {
|
|
99
|
+
AntCalendar: _AntDatePicker.default,
|
|
100
|
+
AntFormGroup: _AntFormGroup.default,
|
|
101
|
+
AntFormGroupLabel: _AntFormGroupLabel.default
|
|
102
|
+
},
|
|
103
|
+
setup() {
|
|
104
|
+
const value = (0, _vue.ref)((/* @__PURE__ */new Date("2026-01-01")).getTime());
|
|
105
|
+
return {
|
|
106
|
+
value,
|
|
107
|
+
args
|
|
108
|
+
};
|
|
109
|
+
},
|
|
110
|
+
template: `
|
|
111
|
+
<AntFormGroup class="p-4 flex gap-4 w-fit">
|
|
112
|
+
<AntFormGroupLabel>Week Number Styling (Presets)</AntFormGroupLabel>
|
|
113
|
+
|
|
114
|
+
<AntFormGroup class="grid grid-cols-4 gap-10">
|
|
115
|
+
<div class="flex flex-col w-64 gap-2">
|
|
116
|
+
<span class="text-sm font-medium text-for-white-bg-font">1. Default (Base 200)</span>
|
|
117
|
+
<AntCalendar
|
|
118
|
+
v-model="value"
|
|
119
|
+
:show-week-numbers="true"
|
|
120
|
+
/>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="flex flex-col w-64 gap-2">
|
|
124
|
+
<span class="text-sm font-medium text-for-white-bg-font">2. Primary 900</span>
|
|
125
|
+
<AntCalendar
|
|
126
|
+
v-model="value"
|
|
127
|
+
:show-week-numbers="true"
|
|
128
|
+
week-number-text-color="primary-900-font"
|
|
129
|
+
week-number-background-color="primary-900"
|
|
130
|
+
/>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="flex flex-col w-64 gap-2">
|
|
134
|
+
<span class="text-sm font-medium text-for-white-bg-font">3. Info 100</span>
|
|
135
|
+
<AntCalendar
|
|
136
|
+
v-model="value"
|
|
137
|
+
:show-week-numbers="true"
|
|
138
|
+
week-number-text-color="info-100-font"
|
|
139
|
+
week-number-background-color="info-100"
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div class="flex flex-col w-64 gap-2">
|
|
144
|
+
<span class="text-sm font-medium text-for-white-bg-font">4. Success 500</span>
|
|
145
|
+
<AntCalendar
|
|
146
|
+
v-model="value"
|
|
147
|
+
:show-week-numbers="true"
|
|
148
|
+
week-number-text-color="success-500-font"
|
|
149
|
+
week-number-background-color="success-500"
|
|
150
|
+
/>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
</AntFormGroup>
|
|
154
|
+
</AntFormGroup>
|
|
155
|
+
`
|
|
156
|
+
})
|
|
157
|
+
};
|
|
69
158
|
const Summary = exports.Summary = {
|
|
70
159
|
parameters: {
|
|
71
160
|
chromatic: {
|
|
@@ -29,6 +29,33 @@ const meta = {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
|
+
weekNumberTextColor: {
|
|
33
|
+
control: "text",
|
|
34
|
+
description: "Color token e.g. 'base-300-font', 'primary-500-font'. Automatically calculates contrast text color.",
|
|
35
|
+
table: {
|
|
36
|
+
type: {
|
|
37
|
+
summary: "string"
|
|
38
|
+
},
|
|
39
|
+
defaultValue: {
|
|
40
|
+
summary: "base-300-font"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
weekNumberBackgroundColor: {
|
|
45
|
+
control: "text",
|
|
46
|
+
description: "Color token e.g. 'base-300', 'primary-500'. Automatically calculates contrast text color.",
|
|
47
|
+
table: {
|
|
48
|
+
type: {
|
|
49
|
+
summary: "string"
|
|
50
|
+
},
|
|
51
|
+
defaultValue: {
|
|
52
|
+
summary: "base-300"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
showWeekNumbers: {
|
|
57
|
+
control: "boolean"
|
|
58
|
+
},
|
|
32
59
|
onSelect: {
|
|
33
60
|
action: "select"
|
|
34
61
|
}
|
|
@@ -66,6 +93,68 @@ export const Docs = {
|
|
|
66
93
|
]
|
|
67
94
|
}
|
|
68
95
|
};
|
|
96
|
+
export const WeekNumberStyling = {
|
|
97
|
+
render: (args) => ({
|
|
98
|
+
components: {
|
|
99
|
+
AntCalendar,
|
|
100
|
+
AntFormGroup,
|
|
101
|
+
AntFormGroupLabel
|
|
102
|
+
},
|
|
103
|
+
setup() {
|
|
104
|
+
const value = ref((/* @__PURE__ */ new Date("2026-01-01")).getTime());
|
|
105
|
+
return {
|
|
106
|
+
value,
|
|
107
|
+
args
|
|
108
|
+
};
|
|
109
|
+
},
|
|
110
|
+
template: `
|
|
111
|
+
<AntFormGroup class="p-4 flex gap-4 w-fit">
|
|
112
|
+
<AntFormGroupLabel>Week Number Styling (Presets)</AntFormGroupLabel>
|
|
113
|
+
|
|
114
|
+
<AntFormGroup class="grid grid-cols-4 gap-10">
|
|
115
|
+
<div class="flex flex-col w-64 gap-2">
|
|
116
|
+
<span class="text-sm font-medium text-for-white-bg-font">1. Default (Base 200)</span>
|
|
117
|
+
<AntCalendar
|
|
118
|
+
v-model="value"
|
|
119
|
+
:show-week-numbers="true"
|
|
120
|
+
/>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="flex flex-col w-64 gap-2">
|
|
124
|
+
<span class="text-sm font-medium text-for-white-bg-font">2. Primary 900</span>
|
|
125
|
+
<AntCalendar
|
|
126
|
+
v-model="value"
|
|
127
|
+
:show-week-numbers="true"
|
|
128
|
+
week-number-text-color="primary-900-font"
|
|
129
|
+
week-number-background-color="primary-900"
|
|
130
|
+
/>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="flex flex-col w-64 gap-2">
|
|
134
|
+
<span class="text-sm font-medium text-for-white-bg-font">3. Info 100</span>
|
|
135
|
+
<AntCalendar
|
|
136
|
+
v-model="value"
|
|
137
|
+
:show-week-numbers="true"
|
|
138
|
+
week-number-text-color="info-100-font"
|
|
139
|
+
week-number-background-color="info-100"
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div class="flex flex-col w-64 gap-2">
|
|
144
|
+
<span class="text-sm font-medium text-for-white-bg-font">4. Success 500</span>
|
|
145
|
+
<AntCalendar
|
|
146
|
+
v-model="value"
|
|
147
|
+
:show-week-numbers="true"
|
|
148
|
+
week-number-text-color="success-500-font"
|
|
149
|
+
week-number-background-color="success-500"
|
|
150
|
+
/>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
</AntFormGroup>
|
|
154
|
+
</AntFormGroup>
|
|
155
|
+
`
|
|
156
|
+
})
|
|
157
|
+
};
|
|
69
158
|
export const Summary = {
|
|
70
159
|
parameters: {
|
|
71
160
|
chromatic: {
|