@antify/ui-module 1.7.2 → 1.7.3

package/src/runtime/components/inputs/AntTagInput.vue

@@ -25,6 +25,7 @@ const props = withDefaults(
     size?: AntTagInputSize;
     state?: InputState;
     disabled?: boolean;
+    readonly?: boolean;
     skeleton?: boolean;
     name?: string;
     expanded?: boolean;
@@ -46,6 +47,9 @@ const props = withDefaults(
     allowCreate: false,
     allowDuplicates: false,
     openOnFocus: true,
+    readonly: false,
+    disabled: false,
+    skeleton: false,
     autoCloseAfterSelection: false,
     placeholder: 'Add new tag'
   }
@@ -54,13 +58,14 @@ const props = withDefaults(
 const _modelValue: Ref<(string | number)[] | null> = useVModel(props, 'modelValue', emit);
 const _skeleton = useVModel(props, 'skeleton', emit);
 const dropDownOpen = ref(false);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const focusedDropDownItem: Ref<string | number | null> = ref(null);
 const tagInput = ref('');
 const filteredOptions = ref(props.options);
 const inputRef: Ref<HTMLElement | null> = ref(null);
 const inputContainerClasses = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'outline-neutral-300 focus-within:outline-primary-500 focus-within:ring-primary-200 bg-white',
+    [InputState.base]: 'outline-neutral-300 focus-within:outline-neutral-300 focus-within:ring-primary-200 bg-white',
     [InputState.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
     [InputState.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
     [InputState.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
@@ -73,16 +78,18 @@ const inputContainerClasses = computed(() => {
     'outline-offset-[-1px] outline-1 focus-within:outline-offset-[-1px] focus-within:outline-1': true,
     'opacity-50 cursor-not-allowed': props.disabled,
     [variants[props.state]]: true,
-    // Size
-    'focus-within:ring-2 p-1.5 text-sm': props.size === AntTagInputSize.sm,
-    'focus-within:ring-4 p-2 text-sm': props.size === AntTagInputSize.md,
-    'focus-within:ring-4 p-2.5 text-sm': props.size === AntTagInputSize.lg,
+    // AntTagInputSize
+    'p-1.5 text-sm': props.size === AntTagInputSize.sm,
+    'p-2 text-sm': props.size === AntTagInputSize.md,
+    'p-2.5 text-sm': props.size === AntTagInputSize.lg,
+    'focus-within:ring-2': !hasInputState.value && props.size === AntTagInputSize.sm,
+    'focus-within:ring-4': !hasInputState.value && (props.size === AntTagInputSize.lg || props.size === AntTagInputSize.md),
     // Grouping
     'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
     'rounded-none': props.grouped === Grouped.center,
     'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
     'rounded-md': props.grouped === Grouped.none,
-    'rounded-bl-none rounded-br-none': dropDownOpen.value && (!props.options || props.options.length > 0),
+    'rounded-bl-none rounded-br-none': dropDownOpen.value && (!props.options || props.options.length > 0) && !props.readonly,
     'invisible': props.skeleton,
   };
 });
@@ -178,7 +185,7 @@ function removeLastTag() {
 }
 
 function removeTag(tag: string | number) {
-  if (_modelValue.value && !props.disabled && !props.skeleton) {
+  if (_modelValue.value && !props.disabled && !props.skeleton && !props.readonly) {
     _modelValue.value.splice(_modelValue.value.findIndex((_value) => _value === tag), 1);
 
     filterDropDown();
@@ -246,7 +253,7 @@ onMounted(() => {
 <template>
   <AntField
     :label="label"
-    :size="Size.sm"
+    :size="size as unknown as Size"
     :skeleton="_skeleton"
     :description="description"
     :state="state"
@@ -276,7 +283,7 @@ onMounted(() => {
             :key="`tag-input-tag-${index}`"
             :size="AntTagSize.xs3"
             :state="state as unknown as TagState"
-            :dismiss="true"
+            :dismiss="!readonly"
             @close="removeTag(tag)"
           >
             {{ options.find((option: SelectOption) => option.value === tag)?.label }}
@@ -297,6 +304,7 @@ onMounted(() => {
             :placeholder="placeholder"
             :class="inputClasses"
             :disabled="disabled"
+            :readonly="readonly"
             @focus="changeFocus"
             @input="filterDropDown"
             @keydown.delete="removeLastTag"
@@ -307,7 +315,7 @@ onMounted(() => {
       </div>
 
       <AntDropDown
-        v-if="filteredOptions && !disabled"
+        v-if="filteredOptions && !disabled && !readonly"
         ref="dropDownRef"
         v-model:focused="focusedDropDownItem"
         v-model:open="dropDownOpen"

package/src/runtime/components/inputs/AntTextInput.vue

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   type?: TextInputType;
   limiter?: boolean;
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   skeleton: false,
   size: Size.md,
   type: TextInputType.text,
@@ -63,6 +65,7 @@ onMounted(() => {
       :size="size"
       :skeleton="skeleton"
       :disabled="disabled"
+      :readonly="readonly"
       :placeholder="placeholder !== undefined ? placeholder : label"
       :show-icon="true"
       v-bind="$attrs"

package/src/runtime/components/inputs/AntTextarea.vue

@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   grouped?: Grouped;
   wrapperClass?: string | Record<string, boolean>;
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   size: Size.md,
   skeleton: false,
   grouped: Grouped.none,
@@ -46,6 +48,7 @@ const props = withDefaults(defineProps<{
   messages: () => []
 });
 const _modelValue = useVModel(props, 'modelValue', emit);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const icons = {
   [InputState.info]: faCircleInfo,
   [InputState.warning]: faExclamationTriangle,
@@ -69,11 +72,13 @@ const inputClasses = computed(() => {
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     [variants[props.state]]: true,
     // Size
-    'focus:ring-2 p-1 text-xs': props.size === Size.xs2,
-    'focus:ring-2 p-1.5 text-xs': props.size === Size.xs,
-    'focus:ring-2 p-1.5 text-sm': props.size === Size.sm,
-    'focus:ring-4 p-2 text-sm': props.size === Size.md,
-    'focus:ring-4 p-2.5 text-sm': props.size === Size.lg,
+    'p-1 text-xs': props.size === Size.xs2,
+    'p-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 text-sm': props.size === Size.sm,
+    'p-2 text-sm': props.size === Size.md,
+    'p-2.5 text-sm': props.size === Size.lg,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
     // Icon right
     'pr-6': props.size === Size.xs2 && props.showIcon && icon.value,
     'pr-7': props.size === Size.xs && props.showIcon && icon.value,
@@ -158,6 +163,7 @@ function onBlur(e: FocusEvent) {
         :class="inputClasses"
         :placeholder="placeholder !== undefined ? placeholder : label"
         :disabled="disabled || skeleton"
+        :readonly="readonly"
         v-bind="$attrs"
         @blur="onBlur"
       />

package/src/runtime/components/inputs/AntUnitInput.vue

@@ -25,12 +25,14 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   wrapperClass?: string | Record<string, boolean>;
   messages?: string[];
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   skeleton: false,
   size: Size.md,
   limiter: false,
@@ -70,6 +72,7 @@ onMounted(() => {
         :max="max"
         :skeleton="skeleton"
         :disabled="disabled"
+        :readonly="readonly"
         :placeholder="placeholder || label"
         :show-icon="false"
         v-bind="$attrs"

package/src/runtime/components/inputs/Elements/AntBaseInput.vue

@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   placeholder?: string;
   skeleton?: boolean;
   type?: BaseInputType;
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   size: Size.md,
   skeleton: false,
   type: BaseInputType.text,
@@ -48,6 +50,7 @@ const props = withDefaults(defineProps<{
   inputRef: null
 });
 const slot = useSlots();
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const icons = {
   [InputState.info]: faCircleInfo,
   [InputState.warning]: faExclamationTriangle,
@@ -71,11 +74,14 @@ const inputClasses = computed(() => {
     'text-right': props.type === BaseInputType.number,
     [variants[props.state]]: true,
     // Size
-    'focus:ring-2 p-1 text-xs': props.size === Size.xs2,
-    'focus:ring-2 p-1.5 text-xs': props.size === Size.xs,
-    'focus:ring-2 p-1.5 text-sm': props.size === Size.sm,
-    'focus:ring-4 p-2 text-sm': props.size === Size.md,
-    'focus:ring-4 p-2.5 text-sm': props.size === Size.lg,
+    'p-1 text-xs': props.size === Size.xs2,
+    'p-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 text-sm': props.size === Size.sm,
+    'p-2 text-sm': props.size === Size.md,
+    'p-2.5 text-sm': props.size === Size.lg,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+
     // Icon left
     'pl-6': props.size === Size.xs2 && props.iconLeft,
     'pl-7': props.size === Size.sm && props.iconLeft || props.size === Size.xs && props.iconLeft,
@@ -197,7 +203,14 @@ function onClickClearIcon() {
     <div
       v-if="iconLeft"
       class="absolute h-full flex items-center justify-center z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
+      :class="{
+        'w-6': size === Size.xs2,
+        'w-7': size === Size.sm,
+        'w-8': size === Size.xs,
+        'w-9': size === Size.md,
+        'w-10': size === Size.lg,
+        'opacity-50': disabled,
+      }"
     >
       <AntIcon
         :icon="iconLeft"
@@ -213,6 +226,8 @@ function onClickClearIcon() {
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled || skeleton"
+      :readonly="readonly"
+      :tabindex="hasInputState ? -1 : 0"
       v-bind="$attrs"
       @blur="onBlur"
     >
@@ -220,7 +235,7 @@ function onClickClearIcon() {
     <div
       v-if="(nullable && _modelValue !== null && _modelValue !== '') || (showIcon && icon) || hasSlotContent(slot['icon-right'])"
       class="absolute h-full flex items-center justify-center right-0 top-0 transition-all z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs || size === Size.sm, 'w-8': size === Size.md, 'w-9': size === Size.lg}"
+      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs2, 'w-8': size === Size.sm, 'w-9': size === Size.md, 'w-10': size === Size.lg}"
     >
       <slot name="icon-right">
         <AntIcon

package/src/runtime/components/inputs/Elements/AntInputLabel.vue

@@ -17,11 +17,8 @@ const props = withDefaults(defineProps<{
 
 const fontClasses = computed(() => ({
   'relative font-medium w-fit text-for-white-bg-font': true,
-  'text-2xs': props.size === Size.xs2,
-  'text-xs': props.size === Size.xs,
-  'text-sm': props.size === Size.sm,
-  'text-md': props.size === Size.md,
-  'text-lg': props.size === Size.lg
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
 }));
 const gapSize = computed(() => ({
   'gap-2.5': props.size === Size.lg,

package/src/runtime/components/table/AntTable.vue

@@ -27,7 +27,7 @@ const props = withDefaults(
     loading?: boolean;
     selectableRows?: boolean;
     showLightVersion?: boolean;
-    size: AntTableSize
+    size?: AntTableSize
   }>(), {
     rowKey: 'id',
     loading: false,
@@ -96,7 +96,7 @@ function rowClick(elem: Record<string, unknown>): void {
         class="min-w-full max-h-full relative"
         :class="{'h-full': data.length === 0 && !_loading}"
       >
-        <thead class="bg-neutral-100 sticky top-0 z-10">
+        <thead class="bg-neutral-200 sticky top-0 z-10">
           <tr>
             <slot name="headerFirstCell" />
 
@@ -129,7 +129,7 @@ function rowClick(elem: Record<string, unknown>): void {
             :key="`table-row-${elem[rowKey]}-${index}`"
             class="transition-all"
             :class="{
-              'bg-primary-300 text-primary-300-font': elem === selected,
+              'bg-primary-200 text-primary-200-font': elem === selected,
               'bg-white text-for-white-bg-font': elem !== selected && index % 2 === 0,
               'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
               'cursor-pointer': selectableRows

package/src/runtime/components/table/AntTableSortButton.vue

@@ -10,7 +10,7 @@ defineEmits(['sortClick']);
 const props = withDefaults(
   defineProps<{
     sortDirection?: AntTableSortDirection
-    size: AntTableSize
+    size?: AntTableSize
   }>(), {
     sortDirection: AntTableSortDirection.neutral,
     size: AntTableSize.md

package/src/runtime/components/table/AntTd.vue

@@ -10,7 +10,7 @@ const props =
       element: Record<string, unknown>;
       header: TableHeader;
       align?: AntTableAlign
-      size: AntTableSize
+      size?: AntTableSize
     }>(), {
       align: AntTableAlign.left,
       size: AntTableSize.md

package/src/runtime/components/table/AntTh.vue

@@ -5,14 +5,18 @@ import {computed, ref, type Ref} from 'vue';
 import AntTableSortButton from './AntTableSortButton.vue';
 
 defineEmits([ 'sort' ]);
-const props = defineProps<{
-  header: TableHeader
-	size: AntTableSize
-}>();
+const props = withDefaults(
+  defineProps<{
+    header: TableHeader
+    size?: AntTableSize
+  }>(), {
+    size: AntTableSize.md
+  }
+);
 
 const headerClasses = computed(() => ({
     [props.header.headerClassList || '']: true,
-    'text-sm text-neutral-100-font uppercase font-semi-bold': true,
+    'text-sm text-neutral-200-font uppercase font-semi-bold': true,
     'text-left': !props.header.align || props.header.align === AntTableAlign.left,
     'text-center': props.header.align === AntTableAlign.center,
     'text-right': props.header.align === AntTableAlign.right,