sprintify-ui 0.0.195 → 0.0.197

package/src/components/BaseNavbarItemContent.vue

@@ -2,7 +2,7 @@
   <div :class="classes">
     <div class="group flex grow items-center">
       <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      {{ label }}
+      <span :class="[sizeClasses]">{{ label }}</span>
     </div>
     <div v-if="count" class="relative -top-px ml-[5px]">
       <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
@@ -12,6 +12,7 @@
 
 <script lang="ts" setup>
 import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
 import BaseCounter from './BaseCounter.vue';
 
 const props = defineProps({
@@ -35,6 +36,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'sm' | 'md'>,
+  },
 });
 
 const classes = computed(() => {
@@ -42,12 +47,6 @@ const classes = computed(() => {
     'text-left border-b-2 px-2 flex items-center text-base font-medium w-full',
   ];
 
-  if (props.dark) {
-    classList.push('');
-  } else {
-    classList.push('');
-  }
-
   if (props.active) {
     if (props.dark) {
       classList.push('border-white text-white');
@@ -77,4 +76,11 @@ const iconClasses = computed((): string[] => {
   }
   return classList;
 });
+
+const sizeClasses = computed(() => {
+  if (props.size == 'sm') {
+    return 'text-sm';
+  }
+  return 'text-base';
+});
 </script>

package/src/components/BaseNavbarSideItem.vue

@@ -15,25 +15,21 @@
           :active="active"
           :count="item.count"
           :dark="dark"
+          :size="size"
         />
       </template>
     </BaseActionItem>
 
     <div
       v-if="showSubActions && item.actions && item.actions.length"
-      class="ml-10 mt-1.5 mb-3"
+      class="mt-2 mb-3"
     >
-      <div v-for="subItem in item.actions" :key="subItem.label" class="mb-1">
+      <div v-for="subItem in item.actions" :key="subItem.label">
         <BaseActionItem
           :to="subItem.to"
           :href="subItem.href"
           :action="subItem.action"
-          :class="[
-            'flex w-full',
-            dark
-              ? 'text-slate-300 hover:text-white'
-              : 'text-slate-900 hover:text-slate-600',
-          ]"
+          :class="subItemClasses"
         >
           {{ subItem.label }}
         </BaseActionItem>
@@ -61,6 +57,10 @@ const props = defineProps({
     default: 'toggle',
     type: String as PropType<'toggle' | 'always'>,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const emit = defineEmits(['click']);
@@ -88,4 +88,24 @@ const showSubActions = computed((): boolean => {
   }
   return routeActive.value;
 });
+
+const subItemClasses = computed((): string[] => {
+  const classList = ['flex w-full font-normal'];
+
+  if (props.dark) {
+    classList.push('text-slate-300 hover:text-white');
+  } else {
+    classList.push('text-slate-900 hover:text-slate-600');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('pl-[33.5px] text-[13px] mb-1');
+  } else if (props.size == 'sm') {
+    classList.push('pl-[36px] text-sm mb-1.5');
+  } else {
+    classList.push('pl-[40px] text-base mb-1');
+  }
+
+  return classList;
+});
 </script>

package/src/components/BaseNavbarSideItemContent.vue

@@ -2,16 +2,22 @@
   <div :class="classes">
     <div class="group flex grow items-center">
       <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      {{ label }}
+      <span>{{ label }}</span>
     </div>
     <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+      <BaseCounter
+        :size="size"
+        :count="count"
+        :max-digit="2"
+        :color="'primary'"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
 import BaseCounter from './BaseCounter.vue';
 
 const props = defineProps({
@@ -35,24 +41,20 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const classes = computed(() => {
-  const classList = [
-    'text-left px-3 py-2 rounded-md flex text-base font-medium w-full',
-  ];
-
-  if (props.dark) {
-    classList.push('');
-  } else {
-    classList.push('');
-  }
+  const classList = ['text-left rounded-md flex w-full'];
 
   if (props.active) {
     if (props.dark) {
       classList.push('bg-slate-700 text-white');
     } else {
-      classList.push('bg-slate-100 text-slate-900');
+      classList.push('bg-slate-100 text-primary-700');
     }
   } else {
     if (props.dark) {
@@ -62,16 +64,41 @@ const classes = computed(() => {
     }
   }
 
+  if (props.size == 'xs') {
+    classList.push('text-[13px] px-2.5 py-1 font-medium');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('text-sm px-3 py-1.5 font-medium');
+  }
+
+  if (props.size == 'md') {
+    classList.push('text-base px-3 py-2 font-medium');
+  }
+
   return classList;
 });
 
 const iconClasses = computed((): string[] => {
-  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
+  const classList = ['shrink-0 leading-none inline-block'];
   if (props.active) {
     classList.push('opacity-100');
   } else {
     classList.push('opacity-70 group-hover:opacity-100');
   }
+
+  if (props.size == 'xs') {
+    classList.push('w-3.5 h-3.5 mr-2');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('w-4 h-4 mr-2');
+  }
+
+  if (props.size == 'md') {
+    classList.push('w-5 h-5 mr-2');
+  }
+
   return classList;
 });
 </script>

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),
   };
 }