commit: 424da4c311e58807e4537218da7714a9fb659e13
parent e876c98d5e7c3720bbe1977a33eb5cbe53471eee
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 2 Oct 2024 16:31:30 +0300
lint
Diffstat:
1 file changed, 93 insertions(+), 93 deletions(-)
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
@@ -1,78 +1,105 @@
<template>
-<div
- class="ComponentPreview"
- :class="{ '-shadow-controls': shadowControl }"
->
- <label
- class="header"
- v-show="shadowControl"
- :class="{ faint: disabled }"
- >
- {{ $t('settings.style.shadows.offset') }}
- </label>
- <input
- v-show="shadowControl"
- :value="shadow?.y"
- :disabled="disabled"
- :class="{ disabled }"
- class="input input-number y-shift-number"
- type="number"
- @input="e => updateProperty('y', e.target.value)"
- >
- <input
- v-show="shadowControl"
- :value="shadow?.y"
- :disabled="disabled"
- :class="{ disabled }"
- class="input input-range y-shift-slider"
- type="range"
- max="20"
- min="-20"
- @input="e => updateProperty('y', e.target.value)"
- >
<div
- class="preview-window"
- :class="{ '-light-grid': lightGrid }"
+ class="ComponentPreview"
+ :class="{ '-shadow-controls': shadowControl }"
>
+ <label
+ v-show="shadowControl"
+ class="header"
+ :class="{ faint: disabled }"
+ >
+ {{ $t('settings.style.shadows.offset') }}
+ </label>
+ <input
+ v-show="shadowControl"
+ :value="shadow?.y"
+ :disabled="disabled"
+ :class="{ disabled }"
+ class="input input-number y-shift-number"
+ type="number"
+ @input="e => updateProperty('y', e.target.value)"
+ >
+ <input
+ v-show="shadowControl"
+ :value="shadow?.y"
+ :disabled="disabled"
+ :class="{ disabled }"
+ class="input input-range y-shift-slider"
+ type="range"
+ max="20"
+ min="-20"
+ @input="e => updateProperty('y', e.target.value)"
+ >
<div
- class="preview-block"
- :class="previewClass"
- :style="previewStyle"
+ class="preview-window"
+ :class="{ '-light-grid': lightGrid }"
>
- TEST
+ <div
+ class="preview-block"
+ :class="previewClass"
+ :style="previewStyle"
+ >
+ TEST
+ </div>
</div>
+ <input
+ v-show="shadowControl"
+ :value="shadow?.x"
+ :disabled="disabled"
+ :class="{ disabled }"
+ class="input input-number x-shift-number"
+ type="number"
+ @input="e => updateProperty('x', e.target.value)"
+ >
+ <input
+ v-show="shadowControl"
+ :value="shadow?.x"
+ :disabled="disabled"
+ :class="{ disabled }"
+ class="input input-range x-shift-slider"
+ type="range"
+ max="20"
+ min="-20"
+ @input="e => updateProperty('x', e.target.value)"
+ >
+ <Checkbox
+ id="lightGrid"
+ v-model="lightGrid"
+ name="lightGrid"
+ class="input-light-grid"
+ >
+ {{ $t('settings.style.shadows.light_grid') }}
+ </Checkbox>
</div>
- <input
- v-show="shadowControl"
- :value="shadow?.x"
- :disabled="disabled"
- :class="{ disabled }"
- class="input input-number x-shift-number"
- type="number"
- @input="e => updateProperty('x', e.target.value)"
- >
- <input
- v-show="shadowControl"
- :value="shadow?.x"
- :disabled="disabled"
- :class="{ disabled }"
- class="input input-range x-shift-slider"
- type="range"
- max="20"
- min="-20"
- @input="e => updateProperty('x', e.target.value)"
- >
- <Checkbox
- id="lightGrid"
- v-model="lightGrid"
- name="lightGrid"
- class="input-light-grid"
- >
- {{ $t('settings.style.shadows.light_grid') }}
- </Checkbox>
-</div>
</template>
+<script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+export default {
+ components: {
+ Checkbox
+ },
+ props: [
+ 'shadow',
+ 'shadowControl',
+ 'previewClass',
+ 'previewStyle',
+ 'disabled'
+ ],
+ emits: ['update:shadow'],
+ data () {
+ return {
+ lightGrid: false
+ }
+ },
+ methods: {
+ updateProperty (axis, value) {
+ this.$emit('update:shadow', { axis, value })
+ }
+ }
+}
+</script>
<style lang="scss">
.ComponentPreview {
display: grid;
@@ -185,30 +212,3 @@
}
}
</style>
-<script>
-import Checkbox from 'src/components/checkbox/checkbox.vue'
-
-export default {
- props: [
- 'shadow',
- 'shadowControl',
- 'previewClass',
- 'previewStyle',
- 'disabled'
- ],
- data () {
- return {
- lightGrid: false
- }
- },
- emits: ['update:shadow'],
- components: {
- Checkbox
- },
- methods: {
- updateProperty (axis, value) {
- this.$emit('update:shadow', { axis, value })
- }
- }
-}
-</script>