Add Document Area

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+docs
 dist-ssr
 *.local
 

lib/styles/index.scss

@@ -90,22 +90,9 @@
   margin-right: 6px;
 }
 .na-suffix {
-  // position: absolute;
-  // right: -10px;
-  // margin-left: 100px;
   top: 0;
   bottom: 0;
-  // color: #303133;
   padding: 0px 10px;
   margin-left: 10px;
   border-left: #fff 1px solid;
-  // width: 100px;
-  // margin-left: 6px;
-  // border: solid red 1px;
-  // .na-suffix_content{
-  //   color: #333;
-  //   text-align: center;
-  //   padding: 10px ;
-  // }
-  // background-color: #fff;
 }

package.json

@@ -2,6 +2,12 @@
   "name": "@nanometer/nm",
   "version": "1.2.3",
   "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview --config vite.demo.config.js",
+    "build:demo": "vite build --config vite.demo.config.js"
+  },
   "files": [
     "dist"
   ],
@@ -21,20 +27,12 @@
     "./dist/style.css": "./dist/style.css"
   },
   "types": "dist/main.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
   "devDependencies": {
     "@types/estree": "^1.0.5",
     "@types/resolve": "^1.20.6",
     "sass": "^1.74.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1"
-  },
-  "dependencies": {
-
   }
 }

src/counter.ts

@@ -1,14 +1,12 @@
 import message from "../lib/main";
-export function setupCounter(element: HTMLButtonElement) {
-  element.innerHTML = `click me`;
-  // element.addEventListener('click', () => message(document.getElementById(`h1`)))
-  // element.addEventListener('click', () => message('hello world'))
+import { messageType } from './../lib/message';
+export function setupCounter(element: HTMLButtonElement,type:messageType) {
   element.addEventListener("click", () =>{
 // message("✨Hello, I'm Pengpeng✨ ，I come from a place far away called the Land of No Stories.")
     message({
-      type: "success",
-      content: "✨Hello, I'm Pengpeng✨ ，I come from a place far away called the Land of No Stories.",
-      durationTime: 5000,
+      type: type,
+      content: "✨Hello, world✨ ，I come from a place far away called the Land of No Stories.",
+      durationTime: 3000,
       suffix:'close',
       // beforeEvent:()=>{
       //   console.log('close','我要停下来')

src/main.ts

@@ -8,15 +8,25 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
     <a href="https://vitejs.dev" target="_blank">
       <img src="${viteLogo}" class="logo" alt="Vite logo" />
     </a>
-
     <h1 id="h1"> code play</h1>
+       <p>
+    This is a great message prompter, it takes up very little memory and space, but provides common usage, and from a modern front-end build, you can use it alone in the project or incorporate it into the base library, it is very useful.
+    </p>
     <div class="card">
-      <button id="counter" type="button"></button>
-      <button id="close" type="button">close</button>
+      <button id="counter-success" type="button">success</button>
+      <button id="counter-warning" type="button">warning</button>
+      <button id="counter-info" type="button">info</button>
+      <button id="counter-error" type="button">error</button>
+       
 
     </div>
  
   </div>
 `
-setupCounter1(document.querySelector<HTMLButtonElement>('#close')!)
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+// <button id="close" type="button">close</button>
+setupCounter(document.querySelector<HTMLButtonElement>('#counter-success')!,'success')
+setupCounter(document.querySelector<HTMLButtonElement>('#counter-warning')!,'warning')
+setupCounter(document.querySelector<HTMLButtonElement>('#counter-info')!,'info')
+setupCounter(document.querySelector<HTMLButtonElement>('#counter-error')!,'error')
+
+// setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

vite.demo.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+export default defineConfig({
+   mode:"production",
+   build:{
+    target:"modules",
+    outDir:'docs',
+
+   }
+  })