buefy 3.0.2 → 3.0.4

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;

package/src/scss/components/_switch.scss

@@ -70,13 +70,13 @@ $input-border-l-delta: 0% !default;
   display: inline-flex;
   align-items: center;
   position: relative;
-  margin-right: 0.5em;
+  margin-inline-end: 0.5em;
   & + .switch: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;
@@ -133,13 +133,13 @@ $input-border-l-delta: 0% !default;
   &.has-left-label {
     flex-direction: row-reverse;
     .control-label {
-      padding-right: cv.getVar('control-padding-horizontal');
+      padding-inline-end: cv.getVar('control-padding-horizontal');
     }
   }
   
   &:not(.has-left-label) {
     .control-label {
-      padding-left: cv.getVar('control-padding-horizontal');
+      padding-inline-start: cv.getVar('control-padding-horizontal');
     }
   }
   
@@ -208,3 +208,26 @@ $input-border-l-delta: 0% !default;
     color: cv.getVar('input-disabled-color');
   }
 }
+
+// RTL support for switch toggle animation
+// In RTL, the transform direction and origin need to be flipped
+[dir="rtl"] .#{iv.$class-prefix}switch {
+  input[type=checkbox] {
+    + .check {
+      &:before {
+        transform-origin: right;
+      }
+    }
+    &:checked + .check {
+      &:before {
+        // In RTL, move left (negative direction) by the same amount
+        transform: translate3d(-100%, 0, 0);
+      }
+      &.is-elastic:before {
+        // Might be a little offset if base font is not 16px
+        transform: translate3d(-50%, 0, 0) scaleX(1.5);
+      }
+    }
+  }
+}
+

package/src/scss/components/_table.scss

@@ -1,6 +1,7 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/mixins" as mixins;
+@use "../utils/_functions" as fn;
 
 $table-sticky-header-height: 300px !default;
 
@@ -188,7 +189,7 @@ $table-sticky-header-height: 300px !default;
             &.is-selected {
                 .checkbox input {
                     &:checked + .check {
-                        background: cv.getVar('table-row-active-color') url(checkmark(cv.getVar('table-row-active-background-color'))) no-repeat center center;
+                        background: cv.getVar('table-row-active-color') url(fn.checkmark(cv.getVar('table-row-active-background-color'))) no-repeat center center;
                     }
                     + .check {
                         border-color: cv.getVar('table-row-active-color');

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)
 }