@coreui/vue-pro 4.8.2 → 4.9.0-beta.1

package/src/composables/useColorModes.ts

@@ -0,0 +1,57 @@
+import { onBeforeMount, ref, watch } from 'vue'
+
+const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName)
+const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
+  localStorage.setItem(localStorageItemName, colorMode)
+
+const getPreferredColorScheme = (localStorageItemName: string) => {
+  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, () => {
+    setStoredTheme(localStorageItemName, colorMode.value)
+    setTheme(colorMode.value)
+  })
+
+  onBeforeMount(() => {
+    if (typeof getStoredTheme(localStorageItemName) === 'string') {
+      setTheme(colorMode.value)
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const storedTheme = getStoredTheme(localStorageItemName)
+      if (storedTheme !== 'light' && storedTheme !== 'dark') {
+        setTheme(colorMode.value)
+      }
+    })
+
+    watch(colorMode, () => setTheme(colorMode.value))
+  })
+
+  return {
+    getColorMode: () => colorMode.value,
+    isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
+    setColorMode: (mode: string) => {
+      colorMode.value = mode
+    },
+  }
+}

package/src/directives/index.ts

@@ -2,4 +2,4 @@ import vcplaceholder from './v-c-placeholder'
 import vcpopover from './v-c-popover'
 import vctooltip from './v-c-tooltip'
 
-export { vcplaceholder, vcpopover, vctooltip,  }
+export { vcplaceholder, vcpopover, vctooltip }

package/src/directives/v-c-popover.ts

@@ -1,13 +1,7 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
-const getUID = (prefix: string) => {
-  do {
-    prefix += Math.floor(Math.random() * 1000000)
-  } while (document.getElementById(prefix))
-
-  return prefix
-}
+import { getUID } from '../utils'
 
 const createPopoverElement = (id: string, header: string, content: string): HTMLDivElement => {
   const popover = document.createElement('div')
@@ -20,6 +14,7 @@ const createPopoverElement = (id: string, header: string, content: string): HTML
   return popover
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
   document.body.appendChild(popover)
   createPopper(el, popover, popperOptions)
@@ -31,10 +26,11 @@ const addPopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptio
 const removePopoverElement = (popover: HTMLDivElement) => {
   popover.classList.remove('show')
   setTimeout(() => {
-    document.body.removeChild(popover)
+    popover.remove()
   }, 300)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const togglePopoverElement = (popover: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
   const popperElement = document.getElementById(popover.id)
   if (popperElement && popperElement.classList.contains('show')) {
@@ -49,13 +45,13 @@ export default {
   uid: '',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
     const value = binding.value
-    const content = typeof value === 'string' ? value : value.content ? value.content : ''
-    const header = value.header ? value.header : ''
-    const trigger = value.trigger ? value.trigger : 'click'
+    const content = typeof value === 'string' ? value : value.content ?? ''
+    const header = value.header ?? ''
+    const trigger = value.trigger ?? 'click'
 
     // Popper Config
-    const offset = value.offset ? value.offset : [0, 8]
-    const placement = value.placement ? value.placement : 'top'
+    const offset = value.offset ?? [0, 8]
+    const placement = value.placement ?? 'top'
 
     const popperOptions = {
       placement: placement,

package/src/directives/v-c-tooltip.ts

@@ -1,13 +1,7 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
-const getUID = (prefix: string) => {
-  do {
-    prefix += Math.floor(Math.random() * 1000000)
-  } while (document.getElementById(prefix))
-
-  return prefix
-}
+import { getUID } from '../utils'
 
 const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   const tooltip = document.createElement('div')
@@ -19,6 +13,7 @@ const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   return tooltip
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
   document.body.appendChild(tooltip)
   createPopper(el, tooltip, popperOptions)
@@ -30,10 +25,11 @@ const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptio
 const removeTooltipElement = (tooltip: HTMLDivElement) => {
   tooltip.classList.remove('show')
   setTimeout(() => {
-    document.body.removeChild(tooltip)
+    tooltip.remove()
   }, 300)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const toggleTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
   const popperElement = document.getElementById(tooltip.id)
   if (popperElement && popperElement.classList.contains('show')) {
@@ -46,12 +42,12 @@ const toggleTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOp
 export default {
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
     const value = binding.value
-    const content = typeof value === 'string' ? value : value.content ? value.content : ''
-    const trigger = value.trigger ? value.trigger : 'hover'
+    const content = typeof value === 'string' ? value : value.content ?? ''
+    const trigger = value.trigger ?? 'hover'
 
     // Popper Config
-    const offset = value.offset ? value.offset : [0, 0]
-    const placement = value.placement ? value.placement : 'top'
+    const offset = value.offset ?? [0, 6]
+    const placement = value.placement ?? 'top'
 
     const popperOptions = {
       placement: placement,

package/src/directives/v-c-visible.ts

@@ -1,4 +1,4 @@
-import { ObjectDirective } from '@vue/runtime-core'
+import { ObjectDirective } from 'vue'
 
 interface VShowElement extends HTMLElement {
   // _vod = vue original display

package/src/index.ts

@@ -1,44 +1,23 @@
-//@ts-nocheck
 import { App } from 'vue'
 import * as Components from './components'
-import { vcplaceholder, vcpopover, vctooltip } from './directives'
-
-const removeKeysFromObject = (object, keys) => {
-  return Object.entries(object).reduce((obj, [key, value]) => {
-    if (!keys.includes(key) && !keys.includes(value.name)) {
-      obj[key] = value
-    }
-    return obj
-  }, {})
-}
+import * as Directives from './directives'
 
 const CoreuiVue = {
-  install: (app: App, options: any): void => {
-    let pluginComponents = Components
-    // let pluginDirectives = Directives
-
-    const toRemove = options && options.remove ? options.remove : null
-    if (toRemove && Array.isArray(toRemove)) {
-      pluginComponents = removeKeysFromObject(Components, toRemove)
-      // pluginDirectives = removeKeysFromObject(Directives, toRemove)
+  install: (app: App): void => {
+    for (const key in Components) {
+      app.component(key, Components[key])
     }
 
-    for (const plugin in pluginComponents) {
-      app.component(plugin, Components[plugin])
+    for (const key in Directives) {
+      app.directive(key, Directives[key])
     }
-    // for (const directive in pluginDirectives) {
-    //   app.directive(directive, Directives[directive])
-    // }
-
-    app.directive('c-placeholder', vcplaceholder)
-    app.directive('c-popover', vcpopover)
-    app.directive('c-tooltip', vctooltip)
   },
 }
 
 // Export library
 export default CoreuiVue
 
-//Export components
+// Export components & directives
 export * from './components'
+export * from './composables'
 export * from './directives'

package/src/utils/getUID.ts

@@ -0,0 +1,9 @@
+const getUID = (prefix: string) => {
+  do {
+    prefix += Math.floor(Math.random() * 1_000_000)
+  } while (document.getElementById(prefix))
+
+  return prefix
+}
+
+export default getUID

package/src/utils/index.ts

@@ -1,3 +1,6 @@
+import getUID from './getUID'
 import isInViewport from './isInViewport'
+import isObjectInArray from './isObjectInArray'
+import isRTL from './isRTL'
 
-export { isInViewport }
+export { getUID, isInViewport, isObjectInArray, isRTL }

package/src/utils/isObjectInArray.ts

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

package/src/utils/isRTL.ts

@@ -0,0 +1,13 @@
+const isRTL = (element?: HTMLElement | HTMLDivElement | null) => {
+  if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+    return true
+  }
+
+  if (element) {
+    return element.closest('[dir="rtl"]') !== null
+  }
+
+  return false
+}
+
+export default isRTL