@coreui/vue-pro 4.0.3 → 4.1.2

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

@@ -46,7 +46,6 @@ const CSmartTable = defineComponent({
      */
     cleaner: {
       type: Boolean,
-      default: true,
       required: false,
     },
     /**
@@ -68,7 +67,6 @@ const CSmartTable = defineComponent({
      */
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      default: undefined,
       required: false,
     },
     /**
@@ -145,7 +143,6 @@ const CSmartTable = defineComponent({
      */
     itemsPerPage: {
       type: Number,
-      default: 10,
       required: false,
     },
     /**
@@ -217,7 +214,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
      */
@@ -257,7 +255,6 @@ const CSmartTable = defineComponent({
      */
     tableFilter: {
       type: [Boolean, Object] as PropType<boolean | TableFilter>,
-      default: undefined,
       required: false,
     },
     /**
@@ -389,6 +386,7 @@ const CSmartTable = defineComponent({
 
     watch(items, () => {
       const selected = items.value.filter((item) => item._selected === true)
+      emit('selectedItemsChange', selected)
 
       if (selected.length === items.value.length) {
         selectedAll.value = true
@@ -403,11 +401,9 @@ const CSmartTable = defineComponent({
       if (selected.length !== 0 && selected.length !== items.value.length) {
         selectedAll.value = 'indeterminate'
       }
-
-      emit('selectedItemsChange', selected)
     })
 
-    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 || {})
@@ -452,7 +448,11 @@ const CSmartTable = defineComponent({
         } else if (state.state === 'asc') {
           state.state = 'desc'
         } else {
-          state.state = 0
+          if (typeof props.columnSorter === 'object' && !props.columnSorter.resetable) {
+            state.state = 'asc'
+          } else {
+            state.state = 0
+          }
         }
       } else {
         state.column = column
@@ -641,14 +641,14 @@ const CSmartTable = defineComponent({
 
     return () =>
       h('div', {}, [
-        h(
-          'div',
-          {
-            class: 'row my-2 mx-0',
-          },
-          {
-            default: () =>
-              (props.tableFilter || props.cleaner) && [
+        (props.tableFilter || props.cleaner) &&
+          h(
+            'div',
+            {
+              class: 'row my-2 mx-0',
+            },
+            [
+              props.tableFilter &&
                 h(
                   'div',
                   {
@@ -656,35 +656,36 @@ 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,
                     }),
                 ),
+              props.cleaner &&
                 h(
                   'div',
                   {
                     class: 'col-auto p-0',
                   },
-                  props.cleaner &&
-                    h(
-                      CSmartTableCleaner,
-                      {
-                        onClick: () => clean(),
-                        isFiltered: isFiltered.value,
-                      },
-                      {
-                        // @slot Cleaner icon.
-                        cleanerIcon: () =>
-                          slots.cleanerIcon
-                            ? slots.cleanerIcon()
-                            : h(CIcon, { width: '18', content: cilFilterX }),
-                      },
-                    ),
+                  h(
+                    CSmartTableCleaner,
+                    {
+                      onClick: () => clean(),
+                      isFiltered: isFiltered.value,
+                    },
+                    {
+                      // @slot Cleaner icon.
+                      cleanerIcon: () =>
+                        slots.cleanerIcon
+                          ? slots.cleanerIcon()
+                          : h(CIcon, { width: '18', content: cilFilterX }),
+                    },
+                  ),
                 ),
-              ],
-          },
-        ), //h
+            ],
+          ), //h
         h(
           'div',
           {
@@ -705,7 +706,8 @@ const CSmartTable = defineComponent({
                         {
                           component: 'head',
                           ...props.tableHeadProps,
-                          columnFilter: columnFilterState.value,
+                          columnFilter: props.columnFilter,
+                          columnFilterValue: columnFilterState.value,
                           columns: props.columns,
                           columnSorter: props.columnSorter,
                           selectable: props.selectable,

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,
@@ -188,49 +197,50 @@ const CSmartTableHead = defineComponent({
                 ],
               },
             ),
-            h(
-              CTableRow,
-              {},
-              {
-                default: () => [
-                  props.selectable && h(CTableHeaderCell),
-                  props.columns.map((column: Column | string) =>
-                    h(
-                      CTableHeaderCell,
-                      {
-                        ...tableHeaderCellProps(column),
-                      },
-                      {
-                        default: () =>
-                          (typeof column !== 'object'
-                            ? true
-                            : typeof column.filter === 'undefined'
-                            ? true
-                            : column.filter) &&
-                          h(CFormInput, {
-                            size: 'sm',
-                            onInput: (event: Event) =>
-                              handleFilterInput(
-                                key(column),
-                                (event.target as HTMLInputElement).value,
-                              ),
-                            onChange: (event: Event) =>
-                              handleFilterChange(
-                                key(column),
-                                (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.columnFilter &&
+              h(
+                CTableRow,
+                {},
+                {
+                  default: () => [
+                    props.selectable && h(CTableHeaderCell),
+                    props.columns.map((column: Column | string) =>
+                      h(
+                        CTableHeaderCell,
+                        {
+                          ...tableHeaderCellProps(column),
+                        },
+                        {
+                          default: () =>
+                            (typeof column !== 'object'
+                              ? true
+                              : typeof column.filter === 'undefined'
+                              ? true
+                              : column.filter) &&
+                            h(CFormInput, {
+                              size: 'sm',
+                              onInput: (event: Event) =>
+                                handleFilterInput(
+                                  key(column),
+                                  (event.target as HTMLInputElement).value,
+                                ),
+                              onChange: (event: Event) =>
+                                handleFilterChange(
+                                  key(column),
+                                  (event.target as HTMLInputElement).value,
+                                ),
+                              'aria-label': `column name: '${label(column)}' filter input`,
+                              ...(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}`)
+      }
+    })
+  },
+}