Skip to content

Commit

Permalink
BPagination #1686 Rebuild (#1723)
Browse files Browse the repository at this point in the history
fix(BToast): animation not working fixes #1645

feat(BToastOrchestrator): add move transitions

feat(BToastOrchestrator): appendToast prop working and show method incorporates appendToast

feat(BToast)!: remove animation prop... Had no use

refactor: shared CommonInputProps and shared FormDebounceOptions
  • Loading branch information
VividLemon committed Jan 23, 2024
1 parent 0908731 commit ead580f
Show file tree
Hide file tree
Showing 19 changed files with 597 additions and 910 deletions.
16 changes: 8 additions & 8 deletions apps/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,25 @@
},
"devDependencies": {
"@iconify-json/bi": "^1.1.23",
"@iconify-json/simple-icons": "^1.1.87",
"@iconify-json/simple-icons": "^1.1.88",
"@rushstack/eslint-patch": "^1.6.1",
"@tsconfig/node20": "^20.1.2",
"@types/node": "^20.10.7",
"@types/node": "^20.11.4",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/tsconfig": "^0.5.1",
"@vueuse/core": "^10.7.1",
"@vueuse/core": "^10.7.2",
"bootstrap": "^5.3.2",
"bootstrap-vue-next": "workspace:^",
"cross-env": "^7.0.3",
"eslint": "^8.56.0",
"eslint-define-config": "^2.1.0",
"eslint-plugin-vue": "^9.19.2",
"prettier": "^3.1.1",
"eslint-plugin-vue": "^9.20.1",
"prettier": "^3.2.2",
"typescript": "^5.3.3",
"unplugin-icons": "^0.18.1",
"vitepress": "1.0.0-rc.35",
"vue": "^3.4.5"
"unplugin-icons": "^0.18.2",
"vitepress": "1.0.0-rc.39",
"vue": "^3.4.14"
},
"lint-staged": {
"*.{js,ts,vue}": "eslint --cache --fix",
Expand Down
8 changes: 4 additions & 4 deletions apps/playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
},
"dependencies": {
"bootstrap-vue-next": "workspace:^",
"vue": "^3.4.5",
"vue": "^3.4.14",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@tsconfig/node20": "^20.1.2",
"@types/node": "^20.10.6",
"@vitejs/plugin-vue": "^5.0.2",
"@types/node": "^20.11.4",
"@vitejs/plugin-vue": "^5.0.3",
"@vue/tsconfig": "^0.5.1",
"bootstrap": "^5.3.2",
"typescript": "^5.3.3",
"vite": "^5.0.10",
"vite": "^5.0.11",
"vue-tsc": "^1.8.27"
},
"lint-staged": {
Expand Down
28 changes: 14 additions & 14 deletions packages/bootstrap-vue-next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,37 +43,37 @@
"test:ci": "pnpm run test:lint:ci && pnpm run test:unit:ci"
},
"peerDependencies": {
"vue": "^3.4.5"
"vue": "^3.4.14"
},
"dependencies": {
"@floating-ui/vue": "1.0.2",
"@vueuse/core": "^10.7.1"
"@floating-ui/vue": "^1.0.4",
"@vueuse/core": "^10.7.2"
},
"devDependencies": {
"@floating-ui/core": "^1.5.3",
"@rushstack/eslint-patch": "^1.6.1",
"@tsconfig/node20": "^20.1.2",
"@types/node": "^20.10.7",
"@vitejs/plugin-vue": "^5.0.2",
"@vitest/coverage-v8": "^1.1.3",
"@types/node": "^20.11.4",
"@vitejs/plugin-vue": "^5.0.3",
"@vitest/coverage-v8": "^1.2.0",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/runtime-core": "^3.4.5",
"@vue/runtime-core": "^3.4.14",
"@vue/test-utils": "^2.4.3",
"@vue/tsconfig": "^0.5.1",
"@vueuse/shared": "^10.7.1",
"@vueuse/shared": "^10.7.2",
"bootstrap": "^5.3.2",
"eslint": "^8.56.0",
"eslint-define-config": "^2.1.0",
"eslint-plugin-vue": "^9.19.2",
"happy-dom": "^12.10.3",
"prettier": "^3.1.1",
"eslint-plugin-vue": "^9.20.1",
"happy-dom": "^13.1.4",
"prettier": "^3.2.2",
"sass": "^1.69.7",
"typescript": "^5.3.3",
"vite": "^5.0.11",
"vite-plugin-dts": "^3.7.0",
"vitest": "^1.1.3",
"vue": "^3.4.5",
"vite-plugin-dts": "^3.7.1",
"vitest": "^1.2.0",
"vue": "^3.4.14",
"vue-router": "^4.2.5",
"vue-tsc": "^1.8.27"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@
<script setup lang="ts">
import {computed, ref} from 'vue'
import {useBooleanish, useFormInput, useStateClass} from '../../composables'
import type {CommonInputProps} from '../../composables/useFormInput'
import type {InputType, Numberish} from '../../types'
import type {CommonInputProps, InputType, Numberish} from '../../types'
const props = withDefaults(
defineProps<
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,9 @@
</template>
<script setup lang="ts">
import type {Booleanish, Numberish} from '../../types'
import type {Booleanish, CommonInputProps, Numberish} from '../../types'
import {computed, type CSSProperties} from 'vue'
import {useBooleanish, useFormInput, useStateClass} from '../../composables'
import type {CommonInputProps} from '../../composables/useFormInput'
const props = withDefaults(
defineProps<
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<Teleport :to="teleportTo" :disabled="teleportDisabledBoolean">
<!-- This wrapper div is used for specific targetting by the user -->
<!-- Even though it serves no direct purpose itself -->
<div id="__BVID__modal-container">
<!-- TODO the animation when entering doesn't work. -->
<!-- I tried to use <Transition appear> to have the animation work, but it didn't -->
Expand Down
4 changes: 0 additions & 4 deletions packages/bootstrap-vue-next/src/components/BToast/BToast.vue
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ import BProgress from '../BProgress/BProgress.vue'
import {BvTriggerableEvent} from '../../utils'
const props = withDefaults(defineProps<BToastProps>(), {
animation: true,
bgVariant: null,
body: undefined,
bodyClass: undefined,
Expand Down Expand Up @@ -138,9 +137,6 @@ const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
const {computedLink, computedLinkProps} = useBLinkHelper(props)
// TODO animation is never used
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const animationBoolean = useBooleanish(() => props.animation)
const isStatusBoolean = useBooleanish(() => props.isStatus)
const noCloseButtonBoolean = useBooleanish(() => props.noCloseButton)
const noFadeBoolean = useBooleanish(() => props.noFade)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
<template>
<Teleport :to="teleportTo" :disabled="teleportDisabledBoolean">
<!-- This wrapper div is used for specific targetting by the user -->
<!-- Even though it serves no direct purpose itself -->
<div id="__BVID__toaster-container">
<div
v-for="(value, key) in toastPositions"
:key="key"
:class="value"
class="toast-container position-fixed p-3"
>
<component
:is="toast.value.component"
v-for="toast in toasts?.filter((el) => el.value.props.pos === key)"
:key="toast.value.props._self"
v-model="toast.value.props._modelValue"
:transition-props="{appear: true}"
v-bind="pluckToastItem(toast.value.props)"
@hidden="remove?.(toast.value.props._self)"
/>
<TransitionGroup name="b-list">
<component
:is="toast.value.component"
v-for="toast in toasts?.filter((el) => el.value.props.pos === key)"
:key="toast.value.props._self"
v-bind="pluckToastItem(toast.value.props)"
v-model="toast.value.props._modelValue"
:trans-props="{...toast.value.props.transProps, appear: true}"
@hide.prevent="remove?.(toast.value.props._self)"
/>
</TransitionGroup>
</div>
</div>
</Teleport>
</template>
<script setup lang="ts">
import type {RendererElement} from 'vue'
import {type RendererElement, watch} from 'vue'
import {useBooleanish, useToast} from '../../composables'
import type {Booleanish} from '../../types'
import {omit} from '../../utils'
Expand All @@ -31,16 +35,17 @@ const props = withDefaults(
defineProps<{
teleportDisabled?: Booleanish
teleportTo?: string | Readonly<RendererElement> | null | undefined
// TODO this
// appendToast?: Booleanish
appendToast?: Booleanish
}>(),
{
teleportDisabled: false,
teleportTo: 'body',
appendToast: false,
}
)
const teleportDisabledBoolean = useBooleanish(() => props.teleportDisabled)
const appendToastBoolean = useBooleanish(() => props.appendToast)
const toastPositions = {
'top-left': 'top-0 start-0',
Expand All @@ -54,7 +59,15 @@ const toastPositions = {
'bottom-right': 'bottom-0 end-0',
} as const
const {remove, toasts, show} = useToast()
const {remove, toasts, show, _setIsAppend} = useToast()
watch(
appendToastBoolean,
(value) => {
_setIsAppend?.(value)
},
{immediate: true}
)
const pluckToastItem = (
payload: Readonly<Exclude<typeof toasts, undefined>['value'][number]['value']['props']>
Expand All @@ -66,3 +79,25 @@ defineExpose({
toasts,
})
</script>
<style lang="scss">
/*
If you remove the last element in the list, the animation goes farther to the right then normal.
I don't know why
I kind of like it though, and even if I didn't, I don't know how to get rid of it.
Getting the transitions to work here was basically all trial and error.
I think it's because it's "moving", but I don't know where it's moving to
*/
.b-list-move,
.b-list-enter-active,
.b-list-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.b-list-enter-from,
.b-list-leave-to {
opacity: 0; // TODO this should be the responsibility of the child
}
.b-list-leave-active {
position: fixed;
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import {enableAutoUnmount, mount} from '@vue/test-utils'
import {afterEach, describe, expect, it} from 'vitest'
import BToastOrchestrator from './BToastOrchestrator.vue'

describe('toast-orchestator', () => {
enableAutoUnmount(afterEach)

it('has expected structure', async () => {
const wrapper = mount(BToastOrchestrator, {
global: {stubs: {teleport: true}},
})

expect(wrapper.vm).toBeDefined()

const $div = wrapper.find('div')
expect($div.attributes('id')).toBe('__BVID__toaster-container')
expect($div.attributes('aria-live')).toBeUndefined()
expect($div.attributes('aria-atomic')).toBeUndefined()
expect($div.attributes('role')).toBeUndefined()
})
})
61 changes: 61 additions & 0 deletions packages/bootstrap-vue-next/src/components/BToast/toast.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import {enableAutoUnmount, mount} from '@vue/test-utils'
import {afterEach, describe, expect, it} from 'vitest'
import {nextTick} from 'vue'
import BToast from './BToast.vue'

describe('toast', () => {
enableAutoUnmount(afterEach)

it('has expected structure', async () => {
const wrapper = mount(BToast, {
attachTo: document.body,
props: {
modelValue: true,
title: 'title',
},
slots: {
default: 'content',
},
})

expect(wrapper.vm).toBeDefined()
await nextTick()

expect(wrapper.element.tagName).toBe('TRANSITION-STUB')

expect(wrapper.find('.toast').exists()).toBe(true)

const $toast = wrapper.find('.toast')
expect($toast.element.tagName).toBe('DIV')
expect($toast.classes()).toContain('toast')
expect($toast.classes()).toContain('show')
expect($toast.attributes('role')).toEqual('alert')
expect($toast.attributes('aria-live')).toEqual('assertive')
expect($toast.attributes('aria-atomic')).toEqual('true')
expect($toast.attributes('tabindex')).toEqual('0')

expect($toast.find('.toast-header').exists()).toBe(true)
const $header = $toast.find('.toast-header')
expect($header.element.tagName).toBe('DIV')
expect($header.classes().length).toBe(1)
expect($header.find('strong').exists()).toBe(true)
expect($header.find('strong').text()).toEqual('title')
expect($header.find('strong').classes()).toContain('me-auto')
expect($header.find('button').exists()).toBe(true)
expect($header.find('button').classes()).toContain('btn-close')

expect($toast.find('.toast-body').exists()).toBe(true)
const $body = $toast.find('.toast-body')
expect($body.element.tagName).toBe('DIV')
expect($body.classes().length).toBe(1)
expect($body.text()).toEqual('content')

wrapper.unmount()
})

it.skip('has correct header tag when "header-tag" prop is set', () => {})
it.skip('alert with link closes on click works', () => {})
it.skip('auto-hide works', () => {})
it.skip('hover pause works', () => {})
it.skip('hover pause has no effect when no-hover-pause is set', () => {})
})
28 changes: 2 additions & 26 deletions packages/bootstrap-vue-next/src/composables/useFormInput.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,10 @@
import type {AriaInvalid, Booleanish, Numberish, Size} from '../types'
import type {Numberish} from '../types'
import {nextTick, onActivated, onMounted, ref} from 'vue'
import useAriaInvalid from './useAriaInvalid'
import useBooleanish from './useBooleanish'
import useId from './useId'
import {useDebounceFn, useFocus, useToNumber, useVModel} from '@vueuse/core'

export interface CommonInputProps {
ariaInvalid?: AriaInvalid
autocomplete?: string
autofocus?: Booleanish
disabled?: Booleanish
form?: string
debounce?: Numberish
debounceMaxWait?: Numberish
formatter?: (val: string, evt: Event) => string
id?: string
lazy?: Booleanish
lazyFormatter?: Booleanish
list?: string
modelValue?: Numberish | null
name?: string
number?: Booleanish
placeholder?: string
plaintext?: Booleanish
readonly?: Booleanish
required?: Booleanish
size?: Size
state?: Booleanish | null | undefined
trim?: Booleanish
}
import type {CommonInputProps} from '../types/FormCommonInputProps'

export default (
props: Readonly<CommonInputProps>,
Expand Down
Loading

0 comments on commit ead580f

Please sign in to comment.