You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Preference.vue 2.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <section class="box box--items">
  3. <div class="box__content">
  4. <box-item :description="`Value: ${currentValue.size}`" :label="`${label} size`">
  5. <VueSlider v-model="currentValue.size" :min="0.3" :max="2" :interval="0.05" />
  6. </box-item>
  7. <box-item
  8. v-show="!body.randomize && body.progressive.enabled"
  9. label="Progressive."
  10. description="Increase the value progressively in each run">
  11. <select v-model="currentValue.progressive" class="input">
  12. <option :value="true">
  13. Enabled
  14. </option>
  15. <option :value="false">
  16. Disabled
  17. </option>
  18. </select>
  19. </box-item>
  20. <div v-show="body.randomize">
  21. <box-item
  22. label="Randomize."
  23. description="Randomize the value in each run.">
  24. <select v-model="currentValue.randomize.enabled" class="input">
  25. <option :value="true">
  26. Enabled
  27. </option>
  28. <option :value="false">
  29. Disabled
  30. </option>
  31. </select>
  32. </box-item>
  33. <box-item
  34. label="Range."
  35. :description="`Min: ${currentValue.randomize.min} - Max: ${currentValue.randomize.max}`">
  36. <VueSlider
  37. v-model="randomizeRange"
  38. :min-range="0.05"
  39. :min="minRange"
  40. :max="maxRange"
  41. :interval="0.05" />
  42. </box-item>
  43. </div>
  44. </div>
  45. </section>
  46. </template>
  47. <script>
  48. import { VModel } from '~/mixins'
  49. export default {
  50. mixins: [VModel],
  51. props: {
  52. label: {
  53. type: String,
  54. required: true,
  55. },
  56. minRange: {
  57. type: Number,
  58. default: 0.3,
  59. },
  60. maxRange: {
  61. type: Number,
  62. default: 2,
  63. },
  64. },
  65. computed: {
  66. randomizeRange: {
  67. get() {
  68. return [this.currentValue.randomize.min, this.currentValue.randomize.max]
  69. },
  70. set(value) {
  71. const [min, max] = value
  72. this.currentValue.randomize.min = min
  73. this.currentValue.randomize.max = max
  74. },
  75. },
  76. body() {
  77. return this.$parent.currentValue?.body
  78. },
  79. },
  80. }
  81. </script>