optimization: style, utils and more

GmeroAlert · May 8, 2024 · c58fbcb · c58fbcb
1 parent 494024d
commit c58fbcb
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 45 deletions.
diff --git a/docs/index.css b/docs/index.css
@@ -49,19 +49,14 @@ body {
   margin-bottom: 1em;
 }
 
-.alert-html {
-  width: 100%;
-  max-width: 550px;
-}
-
 .gm-label {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .gm-input {
-  width: calc(100% - 85px);
+  width: calc(100% - 6em);
   padding: 10px 12px;
   font-size: 14px;
   color: var(--text);

diff --git a/docs/index.js b/docs/index.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gmalert",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "A simple but powerful alert component",
   "types": "dist/types/main.d.ts",
   "module": "dist/gmalert.esm.js",
@@ -34,29 +34,29 @@
   "author": "歌梦罗",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.23.5",
-    "@babel/preset-env": "^7.23.5",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-typescript": "^7.24.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@xbmlz/eslint-config-prettier": "^0.1.17",
     "@xbmlz/eslint-config-ts": "^0.1.17",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
     "npm-run-all": "^4.1.5",
-    "postcss-preset-env": "^9.3.0",
+    "postcss-preset-env": "^9.5.11",
     "rollup": "^3.29.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^2.0.3",
-    "sass": "^1.69.5",
+    "sass": "^1.77.0",
     "stylelint": "^15.11.0",
-    "stylelint-config-recess-order": "^4.4.0",
+    "stylelint-config-recess-order": "^4.6.0",
     "stylelint-config-standard-scss": "^11.1.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.2"
+    "typescript": "^5.4.5"
   }
 }
diff --git a/src/demo/index.scss b/src/demo/index.scss
@@ -51,19 +51,14 @@ body {
   margin-bottom: 1em;
 }
 
-.alert-html {
-  width: 100%;
-  max-width: 550px;
-}
-
 .gm-label {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .gm-input {
-  width: calc(100% - 85px);
+  width: calc(100% - 6em);
   padding: 10px 12px;
   font-size: 14px;
   color: var(--text);

diff --git a/src/demo/index.ts b/src/demo/index.ts
@@ -1,5 +1,5 @@
 import { alert, message, notice } from '../main'
-import { newDiv } from '../utils/html'
+import { newDiv, querySelector } from '../utils/html'
 import InformationBtnBox from './information'
 
 import './index.scss'
@@ -14,7 +14,7 @@ import '../styles/message.scss'
 
 notice.config({ timeout: 5000 })
 
-const $root = document.querySelector('#root')
+const $root = querySelector('#root')
 
 if (!$root) {
   throw new Error('Root element not found')

diff --git a/src/demo/information.ts b/src/demo/information.ts
@@ -1,8 +1,8 @@
 import { information } from '../main'
-import { newDiv } from '../utils/html'
+import { newDiv, newEl } from '../utils/html'
 
 function Button(text: string, callback: () => void) {
-  const button = document.createElement('button')
+  const button = newEl('button')
   button.classList.add('btn')
   button.textContent = text
   button.onclick = callback

diff --git a/src/modules/alert.ts b/src/modules/alert.ts
@@ -5,6 +5,8 @@ import {
   cn,
   getContainer,
   newDiv,
+  newEl,
+  querySelector,
 } from '../utils/html'
 import { AnimatedIcon } from '../component/animatedIcons/animatedIcons'
 import { MakeMsg } from '../core/Msg'
@@ -13,7 +15,7 @@ import type { MsgType } from './message'
 import type { PropsAlert } from './types'
 
 function Button(text: string, onClick: () => void) {
-  const $btn = document.createElement('button')
+  const $btn = newEl('button')
   $btn.textContent = text
   $btn.onclick = onClick
   $btn.classList.add(cn('alert-btn'))
@@ -70,7 +72,7 @@ export function GmAlert(props: PropsAlert): MsgType {
       animationendHandle($wrapper, (e: string) => {
         if (e === cn('alert-out')) {
           $box.remove()
-          if (!document.querySelector(`.${cn('alert')}`)) {
+          if (!querySelector(`.${cn('alert')}`)) {
             bodyScroll(false)
           }
           props.onClosed(status)

diff --git a/src/modules/information.ts b/src/modules/information.ts
@@ -1,5 +1,5 @@
 import { animationendHandle, changeAnimation } from '../utils/animateHandle'
-import { changeStyle, cn, getContainer, newDiv } from '../utils/html'
+import { changeStyle, cn, getContainer, newDiv, querySelector } from '../utils/html'
 import { MakeMsg } from '../core/Msg'
 import { CloseIcon } from '../component/icons/close'
 import type { MsgType } from './message'
@@ -44,7 +44,7 @@ export function GmInformation(props: PropsInfo): MsgType {
   }
 
   if (!props.hideClose) {
-    const $head = $wrapper.querySelector<HTMLElement>(`.${cn('info-header')}`)!
+    const $head = querySelector<HTMLElement>(`.${cn('info-header')}`, $wrapper)!
     const $close = CloseIcon()
     $close.onclick = () => {
       close(0)

diff --git a/src/modules/message.ts b/src/modules/message.ts
@@ -33,7 +33,7 @@ export function GmMessage(props: PropsMessage): MsgType {
 
   const close = (status: number) => {
     props.onClose()
-    $main.style.maxHeight = `${$main.offsetHeight}px`
+    changeStyle($main, [`max-height: ${$main.offsetHeight}px`])
     changeAnimation($wrapper, cn('msg-out'))
     changeAnimation($main, cn('msg-close'))
 

diff --git a/src/modules/notice.ts b/src/modules/notice.ts
@@ -1,5 +1,5 @@
 import { animationendHandle, changeAnimation } from '../utils/animateHandle'
-import { changeStyle, cn, getNoticeContainer, newDiv } from '../utils/html'
+import { changeStyle, cn, getNoticeContainer, newDiv, querySelector } from '../utils/html'
 import { AnimatedIcon } from '../component/animatedIcons/animatedIcons'
 import { MakeMsg } from '../core/Msg'
 import type { MsgType } from './message'
@@ -18,9 +18,9 @@ export function GmNotice(props: PropsMessage): MsgType {
     changeStyle($wrapper, [`--mh:${$wrapper.offsetHeight + 10}px`])
     changeAnimation($wrapper, cn('open'))
     setTimeout(() => {
-      const $icon = $wrapper.querySelector<HTMLElement>(`.${cn('notice-icon')}`)
+      const $icon = querySelector<HTMLElement>(`.${cn('notice-icon')}`,$wrapper)
       if ($icon) {
-        $icon.style.opacity = '1'
+        changeStyle($icon, ['opacity:1'])
       }
     }, 300)
   }

diff --git a/src/utils/html.ts b/src/utils/html.ts
@@ -20,9 +20,9 @@ export function newDiv(...className: string[]) {
 
 export function setMsgCount($el: HTMLElement, count: number) {
   const countClassName = cn('count')
-  let $count = $el.querySelector(`.${countClassName}`) as HTMLElement
+  let $count = querySelector(`.${countClassName}`, $el) as HTMLElement
   if (!$count) {
-    $count = document.createElement('span')
+    $count = newEl('span')
     $count.classList.add(countClassName)
 
     $el.append($count)
@@ -35,7 +35,7 @@ export function setMsgCount($el: HTMLElement, count: number) {
 }
 
 export const getContainer = () => {
-  let $root = document.querySelector<HTMLElement>(`.gmal`)
+  let $root = querySelector<HTMLElement>(`.gmal`)
 
   if (!$root) {
     $root = newDiv('gmal')
@@ -46,15 +46,15 @@ export const getContainer = () => {
 }
 
 export const getMessageContainer = () => {
-  let $root = document.querySelector<HTMLElement>(`.${cn('msg-box')}`)
+  let $root = querySelector<HTMLElement>(`.${cn('msg-box')}`)
   if ($root) return $root
   $root = newDiv(cn('msg-box'))
   getContainer().append($root)
   return $root
 }
 
 export const getNoticeContainer = () => {
-  let $wrapper = document.querySelector<HTMLElement>(`.${cn('notice-box')}`)
+  let $wrapper = querySelector<HTMLElement>(`.${cn('notice-box')}`)
   if ($wrapper) return $wrapper
   $wrapper = newDiv(cn('notice-box'))
   getContainer().append($wrapper)
@@ -70,17 +70,30 @@ export function changeStyle(el: HTMLElement, arr: string[]): void {
   el.style.cssText = `${original.concat(arr).join(';')};`
 }
 
+// 用于重置样式
+export function resetStyle(el: HTMLElement, arr: string[]): void {
+  arr.forEach((item) => {
+    el.style.removeProperty(item)
+  })
+}
+
 // 用于设置滚动条
 export function bodyScroll(lock = true) {
   const $body = document.body
   if (lock) {
     // set padding
-    $body.style.paddingRight = `${
+    changeStyle($body, ['overflow: hidden', `padding-right: ${
       window.innerWidth - document.documentElement.clientWidth
-    }px`
-    $body.style.overflow = 'hidden'
+    }px`])
   } else {
-    $body.style.overflow = ''
-    $body.style.paddingRight = ''
+    resetStyle($body, ['overflow', 'padding-right'])
   }
 }
+
+// 用于获取元素
+export function querySelector<T extends HTMLElement = HTMLElement>(
+  selector: string,
+  $el: HTMLElement = document.body,
+): T {
+  return $el.querySelector(selector) as T
+}