funuicss 3.7.1 → 3.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/fun.css +619 -75
- package/index.d.ts +2 -1
- package/index.js +8 -1
- package/package.json +1 -1
- package/ui/calendar/Calendar.js +1 -1
- package/ui/chart/Bar.d.ts +98 -12
- package/ui/chart/Bar.js +235 -42
- package/ui/chart/Line.js +19 -124
- package/ui/chart/Pie.d.ts +61 -7
- package/ui/chart/Pie.js +204 -41
- package/ui/drop/Dropdown.d.ts +4 -3
- package/ui/drop/Dropdown.js +24 -29
- package/ui/input/FileUpload.d.ts +21 -0
- package/ui/input/FileUpload.js +235 -0
- package/ui/input/Input.d.ts +0 -7
- package/ui/input/Input.js +16 -136
- package/ui/richtext/RichText.js +1 -1
- package/ui/specials/Circle.d.ts +2 -1
- package/ui/specials/Circle.js +2 -5
- package/ui/table/Table.js +55 -49
- package/ui/text/Text.d.ts +2 -1
- package/ui/text/Text.js +51 -50
- package/ui/theme/theme.d.ts +34 -0
- package/ui/theme/theme.js +198 -18
- package/ui/vista/Vista.js +58 -141
- package/utils/componentUtils.js +27 -4
package/ui/table/Table.js
CHANGED
|
@@ -70,10 +70,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
70
70
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
71
71
|
exports.default = Table;
|
|
72
72
|
var React = __importStar(require("react"));
|
|
73
|
-
var Head_1 = __importDefault(require("./Head"));
|
|
74
|
-
var Body_1 = __importDefault(require("./Body"));
|
|
75
|
-
var Row_1 = __importDefault(require("./Row"));
|
|
76
|
-
var Data_1 = __importDefault(require("./Data"));
|
|
77
73
|
var Input_1 = __importDefault(require("../input/Input"));
|
|
78
74
|
var react_1 = require("react");
|
|
79
75
|
var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
|
|
@@ -81,8 +77,6 @@ var Button_1 = __importDefault(require("../button/Button"));
|
|
|
81
77
|
var pi_1 = require("react-icons/pi");
|
|
82
78
|
var Circle_1 = __importDefault(require("../specials/Circle"));
|
|
83
79
|
var Text_1 = __importDefault(require("../text/Text"));
|
|
84
|
-
var View_1 = __importDefault(require("../view/View"));
|
|
85
|
-
var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
|
|
86
80
|
var Select_1 = __importDefault(require("../select/Select"));
|
|
87
81
|
var Export_1 = require("./Export");
|
|
88
82
|
var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
|
|
@@ -188,7 +182,7 @@ function Table(_a) {
|
|
|
188
182
|
}, [selectedField, selectedValue]);
|
|
189
183
|
return (React.createElement("div", { className: "".concat(funcss ? funcss : '', " roundEdge") },
|
|
190
184
|
data &&
|
|
191
|
-
React.createElement("div", { className: "pr-4 pl-4 pt-2 pb-2 lighter
|
|
185
|
+
React.createElement("div", { className: "pr-4 pl-4 pt-2 pb-2 lighter tableHeader mb-2", style: { overflow: "show" } },
|
|
192
186
|
React.createElement(RowFlex_1.default, { gap: 0.5, justify: 'space-between' },
|
|
193
187
|
title ?
|
|
194
188
|
React.createElement("div", null,
|
|
@@ -237,7 +231,7 @@ function Table(_a) {
|
|
|
237
231
|
React.createElement(Flex_1.default, { gap: 0.5, wrap: 'nowrap', alignItems: 'center' },
|
|
238
232
|
React.createElement("div", { className: 'animated slide-up' },
|
|
239
233
|
React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300 bg', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
|
|
240
|
-
React.createElement("div",
|
|
234
|
+
React.createElement("div", null,
|
|
241
235
|
React.createElement("div", { onClick: function () { return setshowSearch(false); } },
|
|
242
236
|
React.createElement(ToolTip_1.default, null,
|
|
243
237
|
filterableFields ? React.createElement(io5_1.IoFilterOutline, { className: 'pointer' })
|
|
@@ -245,7 +239,7 @@ function Table(_a) {
|
|
|
245
239
|
React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
|
|
246
240
|
React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
|
|
247
241
|
:
|
|
248
|
-
React.createElement("div",
|
|
242
|
+
React.createElement("div", null,
|
|
249
243
|
React.createElement(ToolTip_1.default, null,
|
|
250
244
|
React.createElement(ci_1.CiSearch, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(true); } }),
|
|
251
245
|
React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Search Data" })))))
|
|
@@ -254,53 +248,65 @@ function Table(_a) {
|
|
|
254
248
|
React.createElement(RowFlex_1.default, { gap: 0.5 },
|
|
255
249
|
right && right,
|
|
256
250
|
!hideExport &&
|
|
257
|
-
React.createElement("div",
|
|
251
|
+
React.createElement("div", null,
|
|
258
252
|
React.createElement(ToolTip_1.default, null,
|
|
259
253
|
React.createElement(Circle_1.default, { bg: 'lighter', bordered: true, onClick: Export },
|
|
260
254
|
React.createElement(pi_1.PiExportThin, null)),
|
|
261
255
|
React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
|
|
262
256
|
React.createElement("main", { style: { overflow: "auto", width: "100%" } },
|
|
263
|
-
React.createElement("
|
|
257
|
+
React.createElement("div", __assign({ className: "table-grid ".concat(bordered ? 'bordered' : '', " ").concat(noStripped ? '' : 'stripped', " ").concat(hoverable ? 'hoverableTr' : '', " ").concat(light ? 'light' : '', " ").concat(dark ? 'dark' : ''), style: {
|
|
264
258
|
height: height ? height + "px" : "",
|
|
265
259
|
position: 'relative',
|
|
266
260
|
zIndex: 1
|
|
267
261
|
} }, rest),
|
|
268
|
-
data &&
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
React.createElement("div",
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
262
|
+
data && (data === null || data === void 0 ? void 0 : data.titles) && (React.createElement("div", { className: "table-head" }, data.titles.map(function (mdoc, index) { return (React.createElement("div", { key: mdoc, className: "table-header text-secondary ".concat(index === 0 ? "first_table_data" : "", " ").concat(index === data.titles.length - 1 ? "last_table_data" : ""), "data-label": mdoc }, mdoc)); }))),
|
|
263
|
+
head && React.createElement("div", { className: "table-head" }, head),
|
|
264
|
+
React.createElement("div", { className: "table-body" },
|
|
265
|
+
body && body,
|
|
266
|
+
data &&
|
|
267
|
+
(function () {
|
|
268
|
+
var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
|
|
269
|
+
var shouldSlice = !searchQuery || results.length > 10;
|
|
270
|
+
return (shouldSlice ? results.slice(startIndex, endIndex) : results).map(function (mdoc, index) { return (React.createElement("div", { className: "table-row animated slide-up ".concat(trCss), key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
|
|
271
|
+
data.fields.map(function (fdoc, findex) {
|
|
272
|
+
var _a, _b;
|
|
273
|
+
return (React.createElement("div", { key: fdoc, className: "table-cell ".concat(data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || "" : ""), "data-label": ((_b = data.titles) === null || _b === void 0 ? void 0 : _b[findex]) || fdoc, style: { overflow: "visible" } }, getNestedValue(mdoc, fdoc)));
|
|
274
|
+
}),
|
|
275
|
+
customColumns
|
|
276
|
+
? customColumns.map(function (column, columnIndex) { return (React.createElement("div", { key: columnIndex, className: "table-cell", "data-label": column.title || "Action", style: {
|
|
277
|
+
position: "relative",
|
|
278
|
+
overflow: "visible",
|
|
279
|
+
} },
|
|
280
|
+
React.createElement("div", { style: {
|
|
281
|
+
position: "relative",
|
|
282
|
+
overflow: "visible",
|
|
283
|
+
zIndex: 50,
|
|
284
|
+
} }, column.render && column.render(mdoc)),
|
|
285
|
+
column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); })
|
|
286
|
+
: "")); });
|
|
287
|
+
})(),
|
|
288
|
+
isLoading &&
|
|
289
|
+
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (_, index) { return (React.createElement("div", { key: index, className: "table-row skeleton" }, data === null || data === void 0 ? void 0 : data.fields.map(function (_, cellIndex) { return (React.createElement("div", { key: cellIndex, className: "table-cell" })); }))); }),
|
|
290
|
+
children ? children : ""),
|
|
291
|
+
filteredData.length === 0 && !isLoading && !children && (React.createElement("div", { className: "table-empty" },
|
|
292
|
+
React.createElement("div", { className: "empty-icon" }, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.icon) || React.createElement(pi_1.PiEmpty, { size: 30, className: "text-error" })),
|
|
293
|
+
React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.title) || (React.createElement(Text_1.default, { text: "No Record Found!", size: "xl" }))),
|
|
294
|
+
React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.subtitle) || (React.createElement(Text_1.default, { text: "You can try reloading the page or check your query" }))))))),
|
|
295
|
+
data && pageSize && filteredData.length > pageSize && (React.createElement("div", { className: "padding bt" },
|
|
296
|
+
React.createElement(RowFlex_1.default, { gap: 1, justify: "center" },
|
|
297
|
+
React.createElement("div", { className: "pagination-container" },
|
|
298
|
+
React.createElement("div", { className: "pagination-nav ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(1); }, title: "First page" },
|
|
299
|
+
React.createElement(Text_1.default, { text: "\u00AB\u00AB" })),
|
|
300
|
+
React.createElement("div", { className: "pagination-nav ".concat(currentPage === 1 ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage > 1 && handleChangePage(currentPage - 1); }, title: "Previous page" },
|
|
301
|
+
React.createElement(Text_1.default, { text: "\u2039" })),
|
|
302
|
+
React.createElement("div", { className: "pagination" }, Array.from({ length: endPage - startPage + 1 }, function (_, i) {
|
|
303
|
+
var pageNumber = startPage + i;
|
|
304
|
+
var isActive = currentPage === pageNumber;
|
|
305
|
+
return (React.createElement("div", { key: pageNumber, className: "pagination-item ".concat(isActive ? 'pagination-item-active' : ''), onClick: function () { return handleChangePage(pageNumber); } },
|
|
306
|
+
React.createElement(Text_1.default, { text: "".concat(pageNumber), bold: isActive })));
|
|
307
|
+
})),
|
|
308
|
+
React.createElement("div", { className: "pagination-nav ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(currentPage + 1); }, title: "Next page" },
|
|
309
|
+
React.createElement(Text_1.default, { text: "\u203A" })),
|
|
310
|
+
React.createElement("div", { className: "pagination-nav ".concat(currentPage === totalPages ? 'pagination-nav-disabled' : ''), onClick: function () { return currentPage < totalPages && handleChangePage(totalPages); }, title: "Last page" },
|
|
311
|
+
React.createElement(Text_1.default, { text: "\u00BB\u00BB" }))))))));
|
|
306
312
|
}
|
package/ui/text/Text.d.ts
CHANGED
|
@@ -42,7 +42,8 @@ type TypographyProps = {
|
|
|
42
42
|
variant?: string;
|
|
43
43
|
margin?: string;
|
|
44
44
|
padding?: string;
|
|
45
|
-
|
|
45
|
+
style?: React.CSSProperties;
|
|
46
|
+
size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | string;
|
|
46
47
|
};
|
|
47
48
|
declare const Text: React.FC<TypographyProps>;
|
|
48
49
|
export default Text;
|
package/ui/text/Text.js
CHANGED
|
@@ -30,52 +30,53 @@ var react_1 = __importDefault(require("react"));
|
|
|
30
30
|
var pi_1 = require("react-icons/pi");
|
|
31
31
|
var componentUtils_1 = require("../../utils/componentUtils");
|
|
32
32
|
var Text = function (_a) {
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
? mergeWithLocal(localProps)
|
|
43
|
-
: { props: localProps }).props;
|
|
44
|
-
// Extract final values - local props take precedence, handle empty strings properly
|
|
33
|
+
var _b;
|
|
34
|
+
var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _c = _a.variant, variant = _c === void 0 ? '' : _c, size = _a.size, margin = _a.margin, style = _a.style, padding = _a.padding, rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "variant", "size", "margin", "style", "padding"]);
|
|
35
|
+
// Use component configuration (simplified - let the hook handle empty variant)
|
|
36
|
+
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
|
|
37
|
+
// Create local props object - include ALL props
|
|
38
|
+
var localProps = __assign({ bg: bg, color: color, hoverBg: hoverBg, hoverText: hoverText, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, padding: padding }, rest);
|
|
39
|
+
// Merge with config - LOCAL PROPS OVERRIDE CONFIG (consistent with Button)
|
|
40
|
+
var mergedProps = mergeWithLocal(localProps).props;
|
|
41
|
+
// Extract final values - use NULLISH COALESCING like Button component
|
|
45
42
|
var final = {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
43
|
+
// Use local props first, fallback to merged props
|
|
44
|
+
bg: bg !== null && bg !== void 0 ? bg : mergedProps.bg,
|
|
45
|
+
color: color !== null && color !== void 0 ? color : mergedProps.color,
|
|
46
|
+
hoverBg: hoverBg !== null && hoverBg !== void 0 ? hoverBg : mergedProps.hoverBg,
|
|
47
|
+
hoverText: hoverText !== null && hoverText !== void 0 ? hoverText : mergedProps.hoverText,
|
|
48
|
+
funcss: funcss !== null && funcss !== void 0 ? funcss : mergedProps.funcss,
|
|
49
|
+
emp: emp !== null && emp !== void 0 ? emp : mergedProps.emp,
|
|
50
|
+
bold: bold !== null && bold !== void 0 ? bold : mergedProps.bold,
|
|
51
|
+
block: block !== null && block !== void 0 ? block : mergedProps.block,
|
|
52
|
+
body: body !== null && body !== void 0 ? body : mergedProps.body,
|
|
53
|
+
article: article !== null && article !== void 0 ? article : mergedProps.article,
|
|
54
|
+
light: light !== null && light !== void 0 ? light : mergedProps.light,
|
|
55
|
+
lighter: lighter !== null && lighter !== void 0 ? lighter : mergedProps.lighter,
|
|
56
|
+
italic: italic !== null && italic !== void 0 ? italic : mergedProps.italic,
|
|
57
|
+
weight: weight !== null && weight !== void 0 ? weight : mergedProps.weight,
|
|
58
|
+
underline: underline !== null && underline !== void 0 ? underline : mergedProps.underline,
|
|
59
|
+
align: align !== null && align !== void 0 ? align : mergedProps.align,
|
|
60
|
+
lineHeight: lineHeight !== null && lineHeight !== void 0 ? lineHeight : mergedProps.lineHeight,
|
|
61
|
+
letterSpacing: letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : mergedProps.letterSpacing,
|
|
62
|
+
uppercase: uppercase !== null && uppercase !== void 0 ? uppercase : mergedProps.uppercase,
|
|
63
|
+
lowercase: lowercase !== null && lowercase !== void 0 ? lowercase : mergedProps.lowercase,
|
|
64
|
+
capitalize: capitalize !== null && capitalize !== void 0 ? capitalize : mergedProps.capitalize,
|
|
65
|
+
textDecoration: textDecoration !== null && textDecoration !== void 0 ? textDecoration : mergedProps.textDecoration,
|
|
66
|
+
textTransform: textTransform !== null && textTransform !== void 0 ? textTransform : mergedProps.textTransform,
|
|
67
|
+
whiteSpace: whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : mergedProps.whiteSpace,
|
|
68
|
+
wordBreak: wordBreak !== null && wordBreak !== void 0 ? wordBreak : mergedProps.wordBreak,
|
|
69
|
+
fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : mergedProps.fontFamily,
|
|
70
|
+
truncate: truncate !== null && truncate !== void 0 ? truncate : mergedProps.truncate,
|
|
71
|
+
textShadow: textShadow !== null && textShadow !== void 0 ? textShadow : mergedProps.textShadow,
|
|
72
|
+
textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : mergedProps.textAlign,
|
|
73
|
+
monospace: monospace !== null && monospace !== void 0 ? monospace : mergedProps.monospace,
|
|
74
|
+
quote: quote !== null && quote !== void 0 ? quote : mergedProps.quote,
|
|
75
|
+
opacity: opacity !== null && opacity !== void 0 ? opacity : mergedProps.opacity,
|
|
76
|
+
size: (_b = size !== null && size !== void 0 ? size : mergedProps.size) !== null && _b !== void 0 ? _b : 'base',
|
|
77
|
+
margin: margin !== null && margin !== void 0 ? margin : mergedProps.margin,
|
|
78
|
+
text: text !== null && text !== void 0 ? text : mergedProps.text,
|
|
79
|
+
padding: padding !== null && padding !== void 0 ? padding : mergedProps.padding,
|
|
79
80
|
};
|
|
80
81
|
// If margin is provided, force block display
|
|
81
82
|
var shouldBeBlock = final.block || !!final.margin;
|
|
@@ -87,7 +88,7 @@ var Text = function (_a) {
|
|
|
87
88
|
final.size === 'h5' ? "h5" :
|
|
88
89
|
final.size === 'h6' ? "h6" :
|
|
89
90
|
"text-".concat(final.size));
|
|
90
|
-
var mergedStyles = __assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: final.bold ? 'bold' : final.weight ? final.weight : undefined, lineHeight: final.lineHeight, letterSpacing: final.letterSpacing, textTransform: final.textTransform, textDecoration: final.textDecoration, fontFamily: final.fontFamily, textShadow: final.textShadow, textAlign: final.textAlign, whiteSpace: final.whiteSpace, wordBreak: final.wordBreak, margin: final.margin, padding: final.padding }, customStyles), (final.truncate
|
|
91
|
+
var mergedStyles = __assign(__assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: final.bold ? 'bold' : final.weight ? final.weight : undefined, lineHeight: final.lineHeight, letterSpacing: final.letterSpacing, textTransform: final.textTransform, textDecoration: final.textDecoration, fontFamily: final.fontFamily, textShadow: final.textShadow, textAlign: final.textAlign, whiteSpace: final.whiteSpace, wordBreak: final.wordBreak, margin: final.margin, padding: final.padding }, customStyles), style), (final.truncate
|
|
91
92
|
? {
|
|
92
93
|
display: '-webkit-box',
|
|
93
94
|
WebkitBoxOrient: 'vertical',
|
|
@@ -103,8 +104,8 @@ var Text = function (_a) {
|
|
|
103
104
|
final.align ? " text-".concat(final.align, " ") : '',
|
|
104
105
|
final.monospace ? 'monospace' : '',
|
|
105
106
|
final.bg || '',
|
|
106
|
-
hoverText ? "hover-text-".concat(hoverText) : '',
|
|
107
|
-
hoverBg ? "hover-".concat(hoverBg) : '',
|
|
107
|
+
final.hoverText ? "hover-text-".concat(final.hoverText) : '',
|
|
108
|
+
final.hoverBg ? "hover-".concat(final.hoverBg) : '',
|
|
108
109
|
final.light ? 'lightText' : final.lighter ? 'lighterText' : '',
|
|
109
110
|
final.italic ? 'italicText' : '',
|
|
110
111
|
final.underline ? 'underlineText' : '',
|
|
@@ -122,7 +123,7 @@ var Text = function (_a) {
|
|
|
122
123
|
return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
|
|
123
124
|
final.quote && (react_1.default.createElement("div", null,
|
|
124
125
|
react_1.default.createElement(pi_1.PiQuotesLight, null))),
|
|
125
|
-
children,
|
|
126
|
-
text));
|
|
126
|
+
children, final === null || final === void 0 ? void 0 :
|
|
127
|
+
final.text));
|
|
127
128
|
};
|
|
128
129
|
exports.default = Text;
|
package/ui/theme/theme.d.ts
CHANGED
|
@@ -17,10 +17,16 @@ interface ProjectData {
|
|
|
17
17
|
components?: Record<string, any>;
|
|
18
18
|
default_variation?: ThemeVariant;
|
|
19
19
|
variables?: Variable[];
|
|
20
|
+
assets?: Asset[];
|
|
20
21
|
name?: string;
|
|
21
22
|
project_id?: string;
|
|
22
23
|
version?: number;
|
|
23
24
|
updated_at?: string;
|
|
25
|
+
trustedDomains?: Array<{
|
|
26
|
+
domain: string;
|
|
27
|
+
status: string;
|
|
28
|
+
isDefault?: boolean;
|
|
29
|
+
}>;
|
|
24
30
|
}
|
|
25
31
|
interface ThemeProviderProps {
|
|
26
32
|
theme: ThemeName;
|
|
@@ -61,3 +67,31 @@ export declare const useTypographyValue: (property: string) => string | undefine
|
|
|
61
67
|
export declare const useComponentVariant: (componentName: string, variantName?: string) => any;
|
|
62
68
|
export declare const useVariables: () => Variable[];
|
|
63
69
|
export declare const useVariable: (name: string) => any;
|
|
70
|
+
interface Asset {
|
|
71
|
+
name: string;
|
|
72
|
+
url: string;
|
|
73
|
+
file_type: string;
|
|
74
|
+
}
|
|
75
|
+
export declare const getAsset: (name: string) => Asset | undefined;
|
|
76
|
+
export declare const getAllAssets: () => Asset[];
|
|
77
|
+
export declare const getAssetValue: (name: string) => string | undefined;
|
|
78
|
+
export declare const getAssetType: (name: string) => string | undefined;
|
|
79
|
+
export declare const getAssetInfo: (name: string) => {
|
|
80
|
+
value: string;
|
|
81
|
+
type: string;
|
|
82
|
+
name: string;
|
|
83
|
+
} | undefined;
|
|
84
|
+
export declare const useAssets: () => Asset[];
|
|
85
|
+
export declare const useAsset: (name: string) => Asset | undefined;
|
|
86
|
+
export declare const useAssetValue: (name: string) => string | undefined;
|
|
87
|
+
export declare const useAssetType: (name: string) => string | undefined;
|
|
88
|
+
export declare const useAssetInfo: (name: string) => {
|
|
89
|
+
value: string;
|
|
90
|
+
type: string;
|
|
91
|
+
name: string;
|
|
92
|
+
} | undefined;
|
|
93
|
+
export declare const useAssetsByType: (type: string) => Asset[];
|
|
94
|
+
export declare const useImageAssets: () => Asset[];
|
|
95
|
+
export declare const useVideoAssets: () => Asset[];
|
|
96
|
+
export declare const useAudioAssets: () => Asset[];
|
|
97
|
+
export declare const useDocumentAssets: () => Asset[];
|