@antify/ui-module 1.5.1 → 1.7.1

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

@@ -0,0 +1,103 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntSearch from "../AntSearch.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import { ref } from "vue";
+const meta = {
+  title: "Inputs/Search",
+  component: AntSearch,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: { type: { summary: "string|null" } }
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    },
+    inputTimeout: {
+      description: "How long is the timeout between inputs to update the value in milliseconds"
+    },
+    query: {
+      description: "Read and write the value into url as urldecoded string. Using the given string as query name."
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "Search" } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntSearch },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntSearch v-bind="args" v-model="args.modelValue"/>
+      <div class="text-xs mt-4">Reactive value: {{ args.modelValue }}</div>
+    `
+  }),
+  args: {
+    modelValue: "",
+    placeholder: "Search"
+  }
+};
+export const summary = {
+  render: (args) => ({
+    components: { AntSearch, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const value = ref("Keyword");
+      const noValue = ref("");
+      return { args, Size, value, noValue };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSearch v-bind="args" v-model="noValue" :size="Size.lg"/>
+          <AntSearch v-bind="args" v-model="noValue" :size="Size.md"/>
+          <AntSearch v-bind="args" v-model="noValue" :size="Size.sm"/>
+          <AntSearch v-bind="args" v-model="noValue" :size="Size.xs"/>
+          <AntSearch v-bind="args" v-model="noValue" :size="Size.xs2"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Size & Value</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSearch v-bind="args" v-model="value" :size="Size.lg"/>
+          <AntSearch v-bind="args" v-model="value" :size="Size.md"/>
+          <AntSearch v-bind="args" v-model="value" :size="Size.sm"/>
+          <AntSearch v-bind="args" v-model="value" :size="Size.xs"/>
+          <AntSearch v-bind="args" v-model="value" :size="Size.xs2"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSearch v-model="noValue" disabled/>
+          <AntSearch v-model="value" disabled/>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+          <AntSearch v-model="value" skeleton label="Label" description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntSearch v-model="value"/>
+
+        <AntFormGroupLabel>Label</AntFormGroupLabel>
+        <AntSearch v-model="value" label="Label"/>
+
+        <AntFormGroupLabel>Description</AntFormGroupLabel>
+        <AntSearch v-model="value" description="Lorem ipsum dolor sit amet"/>
+
+        <AntFormGroupLabel>Label & Description</AntFormGroupLabel>
+        <AntSearch v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    placeholder: "Search"
+  }
+};

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

@@ -1,10 +1,10 @@
 import { Size } from "../../../enums/Size.enum.mjs";
 import AntSelect from "../AntSelect.vue";
-import { computed } from "vue";
+import { computed, reactive } from "vue";
 import { useFieldValidator } from "@antify/validate";
-import { InputColorType } from "../../../enums/index.mjs";
+import { InputState } from "../../../enums/index.mjs";
 const meta = {
-  title: "Components/Forms/Select",
+  title: "Inputs/Select",
   component: AntSelect,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
@@ -20,12 +20,12 @@ const meta = {
         }
       }
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     },
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size),
       table: { defaultValue: { summary: Size.md } }
     },
@@ -76,13 +76,45 @@ export const Docs = {
   }
 };
 export const withValidator = {
-  render: Docs.render,
+  render: (args) => ({
+    components: { AntSelect },
+    setup() {
+      const modelValue = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      const validator = reactive(
+        useFieldValidator([
+          (val) => val !== null || "This field should not be empty",
+          (val) => val === "invalid" ? 'Value "Invalid" is not allowed' : true
+        ])
+      );
+      return { args, modelValue, validator, InputState };
+    },
+    template: `
+      <AntSelect
+        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)"
+      />`
+  }),
   args: {
     ...Docs.args,
-    nullable: true,
-    validator: useFieldValidator([
-      (val) => val !== null || "This field should not be empty"
-    ])
+    options: [
+      {
+        label: "Valid",
+        value: "valid"
+      },
+      {
+        label: "Invalid",
+        value: "invalid"
+      }
+    ],
+    nullable: true
   }
 };
 export const nullable = {
@@ -160,39 +192,39 @@ export const summary = {
           <AntSelect v-bind="args" value="5"/>
         </div>
         <div class="flex gap-2.5">
-          <AntSelect v-bind="args" :value="null" size="md" color-type="base"/>
-          <AntSelect v-bind="args" :value="null" size="md" color-type="info"/>
-          <AntSelect v-bind="args" :value="null" size="md" color-type="success"/>
-          <AntSelect v-bind="args" :value="null" size="md" color-type="warning"/>
-          <AntSelect v-bind="args" :value="null" size="md" color-type="danger"/>
+          <AntSelect v-bind="args" :value="null" size="md" state="base"/>
+          <AntSelect v-bind="args" :value="null" size="md" state="info"/>
+          <AntSelect v-bind="args" :value="null" size="md" state="success"/>
+          <AntSelect v-bind="args" :value="null" size="md" state="warning"/>
+          <AntSelect v-bind="args" :value="null" size="md" state="danger"/>
         </div>
         <div class="flex gap-2.5">
-          <AntSelect v-bind="args" :value="null" size="sm" color-type="base"/>
-          <AntSelect v-bind="args" :value="null" size="sm" color-type="info"/>
-          <AntSelect v-bind="args" :value="null" size="sm" color-type="success"/>
-          <AntSelect v-bind="args" :value="null" size="sm" color-type="warning"/>
-          <AntSelect v-bind="args" :value="null" size="sm" color-type="danger"/>
+          <AntSelect v-bind="args" :value="null" size="sm" state="base"/>
+          <AntSelect v-bind="args" :value="null" size="sm" state="info"/>
+          <AntSelect v-bind="args" :value="null" size="sm" state="success"/>
+          <AntSelect v-bind="args" :value="null" size="sm" state="warning"/>
+          <AntSelect v-bind="args" :value="null" size="sm" state="danger"/>
         </div>
         <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="md" color-type="base"/>
-          <AntSelect v-bind="args" value="1" size="md" color-type="info"/>
-          <AntSelect v-bind="args" value="1" size="md" color-type="success"/>
-          <AntSelect v-bind="args" value="1" size="md" color-type="warning"/>
-          <AntSelect v-bind="args" value="1" size="md" color-type="danger"/>
+          <AntSelect v-bind="args" value="1" size="md" state="base"/>
+          <AntSelect v-bind="args" value="1" size="md" state="info"/>
+          <AntSelect v-bind="args" value="1" size="md" state="success"/>
+          <AntSelect v-bind="args" value="1" size="md" state="warning"/>
+          <AntSelect v-bind="args" value="1" size="md" state="danger"/>
         </div>
         <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="sm" color-type="base"/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="info"/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="success"/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="warning"/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="danger"/>
+          <AntSelect v-bind="args" value="1" size="sm" state="base"/>
+          <AntSelect v-bind="args" value="1" size="sm" state="info"/>
+          <AntSelect v-bind="args" value="1" size="sm" state="success"/>
+          <AntSelect v-bind="args" value="1" size="sm" state="warning"/>
+          <AntSelect v-bind="args" value="1" size="sm" state="danger"/>
         </div>
         <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="sm" color-type="base" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="info" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="success" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="warning" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" color-type="danger" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" state="base" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" state="info" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" state="success" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" state="warning" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" state="danger" disabled/>
         </div>
         <div class="flex gap-2.5">
           <AntSelect v-bind="args" :value="null" grouped="none"/>
@@ -201,18 +233,18 @@ export const summary = {
           <AntSelect v-bind="args" :value="null" grouped="left"/>
         </div>
         <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="md" nullable color-type="base"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable color-type="info"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable color-type="success"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable color-type="warning"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable color-type="danger"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable state="base"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable state="info"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable state="success"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable state="warning"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable state="danger"/>
         </div>
         <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="base"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="info"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="success"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="warning"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="danger"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable state="base"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable state="info"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable state="success"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable state="warning"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable state="danger"/>
         </div>
       </div>
     `

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

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/vue3';
-import { AntSwitch } from '../index';
+import AntSwitch from '../AntSwitch.vue';
 declare const meta: Meta<typeof AntSwitch>;
 export default meta;
 type Story = StoryObj<typeof AntSwitch>;

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

@@ -0,0 +1,296 @@
+import AntSwitch from "../AntSwitch.vue";
+import { computed, reactive, ref } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+import { AntSwitchSize } from "../__types/AntSwitch.types.mjs";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Inputs/Switch",
+  component: AntSwitch,
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntSwitchSize)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntSwitch },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntSwitch v-bind="args"/>
+    `
+  }),
+  args: {
+    modelValue: false
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntSwitch },
+    setup() {
+      const value = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      const validator = reactive(useFieldValidator([
+        (val) => {
+          return !val || "Switch must be off";
+        }
+      ]));
+      return { args, value, validator, InputState };
+    },
+    template: `
+      <AntSwitch
+        v-bind="args"
+        v-model="value"
+        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+        @validate="(val) => validator.validate(val)"
+      >
+        Value must be false
+      </AntSwitch>
+
+      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntSwitch, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const value = ref(true);
+      const notValue = ref(false);
+      return { args, value, notValue, InputState, AntSwitchSize };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States & Messages & False value</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitch
+            v-model="notValue"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.base">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.info">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.success">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.warning">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.danger">Content
+          </AntSwitch>
+        </AntFormGroup>
+        <AntFormGroupLabel>States & Messages & True value</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitch
+            v-model="value"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.base">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.info">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.success">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.warning">Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Here is a message']"
+            :state="InputState.danger">Content
+          </AntSwitch>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="AntSwitchSize.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="AntSwitchSize.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="AntSwitchSize.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="AntSwitchSize.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntSwitch
+                v-model="notValue"
+                label="Label"
+                description="Lorem ipsum dolor sit amet"
+                :state="InputState.base"
+                :disabled="true"
+              >Content
+              </AntSwitch>
+              <AntSwitch
+                v-model="value"
+                label="Label"
+                description="Lorem ipsum dolor sit amet"
+                :state="InputState.base"
+                :disabled="true"
+              >Content
+              </AntSwitch>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntSwitch
+                v-model="notValue"
+                label="Label"
+                description="Lorem ipsum dolor sit amet"
+                :state="InputState.base"
+                :readonly="true"
+              >Content
+              </AntSwitch>
+              <AntSwitch
+                v-model="value"
+                label="Label"
+                description="Lorem ipsum dolor sit amet"
+                :state="InputState.base"
+                :readonly="true"
+              >Content
+              </AntSwitch>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntSwitch
+              v-model="value"
+              label="Label"
+              description="Lorem ipsum dolor sit amet"
+              :state="InputState.base"
+              skeleton
+            >Content
+            </AntSwitch>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain & (Plain & Content)</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitch v-model="notValue"/>
+          <AntSwitch v-model="value"/>
+          <AntSwitch v-model="notValue">Content</AntSwitch>
+          <AntSwitch v-model="value">Content</AntSwitch>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & (Label & Content)</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitch v-model="notValue" label="Label"/>
+          <AntSwitch v-model="value" label="Label"/>
+          <AntSwitch v-model="notValue" label="Label">Content</AntSwitch>
+          <AntSwitch v-model="value" label="Label">Content</AntSwitch>
+        </AntFormGroup>
+        <AntFormGroupLabel>Description & (Description & Content)</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & Description & (Label & Description & Content)</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
+          >Content
+          </AntSwitch>
+          <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
+          >Content
+          </AntSwitch>
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  })
+};

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

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/vue3';
-import { AntSwitcher } from '../index';
+import AntSwitcher from '../AntSwitcher.vue';
 declare const meta: Meta<typeof AntSwitcher>;
 export default meta;
 type Story = StoryObj<typeof AntSwitcher>;