feat(CPlaceholder): add new component and directive

Author: mrholek

packages/coreui-vue/src/components/index.ts

@@ -24,6 +24,7 @@ export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
 export * from './pagination'
+export * from './placeholder'
 export * from './progress'
 export * from './popover'
 export * from './sidebar'

packages/coreui-vue/src/components/placeholder/CPlaceholder.ts

@@ -0,0 +1,139 @@
+import { defineComponent, h } from 'vue'
+
+import { Color } from '../props'
+
+const BREAKPOINTS = [
+  'xxl' as const,
+  'xl' as const,
+  'lg' as const,
+  'md' as const,
+  'sm' as const,
+  'xs' as const,
+]
+
+export const CPlaceholder = defineComponent({
+  name: 'CPlaceholder',
+  props: {
+    /**
+     * Set animation type to better convey the perception of something being actively loaded.
+     *
+     * @values 'glow', 'wave'
+     */
+    animation: {
+      type: String,
+      default: undefined,
+      require: false,
+      validator: (value: string) => {
+        return ['glow', 'wave'].includes(value)
+      },
+    },
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component: {
+      type: String,
+      default: 'span',
+      required: false,
+    },
+    /**
+     * Size the component extra small, small, or large.
+     *
+     * @values 'xs', 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      default: undefined,
+      required: false,
+      validator: (value: string) => {
+        return ['xs', 'sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * The number of columns on extra small devices (<576px).
+     */
+    xs: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on small devices (<768px).
+     */
+    sm: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on medium devices (<992px).
+     */
+    md: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on large devices (<1200px).
+     */
+    lg: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on X-Large devices (<1400px).
+     */
+    xl: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * The number of columns on XX-Large devices (≥1400px).
+     */
+    xxl: {
+      type: Number,
+      default: undefined,
+      require: false,
+    },
+  },
+  setup(props, { slots }) {
+    const repsonsiveClassNames: string[] = []
+
+    BREAKPOINTS.forEach((bp) => {
+      const breakpoint = props[bp]
+
+      const infix = bp === 'xs' ? '' : `-${bp}`
+
+      if (typeof breakpoint === 'number') {
+        repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
+      }
+
+      if (typeof breakpoint === 'boolean') {
+        repsonsiveClassNames.push(`col${infix}`)
+      }
+    })
+
+    return () =>
+      h(
+        props.component,
+        {
+          class: [
+            props.animation ? `placeholder-${props.animation}` : 'placeholder',
+            {
+              [`bg-${props.color}`]: props.color,
+              [`placeholder-${props.size}`]: props.size,
+            },
+            repsonsiveClassNames,
+          ],
+        },
+        slots.default && slots.default(),
+      )
+  },
+})

packages/coreui-vue/src/components/placeholder/__tests__/CPlaceholder.spec.ts

@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils'
+import { CPlaceholder as Component } from './../../'
+
+const ComponentName = 'CPlaceholder'
+const wrapper = shallowMount(Component)
+const customWrapper = shallowMount(Component, {
+  props: {
+    animation: 'glow',
+    color: 'secondary',
+    size: 'lg',
+    sm: 7,
+  },
+  attrs: {
+    class: 'bazinga',
+  },
+  slots: {
+    default: 'Hello World!',
+  },
+})
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly with slot', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+})
+
+describe(`Customize ${ComponentName} component`, () => {
+  it('has a prope class names', () => {
+    expect(customWrapper.find('span').classes('bazinga')).toBe(true)
+    expect(customWrapper.find('span').classes('bg-secondary')).toBe(true)
+    expect(customWrapper.find('span').classes('col-sm-7')).toBe(true)
+    expect(customWrapper.find('span').classes('placeholder-glow')).toBe(true)
+    expect(customWrapper.find('span').classes('placeholder-lg')).toBe(true)
+  })
+  it('default slot contains text', () => {
+    expect(customWrapper.text()).toBe('Hello World!')
+  })
+})

packages/coreui-vue/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loads and display CPlaceholder component renders correctly 1`] = `
+<span
+  class="placeholder"
+/>
+`;
+
+exports[`Loads and display CPlaceholder component renders correctly with slot 1`] = `
+<span
+  class="placeholder-glow bg-secondary placeholder-lg col-sm-7 bazinga"
+>
+  Hello World!
+</span>
+`;

packages/coreui-vue/src/components/placeholder/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CPlaceholder } from './CPlaceholder'
+
+const CPlaceholderPlugin = {
+  install: (app: App): void => {
+    app.component(CPlaceholder.name, CPlaceholder)
+  },
+}
+
+export { CPlaceholderPlugin, CPlaceholder }

packages/coreui-vue/src/directives/index.ts

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

packages/coreui-vue/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}`)
+      }
+    })
+  },
+}

packages/coreui-vue/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)
+        })
+      }
+    }
+  },
+}

packages/coreui-vue/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)
   },

packages/docs/.vuepress/config.ts

@@ -245,13 +245,8 @@ export default defineUserConfig<DefaultThemeOptions>({
             link: `/components/pagination.html`,
           },
           {
-            text: 'Placeholders',
-            link: `/components/placeholders.html`,
-            disabled: true,
-            badge: {
-              color: 'warning',
-              text: 'WIP v4.1',
-            }
+            text: 'Placeholder',
+            link: `/components/placeholder.html`,
           },
           {
             text: 'Popover',