@antify/ui 1.0.0

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

@@ -0,0 +1,344 @@
+import AntSwitch from "../AntSwitch.vue";
+import { computed, reactive, ref } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+import { Size } from "../../../enums/Size.enum.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(Size)
+    }
+  }
+};
+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, Size };
+    },
+    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="Size.lg"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.lg"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="Size.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="Size.xs2"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.xs2"
+            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/components/inputs/__stories/AntSwitcher.stories.d.ts

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

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

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withValidator = exports.default = exports.Summary = exports.Docs = void 0;
+var _vue = require("vue");
+var _enums = require("../../../enums");
+var _validate = require("@antify/validate");
+var _AntSwitcher = _interopRequireDefault(require("../AntSwitcher.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Switcher",
+  component: _AntSwitcher.default,
+  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(_enums.InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Size)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntSwitcher: _AntSwitcher.default
+    },
+    setup() {
+      const modelValue = (0, _vue.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"
+  }
+};
+const withValidator = exports.withValidator = {
+  render: args => ({
+    components: {
+      AntSwitcher: _AntSwitcher.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 === "entry-1" ? "Select something else" : true));
+      return {
+        args,
+        modelValue,
+        validator,
+        InputState: _enums.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"
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntSwitcher: _AntSwitcher.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const modelValue = (0, _vue.computed)({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: val => args.modelValue = val
+      });
+      const skeleton = (0, _vue.ref)(true);
+      return {
+        args,
+        modelValue,
+        InputState: _enums.InputState,
+        skeleton,
+        Size: _enums.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"
+  }
+};