buefy 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Lightweight UI components for Vue.js (v3) based on Bulma",
   "keywords": [
     "vuejs",
@@ -49,7 +49,10 @@
     "build": "rimraf dist && npm run build:js && npm run build:scss && npm run build:dts",
     "build:js": "rollup -c && rollup -c --environment MINIFY",
     "build:dts": "rimraf temp-dts && vue-tsc -b tsconfig.types.json --force && api-extractor run --local && node build/augment-dts.mjs",
-    "build:scss": "node ./build/banner.js < src/scss/buefy-build.scss | sass --load-path=../../node_modules --load-path=node_modules src/scss/buefy-build.scss dist/buefy.css && cleancss -o dist/buefy.min.css dist/buefy.css",
+    "build:scss": "npm run build:scss-buefy && npm run build:scss-buefy-standalone && npm run build:scss-no-reset",
+    "build:scss-buefy": "sass --load-path=../../node_modules --load-path=node_modules src/scss/versions/buefy-bulma-bundle.scss dist/css/buefy.css && node ./build/banner.js < dist/css/buefy.css > dist/css/buefy.banner.css && mv dist/css/buefy.banner.css dist/css/buefy.css && cleancss -o dist/css/buefy.min.css dist/css/buefy.css",
+    "build:scss-buefy-standalone": "sass --load-path=../../node_modules --load-path=node_modules src/scss/buefy.scss dist/css/versions/buefy-standalone.css && node ./build/banner.js < dist/css/versions/buefy-standalone.css > dist/css/buefy.banner.css && mv dist/css/buefy.banner.css dist/css/versions/buefy-standalone.css && cleancss -o dist/css/versions/buefy-standalone.min.css dist/css/versions/buefy-standalone.css",
+    "build:scss-no-reset": "sass --load-path=../../node_modules --load-path=node_modules src/scss/versions/buefy-no-reset.scss dist/css/versions/buefy-no-reset.css && node ./build/banner.js < dist/css/versions/buefy-no-reset.css > dist/css/buefy.banner.css && mv dist/css/buefy.banner.css dist/css/versions/buefy-no-reset.css && cleancss -o dist/css/versions/buefy-no-reset.min.css dist/css/versions/buefy-no-reset.css",
     "vetur": "node -r esm build/vetur.js"
   },
   "dependencies": {
@@ -77,4 +80,4 @@
     "rollup-plugin-esbuild": "^6.1.0",
     "vitest": "^3.0.6"
   }
-}
+}

package/src/components/dialog/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
 
 import Dialog from './Dialog.vue'
 import type { DialogProps } from './Dialog.vue'
@@ -154,10 +154,16 @@ class DialogProgrammatic {
     }
 }
 
+const dialogInjectionKey = Symbol('Buefy Dialog') as InjectionKey<DialogProgrammatic>
+
+export function useDialog() {
+    return inject(dialogInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Dialog)
-        registerComponentProgrammatic(Vue, 'dialog', new DialogProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'dialog', new DialogProgrammatic(Vue), dialogInjectionKey)
     }
 }
 

package/src/components/loading/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
 
 import Loading from './Loading.vue'
 import type { LoadingProps } from './Loading.vue'
@@ -76,10 +76,16 @@ class LoadingProgrammatic {
     }
 }
 
+const loadingInjectionKey = Symbol('Buefy Loading') as InjectionKey<LoadingProgrammatic>
+
+export function useLoading() {
+    return inject(loadingInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Loading)
-        registerComponentProgrammatic(Vue, 'loading', new LoadingProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'loading', new LoadingProgrammatic(Vue), loadingInjectionKey)
     }
 }
 

package/src/components/modal/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
 
 import Modal from './Modal.vue'
 import type { ModalProps } from './Modal.vue'
@@ -92,10 +92,16 @@ class ModalProgrammatic {
     }
 }
 
+const modalInjectionKey = Symbol('Buefy Modal') as InjectionKey<ModalProgrammatic>
+
+export function useModal() {
+    return inject(modalInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Modal)
-        registerComponentProgrammatic(Vue, 'modal', new ModalProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'modal', new ModalProgrammatic(Vue), modalInjectionKey)
     }
 }
 

package/src/components/notification/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance, VNode } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, VNode, InjectionKey } from 'vue'
 
 import Notification from './Notification.vue'
 import type { NotificationProps } from './Notification.vue'
@@ -106,10 +106,16 @@ class NotificationProgrammatic {
     }
 }
 
+const notificationInjectionKey = Symbol('Buefy Notification') as InjectionKey<NotificationProgrammatic>
+
+export function useNotification() {
+    return inject(notificationInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Notification)
-        registerComponentProgrammatic(Vue, 'notification', new NotificationProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'notification', new NotificationProgrammatic(Vue), notificationInjectionKey)
     }
 }
 

package/src/components/snackbar/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance, VNode } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, VNode, InjectionKey } from 'vue'
 
 import Snackbar from './Snackbar.vue'
 import type { SnackbarProps } from './Snackbar.vue'
@@ -104,9 +104,15 @@ class SnackbarProgrammatic {
     }
 }
 
+const snackbarInjectionKey = Symbol('Buefy Snackbar') as InjectionKey<SnackbarProgrammatic>
+
+export function useSnackbar() {
+    return inject(snackbarInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
-        registerComponentProgrammatic(Vue, 'snackbar', new SnackbarProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'snackbar', new SnackbarProgrammatic(Vue), snackbarInjectionKey)
     }
 }
 

package/src/components/table/Table.vue

@@ -441,7 +441,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRaw } from 'vue'
+import { camelize, defineComponent, toHandlerKey, toRaw } from 'vue'
 import type { PropType } from 'vue'
 
 import type { VueClassAttribute } from '../../utils/config'
@@ -1506,19 +1506,25 @@ export default defineComponent({
             this.$emit('dragleave', { event, row, index })
         },
 
-        // FIXME: this method may emit events not listed in `emits`.
-        // I decided not to list them to check if event listeners are actually
-        // set in `$attrs`. The original idea of this method was to address
-        // some performance issues and introduced at the commit:
-        // https://github.com/ntohq/buefy-next/commit/e38726497785145195e9605840e33980fd4ae9e0
-        // I am not sure whether the justification at https://github.com/buefy/buefy/pull/2150
-        // is still relevant with Vue 3.
+        // this method is for "mouseenter", and "mouseleave" events.
+        // the original idea of this method was introduced by the PR
+        // https://github.com/buefy/buefy/pull/2150
+        // to address some performance issues related to these events.
+        // I am not sure whether the justification made at the PR is still
+        // relevant to Vue 3.
+        // btw, this function was made by the PR https://github.com/buefy/buefy/pull/3236
         emitEventForRow(eventName: string, event: Event, row: TableRow) {
-            // eventName should not be in `emits` because it is never included
+            // eventName should not be in `emits` because it won't be included
             // in `$attrs` if it is listed in `emits`.
-            // @ts-expect-error `on${eventName}` unlikely matches the actual prop.
-            // we should use `toHandlerKey` with/without `camelize` instead.
-            return this.$attrs[`on${eventName}`] ? this.$emit(eventName, row, event) : null
+            // less known `toHandlerKey` helps us to make a proper name for the
+            // listener. the following code also supports camelCase event names
+            // but may be too much for our use case.
+            // reference: https://github.com/vuejs/core/blob/a48ffdad65d9c97eb0a342a6cd53836a16289afe/packages/runtime-core/src/componentEmits.ts#L194-L197
+            const listener =
+                this.$attrs[toHandlerKey(eventName)] ||
+                this.$attrs[toHandlerKey(camelize(eventName))]
+            // @ts-expect-error $emit expects a name in the `emits` list
+            return listener != null ? this.$emit(eventName, row, event) : null
         },
 
         /*

package/src/components/toast/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance, VNode } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, VNode, InjectionKey } from 'vue'
 
 import Toast from './Toast.vue'
 import type { ToastProps } from './Toast.vue'
@@ -106,9 +106,15 @@ class ToastProgrammatic {
     }
 }
 
+const toastInjectionKey = Symbol('Buefy Toast') as InjectionKey<ToastProgrammatic>
+
+export function useToast() {
+    return inject(toastInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
-        registerComponentProgrammatic(Vue, 'toast', new ToastProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'toast', new ToastProgrammatic(Vue), toastInjectionKey)
     }
 }
 

package/src/index.ts

@@ -8,7 +8,7 @@ import config, { setOptions, setVueInstance } from './utils/config'
 import type { BuefyConfig, BuefyConfigOptions } from './utils/config'
 import { registerComponentProgrammatic } from './utils/plugins'
 
-import ConfigComponent from './utils/ConfigComponent'
+import ConfigComponent, { configInjectionKey } from './utils/ConfigComponent'
 
 const Buefy = {
     install(Vue: App, options: BuefyConfigOptions = {}) {
@@ -18,7 +18,7 @@ const Buefy = {
         // Components
         allComponents.forEach((component) => Vue.use(component))
         // Config component
-        registerComponentProgrammatic(Vue, 'config', ConfigComponent)
+        registerComponentProgrammatic(Vue, 'config', ConfigComponent, configInjectionKey)
 
         Vue.config.globalProperties.$buefy.globalNoticeInterval = undefined
     }
@@ -29,13 +29,13 @@ export default Buefy
 // export all components as vue plugin
 export * from './components'
 // export programmatic component
-export { DialogProgrammatic } from './components/dialog'
-export { LoadingProgrammatic } from './components/loading'
-export { ModalProgrammatic } from './components/modal'
-export { NotificationProgrammatic } from './components/notification'
-export { SnackbarProgrammatic } from './components/snackbar'
-export { ToastProgrammatic } from './components/toast'
-export { default as ConfigProgrammatic } from './utils/ConfigComponent'
+export { DialogProgrammatic, useDialog } from './components/dialog'
+export { LoadingProgrammatic, useLoading } from './components/loading'
+export { ModalProgrammatic, useModal } from './components/modal'
+export { NotificationProgrammatic, useNotification } from './components/notification'
+export { SnackbarProgrammatic, useSnackbar } from './components/snackbar'
+export { ToastProgrammatic, useToast } from './components/toast'
+export { default as ConfigProgrammatic, useConfigComponent } from './utils/ConfigComponent'
 export { default as Color } from './utils/color'
 // export helpers
 export * from './utils/helpers'

package/src/scss/buefy.scss

@@ -1,5 +1,4 @@
 @forward "utils/_all";
-
 @forward "components/_autocomplete";
 @forward "components/_carousel";
 @forward "components/_checkbox";

package/src/scss/components/_dropdown.scss

@@ -2,16 +2,16 @@
 @use "bulma/sass/utilities/extends" as extends;
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/derived-variables.scss" as dv;
 @use "bulma/sass/utilities/mixins" as mixins;
 
-$dropdown-mobile-breakpoint: cv.getVar('desktop') !default;
-$dropdown-background-color: rgba(cv.getVar('scheme-invert'), 0.86) !default;
+$dropdown-mobile-breakpoint: calc(iv.$desktop - 1px) !default;
+$dropdown-background-color: rgba(dv.$scheme-invert, 0.86) !default;
 $dropdown-disabled-opacity: 0.5 !default;
 
 .#{iv.$class-prefix}dropdown {
     @include cv.register-vars(
     (
-        "dropdown-mobile-breakpoint": #{$dropdown-mobile-breakpoint},
         "dropdown-background-color": #{$dropdown-background-color},
         "dropdown-disabled-opacity": #{$dropdown-disabled-opacity}
     )
@@ -25,10 +25,10 @@ $dropdown-disabled-opacity: 0.5 !default;
     .background {
         @extend %overlay;
         position: fixed;
-        background-color: cv.getVar('dropdown-background-color');
+        background-color: #{cv.getVar('dropdown-background-color')};
         z-index: 10;
         cursor: pointer;
-        @media screen and (min-width: cv.getVar('dropdown-mobile-breakpoint')) {
+        @media screen and (min-width: $dropdown-mobile-breakpoint) {
             display: none;
         }
     }
@@ -132,7 +132,7 @@ $dropdown-disabled-opacity: 0.5 !default;
             left: auto;
         }
     }
-    @media screen and (max-width: calc(#{cv.getVar('dropdown-mobile-breakpoint')} - 1px)) {
+    @media screen and (max-width: $dropdown-mobile-breakpoint) {
         /* prevents modal on hover unless it is on touch devices */
         &.is-mobile-modal:not(.is-hoverable),
         &.is-mobile-modal.is-touch-enabled {

package/src/scss/{buefy-build.scss → versions/buefy-bulma-bundle.scss}

@@ -1,3 +1,3 @@
 @charset "utf-8";
 @use "bulma/bulma";
-@use "buefy";
+@use "../buefy";

package/src/scss/versions/buefy-no-reset.scss

@@ -0,0 +1,16 @@
+@charset "utf-8";
+
+/* Custom Bulma Imports Without Minirest */
+@forward "bulma/sass/utilities";
+@forward "bulma/sass/themes";
+@forward "bulma/sass/base/generic";
+@forward "bulma/sass/base/animations";
+@forward "bulma/sass/elements";
+@forward "bulma/sass/form";
+@forward "bulma/sass/components";
+@forward "bulma/sass/grid";
+@forward "bulma/sass/layout";
+@forward "bulma/sass/base/skeleton";
+@forward "bulma/sass/helpers";
+
+@use "../buefy";

package/src/utils/ConfigComponent.ts

@@ -1,6 +1,18 @@
 import config, { setOptions } from './config'
 import type { BuefyConfigOptions } from './config'
 import { merge } from './helpers'
+import { inject, type InjectionKey } from 'vue'
+
+interface ConfigComponent {
+    getOptions(): BuefyConfigOptions,
+    setOptions(options: BuefyConfigOptions): void
+}
+
+export const configInjectionKey = Symbol('Buefy Config Component') as InjectionKey<ConfigComponent>
+
+export function useConfigComponent() {
+    return inject(configInjectionKey)
+}
 
 export default {
     getOptions() {
@@ -9,4 +21,4 @@ export default {
     setOptions(options: BuefyConfigOptions) {
         setOptions(merge(config, options, true))
     }
-}
+} as ConfigComponent

package/src/utils/plugins.ts

@@ -1,4 +1,4 @@
-import type { App, Component } from 'vue'
+import type { App, Component, InjectionKey } from 'vue'
 
 // use `name` to register a Functional Component which will become unresolvable
 // in production build due to name mangling.
@@ -13,8 +13,9 @@ export const registerComponent = (Vue: App, component: Component, name?: string)
 export const registerComponentProgrammatic = <
     K extends keyof App['config']['globalProperties']['$buefy'],
     C extends App['config']['globalProperties']['$buefy'][K]
->(Vue: App, property: K, component: C) => {
+>(Vue: App, property: K, component: C, injectionKey: InjectionKey<C>) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (!Vue.config.globalProperties.$buefy) Vue.config.globalProperties.$buefy = {} as any
     Vue.config.globalProperties.$buefy[property] = component
+    Vue.provide(injectionKey, component)
 }

package/src/utils/vue-augmentation.ts

@@ -17,7 +17,7 @@ import ConfigComponent from './ConfigComponent'
 
 // Augments the global property with `$buefy`.
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     /* @public */
     interface ComponentCustomProperties {
         /* Global Buefy API. */