sccoreui 2.2.5 → 2.2.7
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/assets/images/avatar-for-av-component.png +0 -0
- package/dist/assets/images/profile-square-image.png +0 -0
- package/dist/assets/sccoreui.css +46 -26
- package/dist/assets/theme.css +8 -21
- package/dist/components/button/menu-item.js +2 -0
- package/dist/directives/svg-icons.js +262 -3
- package/dist/pages/avatar/avatar.js +146 -1
- package/dist/pages/badges/badge.js +7 -1
- package/dist/pages/checkbox/checkbox.js +1 -1
- package/dist/pages/home.js +3 -1
- package/dist/pages/progress-bar/progress-bar.js +5 -5
- package/dist/pages/tags/tags.js +51 -1
- package/dist/pages/toggle/toggle.js +10 -0
- package/dist/pages/tooltip/tooltip.js +13 -0
- package/dist/types/components/button/menu-item.d.ts +2 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/pages/avatar/avatar.d.ts +1 -0
- package/dist/types/pages/tags/tags.d.ts +1 -0
- package/dist/types/pages/toggle/toggle.d.ts +2 -0
- package/dist/types/pages/tooltip/tooltip.d.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const inputswitch_1 = require("primereact/inputswitch");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const ToggleSwitch = () => {
|
|
7
|
+
const [isChecked, setIsChecked] = (0, react_1.useState)(false);
|
|
8
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Toggle Switch" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-5 mb-5 p-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-inputswitch-dark" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "p-inputswitch-dark" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "p-inputswitch-dark" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid p-inputswitch-dark" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid p-inputswitch-light" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1 p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1 p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1 p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] }))] }))] }));
|
|
9
|
+
};
|
|
10
|
+
exports.default = ToggleSwitch;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TooltipComponent = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const tooltip_1 = require("primereact/tooltip");
|
|
6
|
+
const TooltipComponent = () => {
|
|
7
|
+
const content = () => {
|
|
8
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "m-0 flex flex-column gap-1 px-0 shadow-none" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "p-0 m-0 font-semibold shadow-none" }, { children: "This is a Tooltip" })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "p-0 m-0 font-medium shadow-none" }, { children: ["Tooltips are used to describe or identify an ", (0, jsx_runtime_1.jsx)("br", {}), " element. In most scenarios, tooltips help the user ", (0, jsx_runtime_1.jsx)("br", {}), " understand meaning, function or alt-text."] }))] })));
|
|
9
|
+
};
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tooltips" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-dark", position: "top", className: "p-dark-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-dark", position: "bottom", className: "p-dark-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-dark", position: "left", className: "p-dark-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-dark", position: "right", className: "p-dark-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-light", position: "top", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-light", position: "bottom", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-light", position: "left", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-light", position: "right", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top", position: "top", className: "p-dark-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom", position: "bottom", className: "p-dark-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left", position: "left", className: "p-dark-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right", position: "right", className: "p-dark-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top-light", position: "top", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom-light", position: "bottom", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left-light", position: "left", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right-light", position: "right", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] }))] }))] }));
|
|
11
|
+
};
|
|
12
|
+
exports.TooltipComponent = TooltipComponent;
|
|
13
|
+
exports.default = exports.TooltipComponent;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { DropdownChangeEvent } from 'primereact/dropdown';
|
|
|
2
2
|
import { ColorPickerChangeEvent } from 'primereact/colorpicker';
|
|
3
3
|
import { SliderChangeEvent } from 'primereact/slider';
|
|
4
4
|
import { CarouselResponsiveOption } from 'primereact/carousel';
|
|
5
|
+
import { MenuItem } from 'primereact/menuitem';
|
|
5
6
|
export { default as Button } from './components/button/button';
|
|
6
7
|
export { default as Dropdown } from './components/dropdown/dropdown';
|
|
7
8
|
export { default as InputText } from './components/input/input';
|
|
@@ -49,4 +50,4 @@ export { default as Chip } from './components/chips/chip';
|
|
|
49
50
|
export { default as Skeleton } from './components/skeleton/skeleton';
|
|
50
51
|
export { default as ProgressSpinner } from './components/spinner/spinner';
|
|
51
52
|
export { default as Chart } from './components/chart/chart';
|
|
52
|
-
export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent };
|
|
53
|
+
export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem };
|