arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: update

Browse Source
This commit is contained in:
Benjamin Canac
2022-07-18 17:32:12 +02:00
parent b44e3af422
commit dc1050225b
2 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/pages/components/[component].vue
View File

@@ -104,14 +104,15 @@ const is = `U${params.component}`
const component = nuxtApp.vueApp.component(is)
const people = [
{ id: 1, name: 'Durward Reynolds', disabled: false },
{ id: 2, name: 'Kenton Towne', disabled: false },
{ id: 3, name: 'Therese Wunsch', disabled: false },
{ id: 4, name: 'Benedict Kessler', disabled: true },
{ id: 5, name: 'Katelyn Rohan', disabled: false }
{ id: 1, label: 'Durward Reynolds', disabled: false },
{ id: 2, label: 'Kenton Towne', disabled: false },
{ id: 3, label: 'Therese Wunsch', disabled: false },
{ id: 4, label: 'Benedict Kessler', disabled: true },
{ id: 5, label: 'Katelyn Rohan', disabled: false }
]
const selectCustom = ref(people[0])
const commandPalette = ref(people[0])
const alertDialog = ref(false)
const toggle = ref(false)
const modal = ref(false)
@@ -194,16 +195,12 @@ const defaultProps = {
]
},
CommandPalette: {
modelValue: commandPalette,
'onUpdate:modelValue': (v) => { commandPalette.value = v },
groups: [{
key: 'people',
label: 'People',
commands: [
{ id: 1, label: 'Durward Reynolds', disabled: false },
{ id: 2, label: 'Kenton Towne', disabled: false },
{ id: 3, label: 'Therese Wunsch', disabled: false },
{ id: 4, label: 'Benedict Kessler', disabled: true },
{ id: 5, label: 'Katelyn Rohan', disabled: false }
]
commands: people
}]
},
Icon: {
@@ -245,7 +242,7 @@ const defaultProps = {
SelectCustom: {
modelValue: selectCustom,
'onUpdate:modelValue': (v) => { selectCustom.value = v },
textAttribute: 'name',
textAttribute: 'label',
options: people
},
Textarea: {

25
docs/pages/examples.vue
View File

@@ -170,6 +170,16 @@
<UButton icon="heroicons-outline:bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
</div>
<div>
<div class="font-medium text-sm mb-1 u-text-gray-700">
Command palette:
</div>
<UCard body-class="">
<UCommandPalette v-model="form.persons" multiple :groups="[{ key: 'persons', commands: people }]" />
</UCard>
</div>
<div>
<div class="font-medium text-sm mb-1 u-text-gray-700">
Card:
@@ -198,7 +208,7 @@
</UFormGroup>
<UFormGroup label="People" name="people" required>
<USelectCustom v-model="form.person" name="people" :options="people" text-attribute="name" />
<USelectCustom v-model="form.person" name="people" :options="people" text-attribute="label" searchable />
</UFormGroup>
<UFormGroup label="Toggle" name="toggle">
@@ -241,11 +251,11 @@
const isModalOpen = ref(false)
const people = [
{ id: 1, name: 'Durward Reynolds', disabled: false },
{ id: 2, name: 'Kenton Towne', disabled: false },
{ id: 3, name: 'Therese Wunsch', disabled: false },
{ id: 4, name: 'Benedict Kessler', disabled: true },
{ id: 5, name: 'Katelyn Rohan', disabled: false }
{ id: 1, label: 'Durward Reynolds', disabled: false },
{ id: 2, label: 'Kenton Towne', disabled: false },
{ id: 3, label: 'Therese Wunsch', disabled: false },
{ id: 4, label: 'Benedict Kessler', disabled: true },
{ id: 5, label: 'Katelyn Rohan', disabled: false }
]
const form = reactive({
email: '',
@@ -255,7 +265,8 @@ const form = reactive({
notifications: [],
terms: false,
personId: null,
person: ref(people[0])
person: ref(people[0]),
persons: ref([people[0]])
})
const { $toast } = useNuxtApp()