sprintify-ui 0.2.15 → 0.2.16

package/dist/types/src/components/BaseInput.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -71,7 +73,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (ArrayConstructor | StringConstructor | FunctionConstructor)[];
         default(): null;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | number | null>;

package/dist/types/src/components/BaseInputPercent.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     /**
      * The value of the input. Can be a number or null.
@@ -56,7 +58,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The value of the input. Can be a number or null.
      * 0.1 = 10%

package/dist/types/src/components/BasePassword.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -24,7 +26,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | null>;

package/dist/types/src/components/BaseTextarea.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
@@ -40,7 +42,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<string | null | undefined>;

package/dist/types/src/components/BaseTextareaAutoresize.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -44,7 +46,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<string | string[]>;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseInput.stories.js

@@ -149,3 +149,20 @@ export const Field = createFieldStory({
   componentName: 'BaseInput',
   label: 'Name',
 });
+
+
+const FocusTemplate = (args) => ({
+  components: { BaseInput },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseInput ref="input" v-model="value" v-bind="args" class="w-full"></BaseInput>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseInput.vue

@@ -156,6 +156,8 @@ const props = defineProps({
   },
 });
 
+const input = ref<HTMLInputElement | null>(null);
+
 const maskOptions = computed(() => {
   if (props.mask) {
     return {
@@ -246,4 +248,17 @@ const backgroundColor = computed(() => {
 const textColor = computed(() => {
   return hasErrorInternal.value ? 'text-red-800' : 'text-slate-600';
 });
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BaseInputPercent.stories.js

@@ -48,3 +48,19 @@ export const Field = createFieldStory({
   componentName: 'BaseInputPercent',
   label: 'Rebate',
 });
+
+const FocusTemplate = (args) => ({
+  components: { BaseInputPercent },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseInputPercent ref="input" v-model="value" v-bind="args" class="w-full"></BaseInputPercent>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseInputPercent.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseInput
+    ref="input"
     :model-value="value"
     suffix="%"
     type="number"
@@ -83,6 +84,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
 
+const input = ref<HTMLInputElement | null>(null);
+
 const stepNormalized = computed<number>(() => {
   if (props.step === undefined) return 1;
   if (props.step === 0) return 1;
@@ -120,4 +123,17 @@ function onUpdate(value: string | number | null) {
 
   emit('update:modelValue', round(valueToNumber / 100, precision.value + 2));
 }
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BasePassword.stories.js

@@ -39,3 +39,20 @@ export const Field = createFieldStory({
   componentName: 'BasePassword',
   label: 'Password',
 });
+
+
+const FocusTemplate = (args) => ({
+  components: { BasePassword },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BasePassword ref="input" v-model="value" v-bind="args" class="w-full"></BasePassword>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BasePassword.vue

@@ -73,6 +73,8 @@ const props = defineProps({
   },
 });
 
+const input = ref<HTMLInputElement | null>(null);
+
 const emit = defineEmits(['update:modelValue']);
 
 const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
@@ -89,4 +91,17 @@ function onInput(event: any) {
   const value = event.target.value + '';
   emitUpdate(trim(value));
 }
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BaseTextarea.stories.js

@@ -41,3 +41,19 @@ export const Field = createFieldStory({
   componentName: 'BaseTextarea',
   label: 'Biography',
 });
+
+const FocusTemplate = (args) => ({
+  components: { BaseTextarea },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseTextarea ref="input" v-model="value" v-bind="args" class="w-full"></BaseTextarea>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseTextarea.vue

@@ -1,5 +1,6 @@
 <template>
   <textarea
+    ref="textareaRef"
     :value="modelValue ?? undefined"
     :type="type"
     :name="nameInternal"
@@ -84,4 +85,19 @@ function transformInputValue(event: Event | null): string | null {
 
   return '';
 }
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+function focus() {
+  textareaRef.value?.focus();
+}
+
+function blur() {
+  textareaRef.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BaseTextareaAutoresize.stories.js

@@ -85,3 +85,19 @@ export const Field = createFieldStory({
   componentName: 'BaseTextareaAutoresize',
   label: 'Biography',
 });
+
+const FocusTemplate = (args) => ({
+  components: { BaseTextareaAutoresize },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseTextareaAutoresize ref="input" v-model="value" v-bind="args" class="w-full"></BaseTextareaAutoresize>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseTextareaAutoresize.vue

@@ -5,6 +5,7 @@
     :style="{ maxHeight: maxHeight + 'px' }"
   >
     <textarea
+      ref="textareaRef"
       :value="modelValue ?? ''"
       :name="nameInternal"
       :placeholder="placeholder"
@@ -95,6 +96,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
+const textareaRef = ref<null | HTMLTextAreaElement>(null);
+
 const { nameInternal, requiredInternal, hasErrorInternal } =
   useField({
     name: computed(() => props.name),
@@ -147,4 +150,17 @@ const textareaClasses = computed(() => {
     props.twTextarea
   );
 });
+
+function focus() {
+  textareaRef.value?.focus();
+}
+
+function blur() {
+  textareaRef.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>