dashboard-shell-shell 1.0.116 → 1.0.118
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/components/SideNav.vue +13 -0
- package/components/SortableTable/index.vue +208 -114
- package/package.json +1 -1
package/components/SideNav.vue
CHANGED
|
@@ -493,6 +493,10 @@ export default {
|
|
|
493
493
|
|
|
494
494
|
A { padding-left: 0; }
|
|
495
495
|
}
|
|
496
|
+
:deep() A{
|
|
497
|
+
height: 50px;
|
|
498
|
+
background-color: #fff;
|
|
499
|
+
}
|
|
496
500
|
|
|
497
501
|
.tools {
|
|
498
502
|
display: flex;
|
|
@@ -568,4 +572,13 @@ export default {
|
|
|
568
572
|
display: flex;
|
|
569
573
|
}
|
|
570
574
|
|
|
575
|
+
|
|
576
|
+
.side-all-title{
|
|
577
|
+
height: 50px;
|
|
578
|
+
line-height: 50px;
|
|
579
|
+
font-size: 16px;
|
|
580
|
+
color: #7f7f7f;
|
|
581
|
+
padding-left: 21px;
|
|
582
|
+
font-weight: bold;
|
|
583
|
+
}
|
|
571
584
|
</style>
|
|
@@ -1181,7 +1181,201 @@ export default {
|
|
|
1181
1181
|
ref="container"
|
|
1182
1182
|
:data-testid="componentTestid + '-list-container'"
|
|
1183
1183
|
>
|
|
1184
|
+
<div
|
|
1185
|
+
:class="{'titled': $slots.title && $slots.title.length, 'mb-40': isFilterLabel}"
|
|
1186
|
+
class="sortable-table-header mb-20"
|
|
1187
|
+
:style="{marginTop: search&& !isBanner ? marginTopValue + 'px' : '0px',marginLeft: isCreatable ? '100px' : '-10px',maxHeight: '32px'}"
|
|
1188
|
+
>
|
|
1189
|
+
<slot name="title" />
|
|
1190
|
+
<div
|
|
1191
|
+
v-if="showHeaderRow"
|
|
1192
|
+
class="fixed-header-actions"
|
|
1193
|
+
:class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
|
|
1194
|
+
style="display: flex;"
|
|
1195
|
+
>
|
|
1196
|
+
<!-- <div
|
|
1197
|
+
:class="bulkActionsClass"
|
|
1198
|
+
class="bulk"
|
|
1199
|
+
>
|
|
1200
|
+
<slot name="header-left">
|
|
1201
|
+
<template v-if="tableActions">
|
|
1202
|
+
<button
|
|
1203
|
+
v-for="(act) in availableActions"
|
|
1204
|
+
:id="act.action"
|
|
1205
|
+
:key="act.action"
|
|
1206
|
+
v-clean-tooltip="actionTooltip"
|
|
1207
|
+
type="button"
|
|
1208
|
+
class="btn role-primary"
|
|
1209
|
+
:class="{[bulkActionClass]:true}"
|
|
1210
|
+
:disabled="!act.enabled"
|
|
1211
|
+
:data-testid="componentTestid + '-' + act.action"
|
|
1212
|
+
@click="applyTableAction(act, null, $event)"
|
|
1213
|
+
@keydown.enter.stop
|
|
1214
|
+
@mouseover="setBulkActionOfInterest(act)"
|
|
1215
|
+
@mouseleave="setBulkActionOfInterest(null)"
|
|
1216
|
+
>
|
|
1217
|
+
<i
|
|
1218
|
+
v-if="act.icon"
|
|
1219
|
+
:class="act.icon"
|
|
1220
|
+
/>
|
|
1221
|
+
<span v-clean-html="act.label" />
|
|
1222
|
+
</button>
|
|
1223
|
+
<ActionDropdown
|
|
1224
|
+
:class="bulkActionsDropdownClass"
|
|
1225
|
+
class="bulk-actions-dropdown"
|
|
1226
|
+
:disable-button="!selectedRows.length"
|
|
1227
|
+
size="sm"
|
|
1228
|
+
>
|
|
1229
|
+
<template #button-content>
|
|
1230
|
+
<button
|
|
1231
|
+
ref="actionDropDown"
|
|
1232
|
+
class="btn bg-primary mr-0"
|
|
1233
|
+
:disabled="!selectedRows.length"
|
|
1234
|
+
>
|
|
1235
|
+
<i class="icon icon-gear" />
|
|
1236
|
+
<span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
|
|
1237
|
+
<i class="ml-10 icon icon-chevron-down" />
|
|
1238
|
+
</button>
|
|
1239
|
+
</template>
|
|
1240
|
+
<template #popover-content>
|
|
1241
|
+
<ul class="list-unstyled menu">
|
|
1242
|
+
<li
|
|
1243
|
+
v-for="(act, i) in hiddenActions"
|
|
1244
|
+
:key="i"
|
|
1245
|
+
v-close-popper
|
|
1246
|
+
v-clean-tooltip="{
|
|
1247
|
+
content: actionTooltip,
|
|
1248
|
+
placement: 'right'
|
|
1249
|
+
}"
|
|
1250
|
+
:class="{ disabled: !act.enabled }"
|
|
1251
|
+
@click="applyTableAction(act, null, $event)"
|
|
1252
|
+
@mouseover="setBulkActionOfInterest(act)"
|
|
1253
|
+
@mouseleave="setBulkActionOfInterest(null)"
|
|
1254
|
+
>
|
|
1255
|
+
<i
|
|
1256
|
+
v-if="act.icon"
|
|
1257
|
+
:class="act.icon"
|
|
1258
|
+
/>
|
|
1259
|
+
<span v-clean-html="act.label" />
|
|
1260
|
+
</li>
|
|
1261
|
+
</ul>
|
|
1262
|
+
</template>
|
|
1263
|
+
</ActionDropdown>
|
|
1264
|
+
<label
|
|
1265
|
+
v-if="selectedRowsText"
|
|
1266
|
+
:class="bulkActionAvailabilityClass"
|
|
1267
|
+
class="action-availability"
|
|
1268
|
+
>
|
|
1269
|
+
{{ selectedRowsText }}
|
|
1270
|
+
</label>
|
|
1271
|
+
</template>
|
|
1272
|
+
</slot>
|
|
1273
|
+
</div> -->
|
|
1274
|
+
<div
|
|
1275
|
+
v-if="!hasAdvancedFiltering && $slots['header-middle']"
|
|
1276
|
+
class="middle"
|
|
1277
|
+
>
|
|
1278
|
+
<slot name="header-middle" />
|
|
1279
|
+
</div>
|
|
1184
1280
|
|
|
1281
|
+
<div
|
|
1282
|
+
v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
|
|
1283
|
+
class="search row"
|
|
1284
|
+
data-testid="search-box-filter-row"
|
|
1285
|
+
>
|
|
1286
|
+
<ul
|
|
1287
|
+
v-if="hasAdvancedFiltering"
|
|
1288
|
+
class="advanced-filters-applied"
|
|
1289
|
+
>
|
|
1290
|
+
<li
|
|
1291
|
+
v-for="(filter, i) in advancedFilteringValues"
|
|
1292
|
+
:key="i"
|
|
1293
|
+
>
|
|
1294
|
+
<span class="label">{{ `"${filter.value}" ${ t('sortableTable.in') } ${filter.label}` }}</span>
|
|
1295
|
+
<span
|
|
1296
|
+
class="cross"
|
|
1297
|
+
@click="clearAdvancedFilter(i)"
|
|
1298
|
+
>✕</span>
|
|
1299
|
+
<div class="bg" />
|
|
1300
|
+
</li>
|
|
1301
|
+
</ul>
|
|
1302
|
+
<slot name="header-right" />
|
|
1303
|
+
<AsyncButton
|
|
1304
|
+
v-if="isTooManyItemsToAutoUpdate"
|
|
1305
|
+
mode="manual-refresh"
|
|
1306
|
+
:size="manualRefreshButtonSize"
|
|
1307
|
+
:current-phase="refreshButtonPhase"
|
|
1308
|
+
@click="debouncedRefreshTableData"
|
|
1309
|
+
/>
|
|
1310
|
+
<div
|
|
1311
|
+
v-if="hasAdvancedFiltering"
|
|
1312
|
+
ref="advanced-filter-group"
|
|
1313
|
+
class="advanced-filter-group"
|
|
1314
|
+
>
|
|
1315
|
+
<button
|
|
1316
|
+
class="btn role-primary"
|
|
1317
|
+
@click="advancedFilteringVisibility = !advancedFilteringVisibility;"
|
|
1318
|
+
>
|
|
1319
|
+
{{ t('sortableTable.addFilter') }}
|
|
1320
|
+
</button>
|
|
1321
|
+
<div
|
|
1322
|
+
v-show="advancedFilteringVisibility"
|
|
1323
|
+
class="advanced-filter-container"
|
|
1324
|
+
>
|
|
1325
|
+
<input
|
|
1326
|
+
ref="advancedSearchQuery"
|
|
1327
|
+
v-model="advFilterSearchTerm"
|
|
1328
|
+
type="search"
|
|
1329
|
+
class="advanced-search-box"
|
|
1330
|
+
:placeholder="t('sortableTable.filterFor')"
|
|
1331
|
+
>
|
|
1332
|
+
<div class="middle-block">
|
|
1333
|
+
<span>{{ t('sortableTable.in') }}</span>
|
|
1334
|
+
<LabeledSelect
|
|
1335
|
+
v-model:value="advFilterSelectedProp"
|
|
1336
|
+
class="filter-select"
|
|
1337
|
+
:clearable="true"
|
|
1338
|
+
:options="advFilterSelectOptions"
|
|
1339
|
+
:disabled="false"
|
|
1340
|
+
:searchable="false"
|
|
1341
|
+
mode="edit"
|
|
1342
|
+
:multiple="false"
|
|
1343
|
+
:taggable="false"
|
|
1344
|
+
:placeholder="t('sortableTable.selectCol')"
|
|
1345
|
+
@selecting="(col) => advFilterSelectedLabel = col.label"
|
|
1346
|
+
/>
|
|
1347
|
+
</div>
|
|
1348
|
+
<div class="bottom-block">
|
|
1349
|
+
<button
|
|
1350
|
+
class="btn role-secondary"
|
|
1351
|
+
:disabled="!advancedFilteringValues.length"
|
|
1352
|
+
@click="clearAllAdvancedFilters"
|
|
1353
|
+
>
|
|
1354
|
+
{{ t('sortableTable.resetFilters') }}
|
|
1355
|
+
</button>
|
|
1356
|
+
<button
|
|
1357
|
+
class="btn role-primary"
|
|
1358
|
+
@click="addAdvancedFilter"
|
|
1359
|
+
>
|
|
1360
|
+
{{ t('sortableTable.add') }}
|
|
1361
|
+
</button>
|
|
1362
|
+
</div>
|
|
1363
|
+
</div>
|
|
1364
|
+
</div>
|
|
1365
|
+
<slot name="header-button" />
|
|
1366
|
+
<input
|
|
1367
|
+
v-if="search"
|
|
1368
|
+
ref="searchQuery"
|
|
1369
|
+
v-model="eventualSearchQuery"
|
|
1370
|
+
type="search"
|
|
1371
|
+
class="input-sm search-box"
|
|
1372
|
+
:aria-label="t('sortableTable.searchLabel')"
|
|
1373
|
+
:placeholder="t('sortableTable.search')"
|
|
1374
|
+
>
|
|
1375
|
+
|
|
1376
|
+
</div>
|
|
1377
|
+
</div>
|
|
1378
|
+
</div>
|
|
1185
1379
|
<div class="sort-table-div">
|
|
1186
1380
|
<table
|
|
1187
1381
|
ref="table"
|
|
@@ -1416,12 +1610,12 @@ export default {
|
|
|
1416
1610
|
:row="row.row"
|
|
1417
1611
|
:index="i"
|
|
1418
1612
|
>
|
|
1419
|
-
|
|
1613
|
+
</slot>
|
|
1614
|
+
<ActionMenu
|
|
1420
1615
|
:resource="row.row"
|
|
1421
1616
|
:data-testid="componentTestid + '-' + i + '-action-button'"
|
|
1422
1617
|
:button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
|
|
1423
|
-
|
|
1424
|
-
</slot>
|
|
1618
|
+
/>
|
|
1425
1619
|
</div>
|
|
1426
1620
|
</td>
|
|
1427
1621
|
</tr>
|
|
@@ -1481,17 +1675,17 @@ export default {
|
|
|
1481
1675
|
/>
|
|
1482
1676
|
</div>
|
|
1483
1677
|
<div
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
>
|
|
1488
|
-
<slot name="title" />
|
|
1489
|
-
<div
|
|
1490
|
-
v-if="showHeaderRow"
|
|
1491
|
-
class="fixed-header-actions"
|
|
1492
|
-
:class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
|
|
1678
|
+
:class="{'titled': $slots.title && $slots.title.length}"
|
|
1679
|
+
class="sortable-table-header"
|
|
1680
|
+
style="margin-left: 10px;min-width: 55%;"
|
|
1493
1681
|
>
|
|
1682
|
+
<slot name="title" />
|
|
1494
1683
|
<div
|
|
1684
|
+
v-if="showHeaderRow"
|
|
1685
|
+
class="fixed-header-actions"
|
|
1686
|
+
:class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering,}"
|
|
1687
|
+
>
|
|
1688
|
+
<div
|
|
1495
1689
|
:class="bulkActionsClass"
|
|
1496
1690
|
class="bulk"
|
|
1497
1691
|
>
|
|
@@ -1568,111 +1762,11 @@ export default {
|
|
|
1568
1762
|
</label>
|
|
1569
1763
|
</template>
|
|
1570
1764
|
</slot>
|
|
1571
|
-
</div>
|
|
1572
|
-
<div
|
|
1573
|
-
v-if="!hasAdvancedFiltering && $slots['header-middle']"
|
|
1574
|
-
class="middle"
|
|
1575
|
-
>
|
|
1576
|
-
<slot name="header-middle" />
|
|
1577
|
-
</div>
|
|
1578
|
-
|
|
1579
|
-
<div
|
|
1580
|
-
v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
|
|
1581
|
-
class="search row"
|
|
1582
|
-
data-testid="search-box-filter-row"
|
|
1583
|
-
>
|
|
1584
|
-
<ul
|
|
1585
|
-
v-if="hasAdvancedFiltering"
|
|
1586
|
-
class="advanced-filters-applied"
|
|
1587
|
-
>
|
|
1588
|
-
<li
|
|
1589
|
-
v-for="(filter, i) in advancedFilteringValues"
|
|
1590
|
-
:key="i"
|
|
1591
|
-
>
|
|
1592
|
-
<span class="label">{{ `"${filter.value}" ${ t('sortableTable.in') } ${filter.label}` }}</span>
|
|
1593
|
-
<span
|
|
1594
|
-
class="cross"
|
|
1595
|
-
@click="clearAdvancedFilter(i)"
|
|
1596
|
-
>✕</span>
|
|
1597
|
-
<div class="bg" />
|
|
1598
|
-
</li>
|
|
1599
|
-
</ul>
|
|
1600
|
-
<slot name="header-right" />
|
|
1601
|
-
<AsyncButton
|
|
1602
|
-
v-if="isTooManyItemsToAutoUpdate"
|
|
1603
|
-
mode="manual-refresh"
|
|
1604
|
-
:size="manualRefreshButtonSize"
|
|
1605
|
-
:current-phase="refreshButtonPhase"
|
|
1606
|
-
@click="debouncedRefreshTableData"
|
|
1607
|
-
/>
|
|
1608
|
-
<div
|
|
1609
|
-
v-if="hasAdvancedFiltering"
|
|
1610
|
-
ref="advanced-filter-group"
|
|
1611
|
-
class="advanced-filter-group"
|
|
1612
|
-
>
|
|
1613
|
-
<button
|
|
1614
|
-
class="btn role-primary"
|
|
1615
|
-
@click="advancedFilteringVisibility = !advancedFilteringVisibility;"
|
|
1616
|
-
>
|
|
1617
|
-
{{ t('sortableTable.addFilter') }}
|
|
1618
|
-
</button>
|
|
1619
|
-
<div
|
|
1620
|
-
v-show="advancedFilteringVisibility"
|
|
1621
|
-
class="advanced-filter-container"
|
|
1622
|
-
>
|
|
1623
|
-
<input
|
|
1624
|
-
ref="advancedSearchQuery"
|
|
1625
|
-
v-model="advFilterSearchTerm"
|
|
1626
|
-
type="search"
|
|
1627
|
-
class="advanced-search-box"
|
|
1628
|
-
:placeholder="t('sortableTable.filterFor')"
|
|
1629
|
-
>
|
|
1630
|
-
<div class="middle-block">
|
|
1631
|
-
<span>{{ t('sortableTable.in') }}</span>
|
|
1632
|
-
<LabeledSelect
|
|
1633
|
-
v-model:value="advFilterSelectedProp"
|
|
1634
|
-
class="filter-select"
|
|
1635
|
-
:clearable="true"
|
|
1636
|
-
:options="advFilterSelectOptions"
|
|
1637
|
-
:disabled="false"
|
|
1638
|
-
:searchable="false"
|
|
1639
|
-
mode="edit"
|
|
1640
|
-
:multiple="false"
|
|
1641
|
-
:taggable="false"
|
|
1642
|
-
:placeholder="t('sortableTable.selectCol')"
|
|
1643
|
-
@selecting="(col) => advFilterSelectedLabel = col.label"
|
|
1644
|
-
/>
|
|
1645
|
-
</div>
|
|
1646
|
-
<div class="bottom-block">
|
|
1647
|
-
<button
|
|
1648
|
-
class="btn role-secondary"
|
|
1649
|
-
:disabled="!advancedFilteringValues.length"
|
|
1650
|
-
@click="clearAllAdvancedFilters"
|
|
1651
|
-
>
|
|
1652
|
-
{{ t('sortableTable.resetFilters') }}
|
|
1653
|
-
</button>
|
|
1654
|
-
<button
|
|
1655
|
-
class="btn role-primary"
|
|
1656
|
-
@click="addAdvancedFilter"
|
|
1657
|
-
>
|
|
1658
|
-
{{ t('sortableTable.add') }}
|
|
1659
|
-
</button>
|
|
1660
|
-
</div>
|
|
1661
|
-
</div>
|
|
1662
1765
|
</div>
|
|
1663
|
-
<input
|
|
1664
|
-
v-else-if="search"
|
|
1665
|
-
ref="searchQuery"
|
|
1666
|
-
v-model="eventualSearchQuery"
|
|
1667
|
-
type="search"
|
|
1668
|
-
class="input-sm search-box"
|
|
1669
|
-
:aria-label="t('sortableTable.searchLabel')"
|
|
1670
|
-
:placeholder="t('sortableTable.search')"
|
|
1671
|
-
>
|
|
1672
|
-
<slot name="header-button" />
|
|
1673
1766
|
</div>
|
|
1674
1767
|
</div>
|
|
1675
|
-
|
|
1768
|
+
|
|
1769
|
+
|
|
1676
1770
|
<!-- 分页 -->
|
|
1677
1771
|
<div
|
|
1678
1772
|
v-if="showPaging"
|