buefy 1.0.0 → 1.0.2

package/src/utils/InjectedChildMixin.ts

@@ -0,0 +1,139 @@
+import type { ComponentPublicInstance, DefineComponent, ExtractPropTypes, PropType } from 'vue'
+
+import { hasFlag } from './helpers'
+import type { ProviderParent } from './ProvideInjectTypes'
+
+const sorted = 1
+const optional = 2
+
+export const Sorted = sorted
+export const Optional = optional
+
+export type FeatureFlags = 0 | typeof Sorted | typeof Optional
+
+/* eslint-disable @typescript-eslint/ban-types */
+// conditional props of InjectedChildMixin
+export type InjectedChildMixinPropOptions<
+    Flags extends FeatureFlags,
+    IsSorted = Flags extends typeof Sorted ? true : false
+> = {
+    value: {
+        type: PropType<string | null>,
+        default: null
+    }
+} & (IsSorted extends true ? { order: PropType<number> } : {})
+
+// conditional data fields of InjectedChildMixin
+export type InjectedChildMixinData<
+    Flags extends FeatureFlags,
+    Parent extends ProviderParent,
+    IsSorted = Flags extends typeof Sorted ? true : false,
+    IsOptional = Flags extends typeof Optional ? true : false
+> = (IsSorted extends true ? { dynamicIndex?: number } : {})
+    // mocks the injected `parent` with a readonly data field,
+    // because `DefineComponent` does not expose injected fields
+    // FIXME: why an empty string? → see the initial value of `parent`
+    & (IsOptional extends true ? { parent: Parent | '' } : { parent: Parent })
+
+// conditional computed fields of InjectedChildMixin
+export type InjectedChildMixinComputed<
+    Flags extends FeatureFlags,
+    IsSorted extends boolean = Flags extends typeof Sorted ? true : false
+> = {
+    uniqueValue(): string | number
+} & (IsSorted extends true ? { index(): number } : {})
+
+export type InjectedChildMixin<
+    Flags extends FeatureFlags,
+    Parent extends ProviderParent
+> = DefineComponent<
+    InjectedChildMixinPropOptions<Flags>, // PropsOrPropOptions
+    {}, // RawBindings
+    InjectedChildMixinData<Flags, Parent>,
+    InjectedChildMixinComputed<Flags>,
+    {} // M(ethods). arbitrary field is mapped to a Function if omitted.
+>
+
+type InjectedChildMixinInstance<
+    Flags extends FeatureFlags,
+    Parent extends ProviderParent
+> = ComponentPublicInstance<
+    ExtractPropTypes<InjectedChildMixinPropOptions<Flags>>, // P(rops)
+    {}, // RawBindings
+    InjectedChildMixinData<Flags, Parent>, // D(ata)
+    InjectedChildMixinComputed<Flags>, // C(omputed)
+    {} // M(ethods). arbitrary field is mapped to a Function if omitted.
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+export default <
+    Flags extends FeatureFlags = FeatureFlags,
+    Parent extends ProviderParent = ProviderParent
+>(parentItemName: string, flags?: Flags): InjectedChildMixin<Flags, Parent> => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mixin: any = {
+        // FIXME: initializing `parent` with an empty string does not make
+        // sense at all, but some code supposes that `parent` is non-null.
+        // so I leave it as is for now.
+        inject: { parent: { from: 'b' + parentItemName, default: '' } },
+        props: {
+            // if `value` is non-null, it must be unique among all the siblings.
+            // see `uniqueValue`
+            value: {
+                type: String,
+                default: null
+            }
+        },
+        computed: {
+            // `ProviderParentMixin` uses `uniqueValue` computed value to
+            // identify the child in its `childItems` collection.
+            // so the value must be unique among all the siblings.
+            // falls back to the `uid` internal field to ensure uniqueness.
+            uniqueValue() {
+                return this.value != null ? this.value : this.$.uid
+            }
+        } as ThisType<InjectedChildMixinInstance<FeatureFlags, Parent>>,
+        created() {
+            if (!this.parent) {
+                if (flags !== undefined && !hasFlag(flags, optional)) {
+                    throw new Error('You should wrap ' + this.$options.name + ' in a ' + parentItemName)
+                }
+            } else if (this.parent._registerItem) {
+                this.parent._registerItem(this)
+            }
+        },
+        beforeUnmount() {
+            if (this.parent && this.parent._unregisterItem) {
+                this.parent._unregisterItem(this)
+            }
+        }
+    }
+    if (flags !== undefined && hasFlag(flags, sorted)) {
+        // a user can explicitly specify the `order` prop to keep the order of
+        // children.
+        // I can no longer rely on automatic indexing of children, because I
+        // could not figure out how to calculate the index of a child in its
+        // parent on Vue 3.
+        // incomplete dynamic indexing is still available if any child is never
+        // unmounted; e.g., not switched with `v-if`
+        mixin.props = {
+            ...mixin.props,
+            order: {
+                type: Number,
+                required: false
+            }
+        }
+        mixin.data = () => {
+            return {
+                dynamicIndex: undefined
+            }
+        }
+        mixin.computed = {
+            ...mixin.computed,
+            index() {
+                return this.order != null ? this.order : this.dynamicIndex
+            }
+        }
+    }
+    return mixin
+}

package/src/utils/MessageMixin.spec.ts

@@ -0,0 +1,51 @@
+import { defineComponent } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import MessageMixin from '@utils/MessageMixin'
+
+describe('MessageMixin', () => {
+    HTMLElement.prototype.insertAdjacentElement = vi.fn()
+
+    const component = defineComponent({
+        mixins: [MessageMixin],
+        template: '<div class="b-component"></div>'
+    })
+    let wrapper: VueWrapper<InstanceType<typeof component>>
+
+    beforeEach(() => {
+        wrapper = shallowMount(component, {
+            attachTo: document.body
+        })
+    })
+
+    it('is active', () => {
+        expect(wrapper.vm.isActive).toBeTruthy()
+    })
+
+    it('should set isActive when active is set', async () => {
+        await wrapper.setProps({ modelValue: false })
+        expect(wrapper.vm.isActive).toBeFalsy()
+    })
+
+    it('should return correct icon depending on type', async () => {
+        const expected = {
+            'is-info': 'information',
+            'is-success': 'check-circle',
+            'is-warning': 'alert',
+            'is-danger': 'alert-circle',
+            other: null
+        }
+        for (const [key, value] of Object.entries(expected)) {
+            await wrapper.setProps({ type: key })
+            expect(wrapper.vm.computedIcon).toEqual(value)
+        }
+    })
+
+    it('should reset isActive and emit close event on close', async () => {
+        wrapper.vm.close()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.isActive).toBeFalsy()
+        expect(wrapper.emitted().close).toBeTruthy()
+    })
+})

package/src/utils/MessageMixin.ts

@@ -0,0 +1,138 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: true
+        },
+        title: String,
+        closable: {
+            type: Boolean,
+            default: true
+        },
+        message: String,
+        type: String,
+        hasIcon: Boolean,
+        size: String,
+        icon: String,
+        iconPack: String,
+        iconSize: String,
+        autoClose: {
+            type: Boolean,
+            default: false
+        },
+        duration: {
+            type: Number,
+            default: 2000
+        },
+        progressBar: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: {
+        click: () => true,
+        close: () => true,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        'update:modelValue': (value: boolean) => true
+    },
+    data() {
+        return {
+            isActive: this.modelValue,
+            remainingTime: this.duration / 1000, // in seconds
+            newIconSize: this.iconSize || this.size || 'is-large',
+            timer: undefined as ReturnType<typeof setTimeout> | undefined
+        }
+    },
+    computed: {
+        /*
+         * Icon name (MDI) based on type.
+         */
+        computedIcon() {
+            if (this.icon) {
+                return this.icon
+            }
+            switch (this.type) {
+                case 'is-info':
+                    return 'information'
+                case 'is-success':
+                    return 'check-circle'
+                case 'is-warning':
+                    return 'alert'
+                case 'is-danger':
+                    return 'alert-circle'
+                default:
+                    return null
+            }
+        }
+    },
+    watch: {
+        modelValue(value) {
+            this.isActive = value
+        },
+        isActive(value) {
+            if (value) {
+                this.setAutoClose()
+                this.setDurationProgress()
+            } else {
+                if (this.timer) {
+                    clearTimeout(this.timer)
+                }
+            }
+        }
+    },
+    methods: {
+        /*
+         * Close the Message and emit events.
+         */
+        close() {
+            this.isActive = false
+            this.resetDurationProgress()
+            this.$emit('close')
+            this.$emit('update:modelValue', false)
+        },
+        click() {
+            this.$emit('click')
+        },
+        /*
+         * Set timer to auto close message
+         */
+        setAutoClose() {
+            if (this.autoClose) {
+                this.timer = setTimeout(() => {
+                    if (this.isActive) {
+                        this.close()
+                    }
+                }, this.duration)
+            }
+        },
+        setDurationProgress() {
+            if (this.progressBar || this.autoClose) {
+                /*
+                 * Runs every one second to set the duration passed before
+                 * the alert will auto close to show it in the progress bar (Remaining Time)
+                 */
+                this.$buefy.globalNoticeInterval = setInterval(() => {
+                    if (this.remainingTime !== 0) {
+                        this.remainingTime -= 1
+                    } else {
+                        this.resetDurationProgress()
+                    }
+                }, 1000)
+            }
+        },
+        resetDurationProgress() {
+            /*
+             * Wait until the component get closed and then reset
+             **/
+            setTimeout(() => {
+                this.remainingTime = this.duration / 1000
+                clearInterval(this.$buefy.globalNoticeInterval)
+            }, 100)
+        }
+    },
+    mounted() {
+        this.setAutoClose()
+    }
+})

package/src/utils/NoticeMixin.spec.ts

@@ -0,0 +1,55 @@
+import { defineComponent } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import NoticeMixin from '@utils/NoticeMixin'
+
+describe('NoticeMixin', () => {
+    HTMLElement.prototype.insertAdjacentElement = vi.fn()
+
+    const component = defineComponent({
+        mixins: [NoticeMixin],
+        template: '<div class="b-component"></div>'
+    })
+    let wrapper: VueWrapper<InstanceType<typeof component>>
+
+    beforeEach(() => {
+        wrapper = shallowMount(component, {
+            attachTo: document.body
+        })
+    })
+
+    it('is active', () => {
+        expect(wrapper.vm.isActive).toBeTruthy()
+    })
+
+    it('returns correct transition depending on position', async () => {
+        const topTransition = {
+            enter: 'fadeInDown',
+            leave: 'fadeOut'
+        }
+        const bottomTransition = {
+            enter: 'fadeInUp',
+            leave: 'fadeOut'
+        }
+        const expected = [
+            ['is-top', topTransition],
+            ['is-top-right', topTransition],
+            ['is-top-left', topTransition],
+            ['is-bottom', bottomTransition],
+            ['is-bottom-right', bottomTransition],
+            ['is-bottom-left', bottomTransition]
+        ] as const
+        for (const [key, value] of expected) {
+            await wrapper.setProps({ position: key })
+            expect(wrapper.vm.transition).toEqual(value)
+        }
+
+        expect(wrapper.vm.isActive).toBeTruthy()
+    })
+
+    it('reset isActive on close', () => {
+        wrapper.vm.close()
+        expect(wrapper.vm.isActive).toBeFalsy()
+    })
+})

package/src/utils/NoticeMixin.ts

@@ -0,0 +1,181 @@
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import config, { NOTICE_POSITIONS } from './config'
+import type { NoticePosition } from './config'
+import { removeElement } from './helpers'
+
+export default defineComponent({
+    props: {
+        type: {
+            type: String,
+            default: 'is-dark'
+        },
+        message: [String, Array] as PropType<string | string[]>,
+        duration: Number,
+        queue: {
+            type: Boolean,
+            default: undefined
+        },
+        indefinite: {
+            type: Boolean,
+            default: false
+        },
+        pauseOnHover: {
+            type: Boolean,
+            default: false
+        },
+        position: {
+            type: String as PropType<NoticePosition>,
+            default: 'is-top',
+            validator(value: unknown): value is NoticePosition {
+                return NOTICE_POSITIONS.indexOf(value as NoticePosition) > -1
+            }
+        },
+        container: String
+    },
+    emits: {
+        click: () => true,
+        close: () => true
+    },
+    data() {
+        return {
+            isActive: false,
+            isPaused: false,
+            parentTop: null as Element | null,
+            parentBottom: null as Element | null,
+            newContainer: this.container || config.defaultContainerElement,
+            timer: undefined as ReturnType<typeof setTimeout> | undefined,
+            // host container should override `newDuration`
+            newDuration: this.duration || 0
+        }
+    },
+    computed: {
+        correctParent() {
+            switch (this.position) {
+                case 'is-top-right':
+                case 'is-top':
+                case 'is-top-left':
+                    return this.parentTop!
+
+                case 'is-bottom-right':
+                case 'is-bottom':
+                case 'is-bottom-left':
+                    return this.parentBottom!
+                default: {
+                    const exhaustiveCheck: never = this.position
+                    throw new RangeError(`invalid position: ${exhaustiveCheck}`)
+                }
+            }
+        },
+        transition() {
+            switch (this.position) {
+                case 'is-top-right':
+                case 'is-top':
+                case 'is-top-left':
+                    return {
+                        enter: 'fadeInDown',
+                        leave: 'fadeOut'
+                    }
+                case 'is-bottom-right':
+                case 'is-bottom':
+                case 'is-bottom-left':
+                    return {
+                        enter: 'fadeInUp',
+                        leave: 'fadeOut'
+                    }
+                default: {
+                    const exhaustiveCheck: never = this.position
+                    throw new RangeError(`invalid position: ${exhaustiveCheck}`)
+                }
+            }
+        }
+    },
+    methods: {
+        pause() {
+            if (this.pauseOnHover && !this.indefinite) {
+                this.isPaused = true
+                clearInterval(this.$buefy.globalNoticeInterval)
+            }
+        },
+        removePause() {
+            if (this.pauseOnHover && !this.indefinite) {
+                this.isPaused = false
+                this.close()
+            }
+        },
+        shouldQueue() {
+            const queue = this.queue !== undefined
+                ? this.queue
+                : config.defaultNoticeQueue
+
+            if (!queue) return false
+
+            return (
+                this.parentTop!.childElementCount > 0 ||
+                this.parentBottom!.childElementCount > 0
+            )
+        },
+        click() {
+            this.$emit('click')
+        },
+        close() {
+            if (!this.isPaused) {
+                clearTimeout(this.timer)
+                this.isActive = false
+                this.$emit('close')
+
+                // Timeout for the animation complete before destroying
+                setTimeout(() => {
+                    removeElement(this.$el)
+                }, 150)
+            }
+        },
+
+        timeoutCallback() {
+            return this.close()
+        },
+
+        showNotice() {
+            if (this.shouldQueue()) this.correctParent.innerHTML = ''
+            this.correctParent.insertAdjacentElement('afterbegin', this.$el)
+            this.isActive = true
+
+            if (!this.indefinite) {
+                this.timer = setTimeout(() => this.timeoutCallback(), this.newDuration)
+            }
+        },
+
+        setupContainer() {
+            this.parentTop = document.querySelector((this.newContainer ? this.newContainer : 'body') + '>.notices.is-top')
+            this.parentBottom = document.querySelector((this.newContainer ? this.newContainer : 'body') + '>.notices.is-bottom')
+
+            if (this.parentTop && this.parentBottom) return
+
+            if (!this.parentTop) {
+                this.parentTop = document.createElement('div')
+                this.parentTop.className = 'notices is-top'
+            }
+
+            if (!this.parentBottom) {
+                this.parentBottom = document.createElement('div')
+                this.parentBottom.className = 'notices is-bottom'
+            }
+
+            const container = document.querySelector(this.newContainer!) || document.body
+
+            container.appendChild(this.parentTop)
+            container.appendChild(this.parentBottom)
+
+            if (this.newContainer) {
+                this.parentTop.classList.add('has-custom-container')
+                this.parentBottom.classList.add('has-custom-container')
+            }
+        }
+    },
+    beforeMount() {
+        this.setupContainer()
+    },
+    mounted() {
+        this.showNotice()
+    }
+})

package/src/utils/ProvideInjectTypes.ts

@@ -0,0 +1,20 @@
+// Common types between `ProviderParentMixin` and `InjectedChildMixin`.
+
+// Interface that `InjectedChildMixin` is supposed to implement.
+export interface InjectedChild {
+    // `ProviderParent` will use `uniqueValue` to identify the child.
+    uniqueValue: string | number
+    // `ProviderParent` will use `index` to sort the children.
+    index: number
+    // `ProviderParent` will set `dynamicIndex` to tell the child the order
+    // of its registration.
+    dynamicIndex?: number
+}
+
+// Interface that `ProviderParentMixin` is supposed to implement.
+export interface ProviderParent {
+    // `InjectedChild` has to call `_registerItem` on mount.
+    _registerItem(item: InjectedChild): void
+    // `InjectedChild` has to call `_unregisterItem` on unmount.
+    _unregisterItem(item: InjectedChild): void
+}

package/src/utils/ProviderParentMixin.ts

@@ -0,0 +1,105 @@
+import type { DefineComponent } from 'vue'
+
+import { hasFlag } from './helpers'
+import type { InjectedChild } from './ProvideInjectTypes'
+
+const items = 1
+const sorted = 3
+
+export const Items = items
+export const Sorted = sorted
+
+export type FeatureFlags = 0 | typeof Items | typeof Sorted
+
+/* eslint-disable @typescript-eslint/ban-types */
+// conditional data fields of ProviderParentMixin
+export type ProviderParentMixinData<
+    Flags extends FeatureFlags,
+    Child extends InjectedChild,
+    HasItems extends boolean = Flags extends typeof Items | typeof Sorted ? true : false,
+    IsSorted extends boolean = Flags extends typeof Sorted ? true : false
+> = (HasItems extends true ? { childItems: Child[] } : {})
+    & (IsSorted extends true ? { nextIndex: number } : {})
+
+// conditional computed fields of ProviderParentMixin
+export type ProviderParentMixinComputed<
+    Flags extends FeatureFlags,
+    Child extends InjectedChild,
+    IsSorted extends boolean = Flags extends typeof Sorted ? true : false
+> = IsSorted extends true ? { sortedItems(): Child[] } : {}
+
+// conditional methods of ProviderParentMixin
+export type ProviderParentMixinMethods<
+    Flags extends FeatureFlags,
+    Child extends InjectedChild,
+    HasItems extends boolean = Flags extends typeof Items | typeof Sorted ? true : false
+> = HasItems extends true ? {
+    _registerItem(item: Child): void
+    _unregisterItem(item: Child): void
+} : {}
+
+export type ProviderParentMixin<
+    Flags extends FeatureFlags,
+    Child extends InjectedChild
+> = DefineComponent<
+    {}, // PropsOrPropOptions
+    {}, // RawBindings
+    ProviderParentMixinData<Flags, Child>, // D(ata)
+    ProviderParentMixinComputed<Flags, Child>, // C(computed)
+    ProviderParentMixinMethods<Flags, Child> // M(ethods)
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+export default <
+    Flags extends FeatureFlags = FeatureFlags,
+    Child extends InjectedChild = InjectedChild
+>(itemName: string, flags?: Flags): ProviderParentMixin<Flags, Child> => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mixin: any = {
+        provide() {
+            return {
+                ['b' + itemName]: this
+            }
+        }
+    }
+
+    if (flags !== undefined && hasFlag(flags, items)) {
+        mixin.data = function () {
+            return {
+                childItems: [] as Child[],
+                ...(hasFlag(flags, sorted) ? { nextIndex: 0 } : {})
+            }
+        }
+        mixin.methods = {
+            _registerItem(item: Child) {
+                if (hasFlag(flags, sorted)) {
+                    // assigns a dynamic index.
+                    // dynamic indices will be messed up if any child is
+                    // unmounted.
+                    // use the new `order` prop to maintain the ordering.
+                    item.dynamicIndex = this.nextIndex
+                    ++this.nextIndex
+                }
+                this.childItems.push(item)
+            },
+            _unregisterItem(item: Child) {
+                this.childItems = this.childItems
+                    .filter((i: Child) => i.uniqueValue !== item.uniqueValue)
+            }
+        }
+
+        if (hasFlag(flags, sorted)) {
+            mixin.computed = {
+                /*
+                 * When items are added/removed sort them according to their position
+                 */
+                sortedItems() {
+                    return this.childItems.slice().sort((i1: Child, i2: Child) => {
+                        return i1.index - i2.index
+                    })
+                }
+            }
+        }
+    }
+    return mixin
+}