sprintify-ui 0.0.195 → 0.0.196

package/src/components/BaseForm.vue

@@ -112,7 +112,6 @@ const emit = defineEmits(['error', 'success']);
 
 const form = ref<null | HTMLFormElement>(null);
 const loading = ref(false);
-const disabled = ref(false);
 const errors = ref<Record<string, string[]>>({});
 
 const httpClient = computed((): AxiosInstance => {
@@ -291,14 +290,20 @@ function clearErrors(name = null): void {
   }
 }
 
-function disabledForm() {
-  disabled.value = true;
+const disablingFields = reactive(new Set<string>());
+
+function disabledForm(uuid: string) {
+  disablingFields.add(uuid);
 }
 
-function enableForm() {
-  disabled.value = false;
+function enableForm(uuid: string) {
+  disablingFields.delete(uuid);
 }
 
+const disabled = computed((): boolean => {
+  return disablingFields.size > 0;
+});
+
 provide('form:errors', readonly(errors));
 provide('form:getErrorMessageByName', getErrorMessageByName);
 provide('form:clearErrors', clearErrors);

package/src/components/BaseNumber.stories.js

@@ -8,8 +8,6 @@ export default {
   args: {
     placeholder: 'Enter number',
     step: 0.1,
-    min: 0,
-    max: 100,
   },
 };
 
@@ -19,7 +17,7 @@ const Template = (args) => ({
     BaseNumber,
   },
   setup() {
-    const value = ref(12.1212);
+    const value = ref(null);
     return { args, value };
   },
   template: `
@@ -33,6 +31,24 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const Min = Template.bind({});
+Min.args = {
+  min: 10000,
+};
+
+export const Max = Template.bind({});
+Max.args = {
+  max: 10000,
+};
+
+export const AutoFix = Template.bind({});
+AutoFix.args = {
+  autoFix: true,
+  min: 10,
+  max: 20,
+  step: 0.01,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

package/src/components/BaseNumber.vue

@@ -8,7 +8,7 @@
       leave-from-class="transform scale-100 opacity-100"
       leave-to-class="transform scale-90 opacity-0"
     >
-      <div v-if="invalidInput" class="absolute left-0 top-full">
+      <div v-if="showInvalidInput" class="absolute left-0 top-full z-[1]">
         <div
           class="mt-1 ml-1 rounded bg-red-500 px-2 py-1 text-xs font-medium text-white"
         >
@@ -36,7 +36,7 @@
         :max="max"
         :class="[
           ['full', 'left'].includes(rounded) ? 'rounded-l' : '',
-          invalidInput ? 'focus:ring-red-400' : 'focus:ring-primary-500',
+          showInvalidInput ? 'focus:ring-red-400' : 'focus:ring-primary-500',
         ]"
         class="w-full border-none focus:z-[1] focus:border-none focus:border-transparent focus:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
         type="text"
@@ -73,8 +73,10 @@
 import { useField } from '@/composables/field';
 import { isNumber, round } from 'lodash';
 import { PropType } from 'vue';
+import { BaseIcon } from '.';
 
 const AUTO_CORRECT_TIMEOUT = 2000;
+const SHOW_INVALID_INPUT_TIMEOUT = 500;
 
 const props = defineProps({
   modelValue: {
@@ -124,17 +126,23 @@ const props = defineProps({
     default: 'full',
     type: String as PropType<'full' | 'left' | 'right' | 'none'>,
   },
+  autoFix: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'keydown']);
 
-const { hasErrorInternal, emitUpdate } = useField({
+const { hasErrorInternal, emitUpdate, enableForm, disableForm } = useField({
   name: computed(() => props.name),
   required: computed(() => props.required),
   hasError: computed(() => props.hasError),
   emit: emit,
 });
 
+const showInvalidInput = ref(false);
+
 const stepNormalized = computed<number>(() => {
   if (props.step === undefined) return 1;
   if (props.step === 0) return 1;
@@ -170,9 +178,11 @@ function convertToNumber(
 }
 
 const valueInternal = ref<null | string | number>(null);
+
 const realValueInternal = computed<number | null>(() => {
   return convertToNumber(valueInternal.value);
 });
+
 const invalidInput = computed(() => {
   if (realValueInternal.value == null && valueInternal.value == '') {
     return false;
@@ -180,10 +190,12 @@ const invalidInput = computed(() => {
 
   return realValueInternal.value != valueInternal.value;
 });
+
 const tooBig = computed(() => {
   if (valueInternal.value === null) return false;
   return hasMax.value && valueInternal.value > (props.max as number);
 });
+
 const tooSmall = computed(() => {
   if (valueInternal.value === null) return false;
   return hasMin.value && valueInternal.value < (props.min as number);
@@ -214,13 +226,37 @@ function onInput(event: any) {
 
   emitUpdate(realValueInternal.value);
 
+  nextTick(() => {
+    showHideInvalidOnInput();
+  });
+
   timeoutId = setTimeout(() => {
     updateInternalValueToRealValue();
   }, AUTO_CORRECT_TIMEOUT);
 }
 
+let showInvalidInputTimeoutId = undefined as undefined | number;
+
+function showHideInvalidOnInput() {
+  clearTimeout(showInvalidInputTimeoutId);
+
+  if (!invalidInput.value) {
+    showInvalidInput.value = false;
+    return;
+  }
+
+  showInvalidInputTimeoutId = setTimeout(() => {
+    showInvalidInput.value = true;
+  }, SHOW_INVALID_INPUT_TIMEOUT);
+}
+
 function onBlur(e: Event) {
   emit('blur', e);
+
+  if (invalidInput.value) {
+    showInvalidInput.value = true;
+  }
+
   updateInternalValueToRealValue();
 }
 
@@ -244,6 +280,9 @@ const defaultValue = computed<number>(() => {
 });
 
 function updateInternalValueToRealValue() {
+  if (!props.autoFix) {
+    return;
+  }
   if (realValueInternal.value === null) {
     valueInternal.value = '';
     return;
@@ -287,7 +326,21 @@ function decrement() {
 }
 
 const borderColor = computed(() => {
-  if (hasErrorInternal.value) return 'border-red-500';
+  if (hasErrorInternal.value || invalidInput.value) return 'border-red-500';
   return 'border-slate-300';
 });
+
+/** Disable form */
+
+watch(
+  () => invalidInput.value,
+  () => {
+    if (invalidInput.value) {
+      disableForm();
+    } else {
+      enableForm();
+    }
+  },
+  { immediate: true }
+);
 </script>

package/src/composables/field.ts

@@ -1,3 +1,4 @@
+import { uniqueId } from 'lodash';
 import { Ref } from 'vue';
 
 interface Config {
@@ -10,6 +11,7 @@ interface Config {
 }
 
 export function useField(config: Config) {
+  const uuid = uniqueId();
   const name = config.name;
   const required = config.required;
   const hasError = config.hasError;
@@ -60,11 +62,15 @@ export function useField(config: Config) {
 
   const disableForm = inject('form:disable', () => {
     return;
-  }) as () => void;
+  }) as (uuid: string) => void;
 
   const enableForm = inject('form:enable', () => {
     return;
-  }) as () => void;
+  }) as (uuid: string) => void;
+
+  onBeforeUnmount(() => {
+    enableForm(uuid);
+  });
 
   const requiredInternal = computed((): boolean => {
     if (required.value) {
@@ -98,13 +104,14 @@ export function useField(config: Config) {
     emit('update:modelValue', value);
     fieldOnUpdate();
   }
+
   return {
     requiredInternal,
     nameInternal,
     hasErrorInternal,
     errorMessageInternal,
     emitUpdate,
-    enableForm,
-    disableForm,
+    enableForm: () => enableForm(uuid),
+    disableForm: () => disableForm(uuid),
   };
 }