buefy 3.0.2 → 3.0.3

package/dist/esm/toast.js

@@ -1,9 +1,9 @@
-import { defineComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createCommentVNode, vShow, createApp, h } from 'vue';
+import { defineComponent, createBlock, openBlock, 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 { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { getComponentFromVNode, copyAppContext } from './helpers.js';
-import { r as registerComponentProgrammatic } from './plugins-B172kuKE.js';
+import { r as registerComponentProgrammatic } from './plugins-1tLsuIZF.js';
 
 const Toast$1 = defineComponent({
   name: "BToast",
@@ -147,10 +147,14 @@ class ToastProgrammatic {
     return vueInstance.mount(container);
   }
 }
+const toastInjectionKey = Symbol("Buefy Toast");
+function useToast() {
+  return inject(toastInjectionKey);
+}
 const Plugin = {
   install(Vue) {
-    registerComponentProgrammatic(Vue, "toast", new ToastProgrammatic(Vue));
+    registerComponentProgrammatic(Vue, "toast", new ToastProgrammatic(Vue), toastInjectionKey);
   }
 };
 
-export { Toast as BToast, ToastProgrammatic, Plugin as default };
+export { Toast as BToast, ToastProgrammatic, Plugin as default, useToast };

package/dist/esm/tooltip.js

@@ -1,5 +1,5 @@
 import { T as Tooltip } from './Tooltip-CtDSXAqa.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
 import './config-CKuo-p6e.js';
 import './helpers.js';

package/dist/esm/upload.js

@@ -3,7 +3,7 @@ import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.j
 import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.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-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './config-CKuo-p6e.js';
 
 const Upload$1 = defineComponent({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Lightweight UI components for Vue.js (v3) based on Bulma",
   "keywords": [
     "vuejs",
@@ -53,7 +53,6 @@
     "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": {
@@ -81,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/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/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)
 }