@antify/ui 4.1.36 → 4.1.38

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

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.summary = exports.default = exports.WithoutSearch = exports.WithoutFlags = exports.ValueKeyNumericCode = exports.Skeleton = exports.Localization = exports.GroupedMode = exports.GermanEmptyState = exports.Docs = exports.DefaultCountry = exports.DefaultByNumericCode = void 0;
+var _AntCountryInput = _interopRequireDefault(require("../AntCountryInput.vue"));
+var _AntField = _interopRequireDefault(require("../../../components/forms/AntField.vue"));
+var _vue = require("vue");
+var _enums = require("../../../enums");
+var _countries = require("../../../constants/countries");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Country Input",
+  component: _AntCountryInput.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: "select",
+      options: Object.values(_enums.InputState)
+    },
+    size: {
+      control: "select",
+      options: Object.values(_enums.Size)
+    },
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Grouped),
+      description: "Where is this fields position in a group"
+    },
+    locale: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_countries.Locale),
+      description: "Language for country labels"
+    },
+    optionValueKey: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_countries.CountryValueKey)
+    },
+    countries: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+module.exports = meta;
+const MainRender = args => ({
+  components: {
+    AntCountryInput: _AntCountryInput.default
+  },
+  setup() {
+    const modelValue = (0, _vue.ref)(args.modelValue);
+    return {
+      args,
+      modelValue
+    };
+  },
+  template: `
+    <div>
+      <AntCountryInput v-bind="args" v-model="modelValue" />
+
+      <div class="mt-2 text-md text-base-400">
+        Selected Value ({{ args.optionValueKey || 'default' }}):
+        <span class="text-blue-500 font-bold">{{ modelValue === null ? 'null' : modelValue }}</span>
+      </div>
+    </div>
+  `
+});
+const Docs = exports.Docs = {
+  render: MainRender,
+  args: {
+    modelValue: null,
+    searchable: true,
+    countries: _countries.COUNTRIES
+  }
+};
+const ValueKeyNumericCode = exports.ValueKeyNumericCode = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "Value as Numeric Code",
+    description: "Using the numericCode field from the data as the model value.",
+    optionValueKey: _countries.CountryValueKey.numericCode,
+    countries: _countries.COUNTRIES
+  }
+};
+const DefaultCountry = exports.DefaultCountry = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "Default Country Logic",
+    description: 'Preselects Germany (DE) by providing modelValue: "DE" to the component.',
+    modelValue: "DE"
+  }
+};
+const DefaultByNumericCode = exports.DefaultByNumericCode = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "Default by Numeric Code",
+    description: "Using numericCode: 33 (France) as the default value.",
+    optionValueKey: _countries.CountryValueKey.numericCode,
+    modelValue: 33
+  }
+};
+const Localization = exports.Localization = {
+  render: args => ({
+    components: {
+      AntCountryInput: _AntCountryInput.default
+    },
+    setup() {
+      const modelValue = (0, _vue.ref)("DE");
+      return {
+        args,
+        modelValue
+      };
+    },
+    template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <p class="text-xs text-base-400 mb-1">Current Locale: <b>{{ args.locale }}</b></p>
+        <AntCountryInput v-bind="args" v-model="modelValue" />
+      </div>
+
+      <div class="p-4 border border-dashed border-base-300 rounded-md bg-base-50">
+        <p class="text-sm italic text-base-500">
+          Try switching the <b>locale</b> control in the panel below to see labels change between
+          "Germany" (EN) and "Deutschland" (DE).
+        </p>
+      </div>
+    </div>
+  `
+  }),
+  args: {
+    ...Docs.args,
+    label: "Localized Selector",
+    locale: _countries.Locale.de,
+    searchPlaceholder: "Land suchen...",
+    description: "The labels and search logic adapt based on the provided locale."
+  }
+};
+const WithoutSearch = exports.WithoutSearch = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "No Search Field",
+    searchable: false
+  }
+};
+const WithoutFlags = exports.WithoutFlags = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "No Flags Mode",
+    showFlags: false
+  }
+};
+const GroupedMode = exports.GroupedMode = {
+  render: args => ({
+    components: {
+      AntCountryInput: _AntCountryInput.default,
+      AntField: _AntField.default
+    },
+    setup() {
+      const modelValue = (0, _vue.ref)(args.modelValue);
+      return {
+        args,
+        modelValue
+      };
+    },
+    template: `
+      <div>
+        <AntField
+          :label="args.label"
+          :description="args.description"
+          :size="args.size"
+          :state="args.state"
+        >
+          <div class="flex items-center">
+            <AntCountryInput
+              v-bind="args"
+              v-model="modelValue"
+              class="w-fit flex-shrink-0"
+            />
+
+            <div
+              class="flex-grow border border-l-0 p-2 text-sm text-base-400 bg-base-50 border-base-300 rounded-r-md h-[36px] flex items-center"
+            >
+              Input area...
+            </div>
+          </div>
+        </AntField>
+
+        <div class="mt-2 text-md text-base-400">
+          Value: {{ modelValue || null }}
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    label: "Grouped Mode (Phone Input Style)",
+    description: "When isGrouped is true, label and description must be provided by a parent AntField.",
+    isGrouped: true,
+    grouped: _enums.Grouped.left,
+    modelValue: "DE",
+    countries: _countries.COUNTRIES
+  }
+};
+const GermanEmptyState = exports.GermanEmptyState = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "German Empty State",
+    description: 'Custom empty state message: "Keine L\xE4nder gefunden". Open the dropdown to see it.',
+    searchPlaceholder: "Land suchen...",
+    emptyStateMessage: "Keine L\xE4nder gefunden",
+    countries: []
+  }
+};
+const Skeleton = exports.Skeleton = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+const summary = exports.summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntCountryInput: _AntCountryInput.default
+    },
+    setup() {
+      const val = (0, _vue.ref)("DE");
+      return {
+        args,
+        val,
+        InputState: _enums.InputState,
+        Size: _enums.Size,
+        COUNTRIES: _countries.COUNTRIES
+      };
+    },
+    template: `
+      <div class="p-4 flex flex-col gap-6">
+        <div class="flex flex-wrap gap-4">
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.base" label="Base" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.info" label="Info" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.success" label="Success" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.warning" label="Warning" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.danger" label="Danger" class="w-64"/>
+        </div>
+
+        <div class="flex items-end gap-4">
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :size="Size.sm" label="Small" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :size="Size.md" label="Medium" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :size="Size.lg" label="Large" class="w-64"/>
+        </div>
+
+        <div class="flex gap-4">
+          <AntCountryInput v-bind="args" :countries="COUNTRIES" model-value="FR" disabled label="Disabled" class="w-64" />
+          <AntCountryInput v-bind="args" :countries="COUNTRIES" model-value="FR" readonly label="Readonly" class="w-64" />
+          <AntCountryInput v-bind="args" :countries="COUNTRIES" model-value="FR" skeleton label="Skeleton" class="w-64" />
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    searchPlaceholder: "Search..."
+  }
+};

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

@@ -0,0 +1,289 @@
+import AntCountryInput from "../AntCountryInput.vue";
+import AntField from "../../../components/forms/AntField.vue";
+import {
+  ref
+} from "vue";
+import {
+  InputState,
+  Size,
+  Grouped
+} from "../../../enums/index.mjs";
+import {
+  COUNTRIES,
+  CountryValueKey,
+  Locale
+} from "../../../constants/countries.mjs";
+const meta = {
+  title: "Inputs/Country Input",
+  component: AntCountryInput,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: "select",
+      options: Object.values(InputState)
+    },
+    size: {
+      control: "select",
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Grouped),
+      description: "Where is this fields position in a group"
+    },
+    locale: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Locale),
+      description: "Language for country labels"
+    },
+    optionValueKey: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(CountryValueKey)
+    },
+    countries: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+const MainRender = (args) => ({
+  components: {
+    AntCountryInput
+  },
+  setup() {
+    const modelValue = ref(args.modelValue);
+    return {
+      args,
+      modelValue
+    };
+  },
+  template: `
+    <div>
+      <AntCountryInput v-bind="args" v-model="modelValue" />
+
+      <div class="mt-2 text-md text-base-400">
+        Selected Value ({{ args.optionValueKey || 'default' }}):
+        <span class="text-blue-500 font-bold">{{ modelValue === null ? 'null' : modelValue }}</span>
+      </div>
+    </div>
+  `
+});
+export const Docs = {
+  render: MainRender,
+  args: {
+    modelValue: null,
+    searchable: true,
+    countries: COUNTRIES
+  }
+};
+export const ValueKeyNumericCode = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "Value as Numeric Code",
+    description: "Using the numericCode field from the data as the model value.",
+    optionValueKey: CountryValueKey.numericCode,
+    countries: COUNTRIES
+  }
+};
+export const DefaultCountry = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "Default Country Logic",
+    description: 'Preselects Germany (DE) by providing modelValue: "DE" to the component.',
+    modelValue: "DE"
+  }
+};
+export const DefaultByNumericCode = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "Default by Numeric Code",
+    description: "Using numericCode: 33 (France) as the default value.",
+    optionValueKey: CountryValueKey.numericCode,
+    modelValue: 33
+  }
+};
+export const Localization = {
+  render: (args) => ({
+    components: {
+      AntCountryInput
+    },
+    setup() {
+      const modelValue = ref("DE");
+      return {
+        args,
+        modelValue
+      };
+    },
+    template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <p class="text-xs text-base-400 mb-1">Current Locale: <b>{{ args.locale }}</b></p>
+        <AntCountryInput v-bind="args" v-model="modelValue" />
+      </div>
+
+      <div class="p-4 border border-dashed border-base-300 rounded-md bg-base-50">
+        <p class="text-sm italic text-base-500">
+          Try switching the <b>locale</b> control in the panel below to see labels change between
+          "Germany" (EN) and "Deutschland" (DE).
+        </p>
+      </div>
+    </div>
+  `
+  }),
+  args: {
+    ...Docs.args,
+    label: "Localized Selector",
+    locale: Locale.de,
+    searchPlaceholder: "Land suchen...",
+    description: "The labels and search logic adapt based on the provided locale."
+  }
+};
+export const WithoutSearch = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "No Search Field",
+    searchable: false
+  }
+};
+export const WithoutFlags = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "No Flags Mode",
+    showFlags: false
+  }
+};
+export const GroupedMode = {
+  render: (args) => ({
+    components: {
+      AntCountryInput,
+      AntField
+    },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      return {
+        args,
+        modelValue
+      };
+    },
+    template: `
+      <div>
+        <AntField
+          :label="args.label"
+          :description="args.description"
+          :size="args.size"
+          :state="args.state"
+        >
+          <div class="flex items-center">
+            <AntCountryInput
+              v-bind="args"
+              v-model="modelValue"
+              class="w-fit flex-shrink-0"
+            />
+
+            <div
+              class="flex-grow border border-l-0 p-2 text-sm text-base-400 bg-base-50 border-base-300 rounded-r-md h-[36px] flex items-center"
+            >
+              Input area...
+            </div>
+          </div>
+        </AntField>
+
+        <div class="mt-2 text-md text-base-400">
+          Value: {{ modelValue || null }}
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    label: "Grouped Mode (Phone Input Style)",
+    description: "When isGrouped is true, label and description must be provided by a parent AntField.",
+    isGrouped: true,
+    grouped: Grouped.left,
+    modelValue: "DE",
+    countries: COUNTRIES
+  }
+};
+export const GermanEmptyState = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    label: "German Empty State",
+    description: 'Custom empty state message: "Keine L\xE4nder gefunden". Open the dropdown to see it.',
+    searchPlaceholder: "Land suchen...",
+    emptyStateMessage: "Keine L\xE4nder gefunden",
+    countries: []
+  }
+};
+export const Skeleton = {
+  render: MainRender,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+export const summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: (args) => ({
+    components: {
+      AntCountryInput
+    },
+    setup() {
+      const val = ref("DE");
+      return {
+        args,
+        val,
+        InputState,
+        Size,
+        COUNTRIES
+      };
+    },
+    template: `
+      <div class="p-4 flex flex-col gap-6">
+        <div class="flex flex-wrap gap-4">
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.base" label="Base" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.info" label="Info" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.success" label="Success" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.warning" label="Warning" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :state="InputState.danger" label="Danger" class="w-64"/>
+        </div>
+
+        <div class="flex items-end gap-4">
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :size="Size.sm" label="Small" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :size="Size.md" label="Medium" class="w-64"/>
+          <AntCountryInput v-bind="args" v-model="val" :countries="COUNTRIES" :size="Size.lg" label="Large" class="w-64"/>
+        </div>
+
+        <div class="flex gap-4">
+          <AntCountryInput v-bind="args" :countries="COUNTRIES" model-value="FR" disabled label="Disabled" class="w-64" />
+          <AntCountryInput v-bind="args" :countries="COUNTRIES" model-value="FR" readonly label="Readonly" class="w-64" />
+          <AntCountryInput v-bind="args" :countries="COUNTRIES" model-value="FR" skeleton label="Skeleton" class="w-64" />
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    searchPlaceholder: "Search..."
+  }
+};

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

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