@coreui/vue-pro 5.0.0-alpha.1 → 5.0.0-beta.1

package/src/components/time-picker/CTimePickerRollCol.ts

@@ -1,4 +1,6 @@
-import { defineComponent, h, onUpdated, PropType, ref } from 'vue'
+import { defineComponent, h, onUpdated, PropType, ref, watch } from 'vue'
+
+import { useIsVisible } from '../../composables'
 
 export interface Element {
   value: number | string
@@ -19,17 +21,29 @@ const CTimePickerRollCol = defineComponent({
   emits: ['click'],
   setup(props, { emit }) {
     const init = ref(true)
-    const colRef = ref<HTMLDivElement>()
+    const colRef = ref<HTMLElement>()
+    const isVisible = useIsVisible(colRef)
 
-    onUpdated(() => {
+    const scrollToSelectedElement = () => {
       const nodeEl = colRef.value?.querySelector('.selected')
-      if (nodeEl && nodeEl instanceof HTMLElement) {
+      if (isVisible.value && nodeEl && nodeEl instanceof HTMLElement) {
         colRef.value?.scrollTo({
           top: nodeEl.offsetTop,
           behavior: init.value ? 'auto' : 'smooth',
         })
       }
-      init.value = false
+    }
+
+    watch(isVisible, () => {
+      scrollToSelectedElement()
+
+      if (isVisible.value) {
+        init.value = false
+      }
+    })
+    
+    onUpdated(() => {
+      scrollToSelectedElement()
     })
 
     const handleKeyDown = (event: KeyboardEvent, value: number | string) => {

package/src/components/tooltip/CTooltip.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
+import { defineComponent, h, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
+import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
@@ -8,6 +9,7 @@ import { getRTLPlacement } from '../../utils'
 
 const CTooltip = defineComponent({
   name: 'CTooltip',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a CSS fade transition to the tooltip.
@@ -18,6 +20,17 @@ const CTooltip = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v5.0.0-beta.1
+     */
+    container: {
+      type: [Object, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
@@ -164,45 +177,50 @@ const CTooltip = defineComponent({
 
     return () => [
       h(
-        Teleport,
+        CConditionalTeleport,
         {
-          to: 'body',
+          container: props.container,
+          teleport: true,
         },
-        h(
-          Transition,
-          {
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-          },
-          () =>
-            visible.value &&
+        {
+          default: () =>
             h(
-              'div',
+              Transition,
               {
-                class: [
-                  'tooltip',
-                  'bs-tooltip-auto',
+                onEnter: (el, done) => handleEnter(el, done),
+                onLeave: (el, done) => handleLeave(el, done),
+              },
+              () =>
+                visible.value &&
+                h(
+                  'div',
                   {
-                    fade: props.animation,
+                    ...attrs,
+                    class: [
+                      'tooltip',
+                      'bs-tooltip-auto',
+                      {
+                        fade: props.animation,
+                      },
+                      attrs.class,
+                    ],
+                    ref: tooltipRef,
+                    role: 'tooltip',
                   },
-                ],
-                ref: tooltipRef,
-                role: 'tooltip',
-                ...attrs,
-              },
-              [
-                h('div', { class: 'tooltip-arrow' }),
-                (props.content || slots.content) &&
-                  h(
-                    'div',
-                    { class: 'tooltip-inner' },
-                    {
-                      default: () => (slots.content && slots.content()) || props.content,
-                    },
-                  ),
-              ],
+                  [
+                    h('div', { class: 'tooltip-arrow' }),
+                    (props.content || slots.content) &&
+                      h(
+                        'div',
+                        { class: 'tooltip-inner' },
+                        {
+                          default: () => (slots.content && slots.content()) || props.content,
+                        },
+                      ),
+                  ],
+                ),
             ),
-        ),
+        },
       ),
       slots.toggler &&
         slots.toggler({

package/src/composables/index.ts

@@ -1,5 +1,6 @@
 import { useColorModes } from './useColorModes'
 import { useDebouncedCallback } from './useDebouncedCallback'
+import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
 
-export { useColorModes, useDebouncedCallback, usePopper }
+export { useColorModes, useDebouncedCallback, useIsVisible, usePopper }

package/src/composables/useIsVisible.ts

@@ -0,0 +1,20 @@
+import { onMounted, onUnmounted, ref, Ref } from 'vue'
+
+export const useIsVisible = (el: Ref<HTMLElement | undefined>) => {
+  const isIntersecting = ref(false)
+  const observer = ref()
+
+  onMounted(() => {
+    observer.value = new IntersectionObserver(([entry]) => {
+      isIntersecting.value = entry.isIntersecting
+    })
+
+    el.value && observer.value.observe(el.value)
+  })
+
+  onUnmounted(() => {
+    observer.value.disconnect()
+  })
+
+  return isIntersecting
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { App } from 'vue'
 import * as Components from './components'
 import * as Directives from './directives'
@@ -5,11 +6,14 @@ import * as Directives from './directives'
 const CoreuiVue = {
   install: (app: App): void => {
     for (const key in Components) {
-      app.component(key, Components[key])
+      app.component(key, (Components as { [key: string]: any })[key])
     }
 
     for (const key in Directives) {
-      app.directive(Directives[key]['name'], Directives[key])
+      app.directive(
+        (Directives as { [key: string]: any })[key]['name'],
+        (Directives as { [key: string]: any })[key],
+      )
     }
   },
 }

package/src/utils/getRTLPlacement.ts

@@ -1,5 +1,5 @@
 import { Placement } from '@popperjs/core'
-import { isRTL } from '../utils'
+import isRTL from './isRTL'
 
 const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
   switch (placement) {

package/dist/components/calendar/CCalendar.d.ts

@@ -1,294 +0,0 @@
-import { PropType } from 'vue';
-declare const CCalendar: import("vue").DefineComponent<{
-    /**
-     * Default date of the component
-     */
-    calendarDate: PropType<string | Date | null>;
-    /**
-     * The number of calendars that render on desktop devices.
-     */
-    calendars: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * Set the format of day name.
-     *
-     * @default 'numeric'
-     * @since 4.6.0
-     */
-    dayFormat: {
-        type: (StringConstructor | FunctionConstructor)[];
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Specify the list of dates that cannot be selected.
-     */
-    disabledDates: {
-        type: PropType<Date[] | Date[][]>;
-    };
-    /**
-     * Initial selected to date (range).
-     */
-    endDate: PropType<string | Date | null>;
-    /**
-     * Sets the day of start week.
-     * - 0 - Sunday,
-     * - 1 - Monday,
-     * - 2 - Tuesday,
-     * - 3 - Wednesday,
-     * - 4 - Thursday,
-     * - 5 - Friday,
-     * - 6 - Saturday,
-     */
-    firstDayOfWeek: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
-     */
-    locale: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Max selectable date.
-     */
-    maxDate: PropType<string | Date | null>;
-    /**
-     * Min selectable date.
-     */
-    minDate: PropType<string | Date | null>;
-    /**
-     * Show arrows navigation.
-     */
-    navigation: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Reorder year-month navigation, and render year first.
-     *
-     * @since 4.6.0
-     */
-    navYearFirst: BooleanConstructor;
-    /**
-     * Allow range selection.
-     */
-    range: BooleanConstructor;
-    /**
-     * Toggle select mode between start and end date.
-     */
-    selectEndDate: BooleanConstructor;
-    /**
-     * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
-     *
-     * @since 4.9.0
-     */
-    selectAdjacementDays: BooleanConstructor;
-    /**
-     * Specify the type of date selection as day, week, month, or year.
-     *
-     * @since 5.0.0-alpha.1
-     */
-    selectionType: {
-        type: PropType<"day" | "week" | "month" | "year">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
-     *
-     * @since 4.9.0
-     */
-    showAdjacementDays: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Set whether to display week numbers in the calendar.
-     *
-     * @since 5.0.0-alpha.1
-     */
-    showWeekNumber: BooleanConstructor;
-    /**
-     * Initial selected date.
-     */
-    startDate: PropType<string | Date | null>;
-    /**
-     * Set length or format of day name.
-     *
-     * @type  number | 'long' | 'narrow' | 'short'
-     */
-    weekdayFormat: {
-        type: (NumberConstructor | StringConstructor | FunctionConstructor)[];
-        default: number;
-        validator: (value: string | number) => boolean;
-    };
-    /**
-     * Label displayed over week numbers in the calendar.
-     *
-     * @since 5.0.0-alpha.1
-     */
-    weekNumbersLabel: StringConstructor;
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("date-hover" | "calendar-date-change" | "start-date-change" | "end-date-change")[], "date-hover" | "calendar-date-change" | "start-date-change" | "end-date-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Default date of the component
-     */
-    calendarDate: PropType<string | Date | null>;
-    /**
-     * The number of calendars that render on desktop devices.
-     */
-    calendars: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * Set the format of day name.
-     *
-     * @default 'numeric'
-     * @since 4.6.0
-     */
-    dayFormat: {
-        type: (StringConstructor | FunctionConstructor)[];
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Specify the list of dates that cannot be selected.
-     */
-    disabledDates: {
-        type: PropType<Date[] | Date[][]>;
-    };
-    /**
-     * Initial selected to date (range).
-     */
-    endDate: PropType<string | Date | null>;
-    /**
-     * Sets the day of start week.
-     * - 0 - Sunday,
-     * - 1 - Monday,
-     * - 2 - Tuesday,
-     * - 3 - Wednesday,
-     * - 4 - Thursday,
-     * - 5 - Friday,
-     * - 6 - Saturday,
-     */
-    firstDayOfWeek: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
-     */
-    locale: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Max selectable date.
-     */
-    maxDate: PropType<string | Date | null>;
-    /**
-     * Min selectable date.
-     */
-    minDate: PropType<string | Date | null>;
-    /**
-     * Show arrows navigation.
-     */
-    navigation: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Reorder year-month navigation, and render year first.
-     *
-     * @since 4.6.0
-     */
-    navYearFirst: BooleanConstructor;
-    /**
-     * Allow range selection.
-     */
-    range: BooleanConstructor;
-    /**
-     * Toggle select mode between start and end date.
-     */
-    selectEndDate: BooleanConstructor;
-    /**
-     * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
-     *
-     * @since 4.9.0
-     */
-    selectAdjacementDays: BooleanConstructor;
-    /**
-     * Specify the type of date selection as day, week, month, or year.
-     *
-     * @since 5.0.0-alpha.1
-     */
-    selectionType: {
-        type: PropType<"day" | "week" | "month" | "year">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
-     *
-     * @since 4.9.0
-     */
-    showAdjacementDays: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Set whether to display week numbers in the calendar.
-     *
-     * @since 5.0.0-alpha.1
-     */
-    showWeekNumber: BooleanConstructor;
-    /**
-     * Initial selected date.
-     */
-    startDate: PropType<string | Date | null>;
-    /**
-     * Set length or format of day name.
-     *
-     * @type  number | 'long' | 'narrow' | 'short'
-     */
-    weekdayFormat: {
-        type: (NumberConstructor | StringConstructor | FunctionConstructor)[];
-        default: number;
-        validator: (value: string | number) => boolean;
-    };
-    /**
-     * Label displayed over week numbers in the calendar.
-     *
-     * @since 5.0.0-alpha.1
-     */
-    weekNumbersLabel: StringConstructor;
-}>> & {
-    "onDate-hover"?: ((...args: any[]) => any) | undefined;
-    "onCalendar-date-change"?: ((...args: any[]) => any) | undefined;
-    "onStart-date-change"?: ((...args: any[]) => any) | undefined;
-    "onEnd-date-change"?: ((...args: any[]) => any) | undefined;
-}, {
-    calendars: number;
-    dayFormat: string | Function;
-    firstDayOfWeek: number;
-    locale: string;
-    navigation: boolean;
-    navYearFirst: boolean;
-    range: boolean;
-    selectEndDate: boolean;
-    selectAdjacementDays: boolean;
-    selectionType: "day" | "week" | "month" | "year";
-    showAdjacementDays: boolean;
-    showWeekNumber: boolean;
-    weekdayFormat: string | number | Function;
-}, {}>;
-export { CCalendar };

package/dist/components/calendar/utils.d.ts

@@ -1,30 +0,0 @@
-export declare const convertIsoWeekToDate: (isoWeek: string) => Date;
-export declare const convertToDateObject: (date: Date | string | null, selectionType?: 'day' | 'week' | 'month' | 'year') => Date;
-export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
-export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
-export declare const createGroupsInArray: <T>(arr: T[], numberOfGroups: number) => T[][];
-export declare const getCalendarDate: (calendarDate: Date, order: number, view: 'days' | 'months' | 'years') => Date;
-export declare const getCurrentYear: () => number;
-export declare const getCurrentMonth: () => number;
-export declare const getDateBySelectionType: (date: Date | null, selectionType: 'day' | 'week' | 'month' | 'year') => string | Date | null;
-export declare const getMonthName: (month: number, locale: string) => string;
-export declare const getMonthsNames: (locale: string) => string[];
-export declare const getYears: (year: number) => number[];
-export declare const getWeekNumber: (date: Date) => number;
-export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
-    weekNumber?: number | undefined;
-    days: {
-        date: Date;
-        month: string;
-    }[];
-}[];
-export declare const isDisableDateInRange: (startDate?: Date | null, endDate?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean;
-export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean | undefined;
-export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
-export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
-export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
-export declare const isLastDayOfMonth: (date: Date) => boolean;
-export declare const isSameDateAs: (date: Date | null, date2: Date | null) => boolean;
-export declare const isStartDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
-export declare const isToday: (date: Date) => boolean;
-export declare const isValidDate: (date: string) => number | false;