@antify/ui-module 1.5.1 → 1.7.1

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

@@ -0,0 +1,235 @@
+import { computed, reactive, ref } from "vue";
+import { Size } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+import { InputState } from "../../../enums/index.mjs";
+import AntSwitcher from "../AntSwitcher.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Inputs/Switcher",
+  component: AntSwitcher,
+  argTypes: {
+    modelValue: {
+      control: "text"
+    },
+    options: {
+      table: {
+        type: {
+          summary: "string | SwitcherOption[]",
+          detail: `
+type SwitcherOption = {
+  label: string;
+  value: string | number;
+  [key: string]: unknown;
+}
+          `
+        }
+      }
+    },
+    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: { AntSwitcher },
+    setup() {
+      const modelValue = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      return { args, modelValue };
+    },
+    template: `
+      <AntSwitcher v-bind="args" v-model="modelValue"/>
+    `
+  }),
+  args: {
+    options: [
+      {
+        label: "Entry 1",
+        value: "entry-1"
+      },
+      {
+        label: "Entry 2",
+        value: "entry-2"
+      },
+      {
+        label: "Entry 3",
+        value: "entry-3"
+      },
+      {
+        label: "Entry 4",
+        value: "entry-4"
+      }
+    ],
+    modelValue: "entry-1"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntSwitcher },
+    setup() {
+      const modelValue = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      const validator = reactive(useFieldValidator(
+        (val) => val === "entry-1" ? "Select something else" : true
+      ));
+      return { args, modelValue, validator, InputState };
+    },
+    template: `
+      <AntSwitcher
+        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)"
+      >
+        This value should be false
+      </AntSwitcher>
+    `
+  }),
+  args: {
+    options: [
+      {
+        label: "Entry 1",
+        value: "entry-1"
+      },
+      {
+        label: "Entry 2",
+        value: "entry-2"
+      },
+      {
+        label: "Entry 3",
+        value: "entry-3"
+      },
+      {
+        label: "Entry 4",
+        value: "entry-4"
+      }
+    ],
+    modelValue: "entry-1"
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntSwitcher, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const modelValue = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      const skeleton = ref(true);
+      return { args, modelValue, InputState, skeleton, Size };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.base"/>
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.info"/>
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.success"/>
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.warning"/>
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                       :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.lg"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.md"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.sm"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.xs"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.xs2"
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+          />
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntSwitcher v-bind="args" v-model="modelValue" :disabled="true" label="Label" class="w-60"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntSwitcher v-bind="args" v-model="modelValue" :readonly="true" label="Label" class="w-60"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntSwitcher v-bind="args" v-model="modelValue" :skeleton="true" label="Label" class="w-60"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+            />
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntSwitcher v-bind="args" v-model="modelValue" class="w-60"/>
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntSwitcher v-bind="args" v-model="modelValue" label="Label" class="w-60"/>
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntSwitcher v-bind="args" v-model="modelValue" class="w-60"
+                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntSwitcher v-bind="args" v-model="modelValue" label="Label" class="w-60"
+                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    options: [
+      {
+        label: "Entry 1",
+        value: "entry-1"
+      },
+      {
+        label: "Entry 2",
+        value: "entry-2"
+      },
+      {
+        label: "Entry 3",
+        value: "entry-3"
+      },
+      {
+        label: "Entry 4",
+        value: "entry-4"
+      }
+    ],
+    modelValue: "entry-1"
+  }
+};

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

@@ -1,9 +1,9 @@
-import { AntTagInput } from '../index';
+import AntTagInput from '../AntTagInput.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 declare const meta: Meta<typeof AntTagInput>;
 export default meta;
 type Story = StoryObj<typeof AntTagInput>;
 export declare const Docs: Story;
+export declare const withValidator: Story;
 export declare const AllowCreate: Story;
-export declare const Disabled: Story;
-export declare const Skeleton: Story;
+export declare const summary: Story;

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

@@ -0,0 +1,228 @@
+import AntTagInput from "../AntTagInput.vue";
+import { reactive } from "vue";
+import { ref } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { AntTagInputSize } from "../__types/AntTagInput.types.mjs";
+import { useFieldValidator } from "@antify/validate";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Inputs/Tag Input",
+  component: AntTagInput,
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: { type: { summary: "string|null" } }
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntTagInputSize),
+      table: { defaultValue: { summary: AntTagInputSize.md } }
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "this.label" } }
+    },
+    createCallback: {
+      control: "none",
+      description: "If allowCreate is true the createCallback needs to be specified. It will be called when the user creates a new tag. It should return a promise that resolves to a SelectOption.",
+      table: {
+        type: {
+          summary: "(item: string) => Promise<SelectOption>",
+          detail: `
+Params:
+item: string - the label of the new tag
+
+Returns:
+Promise<SelectOption> - the new tag as a SelectOption
+          `
+        }
+      }
+    }
+  }
+};
+export default meta;
+const options = [
+  {
+    label: "Tag",
+    value: "1"
+  },
+  {
+    label: "Cat",
+    value: "2"
+  },
+  {
+    label: "Dog",
+    value: "3"
+  },
+  {
+    label: "Chicken",
+    value: "4"
+  }
+];
+export const Docs = {
+  render: (args) => ({
+    components: { AntTagInput },
+    setup() {
+      const value = ref([]);
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <div style="width: 360px">
+        <AntTagInput v-model="value" v-bind="args"/>
+      </div>
+    `
+  }),
+  args: {
+    options
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntTagInput },
+    setup() {
+      const value = ref(null);
+      const validator = reactive(useFieldValidator((val) => val?.length <= 3 || "Max 3 tags are allowed"));
+      return {
+        args,
+        value,
+        validator,
+        InputState
+      };
+    },
+    template: `
+      <div style="width: 360px">
+        <AntTagInput
+          v-model="value"
+          v-bind="args"
+          description="Choose max. 3 tags."
+          :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+          :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+          @validate="(val) => validator.validate(val)"
+        />
+      </div>
+    `
+  }),
+  args: {
+    options
+  }
+};
+export const AllowCreate = {
+  render: Docs.render,
+  args: {
+    options,
+    allowCreate: true,
+    createCallback(item) {
+      return new Promise((resolve) => {
+        resolve({ label: item, value: `${Math.random()}-${item}` });
+      });
+    }
+  }
+};
+export const summary = {
+  render: (args) => ({
+    components: { AntTagInput, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const value = ref(["1", "2"]);
+      const noValue = ref([]);
+      return {
+        args,
+        value,
+        noValue,
+        InputState,
+        AntTagInputSize
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States</AntFormGroupLabel>
+        <AntFormGroup>
+          <AntFormGroup direction="row">
+            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.info" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.success" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.warning" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.danger" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup direction="row">
+            <AntTagInput v-bind="args" v-model="value" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="value" :state="InputState.info" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="value" :state="InputState.success" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="value" :state="InputState.warning" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="value" :state="InputState.danger" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup>
+          <AntFormGroup direction="row">
+            <AntTagInput v-bind="args" v-model="noValue" :size="AntTagInputSize.lg" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="noValue" :size="AntTagInputSize.md" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="noValue" :size="AntTagInputSize.sm" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup direction="row">
+            <AntTagInput v-bind="args" v-model="value" :size="AntTagInputSize.lg" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="value" :size="AntTagInputSize.md" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+            <AntTagInput v-bind="args" v-model="value" :size="AntTagInputSize.sm" class="w-48" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
+                         description="Lorem ipsum dolor sit amet." disabled/>
+            <AntTagInput v-bind="args" v-model="value" class="w-48" label="Label" value="Value"
+                         description="Lorem ipsum dolor sit amet." disabled/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <!--TODO:: Add readonly prop if it is implemented-->
+            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
+                         description="Lorem ipsum dolor sit amet."/>
+            <AntTagInput v-bind="args" v-model="value" class="w-48" label="Label" value="Value"
+                         description="Lorem ipsum dolor sit amet."/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
+                         description="Lorem ipsum dolor sit amet." skeleton/>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntTagInput v-bind="args" v-model="noValue" class="w-48" value="value"/>
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"/>
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntTagInput v-bind="args" v-model="noValue" class="w-48" value="Value"
+                     description="Lorem ipsum dolor sit amet."/>
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
+                     description="Lorem ipsum dolor sit amet."/>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};

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

@@ -4,4 +4,6 @@ declare const meta: Meta<typeof AntTextInput>;
 export default meta;
 type Story = StoryObj<typeof AntTextInput>;
 export declare const Docs: Story;
+export declare const withValidator: Story;
 export declare const limited: Story;
+export declare const Summary: Story;