kb-ui-vue 0.2.0 → 0.3.0

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 (21) hide show
  1. package/dist/components/Calendar/Calendar.vue.d.ts +17 -0
  2. package/dist/components/Calendar/index.d.ts +1 -1
  3. package/dist/components/Cascader/Cascader.vue.d.ts +21 -5
  4. package/dist/components/Checkbox/Checkbox.vue.d.ts +3 -0
  5. package/dist/components/DatePicker/DatePicker.vue.d.ts +17 -4
  6. package/dist/components/DatePicker/index.d.ts +1 -1
  7. package/dist/components/Table/Table.vue.d.ts +40 -3
  8. package/dist/components/Transfer/Transfer.vue.d.ts +17 -1
  9. package/dist/components/Tree/Tree.vue.d.ts +25 -1
  10. package/dist/components/Upload/Upload.vue.d.ts +1 -1
  11. package/dist/index.cjs +1 -1
  12. package/dist/index.js +1152 -520
  13. package/dist/styles/Calendar.css +10 -0
  14. package/dist/styles/Cascader.css +46 -0
  15. package/dist/styles/Checkbox.css +15 -0
  16. package/dist/styles/DatePicker.css +30 -0
  17. package/dist/styles/Table.css +97 -8
  18. package/dist/styles/Transfer.css +87 -9
  19. package/dist/styles/Tree.css +43 -4
  20. package/dist/styles/index.css +328 -21
  21. package/package.json +2 -1
package/dist/styles/Calendar.css CHANGED
@@ -64,6 +64,16 @@
64
64
  cursor: pointer;
65
65
  }
66
66
 
67
+ .kb-calendar__day--in-range {
68
+ border-radius: 0;
69
+ background: color-mix(in srgb, var(--kb-color-primary) 14%, transparent);
70
+ }
71
+
72
+ .kb-calendar__day--range-end {
73
+ background: var(--kb-color-primary);
74
+ color: var(--kb-color-bg);
75
+ }
76
+
67
77
  .kb-calendar__day:hover:not(.kb-calendar__day--active) {
68
78
  background: var(--kb-color-bg-elevated);
69
79
  }
package/dist/styles/Cascader.css CHANGED
@@ -73,3 +73,49 @@
73
73
  .kb-cascader__more {
74
74
  color: var(--kb-color-text-3);
75
75
  }
76
+
77
+ .kb-cascader__suffix {
78
+ display: inline-flex;
79
+ align-items: center;
80
+ gap: var(--kb-space-1);
81
+ }
82
+
83
+ .kb-cascader__clear {
84
+ color: var(--kb-color-text-3);
85
+ font-size: 12px;
86
+ line-height: 1;
87
+ }
88
+
89
+ .kb-cascader__clear:hover {
90
+ color: var(--kb-color-text-1);
91
+ }
92
+
93
+ .kb-cascader__option--disabled {
94
+ color: var(--kb-color-text-3);
95
+ cursor: not-allowed;
96
+ }
97
+
98
+ .kb-cascader__leaf-tag {
99
+ padding: 0 var(--kb-space-1);
100
+ border: 1px solid var(--kb-color-border);
101
+ border-radius: var(--kb-radius-sm);
102
+ color: var(--kb-color-text-3);
103
+ font-size: var(--kb-font-size-sm);
104
+ }
105
+
106
+ .kb-cascader__loading {
107
+ padding: var(--kb-space-2) var(--kb-space-3);
108
+ color: var(--kb-color-text-3);
109
+ font-size: var(--kb-font-size-md);
110
+ white-space: nowrap;
111
+ }
112
+
113
+ .kb-cascader--disabled {
114
+ cursor: not-allowed;
115
+ opacity: 0.6;
116
+ }
117
+
118
+ .kb-cascader--disabled .kb-cascader__trigger {
119
+ cursor: not-allowed;
120
+ background: var(--kb-color-bg-elevated);
121
+ }
package/dist/styles/Checkbox.css CHANGED
@@ -57,6 +57,21 @@
57
57
  transform: rotate(45deg) scale(1);
58
58
  }
59
59
 
60
+ .kb-checkbox--indeterminate .kb-checkbox__inner {
61
+ border-color: var(--kb-color-primary);
62
+ background: var(--kb-color-primary);
63
+ }
64
+
65
+ .kb-checkbox--indeterminate .kb-checkbox__inner::after {
66
+ top: 6px;
67
+ left: 3px;
68
+ width: 8px;
69
+ height: 0;
70
+ border-width: 2px 0 0;
71
+ border-color: var(--kb-color-bg);
72
+ transform: none;
73
+ }
74
+
60
75
  .kb-checkbox__label {
61
76
  line-height: 1;
62
77
  }
package/dist/styles/DatePicker.css CHANGED
@@ -17,10 +17,40 @@
17
17
  transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
18
18
  }
19
19
 
20
+ .kb-datepicker__input--wide {
21
+ width: 280px;
22
+ }
23
+
24
+ .kb-datepicker__input--disabled {
25
+ cursor: not-allowed;
26
+ opacity: 0.6;
27
+ }
28
+
29
+ .kb-datepicker__clear {
30
+ position: absolute;
31
+ top: 50%;
32
+ right: var(--kb-space-2);
33
+ width: 18px;
34
+ height: 18px;
35
+ padding: 0;
36
+ border: none;
37
+ border-radius: var(--kb-radius-round);
38
+ transform: translateY(-50%);
39
+ background: var(--kb-color-bg-elevated);
40
+ color: var(--kb-color-text-3);
41
+ font-size: 14px;
42
+ line-height: 1;
43
+ cursor: pointer;
44
+ }
45
+
20
46
  .kb-datepicker__input:focus {
21
47
  border-color: var(--kb-color-primary);
22
48
  }
23
49
 
50
+ .kb-datepicker__clear:hover {
51
+ color: var(--kb-color-text-1);
52
+ }
53
+
24
54
  .kb-datepicker__panel {
25
55
  position: absolute;
26
56
  top: calc(100% + 4px);
package/dist/styles/Table.css CHANGED
@@ -5,6 +5,59 @@
5
5
  font-size: var(--kb-font-size-md);
6
6
  }
7
7
 
8
+ .kb-table__wrapper {
9
+ width: 100%;
10
+ }
11
+
12
+ .kb-table__wrapper--scroll {
13
+ overflow-x: auto;
14
+ }
15
+
16
+ .kb-table--fixed-cols {
17
+ table-layout: fixed;
18
+ }
19
+
20
+ .kb-table__th--sortable {
21
+ cursor: pointer;
22
+ user-select: none;
23
+ }
24
+
25
+ .kb-table__cell--selection {
26
+ width: 44px;
27
+ text-align: center;
28
+ }
29
+
30
+ .kb-table__empty {
31
+ padding: var(--kb-space-6);
32
+ color: var(--kb-color-text-3);
33
+ text-align: center;
34
+ }
35
+
36
+ .kb-table__cell--fixed-left,
37
+ .kb-table__cell--fixed-right {
38
+ position: sticky;
39
+ z-index: 1;
40
+ background: var(--kb-color-bg);
41
+ }
42
+
43
+ .kb-table__cell--fixed-left-last {
44
+ box-shadow: 6px 0 8px -6px rgb(0 0 0 / 12%);
45
+ }
46
+
47
+ .kb-table__cell--fixed-right-first {
48
+ box-shadow: -6px 0 8px -6px rgb(0 0 0 / 12%);
49
+ }
50
+
51
+ .kb-table__pagination {
52
+ display: flex;
53
+ justify-content: flex-end;
54
+ padding: var(--kb-space-3) 0;
55
+ }
56
+
57
+ .kb-table--border {
58
+ border: 1px solid var(--kb-color-border);
59
+ }
60
+
8
61
  .kb-table th {
9
62
  padding: var(--kb-space-2) var(--kb-space-3);
10
63
  border-bottom: 1px solid var(--kb-color-border);
@@ -20,6 +73,41 @@
20
73
  color: var(--kb-color-text-1);
21
74
  }
22
75
 
76
+ .kb-table--border th,
77
+ .kb-table--border td {
78
+ border-right: 1px solid var(--kb-color-border);
79
+ }
80
+
81
+ .kb-table--small th,
82
+ .kb-table--small td {
83
+ padding: var(--kb-space-1) var(--kb-space-2);
84
+ }
85
+
86
+ .kb-table--large th,
87
+ .kb-table--large td {
88
+ padding: var(--kb-space-3) var(--kb-space-4);
89
+ }
90
+
91
+ .kb-table__cell--selection .kb-checkbox {
92
+ display: flex;
93
+ justify-content: center;
94
+ }
95
+
96
+ .kb-table th.kb-table__cell--fixed-left,
97
+ .kb-table th.kb-table__cell--fixed-right {
98
+ z-index: 2;
99
+ background: var(--kb-color-bg-elevated);
100
+ }
101
+
102
+ .kb-table__row--selected td {
103
+ background: color-mix(in srgb, var(--kb-color-primary) 8%, transparent);
104
+ }
105
+
106
+ .kb-table--border th:last-child,
107
+ .kb-table--border td:last-child {
108
+ border-right: none;
109
+ }
110
+
23
111
  .kb-table tbody tr:hover {
24
112
  background: color-mix(in srgb, var(--kb-color-primary) 4%, transparent);
25
113
  }
@@ -28,16 +116,17 @@
28
116
  background: var(--kb-color-bg-elevated);
29
117
  }
30
118
 
31
- .kb-table--border {
32
- border: 1px solid var(--kb-color-border);
119
+ .kb-table--stripe tbody tr:nth-child(even) .kb-table__cell--fixed-left,
120
+ .kb-table--stripe tbody tr:nth-child(even) .kb-table__cell--fixed-right {
121
+ background: var(--kb-color-bg-elevated);
33
122
  }
34
123
 
35
- .kb-table--border th,
36
- .kb-table--border td {
37
- border-right: 1px solid var(--kb-color-border);
124
+ .kb-table tbody tr:hover td.kb-table__cell--fixed-left,
125
+ .kb-table tbody tr:hover td.kb-table__cell--fixed-right {
126
+ background: color-mix(in srgb, var(--kb-color-primary) 4%, var(--kb-color-bg));
38
127
  }
39
128
 
40
- .kb-table--border th:last-child,
41
- .kb-table--border td:last-child {
42
- border-right: none;
129
+ .kb-table tbody tr.kb-table__row--selected td.kb-table__cell--fixed-left,
130
+ .kb-table tbody tr.kb-table__row--selected td.kb-table__cell--fixed-right {
131
+ background: color-mix(in srgb, var(--kb-color-primary) 8%, var(--kb-color-bg));
43
132
  }
package/dist/styles/Transfer.css CHANGED
@@ -1,25 +1,54 @@
1
1
  .kb-transfer {
2
2
  display: flex;
3
- align-items: center;
3
+ align-items: stretch;
4
4
  gap: var(--kb-space-2);
5
5
  }
6
6
 
7
- .kb-transfer__box {
7
+ .kb-transfer__side {
8
+ display: flex;
9
+ flex-direction: column;
8
10
  width: 180px;
9
- height: 220px;
10
- overflow-y: auto;
11
- border: 1px solid var(--kb-color-border);
12
- border-radius: var(--kb-radius-md);
13
- background: var(--kb-color-bg);
11
+ }
12
+
13
+ .kb-transfer__header {
14
+ display: flex;
15
+ align-items: center;
16
+ padding: var(--kb-space-1) var(--kb-space-2);
14
17
  }
15
18
 
16
19
  .kb-transfer__title {
17
- padding: var(--kb-space-2) var(--kb-space-3);
18
- border-bottom: 1px solid var(--kb-color-border);
19
20
  color: var(--kb-color-text-3);
20
21
  font-size: var(--kb-font-size-sm);
21
22
  }
22
23
 
24
+ .kb-transfer__filter {
25
+ padding: 0 var(--kb-space-2) var(--kb-space-1);
26
+ }
27
+
28
+ .kb-transfer__input {
29
+ width: 100%;
30
+ box-sizing: border-box;
31
+ padding: var(--kb-space-1) var(--kb-space-2);
32
+ border: 1px solid var(--kb-color-border);
33
+ border-radius: var(--kb-radius-sm);
34
+ background: var(--kb-color-bg);
35
+ color: var(--kb-color-text-1);
36
+ font-size: var(--kb-font-size-sm);
37
+ }
38
+
39
+ .kb-transfer__input:disabled {
40
+ background: var(--kb-color-bg-elevated);
41
+ cursor: not-allowed;
42
+ }
43
+
44
+ .kb-transfer__box {
45
+ height: 180px;
46
+ overflow-y: auto;
47
+ border: 1px solid var(--kb-color-border);
48
+ border-radius: var(--kb-radius-md);
49
+ background: var(--kb-color-bg);
50
+ }
51
+
23
52
  .kb-transfer__item {
24
53
  padding: var(--kb-space-2) var(--kb-space-3);
25
54
  color: var(--kb-color-text-1);
@@ -36,9 +65,50 @@
36
65
  color: var(--kb-color-primary);
37
66
  }
38
67
 
68
+ .kb-transfer__item--disabled {
69
+ color: var(--kb-color-text-3);
70
+ cursor: not-allowed;
71
+ }
72
+
73
+ .kb-transfer__empty {
74
+ padding: var(--kb-space-4) 0;
75
+ color: var(--kb-color-text-3);
76
+ font-size: var(--kb-font-size-sm);
77
+ text-align: center;
78
+ }
79
+
80
+ .kb-transfer__pager {
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ gap: var(--kb-space-2);
85
+ padding-top: var(--kb-space-1);
86
+ }
87
+
88
+ .kb-transfer__page {
89
+ width: 24px;
90
+ height: 24px;
91
+ border: 1px solid var(--kb-color-border);
92
+ border-radius: var(--kb-radius-sm);
93
+ background: var(--kb-color-bg);
94
+ color: var(--kb-color-text-2);
95
+ cursor: pointer;
96
+ }
97
+
98
+ .kb-transfer__page:disabled {
99
+ cursor: not-allowed;
100
+ opacity: 0.5;
101
+ }
102
+
103
+ .kb-transfer__page-info {
104
+ color: var(--kb-color-text-3);
105
+ font-size: var(--kb-font-size-sm);
106
+ }
107
+
39
108
  .kb-transfer__actions {
40
109
  display: flex;
41
110
  flex-direction: column;
111
+ justify-content: center;
42
112
  gap: var(--kb-space-2);
43
113
  }
44
114
 
@@ -62,3 +132,11 @@
62
132
  border-color: var(--kb-color-primary);
63
133
  color: var(--kb-color-primary);
64
134
  }
135
+
136
+ .kb-transfer--disabled {
137
+ cursor: not-allowed;
138
+ }
139
+
140
+ .kb-transfer--disabled .kb-transfer__item {
141
+ cursor: not-allowed;
142
+ }
package/dist/styles/Tree.css CHANGED
@@ -3,15 +3,26 @@
3
3
  color: var(--kb-color-text-1);
4
4
  }
5
5
 
6
+ .kb-tree__scroll {
7
+ overflow: auto;
8
+ }
9
+
10
+ .kb-tree__inner {
11
+ position: relative;
12
+ }
13
+
6
14
  .kb-tree__row {
7
15
  display: flex;
8
16
  align-items: center;
9
17
  padding: 4px 0;
10
18
  border-radius: var(--kb-radius-sm);
19
+ cursor: default;
20
+ box-sizing: border-box;
11
21
  }
12
22
 
13
- .kb-tree__row:hover {
14
- background: var(--kb-color-bg-elevated);
23
+ .kb-tree__indent {
24
+ flex-shrink: 0;
25
+ height: 100%;
15
26
  }
16
27
 
17
28
  .kb-tree__toggle {
@@ -45,6 +56,34 @@
45
56
  color: var(--kb-color-primary);
46
57
  }
47
58
 
48
- .kb-tree__children {
49
- margin-left: var(--kb-space-4);
59
+ .kb-tree__row--selected {
60
+ background: color-mix(in srgb, var(--kb-color-primary) 8%, transparent);
61
+ }
62
+
63
+ .kb-tree__row--disabled,
64
+ .kb-tree__row--disabled .kb-tree__label {
65
+ color: var(--kb-color-text-3);
66
+ cursor: not-allowed;
67
+ }
68
+
69
+ .kb-tree__row--dragover {
70
+ outline: 1px dashed color-mix(in srgb, var(--kb-color-primary) 50%, transparent);
71
+ outline-offset: -1px;
72
+ }
73
+
74
+ .kb-tree__row:hover {
75
+ background: var(--kb-color-bg-elevated);
76
+ }
77
+
78
+ .kb-tree__row--dragover.kb-tree__row--drop-before {
79
+ box-shadow: inset 0 2px 0 0 var(--kb-color-primary);
80
+ }
81
+
82
+ .kb-tree__row--dragover.kb-tree__row--drop-after {
83
+ box-shadow: inset 0 -2px 0 0 var(--kb-color-primary);
84
+ }
85
+
86
+ .kb-tree__row--dragover.kb-tree__row--drop-inner {
87
+ background: color-mix(in srgb, var(--kb-color-primary) 16%, transparent);
88
+ box-shadow: none;
50
89
  }