Skip to content

Commit

Permalink
chore(docs): update components and dependencies (#448)
Browse files Browse the repository at this point in the history
  • Loading branch information
productdevbook committed Dec 8, 2023
1 parent 737f63b commit 194123a
Show file tree
Hide file tree
Showing 14 changed files with 976 additions and 790 deletions.
48 changes: 0 additions & 48 deletions .docs/components/HeaderPrimitives.vue

This file was deleted.

54 changes: 54 additions & 0 deletions .docs/components/PrimitivesHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script setup lang="ts">
import type { NavItem } from '@nuxt/content/dist/runtime/types'
import type { Link } from '#ui-pro/types'
defineProps<{
links?: Link[]
}>()
const navigation = inject<Ref<NavItem[]>>('navigation')
const { metaSymbol } = useShortcuts()
const mobileNav = computed(() => {
const links = mapContentNavigation(navigation.value)
// Show Migration and Bridge on mobile only when user is reading them
const docsLink = links.find(link => link.to === '/primitives')
if (docsLink)
docsLink.children = docsLink.children.filter(link => !['/docs/bridge', '/docs/migration'].includes(link.to as string))
return links
})
</script>

<template>
<UHeader :links="links">
<template #logo>
<NuxtLink to="/" class="flex items-center gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Oku">
<PrimitivesLogo class="w-auto h-6" />
Primitives
</NuxtLink>
</template>

<template #right>
<UTooltip text="Search" :shortcuts="[metaSymbol, 'K']">
<UDocsSearchButton :label="null" />
</UTooltip>

<UTooltip :text="$colorMode.preference === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'">
<UColorModeButton />
</UTooltip>

<UTooltip text="GitHub Stars">
<UButton
icon="i-simple-icons-github" to="https://github.com/oku-ui/primitives" target="_blank"
label="700+"
/>
</UTooltip>
</template>

<template #panel>
<UNavigationTree :links="mobileNav" default-open :multiple="false" />
</template>
</UHeader>
</template>
21 changes: 21 additions & 0 deletions .docs/components/PrimitivesLogo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script setup lang="ts">
const dark = useColorMode()
const isDark = ref('dark')
watch(dark, () => {
isDark.value = dark.value
})
onMounted(() => {
isDark.value = dark.value
})
const logo = computed(() => {
return isDark.value === 'dark' ? 'https://raw.githubusercontent.com/oku-ui/static/main/logo/icon-white.svg' : 'https://raw.githubusercontent.com/oku-ui/static/main/logo/icon-dark.svg'
})
</script>

<template>
<img width="120" :src="logo">
</template>
66 changes: 66 additions & 0 deletions .docs/composables/useNavigation.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { createSharedComposable } from '@vueuse/core'

function _usePrimitivesNavigation() {
const headerLinksPrimitive = computed(() => {
const route = useRoute()

return [
{
label: 'Primitives',
icon: 'i-ph-book-bookmark-duotone',
to: '/primitives',
search: false,
children: [
{
label: 'Get Started',
description: 'Learn how to get started with Nuxt.',
icon: 'i-ph-rocket-launch-duotone',
to: '/primitives/getting-started',
active: route.path.startsWith('/primitives/getting-started'),
},
{
label: 'Components',
description: 'Components',
icon: 'i-ph-squares-four-bold',
to: '/primitives/components',
active: route.path.startsWith('/primitives/components'),
},
{
label: 'Nuxt Modules',
description: 'Primitives modules for Nuxt.',
icon: 'i-simple-icons-nuxtdotjs',
to: '/primitives/getting-started/nuxt',
active: route.path.startsWith('/primitives/getting-started/nuxt'),
},
{
label: 'Figma',
description: 'Learn how to use the primitives CLI.',
icon: 'i-simple-icons-figma',
to: '/primitives/getting-started/figma',
active: route.path.startsWith('/primitives/getting-started/figma'),
},
{
label: 'Community',
description: 'Find answers and support from the community.',
icon: 'i-ph-chats-teardrop-duotone',
to: '/primitives/community',
active: route.path.startsWith('/primitives/community'),
},
],
},
{
label: 'Projects',
icon: 'i-ph-folder-open-duotone',
to: '/',
search: false,
},
]
})

return {
headerLinksPrimitive,

}
}

export const usePrimitivesNavigation = createSharedComposable(_usePrimitivesNavigation)
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ items:
description: 'Learn how to install Primitives in your project.'
- title: 'Nuxt Module'
icon: 'i-ph-hammer-bold'
to: '/primitives/getting-started/nuxt-module'
to: '/primitives/getting-started/nuxt'
description: 'Learn how to install Primitives in your Nuxt project.'

---
Expand All @@ -78,100 +78,11 @@ items:

The following components are available:

::custom-link
---
items:
- title: 'Accordion'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/accordion'
description: 'A vertical stack of interactive headings used to toggle the visibility of their associated content.'
- title: 'Alert Dialog'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/alert-dialog'
description: 'A modal dialog that interrupts the user’s workflow to communicate an important message and acquire a response.'
- title: 'AspectRatio'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/aspect-ratio'
description: 'Displays content within a desired ratio.'
- title: 'Avatar'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/avatar'
description: 'An image element with a fallback for representing the user.'
- title: 'Checkbox'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/checkbox'
description: 'Renders an accessible checkbox associated with controls.'
- title: 'Collapsible'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/collapsible'
description: 'An interactive component which expands/collapses a panel.'
- title: 'Dialog'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/dialog'
description: 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.'
- title: 'HoverCard'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/hover-card'
description: 'For sighted users to preview content available behind a link.'
- title: 'Label'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/label'
description: 'Renders an accessible label associated with controls.'
- title: 'Popover'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/popover'
description: 'A non-modal dialog that floats around a trigger element.'
- title: 'Progress'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/progress'
description: 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.'
- title: 'RadioGroup'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/radio-group'
description: 'A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.'
- title: 'Scroll Area'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/scroll-area'
description: 'A scrollable area with hidden scrollbars.'
- title: 'Separator'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/separator'
description: 'Visually or semantically separates content.'
- title: 'Slider'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/slider'
description: 'An input where the user selects a value from within a given range.'
- title: 'Switch'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/switch'
description: 'A control that allows the user to toggle between checked and not checked.'
- title: 'Tabs'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/tabs'
description: 'A set of layered sections of content—known as tab panels—that are displayed one at a time.'
- title: 'Toast'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/toast'
description: 'A non-modal dialog that floats around a trigger element.'
- title: 'ToggleGroup'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/toggle-group'
description: 'A set of two-state buttons that can be toggled on or off.'
- title: 'Toggle'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/toggle'
description: 'A two-state button that can be either on or off.'
- title: 'Toolbar'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/toolbar'
description: 'A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.'
- title: 'Tooltip'
icon: 'i-ph-file-code-bold'
to: '/primitives/components/tooltip'
description: 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.'
---
::card{icon="i-ph-link" title="All Components" to="/primitives/components"}
Get an overview of all available components.
::


## Features

- Supports Tailwind CSS
Expand Down
3 changes: 1 addition & 2 deletions .docs/content/primitives/2.components/_dir.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
title: Components
icon: heroicons-outline:bookmark-alt
hide: true
icon: i-ph-activity
Loading

0 comments on commit 194123a

Please sign in to comment.