@tnlmedia/inkmagine-gui 2.10.0 → 2.12.0

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.
Files changed (12) hide show
  1. package/README.md +6 -6
  2. package/README.zh-tw.md +80 -33
  3. package/dist/inkmagine-gui.es.js +795 -785
  4. package/dist/inkmagine-gui.es.js.map +1 -1
  5. package/dist/inkmagine-gui.umd.js +2 -2
  6. package/dist/inkmagine-gui.umd.js.map +1 -1
  7. package/dist/style/index.css +1 -1
  8. package/dist/tailwind.config.js +4 -1
  9. package/dist/types/components/ink-sidebar/InkSidebar.vue.d.ts +2 -2
  10. package/dist/types/components/input/field-data-interface.d.ts +5 -7
  11. package/dist/types/components/input/input-default-value.d.ts +1 -5
  12. package/package.json +1 -1
package/README.md CHANGED
@@ -53,20 +53,20 @@ export default {
53
53
 
54
54
 
55
55
  | input 類元件名稱 | 依賴的第三方套件 |
56
- |---------|
56
+ |---------|---------|
57
57
  | InkField | floating-vue |
58
58
  | InkText ||
59
59
  | InkUrl ||
60
60
  | InkTextarea ||
61
61
  | InkSelect | vue-select |
62
- | InkCheckbox ||
63
- | InkRadio ||
62
+ | InkCheckbox | @vueuse/core |
63
+ | InkRadio | @vueuse/core |
64
64
  | InkSwitch ||
65
65
  | InkElConfigProvider | element-plus |
66
- | InkDatetime, InkDate | element-plus |
67
- | InkDatetimerng, InkDaterng | element-plus |
66
+ | InkDatetime, InkDate | element-plus, dayjs |
67
+ | InkDatetimerng, InkDaterng | element-plus, dayjs |
68
68
  | InkHashtag | vue-select |
69
69
  | InkFieldMessage ||
70
70
  | InkErrorMessage ||
71
- - input 元件都有依賴 vee-validate
71
+ - input 元件都有依賴 vee-validate, vue-i18n, dayjs
72
72
  - 範例請見 cabinet 專案
package/README.zh-tw.md CHANGED
@@ -135,18 +135,18 @@ InkSidebar 是一個側邊欄組件，提供網站的主要導航功能，包含
135
135
  | 屬性名稱 | 類型 | 必填 | 說明 |
136
136
  |---------|------|------|------|
137
137
  | `currentAppName` | string | 是 | 當前應用程式名稱 |
138
- | `currentMainSwitchItem` | object | 是 | 當前選中的主要切換項目，包含以下屬性：<br>- `id`: 項目 ID<br>- `name`: 項目名稱<br>- `logo`: 項目圖標 URL |
139
- | `mainSwitchItems` | array | 是 | 主要切換項目列表，每個項目包含與 `currentMainSwitchItem` 相同的屬性 |
138
+ | `currentMainSwitchItem` | object | 否 | 當前選中的主要切換項目，包含以下屬性：<br>- `id`: 項目 ID<br>- `name`: 項目名稱<br>- `logo`: 項目圖標 URL |
139
+ | `mainSwitchItems` | array | 否 | 主要切換項目列表，每個項目包含與 `currentMainSwitchItem` 相同的屬性 |
140
140
  | `currentTabSwitchItemId` | string \| number | 否 | 當前選中的 tabSwitchItems 切換項目的 id |
141
141
  | `tabSwitchItems` | array | 否 | 標籤切換項目列表，每個項目包含與 `currentMainSwitchItem` 相同的屬性 |
142
- | `menu` | array | 是 | 選單項目列表，每個項目包含以下屬性：<br>- `id`: 項目 ID<br>- `name`: 項目名稱<br>- `icon`: 圖標類名<br>- `route`: 路由資訊（可選）<br>- `children`: 子選單項目（可選）<br>- `isAllow`: 是否允許訪問（可選） |
142
+ | `menu` | array | 是 | 選單項目列表，每個項目包含以下屬性：<br>- `id`: 項目 ID<br>- `name`: 項目名稱<br>- `icon`: 圖標類名<br>- `route`: 路由資訊（可選）<br>- `children`: 子選單項目（可選）<br>- `isAllow`: 是否允許訪問（可選），false 不顯示該項目 |
143
143
  | `currentMenuItemId` | string \| number | 是 | 當前選中的選單項目 ID |
144
144
 
145
145
  #### 事件說明
146
146
 
147
147
  | 事件名稱 | 參數 | 說明 |
148
148
  |---------|------|------|
149
- | `mainItemCheckSwitch` | `(item: SwitchItem, close: () => void)` | 當主要切換項目被點擊時觸發 |
149
+ | `mainItemCheckSwitch` | `(item: SwitchItem, close: () => void)` | 當主要切換項目被點擊時觸發，parameter close 可以將收風琴關閉 |
150
150
  | `tabItemCheckSwitch` | `(item: SwitchItem)` | 當標籤切換項目被點擊時觸發 |
151
151
 
152
152
  #### 選單結構範例
@@ -196,7 +196,8 @@ const menu = [
196
196
  #### 注意事項
197
197
  - 選單項目的 `isAllow` 屬性用於控制項目的顯示權限
198
198
  - 子選單項目的路由資訊必須包含 `name` 屬性
199
- - 側邊欄的折疊狀態會保存在 body 的 class 中
199
+ - 側邊欄的折疊狀態會保存在 `<body>` 的 class 中
200
+ - 需在 `<body>` 的 class 加上 `sidebar-dark Double-column`
200
201
  - InkSidebarMenu 組件使用 [Vue Router](https://router.vuejs.org/) 作為路由管理工具，請確保您的專案中已安裝此套件
201
202
  - 當使用 `tabSwitchItems` 時，需要同時提供 `currentTabSwitchItemId` 屬性
202
203
 
@@ -837,7 +838,7 @@ Inkmagine GUI 使用 Tailwind CSS 的字體大小系統，並提供響應式字
837
838
 
838
839
  #### Font Awesome 圖標字體
839
840
  ```css
840
- .tw-font-awesome /* Font Awesome 6 Pro 字體 */
841
+ .tw-font-awesome /* Font Awesome 6 Pro, Font Awesome 7 Pro 字體 */
841
842
  ```
842
843
 
843
844
  ### 使用範例
@@ -1035,12 +1036,13 @@ const { handleSubmit, handleReset, resetForm } = useForm({
1035
1036
 
1036
1037
  ```vue
1037
1038
  const { handleSubmit, setValues, setFieldValue } = useForm();
1038
- // 取得 data 後 (多 input)
1039
+ // 取得 data 後 (一次 set 多 field)
1039
1040
  setValues( { key:value[] })
1040
- // 或是 (單 input)
1041
+ // 或是 (一次 set 單 field)
1041
1042
  setFieldValue('key', ['value'])
1042
1043
  ```
1043
- - **valu 統一使用 array，讓單欄位可以儲存多筆資料，**
1044
+ - **key 使用 field.id (field 物件結構)，確保每個欄位都有唯一識別符，便於表單資料的對應和管理**
1045
+ - **value 統一使用 array，讓單欄位(field)可以儲存多筆資料**
1044
1046
 
1045
1047
  #### 支援的驗證規則
1046
1048
 
@@ -1555,25 +1557,53 @@ InkTextarea 提供多行文字輸入功能，支援字數統計和驗證。通
1555
1557
  - 請見 InkField 的 field 物件結構
1556
1558
 
1557
1559
  #### inputBind 物件結構（SelectInputBind）
1560
+ - 以下皆為非必填項目
1561
+
1562
+ ##### InkSelect 與 InkHashtag 通用項目
1563
+
1564
+ | 屬性名稱 | 類型 | 屬性來自套件 | 預設值 | 說明 |
1565
+ | ------- | -- | ----------- | ----- | --- |
1566
+ | label | `string` | 是 | `'name'` | 顯示標籤欄位（選項字串用的 key）|
1567
+ | activeStyle | `boolean` | 否 | `false` | 是否啟用活躍樣式，通常在 filter 功能時啟用 |
1568
+ | autoscroll | `boolean` | 是 | `false` | 請見第三方套件 props 說明 |
1569
+
1570
+
1571
+ ##### InkSelect 項目
1572
+ | 屬性名稱 | 類型 | 屬性來自套件 | 預設值 | 說明 |
1573
+ | ------- | -- | ----------- | ----- | --- |
1574
+ | options | `SelectOptions[]` `string[]` `number[]` | 是 | `[]` | 選項陣列 |
1575
+ | hasNextPage | `boolean` | 否 | `false` | 是否有下一頁（用於無限滾動功能） |
1576
+ | optionDivider | `number[]` | 否 | `[]` | 選項分隔線，最多可填入 [0,1,2] |
1577
+ | openFn | `() => void` | 否 | `undefined` | 開啟事件函數，在 Vue Select 的 onOpen 觸發 |
1578
+ | closeFn | `() => void` | 否 | `undefined` | 關閉事件函數，在 Vue Select 的 onClose 觸發 |
1579
+ | infiniteFn | `() => void` | 否 | `undefined` | 無限滾動函數 |
1580
+ | reduce | `(option: UnKnownOptions) => SelectReduceReturn` | 是 | `(option) => option.key` | 請見第三方套件 props 說明 |
1581
+ | searchable | `boolean` | 是 | `false` | 請見第三方套件 props 說明 |
1582
+ | selectable | `(option: UnKnownOptions) => boolean` | 是 | `(option) => !option.disabled` | 選擇條件函數，讀取 option.disabled 的值。請見第三方套件 props 說明 |
1583
+ | clearable | `boolean` | 是 | `required ? false : !disabled`| 當該欄位為避填項目，不可清除欄位值。欄位的 `disabled` 為 `true` 時也不可清除欄位值 |
1584
+ | filterable | `boolean` | 是 | `false` | 請見第三方套件 props 說明 |
1585
+ | inputId | string | 是 | 使用`field.id` 與 欄位 value 的 index 組合而成，例如：fieldId[0],fieldId[1] | 請見第三方套件 props 說明 |
1586
+
1558
1587
  ```js
1559
1588
  {
1560
- options: [], // 選項陣列
1561
- label: 'name', // 顯示標籤欄位(選項字串用的 key)
1562
- hasNextPage: false, // 是否有下一頁（可選）
1563
- activeStyle: false, // 是否啟用活躍樣式（可選），通常在 filter 功能時啟用
1564
- optionDivider: [], // 選項分隔線（可選），最多可填入[0,1,2]
1565
- openFn: () => {}, // 開啟事件函數（可選），在 Vue Select 的 onOpen 觸發
1566
- closeFn: () => {}, // 關閉事件函數（可選），在 Vue Select 的 onClose
1567
- infiniteFn: () => {}, // 無限滾動函數（可選）
1568
- reduce: (item) => item, // 值轉換函數（可選），return selected 項目的資料範圍，Vue Select 的 props
1569
- filterable: false, // 是否可搜尋（可選），Vue Select 的 props
1570
- autoscroll: false, // 是否自動滾動（可選），Vue Select 的 props
1571
- searchable: false, // 是否可搜尋（可選），Vue Select 的 props
1572
- selectable: (option) => !option.disabled // 選擇條件函數（可選），讀取 option.disabled 的 值，Vue Select 的 props
1589
+ options: [],
1590
+ label: 'name',
1591
+ hasNextPage: false,
1592
+ activeStyle: false,
1593
+ optionDivider: [],
1594
+ openFn: () => {},
1595
+ closeFn: () => {},
1596
+ infiniteFn: () => {},
1597
+ reduce: (item) => item.key,
1598
+ filterable: false,
1599
+ autoscroll: false,
1600
+ searchable: false,
1601
+ selectable: (option) => !option.disabled
1573
1602
  }
1574
1603
  ```
1575
1604
 
1576
1605
  #### options 物件結構（SelectOptions）
1606
+ ##### 物件結構（SelectOptions）
1577
1607
  ```js
1578
1608
  {
1579
1609
  key: 'value', // 選項值（必填），用於識別選項的唯一值
@@ -1587,8 +1617,11 @@ InkTextarea 提供多行文字輸入功能，支援字數統計和驗證。通
1587
1617
  [key: string]: unknown // 其他自定義屬性（可選），可根據需求添加任意屬性
1588
1618
  }
1589
1619
  ```
1590
- - `key` key 的使用需注意 inputBind.reduce
1591
- - `name` Key 與 inputBind.label 相同即可
1620
+ - `key` key 可更改，但 inputBind.reduce 需一起修改
1621
+ - `name` Key 可更改，但 inputBind.label 需一起修改
1622
+
1623
+ ##### Array of strings or Array of numbers 結構
1624
+ - 如果 `options` value 是 string[] or number[]，需調整 `reduce` 為 `reduce: (option) => option`
1592
1625
 
1593
1626
  **階層結構範例：**
1594
1627
  ```js
@@ -1615,6 +1648,7 @@ options: [
1615
1648
  ```
1616
1649
 
1617
1650
  #### 功能特色
1651
+ - vue-select Props 提供的 `clearable`，若欄位 `required`、`disabled` 為 `true`，`clearable` 預設會是 `false`
1618
1652
  - 支援搜尋功能
1619
1653
  - 支援無限滾動載入
1620
1654
  - 支援階層選項（透過 depth 屬性）
@@ -2001,17 +2035,30 @@ InkDatetimerng 提供日期時間範圍選擇功能。通常透過 InkField 元
2001
2035
  - 請見 InkField 的 field 物件結構
2002
2036
 
2003
2037
  #### inputBind 物件結構（HashtagInputBind）
2038
+ - 請查看 InkSelect 的 InkSelect 與 InkHashtag 通用項目
2039
+
2040
+ ##### InkHashtag 項目
2041
+
2042
+ | 屬性名稱 | 類型 | 屬性來自套件 | 預設值 | 說明 |
2043
+ | ------- | -- | ----------- | ----- | --- |
2044
+ | options | `HashtagOptions[]` | 是 | `[]` | 選項陣列 |
2045
+ | clearable | `boolean` | 是 | `tue` | 有利用第三方套件 slots `#selected-option` 修改以選項目的 html 結構，達到是否顯示清除按鈕 |
2046
+ | searchable | `boolean` | 是 | `true` | 請見第三方套件 props 說明 |
2047
+ | inputId | string | 是 | 使用 `field.id`，例如：fieldId | 請見第三方套件 props 說明 |
2048
+ | taggable | boolean | 是 | 使用 `field.limit`，`!field.limit` | 是否可透過 searchInput 增加沒有的選項，若 `field.limit` 為 `false`，則可增加沒有的選項|
2049
+ | filterable | boolean | 是 | 使用 `field.limit`，`field.limit` | 請見第三方套件 props 說明 |
2050
+ | multiple | boolean | 是，且不可改 | true | 多選欄位 |
2051
+
2052
+ - 該元件是否顯示清除按鈕，是透過 `disabled`，如果 value 為 `true`，則不顯示清除按鈕
2053
+
2004
2054
  ```js
2005
2055
  {
2006
- options: [], // 現有標籤選項
2007
- label: 'name', // 顯示標籤欄位
2008
- activeStyle: false, // 是否啟用活躍樣式（可選）
2009
- noDrop: false, // 是否禁用拖拽（可選），Vue Select 的 props
2010
- loading: false, // 是否顯示載入狀態（可選），Vue Select 的 props
2011
- clearable: true, // 是否可清除（可選），Vue Select 的 props
2012
- searchable: true, // 是否可搜尋（可選），Vue Select 的 props
2013
- filterable: false, // 是否可篩選（可選），Vue Select 的 props
2014
- autoscroll: false // 是否自動滾動（可選），Vue Select 的 props
2056
+ options: [],
2057
+ label: 'name',
2058
+ activeStyle: false,
2059
+ clearable: true,
2060
+ searchable: true,
2061
+ autoscroll: false,
2015
2062
  }
2016
2063
  ```
2017
2064