tabler-react-2 0.1.95 → 0.1.97
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/input/input.js +20 -4
- package/dist/provider/tabler.js +2 -2
- package/docs/package.json +1 -1
- package/docs/src/config/sidebar.yml +2 -0
- package/docs/src/docs/components/enclosed-select-group.mdx +145 -0
- package/docs/src/docs/components/input.mdx +26 -0
- package/docs/src/docs/components/select-group.mdx +0 -32
- package/package.json +1 -1
package/dist/input/input.js
CHANGED
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _spinner = require("../spinner");
|
|
11
11
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
12
|
-
var _excluded = ["type", "label", "placeholder", "value", "onChange", "onRawChange", "onInput", "icon", "iconPos", "loader", "separated", "prependedText", "appendedText", "appendedLinkText", "appendedLinkHref", "appendedLinkOnClick", "datalistItems", "variant", "size", "noMargin", "inputProps"];
|
|
12
|
+
var _excluded = ["type", "label", "placeholder", "value", "onChange", "onRawChange", "onInput", "icon", "iconPos", "loader", "separated", "prependedText", "appendedText", "appendedLinkText", "appendedLinkHref", "appendedLinkOnClick", "datalistItems", "variant", "size", "noMargin", "inputProps", "helpText", "helpTextPlacement", "helpPrompt", "required", "hint", "labelDescription"];
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -49,6 +49,12 @@ var Input = exports.Input = function Input(_ref) {
|
|
|
49
49
|
_ref$noMargin = _ref.noMargin,
|
|
50
50
|
noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
|
|
51
51
|
inputProps = _ref.inputProps,
|
|
52
|
+
helpText = _ref.helpText,
|
|
53
|
+
helpTextPlacement = _ref.helpTextPlacement,
|
|
54
|
+
helpPrompt = _ref.helpPrompt,
|
|
55
|
+
required = _ref.required,
|
|
56
|
+
hint = _ref.hint,
|
|
57
|
+
labelDescription = _ref.labelDescription,
|
|
52
58
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
53
59
|
// State for managing uncontrolled input value
|
|
54
60
|
var _useState = (0, _react.useState)(controlledValue),
|
|
@@ -92,8 +98,16 @@ var Input = exports.Input = function Input(_ref) {
|
|
|
92
98
|
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
93
99
|
className: "".concat(noMargin ? "" : "mb-3")
|
|
94
100
|
}, props), label && /*#__PURE__*/_react["default"].createElement("label", {
|
|
95
|
-
className: "form-label"
|
|
96
|
-
}, label
|
|
101
|
+
className: "form-label ".concat(required ? "required" : "")
|
|
102
|
+
}, label, helpText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, " ", /*#__PURE__*/_react["default"].createElement("span", {
|
|
103
|
+
"class": "form-help",
|
|
104
|
+
"data-bs-toggle": "popover",
|
|
105
|
+
"data-bs-placement": helpTextPlacement || "top",
|
|
106
|
+
"data-bs-html": "true",
|
|
107
|
+
"data-bs-content": helpText
|
|
108
|
+
}, helpPrompt || "?")), labelDescription && /*#__PURE__*/_react["default"].createElement("span", {
|
|
109
|
+
className: "form-label-description"
|
|
110
|
+
}, labelDescription)), separated ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
97
111
|
className: "row g-2"
|
|
98
112
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
99
113
|
className: "col"
|
|
@@ -145,7 +159,9 @@ var Input = exports.Input = function Input(_ref) {
|
|
|
145
159
|
key: index,
|
|
146
160
|
value: item
|
|
147
161
|
});
|
|
148
|
-
})))
|
|
162
|
+
}))), hint && /*#__PURE__*/_react["default"].createElement("div", {
|
|
163
|
+
className: "form-hint"
|
|
164
|
+
}, hint));
|
|
149
165
|
};
|
|
150
166
|
Input.propTypes = {
|
|
151
167
|
type: _propTypes["default"].string,
|
package/dist/provider/tabler.js
CHANGED
|
@@ -34,11 +34,11 @@ var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
|
|
|
34
34
|
fallbackAnchor = _ref3$fallbackAnchor === void 0 ? true : _ref3$fallbackAnchor;
|
|
35
35
|
(0, _react.useEffect)(function () {
|
|
36
36
|
var script1 = document.createElement("script");
|
|
37
|
-
script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.
|
|
37
|
+
script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.2.0/dist/js/tabler.min.js";
|
|
38
38
|
script1.async = true;
|
|
39
39
|
var link = document.createElement("link");
|
|
40
40
|
link.rel = "stylesheet";
|
|
41
|
-
link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.
|
|
41
|
+
link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.2.0/dist/css/tabler.min.css";
|
|
42
42
|
var script2 = document.createElement("script");
|
|
43
43
|
script2.textContent = "window.USE_FALLBACK_ANCHOR = ".concat(fallbackAnchor, ";");
|
|
44
44
|
document.head.appendChild(link);
|
package/docs/package.json
CHANGED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Enclosed Select Group
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { EnclosedSelectGroup } from "../../components/LoadableTabler.jsx";
|
|
6
|
+
import { Excerpt } from "../../components/Excerpt.jsx";
|
|
7
|
+
import { useState } from "react";
|
|
8
|
+
|
|
9
|
+
Enclosed Select Groups are used to mask radio and checkbox inputs in boxes with a label.
|
|
10
|
+
|
|
11
|
+
## Signature
|
|
12
|
+
|
|
13
|
+
export const ControlledEnclosedSelectGroup = (props) => {
|
|
14
|
+
const [value, setValue] = useState(props.value);
|
|
15
|
+
return (
|
|
16
|
+
<>
|
|
17
|
+
<EnclosedSelectGroup
|
|
18
|
+
{...props}
|
|
19
|
+
value={value}
|
|
20
|
+
onChange={(d) => {
|
|
21
|
+
setValue(d);
|
|
22
|
+
props.onChange && props.onChange(d);
|
|
23
|
+
}}
|
|
24
|
+
/>
|
|
25
|
+
</>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import { EnclosedSelectGroup } from "tabler-react-2";
|
|
31
|
+
|
|
32
|
+
<EnclosedSelectGroup
|
|
33
|
+
items={[
|
|
34
|
+
{ value: "one", label: <b>One</b> },
|
|
35
|
+
{ value: "two", label: "Two" },
|
|
36
|
+
{ value: "three", label: "Three" },
|
|
37
|
+
]}
|
|
38
|
+
value={null}
|
|
39
|
+
onChange={console.log}
|
|
40
|
+
/>;
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Props
|
|
44
|
+
|
|
45
|
+
| Prop | Required | Type | Default | Description |
|
|
46
|
+
| ----------- | -------- | -------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| `items` | Yes | Array of objects | | The items to be shown in the select group. Each item should have a `value` and `label` prop. |
|
|
48
|
+
| `value` | Yes | Object or Array of Objects if multiple | | The value of the select group. If the value is an array, multiple items can be selected. The value of each item should be the same as the `value` prop of the item. |
|
|
49
|
+
| `onChange` | Yes | Function | | The function to be called when the value of the select group changes. It is called with the new value as the argument, not the event. If the value is an array, the new value is an array of objects. The value of each item should be the same as the `value` prop of the item. |
|
|
50
|
+
| `multiple` | No | Boolean | | Whether multiple items can be selected. |
|
|
51
|
+
| `direction` | No | String | "row" | The direction of the items. Can be "row" or "column". |
|
|
52
|
+
|
|
53
|
+
## Basic Usage
|
|
54
|
+
|
|
55
|
+
The `EnclosedSelectGroup` component is used to mask radio and checkbox inputs in boxes with a label.
|
|
56
|
+
|
|
57
|
+
<Excerpt>
|
|
58
|
+
<ControlledEnclosedSelectGroup
|
|
59
|
+
items={[
|
|
60
|
+
{ value: "one", label: <u>One</u> },
|
|
61
|
+
{ value: "two", label: "Two" },
|
|
62
|
+
{ value: "three", label: "Three" },
|
|
63
|
+
]}
|
|
64
|
+
value={null}
|
|
65
|
+
onChange={console.log}
|
|
66
|
+
/>
|
|
67
|
+
</Excerpt>
|
|
68
|
+
|
|
69
|
+
```jsx
|
|
70
|
+
<EnclosedSelectGroup
|
|
71
|
+
items={[
|
|
72
|
+
{ value: "one", label: <u>One</u> },
|
|
73
|
+
{ value: "two", label: "Two" },
|
|
74
|
+
{ value: "three", label: "Three" },
|
|
75
|
+
]}
|
|
76
|
+
value={null}
|
|
77
|
+
onChange={console.log}
|
|
78
|
+
/>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Multiple Select
|
|
82
|
+
|
|
83
|
+
The `multiple` prop can be used to allow multiple items to be selected.
|
|
84
|
+
|
|
85
|
+
<Excerpt>
|
|
86
|
+
<ControlledEnclosedSelectGroup
|
|
87
|
+
items={[
|
|
88
|
+
{ value: "one", label: <u>One</u> },
|
|
89
|
+
{ value: "two", label: "Two" },
|
|
90
|
+
{ value: "three", label: "Three" },
|
|
91
|
+
]}
|
|
92
|
+
value={[{ value: "one" }]}
|
|
93
|
+
onChange={console.log}
|
|
94
|
+
multiple
|
|
95
|
+
/>
|
|
96
|
+
</Excerpt>
|
|
97
|
+
|
|
98
|
+
```jsx
|
|
99
|
+
<EnclosedSelectGroup
|
|
100
|
+
items={[
|
|
101
|
+
{ value: "one", label: <u>One</u> },
|
|
102
|
+
{ value: "two", label: "Two" },
|
|
103
|
+
{ value: "three", label: "Three" },
|
|
104
|
+
]}
|
|
105
|
+
value={[
|
|
106
|
+
{
|
|
107
|
+
value: "one",
|
|
108
|
+
},
|
|
109
|
+
]}
|
|
110
|
+
onChange={console.log}
|
|
111
|
+
multiple
|
|
112
|
+
/>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Direction
|
|
116
|
+
|
|
117
|
+
The `direction` prop can be used to change the direction of the items.
|
|
118
|
+
|
|
119
|
+
<Excerpt>
|
|
120
|
+
<ControlledEnclosedSelectGroup
|
|
121
|
+
items={[
|
|
122
|
+
{ value: "one", label: <u>One</u> },
|
|
123
|
+
{ value: "two", label: "Two" },
|
|
124
|
+
{ value: "three", label: "Three" },
|
|
125
|
+
]}
|
|
126
|
+
value={[]}
|
|
127
|
+
onChange={console.log}
|
|
128
|
+
direction="column"
|
|
129
|
+
multiple
|
|
130
|
+
/>
|
|
131
|
+
</Excerpt>
|
|
132
|
+
|
|
133
|
+
```jsx
|
|
134
|
+
<EnclosedSelectGroup
|
|
135
|
+
items={[
|
|
136
|
+
{ value: "one", label: <u>One</u> },
|
|
137
|
+
{ value: "two", label: "Two" },
|
|
138
|
+
{ value: "three", label: "Three" },
|
|
139
|
+
]}
|
|
140
|
+
value={[]}
|
|
141
|
+
onChange={console.log}
|
|
142
|
+
direction="column"
|
|
143
|
+
multiple
|
|
144
|
+
/>
|
|
145
|
+
```
|
|
@@ -40,6 +40,12 @@ import { Input } from "tabler-react-2";
|
|
|
40
40
|
| `variant` | No | [color](/utilities/colors) | | The color variant of the button. |
|
|
41
41
|
| `size` | No | [`sm`, `md`, `lg`] | `md` | The size of the button. |
|
|
42
42
|
| `inputProps` | No | Object | | The props to be passed to the input. |
|
|
43
|
+
| `helpText` | No | String | | The help text to be shown below the label. |
|
|
44
|
+
| `helpTextPlacement` | No | String | `top` | The placement of the help text. |
|
|
45
|
+
| `helpPrompt` | No | String | `?` | The prompt to be shown in the field's label. |
|
|
46
|
+
| `required` | No | Boolean | | Whether the input is required. |
|
|
47
|
+
| `hint` | No | String | | The hint to be shown below the input. |
|
|
48
|
+
| `labelDescription` | No | String | | The description to be shown to the right of the label. |
|
|
43
49
|
|
|
44
50
|
## Basic Usage
|
|
45
51
|
|
|
@@ -428,3 +434,23 @@ You can supply a list of items to the `datalistItems` prop to show a datalist. T
|
|
|
428
434
|
```
|
|
429
435
|
|
|
430
436
|
This is different than a DropdownInput because the datalist is not exclusive, meaning the user can use a value that is not in the list.
|
|
437
|
+
|
|
438
|
+
## Help Text
|
|
439
|
+
|
|
440
|
+
You can supply a `helpText` prop to the `Input` component to show a help text below the label.
|
|
441
|
+
|
|
442
|
+
<Excerpt>
|
|
443
|
+
<Input
|
|
444
|
+
label="Input"
|
|
445
|
+
placeholder="Type here..."
|
|
446
|
+
helpText="This is some help text"
|
|
447
|
+
/>
|
|
448
|
+
</Excerpt>
|
|
449
|
+
|
|
450
|
+
```jsx
|
|
451
|
+
<Input
|
|
452
|
+
label="Input"
|
|
453
|
+
placeholder="Type here..."
|
|
454
|
+
helpText="This is some help text"
|
|
455
|
+
/>
|
|
456
|
+
```
|
|
@@ -29,22 +29,6 @@ export const ControlledSelectGroup = (props) => {
|
|
|
29
29
|
);
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
-
export const ControlledEnclosedSelectGroup = (props) => {
|
|
33
|
-
const [value, setValue] = useState(props.value);
|
|
34
|
-
return (
|
|
35
|
-
<>
|
|
36
|
-
<EnclosedSelectGroup
|
|
37
|
-
{...props}
|
|
38
|
-
value={value}
|
|
39
|
-
onChange={(d) => {
|
|
40
|
-
setValue(d);
|
|
41
|
-
props.onChange && props.onChange(d);
|
|
42
|
-
}}
|
|
43
|
-
/>
|
|
44
|
-
</>
|
|
45
|
-
);
|
|
46
|
-
};
|
|
47
|
-
|
|
48
32
|
```jsx
|
|
49
33
|
import { SelectGroup } from "tabler-react-2";
|
|
50
34
|
|
|
@@ -119,19 +103,3 @@ The `multiple` prop can be used to allow multiple items to be selected.
|
|
|
119
103
|
multiple
|
|
120
104
|
/>
|
|
121
105
|
```
|
|
122
|
-
|
|
123
|
-
## Enclosed Select Group
|
|
124
|
-
|
|
125
|
-
The `EnclosedSelectGroup` component is used to mask radio and checkbox inputs in boxes with a label.
|
|
126
|
-
|
|
127
|
-
<Excerpt>
|
|
128
|
-
<ControlledEnclosedSelectGroup
|
|
129
|
-
items={[
|
|
130
|
-
{ value: "one", content: <b>One</b> },
|
|
131
|
-
{ value: "two", content: "Two" },
|
|
132
|
-
{ value: "three", content: "Three" },
|
|
133
|
-
]}
|
|
134
|
-
value={null}
|
|
135
|
-
onChange={console.log}
|
|
136
|
-
/>
|
|
137
|
-
</Excerpt>
|