@cck-ui/core 0.13.1 → 0.14.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.
- package/cjs/components/empty-state/empty-state-actions/empty-state-actions.cjs +360 -0
- package/cjs/components/empty-state/empty-state-actions/empty-state-actions.cjs.map +1 -0
- package/cjs/components/empty-state/empty-state-description/empty-state-description.cjs +360 -0
- package/cjs/components/empty-state/empty-state-description/empty-state-description.cjs.map +1 -0
- package/cjs/components/empty-state/empty-state-indicator/empty-state-indicator.cjs +362 -0
- package/cjs/components/empty-state/empty-state-indicator/empty-state-indicator.cjs.map +1 -0
- package/cjs/components/empty-state/empty-state-title/empty-state-title.cjs +365 -0
- package/cjs/components/empty-state/empty-state-title/empty-state-title.cjs.map +1 -0
- package/cjs/components/empty-state/empty-state.cjs +453 -0
- package/cjs/components/empty-state/empty-state.cjs.map +1 -0
- package/cjs/components/empty-state/empty-state.context.cjs +17 -0
- package/cjs/components/empty-state/empty-state.context.cjs.map +1 -0
- package/cjs/components/empty-state/empty-state.module.cjs +14 -0
- package/cjs/components/empty-state/empty-state.module.cjs.map +1 -0
- package/cjs/components/empty-state/empty-state.utils.cjs +22 -0
- package/cjs/components/empty-state/empty-state.utils.cjs.map +1 -0
- package/cjs/components/empty-state/index.cjs +35 -0
- package/cjs/components/empty-state/index.cjs.map +1 -0
- package/cjs/core/box/box.cjs.map +1 -1
- package/cjs/index.cjs +39 -28
- package/cjs/index.cjs.map +1 -1
- package/esm/components/empty-state/empty-state-actions/empty-state-actions.mjs +360 -0
- package/esm/components/empty-state/empty-state-actions/empty-state-actions.mjs.map +1 -0
- package/esm/components/empty-state/empty-state-description/empty-state-description.mjs +360 -0
- package/esm/components/empty-state/empty-state-description/empty-state-description.mjs.map +1 -0
- package/esm/components/empty-state/empty-state-indicator/empty-state-indicator.mjs +362 -0
- package/esm/components/empty-state/empty-state-indicator/empty-state-indicator.mjs.map +1 -0
- package/esm/components/empty-state/empty-state-title/empty-state-title.mjs +365 -0
- package/esm/components/empty-state/empty-state-title/empty-state-title.mjs.map +1 -0
- package/esm/components/empty-state/empty-state.context.mjs +16 -0
- package/esm/components/empty-state/empty-state.context.mjs.map +1 -0
- package/esm/components/empty-state/empty-state.mjs +453 -0
- package/esm/components/empty-state/empty-state.mjs.map +1 -0
- package/esm/components/empty-state/empty-state.module.mjs +14 -0
- package/esm/components/empty-state/empty-state.module.mjs.map +1 -0
- package/esm/components/empty-state/empty-state.utils.mjs +23 -0
- package/esm/components/empty-state/empty-state.utils.mjs.map +1 -0
- package/esm/components/empty-state/index.mjs +30 -0
- package/esm/components/empty-state/index.mjs.map +1 -0
- package/esm/core/box/box.mjs.map +1 -1
- package/esm/index.mjs +7 -1
- package/esm/index.mjs.map +1 -1
- package/lib/components/empty-state/empty-state-actions/empty-state-actions.types.d.ts +10 -0
- package/lib/components/empty-state/empty-state-description/empty-state-description.types.d.ts +10 -0
- package/lib/components/empty-state/empty-state-indicator/empty-state-indicator.types.d.ts +10 -0
- package/lib/components/empty-state/empty-state-title/empty-state-title.types.d.ts +14 -0
- package/lib/components/empty-state/empty-state.context.d.ts +10 -0
- package/lib/components/empty-state/empty-state.types.d.ts +44 -0
- package/lib/components/empty-state/empty-state.utils.d.ts +8 -0
- package/lib/components/empty-state/index.d.ts +23 -0
- package/lib/components/index.d.ts +1 -0
- package/package.json +1 -1
- package/styles/empty-state.css +121 -0
- package/styles/empty-state.layer.css +122 -0
- package/styles.css +122 -0
- package/styles.layer.css +122 -0
|
@@ -0,0 +1,453 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import export_helper_default from "../../_virtual/_/plugin-vue/export-helper.mjs";
|
|
3
|
+
import { useComponentProps } from "../../core/config-provider/use-component-props/use-component-props.mjs";
|
|
4
|
+
import { CBox } from "../../core/box/index.mjs";
|
|
5
|
+
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
|
|
6
|
+
import { provideEmptyStateContext } from "./empty-state.context.mjs";
|
|
7
|
+
import empty_state_actions_default from "./empty-state-actions/empty-state-actions.mjs";
|
|
8
|
+
import empty_state_description_default from "./empty-state-description/empty-state-description.mjs";
|
|
9
|
+
import empty_state_indicator_default from "./empty-state-indicator/empty-state-indicator.mjs";
|
|
10
|
+
import empty_state_title_default from "./empty-state-title/empty-state-title.mjs";
|
|
11
|
+
import empty_state_module_default from "./empty-state.module.mjs";
|
|
12
|
+
import { varsResolver } from "./empty-state.utils.mjs";
|
|
13
|
+
import { computed, createBlock, createCommentVNode, defineComponent, mergeProps, normalizeProps, openBlock, ref, renderSlot, useAttrs, useSlots, withCtx } from "vue";
|
|
14
|
+
//#region packages/@cck-ui/core/src/components/empty-state/empty-state.vue
|
|
15
|
+
const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
16
|
+
name: "CEmptyState",
|
|
17
|
+
__name: "empty-state",
|
|
18
|
+
props: {
|
|
19
|
+
size: {
|
|
20
|
+
type: String,
|
|
21
|
+
required: false
|
|
22
|
+
},
|
|
23
|
+
align: {
|
|
24
|
+
type: String,
|
|
25
|
+
required: false
|
|
26
|
+
},
|
|
27
|
+
variant: {
|
|
28
|
+
type: String,
|
|
29
|
+
required: false
|
|
30
|
+
},
|
|
31
|
+
color: {
|
|
32
|
+
type: null,
|
|
33
|
+
required: false
|
|
34
|
+
},
|
|
35
|
+
withIndicatorBackground: {
|
|
36
|
+
type: Boolean,
|
|
37
|
+
required: false
|
|
38
|
+
},
|
|
39
|
+
className: {
|
|
40
|
+
type: String,
|
|
41
|
+
required: false
|
|
42
|
+
},
|
|
43
|
+
style: {
|
|
44
|
+
type: [
|
|
45
|
+
Object,
|
|
46
|
+
Function,
|
|
47
|
+
Array
|
|
48
|
+
],
|
|
49
|
+
required: false,
|
|
50
|
+
skipCheck: true
|
|
51
|
+
},
|
|
52
|
+
__vars: {
|
|
53
|
+
type: null,
|
|
54
|
+
required: false
|
|
55
|
+
},
|
|
56
|
+
__size: {
|
|
57
|
+
type: String,
|
|
58
|
+
required: false
|
|
59
|
+
},
|
|
60
|
+
hiddenFrom: {
|
|
61
|
+
type: null,
|
|
62
|
+
required: false
|
|
63
|
+
},
|
|
64
|
+
visibleFrom: {
|
|
65
|
+
type: null,
|
|
66
|
+
required: false
|
|
67
|
+
},
|
|
68
|
+
lightHidden: {
|
|
69
|
+
type: Boolean,
|
|
70
|
+
required: false
|
|
71
|
+
},
|
|
72
|
+
darkHidden: {
|
|
73
|
+
type: Boolean,
|
|
74
|
+
required: false
|
|
75
|
+
},
|
|
76
|
+
mod: {
|
|
77
|
+
type: [
|
|
78
|
+
Object,
|
|
79
|
+
String,
|
|
80
|
+
Array
|
|
81
|
+
],
|
|
82
|
+
required: false
|
|
83
|
+
},
|
|
84
|
+
m: {
|
|
85
|
+
type: null,
|
|
86
|
+
required: false
|
|
87
|
+
},
|
|
88
|
+
my: {
|
|
89
|
+
type: null,
|
|
90
|
+
required: false
|
|
91
|
+
},
|
|
92
|
+
mx: {
|
|
93
|
+
type: null,
|
|
94
|
+
required: false
|
|
95
|
+
},
|
|
96
|
+
mt: {
|
|
97
|
+
type: null,
|
|
98
|
+
required: false
|
|
99
|
+
},
|
|
100
|
+
mb: {
|
|
101
|
+
type: null,
|
|
102
|
+
required: false
|
|
103
|
+
},
|
|
104
|
+
ms: {
|
|
105
|
+
type: null,
|
|
106
|
+
required: false
|
|
107
|
+
},
|
|
108
|
+
me: {
|
|
109
|
+
type: null,
|
|
110
|
+
required: false
|
|
111
|
+
},
|
|
112
|
+
mis: {
|
|
113
|
+
type: null,
|
|
114
|
+
required: false
|
|
115
|
+
},
|
|
116
|
+
mie: {
|
|
117
|
+
type: null,
|
|
118
|
+
required: false
|
|
119
|
+
},
|
|
120
|
+
ml: {
|
|
121
|
+
type: null,
|
|
122
|
+
required: false
|
|
123
|
+
},
|
|
124
|
+
mr: {
|
|
125
|
+
type: null,
|
|
126
|
+
required: false
|
|
127
|
+
},
|
|
128
|
+
p: {
|
|
129
|
+
type: null,
|
|
130
|
+
required: false
|
|
131
|
+
},
|
|
132
|
+
py: {
|
|
133
|
+
type: null,
|
|
134
|
+
required: false
|
|
135
|
+
},
|
|
136
|
+
px: {
|
|
137
|
+
type: null,
|
|
138
|
+
required: false
|
|
139
|
+
},
|
|
140
|
+
pt: {
|
|
141
|
+
type: null,
|
|
142
|
+
required: false
|
|
143
|
+
},
|
|
144
|
+
pb: {
|
|
145
|
+
type: null,
|
|
146
|
+
required: false
|
|
147
|
+
},
|
|
148
|
+
ps: {
|
|
149
|
+
type: null,
|
|
150
|
+
required: false
|
|
151
|
+
},
|
|
152
|
+
pe: {
|
|
153
|
+
type: null,
|
|
154
|
+
required: false
|
|
155
|
+
},
|
|
156
|
+
pis: {
|
|
157
|
+
type: null,
|
|
158
|
+
required: false
|
|
159
|
+
},
|
|
160
|
+
pie: {
|
|
161
|
+
type: null,
|
|
162
|
+
required: false
|
|
163
|
+
},
|
|
164
|
+
pl: {
|
|
165
|
+
type: null,
|
|
166
|
+
required: false
|
|
167
|
+
},
|
|
168
|
+
pr: {
|
|
169
|
+
type: null,
|
|
170
|
+
required: false
|
|
171
|
+
},
|
|
172
|
+
bd: {
|
|
173
|
+
type: null,
|
|
174
|
+
required: false
|
|
175
|
+
},
|
|
176
|
+
bdrs: {
|
|
177
|
+
type: null,
|
|
178
|
+
required: false
|
|
179
|
+
},
|
|
180
|
+
bg: {
|
|
181
|
+
type: null,
|
|
182
|
+
required: false
|
|
183
|
+
},
|
|
184
|
+
c: {
|
|
185
|
+
type: null,
|
|
186
|
+
required: false
|
|
187
|
+
},
|
|
188
|
+
opacity: {
|
|
189
|
+
type: [
|
|
190
|
+
String,
|
|
191
|
+
Object,
|
|
192
|
+
Number
|
|
193
|
+
],
|
|
194
|
+
required: false
|
|
195
|
+
},
|
|
196
|
+
ff: {
|
|
197
|
+
type: [String, Object],
|
|
198
|
+
required: false
|
|
199
|
+
},
|
|
200
|
+
fz: {
|
|
201
|
+
type: null,
|
|
202
|
+
required: false
|
|
203
|
+
},
|
|
204
|
+
fw: {
|
|
205
|
+
type: null,
|
|
206
|
+
required: false
|
|
207
|
+
},
|
|
208
|
+
lts: {
|
|
209
|
+
type: null,
|
|
210
|
+
required: false
|
|
211
|
+
},
|
|
212
|
+
ta: {
|
|
213
|
+
type: [String, Object],
|
|
214
|
+
required: false
|
|
215
|
+
},
|
|
216
|
+
lh: {
|
|
217
|
+
type: null,
|
|
218
|
+
required: false
|
|
219
|
+
},
|
|
220
|
+
fs: {
|
|
221
|
+
type: null,
|
|
222
|
+
required: false
|
|
223
|
+
},
|
|
224
|
+
tt: {
|
|
225
|
+
type: [String, Object],
|
|
226
|
+
required: false
|
|
227
|
+
},
|
|
228
|
+
td: {
|
|
229
|
+
type: null,
|
|
230
|
+
required: false
|
|
231
|
+
},
|
|
232
|
+
w: {
|
|
233
|
+
type: null,
|
|
234
|
+
required: false
|
|
235
|
+
},
|
|
236
|
+
miw: {
|
|
237
|
+
type: null,
|
|
238
|
+
required: false
|
|
239
|
+
},
|
|
240
|
+
maw: {
|
|
241
|
+
type: null,
|
|
242
|
+
required: false
|
|
243
|
+
},
|
|
244
|
+
h: {
|
|
245
|
+
type: null,
|
|
246
|
+
required: false
|
|
247
|
+
},
|
|
248
|
+
mih: {
|
|
249
|
+
type: null,
|
|
250
|
+
required: false
|
|
251
|
+
},
|
|
252
|
+
mah: {
|
|
253
|
+
type: null,
|
|
254
|
+
required: false
|
|
255
|
+
},
|
|
256
|
+
bgsz: {
|
|
257
|
+
type: null,
|
|
258
|
+
required: false
|
|
259
|
+
},
|
|
260
|
+
bgp: {
|
|
261
|
+
type: null,
|
|
262
|
+
required: false
|
|
263
|
+
},
|
|
264
|
+
bgr: {
|
|
265
|
+
type: null,
|
|
266
|
+
required: false
|
|
267
|
+
},
|
|
268
|
+
bga: {
|
|
269
|
+
type: null,
|
|
270
|
+
required: false
|
|
271
|
+
},
|
|
272
|
+
pos: {
|
|
273
|
+
type: [String, Object],
|
|
274
|
+
required: false
|
|
275
|
+
},
|
|
276
|
+
top: {
|
|
277
|
+
type: null,
|
|
278
|
+
required: false
|
|
279
|
+
},
|
|
280
|
+
left: {
|
|
281
|
+
type: null,
|
|
282
|
+
required: false
|
|
283
|
+
},
|
|
284
|
+
bottom: {
|
|
285
|
+
type: null,
|
|
286
|
+
required: false
|
|
287
|
+
},
|
|
288
|
+
right: {
|
|
289
|
+
type: null,
|
|
290
|
+
required: false
|
|
291
|
+
},
|
|
292
|
+
inset: {
|
|
293
|
+
type: null,
|
|
294
|
+
required: false
|
|
295
|
+
},
|
|
296
|
+
display: {
|
|
297
|
+
type: null,
|
|
298
|
+
required: false
|
|
299
|
+
},
|
|
300
|
+
flex: {
|
|
301
|
+
type: null,
|
|
302
|
+
required: false
|
|
303
|
+
},
|
|
304
|
+
unstyled: {
|
|
305
|
+
type: Boolean,
|
|
306
|
+
required: false
|
|
307
|
+
},
|
|
308
|
+
classNames: {
|
|
309
|
+
type: null,
|
|
310
|
+
required: false
|
|
311
|
+
},
|
|
312
|
+
styles: {
|
|
313
|
+
type: null,
|
|
314
|
+
required: false
|
|
315
|
+
},
|
|
316
|
+
vars: {
|
|
317
|
+
type: Function,
|
|
318
|
+
required: false
|
|
319
|
+
},
|
|
320
|
+
attributes: {
|
|
321
|
+
type: null,
|
|
322
|
+
required: false
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
setup(__props, { expose: __expose }) {
|
|
326
|
+
const _root = ref(null);
|
|
327
|
+
const attrs = useAttrs();
|
|
328
|
+
const slots = useSlots();
|
|
329
|
+
const rawProps = __props;
|
|
330
|
+
const defaultProps = {
|
|
331
|
+
size: "md",
|
|
332
|
+
align: "center"
|
|
333
|
+
};
|
|
334
|
+
const props = useComponentProps({
|
|
335
|
+
component: "CEmptyState",
|
|
336
|
+
defaultProps,
|
|
337
|
+
props: rawProps
|
|
338
|
+
});
|
|
339
|
+
const knownProps = [
|
|
340
|
+
"classNames",
|
|
341
|
+
"className",
|
|
342
|
+
"style",
|
|
343
|
+
"styles",
|
|
344
|
+
"unstyled",
|
|
345
|
+
"vars",
|
|
346
|
+
"align",
|
|
347
|
+
"variant",
|
|
348
|
+
"color",
|
|
349
|
+
"withIndicatorBackground",
|
|
350
|
+
"mod",
|
|
351
|
+
"attributes"
|
|
352
|
+
];
|
|
353
|
+
const modList = computed(() => [{ align: props.value.align }]);
|
|
354
|
+
const getStyles = useStyles({
|
|
355
|
+
name: "EmptyState",
|
|
356
|
+
classes: empty_state_module_default,
|
|
357
|
+
props: {
|
|
358
|
+
...props.value,
|
|
359
|
+
...attrs
|
|
360
|
+
},
|
|
361
|
+
className: props.value.className,
|
|
362
|
+
style: props.value.style,
|
|
363
|
+
classNames: props.value.classNames,
|
|
364
|
+
styles: props.value.styles,
|
|
365
|
+
unstyled: props.value.unstyled,
|
|
366
|
+
attributes: props.value.attributes,
|
|
367
|
+
vars: props.value.vars,
|
|
368
|
+
varsResolver
|
|
369
|
+
});
|
|
370
|
+
const withIndicatorBackground = computed(() => props.value.withIndicatorBackground || !!props.value.variant);
|
|
371
|
+
provideEmptyStateContext({
|
|
372
|
+
getStyles,
|
|
373
|
+
withIndicatorBackground
|
|
374
|
+
});
|
|
375
|
+
const hasBodyContent = computed(() => {
|
|
376
|
+
return !!(slots.actions || slots.default || slots.description || slots.title);
|
|
377
|
+
});
|
|
378
|
+
const rootAttrs = computed(() => getStyles("root", { variant: props.value.variant }));
|
|
379
|
+
const bodyAttrs = computed(() => getStyles("body"));
|
|
380
|
+
const mergedRootAttrs = computed(() => {
|
|
381
|
+
const others = {};
|
|
382
|
+
const propsValue = props.value;
|
|
383
|
+
for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
|
|
384
|
+
const userMod = props.value.mod;
|
|
385
|
+
const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean), ...modList.value || []];
|
|
386
|
+
return {
|
|
387
|
+
...others,
|
|
388
|
+
mod: mergedMod,
|
|
389
|
+
...rootAttrs.value
|
|
390
|
+
};
|
|
391
|
+
});
|
|
392
|
+
__expose({ root: computed(() => _root.value?.root ?? null) });
|
|
393
|
+
const __returned__ = {
|
|
394
|
+
_root,
|
|
395
|
+
attrs,
|
|
396
|
+
slots,
|
|
397
|
+
rawProps,
|
|
398
|
+
defaultProps,
|
|
399
|
+
props,
|
|
400
|
+
knownProps,
|
|
401
|
+
modList,
|
|
402
|
+
getStyles,
|
|
403
|
+
withIndicatorBackground,
|
|
404
|
+
hasBodyContent,
|
|
405
|
+
rootAttrs,
|
|
406
|
+
bodyAttrs,
|
|
407
|
+
mergedRootAttrs,
|
|
408
|
+
get CBox() {
|
|
409
|
+
return CBox;
|
|
410
|
+
},
|
|
411
|
+
EmptyStateActions: empty_state_actions_default,
|
|
412
|
+
EmptyStateDescription: empty_state_description_default,
|
|
413
|
+
EmptyStateIndicator: empty_state_indicator_default,
|
|
414
|
+
EmptyStateTitle: empty_state_title_default
|
|
415
|
+
};
|
|
416
|
+
Object.defineProperty(__returned__, "__isScriptSetup", {
|
|
417
|
+
enumerable: false,
|
|
418
|
+
value: true
|
|
419
|
+
});
|
|
420
|
+
return __returned__;
|
|
421
|
+
}
|
|
422
|
+
});
|
|
423
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
424
|
+
return openBlock(), createBlock($setup["CBox"], mergeProps({ ref: "_root" }, $setup.mergedRootAttrs, { variant: $setup.props.variant }), {
|
|
425
|
+
default: withCtx(() => [_ctx.$slots.icon ? (openBlock(), createBlock($setup["EmptyStateIndicator"], { key: 0 }, {
|
|
426
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
|
|
427
|
+
_: 3
|
|
428
|
+
})) : createCommentVNode("v-if", true), $setup.hasBodyContent ? (openBlock(), createBlock($setup["CBox"], normalizeProps(mergeProps({ key: 1 }, $setup.bodyAttrs)), {
|
|
429
|
+
default: withCtx(() => [
|
|
430
|
+
_ctx.$slots.title ? (openBlock(), createBlock($setup["EmptyStateTitle"], { key: 0 }, {
|
|
431
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
|
|
432
|
+
_: 3
|
|
433
|
+
})) : createCommentVNode("v-if", true),
|
|
434
|
+
_ctx.$slots.description ? (openBlock(), createBlock($setup["EmptyStateDescription"], { key: 1 }, {
|
|
435
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
|
|
436
|
+
_: 3
|
|
437
|
+
})) : createCommentVNode("v-if", true),
|
|
438
|
+
renderSlot(_ctx.$slots, "default"),
|
|
439
|
+
_ctx.$slots.actions ? (openBlock(), createBlock($setup["EmptyStateActions"], { key: 2 }, {
|
|
440
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "actions")]),
|
|
441
|
+
_: 3
|
|
442
|
+
})) : createCommentVNode("v-if", true)
|
|
443
|
+
]),
|
|
444
|
+
_: 3
|
|
445
|
+
}, 16)) : createCommentVNode("v-if", true)]),
|
|
446
|
+
_: 3
|
|
447
|
+
}, 16, ["variant"]);
|
|
448
|
+
}
|
|
449
|
+
var empty_state_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/empty-state/empty-state.vue"]]);
|
|
450
|
+
//#endregion
|
|
451
|
+
export { empty_state_default as default };
|
|
452
|
+
|
|
453
|
+
//# sourceMappingURL=empty-state.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.mjs","names":[],"sources":["../../../src/components/empty-state/empty-state.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedRootAttrs\" :variant=\"props.variant\">\n <empty-state-indicator v-if=\"$slots.icon\">\n <slot name=\"icon\" />\n </empty-state-indicator>\n <c-box v-if=\"hasBodyContent\" v-bind=\"bodyAttrs\">\n <empty-state-title v-if=\"$slots.title\">\n <slot name=\"title\" />\n </empty-state-title>\n <empty-state-description v-if=\"$slots.description\">\n <slot name=\"description\" />\n </empty-state-description>\n <slot />\n <empty-state-actions v-if=\"$slots.actions\">\n <slot name=\"actions\" />\n </empty-state-actions>\n </c-box>\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs, useSlots } from 'vue'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { EmptyStateFactory, EmptyStateProps } from './empty-state.types'\nimport classes from './empty-state.module.css'\nimport { varsResolver } from './empty-state.utils'\nimport { provideEmptyStateContext } from './empty-state.context'\nimport EmptyStateActions from './empty-state-actions/empty-state-actions.vue'\nimport EmptyStateDescription from './empty-state-description/empty-state-description.vue'\nimport EmptyStateIndicator from './empty-state-indicator/empty-state-indicator.vue'\nimport EmptyStateTitle from './empty-state-title/empty-state-title.vue'\n\ndefineOptions({\n name: 'CEmptyState',\n})\n\ndefineSlots<{\n actions: any\n default: any\n description: any\n icon: any\n title: any\n}>()\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst rawProps = defineProps<EmptyStateProps>()\n\nconst defaultProps = {\n size: 'md',\n align: 'center',\n} satisfies Partial<EmptyStateProps>\n\nconst props = useComponentProps({\n component: 'CEmptyState',\n defaultProps,\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'vars',\n 'align',\n 'variant',\n 'color',\n 'withIndicatorBackground',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n align: props.value.align,\n },\n])\n\nconst getStyles = useStyles<EmptyStateFactory>({\n name: 'EmptyState',\n classes,\n props: { ...props.value, ...attrs } as EmptyStateProps,\n className: props.value.className,\n style: props.value.style,\n classNames: props.value.classNames,\n styles: props.value.styles,\n unstyled: props.value.unstyled,\n attributes: props.value.attributes,\n vars: props.value.vars,\n varsResolver,\n})\n\nconst withIndicatorBackground = computed(\n () => props.value.withIndicatorBackground || !!props.value.variant\n)\n\nprovideEmptyStateContext({\n getStyles,\n withIndicatorBackground,\n})\n\nconst hasBodyContent = computed(() => {\n return !!(slots.actions || slots.default || slots.description || slots.title)\n})\n\nconst rootAttrs = computed(() => getStyles('root', { variant: props.value.variant }))\nconst bodyAttrs = computed(() => getStyles('body'))\n\nconst mergedRootAttrs = computed(() => {\n const others: Record<string, any> = {}\n const propsValue = props.value\n for (const key in propsValue) {\n if (!knownProps.includes(key)) {\n others[key] = propsValue[key as keyof typeof propsValue]\n }\n }\n const userMod = props.value.mod\n const mergedMod = [\n ...(Array.isArray(userMod) ? userMod : [userMod].filter(Boolean)),\n ...(modList.value || []),\n ]\n return { ...others, mod: mergedMod, ...rootAttrs.value }\n})\n\ndefineExpose({\n root: computed(() => _root.value?.root ?? null),\n})\n</script>\n"],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@cck-ui/core/src/components/empty-state/empty-state.module.css
|
|
3
|
+
var empty_state_module_default = {
|
|
4
|
+
"root": "m_6438951e",
|
|
5
|
+
"body": "m_64314dde",
|
|
6
|
+
"indicator": "m_2bbef53",
|
|
7
|
+
"title": "m_22f3959c",
|
|
8
|
+
"description": "m_2c1a7440",
|
|
9
|
+
"actions": "m_3d0ffb41"
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { empty_state_module_default as default };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=empty-state.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.module.mjs","names":[],"sources":["../../../src/components/empty-state/empty-state.module.css"],"sourcesContent":[".root {\n --empty-state-indicator-size-xs: 32px;\n --empty-state-indicator-size-sm: 40px;\n --empty-state-indicator-size-md: 48px;\n --empty-state-indicator-size-lg: 60px;\n --empty-state-indicator-size-xl: 72px;\n\n --empty-state-gap-xs: 6px;\n --empty-state-gap-sm: 8px;\n --empty-state-gap-md: 10px;\n --empty-state-gap-lg: 12px;\n --empty-state-gap-xl: 16px;\n\n --empty-state-title-fz-xs: var(--c-font-size-sm);\n --empty-state-title-fz-sm: var(--c-font-size-md);\n --empty-state-title-fz-md: var(--c-font-size-lg);\n --empty-state-title-fz-lg: var(--c-font-size-xl);\n --empty-state-title-fz-xl: calc(var(--c-font-size-xl) * 1.2);\n\n --empty-state-description-fz-xs: var(--c-font-size-xs);\n --empty-state-description-fz-sm: var(--c-font-size-sm);\n --empty-state-description-fz-md: var(--c-font-size-sm);\n --empty-state-description-fz-lg: var(--c-font-size-md);\n --empty-state-description-fz-xl: var(--c-font-size-lg);\n\n display: flex;\n gap: var(--empty-state-gap, var(--empty-state-gap-md));\n\n &[data-align='center'] {\n flex-direction: column;\n align-items: center;\n }\n\n &[data-align='left'] {\n flex-direction: row;\n align-items: flex-start;\n }\n\n &[data-align='right'] {\n flex-direction: row-reverse;\n align-items: flex-start;\n }\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: var(--empty-state-gap, var(--empty-state-gap-md));\n min-width: 0;\n\n [data-align='center'] > & {\n align-items: center;\n text-align: center;\n }\n\n [data-align='left'] > & {\n align-items: flex-start;\n text-align: left;\n }\n\n [data-align='right'] > & {\n align-items: flex-end;\n text-align: right;\n }\n}\n\n.indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));\n font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));\n line-height: 1;\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n\n &[data-with-background] {\n @mixin light {\n --empty-state-indicator-default-bg: var(--c-color-gray-1);\n }\n\n @mixin dark {\n --empty-state-indicator-default-bg: var(--c-color-dark-6);\n }\n\n width: 2em;\n height: 2em;\n border-radius: 1000px;\n background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));\n }\n}\n\n.title {\n font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));\n font-weight: 600;\n line-height: 1.3;\n color: var(--c-color-bright);\n margin: 0;\n text-wrap: balance;\n}\n\n.description {\n font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));\n line-height: 1.55;\n color: var(--c-color-dimmed);\n margin: 0;\n max-width: 32rem;\n text-wrap: pretty;\n}\n\n.actions {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--c-spacing-sm);\n}\n"],"mappings":";;AAAA,IAAA,6BAAe;CAAC,QAAO;CAAa,QAAO;CAAa,aAAY;CAAY,SAAQ;CAAa,eAAc;CAAa,WAAU;AAAY"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { getSize } from "../../core/utils/get-size/get-size.mjs";
|
|
3
|
+
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
|
|
4
|
+
//#region packages/@cck-ui/core/src/components/empty-state/empty-state.utils.ts
|
|
5
|
+
const varsResolver = createVarsResolver((theme, { size, variant, color }) => {
|
|
6
|
+
const colors = variant ? theme.variantColorResolver({
|
|
7
|
+
color: color || theme.primaryColor,
|
|
8
|
+
theme,
|
|
9
|
+
variant
|
|
10
|
+
}) : null;
|
|
11
|
+
return { root: {
|
|
12
|
+
"--empty-state-description-fz": getSize(size, "empty-state-description-fz"),
|
|
13
|
+
"--empty-state-gap": getSize(size, "empty-state-gap"),
|
|
14
|
+
"--empty-state-indicator-bg": colors ? colors.background : void 0,
|
|
15
|
+
"--empty-state-indicator-color": colors ? colors.color : void 0,
|
|
16
|
+
"--empty-state-indicator-size": getSize(size, "empty-state-indicator-size"),
|
|
17
|
+
"--empty-state-title-fz": getSize(size, "empty-state-title-fz")
|
|
18
|
+
} };
|
|
19
|
+
});
|
|
20
|
+
//#endregion
|
|
21
|
+
export { varsResolver };
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=empty-state.utils.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.utils.mjs","names":[],"sources":["../../../src/components/empty-state/empty-state.utils.ts"],"sourcesContent":["import { createVarsResolver, getSize } from '../../core'\nimport { EmptyStateFactory } from './empty-state.types'\n\nexport const varsResolver = createVarsResolver<EmptyStateFactory>(\n (theme, { size, variant, color }) => {\n const colors = variant\n ? theme.variantColorResolver({ color: color || theme.primaryColor, theme, variant })\n : null\n\n return {\n root: {\n '--empty-state-description-fz': getSize(size, 'empty-state-description-fz'),\n '--empty-state-gap': getSize(size, 'empty-state-gap'),\n '--empty-state-indicator-bg': colors ? colors.background : undefined,\n '--empty-state-indicator-color': colors ? colors.color : undefined,\n '--empty-state-indicator-size': getSize(size, 'empty-state-indicator-size'),\n '--empty-state-title-fz': getSize(size, 'empty-state-title-fz'),\n },\n }\n }\n)\n"],"mappings":";;;;AAGA,MAAa,eAAe,oBACzB,OAAO,EAAE,MAAM,SAAS,YAAY;CACnC,MAAM,SAAS,UACX,MAAM,qBAAqB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO;CAAQ,CAAC,IACjF;CAEJ,OAAO,EACL,MAAM;EACJ,gCAAgC,QAAQ,MAAM,4BAA4B;EAC1E,qBAAqB,QAAQ,MAAM,iBAAiB;EACpD,8BAA8B,SAAS,OAAO,aAAa,KAAA;EAC3D,iCAAiC,SAAS,OAAO,QAAQ,KAAA;EACzD,gCAAgC,QAAQ,MAAM,4BAA4B;EAC1E,0BAA0B,QAAQ,MAAM,sBAAsB;CAChE,EACF;AACF,CACF"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { withInstall } from "../../core/utils/vue/install.mjs";
|
|
3
|
+
import { withClasses, withExtend, withPropsFactory, withVarsResolver } from "../../core/utils/vue/statics.mjs";
|
|
4
|
+
import empty_state_actions_default from "./empty-state-actions/empty-state-actions.mjs";
|
|
5
|
+
import empty_state_description_default from "./empty-state-description/empty-state-description.mjs";
|
|
6
|
+
import empty_state_indicator_default from "./empty-state-indicator/empty-state-indicator.mjs";
|
|
7
|
+
import empty_state_title_default from "./empty-state-title/empty-state-title.mjs";
|
|
8
|
+
import empty_state_module_default from "./empty-state.module.mjs";
|
|
9
|
+
import { varsResolver } from "./empty-state.utils.mjs";
|
|
10
|
+
import empty_state_default from "./empty-state.mjs";
|
|
11
|
+
//#region packages/@cck-ui/core/src/components/empty-state/index.ts
|
|
12
|
+
const EmptyStateActionsWithStatic = withPropsFactory(withExtend(withClasses(empty_state_actions_default, empty_state_module_default)));
|
|
13
|
+
const EmptyStateDescriptionWithStatic = withPropsFactory(withExtend(withClasses(empty_state_description_default, empty_state_module_default)));
|
|
14
|
+
const EmptyStateIndicatorWithStatic = withPropsFactory(withExtend(withClasses(empty_state_indicator_default, empty_state_module_default)));
|
|
15
|
+
const EmptyStateTitleWithStatic = withPropsFactory(withExtend(withClasses(empty_state_title_default, empty_state_module_default)));
|
|
16
|
+
const EmptyStateWithStatic = withPropsFactory(withExtend(withVarsResolver(withClasses(empty_state_default, empty_state_module_default), varsResolver)));
|
|
17
|
+
const CEmptyStateActions = withInstall(EmptyStateActionsWithStatic);
|
|
18
|
+
const CEmptyStateDescription = withInstall(EmptyStateDescriptionWithStatic);
|
|
19
|
+
const CEmptyStateIndicator = withInstall(EmptyStateIndicatorWithStatic);
|
|
20
|
+
const CEmptyStateTitle = withInstall(EmptyStateTitleWithStatic);
|
|
21
|
+
const CEmptyState = withInstall(EmptyStateWithStatic, {
|
|
22
|
+
Actions: CEmptyStateActions,
|
|
23
|
+
Description: CEmptyStateDescription,
|
|
24
|
+
Indicator: CEmptyStateIndicator,
|
|
25
|
+
Title: CEmptyStateTitle
|
|
26
|
+
});
|
|
27
|
+
//#endregion
|
|
28
|
+
export { CEmptyState, CEmptyState as default, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle };
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["EmptyStateActions","classes","EmptyStateDescription","EmptyStateIndicator","EmptyStateTitle","EmptyState"],"sources":["../../../src/components/empty-state/index.ts"],"sourcesContent":["import EmptyStateActions from './empty-state-actions/empty-state-actions.vue'\nimport EmptyStateDescription from './empty-state-description/empty-state-description.vue'\nimport EmptyStateIndicator from './empty-state-indicator/empty-state-indicator.vue'\nimport EmptyStateTitle from './empty-state-title/empty-state-title.vue'\nimport EmptyState from './empty-state.vue'\nimport classes from './empty-state.module.css'\nimport { varsResolver } from './empty-state.utils'\nimport {\n SFCWithInstallAndClasses,\n withClasses,\n withExtend,\n withInstall,\n withPropsFactory,\n withVarsResolver,\n} from '../../core'\n\nconst EmptyStateActionsWithStatic = withPropsFactory(\n withExtend(withClasses(EmptyStateActions, classes))\n)\nconst EmptyStateDescriptionWithStatic = withPropsFactory(\n withExtend(withClasses(EmptyStateDescription, classes))\n)\nconst EmptyStateIndicatorWithStatic = withPropsFactory(\n withExtend(withClasses(EmptyStateIndicator, classes))\n)\nconst EmptyStateTitleWithStatic = withPropsFactory(\n withExtend(withClasses(EmptyStateTitle, classes))\n)\nconst EmptyStateWithStatic = withPropsFactory(\n withExtend(withVarsResolver(withClasses(EmptyState, classes), varsResolver))\n)\n\nexport const CEmptyStateActions: SFCWithInstallAndClasses<\n typeof EmptyStateActions,\n typeof classes\n> = withInstall(EmptyStateActionsWithStatic)\nexport const CEmptyStateDescription: SFCWithInstallAndClasses<\n typeof EmptyStateDescription,\n typeof classes\n> = withInstall(EmptyStateDescriptionWithStatic)\nexport const CEmptyStateIndicator: SFCWithInstallAndClasses<\n typeof EmptyStateIndicator,\n typeof classes\n> = withInstall(EmptyStateIndicatorWithStatic)\nexport const CEmptyStateTitle: SFCWithInstallAndClasses<typeof EmptyStateTitle, typeof classes> =\n withInstall(EmptyStateTitleWithStatic)\nexport const CEmptyState: SFCWithInstallAndClasses<typeof EmptyState, typeof classes> & {\n Actions: typeof CEmptyStateActions\n Description: typeof CEmptyStateDescription\n Indicator: typeof CEmptyStateIndicator\n Title: typeof CEmptyStateTitle\n} = withInstall(EmptyStateWithStatic, {\n Actions: CEmptyStateActions,\n Description: CEmptyStateDescription,\n Indicator: CEmptyStateIndicator,\n Title: CEmptyStateTitle,\n})\n\nexport default CEmptyState\n\nexport * from './empty-state-actions/empty-state-actions.types'\nexport * from './empty-state-description/empty-state-description.types'\nexport * from './empty-state-indicator/empty-state-indicator.types'\nexport * from './empty-state-title/empty-state-title.types'\nexport * from './empty-state.types'\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,8BAA8B,iBAClC,WAAW,YAAYA,6BAAmBC,0BAAO,CAAC,CACpD;AACA,MAAM,kCAAkC,iBACtC,WAAW,YAAYC,iCAAuBD,0BAAO,CAAC,CACxD;AACA,MAAM,gCAAgC,iBACpC,WAAW,YAAYE,+BAAqBF,0BAAO,CAAC,CACtD;AACA,MAAM,4BAA4B,iBAChC,WAAW,YAAYG,2BAAiBH,0BAAO,CAAC,CAClD;AACA,MAAM,uBAAuB,iBAC3B,WAAW,iBAAiB,YAAYI,qBAAYJ,0BAAO,GAAG,YAAY,CAAC,CAC7E;AAEA,MAAa,qBAGT,YAAY,2BAA2B;AAC3C,MAAa,yBAGT,YAAY,+BAA+B;AAC/C,MAAa,uBAGT,YAAY,6BAA6B;AAC7C,MAAa,mBACX,YAAY,yBAAyB;AACvC,MAAa,cAKT,YAAY,sBAAsB;CACpC,SAAS;CACT,aAAa;CACb,WAAW;CACX,OAAO;AACT,CAAC"}
|
package/esm/core/box/box.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.mjs","names":[],"sources":["../../../src/core/box/box.vue"],"sourcesContent":["<template>\n <component ref=\"_root\" :is=\"rootTag\" v-bind=\"_props\">\n <slot />\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { isNumberLike } from '../utils'\nimport type { BoxComponentProps } from './box.types'\nimport { useCckTheme } from '../config-provider'\nimport { extractStyleProps, parseStyleProps, STYLE_PROPS_DATA } from './style-props'\nimport { getBoxStyle } from './get-box-style/get-box-style'\nimport {
|
|
1
|
+
{"version":3,"file":"box.mjs","names":[],"sources":["../../../src/core/box/box.vue"],"sourcesContent":["<template>\n <component ref=\"_root\" :is=\"rootTag\" v-bind=\"_props\">\n <slot />\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport cx from 'clsx'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { isNumberLike } from '../utils'\nimport type { BoxComponentProps } from './box.types'\nimport { useCckTheme } from '../config-provider'\nimport { extractStyleProps, parseStyleProps, STYLE_PROPS_DATA } from './style-props'\nimport { getBoxStyle } from './get-box-style/get-box-style'\nimport { hashStyleProps, responsiveStyleManager, stylesToString } from '../responsive-style-manager'\nimport { getBoxMod } from './get-box-mod/get-box-mod'\n\ndefineOptions({\n name: 'CBox',\n})\n\nconst _root = ref<HTMLElement | null>(null)\n\nconst props = withDefaults(\n defineProps<\n BoxComponentProps & {\n className: string\n renderRoot?: (props: Record<string, any>) => any\n tag?: any\n }\n >(),\n {\n tag: 'div',\n }\n)\n\nconst theme = useCckTheme()\n\nconst parsedStyleProps = computed(() => {\n const { styleProps, rest } = extractStyleProps(props)\n return {\n ...parseStyleProps({\n styleProps,\n theme: theme.value,\n data: STYLE_PROPS_DATA,\n }),\n rest,\n }\n})\n\nconst hasResponsive = computed(() => parsedStyleProps.value.hasResponsiveStyles)\nconst responsiveClassName = ref<string | null>(null)\nlet currentStyleKey: string | null = null\n\nfunction updateResponsiveStyles() {\n if (currentStyleKey) {\n responsiveStyleManager.unregister(currentStyleKey)\n currentStyleKey = null\n responsiveClassName.value = null\n }\n\n if (!hasResponsive) {\n return\n }\n\n const mediaArray = parsedStyleProps.value.media || []\n const hash = hashStyleProps(parsedStyleProps.value.styles, mediaArray)\n const className = hash\n\n const cssText = stylesToString({\n selector: className,\n styles: parsedStyleProps.value.styles,\n media: mediaArray,\n })\n\n const registeredKey = responsiveStyleManager.register(cssText, className)\n currentStyleKey = registeredKey\n responsiveClassName.value = className\n}\n\nupdateResponsiveStyles()\n\nwatch(\n () => [parsedStyleProps.value.styles, parsedStyleProps.value.media],\n () => {\n updateResponsiveStyles()\n },\n { deep: true, immediate: false }\n)\n\nonBeforeUnmount(() => {\n if (currentStyleKey) {\n responsiveStyleManager.unregister(currentStyleKey)\n }\n})\n\nconst _props = computed(() => {\n const { rest, inlineStyles } = parsedStyleProps.value\n\n const finalStyle = getBoxStyle({\n theme: theme.value,\n style: props.style,\n vars: props.__vars,\n styleProps: inlineStyles,\n })\n\n const finalClassName = cx(props.className, responsiveClassName.value, {\n 'c-light-hidden': props.lightHidden,\n 'c-dark-hidden': props.darkHidden,\n [`c-hidden-from-${props.hiddenFrom}`]: props.hiddenFrom,\n [`c-visible-from-${props.visibleFrom}`]: props.visibleFrom,\n })\n\n const {\n tag,\n style,\n __vars,\n className,\n variant,\n mod,\n size,\n hiddenFrom,\n visibleFrom,\n lightHidden,\n darkHidden,\n __size,\n ...restProps\n } = rest || {}\n\n return {\n ...restProps,\n style: finalStyle,\n className: finalClassName,\n 'data-variant': props.variant,\n 'data-size': isNumberLike(props.size) ? undefined : props.size || undefined,\n size: props.__size,\n ...getBoxMod(props.mod),\n }\n})\n\nconst rootTag = computed(() => {\n if (props.renderRoot) {\n return (p: Record<string, any>) => p.renderRoot(p)\n }\n\n return props.tag\n})\n\ndefineExpose({\n root: _root,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,QAAQ,IAAwB,IAAI;EAE1C,MAAM,QAAQ;EAad,MAAM,QAAQ,YAAY;EAE1B,MAAM,mBAAmB,eAAe;GACtC,MAAM,EAAE,YAAY,SAAS,kBAAkB,KAAK;GACpD,OAAO;IACL,GAAG,gBAAgB;KACjB;KACA,OAAO,MAAM;KACb,MAAM;IACR,CAAC;IACD;GACF;EACF,CAAC;EAED,MAAM,gBAAgB,eAAe,iBAAiB,MAAM,mBAAmB;EAC/E,MAAM,sBAAsB,IAAmB,IAAI;EACnD,IAAI,kBAAiC;EAErC,SAAS,yBAAyB;GAChC,IAAI,iBAAiB;IACnB,uBAAuB,WAAW,eAAe;IACjD,kBAAkB;IAClB,oBAAoB,QAAQ;GAC9B;GAEA,IAAI,CAAC,eACH;GAGF,MAAM,aAAa,iBAAiB,MAAM,SAAS,CAAC;GAEpD,MAAM,YADO,eAAe,iBAAiB,MAAM,QAAQ,UACzC;GAElB,MAAM,UAAU,eAAe;IAC7B,UAAU;IACV,QAAQ,iBAAiB,MAAM;IAC/B,OAAO;GACT,CAAC;GAGD,kBADsB,uBAAuB,SAAS,SAAS,SAC7C;GAClB,oBAAoB,QAAQ;EAC9B;EAEA,uBAAuB;EAEvB,YACQ,CAAC,iBAAiB,MAAM,QAAQ,iBAAiB,MAAM,KAAK,SAC5D;GACJ,uBAAuB;EACzB,GACA;GAAE,MAAM;GAAM,WAAW;EAAM,CACjC;EAEA,sBAAsB;GACpB,IAAI,iBACF,uBAAuB,WAAW,eAAe;EAErD,CAAC;EAED,MAAM,SAAS,eAAe;GAC5B,MAAM,EAAE,MAAM,iBAAiB,iBAAiB;GAEhD,MAAM,aAAa,YAAY;IAC7B,OAAO,MAAM;IACb,OAAO,MAAM;IACb,MAAM,MAAM;IACZ,YAAY;GACd,CAAC;GAED,MAAM,iBAAiB,GAAG,MAAM,WAAW,oBAAoB,OAAO;IACpE,kBAAkB,MAAM;IACxB,iBAAiB,MAAM;KACtB,iBAAiB,MAAM,eAAe,MAAM;KAC5C,kBAAkB,MAAM,gBAAgB,MAAM;GACjD,CAAC;GAED,MAAM,EACJ,KACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,QACA,GAAG,cACD,QAAQ,CAAC;GAEb,OAAO;IACL,GAAG;IACH,OAAO;IACP,WAAW;IACX,gBAAgB,MAAM;IACtB,aAAa,aAAa,MAAM,IAAI,IAAI,KAAA,IAAY,MAAM,QAAQ,KAAA;IAClE,MAAM,MAAM;IACZ,GAAG,UAAU,MAAM,GAAG;GACxB;EACF,CAAC;EAED,MAAM,UAAU,eAAe;GAC7B,IAAI,MAAM,YACR,QAAQ,MAA2B,EAAE,WAAW,CAAC;GAGnD,OAAO,MAAM;EACf,CAAC;EAED,SAAa,EACX,MAAM,MACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;qBArJC,YAEY,wBAFgB,OAAA,OAAO,GAAnC,WAEY,EAFD,KAAI,QAAO,GAAuB,OAAA,MAAM,GAAA;yBACzC,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
|
package/esm/index.mjs
CHANGED
|
@@ -61,6 +61,7 @@ import { CTransition } from "./components/transition/index.mjs";
|
|
|
61
61
|
import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/index.mjs";
|
|
62
62
|
import { CCenter } from "./components/center/index.mjs";
|
|
63
63
|
import { CContainer } from "./components/container/index.mjs";
|
|
64
|
+
import { CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle } from "./components/empty-state/index.mjs";
|
|
64
65
|
import { CFlex } from "./components/flex/index.mjs";
|
|
65
66
|
import { CCol, CGrid } from "./components/grid/index.mjs";
|
|
66
67
|
import { CGroup } from "./components/group/index.mjs";
|
|
@@ -83,6 +84,11 @@ const components = [
|
|
|
83
84
|
CCloseButton,
|
|
84
85
|
CCol,
|
|
85
86
|
CContainer,
|
|
87
|
+
CEmptyState,
|
|
88
|
+
CEmptyStateActions,
|
|
89
|
+
CEmptyStateDescription,
|
|
90
|
+
CEmptyStateIndicator,
|
|
91
|
+
CEmptyStateTitle,
|
|
86
92
|
CFlex,
|
|
87
93
|
CGrid,
|
|
88
94
|
CGroup,
|
|
@@ -104,6 +110,6 @@ const CckUI = { install(app) {
|
|
|
104
110
|
});
|
|
105
111
|
} };
|
|
106
112
|
//#endregion
|
|
107
|
-
export { CAlert, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CDefaultLoaders, CFlex, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
|
|
113
|
+
export { CAlert, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CDefaultLoaders, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFlex, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
|
|
108
114
|
|
|
109
115
|
//# sourceMappingURL=index.mjs.map
|
package/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n CAlert,\n CAspectRatio,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCenter,\n CCloseButton,\n CCol,\n CContainer,\n CFlex,\n CGrid,\n CGroup,\n CLoader,\n CSimpleGrid,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n CckConfigProvider,\n CBox,\n CAlert,\n CAspectRatio,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCenter,\n CCloseButton,\n CCol,\n CContainer,\n CFlex,\n CGrid,\n CGroup,\n CLoader,\n CSimpleGrid,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n install(app: App) {\n if ((app as any)[INSTALLED_KEY]) {\n return\n }\n ;(app as any)[INSTALLED_KEY] = true\n components.forEach((c) => {\n if (c.name) {\n app.component(c.name, c)\n }\n })\n },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n CAlert,\n CAspectRatio,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCenter,\n CCloseButton,\n CCol,\n CContainer,\n CEmptyState,\n CEmptyStateActions,\n CEmptyStateDescription,\n CEmptyStateIndicator,\n CEmptyStateTitle,\n CFlex,\n CGrid,\n CGroup,\n CLoader,\n CSimpleGrid,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n CckConfigProvider,\n CBox,\n CAlert,\n CAspectRatio,\n CButton,\n CButtonGroup,\n CButtonGroupSection,\n CCenter,\n CCloseButton,\n CCol,\n CContainer,\n CEmptyState,\n CEmptyStateActions,\n CEmptyStateDescription,\n CEmptyStateIndicator,\n CEmptyStateTitle,\n CFlex,\n CGrid,\n CGroup,\n CLoader,\n CSimpleGrid,\n CSpace,\n CSplitter,\n CSplitterPane,\n CStack,\n CText,\n CTransition,\n UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n install(app: App) {\n if ((app as any)[INSTALLED_KEY]) {\n return\n }\n ;(app as any)[INSTALLED_KEY] = true\n components.forEach((c) => {\n if (c.name) {\n app.component(c.name, c)\n }\n })\n },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
|
|
2
|
+
export type EmptyStateActionsStylesNames = 'actions';
|
|
3
|
+
export interface EmptyStateActionsProps extends BoxProps, CompoundStylesApiProps<EmptyStateActionsFactory>, ElementProps<'div'> {
|
|
4
|
+
}
|
|
5
|
+
export type EmptyStateActionsFactory = Factory<{
|
|
6
|
+
props: EmptyStateActionsProps;
|
|
7
|
+
ref: HTMLDivElement;
|
|
8
|
+
stylesNames: EmptyStateActionsStylesNames;
|
|
9
|
+
compound: true;
|
|
10
|
+
}>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
|
|
2
|
+
export type EmptyStateDescriptionStylesNames = 'description';
|
|
3
|
+
export interface EmptyStateDescriptionProps extends BoxProps, CompoundStylesApiProps<EmptyStateDescriptionFactory>, ElementProps<'div'> {
|
|
4
|
+
}
|
|
5
|
+
export type EmptyStateDescriptionFactory = Factory<{
|
|
6
|
+
props: EmptyStateDescriptionProps;
|
|
7
|
+
ref: HTMLDivElement;
|
|
8
|
+
stylesNames: EmptyStateDescriptionStylesNames;
|
|
9
|
+
compound: true;
|
|
10
|
+
}>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
|
|
2
|
+
export type EmptyStateIndicatorStylesNames = 'indicator';
|
|
3
|
+
export interface EmptyStateIndicatorProps extends BoxProps, CompoundStylesApiProps<EmptyStateIndicatorFactory>, ElementProps<'div'> {
|
|
4
|
+
}
|
|
5
|
+
export type EmptyStateIndicatorFactory = Factory<{
|
|
6
|
+
props: EmptyStateIndicatorProps;
|
|
7
|
+
ref: HTMLDivElement;
|
|
8
|
+
stylesNames: EmptyStateIndicatorStylesNames;
|
|
9
|
+
compound: true;
|
|
10
|
+
}>;
|