Define correct types for horizontal alignment when we want to justify the content.

sfe-efficy · sfe-efficy · commit 2c3756d34ff6 · 2022-11-06T10:43:04.000+01:00
Define text horizontal alignment possible.
Avoid problems with definition of namespace and the common alignments.
Unified code to calculate possible css classes of justify content
diff --git a/packages/bootstrap-vue-3/src/components/BCard/BCard.vue b/packages/bootstrap-vue-3/src/components/BCard/BCard.vue
@@ -47,7 +47,7 @@ import BCardFooter from './BCardFooter.vue'
 import {isEmptySlot} from '../../utils'
 
 interface BCardProps {
-  align?: Alignment
+  align?: Alignment.TextHorizontal
   bgVariant?: ColorVariant
   bodyBgVariant?: ColorVariant
   bodyClass?: ClassValue
diff --git a/packages/bootstrap-vue-3/src/components/BNav/BNav.vue b/packages/bootstrap-vue-3/src/components/BNav/BNav.vue
@@ -7,11 +7,11 @@
 <script setup lang="ts">
 // import type {BNavProps} from '../types/components'
 import type {Alignment, Booleanish} from '../../types'
-import {useBooleanish} from '../../composables'
+import {useAlignment, useBooleanish} from '../../composables'
 import {computed, toRef} from 'vue'
 
 interface BNavProps {
-  align?: Alignment
+  align?: Alignment.JustifyContent
   cardHeader?: Booleanish
   fill?: Booleanish
   justified?: Booleanish
@@ -40,6 +40,7 @@ const pillsBoolean = useBooleanish(toRef(props, 'pills'))
 const smallBoolean = useBooleanish(toRef(props, 'small'))
 const tabsBoolean = useBooleanish(toRef(props, 'tabs'))
 const verticalBoolean = useBooleanish(toRef(props, 'vertical'))
+const alignment = useAlignment(toRef(props, 'align'))
 
 const computedClasses = computed(() => ({
   'nav-tabs': tabsBoolean.value,
@@ -50,7 +51,7 @@ const computedClasses = computed(() => ({
   'flex-column': verticalBoolean.value,
   'nav-fill': !verticalBoolean.value && fillBoolean.value,
   'nav-justified': !verticalBoolean.value && justifiedBoolean.value,
-  [`justify-content-${props.align}`]: !verticalBoolean.value && props.align !== undefined,
+  [alignment.value]: !verticalBoolean.value && props.align !== undefined,
   'small': smallBoolean.value,
 }))
 </script>
diff --git a/packages/bootstrap-vue-3/src/components/BNavbar/BNavbarNav.vue b/packages/bootstrap-vue-3/src/components/BNavbar/BNavbarNav.vue
@@ -7,10 +7,10 @@
 <script setup lang="ts">
 import type {Alignment, Booleanish} from '../../types'
 import {computed, toRef} from 'vue'
-import {useBooleanish} from '../../composables'
+import {useAlignment, useBooleanish} from '../../composables'
 
 interface Props {
-  align?: Alignment
+  align?: Alignment.JustifyContent
   fill?: Booleanish
   justified?: Booleanish
   small?: Booleanish
@@ -27,11 +27,12 @@ const props = withDefaults(defineProps<Props>(), {
 const fillBoolean = useBooleanish(toRef(props, 'fill'))
 const justifiedBoolean = useBooleanish(toRef(props, 'justified'))
 const smallBoolean = useBooleanish(toRef(props, 'small'))
+const alignment = useAlignment(toRef(props, 'align'))
 
 const computedClasses = computed(() => ({
   'nav-fill': fillBoolean.value,
   'nav-justified': justifiedBoolean.value,
-  [`justify-content-${props.align}`]: props.align !== undefined,
+  [alignment.value]: props.align !== undefined,
   'small': smallBoolean.value,
 }))
 </script>
diff --git a/packages/bootstrap-vue-3/src/components/BPagination/BPagination.vue b/packages/bootstrap-vue-3/src/components/BPagination/BPagination.vue
@@ -31,7 +31,7 @@ const sanitizeCurrentPage = (value: number, numberOfPages: number) => {
 export default defineComponent({
   name: 'BPagination',
   props: {
-    align: {type: String as PropType<Alignment>, default: 'start'},
+    align: {type: String as PropType<Alignment.JustifyContent | 'fill'>, default: 'start'},
     ariaControls: {type: String, required: false},
     ariaLabel: {type: String, default: 'Pagination'},
     disabled: {type: [Boolean, String] as PropType<Booleanish>, default: false},
@@ -71,7 +71,10 @@ export default defineComponent({
     const lastNumberBoolean = useBooleanish(toRef(props, 'lastNumber'))
     const pillsBoolean = useBooleanish(toRef(props, 'pills'))
 
-    const alignment = useAlignment(toRef(props, 'align'))
+    const justifyAlign = computed((): Alignment.JustifyContent => {
+          return props.align == 'fill' ? 'start' : props.align
+    });
+    const alignment = useAlignment(toRef(justifyAlign, 'value'))
 
     // Use Active to on page-item to denote active tab
     const numberOfPages = computed(() =>
@@ -261,7 +264,7 @@ export default defineComponent({
 
     return () => {
       const buttons = []
-      const pageNumbers = pages.value.map((p) => p.number) // array of numbers.. Used in first and last number comparisons
+      const pageNumbers = pages.value.map((p) => p.number) // array of numbers... Used in first and last number comparisons
       const isActivePage = (pageNumber: number) => pageNumber === props.modelValue
       const noCurrentPage: boolean = props.modelValue < 1
       const fill = props.align === 'fill'
diff --git a/packages/bootstrap-vue-3/src/components/BRow.vue b/packages/bootstrap-vue-3/src/components/BRow.vue
@@ -8,7 +8,7 @@
 import {computed, defineComponent, PropType, toRef} from 'vue'
 import {getBreakpointProps, getClasses} from '../utils'
 import type {Alignment, Booleanish} from '../types'
-import {useBooleanish} from '../composables'
+import {useAlignment, useBooleanish} from '../composables'
 
 const rowColsProps = getBreakpointProps('cols', [''], {type: [String, Number], default: null})
 
@@ -20,12 +20,13 @@ export default defineComponent({
     gutterY: {type: String, default: null},
     noGutters: {type: [Boolean, String] as PropType<Booleanish>, default: false},
     alignV: {type: String as PropType<Alignment.Vertical>, default: null},
-    alignH: {type: String as PropType<Alignment.Horizontal>, default: null},
+    alignH: {type: String as PropType<Alignment.JustifyContent>, default: null},
     alignContent: {type: String as PropType<Alignment.Content>, default: null},
     ...rowColsProps,
   },
   setup(props) {
     const noGuttersBoolean = useBooleanish(toRef(props, 'noGutters'))
+    const alignment = useAlignment(toRef(props, 'alignH'))
 
     const rowColsClasses = computed(() => getClasses(props, rowColsProps, 'cols', 'row-cols'))
 
@@ -36,7 +37,7 @@ export default defineComponent({
         [`gy-${props.gutterY}`]: props.gutterY !== null,
         'g-0': noGuttersBoolean.value,
         [`align-items-${props.alignV}`]: props.alignV !== null,
-        [`justify-content-${props.alignH}`]: props.alignH !== null,
+        [alignment.value]: props.alignH !== null,
         [`align-content-${props.alignContent}`]: props.alignContent !== null,
       },
     ])
diff --git a/packages/bootstrap-vue-3/src/components/BTabs/BTabs.vue b/packages/bootstrap-vue-3/src/components/BTabs/BTabs.vue
@@ -76,13 +76,13 @@
 import type {BTabsParentData} from '../../types/components'
 import {computed, InjectionKey, onMounted, provide, ref, toRef, useSlots, watch} from 'vue'
 import {BvEvent, getId} from '../../utils'
-import {useBooleanish} from '../../composables'
+import {useAlignment, useBooleanish} from '../../composables'
 import type {Alignment, Booleanish, ClassValue} from '../../types'
 
 interface BTabsProps {
   activeNavItemClass?: ClassValue
   activeTabClass?: ClassValue
-  align?: Alignment
+  align?: Alignment.JustifyContent
   card?: Booleanish
   contentClass?: ClassValue
   end?: Booleanish
@@ -205,10 +205,12 @@ const computedClasses = computed(() => ({
   'align-items-start': verticalBoolean.value,
 }))
 
+const alignment = useAlignment(toRef(props, 'align'))
+
 const navTabsClasses = computed(() => ({
   'nav-pills': pillsBoolean.value,
   'flex-column me-3': verticalBoolean.value,
-  [`justify-content-${props.align}`]: props.align !== undefined,
+  [alignment.value]: props.align !== undefined,
   'nav-fill': fillBoolean.value,
   'card-header-tabs': cardBoolean.value,
   'nav-justified': justifiedBoolean.value,
diff --git a/packages/bootstrap-vue-3/src/composables/useAlignment.ts b/packages/bootstrap-vue-3/src/composables/useAlignment.ts
@@ -3,16 +3,12 @@ import type {Alignment} from '../types'
 
 /**
  *
- * @param props
+ * @param align
  * @returns
  */
 export default (
-  align: Ref<Alignment>
-): ComputedRef<'justify-content-center' | 'justify-content-end' | 'justify-content-start'> =>
-  computed(() =>
-    align.value === 'center'
-      ? 'justify-content-center'
-      : align.value === 'end'
-      ? 'justify-content-end'
-      : 'justify-content-start'
-  )
+  align: Ref<Alignment.JustifyContent | undefined>
+): ComputedRef<string> => computed(() => {
+    if (!align.value) return ''
+    return `justify-content-${align.value}`
+})
diff --git a/packages/bootstrap-vue-3/src/types/Alignment.d.ts b/packages/bootstrap-vue-3/src/types/Alignment.d.ts
@@ -1,12 +1,14 @@
 /**
  * @external
  */
-declare type Alignment = 'start' | 'end' | 'center' | 'fill'
+declare type CommonAlignment = 'start' | 'end' | 'center' | 'fill'
 
 declare namespace Alignment {
-  type Vertical = Alignment | 'baseline' | 'stretch'
-  type Horizontal = Alignment | 'between' | 'around'
-  type Content = Alignment | 'between' | 'around' | 'stretch'
+  type Vertical = CommonAlignment | 'baseline' | 'stretch'
+  type Horizontal = CommonAlignment | 'between' | 'around'
+  type Content = CommonAlignment | 'between' | 'around' | 'stretch'
+  type JustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
+  type TextHorizontal = 'start' | 'end' | 'center'
 }
 
 export default Alignment
diff --git a/packages/bootstrap-vue-3/src/types/components/BCard/BCard.d.ts b/packages/bootstrap-vue-3/src/types/components/BCard/BCard.d.ts
@@ -1,7 +1,7 @@
 import type {Alignment, ColorVariant, TextColorVariant} from '../..'
 // Props
 export interface Props {
-  align?: Alignment
+  align?: Alignment.TextHorizontal
   bgVariant?: ColorVariant
   bodyBgVariant?: ColorVariant
   bodyClass?: Array<unknown> | Record<string, unknown> | string
diff --git a/packages/bootstrap-vue-3/src/types/components/BPagination/BPagination.d.ts b/packages/bootstrap-vue-3/src/types/components/BPagination/BPagination.d.ts
@@ -1,7 +1,7 @@
 import type {Alignment, InputSize} from '../..'
 // Props
 export interface Props {
-  align?: Alignment
+  align?: Alignment.Horizontal
   ariaControls?: string
   ariaLabel?: string
   disabled?: boolean
diff --git a/packages/bootstrap-vue-3/src/types/components/BTabs/BTabs.d.ts b/packages/bootstrap-vue-3/src/types/components/BTabs/BTabs.d.ts
@@ -3,7 +3,7 @@ import type {Alignment} from '../..'
 export interface Props {
   activeNavItemClass?: Array<unknown> | Record<string, unknown> | string
   activeTabClass?: Array<unknown> | Record<string, unknown> | string
-  align?: Alignment
+  align?: Alignment.Horizontal
   card?: boolean
   contentClass?: Array<unknown> | Record<string, unknown> | string
   end?: boolean
diff --git a/packages/bootstrap-vue-3/tests/composables/useAlignment.spec.ts b/packages/bootstrap-vue-3/tests/composables/useAlignment.spec.ts
@@ -6,49 +6,59 @@ import {Alignment} from '../../src/types'
 describe('useAlignment blackbox test', () => {
   // To try to ensure it is ComputedRef
   it('value to contain property value', () => {
-    const prop: {value: Alignment} = {value: 'center'}
+    const prop: {value: Alignment.JustifyContent} = {value: 'center'}
     const value = useAlignment(toRef(prop, 'value'))
     expect(value).toHaveProperty('value')
   })
 
   it('value to contain property effect', () => {
-    const prop: {value: Alignment} = {value: 'center'}
+    const prop: {value: Alignment.JustifyContent} = {value: 'center'}
     const value = useAlignment(toRef(prop, 'value'))
     expect(value).toHaveProperty('effect')
   })
 
   it('value of center returns justify-content-center', () => {
-    const prop: {value: Alignment} = {value: 'center'}
+    const prop: {value: Alignment.JustifyContent} = {value: 'center'}
     const value = useAlignment(toRef(prop, 'value'))
-    expect(value.value).toBe('justify-content-center')
+    expect(value).toBe('justify-content-center')
   })
 
   it('value of end returns justify-content-end', () => {
-    const prop: {value: Alignment} = {value: 'end'}
+    const prop: {value: Alignment.JustifyContent} = {value: 'end'}
     const value = useAlignment(toRef(prop, 'value'))
-    expect(value.value).toBe('justify-content-end')
+    expect(value).toBe('justify-content-end')
   })
 
   it('value of start returns justify-content-start', () => {
-    const prop: {value: Alignment} = {value: 'start'}
+    const prop: {value: Alignment.JustifyContent} = {value: 'start'}
     const value = useAlignment(toRef(prop, 'value'))
-    expect(value.value).toBe('justify-content-start')
+    expect(value).toBe('justify-content-start')
   })
 
   it('value of fill returns justify-content-start', () => {
-    const prop: {value: Alignment} = {value: 'fill'}
+    const prop: {value: Alignment.JustifyContent} = {value: 'around'}
     const value = useAlignment(toRef(prop, 'value'))
-    expect(value.value).toBe('justify-content-start')
+    expect(value).toBe('justify-content-around')
+  })
+
+  it('value of fill returns justify-content-start', () => {
+    const prop: {value: Alignment.JustifyContent} = {value: 'evenly'}
+    const value = useAlignment(toRef(prop, 'value'))
+    expect(value).toBe('justify-content-evenly')
   })
 
   it('return value to be reactive', () => {
-    const prop: {value: Alignment} = reactive({value: 'center'})
+    const prop: {value: Alignment.JustifyContent} = reactive({value: 'center'})
     const value = useAlignment(toRef(prop, 'value'))
     expect(value.value).toBe('justify-content-center')
     prop.value = 'end'
     expect(value.value).toBe('justify-content-end')
-    prop.value = 'fill'
-    expect(value.value).toBe('justify-content-start')
+    prop.value = 'around'
+    expect(value.value).toBe('justify-content-around')
+    prop.value = 'between'
+    expect(value.value).toBe('justify-content-between')
+    prop.value = 'evenly'
+    expect(value.value).toBe('justify-content-evenly')
     prop.value = 'end'
     expect(value.value).toBe('justify-content-end')
     prop.value = 'start'
