design-system-next 1.2.8 → 1.2.10

package/src/components/timePicker/timePicker.vue

@@ -38,14 +38,14 @@
             'cursor-pointer',
             {
               'background-color-single-active rounded-border-radius-md':
-                option.toUpperCase() === selectedValue.toUpperCase(),
+                option.toUpperCase() === selectedValue?.toUpperCase(),
             },
           ]"
           @mousedown.prevent="selectOption(option)"
         >
           {{ option }}
 
-          <span v-if="option.toUpperCase() === selectedValue.toUpperCase()" class="text-color-brand-base font-bold">
+          <span v-if="option.toUpperCase() === selectedValue?.toUpperCase()" class="text-color-brand-base font-bold">
             <Icon icon="ph:check" />
           </span>
         </div>
@@ -57,7 +57,6 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-
 import { timePickerPropTypes, timePickerEmitTypes } from './timePicker';
 import { useTimePicker } from './use-timePicker';
 

package/src/components/timePicker/use-timePicker.ts

@@ -1,15 +1,16 @@
-import { computed, ref, ComputedRef } from 'vue';
+import { computed, ref, ComputedRef, toRefs } from 'vue';
 import dayjs from 'dayjs';
 import type { TimePickerPropTypes, TimePickerEmitTypes } from './timePicker';
 import type { SetupContext } from 'vue';
+import { useVModel } from '@vueuse/core';
 
 import classNames from 'classnames';
 
 export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<TimePickerEmitTypes>['emit']) => {
-  const { error, disabled, format, interval, disableTyping, fullWidth } = props;
+  const { error, disabled, format, interval, disableTyping, fullWidth } = toRefs(props);
 
   const isOpen = ref<boolean>(false);
-  const selectedValue = ref<string>('');
+  const selectedValue = useVModel(props, 'modelValue', emit);
 
   const timepickerClasses: ComputedRef<string> = computed(() => {
     return classNames(
@@ -28,14 +29,14 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
       'outline-none',
       'ring-0',
       {
-        '!border-[1.5px]': error,
-        '!border-tomato-600': error,
-        'focus:!border-tomato-600': error,
-        '!border-white-100': disabled,
-        'background-color-disabled': disabled,
-        'cursor-not-allowed': disabled,
-        'text-color-on-fill-disabled': disabled,
-        'cursor-pointer': disableTyping,
+        '!border-[1.5px]': error.value,
+        '!border-tomato-600': error.value,
+        'focus:!border-tomato-600': error.value,
+        '!border-white-100': disabled.value,
+        'background-color-disabled': disabled.value,
+        'cursor-not-allowed': disabled.value,
+        'text-color-on-fill-disabled': disabled.value,
+        'cursor-pointer': disableTyping.value,
       },
     );
   });
@@ -43,7 +44,7 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
   const optionClasses: ComputedRef<string> = computed(() => {
     return classNames(
       'absolute',
-      'z-30 ',
+      'z-50 ',
       'mt-1',
       'max-h-[300px]',
       'w-[240px]',
@@ -56,20 +57,20 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
       'shadow-[0_2px_8px_-2px_rgba(38, 43, 43, 0.20)]',
       'p-size-spacing-3xs',
       {
-        'w-full': fullWidth,
+        'w-full': fullWidth.value,
       },
     );
   });
 
   const iconClasses: ComputedRef<string> = computed(() => {
     return classNames('absolute right-3 text-color-supporting', {
-      '!text-tomato-600': error,
+      '!text-tomato-600': error.value,
     });
   });
 
   const labelClasses: ComputedRef<string> = computed(() => {
     return classNames('body-sm-regular text-color-strong block  mb-size-spacing-4xs ', {
-      'text-color-on-fill-disabled': disabled,
+      'text-color-on-fill-disabled': disabled.value,
     });
   });
 
@@ -83,15 +84,13 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
     if (!target) return;
 
     const input = target.value.toUpperCase();
-    const regex = format === '12' ? /^[0-9:APM\s]*$/ : /^[0-9:]*$/;
+    const regex = format.value === '12' ? /^[0-9:APM\s]*$/ : /^[0-9:]*$/;
 
     if (!regex.test(input)) {
-      selectedValue.value = selectedValue.value.slice(0, -1);
+      selectedValue.value = selectedValue.value?.slice(0, -1);
     } else {
       selectedValue.value = input;
     }
-
-    emit('update:modelValue', selectedValue.value);
   };
 
   const generateTimeOptions = (): string[] => {
@@ -102,7 +101,7 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
     let current = start;
     while (current.isBefore(end) || current.isSame(end)) {
       options.push(formatTime(current));
-      current = current.add(interval, 'minute');
+      current = current.add(interval.value, 'minute');
     }
 
     return options;
@@ -127,12 +126,11 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
 
   const selectOption = (option: string) => {
     selectedValue.value = option;
-    emit('update:modelValue', option);
     isOpen.value = false;
   };
 
   const handleClick = (event: FocusEvent) => {
-    if (disabled) {
+    if (disabled.value) {
       event.preventDefault();
       return;
     }
@@ -140,7 +138,7 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
   };
 
   const getPlaceHolder: ComputedRef<string> = computed(() => {
-    return format === '12' ? 'HH : MM AM/PM' : 'HH : MM';
+    return format.value === '12' ? 'HH : MM AM/PM' : 'HH : MM';
   });
 
   return {

package/src/components/tooltip/use-tooltip.ts

@@ -1,26 +1,11 @@
-import { computed, ref } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 import { useElementHover } from '@vueuse/core';
 import { TooltipPropTypes } from './tooltip';
 
 import classNames from 'classnames';
 
 export const useTooltip = (props: TooltipPropTypes) => {
-  const { position, text } = props as {
-    text: string;
-    position:
-      | 'top'
-      | 'top-start'
-      | 'top-end'
-      | 'bottom'
-      | 'bottom-start'
-      | 'bottom-end'
-      | 'left'
-      | 'left-start'
-      | 'left-end'
-      | 'right'
-      | 'right-start'
-      | 'right-end';
-  };
+  const { position, text } = toRefs(props);
 
   const componentRef = ref<HTMLDivElement | null>(null);
   const isHovered = useElementHover(componentRef);
@@ -29,18 +14,18 @@ export const useTooltip = (props: TooltipPropTypes) => {
     // Tooltip Gap: 6px
     return classNames({
       hidden: !isHovered.value,
-      'bottom-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position === 'top',
-      'bottom-[calc(100%+6px)] left-0': position === 'top-start',
-      'bottom-[calc(100%+6px)] right-0': position === 'top-end',
-      'top-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position === 'bottom',
-      'top-[calc(100%+6px)] left-0': position === 'bottom-start',
-      'top-[calc(100%+6px)] right-0': position === 'bottom-end',
-      'left-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position === 'right',
-      'left-[calc(100%+6px)] top-0': position === 'right-start',
-      'left-[calc(100%+6px)] bottom-0': position === 'right-end',
-      'right-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position === 'left',
-      'right-[calc(100%+6px)] top-0': position === 'left-start',
-      'right-[calc(100%+6px)] bottom-0': position === 'left-end',
+      'bottom-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position.value === 'top',
+      'bottom-[calc(100%+6px)] left-0': position.value === 'top-start',
+      'bottom-[calc(100%+6px)] right-0': position.value === 'top-end',
+      'top-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position.value === 'bottom',
+      'top-[calc(100%+6px)] left-0': position.value === 'bottom-start',
+      'top-[calc(100%+6px)] right-0': position.value === 'bottom-end',
+      'left-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position.value === 'right',
+      'left-[calc(100%+6px)] top-0': position.value === 'right-start',
+      'left-[calc(100%+6px)] bottom-0': position.value === 'right-end',
+      'right-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position.value === 'left',
+      'right-[calc(100%+6px)] top-0': position.value === 'left-start',
+      'right-[calc(100%+6px)] bottom-0': position.value === 'left-end',
     });
   });