Skip to content

Commit 585835a

Browse files
graphierosgraphieros
committed
Dev environment - Update VueUiRating testing arena
1 parent 73c502c commit 585835a

File tree

2 files changed

+87
-6
lines changed

2 files changed

+87
-6
lines changed

‎TestingArena/ArenaVueUiRating.vue‎

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const dataset = ref({ rating: {
1818
1919
const model = ref([
2020
{ key: 'type', def: 'star', type:'select', options:['star', 'image'] },
21-
{ key: 'readonly', def: true, type: 'checkbox' },
21+
{ key: 'readonly', def: false, type: 'checkbox' },
2222
{ key: 'from', def: 1, type: 'number', min: 0, max: 100 },
2323
{ key: 'to', def: 5, type: 'number', min: 0, max: 100 },
2424
{ key: 'style.itemSize', def: 32, type: 'number', min: 12, max: 96 },
@@ -89,6 +89,11 @@ const config = computed(() => {
8989
}
9090
})
9191
92+
const r = ref(dataset.value.rating);
93+
function setRating(rat) {
94+
r.value = rat
95+
}
96+
9297
const step = ref(0);
9398
9499
</script>
@@ -98,23 +103,99 @@ const step = ref(0);
98103
<template #title>VueUiRating</template>
99104

100105
<template #local>
101-
<LocalVueUiRating :dataset="dataset" :config="config" ref="local">
106+
<LocalVueUiRating :dataset="dataset" :config="config" ref="local" @rate="setRating">
102107
<template #chart-background>
103108
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
104109
</template>
110+
111+
<template #layer-under="{ value, size, focusedValue }">
112+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
113+
<path v-if="value === 1" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" fill="#CCCCCC"/>
114+
<path v-if="value === 2" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" fill="#CCCCCC"/>
115+
<path v-if="value === 3" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" fill="#CCCCCC"/>
116+
<path v-if="value === 4" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" fill="#CCCCCC"/>
117+
<path v-if="value === 5" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" fill="#CCCCCC"/>
118+
</svg>
119+
</template>
120+
<template #layer-above="{ value, size, hoveredValue, focusedValue }">
121+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
122+
<path v-if="value === 1" fill="#5A5A5A" stroke="#5A5A5A" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" :style="{ opacity: (value <= r || value < hoveredValue) ? 1 : 0}"/>
123+
<path v-if="value === 2" fill="#4A4A4A" stroke="#4A4A4A" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
124+
<path v-if="value === 3" fill="#3A3A3A" stroke="#3A3A3A" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
125+
<path v-if="value === 4" fill="#2A2A2A" stroke="#2A2A2A" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
126+
<path v-if="value === 5" fill="#1A1A1A" stroke="#1A1A1A" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
127+
</svg>
128+
</template>
105129
</LocalVueUiRating>
106130
</template>
107131

108132
<template #VDUI-local>
109-
<LocalVueDataUi component="VueUiRating" :dataset="dataset" :config="config" ref="vduiLocal"/>
133+
<LocalVueDataUi component="VueUiRating" :dataset="dataset" :config="config" ref="vduiLocal" @rate="setRating">
134+
<template #layer-under="{ value, size, focusedValue }">
135+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
136+
<path v-if="value === 1" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" fill="#CCCCCC"/>
137+
<path v-if="value === 2" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" fill="#CCCCCC"/>
138+
<path v-if="value === 3" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" fill="#CCCCCC"/>
139+
<path v-if="value === 4" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" fill="#CCCCCC"/>
140+
<path v-if="value === 5" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" fill="#CCCCCC"/>
141+
</svg>
142+
</template>
143+
<template #layer-above="{ value, size, hoveredValue, focusedValue }">
144+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
145+
<path v-if="value === 1" fill="#5A5A5A" stroke="#5A5A5A" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" :style="{ opacity: (value <= r || value < hoveredValue) ? 1 : 0}"/>
146+
<path v-if="value === 2" fill="#4A4A4A" stroke="#4A4A4A" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
147+
<path v-if="value === 3" fill="#3A3A3A" stroke="#3A3A3A" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
148+
<path v-if="value === 4" fill="#2A2A2A" stroke="#2A2A2A" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
149+
<path v-if="value === 5" fill="#1A1A1A" stroke="#1A1A1A" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
150+
</svg>
151+
</template>
152+
</LocalVueDataUi>
110153
</template>
111154

112155
<template #build>
113-
<VueUiRating :dataset="dataset" :config="config" ref="build"/>
156+
<VueUiRating :dataset="dataset" :config="config" ref="build" @rate="setRating">
157+
<template #layer-under="{ value, size, focusedValue }">
158+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
159+
<path v-if="value === 1" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" fill="#CCCCCC"/>
160+
<path v-if="value === 2" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" fill="#CCCCCC"/>
161+
<path v-if="value === 3" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" fill="#CCCCCC"/>
162+
<path v-if="value === 4" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" fill="#CCCCCC"/>
163+
<path v-if="value === 5" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" fill="#CCCCCC"/>
164+
</svg>
165+
</template>
166+
<template #layer-above="{ value, size, hoveredValue, focusedValue }">
167+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
168+
<path v-if="value === 1" fill="#5A5A5A" stroke="#5A5A5A" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" :style="{ opacity: (value <= r || value < hoveredValue) ? 1 : 0}"/>
169+
<path v-if="value === 2" fill="#4A4A4A" stroke="#4A4A4A" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
170+
<path v-if="value === 3" fill="#3A3A3A" stroke="#3A3A3A" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
171+
<path v-if="value === 4" fill="#2A2A2A" stroke="#2A2A2A" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
172+
<path v-if="value === 5" fill="#1A1A1A" stroke="#1A1A1A" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
173+
</svg>
174+
</template>
175+
</VueUiRating>
114176
</template>
115177

116178
<template #VDUI-build>
117-
<VueDataUi component="VueUiRating" :dataset="dataset" :config="config" ref="vduiBuild"/>
179+
<VueDataUi component="VueUiRating" :dataset="dataset" :config="config" ref="vduiBuild" @rate="setRating">
180+
<template #layer-under="{ value, size, focusedValue }">
181+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
182+
<path v-if="value === 1" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" fill="#CCCCCC"/>
183+
<path v-if="value === 2" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" fill="#CCCCCC"/>
184+
<path v-if="value === 3" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" fill="#CCCCCC"/>
185+
<path v-if="value === 4" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" fill="#CCCCCC"/>
186+
<path v-if="value === 5" :stroke="focusedValue === value ? '#6A6A6A' : '#CCCCCC'" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" fill="#CCCCCC"/>
187+
</svg>
188+
</template>
189+
<template #layer-above="{ value, size, hoveredValue, focusedValue }">
190+
<svg viewBox="0 0 10 10" :style="{ overflow: 'visible' }">
191+
<path v-if="value === 1" fill="#5A5A5A" stroke="#5A5A5A" stroke-linecap="round" d="M 0 5 L 10 4 L 10 6 L 0 5 Z" :style="{ opacity: (value <= r || value < hoveredValue) ? 1 : 0}"/>
192+
<path v-if="value === 2" fill="#4A4A4A" stroke="#4A4A4A" stroke-linecap="round" d="M 0 4 L 10 3 L 10 7 L 0 6 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
193+
<path v-if="value === 3" fill="#3A3A3A" stroke="#3A3A3A" stroke-linecap="round" d="M 0 3 L 10 2 L 10 8 L 0 7 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
194+
<path v-if="value === 4" fill="#2A2A2A" stroke="#2A2A2A" stroke-linecap="round" d="M 0 2 L 10 1 L 10 9 L 0 8 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
195+
<path v-if="value === 5" fill="#1A1A1A" stroke="#1A1A1A" stroke-linecap="round" d="M 0 1 L 10 0 L 10 10 L 0 9 Z" :style="{ opacity: (value <= r || value <= hoveredValue) ? 1 : 0}"/>
196+
</svg>
197+
</template>
198+
</VueDataUi>
118199
</template>
119200

120201
<template #knobs>

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const components = ref([ //--- CELEBRATION THEMES
115115
// cursor
116116
]);
117117
118-
const selectedComponent = ref(components.value[51]);
118+
const selectedComponent = ref(components.value[46]);
119119
120120
</script>
121121

0 commit comments

Comments
 (0)