@katlux/preset-modern 0.1.0-beta.71 → 0.1.0-beta.73

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/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@katlux/preset-modern",
3
3
  "configKey": "katluxTemplateModern",
4
- "version": "0.1.0-beta.71",
4
+ "version": "0.1.0-beta.73",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
@@ -20,12 +20,20 @@
20
20
  ) Go
21
21
 
22
22
  template(v-else v-for="action in bulkActions" :key="action.label")
23
- KButton(
24
- @click="doAction(action)"
25
- size="small"
26
- variant="outline"
27
- class="action-btn"
28
- ) {{ action.label }}
23
+ KTooltip(
24
+ :text="action.label"
25
+ :disabled="!(action.iconOnly || !!action.icon)"
26
+ )
27
+ KButton(
28
+ @click="doAction(action)"
29
+ size="small"
30
+ :type="action.type || 'default'"
31
+ :iconOnly="action.iconOnly || !!action.icon"
32
+ class="action-btn"
33
+ )
34
+ template(#icon v-if="action.icon")
35
+ KIcon(:iconname="action.icon" :width="16" :height="16")
36
+ template(#default v-if="!action.iconOnly && !action.icon") {{ action.label }}
29
37
  </template>
30
38
 
31
39
  <script setup>
@@ -181,6 +181,28 @@ defineProps({
181
181
  width: 12px;
182
182
  height: 12px;
183
183
  }
184
+ .KButton.modern-button.icon-only {
185
+ padding: 0;
186
+ display: inline-flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ aspect-ratio: 1/1;
190
+ }
191
+ .KButton.modern-button.icon-only .button-text {
192
+ display: none;
193
+ }
194
+ .KButton.modern-button.icon-only.large {
195
+ width: 44px;
196
+ height: 44px;
197
+ }
198
+ .KButton.modern-button.icon-only.medium {
199
+ width: 36px;
200
+ height: 36px;
201
+ }
202
+ .KButton.modern-button.icon-only.small {
203
+ width: 28px;
204
+ height: 28px;
205
+ }
184
206
  .KButton.modern-button:active {
185
207
  transform: translateY(0);
186
208
  }
@@ -31,13 +31,21 @@
31
31
  span(v-else) {{ row[visibleField] }}
32
32
  td.actions-cell(v-if="rowActions && rowActions.length > 0")
33
33
  .action-buttons
34
- KButton.action-btn(
34
+ KTooltip(
35
35
  v-for="rowAction in rowActions"
36
36
  :key="rowAction.label"
37
- :type="rowAction.type || 'secondary'"
38
- size="small"
39
- @click="rowAction.action(row)"
40
- ) {{ rowAction.label }}
37
+ :text="rowAction.label"
38
+ :disabled="!(rowAction.iconOnly || !!rowAction.icon)"
39
+ )
40
+ KButton.action-btn(
41
+ :type="rowAction.type || 'default'"
42
+ :iconOnly="rowAction.iconOnly || !!rowAction.icon"
43
+ size="small"
44
+ @click="rowAction.action(row)"
45
+ )
46
+ template(#icon v-if="rowAction.icon")
47
+ KIcon(:iconname="rowAction.icon" :width="16" :height="16")
48
+ template(#default v-if="!rowAction.iconOnly && !rowAction.icon") {{ rowAction.label }}
41
49
 
42
50
  .footer
43
51
  KPagination.pagination(:dataProvider="dataProvider")
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@katlux/preset-modern",
3
- "version": "0.1.0-beta.71",
3
+ "version": "0.1.0-beta.73",
4
4
  "description": "Modern default design preset and styling variables for Katlux components",
5
5
  "author": "Katlux",
6
6
  "license": "Apache-2.0",