docs: uniformize isOpen in examples

This commit is contained in:
Benjamin Canac
2023-05-14 15:05:33 +02:00
parent c47f5e6a68
commit cfcd2f1371
6 changed files with 21 additions and 21 deletions

View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
const open = ref(false) const isOpen = ref(false)
const people = [ const people = [
{ id: 1, label: 'Wade Cooper' }, { id: 1, label: 'Wade Cooper' },
@@ -19,9 +19,9 @@ const selected = ref([])
<template> <template>
<div> <div>
<UButton label="Open" @click="open = true" /> <UButton label="Open" @click="isOpen = true" />
<UModal v-model="open"> <UModal v-model="isOpen">
<UCommandPalette <UCommandPalette
v-model="selected" v-model="selected"
multiple multiple

View File

@@ -1,12 +1,12 @@
<script setup> <script setup>
const open = ref(false) const isOpen = ref(false)
</script> </script>
<template> <template>
<div> <div>
<UButton label="Open" @click="open = true" /> <UButton label="Open" @click="isOpen = true" />
<UModal v-model="open"> <UModal v-model="isOpen">
<div class="p-4"> <div class="p-4">
<Placeholder class="h-48" /> <Placeholder class="h-48" />
</div> </div>

View File

@@ -1,12 +1,12 @@
<script setup> <script setup>
const open = ref(false) const isOpen = ref(false)
</script> </script>
<template> <template>
<div> <div>
<UButton label="Open" @click="open = true" /> <UButton label="Open" @click="isOpen = true" />
<UModal v-model="open"> <UModal v-model="isOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header> <template #header>
<Placeholder class="h-8" /> <Placeholder class="h-8" />

View File

@@ -57,7 +57,7 @@ You can put a `CommandPalette` anywhere you want but it's most commonly used ins
#code #code
```vue ```vue
<script setup> <script setup>
const open = ref(false) const isOpen = ref(false)
const people = [ const people = [
{ id: 1, label: 'Wade Cooper' }, { id: 1, label: 'Wade Cooper' },
@@ -77,9 +77,9 @@ const selected = ref([])
<template> <template>
<div> <div>
<UButton label="Open" @click="open = true" /> <UButton label="Open" @click="isOpen = true" />
<UModal v-model="open"> <UModal v-model="isOpen">
<UCommandPalette <UCommandPalette
v-model="selected" v-model="selected"
multiple multiple

View File

@@ -14,14 +14,14 @@ headlessui:
#code #code
```vue ```vue
<script setup> <script setup>
const open = ref(false) const isOpen = ref(false)
</script> </script>
<template> <template>
<div> <div>
<UButton label="Open" @click="open = true" /> <UButton label="Open" @click="isOpen = true" />
<UModal v-model="open"> <UModal v-model="isOpen">
<!-- Content --> <!-- Content -->
</UModal> </UModal>
</div> </div>
@@ -38,14 +38,14 @@ You can put a [Card](/layout/card) component inside your Modal to handle forms a
#code #code
```vue ```vue
<script setup> <script setup>
const open = ref(false) const isOpen = ref(false)
</script> </script>
<template> <template>
<div> <div>
<UButton label="Open" @click="open = true" /> <UButton label="Open" @click="isOpen = true" />
<UModal v-model="open"> <UModal v-model="isOpen">
<UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> <UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header> <template #header>
<!-- Content --> <!-- Content -->

View File

@@ -13,14 +13,14 @@ headlessui:
#code #code
```vue ```vue
<script setup> <script setup>
const open = ref(false) const isOpen = ref(false)
</script> </script>
<template> <template>
<div> <div>
<UButton label="Open" @click="open = true" /> <UButton label="Open" @click="isOpen = true" />
<USlideover v-model="open"> <USlideover v-model="isOpen">
<!-- Content --> <!-- Content -->
</USlideover> </USlideover>
</div> </div>