audiobookshelf/client/components/ui/TextInput.vue

<template>
  <div ref="wrapper" class="relative">
    <input
      :id="inputId"
      :name="inputName"
      ref="input"
      v-model="inputValue"
      :type="actualType"
      :step="step"
      :min="min"
      :readonly="readonly"
      :disabled="disabled"
      :placeholder="placeholder"
      dir="auto"
      class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
      :class="classList"
      @keyup="keyup"
      @change="change"
      @focus="focused"
      @blur="blurred"
    />
    <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
      <span class="material-symbols text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
    </div>
    <div v-if="type === 'password' && isHovering" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
      <span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="showPassword = !showPassword">{{ !showPassword ? 'visibility' : 'visibility_off' }}</span>
    </div>
    <div v-else-if="showCopy" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
      <span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    placeholder: String,
    readonly: Boolean,
    type: {
      type: String,
      default: 'text'
    },
    disabled: Boolean,
    paddingY: {
      type: Number,
      default: 2
    },
    paddingX: {
      type: Number,
      default: 3
    },
    noSpinner: Boolean,
    textCenter: Boolean,
    clearable: Boolean,
    inputId: String,
    inputName: String,
    showCopy: Boolean,
    step: [String, Number],
    min: [String, Number],
    customInputClass: String
  },
  data() {
    return {
      showPassword: false,
      isHovering: false,
      isFocused: false,
      hasCopied: false
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    classList() {
      var _list = []
      _list.push(`px-${this.paddingX}`)
      _list.push(`py-${this.paddingY}`)
      if (this.noSpinner) _list.push('no-spinner')
      if (this.textCenter) _list.push('text-center')
      if (this.customInputClass) _list.push(this.customInputClass)
      return _list.join(' ')
    },
    actualType() {
      if (this.type === 'password' && this.showPassword) return 'text'
      return this.type
    }
  },
  methods: {
    copyToClipboard() {
      if (this.hasCopied) return
      this.$copyToClipboard(this.inputValue).then((success) => {
        this.hasCopied = success
        setTimeout(() => {
          this.hasCopied = false
        }, 2000)
      })
    },
    clear() {
      this.inputValue = ''
      this.$emit('clear')
    },
    focused() {
      this.isFocused = true
      this.$emit('focus')
    },
    blurred() {
      this.isFocused = false
      this.$emit('blur')
    },
    change(e) {
      this.$emit('change', e.target.value)
    },
    keyup(e) {
      this.$emit('keyup', e)
    },
    blur() {
      if (this.$refs.input) this.$refs.input.blur()
    },
    setFocus() {
      if (this.$refs.input) this.$refs.input.focus()
    },
    mouseover() {
      this.isHovering = true
    },
    mouseleave() {
      this.isHovering = false
    }
  },
  mounted() {
    if (this.type === 'password' && this.$refs.wrapper) {
      this.$refs.wrapper.addEventListener('mouseover', this.mouseover)
      this.$refs.wrapper.addEventListener('mouseleave', this.mouseleave)
    }
  }
}
</script>

<style scoped>
input {
  border-style: inherit !important;
}
input:read-only {
  color: #bbb;
  background-color: #444;
}
input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
</style>