@gitlab/ui 103.5.0 → 103.5.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [103.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.5.0...v103.5.1) (2024-11-26)
+
+
+### Bug Fixes
+
+* **GlIntersperse:** Ignore empty nodes in Vue 3 ([91ec35b](https://gitlab.com/gitlab-org/gitlab-ui/commit/91ec35b664aa9c8a8959247e92dd29c1409e57ea))
+
 # [103.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.4.1...v103.5.0) (2024-11-22)
 
 

package/dist/components/utilities/intersperse/intersperse.js

@@ -1,13 +1,27 @@
+import Vue from 'vue';
 import compose from 'lodash/fp/compose';
 import fill from 'lodash/fp/fill';
 import filter from 'lodash/fp/filter';
 import { insert, intersperse } from '../../../utils/data_utils';
+import { isVnodeEmpty } from '../../../utils/is_slot_empty';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
-const containsWhitespaceOnly = vNode => vNode.text.trim() === '';
-const isTag = vNode => typeof vNode.tag === 'string';
-const filterWhitespaceNodes = filter(vNode => isTag(vNode) || !containsWhitespaceOnly(vNode));
+const filterEmptyNodesVue2 = filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
+const {
+  Fragment
+} = Vue;
+const filterEmptyNodesVue3 = vNode => {
+  return vNode.reduce((acc, node) => {
+    if (Fragment && node.type === Fragment && Array.isArray(node.children)) {
+      acc.push(...node.children);
+    } else {
+      acc.push(node);
+    }
+    return acc;
+  }, []).filter(node => !isVnodeEmpty(node));
+};
+const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
 const insertAfterSecondLastItem = insert(-1);
 const replaceSecondLastItem = fill(-2, -1);
 
@@ -44,7 +58,7 @@ var script = {
       slots,
       data
     } = context;
-    const filterAndSeparate = compose(addLastSeparator(lastSeparator), intersperse(separator), filterWhitespaceNodes);
+    const filterAndSeparate = compose(addLastSeparator(lastSeparator), intersperse(separator), filterEmptyNodes);
     return createElement('span', data, filterAndSeparate(slots().default));
   }
 };

package/dist/utils/is_slot_empty.js

@@ -3,23 +3,28 @@ import Vue from 'vue';
 // Fragment will be available only in Vue.js 3
 const {
   Fragment,
-  Comment
+  Comment,
+  Text
 } = Vue;
 function callIfNeeded(fnOrResult, args) {
   return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
 }
-function isEmpty(vnode) {
+function isVnodeEmpty(vnode) {
   if (!vnode || Comment && vnode.type === Comment) {
     return true;
   }
+  if (Text && vnode.type === Text && !vnode.children.trim()) {
+    // Vue.js 3 text string is located in the children
+    return true;
+  }
   if (Array.isArray(vnode)) {
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.every(isEmpty);
+    return vnode.every(isVnodeEmpty);
   }
   if (Fragment && vnode.type === Fragment) {
     // Vue.js 3 fragment, check children
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.children.every(isEmpty);
+    return vnode.children.every(isVnodeEmpty);
   }
   return false;
 }
@@ -32,7 +37,7 @@ function isSlotEmpty(vueInstance, slot, slotArgs) {
   callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs) : (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
 
   // eslint-disable-next-line unicorn/no-array-callback-reference
-  return isEmpty(slotContent);
+  return isVnodeEmpty(slotContent);
 }
 
-export { isSlotEmpty };
+export { isSlotEmpty, isVnodeEmpty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "103.5.0",
+  "version": "103.5.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -143,16 +143,17 @@
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "cypress": "13.15.2",
+    "cypress": "13.16.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.0.0",
     "esbuild": "^0.18.0",
     "eslint": "8.57.1",
+    "eslint-formatter-gitlab": "^5.1.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.10.1",
+    "eslint-plugin-storybook": "0.11.1",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
     "globby": "^11.1.0",
@@ -167,8 +168,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.48.2",
-    "playwright-core": "^1.48.2",
+    "playwright": "^1.49.0",
+    "playwright-core": "^1.49.0",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",

package/src/components/utilities/intersperse/intersperse.vue

@@ -1,15 +1,31 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
+import Vue from 'vue';
 import compose from 'lodash/fp/compose';
 import fill from 'lodash/fp/fill';
 import filter from 'lodash/fp/filter';
-
 import { intersperse, insert } from '../../../utils/data_utils';
+import { isVnodeEmpty } from '../../../utils/is_slot_empty';
+
+const filterEmptyNodesVue2 = filter(
+  (vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== ''
+);
 
-const containsWhitespaceOnly = (vNode) => vNode.text.trim() === '';
-const isTag = (vNode) => typeof vNode.tag === 'string';
-const filterWhitespaceNodes = filter((vNode) => isTag(vNode) || !containsWhitespaceOnly(vNode));
+const { Fragment } = Vue;
+const filterEmptyNodesVue3 = (vNode) => {
+  return vNode
+    .reduce((acc, node) => {
+      if (Fragment && node.type === Fragment && Array.isArray(node.children)) {
+        acc.push(...node.children);
+      } else {
+        acc.push(node);
+      }
+      return acc;
+    }, [])
+    .filter((node) => !isVnodeEmpty(node));
+};
 
+const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
 const insertAfterSecondLastItem = insert(-1);
 const replaceSecondLastItem = fill(-2, -1);
 
@@ -51,7 +67,7 @@ export default {
     const filterAndSeparate = compose(
       addLastSeparator(lastSeparator),
       intersperse(separator),
-      filterWhitespaceNodes
+      filterEmptyNodes
     );
 
     return createElement('span', data, filterAndSeparate(slots().default));

package/src/index.js

@@ -4,7 +4,6 @@
 // builds. We do this to avoid having the stylesheet included multiple times in Storybook.
 
 // Components
-// ADD COMPONENT EXPORTS - needed for yarn generate:component. Do not remove
 export { default as GlDuoWorkflowPrompt } from './components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.vue';
 export { default as GlDuoWorkflowPanel } from './components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue';
 export { default as GlTableLite } from './components/base/table_lite/table_lite.vue';

package/src/scss/components.scss

@@ -2,7 +2,6 @@
 // Import component stylesheets located in components here. i.e.
 // @import '../components/base/dropdown/dropdown'
 //
-// ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
 @import '../components/experimental/duo/chat/duo_chat';
 @import '../components/experimental/duo/chat/components/duo_chat_message/duo_chat_message';
 @import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';

package/src/utils/is_slot_empty.js

@@ -1,26 +1,31 @@
 import Vue from 'vue';
 
 // Fragment will be available only in Vue.js 3
-const { Fragment, Comment } = Vue;
+const { Fragment, Comment, Text } = Vue;
 
 function callIfNeeded(fnOrResult, args) {
   return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
 }
 
-function isEmpty(vnode) {
+export function isVnodeEmpty(vnode) {
   if (!vnode || (Comment && vnode.type === Comment)) {
     return true;
   }
 
+  if (Text && vnode.type === Text && !vnode.children.trim()) {
+    // Vue.js 3 text string is located in the children
+    return true;
+  }
+
   if (Array.isArray(vnode)) {
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.every(isEmpty);
+    return vnode.every(isVnodeEmpty);
   }
 
   if (Fragment && vnode.type === Fragment) {
     // Vue.js 3 fragment, check children
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.children.every(isEmpty);
+    return vnode.children.every(isVnodeEmpty);
   }
 
   return false;
@@ -36,5 +41,5 @@ export function isSlotEmpty(vueInstance, slot, slotArgs) {
     : vueInstance.$scopedSlots[slot]?.(slotArgs);
 
   // eslint-disable-next-line unicorn/no-array-callback-reference
-  return isEmpty(slotContent);
+  return isVnodeEmpty(slotContent);
 }