@antify/ui-module 1.6.0 → 1.7.1

package/dist/runtime/components/form/AntCheckboxWidget/__stories/AntCheckbox.stories.mjs

@@ -1,289 +0,0 @@
-import AntCheckbox from "../AntCheckbox.vue";
-import { computed, ref } from "vue";
-import { InputColorType, Size } from "../../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
-const meta = {
-  title: "Components/Forms/Checkbox/Checkbox",
-  component: AntCheckbox,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    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: { AntCheckbox },
-    setup() {
-      const value = computed({
-        get() {
-          return args.modelValue;
-        },
-        set(val) {
-          args.modelValue = val;
-        }
-      });
-      return { args, value };
-    },
-    template: `
-      <div class="m-2">
-        <AntCheckbox v-bind="args" v-model="value"/>
-        <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
-      </div>
-    `
-  })
-};
-export const WithValidator = {
-  render: (args) => ({
-    components: { AntCheckbox },
-    setup() {
-      const value = computed({
-        get() {
-          return args.modelValue;
-        },
-        set(val) {
-          args.modelValue = val;
-        }
-      });
-      const validator = ref(useFieldValidator((val) => val || "Check this box!"));
-      validator.value.validate(value.value);
-      return { args, value, validator };
-    },
-    template: `
-      <div class="m-2">
-        <AntCheckbox v-bind="args" v-model="value" :validator="validator" value-label="Accept some kind of document before continuing"/>
-        <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
-      </div>
-    `
-  })
-};
-export const Summary = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  render: (args) => ({
-    components: { AntCheckbox },
-    setup() {
-      const offValue = ref(false);
-      const onValue = ref(true);
-      return {
-        args,
-        offValue,
-        onValue,
-        InputColorType,
-        Size
-      };
-    },
-    template: `
-      <h3>Medium Size</h3>
-      <div class="flex flex-col gap-5">
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
-          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
-          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
-        </div>
-      </div>
-      <h3>Small Size</h3>
-      <div class="flex flex-col gap-5">
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
-          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
-          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
-        </div>
-      </div>
-    `
-  })
-};

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

@@ -1,5 +0,0 @@
-<template>
-  <div class="text-primary-500 text-xl font-semibold">
-    <slot/>
-  </div>
-</template>

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

@@ -1,139 +0,0 @@
-<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

@@ -1,80 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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
-  }
-};