@antify/ui 2.4.10 → 2.4.11

package/dist/components/inputs/AntPasswordInput.vue

@@ -36,6 +36,7 @@ const props = withDefaults(defineProps<{
   label?: string;
   placeholder?: string;
   description?: string;
+  inputRef?: null | HTMLInputElement;
   size?: Size;
   state?: InputState;
   disabled?: boolean;
@@ -43,6 +44,7 @@ const props = withDefaults(defineProps<{
   messages?: string[];
 }>(), {
   state: InputState.base,
+  inputRef: null,
   disabled: false,
   skeleton: false,
   size: Size.md,
@@ -50,9 +52,11 @@ const props = withDefaults(defineProps<{
 });
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'validate',
 ]);
 const _modelValue = useVModel(props, 'modelValue', emit);
+const _inputRef = useVModel(props, 'inputRef', emit);
 const isVisible = ref(false);
 const iconSize = computed(() => {
   if (props.size === Size.xs2 || props.size === Size.xs) {
@@ -94,6 +98,7 @@ onMounted(() => {
     <div class="flex relative">
       <AntBaseInput
         v-model="_modelValue"
+        v-model:input-ref="_inputRef"
         :type="isVisible ? BaseInputType.text : BaseInputType.password"
         :state="state"
         :size="size"

package/dist/components/inputs/AntTextInput.vue

@@ -30,6 +30,7 @@ defineOptions({
 const emit = defineEmits([
   'update:modelValue',
   'update:skeleton',
+  'update:inputRef',
   'validate',
 ]);
 const props = withDefaults(defineProps<{
@@ -43,11 +44,13 @@ const props = withDefaults(defineProps<{
   readonly?: boolean;
   skeleton?: boolean;
   type?: TextInputType;
+  inputRef?: null | HTMLInputElement;
   limiter?: boolean;
   max?: number;
   messages?: string[];
 }>(), {
   state: InputState.base,
+  inputRef: null,
   disabled: false,
   readonly: false,
   skeleton: false,
@@ -58,6 +61,7 @@ const props = withDefaults(defineProps<{
 });
 
 const _value = useVModel(props, 'modelValue', emit);
+const _inputRef = useVModel(props, 'inputRef', emit);
 
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
@@ -79,6 +83,7 @@ onMounted(() => {
   >
     <AntBaseInput
       v-model="_value"
+      v-model:input-ref="_inputRef"
       :type="type as unknown as BaseInputType"
       wrapper-class="grow"
       :state="state"

package/dist/components/inputs/Elements/__stories/AntBaseInput.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Docs: Story;
 export declare const Nullable: Story;
 export declare const IconLeft: Story;
 export declare const IconRight: Story;
+export declare const Autofocus: Story;
 export declare const Summary: Story;

package/dist/components/inputs/Elements/__stories/AntBaseInput.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.Nullable = exports.IconRight = exports.IconLeft = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Nullable = exports.IconRight = exports.IconLeft = exports.Docs = exports.Autofocus = void 0;
 var _Size = require("../../../../enums/Size.enum");
 var _AntBaseInput = require("../__types/AntBaseInput.types");
 var _AntBaseInput2 = _interopRequireDefault(require("../AntBaseInput.vue"));
@@ -15,6 +15,7 @@ var _enums = require("../../../../enums");
 var _AntFormGroup = _interopRequireDefault(require("../../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../../forms/AntFormGroupLabel.vue"));
 var _Direction = require("../../../../enums/Direction.enum");
+var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   computed: {
@@ -174,6 +175,39 @@ const IconRight = exports.IconRight = {
     ...Docs.args
   }
 };
+const Autofocus = exports.Autofocus = {
+  render: args => ({
+    components: {
+      AntBaseInput: _AntBaseInput2.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>
+
+        <AntBaseInput
+          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/Elements/__stories/AntBaseInput.stories.mjs

@@ -22,6 +22,9 @@ import AntFormGroupLabel from "../../../forms/AntFormGroupLabel.vue";
 import {
   Direction
 } from "../../../../enums/Direction.enum.mjs";
+import {
+  ref
+} from "vue";
 const meta = {
   computed: {
     Direction() {
@@ -180,6 +183,39 @@ export const IconRight = {
     ...Docs.args
   }
 };
+export const Autofocus = {
+  render: (args) => ({
+    components: {
+      AntBaseInput,
+      AntFormGroup,
+      AntButton
+    },
+    setup: () => {
+      const inputRef = ref(null);
+      return {
+        inputRef,
+        clickAutofocus: () => {
+          inputRef.value?.focus();
+        },
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntButton @click="clickAutofocus">Focus element</AntButton>
+
+        <AntBaseInput
+          v-model="args.modelValue"
+          v-bind="args"
+          v-model:input-ref="inputRef"
+        />
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
 export const Summary = {
   parameters: {
     chromatic: {

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

@@ -1,7 +1,8 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
+import type { Meta, 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 Autofocus: Story;
 export declare const Summary: Story;

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

@@ -3,12 +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 _enums = require("../../../enums");
 var _AntPasswordInput = _interopRequireDefault(require("../AntPasswordInput.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.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/Password Input",
@@ -76,6 +78,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: {
+      AntPasswordInput: _AntPasswordInput.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>
+
+        <AntPasswordInput
+          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/AntPasswordInput.stories.mjs

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

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.10",
+  "version": "2.4.11",
   "private": false,
   "type": "module",
   "exports": {