@gitlab/ui 124.1.1 → 124.2.0

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -4,6 +4,7 @@ import GlAvatar from '../avatar/avatar';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { breadCrumbSizeOptions } from '../../../utils/constants';
+import ClipboardButton from '../../shared_components/clipboard_button/clipboard_button';
 import GlBreadcrumbItem from './breadcrumb_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -14,7 +15,8 @@ var script = {
   components: {
     GlBreadcrumbItem,
     GlAvatar,
-    GlDisclosureDropdown
+    GlDisclosureDropdown,
+    ClipboardButton
   },
   directives: {
     GlTooltip: GlTooltipDirective
@@ -67,6 +69,30 @@ var script = {
       required: false,
       default: breadCrumbSizeOptions.sm,
       validator: value => Object.keys(breadCrumbSizeOptions).includes(value)
+    },
+    /**
+     * Copy to clipboard button for breadcrumbs path.
+     */
+    showClipboardButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Custom path for copy to clipboard button. By default, it resolves to all items text values with `/` separator.
+     */
+    pathToCopy: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Custom tooltip text for clipboard button.
+     */
+    clipboardTooltipText: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   data() {
@@ -104,6 +130,11 @@ var script = {
     },
     avatarSize() {
       return this.size === 'sm' ? 16 : 24;
+    },
+    clipboardButtonText() {
+      if (this.pathToCopy) return this.pathToCopy;
+      const items = Array.from(this.items, item => item.text);
+      return items.join('/');
     }
   },
   watch: {
@@ -206,7 +237,7 @@ var 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('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:[_vm.hideItemClass(item), _vm.itemClass],attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])],1)})],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:[_vm.hideItemClass(item), _vm.itemClass],attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/index.js

@@ -94,6 +94,7 @@ export { default as GlAccordionItem } from './base/accordion/accordion_item';
 export { default as GlDashboardLayout } from './dashboards/dashboard_layout/dashboard_layout';
 export { default as GlDashboardPanel } from './dashboards/dashboard_panel/dashboard_panel';
 export { default as GlExperimentBadge } from './experimental/experiment_badge/experiment_badge';
+export { default as GlClipboardButton } from './shared_components/clipboard_button/clipboard_button';
 export { default as GlAnimatedNumber } from './utilities/animated_number/animated_number';
 export { default as GlFriendlyWrap } from './utilities/friendly_wrap/friendly_wrap';
 export { default as GlIntersectionObserver } from './utilities/intersection_observer/intersection_observer';

package/dist/components/shared_components/clipboard_button/clipboard_button.js

@@ -0,0 +1,100 @@
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import GlButton from '../../base/button/button';
+import { translate } from '../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'ClipboardButton',
+  components: {
+    GlButton
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    /**
+     * The text to copy to clipboard
+     */
+    text: {
+      type: String,
+      required: true
+    },
+    /**
+     * The tooltip text shown on hover
+     */
+    title: {
+      type: String,
+      required: false,
+      default: () => translate('ClipboardButton.title', 'Copy to clipboard')
+    },
+    /**
+     * Button size
+     */
+    size: {
+      type: String,
+      required: false,
+      default: 'medium'
+    }
+  },
+  data() {
+    return {
+      localTitle: this.title,
+      titleTimeout: null
+    };
+  },
+  methods: {
+    updateTooltip(title) {
+      this.localTitle = title;
+      clearTimeout(this.titleTimeout);
+      this.titleTimeout = setTimeout(() => {
+        this.localTitle = this.title;
+      }, 1000);
+    },
+    async handleClick() {
+      try {
+        await navigator.clipboard.writeText(this.text);
+        this.updateTooltip(translate('ClipboardButton.copied', 'Copied'));
+      } catch {
+        this.updateTooltip(translate('ClipboardButton.error', 'Copy failed'));
+      }
+    }
+  }
+};
+
+/* 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('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover.focus.top",modifiers:{"hover":true,"focus":true,"top":true}}],attrs:{"variant":"default","category":"tertiary","icon":"copy-to-clipboard","size":_vm.size,"title":_vm.localTitle,"aria-label":_vm.localTitle},on:{"click":_vm.handleClick}})};
+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 { __vue_component__ as default };