buefy 1.0.0 → 1.0.2

package/src/components/autocomplete/__snapshots__/Autocomplete.spec.ts.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BAutocomplete > render correctly 1`] = `
+"<div class="autocomplete control">
+  <div class="control is-clearfix"><input class="input" type="text" autocomplete="off" aria-autocomplete="list">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <transition-stub name="fade" appear="false" persisted="true" css="true">
+    <div class="dropdown-menu" style="display: none;">
+      <div class="dropdown-content" style="display: none;">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </transition-stub>
+</div>"
+`;

package/src/components/autocomplete/index.ts

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

package/src/components/breadcrumb/Breadcrumb.spec.ts

@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { shallowMount, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BBreadcrumb from '@components/breadcrumb/Breadcrumb.vue'
+
+describe('BBreadcrumb', () => {
+    let wrapper: VueWrapper<InstanceType<typeof BBreadcrumb>>
+
+    beforeEach(() => {
+        wrapper = shallowMount(BBreadcrumb)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BBreadcrumb')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should set align to right', () => {
+        wrapper = mount(BBreadcrumb, {
+            props: {
+                align: 'is-right'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-right')
+    })
+
+    it('should set separator to arrow', () => {
+        wrapper = mount(BBreadcrumb, {
+            props: {
+                separator: 'has-arrow-separator'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('has-arrow-separator')
+    })
+
+    it('should set size to large', () => {
+        wrapper = mount(BBreadcrumb, {
+            props: {
+                size: 'is-large'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-large')
+    })
+
+    it('computes breadcrumbClasses correctly', () => {
+        wrapper = mount(BBreadcrumb, {
+            props: {
+                align: 'is-left',
+                separator: 'has-dot-separator',
+                size: 'is-medium'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-left')
+        expect(wrapper.classes()).toContain('has-dot-separator')
+        expect(wrapper.classes()).toContain('is-medium')
+    })
+})

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,42 @@
+<template>
+    <nav :class="breadcrumbClasses">
+        <ul>
+            <slot />
+        </ul>
+    </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import config from '../../utils/config'
+
+export default defineComponent({
+    name: 'BBreadcrumb',
+    props: {
+        align: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbAlign
+            }
+        },
+        separator: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbSeparator
+            }
+        },
+        size: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbSize
+            }
+        }
+    },
+
+    computed: {
+        breadcrumbClasses() {
+            return ['breadcrumb', this.align, this.separator, this.size]
+        }
+    }
+})
+</script>

package/src/components/breadcrumb/BreadcrumbItem.spec.ts

@@ -0,0 +1,74 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BBreadcrumbItem from '@components/breadcrumb/BreadcrumbItem.vue'
+
+describe('BBreadcrumbItem', () => {
+    let wrapper: VueWrapper<InstanceType<typeof BBreadcrumbItem>>
+    beforeEach(() => {
+        wrapper = mount(BBreadcrumbItem, {
+            props: {
+                tag: 'a'
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should have a li tag', () => {
+        expect(wrapper.find('li').exists()).toBeTruthy()
+    })
+
+    describe('with fallthrough attributes', () => {
+        const attrs = {
+            class: 'fallthrough-class',
+            style: 'font-size: 2rem;',
+            id: 'fallthrough-id'
+        }
+
+        it('should bind class, style, and id to the root li if compatFallthrough is true (default)', async () => {
+            const wrapper = mount(BBreadcrumbItem, {
+                attrs,
+                props: {
+                    tag: 'a'
+                }
+            })
+
+            const root = wrapper.find('li')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const anchor = wrapper.find('a')
+            expect(anchor.classes(attrs.class)).toBe(false)
+            expect(anchor.attributes('style')).toBeUndefined()
+            expect(anchor.attributes('id')).toBeUndefined()
+        })
+
+        it('should bind class, style, and id to the underlying tag if compatFallthrough is false', async () => {
+            const wrapper = mount(BBreadcrumbItem, {
+                attrs,
+                props: {
+                    compatFallthrough: false,
+                    tag: 'a'
+                }
+            })
+
+            const root = wrapper.find('li')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const anchor = wrapper.find('a')
+            expect(anchor.classes(attrs.class)).toBe(true)
+            expect(anchor.attributes('style')).toBe(attrs.style)
+            expect(anchor.attributes('id')).toBe(attrs.id)
+        })
+    })
+})

package/src/components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,34 @@
+<template>
+    <li
+        :class="{ 'is-active': active }"
+        v-bind="rootAttrs"
+    >
+        <component
+            :is="tag"
+            v-bind="fallthroughAttrs"
+        >
+            <slot />
+        </component>
+    </li>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import config from '../../utils/config'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
+
+export default defineComponent({
+    name: 'BBreadcrumbItem',
+    mixins: [CompatFallthroughMixin],
+    props: {
+        tag: {
+            type: [String, Object],
+            default: () => {
+                return config.defaultBreadcrumbTag
+            }
+        },
+        active: Boolean
+    }
+})
+</script>

package/src/components/breadcrumb/__snapshots__/Breadcrumb.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BBreadcrumb > render correctly 1`] = `
+"<nav class="breadcrumb is-left is-medium">
+  <ul></ul>
+</nav>"
+`;

package/src/components/breadcrumb/__snapshots__/BreadcrumbItem.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BBreadcrumbItem > render correctly 1`] = `"<li class=""><a></a></li>"`;

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,19 @@
+import type { App } from 'vue'
+import Breadcrumb from './Breadcrumb.vue'
+import BreadcrumbItem from './BreadcrumbItem.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Breadcrumb)
+        registerComponent(Vue, BreadcrumbItem)
+    }
+}
+
+export default Plugin
+
+export {
+    Breadcrumb as BBreadcrumb,
+    BreadcrumbItem as BBreadcrumbItem
+}

package/src/components/button/Button.spec.ts

@@ -0,0 +1,117 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import BButton from '@components/button/Button.vue'
+import config, { setOptions } from '@utils/config'
+
+let wrapper: VueWrapper<InstanceType<typeof BButton>>
+
+describe('BButton', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BButton)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BButton')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('emit a click event', () => {
+        const click = vi.fn()
+        wrapper = shallowMount(BButton, {
+            props: {
+                onClick: click
+            }
+        })
+        wrapper.find('.button').trigger('click')
+        expect(click).toHaveBeenCalledTimes(1)
+    })
+
+    it('should show icon', () => {
+        wrapper = mount(BButton, {
+            props: {
+                iconLeft: 'plus'
+            }
+        })
+        expect(wrapper.find('.icon').exists()).toBe(true)
+    })
+
+    it('should be medium', async () => {
+        await wrapper.setProps({
+            size: 'is-medium'
+        })
+        expect(wrapper.classes()).toContain('is-medium')
+    })
+
+    it('should be small + icon', () => {
+        wrapper = mount(BButton, {
+            propsData: {
+                size: 'is-small',
+                iconLeft: 'plus'
+            }
+        })
+        expect(wrapper.classes()).toContain('is-small')
+        expect(wrapper.find('.icon').exists()).toBe(true)
+    })
+
+    it('should be large + icon', () => {
+        wrapper = mount(BButton, {
+            propsData: {
+                size: 'is-large',
+                iconLeft: 'plus'
+            }
+        })
+        expect(wrapper.classes()).toContain('is-large')
+        expect(wrapper.find('.icon').exists()).toBe(true)
+    })
+
+    it('should be rounded when default config set to true', async () => {
+        setOptions(Object.assign(config, {
+            defaultButtonRounded: true
+        }))
+        await wrapper.setProps({
+            rounded: config.defaultButtonRounded
+        })
+        expect(wrapper.classes()).toContain('is-rounded')
+    })
+
+    it('should set tag to "button" if disabled', async () => {
+        await wrapper.setProps({
+            tag: 'a'
+        })
+        expect(wrapper.vm.computedTag).toBe('a')
+
+        wrapper = shallowMount(BButton, {
+            attrs: {
+                disabled: true
+            }
+        })
+        expect(wrapper.vm.computedTag).toBe('button')
+    })
+
+    it('should set type attribute', async () => {
+        await wrapper.setProps({
+            nativeType: 'submit'
+        })
+        expect((wrapper.element as HTMLButtonElement).type).toBe('submit')
+    })
+
+    it("shouldn't set type attribute unless the tag is button", async () => {
+        await wrapper.setProps({
+            tag: 'a'
+        })
+        expect((wrapper.element as HTMLButtonElement).type).toBeFalsy()
+    })
+
+    it('should set type attribute if the tag is input', async () => {
+        await wrapper.setProps({
+            tag: 'input',
+            nativeType: 'submit'
+        })
+        expect((wrapper.element as HTMLButtonElement).type).toBe('submit')
+    })
+})

package/src/components/button/Button.vue

@@ -0,0 +1,112 @@
+<template>
+    <component
+        :is="computedTag"
+        class="button"
+        v-bind="$attrs"
+        :type="typeof computedTag === 'string' && ['button', 'input'].includes(computedTag)
+            ? nativeType
+            : undefined
+        "
+        :class="[size, type, {
+            'is-rounded': rounded,
+            'is-loading': loading,
+            'is-outlined': outlined,
+            'is-fullwidth': expanded,
+            'is-inverted': inverted,
+            'is-focused': focused,
+            'is-active': active,
+            'is-hovered': hovered,
+            'is-selected': selected
+        }]"
+    >
+        <b-icon
+            v-if="iconLeft"
+            :pack="iconPack"
+            :icon="iconLeft"
+            :size="iconSize"
+        />
+        <span v-if="label">{{ label }}</span>
+        <span v-else-if="$slots.default">
+            <slot />
+        </span>
+        <b-icon
+            v-if="iconRight"
+            :pack="iconPack"
+            :icon="iconRight"
+            :size="iconSize"
+        />
+    </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import BIcon from '../icon/Icon.vue'
+import config from '../../utils/config'
+
+// Allowed native types.
+const NATIVE_TYPES = [
+    'button',
+    'submit',
+    'reset'
+] as const
+export type ButtonNativeType = typeof NATIVE_TYPES[number]
+
+export default defineComponent({
+    name: 'BButton',
+    components: { BIcon },
+    inheritAttrs: false,
+    props: {
+        type: [String, Object],
+        size: String,
+        label: String,
+        iconPack: String,
+        iconLeft: String,
+        iconRight: String,
+        rounded: {
+            type: Boolean,
+            default: () => {
+                return config.defaultButtonRounded
+            }
+        },
+        loading: Boolean,
+        outlined: Boolean,
+        expanded: Boolean,
+        inverted: Boolean,
+        focused: Boolean,
+        active: Boolean,
+        hovered: Boolean,
+        selected: Boolean,
+        nativeType: {
+            type: String as PropType<ButtonNativeType>,
+            default: 'button',
+            validator: (value: unknown) => {
+                return NATIVE_TYPES.indexOf(value as ButtonNativeType) >= 0
+            }
+        },
+        tag: {
+            type: [String, Object],
+            default: 'button',
+            validator: (value: unknown) => {
+                return typeof value === 'object' || config.defaultLinkTags.indexOf(value as string) >= 0
+            }
+        }
+    },
+    computed: {
+        computedTag() {
+            if (this.$attrs.disabled !== undefined && this.$attrs.disabled !== false) {
+                return 'button'
+            }
+            return this.tag
+        },
+        iconSize() {
+            if (!this.size || this.size === 'is-medium') {
+                return 'is-small'
+            } else if (this.size === 'is-large') {
+                return 'is-medium'
+            }
+            return this.size
+        }
+    }
+})
+</script>

package/src/components/button/__snapshots__/Button.spec.ts.snap

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

package/src/components/button/index.ts

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