@conduction/nextcloud-vue 0.1.0-beta.1 → 0.1.0-beta.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 +226 -0
- package/css/index.css +5 -0
- package/dist/nextcloud-vue.cjs.js +7039 -2409
- package/dist/nextcloud-vue.cjs.js.map +1 -1
- package/dist/nextcloud-vue.css +237 -52
- package/dist/nextcloud-vue.esm.js +7012 -2386
- package/dist/nextcloud-vue.esm.js.map +1 -1
- package/package.json +4 -5
- package/src/components/CnActionsBar/CnActionsBar.vue +225 -0
- package/src/components/CnActionsBar/index.js +1 -0
- package/src/components/CnCopyDialog/CnCopyDialog.vue +250 -0
- package/src/components/CnCopyDialog/index.js +1 -0
- package/src/components/CnDataTable/CnDataTable.vue +0 -5
- package/src/components/CnDeleteDialog/CnDeleteDialog.vue +170 -0
- package/src/components/CnDeleteDialog/index.js +1 -0
- package/src/components/CnFormDialog/CnFormDialog.vue +629 -0
- package/src/components/CnFormDialog/index.js +1 -0
- package/src/components/CnIcon/CnIcon.vue +89 -0
- package/src/components/CnIcon/index.js +1 -0
- package/src/components/CnIndexPage/CnIndexPage.vue +434 -300
- package/src/components/CnIndexSidebar/CnIndexSidebar.vue +484 -0
- package/src/components/CnIndexSidebar/index.js +1 -0
- package/src/components/CnPageHeader/CnPageHeader.vue +57 -0
- package/src/components/CnPageHeader/index.js +1 -0
- package/src/components/CnRegisterMapping/CnRegisterMapping.vue +792 -0
- package/src/components/CnRegisterMapping/index.js +1 -0
- package/src/components/index.js +8 -4
- package/src/composables/useListView.js +254 -45
- package/src/constants/metadata.js +30 -0
- package/src/css/actions-bar.css +48 -0
- package/src/css/badge.css +4 -4
- package/src/css/card.css +23 -23
- package/src/css/detail.css +13 -13
- package/src/css/index-page.css +32 -0
- package/src/css/index-sidebar.css +187 -0
- package/src/css/index.css +4 -0
- package/src/css/layout.css +14 -14
- package/src/css/page-header.css +33 -0
- package/src/css/pagination.css +12 -12
- package/src/css/table.css +21 -22
- package/src/css/utilities.css +2 -2
- package/src/index.js +11 -8
- package/src/store/plugins/index.js +1 -0
- package/src/store/plugins/registerMapping.js +185 -0
- package/src/store/useObjectStore.js +122 -61
- package/src/utils/headers.js +7 -1
- package/src/utils/index.js +1 -1
- package/src/utils/schema.js +133 -1
- package/src/components/CnDetailViewLayout/CnDetailViewLayout.vue +0 -88
- package/src/components/CnDetailViewLayout/index.js +0 -1
- package/src/components/CnEmptyState/CnEmptyState.vue +0 -78
- package/src/components/CnEmptyState/index.js +0 -1
- package/src/components/CnListViewLayout/CnListViewLayout.vue +0 -80
- package/src/components/CnListViewLayout/index.js +0 -1
- package/src/components/CnViewModeToggle/CnViewModeToggle.vue +0 -77
- package/src/components/CnViewModeToggle/index.js +0 -1
package/src/css/detail.css
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
/* ========================================
|
|
2
|
-
@conduction/nextcloud-vue — Detail Styles
|
|
2
|
+
@conduction/nextcloud-vue — Detail Grid & Layout Utility Styles
|
|
3
3
|
======================================== */
|
|
4
4
|
|
|
5
5
|
/* Detail Grid (metadata display) */
|
|
6
6
|
.cn-detail-grid {
|
|
7
7
|
display: grid;
|
|
8
8
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
9
|
-
gap:
|
|
10
|
-
margin-bottom:
|
|
9
|
+
gap: calc(4 * var(--default-grid-baseline));
|
|
10
|
+
margin-bottom: calc(5 * var(--default-grid-baseline));
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.cn-detail-item {
|
|
14
14
|
display: flex;
|
|
15
15
|
flex-direction: column;
|
|
16
|
-
gap:
|
|
17
|
-
padding:
|
|
16
|
+
gap: var(--default-grid-baseline);
|
|
17
|
+
padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
|
|
18
18
|
border-left: 3px solid var(--color-primary-element);
|
|
19
19
|
background: var(--color-background-hover);
|
|
20
20
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
/* Detail Layout */
|
|
36
36
|
.cn-detail-layout {
|
|
37
37
|
max-width: 1000px;
|
|
38
|
-
padding:
|
|
38
|
+
padding: calc(5 * var(--default-grid-baseline));
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.cn-detail-layout__header {
|
|
42
42
|
display: flex;
|
|
43
43
|
align-items: center;
|
|
44
|
-
gap:
|
|
45
|
-
margin-bottom:
|
|
44
|
+
gap: calc(3 * var(--default-grid-baseline));
|
|
45
|
+
margin-bottom: calc(6 * var(--default-grid-baseline));
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.cn-detail-layout__title {
|
|
@@ -54,15 +54,15 @@
|
|
|
54
54
|
|
|
55
55
|
.cn-detail-layout__actions {
|
|
56
56
|
display: flex;
|
|
57
|
-
gap:
|
|
57
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
58
58
|
flex-shrink: 0;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.cn-detail-layout__content {
|
|
62
|
-
margin-top:
|
|
62
|
+
margin-top: calc(4 * var(--default-grid-baseline));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
/* Backwards compatibility aliases */
|
|
66
|
-
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:
|
|
67
|
-
.detail-item { display: flex; flex-direction: column; gap:
|
|
68
|
-
.detailContainer { margin-block-start:
|
|
66
|
+
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(4 * var(--default-grid-baseline)); margin-bottom: calc(5 * var(--default-grid-baseline)); }
|
|
67
|
+
.detail-item { display: flex; flex-direction: column; gap: var(--default-grid-baseline); padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline)); border-left: 3px solid var(--color-primary-element); background: var(--color-background-hover); border-radius: 0 var(--border-radius) var(--border-radius) 0; }
|
|
68
|
+
.detailContainer { margin-block-start: calc(5 * var(--default-grid-baseline)); margin-inline-start: calc(5 * var(--default-grid-baseline)); margin-inline-end: calc(5 * var(--default-grid-baseline)); }
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* CnIndexPage — Index page layout styles */
|
|
2
|
+
/* Header styles: see page-header.css (CnPageHeader) */
|
|
3
|
+
/* Actions bar styles: see actions-bar.css (CnActionsBar) */
|
|
4
|
+
|
|
5
|
+
.cn-index-page {
|
|
6
|
+
padding: calc(5 * var(--default-grid-baseline));
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Body layout */
|
|
10
|
+
.cn-index-page__body {
|
|
11
|
+
display: flex;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.cn-index-page__main {
|
|
15
|
+
flex: 1;
|
|
16
|
+
min-width: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.cn-index-page__loading {
|
|
20
|
+
display: flex;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
padding: calc(15 * var(--default-grid-baseline));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.cn-index-page__empty {
|
|
26
|
+
padding: calc(10 * var(--default-grid-baseline)) calc(5 * var(--default-grid-baseline));
|
|
27
|
+
text-align: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.cn-index-page__pagination {
|
|
31
|
+
margin-top: calc(4 * var(--default-grid-baseline));
|
|
32
|
+
}
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
/* CnIndexSidebar — NcAppSidebar wrapper styles */
|
|
2
|
+
|
|
3
|
+
/* Sidebar header icon (compact mode figure area) */
|
|
4
|
+
.cn-index-sidebar__header-icon {
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
color: var(--color-primary-element);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cn-index-sidebar__header-emoji {
|
|
14
|
+
font-size: 28px;
|
|
15
|
+
line-height: 1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Search tab sections */
|
|
19
|
+
.cn-index-sidebar__section {
|
|
20
|
+
padding: calc(4 * var(--default-grid-baseline));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.cn-index-sidebar__section h3 {
|
|
24
|
+
margin: 0 0 calc(3 * var(--default-grid-baseline)) 0;
|
|
25
|
+
font-size: 15px;
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.cn-index-sidebar__description {
|
|
30
|
+
color: var(--color-text-maxcontrast);
|
|
31
|
+
font-size: 13px;
|
|
32
|
+
margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.cn-index-sidebar__filter-group {
|
|
36
|
+
margin-bottom: calc(3 * var(--default-grid-baseline));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.cn-index-sidebar__filter-header {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
gap: var(--default-grid-baseline);
|
|
43
|
+
margin-bottom: var(--default-grid-baseline);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.cn-index-sidebar__filter-label {
|
|
47
|
+
font-size: 13px;
|
|
48
|
+
font-weight: 500;
|
|
49
|
+
color: var(--color-main-text);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.cn-index-sidebar__info-btn {
|
|
53
|
+
min-width: var(--clickable-area-small, 24px) !important;
|
|
54
|
+
min-height: var(--clickable-area-small, 24px) !important;
|
|
55
|
+
width: var(--clickable-area-small, 24px) !important;
|
|
56
|
+
height: var(--clickable-area-small, 24px) !important;
|
|
57
|
+
padding: 0 !important;
|
|
58
|
+
color: var(--color-text-maxcontrast);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.cn-index-sidebar__info-btn:hover {
|
|
62
|
+
color: var(--color-primary);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.cn-index-sidebar__filter-description {
|
|
66
|
+
padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
|
|
67
|
+
max-width: 260px;
|
|
68
|
+
font-size: 13px;
|
|
69
|
+
color: var(--color-main-text);
|
|
70
|
+
margin: 0;
|
|
71
|
+
line-height: var(--default-line-height, 1.4);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.cn-index-sidebar__select {
|
|
75
|
+
width: 100%;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Visually hide NcSelect's rendered label — the filter heading already shows it.
|
|
79
|
+
Keep input-label prop for screen-reader accessibility. */
|
|
80
|
+
.cn-index-sidebar__select label {
|
|
81
|
+
position: absolute;
|
|
82
|
+
width: 1px;
|
|
83
|
+
height: 1px;
|
|
84
|
+
padding: 0;
|
|
85
|
+
margin: -1px;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
clip: rect(0, 0, 0, 0);
|
|
88
|
+
white-space: nowrap;
|
|
89
|
+
border: 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.cn-index-sidebar__empty {
|
|
93
|
+
color: var(--color-text-maxcontrast);
|
|
94
|
+
font-size: 13px;
|
|
95
|
+
font-style: italic;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ── Columns tab ── */
|
|
99
|
+
|
|
100
|
+
.cn-sidebar-columns {
|
|
101
|
+
padding: calc(4 * var(--default-grid-baseline));
|
|
102
|
+
min-height: calc(100vh - 200px);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.cn-sidebar-columns h3 {
|
|
106
|
+
margin-top: 0;
|
|
107
|
+
margin-bottom: calc(2 * var(--default-grid-baseline));
|
|
108
|
+
font-size: 18px;
|
|
109
|
+
font-weight: 600;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.cn-sidebar-columns__description {
|
|
113
|
+
color: var(--color-text-maxcontrast);
|
|
114
|
+
margin-bottom: calc(4 * var(--default-grid-baseline));
|
|
115
|
+
font-size: var(--default-font-size);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Collapsible column group card */
|
|
119
|
+
.cn-sidebar-columns__group {
|
|
120
|
+
margin-bottom: calc(6 * var(--default-grid-baseline));
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.cn-sidebar-columns__group h4 {
|
|
124
|
+
margin-top: 0;
|
|
125
|
+
margin-bottom: calc(3 * var(--default-grid-baseline));
|
|
126
|
+
font-size: var(--default-font-size);
|
|
127
|
+
font-weight: 600;
|
|
128
|
+
color: var(--color-text-light);
|
|
129
|
+
border-bottom: 1px solid var(--color-border);
|
|
130
|
+
padding-bottom: calc(2 * var(--default-grid-baseline));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.cn-sidebar-columns__group .checkbox-radio-switch {
|
|
134
|
+
margin-bottom: calc(2 * var(--default-grid-baseline));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.cn-sidebar-columns__group .checkbox-radio-switch__content {
|
|
138
|
+
padding: var(--default-grid-baseline) 0;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.cn-sidebar-columns__group--collapsible {
|
|
142
|
+
border: 1px solid var(--color-border);
|
|
143
|
+
border-radius: var(--border-radius);
|
|
144
|
+
padding: 0;
|
|
145
|
+
margin-bottom: calc(3 * var(--default-grid-baseline));
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.cn-sidebar-columns__group-header {
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
152
|
+
padding: calc(3 * var(--default-grid-baseline));
|
|
153
|
+
cursor: pointer;
|
|
154
|
+
user-select: none;
|
|
155
|
+
transition: background-color var(--animation-quick) ease;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.cn-sidebar-columns__group-header:hover {
|
|
159
|
+
background-color: var(--color-background-hover);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.cn-sidebar-columns__group-header h4 {
|
|
163
|
+
margin: 0;
|
|
164
|
+
padding: 0;
|
|
165
|
+
border: none;
|
|
166
|
+
flex: 1;
|
|
167
|
+
color: var(--color-main-text);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.cn-sidebar-columns__select-all {
|
|
171
|
+
margin: 0 !important;
|
|
172
|
+
font-size: 12px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.cn-sidebar-columns__group-content {
|
|
176
|
+
padding: calc(3 * var(--default-grid-baseline));
|
|
177
|
+
border-top: 1px solid var(--color-border);
|
|
178
|
+
display: flex;
|
|
179
|
+
flex-direction: column;
|
|
180
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.cn-sidebar-columns__empty {
|
|
184
|
+
color: var(--color-text-maxcontrast);
|
|
185
|
+
font-size: 13px;
|
|
186
|
+
font-style: italic;
|
|
187
|
+
}
|
package/src/css/index.css
CHANGED
package/src/css/layout.css
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
/* ========================================
|
|
2
|
-
@conduction/nextcloud-vue — Layout Styles
|
|
2
|
+
@conduction/nextcloud-vue — Layout & Filter Utility Styles
|
|
3
3
|
======================================== */
|
|
4
4
|
|
|
5
5
|
/* List View Layout */
|
|
6
6
|
.cn-list-layout {
|
|
7
|
-
padding:
|
|
7
|
+
padding: calc(5 * var(--default-grid-baseline));
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.cn-list-layout__header {
|
|
11
11
|
display: flex;
|
|
12
12
|
align-items: center;
|
|
13
13
|
justify-content: space-between;
|
|
14
|
-
margin-bottom:
|
|
14
|
+
margin-bottom: calc(4 * var(--default-grid-baseline));
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.cn-list-layout__title {
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: baseline;
|
|
20
|
-
gap:
|
|
20
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.cn-list-layout__title h2 {
|
|
@@ -33,15 +33,15 @@
|
|
|
33
33
|
|
|
34
34
|
.cn-list-layout__actions {
|
|
35
35
|
display: flex;
|
|
36
|
-
gap:
|
|
36
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
/* Filter Bar */
|
|
40
40
|
.cn-filter-bar {
|
|
41
41
|
display: flex;
|
|
42
42
|
align-items: center;
|
|
43
|
-
gap:
|
|
44
|
-
margin-bottom:
|
|
43
|
+
gap: calc(3 * var(--default-grid-baseline));
|
|
44
|
+
margin-bottom: calc(4 * var(--default-grid-baseline));
|
|
45
45
|
flex-wrap: wrap;
|
|
46
46
|
}
|
|
47
47
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
.cn-filter-bar__filters {
|
|
55
55
|
display: flex;
|
|
56
56
|
align-items: center;
|
|
57
|
-
gap:
|
|
57
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
58
58
|
flex-wrap: wrap;
|
|
59
59
|
}
|
|
60
60
|
|
|
@@ -71,20 +71,20 @@
|
|
|
71
71
|
.cn-dashboard-content {
|
|
72
72
|
margin-inline: auto;
|
|
73
73
|
max-width: 1200px;
|
|
74
|
-
padding-block:
|
|
75
|
-
padding-inline:
|
|
74
|
+
padding-block: calc(5 * var(--default-grid-baseline));
|
|
75
|
+
padding-inline: calc(5 * var(--default-grid-baseline));
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
/* Loading Container */
|
|
79
79
|
.cn-loading-container {
|
|
80
80
|
display: flex;
|
|
81
81
|
align-items: center;
|
|
82
|
-
gap:
|
|
82
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
83
83
|
color: var(--color-text-maxcontrast);
|
|
84
84
|
justify-content: center;
|
|
85
|
-
padding-block:
|
|
85
|
+
padding-block: calc(10 * var(--default-grid-baseline));
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
/* Backwards compatibility aliases */
|
|
89
|
-
.dashboardContent { margin-inline: auto; max-width: 1200px; padding-block:
|
|
90
|
-
.loadingContainer { display: flex; align-items: center; gap:
|
|
89
|
+
.dashboardContent { margin-inline: auto; max-width: 1200px; padding-block: calc(5 * var(--default-grid-baseline)); padding-inline: calc(5 * var(--default-grid-baseline)); }
|
|
90
|
+
.loadingContainer { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); justify-content: center; padding-block: calc(10 * var(--default-grid-baseline)); }
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* CnPageHeader — Reusable page header styles */
|
|
2
|
+
|
|
3
|
+
.cn-page-header {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: flex-start;
|
|
6
|
+
gap: calc(3 * var(--default-grid-baseline));
|
|
7
|
+
margin-bottom: calc(4 * var(--default-grid-baseline));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.cn-page-header__icon {
|
|
11
|
+
flex-shrink: 0;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
padding-top: var(--default-grid-baseline);
|
|
15
|
+
color: var(--color-primary);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.cn-page-header__text {
|
|
19
|
+
flex: 1;
|
|
20
|
+
min-width: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.cn-page-header__title {
|
|
24
|
+
margin: 0 0 var(--default-grid-baseline) 0;
|
|
25
|
+
font-size: 2rem;
|
|
26
|
+
font-weight: 300;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.cn-page-header__description {
|
|
30
|
+
color: var(--color-text-maxcontrast);
|
|
31
|
+
margin: 0;
|
|
32
|
+
font-size: var(--default-font-size);
|
|
33
|
+
}
|
package/src/css/pagination.css
CHANGED
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
align-items: center;
|
|
9
|
-
gap:
|
|
10
|
-
margin-top:
|
|
11
|
-
padding:
|
|
9
|
+
gap: calc(4 * var(--default-grid-baseline));
|
|
10
|
+
margin-top: calc(8 * var(--default-grid-baseline));
|
|
11
|
+
padding: calc(5 * var(--default-grid-baseline));
|
|
12
12
|
flex-wrap: nowrap;
|
|
13
13
|
}
|
|
14
14
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
.cn-pagination__nav {
|
|
27
27
|
display: flex;
|
|
28
28
|
align-items: center;
|
|
29
|
-
gap:
|
|
29
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
30
30
|
flex-grow: 1;
|
|
31
31
|
justify-content: center;
|
|
32
32
|
}
|
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
.cn-pagination__numbers {
|
|
35
35
|
display: flex;
|
|
36
36
|
align-items: center;
|
|
37
|
-
gap:
|
|
37
|
+
gap: var(--default-grid-baseline);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.cn-pagination__ellipsis {
|
|
41
|
-
padding: 0
|
|
41
|
+
padding: 0 var(--default-grid-baseline);
|
|
42
42
|
color: var(--color-text-maxcontrast);
|
|
43
43
|
font-size: 0.9rem;
|
|
44
44
|
}
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
.cn-pagination__page-size {
|
|
47
47
|
display: flex;
|
|
48
48
|
align-items: center;
|
|
49
|
-
gap:
|
|
49
|
+
gap: calc(2 * var(--default-grid-baseline));
|
|
50
50
|
flex-shrink: 0;
|
|
51
51
|
min-width: 0;
|
|
52
52
|
}
|
|
@@ -63,10 +63,10 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
/* Backwards compatibility aliases */
|
|
66
|
-
.viewPagination { display: flex; justify-content: space-between; align-items: center; gap:
|
|
66
|
+
.viewPagination { display: flex; justify-content: space-between; align-items: center; gap: calc(4 * var(--default-grid-baseline)); margin-top: calc(8 * var(--default-grid-baseline)); padding: calc(5 * var(--default-grid-baseline)); flex-wrap: nowrap; }
|
|
67
67
|
.viewPaginationInfo { display: flex; align-items: center; flex-shrink: 0; }
|
|
68
68
|
.viewPageInfo { color: var(--color-text-maxcontrast); font-size: 0.9rem; }
|
|
69
|
-
.viewPaginationNav { display: flex; align-items: center; gap:
|
|
70
|
-
.viewPaginationNumbers { display: flex; align-items: center; gap:
|
|
71
|
-
.viewPaginationEllipsis { padding: 0
|
|
72
|
-
.viewPaginationPageSize { display: flex; align-items: center; gap:
|
|
69
|
+
.viewPaginationNav { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-grow: 1; justify-content: center; }
|
|
70
|
+
.viewPaginationNumbers { display: flex; align-items: center; gap: var(--default-grid-baseline); }
|
|
71
|
+
.viewPaginationEllipsis { padding: 0 var(--default-grid-baseline); color: var(--color-text-maxcontrast); font-size: 0.9rem; }
|
|
72
|
+
.viewPaginationPageSize { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-shrink: 0; min-width: 0; }
|
package/src/css/table.css
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
/* Table Container */
|
|
6
6
|
.cn-table-container {
|
|
7
|
-
background: var(--
|
|
8
|
-
border-radius: var(--
|
|
7
|
+
background: var(--color-main-background);
|
|
8
|
+
border-radius: var(--border-radius);
|
|
9
9
|
overflow: hidden;
|
|
10
10
|
box-shadow: 0 2px 4px var(--color-box-shadow);
|
|
11
|
-
border: 1px solid var(--
|
|
12
|
-
margin-bottom:
|
|
11
|
+
border: 1px solid var(--color-border);
|
|
12
|
+
margin-bottom: calc(5 * var(--default-grid-baseline));
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.cn-table-container.cn-table-container--scrollable {
|
|
@@ -21,28 +21,27 @@
|
|
|
21
21
|
.cn-data-table {
|
|
22
22
|
width: 100%;
|
|
23
23
|
border-collapse: collapse;
|
|
24
|
-
background-color: var(--
|
|
24
|
+
background-color: var(--color-main-background);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.cn-data-table th,
|
|
28
28
|
.cn-data-table td {
|
|
29
|
-
padding: var(--
|
|
30
|
-
var(--nldesign-component-table-cell-padding-inline, 12px);
|
|
29
|
+
padding: calc(3 * var(--default-grid-baseline));
|
|
31
30
|
text-align: left;
|
|
32
|
-
border-bottom: 1px solid var(--
|
|
31
|
+
border-bottom: 1px solid var(--color-border);
|
|
33
32
|
vertical-align: middle;
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
.cn-data-table th {
|
|
37
|
-
background: var(--
|
|
38
|
-
font-weight:
|
|
36
|
+
background: var(--color-background-dark);
|
|
37
|
+
font-weight: 500;
|
|
39
38
|
color: var(--color-text-maxcontrast);
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
.cn-data-table th.cn-table-header--sortable {
|
|
43
42
|
cursor: pointer;
|
|
44
43
|
user-select: none;
|
|
45
|
-
transition: background-color
|
|
44
|
+
transition: background-color var(--animation-quick) ease;
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
.cn-data-table th.cn-table-header--sortable:hover {
|
|
@@ -50,19 +49,19 @@
|
|
|
50
49
|
}
|
|
51
50
|
|
|
52
51
|
.cn-table-sort-indicator {
|
|
53
|
-
margin-left:
|
|
52
|
+
margin-left: var(--default-grid-baseline);
|
|
54
53
|
opacity: 0.6;
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
/* Row States */
|
|
58
57
|
.cn-table-row {
|
|
59
|
-
border-bottom: 1px solid var(--
|
|
58
|
+
border-bottom: 1px solid var(--color-border);
|
|
60
59
|
cursor: pointer;
|
|
61
|
-
transition: background-color
|
|
60
|
+
transition: background-color var(--animation-quick) ease;
|
|
62
61
|
}
|
|
63
62
|
|
|
64
63
|
.cn-table-row:hover {
|
|
65
|
-
background: var(--
|
|
64
|
+
background: var(--color-background-hover);
|
|
66
65
|
}
|
|
67
66
|
|
|
68
67
|
.cn-table-row--selected {
|
|
@@ -109,18 +108,18 @@
|
|
|
109
108
|
/* Loading State */
|
|
110
109
|
.cn-table-loading {
|
|
111
110
|
text-align: center;
|
|
112
|
-
padding:
|
|
111
|
+
padding: calc(12 * var(--default-grid-baseline));
|
|
113
112
|
}
|
|
114
113
|
|
|
115
114
|
.cn-table-loading p {
|
|
116
|
-
margin-top:
|
|
115
|
+
margin-top: calc(5 * var(--default-grid-baseline));
|
|
117
116
|
color: var(--color-text-maxcontrast);
|
|
118
117
|
}
|
|
119
118
|
|
|
120
119
|
/* Empty State (inside table) */
|
|
121
120
|
.cn-table-empty td {
|
|
122
121
|
text-align: center;
|
|
123
|
-
padding:
|
|
122
|
+
padding: calc(12 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));
|
|
124
123
|
color: var(--color-text-maxcontrast);
|
|
125
124
|
}
|
|
126
125
|
|
|
@@ -128,12 +127,12 @@
|
|
|
128
127
|
Backwards compatibility aliases
|
|
129
128
|
(legacy OpenRegister CSS class names)
|
|
130
129
|
======================================== */
|
|
131
|
-
.viewTableContainer { background: var(--
|
|
130
|
+
.viewTableContainer { background: var(--color-main-background); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 2px 4px var(--color-box-shadow); border: 1px solid var(--color-border); margin-bottom: calc(5 * var(--default-grid-baseline)); }
|
|
132
131
|
.viewTableContainer.scrollable { max-height: 400px; overflow-y: auto; }
|
|
133
|
-
.viewTable { width: 100%; border-collapse: collapse; background-color: var(--
|
|
134
|
-
.viewTable th, .viewTable td { padding:
|
|
132
|
+
.viewTable { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
|
|
133
|
+
.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
|
|
135
134
|
.viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
|
|
136
|
-
.viewTableRow { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color
|
|
135
|
+
.viewTableRow { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color var(--animation-quick) ease; }
|
|
137
136
|
.viewTableRow:hover { background: var(--color-background-hover); }
|
|
138
137
|
.viewTableRow.active, .viewTableRowSelected { background: var(--color-primary-light); }
|
|
139
138
|
.tableColumnCheckbox { width: 50px; text-align: center; }
|
package/src/css/utilities.css
CHANGED
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
|
|
22
22
|
/* Vue Transition Animations */
|
|
23
23
|
.cn-slide-fade-enter-active {
|
|
24
|
-
transition: all
|
|
24
|
+
transition: all var(--animation-slow) cubic-bezier(0.4, 0, 0.2, 1);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.cn-slide-fade-leave-active {
|
|
28
|
-
transition: all
|
|
28
|
+
transition: all var(--animation-quick) cubic-bezier(0.4, 0, 1, 1);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.cn-slide-fade-enter,
|
package/src/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
// CSS — auto-imported so consumers get styles with components
|
|
2
|
+
import './css/index.css'
|
|
3
|
+
|
|
1
4
|
// Components
|
|
2
5
|
export {
|
|
3
6
|
CnDataTable,
|
|
4
7
|
CnFilterBar,
|
|
5
|
-
CnListViewLayout,
|
|
6
|
-
CnDetailViewLayout,
|
|
7
8
|
CnStatusBadge,
|
|
8
|
-
CnEmptyState,
|
|
9
9
|
CnPagination,
|
|
10
10
|
CnSettingsCard,
|
|
11
11
|
CnSettingsSection,
|
|
@@ -16,15 +16,20 @@ export {
|
|
|
16
16
|
CnObjectCard,
|
|
17
17
|
CnCardGrid,
|
|
18
18
|
CnFacetSidebar,
|
|
19
|
-
CnViewModeToggle,
|
|
20
19
|
CnRowActions,
|
|
21
20
|
CnIndexPage,
|
|
22
21
|
CnMassActionBar,
|
|
22
|
+
CnDeleteDialog,
|
|
23
|
+
CnCopyDialog,
|
|
24
|
+
CnFormDialog,
|
|
23
25
|
CnMassDeleteDialog,
|
|
24
26
|
CnMassCopyDialog,
|
|
25
27
|
CnKpiGrid,
|
|
26
28
|
CnMassExportDialog,
|
|
27
29
|
CnMassImportDialog,
|
|
30
|
+
CnIndexSidebar,
|
|
31
|
+
CnRegisterMapping,
|
|
32
|
+
registerIcons,
|
|
28
33
|
} from './components/index.js'
|
|
29
34
|
|
|
30
35
|
// Store
|
|
@@ -37,6 +42,7 @@ export {
|
|
|
37
42
|
relationsPlugin,
|
|
38
43
|
filesPlugin,
|
|
39
44
|
lifecyclePlugin,
|
|
45
|
+
registerMappingPlugin,
|
|
40
46
|
} from './store/plugins/index.js'
|
|
41
47
|
|
|
42
48
|
// Composables
|
|
@@ -44,7 +50,4 @@ export { useListView, useDetailView, useSubResource } from './composables/index.
|
|
|
44
50
|
|
|
45
51
|
// Utilities
|
|
46
52
|
export { buildHeaders, buildQueryString, parseResponseError, networkError, genericError } from './utils/index.js'
|
|
47
|
-
export { columnsFromSchema, formatValue, filtersFromSchema } from './utils/index.js'
|
|
48
|
-
|
|
49
|
-
// CSS (consumers should import separately)
|
|
50
|
-
// import '@conduction/nextcloud-vue/src/css/index.css'
|
|
53
|
+
export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema } from './utils/index.js'
|