buefy 3.0.3 → 3.0.4

package/dist/esm/dialog.js

@@ -35,6 +35,14 @@ const Dialog$1 = defineComponent({
   },
   extends: Modal,
   props: {
+    customClass: {
+      type: String,
+      default: ""
+    },
+    customContentClass: {
+      type: String,
+      default: ""
+    },
     title: String,
     message: [String, Array],
     icon: String,
@@ -205,27 +213,26 @@ const Dialog$1 = defineComponent({
 });
 
 const _hoisted_1 = ["role", "aria-modal"];
-const _hoisted_2 = { class: "modal-card animation-content" };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "modal-card-head"
 };
-const _hoisted_4 = { class: "modal-card-title" };
-const _hoisted_5 = { class: "media" };
-const _hoisted_6 = {
+const _hoisted_3 = { class: "modal-card-title" };
+const _hoisted_4 = { class: "media" };
+const _hoisted_5 = {
   key: 0,
   class: "media-left"
 };
-const _hoisted_7 = { class: "media-content" };
-const _hoisted_8 = ["innerHTML"];
-const _hoisted_9 = {
+const _hoisted_6 = { class: "media-content" };
+const _hoisted_7 = ["innerHTML"];
+const _hoisted_8 = {
   key: 0,
   class: "field"
 };
-const _hoisted_10 = { class: "control" };
-const _hoisted_11 = { class: "help is-danger" };
-const _hoisted_12 = { class: "modal-card-foot" };
-const _hoisted_13 = { class: "buttons" };
+const _hoisted_9 = { class: "control" };
+const _hoisted_10 = { class: "help is-danger" };
+const _hoisted_11 = { class: "modal-card-foot" };
+const _hoisted_12 = { class: "buttons" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_b_icon = resolveComponent("b-icon");
   const _component_b_button = resolveComponent("b-button");
@@ -234,7 +241,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       _ctx.isActive ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["dialog modal is-active", _ctx.dialogClass]),
+        class: normalizeClass(["dialog modal is-active", [_ctx.dialogClass, _ctx.customClass]]),
         role: _ctx.ariaRole,
         "aria-modal": _ctx.ariaModal
       }, [
@@ -242,116 +249,124 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           class: "modal-background",
           onClick: _cache[0] || (_cache[0] = ($event) => _ctx.cancel("outside"))
         }),
-        createElementVNode("div", _hoisted_2, [
-          _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_3, [
+        createElementVNode(
+          "div",
+          {
+            class: normalizeClass(["modal-card animation-content", _ctx.customContentClass])
+          },
+          [
+            _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
+              createElementVNode(
+                "p",
+                _hoisted_3,
+                toDisplayString(_ctx.title),
+                1
+                /* TEXT */
+              )
+            ])) : createCommentVNode("v-if", true),
             createElementVNode(
-              "p",
-              _hoisted_4,
-              toDisplayString(_ctx.title),
-              1
-              /* TEXT */
-            )
-          ])) : createCommentVNode("v-if", true),
-          createElementVNode(
-            "section",
-            {
-              class: normalizeClass(["modal-card-body", { "is-titleless": !_ctx.title, "is-flex": _ctx.hasIcon }])
-            },
-            [
-              createElementVNode("div", _hoisted_5, [
-                _ctx.hasIcon && (_ctx.icon || _ctx.iconByType) ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                  createVNode(_component_b_icon, {
-                    icon: _ctx.icon ? _ctx.icon : _ctx.iconByType,
-                    pack: _ctx.iconPack,
-                    type: _ctx.type,
-                    both: !_ctx.icon,
-                    size: "is-large"
-                  }, null, 8, ["icon", "pack", "type", "both"])
-                ])) : createCommentVNode("v-if", true),
-                createElementVNode("div", _hoisted_7, [
-                  createElementVNode("p", null, [
-                    _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(
-                      Fragment,
-                      { key: 1 },
-                      [
-                        createCommentVNode(" eslint-disable-next-line vue/no-v-html "),
-                        createElementVNode("div", { innerHTML: _ctx.message }, null, 8, _hoisted_8)
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    ))
-                  ]),
-                  _ctx.hasInput ? (openBlock(), createElementBlock("div", _hoisted_9, [
-                    createElementVNode("div", _hoisted_10, [
-                      withDirectives(createElementVNode(
-                        "input",
-                        mergeProps({
-                          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.prompt = $event),
-                          class: ["input", { "is-danger": _ctx.validationMessage }],
-                          ref: "input"
-                        }, _ctx.safeInputAttrs, {
-                          onCompositionstart: _cache[2] || (_cache[2] = ($event) => _ctx.isCompositing = true),
-                          onCompositionend: _cache[3] || (_cache[3] = ($event) => _ctx.isCompositing = false),
-                          onKeydown: _cache[4] || (_cache[4] = withKeys((...args) => _ctx.confirm && _ctx.confirm(...args), ["enter"]))
-                        }),
-                        null,
-                        16
-                        /* FULL_PROPS */
-                      ), [
-                        [vModelDynamic, _ctx.prompt]
-                      ])
+              "section",
+              {
+                class: normalizeClass(["modal-card-body", { "is-titleless": !_ctx.title, "is-flex": _ctx.hasIcon }])
+              },
+              [
+                createElementVNode("div", _hoisted_4, [
+                  _ctx.hasIcon && (_ctx.icon || _ctx.iconByType) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    createVNode(_component_b_icon, {
+                      icon: _ctx.icon ? _ctx.icon : _ctx.iconByType,
+                      pack: _ctx.iconPack,
+                      type: _ctx.type,
+                      both: !_ctx.icon,
+                      size: "is-large"
+                    }, null, 8, ["icon", "pack", "type", "both"])
+                  ])) : createCommentVNode("v-if", true),
+                  createElementVNode("div", _hoisted_6, [
+                    createElementVNode("p", null, [
+                      _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 1 },
+                        [
+                          createCommentVNode(" eslint-disable-next-line vue/no-v-html "),
+                          createElementVNode("div", { innerHTML: _ctx.message }, null, 8, _hoisted_7)
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
                     ]),
-                    createElementVNode(
-                      "p",
-                      _hoisted_11,
-                      toDisplayString(_ctx.validationMessage),
+                    _ctx.hasInput ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                      createElementVNode("div", _hoisted_9, [
+                        withDirectives(createElementVNode(
+                          "input",
+                          mergeProps({
+                            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.prompt = $event),
+                            class: ["input", { "is-danger": _ctx.validationMessage }],
+                            ref: "input"
+                          }, _ctx.safeInputAttrs, {
+                            onCompositionstart: _cache[2] || (_cache[2] = ($event) => _ctx.isCompositing = true),
+                            onCompositionend: _cache[3] || (_cache[3] = ($event) => _ctx.isCompositing = false),
+                            onKeydown: _cache[4] || (_cache[4] = withKeys((...args) => _ctx.confirm && _ctx.confirm(...args), ["enter"]))
+                          }),
+                          null,
+                          16
+                          /* FULL_PROPS */
+                        ), [
+                          [vModelDynamic, _ctx.prompt]
+                        ])
+                      ]),
+                      createElementVNode(
+                        "p",
+                        _hoisted_10,
+                        toDisplayString(_ctx.validationMessage),
+                        1
+                        /* TEXT */
+                      )
+                    ])) : createCommentVNode("v-if", true)
+                  ])
+                ])
+              ],
+              2
+              /* CLASS */
+            ),
+            createElementVNode("footer", _hoisted_11, [
+              createElementVNode("div", _hoisted_12, [
+                _ctx.showCancel ? (openBlock(), createBlock(_component_b_button, {
+                  key: 0,
+                  ref: "cancelButton",
+                  disabled: _ctx.isLoading,
+                  onClick: _cache[5] || (_cache[5] = ($event) => _ctx.cancel("button"))
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(_ctx.cancelText),
                       1
                       /* TEXT */
                     )
-                  ])) : createCommentVNode("v-if", true)
-                ])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled"])) : createCommentVNode("v-if", true),
+                createVNode(_component_b_button, {
+                  type: _ctx.type,
+                  ref: "confirmButton",
+                  loading: _ctx.isLoading,
+                  onClick: _ctx.confirm
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(_ctx.confirmText),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["type", "loading", "onClick"])
               ])
-            ],
-            2
-            /* CLASS */
-          ),
-          createElementVNode("footer", _hoisted_12, [
-            createElementVNode("div", _hoisted_13, [
-              _ctx.showCancel ? (openBlock(), createBlock(_component_b_button, {
-                key: 0,
-                ref: "cancelButton",
-                disabled: _ctx.isLoading,
-                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.cancel("button"))
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(
-                    toDisplayString(_ctx.cancelText),
-                    1
-                    /* TEXT */
-                  )
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["disabled"])) : createCommentVNode("v-if", true),
-              createVNode(_component_b_button, {
-                type: _ctx.type,
-                ref: "confirmButton",
-                loading: _ctx.isLoading,
-                onClick: _ctx.confirm
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(
-                    toDisplayString(_ctx.confirmText),
-                    1
-                    /* TEXT */
-                  )
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["type", "loading", "onClick"])
             ])
-          ])
-        ])
+          ],
+          2
+          /* CLASS */
+        )
       ], 10, _hoisted_1)), [
         [_directive_trap_focus, _ctx.trapFocus]
       ]) : createCommentVNode("v-if", true)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Lightweight UI components for Vue.js (v3) based on Bulma",
   "keywords": [
     "vuejs",
@@ -80,4 +80,4 @@
     "rollup-plugin-esbuild": "^6.1.0",
     "vitest": "^3.0.6"
   }
-}
+}

package/src/components/dialog/Dialog.vue

@@ -3,13 +3,13 @@
         <div
             v-if="isActive"
             class="dialog modal is-active"
-            :class="dialogClass"
+            :class="[dialogClass, customClass]"
             v-trap-focus="trapFocus"
             :role="ariaRole"
             :aria-modal="ariaModal"
         >
             <div class="modal-background" @click="cancel('outside')" />
-            <div class="modal-card animation-content">
+            <div class="modal-card animation-content" :class="customContentClass">
                 <header class="modal-card-head" v-if="title">
                     <p class="modal-card-title">
                         {{ title }}
@@ -115,6 +115,14 @@ const Dialog = defineComponent({
     },
     extends: Modal,
     props: {
+        customClass: {
+            type: String,
+            default: ''
+        },
+        customContentClass: {
+            type: String,
+            default: ''
+        },
         title: String,
         message: [String, Array],
         icon: String,

package/src/scss/components/_checkbox.scss

@@ -69,15 +69,15 @@ $checkbox-colors: shared.$form-colors !default;
     align-items: center;
     
     &:not(.button) {
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
       & + .checkbox:last-child {
-        margin-right: 0;
+        margin-inline-end: 0;
       }
     }
 
     input[type=checkbox] {
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
       opacity: 0;
       outline: none;
       z-index: -1;
@@ -116,7 +116,7 @@ $checkbox-colors: shared.$form-colors !default;
       }
     }
     .control-label {
-      padding-left: cv.getVar('control-padding-horizontal');
+      padding-inline-start: cv.getVar('control-padding-horizontal');
     }
     &.button {
       display: flex;

package/src/scss/components/_datepicker.scss

@@ -156,7 +156,7 @@ $datepicker-item-selected-background-color: cv.getVar("primary") !default;
                         border-top-right-radius: 0;
                     }
                     &.is-within-selected {
-                        background-color: cv.getRgbaVar("datepicker-item-selected-background-color", 0.5);
+                        background-color: rgb(from $datepicker-item-selected-background-color r g b / 0.5);
                         border-radius: 0;
                     }
                     &.is-last-selected {

package/src/scss/components/_dropdown.scss

@@ -4,6 +4,7 @@
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/derived-variables.scss" as dv;
 @use "bulma/sass/utilities/mixins" as mixins;
+@use "bulma/sass/components/dropdown" as dropdown;
 
 $dropdown-mobile-breakpoint: calc(iv.$desktop - 1px) !default;
 $dropdown-background-color: rgba(dv.$scheme-invert, 0.86) !default;

package/src/scss/components/_form.scss

@@ -18,7 +18,7 @@ $floating-in-height: 3.25em !default;
         .field {
             flex-shrink: 0;
             &:not(:last-child) {
-                margin-right: 0.75rem;
+                margin-inline-end: 0.75rem;
             }
             &.is-expanded {
                 flex-grow: 1;
@@ -32,16 +32,16 @@ $floating-in-height: 3.25em !default;
             .button,
             .input,
             .select select {
-                border-bottom-left-radius: cv.getVar('input-radius');
-                border-top-left-radius: cv.getVar('input-radius');
+                border-start-start-radius: cv.getVar('input-radius');
+                border-end-start-radius: cv.getVar('input-radius');
             }
         }
         &:last-child .control {
             .button,
             .input,
             .select select {
-                border-bottom-right-radius: cv.getVar('input-radius');
-                border-top-right-radius: cv.getVar('input-radius');
+                border-start-end-radius: cv.getVar('input-radius');
+                border-end-end-radius: cv.getVar('input-radius');
             }
         }
         .control {
@@ -60,8 +60,8 @@ $floating-in-height: 3.25em !default;
                     .button,
                     .input,
                     .select select {
-                        border-bottom-left-radius: 0;
-                        border-top-left-radius: 0;
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
                     }
                 }
             }
@@ -70,15 +70,15 @@ $floating-in-height: 3.25em !default;
                     .button,
                     .input,
                     .select select {
-                        border-bottom-right-radius: 0;
-                        border-top-right-radius: 0;
+                        border-start-end-radius: 0;
+                        border-end-end-radius: 0;
                     }
                 }
             }
         }
         &.b-numberinput {
             .control {
-                margin-right: unset;
+                margin-inline-end: unset;
             }
         }
     }
@@ -91,7 +91,7 @@ $floating-in-height: 3.25em !default;
 
         .label {
             position: absolute;
-            left: 1em;
+            inset-inline-start: 1em;
             font-size: calc(#{cv.getVar('size-normal')} * 0.75);
             background-color: transparent;
             z-index: 5;
@@ -112,7 +112,7 @@ $floating-in-height: 3.25em !default;
         }
         .taginput .counter {
             float: none;
-            text-align: right;
+            text-align: end;
         }
 
         &.has-addons {
@@ -121,8 +121,8 @@ $floating-in-height: 3.25em !default;
                     .button,
                     .input,
                     .select select {
-                        border-bottom-left-radius: cv.getVar('input-radius');
-                        border-top-left-radius: cv.getVar('input-radius');
+                        border-start-start-radius: cv.getVar('input-radius');
+                        border-end-start-radius: cv.getVar('input-radius');
                     }
                 }
             }
@@ -132,15 +132,15 @@ $floating-in-height: 3.25em !default;
     &.is-floating-label {
         .label {
             top: -0.775em;
-            padding-left: 0.125em;
-            padding-right: 0.125em;
+            padding-inline-start: 0.125em;
+            padding-inline-end: 0.125em;
             &:before {
                 content: '';
                 display: block;
                 position: absolute;
                 top: 0.775em;
-                left: 0;
-                right: 0;
+                inset-inline-start: 0;
+                inset-inline-end: 0;
                 height: 0.375em;
                 background-color: cv.getVar('input-background-color');
                 z-index: -1;
@@ -237,41 +237,41 @@ $floating-in-height: 3.25em !default;
     &.is-floating-label, &.is-floating-in-label {
         &.has-numberinput {
             .label {
-                margin-left: calc(#{cv.getVar('size-normal')} * 3);
+                margin-inline-start: calc(#{cv.getVar('size-normal')} * 3);
             }
             &.has-numberinput-is-small {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-small')} * 3);
+                    margin-inline-start: calc(#{cv.getVar('size-small')} * 3);
                 }
             }
             &.has-numberinput-is-medium {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-medium')} * 3);
+                    margin-inline-start: calc(#{cv.getVar('size-medium')} * 3);
                 }
             }
             &.has-numberinput-is-large {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-large')} * 3);
+                    margin-inline-start: calc(#{cv.getVar('size-large')} * 3);
                 }
             }
         }
         &.has-numberinput-compact {
             .label {
-                margin-left: calc(#{cv.getVar('size-normal')} * 2.25);
+                margin-inline-start: calc(#{cv.getVar('size-normal')} * 2.25);
             }
             &.has-numberinput-is-small {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-small')} * 2.25);
+                    margin-inline-start: calc(#{cv.getVar('size-small')} * 2.25);
                 }
             }
             &.has-numberinput-is-medium {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-medium')} * 2.25);
+                    margin-inline-start: calc(#{cv.getVar('size-medium')} * 2.25);
                 }
             }
             &.has-numberinput-is-large {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-large')} * 2.25);
+                    margin-inline-start: calc(#{cv.getVar('size-large')} * 2.25);
                 }
             }
         }
@@ -280,13 +280,13 @@ $floating-in-height: 3.25em !default;
         &.is-floating-in-label {
             .label {
                 position: relative;
-                left: calc(3.25em + 2em);
+                inset-inline-start: calc(3.25em + 2em);
             }
         }
         &.is-floating-label {
             .label {
                 position: relative;
-                left: calc(3.25em + 2em);
+                inset-inline-start: calc(3.25em + 2em);
             }
         }
     }
@@ -294,8 +294,8 @@ $floating-in-height: 3.25em !default;
 
 .#{iv.$class-prefix}control {
     .help.counter {
-        float: right;
-        margin-left: 0.5em;
+        float: inline-end;
+        margin-inline-start: 0.5em;
     }
     .icon {
         &.is-clickable {
@@ -306,6 +306,6 @@ $floating-in-height: 3.25em !default;
     // fix Bulma 0.8.2
     &.is-loading::after {
         top: calc(50% - (1em * 0.5));
-        right: calc((2.5em * 0.5) - .5em);
+        inset-inline-end: calc((2.5em * 0.5) - .5em);
     }
 }

package/src/scss/components/_radio.scss

@@ -42,18 +42,18 @@ $radio-shadow: cv.getVar('shadow') !default;
         display: inline-flex;
         align-items: center;
         &:not(.button) {
-            margin-right: 0.5em;
+            margin-inline-end: 0.5em;
             & + .radio:last-child {
-                margin-right: 0;
+                margin-inline-end: 0;
             }
         }
         // reset Bulma
         & + .radio {
-            margin-left: 0;
+            margin-inline-start: 0;
         }
         input[type=radio] {
             position: absolute;
-            left: 0;
+            inset-inline-start: 0;
             opacity: 0;
             outline: none;
             z-index: -1;
@@ -71,10 +71,10 @@ $radio-shadow: cv.getVar('shadow') !default;
                     content: "";
                     display: flex;
                     position: absolute;
-                    left: 50%;
-                    margin-left: calc(#{cv.getVar('radio-size')} * -0.5);
-                    bottom: 50%;
-                    margin-bottom: calc(#{ cv.getVar('radio-size')} * -0.5);
+                    inset-inline-start: 50%;
+                    margin-inline-start: calc(#{cv.getVar('radio-size')} * -0.5);
+                    inset-block-end: 50%;
+                    margin-block-end: calc(#{ cv.getVar('radio-size')} * -0.5);
                     width:  cv.getVar('radio-size');
                     height:  cv.getVar('radio-size');
                     transition: transform  cv.getVar('speed-slow')  cv.getVar('easing');
@@ -102,7 +102,7 @@ $radio-shadow: cv.getVar('shadow') !default;
             }
         }
         .control-label {
-            padding-left:  cv.getVar('control-padding-horizontal');
+            padding-inline-start:  cv.getVar('control-padding-horizontal');
         }
         &.button {
             display: flex;