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

View File

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

View File

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

View File

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