@coreui/vue-pro 4.7.0 → 4.8.0-next.1

package/src/components/multi-select/utils.ts

@@ -0,0 +1,92 @@
+import type { Option, SelectedOption } from './types'
+
+export const filterOptionsList = (search: string, _options: Option[]) => {
+  return search.length
+    ? _options &&
+        _options.reduce((acc: Option[], val: Option) => {
+          const options =
+            val.options &&
+            val.options.filter(
+              (element) =>
+                element.text && element.text.toLowerCase().includes(search.toLowerCase()),
+            )
+
+          if (
+            (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
+            (options && options.length)
+          ) {
+            acc.push(Object.assign({}, val, options && options.length && { options }))
+          }
+
+          return acc
+        }, [])
+    : _options
+}
+
+export const flattenArray = (options: Option[]): Option[] => {
+  return options.reduce((acc: Option[], val: Option) => {
+    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
+  }, [])
+}
+
+export const getNextSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.nextElementSibling
+  }
+
+  return
+}
+
+export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.previousElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.previousElementSibling
+  }
+
+  return
+}
+
+export const selectOptions = (
+  options: Option[],
+  selected: SelectedOption[],
+  deselected?: Option[],
+) => {
+  let _selected = [...selected, ...options]
+
+  if (deselected) {
+    _selected = _selected.filter(
+      (selectedOption) =>
+        !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
+    )
+  }
+
+  const deduplicated = _selected.reduce((unique: Option[], option) => {
+    if (!unique.some((obj) => obj.value === option.value)) {
+      unique.push({
+        value: option.value,
+        text: option.text,
+        ...(option.disabled && { disabled: option.disabled }),
+      })
+    }
+    return unique
+  }, []) as SelectedOption[]
+
+  return deduplicated
+}

package/src/components/offcanvas/COffcanvas.ts

@@ -10,11 +10,21 @@ const COffcanvas = defineComponent({
   props: {
     /**
      * Apply a backdrop on body while offcanvas is open.
+     *
+     * @values boolean | 'static'
      */
     backdrop: {
-      type: Boolean,
+      type: [Boolean, String],
       default: true,
-      require: false,
+      validator: (value: boolean | string) => {
+        if (typeof value === 'string') {
+          return ['static'].includes(value)
+        }
+        if (typeof value === 'boolean') {
+          return true
+        }
+        return false
+      },
     },
     /**
      * Closes the offcanvas when escape key is pressed.
@@ -22,7 +32,6 @@ const COffcanvas = defineComponent({
     keyboard: {
       type: Boolean,
       default: true,
-      require: false,
     },
     /**
      * Components placement, there’s no default placement.
@@ -37,21 +46,36 @@ const COffcanvas = defineComponent({
         return ['start', 'end', 'top', 'bottom'].includes(value)
       },
     },
+    /**
+     * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+     *
+     * @values boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+     * @since 4.7.0
+     */
+    responsive: {
+      type: [Boolean, String],
+      default: true,
+      validator: (value: boolean | string) => {
+        if (typeof value === 'string') {
+          return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
+        }
+        if (typeof value === 'boolean') {
+          return true
+        }
+        return false
+      },
+    },
     /**
      * Allow body scrolling while offcanvas is open
      */
     scroll: {
       type: Boolean,
       default: false,
-      required: false,
     },
     /**
      * Toggle the visibility of offcanvas component.
      */
-    visible: {
-      type: Boolean,
-      require: false,
-    },
+    visible: Boolean,
   },
   emits: [
     /**
@@ -93,22 +117,21 @@ const COffcanvas = defineComponent({
       emit('show')
       executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
-        el.style.visibility = 'visible'
         el.classList.add('show')
       }, 1)
     }
+
     const handleAfterEnter = () => {
-      window.addEventListener('mousedown', handleMouseDown)
-      window.addEventListener('keyup', handleKeyUp)
+      offcanvasRef.value.focus()
     }
+
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
-      window.removeEventListener('mousedown', handleMouseDown)
-      window.removeEventListener('keyup', handleKeyUp)
-      el.classList.remove('show')
+      el.classList.add('hiding')
     }
+
     const handleAfterLeave = (el: RendererElement) => {
-      el.style.visibility = 'hidden'
+      el.classList.remove('show', 'hiding')
     }
 
     const handleDismiss = () => {
@@ -116,21 +139,15 @@ const COffcanvas = defineComponent({
       emit('hide')
     }
 
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
-        if (event.key === 'Escape' && props.keyboard && props.backdrop) {
-          return handleDismiss()
-        }
+    const handleBackdropDismiss = () => {
+      if (props.backdrop !== 'static') {
+        handleDismiss()
       }
     }
 
-    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()
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && props.keyboard) {
+        handleDismiss()
       }
     }
 
@@ -150,13 +167,17 @@ const COffcanvas = defineComponent({
               'div',
               {
                 class: [
-                  'offcanvas',
                   {
+                    [`offcanvas${
+                      typeof props.responsive !== 'boolean' ? '-' + props.responsive : ''
+                    }`]: props.responsive,
                     [`offcanvas-${props.placement}`]: props.placement,
                   },
                 ],
+                onKeydown: (event: KeyboardEvent) => handleKeyDown(event),
                 ref: offcanvasRef,
                 role: 'dialog',
+                tabindex: -1,
               },
               slots.default && slots.default(),
             ),
@@ -166,6 +187,7 @@ const COffcanvas = defineComponent({
       props.backdrop &&
         h(CBackdrop, {
           class: 'offcanvas-backdrop',
+          onClick: handleBackdropDismiss,
           visible: visible.value,
         }),
     ]