doc: make noti demo page (#16)

* doc: make noti demo page

* asd

docs/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.data
+.env
+dist

docs/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

docs/README.md

@@ -0,0 +1,42 @@
+# Content v2 Minimal Starter
+
+Look at the [Content documentation](https://content-v2.nuxtjs.org/) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.

docs/app.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Noti } from '@vue3-noti/core'
+</script>
+
+<template>
+  <div>
+    <Noti />
+    <NuxtPage />
+  </div>
+</template>

docs/content/index.md

@@ -0,0 +1,13 @@
+---
+layout: playground
+---
+
+# Nuxt Content
+
+This page corresponds to the `/` route of your website. You can delete it or create another file in the `content/` directory.
+
+Try to navigate to [/about](/about). These 2 pages are rendered by the `pages/[...slug].vue` component.
+
+---
+
+Look at the [Content documentation](https://content.nuxtjs.org/) to learn more.

docs/layouts/playground.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { useNoti } from '@vue3-noti/core'
+
+import type { NotiOptions } from '@vue3-noti/core'
+
+const options = ref<NotiOptions>({
+  message: 'Hello Noti',
+  duration: 2e3,
+  hoverPause: true,
+  showProgressBar: true,
+
+  closeOnClick: true,
+  position: 'top-right',
+  type: 'success',
+})
+
+const durationSecond = computed(() => {
+  if (options.value.duration === undefined)
+    return 0
+
+  return options.value.duration / 1000
+})
+
+const noti = useNoti()
+</script>
+
+<template>
+  <div class="playground">
+    <h1> Vue3-Noti </h1>
+    <br>
+    <button
+      type="button"
+      class="noti-button"
+      @click="noti(options)"
+    >
+      Fire Notify!
+    </button>
+    <div class="control-panel">
+      <!-- message -->
+      <div class="field-group">
+        <label for="message">message: </label>
+        <input id="message" v-model="options.message" type="text">
+      </div>
+
+      <div class="field-group">
+        <!-- duration -->
+        <label for="duration">duration(ms): </label>
+        <input id="duration" v-model="options.duration" type="range" min="1000" max="20000" step="100">
+        {{ durationSecond }} s
+      </div>
+
+      <div class="field-group">
+        <!-- showProgressBar -->
+        <label for="showProgressBar">showProgressBar: </label>
+        <input id="showProgressBar" v-model="options.showProgressBar" type="checkbox">
+      </div>
+
+      <div class="field-group">
+        <!-- hoverPause -->
+        <label for="hoverPause">hoverPause: </label>
+        <input id="hoverPause" v-model="options.hoverPause" type="checkbox">
+      </div>
+
+      <div class="field-group">
+        <!-- closeOnClick -->
+        <label for="closeOnClick">closeOnClick: </label>
+        <input id="closeOnClick" v-model="options.closeOnClick" type="checkbox">
+      </div>
+      <div />
+      <div class="radio-group">
+        <!-- position -->
+        <div class="field-group">
+          <label for="position-top-right">top-right: </label>
+          <input id="position-top-right" v-model="options.position" value="top-right" name="position" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="position-top-left">top-left: </label>
+          <input id="position-top-left" v-model="options.position" value="top-left" name="position" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="position-bottom-right">bottom-right: </label>
+          <input id="position-bottom-right" v-model="options.position" value="bottom-right" name="position" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="position-bottom-left">bottom-left: </label>
+          <input id="position-bottom-left" v-model="options.position" value="bottom-left" name="position" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="position-middle-top">middle-top: </label>
+          <input id="position-middle-top" v-model="options.position" value="middle-top" name="position" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="position-middle-bottom">middle-bottom: </label>
+          <input id="position-middle-bottom" v-model="options.position" value="middle-bottom" name="position" type="radio">
+        </div>
+      </div>
+
+      <div class="radio-group">
+        <!-- type -->
+        <div class="field-group">
+          <label for="type-success">success: </label>
+          <input id="type-success" v-model="options.type" value="success" name="type" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="type-info">info: </label>
+          <input id="type-info" v-model="options.type" value="info" name="type" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="type-warning">warning: </label>
+          <input id="type-warning" v-model="options.type" value="warning" name="type" type="radio">
+        </div>
+        <div class="field-group">
+          <label for="type-error">error: </label>
+          <input id="type-error" v-model="options.type" value="error" name="type" type="radio">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.playground {
+  @apply flex flex-col;
+  @apply bg-[#242424];
+  @apply items-center;
+  @apply text-white/87;
+  @apply leading-6;
+
+  @apply h-screen;
+
+  color-scheme: light dark;
+}
+
+.playground h1 {
+  @apply text-3xl;
+  @apply font-bold;
+  @apply my-4;
+}
+
+.playground input {
+  @apply px-[2px];
+  @apply py-[1px];
+}
+
+.playground button {
+  @apply rounded-md;
+  @apply border border-transparent;
+  @apply py-2 px-4;
+  @apply text-base font-medium;
+  @apply bg-[#1a1a1a];
+  @apply transition duration-150 ease-in-out;
+  @apply hover:bg-gray-700;
+}
+
+.noti-button {
+  @apply mb-2;
+}
+
+.control-panel {
+  @apply grid;
+  @apply gap-4;
+  @apply grid-cols-2;
+}
+
+.field-group {
+  @apply flex;
+  @apply justify-start;
+  @apply items-center;
+  @apply gap-x-4;
+  @apply my-4;
+}
+
+.radio-group {
+  @apply border border-gray-300;
+  @apply px-4;
+  @apply col-span-2;
+  @apply grid;
+  @apply gap-4;
+  @apply grid-cols-3;
+
+}
+
+label {
+  @apply cursor-pointer
+}
+</style>

docs/nuxt.config.ts

@@ -0,0 +1,16 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  modules: ['@nuxt/content', '@unocss/nuxt'],
+  extends: ['@nuxt-themes/docus'],
+  imports: {
+    transform: {
+      // you could also add the path of your built library to prevent this happening
+      // for your users, but the issue is probably only replicable in your monorepo
+      // https://github.com/nuxt/nuxt/issues/18823#issuecomment-1419704343
+      exclude: [/\bcore\b/],
+    },
+  },
+  content: {
+    documentDriven: true,
+  },
+})

docs/package.json

@@ -0,0 +1,20 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@nuxt-themes/docus": "^1.14.6",
+    "@unocss/nuxt": "^0.55.7",
+    "@vue3-noti/core": "workspace:*",
+    "@vueuse/core": "^10.4.1"
+  },
+  "devDependencies": {
+    "@nuxt/content": "^2.8.2",
+    "nuxt": "^3.7.3"
+  }
+}

docs/plugins/@vue3-noti.ts

@@ -0,0 +1,19 @@
+import { NotiPlugin } from '@vue3-noti/core'
+import type { NotiOptions } from '@vue3-noti/core'
+import '@vue3-noti/core/style.css'
+
+export default defineNuxtPlugin({
+  name: '@vue3-noti',
+  async setup(nuxtApp) {
+    const notiOptions: NotiOptions = {
+      message: 'Hello',
+      type: 'success',
+      duration: 1000,
+      position: 'top-right',
+      hoverPause: true,
+      showProgressBar: true,
+    }
+
+    nuxtApp.vueApp.use(NotiPlugin, notiOptions)
+  },
+})

docs/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

docs/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

docs/unocss.config.ts

@@ -0,0 +1,21 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetTypography(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})

packages/core/package.json

@@ -29,8 +29,11 @@
     "typecheck": "vue-tsc --noEmit",
     "build": "vite build"
   },
+  "peerDependencies": {
+    "@vueuse/core": ">=10.3.0",
+    "vue": ">=3.3.4"
+  },
   "dependencies": {
-    "@vueuse/core": "^10.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

playground/src/App.vue

@@ -120,7 +120,7 @@ const durationSecond = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style>
 .playground {
   height: 100vh;
 }
@@ -137,7 +137,7 @@ const durationSecond = computed(() => {
 
 .field-group {
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   align-items: center;
   gap: 0 1em;
   margin: 1em 0;