@ninebone/util 0.9.170
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -0
- package/dist/css/nine-util.css +51 -0
- package/dist/nine-util.js +1559 -0
- package/dist/nine-util.js.map +1 -0
- package/dist/nine-util.umd.js +2 -0
- package/dist/nine-util.umd.js.map +1 -0
- package/package.json +45 -0
package/README.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# @nine-lab/nine-util
|
|
2
|
+
|
|
3
|
+
실시간 협업, 판서 및 효율적인 디버깅을 위한 유틸리티 라이브러리입니다.
|
|
4
|
+
|
|
5
|
+
## 설치
|
|
6
|
+
npm install @nine-lab/nine-util
|
|
7
|
+
|
|
8
|
+
## 사용법
|
|
9
|
+
1. 실시간 로그 추적 (Trace)
|
|
10
|
+
단순한 console.log 대신 서비스별로 색상과 이름표를 붙여 가독성 높은 로그를 남길 수 있습니다.
|
|
11
|
+
|
|
12
|
+
import { trace } from '@nine-lab/nine-util';
|
|
13
|
+
|
|
14
|
+
// 1. 초기화 (이름과 색상 설정)
|
|
15
|
+
trace.init("NineBoard", "#4CAF50");
|
|
16
|
+
|
|
17
|
+
// 2. 사용
|
|
18
|
+
trace.log("서버 연결 시도...");
|
|
19
|
+
trace.warn("연결 지연 발생");
|
|
20
|
+
trace.error("연결 실패", err);
|
|
21
|
+
|
|
22
|
+
// 배포 시 로그 끄기
|
|
23
|
+
if (import.meta.env.PROD) trace.disable();
|
|
24
|
+
|
|
25
|
+
2. 작업 최적화 (TaskDebouncer)
|
|
26
|
+
비동기 작업이나 잦은 이벤트 발생 시 중복 실행을 방지하고 순차적으로 처리합니다.
|
|
27
|
+
|
|
28
|
+
import { trace } from '@nine-lab/nine-util';
|
|
29
|
+
|
|
30
|
+
// 1. 초기화 (이름과 색상 설정)
|
|
31
|
+
trace.init("NineBoard", "#4CAF50");
|
|
32
|
+
|
|
33
|
+
// 2. 사용
|
|
34
|
+
trace.log("서버 연결 시도...");
|
|
35
|
+
trace.warn("연결 지연 발생");
|
|
36
|
+
trace.error("연결 실패", err);
|
|
37
|
+
|
|
38
|
+
// 배포 시 로그 끄기
|
|
39
|
+
if (import.meta.env.PROD) trace.disable();
|
|
40
|
+
|
|
41
|
+
## API Reference
|
|
42
|
+
1. Trace
|
|
43
|
+
trace.init(name, color): 로거의 헤더 이름과 테마 색상을 설정합니다.
|
|
44
|
+
trace.enable() / trace.disable(): 로그 출력 여부를 제어합니다.
|
|
45
|
+
trace.log() / .warn() / .error(): 스타일이 적용된 로그를 출력합니다.
|
|
46
|
+
|
|
47
|
+
2. TaskDebouncer
|
|
48
|
+
new TaskDebouncer(delay): 대기 시간을 설정하여 인스턴스를 생성합니다.
|
|
49
|
+
execute(task): 설정된 딜레이 이후 작업을 수행하며 중복 실행을 방지합니다.
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
:host(nine-splitter.h) {
|
|
2
|
+
div.inner-container {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: row;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
align-items: center;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
div.grip {
|
|
10
|
+
background-repeat: no-repeat;
|
|
11
|
+
background-position: center;
|
|
12
|
+
filter: drop-shadow(0 0 0.5px #666);
|
|
13
|
+
transition: filter 0.2s ease;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
div.grip:hover {
|
|
17
|
+
filter: drop-shadow(0 0 1px #333);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:host(nine-splitter.h) {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: row;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
align-items: center;
|
|
26
|
+
--border: 1px solid red;
|
|
27
|
+
--width: 8px;
|
|
28
|
+
|
|
29
|
+
div.grip {
|
|
30
|
+
cursor: col-resize;
|
|
31
|
+
display: flex;
|
|
32
|
+
height: 100%;
|
|
33
|
+
width: 8px;
|
|
34
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15'><circle cx='10' cy='3' r='1.5' fill='%23999'/><circle cx='10' cy='8' r='1.5' fill='%23999'/><circle cx='10' cy='13' r='1.5' fill='%23999'/></svg>");
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:host(nine-splitter.v) {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
height: 8px;
|
|
42
|
+
|
|
43
|
+
div.grip {
|
|
44
|
+
cursor: row-resize
|
|
45
|
+
display: flex;
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 8px;
|
|
48
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='20'><circle cx='3' cy='10' r='1.5' fill='%23999'/><circle cx='8' cy='10' r='1.5' fill='%23999'/><circle cx='13' cy='10' r='1.5' fill='%23999'/></svg>");
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|