├── .editorconfig ├── .github └── workflows │ ├── ci.yml │ └── studio.yml ├── .gitignore ├── .npmrc ├── .vscode └── settings.json ├── CHANGELOG.md ├── README.md ├── docs ├── .gitignore ├── README.md ├── app.vue ├── app │ ├── components │ │ ├── AllComponents.vue │ │ ├── AsideMenu.vue │ │ ├── AsideMenuItems.vue │ │ ├── CodeBlock.vue │ │ ├── CodeBox.vue │ │ ├── ComponentList.vue │ │ ├── DocTable.vue │ │ ├── DocTitle.vue │ │ ├── DocTopic.vue │ │ ├── HeaderUi.vue │ │ ├── ShowComponent.vue │ │ ├── WelcomePage.vue │ │ └── paper │ │ │ ├── PUIcon.vue │ │ │ ├── PULabel.vue │ │ │ ├── PUTabs.vue │ │ │ ├── PUToast.vue │ │ │ ├── ShowAccordion.vue │ │ │ ├── ShowAudio.vue │ │ │ ├── ShowAvatar.vue │ │ │ ├── ShowBadge.vue │ │ │ ├── ShowButton.vue │ │ │ ├── ShowButtonIcon.vue │ │ │ ├── ShowCheckbox.vue │ │ │ ├── ShowDatepicker.vue │ │ │ ├── ShowIcons.vue │ │ │ ├── ShowInput.vue │ │ │ ├── ShowModal.vue │ │ │ ├── ShowProgress.vue │ │ │ ├── ShowRadio.vue │ │ │ ├── ShowSelect.vue │ │ │ ├── ShowSwitch.vue │ │ │ ├── ShowTable.vue │ │ │ ├── ShowTag.vue │ │ │ ├── ShowTextarea.vue │ │ │ ├── ShowToast.vue │ │ │ ├── ShowTooltip.vue │ │ │ └── ShowVideo.vue │ ├── composables │ │ ├── useAccordion.ts │ │ ├── useModal.ts │ │ ├── useTabs.ts │ │ └── useToast.ts │ ├── layouts │ │ └── default.vue │ ├── pages │ │ ├── [...slug].vue │ │ └── docs │ │ │ ├── [...slug].vue │ │ │ └── components │ │ │ └── [...slug].vue │ ├── public │ │ ├── bg.svg │ │ ├── copy.svg │ │ ├── favicon copy.ico │ │ ├── favicon.ico │ │ ├── paper-ui.mp3 │ │ ├── paper-ui.mp4 │ │ ├── robots.txt │ │ ├── rocket.svg │ │ ├── techs.svg │ │ └── vue.svg │ └── stores │ │ └── toastStore.ts ├── content.config.ts ├── content │ ├── about.md │ ├── docs │ │ ├── components │ │ │ ├── pu-accordion.md │ │ │ ├── pu-audio.md │ │ │ ├── pu-avatar.md │ │ │ ├── pu-badge.md │ │ │ ├── pu-button-icon.md │ │ │ ├── pu-button.md │ │ │ ├── pu-checkbox.md │ │ │ ├── pu-datepicker.md │ │ │ ├── pu-input.md │ │ │ ├── pu-modal.md │ │ │ ├── pu-progress.md │ │ │ ├── pu-radio.md │ │ │ ├── pu-select.md │ │ │ ├── pu-switch.md │ │ │ ├── pu-table.md │ │ │ ├── pu-tabs.md │ │ │ ├── pu-tag.md │ │ │ ├── pu-textarea.md │ │ │ ├── pu-toast.md │ │ │ ├── pu-tooltip.md │ │ │ └── pu-video.md │ │ ├── getting-started.md │ │ ├── icons.md │ │ └── index.md │ └── index.md ├── nuxt.config.ts ├── package.json ├── public │ ├── avatar.svg │ ├── bg.svg │ ├── copy.svg │ ├── favicon.ico │ ├── home.svg │ ├── logo.svg │ ├── paper-ui.mp3 │ ├── paper-ui.mp4 │ ├── rocket.svg │ ├── techs.svg │ └── vue.svg ├── server │ └── tsconfig.json └── tsconfig.json ├── eslint.config.mjs ├── nuxt.config.ts ├── package.json ├── playground ├── app.vue ├── nuxt.config.ts ├── package.json ├── server │ └── tsconfig.json └── tsconfig.json ├── pnpm-lock.yaml ├── src ├── module.ts └── runtime │ ├── components │ ├── PUAccordion.vue │ ├── PUAudio.vue │ ├── PUAvatar.vue │ ├── PUBadge.vue │ ├── PUButton.vue │ ├── PUButtonIcon.vue │ ├── PUCheckbox.vue │ ├── PUDatePicker.vue │ ├── PUIcon.vue │ ├── PUInput.vue │ ├── PULabel.vue │ ├── PUModal.vue │ ├── PUProgress.vue │ ├── PURadio.vue │ ├── PUSelect.vue │ ├── PUSwitch.vue │ ├── PUTable.vue │ ├── PUTabs.vue │ ├── PUTag.vue │ ├── PUTextArea.vue │ ├── PUToast.vue │ ├── PUTooltip.vue │ └── PUVideo.vue │ ├── composables │ ├── useAccordion.ts │ ├── useModal.ts │ ├── useTabs.ts │ └── useToast.ts │ ├── plugin.ts │ ├── server │ └── tsconfig.json │ ├── stores │ └── toastStore.ts │ └── style.css ├── tailwind.config.ts ├── test ├── basic.test.ts └── fixtures │ └── basic │ ├── app.vue │ ├── nuxt.config.ts │ └── package.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | lint: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v4 17 | - run: corepack enable 18 | - uses: actions/setup-node@v4 19 | with: 20 | node-version: 20 21 | 22 | - name: Install dependencies 23 | run: npm install 24 | 25 | - name: Lint 26 | run: npm run lint 27 | 28 | test: 29 | runs-on: ubuntu-latest 30 | 31 | steps: 32 | - uses: actions/checkout@v4 33 | - run: corepack enable 34 | - uses: actions/setup-node@v4 35 | with: 36 | node-version: 20 37 | 38 | - name: Install dependencies 39 | run: npm install 40 | 41 | - name: Playground prepare 42 | run: npm run dev:prepare 43 | 44 | - name: Test 45 | run: npm run test 46 | -------------------------------------------------------------------------------- /.github/workflows/studio.yml: -------------------------------------------------------------------------------- 1 | 2 | name: studio-nuxt-build 3 | run-name: studio nuxt build 4 | 5 | on: 6 | # Runs on pushes targeting the default branch 7 | push: 8 | branches: 9 | - 'main' 10 | 11 | # Allows you to run this workflow manually from the Actions tab 12 | workflow_dispatch: 13 | 14 | # Add write workflow permissions 15 | permissions: 16 | contents: write 17 | 18 | # Allow one concurrent deployment 19 | concurrency: 20 | group: "pages" 21 | cancel-in-progress: true 22 | 23 | jobs: 24 | # Build job 25 | build-and-deploy: 26 | runs-on: ${{ matrix.os }} 27 | defaults: 28 | run: 29 | working-directory: docs 30 | 31 | strategy: 32 | matrix: 33 | os: [ubuntu-latest] 34 | node: [20] 35 | 36 | steps: 37 | - name: Checkout 38 | uses: actions/checkout@v4 39 | 40 | - name: Identify package manager 41 | id: pkgman 42 | run: | 43 | cache=`[ -f "docs/pnpm-lock.yaml" ] && echo "pnpm" || ([ -f "docs/package-lock.json" ] && echo "npm" || ([ -f "docs/yarn.lock" ] && echo "yarn" || echo ""))` 44 | package_manager=`[ ! -z "$cache" ] && echo "$cache" || echo "pnpm"` 45 | echo "cache=$cache" >> $GITHUB_OUTPUT 46 | echo "package_manager=$package_manager" >> $GITHUB_OUTPUT 47 | 48 | - uses: pnpm/action-setup@v4 49 | if: ${{ steps.pkgman.outputs.package_manager == 'pnpm' }} 50 | name: Install pnpm 51 | id: pnpm-install 52 | 53 | - uses: actions/setup-node@v4 54 | with: 55 | version: ${{ matrix.node }} 56 | cache: ${{ steps.pkgman.outputs.cache }} 57 | 58 | - name: Install dependencies 59 | run: ${{ steps.pkgman.outputs.package_manager }} install 60 | 61 | - name: Generate 62 | run: npx nuxi build --preset github_pages 63 | env: 64 | NUXT_CONTENT_PREVIEW_API: https://api.nuxt.studio 65 | 66 | 67 | # Deployment job 68 | - name: Deploy 🚀 69 | uses: JamesIves/github-pages-deploy-action@v4 70 | with: 71 | folder: docs/.output/public 72 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .data 23 | .vercel_build_output 24 | .build-* 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode/* 38 | !.vscode/settings.json 39 | !.vscode/tasks.json 40 | !.vscode/launch.json 41 | !.vscode/extensions.json 42 | !.vscode/*.code-snippets 43 | 44 | # Intellij idea 45 | *.iml 46 | .idea 47 | 48 | # OSX 49 | .DS_Store 50 | .AppleDouble 51 | .LSOverride 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.experimental.useFlatConfig": true 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 9 | 10 | # @paper-ui/nuxt 11 | 12 | [![npm version][npm-version-src]][npm-version-href] 13 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 14 | [![License][license-src]][license-href] 15 | [![Nuxt][nuxt-src]][nuxt-href] 16 | 17 | ![paper-ui-home](https://github.com/user-attachments/assets/c5b4f83a-d052-475d-ad0b-596c9621b5a0) 18 | 19 | `@paper-ui/nuxt` is a component library for Nuxt.js that aims to create a "hand-drawn" aesthetic for your UI. With this library, you can build interfaces using components with a unique and artistically crafted style. 20 | 21 | 22 | ## Links 23 | 24 | - [✨ Demo](https://stackblitz.com/edit/nuxt-starter-mkfqhq74?file=app.vue) 25 | - [📖 Documentation](https://paper-docs.nuxt.space/) 26 | - [📦 NPM Package](https://www.npmjs.com/package/@paper-ui/nuxt) 27 | - [🌍 Nuxt Module Page](https://nuxt.com/modules/paper-ui) 28 | 29 | ## Installation 30 | 31 | To install the module in your Nuxt.js project, use `one` of the following commands: 32 | 33 | ```bash 34 | npx nuxi@latest module add paper-ui 35 | ``` 36 | 37 | ```bash 38 | npm install @paper-ui/nuxt 39 | ``` 40 | 41 | ```bash 42 | pnpm add @paper-ui/nuxt 43 | ``` 44 | 45 | ## Usage 46 | 47 | After installing the module, add it to your `nuxt.config.js` file: 48 | 49 | ```js 50 | export default defineNuxtConfig({ 51 | modules: [ 52 | '@paper-ui/nuxt' 53 | ] 54 | }) 55 | ``` 56 | 57 | Now you can use the components provided by the library in your pages and Vue components. 58 | 59 | ### Example Usage 60 | 61 | ```vue 62 | 65 | ``` 66 | 67 | ## Scripts 68 | 69 | Here are some useful scripts available during development and maintenance of the module: 70 | 71 | - `dev`: Starts the development environment with the Nuxt Playground. 72 | - `dev:build`: Builds the Playground environment for testing. 73 | - `dev:prepare`: Prepares the development environment using `nuxt-module-build`. 74 | - `release`: Prepares for release by running tests, linting, and publishing the module. 75 | - `lint`: Runs ESLint to check code quality. 76 | - `test`: Runs tests using Vitest. 77 | - `test:watch`: Watches for changes and runs tests automatically. 78 | - `test:types`: Checks TypeScript types. 79 | 80 | ## Dependencies 81 | 82 | - `@nuxt/kit`: Core module for Nuxt 3. 83 | - `@nuxtjs/tailwindcss`: Integration with Tailwind CSS. 84 | 85 | ## Development 86 | 87 | During development, you can test the module locally using the included Playground. The development environment allows you to see how components behave as you make changes. 88 | 89 | ### Running the Playground 90 | 91 | Run the following command to start the Playground in development mode: 92 | 93 | ```bash 94 | npm run dev 95 | ``` 96 | 97 | Or, if you're using `pnpm`: 98 | 99 | ```bash 100 | pnpm dev 101 | ``` 102 | 103 | This will start the Nuxt development server, allowing you to preview the components in action. 104 | 105 | ## License 106 | 107 | This module is licensed under the [MIT License](LICENSE). 108 | 109 | ## Changelog 110 | 111 | - [✨  Release Notes](/CHANGELOG.md) 112 | 113 | 114 | 115 | 116 | [npm-version-src]: https://img.shields.io/npm/v/@paper-ui/nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82 117 | [npm-version-href]: https://npmjs.com/package/@paper-ui/nuxt 118 | 119 | [npm-downloads-src]: https://img.shields.io/npm/dm/paper-ui.svg?style=flat&colorA=020420&colorB=00DC82 120 | [npm-downloads-href]: https://npm.chart.dev/@paper-ui/nuxt 121 | 122 | [license-src]: https://img.shields.io/npm/l/@paper-ui/nuxt.svg?style=flat&colorA=020420&colorB=00DC82 123 | [license-href]: https://npmjs.com/package/@paper-ui/nuxt 124 | 125 | [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js 126 | [nuxt-href]: https://nuxt.com 127 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | 26 | pnpm-lock.yaml -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt Content Starter 2 | 3 | Look at the [Nuxt Content documentation](https://content.nuxt.com) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install dependencies: 8 | 9 | ```bash 10 | # npm 11 | npm install 12 | 13 | # pnpm 14 | pnpm install 15 | 16 | # yarn 17 | yarn install 18 | 19 | # bun 20 | bun install 21 | ``` 22 | 23 | ## Development Server 24 | 25 | Start the development server on `http://localhost:3000`: 26 | 27 | ```bash 28 | # npm 29 | npm run dev 30 | 31 | # pnpm 32 | pnpm dev 33 | 34 | # yarn 35 | yarn dev 36 | 37 | # bun 38 | bun run dev 39 | ``` 40 | 41 | ## Production 42 | 43 | Build the application for production: 44 | 45 | ```bash 46 | # npm 47 | npm run build 48 | 49 | # pnpm 50 | pnpm build 51 | 52 | # yarn 53 | yarn build 54 | 55 | # bun 56 | bun run build 57 | ``` 58 | 59 | Locally preview production build: 60 | 61 | ```bash 62 | # npm 63 | npm run preview 64 | 65 | # pnpm 66 | pnpm preview 67 | 68 | # yarn 69 | yarn preview 70 | 71 | # bun 72 | bun run preview 73 | ``` 74 | 75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 76 | -------------------------------------------------------------------------------- /docs/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /docs/app/components/AsideMenu.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 52 | 53 | 56 | -------------------------------------------------------------------------------- /docs/app/components/AsideMenuItems.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | -------------------------------------------------------------------------------- /docs/app/components/CodeBlock.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 46 | -------------------------------------------------------------------------------- /docs/app/components/ComponentList.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 37 | -------------------------------------------------------------------------------- /docs/app/components/DocTable.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 46 | 47 | 60 | -------------------------------------------------------------------------------- /docs/app/components/DocTitle.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /docs/app/components/DocTopic.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /docs/app/components/HeaderUi.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /docs/app/components/ShowComponent.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /docs/app/components/paper/PULabel.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /docs/app/components/paper/PUTabs.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 83 | 84 | 122 | -------------------------------------------------------------------------------- /docs/app/components/paper/PUToast.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 58 | 59 | 117 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowAccordion.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 70 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowAudio.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowAvatar.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 76 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowBadge.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 51 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowButton.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 78 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowButtonIcon.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 81 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowCheckbox.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 69 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowDatepicker.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 57 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowInput.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 72 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowModal.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 78 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowProgress.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 51 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowRadio.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 84 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowSelect.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 103 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowSwitch.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 54 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowTable.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 89 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowTag.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 31 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowTextarea.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 59 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowToast.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 72 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowTooltip.vue: -------------------------------------------------------------------------------- 1 | 140 | 141 | 146 | -------------------------------------------------------------------------------- /docs/app/components/paper/ShowVideo.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 33 | -------------------------------------------------------------------------------- /docs/app/composables/useAccordion.ts: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export const useAccordion = () => { 4 | const openSections = ref>(new Set()) 5 | 6 | const toggleSection = (index: number) => { 7 | if (openSections.value.has(index)) { 8 | openSections.value.delete(index) 9 | } 10 | else { 11 | openSections.value.add(index) 12 | } 13 | } 14 | 15 | const isOpen = (index: number) => openSections.value.has(index) 16 | 17 | return { 18 | openSections, 19 | toggleSection, 20 | isOpen, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docs/app/composables/useModal.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'nuxt/app' 2 | 3 | export const useModal = () => { 4 | const isVisible = useState('modalVisible', () => false) 5 | 6 | const show = () => { 7 | isVisible.value = true 8 | } 9 | 10 | const hide = () => { 11 | isVisible.value = false 12 | } 13 | 14 | return { isVisible, show, hide } 15 | } 16 | -------------------------------------------------------------------------------- /docs/app/composables/useTabs.ts: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export const useTabs = () => { 4 | const activeTab = ref(0) 5 | 6 | const setActiveTab = (index: number) => { 7 | activeTab.value = index 8 | } 9 | 10 | const isActive = (index: number) => activeTab.value === index 11 | 12 | return { 13 | activeTab, 14 | setActiveTab, 15 | isActive, 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/app/composables/useToast.ts: -------------------------------------------------------------------------------- 1 | // useToast.ts 2 | import { addToast } from '../stores/toastStore' 3 | import type { Toast } from '../stores/toastStore' 4 | 5 | export const useToast = () => { 6 | const add = (options: Toast) => { 7 | addToast(options) 8 | } 9 | 10 | return { add } 11 | } 12 | -------------------------------------------------------------------------------- /docs/app/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /docs/app/pages/[...slug].vue: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | 22 | -------------------------------------------------------------------------------- /docs/app/pages/docs/[...slug].vue: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | 25 | -------------------------------------------------------------------------------- /docs/app/pages/docs/components/[...slug].vue: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 29 | -------------------------------------------------------------------------------- /docs/app/public/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/app/public/favicon copy.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paper-kit/nuxt/307fe8f1c7d8de394c7f7edc948b0229cccff09a/docs/app/public/favicon copy.ico -------------------------------------------------------------------------------- /docs/app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paper-kit/nuxt/307fe8f1c7d8de394c7f7edc948b0229cccff09a/docs/app/public/favicon.ico -------------------------------------------------------------------------------- /docs/app/public/paper-ui.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paper-kit/nuxt/307fe8f1c7d8de394c7f7edc948b0229cccff09a/docs/app/public/paper-ui.mp3 -------------------------------------------------------------------------------- /docs/app/public/paper-ui.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paper-kit/nuxt/307fe8f1c7d8de394c7f7edc948b0229cccff09a/docs/app/public/paper-ui.mp4 -------------------------------------------------------------------------------- /docs/app/public/robots.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/app/public/rocket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/app/public/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/app/stores/toastStore.ts: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | 3 | export interface Toast { 4 | id?: number 5 | severity: 'primary' | 'secondary' 6 | summary: string 7 | detail?: string 8 | visible?: boolean 9 | life?: number 10 | } 11 | 12 | export type Toasts = Toast[] 13 | 14 | export const toasts = ref([]) 15 | 16 | export const addToast = ({ severity, summary, detail, life }: Toast) => { 17 | const id = Date.now() 18 | const toast = { 19 | id, 20 | severity, 21 | summary, 22 | detail, 23 | visible: true, 24 | } as Toast 25 | toasts.value.push(toast) 26 | 27 | setTimeout(() => { 28 | removeToast(id) 29 | }, life || 3000) 30 | } 31 | 32 | export const removeToast = (id: number) => { 33 | const index = toasts.value.findIndex((toast: Toast) => toast.id === id) 34 | if (index !== -1) toasts.value.splice(index, 1) 35 | } 36 | -------------------------------------------------------------------------------- /docs/content.config.ts: -------------------------------------------------------------------------------- 1 | import { defineContentConfig, defineCollection } from '@nuxt/content' 2 | 3 | export default defineContentConfig({ 4 | collections: { 5 | content: defineCollection({ 6 | type: 'page', 7 | source: '**', 8 | }), 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /docs/content/about.md: -------------------------------------------------------------------------------- 1 | # About Content Version 3 2 | 3 | [Back home](/) 4 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-accordion.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Accordion Component 4 | #description 5 | A customizable accordion component with smooth transitions and slot support 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-accordion{type="default"} 15 | #code 16 | ```html 17 | 23 | ``` 24 | :: 25 | 26 | ::doc-topic 27 | #description 28 | ### Custom Headers 29 | :: 30 | ::paper-show-accordion{type="custom-header"} 31 | #code 32 | ```html 33 | 48 | ``` 49 | :: 50 | 51 | ::doc-topic 52 | #description 53 | ### Custom Content 54 | :: 55 | ::paper-show-accordion{type="custom-content"} 56 | #code 57 | ```html 58 | 68 | ``` 69 | :: 70 | 71 | ::doc-topic 72 | #title 73 | ## Props 74 | :: 75 | ::doc-table 76 | --- 77 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 78 | rows: 79 | - - 'items' 80 | - 'Array<{title: string, content: string}>' 81 | - 'Yes' 82 | - '-' 83 | - 'Accordion items data structure' 84 | --- 85 | :: 86 | 87 | ::doc-topic 88 | #title 89 | ## Slots 90 | :: 91 | ::doc-table 92 | --- 93 | headers: ['Slot', 'Props', 'Description'] 94 | rows: 95 | - - 'header' 96 | - '{ item: object, isOpen: boolean }' 97 | - 'Custom header template' 98 | - - 'content' 99 | - '{ item: object }' 100 | - 'Custom content template' 101 | --- 102 | :: 103 | 104 | ::doc-topic 105 | #title 106 | ## Styling 107 | #description 108 | - Base styling with Tailwind: 109 | ::code-box{header="Core Structure" type="css" copy} 110 | ```css 111 | .accordion { 112 | @apply p-1 bg-white shadow-sm; 113 | @apply border-2 border-primary-light-500 rounded-lg; 114 | } 115 | 116 | .accordion-header { 117 | @apply flex justify-between items-center cursor-pointer p-2 font-bold; 118 | } 119 | ``` 120 | :: 121 | - Smooth transitions: 122 | ::code-box{header="Transition Effects" type="css" copy} 123 | ```css 124 | .accordion-enter-active, 125 | .accordion-leave-active { 126 | @apply transition-all duration-300; 127 | } 128 | 129 | .accordion-enter-from, 130 | .accordion-leave-to { 131 | @apply max-h-0 opacity-0; 132 | } 133 | ``` 134 | :: 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-audio.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Audio Component 4 | #description 5 | A customizable audio player component with playback controls and volume management 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-audio{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #title 25 | ## Props 26 | :: 27 | ::doc-table 28 | --- 29 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 30 | rows: 31 | - - 'src' 32 | - 'string' 33 | - 'Yes' 34 | - '-' 35 | - 'URL of the audio file' 36 | --- 37 | :: 38 | 39 | ::doc-topic 40 | #title 41 | ## Features 42 | #description 43 | - Play/Pause controls 44 | - Seek bar with time tracking 45 | - Volume control with mute toggle 46 | - Responsive design 47 | - Smooth animations 48 | :: 49 | 50 | ::doc-topic 51 | #title 52 | ## Styling 53 | #description 54 | - Base styling with Tailwind: 55 | ::code-box{header="Core Structure" type="css" copy} 56 | ```css 57 | .audio-container { 58 | @apply relative w-full max-w-lg border-2 border-primary-light-500 59 | rounded-lg shadow-lg p-4 flex items-center gap-3 bg-white; 60 | } 61 | 62 | .controls { 63 | @apply flex items-center gap-3; 64 | } 65 | ``` 66 | :: 67 | - Interactive elements: 68 | ::code-box{header="Interactive Styles" type="css" copy} 69 | ```css 70 | button { 71 | @apply transition-transform transform hover:scale-110; 72 | } 73 | 74 | input[type="range"] { 75 | @apply cursor-pointer accent-primary-light-500; 76 | } 77 | ``` 78 | :: 79 | 80 | ::doc-topic 81 | #title 82 | ## Dependencies 83 | #description 84 | - `PUIcon` for control icons 85 | - Tailwind CSS for styling 86 | - Vue 3 Composition API 87 | :: 88 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-avatar.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Avatar Component 4 | #description 5 | A flexible avatar component with support for images, fallback content, and multiple styling options 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-avatar{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### Different Sizes 26 | :: 27 | ::paper-show-avatar{type="sizes"} 28 | #code 29 | ```html 30 | 38 | ``` 39 | :: 40 | 41 | ::doc-topic 42 | #description 43 | ### Different Shapes 44 | :: 45 | ::paper-show-avatar{type="shapes"} 46 | #code 47 | ```html 48 | 55 | ``` 56 | :: 57 | 58 | ::doc-topic 59 | #description 60 | ### Fallback Content 61 | :: 62 | ::paper-show-avatar{type="fallback"} 63 | #code 64 | ```html 65 | 68 | ``` 69 | :: 70 | 71 | ::doc-topic 72 | #title 73 | ## Props 74 | :: 75 | ::doc-table 76 | --- 77 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 78 | rows: 79 | - - 'src' 80 | - 'string' 81 | - 'No' 82 | - 'undefined' 83 | - 'Image source URL' 84 | - - 'size' 85 | - 'small | medium | large | xlarge' 86 | - 'No' 87 | - 'medium' 88 | - 'Size of the avatar' 89 | - - 'shape' 90 | - 'circular | rounded | square' 91 | - 'No' 92 | - 'circular' 93 | - 'Shape of the avatar' 94 | --- 95 | :: 96 | 97 | ::doc-topic 98 | #title 99 | ## Styling 100 | #description 101 | - Base styling with Tailwind: 102 | ::code-box{header="Core Structure" type="css" copy} 103 | ```css 104 | .avatar { 105 | @apply flex items-center justify-center overflow-hidden border-2 border-black; 106 | } 107 | 108 | .avatar img { 109 | @apply w-full h-full object-cover; 110 | } 111 | ``` 112 | :: 113 | - Size classes: 114 | ::code-box{header="Size Classes" type="css" copy} 115 | ```css 116 | .small { @apply w-8 h-8; } 117 | .medium { @apply w-12 h-12; } 118 | .large { @apply w-16 h-16; } 119 | .xlarge { @apply w-24 h-24; } 120 | ``` 121 | :: 122 | - Shape classes: 123 | ::code-box{header="Shape Classes" type="css" copy} 124 | ```css 125 | .circular { @apply rounded-full; } 126 | .rounded { @apply rounded-lg; } 127 | .square { @apply rounded-none; } 128 | ``` 129 | :: 130 | 131 | ::doc-topic 132 | #title 133 | ## Features 134 | #description 135 | - Multiple size options 136 | - Customizable shapes 137 | - Fallback content for missing images 138 | - Border styling 139 | - Responsive design 140 | :: 141 | 142 | ::doc-topic 143 | #title 144 | ## Dependencies 145 | #description 146 | - Tailwind CSS for styling 147 | :: 148 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-badge.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Badge Component 4 | #description 5 | A customizable badge component with support for icons and different severity styles. 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-badge{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | ::doc-topic 23 | #description 24 | ### With Icon 25 | :: 26 | 27 | ::paper-show-badge{type="icon"} 28 | #code 29 | ```html 30 | 36 | ``` 37 | :: 38 | 39 | ::doc-topic 40 | #description 41 | All Variants 42 | :: 43 | ::paper-show-badge{type="all"} 44 | #code 45 | ```html 46 | 62 | ``` 63 | :: 64 | 65 | ::doc-topic 66 | #title 67 | ## Props 68 | :: 69 | ::doc-table 70 | --- 71 | headers: ['Prop', 'Type', 'Required', 'Description'] 72 | rows: 73 | - - 'label' 74 | - 'string' 75 | - 'Yes' 76 | - 'Text displayed inside the badge' 77 | - - 'icon' 78 | - 'string' 79 | - 'No' 80 | - 'Icon name (requires PUIcon component)' 81 | - - 'severity' 82 | - 'primary | secondary | ghost' 83 | - 'No' 84 | - 'Badge color variant (default: primary)' 85 | --- 86 | :: 87 | ::doc-topic 88 | #title 89 | ## Severity Variants 90 | :: 91 | ::doc-table 92 | --- 93 | headers: ['Variant', 'Classes', 'Description'] 94 | rows: 95 | - - 'Primary' 96 | - 'border-primary-light-500 bg-primary-light-500 text-primary-dark-50' 97 | - 'Solid badge with primary colors (Default)' 98 | - - 'Secondary' 99 | - 'border-primary-light-200 bg-primary-light-200 text-primary-light-500' 100 | - 'Subtle badge with secondary colors' 101 | - - 'Ghost' 102 | - 'bg-transparent text-primary-light-500' 103 | - 'Transparent background with text and border' 104 | --- 105 | :: 106 | 107 | ::doc-topic 108 | #title 109 | ## Styling 110 | #description 111 | - Uses font-patrick font family class 112 | - Base styles applied with Tailwind-like utilities: 113 | ::code-box{header="Advanced Customization Example" type="css" copy} 114 | ```css 115 | .pu-badge--default { 116 | @apply w-fit text-xs p-1 rounded-lg flex justify-between gap-2 items-center border-2; 117 | } 118 | ``` 119 | :: 120 | :: 121 | ::doc-topic 122 | #description 123 | - Colors are dynamically applied based on severity prop 124 | - Customizable through CSS variables or overriding the style classes 125 | ::doc-topic 126 | #title 127 | ## Dependencies 128 | #description 129 | - Requires `PUIcon` component for icon display 130 | - Uses Tailwind CSS (or compatible utility framework) for styling 131 | :: -------------------------------------------------------------------------------- /docs/content/docs/components/pu-button-icon.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Button-Icon Component 4 | #description 5 | A compact icon button component with multiple styling variants and sizes 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-button-icon{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### Different Flavors 26 | :: 27 | ::paper-show-button-icon{type="flavors"} 28 | #code 29 | ```html 30 | 37 | ``` 38 | :: 39 | 40 | ::doc-topic 41 | #description 42 | ### Size Variations 43 | :: 44 | ::paper-show-button-icon{type="sizes"} 45 | #code 46 | ```html 47 | 54 | ``` 55 | :: 56 | 57 | ::doc-topic 58 | #description 59 | ### Shape Options 60 | :: 61 | ::paper-show-button-icon{type="shapes"} 62 | #code 63 | ```html 64 | 70 | ``` 71 | :: 72 | 73 | ::doc-topic 74 | #title 75 | ## Props 76 | :: 77 | ::doc-table 78 | --- 79 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 80 | rows: 81 | - - 'name' 82 | - 'string' 83 | - 'Yes' 84 | - '-' 85 | - 'Icon name from PUIcon collection' 86 | - - 'disabled' 87 | - 'boolean' 88 | - 'No' 89 | - 'false' 90 | - 'Disables the button' 91 | - - 'flavor' 92 | - 'normal | outlined | ghost' 93 | - 'No' 94 | - 'normal' 95 | - 'Visual style variant' 96 | - - 'shape' 97 | - 'rounded | circle' 98 | - 'No' 99 | - 'circle' 100 | - 'Button shape' 101 | - - 'size' 102 | - 'small | medium | large' 103 | - 'No' 104 | - 'medium' 105 | - 'Button size' 106 | - - 'customClass' 107 | - 'string' 108 | - 'No' 109 | - "''" 110 | - 'Additional CSS classes' 111 | --- 112 | :: 113 | 114 | ::doc-topic 115 | #title 116 | ## Styling 117 | #description 118 | - Base styling with Tailwind: 119 | ::code-box{header="Core Structure" type="css" copy} 120 | ```css 121 | .pu-button-icon { 122 | @apply p-2 shadow-md transition duration-200 ease-in-out 123 | flex justify-center items-center; 124 | } 125 | ``` 126 | :: 127 | - Flavor variants: 128 | ::code-box{header="Flavor Styles" type="css" copy} 129 | ```css 130 | .pu-button-icon--normal { 131 | @apply bg-primary-light-500 border-2 rounded-lg text-primary-light-50; 132 | } 133 | 134 | .pu-button-icon--outlined { 135 | @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500; 136 | } 137 | 138 | .pu-button-icon--ghost { 139 | @apply bg-transparent border-2 text-primary-light-500 border-transparent; 140 | } 141 | ``` 142 | :: 143 | 144 | ::doc-topic 145 | #title 146 | ## Interactive States 147 | #description 148 | - Hover effect: 149 | ::code-box{header="Hover State" type="css" copy} 150 | ```css 151 | .pu-button-icon:not(:disabled):hover { 152 | @apply shadow-primary-light-500/50 font-bold; 153 | } 154 | ``` 155 | :: 156 | - Disabled state: 157 | ::code-box{header="Disabled State" type="css" copy} 158 | ```css 159 | .pu-button-icon--disabled { 160 | @apply opacity-50 cursor-not-allowed; 161 | } 162 | ``` 163 | :: -------------------------------------------------------------------------------- /docs/content/docs/components/pu-button.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Button Component 4 | #description 5 | A customizable button component with multiple variants, icons, and interactive states. 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-button{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | ::doc-topic 23 | #description 24 | ### With Icons 25 | :: 26 | ::paper-show-button{type="with-icons"} 27 | #code 28 | ```html 29 | 37 | ``` 38 | :: 39 | ::doc-topic 40 | #description 41 | All Variants 42 | :: 43 | ::paper-show-button{type="all-variants"} 44 | #code 45 | ```html 46 | 63 | ``` 64 | :: 65 | ::doc-topic 66 | #title 67 | ## Props 68 | :: 69 | ::doc-table 70 | --- 71 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 72 | rows: 73 | - - 'disabled' 74 | - 'boolean' 75 | - 'No' 76 | - 'false' 77 | - 'Disables interactive state' 78 | - - 'flavor' 79 | - 'normal | outlined | ghost' 80 | - 'No' 81 | - 'normal' 82 | - 'Visual style variant' 83 | - - 'shape' 84 | - 'rounded | circle' 85 | - 'No' 86 | - 'rounded' 87 | - 'Border radius style' 88 | - - 'size' 89 | - 'small | medium | large' 90 | - 'No' 91 | - 'medium' 92 | - 'Button dimensions' 93 | - - 'customClass' 94 | - 'string' 95 | - 'No' 96 | - "''" 97 | - 'Additional CSS classes' 98 | - - 'iconLeft' 99 | - 'string' 100 | - 'No' 101 | - 'undefined' 102 | - 'Left icon name' 103 | - - 'iconRight' 104 | - 'string' 105 | - 'No' 106 | - 'undefined' 107 | - 'Right icon name' 108 | --- 109 | :: 110 | 111 | ::doc-topic 112 | #title 113 | ## Flavor Variants 114 | :: 115 | ::doc-table 116 | --- 117 | headers: ['Variant', 'Classes', 'Description'] 118 | rows: 119 | - - 'normal' 120 | - '`pu-button--normal`' 121 | - 'Solid background with white text (Default)' 122 | - - 'outlined' 123 | - '`pu-button--outlined`' 124 | - 'Transparent background with border' 125 | - - 'ghost' 126 | - '`pu-button--ghost`' 127 | - 'Minimal style with no background/border' 128 | --- 129 | :: 130 | 131 | ::doc-topic 132 | #title 133 | ## Size Variants 134 | :: 135 | ::doc-table 136 | --- 137 | headers: ['Size', 'Classes', 'Description'] 138 | rows: 139 | - - 'small' 140 | - '`pu-button--small`' 141 | - 'Compact padding: px-2 py-1' 142 | - - 'medium' 143 | - '`pu-button--medium`' 144 | - 'Standard padding: px-4 py-2 (Default)' 145 | - - 'large' 146 | - '`pu-button--large`' 147 | - 'Large padding: px-6 py-3' 148 | --- 149 | :: 150 | 151 | ::doc-topic 152 | #title 153 | ## Shape Variants 154 | :: 155 | ::doc-table 156 | --- 157 | headers: ['Shape', 'Classes', 'Description'] 158 | rows: 159 | - - 'rounded' 160 | - '`pu-button--rounded`' 161 | - 'Standard border radius (Default)' 162 | - - 'circle' 163 | - '`pu-button--circle`' 164 | - 'Fully rounded edges' 165 | --- 166 | :: 167 | 168 | ::doc-topic 169 | #title 170 | ## Styling 171 | #description 172 | - Uses `font-patrick` font family class 173 | - Base styles applied with utility-first CSS: 174 | ::code-box{header="Base Styles" type="css" copy=""} 175 | ```css 176 | .pu-button { 177 | @apply py-2 shadow-md transition duration-200 ease-in-out flex justify-center gap-1; 178 | } 179 | .pu-button:not(:disabled):hover { 180 | @apply shadow-primary-light-500/50 font-bold; 181 | } 182 | ``` 183 | :: 184 | :: 185 | ::doc-topic 186 | #description 187 | - Icon colors adapt automatically to flavor 188 | - State management for disabled/hover states 189 | - Customizable through CSS classes or style overrides 190 | 191 | ::doc-topic 192 | #title 193 | ## Dependencies 194 | #description 195 | - Requires `PUIcon` component for icon support 196 | - Built with Tailwind CSS utility classes 197 | :: 198 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-checkbox.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Checkbox Component 4 | #description 5 | A customizable checkbox component with multiple states and interactive features 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-checkbox{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### With Label 26 | :: 27 | ::paper-show-checkbox{type="with-label"} 28 | #code 29 | ```html 30 | 33 | ``` 34 | :: 35 | 36 | ::doc-topic 37 | #description 38 | ### Strikethrough Effect 39 | :: 40 | ::paper-show-checkbox{type="strike"} 41 | #code 42 | ```html 43 | 50 | ``` 51 | :: 52 | 53 | ::doc-topic 54 | #description 55 | ### Different Flavors 56 | :: 57 | ::paper-show-checkbox{type="flavors"} 58 | #code 59 | ```html 60 | 66 | ``` 67 | :: 68 | 69 | ::doc-topic 70 | #title 71 | ## Props 72 | :: 73 | ::doc-table 74 | --- 75 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 76 | rows: 77 | - - 'modelValue' 78 | - 'boolean' 79 | - 'Yes' 80 | - '-' 81 | - 'Current state (v-model support)' 82 | - - 'disabled' 83 | - 'boolean' 84 | - 'No' 85 | - 'false' 86 | - 'Disables interaction' 87 | - - 'label' 88 | - 'string' 89 | - 'No' 90 | - "''" 91 | - 'Checkbox label text' 92 | - - 'flavor' 93 | - 'normal | outlined' 94 | - 'No' 95 | - 'normal' 96 | - 'Visual style variant' 97 | - - 'strikeOnFalse' 98 | - 'boolean' 99 | - 'No' 100 | - 'false' 101 | - 'Adds strikethrough to label when unchecked' 102 | --- 103 | :: 104 | 105 | ::doc-topic 106 | #title 107 | ## Events 108 | :: 109 | ::doc-table 110 | --- 111 | headers: ['Event', 'Description', 'Payload'] 112 | rows: 113 | - - 'update:modelValue' 114 | - 'Emits when state changes' 115 | - 'boolean' 116 | - - 'checked' 117 | - 'Emits when checked' 118 | - '-' 119 | - - 'unchecked' 120 | - 'Emits when state unchecked' 121 | - '-' 122 | --- 123 | :: 124 | 125 | ::doc-topic 126 | #title 127 | ## Styling 128 | #description 129 | - Base styling with Tailwind: 130 | ::code-box{header="Core Structure" type="css" copy} 131 | ```css 132 | .pu-checkbox { 133 | @apply flex items-center justify-center w-5 h-5 134 | border-2 border-primary-light-500 rounded 135 | transition-all; 136 | } 137 | ``` 138 | :: 139 | - Interactive states: 140 | ::code-box{header="Interactive States" type="css" copy} 141 | ```css 142 | .active\:animate-bounce:active { 143 | animation: bounce 0.3s ease-in-out; 144 | } 145 | 146 | @keyframes bounce { 147 | 0%, 100% { transform: scale(1); } 148 | 50% { transform: scale(1.2); } 149 | } 150 | ``` 151 | :: 152 | 153 | ::doc-topic 154 | #title 155 | ## Accessibility Features 156 | #description 157 | - Clickable label area 158 | - Visual feedback on interaction 159 | - Clear disabled state styling 160 | - Keyboard focusable 161 | :: 162 | 163 | ::doc-topic 164 | #title 165 | ## Dependencies 166 | #description 167 | - `PUIcon` component for checkmark display 168 | - Tailwind CSS for styling 169 | - Vue 3 Composition API 170 | :: 171 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-datepicker.md: -------------------------------------------------------------------------------- 1 | 2 | ::doc-topic 3 | #title 4 | PU-DatePicker Component 5 | #description 6 | A customizable and accessible date picker component with support for multiple locales and date restrictions 7 | :: 8 | 9 | ::doc-topic 10 | #title 11 | Usage 12 | #description 13 | Basic Usage 14 | :: 15 | ::paper-show-datepicker{type="default"} 16 | #code 17 | ```html 18 | 21 | 22 | 25 | ``` 26 | :: 27 | 28 | ::doc-topic 29 | #description 30 | ### Always Open Mode 31 | :: 32 | ::paper-show-datepicker{type="always-open"} 33 | #code 34 | ```html 35 | 38 | 39 | 42 | ``` 43 | :: 44 | 45 | ::doc-topic 46 | #description 47 | ### With Disabled Dates 48 | :: 49 | ::paper-show-datepicker{type="disabled-dates"} 50 | #code 51 | ```html 52 | 58 | 59 | 62 | ``` 63 | :: 64 | 65 | ::doc-topic 66 | #description 67 | ### With Date Range Restriction 68 | :: 69 | ::paper-show-datepicker{type="disabled-range"} 70 | #code 71 | ```html 72 | 78 | 79 | 82 | ``` 83 | :: 84 | 85 | ::doc-topic 86 | #title 87 | ## Props 88 | :: 89 | ::doc-table 90 | --- 91 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 92 | rows: 93 | - - 'modelValue' 94 | - 'string | null' 95 | - 'Yes' 96 | - '-' 97 | - 'Selected date in YYYY-MM-DD format' 98 | - - 'alwaysOpen' 99 | - 'boolean' 100 | - 'No' 101 | - 'false' 102 | - 'Keeps the date picker always visible' 103 | - - 'locale' 104 | - 'en-US | pt-BR' 105 | - 'No' 106 | - 'en-US' 107 | - 'Locale for month and day names' 108 | - - 'disabledDates' 109 | - 'string[]' 110 | - 'No' 111 | - '[]' 112 | - 'Array of disabled dates in YYYY-MM-DD format' 113 | - - 'disabledRange' 114 | - '{ start: string, end: string }' 115 | - 'No' 116 | - 'undefined' 117 | - 'Range of disabled dates' 118 | - - 'disabled' 119 | - 'boolean' 120 | - 'No' 121 | - 'false' 122 | - 'Disable input' 123 | --- 124 | :: 125 | 126 | ::doc-topic 127 | #title 128 | ## Events 129 | :: 130 | ::doc-table 131 | --- 132 | headers: ['Event', 'Description', 'Payload'] 133 | rows: 134 | - - 'update:modelValue' 135 | - 'Emits when a date is selected' 136 | - 'string | null' 137 | --- 138 | :: 139 | 140 | ::doc-topic 141 | #title 142 | ## Styling 143 | #description 144 | - Base styling with Tailwind: 145 | ::code-box{header="Core Structure" type="css" copy} 146 | ```css 147 | .datepicker-input { 148 | @apply w-full p-2 border-2 border-primary-light-500 149 | rounded-lg shadow-md shadow-primary-light-500/20; 150 | } 151 | 152 | .datepicker-header { 153 | @apply flex justify-between items-center font-bold mb-2; 154 | } 155 | 156 | .datepicker-days button { 157 | @apply border-none bg-none p-1 cursor-pointer rounded; 158 | } 159 | 160 | .datepicker-days button.selected { 161 | @apply bg-primary-light-500 text-white; 162 | } 163 | ``` 164 | :: 165 | - Customizable classes: 166 | ::code-box{header="Custom Classes" type="css" copy} 167 | ```css 168 | .datepicker-container { 169 | @apply bg-white p-4 rounded-lg shadow-lg; 170 | } 171 | 172 | .datepicker-weekdays { 173 | @apply grid grid-cols-7 text-center font-medium; 174 | } 175 | ``` 176 | :: 177 | 178 | ::doc-topic 179 | #title 180 | ## Features 181 | #description 182 | - Multiple locale support (en-US, pt-BR) 183 | - Disabled dates and date ranges 184 | - Keyboard navigation 185 | - Accessible markup 186 | - Customizable styling 187 | - Always open mode 188 | :: 189 | 190 | ::doc-topic 191 | #title 192 | ## Dependencies 193 | #description 194 | - `PUTooltip` for popup positioning 195 | - `PUIcon` for navigation arrows 196 | - Tailwind CSS for styling 197 | :: 198 | 199 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-input.md: -------------------------------------------------------------------------------- 1 | 2 | ::doc-topic 3 | #title 4 | PU-Input Component 5 | #description 6 | A customizable input component with icon support and enhanced interaction features 7 | :: 8 | 9 | ::doc-topic 10 | #title 11 | Usage 12 | #description 13 | Basic Usage 14 | :: 15 | ::paper-show-input{type="default"} 16 | #code 17 | ```html 18 | 24 | ``` 25 | :: 26 | 27 | ::doc-topic 28 | #description 29 | ### With Icons 30 | :: 31 | ::paper-show-input{type="with-icons"} 32 | #code 33 | ```html 34 | 42 | ``` 43 | :: 44 | 45 | ::doc-topic 46 | #description 47 | ### With Label 48 | :: 49 | ::paper-show-input{type="with-label"} 50 | #code 51 | ```html 52 | 64 | ``` 65 | :: 66 | 67 | ::doc-topic 68 | #description 69 | ### Disabled State 70 | :: 71 | ::paper-show-input{type="disabled"} 72 | #code 73 | ```html 74 | 81 | ``` 82 | :: 83 | 84 | ::doc-topic 85 | #title 86 | ## Props 87 | :: 88 | ::doc-table 89 | --- 90 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 91 | rows: 92 | - - 'modelValue' 93 | - 'string | number | null' 94 | - 'Yes' 95 | - '-' 96 | - 'Input value (v-model support)' 97 | - - 'disabled' 98 | - 'boolean' 99 | - 'No' 100 | - 'false' 101 | - 'Disables the input field' 102 | - - 'placeholder' 103 | - 'string' 104 | - 'No' 105 | - "''" 106 | - 'Input placeholder text' 107 | - - 'id' 108 | - 'string' 109 | - 'No' 110 | - 'undefined' 111 | - 'Unique identifier for the input' 112 | - - 'iconLeft' 113 | - 'string' 114 | - 'No' 115 | - 'undefined' 116 | - 'Left icon name' 117 | - - 'iconRight' 118 | - 'string' 119 | - 'No' 120 | - 'undefined' 121 | - 'Right icon name' 122 | --- 123 | :: 124 | 125 | ::doc-topic 126 | #title 127 | ## Events 128 | :: 129 | ::doc-table 130 | --- 131 | headers: ['Event', 'Description', 'Payload'] 132 | rows: 133 | - - 'update:modelValue' 134 | - 'Emits on input change, blur or Enter key' 135 | - 'string | number | null' 136 | - - 'blur' 137 | - 'Triggers on field blur' 138 | - 'Event' 139 | - - 'keydown.enter' 140 | - 'Triggers on Enter key press' 141 | - 'KeyboardEvent' 142 | --- 143 | :: 144 | 145 | ::doc-topic 146 | #title 147 | ## Styling 148 | #description 149 | - Uses `font-patrick` font family 150 | - Base styles applied with Tailwind utilities: 151 | ::code-box{header="Core Styles" type="css" copy} 152 | ```css 153 | .pu-input { 154 | @apply relative flex items-center gap-2 w-full p-2; 155 | @apply border-2 border-primary-light-500 rounded-lg; 156 | @apply transition-all duration-150 ease-in-out; 157 | } 158 | 159 | .pu-input--default { 160 | @apply text-gray-800 text-base w-full; 161 | @apply focus:outline-none; 162 | } 163 | ``` 164 | :: 165 | :: 166 | 167 | ::doc-topic 168 | #title 169 | ### Interactive States 170 | :: 171 | ::doc-topic 172 | #description 173 | - Focus state increases border width: 174 | :: 175 | ::code-box{header="Core Styles" type="css" copy} 176 | ```css 177 | .pu-input:focus { 178 | @apply border-8; 179 | } 180 | ``` 181 | :: 182 | ::doc-topic 183 | #description 184 | Custom placeholder styling: 185 | :: 186 | ::code-box{header="Core Styles" type="css" copy} 187 | ```css 188 | .pu-input::placeholder { 189 | @apply text-primary-light-300 text-sm; 190 | } 191 | ``` 192 | :: 193 | ::doc-topic 194 | #title 195 | ## Dependencies 196 | #description 197 | - Requires `PUIcon` component for icon display 198 | - Built with Tailwind CSS utility classes 199 | :: -------------------------------------------------------------------------------- /docs/content/docs/components/pu-modal.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Modal Component 4 | #description 5 | A flexible modal dialog component with transition effects and slot-based content 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-modal{type="default"} 15 | #code 16 | ```html 17 | 23 | 24 | 27 | ``` 28 | :: 29 | 30 | ::doc-topic 31 | #description 32 | ### Custom Content 33 | :: 34 | ::paper-show-modal{type="custom"} 35 | #code 36 | ```html 37 | 58 | 59 | 62 | ``` 63 | :: 64 | 65 | ::doc-topic 66 | #title 67 | ## Composable API 68 | :: 69 | ::doc-table 70 | --- 71 | headers: ['Method/State', 'Type', 'Description'] 72 | rows: 73 | - - 'show()' 74 | - 'function' 75 | - 'Opens the modal' 76 | - - 'hide()' 77 | - 'function' 78 | - 'Closes the modal' 79 | - - 'isVisible' 80 | - 'boolean (ref)' 81 | - 'Reactive visibility state' 82 | --- 83 | :: 84 | 85 | ::doc-topic 86 | #title 87 | ## Slots 88 | :: 89 | ::doc-table 90 | --- 91 | headers: ['Slot', 'Description', 'Default Content'] 92 | rows: 93 | - - 'header' 94 | - 'Modal header section' 95 | - 'Default Title text' 96 | - - 'content' 97 | - 'Main modal content' 98 | - 'Default content text' 99 | - - 'footer' 100 | - 'Modal footer section' 101 | - 'Close button' 102 | --- 103 | :: 104 | 105 | ::doc-topic 106 | #title 107 | ## Styling 108 | #description 109 | - Base styling with Tailwind: 110 | ::code-box{header="Core Structure" type="css" copy} 111 | ```css 112 | .modal-overlay { 113 | @apply fixed inset-0 flex items-center justify-center bg-white/75 z-50; 114 | } 115 | 116 | .modal-container { 117 | @apply bg-white rounded-xl p-6 shadow-lg max-w-md border-2 border-primary-light-500; 118 | } 119 | ``` 120 | :: 121 | - Transition effects: 122 | ::code-box{header="Fade Animation" type="css" copy} 123 | ```css 124 | .fade-modal-enter-active, 125 | .fade-modal-leave-active { 126 | @apply transition-opacity duration-300; 127 | } 128 | 129 | .fade-modal-enter-from, 130 | .fade-modal-leave-to { 131 | @apply opacity-0; 132 | } 133 | ``` 134 | :: 135 | 136 | ::doc-topic 137 | #title 138 | ## Interaction Features 139 | #description 140 | - Click outside to close (backdrop click) 141 | - Default close button in footer 142 | - Escape key support (if implemented) 143 | - Smooth fade transitions 144 | :: 145 | 146 | ::doc-topic 147 | #title 148 | ## Dependencies 149 | #description 150 | - `useModal()` composable for state management 151 | :: 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-progress.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Progress Component 4 | #description 5 | A versatile progress indicator component with multiple display modes and size options 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-progress{type="default"} 15 | #code 16 | ```html 17 | 26 | ``` 27 | :: 28 | 29 | ::doc-topic 30 | #description 31 | ### Radial Mode 32 | :: 33 | ::paper-show-progress{type="radial"} 34 | #code 35 | ```html 36 | 39 | ``` 40 | :: 41 | 42 | ::doc-topic 43 | #description 44 | ### Vertical Mode 45 | :: 46 | ::paper-show-progress{type="vertical"} 47 | #code 48 | ```html 49 | 52 | ``` 53 | :: 54 | 55 | ::doc-topic 56 | #title 57 | ## Props 58 | :: 59 | ::doc-table 60 | --- 61 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 62 | rows: 63 | - - 'mode' 64 | - 'radial | horizontal | vertical' 65 | - 'Yes' 66 | - '-' 67 | - 'Display mode of the progress indicator' 68 | - - 'progress' 69 | - 'number' 70 | - 'Yes' 71 | - '-' 72 | - 'Progress value (0 to 100)' 73 | - - 'size' 74 | - 'small | medium | large' 75 | - 'No' 76 | - 'medium' 77 | - 'Size of the progress indicator' 78 | --- 79 | :: 80 | 81 | ::doc-topic 82 | #title 83 | ## Styling 84 | #description 85 | - Base styling with Tailwind: 86 | ::code-box{header="Core Structure" type="css" copy} 87 | ```css 88 | /* Radial Mode */ 89 | .radial-progress { 90 | @apply transform -rotate-90; 91 | } 92 | 93 | /* Horizontal Mode */ 94 | .horizontal-progress { 95 | @apply w-full bg-gray-200 rounded-lg overflow-hidden; 96 | } 97 | 98 | /* Vertical Mode */ 99 | .vertical-progress { 100 | @apply bg-gray-200 rounded-lg overflow-hidden; 101 | } 102 | ``` 103 | :: 104 | - Progress bar colors: 105 | ::code-box{header="Progress Colors" type="css" copy} 106 | ```css 107 | .progress-bar { 108 | @apply bg-primary-light-500 transition-all duration-300; 109 | } 110 | ``` 111 | :: 112 | 113 | ::doc-topic 114 | #title 115 | ## Features 116 | #description 117 | - Three display modes: radial, horizontal, and vertical 118 | - Smooth progress transitions 119 | - Multiple size options 120 | - Accessible markup 121 | - Customizable styling 122 | :: 123 | 124 | ::doc-topic 125 | #title 126 | ## Dependencies 127 | #description 128 | - Tailwind CSS for styling 129 | :: 130 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-radio.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PURadio Component 4 | #description 5 | A customizable radio button component with multiple variants, disabled states, and grouped options. 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-radio{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### With Multiple Options 26 | :: 27 | ::paper-show-radio{type="with-options"} 28 | #code 29 | ```html 30 | 40 | ``` 41 | :: 42 | 43 | ::doc-topic 44 | #description 45 | All Variants 46 | :: 47 | ::paper-show-radio{type="all-variants"} 48 | #code 49 | ```html 50 | 58 | ``` 59 | :: 60 | 61 | ::doc-topic 62 | #title 63 | ## Props 64 | :: 65 | ::doc-table 66 | --- 67 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 68 | rows: 69 | - - 'modelValue' 70 | - 'string | number | boolean' 71 | - 'Yes' 72 | - '-' 73 | - 'The current selected value' 74 | - - 'options' 75 | - 'Array<{ label: string, value: string | number | boolean }>' 76 | - 'No' 77 | - 'undefined' 78 | - 'List of selectable radio options' 79 | - - 'label' 80 | - 'string' 81 | - 'No' 82 | - "''" 83 | - 'Label text for the radio button' 84 | - - 'value' 85 | - 'string | number | boolean' 86 | - 'No' 87 | - 'undefined' 88 | - 'The value of the radio button when used outside options' 89 | - - 'disabled' 90 | - 'boolean' 91 | - 'No' 92 | - 'false' 93 | - 'Disables interaction with the component' 94 | - - 'flavor' 95 | - 'normal | outlined | box' 96 | - 'No' 97 | - 'normal' 98 | - 'Styling variant for the radio button' 99 | - - 'name' 100 | - 'string' 101 | - 'No' 102 | - 'radio-group' 103 | - 'Name attribute for the input group' 104 | --- 105 | :: 106 | 107 | ::doc-topic 108 | #title 109 | ## Flavor Variants 110 | :: 111 | ::doc-table 112 | --- 113 | headers: ['Variant', 'Classes', 'Description'] 114 | rows: 115 | - - 'normal' 116 | - '`pu-radio--normal`' 117 | - 'Standard circular radio button (Default)' 118 | - - 'outlined' 119 | - '`pu-radio--outlined`' 120 | - 'Outlined style with a border and active state highlight' 121 | - - 'box' 122 | - '`pu-radio--box`' 123 | - 'Box-style radio with bold selection' 124 | --- 125 | :: 126 | 127 | ::doc-topic 128 | #title 129 | ## Styling 130 | #description 131 | - Uses `font-patrick` font family class 132 | - Utility-first CSS applied for flexible styling: 133 | ::code-box{header="Base Styles" type="css" copy=""} 134 | ```css 135 | .pu-radio { 136 | @apply flex items-center gap-2 group transition-all; 137 | } 138 | .pu-radio:not(:disabled):hover { 139 | @apply opacity-80; 140 | } 141 | ``` 142 | :: 143 | :: 144 | ::doc-topic 145 | #description 146 | - Hover effects apply when not disabled 147 | - Borders and backgrounds adjust dynamically based on the selected state 148 | - Fully customizable through CSS classes 149 | 150 | ::doc-topic 151 | #title 152 | ## Dependencies 153 | #description 154 | - Built with Tailwind CSS utility classes 155 | - Fully compatible with Vue's `v-model` 156 | :: 157 | 158 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-select.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Select Component 4 | #description 5 | A customizable select dropdown component with custom styling and v-model support 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-select{type="default"} 15 | #code 16 | ```html 17 | 23 | ``` 24 | :: 25 | 26 | ::doc-topic 27 | #description 28 | ### With Placeholder 29 | :: 30 | ::paper-show-select{type="placeholder"} 31 | #code 32 | ```html 33 | 40 | ``` 41 | :: 42 | 43 | ::doc-topic 44 | #description 45 | ### With Label 46 | :: 47 | ::paper-show-select{type="with-label"} 48 | #code 49 | ```html 50 | 62 | ``` 63 | :: 64 | 65 | ::doc-topic 66 | #description 67 | ### Different Sizes 68 | :: 69 | ::paper-show-select{type="sizes"} 70 | #code 71 | ```html 72 | 78 | ``` 79 | :: 80 | 81 | ::doc-topic 82 | #description 83 | ### Preselected Option 84 | :: 85 | ::paper-show-select{type="example-option"} 86 | #code 87 | ```html 88 | 95 | ``` 96 | :: 97 | 98 | ::doc-topic 99 | #title 100 | ## Props 101 | :: 102 | ::doc-table 103 | --- 104 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 105 | rows: 106 | - - 'options' 107 | - 'Array<{value: string | number, label: string}>' 108 | - 'Yes' 109 | - '-' 110 | - 'Available options in dropdown' 111 | - - 'modelValue' 112 | - 'string | number | null' 113 | - 'Yes' 114 | - '-' 115 | - 'Selected value (v-model support)' 116 | - - 'placeholder' 117 | - 'string' 118 | - 'No' 119 | - "'Select'" 120 | - 'Placeholder text when no option is selected' 121 | - - 'size' 122 | - "'small' | 'large'" 123 | - 'No' 124 | - '-' 125 | - 'Control padding size' 126 | - - 'id' 127 | - 'string' 128 | - 'No' 129 | - 'undefined' 130 | - 'HTML id attribute' 131 | - - 'exampleOption' 132 | - '{value: string | number, label: string}' 133 | - 'No' 134 | - 'undefined' 135 | - 'Example option for documentation purposes' 136 | --- 137 | :: 138 | 139 | ::doc-topic 140 | #title 141 | ## Events 142 | :: 143 | ::doc-table 144 | --- 145 | headers: ['Event', 'Description', 'Payload'] 146 | rows: 147 | - - 'update:modelValue' 148 | - 'Emits when selection changes' 149 | - 'string | number | null' 150 | - - 'change' 151 | - 'Native select change event' 152 | - 'Event' 153 | --- 154 | :: 155 | 156 | ::doc-topic 157 | #title 158 | ## Styling 159 | #description 160 | - Custom arrow using PUIcon component 161 | - Focus ring styling: 162 | ::code-box{header="Focus State" type="css" copy} 163 | ```css 164 | .ring-2.ring-primary-light-500 { 165 | @apply focus:outline-none focus:ring-2 focus:ring-primary-light-500; 166 | } 167 | ``` 168 | :: 169 | - Hover states for options: 170 | ::code-box{header="Option Hover" type="css" copy} 171 | ```css 172 | .hover\:bg-primary-light-500:hover { 173 | @apply bg-primary-light-500 text-white; 174 | } 175 | ``` 176 | :: 177 | 178 | ::doc-topic 179 | #title 180 | ## Accessibility Features 181 | #description 182 | - Proper label association using `id` prop 183 | - Keyboard navigation support 184 | - Screen reader friendly markup 185 | - Visible focus states 186 | :: 187 | 188 | ::doc-topic 189 | #title 190 | ## Dependencies 191 | #description 192 | - `PUIcon` for custom arrow display 193 | - Tailwind CSS for styling 194 | - Vue 3 Composition API 195 | :: 196 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-switch.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PUSwitch Component 4 | #description 5 | A customizable switch (toggle) component with multiple variants, disabled states, and different widths. 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-switch{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### Mid Variant 26 | :: 27 | ::paper-show-switch{type="mid"} 28 | #code 29 | ```html 30 | 33 | ``` 34 | :: 35 | 36 | ::doc-topic 37 | #description 38 | ### Disabled State 39 | :: 40 | ::paper-show-switch{type="disabled"} 41 | #code 42 | ```html 43 | 46 | ``` 47 | :: 48 | 49 | ::doc-topic 50 | #description 51 | ### Different Widths 52 | :: 53 | ::paper-show-switch{type="width-options"} 54 | #code 55 | ```html 56 | 62 | ``` 63 | :: 64 | 65 | ::doc-topic 66 | #title 67 | ## Props 68 | :: 69 | ::doc-table 70 | --- 71 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 72 | rows: 73 | - - 'modelValue' 74 | - 'boolean' 75 | - 'Yes' 76 | - '-' 77 | - 'The current state of the switch (on/off)' 78 | - - 'disabled' 79 | - 'boolean' 80 | - 'No' 81 | - 'false' 82 | - 'Disables interaction with the switch' 83 | - - 'label' 84 | - 'string' 85 | - 'No' 86 | - "''" 87 | - 'Text label displayed next to the switch' 88 | - - 'flavor' 89 | - 'normal | outlined' 90 | - 'No' 91 | - 'normal' 92 | - 'Defines the styling variant of the switch' 93 | - - 'width' 94 | - 'full | mid' 95 | - 'No' 96 | - 'full' 97 | - 'Defines the width of the switch' 98 | --- 99 | :: 100 | 101 | ::doc-topic 102 | #title 103 | ## Flavor Variants 104 | :: 105 | ::doc-table 106 | --- 107 | headers: ['Variant', 'Classes', 'Description'] 108 | rows: 109 | - - 'normal' 110 | - '`pu-switch--normal`' 111 | - 'Standard filled switch (Default)' 112 | - - 'outlined' 113 | - '`pu-switch--outlined`' 114 | - 'Switch with a border and transparent inactive state' 115 | --- 116 | :: 117 | 118 | ::doc-topic 119 | #title 120 | ## Styling 121 | #description 122 | - Uses `font-patrick` font family class 123 | - Utility-first CSS applied for flexible styling: 124 | ::code-box{header="Base Styles" type="css" copy=""} 125 | ```css 126 | .pu-switch { 127 | @apply rounded-full transition-colors duration-300; 128 | } 129 | .pu-switch-thumb { 130 | @apply absolute bg-white rounded-full shadow-sm transform transition-transform; 131 | } 132 | ``` 133 | :: 134 | :: 135 | ::doc-topic 136 | #description 137 | - Hover effects apply when not disabled 138 | - Borders and backgrounds adjust dynamically based on the active state 139 | - Fully customizable through CSS classes 140 | :: 141 | 142 | ::doc-topic 143 | #title 144 | ## Dependencies 145 | #description 146 | - Built with Tailwind CSS utility classes 147 | - Fully compatible with Vue's `v-model` 148 | :: 149 | 150 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-tag.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Tag Component 4 | #description 5 | A compact tag component for displaying labels with optional icons 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-tag{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### With Icon 26 | :: 27 | ::paper-show-tag{type="with-icon"} 28 | #code 29 | ```html 30 | 33 | ``` 34 | :: 35 | 36 | ::doc-topic 37 | #title 38 | ## Props 39 | :: 40 | ::doc-table 41 | --- 42 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 43 | rows: 44 | - - 'label' 45 | - 'string' 46 | - 'Yes' 47 | - '-' 48 | - 'Text content of the tag' 49 | - - 'icon' 50 | - 'string' 51 | - 'No' 52 | - 'undefined' 53 | - 'Optional icon name from PUIcon collection' 54 | --- 55 | :: 56 | 57 | ::doc-topic 58 | #title 59 | ## Styling 60 | #description 61 | - Base styling with Tailwind: 62 | ::code-box{header="Core Structure" type="css" copy} 63 | ```css 64 | .pu-tag--default { 65 | @apply w-fit px-2 text-sm py-1 rounded-lg; 66 | @apply flex justify-between gap-2 items-center; 67 | @apply border-2 border-primary-light-500 bg-primary-dark-50; 68 | } 69 | ``` 70 | :: 71 | - Icon styling: 72 | ::code-box{header="Icon Styles" type="css" copy} 73 | ```css 74 | .cursor-pointer { 75 | @apply hover:opacity-80 transition-opacity; 76 | } 77 | ``` 78 | :: 79 | 80 | ::doc-topic 81 | #title 82 | ## Features 83 | #description 84 | - Compact and lightweight 85 | - Optional icon support 86 | - Responsive design 87 | - Customizable through props 88 | :: 89 | 90 | ::doc-topic 91 | #title 92 | ## Dependencies 93 | #description 94 | - `PUIcon` component for icon display 95 | - Tailwind CSS for styling 96 | - Vue 3 Composition API 97 | :: 98 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-textarea.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-TextArea Component 4 | #description 5 | A customizable textarea component with enhanced interaction features 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-textarea{type="default"} 15 | #code 16 | ```html 17 | 23 | ``` 24 | :: 25 | 26 | ::doc-topic 27 | #description 28 | ### Disabled State 29 | :: 30 | ::paper-show-textarea{type="disabled"} 31 | #code 32 | ```html 33 | 40 | ``` 41 | :: 42 | 43 | ::doc-topic 44 | #description 45 | ### With Label 46 | :: 47 | ::paper-show-textarea{type="with-label"} 48 | #code 49 | ```html 50 | 60 | ``` 61 | :: 62 | 63 | ::doc-topic 64 | #title 65 | ## Props 66 | :: 67 | ::doc-table 68 | --- 69 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 70 | rows: 71 | - - 'modelValue' 72 | - 'string | number | null' 73 | - 'Yes' 74 | - '-' 75 | - 'Textarea value (v-model support)' 76 | - - 'disabled' 77 | - 'boolean' 78 | - 'No' 79 | - 'false' 80 | - 'Disables the textarea' 81 | - - 'placeholder' 82 | - 'string' 83 | - 'No' 84 | - "''" 85 | - 'Placeholder text' 86 | - - 'id' 87 | - 'string' 88 | - 'No' 89 | - 'undefined' 90 | - 'Unique identifier for the textarea' 91 | --- 92 | :: 93 | 94 | ::doc-topic 95 | #title 96 | ## Events 97 | :: 98 | ::doc-table 99 | --- 100 | headers: ['Event', 'Description', 'Payload'] 101 | rows: 102 | - - 'update:modelValue' 103 | - 'Emits on input change, blur or Enter key' 104 | - 'string | number | null' 105 | - - 'blur' 106 | - 'Triggers on field blur' 107 | - 'Event' 108 | - - 'keydown.enter' 109 | - 'Triggers on Enter key press' 110 | - 'KeyboardEvent' 111 | --- 112 | :: 113 | 114 | ::doc-topic 115 | #title 116 | ## Styling 117 | #description 118 | - Base styling with Tailwind: 119 | ::code-box{header="Core Structure" type="css" copy} 120 | ```css 121 | .pu-textarea--default { 122 | @apply w-full p-2; 123 | @apply border-2 border-primary-light-500 rounded-lg; 124 | @apply text-gray-800 text-base; 125 | @apply focus:outline-none; 126 | } 127 | ``` 128 | :: 129 | - Interactive states: 130 | ::code-box{header="Focus State" type="css" copy} 131 | ```css 132 | .focus\:outline-none:focus { 133 | @apply ring-2 ring-primary-light-500; 134 | } 135 | ``` 136 | :: 137 | 138 | ::doc-topic 139 | #title 140 | ## Features 141 | #description 142 | - v-model support 143 | - Enter key handling 144 | - Blur event integration 145 | - Accessible disabled state 146 | - Customizable placeholder 147 | :: 148 | 149 | ::doc-topic 150 | #title 151 | ## Dependencies 152 | #description 153 | - Tailwind CSS for styling 154 | - Vue 3 Composition API 155 | - Optional PULabel component for labeled inputs 156 | :: 157 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-toast.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Toast Component 4 | #description 5 | A flexible toast notification system with multiple positions and severity levels 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-toast{type="default"} 15 | #code 16 | ```html 17 | 23 | 24 | 35 | ``` 36 | :: 37 | 38 | ::doc-topic 39 | #description 40 | ### Outlined 41 | :: 42 | ::paper-show-toast{type="positions"} 43 | #code 44 | ```html 45 | 57 | 58 | 69 | 70 | ``` 71 | :: 72 | 73 | ::doc-topic 74 | #title 75 | ## Props 76 | :: 77 | ::doc-table 78 | --- 79 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 80 | rows: 81 | - - 'position' 82 | - 'top-left | top-right | bottom-left | bottom-right | center' 83 | - 'No' 84 | - 'top-right' 85 | - 'Position of toast container' 86 | --- 87 | :: 88 | 89 | ::doc-topic 90 | #title 91 | ## Toast Store API 92 | :: 93 | ::doc-table 94 | --- 95 | headers: ['Method', 'Parameters', 'Description'] 96 | rows: 97 | - - 'add' 98 | - '{ severity: string, summary: string, detail?: string, life?: number }' 99 | - 'Adds a new toast notification' 100 | - - 'remove' 101 | - 'id: string' 102 | - 'Removes a specific toast' 103 | - - 'toasts' 104 | - '-' 105 | - 'Reactive array of active toasts' 106 | --- 107 | :: 108 | 109 | ::doc-topic 110 | #title 111 | ## Styling 112 | #description 113 | - Base styling with Tailwind: 114 | ::code-box{header="Core Structure" type="css" copy} 115 | ```css 116 | .pu-toast { 117 | @apply flex items-center justify-between p-4 gap-2; 118 | @apply rounded-lg shadow-md transition-all duration-300; 119 | @apply ease-in-out border opacity-100 transform scale-100; 120 | } 121 | ``` 122 | :: 123 | - Severity variants: 124 | ::code-box{header="Severity Styles" type="css" copy} 125 | ```css 126 | .pu-toast--primary { 127 | @apply bg-primary-light-500 text-primary-light-50 border-transparent; 128 | } 129 | 130 | .pu-toast--secondary { 131 | @apply bg-white text-primary-light-500 border-primary-light-500 border-2; 132 | } 133 | ``` 134 | :: 135 | 136 | ::doc-topic 137 | #title 138 | ## Transition Effects 139 | #description 140 | - Smooth enter/leave animations: 141 | ::code-box{header="Transition Styles" type="css" copy} 142 | ```css 143 | .toast-transition-enter-active, 144 | .toast-transition-leave-active { 145 | @apply transition-all duration-300; 146 | } 147 | 148 | .toast-transition-enter-from { 149 | @apply opacity-0 transform translate-y-4; 150 | } 151 | 152 | .toast-transition-leave-to { 153 | @apply opacity-0 transform translate-y-4; 154 | } 155 | ``` 156 | :: 157 | 158 | ::doc-topic 159 | #title 160 | ## Features 161 | #description 162 | - Multiple display positions 163 | - Customizable duration 164 | - Interactive close button 165 | - Smooth transitions 166 | - Severity level styling 167 | :: 168 | 169 | ::doc-topic 170 | #title 171 | ## Dependencies 172 | #description 173 | - `toastStore` for state management 174 | - `PUIcon` component for icons 175 | - Tailwind CSS for styling 176 | - Vue Transition component 177 | :: 178 | -------------------------------------------------------------------------------- /docs/content/docs/components/pu-video.md: -------------------------------------------------------------------------------- 1 | ::doc-topic 2 | #title 3 | PU-Video Component 4 | #description 5 | A fully-featured video player component with playback controls, volume adjustment, and fullscreen support 6 | :: 7 | 8 | ::doc-topic 9 | #title 10 | Usage 11 | #description 12 | Basic Usage 13 | :: 14 | ::paper-show-video{type="default"} 15 | #code 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### With Poster Image 26 | :: 27 | ::paper-show-video{type="poster"} 28 | #code 29 | ```html 30 | 33 | ``` 34 | :: 35 | 36 | ::doc-topic 37 | #title 38 | ## Props 39 | :: 40 | ::doc-table 41 | --- 42 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 43 | rows: 44 | - - 'src' 45 | - 'string' 46 | - 'Yes' 47 | - '-' 48 | - 'URL of the video file' 49 | - - 'poster' 50 | - 'string' 51 | - 'No' 52 | - 'undefined' 53 | - 'URL of the poster image' 54 | --- 55 | :: 56 | 57 | ::doc-topic 58 | #title 59 | ## Features 60 | #description 61 | - Play/Pause controls 62 | - Seek bar with current time and duration 63 | - Volume control with mute toggle 64 | - Fullscreen mode 65 | - Keyboard shortcuts support 66 | - Responsive design 67 | :: 68 | 69 | ::doc-topic 70 | #title 71 | ## Styling 72 | #description 73 | - Base styling with Tailwind: 74 | ::code-box{header="Core Structure" type="css" copy} 75 | ```css 76 | .video-container { 77 | @apply relative w-full max-w-xl border-2 border-primary-light-500 78 | rounded-lg shadow-lg overflow-hidden; 79 | } 80 | 81 | .controls { 82 | @apply absolute -bottom-1 -left-1 w-[calc(100%+.5rem)] bg-white 83 | border-2 border-primary-light-500 rounded-b-lg text-primary-light-500 84 | p-2 flex items-center gap-3; 85 | } 86 | ``` 87 | :: 88 | - Interactive elements: 89 | ::code-box{header="Interactive Styles" type="css" copy} 90 | ```css 91 | button { 92 | @apply transition-transform transform hover:scale-110; 93 | } 94 | 95 | input[type="range"] { 96 | @apply cursor-pointer accent-primary-light-500; 97 | } 98 | ``` 99 | :: 100 | 101 | ::doc-topic 102 | #title 103 | ## Keyboard Shortcuts 104 | #description 105 | - **Space**: Play/Pause 106 | - **Arrow Left/Right**: Seek backward/forward 107 | - **Arrow Up/Down**: Adjust volume 108 | - **F**: Toggle fullscreen 109 | - **M**: Toggle mute 110 | :: 111 | 112 | ::doc-topic 113 | #title 114 | ## Dependencies 115 | #description 116 | - `PUIcon` for control icons 117 | - Tailwind CSS for styling 118 | - Vue 3 Composition API 119 | :: 120 | -------------------------------------------------------------------------------- /docs/content/docs/getting-started.md: -------------------------------------------------------------------------------- 1 | ::doc-title 2 | #title 3 | Getting Started with Paper-UI 4 | 5 | #subtitle 6 | Welcome to **Paper-UI**! Follow this guide to quickly integrate Paper-UI components into your Nuxt 3 project and start building beautifully crafted, hand-drawn styled user interfaces. 7 | :: 8 | 9 | --- 10 | 11 | ::doc-topic 12 | #title 13 | Installation 14 | #description 15 | First, install the `paper-ui` module in your project: 16 | :: 17 | 18 | ::code-box{header="bash" type="cmd" copy=""} 19 | ```bash 20 | npm install @paper-ui/nuxt 21 | 22 | # pnpm install @paper-ui/nuxt 23 | 24 | # yarn add @paper-ui/nuxt 25 | ``` 26 | :: 27 | 28 | 29 | 30 | ::doc-topic 31 | #title 32 | Configuration 33 | #description 34 | To use Paper-UI in your Nuxt project, add the module to your `nuxt.config.ts` file: 35 | 36 | ::code-box{header="Nuxt.config.ts" type="nuxt" copy=""} 37 | ```ts 38 | export default defineNuxtConfig({ 39 | modules: ['paper-ui'] 40 | }) 41 | ``` 42 | :: 43 | 44 | :: 45 | This step ensures that all components and styles from Paper-UI are globally available in your project. 46 | 47 | --- 48 | 49 | ::doc-topic 50 | #title 51 | Usage 52 | #description 53 | Using Paper-UI components is straightforward. Here's how to use a sample component in your project: 54 | 55 | Open a page, e.g., `pages/index.vue` 56 | 57 | Import and use a Paper-UI component: 58 | :: 59 | 60 | ::code-box{header="app.vue" type="nuxt" copy=""} 61 | ```vue 62 | 77 | 78 | 85 | ``` 86 | :: 87 | 88 | ::doc-topic 89 | #title 90 | Start your development server: 91 | #description 92 | ::code-box{header="bash" type="cmd" copy=""} 93 | ```bash 94 | npm run dev 95 | # yarn dev 96 | # pnpm dev 97 | ``` 98 | :: 99 | :: 100 | Visit your app in the browser, and you'll see the Paper-UI component in action. 101 | 102 | 103 | --- 104 | 105 | ::doc-topic 106 | #title 107 | Customization 108 | #description 109 | Paper-UI is designed to be easily customizable. You can override styles using Tailwind CSS or extend component functionality to meet your needs. For details, refer to the **Customization** section in the documentation. 110 | :: 111 | 112 | --- 113 | ::doc-topic 114 | #title 115 | Contributing 116 | #description 117 | We welcome contributions to Paper-UI! 118 | :: 119 | 120 | --- 121 | ::doc-topic 122 | #description 123 | Happy building with **Paper-UI**! 🎉 124 | :: -------------------------------------------------------------------------------- /docs/content/docs/icons.md: -------------------------------------------------------------------------------- 1 | 2 | ::doc-topic 3 | #title 4 | PUIcon Component 5 | #description 6 | A comprehensive icon library with over 200+ icons for your application needs 7 | :: 8 | 9 | ::doc-topic 10 | #title 11 | Usage 12 | #description 13 | Basic Usage 14 | :: 15 | ::code-box{header="Basic Icon Usage" type="html" copy} 16 | ```html 17 | 20 | ``` 21 | :: 22 | 23 | ::doc-topic 24 | #description 25 | ### With Custom Classes 26 | :: 27 | ::code-box{header="Custom Styling" type="html" copy} 28 | ```html 29 | 35 | ``` 36 | :: 37 | 38 | ::doc-topic 39 | #description 40 | ### In Buttons 41 | :: 42 | ::code-box{header="Icon in Button" type="html" copy} 43 | ```html 44 | 50 | ``` 51 | :: 52 | 53 | ::doc-topic 54 | #title 55 | ## Props 56 | :: 57 | ::doc-table 58 | --- 59 | headers: ['Prop', 'Type', 'Required', 'Default', 'Description'] 60 | rows: 61 | - - 'name' 62 | - 'string' 63 | - 'Yes' 64 | - '-' 65 | - 'Name of the icon to display' 66 | - - 'custom-class' 67 | - 'string' 68 | - 'No' 69 | - "''" 70 | - 'Additional CSS classes for custom styling' 71 | --- 72 | :: 73 | 74 | 75 | ### Full Icon List 76 | For a complete list of all available icons, use the interactive icon explorer component below: 77 | 78 | ::doc-topic 79 | #title 80 | ## Icon Explorer 81 | #description 82 | Search and preview all available icons 83 | :: 84 | 85 | ::paper-show-icons 86 | :: 87 | 88 | ::doc-topic 89 | #title 90 | ## Styling 91 | #description 92 | - Default size matches parent text size 93 | - Use Tailwind classes for customization: 94 | ::code-box{header="Size Examples" type="html" copy} 95 | ```html 96 | 97 | 98 | 99 | ``` 100 | :: 101 | - Color customization: 102 | ::code-box{header="Color Examples" type="html" copy} 103 | ```html 104 | 105 | 106 | 107 | ``` 108 | :: 109 | 110 | ::doc-topic 111 | #title 112 | ## Best Practices 113 | #description 114 | 1. **Accessibility**: Always provide context when using standalone icons 115 | 2. **Consistency**: Maintain consistent icon sizes within components 116 | 3. **Feedback**: Use hover states and transitions for interactive icons 117 | 4. **Semantics**: Choose icons that clearly represent their function 118 | 5. **Performance**: Import only the icons you need in production 119 | :: -------------------------------------------------------------------------------- /docs/content/docs/index.md: -------------------------------------------------------------------------------- 1 | ::all-components 2 | :: -------------------------------------------------------------------------------- /docs/content/index.md: -------------------------------------------------------------------------------- 1 | 2 | ::welcome-page 3 | A Hand-drawn simplicity, seamlessly crafted. 4 | :: 5 | -------------------------------------------------------------------------------- /docs/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | modules: [ 4 | '@nuxt/content', 5 | '@paper-ui/nuxt', 6 | '@nuxtjs/tailwindcss', 7 | ], 8 | devtools: { enabled: true }, 9 | content: { nitro: { 10 | prerender: { 11 | failOnError: false, // Não interrompe o build em erros de prerender 12 | }, 13 | }, 14 | debug: true, 15 | build: { 16 | markdown: { 17 | highlight: { 18 | theme: { 19 | default: 'github-dark', 20 | }, 21 | }, 22 | }, 23 | }, 24 | }, 25 | future: { 26 | compatibilityVersion: 4, 27 | }, 28 | 29 | compatibilityDate: '2024-04-03', 30 | }) 31 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-content-starter", 3 | "private": true, 4 | "type": "module", 5 | "packageManager": "pnpm@9.15.4", 6 | "scripts": { 7 | "build": "nuxt build", 8 | "dev": "nuxt dev", 9 | "generate": "nuxt generate", 10 | "preview": "nuxt preview" 11 | }, 12 | "dependencies": { 13 | "@nuxt/content": "^3.0.0", 14 | "@nuxtjs/mdc": "^0.13.2", 15 | "@nuxtjs/tailwindcss": "^6.13.1", 16 | "@paper-ui/nuxt": "^1.1.6", 17 | "nuxt": "^3.15.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/public/avatar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/public/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paper-kit/nuxt/307fe8f1c7d8de394c7f7edc948b0229cccff09a/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/public/paper-ui.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paper-kit/nuxt/307fe8f1c7d8de394c7f7edc948b0229cccff09a/docs/public/paper-ui.mp3 -------------------------------------------------------------------------------- /docs/public/paper-ui.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paper-kit/nuxt/307fe8f1c7d8de394c7f7edc948b0229cccff09a/docs/public/paper-ui.mp4 -------------------------------------------------------------------------------- /docs/public/rocket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/public/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat' 3 | 4 | // Run `npx @eslint/config-inspector` to inspect the resolved config interactively 5 | export default createConfigForNuxt({ 6 | features: { 7 | // Rules for module authors 8 | tooling: true, 9 | // Rules for formatting 10 | stylistic: true, 11 | }, 12 | dirs: { 13 | src: [ 14 | './playground', 15 | ], 16 | }, 17 | }) 18 | .append( 19 | // your custom flat config here... 20 | ) 21 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | modules: ['@nuxtjs/tailwindcss'], 4 | }) 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@paper-ui/nuxt", 3 | "version": "1.7.0", 4 | "description": "A ui kit for nuxt", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/paper-kit/nuxt" 8 | }, 9 | "license": "MIT", 10 | "type": "module", 11 | "private": false, 12 | "exports": { 13 | ".": { 14 | "types": "./dist/types.d.ts", 15 | "import": "./dist/module.mjs", 16 | "require": "./dist/module.cjs" 17 | } 18 | }, 19 | "main": "./dist/module.cjs", 20 | "types": "./dist/types.d.ts", 21 | "files": [ 22 | "dist" 23 | ], 24 | "scripts": { 25 | "prepack": "nuxt-module-build build", 26 | "dev": "nuxi dev playground", 27 | "dev:build": "nuxi build playground", 28 | "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", 29 | "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags", 30 | "lint": "eslint .", 31 | "test": "vitest run", 32 | "test:watch": "vitest watch", 33 | "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit" 34 | }, 35 | "dependencies": { 36 | "@nuxt/kit": "^3.15.1", 37 | "@nuxtjs/tailwindcss": "6.12.2" 38 | }, 39 | "devDependencies": { 40 | "@nuxt/devtools": "^1.7.0", 41 | "@nuxt/eslint-config": "^0.7.4", 42 | "@nuxt/module-builder": "^0.8.4", 43 | "@nuxt/schema": "^3.15.1", 44 | "@nuxt/test-utils": "^3.15.1", 45 | "@types/node": "latest", 46 | "changelogen": "^0.5.7", 47 | "eslint": "^9.17.0", 48 | "nuxt": "^3.15.1", 49 | "typescript": "~5.7.2", 50 | "vitest": "^2.1.8", 51 | "vue-tsc": "^2.2.0" 52 | }, 53 | "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4" 54 | } 55 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: ['../src/module'], 3 | devtools: { enabled: true }, 4 | compatibilityDate: '2025-01-09', 5 | myModule: {}, 6 | }) 7 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "@paper-ui/nuxt-playground", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "nuxi dev", 7 | "build": "nuxi build", 8 | "generate": "nuxi generate", 9 | "generate:tsconfig": "echo '{ \"extends\": \"../tsconfig.json\" }' > .nuxt/tsconfig.json" 10 | }, 11 | "dependencies": { 12 | "nuxt": "^3.15.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /playground/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtModule, addPlugin, createResolver, addComponentsDir, installModule, addImports } from '@nuxt/kit' 2 | 3 | export type ModuleOptions = object 4 | 5 | export default defineNuxtModule({ 6 | meta: { 7 | name: '@paper-ui/nuxt', 8 | configKey: 'myModule', 9 | }, 10 | defaults: {}, 11 | async setup(_options, _nuxt) { 12 | const resolver = createResolver(import.meta.url) 13 | const resolveRuntimeModule = (path: string) => resolver.resolve('./runtime', path) 14 | 15 | addPlugin(resolver.resolve('./runtime/plugin')) 16 | 17 | addComponentsDir({ 18 | path: resolver.resolve('./runtime/components'), 19 | }) 20 | 21 | addImports([ 22 | { name: 'useToast', as: 'useToast', from: resolveRuntimeModule('./composables/useToast') }, 23 | { name: 'useModal', as: 'useModal', from: resolveRuntimeModule('./composables/useModal') }, 24 | ]) 25 | 26 | _nuxt.options.css.push(resolver.resolve('./runtime/style.css')) 27 | 28 | await installModule('@nuxtjs/tailwindcss', { 29 | exposeConfig: true, 30 | config: { 31 | cssPath: ['./runtime/assets/css/tailwind.css', { injectPosition: 'first' }], 32 | content: { 33 | files: [ 34 | resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'), 35 | resolver.resolve('./runtime/*.{mjs,js,ts}'), 36 | ], 37 | }, 38 | theme: { 39 | extend: { 40 | colors: { 41 | primary: { 42 | light: { 43 | 50: '#F5F5F5', 44 | 100: '#E8E8E8', 45 | 200: '#C7C7C7', 46 | 300: '#A3A3A3', 47 | 400: '#616161', 48 | 500: '#1c1c1c', 49 | 600: '#1A1717', 50 | 700: '#140F0F', 51 | 800: '#120B0B', 52 | 900: '#0D0606', 53 | 950: '#080202', 54 | }, 55 | dark: { 56 | 50: '#FCFCFC', 57 | 100: '#FAFAFA', 58 | 200: '#F0F0F0', 59 | 300: '#E6E6E6', 60 | 400: '#D4D4D4', 61 | 500: '#c1c1c1', 62 | 600: '#AD9C9C', 63 | 700: '#916D6D', 64 | 800: '#754646', 65 | 900: '#572727', 66 | 950: '#381010', 67 | }, 68 | }, 69 | }, 70 | }, 71 | }, 72 | }, 73 | }) 74 | }, 75 | }) 76 | -------------------------------------------------------------------------------- /src/runtime/components/PUAccordion.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 65 | 66 | 113 | -------------------------------------------------------------------------------- /src/runtime/components/PUAudio.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 113 | 114 | 122 | -------------------------------------------------------------------------------- /src/runtime/components/PUAvatar.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 67 | 68 | 73 | -------------------------------------------------------------------------------- /src/runtime/components/PUBadge.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 32 | 33 | 38 | -------------------------------------------------------------------------------- /src/runtime/components/PUButton.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 62 | 63 | 116 | -------------------------------------------------------------------------------- /src/runtime/components/PUButtonIcon.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 46 | 47 | 100 | -------------------------------------------------------------------------------- /src/runtime/components/PUCheckbox.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 92 | 93 | 107 | -------------------------------------------------------------------------------- /src/runtime/components/PUInput.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 67 | 68 | 88 | -------------------------------------------------------------------------------- /src/runtime/components/PULabel.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /src/runtime/components/PUModal.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 50 | 51 | 86 | -------------------------------------------------------------------------------- /src/runtime/components/PUProgress.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 72 | -------------------------------------------------------------------------------- /src/runtime/components/PURadio.vue: -------------------------------------------------------------------------------- 1 | 87 | 88 | 148 | -------------------------------------------------------------------------------- /src/runtime/components/PUSelect.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 68 | 69 | 72 | -------------------------------------------------------------------------------- /src/runtime/components/PUSwitch.vue: -------------------------------------------------------------------------------- 1 | 71 | 72 | 95 | -------------------------------------------------------------------------------- /src/runtime/components/PUTabs.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 83 | 84 | 122 | -------------------------------------------------------------------------------- /src/runtime/components/PUTag.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /src/runtime/components/PUTextArea.vue: -------------------------------------------------------------------------------- 1 |