@antify/ui 3.2.2 → 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/dist/components/index.d.ts

@@ -38,6 +38,7 @@ import AntAccordionItem from './AntAccordionItem.vue';
 import AntAlert from './AntAlert.vue';
 import AntCard from './AntCard.vue';
 import AntContent from './AntContent.vue';
+import AntDatePicker from './calendar/AntDatePicker.vue';
 import AntDropdown from './AntDropdown.vue';
 import AntIcon from './AntIcon.vue';
 import AntKeycap from './AntKeycap.vue';
@@ -52,4 +53,4 @@ import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
 import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export { AntButton, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, AntMultiSelect, };
+export { AntButton, AntDatePicker, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, AntMultiSelect, };

package/dist/components/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "AntDateInput", {
     return _AntDateInput.default;
   }
 });
+Object.defineProperty(exports, "AntDatePicker", {
+  enumerable: true,
+  get: function () {
+    return _AntDatePicker.default;
+  }
+});
 Object.defineProperty(exports, "AntDialog", {
   enumerable: true,
   get: function () {
@@ -367,6 +373,7 @@ var _AntAccordionItem = _interopRequireDefault(require("./AntAccordionItem.vue")
 var _AntAlert = _interopRequireDefault(require("./AntAlert.vue"));
 var _AntCard = _interopRequireDefault(require("./AntCard.vue"));
 var _AntContent = _interopRequireDefault(require("./AntContent.vue"));
+var _AntDatePicker = _interopRequireDefault(require("./calendar/AntDatePicker.vue"));
 var _AntDropdown = _interopRequireDefault(require("./AntDropdown.vue"));
 var _AntIcon = _interopRequireDefault(require("./AntIcon.vue"));
 var _AntKeycap = _interopRequireDefault(require("./AntKeycap.vue"));

package/dist/components/index.mjs

@@ -38,6 +38,7 @@ import AntAccordionItem from "./AntAccordionItem.vue";
 import AntAlert from "./AntAlert.vue";
 import AntCard from "./AntCard.vue";
 import AntContent from "./AntContent.vue";
+import AntDatePicker from "./calendar/AntDatePicker.vue";
 import AntDropdown from "./AntDropdown.vue";
 import AntIcon from "./AntIcon.vue";
 import AntKeycap from "./AntKeycap.vue";
@@ -54,6 +55,7 @@ import AntToaster from "./AntToaster.vue";
 import AntTooltip from "./AntTooltip.vue";
 export {
   AntButton,
+  AntDatePicker,
   AntDialog,
   AntField,
   AntFormGroup,

package/package.json

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