@gitlab/ui 101.4.0 → 101.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [101.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.5.0...v101.6.0) (2024-10-31)
+
+
+### Features
+
+* **Typography:** Update gl-heading to use design token color ([539409e](https://gitlab.com/gitlab-org/gitlab-ui/commit/539409e3747d0f59e282256b89b455d5db6448ff))
+
+# [101.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.4.0...v101.5.0) (2024-10-31)
+
+
+### Features
+
+* **GlSegmentedControl:** Reactivate deprecated component ([317673e](https://gitlab.com/gitlab-org/gitlab-ui/commit/317673e74e1bd694fdd30ed575f51038b399d43d))
+
 # [101.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.3.1...v101.4.0) (2024-10-31)
 
 

package/dist/components/base/segmented_control/segmented_control.js

@@ -1,71 +1,35 @@
-import { BFormRadioGroup } from '../../../vendor/bootstrap-vue/src/components/form-radio/form-radio-group';
+import GlButtonGroup from '../button_group/button_group';
+import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const genericErrorMessage = 'Segmented button should always have valid option selected';
+const validateOptionsProp = options => {
+  const requiredOptionPropType = {
+    value: ['string', 'number', 'boolean'],
+    disabled: ['boolean', 'undefined']
+  };
+  const optionProps = Object.keys(requiredOptionPropType);
+  return options.every(option => {
+    if (!option) {
+      return false;
+    }
+    return optionProps.every(name => requiredOptionPropType[name].includes(typeof option[name]));
+  });
+};
 var script = {
   name: 'GlSegmentedControl',
   components: {
-    BFormRadioGroup
-  },
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'input'
+    GlButtonGroup,
+    GlButton
   },
   props: {
-    checked: {
-      required: true,
-      validator: () => true
-    },
     options: {
       type: Array,
-      required: true
-    }
-  },
-  computed: {
-    enabledOptions() {
-      return this.options.filter(option => !option.disabled);
-    }
-  },
-  watch: {
-    checked: {
-      handler(newValue, oldValue) {
-        this.checkValue(newValue, oldValue);
-      }
-    },
-    options: {
-      handler() {
-        this.checkValue(this.checked);
-      }
-    }
-  },
-  created() {
-    this.checkValue(this.checked);
-  },
-  methods: {
-    checkValue(newValue) {
-      let oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      if (!this.isValidValue(newValue)) {
-        // eslint-disable-next-line no-console
-        console.warn(genericErrorMessage);
-        if (this.enabledOptions.length) {
-          const suggestion = oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
-          /**
-           * Emitted when the selection changes
-           * @event input
-           * @argument checked The selected option
-           */
-          this.$emit('input', suggestion);
-        }
-      }
+      required: true,
+      validator: validateOptionsProp
     },
-    isValidValue(val) {
-      return this.enabledOptions.some(_ref => {
-        let {
-          value
-        } = _ref;
-        return value === val;
-      });
+    value: {
+      type: [String, Number, Boolean],
+      required: true
     }
   }
 };
@@ -74,7 +38,7 @@ var 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('b-form-radio-group',_vm._g(_vm._b({staticClass:"gl-segmented-control",attrs:{"buttons":"","button-variant":"gl-segmented-button gl-button"}},'b-form-radio-group',Object.assign({}, _vm.$attrs, {options: _vm.options, checked: _vm.checked}),false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',_vm._l((_vm.options),function(option){return _c('gl-button',_vm._b({key:option.value,attrs:{"disabled":!!option.disabled,"selected":_vm.value === option.value},on:{"click":function($event){return _vm.$emit('input', option.value)}}},'gl-button',option.props,false),[_vm._t("button-content",function(){return [_vm._v("\n      "+_vm._s(option.text)+"\n    ")]},null,option)],2)}),1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */