Add shine

stevebauman · Jun 22, 2024 · d0bfa1b · d0bfa1b
1 parent df0eae8
commit d0bfa1b
Show file tree

Hide file tree

Showing 5 changed files with 336 additions and 227 deletions.
diff --git a/components/TabPreview.vue b/components/TabPreview.vue
@@ -201,6 +201,21 @@
                     />
                 </div>
 
+                <div class="flex flex-col items-center justify-between space-y-1">
+                    <Label> Shine </Label>
+
+                    <ToggleShine
+                        dusk="toggle-shine"
+                        v-model="localSettings.showShine"
+                        :shine-width="localSettings.shineWidth"
+                        :shine-height="localSettings.shineHeight"
+                        :shine-opacity="localSettings.shineOpacity"
+                        @update:shine-width="localSettings.shineWidth = $event"
+                        @update:shine-height="localSettings.shineHeight = $event"
+                        @update:shine-opacity="localSettings.shineOpacity = $event"
+                    />
+                </div>
+
                 <div class="flex flex-col items-center justify-between space-y-1">
                     <Label> Social Badge </Label>
 

diff --git a/components/ToggleShine.vue b/components/ToggleShine.vue
@@ -0,0 +1,89 @@
+<template>
+    <Toggle
+        v-bind="$attrs"
+        v-on="$listeners"
+        popover-title="Shine Properties"
+        settings-tooltip="Configure Shine"
+    >
+        <template #popover>
+            <div class="flex flex-col divide-y divide-ui-gray-800">
+                <div class="flex items-center justify-between w-full gap-2 px-3 py-2">
+                    <Label class="w-full text-center"> Width </Label>
+
+                    <Range
+                        max="100"
+                        step="1"
+                        dusk="range-width"
+                        :value="shineWidth"
+                        @input="$emit('update:shine-width', Number($event))"
+                    />
+
+                    <Input
+                        size="sm"
+                        type="number"
+                        class="w-16 text-center"
+                        :value="shineWidth"
+                        @input="$emit('update:shine-width', Number($event))"
+                    />
+                </div>
+
+                <div class="flex items-center justify-between w-full gap-2 px-3 py-2">
+                    <Label class="w-full text-center"> Height </Label>
+
+                    <Range
+                        max="200"
+                        step="1"
+                        dusk="range-height"
+                        :value="shineHeight"
+                        @input="$emit('update:shine-height', Number($event))"
+                    />
+
+                    <Input
+                        size="sm"
+                        type="number"
+                        class="w-16 text-center"
+                        :value="shineHeight"
+                        @input="$emit('update:shine-height', Number($event))"
+                    />
+                </div>
+
+                <div class="flex items-center justify-between w-full gap-2 px-3 py-2">
+                    <Label class="w-full text-center"> Opacity </Label>
+
+                    <Range
+                        max="0.1"
+                        step="0.01"
+                        dusk="range-opacity"
+                        :value="shineOpacity"
+                        @input="$emit('update:shine-opacity', Number($event))"
+                    />
+
+                    <Input
+                        size="sm"
+                        type="number"
+                        class="w-16 text-center"
+                        :value="shineOpacity"
+                        @input="$emit('update:shine-opacity', Number($event))"
+                    />
+                </div>
+            </div>
+        </template>
+    </Toggle>
+</template>
+
+<script setup>
+defineProps({
+    shineWidth: {
+        type: Number,
+        required: true,
+    },
+    shineHeight: {
+        type: Number,
+        required: true,
+    },
+    shineOpacity: {
+        type: Number,
+        required: true,
+    },
+});
+</script>