@antify/ui-module 1.1.3

package/dist/runtime/components/form/AntRadioWidget/AntRadio.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { AntField } from '../Elements';
+import { InputColorType, Size } from '../../../enums';
+import AntSkeleton from '../../AntSkeleton.vue';
+import { computed, onMounted } from 'vue';
+import { type AntRadioType } from './__types/AntRadio.type';
+import { handleEnumValidation } from '../../../handler';
+
+defineOptions({ inheritAttrs: false });
+
+const emits = defineEmits([ 'update:modelValue', 'update:skeleton' ]);
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | null;
+    value: AntRadioType;
+
+    description?: string;
+    skeleton?: boolean;
+    colorType?: InputColorType;
+    size?: Size
+    readonly?: boolean;
+    disabled?: boolean;
+  }>(), {
+    colorType: InputColorType.base,
+    size: Size.md,
+    readonly: false,
+    disabled: false,
+  }
+);
+
+const _value = computed({
+  get(): string | null | AntRadioType {
+    return props.modelValue;
+  },
+  set(val: string | null | AntRadioType) {
+    emits('update:modelValue',  val ? typeof val === 'string' ? val : val.value : null);
+  }
+});
+const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled))
+const isActive = computed(() => {
+  return _value.value === props.value.value
+});
+
+const inputClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'relative inline-flex flex-shrink-0': true,
+    'focus:ring-offset-0 outline outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1 rounded-full': true,
+    'cursor-pointer': hasAction.value,
+    'outline-neutral-300 focus:outline-neutral-300': !isActive.value,
+    'rounded-full transition-colors ease-in-out duration-200 disabled:opacity-50 disabled:cursor-not-allowed': true,
+    'focus:ring-2': props.size === Size.sm && hasAction.value,
+    'focus:ring-4': props.size === Size.md && hasAction.value,
+    'h-4 w-4 small': props.size === Size.sm,
+    'h-5 w-5': props.size === Size.md,
+  };
+
+  const focusColorVariant = {
+    [InputColorType.base]: 'focus:ring-primary-100',
+    [InputColorType.danger]: 'focus:ring-danger-100',
+    [InputColorType.info]: 'focus:ring-info-100',
+    [InputColorType.success]: 'focus:ring-success-100',
+    [InputColorType.warning]: 'focus:ring-warning-100',
+  };
+
+  const activeColorVariant = {
+    [InputColorType.base]: 'text-primary-500 outline-primary-500 focus:outline-primary-500',
+    [InputColorType.danger]: 'text-danger-500 outline-danger-500 focus:outline-danger-500',
+    [InputColorType.info]: 'text-info-500 outline-info-500 focus:outline-info-500',
+    [InputColorType.success]: 'text-success-500 outline-success-500 focus:outline-success-500',
+    [InputColorType.warning]: 'text-warning-500 outline-warning-500 focus:outline-warning-500',
+  }
+
+  classes[focusColorVariant[props.colorType]] = hasAction.value;
+  classes[activeColorVariant[props.colorType]] = isActive.value;
+
+  return classes;
+});
+
+const valueClass = computed(() => {
+  const classes = {
+    'relative w-fit full-height': true,
+    'cursor-pointer': hasAction.value,
+    'cursor-not-allowed opacity-50': props.disabled
+  }
+
+  return classes;
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <AntField
+    :description="description"
+    :color-type="colorType"
+    class="cursor-pointer"
+    :skeleton="skeleton"
+    :size="size"
+    :expanded="false"
+  >
+    <div class="flex items-center gap-1.5">
+      <div class="relative full-height flex items-center">
+        <input
+          v-model="_value"
+          :value="value.value"
+          :class="inputClasses"
+          type="radio"
+          :aria-checked="isActive"
+          :disabled="disabled"
+        />
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded-full
+        />
+      </div>
+
+      <div class="relative">
+        <span :class="valueClass">
+          {{ value.label }}
+        </span>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+        />
+      </div>
+    </div>
+  </AntField>
+</template>
+
+<style scoped>
+input[type=radio]{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:100%;display:flex;justify-content:center}input[type=radio]:before{background:currentColor;border-radius:100%;content:"";height:12px;transform:scale(0);transition:transform .12s;width:12px}input[type=radio].small:before{height:8px;width:8px}input[type=radio]:checked:before{transform:scale(1)}
+</style>

package/dist/runtime/components/form/AntRadioWidget/AntRadioGroup.vue

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import AntRadio from './AntRadio.vue';
+import { useVModel } from '@vueuse/core';
+import { AntField } from '../Elements';
+import { type AntRadioType } from './__types/AntRadio.type';
+import { InputColorType, Size } from '../../../enums';
+import { FieldValidator } from '@antify/validate';
+import { computed, type Ref, watch } from 'vue';
+import { Direction } from '../../../enums/Direction.enum';
+
+defineOptions({ inheritAttrs: false });
+
+const emits = defineEmits([ 'update:modelValue', 'update:skeleton' ]);
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | null;
+    radioButtons: AntRadioType[];
+    label?: string;
+    description?: string;
+    direction?: Direction;
+    colorType?: InputColorType;
+    size?: Size;
+    skeleton?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    validator?: FieldValidator;
+  }>(), {
+    direction: Direction.column,
+    colorType: InputColorType.base,
+    size: Size.md,
+    skeleton: false,
+    disabled: false,
+    readonly: false
+  });
+
+const _value = useVModel(props, 'modelValue', emits);
+const _colorType: Ref<InputColorType | undefined> = computed(() => props.validator?.hasErrors() ? InputColorType.danger : undefined);
+const containerClasses = computed(() => {
+  const classes = {
+    'flex gap-2.5 justify-start': true,
+    'flex-row': props.direction === Direction.row,
+    'flex-col': props.direction === Direction.column,
+  };
+
+  return classes;
+})
+
+watch(_value, () => {
+  props.validator?.validate(_value.value);
+}, {
+  deep: true
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :description="description"
+    :color-type="colorType"
+    :skeleton="skeleton"
+    :validator="validator"
+    :size="size"
+    label-for="noop"
+  >
+    <div
+      :class="containerClasses"
+    >
+      <AntRadio
+        v-model="_value"
+        v-for="(radio, index) in radioButtons"
+        :key="`radio-button-widget_${radio.value}-${index}`"
+        :value="radio"
+        :skeleton="skeleton"
+        :disabled="disabled || radio.disabled"
+        :readonly="readonly || radio.readonly"
+        :color-type="_colorType || radio.colorType || colorType"
+      />
+    </div>
+  </AntField>
+</template>

package/dist/runtime/components/form/AntRadioWidget/__stories/AntRadio.stories.d.ts

@@ -0,0 +1,8 @@
+import AntRadio from '../AntRadio.vue';
+import { type Meta, type StoryObj } from "@storybook/vue3";
+declare const meta: Meta<typeof AntRadio>;
+export default meta;
+type Story = StoryObj<typeof AntRadio>;
+export declare const Docs: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;

package/dist/runtime/components/form/AntRadioWidget/__stories/AntRadio.stories.mjs

@@ -0,0 +1,79 @@
+import AntRadio from "../AntRadio.vue";
+import { ref } from "vue";
+import { InputColorType, Size } from "../../../../enums/index.mjs";
+const meta = {
+  title: "Components/Forms/Radio/Radio",
+  component: AntRadio,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      table: {
+        type: {
+          summary: "string | null"
+        }
+      }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntRadio },
+    setup() {
+      const groupValue = ref("t3");
+      const radioValues = ref([
+        {
+          value: "t1",
+          label: "Test 1"
+        },
+        {
+          value: "t2",
+          label: "Test 2"
+        },
+        {
+          value: "t3",
+          label: "Test 3"
+        },
+        {
+          value: "t4",
+          label: "Test 4"
+        },
+        {
+          value: "t5",
+          label: "Test 5"
+        }
+      ]);
+      return { args, groupValue, radioValues };
+    },
+    template: `
+    <div class="m-2 flex gap-2">
+      <AntRadio v-for="value in radioValues" v-bind="args" :value="value" v-model="groupValue"/>
+    </div>
+  `
+  }),
+  args: {
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. "
+  }
+};
+export const Disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+export const Loading = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

package/dist/runtime/components/form/AntRadioWidget/__stories/AntRadioGroup.stories.d.ts

@@ -0,0 +1,8 @@
+import AntRadioGroup from '../AntRadioGroup.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntRadioGroup>;
+export default meta;
+type Story = StoryObj<typeof AntRadioGroup>;
+export declare const Docs: Story;
+export declare const WithValidator: Story;
+export declare const Skeleton: Story;

package/dist/runtime/components/form/AntRadioWidget/__stories/AntRadioGroup.stories.mjs

@@ -0,0 +1,125 @@
+import AntRadioGroup from "../AntRadioGroup.vue";
+import { ref } from "vue";
+import { InputColorType, Size } from "../../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+import { Direction } from "../../../../enums/Direction.enum.mjs";
+const meta = {
+  title: "Components/Forms/Radio/Radio Group",
+  component: AntRadioGroup,
+  decorators: [() => ({ template: '<div class="m-2"><story/></div>' })],
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    label: {
+      description: "The label for the radio widget"
+    },
+    description: {
+      description: "Description for the radio widget"
+    },
+    radioButtons: {
+      description: "Array of RadioButton",
+      table: {
+        type: {
+          summary: "AntRadioType[]",
+          detail: `
+{
+  value: string;
+  label?: string;
+  disabled?: boolean;
+  colorType?: InputColorType;
+  validator?: FieldValidator;
+}
+`
+        }
+      }
+    },
+    modelValue: {
+      description: "Reactive value, contains the currently selected radio-button value",
+      table: {
+        type: {
+          summary: "string | null"
+        }
+      }
+    },
+    direction: {
+      control: { type: "select" },
+      options: Object.values(Direction)
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    }
+  }
+};
+export default meta;
+const simpleButtons = [
+  {
+    id: "radio-1",
+    label: "Radio 1",
+    value: "radio-1"
+  },
+  {
+    id: "radio-2",
+    label: "Radio 2",
+    value: "radio-2",
+    description: "I am disabled",
+    disabled: true
+  },
+  {
+    id: "radio-3",
+    label: "Radio 3",
+    value: "radio-3"
+  },
+  {
+    id: "radio-4",
+    label: "Radio 4",
+    value: "radio-4"
+  }
+];
+export const Docs = {
+  render: (args) => ({
+    components: { AntRadioGroup },
+    setup() {
+      const value = ref("");
+      return { args, value };
+    },
+    template: `
+      <AntRadioGroup v-bind="args" v-model="value"/>
+      <span class="text-xs text-gray-500">Reactive value: {{ value }}</span>
+    `
+  }),
+  args: {
+    label: "Different style",
+    description: "Message",
+    radioButtons: simpleButtons
+  }
+};
+export const WithValidator = {
+  render: (args) => ({
+    components: { AntRadioGroup },
+    setup() {
+      const value = ref(null);
+      const validator = ref(useFieldValidator([
+        (val) => val !== null || "Value is required"
+      ]));
+      validator.value.validate(value.value);
+      return { args, value, validator };
+    },
+    template: `
+      <AntRadioGroup v-bind="args" v-model="value" :validator="validator"/>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

package/dist/runtime/components/form/AntRadioWidget/__types/AntRadio.type.d.ts

@@ -0,0 +1,9 @@
+import { InputColorType } from '../../../../enums';
+export type AntRadioType = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    colorType?: InputColorType;
+    [key: string]: unknown;
+};

package/dist/runtime/components/form/AntRangeSlider.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import AntField from './Elements/AntField.vue';
+import {FieldValidator} from '@antify/validate';
+import {useVModel} from '@vueuse/core';
+import {computed, onMounted} from 'vue';
+import {InputColorType, Size} from '../../enums';
+import {handleEnumValidation} from '../../handler';
+
+defineOptions({ inheritAttrs: false });
+
+const emits = defineEmits(['update:modelValue', 'update:skeleton'])
+const props = withDefaults(defineProps<{
+  modelValue: number | number[] | undefined;
+  label?: string;
+  description?: string;
+  colorType?: InputColorType;
+  size?: Size,
+  disabled?: boolean;
+  skeleton?: boolean;
+  validator?: FieldValidator;
+  min?: number;
+  max?: number;
+}>(), {
+  colorType: InputColorType.base,
+  size: Size.md,
+  disabled: false,
+  skeleton: false,
+  limiter: false
+});
+
+const value = useVModel(props, 'modelValue', emits);
+const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+const inputClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-base',
+    [InputColorType.danger]: 'text-danger-base',
+    [InputColorType.info]: 'text-info-base',
+    [InputColorType.success]: 'text-success-base',
+    [InputColorType.warning]: 'text-warning-base',
+  };
+
+  return {
+    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-neutral-300 rounded-md outline-none': true,
+    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
+    'invisible': props.skeleton,
+    [variants[_colorType.value]]: true
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.size, Size, 'size');
+
+  props.validator?.validate(props.modelValue);
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :color-type="colorType"
+    :validator="validator"
+  >
+    <input
+      v-model="value"
+      :class="inputClasses"
+      type="range"
+      :disabled="disabled || skeleton"
+      :min="min"
+      :max="max"
+      v-bind="$attrs"
+    >
+  </AntField>
+</template>
+
+<style scoped>
+.ant-range-slider{-webkit-appearance:none}.ant-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border:1px solid #cbd5e1;border-radius:100%;cursor:pointer;height:14px;width:14px}.ant-range-slider::-moz-range-thumb{background:#04aa6d;cursor:pointer;height:25px;width:25px}
+</style>