rayyy-vue-table-components 1.0.1 → 1.0.3
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 +56 -8
- package/dist/index.es.js +5116 -3661
- package/dist/index.umd.js +7 -7
- package/dist/rayyy-vue-table-components.css +1 -1
- package/package.json +6 -3
- package/src/components/BaseBtn.vue +110 -0
- package/src/components/BaseDialog.vue +101 -0
package/README.md
CHANGED
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
## 安裝
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
|
-
npm install
|
|
16
|
+
npm install rayyy-vue-table-components
|
|
17
17
|
# 或
|
|
18
|
-
yarn add
|
|
18
|
+
yarn add rayyy-vue-table-components
|
|
19
19
|
# 或
|
|
20
|
-
pnpm add
|
|
20
|
+
pnpm add rayyy-vue-table-components
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## 使用方法
|
|
@@ -26,8 +26,8 @@ pnpm add @your-scope/vue-table-components
|
|
|
26
26
|
|
|
27
27
|
```typescript
|
|
28
28
|
import { createApp } from 'vue'
|
|
29
|
-
import VueTableComponents from '
|
|
30
|
-
import '
|
|
29
|
+
import VueTableComponents from 'rayyy-vue-table-components'
|
|
30
|
+
import 'rayyy-vue-table-components/dist/rayyy-vue-table-components.css'
|
|
31
31
|
|
|
32
32
|
const app = createApp(App)
|
|
33
33
|
app.use(VueTableComponents)
|
|
@@ -43,12 +43,20 @@ app.use(VueTableComponents)
|
|
|
43
43
|
:loading="loading"
|
|
44
44
|
@column-sort-change="handleSortChange"
|
|
45
45
|
/>
|
|
46
|
+
|
|
47
|
+
<BaseBtn type="primary" @click="showDialog = true">
|
|
48
|
+
打開對話框
|
|
49
|
+
</BaseBtn>
|
|
50
|
+
|
|
51
|
+
<BaseDialog v-model="showDialog" title="確認操作">
|
|
52
|
+
<p>您確定要執行此操作嗎？</p>
|
|
53
|
+
</BaseDialog>
|
|
46
54
|
</template>
|
|
47
55
|
|
|
48
56
|
<script setup lang="ts">
|
|
49
|
-
import { BaseTable } from '
|
|
50
|
-
import type { TableColumn, SortChangValue } from '
|
|
51
|
-
import '
|
|
57
|
+
import { BaseTable, BaseBtn, BaseDialog } from 'rayyy-vue-table-components'
|
|
58
|
+
import type { TableColumn, SortChangValue } from 'rayyy-vue-table-components'
|
|
59
|
+
import 'rayyy-vue-table-components/dist/rayyy-vue-table-components.css'
|
|
52
60
|
|
|
53
61
|
interface User {
|
|
54
62
|
id: number
|
|
@@ -101,6 +109,46 @@ const handleSortChange = (sortInfo: SortChangValue<User>) => {
|
|
|
101
109
|
| cell-click | `column: TableColumn<T>, row: T` | 單元格點擊 |
|
|
102
110
|
| column-sort-change | `value: SortChangValue<T>` | 列排序變更 |
|
|
103
111
|
|
|
112
|
+
### BaseTable Props
|
|
113
|
+
|
|
114
|
+
| 屬性 | 類型 | 默認值 | 說明 |
|
|
115
|
+
|------|------|--------|------|
|
|
116
|
+
| data | `T[]` | `[]` | 表格數據 |
|
|
117
|
+
| columns | `TableColumn<T>[]` | `[]` | 表格列配置 |
|
|
118
|
+
| loading | `boolean` | `false` | 加載狀態 |
|
|
119
|
+
| showSelection | `boolean` | `false` | 是否顯示選擇列 |
|
|
120
|
+
| showSummary | `boolean` | `false` | 是否顯示合計行 |
|
|
121
|
+
| showOverFlowTooltip | `boolean` | `false` | 是否顯示溢出提示 |
|
|
122
|
+
| summaryMethod | `Function` | - | 合計行計算方法 |
|
|
123
|
+
| baseTableRowClassName | `Function` | - | 行樣式類名函數 |
|
|
124
|
+
|
|
125
|
+
### BaseBtn Props
|
|
126
|
+
|
|
127
|
+
| 屬性 | 類型 | 默認值 | 說明 |
|
|
128
|
+
|------|------|--------|------|
|
|
129
|
+
| text | `string` | - | 按鈕文字 |
|
|
130
|
+
| type | `'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger'` | `'default'` | 按鈕類型 |
|
|
131
|
+
| size | `'default' \| 'small' \| 'large'` | `'default'` | 按鈕尺寸 |
|
|
132
|
+
| plain | `boolean` | `false` | 是否為樸素按鈕 |
|
|
133
|
+
| disabled | `boolean` | `false` | 是否禁用 |
|
|
134
|
+
| loading | `boolean` | `false` | 是否顯示加載狀態 |
|
|
135
|
+
| icon | `object` | - | 圖標 |
|
|
136
|
+
| link | `boolean` | `false` | 是否為文字按鈕 |
|
|
137
|
+
| isFill | `boolean` | `false` | 是否為填充樣式 |
|
|
138
|
+
|
|
139
|
+
### BaseDialog Props
|
|
140
|
+
|
|
141
|
+
| 屬性 | 類型 | 默認值 | 說明 |
|
|
142
|
+
|------|------|--------|------|
|
|
143
|
+
| modelValue | `boolean` | - | 對話框顯示狀態 |
|
|
144
|
+
| title | `string` | - | 對話框標題 |
|
|
145
|
+
| subTitle | `string` | - | 副標題 |
|
|
146
|
+
| customWidth | `string` | - | 自定義寬度 |
|
|
147
|
+
| isWaring | `boolean` | `false` | 是否為警告對話框 |
|
|
148
|
+
| isPrimary | `boolean` | `false` | 是否為主要對話框 |
|
|
149
|
+
| bodyLoading | `boolean` | `false` | 內容區域加載狀態 |
|
|
150
|
+
| submitLoading | `boolean` | `false` | 提交按鈕加載狀態 |
|
|
151
|
+
|
|
104
152
|
### TableColumn 接口
|
|
105
153
|
|
|
106
154
|
```typescript
|