buefy 3.0.5 → 3.0.6

package/dist/esm/toast.js

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createCommentVNode, vShow, createApp, h, inject } from 'vue';
-import { c as config } from './config-CKuo-p6e.js';
-import { N as NoticeMixin } from './NoticeMixin-ByNlva3T.js';
+import { c as config } from './config-f4Dyy8TN.js';
+import { N as NoticeMixin } from './NoticeMixin-TQEF1Kx6.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { getComponentFromVNode, copyAppContext } from './helpers.js';
 import { r as registerComponentProgrammatic } from './plugins-1tLsuIZF.js';

package/dist/esm/tooltip.js

@@ -1,7 +1,7 @@
-import { T as Tooltip } from './Tooltip-Ds5fe3ZP.js';
+import { T as Tooltip } from './Tooltip-BnzQFdnQ.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
-import './config-CKuo-p6e.js';
+import './config-f4Dyy8TN.js';
 import './helpers.js';
 import './_plugin-vue_export-helper-OJRSZE6i.js';
 

package/dist/esm/upload.js

@@ -1,10 +1,10 @@
 import { defineComponent, openBlock, createElementBlock, mergeProps, renderSlot, withModifiers, normalizeClass, createElementVNode } from 'vue';
-import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
-import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.js';
+import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-LfFRwwlz.js';
+import { F as FormElementMixin } from './FormElementMixin-CKI7b4I4.js';
 import { F as File } from './ssr-C7yEpGLm.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
-import './config-CKuo-p6e.js';
+import './config-f4Dyy8TN.js';
 
 const Upload$1 = defineComponent({
   name: "BUpload",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Lightweight UI components for Vue.js (v3) based on Bulma",
   "keywords": [
     "vuejs",

package/src/components/checkbox/Checkbox.spec.ts

@@ -1,5 +1,3 @@
-import { existsSync, readFileSync } from 'node:fs'
-import { join } from 'node:path'
 import { shallowMount } from '@vue/test-utils'
 import type { VueWrapper } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -44,31 +42,63 @@ describe('BCheckbox', () => {
         ).toHaveBeenCalled()
     })
 
-    it('generates svg checkmark images from concrete colors in checkbox styles', () => {
-        const scssPathCandidates = [
-            join(process.cwd(), 'src/scss/components/_checkbox.scss'),
-            join(process.cwd(), 'buefy/src/scss/components/_checkbox.scss')
-        ]
-        const scssPath = scssPathCandidates.find((candidate) =>
-            existsSync(candidate)
-        )
+    it('renders no SVG when unchecked', () => {
+        const w = shallowMount(BCheckbox)
+        expect(w.find('.check svg').exists()).toBe(false)
+    })
+
+    it('renders inline SVG checkmark when checked (boolean modelValue)', async () => {
+        const w = shallowMount(BCheckbox, {
+            props: { modelValue: true }
+        })
+        const svg = w.find('.check svg')
+        expect(svg.exists()).toBe(true)
+        const path = svg.find('path')
+        expect(path.attributes('fill')).toBe('currentColor')
+        expect(path.attributes('d')).toBeTruthy()
+        // Uses the 1x1 normalized viewBox for the checkmark
+        expect(svg.attributes('viewBox')).toBe('0 0 1 1')
+    })
+
+    it('renders inline SVG checkmark when checked (array modelValue)', async () => {
+        const w = shallowMount(BCheckbox, {
+            props: { modelValue: ['a', 'b'], nativeValue: 'a' }
+        })
+        expect(w.find('.check svg').exists()).toBe(true)
+    })
 
-        expect(scssPath).toBeTruthy()
-        if (!scssPath) {
-            throw new Error(
-                'Unable to locate _checkbox.scss for regression assertion'
-            )
-        }
-        const source = readFileSync(scssPath, 'utf8')
+    it('renders no SVG when value not in array', () => {
+        const w = shallowMount(BCheckbox, {
+            props: { modelValue: ['b'], nativeValue: 'a' }
+        })
+        expect(w.find('.check svg').exists()).toBe(false)
+    })
+
+    it('renders indeterminate SVG path when indeterminate prop is true', () => {
+        const w = shallowMount(BCheckbox, {
+            props: { indeterminate: true }
+        })
+        const svg = w.find('.check svg')
+        expect(svg.exists()).toBe(true)
+        // Indeterminate and checkmark paths are different
+        const indeterminatePath = w.vm.checkmarkAlias.path
+        expect(indeterminatePath).toContain('0.15') // rect-as-path signature
+    })
+
+    it('checkmark uses different path for indeterminate vs checked', () => {
+        const checked = shallowMount(BCheckbox, { props: { modelValue: true } })
+        const indeterminate = shallowMount(BCheckbox, { props: { indeterminate: true } })
+        expect(checked.vm.checkmarkAlias.path).not.toBe(indeterminate.vm.checkmarkAlias.path)
+    })
 
-        // Regression: CSS variables inside data-uri SVG are not resolved by browsers.
-        expect(source).toContain('fn.checkmark($checkbox-checkmark-color)')
-        expect(source).toContain('fn.indeterminate($checkbox-checkmark-color)')
-        expect(source).not.toContain(
-            'fn.checkmark(cv.getVar("checkbox-checkmark-color"))'
-        )
-        expect(source).not.toContain(
-            'fn.indeterminate(cv.getVar("checkbox-checkmark-color"))'
-        )
+    it('SVG color is controlled via currentColor (not embedded in SVG data)', () => {
+        // Regression: previously _checkbox.scss embedded SVG colors as data-URIs;
+        // color could not be changed at runtime. Now SVG uses fill="currentColor"
+        // so the CSS `color` property on the parent drives the icon color.
+        const w = shallowMount(BCheckbox, { props: { modelValue: true } })
+        const path = w.find('.check svg path')
+        expect(path.attributes('fill')).toBe('currentColor')
+        // No inline fill color embedded in the path data
+        expect(path.attributes('d')).not.toContain('fill:')
     })
 })

package/src/components/checkbox/Checkbox.vue

@@ -27,7 +27,16 @@
             :false-value="falseValue"
             :aria-labelledby="ariaLabelledby"
         >
-        <span class="check" :class="type" />
+        <span class="check" :class="type">
+            <svg
+                v-if="isChecked || indeterminate"
+                :viewBox="checkmarkAlias.viewBox || '0 0 1 1'"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+            >
+                <path fill="currentColor" :d="checkmarkAlias.path" />
+            </svg>
+        </span>
         <span :id="ariaLabelledby" class="control-label"><slot /></span>
     </label>
 </template>
@@ -35,6 +44,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import CheckRadioMixin from '../../utils/CheckRadioMixin'
+import { resolveAlias } from '../../utils/iconAliases'
+import type { SvgIconAlias } from '../../utils/config'
 
 export default defineComponent({
     name: 'BCheckbox',
@@ -58,6 +69,19 @@ export default defineComponent({
             type: String,
             default: ''
         }
+    },
+    computed: {
+        isChecked(): boolean {
+            const val = this.computedValue
+            if (Array.isArray(val)) {
+                return val.includes(this.nativeValue)
+            }
+            return val === this.trueValue
+        },
+        checkmarkAlias(): SvgIconAlias {
+            const key = this.indeterminate ? 'checkboxIndeterminate' : 'checkboxOn'
+            return resolveAlias(key) as SvgIconAlias
+        }
     }
 })
 </script>

package/src/components/checkbox/__snapshots__/Checkbox.spec.ts.snap

@@ -4,6 +4,6 @@ exports[`BCheckbox > render correctly 1`] = `
 "<label class="b-checkbox checkbox">
   <!-- Checkbox needs to listen for a space event instead of a just a
              click and enter event so that that using the keyboard spacebar will also
-             trigger the checkbox change in the b-table --><input id="" type="checkbox" autocomplete="on" true-value="true" false-value="false" value="false"><span class="check"></span><span class="control-label"></span>
+             trigger the checkbox change in the b-table --><input id="" type="checkbox" autocomplete="on" true-value="true" false-value="false" value="false"><span class="check"><!--v-if--></span><span class="control-label"></span>
 </label>"
 `;

package/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap

@@ -16,9 +16,9 @@ exports[`BDatepicker > render correctly 1`] = `
             <div>
               <header class="datepicker-header">
                 <div class="pagination field is-centered"><a class="pagination-previous" role="button" href="#">
-                    <b-icon-stub icon="chevron-left" type="is-primary is-clickable" both="true"></b-icon-stub>
+                    <b-icon-stub type="is-primary is-clickable" icon="chevron-left" both="true"></b-icon-stub>
                   </a><a class="pagination-next" role="button" href="#">
-                    <b-icon-stub icon="chevron-right" type="is-primary is-clickable" both="true"></b-icon-stub>
+                    <b-icon-stub type="is-primary is-clickable" icon="chevron-right" both="true"></b-icon-stub>
                   </a>
                   <div class="pagination-list">
                     <div class="field">

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

@@ -1,6 +1,8 @@
 import { shallowMount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import BIcon from '@components/icon/Icon.vue'
+import type { ComponentIconAlias } from '@utils/config'
+import config from '@utils/config'
 
 describe('BIcon', () => {
     it('render correctly', () => {
@@ -139,4 +141,69 @@ describe('BIcon', () => {
 
         expect(wrapper.find('i').classes()).toContain('foo-bar')
     })
+
+    it('renders inline SVG when alias resolves to a SvgIconAlias', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'chevronLeft' }
+        })
+
+        const svg = wrapper.find('svg')
+        expect(svg.exists()).toBe(true)
+        expect(svg.attributes('aria-hidden')).toBe('true')
+        const path = svg.find('path')
+        expect(path.exists()).toBe(true)
+        expect(path.attributes('fill')).toBe('currentColor')
+        expect(path.attributes('d')).toBeTruthy()
+    })
+
+    it('renders viewBox from the alias on the SVG element', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'checkboxOn' }
+        })
+
+        expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 1 1')
+    })
+
+    it('falls back to 0 0 24 24 viewBox when alias has none', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'chevronLeft' }
+        })
+
+        expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 24 24')
+    })
+
+    it('renders a component alias (ComponentIconAlias)', () => {
+        const FakeIcon = { name: 'FakeIcon', template: '<span />' }
+        const alias: ComponentIconAlias = {
+            type: 'component',
+            component: FakeIcon,
+            icon: ['fas', 'check']
+        }
+
+        const original = config.iconAliases
+        config.iconAliases = { customAlias: alias }
+
+        const wrapper = shallowMount(BIcon, {
+            props: { alias: 'customAlias' }
+        })
+
+        const fakeIcon = wrapper.findComponent(FakeIcon)
+        expect(fakeIcon.exists()).toBe(true)
+
+        config.iconAliases = original
+    })
+
+    it('alias prop takes precedence over icon/pack when both are provided', () => {
+        const wrapper = shallowMount(BIcon, {
+            props: {
+                alias: 'chevronLeft',
+                icon: 'eye',
+                pack: 'mdi'
+            }
+        })
+
+        // Should render SVG (from alias), not <i> (from pack)
+        expect(wrapper.find('svg').exists()).toBe(true)
+        expect(wrapper.find('i').exists()).toBe(false)
+    })
 })

package/src/components/icon/Icon.vue

@@ -1,10 +1,24 @@
 <template>
     <span class="icon" :class="[newType, size]">
+        <svg
+            v-if="isSvgAlias"
+            :viewBox="resolvedAliasSvg.viewBox || '0 0 24 24'"
+            xmlns="http://www.w3.org/2000/svg"
+            :class="customClass"
+            aria-hidden="true"
+        >
+            <path fill="currentColor" :d="resolvedAliasSvg.path" />
+        </svg>
+        <component
+            v-else-if="isComponentAlias"
+            :is="resolvedAliasComponent.component"
+            :icon="resolvedAliasComponent.icon"
+            :class="customClass"
+        />
         <i
-            v-if="!useIconComponent"
+            v-else-if="!useIconComponent"
             :class="[newPack, newIcon, newCustomSize, customClass]"
         />
-
         <component
             v-else
             :is="useIconComponent"
@@ -18,8 +32,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import config from '../../utils/config'
+import config, { type SvgIconAlias, type ComponentIconAlias } from '../../utils/config'
 import getIcons, { type InternalIconPack } from '../../utils/icons'
+import { resolveAlias } from '../../utils/iconAliases'
 
 export default defineComponent({
     name: 'BIcon',
@@ -29,14 +44,34 @@ export default defineComponent({
         pack: String,
         icon: {
             type: String,
-            required: true
+            required: false,
+            default: undefined
         },
+        /** Key into IconAliases (e.g. "chevronLeft"). Takes precedence over icon/pack. */
+        alias: String,
         size: String,
         customSize: String,
         customClass: String,
         both: Boolean // This is used internally to show both MDI and FA icon
     },
     computed: {
+        resolvedAlias() {
+            if (!this.alias) return null
+            return resolveAlias(this.alias) ?? null
+        },
+        isSvgAlias(): boolean {
+            return this.resolvedAlias?.type === 'svg'
+        },
+        isComponentAlias(): boolean {
+            return this.resolvedAlias?.type === 'component'
+        },
+        // Typed accessors used in the template
+        resolvedAliasSvg(): SvgIconAlias {
+            return this.resolvedAlias as SvgIconAlias
+        },
+        resolvedAliasComponent(): ComponentIconAlias {
+            return this.resolvedAlias as ComponentIconAlias
+        },
         iconConfig() {
             const allIcons = getIcons()
             return allIcons[this.newPack]
@@ -53,7 +88,7 @@ export default defineComponent({
         * internal icons are always MDI.
         */
         newIcon() {
-            return `${this.iconPrefix}${this.getEquivalentIconOf(this.icon)}`
+            return `${this.iconPrefix}${this.getEquivalentIconOf(this.icon ?? '')}`
         },
         newPack() {
             return this.pack || config.defaultIconPack

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

@@ -1,3 +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>"`;
+exports[`BIcon > render correctly 1`] = `"<span class="icon"><i class="mdi mdi- mdi-24px"></i></span>"`;

package/src/components/icon/index.ts

@@ -15,3 +15,13 @@ export default Plugin
 export {
     Icon as BIcon
 }
+
+export type {
+    IconAlias,
+    SvgIconAlias,
+    ComponentIconAlias,
+    CssIconAlias,
+    IconAliases
+} from '../../utils/config'
+
+export { resolveAlias, getIconAliases } from '../../utils/iconAliases'

package/src/components/table/__snapshots__/TableMobileSort.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`BTableMobileSort > render correctly 1`] = `
   <div class="field has-addons">
     <b-select-stub modelvalue="-1" multiple="false" expanded=""></b-select-stub>
     <div class="control"><button class="button is-primary">
-        <b-icon-stub icon="arrow-up" size="is-small" both="true" class="is-desc"></b-icon-stub>
+        <b-icon-stub size="is-small" icon="arrow-up" both="true" class="is-desc"></b-icon-stub>
       </button></div>
   </div>
 </div>"

package/src/scss/components/_checkbox.scss

@@ -4,7 +4,6 @@
 @use "bulma/sass/utilities/mixins" as mixins;
 @use "bulma/sass/utilities/controls" as controls;
 @use "bulma/sass/form/shared";
-@use "../utils/functions" as fn;
 @use "sass:list";
 
 $checkbox-active-background-color: cv.getVar('primary') !default;
@@ -22,7 +21,7 @@ $checkbox-colors: shared.$form-colors !default;
   @include cv.register-vars(
     (
     "checkbox-active-background-color": #{$checkbox-active-background-color},
-    
+
     "checkbox-shadow": #{shared.$input-shadow},
 
     "checkbox-background-color": #{$checkbox-background},
@@ -31,24 +30,18 @@ $checkbox-colors: shared.$form-colors !default;
     "checkbox-border-width": #{$checkbox-border-width},
     "checkbox-checkmark-color": #{$checkbox-checkmark-color},
     "checkbox-size": #{$checkbox-size},
-    "checkbox-checkmark-image": #{url(fn.checkmark($checkbox-checkmark-color))},
-    "checkbox-indeterminate-image":  #{url(fn.indeterminate($checkbox-checkmark-color))} 
     )
   );
 
   &.checkbox input[type=checkbox] + .check {
 
     @each $name, $pair in $checkbox-colors {
-      $color-invert: cv.getVar($name, "", "-invert");
-
       &.#{iv.$class-prefix}is-#{$name} {
         @include cv.register-vars(
           (
             "checkbox-active-background-color": #{cv.getVar($name)},
             "checkbox-border-color": #{cv.getVar($name)},
-            "checkbox-checkmark-color": #{$color-invert},
-            "checkbox-checkmark-image": #{url(fn.checkmark($color-invert))},
-            "checkbox-indeterminate-image":  #{url(fn.indeterminate($color-invert))} 
+            "checkbox-checkmark-color": #{cv.getVar($name, "", "-100")},
           )
         );
       }
@@ -66,7 +59,7 @@ $checkbox-colors: shared.$form-colors !default;
     outline: none;
     display: inline-flex;
     align-items: center;
-    
+
     &:not(.button) {
       margin-inline-end: 0.5em;
       & + .checkbox:last-child {
@@ -82,27 +75,32 @@ $checkbox-colors: shared.$form-colors !default;
       z-index: -1;
 
       + .check {
-        // @extend %input;
-
         padding: 0;
         background: cv.getVar("checkbox-background-color");
         border-style: solid;
         border-width: cv.getVar('checkbox-border-width');
-        // border-color: cv.getVar("checkbox-border-color");
         box-shadow: cv.getVar('checkbox-shadow');
+        position: relative;
 
         width: cv.getVar('checkbox-size');
         height: cv.getVar('checkbox-size');
         flex-shrink: 0;
         border-radius: cv.getVar('checkbox-border-radius');
         transition: background cv.getVar('speed-slow') cv.getVar('easing');
+
+        svg {
+          display: block;
+          width: 100%;
+          height: 100%;
+          color: cv.getVar('checkbox-checkmark-color');
+        }
       }
       &:checked + .check {
-        background: cv.getVar('checkbox-active-background-color') cv.getVar('checkbox-checkmark-image') no-repeat center center;
+        background: cv.getVar('checkbox-active-background-color');
         border-color: cv.getVar("checkbox-border-color");
       }
       &:indeterminate + .check {
-        background: cv.getVar('checkbox-active-background-color') cv.getVar('checkbox-indeterminate-image') no-repeat center center;
+        background: cv.getVar('checkbox-active-background-color');
         border-color: cv.getVar('checkbox-border-color');
       }
       &:focus {

package/src/utils/config.ts

@@ -74,6 +74,101 @@ export interface IconPack {
     iconPrefix?: string
 }
 
+/*
+ * Icon alias that renders an inline SVG `<path>` element.
+ * Color is controlled via CSS `color` / `fill="currentColor"`.
+ *
+ * @public
+ */
+export type SvgIconAlias = {
+    type: 'svg'
+    /* SVG path `d` attribute. */
+    path: string
+    /* SVG viewBox. Defaults to "0 0 24 24". */
+    viewBox?: string
+}
+
+/*
+ * Icon alias that delegates rendering to a Vue component (e.g. FontAwesomeIcon).
+ *
+ * @public
+ */
+export type ComponentIconAlias = {
+    type: 'component'
+    /* The Vue component to render. */
+    component: string | object
+    /*
+     * Passed as the `:icon` prop to the component.
+     * Typed as `any` because it is forwarded verbatim to an external component
+     * (e.g. `['fas', 'check']` for FontAwesomeIcon), whose prop type is opaque to Buefy.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon: any
+}
+
+/*
+ * Icon alias that uses the existing CSS-class pack approach.
+ *
+ * @public
+ */
+export type CssIconAlias = {
+    type: 'css'
+    /* Icon pack name (e.g. "mdi", "fas"). */
+    pack: string
+    /* Icon name within the pack. */
+    icon: string
+}
+
+/*
+ * A named icon alias — one of three rendering modes.
+ *
+ * @public
+ */
+export type IconAlias = SvgIconAlias | ComponentIconAlias | CssIconAlias
+
+/*
+ * Named icon aliases used by Buefy components.
+ * Override any entry via the `iconAliases` config option.
+ *
+ * @public
+ */
+export interface IconAliases {
+    /* Checked checkbox mark. */
+    checkboxOn: IconAlias
+    /* Indeterminate checkbox mark. */
+    checkboxIndeterminate: IconAlias
+    /* Pagination / dropdown previous/left chevron. */
+    chevronLeft: IconAlias
+    /* Pagination / dropdown next/right chevron. */
+    chevronRight: IconAlias
+    /* Downward chevron. */
+    chevronDown: IconAlias
+    /* Upward chevron. */
+    chevronUp: IconAlias
+    /* Dropdown open indicator. */
+    menuDown: IconAlias
+    /* Dropdown close indicator. */
+    menuUp: IconAlias
+    /* Success status icon. */
+    check: IconAlias
+    /* Danger / error status icon. */
+    alertCircle: IconAlias
+    /* Warning status icon. */
+    alert: IconAlias
+    /* Info status icon. */
+    information: IconAlias
+    /* Close / dismiss icon. */
+    close: IconAlias
+    /* Close circle icon. */
+    closeCircle: IconAlias
+    /* Eye / show-password icon. */
+    eye: IconAlias
+    /* Eye-off / hide-password icon. */
+    eyeOff: IconAlias
+    /* Additional user-defined aliases. */
+    [key: string]: IconAlias
+}
+
 /*
  * Buefy configuration.
  *
@@ -512,7 +607,13 @@ export interface BuefyConfig {
      * Custom icon packs.
      * No custom icon packs by default.
      */
-    customIconPacks?: Record<string, IconPack> | null
+    customIconPacks?: Record<string, IconPack> | null,
+    /*
+     * Named icon aliases.
+     * Overrides specific entries in the default alias set.
+     * No overrides by default.
+     */
+    iconAliases?: Partial<IconAliases> | null
 }
 
 let config: BuefyConfig = {
@@ -600,7 +701,8 @@ let config: BuefyConfig = {
     defaultBreadcrumbAlign: 'is-left',
     defaultBreadcrumbSeparator: '',
     defaultBreadcrumbSize: 'is-medium',
-    customIconPacks: null
+    customIconPacks: null,
+    iconAliases: null
 }
 
 /*