diff --git a/.github/workflows/ci-dev.yml b/.github/workflows/ci-dev.yml index 416392a0..76b393b6 100644 --- a/.github/workflows/ci-dev.yml +++ b/.github/workflows/ci-dev.yml @@ -15,10 +15,10 @@ jobs: strategy: matrix: os: [ubuntu-latest] # macos-latest, windows-latest - node: [16] + node: [18] steps: - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: node-version: ${{ matrix.node }} @@ -29,7 +29,7 @@ jobs: fetch-depth: 0 - name: Cache - uses: actions/cache@v2 + uses: actions/cache@v3 with: path: node_modules key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 60c29081..c93f5445 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -15,10 +15,10 @@ jobs: strategy: matrix: os: [ubuntu-latest] # macos-latest, windows-latest - node: [16] + node: [18] steps: - - uses: actions/setup-node@v2 + - uses: actions/setup-node@v3 with: node-version: ${{ matrix.node }} @@ -29,7 +29,7 @@ jobs: fetch-depth: 0 - name: Cache - uses: actions/cache@v2 + uses: actions/cache@v3 with: path: node_modules key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} diff --git a/README.md b/README.md index 714d485b..c6185454 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # @nuxthq/ui -Components library as a Nuxt module using [TailwindCSS](https://tailwindcss.com). +Components library as a Nuxt module using [TailwindCSS](https://tailwindcss.com) and [HeadlessUI](https://headlessui.com). ## Installation @@ -29,43 +29,3 @@ If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`: } } ``` - -## Options - -- `primary` - -Define the primary variant. Defaults to `indigo`. You can specify your own object of colors like here: - -**Example:** - -```js -import { defineNuxtConfig } from 'nuxt' - -export default defineNuxtConfig({ - buildModules: [ - '@nuxthq/ui' - ], - ui: { - primary: 'blue' - } -}) -``` - -- `prefix` - -Define the prefix of the imported components. Defaults to `u`. - -**Example:** - -```js -import { defineNuxtConfig } from 'nuxt' - -export default defineNuxtConfig({ - buildModules: [ - '@nuxthq/ui' - ], - ui: { - prefix: 'tw' - } -}) -``` diff --git a/build.config.ts b/build.config.ts deleted file mode 100644 index f00cb933..00000000 --- a/build.config.ts +++ /dev/null @@ -1,12 +0,0 @@ -import fs from 'node:fs/promises' -import { join, resolve } from 'node:path' -import { defineBuildConfig } from 'unbuild' - -export default defineBuildConfig({ - hooks: { - 'rollup:done': async (ctx) => { - // copy env.d.ts to dist - await fs.copyFile(resolve('src/env.d.ts'), join(ctx.options.outDir, 'env.d.ts')) - } - } -}) diff --git a/docs/app.vue b/docs/app.vue index 7a9ac6d3..1d45f828 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -1,95 +1,43 @@ - - - diff --git a/docs/app/router.options.ts b/docs/app/router.options.ts new file mode 100644 index 00000000..23202d07 --- /dev/null +++ b/docs/app/router.options.ts @@ -0,0 +1,48 @@ +import type { RouterConfig } from '@nuxt/schema' + +function findHashPosition (hash): { el: any, behavior: ScrollBehavior, top: number } { + const el = document.querySelector(hash) + // vue-router does not incorporate scroll-margin-top on its own. + if (el) { + const top = parseFloat(getComputedStyle(el).scrollMarginTop) + + return { + el: hash, + behavior: 'smooth', + top + } + } +} + +// https://router.vuejs.org/api/#routeroptions +export default { + scrollBehavior (to, from, savedPosition) { + const nuxtApp = useNuxtApp() + + // If history back + if (savedPosition) { + // Handle Suspense resolution + return new Promise((resolve) => { + nuxtApp.hooks.hookOnce('page:finish', () => { + setTimeout(() => resolve(savedPosition), 50) + }) + }) + } + + // Scroll to heading on click + if (to.hash) { + return new Promise((resolve) => { + if (to.path === from.path) { + setTimeout(() => resolve(findHashPosition(to.hash)), 50) + } else { + nuxtApp.hooks.hookOnce('page:finish', () => { + setTimeout(() => resolve(findHashPosition(to.hash)), 50) + }) + } + }) + } + + // Scroll to top of window + return { top: 0 } + } +} diff --git a/docs/components/Header.vue b/docs/components/Header.vue new file mode 100644 index 00000000..6a4f6e7d --- /dev/null +++ b/docs/components/Header.vue @@ -0,0 +1,112 @@ + + + diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue new file mode 100644 index 00000000..19506e2c --- /dev/null +++ b/docs/components/Logo.vue @@ -0,0 +1,5 @@ + diff --git a/docs/components/ThemeSelect.vue b/docs/components/ThemeSelect.vue new file mode 100644 index 00000000..9fb4e116 --- /dev/null +++ b/docs/components/ThemeSelect.vue @@ -0,0 +1,87 @@ + + + diff --git a/docs/components/content/Alert.vue b/docs/components/content/Alert.vue new file mode 100644 index 00000000..9fddab04 --- /dev/null +++ b/docs/components/content/Alert.vue @@ -0,0 +1,33 @@ + + + diff --git a/docs/components/content/CodeGroup.vue b/docs/components/content/CodeGroup.vue new file mode 100644 index 00000000..7622b026 --- /dev/null +++ b/docs/components/content/CodeGroup.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue new file mode 100644 index 00000000..43bd89ba --- /dev/null +++ b/docs/components/content/ComponentCard.vue @@ -0,0 +1,184 @@ + + + diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue new file mode 100644 index 00000000..b9050858 --- /dev/null +++ b/docs/components/content/ComponentExample.vue @@ -0,0 +1,22 @@ + + + diff --git a/docs/components/content/ComponentPreset.vue b/docs/components/content/ComponentPreset.vue new file mode 100644 index 00000000..16d9047e --- /dev/null +++ b/docs/components/content/ComponentPreset.vue @@ -0,0 +1,36 @@ + + + diff --git a/docs/components/content/ComponentProps.vue b/docs/components/content/ComponentProps.vue new file mode 100644 index 00000000..6a150308 --- /dev/null +++ b/docs/components/content/ComponentProps.vue @@ -0,0 +1,55 @@ + + + diff --git a/docs/components/content/ComponentSlots.vue b/docs/components/content/ComponentSlots.vue new file mode 100644 index 00000000..fac7a499 --- /dev/null +++ b/docs/components/content/ComponentSlots.vue @@ -0,0 +1,34 @@ + + + diff --git a/docs/components/content/Placeholder.vue b/docs/components/content/Placeholder.vue new file mode 100644 index 00000000..a11f9468 --- /dev/null +++ b/docs/components/content/Placeholder.vue @@ -0,0 +1,21 @@ + diff --git a/docs/components/content/Shortcut.vue b/docs/components/content/Shortcut.vue new file mode 100644 index 00000000..f421c76d --- /dev/null +++ b/docs/components/content/Shortcut.vue @@ -0,0 +1,20 @@ + + + diff --git a/docs/components/content/examples/CardExample.vue b/docs/components/content/examples/CardExample.vue new file mode 100644 index 00000000..3dea6136 --- /dev/null +++ b/docs/components/content/examples/CardExample.vue @@ -0,0 +1,13 @@ + diff --git a/docs/components/content/examples/CommandPaletteExampleBasic.vue b/docs/components/content/examples/CommandPaletteExampleBasic.vue new file mode 100644 index 00000000..c98aa29e --- /dev/null +++ b/docs/components/content/examples/CommandPaletteExampleBasic.vue @@ -0,0 +1,26 @@ + + + diff --git a/docs/components/content/examples/CommandPaletteExampleGroups.vue b/docs/components/content/examples/CommandPaletteExampleGroups.vue new file mode 100644 index 00000000..3d8f3933 --- /dev/null +++ b/docs/components/content/examples/CommandPaletteExampleGroups.vue @@ -0,0 +1,46 @@ + + + diff --git a/docs/components/content/examples/CommandPaletteExampleModal.vue b/docs/components/content/examples/CommandPaletteExampleModal.vue new file mode 100644 index 00000000..0c04db2e --- /dev/null +++ b/docs/components/content/examples/CommandPaletteExampleModal.vue @@ -0,0 +1,33 @@ + + + diff --git a/docs/components/content/examples/ContainerExample.vue b/docs/components/content/examples/ContainerExample.vue new file mode 100644 index 00000000..4dc139a1 --- /dev/null +++ b/docs/components/content/examples/ContainerExample.vue @@ -0,0 +1,5 @@ + diff --git a/docs/components/content/examples/ContextMenuExample.vue b/docs/components/content/examples/ContextMenuExample.vue new file mode 100644 index 00000000..98c9efdd --- /dev/null +++ b/docs/components/content/examples/ContextMenuExample.vue @@ -0,0 +1,34 @@ + + + diff --git a/docs/components/content/examples/DropdownExample.vue b/docs/components/content/examples/DropdownExample.vue new file mode 100644 index 00000000..5f4c2733 --- /dev/null +++ b/docs/components/content/examples/DropdownExample.vue @@ -0,0 +1,31 @@ + + + diff --git a/docs/components/content/examples/ModalExampleBasic.vue b/docs/components/content/examples/ModalExampleBasic.vue new file mode 100644 index 00000000..3aa08737 --- /dev/null +++ b/docs/components/content/examples/ModalExampleBasic.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/components/content/examples/ModalExampleCard.vue b/docs/components/content/examples/ModalExampleCard.vue new file mode 100644 index 00000000..969f638e --- /dev/null +++ b/docs/components/content/examples/ModalExampleCard.vue @@ -0,0 +1,23 @@ + + + diff --git a/docs/components/content/examples/NotificationExampleActions.vue b/docs/components/content/examples/NotificationExampleActions.vue new file mode 100644 index 00000000..f1acc074 --- /dev/null +++ b/docs/components/content/examples/NotificationExampleActions.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/components/content/examples/NotificationExampleBasic.vue b/docs/components/content/examples/NotificationExampleBasic.vue new file mode 100644 index 00000000..8fc85da0 --- /dev/null +++ b/docs/components/content/examples/NotificationExampleBasic.vue @@ -0,0 +1,7 @@ + + + diff --git a/docs/components/content/examples/NotificationExampleCallback.vue b/docs/components/content/examples/NotificationExampleCallback.vue new file mode 100644 index 00000000..c3e525b9 --- /dev/null +++ b/docs/components/content/examples/NotificationExampleCallback.vue @@ -0,0 +1,11 @@ + + + diff --git a/docs/components/content/examples/NotificationExampleClick.vue b/docs/components/content/examples/NotificationExampleClick.vue new file mode 100644 index 00000000..dca5952f --- /dev/null +++ b/docs/components/content/examples/NotificationExampleClick.vue @@ -0,0 +1,11 @@ + + + diff --git a/docs/components/content/examples/PopoverExample.vue b/docs/components/content/examples/PopoverExample.vue new file mode 100644 index 00000000..6d3c3f45 --- /dev/null +++ b/docs/components/content/examples/PopoverExample.vue @@ -0,0 +1,11 @@ + diff --git a/docs/components/content/examples/SelectMenuExampleBasic.vue b/docs/components/content/examples/SelectMenuExampleBasic.vue new file mode 100644 index 00000000..87497963 --- /dev/null +++ b/docs/components/content/examples/SelectMenuExampleBasic.vue @@ -0,0 +1,9 @@ + + + diff --git a/docs/components/content/examples/SelectMenuExampleButton.vue b/docs/components/content/examples/SelectMenuExampleButton.vue new file mode 100644 index 00000000..462efb16 --- /dev/null +++ b/docs/components/content/examples/SelectMenuExampleButton.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/components/content/examples/SelectMenuExampleMultiple.vue b/docs/components/content/examples/SelectMenuExampleMultiple.vue new file mode 100644 index 00000000..cb7d791a --- /dev/null +++ b/docs/components/content/examples/SelectMenuExampleMultiple.vue @@ -0,0 +1,14 @@ + + + diff --git a/docs/components/content/examples/SelectMenuExampleObjects.vue b/docs/components/content/examples/SelectMenuExampleObjects.vue new file mode 100644 index 00000000..3f9510e7 --- /dev/null +++ b/docs/components/content/examples/SelectMenuExampleObjects.vue @@ -0,0 +1,41 @@ + + + diff --git a/docs/components/content/examples/SlideoverExample.vue b/docs/components/content/examples/SlideoverExample.vue new file mode 100644 index 00000000..08583e5b --- /dev/null +++ b/docs/components/content/examples/SlideoverExample.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/components/content/examples/TooltipExample.vue b/docs/components/content/examples/TooltipExample.vue new file mode 100644 index 00000000..5939612e --- /dev/null +++ b/docs/components/content/examples/TooltipExample.vue @@ -0,0 +1,5 @@ + diff --git a/docs/components/content/examples/VerticalNavigationExample.vue b/docs/components/content/examples/VerticalNavigationExample.vue new file mode 100644 index 00000000..7d3dca71 --- /dev/null +++ b/docs/components/content/examples/VerticalNavigationExample.vue @@ -0,0 +1,24 @@ + + + diff --git a/docs/components/content/prose/ProseCode.vue b/docs/components/content/prose/ProseCode.vue new file mode 100644 index 00000000..56ba6a26 --- /dev/null +++ b/docs/components/content/prose/ProseCode.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/docs/components/content/prose/ProseH2.vue b/docs/components/content/prose/ProseH2.vue new file mode 100644 index 00000000..182d2779 --- /dev/null +++ b/docs/components/content/prose/ProseH2.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/components/content/prose/ProseH3.vue b/docs/components/content/prose/ProseH3.vue new file mode 100644 index 00000000..ac24ed2b --- /dev/null +++ b/docs/components/content/prose/ProseH3.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/components/content/themes/CommandPaletteThemeAlgolia.vue b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue new file mode 100644 index 00000000..7cf8b6c4 --- /dev/null +++ b/docs/components/content/themes/CommandPaletteThemeAlgolia.vue @@ -0,0 +1,69 @@ + + + diff --git a/docs/components/content/themes/CommandPaletteThemeRaycast.vue b/docs/components/content/themes/CommandPaletteThemeRaycast.vue new file mode 100644 index 00000000..38cec6da --- /dev/null +++ b/docs/components/content/themes/CommandPaletteThemeRaycast.vue @@ -0,0 +1,57 @@ + + + diff --git a/docs/components/docs/DocsAside.vue b/docs/components/docs/DocsAside.vue new file mode 100644 index 00000000..88163c9a --- /dev/null +++ b/docs/components/docs/DocsAside.vue @@ -0,0 +1,33 @@ + + + diff --git a/docs/components/docs/DocsAsideLinks.vue b/docs/components/docs/DocsAsideLinks.vue new file mode 100644 index 00000000..ece57e51 --- /dev/null +++ b/docs/components/docs/DocsAsideLinks.vue @@ -0,0 +1,31 @@ + + + diff --git a/docs/components/docs/DocsPageHeader.vue b/docs/components/docs/DocsPageHeader.vue new file mode 100644 index 00000000..05fcd1fb --- /dev/null +++ b/docs/components/docs/DocsPageHeader.vue @@ -0,0 +1,37 @@ + + + diff --git a/docs/components/docs/DocsPrevNext.vue b/docs/components/docs/DocsPrevNext.vue new file mode 100644 index 00000000..94b427a7 --- /dev/null +++ b/docs/components/docs/DocsPrevNext.vue @@ -0,0 +1,11 @@ + + + diff --git a/docs/components/docs/DocsSearch.vue b/docs/components/docs/DocsSearch.vue new file mode 100644 index 00000000..8240af18 --- /dev/null +++ b/docs/components/docs/DocsSearch.vue @@ -0,0 +1,172 @@ + + + diff --git a/docs/components/docs/DocsToc.vue b/docs/components/docs/DocsToc.vue new file mode 100644 index 00000000..56638912 --- /dev/null +++ b/docs/components/docs/DocsToc.vue @@ -0,0 +1,19 @@ + + + diff --git a/docs/components/docs/DocsTocLinks.vue b/docs/components/docs/DocsTocLinks.vue new file mode 100644 index 00000000..57db9feb --- /dev/null +++ b/docs/components/docs/DocsTocLinks.vue @@ -0,0 +1,49 @@ + + + diff --git a/docs/composables/useComponentMeta.ts b/docs/composables/useComponentMeta.ts new file mode 100644 index 00000000..63d4f603 --- /dev/null +++ b/docs/composables/useComponentMeta.ts @@ -0,0 +1,19 @@ +const useComponentsMetaState = () => useState('components-meta', () => ({})) + +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] } + + // Store promise to avoid multiple calls + state.value[name] = $fetch(`/api/component-meta/${name}`).then((meta) => { + state.value[name] = meta + }) + + await state.value[name] + return state.value[name] +} diff --git a/docs/composables/useDocs.ts b/docs/composables/useDocs.ts new file mode 100644 index 00000000..7efbebb7 --- /dev/null +++ b/docs/composables/useDocs.ts @@ -0,0 +1,11 @@ +import { createSharedComposable } from '@vueuse/core' + +const _useDocs = () => { + const isSearchModalOpen = ref(false) + + return { + isSearchModalOpen + } +} + +export const useDocs = createSharedComposable(_useDocs) diff --git a/docs/composables/useScrollspy.ts b/docs/composables/useScrollspy.ts new file mode 100644 index 00000000..718d52a9 --- /dev/null +++ b/docs/composables/useScrollspy.ts @@ -0,0 +1,37 @@ +/** + * Scrollspy allows you to watch visible headings in a specific page. + * Useful for table of contents live style updates. + */ +export const useScrollspy = () => { + const observer = ref() as Ref + const visibleHeadings = ref([]) as Ref + const activeHeadings = ref([]) as Ref + + const observerCallback = (entries: IntersectionObserverEntry[]) => + entries.forEach((entry) => { + const id = entry.target.id + + if (entry.isIntersecting) { visibleHeadings.value.push(id) } else { visibleHeadings.value = visibleHeadings.value.filter(t => t !== id) } + }) + + const updateHeadings = (headings: Element[]) => + headings.forEach((heading) => { + observer.value.observe(heading) + }) + + watch(visibleHeadings, (val, oldVal) => { + if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val } + }) + + // Create intersection observer + onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback))) + + // Destroy it + onBeforeUnmount(() => observer.value?.disconnect()) + + return { + visibleHeadings, + activeHeadings, + updateHeadings + } +} diff --git a/docs/content/1.getting-started/1.installation.md b/docs/content/1.getting-started/1.installation.md new file mode 100644 index 00000000..b2435310 --- /dev/null +++ b/docs/content/1.getting-started/1.installation.md @@ -0,0 +1,62 @@ +--- +title: 'nuxthq/ui' +description: 'Components library as a Nuxt3 module using TailwindCSS based on TailwindUI.' +navigation: + title: Installation +--- + +## Installation + +1. Install `@nuxthq/ui` dependency to your project: + +::code-group + +```bash [yarn] +yarn add -D @nuxthq/ui +``` + +```bash [npm] +npm install -D @nuxthq/ui +``` + +```sh [pnpm] +pnpm i -D @nuxthq/ui +``` + +:: + +2. Add it to your `modules` section in your `nuxt.config`: + +```ts [nuxt.config] +export default defineNuxtConfig({ + modules: ['@nuxthq/ui'] +}) +``` + +::alert +That's it! You can now use all the components and composables in your Nuxt app ✨ +:: + +## Options + +| Key | Default | Description | +| ------------------------ | ---------------------- | ------------------------------------------------ | +| `prefix` | `u` | Define the prefix of the imported components. | +| `global` | `false` | Expose components globally. | +| `icons` | `['heroicons']` | Icon collections to load. | + +## Edge channel + +To use the latest updates pushed on the [`dev`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`. + +Update your `package.json` to the following: + +```json [package.json] +{ + "devDependencies": { + "@nuxthq/ui": "npm:@nuxthq/ui-edge@latest" + } +} +``` + +Then run `npm install` or `yarn install`. diff --git a/docs/content/1.getting-started/2.theming.md b/docs/content/1.getting-started/2.theming.md new file mode 100644 index 00000000..ed37e8e8 --- /dev/null +++ b/docs/content/1.getting-started/2.theming.md @@ -0,0 +1 @@ +## Overview diff --git a/docs/content/1.getting-started/3.shortcuts.md b/docs/content/1.getting-started/3.shortcuts.md new file mode 100644 index 00000000..fb296d1d --- /dev/null +++ b/docs/content/1.getting-started/3.shortcuts.md @@ -0,0 +1,7 @@ +## Overview + +## Composables + +## `defineShortcuts` + +## `useShortcuts` diff --git a/docs/content/1.getting-started/4.migration.md b/docs/content/1.getting-started/4.migration.md new file mode 100644 index 00000000..86935b1d --- /dev/null +++ b/docs/content/1.getting-started/4.migration.md @@ -0,0 +1,152 @@ +--- +navigation: false +--- + +## Breaking Changes + +Classes to invert dark mode like `u-text-gray-900` have been removed. + +- Components now have a `ui` prop to override the entire preset instead of individual props +- Components prop `popperOptions` has been renamed to `popper` +- `Alert`, `AlertDialog`, `Tabs` and `Pills` components have been removed + +### `Avatar` + +- `wrapperClass`, `backgroundClass`, `placeholderClass` and `roundedClass` props have been removed in favor of `ui` +- `rounded` prop is now a class defaulting to `rounded-full` instead of a boolean prop, can be overriden through `ui.avatar.rounded` +- `chip` prop is now `chipVariant` +- `ui.avatar.size` and `ui.avatar.chip.size` `xxs` and `xxxs` have been renamed respectively to `2xs` and `3xs` + +### `AvatarGroup` + +- `ringClass` and `marginClass` props have been removed in favor of `ui` +- `group` prop has been removed in favor of slots + +### `Badge` + +- `baseClass` prop has been removed in favor of `ui` +- `rounded` prop is now a class defaulting to `rounded-md` instead of a boolean prop, can be overriden through `ui.badge.rounded` +- `color` prop has been added to change the color scheme of the badge +- `variant` prop is now the variant instead of the color +- `font-medium` has been moved from `ui.badge.base` to `ui.badge.font` + +### `Button` + +- `customClass` prop have been removed +- `baseClass`, `iconBaseClass` and `roundedClass` props have been removed in favor of `ui` +- `leadingIconClass` and `trailingIconClass` props have been removed +- `rounded` prop is now a class defaulting to `rounded-md` instead of a boolean prop, can be overriden through `ui.button.rounded` +- `color` prop has been added to change the color scheme of the badge +- `variant` prop is now the variant instead of the color +- `labelCompact` and `compact` props have been removed entirely alongside preset `ui.button.compact` and `ui.button.icon.leading.compactSpacing` and `ui.button.icon.trailing.compactSpacing` +- `padded` prop has been added to remove padding +- `ui.button.size.xxs` has been renamed to `ui.button.size.2xs` +- `ui.button.size.2xl` has been introduced +- `ui.button.gap` has been introduced to replace margins defined in `ui.button.icon.leading.spacing` and `ui.button.icon.trailing.spacing` +- `ui.button.icon.leading.spacing` and `ui.button.icon.trailing.spacing` that added negative margin to icons have been removed to keep consitency when surcharging a button through default slot (code has only been commented for now) +- `font-medium` has been moved from `ui.button.base` to `ui.button.font` + +### `ButtonGroup` + +- New component + +### `Dropdown` + +- `wrapperClass`, `containerClass`, `widthClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass`, `divideClass`, `baseClass`, `transitionClass`, `groupClass`, `itemBaseClass`, `itemActiveClass`, `itemInactiveClass`, `itemDisabledClass`, `itemIconClass`, `itemAvatarClass` and `itemShortcutsClass` props have been removed in favor of `ui` +- preset has been updated to improve dark mode + +### `Card` + +- `baseClass`, `backgroundClass`, `borderColorClass`, `shadowClass`, `ringClass`, `roundedClass`, `bodyClass`, `bodyBackgroundClass`, `headerClass`, `headerBackgroundClass`, `footerClass`, `footerBackgroundClass` props have been removed in favor of `ui` +- `rounded` prop is now a class defaulting to `rounded-lg` instead of a boolean prop, can be overriden through `ui.avatar.rounded` +- `padded` prop has been removed, use `ui.rounded = 'sm:rounded-lg'` instead when false +- `ui.card.border` has been removed in favor of `ui.card.divide` +- `ui.card.header` & `ui.card.footer` are now `{ spacing: '', background: '' }` + +### `Container` + +- `constrainedClass` prop has been removed in favor of `ui` +- `ui.container.base` and `ui.container.spacing` have been added +- `padded` prop has been removed, use `ui.spacing = 'sm:px-6 lg:px-8'` instead when false +- `constrained` prop has been removed, use `ui.constrained = ''` instead when false + +### `Input` + +- `wrapperClass`, `baseClass`, `iconBaseClass` and `customClass` props have been removed in favor of `ui` + +### `FormGroup` + +- Renamed to `InputGroup` +- `wrapperClass`, `containerClass`, `labelClass`, `labelWrapperClass`, `descriptionClass`, `requiredClass` and `hintClass` props have been removed in favor of `ui` + +### `Textarea` + +- `wrapperClass`, `baseClass` and `customClass` props have been removed in favor of `ui` +- `resize` is now false by default + +### `Select` + +- `wrapperClass`, `baseClass`, `iconBaseClass` and `customClass` props have been removed in favor of `ui` + +### `SelectCustom` + +- Renamed to `SelectMenu` +- `placeholder` prop is now `null` by default +- `nullable` prop has been removed +- `textAttribute` has been renamed to `optionAttribute` and now defaults to `label` +- `wrapperClass`, `baseClass`, `iconBaseClass`, `customClass`, `listBaseClass`, `listContainerClass`, `listWidthClass`, `listInputClass`, `listTransitionClass`, `listOptionBaseClass`, `listOptionContainerClass`, `listOptionActiveClass`, `listOptionInactiveClass`, `listOptionSelectedClass`, `listOptionUnselectedClass`, `listOptionDisabledClass`, `listOptionEmptyClass`, `listOptionIcon`, `listOptionIconBaseClass`, `listOptionIconActiveClass`, `listOptionIconInactiveClass` and `listOptionIconSizeClass` props have been removed in favor of `ui` +- `ui.selectCustom.list` has been moved to the root of `ui.selectMenu`, the component now uses `ui.select` to render the default slot + +### `Radio` + +- `wrapperClass`, `baseClass`, `labelClass`, `requiredClass`, `helpClass` and `customClass` props have been removed in favor of `ui` + +### `Checkbox` + +- `wrapperClass`, `baseClass`, `labelClass`, `requiredClass`, `helpClass` and `customClass` props have been removed in favor of `ui` + +### `Toggle` + +- `baseClass`, `activeClass`, `inactiveClass`, `containerBaseClass`, `containerActiveClass`, `containerInactiveClass`, `iconBaseClass`, `iconActiveClass`, `iconInactiveClass`, `iconOnClass` and `iconOffClass` props have been removed in favor of `ui` + +### `CommandPalette` + +- `inputCloseIcon` and `emptyIcon` props have been removed in favor of `ui` +- `inputIcon` prop has been renamed to `icon` +- `inputPlaceholder` prop has been renamed to `placeholder` +- `options` prop has been renamed to `fuse` to follow the `popper` and `ui` props convention + +### `Modal` + +- `wrapperClass`, `innerClass`, `containerClass`, `baseClass`, `backgroundClass`, `overlayBackgroundClass`, `overlayTransitionClass`, `shadowClass`, `ringClass`, `roundedClass`, `widthClass` and `transitionClass` props have been removed in favor of `ui` +- `innerStyle` prop has been removed +- `#header` and `#footer` slots have been removed + +### `Slideover` + +- `wrapperClass`, `baseClass`, `backgroundClass`, `overlayBackgroundClass`, `overlayTransitionClass`, `widthClass`, `headerClass` and `transitionClass` props have been removed in favor of `ui` +- `#header` slot has been removed + +### `Popover` + +- `wrapperClass`, `containerClass`, `widthClass`, `baseClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass` and `transitionClass` props have been removed in favor of `ui` + +### `Tooltip` + +- `wrapperClass`, `containerClass`, `baseClass`, `widthClass`, `backgroundClass`, `shadowClass`, `ringClass`, `roundedClass`, `shortcutsClass` and `transitionClass` props have been removed in favor of `ui` + +### `ContextMenu` + +- `wrapperClass`, `containerClass`, `widthClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass`, `baseClass` and `transitionClass` + +### `Notification` + +- `backgroundClass`, `shadowClass`, `ringClass`, `roundedClass`, `transitionClass`, `customClass` and `iconBaseClass` props have been removed in favor of `ui` +- `type` prop has been removed +- `ui.notification.type` and `ui.notification.icon.color` have been removed +- `ui.notification.close.icon.name` has been moved to `ui.notification.default.closeIcon` + +### `useToast` + +- `addNotification` and `removeNotification` have been renamed to `add` and `remove` +- `success`, `info`, `warning` and `error` methods have been removed as `type` disappeared from `Notification` diff --git a/docs/content/2.elements/1.avatar.md b/docs/content/2.elements/1.avatar.md new file mode 100644 index 00000000..052105c9 --- /dev/null +++ b/docs/content/2.elements/1.avatar.md @@ -0,0 +1,100 @@ +--- +github: true +--- + +## Usage + +::component-card +--- +props: + src: 'https://avatars.githubusercontent.com/u/739984?v=4' + alt: 'Avatar' +--- +:: + +### Size + +Use the `size` prop to change the size of the Avatar. + +::component-card +--- +props: + size: 'md' +baseProps: + src: 'https://avatars.githubusercontent.com/u/739984?v=4' + alt: 'Avatar' +--- +:: + +### Chip + +Use the `chipColor`, `chipVariant` and `chipPosition` props to display a chip on the Avatar. + +::component-card +--- +props: + chipColor: 'primary' + chipVariant: 'solid' + chipPosition: 'top-right' +baseProps: + src: 'https://avatars.githubusercontent.com/u/739984?v=4' + alt: 'Avatar' +--- +:: + +### Placeholder + +If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`. + +If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`. + +::component-card +--- +props: + alt: 'Benjamin Canac' +--- +:: + +### Group + +To stack avatars as a group, use the `AvatarGroup` component. + +- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars) +- To size all the avatars equally, pass the `size` prop +- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring` + +::component-card{slug="AvatarGroup"} +--- +props: + size: 'md' + max: 2 +ui: + size: + '3xs': '' + '2xs': '' + xs: '' + sm: '' + md: '' + lg: '' + xl: '' + '2xl': '' + '3xl': '' +code: | + + + +--- + +#default +:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"} +:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"} +:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"} +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/2.elements/2.badge.md b/docs/content/2.elements/2.badge.md new file mode 100644 index 00000000..06917aff --- /dev/null +++ b/docs/content/2.elements/2.badge.md @@ -0,0 +1,59 @@ +--- +github: true +--- + +## Usage + +Use the default slot to set the text of the Badge. + +::component-card +--- +code: Badge +--- + +Badge +:: + +You can also use the `label` prop: + +::component-card +--- +props: + label: Badge +--- +:: + +### Style + +Use the `color` and `variant` props to change the visual style of the Badge. + +::component-card +--- +props: + color: 'primary' + variant: 'solid' +--- + +Badge +:: + +### Size + +Use the `size` prop to change the size of the Badge. + +::component-card +--- +props: + size: 'md' +--- + +Badge +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/2.elements/3.button.md b/docs/content/2.elements/3.button.md new file mode 100644 index 00000000..9848fdf7 --- /dev/null +++ b/docs/content/2.elements/3.button.md @@ -0,0 +1,280 @@ +--- +github: true +--- + +## Usage + +Use the default slot to set the text of the Button. + +::component-card +--- +code: Button +--- + +Button +:: + +You can also use the `label` prop. + +::component-card +--- +props: + label: Button +--- +:: + +### Style + +Use the `color` and `variant` props to change the visual style of the Button. + +::component-card +--- +props: + color: 'primary' + variant: 'solid' +--- + +Button +:: + +Besides all the colors from the `ui.colors` object, you can also use the `white` and `gray` and `black` colors with their pre-defined variants. + +#### White + +::component-card +--- +backgroundClass: 'bg-gray-50 dark:bg-gray-800' +props: + color: 'white' + variant: 'solid' +ui: + variant: + solid: 1 + ghost: 1 +excludedProps: + - color +--- + +Button +:: + +#### Gray + +::component-card +--- +props: + color: 'gray' + variant: 'solid' +ui: + variant: + solid: 1 + ghost: 1 + link: 1 +excludedProps: + - color +--- + +Button +:: + +#### Black + +::component-card +--- +props: + color: 'black' + variant: 'solid' +ui: + variant: + solid: 1 + link: 1 +excludedProps: + - color +--- + +Button +:: + +### Size + +Use the `size` prop to change the size of the Button. + +::component-card +--- +props: + size: 'sm' +--- + +Button +:: + +### 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 `leading` and `trailing` props to set the icon position or the `leadingIcon` and `trailingIcon` props to set a different icon for each position. + +::component-card +--- +props: + icon: 'i-heroicons-pencil-square' + size: 'sm' + color: 'primary' + variant: 'solid' + label: Button + trailing: false +excludedProps: + - icon +--- +:: + +The `label` as prop or slot is optional so you can use the Button as an icon-only button. + +::component-card +--- +props: + icon: 'i-heroicons-pencil-square' + size: 'sm' + color: 'primary' + square: true + variant: 'solid' +excludedProps: + - icon + - square +--- +:: + +### Disabled + +Use the `disabled` prop to disable the Button. + +::component-card +--- +props: + disabled: true +--- + +Button +:: + +### Loading + +Use the `loading` prop to show a loading icon and disable the Button. + +::component-card +--- +props: + loading: true +--- + +Button +:: + +### Block + +Use the `block` prop to make the Button fill the width of its container. + +::component-card +--- +props: + block: true +--- + +Button +:: + +### Link + +Use the `to` prop to make the Button a link. + +::component-card +--- +props: + to: 'https://volta.net' + target: '_blank' +--- + +Button +:: + +### Padded + +Use the `padded` prop to remove the padding of the Button. + +::component-card +--- +props: + padded: false +baseProps: + color: 'gray' + variant: 'link' + icon: 'i-heroicons-x-mark-20-solid' +--- +:: + +### Square + +Use the `square` prop to force the Button to have the same padding horizontally and vertically. + +::component-card +--- +props: + square: true +baseProps: + label: 'Button' + color: 'gray' + variant: 'solid' +--- +:: + +### Truncate + +Use the `truncate` prop to truncate the label of the Button. + +::component-card +--- +props: + truncate: true + class: 'w-20' + label: 'Button with a long text' +excludedProps: + - class +--- +:: + +### Group + +To stack buttons as a group, use the `ButtonGroup` component. + +- To size all the buttons equally, pass the `size` prop +- To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow` + +::component-card{slug="ButtonGroup"} +--- +props: + size: 'sm' +ui: + size: + xxs: '' + xs: '' + sm: '' + md: '' + lg: '' + xl: '' +code: | + + +--- + +#default +:u-button{label="Action" color="white"} +:u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"} +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/2.elements/4.dropdown.md b/docs/content/2.elements/4.dropdown.md new file mode 100644 index 00000000..d3af9102 --- /dev/null +++ b/docs/content/2.elements/4.dropdown.md @@ -0,0 +1,56 @@ +--- +github: true +headlessui: + label: 'Menu' + to: 'https://headlessui.com/vue/menu' +--- + +## Usage + +::component-example +#default +:dropdown-example + +#code +```vue + + + +``` +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md new file mode 100644 index 00000000..8db6525d --- /dev/null +++ b/docs/content/3.forms/1.input.md @@ -0,0 +1,91 @@ +--- +github: true +--- + +## Usage + +::component-card +--- +baseProps: + name: 'input' +--- +:: + +### Size + +Use the `size` prop to change the size of the Input. + +::component-card +--- +baseProps: + name: 'input' +props: + size: 'sm' +--- +:: + +### 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 `leading` and `trailing` props to set the icon position or the `leadingIcon` and `trailingIcon` props to set a different icon for each position. + +::component-card +--- +baseProps: + name: 'input' +props: + icon: 'i-heroicons-magnifying-glass-20-solid' + appearance: 'white' + size: 'sm' + trailing: false + placeholder: 'Search...' +excludedProps: + - icon + - placeholder +--- +:: + +### Disabled + +Use the `disabled` prop to disable the Input. + +::component-card +--- +baseProps: + name: 'input' +props: + placeholder: 'Search...' + appearance: 'white' + disabled: true +excludedProps: + - placeholder +--- +:: + +### Loading + +Use the `loading` prop to show a loading icon and disable the Input. + +::component-card +--- +baseProps: + name: 'input' + placeholder: 'Search' +props: + loading: true + icon: 'i-heroicons-magnifying-glass-20-solid' +excludedProps: + - icon +--- +:: + +### Group + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/3.forms/2.textarea.md b/docs/content/3.forms/2.textarea.md new file mode 100644 index 00000000..1bdd3df9 --- /dev/null +++ b/docs/content/3.forms/2.textarea.md @@ -0,0 +1,20 @@ +--- +github: true +--- + +## Usage + +::component-card +--- +baseProps: + name: 'textarea' +--- +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md new file mode 100644 index 00000000..f4a4f8c7 --- /dev/null +++ b/docs/content/3.forms/3.select.md @@ -0,0 +1,25 @@ +--- +github: true +--- + +## Usage + +::component-card +--- +baseProps: + name: 'select' + modelValue: 'Canada' + options: + - 'United States' + - 'Canada' + - 'Mexico' +--- +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md new file mode 100644 index 00000000..3eaa3bd5 --- /dev/null +++ b/docs/content/3.forms/4.select-menu.md @@ -0,0 +1,185 @@ +--- +github: true +headlessui: + label: 'Listbox' + to: 'https://headlessui.com/vue/listbox' +--- + +## Usage + +::component-example +#default +:select-menu-example-basic{class="max-w-[12rem] w-full"} + +#code +```vue + + + +``` +:: + +You can use multiple values but you have to override the `#label` slot and handle the display yourself. + +::component-example +#default +:select-menu-example-multiple{class="max-w-[12rem] w-full"} + +#code +```vue + + + +``` +:: + +You can also override the default slot entirely. + +::component-example +#default +:select-menu-example-button{class="max-w-[12rem] w-full"} + +#code +```vue + + + +``` +:: + +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. + +::component-example +#default +:select-menu-example-objects{class="max-w-[12rem] w-full"} +#code +```vue + + + +``` +:: + +### Icon + +Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`. + +::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: + icon: 'i-heroicons-magnifying-glass-20-solid' +excludedProps: + - icon +--- +:: + +### Search + +Use the `searchable` prop to enable search. + +This will use HeadlessUI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox). + +::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: + searchable: true +--- +:: + +### 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 + +## Preset + +:component-preset diff --git a/docs/content/3.forms/5.checkbox.md b/docs/content/3.forms/5.checkbox.md new file mode 100644 index 00000000..f4cdd031 --- /dev/null +++ b/docs/content/3.forms/5.checkbox.md @@ -0,0 +1,16 @@ +--- +github: true +--- + +## Usage + +::component-card +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/3.forms/6.radio.md b/docs/content/3.forms/6.radio.md new file mode 100644 index 00000000..f4cdd031 --- /dev/null +++ b/docs/content/3.forms/6.radio.md @@ -0,0 +1,16 @@ +--- +github: true +--- + +## Usage + +::component-card +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/3.forms/7.toggle.md new file mode 100644 index 00000000..71c255e1 --- /dev/null +++ b/docs/content/3.forms/7.toggle.md @@ -0,0 +1,19 @@ +--- +github: true +headlessui: + label: 'Switch' + to: 'https://headlessui.com/vue/switch' +--- + +## Usage + +::component-card +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/4.navigation/1.vertical-navigation.md b/docs/content/4.navigation/1.vertical-navigation.md new file mode 100644 index 00000000..5b7a0f1e --- /dev/null +++ b/docs/content/4.navigation/1.vertical-navigation.md @@ -0,0 +1,46 @@ +--- +github: true +--- + +## Usage + +::component-example +#default +:vertical-navigation-example + +#code +```vue + + + +``` +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/4.navigation/2.command-palette.md b/docs/content/4.navigation/2.command-palette.md new file mode 100644 index 00000000..21178e14 --- /dev/null +++ b/docs/content/4.navigation/2.command-palette.md @@ -0,0 +1,273 @@ +--- +github: true +headlessui: + label: 'Combobox' + to: 'https://headlessui.com/vue/combobox' +--- + +## Usage + +Use a `v-model` to display a searchable and selectable list of commands. + +::component-example +--- +padding: false +--- + +#default +:command-palette-example-basic{class="h-[257px]"} + +#code +```vue + + + +``` +:: + +You can put a `CommandPalette` anywhere you want but it's most commonly used inside of a modal. + +::component-example +#default +:command-palette-example-modal + +#code +```vue + + + +``` +:: + +You can pass multiple groups of commands to the component. Each group will be separated by a divider and will display a label. + +Without a `v-model`, you can also listen on `@update:model-value` to navigate to a link or do something else when a command is clicked. + +::component-example +--- +padding: false +--- + +#default +:command-palette-example-groups{class="h-[274px]"} + +#code +```vue + + + +``` +:: + +### Icon + +Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`. + +::component-card +--- +padding: false +baseProps: + empty: null +props: + icon: 'i-heroicons-command-line' +excludedProps: + - icon +--- +:: + +### Placeholder + +Use the `placeholder` prop to change the input placeholder + +::component-card +--- +padding: false +baseProps: + empty: null +props: + placeholder: 'Type a command...' +excludedProps: + - icon +--- +:: + +### Close + +Use the `close` prop to display a close button on the right side of the input. + +You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.commandPalette.default.close`. + +::component-card +--- +padding: false +baseProps: + empty: null +props: + close: + icon: 'i-heroicons-x-mark-20-solid' + color: 'gray' + variant: 'link' + padded: false +excludedProps: + - close +--- +:: + +### Empty + +Use the `empty` prop to display a message when there are no results. + +You can pass an `object` through the `empty` prop or globally through `ui.commandPalette.default.empty`. Here is the default: + +::component-card +--- +padding: false +baseProps: + placeholder: 'Type something to see the empty label change' +props: + empty: + icon: 'i-heroicons-magnifying-glass-20-solid' + label: "We couldn't find any items." + queryLabel: "We couldn't find any items with that term. Please try again." +excludedProps: + - empty +--- +:: + +## Themes + +Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do. + +### Algolia + +::component-example +--- +padding: false +--- + +#default +:command-palette-theme-algolia{class="max-h-[480px] rounded-md"} +:: + +::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"} +Take a look at the component! +:: + +### Raycast + +::component-example +--- +padding: false +--- + +#default +:command-palette-theme-raycast{class="max-h-[480px] rounded-md"} +:: + +::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"} +Take a look at the component! +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/5.overlays/1.modal.md b/docs/content/5.overlays/1.modal.md new file mode 100644 index 00000000..05080478 --- /dev/null +++ b/docs/content/5.overlays/1.modal.md @@ -0,0 +1,72 @@ +--- +github: true +headlessui: + label: 'Dialog' + to: 'https://headlessui.com/vue/dialog' +--- + +## Usage + +::component-example +#default +:modal-example-basic + +#code +```vue + + + +``` +:: + +You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots: + +::component-example +#default +:modal-example-card + +#code +```vue + + + +``` +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/5.overlays/2.slideover.md b/docs/content/5.overlays/2.slideover.md new file mode 100644 index 00000000..247bcd7b --- /dev/null +++ b/docs/content/5.overlays/2.slideover.md @@ -0,0 +1,37 @@ +--- +github: true +headlessui: + label: 'Dialog' + to: 'https://headlessui.com/vue/dialog' +--- + +## Usage + +::component-example +#default +:slideover-example +#code +```vue + + + +``` +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/5.overlays/3.popover.md b/docs/content/5.overlays/3.popover.md new file mode 100644 index 00000000..e0d32585 --- /dev/null +++ b/docs/content/5.overlays/3.popover.md @@ -0,0 +1,33 @@ +--- +github: true +headlessui: + label: 'Popover' + to: 'https://headlessui.com/vue/popover' +--- + +## Usage + +::component-example +#default +:popover-example +#code +```vue + +``` +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/5.overlays/4.tooltip.md b/docs/content/5.overlays/4.tooltip.md new file mode 100644 index 00000000..db3f8e29 --- /dev/null +++ b/docs/content/5.overlays/4.tooltip.md @@ -0,0 +1,26 @@ +--- +github: true +--- + +## Usage + +::component-example +#default +:tooltip-example +#code +```vue + +``` +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/5.overlays/5.context-menu.md b/docs/content/5.overlays/5.context-menu.md new file mode 100644 index 00000000..8bcdea99 --- /dev/null +++ b/docs/content/5.overlays/5.context-menu.md @@ -0,0 +1,49 @@ +--- +github: true +--- + +## Usage + +::component-example +#default +:context-menu-example +#code +```vue + + + +``` +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/5.overlays/6.notification.md b/docs/content/5.overlays/6.notification.md new file mode 100644 index 00000000..02f08fdc --- /dev/null +++ b/docs/content/5.overlays/6.notification.md @@ -0,0 +1,249 @@ +--- +github: true +--- + +## Usage + +First of all, add the `Notifications` component to your app, preferably inside `app.vue`. + +This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the `app.config.ts` through `ui.notifications`. + +```vue [app.vue] + +``` + +Then, you can use the `useToast` composable to add notifications to your app: + +::component-example +#default +:notification-example-basic +#code +```vue + + + +``` +:: + +### Description + +You can add a `description` in addition of the `title`. + +::component-card +--- +baseProps: + id: 2 + timeout: 0 +props: + title: 'Notification' + description: 'This is a notification.' +--- +:: + +### Icon + +Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`. + +::component-card +--- +baseProps: + id: 3 + timeout: 0 + title: 'Notification' +props: + icon: 'i-heroicons-check-circle' + description: 'This is a notification.' +excludedProps: + - icon +--- +:: + +### Avatar + +Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props. + +::component-card +--- +baseProps: + id: 4 + timeout: 0 + title: 'Notification' + description: 'This is a notification.' +props: + avatar: + src: 'https://avatars.githubusercontent.com/u/739984?v=4' +excludedProps: + - avatar +--- +:: + +### Timeout + +Use the `timeout` prop to configure how long the Notification will remain. Set it to `0` to disable the timeout. + +You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused. + +::component-card +--- +baseProps: + id: 5 + title: 'Notification' + description: 'This is a notification.' +props: + timeout: 10000 +--- +:: + +### Click + +Use the `click` prop to execute a function when the Notification is clicked. + +::component-example +#default +:notification-example-click +#code +```vue + + + +``` +:: + +### Callback + +Use the `callback` prop to execute a function when the Notification expires. + +::component-example +#default +:notification-example-callback +#code +```vue + + + +``` +:: + +### Close + +Use the `close` prop to hide or customize the close button on the Notification. + +You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.notifications.default.close`. + +::component-card +--- +baseProps: + id: 6 + title: 'Notification' + timeout: 0 +props: + close: + icon: 'i-heroicons-archive-box-x-mark' + color: 'primary' + variant: 'outline' + padded: true + size: '2xs' + ui: + rounded: 'rounded-full' +excludedProps: + - close +--- +:: + +### Actions + +Use the `actions` prop to add actions to the Notification. + +::component-example +#default +:notification-example-actions +#code +```vue + + + +``` +:: + +Like for `close`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notifications.default.action`. + +::component-card +--- +baseProps: + id: 6 + title: 'Notification' + timeout: 0 +props: + actions: + - variant: 'ghost' + color: 'gray' + label: Action 1 + - variant: 'solid' + color: 'gray' + label: Action 2 +excludedProps: + - actions +--- +:: + +Actions will render differently whether you have a `description` set. + +::component-card +--- +baseProps: + id: 6 + title: 'Notification' + description: 'This is a notification.' + timeout: 0 +props: + actions: + - variant: 'solid' + color: 'primary' + label: Action 1 + - variant: 'outline' + color: 'primary' + label: Action 2 +excludedProps: + - actions +--- +:: + +## Props + +:component-props + +## Preset + +:component-preset diff --git a/docs/content/6.layout/1.card.md b/docs/content/6.layout/1.card.md new file mode 100644 index 00000000..cbb4bd2a --- /dev/null +++ b/docs/content/6.layout/1.card.md @@ -0,0 +1,35 @@ +--- +github: true +--- + +## Usage + +::component-example +#default +:card-example{class="w-full"} + +#code +```vue + - - - diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts new file mode 100644 index 00000000..5bb5b4b7 --- /dev/null +++ b/src/runtime/components/elements/ButtonGroup.ts @@ -0,0 +1,80 @@ +import { h, computed, defineComponent } from 'vue' +import type { PropType } from 'vue' +import { defu } from 'defu' +import { useAppConfig } from '#imports' +// TODO: Remove +// @ts-expect-error +import appConfig from '#build/app.config' + +// const appConfig = useAppConfig() + +export default defineComponent({ + props: { + size: { + type: String, + default: null, + validator (value: string) { + return Object.keys(appConfig.ui.avatar.size).includes(value) + } + }, + ui: { + type: Object as PropType>, + default: () => appConfig.ui.buttonGroup + } + }, + setup (props, { slots }) { + // TODO: Remove + const appConfig = useAppConfig() + + const ui = computed>(() => defu({}, props.ui, appConfig.ui.buttonGroup)) + + const children = computed(() => { + let children = slots.default?.() + // @ts-ignore-next + if (children.length && children[0].type.name === 'ContentSlot') { + // @ts-ignore-next + children = children[0].ctx.slots.default?.() + } + return children + }) + + const rounded = computed(() => ({ + 'rounded-none': { left: 'rounded-l-none', right: 'rounded-r-none' }, + 'rounded-sm': { left: 'rounded-l-sm', right: 'rounded-r-sm' }, + rounded: { left: 'rounded-l', right: 'rounded-r' }, + 'rounded-md': { left: 'rounded-l-md', right: 'rounded-r-md' }, + 'rounded-lg': { left: 'rounded-l-lg', right: 'rounded-r-lg' }, + 'rounded-xl': { left: 'rounded-l-xl', right: 'rounded-r-xl' }, + 'rounded-2xl': { left: 'rounded-l-2xl', right: 'rounded-r-2xl' }, + 'rounded-3xl': { left: 'rounded-l-3xl', right: 'rounded-r-3xl' }, + 'rounded-full': { left: 'rounded-l-full', right: 'rounded-r-full' } + }[ui.value.rounded])) + + const clones = computed(() => children.value.map((node, index) => { + if (props.size) { + node.props.size = props.size + } + + node.props.class = node.props.class || '' + node.props.class += ' !shadow-none' + node.props.ui = node.props.ui || {} + node.props.ui.rounded = '' + + if (index === 0) { + node.props.ui.rounded = rounded.value.left + } + + if (index > 0) { + node.props.class += ' -ml-px' + } + + if (index === children.value.length - 1) { + node.props.ui.rounded = rounded.value.right + } + + return node + })) + + return () => h('div', { class: [ui.value.wrapper, ui.value.rounded, ui.value.shadow] }, clones.value) + } +}) diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue index 6776cdba..bf8aeb33 100644 --- a/src/runtime/components/elements/Dropdown.vue +++ b/src/runtime/components/elements/Dropdown.vue @@ -1,5 +1,5 @@ - - - diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue index faddd4af..73426f05 100644 --- a/src/runtime/components/elements/Icon.vue +++ b/src/runtime/components/elements/Icon.vue @@ -10,7 +10,3 @@ defineProps({ } }) - - diff --git a/src/runtime/components/elements/Link.vue b/src/runtime/components/elements/Link.vue deleted file mode 100644 index 1034e46b..00000000 --- a/src/runtime/components/elements/Link.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - - - diff --git a/src/runtime/components/elements/LinkCustom.vue b/src/runtime/components/elements/LinkCustom.vue new file mode 100644 index 00000000..b4c8dd98 --- /dev/null +++ b/src/runtime/components/elements/LinkCustom.vue @@ -0,0 +1,36 @@ + + + diff --git a/src/runtime/components/feedback/Alert.vue b/src/runtime/components/feedback/Alert.vue deleted file mode 100644 index 775c298e..00000000 --- a/src/runtime/components/feedback/Alert.vue +++ /dev/null @@ -1,106 +0,0 @@ - - - - - diff --git a/src/runtime/components/feedback/AlertDialog.vue b/src/runtime/components/feedback/AlertDialog.vue deleted file mode 100644 index 9d19c4b1..00000000 --- a/src/runtime/components/feedback/AlertDialog.vue +++ /dev/null @@ -1,108 +0,0 @@ - - - - - diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue index a8668b9b..5638bb72 100644 --- a/src/runtime/components/forms/Checkbox.vue +++ b/src/runtime/components/forms/Checkbox.vue @@ -1,5 +1,5 @@ - - diff --git a/src/runtime/components/forms/FormGroup.vue b/src/runtime/components/forms/FormGroup.vue deleted file mode 100644 index b9f0b11d..00000000 --- a/src/runtime/components/forms/FormGroup.vue +++ /dev/null @@ -1,89 +0,0 @@ - - - - - diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue index 320a5f3c..b85e7d9e 100644 --- a/src/runtime/components/forms/Input.vue +++ b/src/runtime/components/forms/Input.vue @@ -1,5 +1,5 @@ - - - diff --git a/src/runtime/components/forms/InputGroup.vue b/src/runtime/components/forms/InputGroup.vue new file mode 100644 index 00000000..8c038d3e --- /dev/null +++ b/src/runtime/components/forms/InputGroup.vue @@ -0,0 +1,78 @@ + + + diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue index fdfb52b3..b2dd314f 100644 --- a/src/runtime/components/forms/Radio.vue +++ b/src/runtime/components/forms/Radio.vue @@ -1,5 +1,5 @@ - - diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue index 522f03e9..f1fb28d3 100644 --- a/src/runtime/components/forms/Select.vue +++ b/src/runtime/components/forms/Select.vue @@ -1,5 +1,5 @@ - - diff --git a/src/runtime/components/forms/SelectCustom.vue b/src/runtime/components/forms/SelectCustom.vue deleted file mode 100644 index 72f2918e..00000000 --- a/src/runtime/components/forms/SelectCustom.vue +++ /dev/null @@ -1,346 +0,0 @@ - - - - - diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue new file mode 100644 index 00000000..1a57f954 --- /dev/null +++ b/src/runtime/components/forms/SelectMenu.vue @@ -0,0 +1,329 @@ + + + diff --git a/src/runtime/components/forms/Textarea.vue b/src/runtime/components/forms/Textarea.vue index 1ed5c329..f69064b6 100644 --- a/src/runtime/components/forms/Textarea.vue +++ b/src/runtime/components/forms/Textarea.vue @@ -1,5 +1,5 @@