tabler-react-2 0.1.77 → 0.1.78
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/dist/breadcrumb/index.js +2 -1
- package/dist/button/index.js +2 -1
- package/dist/util/flex.js +6 -3
- package/docs/package.json +1 -2
- package/docs/src/components/Tabler.jsx +29 -27
- package/docs/src/docs/components/alerts.mdx +0 -19
- package/docs/src/docs/components/badges.mdx +159 -1
- package/package.json +1 -1
package/dist/breadcrumb/index.js
CHANGED
|
@@ -9,11 +9,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
9
9
|
var _reactRouterDom = require("react-router-dom");
|
|
10
10
|
var _excluded = ["children"],
|
|
11
11
|
_excluded2 = ["children", "href", "active"];
|
|
12
|
+
var _window;
|
|
12
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
14
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
15
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
15
16
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
16
|
-
var ElementToRender = window.USE_FALLBACK_ANCHOR ? "a" : _reactRouterDom.Link;
|
|
17
|
+
var ElementToRender = (_window = window) !== null && _window !== void 0 && _window.USE_FALLBACK_ANCHOR ? "a" : _reactRouterDom.Link;
|
|
17
18
|
var Breadcrumb = exports.Breadcrumb = function Breadcrumb(_ref) {
|
|
18
19
|
var children = _ref.children,
|
|
19
20
|
props = _objectWithoutProperties(_ref, _excluded);
|
package/dist/button/index.js
CHANGED
|
@@ -19,6 +19,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
19
19
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
20
20
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
21
21
|
var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
22
|
+
var _window;
|
|
22
23
|
var children = _ref.children,
|
|
23
24
|
href = _ref.href,
|
|
24
25
|
onClick = _ref.onClick,
|
|
@@ -35,7 +36,7 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
|
|
|
35
36
|
className = _ref.className,
|
|
36
37
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
37
38
|
var classes = (0, _classnames["default"])("btn", "btn-".concat(size), _defineProperty({}, "btn-".concat(outline ? "outline-" : "").concat(ghost ? "ghost-" : "").concat(color || variant || fill && "primary"), fill || color || variant), square && "btn-square", pill && "btn-pill", className === null || className === void 0 ? void 0 : className.split(" "));
|
|
38
|
-
var ElementToRender = window.USE_FALLBACK_ANCHOR ? "a" : _reactRouterDom.Link;
|
|
39
|
+
var ElementToRender = (_window = window) !== null && _window !== void 0 && _window.USE_FALLBACK_ANCHOR ? "a" : _reactRouterDom.Link;
|
|
39
40
|
if (href) {
|
|
40
41
|
return /*#__PURE__*/_react["default"].createElement(ElementToRender, _extends({
|
|
41
42
|
ref: ref,
|
package/dist/util/flex.js
CHANGED
|
@@ -116,8 +116,10 @@ var Responsive = exports.Responsive = function Responsive(_ref3) {
|
|
|
116
116
|
direction = _useState2[0],
|
|
117
117
|
setDirection = _useState2[1];
|
|
118
118
|
(0, _react.useEffect)(function () {
|
|
119
|
+
var _window2;
|
|
119
120
|
var handleResize = function handleResize() {
|
|
120
|
-
|
|
121
|
+
var _window;
|
|
122
|
+
if (((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) <= threshold) {
|
|
121
123
|
setDirection(defaultDirection === "row" ? "column" : "row");
|
|
122
124
|
} else {
|
|
123
125
|
setDirection(defaultDirection);
|
|
@@ -128,11 +130,12 @@ var Responsive = exports.Responsive = function Responsive(_ref3) {
|
|
|
128
130
|
handleResize();
|
|
129
131
|
|
|
130
132
|
// Add event listener for window resize
|
|
131
|
-
window.addEventListener("resize", handleResize);
|
|
133
|
+
(_window2 = window) === null || _window2 === void 0 || _window2.addEventListener("resize", handleResize);
|
|
132
134
|
|
|
133
135
|
// Cleanup the event listener on component unmount
|
|
134
136
|
return function () {
|
|
135
|
-
|
|
137
|
+
var _window3;
|
|
138
|
+
return (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.removeEventListener("resize", handleResize);
|
|
136
139
|
};
|
|
137
140
|
}, [threshold, defaultDirection]);
|
|
138
141
|
return /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {
|
package/docs/package.json
CHANGED
|
@@ -8,33 +8,35 @@ export const Tabler = ({ children }) => {
|
|
|
8
8
|
|
|
9
9
|
useEffect(() => {
|
|
10
10
|
if (containerRef.current && !shadowRef.current) {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
11
|
+
if (typeof window !== "undefined") {
|
|
12
|
+
shadowRef.current = containerRef.current.attachShadow({ mode: "open" });
|
|
13
|
+
|
|
14
|
+
// Load local Tabler styles
|
|
15
|
+
const styleLink = document.createElement("link");
|
|
16
|
+
styleLink.rel = "stylesheet";
|
|
17
|
+
styleLink.href = "/tabler.replaced.css"; // Ensure the path is correct
|
|
18
|
+
|
|
19
|
+
// Create a wrapper div for children
|
|
20
|
+
const wrapperDiv = document.createElement("div");
|
|
21
|
+
wrapperDiv.style.display = "inline-block";
|
|
22
|
+
wrapperDiv.style.width = "auto";
|
|
23
|
+
wrapperDiv.style.height = "auto";
|
|
24
|
+
|
|
25
|
+
// Inject Tabler scripts
|
|
26
|
+
const script = document.createElement("script");
|
|
27
|
+
script.src =
|
|
28
|
+
"https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js";
|
|
29
|
+
|
|
30
|
+
const inlineScript = document.createElement("script");
|
|
31
|
+
inlineScript.textContent = "window?.USE_FALLBACK_ANCHOR = true;";
|
|
32
|
+
|
|
33
|
+
shadowRef.current.appendChild(styleLink);
|
|
34
|
+
shadowRef.current.appendChild(wrapperDiv);
|
|
35
|
+
shadowRef.current.appendChild(script);
|
|
36
|
+
shadowRef.current.appendChild(inlineScript);
|
|
37
|
+
|
|
38
|
+
setWrapper(wrapperDiv);
|
|
39
|
+
}
|
|
38
40
|
}
|
|
39
41
|
}, []);
|
|
40
42
|
|
|
@@ -4,7 +4,6 @@ title: Alerts
|
|
|
4
4
|
|
|
5
5
|
import { Alert } from "tabler-react-2";
|
|
6
6
|
import { Excerpt } from "../../components/Excerpt.jsx";
|
|
7
|
-
import { IconAlertCircle } from "tabler-icons";
|
|
8
7
|
|
|
9
8
|
Alerts are used to display important messages to the user. Not to be confused with toasts.
|
|
10
9
|
|
|
@@ -104,21 +103,3 @@ You can pass an `onDismiss` prop to the `Alert` component to display a close but
|
|
|
104
103
|
```
|
|
105
104
|
|
|
106
105
|
> **Note**: The alert component does not manage its own state. If you want the alert to go away when the user clicks the close button, you must unmount it yourself.
|
|
107
|
-
|
|
108
|
-
## Icons
|
|
109
|
-
|
|
110
|
-
You can pass an `icon` prop to the `Alert` component to display an icon in the alert.
|
|
111
|
-
|
|
112
|
-
<Excerpt>
|
|
113
|
-
<Alert title="Alert with icon" icon={<IconAlertCircle />}>
|
|
114
|
-
An alert with an icon.
|
|
115
|
-
</Alert>
|
|
116
|
-
</Excerpt>
|
|
117
|
-
|
|
118
|
-
```jsx
|
|
119
|
-
<Alert title="Alert with icon" icon={<IconAlertCircle />}>
|
|
120
|
-
An alert with an icon.
|
|
121
|
-
</Alert>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
I recommend using [tabler icons](https://tabler.io/icons) for icons
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
title: Badges
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
import Badge from "tabler-react-2
|
|
5
|
+
import { Badge } from "tabler-react-2";
|
|
6
6
|
import { Excerpt } from "../../components/Excerpt.jsx";
|
|
7
7
|
|
|
8
8
|
Badges are used to display a small label.
|
|
@@ -30,3 +30,161 @@ The `Badge` component is used to display a badge.
|
|
|
30
30
|
<Excerpt>
|
|
31
31
|
<Badge>Badge</Badge>
|
|
32
32
|
</Excerpt>
|
|
33
|
+
|
|
34
|
+
```jsx
|
|
35
|
+
<Badge>Badge</Badge>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Colors
|
|
39
|
+
|
|
40
|
+
Badges can be colored using the `color` prop. The `color` prop accepts a string value of any [color](/utilities/colors).
|
|
41
|
+
|
|
42
|
+
<Excerpt>
|
|
43
|
+
<div
|
|
44
|
+
style={{
|
|
45
|
+
display: "flex",
|
|
46
|
+
flexDirection: "row",
|
|
47
|
+
gap: 10,
|
|
48
|
+
flexWrap: "wrap",
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
}}
|
|
51
|
+
>
|
|
52
|
+
{[
|
|
53
|
+
"primary",
|
|
54
|
+
"secondary",
|
|
55
|
+
"success",
|
|
56
|
+
"danger",
|
|
57
|
+
"warning",
|
|
58
|
+
"info",
|
|
59
|
+
"dark",
|
|
60
|
+
"blue",
|
|
61
|
+
"azure",
|
|
62
|
+
"indigo",
|
|
63
|
+
"purple",
|
|
64
|
+
"pink",
|
|
65
|
+
"red",
|
|
66
|
+
"orange",
|
|
67
|
+
"yellow",
|
|
68
|
+
"lime",
|
|
69
|
+
"green",
|
|
70
|
+
"teal",
|
|
71
|
+
"cyan",
|
|
72
|
+
].map((color) => (
|
|
73
|
+
<Badge key={color} color={color}>
|
|
74
|
+
{color}
|
|
75
|
+
</Badge>
|
|
76
|
+
))}
|
|
77
|
+
</div>
|
|
78
|
+
</Excerpt>
|
|
79
|
+
|
|
80
|
+
```jsx
|
|
81
|
+
<Badge color="primary">primary</Badge>
|
|
82
|
+
<Badge color="secondary">secondary</Badge>
|
|
83
|
+
<Badge color="success">success</Badge>
|
|
84
|
+
<Badge color="danger">danger</Badge>
|
|
85
|
+
<Badge color="warning">warning</Badge>
|
|
86
|
+
<Badge color="info">info</Badge>
|
|
87
|
+
<Badge color="dark">dark</Badge>
|
|
88
|
+
<Badge color="blue">blue</Badge>
|
|
89
|
+
<Badge color="azure">azure</Badge>
|
|
90
|
+
<Badge color="indigo">indigo</Badge>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Outline
|
|
94
|
+
|
|
95
|
+
Badges can be outlined using the `outline` prop. The `outline` prop accepts a boolean value.
|
|
96
|
+
|
|
97
|
+
<Excerpt>
|
|
98
|
+
<div
|
|
99
|
+
style={{
|
|
100
|
+
display: "flex",
|
|
101
|
+
flexDirection: "row",
|
|
102
|
+
gap: 10,
|
|
103
|
+
flexWrap: "wrap",
|
|
104
|
+
alignItems: "center",
|
|
105
|
+
}}
|
|
106
|
+
>
|
|
107
|
+
{["primary", "secondary", "success", "danger", "warning", "info"].map(
|
|
108
|
+
(color) => (
|
|
109
|
+
<Badge key={color} color={color} outline>
|
|
110
|
+
{color}
|
|
111
|
+
</Badge>
|
|
112
|
+
)
|
|
113
|
+
)}
|
|
114
|
+
</div>
|
|
115
|
+
</Excerpt>
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
<Badge color="primary" outline>primary</Badge>
|
|
119
|
+
<Badge color="secondary" outline>secondary</Badge>
|
|
120
|
+
<Badge color="success" outline>success</Badge>
|
|
121
|
+
<Badge color="danger" outline>danger</Badge>
|
|
122
|
+
<Badge color="warning" outline>warning</Badge>
|
|
123
|
+
<Badge color="info" outline>info</Badge>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Soft
|
|
127
|
+
|
|
128
|
+
Badges can be soft using the `soft` prop. The `soft` prop accepts a boolean value.
|
|
129
|
+
|
|
130
|
+
<Excerpt>
|
|
131
|
+
<div
|
|
132
|
+
style={{
|
|
133
|
+
display: "flex",
|
|
134
|
+
flexDirection: "row",
|
|
135
|
+
gap: 10,
|
|
136
|
+
flexWrap: "wrap",
|
|
137
|
+
alignItems: "center",
|
|
138
|
+
}}
|
|
139
|
+
>
|
|
140
|
+
{["primary", "secondary", "success", "danger", "warning", "info"].map(
|
|
141
|
+
(color) => (
|
|
142
|
+
<Badge key={color} color={color} soft>
|
|
143
|
+
{color}
|
|
144
|
+
</Badge>
|
|
145
|
+
)
|
|
146
|
+
)}
|
|
147
|
+
</div>
|
|
148
|
+
</Excerpt>
|
|
149
|
+
|
|
150
|
+
```jsx
|
|
151
|
+
<Badge color="primary" soft>primary</Badge>
|
|
152
|
+
<Badge color="secondary" soft>secondary</Badge>
|
|
153
|
+
<Badge color="success" soft>success</Badge>
|
|
154
|
+
<Badge color="danger" soft>danger</Badge>
|
|
155
|
+
<Badge color="warning" soft>warning</Badge>
|
|
156
|
+
<Badge color="info" soft>info</Badge>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
## Soft + Outline
|
|
160
|
+
|
|
161
|
+
Badges can be soft and outlined using the `soft` and `outline` props. The `soft` and `outline` props accept a boolean value.
|
|
162
|
+
|
|
163
|
+
<Excerpt>
|
|
164
|
+
<div
|
|
165
|
+
style={{
|
|
166
|
+
display: "flex",
|
|
167
|
+
flexDirection: "row",
|
|
168
|
+
gap: 10,
|
|
169
|
+
flexWrap: "wrap",
|
|
170
|
+
alignItems: "center",
|
|
171
|
+
}}
|
|
172
|
+
>
|
|
173
|
+
{["primary", "secondary", "success", "danger", "warning", "info"].map(
|
|
174
|
+
(color) => (
|
|
175
|
+
<Badge key={color} color={color} soft outline>
|
|
176
|
+
{color}
|
|
177
|
+
</Badge>
|
|
178
|
+
)
|
|
179
|
+
)}
|
|
180
|
+
</div>
|
|
181
|
+
</Excerpt>
|
|
182
|
+
|
|
183
|
+
```jsx
|
|
184
|
+
<Badge color="primary" soft outline>primary</Badge>
|
|
185
|
+
<Badge color="secondary" soft outline>secondary</Badge>
|
|
186
|
+
<Badge color="success" soft outline>success</Badge>
|
|
187
|
+
<Badge color="danger" soft outline>danger</Badge>
|
|
188
|
+
<Badge color="warning" soft outline>warning</Badge>
|
|
189
|
+
<Badge color="info" soft outline>info</Badge>
|
|
190
|
+
```
|