@antify/ui 4.2.0 → 4.2.2

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;

package/dist/components/inputs/__stories/AntCheckboxGroup.stories.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.WithLongContent = exports.Docs = void 0;
+exports.summary = exports.default = exports.WithLongContent = exports.TabVariant = exports.Docs = exports.BlockVariant = void 0;
 var _AntCheckboxGroup = _interopRequireDefault(require("../AntCheckboxGroup.vue"));
 var _enums = require("../../../enums");
 var _Direction = require("../../../enums/Direction.enum");
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Checkbox Group",
@@ -40,10 +43,29 @@ const meta = {
         type: "select"
       },
       options: Object.values(_Direction.Direction)
+    },
+    layoutVariant: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.LayoutVariant)
     }
   }
 };
 module.exports = meta;
+const checkboxOptions = [{
+  label: "Checkbox 1",
+  value: "checkbox-1"
+}, {
+  label: "Checkbox 2",
+  value: "checkbox-2"
+}, {
+  label: "Checkbox 3",
+  value: "checkbox-3"
+}, {
+  label: "Checkbox 4",
+  value: "checkbox-4"
+}];
 const Docs = exports.Docs = {
   render: args => ({
     components: {
@@ -55,24 +77,18 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-        <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+      <div class="flex flex-col gap-2.5">
+        <div class="w-1/2">
+          <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        </div>
+      </div>
+
+        <span class="text-xs text-gray-500">Reactive value: {{ args.modelValue }}</span>
     `
   }),
   args: {
     modelValue: [],
-    checkboxes: [{
-      label: "Checkbox 1",
-      value: "checkbox-1"
-    }, {
-      label: "Checkbox 2",
-      value: "checkbox-2"
-    }, {
-      label: "Checkbox 3",
-      value: "checkbox-3"
-    }, {
-      label: "Checkbox 4",
-      value: "checkbox-4"
-    }]
+    checkboxes: checkboxOptions
   }
 };
 const WithLongContent = exports.WithLongContent = {
@@ -107,4 +123,333 @@ const WithLongContent = exports.WithLongContent = {
       value: "checkbox-4"
     }]
   }
+};
+const BlockVariant = exports.BlockVariant = {
+  render: Docs.render,
+  args: {
+    modelValue: [],
+    checkboxes: checkboxOptions,
+    layoutVariant: _enums.LayoutVariant.block
+  }
+};
+const TabVariant = exports.TabVariant = {
+  render: Docs.render,
+  args: {
+    modelValue: [],
+    checkboxes: checkboxOptions,
+    layoutVariant: _enums.LayoutVariant.tab
+  }
+};
+const summary = exports.summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntCheckboxGroup: _AntCheckboxGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default,
+      AntFormGroup: _AntFormGroup.default
+    },
+    setup() {
+      const value = (0, _vue.ref)(["checkbox-3"]);
+      return {
+        args,
+        value,
+        InputState: _enums.InputState,
+        Size: _enums.Size,
+        LayoutVariant: _enums.LayoutVariant
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>State</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroup direction="row">
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.base"
+            :layout-variant="LayoutVariant.block"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.info"
+            :layout-variant="LayoutVariant.block"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.success"
+            :layout-variant="LayoutVariant.block"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.warning"
+            :layout-variant="LayoutVariant.block"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.danger"
+            :layout-variant="LayoutVariant.block"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroup direction="row">
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.base"
+            :layout-variant="LayoutVariant.tab"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.info"
+            :layout-variant="LayoutVariant.tab"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.success"
+            :layout-variant="LayoutVariant.tab"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.warning"
+            :layout-variant="LayoutVariant.tab"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckboxGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.danger"
+            :layout-variant="LayoutVariant.tab"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.lg" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.md" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.sm" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+
+        <AntFormGroup direction="row">
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.block"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.block"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.block"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.block"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.block"
+                         description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+
+        <AntFormGroup direction="row">
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.lg" label="Label" :layout-variant="LayoutVariant.tab"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.md" label="Label" :layout-variant="LayoutVariant.tab"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.sm" label="Label" :layout-variant="LayoutVariant.tab"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs" label="Label" :layout-variant="LayoutVariant.tab"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntCheckboxGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label" :layout-variant="LayoutVariant.tab"
+                         description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+          <AntFormGroup direction="row">
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                             disabled/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
+                             disabled/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
+                             disabled/>
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+          <AntFormGroup direction="row">
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                             :readonly="true"/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
+                             :readonly="true"/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
+                             :readonly="true"/>
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+          <AntFormGroup direction="row">
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                             :skeleton="true"/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"
+                             :skeleton="true"/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"
+                             :skeleton="true"/>
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value"/>
+          </div>
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.block"/>
+          </div>
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" :layout-variant="LayoutVariant.tab"/>
+          </div>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" label="Label"/>
+          </div>
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.block"/>
+          </div>
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" label="Label" :layout-variant="LayoutVariant.tab"/>
+          </div>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet"/>
+          </div>
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
+          </div>
+          <div>
+            <AntCheckboxGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
+          </div>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+          <AntFormGroup direction="row">
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.block"/>
+            </div>
+            <div>
+              <AntCheckboxGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet" :layout-variant="LayoutVariant.tab"/>
+            </div>
+          </AntFormGroup>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
 };