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

chore(deps): migrate to eslint 9 (#2443)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-24 10:30:37 +02:00
committed by GitHub
parent b29fcd2650
commit cae4f0c4a8
177 changed files with 2034 additions and 1289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/app.vue
View File

@@ -50,20 +50,22 @@ const links = computed(() => {
icon: 'i-heroicons-book-open',
to: '/getting-started',
active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
}, ...(navigation.value.find(item => item._path === '/pro') ? [{
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro',
active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
}, {
label: 'Pricing',
icon: 'i-heroicons-ticket',
to: '/pro/pricing'
}, {
label: 'Templates',
icon: 'i-heroicons-computer-desktop',
to: '/pro/templates'
}] : []), {
}, ...(navigation.value.find(item => item._path === '/pro')
? [{
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro',
active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
}, {
label: 'Pricing',
icon: 'i-heroicons-ticket',
to: '/pro/pricing'
}, {
label: 'Templates',
icon: 'i-heroicons-computer-desktop',
to: '/pro/templates'
}]
: []), {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: '/releases'

2
docs/components/Header.vue
View File

@@ -48,8 +48,8 @@
<script setup lang="ts">
import type { NavItem } from '@nuxt/content'
import type { HeaderLink } from '#ui-pro/types'
import pkg from '@nuxt/ui-pro/package.json'
import type { HeaderLink } from '#ui-pro/types'
defineProps<{
links: HeaderLink[]

8
docs/components/color-picker/ColorPicker.vue
View File

@@ -32,10 +32,10 @@ const colorMode = useColorMode()
const primaryColors = computed(() => appConfig.ui.colors.filter(color => color !== 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
const primary = computed({
get () {
get() {
return primaryColors.value.find(option => option.value === appConfig.ui.primary)
},
set (option) {
set(option) {
appConfig.ui.primary = option.value
window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
@@ -44,10 +44,10 @@ const primary = computed({
const grayColors = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
const gray = computed({
get () {
get() {
return grayColors.value.find(option => option.value === appConfig.ui.gray)
},
set (option) {
set(option) {
appConfig.ui.gray = option.value
window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.gray)

2
docs/components/color-picker/ColorPickerPill.vue
View File

@@ -20,6 +20,6 @@
</template>
<script setup lang="ts">
defineProps<{ color: { value: string, hex: string }, selected: { value: string} }>()
defineProps<{ color: { value: string, hex: string }, selected: { value: string } }>()
defineEmits(['select'])
</script>

4
docs/components/content/ColorModeButton.vue
View File

@@ -18,10 +18,10 @@
const colorMode = useColorMode()
const isDark = computed({
get () {
get() {
return colorMode.value === 'dark'
},
set () {
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})

18
docs/components/content/ComponentCard.vue
View File

@@ -54,7 +54,6 @@
import { upperFirst, camelCase, kebabCase } from 'scule'
import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
// eslint-disable-next-line vue/no-dupe-keys
const props = defineProps({
slug: {
type: String,
@@ -89,7 +88,7 @@ const props = defineProps({
default: () => []
},
options: {
type: Array as PropType<{ name: string; values: string[]; restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
type: Array as PropType<{ name: string, values: string[], restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
default: () => []
},
backgroundClass: {
@@ -114,7 +113,6 @@ const props = defineProps({
}
})
// eslint-disable-next-line vue/no-dupe-keys
const baseProps = reactive({ ...props.baseProps })
const componentProps = reactive({ ...props.props })
@@ -158,13 +156,13 @@ const generateOptions = (key: string, schema: { kind: string, schema: [], type:
const schemaOptions = Object.values(schema?.schema || {})
if (key.toLowerCase() === 'size' && schemaOptions?.length > 0) {
const baseSizeOrder = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4, 'xl': 5 }
const baseSizeOrder = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
schemaOptions.sort((a: string, b: string) => {
const aBase = a.match(/[a-zA-Z]+/)[0].toLowerCase()
const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase()
const aBase = a.match(/[a-z]+/i)[0].toLowerCase()
const bBase = b.match(/[a-z]+/i)[0].toLowerCase()
const aNum = parseInt(a.match(/\d+/)?.[0]) || 1
const bNum = parseInt(b.match(/\d+/)?.[0]) || 1
const aNum = Number.parseInt(a.match(/\d+/)?.[0]) || 1
const bNum = Number.parseInt(b.match(/\d+/)?.[0]) || 1
if (aBase === bBase) {
return aBase === 'xs' ? bNum - aNum : aNum - bNum
@@ -214,7 +212,6 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
}
}).filter(Boolean))
// eslint-disable-next-line vue/no-dupe-keys
const code = computed(() => {
let code = `\`\`\`html
<template>
@@ -253,7 +250,7 @@ const code = computed(() => {
return code
})
function renderObject (obj: any) {
function renderObject(obj: any) {
if (Array.isArray(obj)) {
return `[${obj.map(renderObject).join(', ')}]`
}
@@ -272,6 +269,7 @@ function renderObject (obj: any) {
const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`, async () => {
let formatted = ''
try {
// @ts-ignore
formatted = await $prettier.format(code.value, {
trailingComma: 'none',
semi: false,

1
docs/components/content/ComponentPreset.vue
View File

@@ -18,7 +18,6 @@ const props = defineProps({
const route = useRoute()
const highlighter = useShikiHighlighter()
// eslint-disable-next-line vue/no-dupe-keys
const slug = props.slug || route.params.slug[route.params.slug.length - 1]
const camelName = camelCase(slug)
const name = `U${upperFirst(camelName)}`

2
docs/components/content/ComponentPropsField.vue
View File

@@ -36,7 +36,7 @@ defineProps({
}
})
function startsWithCapital (word) {
function startsWithCapital(word) {
if (word.charAt(0).startsWith('"')) {
return false
}

2
docs/components/content/examples/BreadcrumbExampleIconSlot.vue
View File

@@ -13,7 +13,7 @@ const links = [{
<UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
<template #icon="{ link, index, isActive }">
<UAvatar
:alt="(index + 1 ).toString()"
:alt="(index + 1).toString()"
:ui="{
background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''

20
docs/components/content/examples/CommandPaletteExampleGroups.vue
View File

@@ -18,19 +18,21 @@ const actions = [
]
const groups = computed(() =>
[commandPaletteRef.value?.query ? {
key: 'users',
commands: users
} : {
key: 'recent',
label: 'Recent searches',
commands: users.slice(0, 1)
}, {
[commandPaletteRef.value?.query
? {
key: 'users',
commands: users
}
: {
key: 'recent',
label: 'Recent searches',
commands: users.slice(0, 1)
}, {
key: 'actions',
commands: actions
}].filter(Boolean))
function onSelect (option) {
function onSelect(option) {
if (option.click) {
option.click()
} else if (option.to) {

2
docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
View File

@@ -71,7 +71,7 @@ const ui = {
:autoselect="false"
command-attribute="title"
:fuse="{
fuseOptions: { keys: ['title', 'category'] },
fuseOptions: { keys: ['title', 'category'] }
}"
placeholder="Search docs"
/>

2
docs/components/content/examples/ContextMenuExample.vue
View File

@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
function onContextMenu() {
const top = unref(y) - unref(windowY)
const left = unref(x)

2
docs/components/content/examples/ContextMenuExampleArrow.vue
View File

@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
function onContextMenu() {
const top = unref(y) - unref(windowY)
const left = unref(x)

2
docs/components/content/examples/ContextMenuExampleOffset.vue
View File

@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
function onContextMenu() {
const top = unref(y) - unref(windowY)
const left = unref(x)

2
docs/components/content/examples/ContextMenuExamplePlacement.vue
View File

@@ -7,7 +7,7 @@ const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
function onContextMenu() {
const top = unref(y) - unref(windowY)
const left = unref(x)

4
docs/components/content/examples/DatePickerRangeExample.vue
View File

@@ -11,11 +11,11 @@ const ranges = [
]
const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })
function isRangeSelected (duration: Duration) {
function isRangeSelected(duration: Duration) {
return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
}
function selectRange (duration: Duration) {
function selectRange(duration: Duration) {
selected.value = { start: sub(new Date(), duration), end: new Date() }
}
</script>

2
docs/components/content/examples/FormExampleBasic.vue
View File

@@ -13,7 +13,7 @@ const validate = (state: any): FormError[] => {
return errors
}
async function onSubmit (event: FormSubmitEvent<any>) {
async function onSubmit(event: FormSubmitEvent<any>) {
// Do something with data
console.log(event.data)
}

2
docs/components/content/examples/FormExampleElements.vue
View File

@@ -53,7 +53,7 @@ type Schema = z.infer<typeof schema>
const form = ref()
async function onSubmit (event: FormSubmitEvent<Schema>) {
async function onSubmit(event: FormSubmitEvent<Schema>) {
// Do something with event.data
console.log(event.data)
}

2
docs/components/content/examples/FormExampleJoi.vue
View File

@@ -14,7 +14,7 @@ const state = reactive({
password: undefined
})
async function onSubmit (event: FormSubmitEvent<any>) {
async function onSubmit(event: FormSubmitEvent<any>) {
// Do something with event.data
console.log(event.data)
}

4
docs/components/content/examples/FormExampleOnError.vue
View File

@@ -13,12 +13,12 @@ const validate = (state: any): FormError[] => {
return errors
}
async function onSubmit (event: FormSubmitEvent<any>) {
async function onSubmit(event: FormSubmitEvent<any>) {
// Do something with data
console.log(event.data)
}
async function onError (event: FormErrorEvent) {
async function onError(event: FormErrorEvent) {
const element = document.getElementById(event.errors[0].id)
element?.focus()
element?.scrollIntoView({ behavior: 'smooth', block: 'center' })

2
docs/components/content/examples/FormExampleSuperstruct.vue
View File

@@ -14,7 +14,7 @@ const state = reactive({
type Schema = Infer<typeof schema>
async function onSubmit (event: FormSubmitEvent<Schema>) {
async function onSubmit(event: FormSubmitEvent<Schema>) {
console.log(event.data)
}
</script>

2
docs/components/content/examples/FormExampleValibot.vue
View File

@@ -14,7 +14,7 @@ const state = reactive({
password: ''
})
async function onSubmit (event: FormSubmitEvent<Schema>) {
async function onSubmit(event: FormSubmitEvent<Schema>) {
// Do something with event.data
console.log(event.data)
}

2
docs/components/content/examples/FormExampleYup.vue
View File

@@ -16,7 +16,7 @@ const state = reactive({
password: undefined
})
async function onSubmit (event: FormSubmitEvent<Schema>) {
async function onSubmit(event: FormSubmitEvent<Schema>) {
// Do something with event.data
console.log(event.data)
}

2
docs/components/content/examples/FormExampleZod.vue
View File

@@ -14,7 +14,7 @@ const state = reactive({
password: undefined
})
async function onSubmit (event: FormSubmitEvent<Schema>) {
async function onSubmit(event: FormSubmitEvent<Schema>) {
// Do something with data
console.log(event.data)
}

2
docs/components/content/examples/InputMenuExampleSearchAsync.vue
View File

@@ -2,7 +2,7 @@
const loading = ref(false)
const selected = ref()
async function search (q: string) {
async function search(q: string) {
loading.value = true
const users: any[] = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })

2
docs/components/content/examples/ModalExampleComponent.vue
View File

@@ -8,7 +8,7 @@ defineProps({
const emit = defineEmits(['success'])
function onSuccess () {
function onSuccess() {
emit('success')
}
</script>

4
docs/components/content/examples/ModalExampleComposable.vue
View File

@@ -5,11 +5,11 @@ const toast = useToast()
const modal = useModal()
const count = ref(0)
function openModal () {
function openModal() {
count.value += 1
modal.open(ModalExampleComponent, {
count: count.value,
onSuccess () {
onSuccess() {
toast.add({
title: 'Success !',
id: 'modal-success'

2
docs/components/content/examples/NotificationExampleCallback.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
const toast = useToast()
function onCallback () {
function onCallback() {
alert('Notification expired!')
}
</script>

2
docs/components/content/examples/NotificationExampleClick.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
const toast = useToast()
function onClick () {
function onClick() {
alert('Clicked!')
}
</script>

2
docs/components/content/examples/PaginationExampleTo.vue
View File

@@ -11,7 +11,7 @@ const items = ref(Array(50))
:to="(page: number) => ({
query: { page },
// Hash is specified here to prevent the page from scrolling to the top
hash: '#links',
hash: '#links'
})"
/>
</template>

8
docs/components/content/examples/ProgressExampleSlotIndicator.vue
View File

@@ -3,10 +3,10 @@ const temp = ref(35)
const color = computed(() => {
switch (true) {
case temp.value < 10: return 'blue'
case temp.value < 20: return 'amber'
case temp.value < 30: return 'orange'
default: return 'red'
case temp.value < 10: return 'blue'
case temp.value < 20: return 'amber'
case temp.value < 30: return 'orange'
default: return 'red'
}
})
</script>

6
docs/components/content/examples/SelectMenuExampleCreatable.vue
View File

@@ -37,7 +37,7 @@ const labels = computed({
}
})
function hashCode (str) {
function hashCode(str) {
let hash = 0
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash)
@@ -45,7 +45,7 @@ function hashCode (str) {
return hash
}
function intToRGB (i) {
function intToRGB(i) {
const c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase()
@@ -53,7 +53,7 @@ function intToRGB (i) {
return '00000'.substring(0, 6 - c.length) + c
}
function generateColorFromString (str) {
function generateColorFromString(str) {
return intToRGB(hashCode(str))
}
</script>

2
docs/components/content/examples/SelectMenuExampleCreatableFunction.vue
View File

@@ -38,7 +38,7 @@ const labels = computed({
const showCreateOption = (query, results) => {
const lowercaseQuery = String.prototype.toLowerCase.apply(query || '')
return lowercaseQuery.length >= 3 && !results.find(option => {
return lowercaseQuery.length >= 3 && !results.find((option) => {
return String.prototype.toLowerCase.apply(option['name'] || '') === lowercaseQuery
})
}

2
docs/components/content/examples/SelectMenuExampleSearchAsync.vue
View File

@@ -2,7 +2,7 @@
const loading = ref(false)
const selected = ref([])
async function search (q: string) {
async function search(q: string) {
loading.value = true
const users: any[] = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })

5
docs/components/content/examples/SlideoverExampleComponent.vue
View File

@@ -1,5 +1,4 @@
<script lang="ts" setup>
const props = defineProps({
count: {
type: Number,
@@ -8,7 +7,7 @@ const props = defineProps({
})
const emits = defineEmits<{
close: [];
close: []
}>()
</script>
@@ -27,4 +26,4 @@ const emits = defineEmits<{
<Placeholder class="h-full" />
</UCard>
</USlideover>
</template>
</template>

2
docs/components/content/examples/SlideoverExampleComposable.vue
View File

@@ -3,7 +3,7 @@ import { SlideoverExampleComponent } from '#components'
const slideover = useSlideover()
const count = ref(0)
function openSlideover () {
function openSlideover() {
count.value += 1
slideover.open(SlideoverExampleComponent, {
count: count.value,

14
docs/components/content/examples/TableExampleAdvanced.vue
View File

@@ -19,13 +19,13 @@ const columns = [{
}]
const selectedColumns = ref(columns)
const columnsTable = computed(() => columns.filter((column) => selectedColumns.value.includes(column)))
const columnsTable = computed(() => columns.filter(column => selectedColumns.value.includes(column)))
// Selected Rows
const selectedRows = ref([])
function select (row) {
const index = selectedRows.value.findIndex((item) => item.id === row.id)
function select(row) {
const index = selectedRows.value.findIndex(item => item.id === row.id)
if (index === -1) {
selectedRows.value.push(row)
} else {
@@ -92,10 +92,10 @@ const { data: todos, status } = await useLazyAsyncData<{
}[]>('todos', () => ($fetch as any)(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
query: {
q: search.value,
'_page': page.value,
'_limit': pageCount.value,
'_sort': sort.value.column,
'_order': sort.value.direction
_page: page.value,
_limit: pageCount.value,
_sort: sort.value.column,
_order: sort.value.direction
}
}), {
default: () => [],

4
docs/components/content/examples/TableExampleClickable.vue
View File

@@ -31,8 +31,8 @@ const people = [{
role: 'Owner'
}]
function select (row) {
const index = selected.value.findIndex((item) => item.id === row.id)
function select(row) {
const index = selected.value.findIndex(item => item.id === row.id)
if (index === -1) {
selected.value.push(row)
} else {

66
docs/components/content/examples/TableExampleLoadingSlot.vue
View File

@@ -34,53 +34,55 @@ const pending = ref(true)
/* https://codepen.io/jenning/pen/YzNmzaV */
.loader {
--color: rgb(var(--color-primary-400));
--size-mid: 6vmin;
--size-dot: 1.5vmin;
--size-bar: 0.4vmin;
--size-square: 3vmin;
--color: rgb(var(--color-primary-400));
--size-mid: 6vmin;
--size-dot: 1.5vmin;
--size-bar: 0.4vmin;
--size-square: 3vmin;
display: block;
position: relative;
width: 50%;
display: grid;
place-items: center;
display: block;
position: relative;
width: 50%;
display: grid;
place-items: center;
}
.loader::before,
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
content: '';
box-sizing: border-box;
position: absolute;
}
/**
loader --6
loader --6
**/
.loader.--6::before {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
@keyframes loader-6 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(100%);
}
0%,
100% {
transform: none;
}
50% {
transform: translateX(100%) translateY(100%);
}
25% {
transform: translateX(100%);
}
75% {
transform: translateY(100%);
}
50% {
transform: translateX(100%) translateY(100%);
}
75% {
transform: translateY(100%);
}
}
</style>

2
docs/components/content/examples/TableExampleSlots.vue
View File

@@ -53,7 +53,7 @@ const people = [{
role: 'Member'
}]
const items = (row) => [
const items = row => [
[{
label: 'Edit',
icon: 'i-heroicons-pencil-square-20-solid',

2
docs/components/content/examples/TabsExampleChange.vue
View File

@@ -13,7 +13,7 @@ const items = [{
content: 'Finally, this is the content for Tab3'
}]
function onChange (index) {
function onChange(index) {
const item = items[index]
alert(`${item.label} was clicked!`)

4
docs/components/content/examples/TabsExampleItemCustomSlot.vue
View File

@@ -10,11 +10,11 @@ const items = [{
const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
const passwordForm = reactive({ currentPassword: '', newPassword: '' })
function onSubmitAccount () {
function onSubmitAccount() {
console.log('Submitted form:', accountForm)
}
function onSubmitPassword () {
function onSubmitPassword() {
console.log('Submitted form:', passwordForm)
}
</script>

2
docs/components/content/examples/TabsExampleItemSlot.vue
View File

@@ -12,7 +12,7 @@ const items = [{
const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
const passwordForm = reactive({ currentPassword: '', newPassword: '' })
function onSubmit (form) {
function onSubmit(form) {
console.log('Submitted form:', form)
}
</script>

6
docs/components/content/examples/TabsExampleVModel.vue
View File

@@ -17,15 +17,15 @@ const route = useRoute()
const router = useRouter()
const selected = computed({
get () {
const index = items.findIndex((item) => item.label === route.query.tab)
get() {
const index = items.findIndex(item => item.label === route.query.tab)
if (index === -1) {
return 0
}
return index
},
set (value) {
set(value) {
// Hash is specified here to prevent the page from scrolling to the top
router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
}

6
docs/components/date-picker/DatePicker.vue
View File

@@ -31,9 +31,9 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanSm = breakpoints.smaller('sm')
const attrs = {
transparent: true,
borderless: true,
color: 'primary',
'transparent': true,
'borderless': true,
'color': 'primary',
'is-dark': { selector: 'html', darkClass: 'dark' },
'first-day-of-week': 2
}

2
docs/components/home/HomeProDemoBlock.vue
View File

@@ -29,7 +29,7 @@
v-else
class="font-semibold flex flex-col gap-1 text-center"
:class="[
!block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900'),
!block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900')
]"
>
{{ block.name }}

11
docs/components/home/HomeTetris.vue
View File

@@ -36,21 +36,22 @@ const cols = ref(0)
const { width, height } = useElementSize(el)
function createGrid () {
function createGrid() {
grid.value = []
for (let i = 0; i <= rows.value; i++) {
// eslint-disable-next-line unicorn/no-new-array
grid.value.push(new Array(cols.value).fill(null))
}
}
function createNewCell () {
function createNewCell() {
const x = Math.floor(Math.random() * cols.value)
grid.value[0][x] = true
}
function moveCellsDown () {
function moveCellsDown() {
for (let row = rows.value - 1; row >= 0; row--) {
for (let col = 0; col < cols.value; col++) {
if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) {
@@ -69,11 +70,11 @@ function moveCellsDown () {
}, 500)
}
function removeCell (row, col) {
function removeCell(row, col) {
grid.value[row][col] = null
}
function calcGrid () {
function calcGrid() {
const base = Math.ceil(width.value / 60)
const cell = width.value / base

6
docs/composables/useComponentMeta.ts
View File

@@ -1,13 +1,15 @@
const useComponentsMetaState = () => useState('components-meta', () => ({}))
export async function fetchComponentMeta (name: string) {
export async function fetchComponentMeta(name: string) {
const state = useComponentsMetaState()
if (state.value[name]?.then) {
await state.value[name]
return state.value[name]
}
if (state.value[name]) { return state.value[name] }
if (state.value[name]) {
return state.value[name]
}
// Store promise to avoid multiple calls

6
docs/composables/useContentExamplesCode.ts
View File

@@ -1,6 +1,6 @@
const useContentExamplesCodeState = () => useState('content-examples-code', () => ({}))
export async function fetchContentExampleCode (name?: string) {
export async function fetchContentExampleCode(name?: string) {
if (!name) return
const state = useContentExamplesCodeState()
@@ -8,7 +8,9 @@ export async function fetchContentExampleCode (name?: string) {
await state.value[name]
return state.value[name]
}
if (state.value[name]) { return state.value[name] }
if (state.value[name]) {
return state.value[name]
}
// add to nitro prerender
if (import.meta.server) {

32
docs/error.vue
View File

@@ -29,8 +29,8 @@
</template>
<script setup lang="ts">
import type { NuxtError } from '#app'
import type { ParsedContent } from '@nuxt/content'
import type { NuxtError } from '#app'
useSeoMeta({
title: 'Page not found',
@@ -57,20 +57,22 @@ const links = computed(() => {
icon: 'i-heroicons-book-open',
to: '/getting-started',
active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
}, ...(navigation.value.find(item => item._path === '/pro') ? [{
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro',
active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
}, {
label: 'Pricing',
icon: 'i-heroicons-ticket',
to: '/pro/pricing'
}, {
label: 'Templates',
icon: 'i-heroicons-computer-desktop',
to: '/pro/templates'
}] : []), {
}, ...(navigation.value.find(item => item._path === '/pro')
? [{
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro',
active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
}, {
label: 'Pricing',
icon: 'i-heroicons-ticket',
to: '/pro/pricing'
}, {
label: 'Templates',
icon: 'i-heroicons-computer-desktop',
to: '/pro/templates'
}]
: []), {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: '/releases'

25
docs/modules/content-examples-code.ts
View File

@@ -1,3 +1,6 @@
import { existsSync, readFileSync } from 'node:fs'
import fsp from 'node:fs/promises'
import { dirname, join } from 'pathe'
import {
defineNuxtModule,
addTemplate,
@@ -5,28 +8,24 @@ import {
createResolver
} from '@nuxt/kit'
import { existsSync, readFileSync } from 'fs'
import { dirname, join } from 'pathe'
import fsp from 'fs/promises'
export default defineNuxtModule({
meta: {
name: 'content-examples-code'
},
async setup (_options, nuxt) {
async setup(_options, nuxt) {
const resolver = createResolver(import.meta.url)
let _configResolved: any
let components: Record<string, any>
const outputPath = join(nuxt.options.buildDir, 'content-examples-code')
async function stubOutput () {
async function stubOutput() {
if (existsSync(outputPath + '.mjs')) {
return
}
await updateOutput('export default {}')
}
async function fetchComponent (component: string | any) {
async function fetchComponent(component: string | any) {
if (typeof component === 'string') {
if (components[component]) {
component = components[component]
@@ -57,7 +56,7 @@ export default defineNuxtModule({
const getVirtualModuleContent = () =>
`export default ${getStringifiedComponents()}`
async function updateOutput (content?: string) {
async function updateOutput(content?: string) {
const path = outputPath + '.mjs'
if (!existsSync(dirname(path))) {
await fsp.mkdir(dirname(path), { recursive: true })
@@ -68,13 +67,13 @@ export default defineNuxtModule({
await fsp.writeFile(path, content || getVirtualModuleContent(), 'utf-8')
}
async function fetchComponents () {
async function fetchComponents() {
await Promise.all(Object.keys(components).map(fetchComponent))
}
nuxt.hook('components:extend', async (_components) => {
components = _components
.filter((v) => v.shortPath.includes('components/content/examples/'))
.filter(v => v.shortPath.includes('components/content/examples/'))
.reduce((acc, component) => {
acc[component.pascalName] = component
return acc
@@ -93,17 +92,17 @@ export default defineNuxtModule({
vite.config.plugins.push({
name: 'content-examples-code',
enforce: 'post',
async buildStart () {
async buildStart() {
if (_configResolved?.build.ssr) {
return
}
await fetchComponents()
await updateOutput()
},
configResolved (config) {
configResolved(config) {
_configResolved = config
},
async handleHotUpdate ({ file }) {
async handleHotUpdate({ file }) {
if (
Object.entries(components).some(
([, comp]: any) => comp.filePath === file

136
docs/nuxt.config.ts
View File

@@ -8,13 +8,15 @@ const { resolve } = createResolver(import.meta.url)
export default defineNuxtConfig({
// @ts-ignore
extends: process.env.NUXT_UI_PRO_PATH ? [
process.env.NUXT_UI_PRO_PATH,
resolve(process.env.NUXT_UI_PRO_PATH, '.docs')
] : [
'@nuxt/ui-pro',
process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/.docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
].filter(Boolean),
extends: process.env.NUXT_UI_PRO_PATH
? [
process.env.NUXT_UI_PRO_PATH,
resolve(process.env.NUXT_UI_PRO_PATH, '.docs')
]
: [
'@nuxt/ui-pro',
process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/.docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
].filter(Boolean),
modules: [
'@nuxt/content',
@@ -29,15 +31,8 @@ export default defineNuxtConfig({
'modules/content-examples-code'
],
runtimeConfig: {
public: {
version: pkg.version
}
},
ui: {
global: true,
safelistColors: excludeColors(colors)
site: {
url: 'https://ui.nuxt.com'
},
content: {
@@ -48,31 +43,42 @@ export default defineNuxtConfig({
]
},
sources: {
pro: process.env.NUXT_UI_PRO_PATH ? {
prefix: '/pro',
driver: 'fs',
base: resolve(process.env.NUXT_UI_PRO_PATH, '.docs/content/pro')
} : process.env.NUXT_GITHUB_TOKEN ? {
prefix: '/pro',
driver: 'github',
repo: 'nuxt/ui-pro',
branch: 'dev',
dir: '.docs/content/pro',
token: process.env.NUXT_GITHUB_TOKEN || ''
} : undefined
pro: process.env.NUXT_UI_PRO_PATH
? {
prefix: '/pro',
driver: 'fs',
base: resolve(process.env.NUXT_UI_PRO_PATH, '.docs/content/pro')
}
: process.env.NUXT_GITHUB_TOKEN
? {
prefix: '/pro',
driver: 'github',
repo: 'nuxt/ui-pro',
branch: 'dev',
dir: '.docs/content/pro',
token: process.env.NUXT_GITHUB_TOKEN || ''
}
: undefined
}
},
image: {
provider: 'ipx'
ui: {
global: true,
safelistColors: excludeColors(colors)
},
icon: {
clientBundle: {
scan: true
runtimeConfig: {
public: {
version: pkg.version
}
},
routeRules: {
'/components': { redirect: '/components/accordion', prerender: false }
},
compatibilityDate: '2024-07-23',
nitro: {
prerender: {
routes: [
@@ -86,8 +92,32 @@ export default defineNuxtConfig({
}
},
routeRules: {
'/components': { redirect: '/components/accordion', prerender: false }
vite: {
optimizeDeps: {
include: ['date-fns']
}
},
typescript: {
strict: false
},
hooks: {
// Related to https://github.com/nuxt/nuxt/pull/22558
'components:extend': (components) => {
components.forEach((component) => {
if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
component.global = true
} else if (component.global) {
component.global = 'sync'
}
})
}
},
cloudflareAnalytics: {
token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
scriptPath: false
},
componentMeta: {
@@ -111,37 +141,13 @@ export default defineNuxtConfig({
}
},
cloudflareAnalytics: {
token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
scriptPath: false
},
hooks: {
// Related to https://github.com/nuxt/nuxt/pull/22558
'components:extend': (components) => {
components.forEach((component) => {
if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
component.global = true
} else if (component.global) {
component.global = 'sync'
}
})
icon: {
clientBundle: {
scan: true
}
},
typescript: {
strict: false
},
site: {
url: 'https://ui.nuxt.com'
},
vite: {
optimizeDeps: {
include: ['date-fns']
}
},
compatibilityDate: '2024-07-23'
image: {
provider: 'ipx'
}
})

466
docs/pages/index.vue
View File

@@ -295,7 +295,7 @@
wrapper: 'px-4 py-2.5 border-gray-800/10 dark:border-gray-200/10 cursor-pointer',
icon: {
wrapper: 'mb-2 p-1',
base: 'h-4 w-4',
base: 'h-4 w-4'
},
title: 'text-sm',
description: 'text-xs'
@@ -466,188 +466,212 @@ const steps = {
const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4)
const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs) ? [{
class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
inactive: true,
children: [{
name: 'ULandingHero',
to: '/pro/components/landing-hero',
class: [
'inset-4',
isAfterStep(steps.landing + 2) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
].filter(Boolean).join(' '),
style: {
'--step-y': `${getStepY(steps.landing + 2)}px`
},
inactive: isAfterStep(steps.landing + 1),
children: [{
slot: 'landing-hero',
class: 'inset-4'
}]
}, isAfterStep(steps.landing + 2) && {
name: 'ULandingSection',
to: '/pro/components/landing-section',
class: [
'inset-4',
isBeforeStep(steps.landing + 6) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]',
isAfterStep(steps.landing + 10) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
].filter(Boolean).join(' '),
style: {
'--height': (inc.value * 4) + 'px',
'--step-y': `${getStepY(steps.landing + 10)}px`,
'--prev-step-y': `${getStepY(steps.landing + 2)}px`
},
inactive: isAfterStep(steps.landing + 7),
children: [{
slot: 'landing-section',
class: 'inset-x-4 top-16'
}, {
name: 'ULandingGrid',
to: '/pro/components/landing-grid',
class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
inactive: isAfterStep(steps.landing + 8),
children: [isAfterStep(steps.landing + 9) ? {
slot: 'landing-card-1',
class: '!relative'
} : {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}, isAfterStep(steps.landing + 9) ? {
slot: 'landing-card-2',
class: '!relative h-full'
} : {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}, isAfterStep(steps.landing + 9) ? {
slot: 'landing-card-3',
class: '!relative h-full'
} : {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}, isAfterStep(steps.landing + 9) ? {
slot: 'landing-card-4',
class: '!relative h-full'
} : {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}]
}]
}, isAfterStep(steps.landing + 10) && {
name: 'ULandingSection',
to: '/pro/components/landing-section',
class: [
'inset-4',
isBeforeStep(steps.landing + 14) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]'
].filter(Boolean).join(' '),
style: {
'--height': (inc.value * 4) + 'px',
'--step-y': `${getStepY(steps.landing + 18)}px`,
'--prev-step-y': `${getStepY(steps.landing + 10)}px`
},
inactive: isAfterStep(steps.landing + 15),
children: [{
name: 'ULandingCTA',
class: 'inset-4',
inactive: isAfterStep(steps.landing + 16),
const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs)
? [{
class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
inactive: true,
children: [{
slot: 'landing-cta',
class: 'inset-0'
}]
name: 'ULandingHero',
to: '/pro/components/landing-hero',
class: [
'inset-4',
isAfterStep(steps.landing + 2) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
].filter(Boolean).join(' '),
style: {
'--step-y': `${getStepY(steps.landing + 2)}px`
},
inactive: isAfterStep(steps.landing + 1),
children: [{
slot: 'landing-hero',
class: 'inset-4'
}]
}, isAfterStep(steps.landing + 2) && {
name: 'ULandingSection',
to: '/pro/components/landing-section',
class: [
'inset-4',
isBeforeStep(steps.landing + 6) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]',
isAfterStep(steps.landing + 10) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
].filter(Boolean).join(' '),
style: {
'--height': (inc.value * 4) + 'px',
'--step-y': `${getStepY(steps.landing + 10)}px`,
'--prev-step-y': `${getStepY(steps.landing + 2)}px`
},
inactive: isAfterStep(steps.landing + 7),
children: [{
slot: 'landing-section',
class: 'inset-x-4 top-16'
}, {
name: 'ULandingGrid',
to: '/pro/components/landing-grid',
class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
inactive: isAfterStep(steps.landing + 8),
children: [isAfterStep(steps.landing + 9)
? {
slot: 'landing-card-1',
class: '!relative'
}
: {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}, isAfterStep(steps.landing + 9)
? {
slot: 'landing-card-2',
class: '!relative h-full'
}
: {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}, isAfterStep(steps.landing + 9)
? {
slot: 'landing-card-3',
class: '!relative h-full'
}
: {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}, isAfterStep(steps.landing + 9)
? {
slot: 'landing-card-4',
class: '!relative h-full'
}
: {
name: 'ULandingCard',
to: '/pro/components/landing-card',
class: '!relative h-full',
inactive: false
}]
}]
}, isAfterStep(steps.landing + 10) && {
name: 'ULandingSection',
to: '/pro/components/landing-section',
class: [
'inset-4',
isBeforeStep(steps.landing + 14) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]'
].filter(Boolean).join(' '),
style: {
'--height': (inc.value * 4) + 'px',
'--step-y': `${getStepY(steps.landing + 18)}px`,
'--prev-step-y': `${getStepY(steps.landing + 10)}px`
},
inactive: isAfterStep(steps.landing + 15),
children: [{
name: 'ULandingCTA',
class: 'inset-4',
inactive: isAfterStep(steps.landing + 16),
children: [{
slot: 'landing-cta',
class: 'inset-0'
}]
}]
}].filter(Boolean)
}]
}].filter(Boolean)
}] : [])
: [])
const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
name: 'UPage',
to: '/pro/components/page',
class: 'inset-x-0 top-20 bottom-20',
inactive: isAfterStep(steps.docs + 1),
children: [isAfterStep(steps.docs + 2) ? {
name: 'UAside',
to: '/pro/components/aside',
class: 'left-4 inset-y-4 w-64',
inactive: isAfterStep(steps.docs + 3),
children: [isAfterStep(steps.docs + 4) ? {
slot: 'aside-top',
class: 'inset-x-4 top-4'
} : {
name: '#top',
class: 'inset-x-4 top-4 h-9'
}, isAfterStep(steps.docs + 5) ? {
name: 'UNavigationTree',
to: '/pro/components/navigation-tree',
class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
inactive: isAfterStep(steps.docs + 6),
children: [{
slot: 'aside-default',
class: 'inset-0'
children: [isAfterStep(steps.docs + 2)
? {
name: 'UAside',
to: '/pro/components/aside',
class: 'left-4 inset-y-4 w-64',
inactive: isAfterStep(steps.docs + 3),
children: [isAfterStep(steps.docs + 4)
? {
slot: 'aside-top',
class: 'inset-x-4 top-4'
}
: {
name: '#top',
class: 'inset-x-4 top-4 h-9'
}, isAfterStep(steps.docs + 5)
? {
name: 'UNavigationTree',
to: '/pro/components/navigation-tree',
class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
inactive: isAfterStep(steps.docs + 6),
children: [{
slot: 'aside-default',
class: 'inset-0'
}]
}
: {
name: '#default',
class: 'inset-x-4 top-[4.25rem] bottom-4'
}]
}
: {
name: '#left',
class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.docs + 7)
? {
name: 'UPage',
to: '/pro/components/page',
class: 'left-72 right-4 inset-y-4',
inactive: isAfterStep(steps.docs + 8),
children: [...(isAfterStep(steps.docs + 9)
? [{
name: 'UPageHeader',
to: '/pro/components/page-header',
class: 'top-4 left-4 right-72 h-32',
inactive: isAfterStep(steps.docs + 10),
children: [{
slot: 'page-header',
class: 'inset-4 justify-start'
}]
}, {
name: 'UPageBody',
to: '/pro/components/page-body',
class: 'top-40 left-4 right-72 bottom-4 overflow-y-auto',
inactive: isAfterStep(steps.docs + 11),
children: [{
slot: 'page-body',
class: 'inset-x-4 top-4 justify-start'
}, isAfterStep(steps.docs + 12)
? {
slot: 'content-surround',
class: 'bottom-4 inset-x-4 h-28'
}
: {
name: 'UContentSurround',
to: '/pro/components/content-surround',
class: 'bottom-4 inset-x-4 h-28',
inactive: false
}]
}]
: [{
name: '#default',
class: 'left-4 right-72 inset-y-4'
}]), isAfterStep(steps.docs + 13)
? {
name: 'UContentToc',
to: '/pro/components/content-toc',
class: 'right-4 inset-y-4 w-64',
inactive: isAfterStep(steps.docs + 14),
children: [{
slot: 'content-toc',
class: 'inset-4 overflow-y-auto'
}]
}
: {
name: '#right',
class: 'right-4 inset-y-4 w-64'
}]
}
: {
name: '#default',
class: 'left-72 right-4 inset-y-4'
}]
} : {
name: '#default',
class: 'inset-x-4 top-[4.25rem] bottom-4'
}]
} : {
name: '#left',
class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.docs + 7) ? {
name: 'UPage',
to: '/pro/components/page',
class: 'left-72 right-4 inset-y-4',
inactive: isAfterStep(steps.docs + 8),
children: [...(isAfterStep(steps.docs + 9) ? [{
name: 'UPageHeader',
to: '/pro/components/page-header',
class: 'top-4 left-4 right-72 h-32',
inactive: isAfterStep(steps.docs + 10),
children: [{
slot: 'page-header',
class: 'inset-4 justify-start'
}]
}, {
name: 'UPageBody',
to: '/pro/components/page-body',
class: 'top-40 left-4 right-72 bottom-4 overflow-y-auto',
inactive: isAfterStep(steps.docs + 11),
children: [{
slot: 'page-body',
class: 'inset-x-4 top-4 justify-start'
}, isAfterStep(steps.docs + 12) ? {
slot: 'content-surround',
class: 'bottom-4 inset-x-4 h-28'
} : {
name: 'UContentSurround',
to: '/pro/components/content-surround',
class: 'bottom-4 inset-x-4 h-28',
inactive: false
}]
}] : [{
name: '#default',
class: 'left-4 right-72 inset-y-4'
}]), isAfterStep(steps.docs + 13) ? {
name: 'UContentToc',
to: '/pro/components/content-toc',
class: 'right-4 inset-y-4 w-64',
inactive: isAfterStep(steps.docs + 14),
children: [{
slot: 'content-toc',
class: 'inset-4 overflow-y-auto'
}]
} : {
name: '#right',
class: 'right-4 inset-y-4 w-64'
}]
} : {
name: '#default',
class: 'left-72 right-4 inset-y-4'
}]
}].filter(Boolean))
const blocks = computed(() => [isAfterStep(steps.header) && {
@@ -655,62 +679,74 @@ const blocks = computed(() => [isAfterStep(steps.header) && {
to: '/pro/components/header',
class: 'h-16 inset-x-0 top-0',
inactive: isAfterStep(steps.header + 1),
children: [isAfterStep(steps.header + 2) ? {
slot: 'header-left',
class: 'left-4 top-4'
} : {
name: '#left',
class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.header + 3) ? {
slot: 'header-center',
class: 'inset-x-72 top-5'
} : {
name: '#center',
class: 'inset-x-72 inset-y-4'
}, isAfterStep(steps.header + 4) ? {
slot: 'header-right',
class: 'right-4 top-4'
} : {
name: '#right',
class: 'right-4 inset-y-4 w-64'
}]
children: [isAfterStep(steps.header + 2)
? {
slot: 'header-left',
class: 'left-4 top-4'
}
: {
name: '#left',
class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.header + 3)
? {
slot: 'header-center',
class: 'inset-x-72 top-5'
}
: {
name: '#center',
class: 'inset-x-72 inset-y-4'
}, isAfterStep(steps.header + 4)
? {
slot: 'header-right',
class: 'right-4 top-4'
}
: {
name: '#right',
class: 'right-4 inset-y-4 w-64'
}]
}, isAfterStep(steps.footer) && {
name: 'UFooter',
to: '/pro/components/footer',
class: 'h-16 inset-x-0 bottom-0',
inactive: isAfterStep(steps.footer + 1),
children: [isAfterStep(steps.footer + 2) ? {
slot: 'footer-left',
class: 'left-4 bottom-5'
} : {
name: '#left',
class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.footer + 3) ? {
slot: 'footer-center',
class: 'inset-x-72 bottom-5'
} : {
name: '#center',
class: 'inset-x-72 inset-y-4'
}, isAfterStep(steps.footer + 4) ? {
slot: 'footer-right',
class: 'right-4 bottom-4'
} : {
name: '#right',
class: 'right-4 inset-y-4 w-64'
}]
children: [isAfterStep(steps.footer + 2)
? {
slot: 'footer-left',
class: 'left-4 bottom-5'
}
: {
name: '#left',
class: 'left-4 inset-y-4 w-64'
}, isAfterStep(steps.footer + 3)
? {
slot: 'footer-center',
class: 'inset-x-72 bottom-5'
}
: {
name: '#center',
class: 'inset-x-72 inset-y-4'
}, isAfterStep(steps.footer + 4)
? {
slot: 'footer-right',
class: 'right-4 bottom-4'
}
: {
name: '#right',
class: 'right-4 inset-y-4 w-64'
}]
}, ...landingBlocks.value, ...docsBlocks.value].filter(Boolean))
// Methods
function isBeforeStep (i = 0) {
function isBeforeStep(i = 0) {
return y.value < (start.value + (i * inc.value))
}
function isAfterStep (i = 0) {
function isAfterStep(i = 0) {
return y.value >= (start.value + (i * inc.value))
}
function getStepY (step: number) {
function getStepY(step: number) {
return start.value + (step * inc.value)
}

2
docs/pages/releases.vue
View File

@@ -50,7 +50,7 @@ const dates = computed(() => {
const days = eachDayOfInterval({ start: new Date(first.published_at), end: new Date() })
return days.reverse().map(day => {
return days.reverse().map((day) => {
return {
day,
release: releases.value.find(release => isSameDay(new Date(release.published_at), day)),

9
docs/plugins/prettier.ts
View File

@@ -6,7 +6,7 @@ export interface SimplePrettier {
format: (source: string, options?: Options) => Promise<string>
}
function createPrettierWorkerApi (worker: Worker): SimplePrettier {
function createPrettierWorkerApi(worker: Worker): SimplePrettier {
let counter = 0
const handlers: any = {}
@@ -18,6 +18,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
}
const [resolve, reject] = handlers[uid]
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
delete handlers[uid]
if (error) {
@@ -27,7 +28,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
}
})
function postMessage<T> (message: any) {
function postMessage<T>(message: any) {
const uid = ++counter
return new Promise<T>((resolve, reject) => {
handlers[uid] = [resolve, reject]
@@ -36,7 +37,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
}
return {
format (source: string, options?: Options) {
format(source: string, options?: Options) {
return postMessage({ type: 'format', source, options })
}
}
@@ -47,7 +48,7 @@ export default defineNuxtPlugin(async () => {
if (import.meta.server) {
const prettierModule = await import('prettier')
prettier = {
format (source, options = {}) {
format(source, options = {}) {
return prettierModule.format(source, defu(options, {
parser: 'markdown'
}))

2
docs/plugins/ui.ts
View File

@@ -3,7 +3,7 @@ import colors from '#tailwind-config/theme/colors'
export default defineNuxtPlugin({
enforce: 'post',
setup () {
setup() {
const appConfig = useAppConfig()
const root = computed(() => {

2
docs/server/api/pulls.json.get.ts
View File

@@ -1,6 +1,6 @@
import { Octokit } from '@octokit/rest'
function isUserABot (user) {
function isUserABot(user) {
return user?.login?.endsWith('-bot') || user?.login?.endsWith('[bot]')
}

4
docs/workers/prettier.js
View File

@@ -6,14 +6,14 @@ self.onmessage = async function (event) {
})
}
function handleMessage (message) {
function handleMessage(message) {
switch (message.type) {
case 'format':
return handleFormatMessage(message)
}
}
async function handleFormatMessage (message) {
async function handleFormatMessage(message) {
if (!globalThis.prettier) {
await Promise.all([
import('https://unpkg.com/prettier@3.3.3/standalone.js'),