@ncds/ui-admin 0.0.22 → 0.0.23
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/cjs/assets/scripts/index.js +11 -0
- package/dist/cjs/assets/scripts/slider.js +341 -0
- package/dist/cjs/index.js +0 -33
- package/dist/cjs/src/components/button/Button.js +15 -7
- package/dist/cjs/src/components/button/ButtonGroup.js +1 -1
- package/dist/cjs/src/components/date-picker/index.js +0 -11
- package/dist/cjs/src/components/divider/Divider.js +43 -0
- package/dist/cjs/src/components/divider/index.js +16 -0
- package/dist/cjs/src/components/empty-state/EmptyState.js +58 -0
- package/dist/cjs/src/components/empty-state/index.js +16 -0
- package/dist/cjs/src/components/featured-icon/FeaturedIcon.js +79 -0
- package/dist/cjs/src/components/featured-icon/index.js +16 -0
- package/dist/cjs/src/components/index.js +81 -4
- package/dist/cjs/src/components/modal/Modal.js +193 -0
- package/dist/cjs/src/components/modal/index.js +12 -0
- package/dist/cjs/src/components/notification/FloatingNotification.js +104 -0
- package/dist/cjs/src/components/notification/FullWidthNotification.js +112 -0
- package/dist/cjs/src/components/notification/Notification.js +66 -0
- package/dist/cjs/src/components/notification/index.js +38 -0
- package/dist/cjs/src/components/pagination/NavButton.js +6 -4
- package/dist/cjs/src/components/pagination/Pagination.js +4 -19
- package/dist/cjs/src/components/progress-bar/ProgressBar.js +57 -0
- package/dist/cjs/src/components/progress-bar/index.js +16 -0
- package/dist/cjs/src/components/progress-circle/ProgressCircle.js +121 -0
- package/dist/cjs/src/components/progress-circle/index.js +16 -0
- package/dist/cjs/src/components/slider/Slider.js +64 -0
- package/dist/cjs/src/components/slider/index.js +16 -0
- package/dist/cjs/src/components/tab/HorizontalTab.js +77 -0
- package/dist/cjs/src/components/tab/TabButton.js +76 -0
- package/dist/cjs/src/components/tab/VerticalTab.js +75 -0
- package/dist/cjs/src/components/tab/index.js +38 -0
- package/dist/esm/assets/scripts/index.js +2 -1
- package/dist/esm/assets/scripts/slider.js +336 -0
- package/dist/esm/index.js +0 -3
- package/dist/esm/src/components/button/Button.js +14 -6
- package/dist/esm/src/components/button/ButtonGroup.js +1 -1
- package/dist/esm/src/components/date-picker/index.js +1 -2
- package/dist/esm/src/components/divider/Divider.js +36 -0
- package/dist/esm/src/components/divider/index.js +1 -0
- package/dist/esm/src/components/empty-state/EmptyState.js +51 -0
- package/dist/esm/src/components/empty-state/index.js +1 -0
- package/dist/esm/src/components/featured-icon/FeaturedIcon.js +72 -0
- package/dist/esm/src/components/featured-icon/index.js +1 -0
- package/dist/esm/src/components/index.js +8 -1
- package/dist/esm/src/components/modal/Modal.js +185 -0
- package/dist/esm/src/components/modal/index.js +1 -0
- package/dist/esm/src/components/notification/FloatingNotification.js +97 -0
- package/dist/esm/src/components/notification/FullWidthNotification.js +105 -0
- package/dist/esm/src/components/notification/Notification.js +59 -0
- package/dist/esm/src/components/notification/index.js +3 -0
- package/dist/esm/src/components/pagination/NavButton.js +6 -4
- package/dist/esm/src/components/pagination/Pagination.js +4 -19
- package/dist/esm/src/components/progress-bar/ProgressBar.js +50 -0
- package/dist/esm/src/components/progress-bar/index.js +1 -0
- package/dist/esm/src/components/progress-circle/ProgressCircle.js +114 -0
- package/dist/esm/src/components/progress-circle/index.js +1 -0
- package/dist/esm/src/components/slider/Slider.js +57 -0
- package/dist/esm/src/components/slider/index.js +1 -0
- package/dist/esm/src/components/tab/HorizontalTab.js +69 -0
- package/dist/esm/src/components/tab/TabButton.js +68 -0
- package/dist/esm/src/components/tab/VerticalTab.js +67 -0
- package/dist/esm/src/components/tab/index.js +3 -0
- package/dist/types/assets/scripts/index.d.ts +1 -0
- package/dist/types/assets/scripts/slider.d.ts +42 -0
- package/dist/types/index.d.ts +0 -3
- package/dist/types/src/components/button/Button.d.ts +2 -1
- package/dist/types/src/components/button/ButtonGroup.d.ts +6 -5
- package/dist/types/src/components/date-picker/index.d.ts +0 -1
- package/dist/types/src/components/divider/Divider.d.ts +11 -0
- package/dist/types/src/components/divider/index.d.ts +2 -0
- package/dist/types/src/components/empty-state/EmptyState.d.ts +14 -0
- package/dist/types/src/components/empty-state/index.d.ts +2 -0
- package/dist/types/src/components/featured-icon/FeaturedIcon.d.ts +14 -0
- package/dist/types/src/components/featured-icon/index.d.ts +2 -0
- package/dist/types/src/components/index.d.ts +8 -1
- package/dist/types/src/components/modal/Modal.d.ts +75 -0
- package/dist/types/src/components/modal/index.d.ts +3 -0
- package/dist/types/src/components/notification/FloatingNotification.d.ts +32 -0
- package/dist/types/src/components/notification/FullWidthNotification.d.ts +32 -0
- package/dist/types/src/components/notification/Notification.d.ts +59 -0
- package/dist/types/src/components/notification/index.d.ts +4 -0
- package/dist/types/src/components/pagination/NavButton.d.ts +2 -2
- package/dist/types/src/components/progress-bar/ProgressBar.d.ts +7 -0
- package/dist/types/src/components/progress-bar/index.d.ts +2 -0
- package/dist/types/src/components/progress-circle/ProgressCircle.d.ts +8 -0
- package/dist/types/src/components/progress-circle/index.d.ts +2 -0
- package/dist/types/src/components/slider/Slider.d.ts +15 -0
- package/dist/types/src/components/slider/index.d.ts +2 -0
- package/dist/types/src/components/tab/HorizontalTab.d.ts +12 -0
- package/dist/types/src/components/tab/TabButton.d.ts +26 -0
- package/dist/types/src/components/tab/VerticalTab.d.ts +10 -0
- package/dist/types/src/components/tab/index.d.ts +4 -0
- package/dist/ui-admin/assets/styles/style.css +1249 -97
- package/package.json +1 -1
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
6
|
+
}
|
|
7
|
+
return t;
|
|
8
|
+
};
|
|
9
|
+
return __assign.apply(this, arguments);
|
|
10
|
+
};
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
export var ProgressBar = function (_a) {
|
|
13
|
+
var label = _a.label,
|
|
14
|
+
value = _a.value;
|
|
15
|
+
var limitedValue = Math.min(Math.max(0, value), 100);
|
|
16
|
+
var displayValue = "".concat(limitedValue.toFixed(0), "%");
|
|
17
|
+
var progressValueStyle = label === 'top-float' || label === 'bottom-float' ? {
|
|
18
|
+
'--progress-value': "".concat(limitedValue, "%")
|
|
19
|
+
} : undefined;
|
|
20
|
+
var renderLabel = function (labelType) {
|
|
21
|
+
return _jsx("span", __assign({
|
|
22
|
+
className: "ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType)
|
|
23
|
+
}, {
|
|
24
|
+
children: displayValue
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
27
|
+
var isFloatingLabel = label === 'top-float' || label === 'bottom-float';
|
|
28
|
+
return _jsxs("div", __assign({
|
|
29
|
+
className: "ncua-progress-bar ncua-progress-bar-".concat(label),
|
|
30
|
+
style: progressValueStyle
|
|
31
|
+
}, {
|
|
32
|
+
children: [isFloatingLabel && renderLabel(label), _jsxs("div", __assign({
|
|
33
|
+
className: "ncua-progress-bar__content"
|
|
34
|
+
}, {
|
|
35
|
+
children: [_jsx("div", __assign({
|
|
36
|
+
className: "ncua-progress-bar__bar"
|
|
37
|
+
}, {
|
|
38
|
+
children: _jsx("div", {
|
|
39
|
+
className: "ncua-progress-bar__fill",
|
|
40
|
+
style: {
|
|
41
|
+
width: "".concat(limitedValue, "%")
|
|
42
|
+
},
|
|
43
|
+
"aria-valuenow": limitedValue,
|
|
44
|
+
"aria-valuemin": 0,
|
|
45
|
+
"aria-valuemax": 100
|
|
46
|
+
})
|
|
47
|
+
})), label === 'right' && renderLabel('right')]
|
|
48
|
+
})), label === 'bottom' && renderLabel('bottom')]
|
|
49
|
+
}));
|
|
50
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ProgressBar';
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
6
|
+
}
|
|
7
|
+
return t;
|
|
8
|
+
};
|
|
9
|
+
return __assign.apply(this, arguments);
|
|
10
|
+
};
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
export var ProgressCircle = function (_a) {
|
|
13
|
+
var size = _a.size,
|
|
14
|
+
label = _a.label,
|
|
15
|
+
value = _a.value,
|
|
16
|
+
_b = _a.theme,
|
|
17
|
+
theme = _b === void 0 ? 'circle' : _b;
|
|
18
|
+
var limitedValue = Math.min(Math.max(0, value), 100);
|
|
19
|
+
if (theme === 'circle') {
|
|
20
|
+
return _jsxs("div", __assign({
|
|
21
|
+
className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme)
|
|
22
|
+
}, {
|
|
23
|
+
children: [_jsxs("div", __assign({
|
|
24
|
+
className: "ncua-progress-circle__content"
|
|
25
|
+
}, {
|
|
26
|
+
children: [_jsxs("svg", __assign({
|
|
27
|
+
className: "ncua-progress-circle__svg",
|
|
28
|
+
viewBox: "0 0 100 100"
|
|
29
|
+
}, {
|
|
30
|
+
children: [_jsx("circle", {
|
|
31
|
+
className: "ncua-progress-circle__background",
|
|
32
|
+
cx: "50",
|
|
33
|
+
cy: "50",
|
|
34
|
+
r: "45",
|
|
35
|
+
strokeWidth: "10",
|
|
36
|
+
fill: "none"
|
|
37
|
+
}), _jsx("circle", {
|
|
38
|
+
className: "ncua-progress-circle__progress",
|
|
39
|
+
cx: "50",
|
|
40
|
+
cy: "50",
|
|
41
|
+
r: "45",
|
|
42
|
+
strokeWidth: "10",
|
|
43
|
+
fill: "none",
|
|
44
|
+
strokeDasharray: "var(--circle-circumference)",
|
|
45
|
+
strokeDashoffset: "calc(var(--circle-circumference) * (1 - ".concat(limitedValue, " / 100))"),
|
|
46
|
+
transform: "rotate(-90 50 50)",
|
|
47
|
+
strokeLinecap: "round"
|
|
48
|
+
})]
|
|
49
|
+
})), _jsxs("div", __assign({
|
|
50
|
+
className: "ncua-progress-circle__label-container"
|
|
51
|
+
}, {
|
|
52
|
+
children: [size !== 'xxs' && label && _jsx("div", __assign({
|
|
53
|
+
className: "ncua-progress-circle__label-text"
|
|
54
|
+
}, {
|
|
55
|
+
children: label
|
|
56
|
+
})), _jsx("div", __assign({
|
|
57
|
+
className: "ncua-progress-circle__label"
|
|
58
|
+
}, {
|
|
59
|
+
children: "".concat(limitedValue, "%")
|
|
60
|
+
}))]
|
|
61
|
+
}))]
|
|
62
|
+
})), size === 'xxs' && label && _jsx("div", __assign({
|
|
63
|
+
className: "ncua-progress-circle__outside-label"
|
|
64
|
+
}, {
|
|
65
|
+
children: label
|
|
66
|
+
}))]
|
|
67
|
+
}));
|
|
68
|
+
} else {
|
|
69
|
+
return _jsxs("div", __assign({
|
|
70
|
+
className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme)
|
|
71
|
+
}, {
|
|
72
|
+
children: [_jsxs("div", __assign({
|
|
73
|
+
className: "ncua-progress-circle__content"
|
|
74
|
+
}, {
|
|
75
|
+
children: [_jsxs("svg", __assign({
|
|
76
|
+
className: "ncua-progress-circle__svg",
|
|
77
|
+
viewBox: "0 0 100 50"
|
|
78
|
+
}, {
|
|
79
|
+
children: [_jsx("path", {
|
|
80
|
+
className: "ncua-progress-circle__background",
|
|
81
|
+
d: "M 5 50 A 45 45 0 0 1 95 50",
|
|
82
|
+
strokeWidth: "10",
|
|
83
|
+
fill: "none",
|
|
84
|
+
strokeLinecap: "round"
|
|
85
|
+
}), _jsx("path", {
|
|
86
|
+
className: "ncua-progress-circle__progress",
|
|
87
|
+
d: "M 5 50 A 45 45 0 0 1 95 50",
|
|
88
|
+
strokeWidth: "10",
|
|
89
|
+
fill: "none",
|
|
90
|
+
strokeDasharray: "var(--half-circle-circumference)",
|
|
91
|
+
strokeDashoffset: "calc(var(--half-circle-circumference) * (1 - ".concat(limitedValue, " / 100))"),
|
|
92
|
+
strokeLinecap: "round"
|
|
93
|
+
})]
|
|
94
|
+
})), _jsxs("div", __assign({
|
|
95
|
+
className: "ncua-progress-circle__label-container"
|
|
96
|
+
}, {
|
|
97
|
+
children: [size !== 'xxs' && label && _jsx("div", __assign({
|
|
98
|
+
className: "ncua-progress-circle__label-text"
|
|
99
|
+
}, {
|
|
100
|
+
children: label
|
|
101
|
+
})), _jsx("div", __assign({
|
|
102
|
+
className: "ncua-progress-circle__label"
|
|
103
|
+
}, {
|
|
104
|
+
children: "".concat(limitedValue, "%")
|
|
105
|
+
}))]
|
|
106
|
+
}))]
|
|
107
|
+
})), size === 'xxs' && label && _jsx("div", __assign({
|
|
108
|
+
className: "ncua-progress-circle__outside-label"
|
|
109
|
+
}, {
|
|
110
|
+
children: label
|
|
111
|
+
}))]
|
|
112
|
+
}));
|
|
113
|
+
}
|
|
114
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ProgressCircle';
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef } from 'react';
|
|
3
|
+
import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
|
|
4
|
+
export var Slider = function (_a) {
|
|
5
|
+
var _b = _a.min,
|
|
6
|
+
min = _b === void 0 ? 0 : _b,
|
|
7
|
+
_c = _a.max,
|
|
8
|
+
max = _c === void 0 ? 100 : _c,
|
|
9
|
+
_d = _a.step,
|
|
10
|
+
step = _d === void 0 ? 1 : _d,
|
|
11
|
+
_e = _a.value,
|
|
12
|
+
value = _e === void 0 ? 0 : _e,
|
|
13
|
+
onChange = _a.onChange,
|
|
14
|
+
labelPosition = _a.labelPosition,
|
|
15
|
+
_f = _a.disabled,
|
|
16
|
+
disabled = _f === void 0 ? false : _f,
|
|
17
|
+
className = _a.className;
|
|
18
|
+
var containerRef = useRef(null);
|
|
19
|
+
var sliderInstanceRef = useRef(null);
|
|
20
|
+
useEffect(function () {
|
|
21
|
+
if (!containerRef.current) return;
|
|
22
|
+
sliderInstanceRef.current = new NcuaSlider(containerRef.current, {
|
|
23
|
+
min: min,
|
|
24
|
+
max: max,
|
|
25
|
+
step: step,
|
|
26
|
+
value: value,
|
|
27
|
+
onChange: onChange,
|
|
28
|
+
labelPosition: labelPosition,
|
|
29
|
+
disabled: disabled
|
|
30
|
+
});
|
|
31
|
+
return function () {
|
|
32
|
+
if (sliderInstanceRef.current) {
|
|
33
|
+
sliderInstanceRef.current.destroy();
|
|
34
|
+
sliderInstanceRef.current = null;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}, [typeof value, onChange, min, max, step, labelPosition]);
|
|
38
|
+
useEffect(function () {
|
|
39
|
+
if (sliderInstanceRef.current) {
|
|
40
|
+
sliderInstanceRef.current.setValue(value);
|
|
41
|
+
}
|
|
42
|
+
}, [sliderInstanceRef, value]);
|
|
43
|
+
useEffect(function () {
|
|
44
|
+
if (sliderInstanceRef.current) {
|
|
45
|
+
if (disabled) {
|
|
46
|
+
sliderInstanceRef.current.disable();
|
|
47
|
+
} else {
|
|
48
|
+
sliderInstanceRef.current.enable();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}, [disabled]);
|
|
52
|
+
return _jsx("div", {
|
|
53
|
+
ref: containerRef,
|
|
54
|
+
className: "ncua-slider ".concat(className || '')
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
export default Slider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Slider';
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
6
|
+
}
|
|
7
|
+
return t;
|
|
8
|
+
};
|
|
9
|
+
return __assign.apply(this, arguments);
|
|
10
|
+
};
|
|
11
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import classNames from 'classnames';
|
|
13
|
+
import { uniqueId } from 'lodash';
|
|
14
|
+
import 'swiper/css';
|
|
15
|
+
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
16
|
+
import { TabButton } from './TabButton';
|
|
17
|
+
export var HorizontalTab = function (_a) {
|
|
18
|
+
var _b = _a.type,
|
|
19
|
+
type = _b === void 0 ? 'button-primary' : _b,
|
|
20
|
+
size = _a.size,
|
|
21
|
+
activeTab = _a.activeTab,
|
|
22
|
+
onClick = _a.onClick,
|
|
23
|
+
_c = _a.fullWidth,
|
|
24
|
+
fullWidth = _c === void 0 ? false : _c,
|
|
25
|
+
_d = _a.menus,
|
|
26
|
+
menus = _d === void 0 ? [] : _d;
|
|
27
|
+
var getTabGap = function (type) {
|
|
28
|
+
var _a;
|
|
29
|
+
var gap = {
|
|
30
|
+
underline: 16
|
|
31
|
+
};
|
|
32
|
+
return (_a = gap[type]) !== null && _a !== void 0 ? _a : 8;
|
|
33
|
+
};
|
|
34
|
+
if (!menus.length) return _jsx(_Fragment, {});
|
|
35
|
+
return _jsx("div", __assign({
|
|
36
|
+
className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), {
|
|
37
|
+
'ncua-horizontal-tab--fullWidth': fullWidth
|
|
38
|
+
})
|
|
39
|
+
}, {
|
|
40
|
+
children: _jsx(Swiper, __assign({
|
|
41
|
+
slidesPerView: "auto",
|
|
42
|
+
spaceBetween: getTabGap(type)
|
|
43
|
+
}, {
|
|
44
|
+
children: menus.map(function (menu) {
|
|
45
|
+
var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
|
|
46
|
+
var commonProps = {
|
|
47
|
+
id: menu.id,
|
|
48
|
+
label: menu.label,
|
|
49
|
+
badgeInfo: menu.badgeInfo,
|
|
50
|
+
isActive: isActive,
|
|
51
|
+
tabButtonType: type,
|
|
52
|
+
size: size,
|
|
53
|
+
onClick: function () {
|
|
54
|
+
var _a;
|
|
55
|
+
return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
return _jsx(SwiperSlide, __assign({
|
|
59
|
+
className: "ncua-horizontal-tab__item"
|
|
60
|
+
}, {
|
|
61
|
+
children: menu.href ? _jsx(TabButton, __assign({}, commonProps, {
|
|
62
|
+
href: menu.href,
|
|
63
|
+
target: menu.target
|
|
64
|
+
})) : _jsx(TabButton, __assign({}, commonProps))
|
|
65
|
+
}), uniqueId('horizontal-tab'));
|
|
66
|
+
})
|
|
67
|
+
}))
|
|
68
|
+
}));
|
|
69
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
6
|
+
}
|
|
7
|
+
return t;
|
|
8
|
+
};
|
|
9
|
+
return __assign.apply(this, arguments);
|
|
10
|
+
};
|
|
11
|
+
var __rest = this && this.__rest || function (s, e) {
|
|
12
|
+
var t = {};
|
|
13
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
14
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
15
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
16
|
+
}
|
|
17
|
+
return t;
|
|
18
|
+
};
|
|
19
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
import classNames from 'classnames';
|
|
21
|
+
import { Badge } from '../badge/Badge';
|
|
22
|
+
export var TabButton = function (_a) {
|
|
23
|
+
var label = _a.label,
|
|
24
|
+
_b = _a.size,
|
|
25
|
+
size = _b === void 0 ? 'md' : _b,
|
|
26
|
+
tabButtonType = _a.tabButtonType,
|
|
27
|
+
type = _a.type,
|
|
28
|
+
_c = _a.isActive,
|
|
29
|
+
isActive = _c === void 0 ? false : _c,
|
|
30
|
+
badgeInfo = _a.badgeInfo,
|
|
31
|
+
className = _a.className,
|
|
32
|
+
children = _a.children,
|
|
33
|
+
props = __rest(_a, ["label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
|
|
34
|
+
var tabType = tabButtonType || type;
|
|
35
|
+
var componentClassName = classNames('ncua-tab-button', "ncua-tab-button--".concat(size), "ncua-tab-button--".concat(tabType || 'button-primary'), {
|
|
36
|
+
'is-active': isActive
|
|
37
|
+
}, className);
|
|
38
|
+
if ('href' in props && props.href) {
|
|
39
|
+
var _d = props,
|
|
40
|
+
href = _d.href,
|
|
41
|
+
_e = _d.target,
|
|
42
|
+
target = _e === void 0 ? '_self' : _e,
|
|
43
|
+
onClick_1 = _d.onClick,
|
|
44
|
+
anchorProps = __rest(_d, ["href", "target", "onClick"]);
|
|
45
|
+
return _jsxs("a", __assign({
|
|
46
|
+
className: componentClassName,
|
|
47
|
+
href: href,
|
|
48
|
+
target: target,
|
|
49
|
+
onClick: onClick_1
|
|
50
|
+
}, anchorProps, {
|
|
51
|
+
children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
|
|
52
|
+
size: "sm"
|
|
53
|
+
})), children]
|
|
54
|
+
}));
|
|
55
|
+
}
|
|
56
|
+
var _f = props,
|
|
57
|
+
onClick = _f.onClick,
|
|
58
|
+
buttonProps = __rest(_f, ["onClick"]);
|
|
59
|
+
return _jsxs("button", __assign({
|
|
60
|
+
type: "button",
|
|
61
|
+
className: componentClassName,
|
|
62
|
+
onClick: onClick
|
|
63
|
+
}, buttonProps, {
|
|
64
|
+
children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
|
|
65
|
+
size: "xs"
|
|
66
|
+
})), children]
|
|
67
|
+
}));
|
|
68
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
var __assign = this && this.__assign || function () {
|
|
2
|
+
__assign = Object.assign || function (t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
6
|
+
}
|
|
7
|
+
return t;
|
|
8
|
+
};
|
|
9
|
+
return __assign.apply(this, arguments);
|
|
10
|
+
};
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import classNames from 'classnames';
|
|
13
|
+
import { Fragment } from 'react';
|
|
14
|
+
import { Select } from '../select/Select';
|
|
15
|
+
import { TabButton } from './TabButton';
|
|
16
|
+
export var VerticalTab = function (_a) {
|
|
17
|
+
var _b = _a.type,
|
|
18
|
+
type = _b === void 0 ? 'button-primary' : _b,
|
|
19
|
+
_c = _a.breakPoint,
|
|
20
|
+
breakPoint = _c === void 0 ? 'pc' : _c,
|
|
21
|
+
activeTab = _a.activeTab,
|
|
22
|
+
menus = _a.menus,
|
|
23
|
+
onClick = _a.onClick;
|
|
24
|
+
var handleSelectChange = function (e) {
|
|
25
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e.target.value);
|
|
26
|
+
};
|
|
27
|
+
var optionItems = (menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
|
|
28
|
+
return {
|
|
29
|
+
id: menu.id || '',
|
|
30
|
+
label: menu.label || ''
|
|
31
|
+
};
|
|
32
|
+
})) || [];
|
|
33
|
+
return _jsx("div", __assign({
|
|
34
|
+
className: classNames('ncua-vertical-tab', "ncua-vertical-tab--".concat(type))
|
|
35
|
+
}, {
|
|
36
|
+
children: breakPoint === 'mobile' ? _jsx("div", __assign({
|
|
37
|
+
className: "ncua-vertical-tab__select"
|
|
38
|
+
}, {
|
|
39
|
+
children: _jsx(Select, {
|
|
40
|
+
value: activeTab,
|
|
41
|
+
onChange: handleSelectChange,
|
|
42
|
+
optionItems: optionItems,
|
|
43
|
+
size: "md"
|
|
44
|
+
})
|
|
45
|
+
})) : menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
|
|
46
|
+
var isActive = menu.href ? menu.href.includes(activeTab) : menu.id === activeTab;
|
|
47
|
+
var commonProps = {
|
|
48
|
+
id: menu.id,
|
|
49
|
+
label: menu.label,
|
|
50
|
+
badgeInfo: menu.badgeInfo,
|
|
51
|
+
isActive: isActive,
|
|
52
|
+
tabButtonType: type,
|
|
53
|
+
size: 'sm',
|
|
54
|
+
onClick: function () {
|
|
55
|
+
var _a;
|
|
56
|
+
return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
return _jsx(Fragment, {
|
|
60
|
+
children: menu.href ? _jsx(TabButton, __assign({}, commonProps, {
|
|
61
|
+
href: menu.href,
|
|
62
|
+
target: menu.target
|
|
63
|
+
})) : _jsx(TabButton, __assign({}, commonProps))
|
|
64
|
+
}, menu.id);
|
|
65
|
+
})
|
|
66
|
+
}));
|
|
67
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export interface SliderOptions {
|
|
2
|
+
min: number;
|
|
3
|
+
max: number;
|
|
4
|
+
step: number;
|
|
5
|
+
value: number | [number, number];
|
|
6
|
+
onChange?: (value: number | [number, number]) => void;
|
|
7
|
+
labelPosition?: 'bottom' | 'top-floating';
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare class Slider {
|
|
11
|
+
private element;
|
|
12
|
+
private options;
|
|
13
|
+
private activeHandle;
|
|
14
|
+
private isDragging;
|
|
15
|
+
private value;
|
|
16
|
+
private handleElements;
|
|
17
|
+
private progressElement;
|
|
18
|
+
private trackElement;
|
|
19
|
+
constructor(element: HTMLElement, options: SliderOptions);
|
|
20
|
+
private init;
|
|
21
|
+
private createHandle;
|
|
22
|
+
private updateHandlePositions;
|
|
23
|
+
private updateHandleClasses;
|
|
24
|
+
private updateAriaAttributes;
|
|
25
|
+
private getPositionFromValue;
|
|
26
|
+
private getValueFromPosition;
|
|
27
|
+
private handleInteractionStart;
|
|
28
|
+
private handleMouseDown;
|
|
29
|
+
private handleTouchStart;
|
|
30
|
+
private handleMouseMove;
|
|
31
|
+
private handleTouchMove;
|
|
32
|
+
private handleMouseUp;
|
|
33
|
+
private handleTouchEnd;
|
|
34
|
+
private updateValueFromClientX;
|
|
35
|
+
private notifyChange;
|
|
36
|
+
setValue(value: number | [number, number]): void;
|
|
37
|
+
getValue(): number | [number, number];
|
|
38
|
+
disable(): void;
|
|
39
|
+
enable(): void;
|
|
40
|
+
destroy(): void;
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=slider.d.ts.map
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
export * from './src/components/badge';
|
|
2
|
-
export * from './src/components/breadcrumb';
|
|
3
2
|
export * from './src/components/button';
|
|
4
3
|
export * from './src/components/carousel';
|
|
5
4
|
export * from './src/components/checkbox';
|
|
6
5
|
export * from './src/components/date-picker';
|
|
7
|
-
export * from './src/components/dropdown';
|
|
8
6
|
export * from './src/components/input';
|
|
9
7
|
export * from './src/components/pagination';
|
|
10
8
|
export * from './src/components/radio';
|
|
@@ -13,7 +11,6 @@ export * from './src/components/shared/hintText';
|
|
|
13
11
|
export * from './src/components/shared/label';
|
|
14
12
|
export * from './src/components/shared';
|
|
15
13
|
export * from './src/components/spinner';
|
|
16
|
-
export * from './src/components/tag';
|
|
17
14
|
export * from './src/components/toggle';
|
|
18
15
|
export * from './src/components/tooltip';
|
|
19
16
|
export * from './src/components';
|
|
@@ -14,7 +14,7 @@ export type CustomSlotType = {
|
|
|
14
14
|
children: ReactNode;
|
|
15
15
|
};
|
|
16
16
|
export type SideSlotType = IconSlotType | CustomSlotType;
|
|
17
|
-
export type ButtonSize = Extract<Size, '
|
|
17
|
+
export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
|
|
18
18
|
type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
|
|
19
19
|
label: string;
|
|
20
20
|
className?: string;
|
|
@@ -38,6 +38,7 @@ type AnchorElementProps = CommonButtonProps<'a'> & {
|
|
|
38
38
|
};
|
|
39
39
|
export type ButtonProps = ButtonElementProps | AnchorElementProps;
|
|
40
40
|
export declare const svgSize: Record<ButtonSize, number>;
|
|
41
|
+
export declare const iconOnlySvgSize: Record<ButtonSize, number>;
|
|
41
42
|
export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
42
43
|
export {};
|
|
43
44
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { IconName } from '@ncds/ui-admin-icon';
|
|
2
2
|
import React, { ComponentProps } from 'react';
|
|
3
3
|
import { ColorKeyType } from '../../../constant/color';
|
|
4
|
-
import {
|
|
4
|
+
import { Size } from '../../../constant/size';
|
|
5
|
+
type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
|
|
5
6
|
interface SideCommon {
|
|
6
7
|
position?: 'leading' | 'trailing';
|
|
7
8
|
}
|
|
8
9
|
interface SideIcon {
|
|
9
10
|
type: 'icon';
|
|
10
|
-
|
|
11
|
-
size?:
|
|
11
|
+
icon: IconName;
|
|
12
|
+
size?: ButtonGroupSize;
|
|
12
13
|
color?: ColorKeyType;
|
|
13
14
|
}
|
|
14
15
|
interface SideCustom {
|
|
@@ -24,7 +25,7 @@ interface ButtonGroupItemCommonProps {
|
|
|
24
25
|
disabled?: boolean;
|
|
25
26
|
}
|
|
26
27
|
interface ButtonGroupItemButtonProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
|
|
27
|
-
as
|
|
28
|
+
as?: 'button';
|
|
28
29
|
}
|
|
29
30
|
interface ButtonGroupItemAnchorProps extends ButtonGroupItemCommonProps, ComponentProps<'a'> {
|
|
30
31
|
as: 'a';
|
|
@@ -33,7 +34,7 @@ interface ButtonGroupItemAnchorProps extends ButtonGroupItemCommonProps, Compone
|
|
|
33
34
|
type ButtonGroupItemProps = ButtonGroupItemButtonProps | ButtonGroupItemAnchorProps;
|
|
34
35
|
interface ButtonGroupProps {
|
|
35
36
|
className?: string;
|
|
36
|
-
size?:
|
|
37
|
+
size?: ButtonGroupSize;
|
|
37
38
|
children: React.ReactNode;
|
|
38
39
|
hasBorder?: boolean;
|
|
39
40
|
onlyIcon?: boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type DividerType = 'text' | 'heading' | 'button' | 'button-group' | 'button-icon' | 'button-group-icon';
|
|
3
|
+
export type DividerStyle = 'single-line' | 'background-fill';
|
|
4
|
+
export interface DividerProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
type: DividerType;
|
|
7
|
+
style?: DividerStyle;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
|
+
//# sourceMappingURL=Divider.d.ts.map
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ButtonProps } from '../button/Button';
|
|
2
|
+
export interface ButtonOptions extends Pick<ButtonProps, 'hierarchy' | 'size' | 'leadingIcon' | 'trailingIcon'> {
|
|
3
|
+
label: string;
|
|
4
|
+
onClick?: () => void;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
interface EmptyStateProps {
|
|
8
|
+
title: string;
|
|
9
|
+
description: string;
|
|
10
|
+
buttons?: ButtonOptions | ButtonOptions[];
|
|
11
|
+
}
|
|
12
|
+
export declare const EmptyState: ({ title, description, buttons }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=EmptyState.d.ts.map
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconName } from '@ncds/ui-admin-icon';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
|
|
4
|
+
export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
|
|
5
|
+
export type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
6
|
+
export interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
|
|
7
|
+
name: IconName;
|
|
8
|
+
theme?: FeaturedIconTheme;
|
|
9
|
+
color?: FeaturedIconColor;
|
|
10
|
+
size?: FeaturedIconSize;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
|
+
//# sourceMappingURL=FeaturedIcon.d.ts.map
|
|
@@ -4,13 +4,20 @@ export * from './button';
|
|
|
4
4
|
export * from './carousel';
|
|
5
5
|
export * from './checkbox';
|
|
6
6
|
export * from './date-picker';
|
|
7
|
-
export * from './
|
|
7
|
+
export * from './featured-icon';
|
|
8
|
+
export * from './divider';
|
|
9
|
+
export * from './empty-state';
|
|
8
10
|
export * from './input';
|
|
11
|
+
export * from './modal';
|
|
12
|
+
export * from './notification';
|
|
9
13
|
export * from './pagination';
|
|
14
|
+
export * from './progress-bar';
|
|
15
|
+
export * from './progress-circle';
|
|
10
16
|
export * from './radio';
|
|
11
17
|
export * from './select';
|
|
12
18
|
export * from './shared';
|
|
13
19
|
export * from './spinner';
|
|
20
|
+
export * from './tab';
|
|
14
21
|
export * from './tag';
|
|
15
22
|
export * from './toggle';
|
|
16
23
|
export * from './tooltip';
|