Pt demo review

pull/3938/head
Tuğçe Küçükoğlu 2023-05-09 12:18:10 +03:00
parent a40dba06d4
commit 65275ff32a
4 changed files with 38 additions and 61 deletions

View File

@ -4,9 +4,7 @@
<Rating
v-model="value"
:pt="{
onIcon: () => ({
class: 'text-orange-400'
})
onIcon: { class: 'text-orange-400' }
}"
/>
</div>
@ -23,9 +21,7 @@ export default {
<Rating
v-model="value"
:pt="{
onIcon: () => ({
class: 'text-orange-400'
})
onIcon: { class: 'text-orange-400' }
}"
/>`,
options: `
@ -34,9 +30,7 @@ export default {
<Rating
v-model="value"
:pt="{
onIcon: () => ({
class: 'text-orange-400'
})
onIcon: { class: 'text-orange-400' }
}"
/>
</div>
@ -57,9 +51,7 @@ export default {
<Rating
v-model="value"
:pt="{
onIcon: () => ({
class: 'text-orange-400'
})
onIcon: { class: 'text-orange-400' }
}"
/>
</div>

View File

@ -6,8 +6,8 @@
:options="options"
aria-labelledby="basic"
:pt="{
label: ({ state }) => ({
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
button: ({ context }) => ({
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
})
}"
/>
@ -28,10 +28,11 @@ export default {
:options="options"
aria-labelledby="basic"
:pt="{
label: ({ state }) => ({
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
button: ({ context }) => ({
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
})
}"/>`,
}"
/>`,
options: `
<template>
<div class="card flex justify-content-center">
@ -40,8 +41,8 @@ export default {
:options="options"
aria-labelledby="basic"
:pt="{
label: ({ state }) => ({
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
button: ({ context }) => ({
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
})
}"
/>
@ -66,8 +67,8 @@ export default {
:options="options"
aria-labelledby="basic"
:pt="{
label: ({ state }) => ({
class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
button: ({ context }) => ({
class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
})
}"
/>

View File

@ -3,14 +3,10 @@
<div class="card flex justify-content-center">
<Slider
v-model="value"
class="w-14rem"
:pt="{
handle: {
class: 'bg-orange-400 border-900'
},
range: {
class: 'bg-orange-400'
}
root: { class: 'w-14rem' },
handle: { class: 'bg-orange-400 border-900' },
range: { class: 'bg-orange-400' }
}"
/>
</div>
@ -26,14 +22,10 @@ export default {
basic: `
<Slider
v-model="value"
class="w-14rem"
:pt="{
handle: {
class: 'bg-orange-400 border-900'
},
range: {
class: 'bg-orange-400'
}
root: { class: 'w-14rem' },
handle: { class: 'bg-orange-400 border-900' },
range: { class: 'bg-orange-400' }
}"
/>`,
options: `
@ -41,14 +33,10 @@ export default {
<div class="card flex justify-content-center">
<Slider
v-model="value"
class="w-14rem"
:pt="{
handle: {
class: 'bg-orange-400 border-900'
},
range: {
class: 'bg-orange-400'
}
root: { class: 'w-14rem' },
handle: { class: 'bg-orange-400 border-900' },
range: { class: 'bg-orange-400' }
}"
/>
</div>
@ -68,14 +56,10 @@ export default {
<div class="card flex justify-content-center">
<Slider
v-model="value"
class="w-14rem"
:pt="{
handle: {
class: 'bg-orange-400 border-900'
},
range: {
class: 'bg-orange-400'
}
root: { class: 'w-14rem' },
handle: { class: 'bg-orange-400 border-900' },
range: { class: 'bg-orange-400' }
}"
/>
</div>

View File

@ -4,9 +4,9 @@
<TriStateCheckbox
v-model="value"
:pt="{
checboxBox: () => ({
class: value ? 'bg-green-500 border-white' : undefined
})
checbox: {
class: value ? 'bg-teal-500 border-white' : undefined
}
}"
/>
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
@ -24,9 +24,9 @@ export default {
<TriStateCheckbox
v-model="value"
:pt="{
checboxBox: () => ({
class: value ? 'bg-green-500 border-white' : undefined
})
checbox: {
class: value ? 'bg-teal-500 border-white' : undefined
}
}"
/>`,
options: `
@ -35,9 +35,9 @@ export default {
<TriStateCheckbox
v-model="value"
:pt="{
checboxBox: () => ({
class: value ? 'bg-green-500 border-white' : undefined
})
checbox: {
class: value ? 'bg-teal-500 border-white' : undefined
}
}"
/>
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
@ -59,9 +59,9 @@ export default {
<TriStateCheckbox
v-model="value"
:pt="{
checboxBox: () => ({
class: value ? 'bg-green-500 border-white' : undefined
})
checbox: {
class: value ? 'bg-teal-500 border-white' : undefined
}
}"
/>
<label for="checkbox">{{ value == null ? 'null' : value }}</label>