sprintify-ui 0.0.194 → 0.0.196

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/components/BaseTabItem.vue

@@ -7,25 +7,26 @@
     >
       <a
         :href="href"
-        class="group relative inline-block rounded-t-lg px-2 py-3 font-medium"
+        class="group relative inline-block rounded-t-lg font-medium"
         :class="[
-          (activeStrategy == 'default' ? isActive : isExactActive)
-            ? 'text-primary-600'
+          tabIsActive(isActive, isExactActive)
+            ? 'active text-primary-600'
             : 'text-slate-600 hover:text-slate-900',
           disabled ? 'cursor-not-allowed opacity-60' : '',
+          sizeClass,
         ]"
-        @click="navigate"
+        @click.prevent="onClick(navigate)"
       >
         <div
           class="absolute left-0 bottom-0 w-full"
           :class="[
-            (activeStrategy == 'default' ? isActive : isExactActive)
+            tabIsActive(isActive, isExactActive)
               ? 'h-[2px] bg-primary-600'
               : 'group-hover:h-px group-hover:bg-slate-700',
           ]"
         ></div>
         <div class="whitespace-nowrap">
-          <slot />
+          <slot :active="tabIsActive(isActive, isExactActive)" />
         </div>
       </a>
     </router-link>
@@ -33,21 +34,51 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-
-defineProps({
-  to: {
-    required: true,
-    type: [Object, String] as PropType<RouteLocationRaw>,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  activeStrategy: {
-    default: 'default',
-    type: String as PropType<'default' | 'exact'>,
-  },
+import { ComputedRef } from 'vue';
+import { NavigationFailure, RouteLocationRaw } from 'vue-router';
+
+const props = withDefaults(
+  defineProps<{
+    to: RouteLocationRaw;
+    disabled?: boolean;
+    activeStrategy?: 'default' | 'exact';
+  }>(),
+  {
+    disabled: false,
+    activeStrategy: 'default',
+  }
+);
+
+const size = inject('tabs:size', ref('md')) as ComputedRef<
+  'xs' | 'sm' | 'md' | 'lg'
+>;
+
+function onClick(navigate: () => Promise<void | NavigationFailure>) {
+  if (props.disabled) {
+    return;
+  }
+
+  return navigate();
+}
+
+function tabIsActive(isActive: boolean, isExactActive: boolean) {
+  if (props.activeStrategy == 'default') {
+    return isActive;
+  }
+
+  return isExactActive;
+}
+
+const sizeClass = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'text-xs px-1.5 py-2';
+    case 'sm':
+      return 'text-sm px-1.5 py-2';
+    case 'md':
+      return 'text-base px-2 py-3';
+    case 'lg':
+      return 'text-lg px-3 py-4';
+  }
 });
 </script>

package/src/components/BaseTabs.stories.js

@@ -3,6 +3,7 @@ import BaseTabItem from './BaseTabItem.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
+import BaseCounter from './BaseCounter.vue';
 
 export default {
   title: 'Layout/BaseTabs',
@@ -17,6 +18,7 @@ const Template = (args) => ({
     BaseContainer,
     BaseCard,
     BaseCardRow,
+    BaseCounter,
   },
   setup() {
     return { args };
@@ -25,8 +27,11 @@ const Template = (args) => ({
   <div class="bg-slate-100 py-10">
     <BaseContainer>
       <BaseTabs v-bind="args">
-        <BaseTabItem to="/">
-          Home
+        <BaseTabItem to="/" v-slot="{active}">
+          <div class="flex items-center">
+            <span class="mr-1">Home</span>
+            <BaseCounter :size="args.size" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
+          </div>
         </BaseTabItem>
         <BaseTabItem to="/setup">
           Setup
@@ -34,9 +39,15 @@ const Template = (args) => ({
         <BaseTabItem to="/settings">
           Settings
         </BaseTabItem>
+        <BaseTabItem to="/articles">
+          Articles
+        </BaseTabItem>
         <BaseTabItem to="/misc">
           Miscellaneous
         </BaseTabItem>
+        <BaseTabItem to="/users">
+          Users
+        </BaseTabItem>
       </BaseTabs>
       <div class="mt-10">
         <BaseCard>
@@ -52,3 +63,23 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {};
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: 'xs',
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: 'sm',
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: 'md',
+};
+
+export const SizeLG = Template.bind({});
+SizeLG.args = {
+  size: 'lg',
+};

package/src/components/BaseTabs.vue

@@ -2,14 +2,85 @@
   <div class="relative">
     <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
     <div
-      class="relative overflow-x-auto overflow-y-hidden"
+      ref="scrollable"
+      class="scrollable relative overflow-x-auto overflow-y-hidden"
       data-scroll-lock-scrollable
     >
-      <ul class="flex space-x-4 text-center">
+      <ul class="flex text-center" :class="[sizeClass]">
         <slot />
       </ul>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+  }>(),
+  {
+    size: 'md',
+  }
+);
+
+const route = useRoute();
+const scrollable = ref<HTMLElement | null>(null);
+
+watch(
+  () => route.fullPath,
+  () => {
+    nextTick(() => {
+      scrollToCenter();
+    });
+  }
+);
+
+provide(
+  'tabs:size',
+  computed(() => props.size)
+);
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'xs':
+      return 'space-x-1.5';
+    case 'sm':
+      return 'space-x-3';
+    case 'md':
+      return 'space-x-3';
+    case 'lg':
+      return 'space-x-6';
+  }
+});
+
+function scrollToCenter() {
+  if (!scrollable.value) {
+    return;
+  }
+
+  const activeTab = scrollable.value.querySelector(
+    '.active'
+  ) as HTMLElement | null;
+
+  if (!activeTab) {
+    return;
+  }
+
+  const scrollableRect = scrollable.value.getBoundingClientRect();
+  const activeTabRect = activeTab.getBoundingClientRect();
+
+  const scrollLeft =
+    activeTab.offsetLeft - (scrollableRect.width - activeTabRect.width) / 2;
+
+  scrollable.value.scrollTo({
+    left: scrollLeft,
+    behavior: 'smooth',
+  });
+}
+</script>
+
+<style scoped>
+.scrollable::-webkit-scrollbar {
+  display: none;
+}
+</style>

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