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 3.0KB

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