diff --git a/README.md b/README.md index 76e8692..cff419b 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,8 @@ Or via [JsDeliver](https://www.jsdelivr.com/package/npm/vuito?version=latest), [ # Usage +Full documentation ➡️ https://vuito.vercel.app + ## Imports **CJS** @@ -77,11 +79,13 @@ signIn.check({ # Vue.js Mixin +> ⚠️ Only supporting Vue2 currently ⚠️ + [![minizipped size](https://badgen.net/bundlephobia/minzip/@vuito/vue)](https://bundlephobia.com/result?p=@vuito/vue) Use vuito with Vue.js or Nuxt.js like a breeze! -[Nuxt.js Demo](https://vuito.vercel.app/demo) + ```bash npm i @vuito/vue diff --git a/docs/.eslintignore b/docs/.eslintignore new file mode 100644 index 0000000..a1bd0c8 --- /dev/null +++ b/docs/.eslintignore @@ -0,0 +1,4 @@ +dist +node_modules +.output +.nuxt \ No newline at end of file diff --git a/docs/.eslintrc.cjs b/docs/.eslintrc.cjs new file mode 100644 index 0000000..38db313 --- /dev/null +++ b/docs/.eslintrc.cjs @@ -0,0 +1,8 @@ +module.exports = { + root: true, + extends: '@nuxt/eslint-config', + rules: { + 'vue/max-attributes-per-line': 'off', + 'vue/multi-word-component-names': 'off' + } +} \ No newline at end of file diff --git a/docs/.gitignore b/docs/.gitignore old mode 100644 new mode 100755 index baf9bcb..69f6b69 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -9,3 +9,4 @@ coverage dist sw.* .env +.output diff --git a/docs/.npmrc b/docs/.npmrc new file mode 100644 index 0000000..cf04042 --- /dev/null +++ b/docs/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/docs/.nvmrc b/docs/.nvmrc new file mode 100644 index 0000000..b009dfb --- /dev/null +++ b/docs/.nvmrc @@ -0,0 +1 @@ +lts/* diff --git a/docs/README.md b/docs/README.md old mode 100644 new mode 100755 index 07d55c3..8607e02 --- a/docs/README.md +++ b/docs/README.md @@ -1,27 +1,57 @@ -# vuito-docs +# Docus Starter + +Starter template for [Docus](https://docus.dev). + +## Clone + +Clone the repository (using `nuxi`): + +```bash +npx nuxi init -t themes/docus +``` ## Setup Install dependencies: ```bash -npm run install +yarn install ``` ## Development ```bash -npm run dev +yarn dev +``` + +## Edge Side Rendering + +Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments. + +Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets). + +```bash +yarn build ``` ## Static Generation -This will create the `dist/` directory for publishing to static hosting: +Use the `generate` command to build your application. + +The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting. + +```bash +yarn generate +``` + +## Preview build + +You might want to preview the result of your build locally, to do so, run the following command: ```bash -npm run generate +yarn preview ``` -To preview the static generated app, run `npm run start` +--- -For detailed explanation on how things work, checkout [nuxt/content](https://content.nuxtjs.org) and [@nuxt/content theme docs](https://content.nuxtjs.org/themes-docs). +For a detailed explanation of how things work, check out [Docus](https://docus.dev). diff --git a/docs/app.config.ts b/docs/app.config.ts new file mode 100644 index 0000000..10d79d2 --- /dev/null +++ b/docs/app.config.ts @@ -0,0 +1,42 @@ +export default defineAppConfig({ + docus: { + title: 'Vuito', + description: 'Simple, lightweight, isomorphic, template-based validation library.', + image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png', + socials: { + npm: { + label: 'NPM', + icon: 'simple-icons:npm', + href: 'https://npmjs.com/package/vuito' + }, + github: 'mathix420/vuito', + portfolio: { + label: 'Me, Arnaud Gissinger', + icon: 'simple-icons:bento', + href: 'https://bento.me/agissing' + } + }, + github: { + dir: 'docs/content', + branch: 'master', + repo: 'vuito', + owner: 'mathix420', + edit: true + }, + aside: { + level: 0, + collapsed: false, + exclude: [] + }, + main: { + padded: true, + fluid: true + }, + header: { + logo: true, + showLinkIcon: true, + exclude: [], + fluid: true + } + } +}) diff --git a/docs/bun.lockb b/docs/bun.lockb new file mode 100755 index 0000000..a5ee720 Binary files /dev/null and b/docs/bun.lockb differ diff --git a/docs/components/Demo.vue b/docs/components/Demo.vue deleted file mode 100644 index 10a4fad..0000000 --- a/docs/components/Demo.vue +++ /dev/null @@ -1,96 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue new file mode 100644 index 0000000..5f1030b --- /dev/null +++ b/docs/components/Logo.vue @@ -0,0 +1,26 @@ + \ No newline at end of file diff --git a/docs/content/0.index.md b/docs/content/0.index.md new file mode 100644 index 0000000..bf97aa4 --- /dev/null +++ b/docs/content/0.index.md @@ -0,0 +1,107 @@ +--- +title: Home +navigation: false +layout: page +main: + fluid: false +--- + +:ellipsis{right=0px width=75% blur=150px :colors='["rgba(250, 120, 0, 0.22)", "rgba(243, 191, 57, 0.22)", "rgba(243, 79, 57, 0.22)"]'} + +::block-hero +--- +cta: + - Get started + - /introduction/getting-started +secondary: + - Open on GitHub → + - https://github.com/mathix420/vuito +--- + +#title +Full-stack validations made easy. + +#description +Simple, lightweight, isomorphic, template-based validation library. + +#extra + ::list + - Only **778 Bytes** gz for all modules + - **Tree-Shakeable** use only what you need + - **Template based**, share validations across projects with ease + - **Isomorphic**; Server or Client-Side, it doesn't matter + - No dependencies! + - Easy to [Extend and Configure](/api) + - Plug and play [Vue.js Mixin](/introduction/vue-mixin) + :: + +#support + ::code-group + ```bash [NPM] + npm i vuito + ``` + ```bash [Bun] + bun i vuito + ``` + ```bash [Yarn] + yarn add vuito + ``` + ```bash [PNPM] + pnpm i vuito + ``` + ```bash [NI] + ni vuito # github.com/antfu/ni + ``` + :: +:: + +::card-grid +#title +What's included + +#root +:ellipsis{left=0px width=40rem top=10rem blur=140px :colors='["rgba(250, 120, 0, 0.15)", "rgba(243, 191, 57, 0.15)", "rgba(243, 79, 57, 0.15)"]'} + +#default + ::card{icon=simple-icons:github} + #title + Shareable templates + #description + Share your validations template accross multiple projects. + :: + + ::card{icon=noto:rocket} + #title + Use anywhere + #description + Vuito is isomorphic by design, you can use wherever you want. + :: + + ::card{icon=logos:vue} + #title + Vue Mixin + #description + Install the vue mixin and you're good to go! + :: + + ::card{icon=noto:puzzle-piece} + #title + Easily extensible + #description + Add validators helpers with ease. + :: + + ::card{icon=noto:evergreen-tree} + #title + Tree-Shakeable + #description + Do not ship unecessary code. + :: + + ::card{icon=fxemoji:babybottle} + #title + Simple API + #description + No learning curve, intuitive API design. + :: +:: diff --git a/docs/content/1.introduction/1.getting-started.md b/docs/content/1.introduction/1.getting-started.md new file mode 100644 index 0000000..3979f45 --- /dev/null +++ b/docs/content/1.introduction/1.getting-started.md @@ -0,0 +1,69 @@ +# Getting Started + +## Installation + +Install `vuito` in your project + +::code-group + + ```bash [NPM] + npm i vuito + ``` + + ```bash [Bun] + bun i vuito + ``` + + ```bash [Yarn] + yarn add vuito + ``` + + ```bash [PNPM] + pnpm i vuito + ``` + +:: + +## Validate stuff + +1. Create your template, `validations/auth.ts` here. + + ```typescript [validations/auth.ts] + import { templateify, required, minLength, maxLength } from 'vuito'; + + export const signIn = templateify({ + username: [ + { test: required, message: 'Please enter a username.' }, + { test: minLength(3), message: 'Username is too short.' }, + { test: maxLength(20), message: 'Username is too big.' }, + ], + password: [ + { test: required, message: 'Please enter a password.' }, + { test: minLength(12), message: 'Password is too short.' }, + ], + }); + ``` + +2. Validate some data + ```typescript [main.ts] + import { signIn } from './validations/auth'; + + const fields = { + username: 'jeff', + password: '2-pesos', + }; + + await signIn.check(fields) + .then(() => console.log('Validated!')) + .catch(console.error); + ``` + +3. Run the test + ```bash + bun run main.ts + # Will return: "Password is too short." + ``` + +::alert{type="success"} +✨ Well done! I'm pretty sure you're already familiar with vuito now! +:: diff --git a/docs/content/en/templates.md b/docs/content/1.introduction/2.templates.md similarity index 75% rename from docs/content/en/templates.md rename to docs/content/1.introduction/2.templates.md index 9deacac..9745969 100644 --- a/docs/content/en/templates.md +++ b/docs/content/1.introduction/2.templates.md @@ -1,11 +1,4 @@ ---- -title: Templates -description: '' -position: 20 -category: API Reference ---- - -## What is a template +# Templates Templates are designed to group validations for fields. @@ -16,15 +9,16 @@ the needed checks for the `username` and `password` fields. Using templates allows you to check a whole form in just one line. Simply regroup your forms data in an object to match the template structure, and run `signin.check(formObj)`. + ## Define a template - - A good practice is to create a new directory to store all your validation templates. - +::alert{type="info"} + A good practice is to create a new directory/repository to store all your validation templates. [Learn why.](/introduction/share-templates) +:: Here we use `~/validations/`. -```js[~/validations/auth.js] +```typescript [~/validations/auth.ts] import { templateify, required, minLength, maxLength } from 'vuito'; export const signin = templateify({ @@ -42,7 +36,7 @@ export const signin = templateify({ ## Use a template -```js[~/app.js] +```typescript [~/app.ts] import { signin } from '~/validations/auth.js'; const formData = { @@ -51,6 +45,6 @@ const formData = { }; signin.check(formData) - .then(() => alert("You're good bro!")) - .catch((err) => alert(`Nah, ${err}`)); + .then(() => console.info("You're good bro!")) + .catch((err) => console.error(`Nah, ${err}`)); ``` diff --git a/docs/content/en/vue.md b/docs/content/1.introduction/3.vue-mixin.md similarity index 60% rename from docs/content/en/vue.md rename to docs/content/1.introduction/3.vue-mixin.md index fc662d7..ab2ce16 100644 --- a/docs/content/en/vue.md +++ b/docs/content/1.introduction/3.vue-mixin.md @@ -1,36 +1,31 @@ ---- -title: Vue -description: '' -position: 30 -category: Integrations ---- +# Vue Mixin + +:badge[Currently deprecated, Vue 2 only]{type="warning"} Use vuito with Vue.js or Nuxt.js like a breeze! ## Installation - - - - ```bash - npm install @vuito/vue - ``` - - - - - ```bash - yarn add @vuito/vue - ``` - - - + ::code-group + ```bash [NPM] + npm i @vuito/vue + ``` + ```bash [Bun] + bun i @vuito/vue + ``` + ```bash [Yarn] + yarn add @vuito/vue + ``` + ```bash [PNPM] + pnpm i @vuito/vue + ``` + :: ## Usage -Using the template defined in [Setup](/setup). +Using the template defined [here](/introduction/templates#define-a-template). -```html [pages/signin.vue] +```vue [pages/signin.vue]