@gitlab/ui 132.0.1 → 132.0.2

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

@@ -0,0 +1,43 @@
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlForm'
+};
+
+/* 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('form',_vm._g({},_vm.$listeners),[_vm._t("default")],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__ = /*#__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/form/form_character_count/form_character_count.js

@@ -0,0 +1,107 @@
+import { debounce } from 'lodash-es';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCharacterCount',
+  props: {
+    /**
+     * Input value
+     */
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Character count limit for the input.
+     */
+    limit: {
+      type: Number,
+      required: true
+    },
+    /**
+     * id attribute for the character count text. Input should have `:aria-describedby="countTextId"`
+     */
+    countTextId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      remainingCount: this.initialRemainingCount(),
+      remainingCountSrOnly: this.initialRemainingCount()
+    };
+  },
+  computed: {
+    isOverLimit() {
+      return this.remainingCount < 0;
+    },
+    isOverLimitSrOnly() {
+      return this.remainingCountSrOnly < 0;
+    },
+    countTextClass() {
+      return this.isOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.remainingCount = this.limit - this.valueLength(newValue);
+      this.debouncedUpdateRemainingCountSrOnly(newValue);
+    }
+  },
+  created() {
+    // Debounce updating the remaining character count for a second so
+    // screen readers announce the remaining text after the text in the textarea.
+    this.debouncedUpdateRemainingCountSrOnly = debounce(this.updateRemainingCountSrOnly, 1000);
+  },
+  methods: {
+    valueLength(value) {
+      return (value === null || value === void 0 ? void 0 : value.length) || 0;
+    },
+    updateRemainingCountSrOnly(newValue) {
+      this.remainingCountSrOnly = this.limit - this.valueLength(newValue);
+    },
+    initialRemainingCount() {
+      return this.limit - this.valueLength(this.value);
+    }
+  }
+};
+
+/* 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',[_c('small',{class:['form-text', _vm.countTextClass],attrs:{"aria-hidden":"true"}},[(_vm.isOverLimit)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCount)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCount})],2),_vm._v(" "),_c('div',{staticClass:"gl-sr-only",attrs:{"id":_vm.countTextId,"aria-live":"polite","data-testid":"count-text-sr-only"}},[(_vm.isOverLimitSrOnly)?_vm._t("over-limit-text",null,{"count":Math.abs(_vm.remainingCountSrOnly)}):_vm._t("remaining-count-text",null,{"count":_vm.remainingCountSrOnly})],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__ = /*#__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/form/form_checkbox/form_checkbox.js

@@ -0,0 +1,342 @@
+import { uniqueId, isBoolean } from 'lodash-es';
+import { looseIndexOf, looseEqual } from '../../../../utils/equality_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormCheckbox',
+  inject: {
+    getCheckboxGroup: {
+      default: () => () => null
+    }
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input'
+  },
+  props: {
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model.
+     */
+    checked: {
+      type: undefined,
+      required: false,
+      default: null
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Adds the `required` attribute to the form control.
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Sets the value of `aria-label` attribute on the rendered element.
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute.
+     */
+    ariaLabelledby: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Renders the checkbox in an indeterminate state. Syncable via the .sync modifier.
+     */
+    indeterminate: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Value returned when this checkbox is checked.
+     */
+    value: {
+      // `value` prop can be any type
+      type: undefined,
+      required: false,
+      default: true
+    },
+    /**
+     * Value returned when this checkbox is unchecked. Note not applicable when multiple checkboxes bound to the same v-model array.
+     */
+    uncheckedValue: {
+      // `uncheckedValue` prop can be any type
+      type: undefined,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    const group = this.getCheckboxGroup();
+    return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_checkbox_'),
+      localChecked: group ? group.checked : this.checked
+    };
+  },
+  computed: {
+    computedLocalChecked: {
+      get() {
+        return this.isGroup ? this.group.localChecked : this.localChecked;
+      },
+      set(value) {
+        if (this.isGroup) {
+          this.group.localChecked = value;
+        } else {
+          this.localChecked = value;
+        }
+      }
+    },
+    group() {
+      return this.getCheckboxGroup();
+    },
+    isGroup() {
+      // Is this check a child of check-group?
+      return Boolean(this.group);
+    },
+    computedState() {
+      if (this.isGroup) return this.group.computedState;
+      return isBoolean(this.state) ? this.state : null;
+    },
+    stateClass() {
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
+    },
+    computedAriaInvalid() {
+      return this.computedState === false ? 'true' : null;
+    },
+    isChecked() {
+      const {
+        value,
+        computedLocalChecked: checked
+      } = this;
+      return Array.isArray(checked) ? looseIndexOf(checked, value) > -1 : looseEqual(checked, value);
+    },
+    isDisabled() {
+      // Child can be disabled while parent isn't, but is always disabled if group is
+      return this.isGroup ? this.group.disabled || this.disabled : this.disabled;
+    },
+    isRequired() {
+      // Required only works when a name is provided for the input(s)
+      // Child can only be required when parent is
+      // Groups will always have a name (either user supplied or auto generated)
+      return this.computedName && (this.isGroup ? this.group.required : this.required);
+    },
+    computedName() {
+      // Group name preferred over local name
+      return (this.isGroup ? this.group.groupName : this.name) || null;
+    },
+    computedAttrs() {
+      const {
+        isDisabled: disabled,
+        isRequired: required,
+        value,
+        isChecked: checked
+      } = this;
+      return {
+        ...this.$attrs,
+        id: this.internalId,
+        name: this.computedName,
+        disabled,
+        required,
+        value,
+        checked,
+        'aria-required': required || null,
+        'aria-invalid': this.computedAriaInvalid,
+        'aria-label': this.ariaLabel || null,
+        'aria-labelledby': this.ariaLabelledby || null
+      };
+    }
+  },
+  watch: {
+    checked() {
+      this.checkedWatcher(...arguments);
+    },
+    indeterminate(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        this.setIndeterminate(newValue);
+      }
+    },
+    computedLocalChecked() {
+      this.computedLocalCheckedWatcher(...arguments);
+    }
+  },
+  mounted() {
+    // Set initial indeterminate state
+    this.setIndeterminate(this.indeterminate);
+  },
+  methods: {
+    checkedWatcher(newValue) {
+      if (!looseEqual(newValue, this.computedLocalChecked)) {
+        this.computedLocalChecked = newValue;
+      }
+    },
+    computedLocalCheckedWatcher(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when checked state is changed.
+         *
+         * @event input
+         */
+        this.$emit('input', newValue);
+        const {
+          input
+        } = this.$refs;
+        if (input) {
+          this.$emit('update:indeterminate', input.indeterminate);
+        }
+      }
+    },
+    handleChange(_ref) {
+      let {
+        target: {
+          checked,
+          indeterminate
+        }
+      } = _ref;
+      const {
+        value,
+        uncheckedValue
+      } = this;
+
+      // Update `computedLocalChecked`
+      let localChecked = this.computedLocalChecked;
+      if (Array.isArray(localChecked)) {
+        const index = looseIndexOf(localChecked, value);
+        if (checked && index < 0) {
+          // Add value to array
+          localChecked = localChecked.concat(value);
+        } else if (!checked && index > -1) {
+          // Remove value from array
+          localChecked = localChecked.slice(0, index).concat(localChecked.slice(index + 1));
+        }
+      } else {
+        localChecked = checked ? value : uncheckedValue;
+      }
+      this.computedLocalChecked = localChecked;
+
+      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
+      this.$nextTick(() => {
+        /**
+         * Emitted when selected value(s) is changed due to user interaction.
+         *
+         * @event change
+         */
+        this.$emit('change', localChecked);
+
+        // If this is a child of a group, we emit a change event on it as well
+        if (this.isGroup) {
+          /**
+           * Emitted when selected value(s) is changed due to user interaction.
+           *
+           * @event change
+           */
+          this.group.$emit('change', localChecked);
+        }
+        this.$emit('indeterminate', indeterminate);
+      });
+    },
+    setIndeterminate(state) {
+      // Indeterminate only supported in single checkbox mode
+      const computedState = Array.isArray(this.computedLocalChecked) ? false : state;
+      const {
+        input
+      } = this.$refs;
+      if (input) {
+        input.indeterminate = computedState;
+        // Emit update event to prop
+        this.$emit('update:indeterminate', computedState);
+      }
+    },
+    focus() {
+      if (!this.disabled) {
+        var _this$$refs$input;
+        (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.focus();
+      }
+    },
+    blur() {
+      if (!this.disabled) {
+        var _this$$refs$input2;
+        (_this$$refs$input2 = this.$refs.input) === null || _this$$refs$input2 === void 0 ? void 0 : _this$$refs$input2.blur();
+      }
+    }
+  }
+};
+
+/* 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-form-checkbox custom-checkbox custom-control"},[_c('input',_vm._b({key:"input",ref:"input",staticClass:"custom-control-input",class:_vm.stateClass,attrs:{"type":"checkbox"},on:{"change":_vm.handleChange}},'input',_vm.computedAttrs,false)),_vm._v(" "),_c('label',{staticClass:"custom-control-label",attrs:{"for":_vm.internalId}},[_vm._t("default"),_vm._v(" "),(Boolean(_vm.$scopedSlots.help))?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],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__ = /*#__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/form/form_checkbox/form_checkbox_group.js

@@ -0,0 +1,188 @@
+import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
+import { looseEqual } from '../../../../utils/equality_utils';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
+import { normalizeOptions } from '../../../../utils/form_options_utils';
+import GlFormCheckbox from './form_checkbox';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+// Attributes to pass down to checks/radios instead of applying them to the group
+const PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby'];
+var script = {
+  name: 'GlFormCheckboxGroup',
+  components: {
+    GlFormCheckbox
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  provide() {
+    return {
+      getCheckboxGroup: () => this
+    };
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input'
+  },
+  props: {
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * The current value of the checkbox.
+     */
+    checked: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * Array of items to render in the component
+     */
+    options: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Adds the `required` attribute to the form control.
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value
+     */
+    ariaInvalid: {
+      type: [Boolean, String],
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_checkbox_group_'),
+      localChecked: this.checked
+    };
+  },
+  computed: {
+    formOptions() {
+      return normalizeOptions(this.options);
+    },
+    computedState() {
+      return isBoolean(this.state) ? this.state : null;
+    },
+    computedAriaInvalid() {
+      const {
+        ariaInvalid
+      } = this;
+      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
+        return 'true';
+      }
+      return this.computedState === false ? 'true' : ariaInvalid;
+    },
+    computedAttrs() {
+      return {
+        ...omit(this.$attrs, PASS_DOWN_ATTRS),
+        id: this.internalId,
+        'aria-invalid': this.computedAriaInvalid,
+        'aria-required': this.required || null
+      };
+    },
+    passDownAttrs() {
+      return pick(this.$attrs, PASS_DOWN_ATTRS);
+    },
+    groupName() {
+      // Checkboxes tied to the same model must have the same name, especially for
+      // ARIA accessibility. This is accessed from the child GlFormCheckboxes.
+      return this.name || this.internalId;
+    }
+  },
+  watch: {
+    checked(newValue) {
+      if (!looseEqual(newValue, this.localChecked)) {
+        this.localChecked = newValue;
+      }
+    },
+    localChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the checked value is changed.
+         *
+         * @event input
+         */
+        this.$emit('input', newValue);
+      }
+    }
+  }
+};
+
+/* 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',_vm._b({staticClass:"gl-form-checkbox-group gl-outline-none",attrs:{"role":"group","tabindex":"-1"}},'div',_vm.computedAttrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-checkbox',_vm._b({key:idx,attrs:{"value":option.value,"disabled":option.disabled}},'gl-form-checkbox',_vm.passDownAttrs,false),[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],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__ = /*#__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 };