@gitlab/ui 48.1.2 → 48.3.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [48.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.2.0...v48.3.0) (2022-10-24)
+
+
+### Features
+
+* **Color:** Update aqua error ([9092b09](https://gitlab.com/gitlab-org/gitlab-ui/commit/9092b09130e1d4f03644e87d4a8dacecf6e2e1eb))
+* **Color:** Update chart snapshots ([6cff69d](https://gitlab.com/gitlab-org/gitlab-ui/commit/6cff69ded0073ed9ddce09da29a89211dc1f7b50))
+* **Color:** Update data viz variables ([3c0edbb](https://gitlab.com/gitlab-org/gitlab-ui/commit/3c0edbb30b6f5078f8938627418fd9349f788db2))
+
+# [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/dist/components/base/filtered_search/filtered_search.js

@@ -56,7 +56,31 @@ var script = {
     availableTokens: {
       type: Array,
       required: false,
-      default: () => []
+      default: () => [],
+
+      validator(value) {
+        // eslint-disable-next-line no-underscore-dangle
+        if (!value.__v_raw) {
+          // This is Vue 2
+          return true;
+        } // eslint-disable-next-line no-underscore-dangle
+
+
+        const isOk = Array.isArray(value) && value.every(_ref => {
+          let {
+            token
+          } = _ref;
+          return token.__v_skip;
+        });
+
+        if (!isOk) {
+          // eslint-disable-next-line no-console
+          console.warn('You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw');
+        }
+
+        return isOk;
+      }
+
     },
 
     /**

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -19,6 +19,8 @@ const DEFAULT_OPERATORS = [{
 }];
 var script = {
   name: 'GlFilteredSearchToken',
+  // FIXME: temporary workaround to ensure compatibility with @vue/compat
+  __v_skip: true,
   components: {
     GlToken,
     GlFilteredSearchTokenSegment

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -6,6 +6,49 @@ import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
 import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+// @vue/compat will render comment nodes for v-if and comments in HTML
+// Also it makes use of fragments - both comments and nodes are Symbols.
+// In Vue3 all of them (Comment, Fragment) are exposed as named exports on vue module
+// However we want to maintain compatibility with Vue2, so taking this hacky approach
+// relying on Symbol.toString()
+// I'm keeping this directly here instead of helper to increase probability of
+// fixing ASAP and because I don't want this helper to be reused
+// FIXME: replace with Symbols when we will switch to Vue3
+
+const isVue3Comment = vnode => {
+  var _vnode$type, _vnode$type$toString;
+
+  return (vnode === null || vnode === void 0 ? void 0 : (_vnode$type = vnode.type) === null || _vnode$type === void 0 ? void 0 : (_vnode$type$toString = _vnode$type.toString) === null || _vnode$type$toString === void 0 ? void 0 : _vnode$type$toString.call(_vnode$type)) === 'Symbol(Comment)';
+};
+
+const isVue3Fragment = vnode => {
+  var _vnode$type2, _vnode$type2$toString;
+
+  return (vnode === null || vnode === void 0 ? void 0 : (_vnode$type2 = vnode.type) === null || _vnode$type2 === void 0 ? void 0 : (_vnode$type2$toString = _vnode$type2.toString) === null || _vnode$type2$toString === void 0 ? void 0 : _vnode$type2$toString.call(_vnode$type2)) === 'Symbol(Fragment)';
+};
+
+const isVNodeEmpty = vnode => {
+  if (isVue3Fragment(vnode)) {
+    // vnode.children might be an array or single node in edge cases
+    return Array.isArray(vnode.children) ? vnode.children.every(isVNodeEmpty) : isVNodeEmpty(vnode.children);
+  }
+
+  if (isVue3Comment(vnode)) {
+    return true;
+  }
+
+  return false;
+};
+
+const isSlotNotEmpty = slot => {
+  if (!slot) {
+    return false;
+  }
+
+  const vnodes = typeof slot === 'function' ? slot() : slot;
+  return !(Array.isArray(vnodes) ? vnodes.every(isVNodeEmpty) : isVNodeEmpty(vnodes));
+};
+
 var script = {
   name: 'GlFilteredSearchTokenSegment',
   components: {
@@ -132,7 +175,7 @@ var script = {
       var _this$options2;
 
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.length) || this.$slots.suggestions;
+      return ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.length) || isSlotNotEmpty(this.$slots.suggestions);
     },
 
     defaultSuggestedValue() {