nocodb/packages/nc-gui/components/templates/GradientGenerator.vue

<template>
  <div class="d-100 mb-5">
    <div class="rounded pa-5 mb-2 d-100 text-center caption" :style="{ background: value }" @click="generateGradient">
      Click to change gradient
    </div>

    <input v-model="color1" type="color" />
    <input v-model="color2" type="color" />
  </div>
</template>

<script>
export default {
  name: 'GradientGenerator',
  props: {
    value: [String],
  },
  data: () => ({
    angle: 0,
  }),
  computed: {
    color1: {
      get() {
        const val = this.value && this.value.split(',')[1].trim();
        return val;
      },
      set(v) {
        const gradient = 'linear-gradient(' + this.angle + 'deg, ' + v + ', ' + this.color2 + ')';
        this.$emit('input', gradient);
      },
    },
    color2: {
      get() {
        return this.value && this.value.split(',')[2].slice(0, -1).trim();
      },
      set(v) {
        const gradient = 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + v + ')';
        this.$emit('input', gradient);
      },
    },
  },
  created() {
    if (!this.color1 && !this.color2) {
      this.generateGradient();
    }
  },
  methods: {
    generateGradient() {
      const hexValues = '0123456789abcde';

      function populate(a) {
        for (let i = 0; i < 6; i++) {
          const x = Math.round(Math.random() * 14);
          const y = hexValues[x];
          a += y;
        }
        return a;
      }

      const newColor1 = populate('#');
      const newColor2 = populate('#');
      this.angle = Math.round(Math.random() * 360);
      const gradient = 'linear-gradient(' + this.angle + 'deg, ' + newColor1 + ', ' + newColor2 + ')';
      this.$emit('input', gradient);
    },
  },
};
</script>

<style scoped></style>