Buefy-next

When migrating to Vue 3, the default v-model behavior has changed. If you are creating or customizing components that use v-model, you must use the following mapping:

• Prop: value is now modelValue.
• Event: input is now update:modelValue.

Note that in Vue 3, you cannot use a name other than modelValue for the default v-model binding.

In Vue 3, all events emitted from a component must be explicitly listed in the emits field.

Failing to declare an event in emits can lead to accidental attribute binding when using v-bind="$attrs". For example, if Taginput emits a typing event but does not declare it in emits, a listener on a parent component might be triggered twice if a child component (like Autocomplete) also emits a typing event.

Vue 3 has removed $listeners. Event listeners are now part of $attrs. To pass a listener through a component, use the on prefix followed by the event name (e.g., onClick for the click event).

Warning for Dialog/Modal users: In some Buefy components like Dialog and Modal, props like onConfirm and onCancel were previously renamed to confirmCallback and cancelCallback to avoid being interpreted as event listeners. However, compatibility has been restored, so you should use onConfirm and onCancel to programmatically open a Dialog.

In Vue 3, the render function no longer takes a h (create element) argument; instead, h is a globally available function.

When using the global h API:

• Props: The second argument (props) is simplified. staticClass is now class, and the on property is removed (listeners are now handled via on{EventName} props).
• Component Resolution: The h API does not automatically resolve component names. You must use the resolveComponent global API to resolve components by name.
• Built-in Components: For built-in components like Transition, it is recommended to import the dedicated object directly from vue.

import { Transition, resolveComponent } from 'vue';

// Example of resolving a component manually
const MyComponent = resolveComponent('MyComponent');
// h(MyComponent, { ... });

In Vue 2, setting a boolean attribute to false automatically removed it from the element. In Vue 3, setting a boolean attribute to false does not remove it. To remove a boolean attribute in Vue 3, you must explicitly specify null or undefined.

Buefy components (such as Switch, Checkbox, Pagination, Taginput, etc.) have been updated to use computed values that resolve to true or undefined to ensure correct behavior in Vue 3.

You can use Buefy in your Vue 3 application by either importing the entire library or selecting individual components to keep your bundle size small.

// Option 1: Bundle everything
import { createApp } from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

const app = createApp();
app.use(Buefy);

// Option 2: Individual Components
import { createApp } from 'vue'
import { Field, Input } from 'buefy'
import 'buefy/dist/buefy.css'

const app = createApp();
app.use(Field)
app.use(Input)

Buefy supports Material Design Icons. To use them, include the following stylesheet in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">

To install the buefy-next fork for Vue 3, use the following command. This installs @ntohq/buefy-next under the buefy alias, which allows for a smoother transition when the package becomes stable.

Note: This version is specifically for Vue 3.0+ and is not compatible with Vue 2.

npm install buefy@npm:@ntohq/buefy-next

The Timepicker component implements logic to disable specific time units based on provided constraints:

1. Range Constraints: If minTime or maxTime is provided, the component calculates valid hours, minutes, and seconds. For example, if minTime is 10:30, the component will disable hours before 10 and minutes before 30 within the 10th hour.
2. Unselectable Times: If unselectableTimes is provided, the component checks the current selection against this list. If a specific combination of hour, minute, and (optionally) second matches an entry in unselectableTimes, that time becomes disabled.
3. Step Increments: The incrementHours, incrementMinutes, and incrementSeconds props control the granularity of the picker. Setting these to values $> 1$ will skip values in the selection lists.