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

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

@@ -393,72 +393,42 @@ const CTimePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h(
-        'div',
-        {
-          class: [
-            'input-group',
-            'picker-input-group',
-            {
-              [`input-group-${props.size}`]: props.size,
-            },
-          ],
-        },
-        [
-          h('input', {
-            autocomplete: 'off',
-            class: 'form-control',
-            disabled: props.disabled,
-            onInput: (event: Event) => {
-              if (isValidTime((event.target as HTMLInputElement).value)) {
-                date.value = convertTimeToDate((event.target as HTMLInputElement).value)
-              }
-            },
-            placeholder: props.placeholder,
-            readonly: props.inputReadOnly,
-            ref: inputRef,
-            required: props.required,
-            value: date.value
-              ? date.value.toLocaleTimeString(props.locale, {
-                  hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
-                  ...(!props.seconds && { timeStyle: 'short' }),
-                })
-              : '',
+      h('div', { class: 'time-picker-input-group' }, [
+        h('input', {
+          autocomplete: 'off',
+          class: 'time-picker-input',
+          disabled: props.disabled,
+          onInput: (event: Event) => {
+            if (isValidTime((event.target as HTMLInputElement).value)) {
+              date.value = convertTimeToDate((event.target as HTMLInputElement).value)
+            }
+          },
+          placeholder: props.placeholder,
+          readonly: props.inputReadOnly,
+          ref: inputRef,
+          required: props.required,
+          value: date.value
+            ? date.value.toLocaleTimeString(props.locale, {
+                hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
+                ...(!props.seconds && { timeStyle: 'short' }),
+              })
+            : '',
+        }),
+        props.indicator && h('div', { class: 'time-picker-indicator' }),
+        props.cleaner &&
+          date.value &&
+          h('div', {
+            class: 'time-picker-cleaner',
+            onClick: (event: Event) => handleClear(event),
           }),
-          (props.indicator || props.cleaner) &&
-            h('div', { class: 'input-group-text' }, [
-              props.indicator &&
-                h(
-                  'span',
-                  {
-                    class: 'picker-input-group-indicator',
-                  },
-                  slots.indicator
-                    ? slots.indicator()
-                    : h('span', { class: 'picker-input-group-icon time-picker-input-icon' }),
-                ),
-              props.cleaner &&
-                h(
-                  'span',
-                  {
-                    class: 'picker-input-group-cleaner',
-                    onClick: (event: Event) => handleClear(event),
-                    role: 'button',
-                  },
-                  slots.cleaner
-                    ? slots.cleaner()
-                    : h('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' }),
-                ),
-            ]),
-        ],
-      )
+      ])
 
     const TimePickerSelect = () => [
       h('span', { class: 'time-picker-inline-icon' }),
       h(
         'select',
         {
-          class: 'form-select',
+          class: 'time-picker-inline-select',
           disabled: props.disabled,
           onChange: (event: Event) =>
             handleTimeChange('hours', (event.target as HTMLSelectElement).value),
@@ -479,7 +449,7 @@ const CTimePicker = defineComponent({
       h(
         'select',
         {
-          class: 'form-select',
+          class: 'time-picker-inline-select',
           disabled: props.disabled,
           onChange: (event: Event) =>
             handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
@@ -501,7 +471,7 @@ const CTimePicker = defineComponent({
         h(
           'select',
           {
-            class: 'form-select',
+            class: 'time-picker-inline-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
               handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
@@ -523,7 +493,7 @@ const CTimePicker = defineComponent({
         h(
           'select',
           {
-            class: 'form-select',
+            class: 'time-picker-inline-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
               handleTimeChange('toggle', (event.target as HTMLSelectElement).value),
@@ -600,6 +570,7 @@ const CTimePicker = defineComponent({
                 class: [
                   'time-picker',
                   {
+                    [`time-picker-${props.size}`]: props.size,
                     disabled: props.disabled,
                     'is-invalid': isValid.value === false ? true : false,
                     'is-valid': isValid.value,
@@ -645,7 +616,7 @@ const CTimePicker = defineComponent({
                     props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
                   ),
                 footer: () =>
-                  h('div', { class: 'picker-footer' }, [
+                  h('div', { class: 'time-picker-footer' }, [
                     props.cancelButton &&
                       h(
                         CButton,

package/src/components/tooltip/CTooltip.ts

@@ -104,7 +104,7 @@ const CTooltip = defineComponent({
     const tooltipRef = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
-    
+
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
 

package/src/components/widgets/CWidgetStatsA.ts

@@ -33,9 +33,7 @@ const CWidgetStatsA = defineComponent({
       h(
         CCard,
         {
-          class: [
-            { [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
-          ],
+          class: [{ [`bg-${props.color}`]: props.color, 'text-white': props.color }],
         },
         () => [
           h(

package/src/components/widgets/CWidgetStatsB.ts

@@ -57,7 +57,7 @@ const CWidgetStatsB = defineComponent({
         {
           class: [
             {
-              'text-high-emphasis-inverse': props.inverse,
+              'text-white': props.inverse,
             },
           ],
           color: props.color,
@@ -98,9 +98,7 @@ const CWidgetStatsB = defineComponent({
                 h(
                   'small',
                   {
-                    class: [
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
-                    ],
+                    class: [props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary'],
                   },
                   {
                     default: () => (slots.text && slots.text()) || props.text,

package/src/components/widgets/CWidgetStatsC.ts

@@ -75,7 +75,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-end mb-4',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   slots.icon && slots.icon(),
@@ -96,7 +96,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-uppercase fw-semibold small',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   {

package/src/components/widgets/CWidgetStatsD.ts

@@ -74,7 +74,7 @@ const CWidgetStatsD = defineComponent({
                           h(CCol, { class: 'fs-5 fw-semibold' }, () => value.value),
                           h(
                             CCol,
-                            { class: 'text-uppercase text-medium-emphasis small' },
+                            { class: 'text-uppercase text-body-secondary small' },
                             () => value.title,
                           ),
                         ],

package/src/components/widgets/CWidgetStatsE.ts

@@ -35,7 +35,7 @@ const CWidgetStatsE = defineComponent({
               h(
                 'div',
                 {
-                  class: 'text-muted small text-uppercase font-weight-bold',
+                  class: 'text-body-secondary small text-uppercase font-weight-bold',
                 },
                 {
                   default: () => (slots.title && slots.title()) || props.title,

package/src/components/widgets/CWidgetStatsF.ts

@@ -81,7 +81,7 @@ const CWidgetStatsF = defineComponent({
                     h(
                       'div',
                       {
-                        class: 'text-medium-emphasis text-uppercase fw-semibold small',
+                        class: 'text-body-secondary text-uppercase fw-semibold small',
                       },
                       {
                         default: () => (slots.title && slots.title()) || props.title,

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`Loads and display CWidgetStatsE component renders correctly 1`] = `
 "<div class="card">
   <div class="card-body text-center">
-    <div class="text-muted small text-uppercase font-weight-bold">title</div>
+    <div class="text-body-secondary small text-uppercase font-weight-bold">title</div>
     <div class="h2 py-3">value</div>chartdefault
   </div>
 </div>"

package/src/composables/index.ts

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

package/src/composables/useColorModes.ts

@@ -0,0 +1,63 @@
+import { onBeforeMount, ref, watch } from 'vue'
+
+const getStoredTheme = (localStorageItemName: string) =>
+  typeof window !== 'undefined' && localStorage.getItem(localStorageItemName)
+
+const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
+  localStorage.setItem(localStorageItemName, colorMode)
+
+const getPreferredColorScheme = (localStorageItemName: string) => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const storedTheme = getStoredTheme(localStorageItemName)
+
+  if (storedTheme) {
+    return storedTheme
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const setTheme = (colorMode: string) => {
+  document.documentElement.dataset.coreuiTheme =
+    colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : colorMode
+
+  const event = new Event('ColorSchemeChange')
+  document.documentElement.dispatchEvent(event)
+}
+
+export const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') => {
+  const colorMode = ref(getPreferredColorScheme(localStorageItemName))
+
+  watch(colorMode, () => {
+    if (colorMode.value) {
+      setStoredTheme(localStorageItemName, colorMode.value)
+      setTheme(colorMode.value)
+    }
+  })
+
+  onBeforeMount(() => {
+    if (typeof getStoredTheme(localStorageItemName) === 'string' && colorMode.value) {
+      setTheme(colorMode.value)
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const storedTheme = getStoredTheme(localStorageItemName)
+      if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode.value) {
+        setTheme(colorMode.value)
+      }
+    })
+  })
+
+  return {
+    colorMode,
+    isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
+    setColorMode: (mode: string) => {
+      colorMode.value = mode
+    },
+  }
+}

package/src/composables/useDebouncedCallback.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+
+export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
+  const timeout = ref<ReturnType<typeof setTimeout>>()
+  const debouncedFn = (...args: any[]) => {
+    const handler = () => {
+      clearTimeout(timeout.value)
+      callback(...args)
+    }
+
+    clearTimeout(timeout.value)
+    timeout.value = setTimeout(handler, delay)
+  }
+
+  return debouncedFn()
+}

package/src/utils/getRTLPlacement.ts

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

package/src/utils/isObjectInArray.ts

@@ -1,7 +1,7 @@
 const isObjectInArray = <T>(array: T[], item: T, ignore: string[] = []) =>
   array.some((_item: T) => {
     let result = true
-    for (const key in item) {
+    for (const key in _item) {
       if (!ignore.includes(key) && item[key] !== _item[key]) {
         result = false
         break