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: lots of improvements

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-13 23:22:07 +02:00
parent 0c2a5d98cf
commit 37f1a1b5ad
18 changed files with 605 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/components/content/Shortcut.vue
View File

@@ -1,20 +0,0 @@
<template>
<kbd class="inline-flex items-center justify-center font-sans font-semibold px-1 h-5 min-w-[20px] text-[11px] rounded !my-0 align-text-top ring-1 ring-gray-300 dark:ring-gray-700">
<ClientOnly>
{{ shortcut }}
</ClientOnly>
</kbd>
</template>
<script setup lang="ts">
const props = defineProps({
value: {
type: String,
required: true
}
})
const { metaSymbol } = useShortcuts()
const shortcut = computed(() => props.value === 'meta' ? metaSymbol.value : props.value)
</script>

36
docs/content/1.getting-started/1.index.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Introduction
description: 'Components library as a Nuxt module using TailwindCSS and HeadlessUI.'
---
This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
Components are built on top of [TailwindCSS](https://tailwindcss.com/) and [HeadlessUI](https://headlessui.com/) to provide a set of fully customizable components with dark mode support.
::alert{icon="i-heroicons-light-bulb"}
[Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
::
## Features
- Fully customizable components
- HMR support through Nuxt App Config
- Dark mode support
- Keyboard shortcuts
- Bundled icons
- Fully typed
## Credits
- [nuxt/nuxt](https://github.com/nuxt/nuxt)
- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
- [vueuse/vueuse](https://github.com/vueuse/vueuse)
- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
- [krisk/fuse](https://github.com/krisk/Fuse)
::alert{icon="i-heroicons-exclamation-triangle"}
This documentation is still a work in progress and will be updated regularly.
::

7
docs/content/1.getting-started/1.installation.md → docs/content/1.getting-started/2.installation.md
View File

@@ -1,11 +1,8 @@
---
title: 'nuxthq/ui'
description: 'Components library as a Nuxt module using TailwindCSS and HeadlessUI.'
navigation:
title: Installation
description: 'Learn how to install and configure the module in your Nuxt app.'
---
## Installation
## Overview
1. Install `@nuxthq/ui` dependency to your project:

5
docs/content/1.getting-started/2.theming.md
View File

@@ -1,5 +0,0 @@
---
navigation: false
---
## Overview

11
docs/content/1.getting-started/3.shortcuts.md
View File

@@ -1,11 +0,0 @@
---
navigation: false
---
## Overview
## Composables
## `defineShortcuts`
## `useShortcuts`

167
docs/content/1.getting-started/3.theming.md Normal file
View File

@@ -0,0 +1,167 @@
---
description: 'Learn how to customize the look and feel of the components.'
---
## Overview
This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
## Colors
Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
ui: {
primary: 'sky',
gray: 'cool'
}
})
```
As this module uses TailwindCSS under the hood, you can use any of the [TailwindCSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `sky` and the `gray` color is `cool`.
To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As TailwindCSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
::alert{icon="i-heroicons-light-bulb"}
Try to change the `primary` and `gray` colors in the navbar and see the colors change live.
::
Components that have a `color` prop like [Avatar](/elements/avatar), [Badge](/elements/badge) and [Button](/elements/button) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default TailwindCSS colors.
## Components
Components are styled with TailwindCSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
ui: {
container: {
constrained: 'max-w-5xl'
}
}
})
```
Each component has a `ui` prop that allows you to customize everything specifically.
```vue
<template>
<UContainer :ui="{ constrained: 'max-w-2xl' }">
<slot />
</UContainer>
</template>
```
::alert{icon="i-heroicons-light-bulb"}
You can find the default classes for each component under the `Preset` section.
::
Some component props like `size`, `color`, `variant`, etc. have a default value that you can override in your `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
ui: {
button: {
default: {
size: 'md',
color: 'gray',
variant: 'ghost'
}
}
}
})
```
## Icons
You can use any icon (100,000+) from [Iconify](https://iconify.design/).
Most of the components have an `icon` prop that allows you to add an icon to the component.
```vue
<template>
<UButton icon="i-heroicons-magnifying-glass" />
</template>
```
You can also use the [Icon](/elements/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
```vue
<template>
<UIcon name="i-heroicons-moon" />
</template>
```
By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
ui: {
icons: ['mdi', 'simple-icons']
}
})
```
::alert{icon="i-heroicons-light-bulb"}
Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
::
Unlike the official [nuxt-icon](https://github.com/nuxt-modules/icon/) module, this module will not fetch any icon from the web and will only bundle the icons you use in your app thanks to [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
However, you will need to install the icon packages you want to use.
```sh
yarn add --dev @iconify/json-{collection_name}
```
You can easily replace all the default icons of the components in your `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
ui: {
button: {
default: {
loadingIcon: 'i-octicon-sync-24'
}
},
input: {
default: {
loadingIcon: 'i-octicon-sync-24'
}
},
select: {
default: {
trailingIcon: 'i-octicon-chevron-down-24'
}
},
selectMenu: {
default: {
selectedIcon: 'i-octicon-check-24'
}
},
notification: {
default: {
close: {
icon: 'i-octicon-x-24'
}
}
},
commandPalette: {
default: {
icon: 'i-octicon-search-24',
selectedIcon: 'i-octicon-check-24',
empty: {
icon: 'i-octicon-search-24'
}
}
}
}
})
```
## Dark mode
All the components are styled with dark mode in mind.
Thanks to [TailwindCSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) `class` strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.

65
docs/content/1.getting-started/4.shortcuts.md Normal file
View File

@@ -0,0 +1,65 @@
---
description: 'Learn how to display and define keyboard shortcuts in your app.'
---
## Overview
Some components like [Dropdown](/elements/dropdown), [Command Palette](/navigation/command-palette) and [Tooltip](/overlays/tooltip) support the display of keyboard shortcuts.
```vue
<UDropdown :items="[{ label: 'Edit', shortcuts: ['E'] }]" />
```
Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
```vue
<template>
<div class="flex items-center gap-0.5">
<UKbd>⌘</UKbd>
<UKbd>K</UKbd>
</div>
</template>
```
::alert{icon="i-heroicons-light-bulb"}
You will have a preview of how shortcuts are rendered in each component page.
::
## Composables
### `defineShortcuts`
This module provides a `defineShortcuts` composable that allows you to define keyboard shortcuts in your app really easily.
```vue
<template>
<UModal v-model="isOpen" />
</template>
<script setup lang="ts">
const isOpen = ref(false)
defineShortcuts({
meta_k: {
usingInput: true,
handler: () => {
isOpen.value = !isOpen.value
}
}
})
</script>
```
### `useShortcuts`
To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
```vue
<script setup>
const { metaSymbol } = useShortcuts()
</script>
<template>
<UKbd>{{ metaSymbol }}</UKbd>
</template>
```

2
docs/content/2.elements/3.button.md
View File

@@ -161,6 +161,8 @@ Button
Use the `loading` prop to show a loading icon and disable the Button.
Use the `loadingIcon` prop to set a different icon or change it globally in `ui.button.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-card
---
props:

20
docs/content/2.elements/5.icon.md Normal file
View File

@@ -0,0 +1,20 @@
---
github: true
---
## Usage
::component-card
---
props:
name: 'i-heroicons-light-bulb'
---
::
::alert{icon="i-heroicons-exclamation-triangle"}
When playing with the `name` prop above, you won't be able to use any icon you want as icons are bundled on build as explained in the [theming section](/getting-started/theming#icons).
::
## Props
:component-props

1
docs/content/2.elements/5.kbd.md → docs/content/2.elements/6.kbd.md
View File

@@ -34,6 +34,7 @@ Use the `size` prop to change the size of the Kbd.
---
props:
size: 'sm'
code: 'U'
---
U

27
docs/content/3.forms/1.input.md
View File

@@ -24,6 +24,31 @@ props:
---
::
### Placeholder
::component-card
---
baseProps:
name: 'input'
props:
placeholder: 'Search...'
---
::
### Appearance
Use the `appearance` prop to change the style of the Input.
::component-card
---
baseProps:
name: 'input'
placeholder: 'Search...'
props:
appearance: 'white'
---
::
### Icon
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
@@ -67,6 +92,8 @@ excludedProps:
Use the `loading` prop to show a loading icon and disable the Input.
Use the `loadingIcon` prop to set a different icon or change it globally in `ui.input.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
::component-card
---
baseProps:

55
docs/content/3.forms/2.textarea.md
View File

@@ -11,6 +11,61 @@ baseProps:
---
::
### Size
Use the `size` prop to change the size of the Input.
::component-card
---
baseProps:
name: 'textarea'
props:
size: 'sm'
---
::
### Placeholder
::component-card
---
baseProps:
name: 'textarea'
props:
placeholder: 'Search...'
---
::
### Appearance
Use the `appearance` prop to change the style of the Input.
::component-card
---
baseProps:
name: 'textarea'
placeholder: 'Search...'
props:
appearance: 'white'
---
::
### Disabled
Use the `disabled` prop to disable the Input.
::component-card
---
baseProps:
name: 'input'
props:
placeholder: 'Search...'
appearance: 'white'
disabled: true
excludedProps:
- placeholder
---
::
## Props
:component-props

101
docs/content/3.forms/3.select.md
View File

@@ -8,11 +8,110 @@ github: true
---
baseProps:
name: 'select'
modelValue: 'Canada'
modelValue: 'United States'
props:
options:
- 'United States'
- 'Canada'
- 'Mexico'
excludedProps:
- options
---
::
### Size
Use the `size` prop to change the size of the Input.
::component-card
---
baseProps:
name: 'select'
options:
- 'United States'
- 'Canada'
- 'Mexico'
props:
size: 'sm'
---
::
### Placeholder
::component-card
---
baseProps:
name: 'select'
options:
- 'United States'
- 'Canada'
- 'Mexico'
props:
placeholder: 'Search...'
---
::
### Appearance
Use the `appearance` prop to change the style of the Select.
::component-card
---
baseProps:
name: 'select'
options:
- 'United States'
- 'Canada'
- 'Mexico'
placeholder: 'Search...'
props:
appearance: 'white'
---
::
### Icon
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
Use the `trailingIcon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
::component-card
---
baseProps:
name: 'select'
options:
- 'United States'
- 'Canada'
- 'Mexico'
props:
icon: 'i-heroicons-magnifying-glass-20-solid'
appearance: 'white'
size: 'sm'
placeholder: 'Search...'
excludedProps:
- icon
- placeholder
---
::
### Disabled
Use the `disabled` prop to disable the Input.
::component-card
---
baseProps:
name: 'select'
options:
- 'United States'
- 'Canada'
- 'Mexico'
props:
placeholder: 'Search...'
appearance: 'white'
disabled: true
excludedProps:
- placeholder
---
::

27
docs/content/3.forms/4.select-menu.md
View File

@@ -7,6 +7,10 @@ headlessui:
## Usage
The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [size](/forms/select#size), [placeholder](/forms/select#placeholder), [appearance](/forms/select#appearance), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
Like the Select component, you can use the `options` prop to pass an array of strings or objects.
::component-example
#default
:select-menu-example-basic{class="max-w-[12rem] w-full"}
@@ -25,7 +29,7 @@ const selected = ref(people[0])
```
::
You can use multiple values but you have to override the `#label` slot and handle the display yourself.
You can use the `multiple` prop to select multiple values but you have to override the `#label` slot and handle the display yourself.
::component-example
#default
@@ -76,7 +80,7 @@ const selected = ref(people[3])
```
::
You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key.
You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `optionAttribute` prop that defaults to `label`.
::component-example
#default
@@ -131,6 +135,10 @@ const selected = ref(people[0])
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
Use the `trailingIcon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `selectedIcon` prop to set a different icon or change it globally in `ui.selectMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
::component-card
---
baseProps:
@@ -161,21 +169,6 @@ props:
---
::
### Disabled
Use the `disabled` prop to disable the SelectMenu.
::component-card
---
baseProps:
class: 'max-w-[12rem] w-full'
placeholder: 'Select a person'
options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
props:
disabled: true
---
::
## Props
:component-props

59
docs/content/3.forms/5.checkbox.md
View File

@@ -5,6 +5,65 @@ github: true
## Usage
::component-card
---
baseProps:
name: 'checkbox'
---
::
### Label
Use the `label` prop to display a label on the right.
::component-card
---
baseProps:
name: 'checkbox1'
props:
label: 'Label'
---
::
### Required
Use the `required` prop to display a red star next to the label.
::component-card
---
baseProps:
name: 'checkbox2'
props:
label: 'Label'
required: true
---
::
### Help
Use the `help` prop to display some text under the Checkbox.
::component-card
---
baseProps:
name: 'checkbox3'
props:
label: 'Label'
help: 'Please check this box'
---
::
### Disabled
Use the `disabled` prop to disable the Checkbox.
::component-card
---
baseProps:
name: 'checkbox4'
modelValue: true
props:
disabled: true
---
::
## Props

59
docs/content/3.forms/6.radio.md
View File

@@ -5,6 +5,65 @@ github: true
## Usage
::component-card
---
baseProps:
name: 'radio'
---
::
### Label
Use the `label` prop to display a label on the right.
::component-card
---
baseProps:
name: 'radio1'
props:
label: 'Label'
---
::
### Required
Use the `required` prop to display a red star next to the label.
::component-card
---
baseProps:
name: 'radio2'
props:
label: 'Label'
required: true
---
::
### Help
Use the `help` prop to display some text under the Radio.
::component-card
---
baseProps:
name: 'radio3'
props:
label: 'Label'
help: 'Please choose one'
---
::
### Disabled
Use the `disabled` prop to disable the Radio.
::component-card
---
baseProps:
name: 'radio4'
value: true
props:
disabled: true
---
::
## Props

2
docs/content/4.navigation/2.command-palette.md
View File

@@ -159,6 +159,8 @@ function onSelect (option) {
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
Use the `selectedIcon` prop to set a different icon or change it globally in `ui.commandPalette.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
::component-card
---
padding: false

1
docs/tailwind.config.ts
View File

@@ -2,7 +2,6 @@ import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
export default <Partial<Config>> {
darkMode: 'class',
content: [
'docs/content/**/*.md'
],