@antify/ui 1.0.4 → 1.2.0

package/dist/components/crud/AntCrud.vue

@@ -19,7 +19,7 @@ withDefaults(defineProps<{
         <slot name="search-section"/>
       </div>
 
-      <div class="bg-white flex-grow h-full overflow-hidden">
+      <div class="bg-white flex-grow h-px overflow-hidden">
         <slot name="table-section"/>
       </div>
 

package/dist/components/crud/AntCrudDetailActions.vue

@@ -28,6 +28,7 @@ withDefaults(defineProps<{
           :filled="false"
           :icon-left="faAngleLeft"
           :disabled="disabled"
+          :skeleton="skeleton"
           @click="$emit('back')"
         >
           Back

package/dist/components/crud/AntCrudTableFilter.vue

@@ -81,25 +81,27 @@ watch(() => props.fullWidth, (val) => {
         v-model:show-dropdown="showDropdown"
         :position="Position.left"
       >
-        <div class="flex">
-          <AntButton
-            :state="hasFilter ? State.info : State.base"
-            :grouped="hasFilter ? Grouped.left : Grouped.none"
-            :skeleton="skeleton"
-            :icon-left="faFilter"
-            @click="() => showDropdown = !showDropdown"
-          />
+        <template #reference>
+          <div class="flex">
+            <AntButton
+              :state="hasFilter ? State.info : State.base"
+              :grouped="hasFilter ? Grouped.left : Grouped.none"
+              :skeleton="skeleton"
+              :icon-left="faFilter"
+              @click="() => showDropdown = !showDropdown"
+            />
 
-          <AntButton
-            v-if="hasFilter"
-            :state="State.info"
-            :grouped="Grouped.right"
-            :skeleton="skeleton"
-            :icon-left="faMultiply"
-            filled
-            @click="$emit('removeFilter')"
-          />
-        </div>
+            <AntButton
+              v-if="hasFilter"
+              :state="State.info"
+              :grouped="Grouped.right"
+              :skeleton="skeleton"
+              :icon-left="faMultiply"
+              filled
+              @click="$emit('removeFilter')"
+            />
+          </div>
+        </template>
 
         <template #content>
           <slot name="dropdownContent"/>

package/dist/components/forms/AntField.vue

@@ -20,12 +20,14 @@ const props = withDefaults(defineProps<{
   limiterMaxValue?: number;
   labelFor?: string;
   expanded?: boolean;
+  expandedHeight?: boolean;
 }>(), {
   state: InputState.base,
   skeleton: false,
   size: Size.md,
   messages: () => [],
-  expanded: true
+  expanded: true,
+  expandedHeight: false,
 });
 
 onMounted(() => {
@@ -47,6 +49,8 @@ const fieldClasses = computed(() => ({
   'gap-2': props.size === Size.md,
   'gap-1.5': (props.size === Size.sm || props.size === Size.xs),
   'gap-1': props.size === Size.xs2,
+  'h-full': props.expandedHeight,
+  'h-fit': !props.expandedHeight,
 }));
 const descriptionClasses = computed(() => ({
   'gap-2.5': props.size === Size.lg,
@@ -66,9 +70,10 @@ const descriptionClasses = computed(() => ({
       :size="size"
       :skeleton="skeleton"
       :for="labelFor"
+      class="h-full"
       @click-content="$emit('clickLabel')"
     >
-      <div class="w-full">
+      <div class="w-full h-full">
         <slot/>
       </div>
     </AntInputLabel>

package/dist/components/forms/__stories/AntField.stories.js

@@ -9,7 +9,6 @@ var _AntBaseInput = _interopRequireDefault(require("../../inputs/Elements/AntBas
 var _Size = require("../../../enums/Size.enum");
 var _vue = require("vue");
 var _enums = require("../../../enums");
-var _validate = require("@antify/validate");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Forms/Field",
@@ -66,39 +65,24 @@ const Docs = exports.Docs = {
           args.size = val;
         }
       });
-      const state = (0, _vue.computed)({
-        get() {
-          return validator.hasErrors() ? _enums.InputState.danger : args.state;
-        },
-        set(val) {
-          args.state = val;
-        }
-      });
       const value = (0, _vue.ref)(null);
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, _validate.notBlankRule]));
       return {
         args,
         value,
-        validator,
         skeleton,
         size,
-        state,
         InputState: _enums.InputState
       };
     },
     template: `
       <AntField
         v-bind="args"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        :state="state"
       >
         <AntBaseInput
           v-model="value"
           :skeleton="skeleton"
           :size="size"
-          :state="state"
           placeholder="Placeholder"
-          @validate="(val) => validator.validate(val)"
         />
       </AntField>
     `

package/dist/components/forms/__stories/AntField.stories.mjs

@@ -1,9 +1,8 @@
 import AntField from "../AntField.vue";
 import AntBaseInput from "../../inputs/Elements/AntBaseInput.vue";
 import { Size } from "../../../enums/Size.enum.mjs";
-import { computed, reactive, ref } from "vue";
+import { computed, ref } from "vue";
 import { InputState } from "../../../enums/index.mjs";
-import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
 const meta = {
   title: "Forms/Field",
   component: AntField,
@@ -44,31 +43,18 @@ export const Docs = {
           args.size = val;
         }
       });
-      const state = computed({
-        get() {
-          return validator.hasErrors() ? InputState.danger : args.state;
-        },
-        set(val) {
-          args.state = val;
-        }
-      });
       const value = ref(null);
-      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, value, validator, skeleton, size, state, InputState };
+      return { args, value, skeleton, size, InputState };
     },
     template: `
       <AntField
         v-bind="args"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        :state="state"
       >
         <AntBaseInput
           v-model="value"
           :skeleton="skeleton"
           :size="size"
-          :state="state"
           placeholder="Placeholder"
-          @validate="(val) => validator.validate(val)"
         />
       </AntField>
     `

package/dist/components/index.d.ts

@@ -18,7 +18,7 @@ import AntField from './forms/AntField.vue';
 import AntFormGroup from './forms/AntFormGroup.vue';
 import AntFormGroupLabel from './forms/AntFormGroupLabel.vue';
 import AntBaseInput from './inputs/Elements/AntBaseInput.vue';
-import AntDropDown from './inputs/Elements/AntDropDown.vue';
+import AntSelectMenu from './inputs/Elements/AntSelectMenu.vue';
 import AntInputDescription from './inputs/Elements/AntInputDescription.vue';
 import AntInputLabel from './inputs/Elements/AntInputLabel.vue';
 import AntInputLimiter from './inputs/Elements/AntInputLimiter.vue';
@@ -63,4 +63,4 @@ import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
 import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export { AntActionButton, AntButton, AntCreateButton, AntDeleteButton, AntDuplicateButton, AntEditButton, AntSaveAndNewButton, AntSaveButton, AntCrud, AntCrudDetail, AntCrudDetailActions, AntCrudDetailNav, AntCrudTableFilter, AntCrudTableNav, AntDeleteDialog, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntDropDown, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, 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 };
+export { AntActionButton, AntButton, AntCreateButton, AntDeleteButton, AntDuplicateButton, AntEditButton, AntSaveAndNewButton, AntSaveButton, AntCrud, AntCrudDetail, AntCrudDetailActions, AntCrudDetailNav, AntCrudTableFilter, AntCrudTableNav, AntDeleteDialog, 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, 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 };

package/dist/components/index.js

@@ -129,12 +129,6 @@ Object.defineProperty(exports, "AntDialog", {
     return _AntDialog.default;
   }
 });
-Object.defineProperty(exports, "AntDropDown", {
-  enumerable: true,
-  get: function () {
-    return _AntDropDown.default;
-  }
-});
 Object.defineProperty(exports, "AntDropdown", {
   enumerable: true,
   get: function () {
@@ -303,6 +297,12 @@ Object.defineProperty(exports, "AntSelect", {
     return _AntSelect.default;
   }
 });
+Object.defineProperty(exports, "AntSelectMenu", {
+  enumerable: true,
+  get: function () {
+    return _AntSelectMenu.default;
+  }
+});
 Object.defineProperty(exports, "AntSkeleton", {
   enumerable: true,
   get: function () {
@@ -413,7 +413,7 @@ var _AntField = _interopRequireDefault(require("./forms/AntField.vue"));
 var _AntFormGroup = _interopRequireDefault(require("./forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("./forms/AntFormGroupLabel.vue"));
 var _AntBaseInput = _interopRequireDefault(require("./inputs/Elements/AntBaseInput.vue"));
-var _AntDropDown = _interopRequireDefault(require("./inputs/Elements/AntDropDown.vue"));
+var _AntSelectMenu = _interopRequireDefault(require("./inputs/Elements/AntSelectMenu.vue"));
 var _AntInputDescription = _interopRequireDefault(require("./inputs/Elements/AntInputDescription.vue"));
 var _AntInputLabel = _interopRequireDefault(require("./inputs/Elements/AntInputLabel.vue"));
 var _AntInputLimiter = _interopRequireDefault(require("./inputs/Elements/AntInputLimiter.vue"));

package/dist/components/index.mjs

@@ -18,7 +18,7 @@ import AntField from "./forms/AntField.vue";
 import AntFormGroup from "./forms/AntFormGroup.vue";
 import AntFormGroupLabel from "./forms/AntFormGroupLabel.vue";
 import AntBaseInput from "./inputs/Elements/AntBaseInput.vue";
-import AntDropDown from "./inputs/Elements/AntDropDown.vue";
+import AntSelectMenu from "./inputs/Elements/AntSelectMenu.vue";
 import AntInputDescription from "./inputs/Elements/AntInputDescription.vue";
 import AntInputLabel from "./inputs/Elements/AntInputLabel.vue";
 import AntInputLimiter from "./inputs/Elements/AntInputLimiter.vue";
@@ -84,7 +84,7 @@ export {
   AntFormGroup,
   AntFormGroupLabel,
   AntBaseInput,
-  AntDropDown,
+  AntSelectMenu,
   AntInputDescription,
   AntInputLabel,
   AntInputLimiter,

package/dist/components/inputs/AntCheckbox.vue

@@ -86,6 +86,20 @@ const itemSize = computed(() => {
     return IconSize.sm;
   }
 });
+const iconColor = computed(() => {
+  switch (props.state) {
+    case InputState.base:
+      return 'text-primary-500-font';
+    case InputState.info:
+      return 'text-info-500-font';
+    case InputState.success:
+      return 'text-success-500-font'
+    case InputState.warning:
+      return 'text-warning-500-font';
+    default:
+      return 'text-danger-500-font';
+  }
+})
 
 /**
  * Delay value to change the checkboxes background color after
@@ -145,12 +159,17 @@ onMounted(() => {
           @blur="onBlur"
         />
 
-        <AntIcon
-          v-if="_modelValue"
-          :icon="faCheck"
-          class="absolute !text-white pointer-events-none"
-          :size="itemSize"
-        />
+        <div
+          class="absolute flex items-center justify-center !text-white pointer-events-none"
+          :class="size === Size.lg || size === Size.md || size === Size.sm ? 'h-5 w-5' : 'h-4 w-4'"
+        >
+          <AntIcon
+            v-if="_modelValue"
+            :icon="faCheck"
+            :size="itemSize"
+            :color="iconColor"
+          />
+        </div>
 
         <AntSkeleton
           v-if="skeleton"

package/dist/components/inputs/AntDateInput.vue

@@ -95,7 +95,7 @@ function onClickCalendar() {
           :icon="_icon"
           :color="iconColor"
           :size="iconSize"
-          class="cursor-pointer"
+          :class="{'cursor-pointer': !disabled, 'opacity-50': disabled}"
           @click="onClickCalendar"
         />
       </template>

package/dist/components/inputs/AntRadio.vue

@@ -72,9 +72,9 @@ const inputClasses = computed(() => {
 const valueClass = computed(() => ({
   'relative w-fit full-height text-for-white-bg-font': true,
   'cursor-pointer': !hasInputState.value,
-  'cursor-not-allowed opacity-50': props.disabled,
   'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
   'text-xs': props.size === Size.xs || props.size === Size.xs2,
+  'cursor-not-allowed opacity-50': props.disabled,
 }));
 const gapSize = computed(() => {
   switch (props.size) {
@@ -106,6 +106,7 @@ const innerRadioClass = computed(() => (
     'bg-danger-500': props.state === InputState.danger,
     'h-3 w-3': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
     'h-2 w-2': props.size === Size.xs || props.size === Size.xs2,
+    'cursor-not-allowed opacity-50': props.disabled,
   }
 ));
 

package/dist/components/inputs/AntSelect.vue

@@ -25,7 +25,7 @@ import {vOnClickOutside} from '@vueuse/components';
 import AntButton from '../buttons/AntButton.vue';
 import {State, InputState} from '../../enums';
 import {IconSize} from '../__types';
-import AntDropDown from './Elements/AntDropDown.vue';
+import AntSelectMenu from './Elements/AntSelectMenu.vue';
 
 defineOptions({inheritAttrs: false});
 
@@ -100,9 +100,6 @@ const inputClasses = computed(() => {
     'rounded-none': props.grouped === Grouped.center,
     'rounded-md': props.grouped === Grouped.none,
     'rounded-tr-none rounded-br-none': props.nullable && _modelValue.value !== null,
-    'rounded-bl-none rounded-br-none': isOpen.value,
-    // Open
-    'shadow-md': isOpen.value,
     // Disabled
     'opacity-50 cursor-not-allowed': props.disabled,
   };
@@ -143,6 +140,13 @@ const skeletonGrouped = computed(() => {
     return Grouped.left;
   }
 });
+const iconSize = computed(() => {
+  if (props.size === Size.lg || props.size === Size.md || props.size === Size.sm) {
+    return IconSize.sm;
+  }
+
+  return IconSize.xs;
+})
 const inputRef = ref<HTMLElement | null>(null);
 const dropDownRef = ref<HTMLElement | null>(null);
 const focusedDropDownItem = ref<string | number | null>(null);
@@ -244,14 +248,26 @@ function onClickRemoveButton() {
           :name="name"
         >
 
+        <!-- Dropdown -->
+        <AntSelectMenu
+          ref="dropDownRef"
+          v-model="_modelValue"
+          v-model:open="isOpen"
+          v-model:focused="dropDownFocused"
+          :options="options"
+          :size="size"
+          :state="state"
+          :close-on-enter="true"
+          @select-element="(e) => _modelValue = e"
+        >
         <!-- Input -->
         <div
-          ref="inputRef"
           :class="inputClasses"
+          ref="inputRef"
           :tabindex="disabled || readonly ? -1 : 0"
           v-bind="$attrs"
           @mousedown="onClickSelectInput"
-          @click="inputRef?.focus()"
+          @click="() => inputRef?.focus()"
           @blur="onBlur"
         >
           <div
@@ -278,31 +294,18 @@ function onClickRemoveButton() {
           <AntIcon
             v-if="isOpen"
             :icon="faChevronUp"
-            :size="IconSize.sm"
+            :size="iconSize"
             :class="arrowClasses"
           />
 
           <AntIcon
             v-else
             :icon="faChevronDown"
-            :size="IconSize.sm"
+            :size="iconSize"
             :class="arrowClasses"
           />
         </div>
-
-        <!-- Dropdown -->
-        <AntDropDown
-          ref="dropDownRef"
-          v-model="_modelValue"
-          v-model:open="isOpen"
-          v-model:focused="dropDownFocused"
-          :options="options"
-          :input-ref="inputRef"
-          :size="size"
-          :state="state"
-          :close-on-enter="true"
-          @select-element="(e) => _modelValue = e"
-        />
+        </AntSelectMenu>
       </div>
 
       <AntButton

package/dist/components/inputs/AntSwitch.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AntField from '../forms/AntField.vue';
-import {computed, onMounted, watch} from 'vue';
+import {computed, watch} from 'vue';
 import AntSkeleton from '../AntSkeleton.vue';
 import {InputState, Size} from '../../enums';
 import {hasSlotContent} from '../../utils';
@@ -111,12 +111,7 @@ watch(() => props.skeleton, (val) => {
   }
 });
 watch(_value, () => {
-  if (props.messages.length > 0) {
-    emit('validate', props.modelValue);
-  }
-});
-onMounted(() => {
-  if (!props.skeleton && props.modelValue !== null) {
+  if ([InputState.danger, InputState.info, InputState.warning].includes(props.state)) {
     emit('validate', props.modelValue);
   }
 });