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.2KB

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