@tnlmedia/inkmagine-gui 0.2.0 → 1.0.1
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 +25 -0
- package/README.zh-tw.md +327 -0
- package/package.json +55 -3
- package/.editorconfig +0 -12
package/README.md
CHANGED
|
@@ -2,8 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
Inkmagine unify components and styles
|
|
4
4
|
|
|
5
|
+
## 安裝需求
|
|
6
|
+
套件使用 Tailwind 作為樣式基礎，使用前請確保已安裝 Tailwind
|
|
7
|
+
|
|
5
8
|
## Install
|
|
6
9
|
|
|
7
10
|
```bash
|
|
8
11
|
npm install @tnlmedia/inkmagine-gui
|
|
9
12
|
```
|
|
13
|
+
|
|
14
|
+
## style example
|
|
15
|
+
### tailwind config
|
|
16
|
+
```js
|
|
17
|
+
import {inkTailwindConfig} from '@tnlmedia/inkmagine-gui/tailwind.config.js'
|
|
18
|
+
export default {
|
|
19
|
+
...inkTailwindConfig,
|
|
20
|
+
content: [
|
|
21
|
+
'Set the file path to be scanned in the project'
|
|
22
|
+
],
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
<!-- example from example folder -->
|
|
27
|
+
## compoment example
|
|
28
|
+
|
|
29
|
+
| 元件名稱 | 範例 |
|
|
30
|
+
|---------|---------|
|
|
31
|
+
| InkButton | [範例程式碼](./ink-example/InkButton.md) |
|
|
32
|
+
| InkMenu | [範例程式碼](./ink-example/InkMenu.md) |
|
|
33
|
+
| InkDisclosure | [範例程式碼](./ink-example/InkDisclosure.md) |
|
|
34
|
+
|
package/README.zh-tw.md
ADDED
|
@@ -0,0 +1,327 @@
|
|
|
1
|
+
# Inkmagine GUI 工具
|
|
2
|
+
|
|
3
|
+
Inkmagine 是一個統一的組件和樣式庫，提供了一系列可重用的 Vue 組件。
|
|
4
|
+
|
|
5
|
+
## 安裝需求
|
|
6
|
+
套件使用 Tailwind 作為樣式基礎，使用前請確保已安裝 Tailwind
|
|
7
|
+
|
|
8
|
+
## 安裝
|
|
9
|
+
```bash
|
|
10
|
+
npm install @tnlmedia/inkmagine-gui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 可用樣式使用說明
|
|
14
|
+
### tailwind config
|
|
15
|
+
```js
|
|
16
|
+
import {inkTailwindConfig} from '@tnlmedia/inkmagine-gui/tailwind.config.js'
|
|
17
|
+
export default {
|
|
18
|
+
...inkTailwindConfig,
|
|
19
|
+
content: [
|
|
20
|
+
'Set the file path to be scanned in the project'
|
|
21
|
+
],
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 組件使用說明
|
|
26
|
+
|
|
27
|
+
### InkButton 按鈕組件
|
|
28
|
+
|
|
29
|
+
InkButton 提供了多種樣式和尺寸的按鈕。
|
|
30
|
+
|
|
31
|
+
#### 基本連結按鈕
|
|
32
|
+
```vue
|
|
33
|
+
<div class="tw-flex tw-gap-1">
|
|
34
|
+
<InkButton as="router-link" to="/" variant="base" theme="link">router-link</InkButton>
|
|
35
|
+
<InkButton variant="base" theme="link">tw-btn-link</InkButton>
|
|
36
|
+
<InkButton as="a" href="#" variant="base" theme="link">tw-btn-link</InkButton>
|
|
37
|
+
</div>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
#### 帶圖標的按鈕 (36px)
|
|
41
|
+
```vue
|
|
42
|
+
<div class="tw-flex tw-gap-1">
|
|
43
|
+
<InkButton variant="txt" theme="transparent">
|
|
44
|
+
<i class="far fa-sliders-h"></i>tw-btn-icon & txt
|
|
45
|
+
</InkButton>
|
|
46
|
+
<InkButton variant="txt" theme="gray">
|
|
47
|
+
<i class="far fa-sliders-h"></i>tw-btn-gray
|
|
48
|
+
</InkButton>
|
|
49
|
+
<InkButton variant="txt" theme="primary">
|
|
50
|
+
<i class="far fa-sliders-h"></i>tw-btn-primary
|
|
51
|
+
</InkButton>
|
|
52
|
+
</div>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
#### 中等尺寸按鈕 (32px)
|
|
56
|
+
```vue
|
|
57
|
+
<div class="tw-flex tw-gap-1">
|
|
58
|
+
<InkButton variant="txt" size="md" theme="transparent">
|
|
59
|
+
<i class="far fa-sliders-h"></i>tw-btn-icon & txt
|
|
60
|
+
</InkButton>
|
|
61
|
+
<InkButton variant="txt" size="md" theme="primary">
|
|
62
|
+
<i class="far fa-sliders-h"></i>tw-btn-primary
|
|
63
|
+
</InkButton>
|
|
64
|
+
</div>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
#### 小尺寸按鈕 (24px)
|
|
68
|
+
```vue
|
|
69
|
+
<div class="tw-flex tw-gap-1">
|
|
70
|
+
<InkButton variant="icon" size="xs" theme="transparent">
|
|
71
|
+
<i class="far fa-sliders-h"></i>
|
|
72
|
+
</InkButton>
|
|
73
|
+
<InkButton variant="icon" size="xs" theme="primary">
|
|
74
|
+
<i class="far fa-sliders-h"></i>
|
|
75
|
+
</InkButton>
|
|
76
|
+
</div>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### 圖標按鈕 (36px)
|
|
80
|
+
```vue
|
|
81
|
+
<div class="tw-flex tw-gap-1">
|
|
82
|
+
<InkButton as="router-link" to="/" variant="icon" theme="transparent">
|
|
83
|
+
<i class="far fa-sliders-h"></i>
|
|
84
|
+
</InkButton>
|
|
85
|
+
<InkButton variant="icon" theme="transparent">
|
|
86
|
+
<i class="far fa-sliders-h"></i>
|
|
87
|
+
</InkButton>
|
|
88
|
+
<InkButton variant="icon" theme="gray">
|
|
89
|
+
<i class="far fa-sliders-h"></i>
|
|
90
|
+
</InkButton>
|
|
91
|
+
<InkButton variant="icon" theme="info">
|
|
92
|
+
<i class="far fa-sliders-h"></i>
|
|
93
|
+
</InkButton>
|
|
94
|
+
<InkButton variant="icon" theme="primary">
|
|
95
|
+
<i class="far fa-sliders-h"></i>
|
|
96
|
+
</InkButton>
|
|
97
|
+
<InkButton variant="icon" theme="outline-gray">
|
|
98
|
+
<i class="far fa-sliders-h"></i>
|
|
99
|
+
</InkButton>
|
|
100
|
+
<InkButton as="a" href="#" variant="icon" theme="primary">
|
|
101
|
+
<i class="far fa-sliders-h"></i>
|
|
102
|
+
</InkButton>
|
|
103
|
+
</div>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
#### 中等尺寸圖標按鈕 (32px)
|
|
107
|
+
```vue
|
|
108
|
+
<div class="tw-flex tw-gap-1">
|
|
109
|
+
<InkButton as="router-link" to="/" variant="icon" size="md" theme="transparent">
|
|
110
|
+
<i class="far fa-sliders-h"></i>
|
|
111
|
+
</InkButton>
|
|
112
|
+
<InkButton variant="icon" size="md" theme="transparent">
|
|
113
|
+
<i class="far fa-sliders-h"></i>
|
|
114
|
+
</InkButton>
|
|
115
|
+
<InkButton variant="icon" size="md" theme="gray">
|
|
116
|
+
<i class="far fa-sliders-h"></i>
|
|
117
|
+
</InkButton>
|
|
118
|
+
<InkButton variant="icon" size="md" theme="info">
|
|
119
|
+
<i class="far fa-sliders-h"></i>
|
|
120
|
+
</InkButton>
|
|
121
|
+
<InkButton variant="icon" size="md" theme="primary">
|
|
122
|
+
<i class="far fa-sliders-h"></i>
|
|
123
|
+
</InkButton>
|
|
124
|
+
<InkButton variant="icon" size="md" theme="outline-gray">
|
|
125
|
+
<i class="far fa-sliders-h"></i>
|
|
126
|
+
</InkButton>
|
|
127
|
+
<InkButton as="a" href="#" variant="icon" size="md" theme="primary">
|
|
128
|
+
<i class="far fa-sliders-h"></i>
|
|
129
|
+
</InkButton>
|
|
130
|
+
</div>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
#### 禁用狀態
|
|
134
|
+
```vue
|
|
135
|
+
<div class="tw-flex tw-gap-1">
|
|
136
|
+
<InkButton variant="txt" disabled theme="transparent">
|
|
137
|
+
<i class="far fa-sliders-h"></i>disabled
|
|
138
|
+
</InkButton>
|
|
139
|
+
<InkButton variant="txt" disabled theme="primary">
|
|
140
|
+
<i class="far fa-sliders-h"></i>disabled
|
|
141
|
+
</InkButton>
|
|
142
|
+
</div>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
#### 載入狀態
|
|
146
|
+
```vue
|
|
147
|
+
<div class="tw-flex tw-gap-1">
|
|
148
|
+
<InkButton :disabled="testLoading" :loading="testLoading" variant="txt" theme="primary">
|
|
149
|
+
<i class="far fa-sliders-h"></i>loading
|
|
150
|
+
</InkButton>
|
|
151
|
+
</div>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
#### InkButton 屬性說明
|
|
155
|
+
|
|
156
|
+
| 屬性名稱 | 類型 | 預設值 | 可選值 | 說明 |
|
|
157
|
+
|---------|------|--------|--------|------|
|
|
158
|
+
| `as` | string | 'button' | 'a' \| 'button' \| 'router-link' | 指定按鈕渲染的標籤類型。當需要連結功能時，可設為 'a' 或 'router-link' |
|
|
159
|
+
| `type` | string | 'button' | 'button' \| 'submit' \| 'reset' | 當 `as="button"` 時，指定按鈕的類型 |
|
|
160
|
+
| `size` | string | - | 'md' \| 'xs' | 按鈕尺寸。'md' 為中等尺寸(32px)，'xs' 為小尺寸(24px)，不指定則為預設尺寸(36px) |
|
|
161
|
+
| `variant` | string | 'base' | 'base' \| 'txt' \| 'icon' | 按鈕變體。'base' 為基礎按鈕，'txt' 為文字按鈕，'icon' 為圖標按鈕 |
|
|
162
|
+
| `theme` | string | 'transparent' | 'primary' \| 'info' \| 'gray' \| 'outline-gray' \| 'link' \| 'transparent' | 按鈕主題樣式 |
|
|
163
|
+
| `disabled` | boolean | false | true \| false | 是否禁用按鈕。當為 true 時，按鈕無法點擊且會套用禁用樣式 |
|
|
164
|
+
| `loading` | boolean | false | true \| false | 是否顯示載入狀態。當為 true 時，會顯示載入動畫並隱藏按鈕內容 |
|
|
165
|
+
|
|
166
|
+
### InkMenu 選單組件
|
|
167
|
+
|
|
168
|
+
InkMenu 是基於 @headlessui/vue 的 Menu 組件封裝，提供了一個完整的下拉選單解決方案。
|
|
169
|
+
|
|
170
|
+
#### 基本用法
|
|
171
|
+
```vue
|
|
172
|
+
<InkMenu v-slot="{open, close}">
|
|
173
|
+
<InkMenuButton>
|
|
174
|
+
<InkButton variant="txt" theme="transparent">
|
|
175
|
+
<i class="far fa-grip-horizontal tw-text-base tw-text-gray-700"></i>
|
|
176
|
+
{{ $t('navbar.apps.service') }}
|
|
177
|
+
</InkButton>
|
|
178
|
+
</InkMenuButton>
|
|
179
|
+
<InkMenuItems>
|
|
180
|
+
<InkMenuItemsWrapper>
|
|
181
|
+
<InkMenuItem>
|
|
182
|
+
<router-link :to="{ name: 'article-delivery-overview' }">
|
|
183
|
+
<div class="content">
|
|
184
|
+
<p class="tw-font-semibold tw-text-sm">test</p>
|
|
185
|
+
<p class="sub-text tw-text-mute tw-text-xs">
|
|
186
|
+
{{ $t(`navbar.apps.dashboard.description`) }}
|
|
187
|
+
</p>
|
|
188
|
+
</div>
|
|
189
|
+
</router-link>
|
|
190
|
+
</InkMenuItem>
|
|
191
|
+
</InkMenuItemsWrapper>
|
|
192
|
+
</InkMenuItems>
|
|
193
|
+
</InkMenu>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
#### 進階用法
|
|
197
|
+
```vue
|
|
198
|
+
<InkMenu v-slot="{open, close}">
|
|
199
|
+
<InkMenuButton>
|
|
200
|
+
<InkButton variant="txt" theme="transparent">
|
|
201
|
+
<i class="far fa-grip-horizontal tw-text-base tw-text-gray-700"></i>
|
|
202
|
+
{{ $t('navbar.apps.service') }}
|
|
203
|
+
</InkButton>
|
|
204
|
+
</InkMenuButton>
|
|
205
|
+
<InkMenuItems>
|
|
206
|
+
<InkMenuItemsWrapper>
|
|
207
|
+
<InkMenuItem
|
|
208
|
+
as="div"
|
|
209
|
+
class="test"
|
|
210
|
+
v-slot="{active}"
|
|
211
|
+
href="https://www.inkmaginecms.com/dashboard"
|
|
212
|
+
target="_blank"
|
|
213
|
+
@mouseenter="console.log('mouseenter')"
|
|
214
|
+
>
|
|
215
|
+
<div class="content">
|
|
216
|
+
{{ active }}
|
|
217
|
+
<p class="tw-font-semibold tw-text-sm">{{ $t('navbar.apps.dashboard.label') }}</p>
|
|
218
|
+
<p class="sub-text tw-text-mute tw-text-xs">
|
|
219
|
+
{{ $t(`navbar.apps.dashboard.description`) }}
|
|
220
|
+
</p>
|
|
221
|
+
</div>
|
|
222
|
+
</InkMenuItem>
|
|
223
|
+
</InkMenuItemsWrapper>
|
|
224
|
+
</InkMenuItems>
|
|
225
|
+
</InkMenu>
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
#### 多個選單項目容器
|
|
229
|
+
```vue
|
|
230
|
+
<InkMenu>
|
|
231
|
+
<!-- 第一個選單按鈕 -->
|
|
232
|
+
<VTooltip>
|
|
233
|
+
<InkMenuButton :disabled="isLock" variant="icon" theme="transparent" @click="toggleMoreList" ref="moreListBtn">
|
|
234
|
+
<InkButton>
|
|
235
|
+
<i class="far fa-ellipsis-v fa-fw tw-text-base"></i>
|
|
236
|
+
</InkButton>
|
|
237
|
+
</InkMenuButton>
|
|
238
|
+
<template #popper>
|
|
239
|
+
more
|
|
240
|
+
</template>
|
|
241
|
+
</VTooltip>
|
|
242
|
+
|
|
243
|
+
<!-- 第一個選單項目容器 -->
|
|
244
|
+
<InkMenuItems :static="true" :unmount="false" class="tw-translate-y-4" v-show="!isRevisionList && isMoreList">
|
|
245
|
+
<InkMenuItemsWrapper>
|
|
246
|
+
<InkMenuItem :disabled="isLock" @click.prevent="openCopyArticle(); hideMoreList();" type="button" as="button">
|
|
247
|
+
<i class="far fa-copy fa-fw tw-text-base icon"></i>
|
|
248
|
+
{{ trans('article.copy_article.title') }}
|
|
249
|
+
</InkMenuItem>
|
|
250
|
+
<InkMenuItem as="button" type="button" @click="toggleReversionList" :disabled="isLock">
|
|
251
|
+
<i class="far fa-history fa-fw tw-text-base icon"></i>
|
|
252
|
+
{{ trans('article.revisions.title') }}
|
|
253
|
+
</InkMenuItem>
|
|
254
|
+
</InkMenuItemsWrapper>
|
|
255
|
+
</InkMenuItems>
|
|
256
|
+
|
|
257
|
+
<!-- 第二個選單項目容器 -->
|
|
258
|
+
<InkMenuItems class="js-revision-list tw-translate-y-4 tw-overflow-hidden tw-py-0" :static="true" :unmount="false">
|
|
259
|
+
<!-- 標題欄 -->
|
|
260
|
+
<div class="tw-flex tw-items-center tw-relative tw-px-3 tw-py-2.5 tw-text-base tw-font-semibold tw-text-gray-900 after:tw-absolute after:tw-inset-x-0 after:tw-bottom-0 after:tw-h-[1px] after:tw-bg-gray-300 after:tw-content-['']">
|
|
261
|
+
<InkButton variant="icon" theme="transparent" class="tw-mr-6" @click="$emit('hideReversionListEmit')">
|
|
262
|
+
<i class="far fa-chevron-left fa-fw"></i>
|
|
263
|
+
</InkButton>
|
|
264
|
+
{{ trans('article.revisions.title') }}
|
|
265
|
+
</div>
|
|
266
|
+
|
|
267
|
+
<!-- 選單項目列表 -->
|
|
268
|
+
<InkMenuItemsWrapper class="tw-max-h-[236px] tw-overflow-auto tw-py-2.5">
|
|
269
|
+
<InkMenuItem v-slot="{ active }" v-for="item in dropdownList" :key="item.id">
|
|
270
|
+
<a href :class="[{ 'tw-bg-primary-50': active }]" @click.prevent="onItemClick(item.id)">
|
|
271
|
+
<div>
|
|
272
|
+
<p class="tw-text-base tw-text-gray-900">{{ item.modifier }}</p>
|
|
273
|
+
<p class="tw-text-xs tw-text-gray-700">{{ item.created }}</p>
|
|
274
|
+
<p class="tw-text-xs tw-text-gray-700">{{ item.status }}</p>
|
|
275
|
+
</div>
|
|
276
|
+
</a>
|
|
277
|
+
</InkMenuItem>
|
|
278
|
+
|
|
279
|
+
<!-- 載入狀態 -->
|
|
280
|
+
<div v-if="isLoading || dropdownList.length === 0" class="tw-flex tw-h-12 tw-items-center tw-justify-center tw-pt-2">
|
|
281
|
+
<span v-if="isLoading" class="spinner-border spinner-border-sm" role="status"></span>
|
|
282
|
+
<p v-else class="tw-text-gray-900">{{ trans('datatable.no_data') }}</p>
|
|
283
|
+
</div>
|
|
284
|
+
|
|
285
|
+
<!-- 無限滾動觸發器 -->
|
|
286
|
+
<div v-if="targetIsVisible" ref="target"></div>
|
|
287
|
+
</InkMenuItemsWrapper>
|
|
288
|
+
</InkMenuItems>
|
|
289
|
+
</InkMenu>
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
#### InkMenu 相關組件說明
|
|
293
|
+
|
|
294
|
+
| 組件名稱 | @headlessui/vue 組件名稱 | 說明 | 屬性 | 預設值 | 可選值 |
|
|
295
|
+
|---------|-------------------------|------|------|--------|--------|
|
|
296
|
+
| `InkMenu` | `Menu` | 選單容器，管理選單的狀態和行為 | `as` | 'div' | string \| Component |
|
|
297
|
+
| `InkMenuButton` | `MenuButton` | 觸發按鈕，控制選單的開啟/關閉。<br> `as` 是 template 時 props 還是要從 `InkMenuButton` 往下傳遞。 | `as` | 'template' | string \| Component |
|
|
298
|
+
| `InkMenuItems` | `MenuItems` | 選單項目容器，包含所有選單項目 | - | - | - |
|
|
299
|
+
| `InkMenuItemsWrapper` | - | 選單項目包裝器，用於自定義選單項目的樣式 | - | - | - |
|
|
300
|
+
| `InkMenuItem` | `MenuItem` | 選單項目，可以是連結、按鈕或其他元素。<br> `as` 是 template 時，子層不能只放字串 | `as` | 'template' | string |
|
|
301
|
+
|
|
302
|
+
#### 組件關係
|
|
303
|
+
```
|
|
304
|
+
InkMenu
|
|
305
|
+
├── InkMenuButton (觸發按鈕)
|
|
306
|
+
└── InkMenuItems (選單項目容器)
|
|
307
|
+
├── 其他自定義內容（可選）
|
|
308
|
+
└── InkMenuItemsWrapper (選單項目包裝器)
|
|
309
|
+
└── InkMenuItem (選單項目)
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
#### 使用說明
|
|
313
|
+
1. `InkMenu` 提供 `v-slot="{open, close}"` 用於控制選單的開啟和關閉
|
|
314
|
+
2. `InkMenuItem` 提供 `v-slot="{active}"` 用於獲取當前項目的激活狀態
|
|
315
|
+
3. 所有組件都支援 `v-bind="restAttrs"` 來傳遞額外的屬性
|
|
316
|
+
4. 可以通過 `as` 屬性來自定義渲染的標籤或組件
|
|
317
|
+
5. `v-slot` 提供的屬性（如 `open`、`close`、`active`）都是基於 @headlessui/vue 的 Menu 組件
|
|
318
|
+
|
|
319
|
+
#### 事件
|
|
320
|
+
- `InkMenuButton` 支援所有標準的 DOM 事件
|
|
321
|
+
- `InkMenuItem` 支援所有標準的 DOM 事件
|
|
322
|
+
- 選單項目可以通過 `@click`、`@mouseenter` 等事件來處理互動
|
|
323
|
+
|
|
324
|
+
#### 樣式
|
|
325
|
+
- 所有組件都預設套用了相應的樣式類
|
|
326
|
+
- 可以通過 `class` 屬性來自定義樣式
|
|
327
|
+
- 支援 Tailwind CSS 的樣式類
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tnlmedia/inkmagine-gui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Inkmagine GUI components",
|
|
5
5
|
"author": "TNL Media Group <to.it@tnlmediagene.com>",
|
|
6
6
|
"keywords": [
|
|
@@ -8,10 +8,62 @@
|
|
|
8
8
|
"vue",
|
|
9
9
|
"components"
|
|
10
10
|
],
|
|
11
|
-
"
|
|
11
|
+
"type": "module",
|
|
12
|
+
"main": "./dist/inkmagine-gui.cjs.js",
|
|
13
|
+
"module": "./dist/inkmagine-gui.es.js",
|
|
14
|
+
"types": "./dist/types/index.d.ts",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/types/index.d.ts",
|
|
18
|
+
"import": "./dist/inkmagine-gui.es.js",
|
|
19
|
+
"require": "./dist/inkmagine-gui.cjs.js"
|
|
20
|
+
},
|
|
21
|
+
"./tailwind.config.js": "./dist/tailwind.config.js"
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"scripts": {
|
|
27
|
+
"dev": "vite",
|
|
28
|
+
"build": "vue-tsc && vite build",
|
|
29
|
+
"preview": "vite preview",
|
|
30
|
+
"prod": "vite build",
|
|
31
|
+
"sandbox": "vite build",
|
|
32
|
+
"stage": "vite build",
|
|
33
|
+
"watch": "vue-tsc -b && vite build --watch --mode development"
|
|
34
|
+
},
|
|
35
|
+
"peerDependencies": {
|
|
36
|
+
"@headlessui/vue": "^1.7.23",
|
|
37
|
+
"tailwindcss": "^3.4.14",
|
|
38
|
+
"vue": "^3.2.0"
|
|
39
|
+
},
|
|
12
40
|
"repository": {
|
|
13
41
|
"type": "git",
|
|
14
42
|
"url": "git+https://github.com/tnlmedia/inkmagine-gui.git"
|
|
15
43
|
},
|
|
16
|
-
"license": "Apache-2.0"
|
|
44
|
+
"license": "Apache-2.0",
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@types/node": "^22.13.14",
|
|
47
|
+
"@typescript-eslint/eslint-plugin": "^8.28.0",
|
|
48
|
+
"@typescript-eslint/parser": "^8.28.0",
|
|
49
|
+
"@vitejs/plugin-vue": "^5.2.3",
|
|
50
|
+
"@vue/tsconfig": "^0.7.0",
|
|
51
|
+
"eslint": "^9.23.0",
|
|
52
|
+
"eslint-config-prettier": "^10.1.1",
|
|
53
|
+
"eslint-plugin-prettier": "^5.2.5",
|
|
54
|
+
"prettier": "^3.5.3",
|
|
55
|
+
"sass-embedded": "^1.86.3",
|
|
56
|
+
"tailwindcss": "^3.4.14",
|
|
57
|
+
"typescript": "^5.8.2",
|
|
58
|
+
"vite": "^6.2.3",
|
|
59
|
+
"vite-plugin-dts": "^4.5.3",
|
|
60
|
+
"vite-plugin-lib-inject-css": "^2.2.1",
|
|
61
|
+
"vite-plugin-static-copy": "^2.3.1",
|
|
62
|
+
"vue": "^3.5.13",
|
|
63
|
+
"vue-i18n": "^11.1.3",
|
|
64
|
+
"vue-tsc": "^2.2.8"
|
|
65
|
+
},
|
|
66
|
+
"dependencies": {
|
|
67
|
+
"@headlessui/vue": "^1.7.23"
|
|
68
|
+
}
|
|
17
69
|
}
|