buefy 1.0.0 → 1.0.2

package/src/components/dropdown/index.ts

@@ -0,0 +1,20 @@
+import type { App } from 'vue'
+
+import Dropdown from './Dropdown.vue'
+import DropdownItem from './DropdownItem.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Dropdown)
+        registerComponent(Vue, DropdownItem)
+    }
+}
+
+export default Plugin
+
+export {
+    Dropdown as BDropdown,
+    DropdownItem as BDropdownItem
+}

package/src/components/field/Field.spec.ts

@@ -0,0 +1,324 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import type { ComponentMountingOptions, VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import BField from '@components/field/Field.vue'
+import type { FieldMessageProp } from '@components/field/Field.vue'
+import BFieldBody from '@components/field/FieldBody.vue'
+import BInput from '@components/input/Input.vue'
+
+type BFieldInstance = InstanceType<typeof BField>
+
+const components = {
+    'b-field': BField,
+    'b-field-body': BFieldBody,
+    'b-input': BInput
+}
+
+describe('BField', () => {
+    it('is called', () => {
+        const wrapper = shallowMount(BField)
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BField')
+    })
+
+    it('render correctly', () => {
+        const wrapper = shallowMount(BField)
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('sets fieldLabelSize to "is-normal" when horizontal==true and input elements are inside', () => {
+        const wrapper = mount(BField, {
+            props: { horizontal: true },
+            slots: { default: [BInput] },
+            global: {
+                components
+            }
+        })
+
+        expect(wrapper.vm.$data).toEqual(expect.objectContaining({ fieldLabelSize: 'is-normal' }))
+    })
+
+    it('sets input class with type value when prop "type" is changed dynamically', async () => {
+        const type = 'is-danger'
+        const wrapper = mount(BField, {
+            slots: { default: [BInput] },
+            global: {
+                components
+            }
+        })
+        await wrapper.setProps({ type })
+        expect(wrapper.find('.input').classes()).toContain(type)
+    })
+
+    describe('class names for the root div.field', () => {
+        it('contains "is-expanded" when prop "expanded" is set', () => {
+            const wrapper = shallowMount(BField, { props: { expanded: true } })
+            expect(wrapper.find('.field').classes()).toContain('is-expanded')
+        })
+    })
+
+    describe('Passing a message prop', () => {
+        // `slot` may be a template string
+        const generateMountOptions = (
+            { message, slot }: { message: FieldMessageProp, slot?: string }
+        ) => {
+            return {
+                props: { message },
+                slots: {
+                    default: [BInput, '<button class="button">Button</button>'],
+                    ...(slot ? { message: slot } : {})
+                },
+                global: {
+                    components
+                }
+            }
+        }
+
+        it('adds a help <p> element in the root div.field when "message" prop is passed', () => {
+            const message = 'Some string message'
+            const mountOptions = generateMountOptions({ message })
+            const wrapper = shallowMount(BField, mountOptions)
+            expect(wrapper.find('.field').find('p.help').text()).toEqual(message)
+        })
+
+        it('changes the <p> element content in the root div.field when "message" prop is changed dynamically', async () => {
+            const message = 'Some string message'
+            const mountOptions = generateMountOptions({ message: 'initial message' })
+            const wrapper = shallowMount(BField, mountOptions)
+            await wrapper.setProps({ message })
+            expect(wrapper.find('.field').find('p.help').text()).toEqual(message)
+        })
+
+        it('given an array of string as message, it joins the messages with line breaks', () => {
+            const message = [
+                'Some string message 1',
+                'Some string message 2',
+                'Some string message 3',
+                'Some string message 4',
+                'Some string message 5'
+            ]
+            const mountOptions = generateMountOptions({ message })
+            const wrapper = shallowMount(BField, mountOptions)
+            expect(wrapper.find('p.help').html().split('<br>').length).toEqual(message.length)
+        })
+
+        it('given an object as message, it grabs the keys and joins them with line breaks', () => {
+            const message = {
+                message1: 'Some string message 1',
+                message2: 'Some string message 2',
+                message3: 'Some string message 3',
+                message4: 'Some string message 4',
+                message5: 'Some string message 5'
+            }
+            const mountOptions = generateMountOptions({ message })
+            const wrapper = shallowMount(BField, mountOptions)
+            expect(wrapper.find('p.help').html().split('<br>').length).toEqual(Object.keys(message).length)
+        })
+
+        it(`given an array of string with an object as one of the elements as message, it grabs the
+        keys of the object and joins them with the messages with line breaks`, () => {
+            const message = [
+                'Some string message 1',
+                {
+                    message2: 'Some string message 2',
+                    message3: 'Some string message 3'
+                },
+                'Some string message 4',
+                'Some string message 5'
+            ]
+            const mountOptions = generateMountOptions({ message })
+            const wrapper = shallowMount(BField, mountOptions)
+            expect(wrapper.find('p.help').html().split('<br>').length).toEqual(5)
+        })
+
+        it('messages are passed down to the message slot', () => {
+            const message = 'Some string message'
+            const slot = '<template #message="{ messages }">{{ messages.join("") }}</template>'
+            const mountOptions = generateMountOptions({ message, slot })
+            const wrapper = shallowMount(BField, mountOptions)
+            expect(wrapper.find('p.help').text()).toEqual(message)
+        })
+    })
+
+    describe('managing groups', () => {
+        const mountOptions = {
+            props: {
+                grouped: true
+            },
+            slots: {
+                default: [BInput, '<button class="button">Button</button>']
+            },
+            global: {
+                components
+            }
+        }
+
+        it('groups the children together in an inner field', () => {
+            const wrapper = mount(BField, mountOptions)
+            const innerField = wrapper.find('.field-body').find('.field')
+            expect(innerField.classes()).toContain('is-grouped')
+        })
+
+        it('appends the classname with value of position when "position" prop is passed', () => {
+            const { props } = mountOptions
+            const wrapper = mount(BField, {
+                ...mountOptions,
+                props: {
+                    ...props,
+                    position: 'is-centered'
+                }
+            })
+            const innerField = wrapper.find('.field-body').find('.field')
+            expect(innerField.classes()).toContain('is-grouped')
+            expect(innerField.classes()).toContain('is-grouped-centered')
+        })
+
+        it('contains "is-grouped-multiline" when prop "groupMultiline" is set', () => {
+            const { props } = mountOptions
+            const wrapper = mount(BField, {
+                ...mountOptions,
+                props: {
+                    ...props,
+                    groupMultiline: true
+                }
+            })
+            const innerField = wrapper.find('.field-body').find('.field')
+            expect(innerField.classes()).toContain('is-grouped-multiline')
+        })
+
+        it('adds a label element under the root div.field when "label" prop is passed', () => {
+            const { props } = mountOptions
+            const wrapper = shallowMount(BField, {
+                ...mountOptions,
+                props: {
+                    ...props,
+                    label: 'Some label'
+                }
+            })
+            expect(wrapper.find('.field').find('label').isVisible()).toBe(true)
+        })
+
+        it('should reflect validation status of wrapped input unless type is specified', async () => {
+            const wrapper = mount(BField, mountOptions)
+            const input = wrapper.findComponent(BInput)
+
+            input.vm.setInvalid()
+            await wrapper.vm.$nextTick()
+            await wrapper.vm.$nextTick() // setInvalid takes effect on the first $nextTick
+            expect(wrapper.vm.newType).toBe('is-danger')
+
+            input.vm.setValidity(null, null)
+            await wrapper.vm.$nextTick()
+            await wrapper.vm.$nextTick() // setValidity takes effect on the first $nextTick
+            expect(wrapper.vm.newType).toBeFalsy()
+
+            await wrapper.setProps({ type: 'is-warning' })
+
+            input.vm.setInvalid()
+            await wrapper.vm.$nextTick()
+            await wrapper.vm.$nextTick() // setInvalid takes effect on the first $nextTick
+            expect(wrapper.vm.newType).toBe('is-warning')
+
+            input.vm.setValidity(null, null)
+            await wrapper.vm.$nextTick()
+            await wrapper.vm.$nextTick() // setValidity takes effect on the first $nextTick
+            expect(wrapper.vm.newType).toBe('is-warning')
+        })
+    })
+
+    describe('Passing true for horizontal prop', () => {
+        const generateMountOptions = (props?: ComponentMountingOptions<BFieldInstance>['props']) => {
+            return {
+                props: {
+                    horizontal: true,
+                    ...props
+                },
+                slots: {
+                    default: BField
+                },
+                global: {
+                    components
+                }
+            }
+        }
+
+        it('adds "is-horizontal" to root div.field', () => {
+            const mountOptions = generateMountOptions()
+            const wrapper = shallowMount(BField, mountOptions)
+            expect(wrapper.find('.field').classes()).toContain('is-horizontal')
+        })
+
+        it('produces a div.field-label + .field-body', () => {
+            const mountOptions = generateMountOptions()
+            const wrapper = mount(BField, mountOptions)
+            expect(wrapper.find('.field').find('.field-label').isVisible()).toBe(true)
+            expect(wrapper.find('.field').find('.field-label + .field-body').isVisible()).toBe(true)
+        })
+
+        it('adds a label element under .field-label when "label" prop is passed', () => {
+            const mountOptions = generateMountOptions({ label: 'Some label' })
+            const wrapper = mount(BField, mountOptions)
+            expect(wrapper.find('.field-label').find('label.label').isVisible()).toBe(true)
+        })
+
+        it('adds a help <p> element in the div.field-body when "message" prop is passed', () => {
+            const message = 'Some message'
+            const mountOptions = generateMountOptions({ message })
+            const wrapper = mount(BField, mountOptions)
+            const helpWrapper = wrapper.find('.field').find('.field-body').find('.help')
+            expect(helpWrapper.isVisible()).toBe(true)
+            expect(helpWrapper.text()).toEqual(message)
+        })
+    })
+
+    describe('with grouped and horizontal true', () => {
+        let wrapper: VueWrapper<BFieldInstance>
+
+        beforeEach(() => {
+            wrapper = mount(BField, {
+                props: {
+                    grouped: true,
+                    horizontal: true
+                },
+                slots: {
+                    default: [BInput, BInput]
+                },
+                global: {
+                    components
+                }
+            })
+        })
+
+        it('should wrap each child in a field under a field-body', () => {
+            const body = wrapper.findComponent(BFieldBody)
+            expect(body.exists()).toBe(true)
+            const childFields = body.findAllComponents(BField)
+            expect(childFields.length).toBe(2)
+            expect(childFields[0].findComponent(BInput).exists()).toBe(true)
+            expect(childFields[1].findComponent(BInput).exists()).toBe(true)
+        })
+
+        describe('when validation fails', () => {
+            let childFields: VueWrapper<BFieldInstance>[]
+
+            beforeEach(async () => {
+                await wrapper.setData({
+                    newType: 'is-danger',
+                    newMessage: 'error message'
+                })
+                const body = wrapper.findComponent(BFieldBody)
+                childFields = body.findAllComponents(BField)
+            })
+
+            it('should set message only to the first child field', () => {
+                expect(childFields[0].props('message')).toEqual(['error message'])
+                expect(childFields[1].props('message')).toBeUndefined()
+            })
+
+            it('should set type to all the child fields', () => {
+                expect(childFields[0].props('type')).toBe('is-danger')
+                expect(childFields[1].props('type')).toBe('is-danger')
+            })
+        })
+    })
+})

package/src/components/field/Field.vue

@@ -0,0 +1,316 @@
+<template>
+    <div class="field" :class="rootClasses">
+        <div
+            v-if="horizontal"
+            class="field-label"
+            :class="[customClass, fieldLabelSize]"
+        >
+            <label
+                v-if="hasLabel"
+                :for="labelFor"
+                :class="customClass"
+                class="label"
+            >
+                <slot v-if="$slots.label" name="label" />
+                <template v-else>{{ label }}</template>
+            </label>
+        </div>
+        <template v-else>
+            <label
+                v-if="hasLabel"
+                :for="labelFor"
+                :class="customClass"
+                class="label"
+            >
+                <slot v-if="$slots.label" name="label" />
+                <template v-else>{{ label }}</template>
+            </label>
+        </template>
+        <b-field-body
+            v-if="horizontal"
+            :message="newMessage ? formattedMessage : ''"
+            :type="newType"
+        >
+            <slot />
+        </b-field-body>
+        <div v-else-if="hasInnerField" class="field-body">
+            <b-field
+                :addons="false"
+                :type="type"
+                :class="innerFieldClasses"
+            >
+                <slot />
+            </b-field>
+        </div>
+        <template v-else>
+            <slot />
+        </template>
+        <p
+            v-if="hasMessage && !horizontal"
+            class="help"
+            :class="newType"
+        >
+            <slot
+                v-if="$slots.message"
+                name="message"
+                :messages="formattedMessage"
+            />
+            <template v-else>
+                <template v-for="(mess, i) in formattedMessage">
+                    {{ mess }}
+                    <br :key="i" v-if="(i + 1) < formattedMessage.length">
+                </template>
+            </template>
+        </p>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import config from '../../utils/config'
+import { isTag } from '../../utils/helpers'
+import BFieldBody from './FieldBody.vue'
+
+/*
+ * Type of the `type` prop of `BField`.
+ *
+ * @public
+ */
+export type FieldTypeProp = string | Record<string, boolean>
+
+/*
+ * Type of individual message items in the `message` prop of `BField`.
+ *
+ * @public
+ */
+export type FieldMessagePropItem = string | Record<string, string>
+
+/*
+ * Type of the `message` prop of `BField`.
+ *
+ * @public
+ */
+export type FieldMessageProp = FieldMessagePropItem | FieldMessagePropItem[]
+
+const Field = defineComponent({
+    name: 'BField',
+    components: { BFieldBody },
+    provide() {
+        return {
+            BField: this
+        }
+    },
+    inject: {
+        parent: {
+            from: 'BField',
+            default: false
+        }
+    }, // Used internally only when using Field in Field
+    props: {
+        type: {
+            type: [String, Object] as PropType<FieldTypeProp>,
+            default: undefined
+        },
+        label: String,
+        labelFor: String,
+        message: {
+            type: [String, Array, Object] as PropType<FieldMessageProp>,
+            default: undefined
+        },
+        grouped: Boolean,
+        groupMultiline: Boolean,
+        position: String,
+        expanded: Boolean,
+        horizontal: Boolean,
+        addons: {
+            type: Boolean,
+            default: true
+        },
+        customClass: String,
+        labelPosition: {
+            type: String,
+            default: () => { return config.defaultFieldLabelPosition }
+        }
+    },
+    data() {
+        return {
+            newType: this.type as FieldTypeProp | null,
+            newMessage: this.message as FieldMessageProp | null,
+            fieldLabelSize: null as string | null,
+            numberInputClasses: [] as string[],
+            _isField: true // Used internally by Input and Select
+        }
+    },
+    computed: {
+        rootClasses() {
+            return [{
+                'is-expanded': this.expanded,
+                'is-horizontal': this.horizontal,
+                'is-floating-in-label': this.hasLabel && !this.horizontal &&
+                    this.labelPosition === 'inside',
+                'is-floating-label': this.hasLabel && !this.horizontal &&
+                    this.labelPosition === 'on-border'
+            },
+            this.numberInputClasses]
+        },
+        innerFieldClasses() {
+            return [
+                this.fieldType(),
+                this.newPosition,
+                {
+                    'is-grouped-multiline': this.groupMultiline
+                }
+            ]
+        },
+        hasInnerField() {
+            return this.grouped || this.groupMultiline || this.hasAddons()
+        },
+        /*
+        * Correct Bulma class for the side of the addon or group.
+        *
+        * This is not kept like the others (is-small, etc.),
+        * because since 'has-addons' is set automatically it
+        * doesn't make sense to teach users what addons are exactly.
+        */
+        newPosition() {
+            if (this.position === undefined) return
+
+            const position = this.position.split('-')
+            if (position.length < 1) return
+
+            const prefix = this.grouped
+                ? 'is-grouped-'
+                : 'has-addons-'
+
+            if (this.position) return prefix + position[1]
+            return undefined
+        },
+        /*
+        * Formatted message in case it's an array
+        * (each element is separated by <br> tag)
+        */
+        formattedMessage() {
+            const parentField = this.parent as InstanceType<typeof Field> | null
+            if (parentField && parentField.hasInnerField) {
+                return '' // Message will be displayed in parent field
+            }
+            if (typeof this.newMessage === 'string') {
+                return [this.newMessage]
+            }
+            const messages = []
+            if (Array.isArray(this.newMessage)) {
+                this.newMessage.forEach((message) => {
+                    if (typeof message === 'string') {
+                        messages.push(message)
+                    } else {
+                        for (const key in message) {
+                            if (message[key]) {
+                                messages.push(key)
+                            }
+                        }
+                    }
+                })
+            } else {
+                for (const key in this.newMessage) {
+                    if (this.newMessage[key]) {
+                        messages.push(key)
+                    }
+                }
+            }
+            return messages.filter((m) => !!m)
+        },
+        hasLabel() {
+            return this.label || this.$slots.label
+        },
+        hasMessage() {
+            const parentField = this.parent as InstanceType<typeof Field> | null
+            return ((!parentField || !parentField.hasInnerField) && this.newMessage) ||
+                this.$slots.message
+        }
+    },
+    watch: {
+        /*
+        * Set internal type when prop change.
+        */
+        type(value) {
+            this.newType = value
+        },
+
+        /*
+        * Set internal message when prop change.
+        */
+        message(value) {
+            // we deep comparison here becase an innner Field of another Field
+            // receives the message as a brand new array every time, so simple
+            // identity check won't work and will end up with infinite
+            // recursions
+            // https://github.com/buefy/buefy/issues/4018#issuecomment-1985026234
+            if (JSON.stringify(value) !== JSON.stringify(this.newMessage)) {
+                this.newMessage = value
+            }
+        },
+
+        /*
+        * Set parent message if we use Field in Field.
+        */
+        newMessage(value) {
+            const parentField = this.parent as InstanceType<typeof Field> | null
+            if (parentField && parentField.hasInnerField) {
+                if (!parentField.type) {
+                    parentField.newType = this.newType
+                }
+                if (!parentField.message) {
+                    parentField.newMessage = value
+                }
+            }
+        }
+    },
+    methods: {
+        /*
+        * Field has addons if there are more than one slot
+        * (element / component) in the Field.
+        * Or is grouped when prop is set.
+        * Is a method to be called when component re-render.
+        */
+        fieldType() {
+            if (this.grouped) return 'is-grouped'
+            if (this.hasAddons()) return 'has-addons'
+        },
+        hasAddons() {
+            let renderedNode = 0
+            if (this.$slots.default) {
+                renderedNode = this.$slots.default().reduce((i, node) => isTag(node) ? i + 1 : i, 0)
+            }
+            return (
+                renderedNode > 1 &&
+                this.addons &&
+                !this.horizontal
+            )
+        },
+        // called by a number input if it is a direct child.
+        wrapNumberinput({ controlsPosition, size }: { controlsPosition?: string, size?: string }) {
+            const classes = ['has-numberinput']
+            if (controlsPosition) {
+                classes.push(`has-numberinput-${controlsPosition}`)
+            }
+            if (size) {
+                classes.push(`has-numberinput-${size}`)
+            }
+            this.numberInputClasses = classes
+        }
+    },
+    mounted() {
+        if (this.horizontal) {
+            // Bulma docs: .is-normal for any .input or .button
+            const elements = this.$el.querySelectorAll('.input, .select, .button, .textarea, .b-slider')
+            if (elements.length > 0) {
+                this.fieldLabelSize = 'is-normal'
+            }
+        }
+    }
+})
+
+export default Field
+</script>