@antify/ui-module 1.7.3 → 1.8.2

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

@@ -1,251 +0,0 @@
-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/runtime/components/inputs/__stories/AntRangeSlider.stories.d.ts

@@ -1,7 +0,0 @@
-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/runtime/components/inputs/__stories/AntRangeSlider.stories.mjs

@@ -1,67 +0,0 @@
-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/runtime/components/inputs/__stories/AntSearch.stories.d.ts

@@ -1,7 +0,0 @@
-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/runtime/components/inputs/__stories/AntSearch.stories.mjs

@@ -1,103 +0,0 @@
-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/inputs/__stories/AntSelect.stories.d.ts

@@ -1,13 +0,0 @@
-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;