@coreui/vue-pro 4.9.0-rc.0 → 5.0.0-alpha.0

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

@@ -1,7 +1,6 @@
 import { defineComponent, h, ref, watch } from 'vue'
 
 import { CButton } from '../button'
-import { CInputGroup } from '../form'
 import { CFormControlWrapper } from '../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 
@@ -392,10 +391,10 @@ const CTimePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
+      h('div', { class: 'time-picker-input-group' }, [
         h('input', {
           autocomplete: 'off',
-          class: 'form-control',
+          class: 'time-picker-input',
           disabled: props.disabled,
           onInput: (event: Event) => {
             if (isValidTime((event.target as HTMLInputElement).value)) {
@@ -413,31 +412,13 @@ const CTimePicker = defineComponent({
               })
             : '',
         }),
-        (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' }),
-              ),
-          ]),
+        props.indicator && h('div', { class: 'time-picker-indicator' }),
+        props.cleaner &&
+          date.value &&
+          h('div', {
+            class: 'time-picker-cleaner',
+            onClick: (event: Event) => handleClear(event),
+          }),
       ])
 
     const TimePickerSelect = () => [
@@ -587,6 +568,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,
@@ -632,7 +614,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

@@ -12,7 +12,7 @@ const CTooltip = defineComponent({
     /**
      * Apply a CSS fade transition to the tooltip.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     animation: {
       type: Boolean,
@@ -25,7 +25,7 @@ const CTooltip = defineComponent({
     /**
      * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     delay: {
       type: [Number, Object] as PropType<number | { show: number; hide: number }>,
@@ -34,7 +34,7 @@ const CTooltip = defineComponent({
     /**
      * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     fallbackPlacements: {
       type: [String, Array] as PropType<Placements | Placements[]>,

package/src/composables/index.ts

@@ -1,3 +1,4 @@
+import { useColorModes } from './useColorModes'
 import { usePopper } from './usePopper'
 
-export { usePopper }
+export { useColorModes, 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
+    },
+  }
+}