refactor(CDropdown): improve syntax

Author: mrholek

packages/coreui-vue/src/components/dropdown/CDropdown.ts

@@ -2,73 +2,11 @@ import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../composables'
-import type { Placements, Triggers } from '../../types'
+import type { Triggers } from '../../types'
 import { isRTL } from '../../utils'
 
-export type Directions = 'start' | 'end'
-
-export type Breakpoints =
-  | { xs: Directions }
-  | { sm: Directions }
-  | { md: Directions }
-  | { lg: Directions }
-  | { xl: Directions }
-  | { xxl: Directions }
-
-export type Alignments = Directions | Breakpoints
-
-export const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
-const getPlacement = (
-  placement: Placement,
-  direction: string | undefined,
-  alignment: Alignments | string | undefined,
-  isRTL: boolean,
-): Placements => {
-  let _placement = placement
-
-  if (direction === 'dropup') {
-    _placement = isRTL ? 'top-end' : 'top-start'
-  }
-
-  if (direction === 'dropup-center') {
-    _placement = 'top'
-  }
-
-  if (direction === 'dropend') {
-    _placement = isRTL ? 'left-start' : 'right-start'
-  }
-
-  if (direction === 'dropstart') {
-    _placement = isRTL ? 'right-start' : 'left-start'
-  }
-
-  if (alignment === 'end') {
-    _placement = isRTL ? 'bottom-start' : 'bottom-end'
-  }
-
-  return _placement
-}
+import type { Alignments } from './types'
+import { getNextActiveElement, getPlacement } from './utils'
 
 const CDropdown = defineComponent({
   name: 'CDropdown',

packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, inject, Ref } from 'vue'
 
+import { getAlignmentClassNames } from './utils'
+
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
   props: {
@@ -20,28 +22,14 @@ const CDropdownMenu = defineComponent({
 
     const { alignment, dark, popper } = config
 
-    // eslint-disable-next-line @typescript-eslint/ban-types, unicorn/consistent-function-scoping
-    const alignmentClassNames = (alignment: object | string) => {
-      const classNames: string[] = []
-      if (typeof alignment === 'object') {
-        Object.keys(alignment).map((key) => {
-          classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-        })
-      }
-      if (typeof alignment === 'string') {
-        classNames.push(`dropdown-menu-${alignment}`)
-      }
-      return classNames
-    }
-
     return () =>
       h(
         props.component,
         {
           class: [
             'dropdown-menu',
             { 'dropdown-menu-dark': dark, show: visible.value },
-            alignmentClassNames(alignment),
+            getAlignmentClassNames(alignment),
           ],
           ...((typeof alignment === 'object' || !popper) && {
             'data-coreui-popper': 'static',

packages/coreui-vue/src/components/dropdown/types.ts

@@ -0,0 +1,11 @@
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+  | { xs: Directions }
+  | { sm: Directions }
+  | { md: Directions }
+  | { lg: Directions }
+  | { xl: Directions }
+  | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints

packages/coreui-vue/src/components/dropdown/utils.ts

@@ -0,0 +1,71 @@
+import type { Placement } from '@popperjs/core'
+import type { Placements } from '../../types'
+import type { Alignments } from './types'
+
+export const getAlignmentClassNames = (alignment: object | string) => {
+  const classNames: string[] = []
+  if (typeof alignment === 'object') {
+    Object.keys(alignment).map((key) => {
+      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
+    })
+  }
+
+  if (typeof alignment === 'string') {
+    classNames.push(`dropdown-menu-${alignment}`)
+  }
+  
+  return classNames
+}
+
+export const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+export const getPlacement = (
+  placement: Placement,
+  direction: string | undefined,
+  alignment: Alignments | string | undefined,
+  isRTL: boolean,
+): Placements => {
+  let _placement = placement
+
+  if (direction === 'dropup') {
+    _placement = isRTL ? 'top-end' : 'top-start'
+  }
+
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
+  if (direction === 'dropend') {
+    _placement = isRTL ? 'left-start' : 'right-start'
+  }
+
+  if (direction === 'dropstart') {
+    _placement = isRTL ? 'right-start' : 'left-start'
+  }
+
+  if (alignment === 'end') {
+    _placement = isRTL ? 'bottom-start' : 'bottom-end'
+  }
+
+  return _placement
+}