diff options
| -rw-r--r-- | src/components/Settings.vue | 31 |
1 files changed, 27 insertions, 4 deletions
diff --git a/src/components/Settings.vue b/src/components/Settings.vue index efb0112..8b524a6 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -20,6 +20,18 @@ export default defineComponent({ onLayoutOptChg(){ this.$emit('layout-option-change'); }, + onMinTileSzChg(){ + if (Number(this.$refs.minTileSzInput.value) > Number(this.$refs.maxTileSzInput.value)){ + this.layoutOptions.maxTileSz = this.layoutOptions.minTileSz; + } + this.onLayoutOptChg(); + }, + onMaxTileSzChg(evt){ + if (Number(this.$refs.maxTileSzInput.value) < Number(this.$refs.minTileSzInput.value)){ + this.layoutOptions.minTileSz = this.layoutOptions.maxTileSz; + } + this.onLayoutOptChg(); + }, }, emits: ['settings-open', 'settings-close', 'layout-option-change', ], }); @@ -44,6 +56,21 @@ export default defineComponent({ </div> <hr class="border-stone-400"/> <div> + <label> + <span class="inline-block w-[3cm]">Min Tile Size</span> + <input type="range" min="0" max="400" v-model.number="layoutOptions.minTileSz" class="w-[3cm]" + @input="onMinTileSzChg" ref="minTileSzInput"/> + </label> + </div> + <div> + <label> + <span class="inline-block w-[3cm]">Max Tile Size</span> + <input type="range" min="0" max="400" v-model.number="layoutOptions.maxTileSz" class="w-[3cm]" + @input="onMaxTileSzChg" ref="maxTileSzInput"/> + </label> + </div> + <hr class="border-stone-400"/> + <div> Layout Method <ul> <li> @@ -82,10 +109,6 @@ export default defineComponent({ </li> </ul> </div> - <hr class="border-stone-400"/> - <div class="border border-black my-2">Setting 1</div> - <div class="border border-black my-2">Setting 2</div> - <div class="border border-black my-2">Setting 3</div> </div> </Transition> <Transition name="slide-bottom-right"> |