@dynect/base 0.6.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynect/base",
-  "version": "0.6.0",
+  "version": "0.7.2",
   "description": "Reusable Nuxt base module — components, composables, utils, plugins and i18n from the Dynect design system.",
   "type": "module",
   "license": "MIT",

package/src/runtime/components/base/event-calendar/AgendaView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { CalendarEvent } from './types';
 import LocationDisplay from './LocationDisplay.vue';
 import { useColorManager } from './composables/useColorManager';

package/src/runtime/components/base/event-calendar/ColorManager.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { CalendarEvent, EventColor } from './types';
 import { useColorManager } from './composables/useColorManager';
 

package/src/runtime/components/base/event-calendar/DayEventsOverflowPopup.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import type { CalendarEvent } from './types';
 
 const props = defineProps<{

package/src/runtime/components/base/event-calendar/DayView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import type { CalendarEvent, DayColumnData, TimeSlot } from './types';
 import { useCalendarUtils } from './composables/useCalendarUtils';
 import LocationDisplay from './LocationDisplay.vue';

package/src/runtime/components/base/event-calendar/DragDropVisualFeedback.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import type { CalendarEvent } from './types';
 import { useColorManager } from './composables/useColorManager';
 

package/src/runtime/components/base/event-calendar/EventCalendar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref, shallowRef, watch } from 'vue';
 import { useKeyboardNavigation } from './composables/useKeyboardNavigation';
 import { useDragAndDropSystem } from './composables/useDragAndDrop';
 import { useCompatibility } from './composables/useCompatibility';

package/src/runtime/components/base/event-calendar/EventModal.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { useId } from 'nuxt/app';
 import { onKeyStroke } from '@vueuse/core';
 import { toDate } from 'reka-ui/date';
 import { fromDate, CalendarDate, type DateValue, today, getLocalTimeZone } from '@internationalized/date';

package/src/runtime/components/base/event-calendar/EventResizeHandle.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
 import type { CalendarEvent } from './types';
 
 interface ResizeHandleProps {

package/src/runtime/components/base/event-calendar/ExternalCalendarSettings.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useExternalCalendar, type ExternalCalendarConfig } from './composables/useExternalCalendar';
 
 const props = defineProps<{

package/src/runtime/components/base/event-calendar/LocationDisplay.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 interface LocationDisplayProps {
 	location?: string;
 	showIcon?: boolean;

package/src/runtime/components/base/event-calendar/MonthView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
 import type { CalendarEvent, MonthViewDay } from './types';
 import DayEventsOverflowPopup from './DayEventsOverflowPopup.vue';
 import LocationDisplay from './LocationDisplay.vue';

package/src/runtime/components/base/event-calendar/WeekView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
 import type { CalendarEvent, DayColumnData, TimeSlot } from './types';
 import { useCalendarUtils } from './composables/useCalendarUtils';
 import LocationDisplay from './LocationDisplay.vue';

package/src/runtime/components/base/event-calendar/composables/useAdvancedValidation.ts

@@ -1,3 +1,4 @@
+import { readonly, ref } from 'vue';
 import type { CalendarEvent, RecurringPattern } from '../types';
 
 interface ValidationRule<T = any> {

package/src/runtime/components/base/event-calendar/composables/useColorManager.ts

@@ -1,3 +1,4 @@
+import { type Ref, computed, ref } from 'vue';
 import type { CalendarEvent, EventColor } from '../types';
 
 export interface ColorConfig {

package/src/runtime/components/base/event-calendar/composables/useCompatibility.ts

@@ -1,3 +1,4 @@
+import { readonly, ref } from 'vue';
 interface BrowserCapabilities {
 	hasNativeUUID: boolean;
 	hasResizeObserver: boolean;

package/src/runtime/components/base/event-calendar/composables/useDragAndDrop.ts

@@ -1,3 +1,4 @@
+import { computed, reactive, ref } from 'vue';
 import { makeDraggable, makeDroppable, type IDragEvent } from '@vue-dnd-kit/core';
 import type { CalendarEvent } from '../types';
 import { useCalendarUtils } from './useCalendarUtils';

package/src/runtime/components/base/event-calendar/composables/useEventFiltering.ts

@@ -1,3 +1,4 @@
+import { type ComputedRef, computed } from 'vue';
 import type { CalendarEvent } from '../types';
 
 /**

package/src/runtime/components/base/event-calendar/composables/useEventStatus.ts

@@ -1,3 +1,4 @@
+import { type ComputedRef, computed } from 'vue';
 import type { CalendarEvent, EventStatus } from '../types';
 
 export function useEventStatus(events: ComputedRef<CalendarEvent[]>) {

package/src/runtime/components/base/event-calendar/composables/useEventStore.ts

@@ -1,3 +1,4 @@
+import { computed, reactive, readonly, ref } from 'vue';
 import type { CalendarEvent } from '../types';
 import { usePerformanceCache } from './usePerformanceCache';
 

package/src/runtime/components/base/event-calendar/composables/useExternalCalendar.ts

@@ -1,3 +1,4 @@
+import { type ComputedRef, computed, readonly, ref } from 'vue';
 import type { CalendarEvent } from '../types';
 
 export interface ExternalCalendarProvider {

package/src/runtime/components/base/event-calendar/composables/useKeyboardNavigation.ts

@@ -1,3 +1,4 @@
+import { type Ref, ref } from 'vue';
 import { onKeyStroke } from '@vueuse/core';
 import type { ViewMode } from '../types';
 

package/src/runtime/components/base/event-calendar/composables/useMonitoring.ts

@@ -1,3 +1,4 @@
+import { onMounted, readonly, ref } from 'vue';
 interface PerformanceMetric {
 	name: string;
 	value: number;

package/src/runtime/components/base/event-calendar/composables/useMultiDayLayout.ts

@@ -1,3 +1,4 @@
+import { type ComputedRef, computed } from 'vue';
 import type { CalendarEvent, MonthViewDay } from '../types';
 
 export interface LayoutEvent extends CalendarEvent {

package/src/runtime/components/base/event-calendar/composables/usePerformanceCache.ts

@@ -1,3 +1,4 @@
+import { computed, readonly, ref } from 'vue';
 interface CacheEntry<T> {
 	value: T;
 	timestamp: number;

package/src/runtime/components/base/event-calendar/composables/useRecurringEvents.ts

@@ -1,3 +1,4 @@
+import { type ComputedRef, computed } from 'vue';
 import type { CalendarEvent, RecurringPattern } from '../types';
 
 export function useRecurringEvents(events: ComputedRef<CalendarEvent[]>) {

package/src/runtime/components/base/event-calendar/composables/useSecurity.ts

@@ -1,3 +1,4 @@
+import { readonly, ref } from 'vue';
 import type { CalendarEvent } from '../types';
 
 interface SecurityConfig {

package/src/runtime/components/base/event-calendar/composables/useTimezone.ts

@@ -1,3 +1,4 @@
+import { type ComputedRef, computed, ref } from 'vue';
 import type { CalendarEvent } from '../types';
 import { getLocalTimeZone } from '@internationalized/date';
 

package/src/runtime/components/base/org-chart/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
 import { OrgChart } from './main';
 import { SVG_ICONS, createIconSVG } from './svg-icons';
 import type { OrgChartNodeData, OrgChartNode } from './types';

package/src/runtime/components/base/signature/index.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, reactive, watch } from 'vue';
+import { useId } from 'nuxt/app';
 import SignaturePad from 'signature_pad';
 
 interface SigOption {

package/src/runtime/components/base/toast/Toast.vue

@@ -146,6 +146,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue';
 import { cn } from '@/lib/utils';
 import { type HeightT, type ToastProps, type ToastT, isAction } from './types';
 import { useIsDocumentHidden, getDefaultSwipeDirections } from './hooks';

package/src/runtime/components/base/toast/Toaster.vue

@@ -107,6 +107,7 @@
 <script lang="ts"></script>
 
 <script lang="ts" setup>
+import { computed, nextTick, ref, watchEffect } from 'vue';
 import type { HeightT, Position, ToastT, ToastToDismiss, ToasterProps } from './types';
 import { ToastState } from './state';
 import Toast from './Toast.vue';

package/src/runtime/components/chart/Bar.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { BarChart } from 'echarts/charts';

package/src/runtime/components/chart/Line.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { LineChart } from 'echarts/charts';

package/src/runtime/components/chart/Pie.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';

package/src/runtime/components/chart/Radar.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { RadarChart } from 'echarts/charts';

package/src/runtime/components/dynect/Accordion.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/Alert.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import { cn } from '@/lib/utils';
 
 type AlertVariant = 'success' | 'danger' | 'warning' | 'info' | 'default';

package/src/runtime/components/dynect/Autocomplete.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/Badge.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/Checkbox.vue

@@ -41,6 +41,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useId } from 'nuxt/app';
 import { cn } from '@/lib/utils';
 
 export interface AppCheckboxProps {

package/src/runtime/components/dynect/DatePicker.vue

@@ -50,6 +50,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, readonly, ref, watch } from 'vue';
+import { useId } from 'nuxt/app';
 import type { DateValue } from '@internationalized/date';
 import { DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/DateRange.vue

@@ -53,6 +53,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, readonly, ref, watch } from 'vue';
+import { useId } from 'nuxt/app';
 import type { DateValue } from '@internationalized/date';
 import { DateFormatter, getLocalTimeZone, today, parseDate } from '@internationalized/date';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/Dropzone.vue

@@ -95,6 +95,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 
 defineOptions({

package/src/runtime/components/dynect/EventCalendar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { CalendarEvent, ViewMode } from '@/components/base/event-calendar/types';
 
 // Re-export types for convenience

package/src/runtime/components/dynect/Filters.vue

@@ -61,6 +61,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue';
 export interface FilterOption {
 	label: string;
 	value: string;

package/src/runtime/components/dynect/Gantt.vue

@@ -89,6 +89,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends DynectGanttFeature">
+import { computed } from 'vue';
 import { cn } from '@/lib/utils';
 import type { GanttFeature, GanttRange } from '@/composables/useGantt';
 

package/src/runtime/components/dynect/Input.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, readonly } from 'vue';
+import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
 import { cn, inputSizeClasses } from '@/lib/utils';

package/src/runtime/components/dynect/Modal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { cn } from '@/lib/utils';
 
 interface DialogProps {

package/src/runtime/components/dynect/OtpInput.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import type { OTPInputEmits, OTPInputProps } from 'vue-input-otp';
 import { useForwardPropsEmits } from 'reka-ui';

package/src/runtime/components/dynect/Progress.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/Radio.vue

@@ -37,6 +37,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useId } from 'nuxt/app';
 import { cn } from '@/lib/utils';
 
 defineOptions({

package/src/runtime/components/dynect/Select.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
 import { cn, inputSizeClasses } from '@/lib/utils';

package/src/runtime/components/dynect/SelectMultiple.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
 import { cn, inputSizeClasses } from '@/lib/utils';

package/src/runtime/components/dynect/Sheet.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { cn } from '@/lib/utils';
 
 interface SheetProps {

package/src/runtime/components/dynect/Signature.vue

@@ -20,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { useId } from 'nuxt/app';
 interface BaseSignatureInstance {
 	save: (format?: string) => string;
 	clear: () => void;

package/src/runtime/components/dynect/SwitchColor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useColorMode } from '#imports';
 const colorMode: any = useColorMode();
 const isDark = computed(() => colorMode.value === 'dark');

package/src/runtime/components/dynect/Table.vue

@@ -1,4 +1,5 @@
-<script setup lang="ts" generic="TData extends Record<string, any>">
+<script setup lang="ts" generic="TData extends Record<string, any>
+import { computed, onMounted, ref, watch } from 'vue';">
 import { cn } from '@/lib/utils';
 
 // Column definition

package/src/runtime/components/dynect/TagsInput.vue

@@ -101,6 +101,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, readonly, ref, watch } from 'vue';
+import { useId } from 'nuxt/app';
 import { onClickOutside } from '@vueuse/core';
 import { cva } from 'class-variance-authority';
 import { cn, inputSizeClasses } from '@/lib/utils';

package/src/runtime/components/dynect/Telephone.vue

@@ -107,6 +107,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, readonly, ref, watch } from 'vue';
 import { parsePhoneNumberFromString, type CountryCode, type NumberFormat } from 'libphonenumber-js/max';
 import { cva } from 'class-variance-authority';
 import { useState, useId } from 'nuxt/app';

package/src/runtime/components/dynect/TextEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { watch } from 'vue';
 import type { Content, Extensions } from '@tiptap/vue-3';
 import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/Textarea.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, readonly } from 'vue';
+import { useId } from 'nuxt/app';
 import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
 import { cn, inputSizeClasses } from '@/lib/utils';

package/src/runtime/components/dynect/TimePicker.vue

@@ -87,6 +87,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, readonly, ref, watch } from 'vue';
+import { useId } from 'nuxt/app';
 import { cn } from '@/lib/utils';
 
 defineOptions({

package/src/runtime/components/dynect/Timeline.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

package/src/runtime/components/dynect/Toggle.vue

@@ -60,6 +60,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useId } from 'nuxt/app';
 import { cn } from '@/lib/utils';
 
 export interface ToggleProps {

package/src/runtime/components/ui/carousel/Carousel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface';
 import { cn } from '@/lib/utils';
 import { useProvideCarousel } from './useCarousel';

package/src/runtime/components/ui/carousel/CarouselContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import type { WithClassAsProps } from './interface';
 import { cn } from '@/lib/utils';
 import { useCarousel } from './useCarousel';

package/src/runtime/components/ui/gantt/Gantt.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import { cn } from '@/lib/utils';
 
 export interface GanttProps {

package/src/runtime/components/ui/gantt/GanttFeatureItem.vue

@@ -51,6 +51,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
 import { cn } from '@/lib/utils';
 
 const props = defineProps({ id: { type: String, required: true }, startAt: { type: Date, required: true }, endAt: { type: Date, required: true }, class: { type: String, required: false }, status: { type: Object, required: false }, progress: { type: Number, required: false } });

package/src/runtime/components/ui/gantt/GanttMarker.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
 import { cn } from '@/lib/utils';
 
 export interface GanttMarkerProps {

package/src/runtime/components/ui/gantt/GanttSidebar.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
 import { cn } from '@/lib/utils';
 
 export interface GanttSidebarProps {

package/src/runtime/components/ui/gantt/GanttTimeline.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { cn } from '@/lib/utils';
 
 export interface GanttTimelineProps {

package/src/runtime/components/ui/gantt/GanttToday.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { cn } from '@/lib/utils';
 
 export interface GanttTodayProps {

package/src/runtime/components/ui/inline-editable-input/InlineEditableInput.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
 import { cn } from '@/lib/utils';
 
 interface Props {

package/src/runtime/components/ui/kanban/Kanban.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends KanbanItemProps, C extends KanbanColumnProps">
+import { toRef } from 'vue';
 import { DnDProvider } from '@vue-dnd-kit/core';
 import { cn } from '~/lib/utils';
 

package/src/runtime/components/ui/kanban/KanbanBoard.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import { makeDroppable } from '@vue-dnd-kit/core';
 import { cn } from '@/lib/utils';
 import type { IDragEvent } from '@vue-dnd-kit/core';

package/src/runtime/components/ui/kanban/KanbanCard.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends KanbanItemProps">
+import { computed, ref } from 'vue';
 import { makeDraggable } from '@vue-dnd-kit/core';
 import { cn } from '@/lib/utils';
 import type { IDragEvent } from '@vue-dnd-kit/core';

package/src/runtime/components/ui/kanban/KanbanCards.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script setup lang="ts" generic="T extends KanbanItemProps">
+import { computed } from 'vue';
 import { cn } from '@/lib/utils';
 
 export interface KanbanCardsProps {

package/src/runtime/components/ui/resizable/ResizablePanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import type { SplitterPanelEmits, SplitterPanelProps } from 'reka-ui';
 import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from 'reka-ui';
 

package/src/runtime/utils/function.ts

@@ -1,5 +1,6 @@
 import country from '@/assets/files/country.json';
 import { isValidPhoneNumber, parsePhoneNumberFromString, type CountryCode } from 'libphonenumber-js/max';
+import { useState } from 'nuxt/app';
 
 interface CountryData {
 	name: string;