@gitlab/ui 48.1.2 → 48.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [48.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.1.2...v48.2.0) (2022-10-24)
+
+
+### Features
+
+* **datepicker:** add public show method for datepicker ([adc2c8f](https://gitlab.com/gitlab-org/gitlab-ui/commit/adc2c8f53016efb253b003b02e6c354eb297ddb6))
+
 ## [48.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.1.1...v48.1.2) (2022-10-21)
 
 

package/dist/components/base/datepicker/datepicker.js

@@ -189,7 +189,7 @@ var script = {
 
   computed: {
     formattedDate() {
-      return this.$options.pikaday.calendar && this.$options.pikaday.calendar.toString();
+      return 'calendar' in this && this.calendar.toString();
     },
 
     customTrigger() {
@@ -223,25 +223,25 @@ var script = {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.$options.pikaday.calendar.getDate())) {
-        this.$options.pikaday.calendar.setDate(val, true);
+      if (!areDatesEqual(val, this.calendar.getDate())) {
+        this.calendar.setDate(val, true);
       }
     },
 
     minDate(minDate) {
-      this.$options.pikaday.calendar.setMinDate(minDate);
+      this.calendar.setMinDate(minDate);
     },
 
     maxDate(maxDate) {
-      this.$options.pikaday.calendar.setMaxDate(maxDate);
+      this.calendar.setMaxDate(maxDate);
     },
 
     startRange(startRange) {
-      this.$options.pikaday.calendar.setStartRange(startRange);
+      this.calendar.setStartRange(startRange);
     },
 
     endRange(endRange) {
-      this.$options.pikaday.calendar.setEndRange(endRange);
+      this.calendar.setEndRange(endRange);
     }
 
   },
@@ -295,18 +295,23 @@ var script = {
       pikadayConfig.i18n = this.i18n;
     }
 
-    this.$options.pikaday.calendar = new Pikaday(pikadayConfig);
+    this.calendar = new Pikaday(pikadayConfig);
 
     if (this.startOpened) {
-      this.$options.pikaday.calendar.show();
+      this.calendar.show();
     }
   },
 
   beforeDestroy() {
-    this.$options.pikaday.calendar.destroy();
+    this.calendar.destroy();
   },
 
   methods: {
+    // is used to open datepicker programmatically
+    show() {
+      this.calendar.show();
+    },
+
     selected(date) {
       /**
        * Emitted when a new date has been selected.
@@ -348,17 +353,11 @@ var script = {
     onKeydown() {
       if (this.textInput === '') {
         const resetDate = this.minDate || null;
-        this.$options.pikaday.calendar.setDate(resetDate);
+        this.calendar.setDate(resetDate);
         this.selected(resetDate);
       }
     }
 
-  },
-  // Vue3 will make this.$options shallow-readonly
-  // that means that in order to store anything in $options
-  // we need an object as a container
-  pikaday: {
-    calendar: null
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "48.1.2",
+  "version": "48.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/avatar/avatar.stories.js

@@ -53,7 +53,7 @@ export const Image = (args, { argTypes }) => ({
       <gl-avatar
         :size="size"
         :shape="shape"
-        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+        src="./img/gitlab-summit-south-africa.jpg"
       />
     `,
 });
@@ -66,7 +66,7 @@ export const ResponsiveImage = (args, { argTypes }) => ({
       <gl-avatar
         :size="size"
         :shape="shape"
-        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+        src="./img/gitlab-summit-south-africa.jpg"
       />
     `,
 });
@@ -97,7 +97,7 @@ export const WithTooltip = (args, { argTypes }) => ({
         :size="size"
         :shape="shape"
         :title="tooltipText"
-        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+        src="./img/gitlab-summit-south-africa.jpg"
         v-gl-tooltip="{ placement }"
       />
     `,

package/src/components/base/avatars_inline/avatars_inline.stories.js

@@ -3,11 +3,11 @@ import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
-  { src: 'https://picsum.photos/id/1005/32', alt: 'Administrator’s user avatar' },
-  { src: 'https://picsum.photos/id/1006/32', alt: 'Ops Manager’s user avatar' },
-  { src: 'https://picsum.photos/id/1009/32', alt: 'Developer’s user avatar' },
-  { src: 'https://picsum.photos/id/1011/32', alt: 'Business Admin’s user avatar' },
-  { src: 'https://picsum.photos/id/1012/32', alt: 'Product designer’s user avatar' },
+  { src: './img/avatar_1.png', alt: 'Administrator’s user avatar' },
+  { src: './img/avatar_2.png', alt: 'Ops Manager’s user avatar' },
+  { src: './img/avatar_3.png', alt: 'Developer’s user avatar' },
+  { src: './img/avatar_4.png', alt: 'Business Admin’s user avatar' },
+  { src: './img/avatar_5.png', alt: 'Product designer’s user avatar' },
 ];
 
 const generateProps = (

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

@@ -73,6 +73,14 @@ describe('datepicker component', () => {
     expect(Pikaday.prototype.show).toHaveBeenCalled();
   });
 
+  it('opens calendar when show method is called', () => {
+    const wrapper = mountWithOptions();
+
+    wrapper.vm.show();
+
+    expect(Pikaday.prototype.show).toHaveBeenCalled();
+  });
+
   describe('when `ariaLabel` prop is passed', () => {
     it('configures pikaday with the given label', () => {
       const ariaLabel = 'Meaningful description';

package/src/components/base/datepicker/datepicker.vue

@@ -179,7 +179,7 @@ export default {
   },
   computed: {
     formattedDate() {
-      return this.$options.pikaday.calendar && this.$options.pikaday.calendar.toString();
+      return 'calendar' in this && this.calendar.toString();
     },
     customTrigger() {
       return isString(this.target) && this.target !== '';
@@ -207,21 +207,21 @@ export default {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.$options.pikaday.calendar.getDate())) {
-        this.$options.pikaday.calendar.setDate(val, true);
+      if (!areDatesEqual(val, this.calendar.getDate())) {
+        this.calendar.setDate(val, true);
       }
     },
     minDate(minDate) {
-      this.$options.pikaday.calendar.setMinDate(minDate);
+      this.calendar.setMinDate(minDate);
     },
     maxDate(maxDate) {
-      this.$options.pikaday.calendar.setMaxDate(maxDate);
+      this.calendar.setMaxDate(maxDate);
     },
     startRange(startRange) {
-      this.$options.pikaday.calendar.setStartRange(startRange);
+      this.calendar.setStartRange(startRange);
     },
     endRange(endRange) {
-      this.$options.pikaday.calendar.setEndRange(endRange);
+      this.calendar.setEndRange(endRange);
     },
   },
   mounted() {
@@ -279,16 +279,21 @@ export default {
       pikadayConfig.i18n = this.i18n;
     }
 
-    this.$options.pikaday.calendar = new Pikaday(pikadayConfig);
+    this.calendar = new Pikaday(pikadayConfig);
 
     if (this.startOpened) {
-      this.$options.pikaday.calendar.show();
+      this.calendar.show();
     }
   },
   beforeDestroy() {
-    this.$options.pikaday.calendar.destroy();
+    this.calendar.destroy();
   },
   methods: {
+    // is used to open datepicker programmatically
+    show() {
+      this.calendar.show();
+    },
+
     selected(date) {
       /**
        * Emitted when a new date has been selected.
@@ -324,18 +329,11 @@ export default {
     onKeydown() {
       if (this.textInput === '') {
         const resetDate = this.minDate || null;
-        this.$options.pikaday.calendar.setDate(resetDate);
+        this.calendar.setDate(resetDate);
         this.selected(resetDate);
       }
     },
   },
-
-  // Vue3 will make this.$options shallow-readonly
-  // that means that in order to store anything in $options
-  // we need an object as a container
-  pikaday: {
-    calendar: null,
-  },
 };
 </script>