@antify/ui 4.2.1 → 4.2.2

package/dist/components/inputs/AntCheckbox.vue

@@ -65,6 +65,7 @@ const props =
   });
 const _modelValue = useVModel(props, 'modelValue', emit);
 const delayedValue = ref(_modelValue.value);
+const inputRef = ref<HTMLInputElement | null>(null);
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const inputClasses = computed(() => {
   const focusColorVariant: Record<InputState, string> = {
@@ -106,7 +107,7 @@ const inputClasses = computed(() => {
   };
 });
 const contentClasses = computed(() => ({
-  'text-for-white-bg-font': true,
+  'text-for-white-bg-font w-fit': 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,
@@ -119,6 +120,20 @@ const itemSize = computed(() => {
     return IconSize.sm;
   }
 });
+const gapSize = computed(() => {
+  switch (props.size) {
+    case Size.lg:
+      return 'gap-2.5';
+    case Size.md:
+      return 'gap-2';
+    case Size.sm:
+      return 'gap-1.5';
+    case Size.xs:
+      return 'gap-1.5';
+    default:
+      return 'gap-1';
+  }
+});
 const iconColor = computed(() => {
   switch (props.state) {
     case InputState.base:
@@ -167,6 +182,12 @@ function onBlur(e: FocusEvent) {
   emit('blur', e);
 }
 
+const onClickContent = () => {
+  if (inputRef.value && !props.disabled && !props.readonly) {
+    inputRef.value.focus();
+  }
+};
+
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
   handleEnumValidation(props.state, InputState, 'state');
@@ -187,8 +208,12 @@ onMounted(() => {
     :size="size"
     :expanded="false"
     :messages="messages"
+    @mousedown.prevent="onClickContent"
   >
-    <div class="flex gap-1.5">
+    <div
+      class="flex"
+      :class="gapSize"
+    >
       <div
         class="relative flex"
         :class="{
@@ -199,8 +224,10 @@ onMounted(() => {
         <AntSkeleton
           :visible="skeleton"
           rounded
+          @click.prevent
         >
           <input
+            ref="inputRef"
             v-model="_modelValue"
             :class="inputClasses"
             type="checkbox"
@@ -223,7 +250,10 @@ onMounted(() => {
         </AntSkeleton>
       </div>
 
-      <span :class="contentClasses">
+      <span
+        :class="contentClasses"
+        @mousedown.prevent="onClickContent"
+      >
         <AntSkeleton
           :visible="skeleton"
           rounded

package/dist/components/inputs/AntCheckboxGroup.vue

@@ -13,8 +13,9 @@ import {
   Direction,
 } from '../../enums/Direction.enum';
 import {
-  InputState, Size,
+  InputState, LayoutVariant, Size,
 } from '../../enums';
+import AntSkeleton from '../AntSkeleton.vue';
 
 const emit = defineEmits([
   'update:modelValue',
@@ -30,6 +31,7 @@ const props = withDefaults(
     direction?: Direction;
     state?: InputState;
     size?: Size;
+    layoutVariant?: LayoutVariant;
     skeleton?: boolean;
     readonly?: boolean;
     disabled?: boolean;
@@ -48,8 +50,10 @@ const props = withDefaults(
     activeColorClass?: string;
   }>(),
   {
+    checkboxes: () => [],
     direction: Direction.column,
     state: InputState.base,
+    layoutVariant: LayoutVariant.default,
     size: Size.md,
     skeleton: false,
     readonly: false,
@@ -60,12 +64,67 @@ const props = withDefaults(
     activeColorClass: 'text-primary-500',
   },
 );
+
 const containerClasses = computed(() => ({
   'flex gap-2.5': true,
   'flex-row': props.direction === Direction.row,
   'flex-col': props.direction === Direction.column,
 }));
+const blockContainerClasses = computed(() => ({
+  'flex flex-col gap-px rounded-md border overflow-hidden': true,
+  'bg-base-300 border-base-300': props.state === InputState.base,
+  'bg-info-500 border-info-500': props.state === InputState.info,
+  'bg-success-500 border-success-500': props.state === InputState.success,
+  'bg-warning-500 border-warning-500': props.state === InputState.warning,
+  'bg-danger-500 border-danger-500': props.state === InputState.danger,
+  'cursor-not-allowed': props.disabled,
+}));
+const blockItemClasses = computed(() => ({
+  'p-2.5': props.size === Size.lg,
+  'p-2': props.size === Size.md,
+  'p-1.5': props.size === Size.sm || props.size === Size.xs,
+  'p-1': props.size === Size.xs2,
+}));
+const tabContainerClasses = computed(() => ({
+  'flex rounded-md overflow-hidden': true,
+  'cursor-not-allowed': props.disabled,
+}));
+const tabItemClasses = computed(() => ({
+  'flex justify-center grow transition-colors': true,
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
+  'p-2.5': props.size === Size.lg,
+  'p-2': props.size === Size.md,
+  'p-1.5': props.size === Size.sm || props.size === Size.xs,
+  'p-1': props.size === Size.xs2,
+}));
+const getTabItemColorClasses = (checkbox: AntCheckboxType, index: number) => {
+  const borderClasses = {
+    'border-base-300': props.modelValue?.includes(checkbox.value) || (!props.modelValue?.includes(checkbox.value) && props.state === InputState.base),
+    'border-info-500': !props.modelValue?.includes(checkbox.value) && props.state === InputState.info,
+    'border-success-500': !props.modelValue?.includes(checkbox.value) && props.state === InputState.success,
+    'border-warning-500': !props.modelValue?.includes(checkbox.value) && props.state === InputState.warning,
+    'border-danger-500': !props.modelValue?.includes(checkbox.value) && props.state === InputState.danger,
+  };
+
+  return {
+    ...borderClasses,
+    'border-y': true,
+    'border-l': index !== props.checkboxes.length - 1,
+    'border-x': index === props.checkboxes.length - 1,
+    'rounded-l-md': index === 0,
+    'rounded-r-md': index === props.checkboxes.length - 1,
+    'opacity-50': props.disabled || checkbox.disabled,
+    'bg-white text-for-white-bg-font': !props.modelValue?.includes(checkbox.value),
+    '!bg-primary-500 text-primary-500-font': !props.skeleton && props.modelValue?.includes(checkbox.value) && props.state === InputState.base,
+    '!bg-info-500 text-info-500-font': !props.skeleton && props.modelValue?.includes(checkbox.value) && props.state === InputState.info,
+    '!bg-success-500 text-success-500-font': !props.skeleton && props.modelValue?.includes(checkbox.value) && props.state === InputState.success,
+    '!bg-warning-500 text-warning-500-font': !props.skeleton && props.modelValue?.includes(checkbox.value) && props.state === InputState.warning,
+    '!bg-danger-500 text-danger-500-font': !props.skeleton && props.modelValue?.includes(checkbox.value) && props.state === InputState.danger,
+  };
+};
 const containerRef = ref<null | HTMLElement>(null);
+const checkboxRef = ref<Array<InstanceType<typeof AntCheckbox>>>([]);
 
 watch(() => props.modelValue, (val) => {
   if ([
@@ -115,6 +174,34 @@ function onBlurCheckbox() {
   }, 100);
 }
 
+const onClickBlockItem = (checkbox: AntCheckboxType, index: number) => {
+  if (props.skeleton || props.disabled || props.readonly || checkbox.disabled || checkbox.readonly) {
+    return;
+  }
+
+  updateValue(checkbox.value);
+
+  setTimeout(() => {
+    const checkboxComponent = checkboxRef.value[index];
+
+    if (checkboxComponent && checkboxComponent.$el) {
+      const input = checkboxComponent.$el.querySelector('input[type="checkbox"]');
+
+      if (input) {
+        input.focus();
+      }
+    }
+  });
+};
+
+const onClickTabItem = (checkbox: AntCheckboxType) => {
+  if (props.skeleton || props.disabled || props.readonly || checkbox.disabled || checkbox.readonly) {
+    return;
+  }
+
+  updateValue(checkbox.value);
+};
+
 onMounted(() => {
   if (!props.skeleton && props.modelValue !== null) {
     emit('validate', props.modelValue);
@@ -134,6 +221,7 @@ onMounted(() => {
     label-for="noop"
   >
     <div
+      v-if="layoutVariant === LayoutVariant.default"
       ref="containerRef"
       :class="containerClasses"
     >
@@ -155,5 +243,65 @@ onMounted(() => {
         {{ checkbox.label }}
       </AntCheckbox>
     </div>
+
+    <div
+      v-if="layoutVariant === LayoutVariant.block"
+      ref="containerRef"
+      :class="blockContainerClasses"
+    >
+      <div
+        v-for="(checkbox, index) in checkboxes"
+        :key="`checkbox-widget_${checkbox.value}-${index}`"
+        :class="{
+          ...blockItemClasses,
+          'cursor-not-allowed': props.disabled || checkbox.disabled,
+          'cursor-pointer hover:bg-base-50': !props.skeleton && !props.disabled && !props.readonly && !checkbox.disabled && !checkbox.readonly,
+          'bg-base-100': !skeleton && modelValue?.includes(checkbox.value),
+          'bg-white': skeleton || !modelValue?.includes(checkbox.value),
+        }"
+        @click="onClickBlockItem(checkbox, index)"
+      >
+        <AntCheckbox
+          :ref="el => checkboxRef[index] = el"
+          :model-value="modelValue !== null ? modelValue?.indexOf(checkbox.value) !== -1 : null"
+          :skeleton="skeleton"
+          :disabled="disabled || checkbox.disabled"
+          :readonly="readonly || checkbox.readonly"
+          :state="state"
+          :size="size"
+          @update:model-value="updateValue(checkbox.value)"
+          @blur="() => onBlurCheckbox()"
+          @click.stop
+        >
+          {{ checkbox.label }}
+        </AntCheckbox>
+      </div>
+    </div>
+
+    <div
+      v-if="layoutVariant === LayoutVariant.tab"
+      :class="tabContainerClasses"
+    >
+      <div
+        v-for="(checkbox, index) in checkboxes"
+        :key="`checkbox-widget_${checkbox.value}-${index}`"
+        :class="{
+          ...tabItemClasses,
+          ...getTabItemColorClasses(checkbox, index),
+          'cursor-not-allowed': props.disabled || checkbox.disabled,
+          'cursor-pointer hover:bg-base-50': !props.skeleton && !props.disabled && !props.readonly && !checkbox.disabled && !checkbox.readonly,
+          'bg-base-100': !skeleton && modelValue?.includes(checkbox.value),
+          'bg-white': skeleton || !modelValue?.includes(checkbox.value),
+        }"
+        @click="onClickTabItem(checkbox)"
+      >
+        <AntSkeleton
+          :visible="skeleton"
+          rounded
+        >
+          {{ checkbox.label }}
+        </AntSkeleton>
+      </div>
+    </div>
   </AntField>
 </template>

package/dist/components/inputs/AntRadio.vue

@@ -107,13 +107,6 @@ const gapSize = computed(() => {
       return 'gap-1';
   }
 });
-const valueSize = computed(() => {
-  if (props.size === Size.xs || props.size === Size.xs2) {
-    return 'h-4';
-  } else {
-    return 'h-5';
-  }
-});
 const innerRadioClass = computed(() => (
   {
     'bg-primary-500': props.state === InputState.base,
@@ -177,50 +170,51 @@ onMounted(() => {
     data-e2e="radio"
   >
     <div
-      class="flex items-center"
+      class="flex"
       :class="gapSize"
     >
-      <div class="relative full-height flex items-center">
-        <div class="absolute flex items-center justify-center w-full h-full">
-          <Transition name="fade-radio">
-            <div
-              v-if="isActive"
-              class="rounded-full transition-all"
-              :class="innerRadioClass"
-            />
-          </Transition>
-        </div>
-
-        <input
-          v-model="_modelValue"
-          :value="value.value"
-          :class="inputClasses"
-          type="radio"
-          :aria-checked="isActive"
-          :disabled="disabled || readonly"
-          @blur="onBlur"
-        >
-
+      <div
+        class="relative flex"
+        :class="{
+          'h-5 w-5': size === Size.lg || size === Size.md || size === Size.sm,
+          'h-4 w-4': size === Size.xs || size === Size.xs2,
+        }"
+      >
         <AntSkeleton
           :visible="skeleton"
-          absolute
           rounded-full
-        />
+          @click.prevent
+        >
+          <div class="absolute flex items-center justify-center w-full h-full">
+            <Transition name="fade-radio">
+              <div
+                v-if="isActive"
+                class="rounded-full transition-all"
+                :class="innerRadioClass"
+              />
+            </Transition>
+          </div>
+
+          <input
+            v-model="_modelValue"
+            :value="value.value"
+            :class="inputClasses"
+            type="radio"
+            :aria-checked="isActive"
+            :disabled="disabled || readonly"
+            @blur="onBlur"
+          >
+        </AntSkeleton>
       </div>
 
-      <div
-        class="flex items-center"
-        :class="valueSize"
+      <AntSkeleton
+        :visible="skeleton"
+        rounded
       >
         <span :class="valueClass">
-          <AntSkeleton
-            :visible="skeleton"
-            rounded
-          >
-            {{ value.label }}
-          </AntSkeleton>
+          {{ value.label }}
         </span>
-      </div>
+      </AntSkeleton>
     </div>
   </AntField>
 </template>

package/dist/components/inputs/AntRadioGroup.vue

@@ -6,11 +6,12 @@ import {
 import {
   AntField,
 } from './Elements';
+import AntSkeleton from '../AntSkeleton.vue';
 import {
   type AntRadioTypes,
 } from './__types/AntRadio.types';
 import {
-  InputState, Size,
+  InputState, LayoutVariant, Size,
 } from '../../enums';
 import {
   computed, onMounted, ref, watch,
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<{
   direction?: Direction;
   state?: InputState;
   size?: Size;
+  layoutVariant?: LayoutVariant;
   skeleton?: boolean;
   disabled?: boolean;
   readonly?: boolean;
@@ -42,6 +44,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   direction: Direction.column,
   state: InputState.base,
+  layoutVariant: LayoutVariant.default,
   size: Size.md,
   skeleton: false,
   disabled: false,
@@ -49,6 +52,7 @@ const props = withDefaults(defineProps<{
   messages: () => [],
 });
 const _modelValue = useVModel(props, 'modelValue', emit);
+const radioRef = ref<Array<InstanceType<typeof AntRadio>>>([]);
 const containerClasses = computed(() => ({
   'flex justify-start': true,
   'flex-row': props.direction === Direction.row,
@@ -58,6 +62,50 @@ const containerClasses = computed(() => ({
   'gap-1.5': props.size === Size.sm || props.size === Size.xs,
   'gap-1': props.size === Size.xs2,
 }));
+const blockContainerClasses = computed(() => ({
+  'flex flex-col gap-px rounded-md border overflow-hidden': true,
+  'bg-base-300 border-base-300': props.state === InputState.base,
+  'bg-info-500 border-info-500': props.state === InputState.info,
+  'bg-success-500 border-success-500': props.state === InputState.success,
+  'bg-warning-500 border-warning-500': props.state === InputState.warning,
+  'bg-danger-500 border-danger-500': props.state === InputState.danger,
+  'cursor-not-allowed': props.disabled,
+}));
+const blockItemClasses = computed(() => ({
+  'p-2.5': props.size === Size.lg,
+  'p-2': props.size === Size.md,
+  'p-1.5': props.size === Size.sm || props.size === Size.xs,
+  'p-1': props.size === Size.xs2,
+}));
+const tabContainerClasses = computed(() => ({
+  'flex gap-px rounded-md border overflow-hidden': true,
+  'bg-base-300 border-base-300': props.state === InputState.base,
+  'bg-info-500 border-info-500': props.state === InputState.info,
+  'bg-success-500 border-success-500': props.state === InputState.success,
+  'bg-warning-500 border-warning-500': props.state === InputState.warning,
+  'bg-danger-500 border-danger-500': props.state === InputState.danger,
+  'cursor-not-allowed': props.disabled,
+}));
+const tabItemClasses = computed(() => ({
+  'flex justify-center grow transition-colors': true,
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
+  'p-2.5': props.size === Size.lg,
+  'p-2': props.size === Size.md,
+  'p-1.5': props.size === Size.sm || props.size === Size.xs,
+  'p-1': props.size === Size.xs2,
+}));
+const getTabItemColorClasses = (radio: AntRadioTypes) => {
+  return {
+    'opacity-50': props.disabled || radio.disabled,
+    'bg-white text-for-white-bg-font': radio.value !== _modelValue.value,
+    '!bg-primary-500 text-primary-500-font': !props.skeleton && radio.value === _modelValue.value && props.state === InputState.base,
+    '!bg-info-500 text-info-500-font': !props.skeleton && radio.value === _modelValue.value && props.state === InputState.info,
+    '!bg-success-500 text-success-500-font': !props.skeleton && radio.value === _modelValue.value && props.state === InputState.success,
+    '!bg-warning-500 text-warning-500-font': !props.skeleton && radio.value === _modelValue.value && props.state === InputState.warning,
+    '!bg-danger-500 text-danger-500-font': !props.skeleton && radio.value === _modelValue.value && props.state === InputState.danger,
+  };
+};
 const containerRef = ref<null | HTMLElement>(null);
 const fieldSize = computed(() => {
   switch (props.size) {
@@ -107,6 +155,34 @@ function onBlurRadio() {
   }, 100);
 }
 
+const onClickBlockItem = (radio: AntRadioTypes, index: number) => {
+  if (props.skeleton || props.disabled || props.readonly || radio.disabled || radio.readonly) {
+    return;
+  }
+
+  _modelValue.value = radio.value;
+
+  setTimeout(() => {
+    const radioComponent = radioRef.value[index];
+
+    if (radioComponent && radioComponent.$el) {
+      const input = radioComponent.$el.querySelector('input[type="radio"]');
+
+      if (input) {
+        input.focus();
+      }
+    }
+  });
+};
+
+const onClickTabItem = (radio: AntRadioTypes) => {
+  if (props.skeleton || props.disabled || props.readonly || radio.disabled || radio.readonly) {
+    return;
+  }
+
+  _modelValue.value = radio.value;
+};
+
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
   handleEnumValidation(props.state, InputState, 'state');
@@ -133,6 +209,7 @@ onMounted(() => {
     data-e2e="radio-group"
   >
     <div
+      v-if="layoutVariant === LayoutVariant.default"
       ref="containerRef"
       :class="containerClasses"
     >
@@ -149,5 +226,62 @@ onMounted(() => {
         @blur="onBlurRadio"
       />
     </div>
+
+    <div
+      v-if="layoutVariant === LayoutVariant.block"
+      ref="containerRef"
+      :class="blockContainerClasses"
+    >
+      <div
+        v-for="(radio, index) in radioButtons"
+        :key="`radio-button-widget_${radio.value}-${index}`"
+        :class="{
+          ...blockItemClasses,
+          'cursor-not-allowed': props.disabled || radio.disabled,
+          'cursor-pointer hover:bg-base-50': !props.skeleton && !props.disabled && !props.readonly && !radio.disabled && !radio.readonly,
+          'bg-base-100': !skeleton && _modelValue === radio.value,
+          'bg-white': skeleton || _modelValue !== radio.value,
+        }"
+        @click="onClickBlockItem(radio, index)"
+      >
+        <AntRadio
+          :ref="el => radioRef[index] = el"
+          v-model="_modelValue"
+          :value="radio"
+          :skeleton="skeleton"
+          :disabled="disabled || radio.disabled"
+          :readonly="readonly || radio.readonly"
+          :state="radio.state || state"
+          :size="size"
+          @blur="onBlurRadio"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="layoutVariant === LayoutVariant.tab"
+      :class="tabContainerClasses"
+    >
+      <div
+        v-for="(radio, index) in radioButtons"
+        :key="`radio-button-widget_${radio.value}-${index}`"
+        :class="{
+          ...tabItemClasses,
+          ...getTabItemColorClasses(radio),
+          'cursor-not-allowed': props.disabled || radio.disabled,
+          'cursor-pointer hover:bg-base-50': !props.skeleton && !props.disabled && !props.readonly && !radio.disabled && !radio.readonly,
+          'bg-base-100': !skeleton && _modelValue === radio.value,
+          'bg-white': skeleton || _modelValue !== radio.value,
+        }"
+        @click="onClickTabItem(radio)"
+      >
+        <AntSkeleton
+          :visible="skeleton"
+          rounded
+        >
+          {{ radio.label }}
+        </AntSkeleton>
+      </div>
+    </div>
   </AntField>
 </template>

package/dist/components/inputs/__stories/AntCheckboxGroup.stories.d.ts

@@ -5,3 +5,6 @@ export default meta;
 type Story = StoryObj<typeof AntCheckboxGroup>;
 export declare const Docs: Story;
 export declare const WithLongContent: Story;
+export declare const BlockVariant: Story;
+export declare const TabVariant: Story;
+export declare const summary: Story;