buefy 0.9.24 → 0.9.26

package/src/components/colorpicker/__snapshots__/Colorpicker.spec.js.snap

@@ -1,32 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BColorpicker render correctly 1`] = `
-<div class="colorpicker control">
-    <b-dropdown-stub maxheight="200" triggers="click" mobilemodal="true" ariarole="dialog" animation="fade" trapfocus="true" closeonclick="true" canclose="true" appendtobodycopyparent="true" aria-modal="true">
-        <b-dropdown-item-stub custom="true" focusable="true" ariarole="" class="">
-            <div>
-                <header class="colorpicker-header">
-                    <!---->
-                </header>
-                <div class="colorpicker-content">
-                    <b-colorpicker-h-s-l-representation-triangle-stub value="#000000" size="200" thickness="20"></b-colorpicker-h-s-l-representation-triangle-stub>
-                </div>
-            </div>
-            <footer class="colorpicker-footer">
-                <!---->
-                <b-field-stub grouped="true" addons="true" class="colorpicker-fields">
-                    <b-field-stub label="R" horizontal="true" addons="true">
-                        <b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Red"></b-input-stub>
-                    </b-field-stub>
-                    <b-field-stub label="G" horizontal="true" addons="true">
-                        <b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Green"></b-input-stub>
-                    </b-field-stub>
-                    <b-field-stub label="B" horizontal="true" addons="true">
-                        <b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Blue"></b-input-stub>
-                    </b-field-stub>
-                </b-field-stub>
-            </footer>
-        </b-dropdown-item-stub>
-    </b-dropdown-stub>
-</div>
+<div class="colorpicker control"><b-dropdown-stub maxheight="200" triggers="click" mobilemodal="true" ariarole="dialog" animation="fade" trapfocus="true" closeonclick="true" canclose="true" appendtobodycopyparent="true" triggertabindex="0"> <b-dropdown-item-stub custom="true" focusable="true" ariarole="" class="">
+      <div>
+        <header class="colorpicker-header"><!----></header>
+        <div class="colorpicker-content"><b-colorpicker-h-s-l-representation-triangle-stub value="#000000" size="200" thickness="20"></b-colorpicker-h-s-l-representation-triangle-stub></div>
+      </div>
+      <footer class="colorpicker-footer"><!----> <b-field-stub grouped="true" addons="true" class="colorpicker-fields"><b-field-stub label="R" horizontal="true" addons="true"><b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Red"></b-input-stub></b-field-stub> <b-field-stub label="G" horizontal="true" addons="true"><b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Green"></b-input-stub></b-field-stub> <b-field-stub label="B" horizontal="true" addons="true"><b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Blue"></b-input-stub></b-field-stub></b-field-stub></footer>
+    </b-dropdown-item-stub></b-dropdown-stub></div>
 `;

package/src/components/colorpicker/__snapshots__/ColorpickerAlphaSlider.spec.js.snap

@@ -2,10 +2,8 @@
 
 exports[`BColorpickerAlphaSlider render correctly 1`] = `
 <div class="b-colorpicker-alpha-slider" style="background-size: 100% 100%, 1em 1em, 1em 1em;">
-    <div role="slider" tabindex="0" aria-label="Tranparency" aria-valuemin="0" aria-valuenow="61" aria-valuemax="100" class="alpha-range-thumb" style="left: 61%;">
-        <b-tooltip-stub active="true" type="is-primary" label="61%" position="is-top" triggers="hover" size="is-medium" animated="true" animation="fade" autoclose="true">
-            &nbsp;
-        </b-tooltip-stub>
-    </div>
+  <div role="slider" tabindex="0" aria-label="Tranparency" aria-valuemin="0" aria-valuenow="61" aria-valuemax="100" class="alpha-range-thumb" style="left: 61%;"><b-tooltip-stub active="true" type="is-primary" label="61%" position="is-top" triggers="hover" size="is-medium" animated="true" animation="fade" autoclose="true">
+      &nbsp;
+    </b-tooltip-stub></div>
 </div>
 `;

package/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationSquare.spec.js.snap

@@ -2,11 +2,11 @@
 
 exports[`BColorpickerHSLRepresentationSquare render correctly 1`] = `
 <div class="b-colorpicker-square" style="width: 200px;">
-    <div class="colorpicker-square-slider-hue">
-        <div role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="359" class="hue-range-thumb" style="left: 36.4px; top: 190px; width: 18px;"></div>
-    </div>
-    <div aria-datascales="lightness, saturation" class="colorpicker-square-slider-sl" style="margin: 20px;">
-        <div role="slider" tabindex="0" aria-datavalues="67%, 20%" class="sl-range-thumb" style="left: 67%; top: 80%;"></div>
-    </div>
+  <div class="colorpicker-square-slider-hue">
+    <div role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="359" class="hue-range-thumb" style="left: 36.4px; top: 190px; width: 18px;"></div>
+  </div>
+  <div aria-datascales="lightness, saturation" class="colorpicker-square-slider-sl" style="margin: 20px;">
+    <div role="slider" tabindex="0" aria-datavalues="67%, 20%" class="sl-range-thumb" style="left: 67%; top: 80%;"></div>
+  </div>
 </div>
 `;

package/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.js.snap

@@ -2,35 +2,35 @@
 
 exports[`BColorpickerHSLRepresentationTriangle render correctly 1`] = `
 <svg viewBox="0 0 200 200" class="b-colorpicker-triangle">
-    <defs>
-        <linearGradient id="cp-triangle-gradient-ligthness-0" x1="0" y1="0" x2="1" y2="0">
-            <stop offset="0%" stop-color="#fff"></stop>
-            <stop offset="100%" stop-color="#000"></stop>
-        </linearGradient>
-        <linearGradient id="cp-triangle-gradient-saturation-0" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="1"></stop>
-            <stop offset="100%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="0"></stop>
-        </linearGradient>
-        <clipPath id="cp-triangle-clip-0">
-            <path d="M2 100a98  98  0 1 1 196 0h-20a-78  78  0 1 0 -156 0a78  78  0 1 0 156 0h20a98  98  0 1 1 -196 0z"></path>
-        </clipPath>
-    </defs>
-    <g class="colorpicker-triangle-slider-hue">
-        <foreignObject x="0" y="0" width="200" height="200" clip-path="url(#cp-triangle-clip-0)">
-            <div class="colorpicker-triangle-hue"></div>
-        </foreignObject>
-        <g style="transform: rotate(210deg);">
-            <foreignObject x="96" y="0" width="8" height="24">
-                <div role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuenow="210" aria-valuemax="360" class="hue-range-thumb"></div>
-            </foreignObject>
-        </g>
-    </g>
-    <g role="graphics-datagroup" aria-datascales="lightness, saturation" class="colorpicker-triangle-slider-sl" style="transform: rotate(210deg) translate(50%, 50%);">
-        <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-ligthness-0)"></path>
-        <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-saturation-0)" style="mix-blend-mode: overlay;"></path>
-        <foreignObject x="34.010373654636" y="-44.885000000000005" width="12" height="12">
-            <div tabindex="0" aria-datavalues="67%, 20%" class="sl-range-thumb"></div>
-        </foreignObject>
+  <defs>
+    <linearGradient id="cp-triangle-gradient-ligthness-0" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#fff"></stop>
+      <stop offset="100%" stop-color="#000"></stop>
+    </linearGradient>
+    <linearGradient id="cp-triangle-gradient-saturation-0" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="1"></stop>
+      <stop offset="100%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="0"></stop>
+    </linearGradient>
+    <clipPath id="cp-triangle-clip-0">
+      <path d="M2 100a98  98  0 1 1 196 0h-20a-78  78  0 1 0 -156 0a78  78  0 1 0 156 0h20a98  98  0 1 1 -196 0z"></path>
+    </clipPath>
+  </defs>
+  <g class="colorpicker-triangle-slider-hue">
+    <foreignObject x="0" y="0" width="200" height="200" clip-path="url(#cp-triangle-clip-0)">
+      <div class="colorpicker-triangle-hue"></div>
+    </foreignObject>
+    <g style="transform: rotate(210deg);">
+      <foreignObject x="96" y="0" width="8" height="24">
+        <div role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuenow="210" aria-valuemax="360" class="hue-range-thumb"></div>
+      </foreignObject>
     </g>
+  </g>
+  <g role="graphics-datagroup" aria-datascales="lightness, saturation" class="colorpicker-triangle-slider-sl" style="transform: rotate(210deg) translate(50%, 50%);">
+    <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-ligthness-0)"></path>
+    <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-saturation-0)" style="mix-blend-mode: overlay;"></path>
+    <foreignObject x="34.010373654636" y="-44.885000000000005" width="12" height="12">
+      <div tabindex="0" aria-datavalues="67%, 20%" class="sl-range-thumb"></div>
+    </foreignObject>
+  </g>
 </svg>
 `;

package/src/components/datepicker/Datepicker.spec.js

@@ -264,10 +264,17 @@ describe('BDatepicker', () => {
     })
 
     describe('#dateFormatter', () => {
+        beforeEach(() => {
+            // uses en-US locale to make outputs predictable
+            wrapper.setProps({
+                locale: 'en-US'
+            })
+        })
+
         it('should add one to month since month in dates starts from 0', () => {
             const dateToFormat = new Date(2019, 3, 1)
             const formattedDate = wrapper.vm.dateFormatter(dateToFormat, wrapper.vm)
-            expect(formattedDate).toEqual('2019-4-1')
+            expect(formattedDate).toEqual('4/1/2019')
         })
 
         it('should format based on 2-digit numeric locale date with type === month', () => {
@@ -276,7 +283,7 @@ describe('BDatepicker', () => {
             })
             const dateToFormat = new Date(2019, 3, 1)
             const formattedDate = wrapper.vm.dateFormatter(dateToFormat, wrapper.vm)
-            expect(formattedDate).toEqual('2019-04')
+            expect(formattedDate).toEqual('4/2019')
         })
 
         it('should format a range of dates passed via array', () => {
@@ -285,7 +292,7 @@ describe('BDatepicker', () => {
                 new Date(2019, 3, 3)
             ]
             const formattedDate = wrapper.vm.dateFormatter(dateToFormat, wrapper.vm)
-            expect(formattedDate).toEqual('2019-4-1 - 2019-4-3')
+            expect(formattedDate).toEqual('4/1/2019 - 4/3/2019')
         })
 
         describe('multiple', () => {
@@ -305,7 +312,7 @@ describe('BDatepicker', () => {
                     new Date(2019, 3, 3)
                 ]
                 const formattedDate = wrapper.vm.dateFormatter(dateToFormat, wrapper.vm)
-                expect(formattedDate).toEqual('2019-4-1, 2019-4-13, 2019-4-3')
+                expect(formattedDate).toEqual('4/1/2019, 4/13/2019, 4/3/2019')
             })
 
             it('react accordingly when setting computedValue', () => {

package/src/components/datepicker/DatepickerMonth.spec.js

@@ -5,12 +5,10 @@ import config, {setOptions} from '@utils/config'
 
 let wrapper
 
+// it used to create a Date in UTC but should use the local timezone,
+// because DatepickerMonth deals with the local timezone
 const newDate = (y, m, d) => {
-    const date = new Date(Date.UTC(y, m, d))
-    date.getDate = jest.fn(() => date.getUTCDate())
-    date.getMonth = jest.fn(() => date.getUTCMonth())
-    date.getFullYear = jest.fn(() => date.getUTCFullYear())
-    return date
+    return new Date(y, m, d)
 }
 
 const thisMonth = newDate(2020, 4, 15).getUTCMonth()