@antify/ui-module 1.5.1 → 1.7.1

package/dist/runtime/components/inputs/__stories/AntCheckbox.stories.mjs

@@ -0,0 +1,341 @@
+import AntCheckbox from "../AntCheckbox.vue";
+import { computed, ref } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+import { AntCheckboxSize } from "../__types/AntCheckbox.types.mjs";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Inputs/Checkbox",
+  component: AntCheckbox,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntCheckboxSize)
+    }
+  }
+};
+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 modelValue = computed({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      const validator = ref(useFieldValidator((val) => !val ? "Check this box!" : true));
+      return { args, modelValue, validator, InputState };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox
+          v-bind="args"
+          v-model="modelValue"
+          :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+          :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+          @validate="(val) => validator.validate(val)"
+        >
+          Accept some kind of document before continuing
+        </AntCheckbox>
+        <span class="text-sm text-gray-500">Reactive value: {{ modelValue }}</span>
+      </div>
+    `
+  }),
+  args: {
+    modelValue: false
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntCheckbox, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const offValue = ref(false);
+      const onValue = ref(true);
+      return {
+        args,
+        offValue,
+        onValue,
+        InputState,
+        AntCheckboxSize
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>State & false</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>State & true</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="AntCheckboxSize.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="AntCheckboxSize.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="AntCheckboxSize.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="AntCheckboxSize.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntCheckbox
+                v-model="offValue"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base"
+                disabled>
+                Value
+              </AntCheckbox>
+              <AntCheckbox
+                v-model="onValue"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base"
+                disabled>
+                Value
+              </AntCheckbox>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntCheckbox
+                v-model="offValue"
+                :readonly="true"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base">
+                Value
+              </AntCheckbox>
+              <AntCheckbox
+                v-model="onValue"
+                :readonly="true"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base">
+                Value
+              </AntCheckbox>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntCheckbox
+              v-model="offValue"
+              class="w-28"
+              label="Label"
+              description="Lorem ipsum dolor sit amet."
+              :state="InputState.base"
+              skeleton>
+              Value
+            </AntCheckbox>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue"/>
+          <AntCheckbox v-model="onValue"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & label + value</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" label="Label"/>
+          <AntCheckbox v-model="onValue" label="Label"/>
+          <AntCheckbox v-model="offValue" label="Label">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" label="Label">
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+        <AntFormGroupLabel>Description & description + value</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet">
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+        <AntFormGroupLabel>Content</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" class="w-28">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" class="w-28">
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & Description</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & Description & Content</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+            label="Label"
+          >
+            Value
+          </AntCheckbox>
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+            label="Label"
+          >
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  })
+};

package/dist/runtime/components/{form/AntCheckboxWidget → inputs}/__stories/AntCheckboxGroup.stories.mjs

@@ -1,11 +1,13 @@
 import AntCheckboxGroup from "../AntCheckboxGroup.vue";
-import { computed, ref } from "vue";
-import { InputColorType, Size } from "../../../../enums/index.mjs";
-import { Direction } from "../../../../enums/Direction.enum.mjs";
+import { reactive } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { Direction } from "../../../enums/Direction.enum.mjs";
 import { useFieldValidator } from "@antify/validate";
+import { AntCheckboxSize } from "../__types/AntCheckbox.types.mjs";
 const meta = {
-  title: "Components/Forms/Checkbox/Checkbox Group",
+  title: "Inputs/Checkbox Group",
   component: AntCheckboxGroup,
+  parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     modelValue: {
       description: "Contains the list of selected checkboxes (the value prop of the checkboxes)"
@@ -13,13 +15,13 @@ const meta = {
     checkboxes: {
       description: "List of checkboxes to be displayed"
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     },
     size: {
       control: { type: "select" },
-      options: Object.values(Size)
+      options: Object.values(AntCheckboxSize)
     },
     direction: {
       control: { type: "select" },
@@ -32,21 +34,10 @@ export const Docs = {
   render: (args) => ({
     components: { AntCheckboxGroup },
     setup() {
-      const value = computed({
-        get() {
-          return args.modelValue;
-        },
-        set(val) {
-          args.modelValue = val;
-        }
-      });
-      return {
-        args,
-        value
-      };
+      return { args };
     },
     template: `
-      <AntCheckboxGroup v-bind="args" v-model="value" />
+      <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
     `
   }),
   args: {
@@ -70,27 +61,25 @@ export const WithValidator = {
   render: (args) => ({
     components: { AntCheckboxGroup },
     setup() {
-      const value = computed({
-        get() {
-          return args.modelValue;
-        },
-        set(val) {
-          args.modelValue = val;
-        }
-      });
-      const validator = ref(useFieldValidator((val) => val.length >= 2 || "Select at least 2"));
-      validator.value.validate(value.value);
+      const validator = reactive(useFieldValidator((val) => val.length >= 2 || "Select at least 2"));
       return {
         args,
-        value,
-        validator
+        validator,
+        InputState
       };
     },
     template: `
-      <AntCheckboxGroup v-bind="args" v-model="value" :validator="validator"/>
+      <AntCheckboxGroup
+        v-bind="args"
+        v-model="args.modelValue"
+        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+        @validate="(val) => validator.validate(val)"
+      />
     `
   }),
   args: {
-    ...Docs.args
+    ...Docs.args,
+    modelValue: null
   }
 };

package/dist/runtime/components/inputs/__stories/AntDateInput.stories.d.ts

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

package/dist/runtime/components/inputs/__stories/AntDateInput.stories.mjs

@@ -0,0 +1,193 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import { Direction } from "../../../enums/Direction.enum.mjs";
+import AntDateInput from "../AntDateInput.vue";
+import { InputState } from "../../../enums/index.mjs";
+import { AntDateInputTypes } from "../__types/AntDateInput.types.mjs";
+import { isRequiredRule, useFieldValidator } from "@antify/validate";
+import { reactive } from "vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Inputs/Date Input",
+  component: AntDateInput,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      table: { type: { summary: "string|null" } }
+    },
+    type: {
+      control: { type: "select" },
+      options: Object.values(AntDateInputTypes)
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDateInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntDateInput
+        v-bind="args"
+        v-model="args.modelValue"
+      />
+    `
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const WithValidator = {
+  render: (args) => ({
+    components: { AntDateInput },
+    setup() {
+      const validator = reactive(useFieldValidator([
+        isRequiredRule,
+        (val) => typeof val !== "number" || val <= 8 || "Value should not be bigger than 8"
+      ]));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntDateInput
+        v-bind="args"
+        v-model="args.modelValue"
+        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+        @validate="(val) => validator.validate(val)"
+      />
+    `
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntDateInput, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      return { args, InputState, Size, AntDateInputType: AntDateInputTypes, Direction };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>
+          State
+        </AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            :state="InputState.info"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            :state="InputState.success"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            :state="InputState.warning"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            :state="InputState.danger"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>
+          Type
+        </AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            label="Type date"
+            :type="AntDateInputType.date"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            label="Type datetimeLocal"
+            :type="AntDateInputType.datetimeLocal"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            label="Type month"
+            :type="AntDateInputType.month"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            label="Type time"
+            :type="AntDateInputType.time"
+          />
+          <AntDateInput
+            v-bind="args"
+            v-model="args.modelValue"
+            label="Type week"
+            :type="AntDateInputType.week"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>
+          Size
+        </AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntDateInput
+            v-bind="args"
+            value="2024-01-01"
+            :size="Size.lg"
+          />
+          <AntDateInput
+            v-bind="args"
+            value="2018-06-12T19:30"
+            :size="Size.md"
+          />
+          <AntDateInput
+            v-bind="args"
+            value="2024-12"
+            :size="Size.sm"
+          />
+          <AntDateInput
+            v-bind="args"
+            value="14:28"
+            :size="Size.xs"
+          />
+          <AntDateInput
+            v-bind="args"
+            value="2024-W18"
+            :size="Size.xs2"
+          />
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};

package/dist/runtime/components/{form → inputs}/__stories/AntNumberInput.stories.d.ts

@@ -4,4 +4,6 @@ declare const meta: Meta<typeof AntNumberInput>;
 export default meta;
 type Story = StoryObj<typeof AntNumberInput>;
 export declare const Docs: Story;
+export declare const withValidator: Story;
 export declare const Limited: Story;
+export declare const WithIndicators: Story;