@gitlab/ui 132.0.1 → 132.0.3

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -0,0 +1,196 @@
+import GlLink from '../../link/link';
+import GlIcon from '../../icon/icon';
+import { ENTER, SPACE } from '../constants';
+import { stopEvent } from '../../../../utils/utils';
+import { dropdownItemVariantOptions } from '../../../../utils/constants';
+import { isItem } from './utils';
+import { DISCLOSURE_DROPDOWN_ITEM_NAME } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ITEM_CLASS = 'gl-new-dropdown-item';
+var script = {
+  name: DISCLOSURE_DROPDOWN_ITEM_NAME,
+  ITEM_CLASS,
+  components: {
+    GlLink,
+    GlIcon
+  },
+  props: {
+    item: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: isItem
+    },
+    /**
+     * The variant of the dropdown item.
+     */
+    variant: {
+      type: String,
+      default: null,
+      validator(value) {
+        return dropdownItemVariantOptions[value] !== undefined;
+      },
+      required: false
+    },
+    /**
+     * The name of the icon to display in the dropdown item.
+     */
+    icon: {
+      type: String,
+      default: null,
+      required: false
+    },
+    /**
+     * Does dropdown have icons
+     */
+    siblingsHaveIcons: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  computed: {
+    isLink() {
+      var _this$item, _this$item2;
+      return typeof ((_this$item = this.item) === null || _this$item === void 0 ? void 0 : _this$item.href) === 'string' || typeof ((_this$item2 = this.item) === null || _this$item2 === void 0 ? void 0 : _this$item2.to) !== 'undefined';
+    },
+    isCustomContent() {
+      return Boolean(this.$scopedSlots.default);
+    },
+    itemComponent() {
+      const {
+        item
+      } = this;
+      if (this.isLink) return {
+        is: GlLink,
+        attrs: {
+          href: item.href,
+          to: item.to,
+          variant: 'unstyled',
+          ...item.extraAttrs
+        },
+        listeners: {
+          click: this.action
+        }
+      };
+      return {
+        is: 'button',
+        attrs: {
+          ...(item === null || item === void 0 ? void 0 : item.extraAttrs),
+          type: 'button'
+        },
+        listeners: {
+          click: () => {
+            var _item$action;
+            item === null || item === void 0 ? void 0 : (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(undefined, item);
+            this.action();
+          }
+        }
+      };
+    },
+    listIndex() {
+      var _this$item3, _this$item3$extraAttr;
+      return (_this$item3 = this.item) !== null && _this$item3 !== void 0 && (_this$item3$extraAttr = _this$item3.extraAttrs) !== null && _this$item3$extraAttr !== void 0 && _this$item3$extraAttr.disabled ? null : 0;
+    },
+    componentIndex() {
+      var _this$item4, _this$item4$extraAttr;
+      return (_this$item4 = this.item) !== null && _this$item4 !== void 0 && (_this$item4$extraAttr = _this$item4.extraAttrs) !== null && _this$item4$extraAttr !== void 0 && _this$item4$extraAttr.disabled ? null : -1;
+    },
+    itemVariant() {
+      var _this$item5;
+      return this.variant || ((_this$item5 = this.item) === null || _this$item5 === void 0 ? void 0 : _this$item5.variant);
+    },
+    classes() {
+      var _this$item$wrapperCla, _this$item6;
+      return [this.$options.ITEM_CLASS, (_this$item$wrapperCla = (_this$item6 = this.item) === null || _this$item6 === void 0 ? void 0 : _this$item6.wrapperClass) !== null && _this$item$wrapperCla !== void 0 ? _this$item$wrapperCla : '',
+      // This isn't a Tailwind class, so this lint rule isn't relevant.
+      // It just so happens this class has the same prefix `gl-`.
+      this.itemVariant && this.itemVariant !== 'default' ?
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      `gl-new-dropdown-item-${this.itemVariant}` : ''];
+    },
+    iconName() {
+      var _this$item7;
+      return this.icon || ((_this$item7 = this.item) === null || _this$item7 === void 0 ? void 0 : _this$item7.icon);
+    },
+    wrapperListeners() {
+      const listeners = {
+        keydown: this.onKeydown
+      };
+      if (this.isCustomContent) {
+        listeners.click = this.action;
+      }
+      return listeners;
+    }
+  },
+  methods: {
+    onKeydown(event) {
+      const {
+        code
+      } = event;
+      if (code === ENTER || code === SPACE) {
+        if (this.isCustomContent) {
+          this.action();
+        } else {
+          stopEvent(event);
+          /** Instead of simply navigating or calling the action, we want
+           * the `a/button` to be the target of the event as it might have additional attributes.
+           * E.g. `a` might have `target` attribute.
+           */
+          const e = new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true
+          });
+          if (this.isLink) {
+            this.$refs.item.$el.dispatchEvent(e);
+          } else {
+            var _this$$refs$item;
+            (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : _this$$refs$item.dispatchEvent(e);
+          }
+        }
+      }
+    },
+    action() {
+      this.$emit('action', this.item);
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',_vm._g({class:_vm.classes,attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [(_vm.iconName || _vm.siblingsHaveIcons)?_c('span',{staticClass:"gl-new-dropdown-item-icon"},[(_vm.iconName)?_c('gl-icon',{attrs:{"name":_vm.iconName,"variant":"current"}}):_vm._e()],1):_vm._e(),_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { ITEM_CLASS, __vue_component__ as default };

package/dist/components/base/new_dropdowns/disclosure/mock_data.js

@@ -0,0 +1,168 @@
+const mockItems = [{
+  text: 'Mark as draft',
+  href: 'https://gitlab.com',
+  extraAttrs: {
+    target: '_blank',
+    rel: 'nofollow',
+    'data-method': 'put'
+  }
+}, {
+  text: 'Create new',
+  href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+  extraAttrs: {
+    rel: 'nofollow',
+    target: '_blank'
+  }
+}, {
+  text: 'Edit merge request',
+  to: '/edit',
+  extraAttrs: {
+    'data-uuid': '1234'
+  }
+}, {
+  text: 'Lock discussion',
+  to: {
+    path: '/lock',
+    query: {
+      show: 1234
+    }
+  }
+}, {
+  text: 'Close merge request',
+  variant: 'danger',
+  action: () => {
+    // eslint-disable-next-line no-console
+    console.log('CLOSED');
+  },
+  extraAttrs: {
+    rel: 'nofollow',
+    'data-method': 'put'
+  }
+}];
+const mockButtons = [{
+  text: 'Checks'
+}, {
+  text: 'Projects'
+}, {
+  text: 'Standards'
+}];
+const mockItemsCustomItem = [{
+  text: 'Assigned to you',
+  href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
+  count: '2',
+  extraAttrs: {
+    target: '_blank',
+    rel: 'nofollow'
+  }
+}, {
+  text: 'Review requests from you',
+  href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
+  count: 0,
+  extraAttrs: {
+    target: '_blank',
+    rel: 'nofollow'
+  }
+}, {
+  text: 'I am only visible on mobile!',
+  action: () => {
+    // eslint-disable-next-line no-console
+    console.log('clicked!');
+  },
+  wrapperClass: 'sm:!gl-hidden'
+}];
+const mockGroupsCustomItem = [{
+  name: 'Merge requests',
+  items: [{
+    text: 'Assigned to you',
+    href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
+    count: 1
+  }, {
+    text: 'Review requests from you',
+    href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
+    count: 4
+  }]
+}];
+const mockGroups = [{
+  name: 'This project',
+  items: [{
+    text: 'New issue',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New merge request',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New snippet',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/snippets/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }]
+}, {
+  name: 'GitLab',
+  items: [{
+    text: 'New project',
+    href: 'https://gitlab.com/projects/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New group',
+    href: 'https://gitlab.com/groups/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'New snippet',
+    href: 'https://gitlab.com/snippets/new',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }]
+}];
+const mockProfileGroups = [{
+  items: [{
+    text: 'Set status',
+    href: 'https://gitlab.com',
+    icon: 'status_success',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'Edit profile',
+    href: '#',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }, {
+    text: 'Preferences',
+    href: '#',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow'
+    }
+  }]
+}, {
+  items: [{
+    text: 'Sign out',
+    action: () => {
+      // eslint-disable-next-line no-alert
+      window.confirm('Are you sure?');
+    }
+  }]
+}];
+
+export { mockButtons, mockGroups, mockGroupsCustomItem, mockItems, mockItemsCustomItem, mockProfileGroups };

package/dist/components/base/new_dropdowns/disclosure/utils.js

@@ -0,0 +1,84 @@
+import Vue from 'vue';
+import { isFunction } from 'lodash-es';
+import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+
+const itemValidator = item => {
+  var _item$text;
+  return (item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.length) > 0 && !Array.isArray(item === null || item === void 0 ? void 0 : item.items);
+};
+const isItem = item => Boolean(item) && itemValidator(item);
+const isGroup = group => Boolean(group) && Array.isArray(group.items) && Boolean(group.items.length) &&
+// eslint-disable-next-line unicorn/no-array-callback-reference
+group.items.every(isItem);
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const itemsValidator = items => items.every(isItem) || items.every(isGroup);
+const doSomeItemsHaveIcon = items => {
+  return items.some(item => item && typeof item === 'object' && 'icon' in item);
+};
+const isListItem = tag => ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
+const isValidSlotTagVue2 = vNode => {
+  var _vNode$componentOptio, _vNode$componentOptio2, _vNode$componentOptio3, _vNode$componentOptio4;
+  if (!vNode) return false;
+  const tag = ((_vNode$componentOptio = vNode.componentOptions) === null || _vNode$componentOptio === void 0 ? void 0 : _vNode$componentOptio.tag) || vNode.tag;
+  if (isListItem(tag)) return true;
+  const componentName = (_vNode$componentOptio2 = vNode.componentOptions) === null || _vNode$componentOptio2 === void 0 ? void 0 : (_vNode$componentOptio3 = _vNode$componentOptio2.Ctor) === null || _vNode$componentOptio3 === void 0 ? void 0 : (_vNode$componentOptio4 = _vNode$componentOptio3.options) === null || _vNode$componentOptio4 === void 0 ? void 0 : _vNode$componentOptio4.name;
+  return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(componentName);
+};
+const isValidSlotTagVue3 = vNode => {
+  var _vNode$type;
+  if (!vNode) return false;
+  return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes((_vNode$type = vNode.type) === null || _vNode$type === void 0 ? void 0 : _vNode$type.name) || vNode.type === 'li';
+};
+const isSkippableVue2 = vNode => {
+  if (!vNode) return true;
+  if (vNode.isComment) return true;
+  if (!vNode.tag && typeof vNode.text === 'string' && !vNode.text.trim()) return true;
+  return false;
+};
+const hasOnlyListItemsVue2 = defaultSlot => {
+  const nodes = defaultSlot();
+  if (!Array.isArray(nodes)) {
+    return false;
+  }
+  const candidateNodes = nodes.filter(vNode => !isSkippableVue2(vNode));
+  if (candidateNodes.length === 0) return true;
+  return candidateNodes.every(vNode => isValidSlotTagVue2(vNode));
+};
+const isSkippableVue3 = vNode => {
+  var _vNode$children;
+  if (!vNode) return true;
+  if (vNode.type === Vue.Comment) return true;
+  if (vNode.type === Vue.Text && !((_vNode$children = vNode.children) !== null && _vNode$children !== void 0 && _vNode$children.trim())) return true;
+  if (vNode.type === Vue.Fragment && (!vNode.children || vNode.children.length === 0)) return true;
+  return false;
+};
+const validateNodesRecursiveVue3 = nodes => {
+  if (!Array.isArray(nodes) || nodes.length === 0) return true;
+  const candidateNodes = nodes.filter(vNode => !isSkippableVue3(vNode));
+  if (candidateNodes.length === 0) return true;
+  return candidateNodes.every(vNode => {
+    if (isValidSlotTagVue3(vNode)) return true;
+    if (vNode.type === Vue.Fragment && Array.isArray(vNode.children)) {
+      return validateNodesRecursiveVue3(vNode.children);
+    }
+    return false;
+  });
+};
+const hasOnlyListItemsVue3 = defaultSlot => {
+  const nodes = defaultSlot();
+  const fragment = nodes.find(node => Array.isArray(node.children) && node.children.length);
+  const targetNodes = fragment ? fragment.children : nodes;
+  return validateNodesRecursiveVue3(targetNodes);
+};
+const hasOnlyListItems = defaultSlot => {
+  if (!isFunction(defaultSlot)) {
+    return false;
+  }
+  if (Vue.version.startsWith('3')) {
+    return hasOnlyListItemsVue3(defaultSlot);
+  }
+  return hasOnlyListItemsVue2(defaultSlot);
+};
+
+export { doSomeItemsHaveIcon, hasOnlyListItems, isGroup, isItem, itemsValidator };