@gitlab/ui 131.2.0 → 131.3.1

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

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

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