@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.
Files changed (56) hide show
  1. package/README.md +226 -0
  2. package/css/index.css +5 -0
  3. package/dist/nextcloud-vue.cjs.js +7039 -2409
  4. package/dist/nextcloud-vue.cjs.js.map +1 -1
  5. package/dist/nextcloud-vue.css +237 -52
  6. package/dist/nextcloud-vue.esm.js +7012 -2386
  7. package/dist/nextcloud-vue.esm.js.map +1 -1
  8. package/package.json +4 -5
  9. package/src/components/CnActionsBar/CnActionsBar.vue +225 -0
  10. package/src/components/CnActionsBar/index.js +1 -0
  11. package/src/components/CnCopyDialog/CnCopyDialog.vue +250 -0
  12. package/src/components/CnCopyDialog/index.js +1 -0
  13. package/src/components/CnDataTable/CnDataTable.vue +0 -5
  14. package/src/components/CnDeleteDialog/CnDeleteDialog.vue +170 -0
  15. package/src/components/CnDeleteDialog/index.js +1 -0
  16. package/src/components/CnFormDialog/CnFormDialog.vue +629 -0
  17. package/src/components/CnFormDialog/index.js +1 -0
  18. package/src/components/CnIcon/CnIcon.vue +89 -0
  19. package/src/components/CnIcon/index.js +1 -0
  20. package/src/components/CnIndexPage/CnIndexPage.vue +434 -300
  21. package/src/components/CnIndexSidebar/CnIndexSidebar.vue +484 -0
  22. package/src/components/CnIndexSidebar/index.js +1 -0
  23. package/src/components/CnPageHeader/CnPageHeader.vue +57 -0
  24. package/src/components/CnPageHeader/index.js +1 -0
  25. package/src/components/CnRegisterMapping/CnRegisterMapping.vue +792 -0
  26. package/src/components/CnRegisterMapping/index.js +1 -0
  27. package/src/components/index.js +8 -4
  28. package/src/composables/useListView.js +254 -45
  29. package/src/constants/metadata.js +30 -0
  30. package/src/css/actions-bar.css +48 -0
  31. package/src/css/badge.css +4 -4
  32. package/src/css/card.css +23 -23
  33. package/src/css/detail.css +13 -13
  34. package/src/css/index-page.css +32 -0
  35. package/src/css/index-sidebar.css +187 -0
  36. package/src/css/index.css +4 -0
  37. package/src/css/layout.css +14 -14
  38. package/src/css/page-header.css +33 -0
  39. package/src/css/pagination.css +12 -12
  40. package/src/css/table.css +21 -22
  41. package/src/css/utilities.css +2 -2
  42. package/src/index.js +11 -8
  43. package/src/store/plugins/index.js +1 -0
  44. package/src/store/plugins/registerMapping.js +185 -0
  45. package/src/store/useObjectStore.js +122 -61
  46. package/src/utils/headers.js +7 -1
  47. package/src/utils/index.js +1 -1
  48. package/src/utils/schema.js +133 -1
  49. package/src/components/CnDetailViewLayout/CnDetailViewLayout.vue +0 -88
  50. package/src/components/CnDetailViewLayout/index.js +0 -1
  51. package/src/components/CnEmptyState/CnEmptyState.vue +0 -78
  52. package/src/components/CnEmptyState/index.js +0 -1
  53. package/src/components/CnListViewLayout/CnListViewLayout.vue +0 -80
  54. package/src/components/CnListViewLayout/index.js +0 -1
  55. package/src/components/CnViewModeToggle/CnViewModeToggle.vue +0 -77
  56. package/src/components/CnViewModeToggle/index.js +0 -1
@@ -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: 16px;
10
- margin-bottom: 20px;
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: 4px;
17
- padding: 8px 12px;
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: 20px;
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: 12px;
45
- margin-bottom: 24px;
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: 8px;
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: 16px;
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: 16px; margin-bottom: 20px; }
67
- .detail-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; 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: 20px; margin-inline-start: 20px; margin-inline-end: 20px; }
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
@@ -6,3 +6,7 @@
6
6
  @import './badge.css';
7
7
  @import './layout.css';
8
8
  @import './utilities.css';
9
+ @import './page-header.css';
10
+ @import './actions-bar.css';
11
+ @import './index-page.css';
12
+ @import './index-sidebar.css';
@@ -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: 20px;
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: 16px;
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: 8px;
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: 8px;
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: 12px;
44
- margin-bottom: 16px;
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: 8px;
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: 20px;
75
- padding-inline: 20px;
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: 10px;
82
+ gap: calc(2 * var(--default-grid-baseline));
83
83
  color: var(--color-text-maxcontrast);
84
84
  justify-content: center;
85
- padding-block: 40px;
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: 20px; padding-inline: 20px; }
90
- .loadingContainer { display: flex; align-items: center; gap: 10px; color: var(--color-text-maxcontrast); justify-content: center; padding-block: 40px; }
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
+ }
@@ -6,9 +6,9 @@
6
6
  display: flex;
7
7
  justify-content: space-between;
8
8
  align-items: center;
9
- gap: 15px;
10
- margin-top: 30px;
11
- padding: 20px;
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: 10px;
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: 5px;
37
+ gap: var(--default-grid-baseline);
38
38
  }
39
39
 
40
40
  .cn-pagination__ellipsis {
41
- padding: 0 5px;
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: 10px;
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: 15px; margin-top: 30px; padding: 20px; flex-wrap: nowrap; }
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: 10px; flex-grow: 1; justify-content: center; }
70
- .viewPaginationNumbers { display: flex; align-items: center; gap: 5px; }
71
- .viewPaginationEllipsis { padding: 0 5px; color: var(--color-text-maxcontrast); font-size: 0.9rem; }
72
- .viewPaginationPageSize { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
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(--nldesign-component-table-background-color, var(--color-main-background));
8
- border-radius: var(--nldesign-border-radius, var(--border-radius));
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(--nldesign-component-table-border-color, var(--color-border));
12
- margin-bottom: 20px;
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(--nldesign-component-table-background-color, var(--color-main-background));
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(--nldesign-component-table-cell-padding-block, 12px)
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(--nldesign-component-table-border-color, var(--color-border));
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(--nldesign-component-table-header-background-color, var(--color-background-dark));
38
- font-weight: var(--nldesign-component-table-header-font-weight, 500);
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 0.2s ease;
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: 4px;
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(--nldesign-component-table-border-color, var(--color-border));
58
+ border-bottom: 1px solid var(--color-border);
60
59
  cursor: pointer;
61
- transition: background-color 0.2s ease;
60
+ transition: background-color var(--animation-quick) ease;
62
61
  }
63
62
 
64
63
  .cn-table-row:hover {
65
- background: var(--nldesign-component-table-row-hover-background-color, var(--color-background-hover));
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: 50px;
111
+ padding: calc(12 * var(--default-grid-baseline));
113
112
  }
114
113
 
115
114
  .cn-table-loading p {
116
- margin-top: 20px;
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: 48px 24px;
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(--nldesign-component-table-background-color, var(--color-main-background)); border-radius: var(--nldesign-border-radius, var(--border-radius)); overflow: hidden; box-shadow: 0 2px 4px var(--color-box-shadow); border: 1px solid var(--nldesign-component-table-border-color, var(--color-border)); margin-bottom: 20px; }
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(--nldesign-component-table-background-color, var(--color-main-background)); }
134
- .viewTable th, .viewTable td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
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 0.2s ease; }
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; }
@@ -21,11 +21,11 @@
21
21
 
22
22
  /* Vue Transition Animations */
23
23
  .cn-slide-fade-enter-active {
24
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
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 0.3s cubic-bezier(0.4, 0, 1, 1);
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'
@@ -2,3 +2,4 @@ export { auditTrailsPlugin } from './auditTrails.js'
2
2
  export { relationsPlugin } from './relations.js'
3
3
  export { filesPlugin } from './files.js'
4
4
  export { lifecyclePlugin } from './lifecycle.js'
5
+ export { registerMappingPlugin } from './registerMapping.js'