@gitlab/ui 132.0.1 → 132.0.3

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -0,0 +1,394 @@
+import { uniqueId } from 'lodash-es';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
+import GlDatepicker from '../datepicker/datepicker';
+import GlIcon from '../icon/icon';
+import { datepickerWidthOptionsMap } from '../../../utils/constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const CONTAINER_CLASSES = ['gl-flex', 'gl-items-baseline', 'gl-flex-wrap', '@sm:gl-flex-nowrap', '@sm:gl-gap-3'];
+var script = {
+  name: 'GlDaterangePicker',
+  components: {
+    GlDatepicker,
+    GlIcon
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    /**
+     * Label text for the start date picker.
+     */
+    fromLabel: {
+      type: String,
+      required: false,
+      default: 'From'
+    },
+    /**
+     * Label text for the end date picker.
+     */
+    toLabel: {
+      type: String,
+      required: false,
+      default: 'To'
+    },
+    /**
+     * Accessible label for the start date input.
+     */
+    fromAriaLabel: {
+      type: String,
+      required: false,
+      default: 'From date'
+    },
+    /**
+     * Accessible label for the end date input.
+     */
+    toAriaLabel: {
+      type: String,
+      required: false,
+      default: 'To date'
+    },
+    /**
+     * The selected date range object containing `startDate` and `endDate` properties.
+     */
+    value: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    /**
+     * Internationalization object for Pikaday labels and month/day names.
+     */
+    i18n: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    /**
+     * The earliest selectable date for the start date picker.
+     */
+    defaultMinDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    /**
+     * The latest selectable date for the end date picker.
+     */
+    defaultMaxDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    /**
+     * Initial value for the start date.
+     */
+    defaultStartDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    /**
+     * Initial value for the end date.
+     */
+    defaultEndDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    /**
+     * Maximum number of days allowed between start and end date. Set to 0 for no limit.
+     */
+    maxDateRange: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    /**
+     * Additional CSS class(es) for the start date picker container.
+     */
+    startPickerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Selector of element that triggers the start date picker.
+     */
+    startPickerTarget: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * DOM node selector to render the start date calendar into.
+     */
+    startPickerContainer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Validation state for the start date picker input.
+     */
+    startPickerState: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Additional CSS class(es) for the end date picker container.
+     */
+    endPickerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Selector of element that triggers the end date picker.
+     */
+    endPickerTarget: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * DOM node selector to render the end date calendar into.
+     */
+    endPickerContainer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Validation state for the end date picker input.
+     */
+    endPickerState: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Additional CSS class(es) for the label elements.
+     */
+    labelClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Additional CSS class for the Pikaday calendar theme.
+     */
+    theme: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Whether to allow selecting the same date for start and end.
+     */
+    sameDaySelection: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * If provided, renders an info icon with a tooltip.
+     */
+    tooltip: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Additional class(es) to apply to the date range indicator section.
+     */
+    dateRangeIndicatorClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: ''
+    },
+    /**
+     * Whether the start date picker should be open on mount.
+     */
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Maximum width of the Datepicker.
+     */
+    width: {
+      type: String,
+      required: false,
+      default: null,
+      validator: value => Object.keys(datepickerWidthOptionsMap).includes(value)
+    }
+  },
+  data() {
+    return {
+      fromCalendarMaxDate: this.defaultMaxDate ? getDateInPast(this.defaultMaxDate, 1) : null,
+      startDate: this.defaultStartDate,
+      endDate: this.defaultEndDate,
+      openToCalendar: false
+    };
+  },
+  computed: {
+    effectiveMaxDateRange() {
+      return this.sameDaySelection ? this.maxDateRange - 1 : this.maxDateRange;
+    },
+    toCalendarMinDate() {
+      if (!this.startDate) return null;
+      return this.sameDaySelection ? this.startDate : getDateInFuture(this.startDate, 1);
+    },
+    toCalendarMaxDate() {
+      if (!this.startDate || !this.maxDateRange) return this.defaultMaxDate;
+      const computedMaxEndDate = getDateInFuture(this.startDate, this.effectiveMaxDateRange);
+      return new Date(Math.min(computedMaxEndDate, this.defaultMaxDate));
+    },
+    dateRangeViolation() {
+      return this.startDate >= this.endDate || this.exceedsDateRange;
+    },
+    exceedsDateRange() {
+      if (this.numberOfDays < 0) {
+        return false;
+      }
+      return this.maxDateRange && this.numberOfDays > this.maxDateRange;
+    },
+    toCalendarDefaultDate() {
+      return this.endDate || this.toCalendarMinDate;
+    },
+    numericStartTime() {
+      return this.startDate ? this.startDate.getTime() : null;
+    },
+    numberOfDays() {
+      if (!this.startDate || !this.endDate) {
+        return -1;
+      }
+      const numberOfDays = getDayDifference(this.startDate, this.endDate);
+      return this.sameDaySelection ? numberOfDays + 1 : numberOfDays;
+    },
+    startContainerClasses() {
+      return [this.startPickerClass, ...CONTAINER_CLASSES];
+    },
+    endContainerClasses() {
+      return [this.endPickerClass, ...CONTAINER_CLASSES];
+    },
+    showIndicator() {
+      return Boolean(this.$scopedSlots.default || this.tooltip);
+    },
+    fromId() {
+      return uniqueId('date-from-field-');
+    },
+    toId() {
+      return uniqueId('date-to-field-');
+    }
+  },
+  watch: {
+    value(val) {
+      const {
+        startDate,
+        endDate
+      } = val;
+      this.startDate = startDate;
+      this.endDate = endDate;
+    }
+  },
+  methods: {
+    onStartDateSelected(startDate) {
+      this.startDate = startDate;
+      if (this.dateRangeViolation) {
+        this.openToCalendar = true;
+        this.endDate = null;
+      } else this.$emit('input', {
+        startDate,
+        endDate: this.endDate
+      });
+    },
+    onEndDateSelected(endDate) {
+      this.openToCalendar = false;
+      this.endDate = endDate;
+      /**
+       * Emitted when start or end date selected with {startDate, endDate} value
+       *
+       * @event input
+       * */
+      this.$emit('input', {
+        startDate: this.startDate,
+        endDate
+      });
+    },
+    onStartPickerOpen() {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event start-picker-open
+       * */
+      this.$emit('start-picker-open');
+    },
+    onStartPickerClose() {
+      /**
+       * Emitted when the start date datepicker is hidden.
+       *
+       * @event start-picker-close
+       * */
+      this.$emit('start-picker-close');
+    },
+    onEndPickerOpen() {
+      /**
+       * Emitted when the end date datepicker becomes visible.
+       *
+       * @event end-picker-open
+       * */
+      this.$emit('end-picker-open');
+    },
+    onEndPickerClose() {
+      /**
+       * Emitted when the end date datepicker is hidden.
+       *
+       * @event end-picker-close
+       * */
+      this.$emit('end-picker-close');
+    }
+  }
+};
+
+/* 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('div',{staticClass:"gl-daterange-picker gl-flex gl-gap-5"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass,attrs:{"for":_vm.fromId}},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"input-id":_vm.fromId,"input-label":_vm.fromAriaLabel,"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer,"start-opened":_vm.startOpened,"state":_vm.startPickerState,"width":_vm.width},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-start")]},proxy:true}],null,true),model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass,attrs:{"for":_vm.toId}},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"input-id":_vm.toId,"input-label":_vm.toAriaLabel,"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate,"width":_vm.width,"state":_vm.endPickerState},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-end")]},proxy:true}],null,true),model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-daterange-picker-indicator",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16,"variant":"info"}}):_vm._e()],2):_vm._e()])};
+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 };

package/dist/components/base/drawer/drawer.js

@@ -0,0 +1,156 @@
+import { isEmpty } from 'lodash-es';
+import { maxZIndex, drawerVariants } from '../../../utils/constants';
+import GlButton from '../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDrawer',
+  components: {
+    GlButton
+  },
+  props: {
+    /**
+     * Controls the visibility state of the drawer.
+     */
+    open: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Height of the header element (e.g., '64px'). Used to position the drawer below a fixed header.
+     */
+    headerHeight: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * When true, makes the drawer header sticky so it remains visible when scrolling the drawer content.
+     */
+    headerSticky: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Z-index value for the drawer. Useful for controlling stacking order with other elements.
+     */
+    zIndex: {
+      type: Number,
+      required: false,
+      default: maxZIndex
+    },
+    /**
+     * Visual variant of the drawer.
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: drawerVariants.default,
+      validator: value => Object.keys(drawerVariants).includes(value)
+    }
+  },
+  computed: {
+    positionFromTop() {
+      return !isEmpty(this.headerHeight) ? this.headerHeight : 0;
+    },
+    drawerStyles() {
+      const styles = {
+        top: this.positionFromTop,
+        zIndex: this.zIndex
+      };
+      if (this.positionFromTop) {
+        styles.maxHeight = `calc(100vh - ${this.positionFromTop})`;
+      }
+      return styles;
+    },
+    drawerHeaderStyles() {
+      return {
+        zIndex: this.headerSticky ? maxZIndex : null
+      };
+    },
+    shouldRenderFooter() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$slots.footer);
+    },
+    variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
+      return `gl-drawer-${this.variant}`;
+    }
+  },
+  watch: {
+    open: {
+      immediate: true,
+      handler(open) {
+        if (open) {
+          document.addEventListener('keydown', this.handleEscape);
+        } else {
+          document.removeEventListener('keydown', this.handleEscape);
+        }
+      }
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleEscape);
+  },
+  methods: {
+    emitOpened() {
+      /**
+       * Emits when the opening animation has finished.
+       * @event opened
+       */
+      this.$emit('opened');
+    },
+    handleEscape(e) {
+      const ESC = 27;
+      if (this.open && e.keyCode === ESC) {
+        /**
+         * Emits when drawer gets closed (by pressing ESC or clicking the close button).
+         * @event close
+         */
+        this.$emit('close');
+      }
+    }
+  }
+};
+
+/* 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('transition',{attrs:{"name":"gl-drawer"},on:{"after-enter":_vm.emitOpened}},[(_vm.open)?_c('aside',{staticClass:"gl-drawer",class:_vm.variantClass,style:(_vm.drawerStyles)},[_c('div',{staticClass:"gl-drawer-header",class:{ 'gl-drawer-header-sticky': _vm.headerSticky },style:(_vm.drawerHeaderStyles)},[_c('div',{staticClass:"gl-drawer-title"},[_vm._t("title"),_vm._v(" "),_c('gl-button',{staticClass:"gl-drawer-close-button",attrs:{"category":"tertiary","size":"small","icon":"close","aria-label":"Close drawer"},on:{"click":function($event){return _vm.$emit('close')}}})],2),_vm._v(" "),_vm._t("header")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body",class:{
+        'gl-drawer-body-shrink': _vm.headerSticky,
+        'gl-drawer-body-scrim': !_vm.shouldRenderFooter,
+      }},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderFooter)?_c('div',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-drawer-body-scrim-on-footer",style:({ zIndex: _vm.zIndex })},[_vm._t("footer")],2):_vm._e()]):_vm._e()])};
+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 };