@antify/ui 1.0.0

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

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withValidator = exports.default = exports.WithIndicators = exports.Summary = exports.Limited = exports.Docs = void 0;
+var _Size = require("../../../enums/Size.enum");
+var _AntNumberInput = _interopRequireDefault(require("../AntNumberInput.vue"));
+var _State = require("../../../enums/State.enum");
+var _validate = require("@antify/validate");
+var _vue = require("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 = {
+  components: {
+    AntFormGroupLabel: _AntFormGroupLabel.default,
+    AntFormGroup: _AntFormGroup.default
+  },
+  title: "Inputs/Number Input",
+  component: _AntNumberInput.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      control: {
+        type: "number"
+      },
+      table: {
+        type: {
+          summary: "number|null"
+        }
+      }
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_State.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 Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntNumberInput
+        v-bind="args"
+        v-model="args.modelValue"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    steps: 1,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+const withValidator = exports.withValidator = {
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default
+    },
+    setup() {
+      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(_validate.isRequiredRule));
+      return {
+        args,
+        validator,
+        InputState: _State.InputState
+      };
+    },
+    template: `
+      <AntNumberInput
+        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,
+    steps: 1,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+const Limited = exports.Limited = {
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default
+    },
+    setup() {
+      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, val => val <= 10 || "Value should not be bigger than 10", val => val <= 11 || "It should be really not bigger than 10!!!!"]));
+      return {
+        args,
+        validator,
+        InputState: _State.InputState
+      };
+    },
+    template: `
+      <AntNumberInput
+        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,
+    modelValue: 50,
+    limiter: true,
+    max: 10,
+    indicators: true
+  }
+};
+const WithIndicators = exports.WithIndicators = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    indicators: true
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const value = (0, _vue.ref)(100.5);
+      return {
+        args,
+        value,
+        InputState: _State.InputState,
+        Size: _Size.Size
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.lg" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.md" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.sm" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.xs" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.xs2" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.lg" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.md" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.sm" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.xs" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.xs2" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" disabled label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" disabled indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" readonly label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" readonly indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" :skeleton="true" label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" :skeleton="true" indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" placeholder="Placeholder"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" placeholder="Placeholder"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" label="Label"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    modelValue: null
+  }
+};

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

@@ -0,0 +1,246 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntNumberInput from "../AntNumberInput.vue";
+import { InputState } from "../../../enums/State.enum.mjs";
+import { isRequiredRule, useFieldValidator } from "@antify/validate";
+import { reactive, ref } from "vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  components: { AntFormGroupLabel, AntFormGroup },
+  title: "Inputs/Number Input",
+  component: AntNumberInput,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      control: { type: "number" },
+      table: { type: { summary: "number|null" } }
+    },
+    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;
+export const Docs = {
+  render: (args) => ({
+    components: { AntNumberInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntNumberInput
+        v-bind="args"
+        v-model="args.modelValue"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    steps: 1,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntNumberInput },
+    setup() {
+      const validator = reactive(useFieldValidator(isRequiredRule));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntNumberInput
+        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,
+    steps: 1,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const Limited = {
+  render: (args) => ({
+    components: { AntNumberInput },
+    setup() {
+      const validator = reactive(useFieldValidator([
+        isRequiredRule,
+        (val) => val <= 10 || "Value should not be bigger than 10",
+        (val) => val <= 11 || "It should be really not bigger than 10!!!!"
+      ]));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntNumberInput
+        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,
+    modelValue: 50,
+    limiter: true,
+    max: 10,
+    indicators: true
+  }
+};
+export const WithIndicators = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    indicators: true
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntNumberInput, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const value = ref(100.5);
+      return { args, value, InputState, Size };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>States</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                          :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.info"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.success"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.warning"/>
+          <AntNumberInput v-bind="args" v-model="value" indicators label="Label"
+                          description="Lorem ipsum dolor sit amet" :state="InputState.danger"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.lg" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.md" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.sm" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.xs" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" :size="Size.xs2" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.lg" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.md" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.sm" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.xs" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" indicators :size="Size.xs2" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" disabled label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" disabled indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" readonly label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" readonly indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" :skeleton="true" label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+            <AntNumberInput v-bind="args" v-model="args.modelValue" :skeleton="true" indicators label="Label"
+                            description="Lorem ipsum dolor sit amet"/>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" placeholder="Placeholder"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" placeholder="Placeholder"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" label="Label"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntFormGroup class="w-72">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" indicators v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    modelValue: null
+  }
+};

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

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