@coreui/vue-pro 4.0.4 → 4.1.0

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

@@ -0,0 +1,32 @@
+import { DirectiveBinding } from 'vue'
+
+const BREAKPOINTS = [
+  'xxl' as const,
+  'xl' as const,
+  'lg' as const,
+  'md' as const,
+  'sm' as const,
+  'xs' as const,
+]
+
+export default {
+  name: 'c-placeholder',
+  mounted(el: HTMLElement, binding: DirectiveBinding): void {
+    const value = binding.value
+    el.classList.add(value.animation ? `placeholder-${value.animation}` : 'placeholder')
+
+    BREAKPOINTS.forEach((bp) => {
+      const breakpoint = value[bp]
+
+      const infix = bp === 'xs' ? '' : `-${bp}`
+
+      if (typeof breakpoint === 'number') {
+        el.classList.add(`col${infix}-${breakpoint}`)
+      }
+
+      if (typeof breakpoint === 'boolean') {
+        el.classList.add(`col${infix}`)
+      }
+    })
+  },
+}

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

@@ -0,0 +1,33 @@
+import { ObjectDirective } from '@vue/runtime-core'
+
+interface VShowElement extends HTMLElement {
+  // _vod = vue original display
+  _vod: string
+}
+
+export const vVisible: ObjectDirective<VShowElement> = {
+  beforeMount(el, { value }, { transition }) {
+    el._vod = el.style.display === 'none' ? '' : el.style.display
+    if (transition && value) {
+      transition.beforeEnter(el)
+    }
+  },
+  mounted(el, { value }, { transition }) {
+    if (transition && value) {
+      transition.enter(el)
+    }
+  },
+  updated(el, { value, oldValue }, { transition }) {
+    if (!value === !oldValue) return
+    if (transition) {
+      if (value) {
+        transition.beforeEnter(el)
+        transition.enter(el)
+      } else {
+        transition.leave(el, () => {
+          // setDisplay(el, false)
+        })
+      }
+    }
+  },
+}

package/src/index.ts

@@ -1,7 +1,7 @@
 //@ts-nocheck
 import { App } from 'vue'
 import * as Components from './components'
-import { vcpopover, vctooltip } from './directives'
+import { vcplaceholder, vcpopover, vctooltip } from './directives'
 
 const removeKeysFromObject = (object, keys) => {
   return Object.entries(object).reduce((obj, [key, value]) => {
@@ -30,6 +30,7 @@ const CoreuiVue = {
     //   app.directive(directive, Directives[directive])
     // }
 
+    app.directive('c-placeholder', vcplaceholder)
     app.directive('c-popover', vcpopover)
     app.directive('c-tooltip', vctooltip)
   },