Vue-slider-component: Support strict CSP rules for styling

Created on 13 Feb 2019 · 2Comments · Source: NightCatSama/vue-slider-component

Hi there!

Thanks for your awesome component! I'm using it on a website with strict CSP rules (no 'unsafe-eval' nor 'unsafe-inline' are allowed) and after each new update I need to add 'sha256-...' hash to CSP rules to allow styling injected by vue-slider-component. Is it possible to extract all styling logic to separate CSS file so it can be included separately?

<template>
        <vue-slider
                v-model="selected"
                :data="options"
                :formatter="sliderFormatter"
                :piecewiseLabel="false"
        >
            <span class="vue-slider-tooltip" slot="tooltip" slot-scope="{ value }"
                  v-html="sliderFormatter(value)"></span>
        </vue-slider>
</template>

<script>
  import vueSlider from 'vue-slider-component';

  export default {
    name: "Slider",
    props: {
      value: String,
      options: Array
    },
    constants: {
      sliderStyle: {
        paddingTop: "35px",
        paddingLeft: "60px",
        paddingRight: "60px",
      }
    },
    data() {
      return {
        selected: this.$props.options.find((item) => {
          return item.codename === this.$props.value;
        }),
      }
    },
    components: {
      vueSlider
    },
    watch: {
      selected(value) {
        this.$emit('input', value.codename);
      }
    },
    methods: {
      sliderFormatter(value) {
        if (!value) {
          return null;
        }

        const label = value.label;

        return parseInt(label) ? label + " &copy;" : label;
      }
    }
  }
</script>

feature

Source