buefy 1.0.0 → 1.0.2

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

@@ -0,0 +1,96 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BFieldBody from '@components/field/FieldBody.vue'
+import BField from '@components/field/Field.vue'
+import BInput from '@components/input/Input.vue'
+
+describe('BFieldBody', () => {
+    it('is called', () => {
+        const wrapper = shallowMount(BFieldBody, {
+            slots: {
+                default: 'content'
+            }
+        })
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BFieldBody')
+    })
+
+    it('render correctly', () => {
+        const wrapper = shallowMount(BFieldBody, {
+            slots: {
+                default: 'content'
+            }
+        })
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render the text when the child is a text', () => {
+        const text = 'text'
+        const wrapper = shallowMount(BFieldBody, {
+            slots: {
+                default: text
+            }
+        })
+        expect(wrapper.text()).toBe(text)
+    })
+
+    describe('when child is an element', () => {
+        it('should wrap the element in a b-field', () => {
+            const wrapper = mount(BFieldBody, {
+                slots: {
+                    default: BInput
+                },
+                global: {
+                    components: {
+                        'b-field': BField
+                    }
+                }
+            })
+            expect(wrapper.findComponent(BField).exists()).toBe(true)
+        })
+
+        it('should pass type prop to the b-field element', () => {
+            const type = 'is-success'
+            const wrapper = mount(BFieldBody, {
+                slots: {
+                    default: BInput
+                },
+                props: {
+                    type
+                },
+                global: {
+                    components: {
+                        'b-field': BField
+                    }
+                }
+            })
+            expect(wrapper.findComponent(BField).find('input').classes()).toContain(type)
+        })
+
+        it('should render the message when message prop is passed', () => {
+            const message = 'some message yo'
+            const type = 'is-danger'
+            const wrapper = mount(BFieldBody, {
+                slots: {
+                    default: BInput
+                },
+                props: {
+                    type,
+                    message
+                },
+                global: {
+                    components: {
+                        'b-field': BField
+                    }
+                }
+            })
+            expect(wrapper.find('p.help').classes()).toContain(type)
+            expect(wrapper.find('p.help').text()).toBe(message)
+        })
+    })
+
+    it('should be able to be instantiated without the default slot', () => {
+        const wrapper = shallowMount(BFieldBody)
+        expect(wrapper.find('.field-body').exists()).toBe(true)
+    })
+})

package/src/components/field/FieldBody.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import {
+    Comment,
+    Fragment,
+    Text,
+    defineComponent,
+    h as createElement,
+    resolveComponent
+} from 'vue'
+import type { ComponentPublicInstance, VNode } from 'vue'
+
+export default defineComponent({
+    name: 'BFieldBody',
+    inject: {
+        parent: {
+            from: 'BField',
+            default: null
+        }
+    },
+    props: {
+        message: {
+            type: [String, Array]
+        },
+        type: {
+            type: [String, Object]
+        }
+    },
+    render() {
+        let first = true
+        // wraps the default slot (children) with `b-field`.
+        // children may be given in a fragment and should be extracted.
+        let children = typeof this.$slots.default === 'function'
+            ? this.$slots.default()
+            : this.$slots.default
+        if (children != null && children.length === 1 && children[0].type === Fragment) {
+            // is assuming VNode[] safe?
+            children = children[0].children as VNode[]
+        }
+        return createElement(
+            'div',
+            { class: 'field-body' },
+            {
+                default: () => {
+                    return children != null && children.map((element) => {
+                        // skip returns(?) and comments
+                        if (element.type === Comment || element.type === Text) {
+                            return element
+                        }
+                        let message
+                        if (first) {
+                            message = this.message
+                            first = false
+                        }
+                        // Options API does not seem to provide a way to type injected values
+                        const parentField = this.parent as (ComponentPublicInstance | null)
+                        return createElement(
+                            // parentField.$.type is supposed to be BField
+                            // it falls back to `resolveComponent('b-field')`
+                            // but won't work unless `BField` is globally registered
+                            // should not be a problem as long as `BFieldBody` is properly used
+                            parentField ? parentField.$.type : resolveComponent('b-field'),
+                            {
+                                type: this.type,
+                                message
+                            },
+                            () => element
+                        )
+                    })
+                }
+            }
+        )
+    }
+})
+</script>

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

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BField > render correctly 1`] = `
+"<div class="field">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;

package/src/components/field/__snapshots__/FieldBody.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BFieldBody > render correctly 1`] = `"<div class="field-body">content</div>"`;

package/src/components/field/index.ts

@@ -0,0 +1,16 @@
+import type { App } from 'vue'
+import Field from './Field.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Field)
+    }
+}
+
+export default Plugin
+
+export {
+    Field as BField
+}

package/src/components/icon/Icon.spec.ts

@@ -0,0 +1,142 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BIcon from '@components/icon/Icon.vue'
+
+describe('BIcon', () => {
+    it('render correctly', () => {
+        const wrapper = shallowMount(BIcon)
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('is vue instance', () => {
+        const wrapper = shallowMount(BIcon)
+
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BIcon')
+    })
+
+    it('render icon when icon property is passed', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: { icon: 'eye' }
+        })
+
+        expect(wrapper.classes()).toContain('icon')
+        const classes = wrapper.find('i').classes()
+        expect(classes).toContain('mdi')
+        expect(classes).toContain('mdi-eye')
+        expect(classes).toContain('mdi-24px')
+    })
+
+    it('render a colored icon when type is passed', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                icon: 'eye',
+                type: 'is-primary'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('has-text-primary')
+    })
+
+    it('returns correct color for newType when type is passed as an object', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                icon: 'eye',
+                type: { 'is-primary': true }
+            }
+        })
+
+        expect(wrapper.vm.newType).toEqual('has-text-primary')
+    })
+
+    it('render icon package correctly when the pack property is is passed.', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                icon: 'eye',
+                pack: 'fa'
+            }
+        })
+
+        expect(wrapper.find('i').classes()).toContain('fa-eye')
+    })
+
+    it('use both packages when the both property is is passed', async () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                icon: 'eye',
+                both: true
+            }
+        })
+
+        expect(wrapper.find('i').classes()).toContain('mdi-eye')
+        await wrapper.setProps({ pack: 'fa' })
+
+        const equivalentIcons: Record<string, string> = {
+            check: 'check',
+            information: 'info-circle',
+            'check-circle': 'check-circle',
+            alert: 'exclamation-triangle',
+            'alert-circle': 'exclamation-circle',
+            'arrow-up': 'arrow-up',
+            'chevron-right': 'angle-right',
+            'chevron-left': 'angle-left',
+            'chevron-down': 'angle-down',
+            eye: 'eye',
+            'eye-off': 'eye-slash',
+            'menu-down': 'caret-down',
+            'menu-up': 'caret-up',
+            other: 'other'
+        }
+
+        const expectEquivalentIcon = async (icon: string, expected: string) => {
+            await wrapper.setProps({ icon })
+            expect(wrapper.find('i').classes()).toContain(`fa-${expected}`)
+        }
+
+        for (const icon in equivalentIcons) {
+            await expectEquivalentIcon(icon, equivalentIcons[icon])
+        }
+    })
+
+    it('display size when size propery is passed', async () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                icon: 'eye'
+            }
+        })
+
+        expect(wrapper.find('i').classes()).toContain('mdi-24px')
+        await wrapper.setProps({ size: 'is-small' })
+        expect(wrapper.find('i').classes()).toContain('mdi')
+        expect(wrapper.find('i').classes()).toContain('mdi-eye')
+        await wrapper.setProps({ size: 'is-medium' })
+        expect(wrapper.find('i').classes()).toContain('mdi-36px')
+        await wrapper.setProps({ size: 'is-large' })
+        expect(wrapper.find('i').classes()).toContain('mdi-48px')
+    })
+
+    it('overrides icon font size when customSize property is passed', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                icon: 'eye',
+                pack: 'fa',
+                customSize: 'fa-2x'
+            }
+        })
+
+        expect(wrapper.find('i').classes()).toContain('fa')
+        expect(wrapper.find('i').classes()).toContain('fa-2x')
+    })
+
+    it('render custom classes when customClass property is passed', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                icon: 'eye',
+                customClass: 'foo-bar'
+            }
+        })
+
+        expect(wrapper.find('i').classes()).toContain('foo-bar')
+    })
+})

package/src/components/icon/Icon.vue

@@ -0,0 +1,120 @@
+<template>
+    <span class="icon" :class="[newType, size]">
+        <i
+            v-if="!useIconComponent"
+            :class="[newPack, newIcon, newCustomSize, customClass]"
+        />
+
+        <component
+            v-else
+            :is="useIconComponent"
+            :icon="[newPack, newIcon]"
+            :size="newCustomSize"
+            :class="[customClass]"
+        />
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import config from '../../utils/config'
+import getIcons, { type InternalIconPack } from '../../utils/icons'
+
+export default defineComponent({
+    name: 'BIcon',
+    props: {
+        type: [String, Object],
+        component: String,
+        pack: String,
+        icon: {
+            type: String,
+            required: true
+        },
+        size: String,
+        customSize: String,
+        customClass: String,
+        both: Boolean // This is used internally to show both MDI and FA icon
+    },
+    computed: {
+        iconConfig() {
+            const allIcons = getIcons()
+            return allIcons[this.newPack]
+        },
+        iconPrefix() {
+            if (this.iconConfig && this.iconConfig.iconPrefix) {
+                return this.iconConfig.iconPrefix
+            }
+            return ''
+        },
+        /*
+        * Internal icon name based on the pack.
+        * If pack is 'fa', gets the equivalent FA icon name of the MDI,
+        * internal icons are always MDI.
+        */
+        newIcon() {
+            return `${this.iconPrefix}${this.getEquivalentIconOf(this.icon)}`
+        },
+        newPack() {
+            return this.pack || config.defaultIconPack
+        },
+        newType() {
+            if (!this.type) return
+
+            let splitType: string[] = []
+            if (typeof this.type === 'string') {
+                splitType = this.type.split('-')
+            } else {
+                for (const key in this.type) {
+                    if (this.type[key]) {
+                        splitType = key.split('-')
+                        break
+                    }
+                }
+            }
+            if (splitType.length <= 1) return
+
+            const [, ...type] = splitType
+            return `has-text-${type.join('-')}`
+        },
+        newCustomSize() {
+            return this.customSize || this.customSizeByPack
+        },
+        customSizeByPack() {
+            if (this.iconConfig && this.iconConfig.sizes) {
+                if (this.size && this.iconConfig.sizes[this.size] !== undefined) {
+                    return this.iconConfig.sizes[this.size]
+                } else if (this.iconConfig.sizes.default) {
+                    return this.iconConfig.sizes.default
+                }
+            }
+            return null
+        },
+        useIconComponent() {
+            return this.component || config.defaultIconComponent
+        }
+    },
+    methods: {
+        /*
+        * Equivalent icon name of the MDI.
+        */
+        getEquivalentIconOf(value: string) {
+            // Only transform the class if the both prop is set to true
+            if (!this.both) {
+                return value
+            }
+
+            if (this.iconConfig == null) {
+                return value
+            }
+            const maybeInternal = this.iconConfig as Partial<InternalIconPack>
+            if (maybeInternal &&
+                maybeInternal.internalIcons &&
+                maybeInternal.internalIcons[value]) {
+                return maybeInternal.internalIcons[value]
+            }
+            return value
+        }
+    }
+})
+</script>

package/src/components/icon/__snapshots__/Icon.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BIcon > render correctly 1`] = `"<span class="icon"><i class="mdi mdi-undefined mdi-24px"></i></span>"`;

package/src/components/icon/index.ts

@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+
+import Icon from './Icon.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Icon)
+    }
+}
+
+export default Plugin
+
+export {
+    Icon as BIcon
+}