@antify/ui 2.4.5 → 2.4.11

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

@@ -15,6 +15,8 @@ import {
 import {
   InputState
 } from "../../../enums/index.mjs";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
   title: "Inputs/Select",
   component: AntSelect,
@@ -91,6 +93,12 @@ const manySelectOptions = [
   label: `Option ${Number(key) + 1}`,
   value: Number(key) + 1
 }));
+const longSelectOptions = [
+  ...Array(4).keys()
+].map((key) => ({
+  label: `Very Long Select Option Possibly Larger Than Container ${Number(key) + 1}`,
+  value: Number(key) + 1
+}));
 export const Docs = {
   render: (args) => ({
     components: {
@@ -208,6 +216,25 @@ export const manyOptions = {
     options: manySelectOptions
   }
 };
+export const longOptions = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="flex justify-center overflow-y-auto h-[100vh] p-2.5 dashed">
+        <div class="flex flex-col gap-4 justify-center h-[250vh] max-w-[150px]">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    options: longSelectOptions
+  }
+};
 export const nullable = {
   render: Docs.render,
   args: {
@@ -334,9 +361,18 @@ export const summary = {
   },
   render: (args, ctx) => ({
     // @ts-ignore
-    components: Docs.render(args, ctx).components,
+    components: {
+      AntSelect,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
     // @ts-ignore
-    setup: Docs.render(args, ctx).setup,
+    setup() {
+      return {
+        ...Docs.render(args, ctx).setup(),
+        longSelectOptions
+      };
+    },
     template: `
       <div class="p-4 flex flex-col gap-2.5">
         <div class="flex w-2/5 gap-2.5">
@@ -407,6 +443,16 @@ export const summary = {
           <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="warning"/>
           <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="danger"/>
         </div>
+        <AntFormGroup>
+          <AntFormGroupLabel>Long Select Options</AntFormGroupLabel>
+        <div class="grid grid-cols-5 gap-2.5">
+          <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+        </div>
+        </AntFormGroup>
       </div>
     `
   }),

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

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

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

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = exports.Autofocus = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntTextInput = _interopRequireDefault(require("../AntTextInput.vue"));
 var _AntTextInput2 = require("../__types/AntTextInput.types");
 var _enums = require("../../../enums");
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Text Input",
@@ -86,6 +89,39 @@ const Docs = exports.Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+const Autofocus = exports.Autofocus = {
+  render: args => ({
+    components: {
+      AntTextInput: _AntTextInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntButton: _AntButton.default
+    },
+    setup: () => {
+      const inputRef = (0, _vue.ref)(null);
+      return {
+        inputRef,
+        clickAutofocus: () => {
+          inputRef.value?.focus();
+        },
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntButton @click="clickAutofocus">Focus element</AntButton>
+
+        <AntTextInput
+          v-model="args.modelValue"
+          v-bind="args"
+          v-model:input-ref="inputRef"
+        />
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -8,6 +8,11 @@ import {
 import {
   InputState
 } from "../../../enums/index.mjs";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntButton from "../../buttons/AntButton.vue";
+import {
+  ref
+} from "vue";
 const meta = {
   title: "Inputs/Text Input",
   component: AntTextInput,
@@ -85,6 +90,39 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+export const Autofocus = {
+  render: (args) => ({
+    components: {
+      AntTextInput,
+      AntFormGroup,
+      AntButton
+    },
+    setup: () => {
+      const inputRef = ref(null);
+      return {
+        inputRef,
+        clickAutofocus: () => {
+          inputRef.value?.focus();
+        },
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntButton @click="clickAutofocus">Focus element</AntButton>
+
+        <AntTextInput
+          v-model="args.modelValue"
+          v-bind="args"
+          v-model:input-ref="inputRef"
+        />
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
 export const Summary = {
   parameters: {
     chromatic: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.4.5",
+  "version": "2.4.11",
   "private": false,
   "type": "module",
   "exports": {