@gitlab/ui 63.1.3 → 63.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [63.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v63.2.0...v63.2.1) (2023-05-23)
+
+
+### Bug Fixes
+
+* **GlAreaChart:** Replace the getDom to getZr for supporting edge ([2a5bef8](https://gitlab.com/gitlab-org/gitlab-ui/commit/2a5bef897dcd54422cb1163e497461558a8f06ac))
+
+# [63.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v63.1.3...v63.2.0) (2023-05-23)
+
+
+### Features
+
+* Add TruncateText component ([5539662](https://gitlab.com/gitlab-org/gitlab-ui/commit/553966208df8fc23736080619b68f73a56e41a48))
+
 ## [63.1.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v63.1.2...v63.1.3) (2023-05-22)
 
 

package/dist/components/charts/area/area.js

@@ -218,8 +218,8 @@ var script = {
     }
   },
   beforeDestroy() {
-    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
-    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
+    this.chart.getZr().off('mousemove', this.debouncedShowHideTooltip);
+    this.chart.getZr().off('mouseout', this.debouncedShowHideTooltip);
     this.chart.off('mouseout', this.hideAnnotationsTooltip);
     this.chart.off('mouseover', this.onChartMouseOver);
   },
@@ -244,8 +244,8 @@ var script = {
       // when the mouse is hovered over the parent container
       // of echarts' svg element. This works only for data points
       // and not markPoints.
-      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
+      chart.getZr().on('mousemove', this.debouncedShowHideTooltip);
+      chart.getZr().on('mouseout', this.debouncedShowHideTooltip);
 
       // eCharts inbuild mouse events
       // https://echarts.apache.org/en/api.html#events.Mouse%20events
@@ -264,7 +264,10 @@ var script = {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    showHideTooltip(mouseEvent) {
+    showHideTooltip(_ref) {
+      let {
+        event: mouseEvent
+      } = _ref;
       this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
       this.dataTooltipPosition = {
         left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,

package/dist/components/utilities/truncate_text/constants.js

@@ -0,0 +1,7 @@
+const STATES = {
+  INITIAL: 'initial',
+  TRUNCATED: 'truncated',
+  EXTENDED: 'extended'
+};
+
+export { STATES };

package/dist/components/utilities/truncate_text/truncate_text.js

@@ -0,0 +1,136 @@
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import GlButton from '../../base/button/button';
+import { STATES } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlTruncateText',
+  components: {
+    GlButton
+  },
+  directives: {
+    GlResizeObserver: GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * The text for the 'Show more' button
+     */
+    showMoreText: {
+      type: String,
+      required: false,
+      default: 'Show more'
+    },
+    /**
+     * The text for the 'Show less' button
+     */
+    showLessText: {
+      type: String,
+      required: false,
+      default: 'Show less'
+    },
+    /**
+     * The number of lines that are initially visible on larger screens
+     */
+    lines: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    /**
+     * The number of lines that are initially visible on smaller screens
+     */
+    mobileLines: {
+      type: Number,
+      required: false,
+      default: 10
+    }
+  },
+  data() {
+    return {
+      state: STATES.INITIAL
+    };
+  },
+  computed: {
+    showTruncationToggle() {
+      return this.isTruncated || this.isExtended;
+    },
+    truncationToggleText() {
+      return this.isTruncated ? this.showMoreText : this.showLessText;
+    },
+    cssVariables() {
+      return {
+        '--lines': this.lines,
+        '--mobile-lines': this.mobileLines
+      };
+    },
+    truncationClasses() {
+      return this.isExtended ? null : 'gl-truncate-text gl-overflow-hidden';
+    },
+    ariaExpanded() {
+      return (!this.isTruncated).toString();
+    },
+    isTruncated() {
+      return this.state === STATES.TRUNCATED;
+    },
+    isExtended() {
+      return this.state === STATES.EXTENDED;
+    }
+  },
+  methods: {
+    onResize(_ref) {
+      let {
+        target
+      } = _ref;
+      if (target.scrollHeight > target.offsetHeight) {
+        this.state = STATES.TRUNCATED;
+      } else if (this.isTruncated) {
+        this.state = STATES.INITIAL;
+      }
+    },
+    toggleTruncation() {
+      if (this.isTruncated) {
+        this.state = STATES.EXTENDED;
+      } else if (this.isExtended) {
+        this.state = STATES.TRUNCATED;
+      }
+    }
+  }
+};
+
+/* 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('section',[_c('article',{directives:[{name:"gl-resize-observer",rawName:"v-gl-resize-observer",value:(_vm.onResize),expression:"onResize"}],class:_vm.truncationClasses,style:(_vm.cssVariables),attrs:{"aria-expanded":_vm.ariaExpanded}},[_vm._t("default")],2),_vm._v(" "),(_vm.showTruncationToggle)?_c('gl-button',{attrs:{"variant":"link"},on:{"click":_vm.toggleTruncation}},[_vm._v(_vm._s(_vm.truncationToggleText))]):_vm._e()],1)};
+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__ = __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 default __vue_component__;