Skip to content

Commit 5552879

Browse files
stafyniaksachastafyniaksacha
committed
feat: init ninja toaster
0 parents  commit 5552879

24 files changed

+8579
-0
lines changed

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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

‎.eslintignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
node_modules
3+
.nuxt

‎.eslintrc‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"root": true,
3+
"env": { "browser": true, "node": true },
4+
"parserOptions": { "parser": "@typescript-eslint/parser" },
5+
"extends": [
6+
"@antfu",
7+
"plugin:vue/vue3-recommended",
8+
"plugin:tailwindcss/recommended",
9+
"prettier",
10+
"plugin:prettier-vue/recommended"
11+
],
12+
"plugins": ["tailwindcss"],
13+
"rules": {
14+
"no-console": "off",
15+
"no-debugger": "off",
16+
"vue/script-setup-uses-vars": "error",
17+
"vue/multi-word-component-names": "off",
18+
"vue/define-macros-order": "off",
19+
"tailwindcss/no-custom-classname": [
20+
"error",
21+
{ "whitelist": ["^ninja-(.*)$"] }
22+
],
23+
"prettier-vue/prettier": [
24+
"error",
25+
{
26+
"printWidth": 80,
27+
"singleQuote": true,
28+
"semi": false,
29+
"trailingComma": "none"
30+
}
31+
]
32+
}
33+
}

‎.gitignore‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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+
.vercel_build_output
23+
.build-*
24+
.env
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+
39+
# Intellij idea
40+
*.iml
41+
.idea
42+
43+
# OSX
44+
.DS_Store
45+
.AppleDouble
46+
.LSOverride
47+
.AppleDB
48+
.AppleDesktop
49+
Network Trash Folder
50+
Temporary Items
51+
.apdisk

‎.prettierrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": true,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"trailingComma": "all"
6+
}

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Nuxt Module
2+
3+
## Development
4+
5+
- Run `npm run dev:prepare` to generate type stubs.
6+
- Use `npm run dev` to start [playground](./playground) in development mode.

‎package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "@cssninja/nuxt-toaster",
3+
"version": "0.0.1",
4+
"license": "MIT",
5+
"type": "module",
6+
"exports": {
7+
".": {
8+
"import": "./dist/module.mjs",
9+
"require": "./dist/module.cjs"
10+
}
11+
},
12+
"main": "./dist/module.cjs",
13+
"types": "./dist/types.d.ts",
14+
"files": [
15+
"dist"
16+
],
17+
"scripts": {
18+
"prepack": "nuxt-module-build",
19+
"dev": "nuxi dev playground",
20+
"dev:build": "nuxi build playground",
21+
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
22+
"eslint": "eslint .",
23+
"eslint:fix": "eslint --fix .",
24+
"release": "run-s release:*",
25+
"release:standard-version": "standard-version",
26+
"release:publish": "git push --follow-tags origin main && npm publish"
27+
},
28+
"dependencies": {
29+
"@nuxt/kit": "^3.0.0-rc.11",
30+
"@vueuse/core": "^9.2.0",
31+
"defu": "^6.1.0"
32+
},
33+
"devDependencies": {
34+
"@antfu/eslint-config": "^0.27.0",
35+
"@nuxt/module-builder": "latest",
36+
"@nuxt/schema": "^3.0.0-rc.11",
37+
"eslint": "8.23.1",
38+
"eslint-config-prettier": "8.5.0",
39+
"eslint-plugin-prettier-vue": "4.2.0",
40+
"eslint-plugin-tailwindcss": "3.6.1",
41+
"eslint-plugin-vuejs-accessibility": "1.2.0",
42+
"nuxt": "^3.0.0-rc.11",
43+
"standard-version": "^9.5.0"
44+
}
45+
}

‎playground/app.vue‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<script setup>
2+
import { h } from 'vue'
3+
import CustomToast from './components/CustomToast.vue'
4+
import AdvancedToast from './components/AdvancedToast.vue'
5+
import { useNuxtApp } from '#app'
6+
7+
const { $nt } = useNuxtApp()
8+
let i = 0
9+
10+
function showBasicToast() {
11+
i++
12+
$nt.show(`Hello, ${i} world!`)
13+
}
14+
15+
function showCustomToast() {
16+
i++
17+
$nt.show({
18+
content: () =>
19+
h(CustomToast, { message: `Hello ${i} from Nuxt module playground!` }),
20+
transition: {
21+
name: 'fadeOut'
22+
},
23+
theme: {
24+
containerId: 'nt-container-bottom-right',
25+
containerClass:
26+
'absolute inset-0 pointer-events-none p-4 flex flex-col-reverse items-start gap-2',
27+
wrapperClass: 'pointer-events-auto cursor-pointer'
28+
}
29+
})
30+
}
31+
32+
async function showAdvancedToast() {
33+
i++
34+
const toast = await $nt.show({
35+
content: () =>
36+
h(AdvancedToast, { message: `Hello ${i} from Nuxt module playground!` }),
37+
dismissible: false,
38+
maxToasts: 1,
39+
theme: {
40+
containerId: 'nt-container-top-left',
41+
containerClass:
42+
'absolute inset-0 pointer-events-none p-4 flex flex-col items-end gap-2',
43+
wrapperClass: [
44+
'pointer-events-auto',
45+
'rounded',
46+
'outline-slate-300',
47+
'outline-offset-2',
48+
'focus:outline',
49+
'focus:outline-2',
50+
'focus-within:outline',
51+
'focus-within:outline-2'
52+
].join(' ')
53+
},
54+
transition: {
55+
enterActiveClass: 'transition duration-300 ease-out',
56+
enterFromClass: 'transform translate-x-full opacity-0',
57+
enterToClass: 'transform translate-x-0 opacity-100',
58+
leaveActiveClass: 'transition duration-300 ease-in',
59+
leaveFromClass: 'transform translate-x-0 opacity-100',
60+
leaveToClass: 'transform translate-x-full opacity-0'
61+
}
62+
})
63+
64+
toast.el.focus()
65+
}
66+
function clearToast() {
67+
$nt.clear()
68+
}
69+
</script>
70+
71+
<template>
72+
<div>
73+
<p>Nuxt module playground!</p>
74+
<button
75+
class="m-1 rounded border border-slate-200 px-2 py-1"
76+
@click="showBasicToast"
77+
>
78+
show basic toast
79+
</button>
80+
<button
81+
class="m-1 rounded border border-slate-200 px-2 py-1"
82+
@click="showCustomToast"
83+
>
84+
show custom toast
85+
</button>
86+
<button
87+
class="m-1 rounded border border-slate-200 px-2 py-1"
88+
@click="showAdvancedToast"
89+
>
90+
add advanced toast
91+
</button>
92+
<button
93+
class="m-1 rounded border border-slate-200 px-2 py-1"
94+
@click="clearToast"
95+
>
96+
clear all toast
97+
</button>
98+
</div>
99+
</template>
100+
101+
<style>
102+
// Animations are taken from animate.css
103+
// https://daneden.github.io/animate.css
104+
.fadeOut {
105+
animation-name: fadeOut;
106+
}
107+
.fadeInDown {
108+
animation-name: fadeInDown;
109+
}
110+
.fadeInUp {
111+
animation-name: fadeInUp;
112+
}
113+
.fade-enter-active {
114+
transition: opacity 300ms ease-in;
115+
}
116+
.fade-leave-active {
117+
transition: opacity 150ms ease-out;
118+
}
119+
.fade-enter,
120+
.fade-leave-to {
121+
opacity: 0;
122+
}
123+
@-moz-keyframes fadeOut {
124+
from {
125+
opacity: 1;
126+
}
127+
to {
128+
opacity: 0;
129+
}
130+
}
131+
@-webkit-keyframes fadeOut {
132+
from {
133+
opacity: 1;
134+
}
135+
to {
136+
opacity: 0;
137+
}
138+
}
139+
@-o-keyframes fadeOut {
140+
from {
141+
opacity: 1;
142+
}
143+
to {
144+
opacity: 0;
145+
}
146+
}
147+
@keyframes fadeOut {
148+
from {
149+
opacity: 1;
150+
}
151+
to {
152+
opacity: 0;
153+
}
154+
}
155+
@-moz-keyframes fadeInDown {
156+
from {
157+
opacity: 0.5;
158+
transform: translate3d(0, -100%, 0);
159+
}
160+
to {
161+
opacity: 1;
162+
transform: none;
163+
}
164+
}
165+
@-webkit-keyframes fadeInDown {
166+
from {
167+
opacity: 0.5;
168+
transform: translate3d(0, -100%, 0);
169+
}
170+
to {
171+
opacity: 1;
172+
transform: none;
173+
}
174+
}
175+
@-o-keyframes fadeInDown {
176+
from {
177+
opacity: 0.5;
178+
transform: translate3d(0, -100%, 0);
179+
}
180+
to {
181+
opacity: 1;
182+
transform: none;
183+
}
184+
}
185+
@keyframes fadeInDown {
186+
from {
187+
opacity: 0.5;
188+
transform: translate3d(0, -100%, 0);
189+
}
190+
to {
191+
opacity: 1;
192+
transform: none;
193+
}
194+
}
195+
@-moz-keyframes fadeInUp {
196+
from {
197+
opacity: 0.5;
198+
transform: translate3d(0, 100%, 0);
199+
}
200+
to {
201+
opacity: 1;
202+
transform: none;
203+
}
204+
}
205+
@-webkit-keyframes fadeInUp {
206+
from {
207+
opacity: 0.5;
208+
transform: translate3d(0, 100%, 0);
209+
}
210+
to {
211+
opacity: 1;
212+
transform: none;
213+
}
214+
}
215+
@-o-keyframes fadeInUp {
216+
from {
217+
opacity: 0.5;
218+
transform: translate3d(0, 100%, 0);
219+
}
220+
to {
221+
opacity: 1;
222+
transform: none;
223+
}
224+
}
225+
@keyframes fadeInUp {
226+
from {
227+
opacity: 0.5;
228+
transform: translate3d(0, 100%, 0);
229+
}
230+
to {
231+
opacity: 1;
232+
transform: none;
233+
}
234+
}
235+
</style>

0 commit comments

Comments
 (0)