@gitlab/ui 135.0.2 → 135.1.0

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

@@ -0,0 +1,134 @@
+import GlButton from '../../button/button';
+import { GlTooltipDirective } from '../../../../directives/tooltip/tooltip';
+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
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The input's value. Bound to the inner input and supports `v-model`.
+     * @model
+     */
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Whether the value is revealed (unmasked) on initial render.
+     */
+    initialVisibility: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * 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'
+    },
+    /**
+     * 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'
+    },
+    /**
+     * 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.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isMasked: !this.initialVisibility
+    };
+  },
+  computed: {
+    type() {
+      return this.isMasked ? 'password' : 'text';
+    },
+    toggleLabel() {
+      return this.isMasked ? this.revealLabel : this.hideLabel;
+    },
+    toggleIcon() {
+      return this.isMasked ? 'eye' : 'eye-slash';
+    }
+  },
+  methods: {
+    toggleVisibility() {
+      if (this.accessibleDisabled) {
+        return;
+      }
+      this.isMasked = !this.isMasked;
+      /**
+       * Emitted when the reveal/hide button is clicked.
+       *
+       * @event visibility-change
+       * @property {boolean} visible Whether the value is now revealed.
+       */
+      this.$emit('visibility-change', !this.isMasked);
+    }
+  }
+};
+
+/* 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_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/index.js

@@ -40,6 +40,7 @@ export { default as GlFormCharacterCount } from './base/form/form_character_coun
 export { default as GlFormDate } from './base/form/form_date/form_date';
 export { default as GlFormInput } from './base/form/form_input/form_input';
 export { default as GlFormInputGroup } from './base/form/form_input_group/form_input_group';
+export { default as GlFormPasswordInput } from './base/form/form_password_input/form_password_input';
 export { default as GlFormRadio } from './base/form/form_radio/form_radio';
 export { default as GlFormRadioGroup } from './base/form/form_radio_group/form_radio_group';
 export { default as GlFormSelect } from './base/form/form_select/form_select';