@konomi-app/kintone-utilities 1.7.2 → 1.7.4

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.
@@ -5,8 +5,8 @@ type ConstructorProps = Readonly<Partial<{
5
5
  export declare class LoadingOverlay {
6
6
  #private;
7
7
  constructor(props?: ConstructorProps);
8
- start(): void;
9
- stop(): void;
8
+ show(): void;
9
+ hide(): void;
10
10
  set label(label: string);
11
11
  set progress(progress: number);
12
12
  private render;
@@ -1,37 +1,41 @@
1
1
  import { css } from '@emotion/css';
2
- const ROOT_ID = '__🐸🐇__loading-overlay';
3
2
  export class LoadingOverlay {
4
3
  #shown;
5
4
  #label;
6
5
  #html;
7
6
  #progress;
8
7
  #root;
9
- #variable;
8
+ #progressElement;
9
+ #contentElement;
10
10
  constructor(props = {}) {
11
11
  this.#shown = false;
12
12
  this.#label = props.label || '';
13
13
  this.#html = '';
14
14
  this.#progress = props.progress ?? null;
15
15
  this.addStyle();
16
- const root = document.querySelector(`#${ROOT_ID}`) || document.createElement('div');
17
- root.id = ROOT_ID;
16
+ const root = document.createElement('div');
18
17
  this.#root = root;
19
18
  document.body.append(root);
20
19
  const container = document.createElement('div');
20
+ container.classList.add('__c');
21
21
  this.#root.append(container);
22
- container.innerHTML = `<div class="loader"></div>`;
23
- const variable = document.createElement('div');
24
- container.append(variable);
25
- this.#variable = variable;
22
+ container.innerHTML = `<div class="__l"></div>`;
23
+ const progressElement = document.createElement('div');
24
+ progressElement.classList.add('__p');
25
+ this.#progressElement = progressElement;
26
+ container.append(progressElement);
27
+ const contentElement = document.createElement('div');
28
+ this.#contentElement = contentElement;
29
+ container.append(contentElement);
26
30
  this.render();
27
31
  }
28
- start() {
32
+ show() {
29
33
  this.#shown = true;
30
34
  window.removeEventListener('beforeunload', this.beforeunload);
31
35
  document.body.style.overflow = 'hidden';
32
36
  this.render();
33
37
  }
34
- stop() {
38
+ hide() {
35
39
  this.#shown = false;
36
40
  window.removeEventListener('beforeunload', this.beforeunload);
37
41
  document.body.style.overflow = 'auto';
@@ -46,17 +50,17 @@ export class LoadingOverlay {
46
50
  this.render();
47
51
  }
48
52
  render() {
49
- if (this.#shown) {
50
- if (this.#html) {
51
- this.#variable.innerHTML = `<div>${this.#label}</div><div class="progress" style="width: ${this.#progress}%"></div>`;
53
+ this.#root.style.opacity = this.#shown ? '1' : '0';
54
+ this.#progressElement.style.width = `${this.#progress}%`;
55
+ if (this.#html) {
56
+ this.#contentElement.innerHTML = this.#html;
57
+ }
58
+ else {
59
+ if (this.#label instanceof Array) {
60
+ this.#contentElement.innerHTML = `<div>${this.#label.join('</div><div>')}</div>`;
52
61
  }
53
62
  else {
54
- if (this.#label instanceof Array) {
55
- this.#variable.innerHTML = `<div>${this.#label.join('<br>')}</div><div class="progress" style="width: ${this.#progress}%"></div>`;
56
- }
57
- else {
58
- this.#variable.innerHTML = `<div>${this.#label}</div><div class="progress" style="width: ${this.#progress}%"></div>`;
59
- }
63
+ this.#contentElement.innerText = this.#label;
60
64
  }
61
65
  }
62
66
  }
@@ -66,92 +70,83 @@ export class LoadingOverlay {
66
70
  event.returnValue = '';
67
71
  }
68
72
  addStyle() {
69
- document.body.classList.add(css `
70
- #${ROOT_ID} {
71
- font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ',
72
- 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
73
- color: #356;
74
- font-size: 17px;
73
+ this.#root.classList.add(css `
74
+ font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ',
75
+ 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
76
+ color: #356;
77
+ font-size: 17px;
78
+
79
+ overflow: hidden;
80
+ background-color: #fff6;
81
+ backdrop-filter: blur(10px);
82
+ box-sizing: content-box;
83
+
84
+ position: fixed;
85
+ inset: 0;
86
+ width: 100vw;
87
+ height: 100vh;
75
88
 
89
+ display: grid;
90
+ place-items: center;
91
+ transition: all 250ms ease;
92
+ z-index: 1000;
93
+ opacity: 0;
94
+ transition: all 250ms ease;
95
+
96
+ .__c {
97
+ display: flex;
98
+ flex-direction: column;
99
+ align-items: center;
100
+ justify-content: center;
101
+ gap: 32px;
102
+ padding: 32px 64px;
103
+ background-color: #fffc;
104
+ border-radius: 8px;
105
+ box-shadow: 0 5px 24px -6px #0002;
106
+ min-width: 300px;
107
+ max-width: 90vw;
108
+ min-height: 200px;
109
+ position: relative;
76
110
  overflow: hidden;
77
- background-color: #fff6;
78
- backdrop-filter: blur(10px);
79
- box-sizing: content-box;
111
+ }
80
112
 
81
- position: fixed;
82
- inset: 0;
83
- width: 100vw;
84
- height: 100vh;
113
+ .__l {
114
+ font-size: 48px;
115
+ width: 1em;
116
+ height: 1em;
117
+ position: relative;
118
+ border: 2px solid #2563ebaa;
119
+ animation: spin 2s infinite ease;
120
+ }
85
121
 
86
- display: grid;
87
- place-items: center;
122
+ .__p {
123
+ position: absolute;
124
+ bottom: 0px;
125
+ left: 0;
126
+ width: 60%;
127
+ height: 3px;
128
+ background-color: #2563eb;
88
129
  transition: all 250ms ease;
89
- z-index: 1000;
130
+ }
90
131
 
91
- @keyframes appear {
92
- from {
93
- opacity: 0;
94
- }
95
- to {
96
- opacity: 1;
97
- }
132
+ @keyframes spin {
133
+ 0% {
134
+ transform: rotate(0deg);
135
+ border-radius: 1em;
98
136
  }
99
-
100
- > div {
101
- display: flex;
102
- flex-direction: column;
103
- align-items: center;
104
- justify-content: center;
105
- gap: 32px;
106
- padding: 32px 64px;
107
- background-color: #fffc;
108
- border-radius: 8px;
109
- box-shadow: 0 5px 24px -6px #0002;
110
- min-width: 300px;
111
- max-width: 90vw;
112
- min-height: 200px;
113
- position: relative;
114
- overflow: hidden;
137
+ 20% {
138
+ transform: rotate(0deg);
115
139
  }
116
-
117
- .loader {
118
- font-size: 48px;
119
- width: 1em;
120
- height: 1em;
121
- position: relative;
122
- border: 2px solid #2563ebaa;
123
- animation: spin 2s infinite ease;
140
+ 30%,
141
+ 60% {
142
+ border-radius: 0.25em;
124
143
  }
125
-
126
- @keyframes spin {
127
- 0% {
128
- transform: rotate(0deg);
129
- border-radius: 1em;
130
- }
131
- 20% {
132
- transform: rotate(0deg);
133
- }
134
- 30%,
135
- 60% {
136
- border-radius: 0.25em;
137
- }
138
- 70% {
139
- transform: rotate(180deg);
140
- }
141
- 100% {
142
- transform: rotate(180deg);
143
- border-radius: 1em;
144
- }
144
+ 70% {
145
+ transform: rotate(180deg);
145
146
  }
146
-
147
- .progress {
148
- position: absolute;
149
- bottom: 0px;
150
- left: 0;
151
- width: 60%;
152
- height: 3px;
153
- background-color: #2563eb;
154
- transition: all 250ms ease;
147
+ 100% {
148
+ transform: rotate(180deg);
149
+ border-radius: 1em;
155
150
  }
156
151
  }
157
152
  `);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konomi-app/kintone-utilities",
3
- "version": "1.7.2",
3
+ "version": "1.7.4",
4
4
  "types": "dist/index.d.ts",
5
5
  "main": "dist/index.js",
6
6
  "repository": "https://github.com/local-bias/kintone-utilities.git",
@@ -8,7 +8,8 @@
8
8
  "license": "MIT",
9
9
  "scripts": {
10
10
  "build": "tsc",
11
- "prepare": "yarn run build"
11
+ "prepare": "yarn run build",
12
+ "play": "cd playground && yarn run dev"
12
13
  },
13
14
  "dependencies": {
14
15
  "@emotion/css": "^11.10.6",
@@ -0,0 +1,3 @@
1
+ {
2
+ "extends": "next/core-web-vitals"
3
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "typescript.tsdk": "node_modules\\typescript\\lib",
3
+ "typescript.enablePromptUseWorkspaceTsdk": true
4
+ }
@@ -0,0 +1,38 @@
1
+ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2
+
3
+ ## Getting Started
4
+
5
+ First, run the development server:
6
+
7
+ ```bash
8
+ npm run dev
9
+ # or
10
+ yarn dev
11
+ # or
12
+ pnpm dev
13
+ ```
14
+
15
+ Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16
+
17
+ You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18
+
19
+ [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20
+
21
+ The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22
+
23
+ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24
+
25
+ ## Learn More
26
+
27
+ To learn more about Next.js, take a look at the following resources:
28
+
29
+ - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30
+ - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31
+
32
+ You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33
+
34
+ ## Deploy on Vercel
35
+
36
+ The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37
+
38
+ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
@@ -0,0 +1,8 @@
1
+ /** @type {import('next').NextConfig} */
2
+ const nextConfig = {
3
+ experimental: {
4
+ appDir: true,
5
+ },
6
+ }
7
+
8
+ module.exports = nextConfig