| 1 | <script setup lang="ts"> |
| 2 | import { useWakeLock } from '@vueuse/core' |
| 3 | import { useNav } from '../composables/useNav' |
| 4 | import { cursorStyle, hideCursorIdle, slideScale, viewerCssFilter, viewerCssFilterDefaults, wakeLockEnabled } from '../state' |
| 5 | import FormCheckbox from './FormCheckbox.vue' |
| 6 | import FormItem from './FormItem.vue' |
| 7 | import FormSlider from './FormSlider.vue' |
| 8 | import SegmentControl from './SegmentControl.vue' |
| 9 | |
| 10 | const { isPresenter } = useNav() |
| 11 | const { isSupported } = useWakeLock() |
| 12 | </script> |
| 13 | |
| 14 | <template> |
| 15 | <div text-sm select-none flex="~ col gap-1" min-w-30 px4> |
| 16 | <FormItem |
| 17 | title="Invert" |
| 18 | :dot="viewerCssFilter.invert !== viewerCssFilterDefaults.invert" |
| 19 | @reset="viewerCssFilter.invert = viewerCssFilterDefaults.invert" |
| 20 | > |
| 21 | <FormCheckbox v-model="viewerCssFilter.invert" /> |
| 22 | </FormItem> |
| 23 | <FormItem |
| 24 | title="Brightness" |
| 25 | :dot="viewerCssFilter.brightness !== viewerCssFilterDefaults.brightness" |
| 26 | @reset="viewerCssFilter.brightness = viewerCssFilterDefaults.brightness" |
| 27 | > |
| 28 | <FormSlider |
| 29 | v-model="viewerCssFilter.brightness" |
| 30 | :max="1.5" |
| 31 | :min="0.5" |
| 32 | :step="0.02" |
| 33 | :default="viewerCssFilterDefaults.brightness" |
| 34 | /> |
| 35 | </FormItem> |
| 36 | <FormItem |
| 37 | title="Contrast" |
| 38 | :dot="viewerCssFilter.contrast !== viewerCssFilterDefaults.contrast" |
| 39 | @reset="viewerCssFilter.contrast = viewerCssFilterDefaults.contrast" |
| 40 | > |
| 41 | <FormSlider |
| 42 | v-model="viewerCssFilter.contrast" |
| 43 | :max="1.5" |
| 44 | :min="0.5" |
| 45 | :step="0.02" |
| 46 | :default="viewerCssFilterDefaults.contrast" |
| 47 | /> |
| 48 | </FormItem> |
| 49 | <FormItem |
| 50 | title="Saturation" |
| 51 | :dot="viewerCssFilter.saturate !== viewerCssFilterDefaults.saturate" |
| 52 | @reset="viewerCssFilter.saturate = viewerCssFilterDefaults.saturate" |
| 53 | > |
| 54 | <FormSlider |
| 55 | v-model="viewerCssFilter.saturate" |
| 56 | :max="1.5" |
| 57 | :min="0.5" |
| 58 | :step="0.02" |
| 59 | :default="viewerCssFilterDefaults.saturate" |
| 60 | /> |
| 61 | </FormItem> |
| 62 | <FormItem |
| 63 | title="Sepia" |
| 64 | :dot="viewerCssFilter.sepia !== viewerCssFilterDefaults.sepia" |
| 65 | @reset="viewerCssFilter.sepia = viewerCssFilterDefaults.sepia" |
| 66 | > |
| 67 | <FormSlider |
| 68 | v-model="viewerCssFilter.sepia" |
| 69 | :max="2" |
| 70 | :min="-2" |
| 71 | :step="0.02" |
| 72 | :default="viewerCssFilterDefaults.sepia" |
| 73 | /> |
| 74 | </FormItem> |
| 75 | <FormItem |
| 76 | title="Hue Rotate" |
| 77 | :dot="viewerCssFilter.hueRotate !== viewerCssFilterDefaults.hueRotate" |
| 78 | @reset="viewerCssFilter.hueRotate = viewerCssFilterDefaults.hueRotate" |
| 79 | > |
| 80 | <FormSlider |
| 81 | v-model="viewerCssFilter.hueRotate" |
| 82 | :max="180" |
| 83 | :min="-180" |
| 84 | :step="0.1" |
| 85 | :default="viewerCssFilterDefaults.hueRotate" |
| 86 | /> |
| 87 | </FormItem> |
| 88 | <div class="h-1px opacity-5 bg-current w-full my2" /> |
| 89 | <FormItem title="Cursor Style"> |
| 90 | <SegmentControl |
| 91 | v-model="cursorStyle" |
| 92 | :options="[ |
| 93 | { label: 'Cursor', value: 'cursor' }, |
| 94 | { label: 'Laser', value: 'laser' }, |
| 95 | ]" |
| 96 | /> |
| 97 | </FormItem> |
| 98 | <FormItem |
| 99 | v-if="!isPresenter" |
| 100 | title="Slide Scale" |
| 101 | > |
| 102 | <SegmentControl |
| 103 | v-model="slideScale" |
| 104 | :options="[ |
| 105 | { label: 'Fit', value: 0 }, |
| 106 | { label: '1:1', value: 1 }, |
| 107 | ]" |
| 108 | /> |
| 109 | </FormItem> |
| 110 | <FormItem |
| 111 | v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported" |
| 112 | title="Wake Lock" |
| 113 | > |
| 114 | <FormCheckbox v-model="wakeLockEnabled" /> |
| 115 | </FormItem> |
| 116 | <FormItem |
| 117 | v-if="!isPresenter" |
| 118 | title="Hide Idle Cursor" |
| 119 | > |
| 120 | <FormCheckbox v-model="hideCursorIdle" /> |
| 121 | </FormItem> |
| 122 | </div> |
| 123 | </template> |
| 124 |