@antify/ui 4.1.9 → 4.1.11

package/dist/components/calendar/AntDatePicker.vue

@@ -170,7 +170,7 @@ onMounted(() => {
       <div
         v-for="day in weekDays"
         :key="day"
-        class="text-for-white-bg-font text-center p-2"
+        class="text-for-white-bg-font p-2 text-center"
       >
         <AntSkeleton
           :visible="skeleton"
@@ -194,11 +194,12 @@ onMounted(() => {
           >
             <AntTooltip :delay="300">
               <div
-                class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors grow"
+                class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors w-full h-full"
                 :class="{
                   'text-base-400': !day.isCurrentMonth,
                   'text-for-white-bg-font': day.isCurrentMonth,
                   'outline outline-primary-500': day.isToday,
+                  'bg-primary-100': day.isWeekend,
                   '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'),
                 }"
@@ -233,8 +234,8 @@ onMounted(() => {
     >
       <AntButton
         :skeleton="skeleton"
-        @click="() => $emit('update:modelValue', Date.now())"
         data-e2e="today-button"
+        @click="() => $emit('update:modelValue', Date.now())"
       >
         Heute
       </AntButton>

package/dist/components/inputs/AntTextInput.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import {
-  onMounted,
+  onMounted, computed,
 } from 'vue';
 import AntField from '../forms/AntField.vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
+import AntButton from '../AntButton.vue';
+import AntIcon from '../AntIcon.vue';
 import {
   Size,
 } from '../../enums/Size.enum';
@@ -17,11 +19,14 @@ import {
   useVModel,
 } from '@vueuse/core';
 import {
-  InputState,
+  InputState, Grouped, State,
 } from '../../enums';
 import {
   BaseInputType,
 } from './Elements/__types';
+import {
+  faMultiply,
+} from '@fortawesome/free-solid-svg-icons';
 
 defineOptions({
   inheritAttrs: false,
@@ -48,6 +53,7 @@ const props = withDefaults(defineProps<{
   limiter?: boolean;
   max?: number;
   messages?: string[];
+  nullable?: boolean;
 }>(), {
   state: InputState.base,
   inputRef: null,
@@ -58,10 +64,12 @@ const props = withDefaults(defineProps<{
   type: TextInputType.text,
   limiter: false,
   messages: () => [],
+  nullable: false,
 });
 
 const _value = useVModel(props, 'modelValue', emit);
 const _inputRef = useVModel(props, 'inputRef', emit);
+const _nullable = computed(() => props.nullable && _value.value);
 
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
@@ -82,20 +90,33 @@ onMounted(() => {
     :messages="messages"
     data-e2e="text-input"
   >
-    <AntBaseInput
-      v-model="_value"
-      v-model:input-ref="_inputRef"
-      :type="type as unknown as BaseInputType"
-      wrapper-class="grow"
-      :state="state"
-      :size="size"
-      :skeleton="skeleton"
-      :disabled="disabled"
-      :readonly="readonly"
-      :placeholder="placeholder !== undefined ? placeholder : label"
-      :show-icon="true"
-      v-bind="$attrs"
-      @validate="val => $emit('validate', val)"
-    />
+    <div class="flex">
+      <AntBaseInput
+        v-model="_value"
+        v-model:input-ref="_inputRef"
+        :type="type as unknown as BaseInputType"
+        wrapper-class="grow"
+        :state="state"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="disabled"
+        :readonly="readonly"
+        :placeholder="placeholder !== undefined ? placeholder : label"
+        :show-icon="true"
+        v-bind="$attrs"
+        @validate="val => $emit('validate', val)"
+        :grouped="_nullable ? Grouped.left : Grouped.none"
+      />
+      <AntButton
+        v-if="_nullable"
+        :disabled="disabled"
+        :icon-left="faMultiply"
+        :grouped="Grouped.right"
+        :state="state as unknown as State"
+        :skeleton="skeleton"
+        :size="size"
+        @click="_value = null" data-e2e="clear-button"
+      />
+    </div>
   </AntField>
 </template>

package/package.json

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