@antify/ui 3.2.3 → 3.3.1

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 (7) hide show
  1. package/dist/components/AntButton.vue +1 -0
  2. package/dist/components/calendar/AntDatePicker.vue +35 -15
  3. package/dist/components/calendar/AntDateSwitcher.vue +5 -0
  4. package/dist/components/calendar/__stories/AntDatePicker.stories.js +1 -1
  5. package/dist/components/calendar/__stories/AntDatePicker.stories.mjs +1 -1
  6. package/dist/index.css +1 -1
  7. package/package.json +1 -1
package/dist/components/AntButton.vue CHANGED
@@ -230,6 +230,7 @@ onMounted(() => {
230
230
  <AntSkeleton
231
231
  :visible="skeleton"
232
232
  :grouped="grouped"
233
+ :class="{'w-full': props.expanded}"
233
234
  rounded
234
235
  >
235
236
  <div
package/dist/components/calendar/AntDatePicker.vue CHANGED
@@ -6,11 +6,14 @@ import {
6
6
  subDays,
7
7
  } from 'date-fns';
8
8
  import {
9
+ ref,
10
+ watch,
9
11
  computed,
10
- defineEmits, ref, watch,
12
+ defineEmits,
11
13
  } from 'vue';
12
14
  import AntDateSwitcher from './AntDateSwitcher.vue';
13
15
  import AntButton from '../AntButton.vue';
16
+ import AntSkeleton from '../AntSkeleton.vue';
14
17
 
15
18
  const props = withDefaults(defineProps<{
16
19
  /**
@@ -20,11 +23,13 @@ const props = withDefaults(defineProps<{
20
23
  modelValue: number;
21
24
  showWeekend?: boolean;
22
25
  showTodayButton?: boolean;
26
+ skeleton?: boolean;
23
27
  }>(), {
24
28
  showWeekend: false,
25
29
  showTodayButton: true,
30
+ skeleton: false,
26
31
  });
27
- const emit = defineEmits([
32
+ defineEmits([
28
33
  'select',
29
34
  'update:modelValue',
30
35
  ]);
@@ -109,6 +114,7 @@ watch(() => props.modelValue, (val) => {
109
114
  <AntDateSwitcher
110
115
  v-model:month="currentMonthIndex"
111
116
  v-model:year="currentYear"
117
+ :skeleton="skeleton"
112
118
  />
113
119
 
114
120
  <div
@@ -123,28 +129,41 @@ watch(() => props.modelValue, (val) => {
123
129
  :key="day"
124
130
  class="text-for-white-bg-font text-center p-2"
125
131
  >
126
- {{ day }}
132
+ <AntSkeleton
133
+ :visible="skeleton"
134
+ rounded
135
+ >
136
+ {{ day }}
137
+ </AntSkeleton>
127
138
  </div>
128
139
 
129
140
  <template
130
141
  v-for="week in matrix"
131
142
  :key="week"
132
143
  >
133
- <div
144
+ <template
134
145
  v-for="day in week"
135
146
  :key="day.date"
136
- class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors"
137
- :class="{
138
- 'text-base-400': !day.isCurrentMonth,
139
- 'text-for-white-bg-font': day.isCurrentMonth,
140
- 'outline outline-primary-500': day.isToday,
141
- 'hover:bg-base-200 hover:text-base-200-font': day.date !== format(modelValue, 'yyyy-MM-dd'),
142
- 'bg-primary-500 text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
143
- }"
144
- @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
145
147
  >
146
- {{ day.label }}
147
- </div>
148
+ <AntSkeleton
149
+ :visible="skeleton"
150
+ rounded
151
+ >
152
+ <div
153
+ class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors"
154
+ :class="{
155
+ 'text-base-400': !day.isCurrentMonth,
156
+ 'text-for-white-bg-font': day.isCurrentMonth,
157
+ 'outline outline-primary-500': day.isToday,
158
+ 'hover:bg-base-200 hover:text-base-200-font': day.date !== format(modelValue, 'yyyy-MM-dd'),
159
+ 'bg-primary-500 text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
160
+ }"
161
+ @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
162
+ >
163
+ {{ day.label }}
164
+ </div>
165
+ </AntSkeleton>
166
+ </template>
148
167
  </template>
149
168
  </div>
150
169
 
@@ -153,6 +172,7 @@ watch(() => props.modelValue, (val) => {
153
172
  class="flex items-center justify-center p-2"
154
173
  >
155
174
  <AntButton
175
+ :skeleton="skeleton"
156
176
  @click="() => $emit('update:modelValue', Date.now())"
157
177
  >
158
178
  Heute
package/dist/components/calendar/AntDateSwitcher.vue CHANGED
@@ -21,6 +21,7 @@ const props = defineProps<{
21
21
  */
22
22
  month: number;
23
23
  year: number;
24
+ skeleton: boolean;
24
25
  }>();
25
26
  const emit = defineEmits([
26
27
  'update:month',
@@ -87,6 +88,7 @@ function onClickNext() {
87
88
  <AntButton
88
89
  :icon-left="faChevronLeft"
89
90
  :grouped="Grouped.left"
91
+ :skeleton="skeleton"
90
92
  @click="onClickPrevious"
91
93
  />
92
94
  <AntDropdown
@@ -96,6 +98,7 @@ function onClickNext() {
96
98
  >
97
99
  <AntButton
98
100
  :grouped="Grouped.center"
101
+ :skeleton="skeleton"
99
102
  expanded
100
103
  @click="showMonthDropdown = !showMonthDropdown"
101
104
  >
@@ -119,6 +122,7 @@ function onClickNext() {
119
122
  >
120
123
  <AntButton
121
124
  :grouped="Grouped.center"
125
+ :skeleton="skeleton"
122
126
  expanded
123
127
  @click="showYearDropdown = !showYearDropdown"
124
128
  >
@@ -141,6 +145,7 @@ function onClickNext() {
141
145
  <AntButton
142
146
  :icon-left="faChevronRight"
143
147
  :grouped="Grouped.right"
148
+ :skeleton="skeleton"
144
149
  @click="onClickNext"
145
150
  />
146
151
  </div>
package/dist/components/calendar/__stories/AntDatePicker.stories.js CHANGED
@@ -9,7 +9,7 @@ var _AntDateSwitcher = _interopRequireDefault(require("../AntDateSwitcher.vue"))
9
9
  var _vue = require("vue");
10
10
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
11
  const meta = {
12
- title: "Components/DatePicker",
12
+ title: "Components/Date Picker",
13
13
  component: _AntDatePicker.default,
14
14
  parameters: {
15
15
  controls: {
package/dist/components/calendar/__stories/AntDatePicker.stories.mjs CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  ref
5
5
  } from "vue";
6
6
  const meta = {
7
- title: "Components/DatePicker",
7
+ title: "Components/Date Picker",
8
8
  component: AntCalendar,
9
9
  parameters: {
10
10
  controls: {
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @import "tailwindcss";@theme inline{--color-base-50:var(--color-slate-50);--color-base-100:var(--color-slate-100);--color-base-200:var(--color-slate-200);--color-base-300:var(--color-slate-300);--color-base-400:var(--color-slate-400);--color-base-500:var(--color-slate-500);--color-base-600:var(--color-slate-600);--color-base-700:var(--color-slate-700);--color-base-800:var(--color-slate-800);--color-base-900:var(--color-slate-900);--color-base-950:var(--color-slate-950);--color-primary-50:var(--color-sky-50);--color-primary-100:var(--color-sky-100);--color-primary-200:var(--color-sky-200);--color-primary-300:var(--color-sky-300);--color-primary-400:var(--color-sky-400);--color-primary-500:var(--color-sky-500);--color-primary-600:var(--color-sky-600);--color-primary-700:var(--color-sky-700);--color-primary-800:var(--color-sky-800);--color-primary-900:var(--color-sky-900);--color-primary-950:var(--color-sky-950);--color-secondary-50:var(--color-lime-50);--color-secondary-100:var(--color-lime-100);--color-secondary-200:var(--color-lime-200);--color-secondary-300:var(--color-lime-300);--color-secondary-400:var(--color-lime-400);--color-secondary-500:var(--color-lime-500);--color-secondary-600:var(--color-lime-600);--color-secondary-700:var(--color-lime-700);--color-secondary-800:var(--color-lime-800);--color-secondary-900:var(--color-lime-900);--color-secondary-950:var(--color-lime-950);--color-info-50:var(--color-blue-50);--color-info-100:var(--color-blue-100);--color-info-200:var(--color-blue-200);--color-info-300:var(--color-blue-300);--color-info-400:var(--color-blue-400);--color-info-500:var(--color-blue-500);--color-info-600:var(--color-blue-600);--color-info-700:var(--color-blue-700);--color-info-800:var(--color-blue-800);--color-info-900:var(--color-blue-900);--color-info-950:var(--color-blue-950);--color-success-50:var(--color-green-50);--color-success-100:var(--color-green-100);--color-success-200:var(--color-green-200);--color-success-300:var(--color-green-300);--color-success-400:var(--color-green-400);--color-success-500:var(--color-green-500);--color-success-600:var(--color-green-600);--color-success-700:var(--color-green-700);--color-success-800:var(--color-green-800);--color-success-900:var(--color-green-900);--color-success-950:var(--color-green-950);--color-warning-50:var(--color-yellow-50);--color-warning-100:var(--color-yellow-100);--color-warning-200:var(--color-yellow-200);--color-warning-300:var(--color-yellow-300);--color-warning-400:var(--color-yellow-400);--color-warning-500:var(--color-yellow-500);--color-warning-600:var(--color-yellow-600);--color-warning-700:var(--color-yellow-700);--color-warning-800:var(--color-yellow-800);--color-warning-900:var(--color-yellow-900);--color-warning-950:var(--color-yellow-950);--color-danger-50:var(--color-red-50);--color-danger-100:var(--color-red-100);--color-danger-200:var(--color-red-200);--color-danger-300:var(--color-red-300);--color-danger-400:var(--color-red-400);--color-danger-500:var(--color-red-500);--color-danger-600:var(--color-red-600);--color-danger-700:var(--color-red-700);--color-danger-800:var(--color-red-800);--color-danger-900:var(--color-red-900);--color-danger-950:var(--color-red-950);--color-for-white-bg-font:var(--color-base-600);--color-for-black-bg-font:var(--color-base-100);--color-base-50-font:var(--color-base-600);--color-base-100-font:var(--color-base-600);--color-base-200-font:var(--color-base-600);--color-base-300-font:var(--color-base-600);--color-base-400-font:var(--color-base-600);--color-base-500-font:var(--color-base-100);--color-base-600-font:var(--color-base-100);--color-base-700-font:var(--color-base-100);--color-base-800-font:var(--color-base-100);--color-base-900-font:var(--color-base-100);--color-base-950-font:var(--color-base-100);--color-primary-50-font:var(--color-base-600);--color-primary-100-font:var(--color-base-600);--color-primary-200-font:var(--color-base-600);--color-primary-300-font:var(--color-base-600);--color-primary-400-font:var(--color-base-600);--color-primary-500-font:var(--color-base-100);--color-primary-600-font:var(--color-base-100);--color-primary-700-font:var(--color-base-100);--color-primary-800-font:var(--color-base-100);--color-primary-900-font:var(--color-base-100);--color-primary-950-font:var(--color-base-100);--color-secondary-50-font:var(--color-base-600);--color-secondary-100-font:var(--color-base-600);--color-secondary-200-font:var(--color-base-600);--color-secondary-300-font:var(--color-base-600);--color-secondary-400-font:var(--color-base-600);--color-secondary-500-font:var(--color-base-100);--color-secondary-600-font:var(--color-base-100);--color-secondary-700-font:var(--color-base-100);--color-secondary-800-font:var(--color-base-100);--color-secondary-900-font:var(--color-base-100);--color-secondary-950-font:var(--color-base-100);--color-success-50-font:var(--color-base-600);--color-success-100-font:var(--color-base-600);--color-success-200-font:var(--color-base-600);--color-success-300-font:var(--color-base-600);--color-success-400-font:var(--color-base-600);--color-success-500-font:var(--color-base-100);--color-success-600-font:var(--color-base-100);--color-success-700-font:var(--color-base-100);--color-success-800-font:var(--color-base-100);--color-success-900-font:var(--color-base-100);--color-success-950-font:var(--color-base-100);--color-info-50-font:var(--color-base-600);--color-info-100-font:var(--color-base-600);--color-info-200-font:var(--color-base-600);--color-info-300-font:var(--color-base-600);--color-info-400-font:var(--color-base-600);--color-info-500-font:var(--color-base-100);--color-info-600-font:var(--color-base-100);--color-info-700-font:var(--color-base-100);--color-info-800-font:var(--color-base-100);--color-info-900-font:var(--color-base-100);--color-info-950-font:var(--color-base-100);--color-warning-50-font:var(--color-base-600);--color-warning-100-font:var(--color-base-600);--color-warning-200-font:var(--color-base-600);--color-warning-300-font:var(--color-base-600);--color-warning-400-font:var(--color-base-600);--color-warning-500-font:var(--color-base-100);--color-warning-600-font:var(--color-base-100);--color-warning-700-font:var(--color-base-100);--color-warning-800-font:var(--color-base-100);--color-warning-900-font:var(--color-base-100);--color-warning-950-font:var(--color-base-100);--color-danger-50-font:var(--color-base-600);--color-danger-100-font:var(--color-base-600);--color-danger-200-font:var(--color-base-600);--color-danger-300-font:var(--color-base-600);--color-danger-400-font:var(--color-base-600);--color-danger-500-font:var(--color-base-100);--color-danger-600-font:var(--color-base-100);--color-danger-700-font:var(--color-base-100);--color-danger-800-font:var(--color-base-100);--color-danger-900-font:var(--color-base-100);--color-danger-950-font:var(--color-base-100);--text-2xs:0.625rem;--text-2xs--line-height:0.75rem;--animate-skeleton:skeleton 2s ease-out infinite;@keyframes skeleton{0%,to{background-color:var(--color-base-300)}50%{background-color:var(--color-base-100)}}}::-webkit-scrollbar{@apply w-3 h-3 bg-transparent}::-webkit-scrollbar-track{@apply bg-transparent}::-webkit-scrollbar-corner{@apply bg-transparent}::-webkit-scrollbar-thumb{@apply bg-base-200 rounded-full border-3 border-transparent cursor-pointer bg-clip-content}::-webkit-scrollbar-thumb:hover{@apply bg-base-300 border-l-1 border-t-1}
1
+ @import "tailwindcss";@theme inline{--color-base-50:var(--color-slate-50);--color-base-100:var(--color-slate-100);--color-base-200:var(--color-slate-200);--color-base-300:var(--color-slate-300);--color-base-400:var(--color-slate-400);--color-base-500:var(--color-slate-500);--color-base-600:var(--color-slate-600);--color-base-700:var(--color-slate-700);--color-base-800:var(--color-slate-800);--color-base-900:var(--color-slate-900);--color-base-950:var(--color-slate-950);--color-primary-50:var(--color-sky-50);--color-primary-100:var(--color-sky-100);--color-primary-200:var(--color-sky-200);--color-primary-300:var(--color-sky-300);--color-primary-400:var(--color-sky-400);--color-primary-500:var(--color-sky-500);--color-primary-600:var(--color-sky-600);--color-primary-700:var(--color-sky-700);--color-primary-800:var(--color-sky-800);--color-primary-900:var(--color-sky-900);--color-primary-950:var(--color-sky-950);--color-secondary-50:var(--color-lime-50);--color-secondary-100:var(--color-lime-100);--color-secondary-200:var(--color-lime-200);--color-secondary-300:var(--color-lime-300);--color-secondary-400:var(--color-lime-400);--color-secondary-500:var(--color-lime-500);--color-secondary-600:var(--color-lime-600);--color-secondary-700:var(--color-lime-700);--color-secondary-800:var(--color-lime-800);--color-secondary-900:var(--color-lime-900);--color-secondary-950:var(--color-lime-950);--color-info-50:var(--color-blue-50);--color-info-100:var(--color-blue-100);--color-info-200:var(--color-blue-200);--color-info-300:var(--color-blue-300);--color-info-400:var(--color-blue-400);--color-info-500:var(--color-blue-500);--color-info-600:var(--color-blue-600);--color-info-700:var(--color-blue-700);--color-info-800:var(--color-blue-800);--color-info-900:var(--color-blue-900);--color-info-950:var(--color-blue-950);--color-success-50:var(--color-green-50);--color-success-100:var(--color-green-100);--color-success-200:var(--color-green-200);--color-success-300:var(--color-green-300);--color-success-400:var(--color-green-400);--color-success-500:var(--color-green-500);--color-success-600:var(--color-green-600);--color-success-700:var(--color-green-700);--color-success-800:var(--color-green-800);--color-success-900:var(--color-green-900);--color-success-950:var(--color-green-950);--color-warning-50:var(--color-yellow-50);--color-warning-100:var(--color-yellow-100);--color-warning-200:var(--color-yellow-200);--color-warning-300:var(--color-yellow-300);--color-warning-400:var(--color-yellow-400);--color-warning-500:var(--color-yellow-500);--color-warning-600:var(--color-yellow-600);--color-warning-700:var(--color-yellow-700);--color-warning-800:var(--color-yellow-800);--color-warning-900:var(--color-yellow-900);--color-warning-950:var(--color-yellow-950);--color-danger-50:var(--color-red-50);--color-danger-100:var(--color-red-100);--color-danger-200:var(--color-red-200);--color-danger-300:var(--color-red-300);--color-danger-400:var(--color-red-400);--color-danger-500:var(--color-red-500);--color-danger-600:var(--color-red-600);--color-danger-700:var(--color-red-700);--color-danger-800:var(--color-red-800);--color-danger-900:var(--color-red-900);--color-danger-950:var(--color-red-950);--color-for-white-bg-font:var(--color-base-600);--color-for-black-bg-font:var(--color-base-100);--color-base-50-font:var(--color-base-600);--color-base-100-font:var(--color-base-600);--color-base-200-font:var(--color-base-600);--color-base-300-font:var(--color-base-600);--color-base-400-font:var(--color-base-600);--color-base-500-font:var(--color-base-100);--color-base-600-font:var(--color-base-100);--color-base-700-font:var(--color-base-100);--color-base-800-font:var(--color-base-100);--color-base-900-font:var(--color-base-100);--color-base-950-font:var(--color-base-100);--color-primary-50-font:var(--color-base-600);--color-primary-100-font:var(--color-base-600);--color-primary-200-font:var(--color-base-600);--color-primary-300-font:var(--color-base-600);--color-primary-400-font:var(--color-base-600);--color-primary-500-font:var(--color-base-100);--color-primary-600-font:var(--color-base-100);--color-primary-700-font:var(--color-base-100);--color-primary-800-font:var(--color-base-100);--color-primary-900-font:var(--color-base-100);--color-primary-950-font:var(--color-base-100);--color-secondary-50-font:var(--color-base-600);--color-secondary-100-font:var(--color-base-600);--color-secondary-200-font:var(--color-base-600);--color-secondary-300-font:var(--color-base-600);--color-secondary-400-font:var(--color-base-600);--color-secondary-500-font:var(--color-base-100);--color-secondary-600-font:var(--color-base-100);--color-secondary-700-font:var(--color-base-100);--color-secondary-800-font:var(--color-base-100);--color-secondary-900-font:var(--color-base-100);--color-secondary-950-font:var(--color-base-100);--color-success-50-font:var(--color-base-600);--color-success-100-font:var(--color-base-600);--color-success-200-font:var(--color-base-600);--color-success-300-font:var(--color-base-600);--color-success-400-font:var(--color-base-600);--color-success-500-font:var(--color-base-100);--color-success-600-font:var(--color-base-100);--color-success-700-font:var(--color-base-100);--color-success-800-font:var(--color-base-100);--color-success-900-font:var(--color-base-100);--color-success-950-font:var(--color-base-100);--color-info-50-font:var(--color-base-600);--color-info-100-font:var(--color-base-600);--color-info-200-font:var(--color-base-600);--color-info-300-font:var(--color-base-600);--color-info-400-font:var(--color-base-600);--color-info-500-font:var(--color-base-100);--color-info-600-font:var(--color-base-100);--color-info-700-font:var(--color-base-100);--color-info-800-font:var(--color-base-100);--color-info-900-font:var(--color-base-100);--color-info-950-font:var(--color-base-100);--color-warning-50-font:var(--color-base-600);--color-warning-100-font:var(--color-base-600);--color-warning-200-font:var(--color-base-600);--color-warning-300-font:var(--color-base-600);--color-warning-400-font:var(--color-base-600);--color-warning-500-font:var(--color-base-100);--color-warning-600-font:var(--color-base-100);--color-warning-700-font:var(--color-base-100);--color-warning-800-font:var(--color-base-100);--color-warning-900-font:var(--color-base-100);--color-warning-950-font:var(--color-base-100);--color-danger-50-font:var(--color-base-600);--color-danger-100-font:var(--color-base-600);--color-danger-200-font:var(--color-base-600);--color-danger-300-font:var(--color-base-600);--color-danger-400-font:var(--color-base-600);--color-danger-500-font:var(--color-base-100);--color-danger-600-font:var(--color-base-100);--color-danger-700-font:var(--color-base-100);--color-danger-800-font:var(--color-base-100);--color-danger-900-font:var(--color-base-100);--color-danger-950-font:var(--color-base-100);--text-2xs:0.625rem;--text-2xs--line-height:0.75rem;--animate-skeleton:skeleton 2s ease-out infinite;@keyframes skeleton{0%,to{background-color:var(--color-base-300)}50%{background-color:var(--color-base-100)}}}::-webkit-scrollbar{@apply w-3 h-3 bg-base-100}::-webkit-scrollbar-track{@apply bg-base-100}::-webkit-scrollbar-corner{@apply bg-base-100}::-webkit-scrollbar-thumb{@apply bg-base-300 rounded-full border-3 border-transparent cursor-pointer bg-clip-content}::-webkit-scrollbar-thumb:hover{@apply bg-base-400}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antify/ui",
3
- "version": "3.2.3",
3
+ "version": "3.3.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "exports": {