@gitlab/ui 131.3.0 → 131.3.1

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

@@ -1,196 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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 };