sqliteviz/src/components/CsvJsonImport/DelimiterSelector/index.vue

<template>
  <div :class="{ disabled: disabled }">
    <div class="text-field-label">Delimiter</div>
    <div
      class="delimiter-selector-container"
      :style="{ width: width }"
      @click="onContainerClick"
    >
      <div class="value">
        <input
          ref="delimiterInput"
          v-model="inputValue"
          :class="{ filled: filled }"
          type="text"
          maxlength="1"
          :disabled="disabled"
          @click.stop
        />
        <div class="name">{{ getSymbolName(modelValue) }}</div>
      </div>
      <div class="controls" @click.stop>
        <clear-icon :disabled="disabled" @click="clear" />
        <drop-down-chevron
          :disabled="disabled"
          @click="!disabled && (showOptions = !showOptions)"
        />
      </div>
    </div>
    <div v-show="showOptions" class="options" :style="{ width: width }">
      <div
        v-for="(option, index) in options"
        :key="index"
        class="option"
        @click="chooseOption(option)"
      >
        <pre>{{ option }}</pre>
        <div>{{ getSymbolName(option) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import ascii from './ascii'
import DropDownChevron from '@/components/svg/dropDownChevron'
import ClearIcon from '@/components/svg/clear'

export default {
  name: 'DelimiterSelector',
  components: { DropDownChevron, ClearIcon },
  props: {
    modelValue: String,
    width: String,
    disabled: Boolean
  },
  emits: ['update:modelValue'],
  data() {
    return {
      showOptions: false,
      options: [',', '\t', ' ', '|', ';', '\u001F', '\u001E'],
      filled: false,
      inputValue: ''
    }
  },
  watch: {
    inputValue() {
      if (this.inputValue) {
        this.filled = true
        if (this.inputValue !== this.modelValue) {
          this.$emit('update:modelValue', this.inputValue)
        }
      } else {
        this.filled = false
      }
    }
  },
  created() {
    this.inputValue = this.modelValue
  },
  methods: {
    getSymbolName(str) {
      if (!str) {
        return ''
      }
      return ascii[str.charCodeAt(0).toString()].name
    },
    chooseOption(option) {
      this.inputValue = option
      this.showOptions = false
    },
    onContainerClick() {
      this.$refs.delimiterInput.focus()
    },

    clear() {
      if (!this.disabled) {
        this.inputValue = ''
        this.$refs.delimiterInput.focus()
      }
    }
  }
}
</script>

<style scoped>
.delimiter-selector-container {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-medium-2);
  height: 36px;
  padding: 0 8px;
  font-size: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.value {
  display: flex;
  align-items: center;
}

.value .name {
  color: var(--color-text-light-2);
  cursor: default;
  margin-left: 4px;
}

.controls {
  display: flex;
  align-items: center;
}

.options {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-width: 0 1px 1px 1px;
  color: var(--color-text-base);
  border-radius: var(--border-radius-medium-2);
  font-size: 12px;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
}

.option {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 6px;
}

.option:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text-active);
  cursor: pointer;
}

.option pre {
  background-color: var(--color-bg-warning);
  line-height: 20px;
  margin-right: 6px;
  tab-size: 1;
  font-family: monospace;
  width: 16px;
  text-align: center;
}

input {
  background: var(--color-white);
  border: none;
  color: var(--color-text-base);
  height: 20px;
  font-family: monospace;
  font-size: 12px;
  box-sizing: border-box;
  width: 16px;
  text-align: center;
}

input.filled {
  background: var(--color-bg-warning);
}

input:focus {
  outline: none;
}

input:disabled {
  background: var(--color-bg-light);
  color: var(--color-text-light-2);
  cursor: default;
}

.text-field-label {
  font-size: 12px;
  color: var(--color-text-base);
  padding-left: 8px;
  margin-bottom: 2px;
}

.disabled .text-field-label {
  color: var(--color-text-light-2);
}

.disabled .delimiter-selector-container {
  background: var(--color-bg-light);
}
</style>