@gitlab/ui 72.12.0 → 72.12.1

package/dist/components/base/datepicker/datepicker.js

@@ -0,0 +1,386 @@
+import isString from 'lodash/isString';
+import Pikaday from 'pikaday';
+import { defaultDateFormat, datepickerWidthOptionsMap } from '../../../utils/constants';
+import { areDatesEqual } from '../../../utils/datetime_utility';
+import GlButton from '../button/button';
+import GlFormInput from '../form/form_input/form_input';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+//
+const pad = function (val) {
+  let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return `0${val}`.slice(-len);
+};
+
+/**
+ * Used `onSelect` method in pickaday
+ * @param {Date} date UTC format
+ * @return {String} Date formated in yyyy-mm-dd
+ */
+const defaultDateFormatter = date => {
+  const day = pad(date.getDate());
+  const month = pad(date.getMonth() + 1);
+  const year = date.getFullYear();
+  return `${year}-${month}-${day}`;
+};
+const isBefore = (compareTo, date) => compareTo && date && date.getTime() < compareTo.getTime();
+const highlightPastDates = pikaday => {
+  const pikaButtons = pikaday.el.querySelectorAll('.pika-button');
+  const today = new Date();
+  pikaButtons.forEach(pikaButton => {
+    const {
+      pikaYear,
+      pikaMonth,
+      pikaDay
+    } = pikaButton.dataset;
+    const pikaButtonDate = new Date(pikaYear, pikaMonth, pikaDay);
+    if (isBefore(today, pikaButtonDate)) {
+      pikaButton.classList.add('is-past-date');
+    }
+  });
+};
+var script = {
+  name: 'GlDatepicker',
+  components: {
+    GlFormInput,
+    GlIcon,
+    GlButton
+  },
+  props: {
+    /**
+     * Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.
+     */
+    target: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.
+     */
+    container: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    value: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    minDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    maxDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    startRange: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    endRange: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    /**
+     * Accepts a function that accepts a date as argument and returns true if the date is disabled.
+     */
+    disableDayFn: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    firstDay: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: defaultDateFormat
+    },
+    /**
+     * Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.
+     */
+    autocomplete: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    displayField: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Use this prop to set the initial date for the datepicker.
+     */
+    defaultDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    i18n: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showClearButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    inputId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    inputLabel: {
+      type: String,
+      required: false,
+      default: 'Enter date'
+    },
+    inputName: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Maximum width of the Datepicker
+     */
+    width: {
+      type: String,
+      required: false,
+      default: null,
+      validator: value => Object.keys(datepickerWidthOptionsMap).includes(value)
+    }
+  },
+  data() {
+    return {
+      textInput: ''
+    };
+  },
+  computed: {
+    formattedDate() {
+      return 'calendar' in this ? this.calendar.toString() : '';
+    },
+    customTrigger() {
+      return isString(this.target) && this.target !== '';
+    },
+    triggerOnFocus() {
+      return this.target === null;
+    },
+    showDefaultField() {
+      return !this.customTrigger || this.triggerOnFocus;
+    },
+    renderClearButton() {
+      return this.showClearButton && this.textInput !== '' && !this.disabled;
+    },
+    inputAutocomplete() {
+      if (this.autocomplete !== '') {
+        return this.autocomplete;
+      }
+      if (this.triggerOnFocus) {
+        return 'off';
+      }
+      return null;
+    },
+    datepickerClasses() {
+      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.computedWidth}`];
+    },
+    computedWidth() {
+      if (this.width) {
+        return this.width;
+      }
+      return 'md';
+    }
+  },
+  watch: {
+    value(val) {
+      if (!areDatesEqual(val, this.calendar.getDate())) {
+        this.calendar.setDate(val, true);
+      }
+    },
+    minDate(minDate) {
+      this.calendar.setMinDate(minDate);
+    },
+    maxDate(maxDate) {
+      this.calendar.setMaxDate(maxDate);
+    },
+    startRange(startRange) {
+      this.calendar.setStartRange(startRange);
+    },
+    endRange(endRange) {
+      this.calendar.setEndRange(endRange);
+    }
+  },
+  mounted() {
+    const $parentEl = this.$parent.$el;
+    const drawEvent = this.draw.bind(this);
+    const pikadayConfig = {
+      field: this.$el.querySelector('input[type="text"]'),
+      // `position-absolute` is needed because of this bug: https://github.com/Pikaday/Pikaday/issues/840
+      theme: `gl-datepicker-theme position-absolute ${this.theme}`,
+      defaultDate: this.defaultDate || this.value,
+      setDefaultDate: Boolean(this.value) || Boolean(this.defaultDate),
+      minDate: this.minDate,
+      maxDate: this.maxDate,
+      // Only supports default gitlab format YYYY-MM-DD. We have to decide if we want to support other formats.
+      format: defaultDateFormat,
+      parse: dateString => {
+        const parsedDate = Date.parse(dateString.replace(/-/g, '/'));
+        return Number.isNaN(parsedDate) ? new Date() : new Date(parsedDate);
+      },
+      disableDayFn: this.disableDayFn,
+      firstDay: this.firstDay,
+      ariaLabel: this.ariaLabel,
+      toString: date => defaultDateFormatter(date),
+      onSelect: this.selected.bind(this),
+      onClose: this.closed.bind(this),
+      onOpen: this.opened.bind(this),
+      onDraw: pikaday => {
+        highlightPastDates(pikaday);
+        drawEvent();
+      }
+    };
+
+    // Pass `null` as `target` prop to use the `field` as the trigger (open on focus)
+    if (!this.triggerOnFocus && !this.disabled) {
+      const trigger = this.customTrigger ? $parentEl.querySelector(this.target) : this.$refs.calendarTriggerBtn.$el;
+      pikadayConfig.trigger = trigger;
+
+      // Set `trigger` as the `field` if `field` element doesn't exist (not passed via the slot)
+      if (!pikadayConfig.field && this.customTrigger) {
+        pikadayConfig.field = trigger;
+      }
+    }
+
+    // Pass `null` as `container` prop to prevent passing the `container` option to Pikaday
+    if (this.container !== null) {
+      const container = this.container ? $parentEl.querySelector(this.container) : this.$el;
+      pikadayConfig.container = container;
+    }
+    if (this.i18n) {
+      pikadayConfig.i18n = this.i18n;
+    }
+    this.calendar = new Pikaday(pikadayConfig);
+    if (this.startOpened) {
+      this.calendar.show();
+    }
+  },
+  beforeDestroy() {
+    this.calendar.destroy();
+  },
+  methods: {
+    // is used to open datepicker programmatically
+    show() {
+      this.calendar.show();
+    },
+    selected(date) {
+      /**
+       * Emitted when a new date has been selected.
+       * @property {Date} date The selected date
+       */
+      this.$emit('input', date);
+    },
+    closed() {
+      /**
+       * Emitted when the datepicker is hidden.
+       */
+      this.$emit('close');
+    },
+    opened() {
+      /**
+       * Emitted when the datepicker becomes visible.
+       */
+      this.$emit('open');
+    },
+    cleared() {
+      this.textInput = '';
+      /**
+       * Emitted when the clear button is clicked.
+       */
+      this.$emit('clear');
+    },
+    draw() {
+      /**
+       * Emitted when the datepicker draws a new month.
+       */
+      this.$emit('monthChange');
+    },
+    onKeydown() {
+      if (this.textInput === '') {
+        const resetDate = this.minDate || null;
+        this.calendar.setDate(resetDate);
+        this.selected(resetDate);
+      }
+    }
+  }
+};
+
+/* 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',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-relative"},[_vm._t("default",function(){return [_c('gl-form-input',{staticClass:"gl-w-full",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],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__ = __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__;
+export { defaultDateFormatter, pad };

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

@@ -0,0 +1,288 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
+import GlDatepicker from '../datepicker/datepicker';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const CONTAINER_CLASSES = ['gl-display-flex', 'gl-align-items-baseline', 'gl-flex-wrap', 'gl-sm-flex-nowrap', 'gl-sm-gap-3'];
+var script = {
+  name: 'GlDaterangePicker',
+  components: {
+    GlDatepicker,
+    GlIcon
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    fromLabel: {
+      type: String,
+      required: false,
+      default: 'From'
+    },
+    toLabel: {
+      type: String,
+      required: false,
+      default: 'To'
+    },
+    value: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    i18n: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    defaultMinDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    defaultMaxDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    defaultStartDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    defaultEndDate: {
+      type: Date,
+      required: false,
+      default: null
+    },
+    maxDateRange: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    startPickerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    startPickerTarget: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    startPickerContainer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    endPickerClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    endPickerTarget: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    endPickerContainer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    labelClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    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: ''
+    },
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  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);
+    }
+  },
+  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-gap-5 gl-display-flex"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"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},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},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},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"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},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},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}}):_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__ = __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__;