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