@coreui/vue-pro 4.8.0-next.0 → 4.8.0

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/virtual-scroller/CVirtualScroller.ts

@@ -0,0 +1,109 @@
+import { cloneVNode, computed, defineComponent, h, onMounted, ref, VNode } from 'vue'
+
+const CVirtualScroller = defineComponent({
+  name: 'CVirtualScroller',
+  props: {
+    /**
+     * Amount of visible items
+     */
+    visibleItems: {
+      type: Number,
+      default: 10,
+    },
+  },
+  setup(props, { slots }) {
+    const virtualScrollRef = ref<HTMLDivElement>()
+    const virtualScrollContentRef = ref<HTMLDivElement>()
+
+    const currentItemIndex = ref(1)
+    const itemHeight = ref<number>(0)
+    const itemsNumber = ref<number>(0)
+    const viewportPadding = ref(0)
+
+    const buffer = computed(() => Math.floor(props.visibleItems / 2))
+
+    const maxHeight = computed(
+      () => itemsNumber.value * itemHeight.value + 2 * viewportPadding.value,
+    )
+
+    const viewportHeight = computed(
+      () => props.visibleItems * itemHeight.value + 2 * viewportPadding.value,
+    )
+
+    onMounted(() => {
+      if (virtualScrollRef.value) {
+        viewportPadding.value = parseFloat(getComputedStyle(virtualScrollRef.value).paddingTop)
+        // It's necessary to calculate heights of items
+        virtualScrollRef.value.dispatchEvent(new CustomEvent('scroll'))
+      }
+    })
+
+    const handleScroll = (scrollTop: number) => {
+      currentItemIndex.value =
+        itemHeight.value && Math.max(Math.ceil(scrollTop / itemHeight.value), 1)
+    }
+
+    return () => {
+      const children: any = slots.default
+        ? Array.isArray(slots.default()[0].children)
+          ? slots.default()[0].children
+          : slots.default()
+        : []
+      itemsNumber.value = children && children.length ? children.length : 0
+      return h(
+        'div',
+        {
+          class: ['virtual-scroller'],
+          onScroll: (event: any) => handleScroll((event.target as HTMLDivElement).scrollTop),
+          style: {
+            height: `${
+              maxHeight.value > viewportHeight.value ? viewportHeight.value : maxHeight.value
+            }px`,
+            overflowY: 'auto',
+          },
+          ref: virtualScrollRef,
+        },
+        h(
+          'div',
+          {
+            class: 'virtual-scroller-content',
+            style: {
+              height: `${maxHeight.value}px`,
+            },
+            ref: virtualScrollContentRef,
+          },
+          children.map(
+            (slot: VNode, index: number) =>
+              index + 1 > Math.max(currentItemIndex.value - buffer.value, 0) &&
+              index + 1 <= currentItemIndex.value + props.visibleItems + buffer.value &&
+              cloneVNode(slot, {
+                class: [
+                  {
+                    'virtual-scroller-item-preload':
+                      index + 1 > currentItemIndex.value + props.visibleItems ||
+                      index + 1 < currentItemIndex.value,
+                  },
+                ],
+                style: {
+                  ...(currentItemIndex.value > buffer.value && {
+                    transform: `translateY(${
+                      (currentItemIndex.value - buffer.value) * itemHeight.value
+                    }px)`,
+                  }),
+                },
+                ref: (node) => {
+                  if (node && (node as HTMLElement).offsetHeight) {
+                    itemHeight.value =
+                      (node as HTMLElement).offsetHeight +
+                      parseFloat(getComputedStyle(node as HTMLElement).marginTop) +
+                      parseFloat(getComputedStyle(node as HTMLElement).marginBottom)
+                  }
+                },
+              }),
+          ),
+        ),
+      )
+    }
+  },
+})
+export { CVirtualScroller }

package/src/components/virtual-scroller/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CVirtualScroller } from './CVirtualScroller'
+
+const CVirtualScrollerPlugin = {
+  install: (app: App): void => {
+    app.component(CVirtualScroller.name, CVirtualScroller)
+  },
+}
+
+export { CVirtualScroller, CVirtualScrollerPlugin }

package/src/utils/index.ts

@@ -1,5 +1,3 @@
-import getNextSibling from './getNextSibling'
-import getPreviousSibling from './getPreviousSibling'
 import isInViewport from './isInViewport'
 
-export { getNextSibling, getPreviousSibling, isInViewport }
+export { isInViewport }

package/dist/components/accordion/CAccordionCollapse.d.ts

@@ -1,22 +0,0 @@
-declare const CAccordionCollapse: import("vue").DefineComponent<{
-    /**
-     * Toggle the visibility of component.
-     */
-    visible: {
-        type: BooleanConstructor;
-        required: false;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Toggle the visibility of component.
-     */
-    visible: {
-        type: BooleanConstructor;
-        required: false;
-    };
-}>>, {
-    visible: boolean;
-}>;
-export { CAccordionCollapse };

package/dist/components/multi-select/CMultiSelect copy.d.ts

@@ -1,305 +0,0 @@
-import { PropType } from 'vue';
-export interface Option {
-    disabled?: boolean;
-    label?: string;
-    options?: Option[];
-    order?: number;
-    selected?: boolean;
-    text: string;
-    value: number | string;
-}
-declare const CMultiSelect: import("vue").DefineComponent<{
-    /**
-     * Enables selection cleaner element.
-     *
-     * @default true
-     */
-    cleaner: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * It specifies that multiple options can be selected at once.
-     *
-     * @default true
-     */
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * List of option elements.
-     */
-    options: {
-        type: PropType<Option[]>;
-        default: () => never[];
-        required: false;
-    };
-    /**
-     * Sets maxHeight of options list.
-     *
-     * @default 'auto'
-     */
-    optionsMaxHeight: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
-        required: false;
-    };
-    /**
-     * Sets option style.
-     *
-     * @values 'checkbox', 'text'
-     * @default 'checkbox'
-     */
-    optionsStyle: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Specifies a short hint that is visible in the search input.
-     *
-     * @default 'Select...''
-     */
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables search input element.
-     */
-    search: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * Sets the label for no results when filtering.
-     */
-    searchNoResultsLabel: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables select all button.
-     *
-     * @default true
-     */
-    selectAll: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Sets the select all button label.
-     *
-     * @default 'Select all options'
-     */
-    selectAllLabel: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    /**
-     * Sets the selection style.
-     *
-     * @values 'counter', 'tags', 'text'
-     * @default 'tags'
-     */
-    selectionType: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Sets the counter selection label.
-     *
-     * @default 'item(s) selected'
-     */
-    selectionTypeCounterText: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Toggle the visibility of multi select dropdown.
-     *
-     * @default false
-     */
-    visible: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Enables selection cleaner element.
-     *
-     * @default true
-     */
-    cleaner: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * It specifies that multiple options can be selected at once.
-     *
-     * @default true
-     */
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * List of option elements.
-     */
-    options: {
-        type: PropType<Option[]>;
-        default: () => never[];
-        required: false;
-    };
-    /**
-     * Sets maxHeight of options list.
-     *
-     * @default 'auto'
-     */
-    optionsMaxHeight: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
-        required: false;
-    };
-    /**
-     * Sets option style.
-     *
-     * @values 'checkbox', 'text'
-     * @default 'checkbox'
-     */
-    optionsStyle: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Specifies a short hint that is visible in the search input.
-     *
-     * @default 'Select...''
-     */
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables search input element.
-     */
-    search: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-    /**
-     * Sets the label for no results when filtering.
-     */
-    searchNoResultsLabel: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Enables select all button.
-     *
-     * @default true
-     */
-    selectAll: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    /**
-     * Sets the select all button label.
-     *
-     * @default 'Select all options'
-     */
-    selectAllLabel: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    /**
-     * Sets the selection style.
-     *
-     * @values 'counter', 'tags', 'text'
-     * @default 'tags'
-     */
-    selectionType: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-        validator: (value: string) => boolean;
-    };
-    /**
-     * Sets the counter selection label.
-     *
-     * @default 'item(s) selected'
-     */
-    selectionTypeCounterText: {
-        type: StringConstructor;
-        default: string;
-        required: false;
-    };
-    /**
-     * Toggle the visibility of multi select dropdown.
-     *
-     * @default false
-     */
-    visible: {
-        type: BooleanConstructor;
-        default: boolean;
-        required: false;
-    };
-}>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-}, {
-    search: boolean;
-    visible: boolean;
-    disabled: boolean;
-    multiple: boolean;
-    options: Option[];
-    cleaner: boolean;
-    placeholder: string;
-    optionsMaxHeight: string | number;
-    optionsStyle: string;
-    searchNoResultsLabel: string;
-    selectionType: string;
-    selectionTypeCounterText: string;
-    selectAll: boolean;
-    selectAllLabel: string;
-}>;
-export { CMultiSelect };