Document Name Generator

by khamer

HTML

<main>
  <div id="app" v-if="show">
    document<pick :values="sep"></pick><pick :values="suffix" joiner="_" :max="10"></pick><pick :values="ext" :min="0"></pick>.<pick :values="ext"></pick>
    <div class="actions">
      <button @click="refresh">Rename</button>
    </div>
  </div>
</main>

CSS

html {
  text-align: center;
  font-size: 2vw;
  line-height: 32px;
}

.actions {
  text-align: center;
  margin: 3rem 0 0;
}

Vue

const suffix = ['final', 'rev', 'revision', 'final', 'FINAL', 'v2', 'draft', 'V1', 'ver1', 'ver3', 'VER4', 'May12', ' (1)',]
const sep = ['.', '_', '-', '--', '__']
const ext = ['doc', 'pdf', 'docx']

Vue.component('pick', {
  template: `<span v-text="value"/>`,
  props: {
    values: Array,
    min: {type: Number, default: 1},
    max: {type: Number, default: 1},
    and: Boolean,
    joiner: {type: String, default: ', '},
  },
  data: () => ({
    value: null,
  }),
  mounted() {
    let values = [];
    if (this.min > this.max) {
      this.max = this.min;
    }
    const numValues = this.min + Math.floor((this.max - this.min + 1) * Math.random());
    for (let i = 0; i < numValues; i++) {
      let newVal = this.values[Math.floor(this.values.length * Math.random())];
      if (this.values.includes(newVal)) {
        newVal = this.values[Math.floor(this.values.length * Math.random())];
      }
      values.push(newVal);
    }
    if (this.and && values.length > 1) {
      this.value = values.slice(0,-1).join(', ') + ' and ' + values.slice(-1)[0]
    } else {
    	const symbols = ['_', '-', '.', '__', '--', ' ']
    	const joiner = symbols[Math.floor(symbols.length * Math.random())] 
      this.value = values.join(joiner)
    }
  },
});
new Vue({
  el: '#app',
  methods: {
    refresh() {
      this.show = false;
      requestAnimationFrame(() => this.show = true);
    },
  },
  data: {
    show: true,
    seed: null,
    suffix,
    sep,
    ext,
  },
})