@gitlab/ui 135.1.2 → 136.0.0

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

@@ -1,15 +1,14 @@
 import GlButton from '../../button/button';
 import { GlTooltipDirective } from '../../../../directives/tooltip/tooltip';
+import { translate } from '../../../../utils/i18n';
 import GlFormInput from '../form_input/form_input';
-import GlFormInputGroup from '../form_input_group/form_input_group';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlFormPasswordInput',
   components: {
     GlButton,
-    GlFormInput,
-    GlFormInputGroup
+    GlFormInput
   },
   directives: {
     GlTooltip: GlTooltipDirective
@@ -35,28 +34,29 @@ var script = {
     },
     /**
      * Accessible label and tooltip for the toggle button while the value is masked.
-     * Pass a translated string.
      */
     revealLabel: {
       type: String,
       required: false,
-      default: 'Reveal password'
+      default: () => translate('GlFormPasswordInput.revealLabel', 'Reveal password')
     },
     /**
      * Accessible label and tooltip for the toggle button while the value is revealed.
-     * Pass a translated string.
      */
     hideLabel: {
       type: String,
       required: false,
-      default: 'Hide password'
+      default: () => translate('GlFormPasswordInput.hideLabel', 'Hide password')
     },
     /**
-     * Disables the field while keeping it in the focus order and announced by
-     * assistive technology (via `aria-disabled`), rather than removing it from
-     * the tab sequence.
+     * Disables the field and its toggle. Neither is in the tab order and the
+     * value is not submitted with the form.
+     *
+     * To prevent edits while keeping the value readable, copyable and
+     * submitted, pass `readonly` instead. It reaches the input untouched and
+     * leaves the toggle usable, since revealing a value is a read.
      */
-    accessibleDisabled: {
+    disabled: {
       type: Boolean,
       required: false,
       default: false
@@ -80,9 +80,6 @@ var script = {
   },
   methods: {
     toggleVisibility() {
-      if (this.accessibleDisabled) {
-        return;
-      }
       this.isMasked = !this.isMasked;
       /**
        * Emitted when the reveal/hide button is clicked.
@@ -99,7 +96,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('gl-form-input-group',{staticClass:"gl-form-password-input",scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.toggleLabel),expression:"toggleLabel"}],staticClass:"gl-form-password-input-toggle !gl-border-0",attrs:{"category":"tertiary","accessible-disabled":"","aria-label":_vm.toggleLabel,"icon":_vm.toggleIcon,"disabled":_vm.accessibleDisabled},on:{"click":_vm.toggleVisibility}})]},proxy:true}])},[_c('gl-form-input',_vm._g(_vm._b({attrs:{"value":_vm.value,"type":_vm.type,"readonly":_vm.accessibleDisabled,"aria-disabled":_vm.accessibleDisabled ? 'true' : null}},'gl-form-input',_vm.$attrs,false),_vm.$listeners))],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-password-input"},[_c('gl-form-input',_vm._g(_vm._b({staticClass:"gl-form-password-input-field",attrs:{"value":_vm.value,"type":_vm.type,"disabled":_vm.disabled}},'gl-form-input',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.toggleLabel),expression:"toggleLabel"}],staticClass:"gl-form-password-input-toggle",attrs:{"category":"tertiary","size":"small","aria-label":_vm.toggleLabel,"icon":_vm.toggleIcon,"disabled":_vm.disabled},on:{"click":_vm.toggleVisibility}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */