@coreui/vue-pro 4.0.1 → 4.1.0

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

@@ -188,49 +188,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.columnFilter &&
+                                props.columnFilter[key(column)] && {
+                                  value: props.columnFilter[key(column)],
+                                }),
+                            }),
+                        },
+                      ),
                     ),
-                  ),
-                ],
-              },
-            ),
+                  ],
+                },
+              ),
           ],
         },
       )

package/src/components/toast/CToastClose.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, resolveComponent } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 import { CCloseButton } from '../close-button/CCloseButton'
 
 const CToastClose = defineComponent({
@@ -30,7 +30,7 @@ const CToastClose = defineComponent({
     return () =>
       props.component
         ? h(
-            resolveComponent(props.component),
+            props.component,
             {
               onClick: () => {
                 handleClose()

package/src/components/toast/__tests__/CToastClose.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { CToastClose as Component } from '../../../index'
+import { CButton, CToastClose as Component } from '../../../index'
 
 const ComponentName = 'CToastClose'
 
@@ -21,7 +21,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'CButton',
+    component: CButton,
   },
   slots: {
     default: 'Default slot',

package/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToastClose component renders correctly 1`] = `"<cbutton>Default slot</cbutton>"`;
+exports[`Customize CToastClose component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\">Default slot</button>"`;
 
 exports[`Loads and display CToastClose component renders correctly 1`] = `"<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;

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