@cck-ui/core 0.16.0 → 0.18.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/paper/index.cjs +14 -0
- package/cjs/components/paper/index.cjs.map +1 -0
- package/cjs/components/paper/paper.cjs +401 -0
- package/cjs/components/paper/paper.cjs.map +1 -0
- package/cjs/components/paper/paper.module.cjs +7 -0
- package/cjs/components/paper/paper.module.cjs.map +1 -0
- package/cjs/components/paper/paper.utils.cjs +11 -0
- package/cjs/components/paper/paper.utils.cjs.map +1 -0
- package/cjs/index.cjs +26 -23
- package/cjs/index.cjs.map +1 -1
- package/esm/components/paper/index.mjs +11 -0
- package/esm/components/paper/index.mjs.map +1 -0
- package/esm/components/paper/paper.mjs +401 -0
- package/esm/components/paper/paper.mjs.map +1 -0
- package/esm/components/paper/paper.module.mjs +7 -0
- package/esm/components/paper/paper.module.mjs.map +1 -0
- package/esm/components/paper/paper.utils.mjs +12 -0
- package/esm/components/paper/paper.utils.mjs.map +1 -0
- package/esm/index.mjs +3 -1
- package/esm/index.mjs.map +1 -1
- package/lib/components/action-icon/action-icon-group/action-icon-group.types.d.ts +23 -0
- package/lib/components/action-icon/action-icon-group/action-icon-group.utils.d.ts +6 -0
- package/lib/components/action-icon/action-icon-group-section/action-icon-group-section.types.d.ts +34 -0
- package/lib/components/action-icon/action-icon-group-section/action-icon-group-section.utils.d.ts +7 -0
- package/lib/components/action-icon/action-icon.types.d.ts +56 -0
- package/lib/components/action-icon/action-icon.utils.d.ts +9 -0
- package/lib/components/action-icon/index.d.ts +15 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/paper/index.d.ts +6 -0
- package/lib/components/paper/paper.types.d.ts +29 -0
- package/lib/components/paper/paper.utils.d.ts +7 -0
- package/package.json +1 -1
- package/styles/action-icon.css +189 -0
- package/styles/action-icon.layer.css +190 -0
- package/styles/paper.css +24 -0
- package/styles/paper.layer.css +25 -0
- package/styles.css +215 -0
- package/styles.layer.css +215 -0
|
@@ -0,0 +1,401 @@
|
|
|
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 { varsResolver } from "./paper.utils.mjs";
|
|
7
|
+
import paper_module_default from "./paper.module.mjs";
|
|
8
|
+
import { computed, createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, useAttrs, withCtx } from "vue";
|
|
9
|
+
//#region packages/@cck-ui/core/src/components/paper/paper.vue
|
|
10
|
+
const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
11
|
+
name: "CPaper",
|
|
12
|
+
__name: "paper",
|
|
13
|
+
props: {
|
|
14
|
+
className: {
|
|
15
|
+
type: String,
|
|
16
|
+
required: false
|
|
17
|
+
},
|
|
18
|
+
style: {
|
|
19
|
+
type: [
|
|
20
|
+
Object,
|
|
21
|
+
Function,
|
|
22
|
+
Array
|
|
23
|
+
],
|
|
24
|
+
required: false,
|
|
25
|
+
skipCheck: true
|
|
26
|
+
},
|
|
27
|
+
__vars: {
|
|
28
|
+
type: null,
|
|
29
|
+
required: false
|
|
30
|
+
},
|
|
31
|
+
__size: {
|
|
32
|
+
type: String,
|
|
33
|
+
required: false
|
|
34
|
+
},
|
|
35
|
+
hiddenFrom: {
|
|
36
|
+
type: null,
|
|
37
|
+
required: false
|
|
38
|
+
},
|
|
39
|
+
visibleFrom: {
|
|
40
|
+
type: null,
|
|
41
|
+
required: false
|
|
42
|
+
},
|
|
43
|
+
lightHidden: {
|
|
44
|
+
type: Boolean,
|
|
45
|
+
required: false
|
|
46
|
+
},
|
|
47
|
+
darkHidden: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
required: false
|
|
50
|
+
},
|
|
51
|
+
mod: {
|
|
52
|
+
type: [
|
|
53
|
+
Object,
|
|
54
|
+
String,
|
|
55
|
+
Array
|
|
56
|
+
],
|
|
57
|
+
required: false
|
|
58
|
+
},
|
|
59
|
+
m: {
|
|
60
|
+
type: null,
|
|
61
|
+
required: false
|
|
62
|
+
},
|
|
63
|
+
my: {
|
|
64
|
+
type: null,
|
|
65
|
+
required: false
|
|
66
|
+
},
|
|
67
|
+
mx: {
|
|
68
|
+
type: null,
|
|
69
|
+
required: false
|
|
70
|
+
},
|
|
71
|
+
mt: {
|
|
72
|
+
type: null,
|
|
73
|
+
required: false
|
|
74
|
+
},
|
|
75
|
+
mb: {
|
|
76
|
+
type: null,
|
|
77
|
+
required: false
|
|
78
|
+
},
|
|
79
|
+
ms: {
|
|
80
|
+
type: null,
|
|
81
|
+
required: false
|
|
82
|
+
},
|
|
83
|
+
me: {
|
|
84
|
+
type: null,
|
|
85
|
+
required: false
|
|
86
|
+
},
|
|
87
|
+
mis: {
|
|
88
|
+
type: null,
|
|
89
|
+
required: false
|
|
90
|
+
},
|
|
91
|
+
mie: {
|
|
92
|
+
type: null,
|
|
93
|
+
required: false
|
|
94
|
+
},
|
|
95
|
+
ml: {
|
|
96
|
+
type: null,
|
|
97
|
+
required: false
|
|
98
|
+
},
|
|
99
|
+
mr: {
|
|
100
|
+
type: null,
|
|
101
|
+
required: false
|
|
102
|
+
},
|
|
103
|
+
p: {
|
|
104
|
+
type: null,
|
|
105
|
+
required: false
|
|
106
|
+
},
|
|
107
|
+
py: {
|
|
108
|
+
type: null,
|
|
109
|
+
required: false
|
|
110
|
+
},
|
|
111
|
+
px: {
|
|
112
|
+
type: null,
|
|
113
|
+
required: false
|
|
114
|
+
},
|
|
115
|
+
pt: {
|
|
116
|
+
type: null,
|
|
117
|
+
required: false
|
|
118
|
+
},
|
|
119
|
+
pb: {
|
|
120
|
+
type: null,
|
|
121
|
+
required: false
|
|
122
|
+
},
|
|
123
|
+
ps: {
|
|
124
|
+
type: null,
|
|
125
|
+
required: false
|
|
126
|
+
},
|
|
127
|
+
pe: {
|
|
128
|
+
type: null,
|
|
129
|
+
required: false
|
|
130
|
+
},
|
|
131
|
+
pis: {
|
|
132
|
+
type: null,
|
|
133
|
+
required: false
|
|
134
|
+
},
|
|
135
|
+
pie: {
|
|
136
|
+
type: null,
|
|
137
|
+
required: false
|
|
138
|
+
},
|
|
139
|
+
pl: {
|
|
140
|
+
type: null,
|
|
141
|
+
required: false
|
|
142
|
+
},
|
|
143
|
+
pr: {
|
|
144
|
+
type: null,
|
|
145
|
+
required: false
|
|
146
|
+
},
|
|
147
|
+
bd: {
|
|
148
|
+
type: null,
|
|
149
|
+
required: false
|
|
150
|
+
},
|
|
151
|
+
bdrs: {
|
|
152
|
+
type: null,
|
|
153
|
+
required: false
|
|
154
|
+
},
|
|
155
|
+
bg: {
|
|
156
|
+
type: null,
|
|
157
|
+
required: false
|
|
158
|
+
},
|
|
159
|
+
c: {
|
|
160
|
+
type: null,
|
|
161
|
+
required: false
|
|
162
|
+
},
|
|
163
|
+
opacity: {
|
|
164
|
+
type: [
|
|
165
|
+
String,
|
|
166
|
+
Object,
|
|
167
|
+
Number
|
|
168
|
+
],
|
|
169
|
+
required: false
|
|
170
|
+
},
|
|
171
|
+
ff: {
|
|
172
|
+
type: [String, Object],
|
|
173
|
+
required: false
|
|
174
|
+
},
|
|
175
|
+
fz: {
|
|
176
|
+
type: null,
|
|
177
|
+
required: false
|
|
178
|
+
},
|
|
179
|
+
fw: {
|
|
180
|
+
type: null,
|
|
181
|
+
required: false
|
|
182
|
+
},
|
|
183
|
+
lts: {
|
|
184
|
+
type: null,
|
|
185
|
+
required: false
|
|
186
|
+
},
|
|
187
|
+
ta: {
|
|
188
|
+
type: [String, Object],
|
|
189
|
+
required: false
|
|
190
|
+
},
|
|
191
|
+
lh: {
|
|
192
|
+
type: null,
|
|
193
|
+
required: false
|
|
194
|
+
},
|
|
195
|
+
fs: {
|
|
196
|
+
type: null,
|
|
197
|
+
required: false
|
|
198
|
+
},
|
|
199
|
+
tt: {
|
|
200
|
+
type: [String, Object],
|
|
201
|
+
required: false
|
|
202
|
+
},
|
|
203
|
+
td: {
|
|
204
|
+
type: null,
|
|
205
|
+
required: false
|
|
206
|
+
},
|
|
207
|
+
w: {
|
|
208
|
+
type: null,
|
|
209
|
+
required: false
|
|
210
|
+
},
|
|
211
|
+
miw: {
|
|
212
|
+
type: null,
|
|
213
|
+
required: false
|
|
214
|
+
},
|
|
215
|
+
maw: {
|
|
216
|
+
type: null,
|
|
217
|
+
required: false
|
|
218
|
+
},
|
|
219
|
+
h: {
|
|
220
|
+
type: null,
|
|
221
|
+
required: false
|
|
222
|
+
},
|
|
223
|
+
mih: {
|
|
224
|
+
type: null,
|
|
225
|
+
required: false
|
|
226
|
+
},
|
|
227
|
+
mah: {
|
|
228
|
+
type: null,
|
|
229
|
+
required: false
|
|
230
|
+
},
|
|
231
|
+
bgsz: {
|
|
232
|
+
type: null,
|
|
233
|
+
required: false
|
|
234
|
+
},
|
|
235
|
+
bgp: {
|
|
236
|
+
type: null,
|
|
237
|
+
required: false
|
|
238
|
+
},
|
|
239
|
+
bgr: {
|
|
240
|
+
type: null,
|
|
241
|
+
required: false
|
|
242
|
+
},
|
|
243
|
+
bga: {
|
|
244
|
+
type: null,
|
|
245
|
+
required: false
|
|
246
|
+
},
|
|
247
|
+
pos: {
|
|
248
|
+
type: [String, Object],
|
|
249
|
+
required: false
|
|
250
|
+
},
|
|
251
|
+
top: {
|
|
252
|
+
type: null,
|
|
253
|
+
required: false
|
|
254
|
+
},
|
|
255
|
+
left: {
|
|
256
|
+
type: null,
|
|
257
|
+
required: false
|
|
258
|
+
},
|
|
259
|
+
bottom: {
|
|
260
|
+
type: null,
|
|
261
|
+
required: false
|
|
262
|
+
},
|
|
263
|
+
right: {
|
|
264
|
+
type: null,
|
|
265
|
+
required: false
|
|
266
|
+
},
|
|
267
|
+
inset: {
|
|
268
|
+
type: null,
|
|
269
|
+
required: false
|
|
270
|
+
},
|
|
271
|
+
display: {
|
|
272
|
+
type: null,
|
|
273
|
+
required: false
|
|
274
|
+
},
|
|
275
|
+
flex: {
|
|
276
|
+
type: null,
|
|
277
|
+
required: false
|
|
278
|
+
},
|
|
279
|
+
shadow: {
|
|
280
|
+
type: null,
|
|
281
|
+
required: false
|
|
282
|
+
},
|
|
283
|
+
radius: {
|
|
284
|
+
type: null,
|
|
285
|
+
required: false
|
|
286
|
+
},
|
|
287
|
+
withBorder: {
|
|
288
|
+
type: Boolean,
|
|
289
|
+
required: false
|
|
290
|
+
},
|
|
291
|
+
unstyled: {
|
|
292
|
+
type: Boolean,
|
|
293
|
+
required: false
|
|
294
|
+
},
|
|
295
|
+
variant: {
|
|
296
|
+
type: null,
|
|
297
|
+
required: false
|
|
298
|
+
},
|
|
299
|
+
classNames: {
|
|
300
|
+
type: null,
|
|
301
|
+
required: false
|
|
302
|
+
},
|
|
303
|
+
styles: {
|
|
304
|
+
type: null,
|
|
305
|
+
required: false
|
|
306
|
+
},
|
|
307
|
+
vars: {
|
|
308
|
+
type: Function,
|
|
309
|
+
required: false
|
|
310
|
+
},
|
|
311
|
+
attributes: {
|
|
312
|
+
type: null,
|
|
313
|
+
required: false
|
|
314
|
+
}
|
|
315
|
+
},
|
|
316
|
+
setup(__props, { expose: __expose }) {
|
|
317
|
+
const _root = ref(null);
|
|
318
|
+
const attrs = useAttrs();
|
|
319
|
+
const rawProps = __props;
|
|
320
|
+
const props = useComponentProps({
|
|
321
|
+
component: "CPaper",
|
|
322
|
+
defaultProps: {},
|
|
323
|
+
props: rawProps
|
|
324
|
+
});
|
|
325
|
+
const knownProps = [
|
|
326
|
+
"classNames",
|
|
327
|
+
"className",
|
|
328
|
+
"style",
|
|
329
|
+
"styles",
|
|
330
|
+
"unstyled",
|
|
331
|
+
"withBorder",
|
|
332
|
+
"vars",
|
|
333
|
+
"radius",
|
|
334
|
+
"shadow",
|
|
335
|
+
"variant",
|
|
336
|
+
"mod",
|
|
337
|
+
"attributes"
|
|
338
|
+
];
|
|
339
|
+
const modList = computed(() => [{ "data-with-border": props.value.withBorder }]);
|
|
340
|
+
const getStyles = useStyles({
|
|
341
|
+
name: "Paper",
|
|
342
|
+
props: {
|
|
343
|
+
...props.value,
|
|
344
|
+
...attrs
|
|
345
|
+
},
|
|
346
|
+
classes: paper_module_default,
|
|
347
|
+
className: props.value.className,
|
|
348
|
+
style: props.value.style,
|
|
349
|
+
classNames: props.value.classNames,
|
|
350
|
+
styles: props.value.styles,
|
|
351
|
+
unstyled: props.value.unstyled,
|
|
352
|
+
attributes: props.value.attributes,
|
|
353
|
+
vars: props.value.vars,
|
|
354
|
+
varsResolver
|
|
355
|
+
});
|
|
356
|
+
const rootAttrs = computed(() => getStyles("root"));
|
|
357
|
+
const mergedAttrs = computed(() => {
|
|
358
|
+
const others = {};
|
|
359
|
+
const propsValue = props.value;
|
|
360
|
+
for (const key in propsValue) if (!knownProps.includes(key)) others[key] = propsValue[key];
|
|
361
|
+
const userMod = props.value.mod;
|
|
362
|
+
const mergedMod = [...Array.isArray(userMod) ? userMod : [userMod].filter(Boolean), ...modList.value || []];
|
|
363
|
+
return {
|
|
364
|
+
...others,
|
|
365
|
+
mod: mergedMod,
|
|
366
|
+
...rootAttrs.value
|
|
367
|
+
};
|
|
368
|
+
});
|
|
369
|
+
__expose({ root: computed(() => _root.value?.root ?? null) });
|
|
370
|
+
const __returned__ = {
|
|
371
|
+
_root,
|
|
372
|
+
attrs,
|
|
373
|
+
rawProps,
|
|
374
|
+
props,
|
|
375
|
+
knownProps,
|
|
376
|
+
modList,
|
|
377
|
+
getStyles,
|
|
378
|
+
rootAttrs,
|
|
379
|
+
mergedAttrs,
|
|
380
|
+
get CBox() {
|
|
381
|
+
return CBox;
|
|
382
|
+
}
|
|
383
|
+
};
|
|
384
|
+
Object.defineProperty(__returned__, "__isScriptSetup", {
|
|
385
|
+
enumerable: false,
|
|
386
|
+
value: true
|
|
387
|
+
});
|
|
388
|
+
return __returned__;
|
|
389
|
+
}
|
|
390
|
+
});
|
|
391
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
392
|
+
return openBlock(), createBlock($setup["CBox"], mergeProps({ ref: "_root" }, $setup.mergedAttrs, { variant: $setup.props.variant }), {
|
|
393
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
394
|
+
_: 3
|
|
395
|
+
}, 16, ["variant"]);
|
|
396
|
+
}
|
|
397
|
+
var paper_default = /*#__PURE__*/ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/cck-ui/cck-ui/packages/@cck-ui/core/src/components/paper/paper.vue"]]);
|
|
398
|
+
//#endregion
|
|
399
|
+
export { paper_default as default };
|
|
400
|
+
|
|
401
|
+
//# sourceMappingURL=paper.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paper.mjs","names":[],"sources":["../../../src/components/paper/paper.vue"],"sourcesContent":["<template>\n <c-box ref=\"_root\" v-bind=\"mergedAttrs\" :variant=\"props.variant\">\n <slot />\n </c-box>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport classes from './paper.module.css'\nimport { CBox, useComponentProps, useStyles } from '../../core'\nimport { PaperFactory, PaperProps } from './paper.types'\nimport { varsResolver } from './paper.utils'\n\ndefineOptions({\n name: 'CPaper',\n})\n\nconst _root = ref<InstanceType<typeof CBox> | null>(null)\n\nconst attrs = useAttrs()\n\nconst rawProps = defineProps<PaperProps>()\n\nconst props = useComponentProps({\n component: 'CPaper',\n defaultProps: {},\n props: rawProps,\n})\n\nconst knownProps = [\n 'classNames',\n 'className',\n 'style',\n 'styles',\n 'unstyled',\n 'withBorder',\n 'vars',\n 'radius',\n 'shadow',\n 'variant',\n 'mod',\n 'attributes',\n]\n\nconst modList = computed(() => [\n {\n 'data-with-border': props.value.withBorder,\n },\n])\n\nconst getStyles = useStyles<PaperFactory>({\n name: 'Paper',\n props: { ...props.value, ...attrs } as PaperProps,\n classes,\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 rootAttrs = computed(() => getStyles('root'))\n\nconst mergedAttrs = 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ,IAAsC,IAAI;EAExD,MAAM,QAAQ,SAAS;EAEvB,MAAM,WAAW;EAEjB,MAAM,QAAQ,kBAAkB;GAC9B,WAAW;GACX,cAAc,CAAC;GACf,OAAO;EACT,CAAC;EAED,MAAM,aAAa;GACjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,UAAU,eAAe,CAC7B,EACE,oBAAoB,MAAM,MAAM,WAClC,CACF,CAAC;EAED,MAAM,YAAY,UAAwB;GACxC,MAAM;GACN,OAAO;IAAE,GAAG,MAAM;IAAO,GAAG;GAAM;GAClC,SAAA;GACA,WAAW,MAAM,MAAM;GACvB,OAAO,MAAM,MAAM;GACnB,YAAY,MAAM,MAAM;GACxB,QAAQ,MAAM,MAAM;GACpB,UAAU,MAAM,MAAM;GACtB,YAAY,MAAM,MAAM;GACxB,MAAM,MAAM,MAAM;GAClB;EACF,CAAC;EAED,MAAM,YAAY,eAAe,UAAU,MAAM,CAAC;EAElD,MAAM,cAAc,eAAe;GACjC,MAAM,SAA8B,CAAC;GACrC,MAAM,aAAa,MAAM;GACzB,KAAK,MAAM,OAAO,YAChB,IAAI,CAAC,WAAW,SAAS,GAAG,GAC1B,OAAO,OAAO,WAAW;GAG7B,MAAM,UAAU,MAAM,MAAM;GAC5B,MAAM,YAAY,CAChB,GAAI,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,OAAO,GAC/D,GAAI,QAAQ,SAAS,CAAC,CACxB;GACA,OAAO;IAAE,GAAG;IAAQ,KAAK;IAAW,GAAG,UAAU;GAAM;EACzD,CAAC;EAED,SAAa,EACX,MAAM,eAAe,MAAM,OAAO,QAAQ,IAAI,EAChD,CAAC;;;;;;;;;;;;;;;;;;;;;;;qBAnFC,YAEQ,OAAA,SAFR,WAEQ,EAFD,KAAI,QAAO,GAAS,OAAA,aAAW,EAAG,SAAS,OAAA,MAAM,QAAA,CAAA,GAAA;yBAC9C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paper.module.mjs","names":[],"sources":["../../../src/components/paper/paper.module.css"],"sourcesContent":[".root {\n --paper-radius: var(--c-radius-default);\n\n outline: 0;\n -webkit-tap-heighlight-color: transparent;\n display: block;\n touch-action: manipulation;\n text-decoration: none;\n border-radius: var(--paper-radius);\n box-shadow: var(--paper-shadow);\n background-color: var(--c-color-body);\n\n @mixin light {\n --paper-border-color: var(--c-color-gray-3);\n }\n\n @mixin dark {\n --paper-border-color: var(--c-color-dark-4);\n }\n\n &:where([data-with-border]) {\n border: rem(1px) solid var(--paper-border-color);\n }\n}\n"],"mappings":";;AAAA,IAAA,uBAAe,EAAC,QAAO,aAAY"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { getRadius, getShadow } 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/paper/paper.utils.ts
|
|
5
|
+
const varsResolver = createVarsResolver((_, { radius, shadow }) => ({ root: {
|
|
6
|
+
"--paper-radius": radius === void 0 ? void 0 : getRadius(radius),
|
|
7
|
+
"--paper-shadow": getShadow(shadow)
|
|
8
|
+
} }));
|
|
9
|
+
//#endregion
|
|
10
|
+
export { varsResolver };
|
|
11
|
+
|
|
12
|
+
//# sourceMappingURL=paper.utils.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paper.utils.mjs","names":[],"sources":["../../../src/components/paper/paper.utils.ts"],"sourcesContent":["import { createVarsResolver, getRadius, getShadow } from '../../core'\nimport { PaperFactory } from './paper.types'\n\nexport const varsResolver = createVarsResolver<PaperFactory>((_, { radius, shadow }) => ({\n root: {\n '--paper-radius': radius === undefined ? undefined : getRadius(radius),\n '--paper-shadow': getShadow(shadow),\n },\n}))\n"],"mappings":";;;;AAGA,MAAa,eAAe,oBAAkC,GAAG,EAAE,QAAQ,cAAc,EACvF,MAAM;CACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACrE,kBAAkB,UAAU,MAAM;AACpC,EACF,EAAE"}
|
package/esm/index.mjs
CHANGED
|
@@ -65,6 +65,7 @@ import { CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateInd
|
|
|
65
65
|
import { CFlex } from "./components/flex/index.mjs";
|
|
66
66
|
import { CCol, CGrid } from "./components/grid/index.mjs";
|
|
67
67
|
import { CGroup } from "./components/group/index.mjs";
|
|
68
|
+
import { CPaper } from "./components/paper/index.mjs";
|
|
68
69
|
import { CSemiCircleProgress } from "./components/semi-circle-progress/index.mjs";
|
|
69
70
|
import { CSimpleGrid } from "./components/simple-grid/index.mjs";
|
|
70
71
|
import { CSkeleton } from "./components/skeleton/index.mjs";
|
|
@@ -95,6 +96,7 @@ const components = [
|
|
|
95
96
|
CGrid,
|
|
96
97
|
CGroup,
|
|
97
98
|
CLoader,
|
|
99
|
+
CPaper,
|
|
98
100
|
CSemiCircleProgress,
|
|
99
101
|
CSimpleGrid,
|
|
100
102
|
CSkeleton,
|
|
@@ -114,6 +116,6 @@ const CckUI = { install(app) {
|
|
|
114
116
|
});
|
|
115
117
|
} };
|
|
116
118
|
//#endregion
|
|
117
|
-
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, CSemiCircleProgress, CSimpleGrid, CSkeleton, 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 };
|
|
119
|
+
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, CPaper, CSemiCircleProgress, CSimpleGrid, CSkeleton, 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 };
|
|
118
120
|
|
|
119
121
|
//# 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 CEmptyState,\n CEmptyStateActions,\n CEmptyStateDescription,\n CEmptyStateIndicator,\n CEmptyStateTitle,\n CFlex,\n CGrid,\n CGroup,\n CLoader,\n CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\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 CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\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 CPaper,\n CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\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 CPaper,\n CSemiCircleProgress,\n CSimpleGrid,\n CSkeleton,\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,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;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,23 @@
|
|
|
1
|
+
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
|
|
2
|
+
export type ActionIconGroupStylesNames = 'group';
|
|
3
|
+
export type ActionIconGroupCssVariables = {
|
|
4
|
+
group: '--ai-border-width';
|
|
5
|
+
};
|
|
6
|
+
export interface ActionIconGroupProps extends BoxProps, StylesApiProps<ActionIconGroupFactory>, /* @vue-ignore */ ElementProps<'div'> {
|
|
7
|
+
/**
|
|
8
|
+
* @description Group orientation
|
|
9
|
+
* @default 'horizontal'
|
|
10
|
+
*/
|
|
11
|
+
orientation?: 'horizontal' | 'vertical';
|
|
12
|
+
/**
|
|
13
|
+
* @description `border-width` of the child components.
|
|
14
|
+
* @default 1
|
|
15
|
+
*/
|
|
16
|
+
borderWidth?: number | string;
|
|
17
|
+
}
|
|
18
|
+
export type ActionIconGroupFactory = Factory<{
|
|
19
|
+
props: ActionIconGroupProps;
|
|
20
|
+
ref: HTMLDivElement;
|
|
21
|
+
stylesNames: ActionIconGroupStylesNames;
|
|
22
|
+
vars: ActionIconGroupCssVariables;
|
|
23
|
+
}>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const varsResolver: import("../../..").VarsResolver<{
|
|
2
|
+
props: import("./action-icon-group.types").ActionIconGroupProps;
|
|
3
|
+
ref: HTMLDivElement;
|
|
4
|
+
stylesNames: import("./action-icon-group.types").ActionIconGroupStylesNames;
|
|
5
|
+
vars: import("./action-icon-group.types").ActionIconGroupCssVariables;
|
|
6
|
+
}>;
|
package/lib/components/action-icon/action-icon-group-section/action-icon-group-section.types.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { BoxProps, CGradient, CRadius, CSize, ElementProps, Factory, StylesApiProps } from '../../../core';
|
|
2
|
+
import { ActionIconVariant } from '../action-icon.types';
|
|
3
|
+
export type ActionIconGroupSectionStylesNames = 'groupSection';
|
|
4
|
+
export type ActionIconGroupSectionCssVariables = {
|
|
5
|
+
groupSection: '--section-radius' | '--section-bg' | '--section-color' | '--section-bd' | '--section-height' | '--section-padding-x' | '--section-fz';
|
|
6
|
+
};
|
|
7
|
+
export interface ActionIconGroupSectionProps extends BoxProps, StylesApiProps<ActionIconGroupSectionFactory>, ElementProps<'div'> {
|
|
8
|
+
/**
|
|
9
|
+
* @description Key of `theme.radius` or any valid CSS value to set `border-radius`
|
|
10
|
+
* @default theme.defaultRadius
|
|
11
|
+
*/
|
|
12
|
+
radius?: CRadius;
|
|
13
|
+
/**
|
|
14
|
+
* @description Gradient values used with `variant="gradient"`.
|
|
15
|
+
* @default theme.defaultGradient
|
|
16
|
+
*/
|
|
17
|
+
gradient?: CGradient;
|
|
18
|
+
/**
|
|
19
|
+
* @description If set, adjusts text color based on background color for `filled` variant
|
|
20
|
+
*/
|
|
21
|
+
autoContrast?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* @description Controls section `height`, `font-size` and horizontal `padding`
|
|
24
|
+
* @default 'sm'
|
|
25
|
+
*/
|
|
26
|
+
size?: CSize | (string & {}) | number;
|
|
27
|
+
}
|
|
28
|
+
export type ActionIconGroupSectionFactory = Factory<{
|
|
29
|
+
props: ActionIconGroupSectionProps;
|
|
30
|
+
ref: HTMLDivElement;
|
|
31
|
+
stylesNames: ActionIconGroupSectionStylesNames;
|
|
32
|
+
vars: ActionIconGroupSectionCssVariables;
|
|
33
|
+
variant: ActionIconVariant;
|
|
34
|
+
}>;
|
package/lib/components/action-icon/action-icon-group-section/action-icon-group-section.utils.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const varsResolver: import("../../..").VarsResolver<{
|
|
2
|
+
props: import("./action-icon-group-section.types").ActionIconGroupSectionProps;
|
|
3
|
+
ref: HTMLDivElement;
|
|
4
|
+
stylesNames: import("./action-icon-group-section.types").ActionIconGroupSectionStylesNames;
|
|
5
|
+
vars: import("./action-icon-group-section.types").ActionIconGroupSectionCssVariables;
|
|
6
|
+
variant: import("..").ActionIconVariant;
|
|
7
|
+
}>;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { BoxProps, CColor, CGradient, CRadius, CSize, PolymorphicFactory, StylesApiProps } from '../../core';
|
|
2
|
+
import { LoaderProps } from '../loader';
|
|
3
|
+
export type ActionIconVariant = 'default' | 'filled' | 'light' | 'outline' | 'dashed' | 'transparent' | 'white' | 'subtle' | 'gradient';
|
|
4
|
+
export type ActionIconStylesNames = 'root' | 'loader' | 'icon';
|
|
5
|
+
export type ActionIconCssVariables = {
|
|
6
|
+
root: '--ai-radius' | '--ai-size' | '--ai-bg' | '--ai-hover' | '--ai-hover-color' | '--ai-color' | '--ai-bd';
|
|
7
|
+
};
|
|
8
|
+
export interface ActionIconProps extends BoxProps, StylesApiProps<ActionIconFactory> {
|
|
9
|
+
dataDisabled?: boolean;
|
|
10
|
+
__staticSelector?: string;
|
|
11
|
+
/**
|
|
12
|
+
* @description If set, `Loader` component is displayed instead of the `children`
|
|
13
|
+
*/
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* @description Props passed down to the `Loader` component. Ignored when `loading` prop is not set.
|
|
17
|
+
*/
|
|
18
|
+
loaderProps?: LoaderProps;
|
|
19
|
+
/**
|
|
20
|
+
* @description Controls width and height of the button. Numbers are converted to rem.
|
|
21
|
+
* @default 'md'
|
|
22
|
+
*/
|
|
23
|
+
size?: CSize | `input-${CSize}` | (string & {}) | number;
|
|
24
|
+
/**
|
|
25
|
+
* @description Key of `theme.colors` or any valid CSS color.
|
|
26
|
+
* @default theme.primaryColor
|
|
27
|
+
*/
|
|
28
|
+
color?: CColor;
|
|
29
|
+
/**
|
|
30
|
+
* @description Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem.
|
|
31
|
+
* @default theme.defaultRadius
|
|
32
|
+
*/
|
|
33
|
+
radius?: CRadius;
|
|
34
|
+
/**
|
|
35
|
+
* @description Gradient values used with `variant="gradient"`.
|
|
36
|
+
* @default theme.defaultGradient
|
|
37
|
+
*/
|
|
38
|
+
gradient?: CGradient;
|
|
39
|
+
/**
|
|
40
|
+
* @description Sets `disabled` attributes, prevents interactions
|
|
41
|
+
*/
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @description If set, adjusts text color based on background color for `filled` variant
|
|
45
|
+
*/
|
|
46
|
+
autoContrast?: boolean;
|
|
47
|
+
}
|
|
48
|
+
export type ActionIconFactory = PolymorphicFactory<{
|
|
49
|
+
props: ActionIconProps;
|
|
50
|
+
defaultComponent: 'button';
|
|
51
|
+
defaultRef: HTMLButtonElement;
|
|
52
|
+
stylesNames: ActionIconStylesNames;
|
|
53
|
+
variant: ActionIconVariant;
|
|
54
|
+
vars: ActionIconCssVariables;
|
|
55
|
+
staticComponents: {};
|
|
56
|
+
}>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const varsResolver: import("../..").VarsResolver<{
|
|
2
|
+
props: import("./action-icon.types").ActionIconProps;
|
|
3
|
+
defaultComponent: "button";
|
|
4
|
+
defaultRef: HTMLButtonElement;
|
|
5
|
+
stylesNames: import("./action-icon.types").ActionIconStylesNames;
|
|
6
|
+
variant: import("./action-icon.types").ActionIconVariant;
|
|
7
|
+
vars: import("./action-icon.types").ActionIconCssVariables;
|
|
8
|
+
staticComponents: {};
|
|
9
|
+
}>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import ActionIconGroup from './action-icon-group/action-icon-group.vue';
|
|
2
|
+
import ActionIconGroupSection from './action-icon-group-section/action-icon-group-section.vue';
|
|
3
|
+
import ActionIcon from './action-icon.vue';
|
|
4
|
+
import classes from './action-icon.module.css';
|
|
5
|
+
import { SFCWithInstallAndClasses } from '../../core';
|
|
6
|
+
export declare const CActionIconGroup: SFCWithInstallAndClasses<typeof ActionIconGroup, typeof classes>;
|
|
7
|
+
export declare const CActionIconGroupSection: SFCWithInstallAndClasses<typeof ActionIconGroupSection, typeof classes>;
|
|
8
|
+
export declare const CActionIcon: SFCWithInstallAndClasses<typeof ActionIcon, typeof classes> & {
|
|
9
|
+
CActionIconGroup: typeof CActionIconGroup;
|
|
10
|
+
CActionIconGroupSection: typeof CActionIconGroupSection;
|
|
11
|
+
};
|
|
12
|
+
export default CActionIcon;
|
|
13
|
+
export * from './action-icon-group/action-icon-group.types';
|
|
14
|
+
export * from './action-icon-group-section/action-icon-group-section.types';
|
|
15
|
+
export * from './action-icon.types';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { SFCWithInstallAndClasses } from '../../core';
|
|
2
|
+
import Paper from './paper.vue';
|
|
3
|
+
import classes from './paper.module.css';
|
|
4
|
+
export declare const CPaper: SFCWithInstallAndClasses<typeof Paper, typeof classes>;
|
|
5
|
+
export default CPaper;
|
|
6
|
+
export * from './paper.types';
|