mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-30 11:47:55 +01:00
playground: lint
This commit is contained in:
@@ -39,7 +39,7 @@ const components = [
|
|||||||
'tooltip'
|
'tooltip'
|
||||||
]
|
]
|
||||||
|
|
||||||
function upperName (name: string) {
|
function upperName(name: string) {
|
||||||
return splitByCase(name).map(p => upperFirst(p)).join('')
|
return splitByCase(name).map(p => upperFirst(p)).join('')
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import type { FormSubmitEvent, Form } from '#ui/types/form'
|
import type { FormSubmitEvent, Form } from '#ui/types/form'
|
||||||
|
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
input: z.string().min(10),
|
input: z.string().min(10),
|
||||||
// inputMenu: z.any().refine(option => option?.value === 'option-2', {
|
// inputMenu: z.any().refine(option => option?.value === 'option-2', {
|
||||||
@@ -38,7 +37,7 @@ const options = [
|
|||||||
{ label: 'Option 3', value: 'option-3' }
|
{ label: 'Option 3', value: 'option-3' }
|
||||||
]
|
]
|
||||||
|
|
||||||
function onSubmit (event: FormSubmitEvent<Schema>) {
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||||
console.log(event.data)
|
console.log(event.data)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -76,7 +75,7 @@ function onSubmit (event: FormSubmitEvent<Schema>) {
|
|||||||
Submit
|
Submit
|
||||||
</UButton>
|
</UButton>
|
||||||
|
|
||||||
<UButton variant="outline" :disabled="form?.disabled" @click="form.clear()">
|
<UButton variant="outline" :disabled="form?.disabled" @click="form?.clear()">
|
||||||
Clear
|
Clear
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -21,11 +21,11 @@ const state = reactive<Partial<Schema & { nested: Partial<NestedSchema> }>>({
|
|||||||
|
|
||||||
const checked = ref(false)
|
const checked = ref(false)
|
||||||
|
|
||||||
function onSubmit (event: FormSubmitEvent<Schema>) {
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||||
console.log('Success', event.data)
|
console.log('Success', event.data)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onError (event: any) {
|
function onError(event: any) {
|
||||||
console.log('Error', event)
|
console.log('Error', event)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -18,25 +18,25 @@ type ItemSchema = z.output<typeof itemSchema>
|
|||||||
|
|
||||||
const state = reactive<Partial<Schema & { items: Partial<ItemSchema>[] }>>({})
|
const state = reactive<Partial<Schema & { items: Partial<ItemSchema>[] }>>({})
|
||||||
|
|
||||||
function addItem () {
|
function addItem() {
|
||||||
if (!state.items) {
|
if (!state.items) {
|
||||||
state.items = []
|
state.items = []
|
||||||
}
|
}
|
||||||
state.items.push({})
|
state.items.push({})
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeItem () {
|
function removeItem() {
|
||||||
if (state.items) {
|
if (state.items) {
|
||||||
state.items.pop()
|
state.items.pop()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const formItemRef = ref()
|
const formItemRef = ref()
|
||||||
|
|
||||||
function onSubmit (event: FormSubmitEvent<Schema>) {
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||||
console.log('Success', event.data)
|
console.log('Success', event.data)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onError (event: any) {
|
function onError(event: any) {
|
||||||
console.log('Error', event)
|
console.log('Error', event)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ const items = computed(() => [
|
|||||||
[{
|
[{
|
||||||
label: 'Profile',
|
label: 'Profile',
|
||||||
icon: 'i-heroicons-user',
|
icon: 'i-heroicons-user',
|
||||||
select (e: Event) {
|
select(e: Event) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
console.log('Profile clicked')
|
console.log('Profile clicked')
|
||||||
}
|
}
|
||||||
@@ -37,7 +37,7 @@ const items = computed(() => [
|
|||||||
label: 'Invite by link',
|
label: 'Invite by link',
|
||||||
icon: 'i-heroicons-link',
|
icon: 'i-heroicons-link',
|
||||||
shortcuts: [metaSymbol.value, 'I'],
|
shortcuts: [metaSymbol.value, 'I'],
|
||||||
select (e: Event) {
|
select(e: Event) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
console.log('Invite by link clicked')
|
console.log('Invite by link clicked')
|
||||||
}
|
}
|
||||||
@@ -49,21 +49,21 @@ const items = computed(() => [
|
|||||||
icon: 'i-simple-icons-slack',
|
icon: 'i-simple-icons-slack',
|
||||||
to: 'https://slack.com',
|
to: 'https://slack.com',
|
||||||
target: '_blank',
|
target: '_blank',
|
||||||
select (e: Event) {
|
select(e: Event) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
console.log('Import from Slack clicked')
|
console.log('Import from Slack clicked')
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
label: 'Import from Trello',
|
label: 'Import from Trello',
|
||||||
icon: 'i-simple-icons-trello',
|
icon: 'i-simple-icons-trello',
|
||||||
select (e: Event) {
|
select(e: Event) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
console.log('Import from Trello clicked')
|
console.log('Import from Trello clicked')
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
label: 'Import from Asana',
|
label: 'Import from Asana',
|
||||||
icon: 'i-simple-icons-asana',
|
icon: 'i-simple-icons-asana',
|
||||||
select (e: Event) {
|
select(e: Event) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
console.log('Import from Asana clicked')
|
console.log('Import from Asana clicked')
|
||||||
}
|
}
|
||||||
@@ -78,7 +78,7 @@ const items = computed(() => [
|
|||||||
icon: 'i-simple-icons-github',
|
icon: 'i-simple-icons-github',
|
||||||
to: 'https://github.com/nuxt/ui',
|
to: 'https://github.com/nuxt/ui',
|
||||||
target: '_blank',
|
target: '_blank',
|
||||||
select (e: Event) {
|
select(e: Event) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
|
|||||||
@@ -13,8 +13,7 @@ type Schema = z.output<typeof schema>
|
|||||||
const state = reactive<Partial<Schema>>({})
|
const state = reactive<Partial<Schema>>({})
|
||||||
const state2 = reactive<Partial<Schema>>({})
|
const state2 = reactive<Partial<Schema>>({})
|
||||||
|
|
||||||
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||||
function onSubmit (event: FormSubmitEvent<Schema>) {
|
|
||||||
console.log(event.data)
|
console.log(event.data)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ const links = [
|
|||||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||||
},
|
},
|
||||||
badge: 100,
|
badge: 100,
|
||||||
select () {
|
select() {
|
||||||
console.log('Profile clicked')
|
console.log('Profile clicked')
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
const open = ref(false)
|
const open = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
function send () {
|
function send() {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ const templates = (id: number) => [{
|
|||||||
},
|
},
|
||||||
actions: [{
|
actions: [{
|
||||||
label: 'Action',
|
label: 'Action',
|
||||||
click () {
|
click() {
|
||||||
console.log(`Toast ${id} action clicked`)
|
console.log(`Toast ${id} action clicked`)
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
@@ -50,13 +50,13 @@ const templates = (id: number) => [{
|
|||||||
actions: [{
|
actions: [{
|
||||||
label: 'Action 1',
|
label: 'Action 1',
|
||||||
color: 'gray' as const,
|
color: 'gray' as const,
|
||||||
click () {
|
click() {
|
||||||
console.log(`Toast ${id} action 1 clicked`)
|
console.log(`Toast ${id} action 1 clicked`)
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
label: 'Action 2',
|
label: 'Action 2',
|
||||||
color: 'black' as const,
|
color: 'black' as const,
|
||||||
click () {
|
click() {
|
||||||
console.log(`Toast ${id} action 2 clicked`)
|
console.log(`Toast ${id} action 2 clicked`)
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
@@ -67,13 +67,13 @@ const templates = (id: number) => [{
|
|||||||
label: 'Action',
|
label: 'Action',
|
||||||
color: 'primary' as const,
|
color: 'primary' as const,
|
||||||
variant: 'outline' as const,
|
variant: 'outline' as const,
|
||||||
click () {
|
click() {
|
||||||
console.log(`Toast ${id} action clicked`)
|
console.log(`Toast ${id} action clicked`)
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
}]
|
}]
|
||||||
|
|
||||||
function addToast () {
|
function addToast() {
|
||||||
const id = count.value++
|
const id = count.value++
|
||||||
|
|
||||||
const template = templates(id)[Math.floor(Math.random() * templates(id).length)]
|
const template = templates(id)[Math.floor(Math.random() * templates(id).length)]
|
||||||
@@ -81,13 +81,13 @@ function addToast () {
|
|||||||
add({
|
add({
|
||||||
id,
|
id,
|
||||||
...template,
|
...template,
|
||||||
click (toast) {
|
click(toast) {
|
||||||
console.log(`Toast ${toast.id} clicked`)
|
console.log(`Toast ${toast.id} clicked`)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateToast () {
|
function updateToast() {
|
||||||
if (!last.value) {
|
if (!last.value) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -98,7 +98,7 @@ function updateToast () {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeToast () {
|
function removeToast() {
|
||||||
if (!last.value) {
|
if (!last.value) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user