@antify/ui 3.2.3 → 3.3.0

package/dist/components/AntButton.vue

@@ -230,6 +230,7 @@ onMounted(() => {
   <AntSkeleton
     :visible="skeleton"
     :grouped="grouped"
+    :class="{'w-full': props.expanded}"
     rounded
   >
     <div

package/dist/components/calendar/AntDatePicker.vue

@@ -6,11 +6,14 @@ import {
   subDays,
 } from 'date-fns';
 import {
+  ref,
+  watch,
   computed,
-  defineEmits, ref, watch,
+  defineEmits,
 } from 'vue';
 import AntDateSwitcher from './AntDateSwitcher.vue';
 import AntButton from '../AntButton.vue';
+import AntSkeleton from '../AntSkeleton.vue';
 
 const props = withDefaults(defineProps<{
   /**
@@ -20,11 +23,13 @@ const props = withDefaults(defineProps<{
   modelValue: number;
   showWeekend?: boolean;
   showTodayButton?: boolean;
+  skeleton?: boolean;
 }>(), {
   showWeekend: false,
   showTodayButton: true,
+  skeleton: false,
 });
-const emit = defineEmits([
+defineEmits([
   'select',
   'update:modelValue',
 ]);
@@ -109,6 +114,7 @@ watch(() => props.modelValue, (val) => {
     <AntDateSwitcher
       v-model:month="currentMonthIndex"
       v-model:year="currentYear"
+      :skeleton="skeleton"
     />
 
     <div
@@ -123,28 +129,41 @@ watch(() => props.modelValue, (val) => {
         :key="day"
         class="text-for-white-bg-font text-center p-2"
       >
-        {{ day }}
+        <AntSkeleton
+          :visible="skeleton"
+          rounded
+        >
+          {{ day }}
+        </AntSkeleton>
       </div>
 
       <template
         v-for="week in matrix"
         :key="week"
       >
-        <div
+        <template
           v-for="day in week"
           :key="day.date"
-          class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors"
-          :class="{
-            'text-base-400': !day.isCurrentMonth,
-            'text-for-white-bg-font': day.isCurrentMonth,
-            'outline outline-primary-500': day.isToday,
-            'hover:bg-base-200 hover:text-base-200-font': day.date !== format(modelValue, 'yyyy-MM-dd'),
-            'bg-primary-500 text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
-          }"
-          @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
         >
-          {{ day.label }}
-        </div>
+          <AntSkeleton
+            :visible="skeleton"
+            rounded
+          >
+            <div
+              class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors"
+              :class="{
+                'text-base-400': !day.isCurrentMonth,
+                'text-for-white-bg-font': day.isCurrentMonth,
+                'outline outline-primary-500': day.isToday,
+                'hover:bg-base-200 hover:text-base-200-font': day.date !== format(modelValue, 'yyyy-MM-dd'),
+                'bg-primary-500 text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
+              }"
+              @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
+            >
+              {{ day.label }}
+            </div>
+          </AntSkeleton>
+        </template>
       </template>
     </div>
 
@@ -153,6 +172,7 @@ watch(() => props.modelValue, (val) => {
       class="flex items-center justify-center p-2"
     >
       <AntButton
+        :skeleton="skeleton"
         @click="() => $emit('update:modelValue', Date.now())"
       >
         Heute

package/dist/components/calendar/AntDateSwitcher.vue

@@ -21,6 +21,7 @@ const props = defineProps<{
    */
   month: number;
   year: number;
+  skeleton: boolean;
 }>();
 const emit = defineEmits([
   'update:month',
@@ -87,6 +88,7 @@ function onClickNext() {
     <AntButton
       :icon-left="faChevronLeft"
       :grouped="Grouped.left"
+      :skeleton="skeleton"
       @click="onClickPrevious"
     />
     <AntDropdown
@@ -96,6 +98,7 @@ function onClickNext() {
     >
       <AntButton
         :grouped="Grouped.center"
+        :skeleton="skeleton"
         expanded
         @click="showMonthDropdown = !showMonthDropdown"
       >
@@ -119,6 +122,7 @@ function onClickNext() {
     >
       <AntButton
         :grouped="Grouped.center"
+        :skeleton="skeleton"
         expanded
         @click="showYearDropdown = !showYearDropdown"
       >
@@ -141,6 +145,7 @@ function onClickNext() {
       <AntButton
         :icon-left="faChevronRight"
         :grouped="Grouped.right"
+        :skeleton="skeleton"
         @click="onClickNext"
       />
     </div>

package/dist/components/calendar/__stories/AntDatePicker.stories.js

@@ -9,7 +9,7 @@ var _AntDateSwitcher = _interopRequireDefault(require("../AntDateSwitcher.vue"))
 var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
-  title: "Components/DatePicker",
+  title: "Components/Date Picker",
   component: _AntDatePicker.default,
   parameters: {
     controls: {

package/dist/components/calendar/__stories/AntDatePicker.stories.mjs

@@ -4,7 +4,7 @@ import {
   ref
 } from "vue";
 const meta = {
-  title: "Components/DatePicker",
+  title: "Components/Date Picker",
   component: AntCalendar,
   parameters: {
     controls: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "private": false,
   "type": "module",
   "exports": {