@1001-digital/components 2.0.4 → 2.0.6

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 (17) hide show
  1. package/package.json +2 -2
  2. package/src/base/components/Actions.vue +1 -1
  3. package/src/base/components/Alert.vue +1 -1
  4. package/src/base/components/Calendar.vue +2 -2
  5. package/src/base/components/ColorPicker.vue +1 -1
  6. package/src/base/components/Combobox.vue +20 -10
  7. package/src/base/components/Dialog.vue +2 -1
  8. package/src/base/components/Dropdown.vue +80 -78
  9. package/src/base/components/FormDatePicker.vue +2 -2
  10. package/src/base/components/FormLabel.vue +1 -1
  11. package/src/base/components/PinInput.vue +1 -1
  12. package/src/base/components/Popover.vue +4 -2
  13. package/src/base/components/Tag.vue +1 -1
  14. package/src/base/components/Toasts.vue +7 -2
  15. package/src/base/components/Tooltip.vue +29 -27
  16. package/src/base/utils/time.ts +3 -1
  17. package/src/index.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1001-digital/components",
3
- "version": "2.0.4",
3
+ "version": "2.0.6",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "sideEffects": [
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "peerDependencies": {
20
20
  "vue": "^3.5.0",
21
- "@1001-digital/styles": "^2.1.1"
21
+ "@1001-digital/styles": "^2.1.2"
22
22
  },
23
23
  "dependencies": {
24
24
  "@iconify/vue": "^5.0.0",
package/src/base/components/Actions.vue CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  & :deep(> label) {
41
- font-family: var(--font-family);
41
+ font-family: var(--ui-font-family);
42
42
  font-size: var(--ui-font-size);
43
43
  font-weight: var(--ui-font-weight);
44
44
  text-transform: var(--ui-text-transform);
package/src/base/components/Alert.vue CHANGED
@@ -48,7 +48,7 @@ const dismiss = () => {
48
48
  border-color: var(--alert-border-color);
49
49
  background-color: var(--alert-background);
50
50
  color: var(--alert-color);
51
- font-family: var(--font-family);
51
+ font-family: var(--ui-font-family);
52
52
  font-size: var(--ui-font-size);
53
53
  text-transform: var(--ui-text-transform);
54
54
 
package/src/base/components/Calendar.vue CHANGED
@@ -129,7 +129,7 @@ const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateVal
129
129
  }
130
130
 
131
131
  .calendar-heading {
132
- font-family: var(--font-family);
132
+ font-family: var(--ui-font-family);
133
133
  font-size: var(--ui-font-size);
134
134
  text-transform: var(--ui-text-transform);
135
135
  font-weight: 500;
@@ -169,7 +169,7 @@ const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateVal
169
169
  }
170
170
 
171
171
  .calendar-head-cell {
172
- font-family: var(--font-family);
172
+ font-family: var(--ui-font-family);
173
173
  font-size: var(--font-xs);
174
174
  text-transform: var(--ui-text-transform);
175
175
  color: var(--muted);
package/src/base/components/ColorPicker.vue CHANGED
@@ -186,7 +186,7 @@ function handleHexUpdate(hex: string) {
186
186
  background: var(--button-background);
187
187
  border-radius: var(--button-border-radius);
188
188
  box-shadow: var(--border-shadow);
189
- font-family: var(--font-family);
189
+ font-family: var(--ui-font-family);
190
190
  font-size: var(--ui-font-size);
191
191
  cursor: pointer;
192
192
  transition:
package/src/base/components/Combobox.vue CHANGED
@@ -94,22 +94,32 @@ const props = withDefaults(
94
94
  )
95
95
 
96
96
  const resolveLabel = (v: any) => {
97
- const option = props.options.find(o => o[props.valueKey] === v)
97
+ if (v == null) return ''
98
+ const option = props.options.find((o) => o[props.valueKey] === v)
98
99
  return option ? String(option[props.labelKey]) : String(v)
99
100
  }
100
101
 
101
102
  const resolveDisplayValue = (val: any) => {
103
+ if (val == null) return ''
104
+ if (Array.isArray(val) && val.length === 0) return ''
102
105
  if (Array.isArray(val)) return val.map(resolveLabel).join(', ')
103
106
  return resolveLabel(val)
104
107
  }
105
108
  </script>
106
109
 
107
110
  <style scoped>
111
+ /* &:has(> .combobox-root) { */
112
+ /* } */
113
+
108
114
  @layer components {
115
+ :global(.form-item:has(> .combobox-root)) {
116
+ inline-size: max-content !important;
117
+ max-inline-size: none;
118
+ }
119
+
109
120
  .combobox-root {
110
121
  inline-size: 100%;
111
122
  }
112
-
113
123
  .combobox-anchor {
114
124
  display: flex;
115
125
  align-items: center;
@@ -134,7 +144,7 @@ const resolveDisplayValue = (val: any) => {
134
144
  all: unset;
135
145
  flex: 1;
136
146
  padding: var(--size-2) var(--size-3);
137
- font-family: var(--font-family);
147
+ font-family: var(--ui-font-family);
138
148
  font-size: var(--ui-font-size);
139
149
  color: var(--color);
140
150
  min-inline-size: 0;
@@ -166,7 +176,7 @@ const resolveDisplayValue = (val: any) => {
166
176
  }
167
177
  }
168
178
 
169
- .combobox-content {
179
+ :deep(.combobox-content) {
170
180
  background: var(--combobox-background);
171
181
  border: var(--combobox-border);
172
182
  border-radius: var(--combobox-border-radius);
@@ -198,19 +208,19 @@ const resolveDisplayValue = (val: any) => {
198
208
  }
199
209
  }
200
210
 
201
- .combobox-viewport {
211
+ :deep(.combobox-viewport) {
202
212
  padding: var(--combobox-padding);
203
213
  }
204
214
 
205
- .combobox-empty {
215
+ :deep(.combobox-empty) {
206
216
  padding: var(--size-2) var(--size-3);
207
217
  color: var(--muted);
208
- font-family: var(--font-family);
218
+ font-family: var(--ui-font-family);
209
219
  font-size: var(--ui-font-size);
210
220
  user-select: none;
211
221
  }
212
222
 
213
- .combobox-item {
223
+ :deep(.combobox-item) {
214
224
  padding: var(--size-2) var(--size-3);
215
225
  border-radius: calc(var(--combobox-border-radius) / 2);
216
226
  display: flex;
@@ -220,7 +230,7 @@ const resolveDisplayValue = (val: any) => {
220
230
  cursor: pointer;
221
231
  outline: none;
222
232
  user-select: none;
223
- font-family: var(--font-family);
233
+ font-family: var(--ui-font-family);
224
234
  font-size: var(--ui-font-size);
225
235
 
226
236
  &[data-highlighted] {
@@ -237,7 +247,7 @@ const resolveDisplayValue = (val: any) => {
237
247
  }
238
248
  }
239
249
 
240
- .combobox-indicator {
250
+ :deep(.combobox-indicator) {
241
251
  color: var(--accent);
242
252
  }
243
253
  }
package/src/base/components/Dialog.vue CHANGED
@@ -161,9 +161,10 @@ onBeforeUnmount(() => {
161
161
  display: flex;
162
162
  align-items: center;
163
163
  block-size: calc(var(--spacer) * 2);
164
+ background: var(--dialog-header-background);
164
165
  box-shadow: var(--border-shadow);
165
166
  padding-inline-start: var(--spacer);
166
- font-family: var(--font-family);
167
+ font-family: var(--ui-font-family);
167
168
  font-size: var(--ui-font-size);
168
169
  text-transform: var(--ui-text-transform);
169
170
  margin: 0;
package/src/base/components/Dropdown.vue CHANGED
@@ -73,98 +73,100 @@ const open = defineModel<boolean>('open', { required: true })
73
73
 
74
74
  <style scoped>
75
75
  @layer components {
76
- .dropdown {
77
- background: var(--dropdown-background);
78
- color: var(--color);
79
- border: var(--dropdown-border);
80
- border-radius: var(--dropdown-border-radius);
81
- padding: 0;
82
- font-family: var(--font-family);
83
- font-size: var(--ui-font-size);
84
- z-index: var(--z-index-ui);
85
- min-inline-size: var(--reka-dropdown-menu-trigger-width);
86
- max-block-size: var(--reka-dropdown-menu-content-available-height);
87
- transform-origin: var(--reka-dropdown-menu-content-transform-origin);
88
-
89
- /* Entry/exit animations */
90
- opacity: 1;
91
- scale: 1;
92
- transition:
93
- opacity var(--speed) ease,
94
- scale var(--speed) ease;
95
-
96
- @starting-style {
97
- opacity: 0;
98
- scale: 0.95;
76
+ :deep() {
77
+ .dropdown {
78
+ background: var(--dropdown-background);
79
+ color: var(--color);
80
+ border: var(--dropdown-border);
81
+ border-radius: var(--dropdown-border-radius);
82
+ padding: 0;
83
+ font-family: var(--ui-font-family);
84
+ font-size: var(--ui-font-size);
85
+ z-index: var(--z-index-ui);
86
+ min-inline-size: var(--reka-dropdown-menu-trigger-width);
87
+ max-block-size: var(--reka-dropdown-menu-content-available-height);
88
+ transform-origin: var(--reka-dropdown-menu-content-transform-origin);
89
+
90
+ /* Entry/exit animations */
91
+ opacity: 1;
92
+ scale: 1;
93
+ transition:
94
+ opacity var(--speed) ease,
95
+ scale var(--speed) ease;
96
+
97
+ @starting-style {
98
+ opacity: 0;
99
+ scale: 0.95;
100
+ }
101
+
102
+ &[data-state='closed'] {
103
+ opacity: 0;
104
+ scale: 0.95;
105
+ }
106
+
107
+ &:focus {
108
+ outline: none;
109
+ }
110
+
111
+ .dropdown-arrow {
112
+ fill: var(--dropdown-arrow-fill);
113
+ stroke: var(--border-color);
114
+ }
99
115
  }
100
116
 
101
- &[data-state='closed'] {
102
- opacity: 0;
103
- scale: 0.95;
117
+ .dropdown-items {
118
+ padding: var(--dropdown-padding);
119
+ overflow-y: auto;
120
+ overscroll-behavior: contain;
104
121
  }
105
122
 
106
- &:focus {
123
+ .dropdown-item {
124
+ padding: var(--size-2) var(--size-3);
125
+ border-radius: calc(var(--dropdown-border-radius) / 2);
126
+ display: flex;
127
+ align-items: center;
128
+ gap: var(--size-2);
129
+ cursor: pointer;
107
130
  outline: none;
108
- }
109
-
110
- .dropdown-arrow {
111
- fill: var(--dropdown-arrow-fill);
112
- stroke: var(--border-color);
113
- }
114
- }
131
+ user-select: none;
115
132
 
116
- .dropdown-items {
117
- padding: var(--dropdown-padding);
118
- overflow-y: auto;
119
- overscroll-behavior: contain;
120
- }
133
+ &[data-highlighted] {
134
+ background: var(--button-background-highlight);
135
+ }
121
136
 
122
- .dropdown-item {
123
- padding: var(--size-2) var(--size-3);
124
- border-radius: calc(var(--dropdown-border-radius) / 2);
125
- display: flex;
126
- align-items: center;
127
- gap: var(--size-2);
128
- cursor: pointer;
129
- outline: none;
130
- user-select: none;
131
-
132
- &[data-highlighted] {
133
- background: var(--button-background-highlight);
137
+ &[data-disabled] {
138
+ opacity: 0.5;
139
+ cursor: not-allowed;
140
+ }
134
141
  }
135
142
 
136
- &[data-disabled] {
137
- opacity: 0.5;
138
- cursor: not-allowed;
143
+ .dropdown-label {
144
+ padding: var(--size-2) var(--size-3);
145
+ color: var(--muted);
146
+ font-weight: 500;
147
+ user-select: none;
139
148
  }
140
- }
141
-
142
- .dropdown-label {
143
- padding: var(--size-2) var(--size-3);
144
- color: var(--muted);
145
- font-weight: 500;
146
- user-select: none;
147
- }
148
149
 
149
- .dropdown-separator {
150
- block-size: 1px;
151
- background: var(--border-color);
152
- margin-block: var(--size-1);
153
- }
150
+ .dropdown-separator {
151
+ block-size: 1px;
152
+ background: var(--border-color);
153
+ margin-block: var(--size-1);
154
+ }
154
155
 
155
- .dropdown-item-indicator {
156
- display: inline-flex;
157
- align-items: center;
158
- justify-content: center;
159
- }
156
+ .dropdown-item-indicator {
157
+ display: inline-flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ }
160
161
 
161
- .dropdown-sub-trigger {
162
- justify-content: space-between;
163
- }
162
+ .dropdown-sub-trigger {
163
+ justify-content: space-between;
164
+ }
164
165
 
165
- .dropdown-sub-icon {
166
- color: var(--muted);
167
- margin-inline-start: auto;
166
+ .dropdown-sub-icon {
167
+ color: var(--muted);
168
+ margin-inline-start: auto;
169
+ }
168
170
  }
169
171
  }
170
172
  </style>
package/src/base/components/FormDatePicker.vue CHANGED
@@ -284,7 +284,7 @@ const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateVal
284
284
  }
285
285
 
286
286
  .form-date-picker-heading {
287
- font-family: var(--font-family);
287
+ font-family: var(--ui-font-family);
288
288
  font-size: var(--ui-font-size);
289
289
  text-transform: var(--ui-text-transform);
290
290
  font-weight: 500;
@@ -324,7 +324,7 @@ const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateVal
324
324
  }
325
325
 
326
326
  .form-date-picker-head-cell {
327
- font-family: var(--font-family);
327
+ font-family: var(--ui-font-family);
328
328
  font-size: var(--font-xs);
329
329
  text-transform: var(--ui-text-transform);
330
330
  color: var(--muted);
package/src/base/components/FormLabel.vue CHANGED
@@ -13,7 +13,7 @@ defineProps<{
13
13
 
14
14
  <style scoped>
15
15
  .form-label {
16
- font-family: var(--font-family);
16
+ font-family: var(--ui-font-family);
17
17
  font-size: var(--ui-font-size);
18
18
  font-weight: var(--ui-font-weight);
19
19
  text-transform: var(--ui-text-transform);
package/src/base/components/PinInput.vue CHANGED
@@ -70,7 +70,7 @@ defineEmits<{
70
70
  box-shadow: var(--border-shadow);
71
71
  background: var(--pin-input-background);
72
72
  color: var(--pin-input-color);
73
- font-family: var(--font-family);
73
+ font-family: var(--ui-font-family);
74
74
  font-size: var(--pin-input-font-size);
75
75
  font-weight: var(--pin-input-font-weight);
76
76
  text-transform: var(--ui-text-transform);
package/src/base/components/Popover.vue CHANGED
@@ -105,7 +105,7 @@ const onInteractOutside = (e: Event) => {
105
105
  border: var(--popover-border);
106
106
  border-radius: var(--popover-border-radius);
107
107
  padding: 0;
108
- font-family: var(--font-family);
108
+ font-family: var(--ui-font-family);
109
109
  font-size: var(--ui-font-size);
110
110
  z-index: var(--z-index-ui);
111
111
  min-inline-size: max(
@@ -148,12 +148,13 @@ const onInteractOutside = (e: Event) => {
148
148
  display: flex;
149
149
  align-items: center;
150
150
  block-size: calc(var(--spacer) * 2);
151
+ background: var(--popover-header-background);
151
152
  border-start-start-radius: var(--popover-border-radius);
152
153
  border-start-end-radius: var(--popover-border-radius);
153
154
  box-shadow: var(--border-shadow);
154
155
  padding-inline-start: var(--popover-padding);
155
156
  padding-right: calc(var(--spacer) * 3);
156
- font-family: var(--font-family);
157
+ font-family: var(--ui-font-family);
157
158
  font-size: var(--ui-font-size);
158
159
  text-transform: var(--ui-text-transform);
159
160
  margin: 0;
@@ -171,6 +172,7 @@ const onInteractOutside = (e: Event) => {
171
172
  position: absolute !important;
172
173
  top: 0;
173
174
  right: 0;
175
+ background: var(--popover-header-background) !important;
174
176
  box-shadow: var(--border-shadow) !important;
175
177
  border-radius: 0 !important;
176
178
  border-start-end-radius: var(--popover-border-radius) !important;
package/src/base/components/Tag.vue CHANGED
@@ -29,7 +29,7 @@ const emit = defineEmits<{
29
29
  .tag {
30
30
  border-radius: var(--tag-border-radius);
31
31
  box-shadow: var(--border-shadow);
32
- font-family: var(--font-family);
32
+ font-family: var(--ui-font-family);
33
33
  font-size: var(--font-sm);
34
34
  font-weight: var(--ui-font-weight);
35
35
  text-transform: var(--ui-text-transform);
package/src/base/components/Toasts.vue CHANGED
@@ -131,7 +131,7 @@ const onClose = (id: string) => {
131
131
  border: var(--border);
132
132
  border-radius: var(--toast-border-radius);
133
133
  overflow: hidden;
134
- font-family: var(--font-family);
134
+ font-family: var(--ui-font-family);
135
135
  font-size: var(--ui-font-size);
136
136
 
137
137
  /* Entry animation */
@@ -171,6 +171,7 @@ const onClose = (id: string) => {
171
171
 
172
172
  /* Variants */
173
173
  &.info {
174
+ --toast-header-background: var(--toast-info-header-background);
174
175
  --border-color: var(--toast-info-border-color);
175
176
  color: var(--toast-info-color);
176
177
  background: var(--toast-info-background);
@@ -183,6 +184,7 @@ const onClose = (id: string) => {
183
184
  }
184
185
 
185
186
  &.success {
187
+ --toast-header-background: var(--toast-success-header-background);
186
188
  --border-color: var(--toast-success-border-color);
187
189
  color: var(--toast-success-color);
188
190
  background: var(--toast-success-background);
@@ -195,6 +197,7 @@ const onClose = (id: string) => {
195
197
  }
196
198
 
197
199
  &.error {
200
+ --toast-header-background: var(--toast-error-header-background);
198
201
  --border-color: var(--toast-error-border-color);
199
202
  color: var(--toast-error-color);
200
203
  background: var(--toast-error-background);
@@ -211,10 +214,11 @@ const onClose = (id: string) => {
211
214
  align-items: center;
212
215
  gap: var(--spacer-sm);
213
216
  block-size: calc(var(--spacer) * 2);
217
+ background: var(--toast-header-background);
214
218
  box-shadow: var(--border-shadow);
215
219
  padding-inline-start: var(--ui-padding-inline);
216
220
  padding-right: calc(var(--spacer) * 3);
217
- font-family: var(--font-family);
221
+ font-family: var(--ui-font-family);
218
222
  font-size: var(--ui-font-size);
219
223
  font-weight: normal;
220
224
  text-transform: var(--ui-text-transform);
@@ -246,6 +250,7 @@ const onClose = (id: string) => {
246
250
  position: absolute !important;
247
251
  top: 0;
248
252
  right: 0;
253
+ background: var(--toast-header-background) !important;
249
254
  box-shadow: var(--border-shadow) !important;
250
255
  border-radius: 0 !important;
251
256
  border-start-end-radius: var(--toast-border-radius) !important;
package/src/base/components/Tooltip.vue CHANGED
@@ -66,37 +66,39 @@ const props = withDefaults(
66
66
 
67
67
  <style scoped>
68
68
  @layer components {
69
- .tooltip {
70
- background: var(--tooltip-background);
71
- color: var(--color);
72
- border: var(--tooltip-border);
73
- border-radius: var(--tooltip-border-radius);
74
- padding: var(--tooltip-padding);
75
- font-family: var(--font-family);
76
- font-size: var(--ui-font-size);
77
- z-index: var(--z-index-ui);
78
- transform-origin: var(--reka-tooltip-content-transform-origin);
69
+ :deep() {
70
+ .tooltip {
71
+ background: var(--tooltip-background);
72
+ color: var(--color);
73
+ border: var(--tooltip-border);
74
+ border-radius: var(--tooltip-border-radius);
75
+ padding: var(--tooltip-padding);
76
+ font-family: var(--ui-font-family);
77
+ font-size: var(--ui-font-size);
78
+ z-index: var(--z-index-ui);
79
+ transform-origin: var(--reka-tooltip-content-transform-origin);
79
80
 
80
- /* Entry/exit animations */
81
- opacity: 1;
82
- scale: 1;
83
- transition:
84
- opacity var(--speed) ease,
85
- scale var(--speed) ease;
81
+ /* Entry/exit animations */
82
+ opacity: 1;
83
+ scale: 1;
84
+ transition:
85
+ opacity var(--speed) ease,
86
+ scale var(--speed) ease;
86
87
 
87
- @starting-style {
88
- opacity: 0;
89
- scale: 0.95;
90
- }
88
+ @starting-style {
89
+ opacity: 0;
90
+ scale: 0.95;
91
+ }
91
92
 
92
- &[data-state='closed'] {
93
- opacity: 0;
94
- scale: 0.95;
95
- }
93
+ &[data-state='closed'] {
94
+ opacity: 0;
95
+ scale: 0.95;
96
+ }
96
97
 
97
- .tooltip-arrow {
98
- fill: var(--tooltip-arrow-fill);
99
- stroke: var(--border-color);
98
+ .tooltip-arrow {
99
+ fill: var(--tooltip-arrow-fill);
100
+ stroke: var(--border-color);
101
+ }
100
102
  }
101
103
  }
102
104
  }
package/src/base/utils/time.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { DateTime } from 'luxon'
2
2
 
3
+ export type UTCDateTime = DateTime<true>
4
+
3
5
  export const delay = (ms: number): Promise<void> =>
4
6
  new Promise((resolve) => setTimeout(resolve, ms))
5
7
 
@@ -7,7 +9,7 @@ export const daysInSeconds = (days: number): number => days * 60 * 60 * 24
7
9
 
8
10
  export const nowInSeconds = (): number => Math.floor(Date.now() / 1000)
9
11
 
10
- export const asUTCDate = (date: Date | null) =>
12
+ export const asUTCDate = (date: Date | null): UTCDateTime | null =>
11
13
  date
12
14
  ? DateTime.utc(
13
15
  date.getFullYear(),
package/src/index.ts CHANGED
@@ -76,6 +76,7 @@ export {
76
76
  nowInSeconds,
77
77
  asUTCDate,
78
78
  } from './base/utils/time'
79
+ export type { UTCDateTime } from './base/utils/time'
79
80
 
80
81
  // Date types
81
82
  export {