@coreui/vue-pro 4.0.4 → 4.1.3

package/src/components/offcanvas/COffcanvas.ts

@@ -1,5 +1,6 @@
-import { defineComponent, h, ref, RendererElement, Transition, watch } from 'vue'
+import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
 import { CBackdrop } from '../backdrop'
+import { vVisible } from '../../directives/v-c-visible'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -96,19 +97,20 @@ const COffcanvas = defineComponent({
       }, 1)
     }
     const handleAfterEnter = () => {
-      window.addEventListener('click', handleClickOutside)
+      window.addEventListener('mousedown', handleMouseDown)
+      // window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
       el.addEventListener('transitionend', () => {
         done()
       })
+      window.removeEventListener('mousedown', handleMouseDown)
+      window.removeEventListener('keyup', handleKeyUp)
       el.classList.remove('show')
     }
     const handleAfterLeave = (el: RendererElement) => {
       el.style.visibility = 'hidden'
-      window.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('keyup', handleKeyUp)
     }
 
     const handleDismiss = () => {
@@ -123,7 +125,12 @@ const COffcanvas = defineComponent({
         }
       }
     }
-    const handleClickOutside = (event: Event) => {
+
+    const handleMouseDown = (event: Event) => {
+      window.addEventListener('mouseup', () => handleMouseUp(event), { once: true })
+    }
+
+    const handleMouseUp = (event: Event) => {
       if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
         props.backdrop && handleDismiss()
       }
@@ -133,31 +140,34 @@ const COffcanvas = defineComponent({
       h(
         Transition,
         {
+          css: false,
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: () => handleAfterEnter(),
           onLeave: (el, done) => handleLeave(el, done),
           onAfterLeave: (el) => handleAfterLeave(el),
         },
         () =>
-          visible.value &&
-          h(
-            'div',
-            {
-              class: [
-                'offcanvas',
-                {
-                  [`offcanvas-${props.placement}`]: props.placement,
-                },
-              ],
-              ref: offcanvasRef,
-              role: 'dialog',
-            },
-            slots.default && slots.default(),
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'offcanvas',
+                  {
+                    [`offcanvas-${props.placement}`]: props.placement,
+                  },
+                ],
+                ref: offcanvasRef,
+                role: 'dialog',
+              },
+              slots.default && slots.default(),
+            ),
+            [[vVisible, props.visible]],
           ),
       ),
       props.backdrop &&
         h(CBackdrop, {
-          class: 'modal-backdrop',
+          class: 'offcanvas-backdrop',
           visible: visible.value,
         }),
     ]

package/src/components/offcanvas/__tests__/COffcanvas.spec.ts

@@ -47,6 +47,6 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.text()).toContain('Default slot')
     expect(customWrapper.find('div').classes('offcanvas')).toBe(true)
     expect(customWrapper.find('div').classes('offcanvas-bottom')).toBe(true)
-    expect(customWrapper.find('.modal-backdrop').classes('modal-backdrop')).toBe(true)
+    expect(customWrapper.find('.offcanvas-backdrop').classes('offcanvas-backdrop')).toBe(true)
   })
 })

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`Customize COffcanvas component renders correctly 1`] = `
 "<transition-stub>
   <div class=\\"offcanvas offcanvas-bottom\\" role=\\"dialog\\">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"modal-backdrop\\">
+<transition-stub class=\\"offcanvas-backdrop\\">
   <div class=\\"fade\\"></div>
 </transition-stub>"
 `;
@@ -13,7 +13,7 @@ exports[`Loads and display COffcanvas component renders correctly 1`] = `
 "<transition-stub>
   <div class=\\"offcanvas offcanvas-end\\" role=\\"dialog\\">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"modal-backdrop\\">
+<transition-stub class=\\"offcanvas-backdrop\\">
   <div class=\\"fade\\"></div>
 </transition-stub>"
 `;

package/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(),
+      )
+  },
+})

package/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!')
+  })
+})

package/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>
+`;

package/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 }

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `
-"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>
-<!---->"
-`;
+exports[`Customize CSidebar component renders correctly 1`] = `"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>"`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `
-"<div class=\\"sidebar hide\\">Default slot</div>
-<!---->"
-`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class=\\"sidebar hide\\">Default slot</div>"`;

package/src/components/smart-table/CSmartTable.ts

@@ -67,7 +67,6 @@ const CSmartTable = defineComponent({
      */
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      default: undefined,
       required: false,
     },
     /**
@@ -95,7 +94,6 @@ const CSmartTable = defineComponent({
      */
     columns: {
       type: Array as PropType<Column[] | string[]>,
-      default: () => [],
       required: false,
     },
     /**
@@ -144,7 +142,6 @@ const CSmartTable = defineComponent({
      */
     itemsPerPage: {
       type: Number,
-      default: 10,
       required: false,
     },
     /**
@@ -216,7 +213,8 @@ const CSmartTable = defineComponent({
      */
     selectable: Boolean,
     /**
-     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes.
+     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes. eg.:
+     * { column: 'status', state: 'asc' }
      *
      * @type SorterValue
      */
@@ -404,7 +402,7 @@ const CSmartTable = defineComponent({
       }
     })
 
-    const itemsPerPage = ref<number>(props.itemsPerPage)
+    const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
     const activePage = ref(props.activePage)
 
     const sorterState: SorterValue = reactive(props.sorterValue || {})
@@ -423,7 +421,7 @@ const CSmartTable = defineComponent({
     // functions
 
     const isSortable = (i: number): boolean | undefined => {
-      const isDataColumn = itemsDataColumns.value.includes(rawColumnNames[i])
+      const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i])
       let column
       if (props.columns) column = props.columns[i]
       return (
@@ -539,16 +537,22 @@ const CSmartTable = defineComponent({
 
     // computed
 
-    const genCols = Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_')
+    const genCols = computed(() =>
+      Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_'),
+    )
 
-    const rawColumnNames = props.columns
-      ? props.columns.map((column: Column | string) => {
-          if (typeof column === 'object') return column.key
-          else return column
-        })
-      : genCols //! || el
+    const rawColumnNames = computed(() =>
+      props.columns
+        ? props.columns.map((column: Column | string) => {
+            if (typeof column === 'object') return column.key
+            else return column
+          })
+        : genCols.value,
+    ) //! || el
 
-    const itemsDataColumns = computed(() => rawColumnNames.filter((name) => genCols.includes(name)))
+    const itemsDataColumns = computed(() =>
+      rawColumnNames.value.filter((name) => genCols.value.includes(name)),
+    )
 
     // variables
 
@@ -657,6 +661,8 @@ const CSmartTable = defineComponent({
                   },
                   props.tableFilter &&
                     h(CSmartTableFilter, {
+                      filterLabel: props.tableFilterLabel,
+                      filterPlaceholder: props.tableFilterPlaceholder,
                       onFilterInput: (value: string) => tableFilterChange(value, 'input'),
                       onFilterChange: (value: string) => tableFilterChange(value, 'change'),
                       value: tableFilterState.value,
@@ -705,8 +711,9 @@ const CSmartTable = defineComponent({
                         {
                           component: 'head',
                           ...props.tableHeadProps,
-                          columnFilter: columnFilterState.value,
-                          columns: props.columns,
+                          columnFilter: props.columnFilter,
+                          columnFilterValue: columnFilterState.value,
+                          columns: rawColumnNames.value,
                           columnSorter: props.columnSorter,
                           selectable: props.selectable,
                           selectAll: selectedAll.value,
@@ -760,7 +767,7 @@ const CSmartTable = defineComponent({
                       currentItems: currentItems.value,
                       firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                       noItemsLabel: props.noItemsLabel,
-                      columns: props.columns,
+                      columns: rawColumnNames.value,
                       scopedSlots: slots,
                       selectable: props.selectable,
                       onRowChecked: (id: number, value: boolean) => handleRowChecked(id, value),
@@ -770,7 +777,7 @@ const CSmartTable = defineComponent({
                         columnName: string,
                         event: MouseEvent | boolean,
                       ) => handleRowClick(item, index, columnName, event),
-                      rawColumnNames: rawColumnNames,
+                      rawColumnNames: rawColumnNames.value,
                       clickableRows: props.clickableRows,
                       ...props.tableBodyProps,
                     }),
@@ -780,7 +787,7 @@ const CSmartTable = defineComponent({
                         ...props.tableFootProps,
                         columnFilter: false,
                         columnSorter: false,
-                        columns: props.columns,
+                        columns: rawColumnNames.value,
                         selectable: props.selectable,
                         selectAll: selectedAll.value,
                         onFilterInput: (key: string, value: string) =>
@@ -820,7 +827,6 @@ const CSmartTable = defineComponent({
                       pages: numberOfPages.value,
                       activePage: activePage.value,
                       onActivePageChange: handleActivePageChange,
-                      limit: itemsPerPage.value,
                     })
                   : '',
               ),

package/src/components/smart-table/CSmartTableHead.ts

@@ -5,7 +5,13 @@ import { CTableRow } from '../table/CTableRow'
 
 import { CFormCheck, CFormInput } from '../form/'
 
-import { Column, ColumnFilter, Sorter, SorterValue } from './CSmartTableInterface'
+import {
+  Column,
+  ColumnFilter,
+  ColumnFilterValue,
+  Sorter,
+  SorterValue,
+} from './CSmartTableInterface'
 
 const CSmartTableHead = defineComponent({
   name: 'CSmartTableHead',
@@ -17,9 +23,12 @@ const CSmartTableHead = defineComponent({
     },
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      default: undefined,
       require: false,
     },
+    columnFilterValue: {
+      type: Object as PropType<ColumnFilterValue>,
+      required: false,
+    },
     columnSorter: {
       type: [Boolean, Object] as PropType<boolean | Sorter>,
       default: undefined,
@@ -221,9 +230,9 @@ const CSmartTableHead = defineComponent({
                                   (event.target as HTMLInputElement).value,
                                 ),
                               'aria-label': `column name: '${label(column)}' filter input`,
-                              ...(props.columnFilter &&
-                                props.columnFilter[key(column)] && {
-                                  value: props.columnFilter[key(column)],
+                              ...(props.columnFilterValue &&
+                                props.columnFilterValue[key(column)] && {
+                                  value: props.columnFilterValue[key(column)],
                                 }),
                             }),
                         },

package/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,  }

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)
   },