@antify/ui 1.0.0

package/dist/components/inputs/__stories/AntSelect.stories.js

@@ -0,0 +1,287 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withValidator = exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
+var _Size = require("../../../enums/Size.enum");
+var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
+var _vue = require("vue");
+var _validate = require("@antify/validate");
+var _enums = require("../../../enums");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Select",
+  component: _AntSelect.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
+    },
+    options: {
+      description: "List of SelectOptions",
+      table: {
+        type: {
+          summary: "SelectOption[]",
+          detail: "type SelectOption = {label: string; value: string | number;}"
+        }
+      }
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.Size),
+      table: {
+        defaultValue: {
+          summary: _Size.Size.md
+        }
+      }
+    },
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const options = [{
+  label: "Option 1",
+  value: "1"
+}, {
+  label: "Option 2",
+  value: "2"
+}, {
+  label: "Option 3",
+  value: "3"
+}, {
+  label: "Option 4",
+  value: "4"
+}];
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntSelect: _AntSelect.default
+    },
+    setup() {
+      const modelValue = (0, _vue.computed)({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: val => args.modelValue = val
+      });
+      return {
+        args,
+        modelValue
+      };
+    },
+    template: `
+      <AntSelect v-bind="args" v-model="modelValue"/>`
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    options,
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+const withValidator = exports.withValidator = {
+  render: args => ({
+    components: {
+      AntSelect: _AntSelect.default
+    },
+    setup() {
+      const modelValue = (0, _vue.computed)({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: val => args.modelValue = val
+      });
+      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([val => val !== null || "This field should not be empty", val => val === "invalid" ? 'Value "Invalid" is not allowed' : true]));
+      return {
+        args,
+        modelValue,
+        validator,
+        InputState: _enums.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,
+    options: [{
+      label: "Valid",
+      value: "valid"
+    }, {
+      label: "Invalid",
+      value: "invalid"
+    }],
+    nullable: true
+  }
+};
+const nullable = exports.nullable = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    modelValue: "1",
+    nullable: true
+  }
+};
+const skeleton = exports.skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    nullable: true,
+    skeleton: true
+  }
+};
+const disabled = exports.disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+const withPlaceholder = exports.withPlaceholder = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    placeholder: "Lorem ipsum dolor sit amet"
+  }
+};
+const ellipsisText = exports.ellipsisText = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="px-4 pt-4 pb-72 flex gap-2.5">
+        <div class="w-1/6 flex flex-col gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="w-2/6 flex flex-row gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="flex flex-row gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" wrapper-class="w-1/6" v-model="modelValue"/>
+          <AntSelect v-bind="args" wrapper-class="w-1/6" value="5"/>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    nullable: true
+  }
+};
+const summary = exports.summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntSelect: _AntSelect.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="p-4 flex flex-col gap-2.5">
+        <div class="flex w-2/5 gap-2.5">
+          <AntSelect v-bind="args" :value="null"
+                     placeholder="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="flex gap-2.5">
+          <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" 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" 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" 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" 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"/>
+          <AntSelect v-bind="args" :value="null" grouped="right"/>
+          <AntSelect v-bind="args" :value="null" grouped="center"/>
+          <AntSelect v-bind="args" :value="null" grouped="left"/>
+        </div>
+        <div class="flex gap-2.5">
+          <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 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>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};

package/dist/components/inputs/__stories/AntSelect.stories.mjs

@@ -0,0 +1,255 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntSelect from "../AntSelect.vue";
+import { computed, reactive } from "vue";
+import { useFieldValidator } from "@antify/validate";
+import { InputState } from "../../../enums/index.mjs";
+const meta = {
+  title: "Inputs/Select",
+  component: AntSelect,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      table: { type: { summary: "string|null" } }
+    },
+    options: {
+      description: "List of SelectOptions",
+      table: {
+        type: {
+          summary: "SelectOption[]",
+          detail: "type SelectOption = {label: string; value: string | number;}"
+        }
+      }
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "this.label" } }
+    }
+  }
+};
+export default meta;
+const options = [
+  {
+    label: "Option 1",
+    value: "1"
+  },
+  {
+    label: "Option 2",
+    value: "2"
+  },
+  {
+    label: "Option 3",
+    value: "3"
+  },
+  {
+    label: "Option 4",
+    value: "4"
+  }
+];
+export const Docs = {
+  render: (args) => ({
+    components: { AntSelect },
+    setup() {
+      const modelValue = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      return { args, modelValue };
+    },
+    template: `
+      <AntSelect v-bind="args" v-model="modelValue"/>`
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    options,
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const withValidator = {
+  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,
+    options: [
+      {
+        label: "Valid",
+        value: "valid"
+      },
+      {
+        label: "Invalid",
+        value: "invalid"
+      }
+    ],
+    nullable: true
+  }
+};
+export const nullable = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    modelValue: "1",
+    nullable: true
+  }
+};
+export const skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    nullable: true,
+    skeleton: true
+  }
+};
+export const disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+export const withPlaceholder = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    placeholder: "Lorem ipsum dolor sit amet"
+  }
+};
+export const ellipsisText = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="px-4 pt-4 pb-72 flex gap-2.5">
+        <div class="w-1/6 flex flex-col gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="w-2/6 flex flex-row gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="flex flex-row gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" wrapper-class="w-1/6" v-model="modelValue"/>
+          <AntSelect v-bind="args" wrapper-class="w-1/6" value="5"/>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    nullable: true
+  }
+};
+export const summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntSelect },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-4 flex flex-col gap-2.5">
+        <div class="flex w-2/5 gap-2.5">
+          <AntSelect v-bind="args" :value="null"
+                     placeholder="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="flex gap-2.5">
+          <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" 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" 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" 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" 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"/>
+          <AntSelect v-bind="args" :value="null" grouped="right"/>
+          <AntSelect v-bind="args" :value="null" grouped="center"/>
+          <AntSelect v-bind="args" :value="null" grouped="left"/>
+        </div>
+        <div class="flex gap-2.5">
+          <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 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>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};

package/dist/components/inputs/__stories/AntSwitch.stories.d.ts

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