@coreui/vue-pro 5.0.0-rc.0 → 5.0.0-rc.2

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

@@ -1,6 +1,8 @@
 import { DirectiveBinding } from 'vue'
 import { createPopper } from '@popperjs/core'
 
+import type { Options } from '@popperjs/core'
+
 import { getUID } from '../utils'
 
 const createTooltipElement = (id: string, content: string): HTMLDivElement => {
@@ -13,8 +15,13 @@ const createTooltipElement = (id: string, content: string): HTMLDivElement => {
   return tooltip
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const addTooltipElement = (
+  el: HTMLElement,
+  tooltip: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
+  el.setAttribute('aria-describedby', uID)
   document.body.appendChild(tooltip)
   createPopper(el, tooltip, popperOptions)
   setTimeout(() => {
@@ -22,21 +29,26 @@ const addTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptio
   }, 1)
 }
 
-const removeTooltipElement = (tooltip: HTMLDivElement) => {
+const removeTooltipElement = (el: HTMLElement, tooltip: HTMLDivElement) => {
+  el.removeAttribute('aria-describedby')
   tooltip.classList.remove('show')
   setTimeout(() => {
     tooltip.remove()
   }, 300)
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const toggleTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOptions: any) => {
+const toggleTooltipElement = (
+  el: HTMLElement,
+  tooltip: HTMLDivElement,
+  popperOptions: Partial<Options>,
+  uID: string,
+) => {
   const popperElement = document.getElementById(tooltip.id)
   if (popperElement && popperElement.classList.contains('show')) {
-    removeTooltipElement(tooltip)
+    removeTooltipElement(el, tooltip)
     return
   }
-  addTooltipElement(tooltip, el, popperOptions)
+  addTooltipElement(el, tooltip, popperOptions, uID)
 }
 
 export default {
@@ -62,30 +74,30 @@ export default {
       ],
     }
 
-    const tooltipUID = getUID('tooltip')
-    binding.arg = tooltipUID
-    const tooltip = createTooltipElement(tooltipUID, content)
+    const uID = getUID('tooltip')
+    binding.arg = uID
+    const tooltip = createTooltipElement(uID, content)
 
     trigger.includes('click') &&
       el.addEventListener('click', () => {
-        toggleTooltipElement(tooltip, el, popperOptions)
+        toggleTooltipElement(el, tooltip, popperOptions, uID)
       })
 
     if (trigger.includes('focus')) {
       el.addEventListener('focus', () => {
-        addTooltipElement(tooltip, el, popperOptions)
+        addTooltipElement(el, tooltip, popperOptions, uID)
       })
       el.addEventListener('blur', () => {
-        removeTooltipElement(tooltip)
+        removeTooltipElement(el, tooltip)
       })
     }
 
     if (trigger.includes('hover')) {
       el.addEventListener('mouseenter', () => {
-        addTooltipElement(tooltip, el, popperOptions)
+        addTooltipElement(el, tooltip, popperOptions, uID)
       })
       el.addEventListener('mouseleave', () => {
-        removeTooltipElement(tooltip)
+        removeTooltipElement(el, tooltip)
       })
     }
   },

package/dist/cjs/components/form/CFormControl.d.ts

@@ -1,190 +0,0 @@
-declare const CFormControlProps: {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-};
-declare const CFormControl: import("vue").DefineComponent<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}>>, {
-    disabled: boolean;
-    component: string;
-    readonly: boolean;
-    plainText: boolean;
-}, {}>;
-export { CFormControl, CFormControlProps };

package/dist/esm/components/form/CFormControl.d.ts

@@ -1,190 +0,0 @@
-declare const CFormControlProps: {
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-};
-declare const CFormControl: import("vue").DefineComponent<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * A string of all className you want applied to the component.
-     */
-    classNameParent: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-        type: StringConstructor;
-        required: boolean;
-        default: string;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-     */
-    plainText: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Toggle the readonly state for the component.
-     */
-    readonly: {
-        type: BooleanConstructor;
-        required: boolean;
-    };
-    /**
-     * Size the component small or large.
-     *
-     * @values 'sm', 'lg'
-     */
-    size: {
-        validator(value: string): boolean;
-        required: boolean;
-    };
-    /**
-     * Specifies the type of component.
-     */
-    type: {
-        type: StringConstructor;
-        required: boolean;
-    };
-}>>, {
-    disabled: boolean;
-    component: string;
-    readonly: boolean;
-    plainText: boolean;
-}, {}>;
-export { CFormControl, CFormControlProps };

package/src/components/form/CFormControl.ts

@@ -1,93 +0,0 @@
-import { defineComponent, h } from 'vue'
-
-const CFormControlProps = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className: {
-    type: String,
-    required: false,
-  },
-  /**
-   * A string of all className you want applied to the component.
-   */
-  classNameParent: {
-    type: String,
-    required: false,
-  },
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component: {
-    type: String,
-    required: false,
-    default: 'input',
-  },
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled: {
-    type: Boolean,
-    required: false,
-  },
-  /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-   */
-  plainText: {
-    type: Boolean,
-    required: false,
-  },
-  /**
-   * Toggle the readonly state for the component.
-   */
-  readonly: {
-    type: Boolean,
-    required: false,
-  },
-  /**
-   * Size the component small or large.
-   *
-   * @values 'sm', 'lg'
-   */
-  size: {
-    validator(value: string): boolean {
-      return ['sm', 'lg'].includes(value)
-    },
-    required: false,
-  },
-  /**
-   * Specifies the type of component.
-   */
-  type: {
-    type: String,
-    required: false,
-  },
-}
-
-const CFormControl = defineComponent({
-  name: 'CFormControl',
-  props: CFormControlProps,
-  setup(props, { attrs, slots }) {
-    return () =>
-      h(
-        props.component,
-        {
-          class: props.classNameParent
-            ? props.classNameParent
-            : [
-                props.readonly ? 'form-control-plaintext' : 'form-control',
-                {
-                  'form-control-color': props.type === 'color',
-                  [`form-control-${props.size}`]: props.size,
-                },
-                props.className,
-              ],
-          ...(props.component === 'input' && { type: props.type }),
-          ...attrs,
-        },
-        slots.default && slots.default(),
-      )
-  },
-})
-
-export { CFormControl, CFormControlProps }

package/src/components/form/__tests__/CFormControl.spec.ts

@@ -1,77 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { CFormControl as Component } from '../CFormControl'
-
-const ComponentName = 'CFormControl'
-
-const defaultWrapper = mount(Component, {
-  propsData: {},
-  slots: {
-    default: 'Default slot',
-  },
-})
-
-const customWrapper = mount(Component, {
-  propsData: {
-    className: 'bazinga',
-    component: 'input',
-    disabled: true,
-    plainText: true,
-    readonly: true,
-    size: 'lg',
-    type: 'color',
-  },
-  slots: {
-    default: 'Default slot',
-  },
-  attrs: {
-    attrbazinga: 'attrbazinga',
-  },
-})
-
-const customWrapperTwo = mount(Component, {
-  propsData: {
-    component: 'div',
-    classNameParent: 'classNameParent',
-  },
-  slots: {
-    default: 'Default slot',
-  },
-})
-
-describe(`Loads and display ${ComponentName} component`, () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('renders correctly', () => {
-    expect(defaultWrapper.html()).toMatchSnapshot()
-  })
-  it('contain slots and classes', () => {
-    expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-control')).toBe(true)
-  })
-})
-
-describe(`Customize ${ComponentName} component`, () => {
-  it('renders correctly', () => {
-    expect(customWrapper.html()).toMatchSnapshot()
-  })
-  it('contain slots and classes', () => {
-    expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-control-plaintext')).toBe(true)
-    expect(customWrapper.classes('form-control-color')).toBe(true)
-    expect(customWrapper.classes('bazinga')).toBe(true)
-    expect(customWrapper.classes('form-control-lg')).toBe(true)
-    expect(customWrapper.attributes('type')).toBe('color')
-    expect(customWrapper.attributes('attrbazinga')).toBe('attrbazinga')
-  })
-})
-
-describe(`Customize (number two) ${ComponentName} component`, () => {
-  it('renders correctly', () => {
-    expect(customWrapperTwo.html()).toMatchSnapshot()
-  })
-  it('contain slots and classes', () => {
-    expect(customWrapperTwo.text()).toContain('Default slot')
-    expect(customWrapperTwo.classes('classNameParent')).toBe(true)
-  })
-})