@antify/ui 1.0.0

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

@@ -0,0 +1,251 @@
+import { ref } from "vue";
+import AntRadioGroup from "../AntRadioGroup.vue";
+import { InputState, Size } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+import { Direction } from "../../../enums/Direction.enum.mjs";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+const meta = {
+  title: "Inputs/Radio Group",
+  component: AntRadioGroup,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    label: {
+      description: "The label for the radio widget"
+    },
+    description: {
+      description: "Description for the radio widget"
+    },
+    radioButtons: {
+      description: "Array of RadioButton",
+      table: {
+        type: {
+          summary: "AntRadioType[]",
+          detail: `
+{
+  value: string;
+  label?: string;
+  disabled?: boolean;
+  state?: InputState;
+}
+`
+        }
+      }
+    },
+    modelValue: {
+      description: "Reactive value, contains the currently selected radio-button value",
+      table: {
+        type: {
+          summary: "string | null"
+        }
+      }
+    },
+    direction: {
+      control: { type: "select" },
+      options: Object.values(Direction)
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    }
+  }
+};
+export default meta;
+const simpleButtons = [
+  {
+    id: "radio-1",
+    label: "Radio 1",
+    value: "radio-1"
+  },
+  {
+    id: "radio-2",
+    label: "Radio 2",
+    value: "radio-2"
+  },
+  {
+    id: "radio-3",
+    label: "Radio 3",
+    value: "radio-3"
+  },
+  {
+    id: "radio-4",
+    label: "Radio 4",
+    value: "radio-4"
+  }
+];
+export const Docs = {
+  render: (args) => ({
+    components: { AntRadioGroup },
+    setup() {
+      const value = ref("");
+      return { args, value };
+    },
+    template: `
+      <AntRadioGroup v-bind="args" v-model="value"/>
+      <span class="text-xs text-gray-500">Reactive value: {{ value }}</span>
+    `
+  }),
+  args: {
+    radioButtons: simpleButtons
+  }
+};
+export const WithValidator = {
+  render: (args) => ({
+    components: { AntRadioGroup },
+    setup() {
+      const value = ref(null);
+      const validator = ref(useFieldValidator([
+        (val) => val !== "invalid-radio" || "Choose other option!"
+      ]));
+      return { args, value, validator, InputState };
+    },
+    template: `
+      <AntRadioGroup
+        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)"
+      />
+    `
+  }),
+  args: {
+    radioButtons: [
+      {
+        id: "radio-1",
+        label: "Radio 1",
+        value: "radio-1"
+      },
+      {
+        id: "radio-2",
+        label: "Radio 2",
+        value: "radio-2"
+      },
+      {
+        id: "invalid-radio",
+        label: "Invalid Radio",
+        value: "invalid-radio"
+      },
+      {
+        id: "radio-4",
+        label: "Radio 4",
+        value: "radio-4"
+      }
+    ]
+  }
+};
+export const summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntRadioGroup, AntFormGroupLabel, AntFormGroup },
+    setup() {
+      const value = ref("radio-3");
+      return { args, value, InputState, Size };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>State</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntRadioGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntRadioGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntRadioGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntRadioGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntRadioGroup
+            v-bind="args"
+            v-model="value"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.lg" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.md" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.sm" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+          <AntRadioGroup v-bind="args" v-model="value" :size="Size.xs2" label="Label"
+                         description="Lorem ipsum dolor sit amet"/>
+        </AntFormGroup>
+
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                             disabled/>
+            </AntFormGroup>
+          </AntFormGroup>
+
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                             :readonly="true"/>
+            </AntFormGroup>
+          </AntFormGroup>
+
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"
+                           :skeleton="true"/>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntRadioGroup v-bind="args" v-model="value"/>
+
+        <AntFormGroupLabel>With label</AntFormGroupLabel>
+        <AntRadioGroup v-bind="args" v-model="value" label="Label"/>
+
+        <AntFormGroupLabel>With description</AntFormGroupLabel>
+        <AntRadioGroup v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet"/>
+
+        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
+        <AntRadioGroup v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet"/>
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};

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

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

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withValidator = exports.default = exports.Docs = void 0;
+var _AntRangeSlider = _interopRequireDefault(require("../AntRangeSlider.vue"));
+var _vue = require("vue");
+var _enums = require("../../../enums");
+var _validate = require("@antify/validate");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Range Slider",
+  component: _AntRangeSlider.default,
+  parameters: {
+    docs: {
+      description: {
+        component: "WIP: waiting for design to finish"
+      }
+    },
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      control: "number",
+      description: "Reactive value"
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntRangeSlider: _AntRangeSlider.default
+    },
+    setup() {
+      const value = (0, _vue.ref)(1);
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <AntRangeSlider v-bind="args" v-model="value"/>
+    `
+  })
+};
+const withValidator = exports.withValidator = {
+  render: args => ({
+    components: {
+      AntRangeSlider: _AntRangeSlider.default
+    },
+    setup() {
+      const value = (0, _vue.ref)(1);
+      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val > 80 || "The value must be bigger than 80!"));
+      return {
+        args,
+        value,
+        validator,
+        InputState: _enums.InputState
+      };
+    },
+    template: `
+      <AntRangeSlider
+        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)"
+      />
+      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+    `
+  }),
+  args: {
+    max: 100,
+    description: "Lorem ipsum dolor sit amet"
+  }
+};

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

@@ -0,0 +1,67 @@
+import AntRangeSlider from "../AntRangeSlider.vue";
+import { reactive, ref } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+const meta = {
+  title: "Inputs/Range Slider",
+  component: AntRangeSlider,
+  parameters: {
+    docs: {
+      description: {
+        component: "WIP: waiting for design to finish"
+      }
+    },
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      control: "number",
+      description: "Reactive value"
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntRangeSlider },
+    setup() {
+      const value = ref(1);
+      return { args, value };
+    },
+    template: `
+      <AntRangeSlider v-bind="args" v-model="value"/>
+    `
+  })
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntRangeSlider },
+    setup() {
+      const value = ref(1);
+      const validator = reactive(useFieldValidator(
+        (val) => val > 80 || "The value must be bigger than 80!"
+      ));
+      return { args, value, validator, InputState };
+    },
+    template: `
+      <AntRangeSlider
+        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)"
+      />
+      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+    `
+  }),
+  args: {
+    max: 100,
+    description: "Lorem ipsum dolor sit amet"
+  }
+};

package/dist/components/inputs/__stories/AntRichTextEditor.stories-old.js

@@ -0,0 +1 @@
+"use strict";

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

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

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

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.summary = exports.default = exports.Docs = void 0;
+var _Size = require("../../../enums/Size.enum");
+var _AntSearch = _interopRequireDefault(require("../AntSearch.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _vue = require("vue");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Search",
+  component: _AntSearch.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.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"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntSearch: _AntSearch.default
+    },
+    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"
+  }
+};
+const summary = exports.summary = {
+  render: args => ({
+    components: {
+      AntSearch: _AntSearch.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const value = (0, _vue.ref)("Keyword");
+      const noValue = (0, _vue.ref)("");
+      return {
+        args,
+        Size: _Size.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/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/components/inputs/__stories/AntSelect.stories.d.ts

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntSelect from '../AntSelect.vue';
+declare const meta: Meta<typeof AntSelect>;
+export default meta;
+type Story = StoryObj<typeof AntSelect>;
+export declare const Docs: Story;
+export declare const withValidator: Story;
+export declare const nullable: Story;
+export declare const skeleton: Story;
+export declare const disabled: Story;
+export declare const withPlaceholder: Story;
+export declare const ellipsisText: Story;
+export declare const summary: Story;