Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <section v-if="!readonly" class="box">
  3. <div class="box__content">
  4. <MenuItem :description="`Value: ${value$.size}`" :label="`${label} size`">
  5. <div v-if="body.runs.mode === false">
  6. <VueSlider v-model="value$.size"
  7. :min="min"
  8. :max="max"
  9. :interval="0.05" />
  10. </div>
  11. </MenuItem>
  12. <MenuItem
  13. v-if="body.runs.mode === 'increase'"
  14. label="Increase?"
  15. description="Indicates if this should increase with each run.">
  16. <select v-model="value$.progressive" class="input">
  17. <option :value="true">
  18. Enabled
  19. </option>
  20. <option :value="false">
  21. Disabled
  22. </option>
  23. </select>
  24. </MenuItem>
  25. <div v-if="body.runs.mode === 'randomize'">
  26. <MenuItem
  27. label="Randomize?"
  28. description="Randomize this body part in each run.">
  29. <select v-model="value$.randomize.enabled"
  30. class="input">
  31. <option :value="true">
  32. Enabled
  33. </option>
  34. <option :value="false">
  35. Disabled
  36. </option>
  37. </select>
  38. </MenuItem>
  39. <MenuItem
  40. label="Random range"
  41. :description="`Min: ${value$.randomize.min} - Max: ${value$.randomize.max}`">
  42. <VueSlider
  43. v-model="randomizeRange"
  44. :min-range="0.05"
  45. :min="min"
  46. :max="max"
  47. :interval="0.05" />
  48. </MenuItem>
  49. </div>
  50. </div>
  51. </section>
  52. <MenuItem
  53. v-else
  54. :label="label"
  55. action-class="preference__list">
  56. <span class="font-bold">{{ value$.size }}</span>
  57. <span v-if="value$.randomize.enabled === true">
  58. Randomized ({{ value$.randomize.min }} - {{ value$.randomize.max }})
  59. </span>
  60. <span v-else-if="value$.progressive === true">Progresive</span>
  61. </MenuItem>
  62. </template>
  63. <script>
  64. import { VModel } from '~/mixins'
  65. export default {
  66. mixins: [VModel],
  67. props: {
  68. label: {
  69. type: String,
  70. required: true,
  71. },
  72. min: {
  73. type: Number,
  74. default: 0.3,
  75. },
  76. max: {
  77. type: Number,
  78. default: 2,
  79. },
  80. readonly: {
  81. type: Boolean,
  82. default: false,
  83. },
  84. },
  85. computed: {
  86. randomizeRange: {
  87. get() {
  88. return [this.value$.randomize.min, this.value$.randomize.max]
  89. },
  90. set(value) {
  91. const [min, max] = value
  92. this.value$.randomize.min = min
  93. this.value$.randomize.max = max
  94. },
  95. },
  96. body() {
  97. return this.$parent.value$?.body
  98. },
  99. },
  100. }
  101. </script>
  102. <style lang="scss" scoped>
  103. .preference__list {
  104. span {
  105. @apply text-sm text-center block;
  106. }
  107. }
  108. </style>