@gitlab/ui 66.11.0 → 66.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.12.0...v66.13.0) (2023-09-21)
+
+
+### Features
+
+* **GlFormInut, GlFormSelect, GlDatepicker:** Add prop width, deprecate prop size ([6de322c](https://gitlab.com/gitlab-org/gitlab-ui/commit/6de322c20f7fb2f2f7922392da513167f3bd2530))
+
+# [66.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.11.0...v66.12.0) (2023-09-21)
+
+
+### Features
+
+* **GlTable:** Add option for sticky table headers ([68f814d](https://gitlab.com/gitlab-org/gitlab-ui/commit/68f814da649d7d353232bd7ca0900614ccb41325))
+
 # [66.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.10.1...v66.11.0) (2023-09-20)
 
 

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

@@ -1,6 +1,6 @@
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
-import { defaultDateFormat, datepickerSizeOptionsMap } from '../../../utils/constants';
+import { defaultDateFormat, datepickerWidthOptionsMap, datepickerSizeOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button';
 import GlFormInput from '../form/form_input/form_input';
@@ -173,10 +173,27 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Maximum width of the Datepicker
+     */
+    width: {
+      type: String,
+      required: false,
+      default: null,
+      validator: value => Object.keys(datepickerWidthOptionsMap).includes(value)
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Datepicker
+     */
     size: {
       type: String,
       required: false,
-      default: 'medium',
+      default: null,
       validator: value => Object.keys(datepickerSizeOptionsMap).includes(value)
     }
   },
@@ -211,10 +228,16 @@ var script = {
       return null;
     },
     datepickerClasses() {
-      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.datepickerSize}`];
-    },
-    datepickerSize() {
-      return datepickerSizeOptionsMap[this.size];
+      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.computedWidth}`];
+    },
+    computedWidth() {
+      if (this.width) {
+        return this.width;
+        // eslint-disable-next-line no-else-return
+      } else if (this.size) {
+        return datepickerSizeOptionsMap[this.size];
+      }
+      return 'md';
     }
   },
   watch: {

package/dist/components/base/form/form_input/form_input.js

@@ -19,6 +19,23 @@ var script = {
     /**
      * Maximum width of the input
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+        return widths.every(width => Object.values(formInputSizes).includes(width));
+      }
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the input
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -30,21 +47,24 @@ var script = {
     }
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
-      if (isObject(this.size)) {
+      if (isObject(this.computedWidth)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes
-        } = this.size;
+        } = this.computedWidth;
         return [...(defaultSize ? [`gl-form-input-${defaultSize}`] : []), ...Object.entries(nonDefaultSizes).map(_ref => {
           let [breakpoint, size] = _ref;
           return `gl-${breakpoint}-form-input-${size}`;
         })];
       }
-      return [`gl-form-input-${this.size}`];
+      return [`gl-form-input-${this.computedWidth}`];
     },
     listeners() {
       var _this = this;

package/dist/components/base/form/form_select/form_select.js

@@ -13,6 +13,23 @@ var script = {
     /**
      * Maximum width of the Select
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+        return widths.every(width => Object.values(formInputSizes).includes(width));
+      }
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Select
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -24,21 +41,24 @@ var script = {
     }
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
-      if (isObject(this.size)) {
+      if (isObject(this.computedWidth)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes
-        } = this.size;
+        } = this.computedWidth;
         return [...(defaultSize ? [`gl-form-select-${defaultSize}`] : []), ...Object.entries(nonDefaultSizes).map(_ref => {
           let [breakpoint, size] = _ref;
           return `gl-${breakpoint}-form-select-${size}`;
         })];
       }
-      return [`gl-form-select-${this.size}`];
+      return [`gl-form-select-${this.computedWidth}`];
     }
   }
 };

package/dist/components/base/table/table.js

@@ -26,11 +26,19 @@ var script = {
       type: Array,
       required: false,
       default: null
+    },
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   computed: {
+    stickyHeaderClass() {
+      return this.stickyHeader ? 'gl-table--sticky-header' : null;
+    },
     localTableClass() {
-      return ['gl-table', this.tableClass];
+      return ['gl-table', this.tableClass, this.stickyHeaderClass];
     }
   },
   mounted() {

package/dist/components/base/table_lite/table_lite.js

@@ -16,11 +16,19 @@ var script = {
       type: Array,
       required: false,
       default: null
+    },
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   computed: {
+    stickyHeaderClass() {
+      return this.stickyHeader ? 'gl-table--sticky-header' : null;
+    },
     localTableClass() {
-      return ['gl-table', this.tableClass];
+      return ['gl-table', this.tableClass, this.stickyHeaderClass];
     }
   }
 };