@pisell/materials 1.0.503 → 1.0.504
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +7 -7
- package/build/lowcode/preview.js +7 -7
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +26 -26
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +26 -26
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
- package/es/components/dataSourceComponents/fields/index.d.ts +2 -2
- package/es/components/pisellAvatar/index.d.ts +19 -0
- package/es/components/pisellAvatar/index.js +89 -0
- package/es/components/pisellAvatar/index.less +25 -0
- package/es/components/pisellCustomCheckboxGroup/index.d.ts +15 -0
- package/es/components/pisellCustomCheckboxGroup/index.js +125 -0
- package/es/components/pisellCustomCheckboxGroup/index.less +0 -0
- package/es/components/pisellDropdown/index.d.ts +20 -0
- package/es/components/pisellDropdown/index.js +51 -0
- package/es/components/pisellDropdown/index.less +44 -0
- package/es/components/pisellImageCarousels/index.d.ts +20 -0
- package/es/components/pisellImageCarousels/index.js +106 -0
- package/es/components/pisellImageCarousels/index.less +92 -0
- package/es/components/pisellProgressBar/index.d.ts +14 -0
- package/es/components/pisellProgressBar/index.js +44 -0
- package/es/components/pisellProgressBar/index.less +48 -0
- package/es/components/pisellSectionHeaders/index.d.ts +21 -0
- package/es/components/pisellSectionHeaders/index.js +39 -0
- package/es/components/pisellSectionHeaders/index.less +48 -0
- package/es/components/pisellViewGrid/index.d.ts +16 -0
- package/es/components/pisellViewGrid/index.js +88 -0
- package/es/components/pisellViewGrid/index.less +30 -0
- package/es/components/table/Table/utils.d.ts +1 -1
- package/es/index.d.ts +9 -2
- package/es/index.js +10 -3
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
- package/lib/components/dataSourceComponents/fields/index.d.ts +2 -2
- package/lib/components/pisellAvatar/index.d.ts +19 -0
- package/lib/components/pisellAvatar/index.js +108 -0
- package/lib/components/pisellAvatar/index.less +25 -0
- package/lib/components/pisellCustomCheckboxGroup/index.d.ts +15 -0
- package/lib/components/pisellCustomCheckboxGroup/index.js +94 -0
- package/lib/components/pisellCustomCheckboxGroup/index.less +0 -0
- package/lib/components/pisellDropdown/index.d.ts +20 -0
- package/lib/components/pisellDropdown/index.js +72 -0
- package/lib/components/pisellDropdown/index.less +44 -0
- package/lib/components/pisellImageCarousels/index.d.ts +20 -0
- package/lib/components/pisellImageCarousels/index.js +107 -0
- package/lib/components/pisellImageCarousels/index.less +92 -0
- package/lib/components/pisellProgressBar/index.d.ts +14 -0
- package/lib/components/pisellProgressBar/index.js +62 -0
- package/lib/components/pisellProgressBar/index.less +48 -0
- package/lib/components/pisellSectionHeaders/index.d.ts +21 -0
- package/lib/components/pisellSectionHeaders/index.js +58 -0
- package/lib/components/pisellSectionHeaders/index.less +48 -0
- package/lib/components/pisellViewGrid/index.d.ts +16 -0
- package/lib/components/pisellViewGrid/index.js +109 -0
- package/lib/components/pisellViewGrid/index.less +30 -0
- package/lib/components/table/Table/utils.d.ts +1 -1
- package/lib/index.d.ts +9 -2
- package/lib/index.js +23 -2
- package/lowcode/pisell-avatar/__screenshots__/avatar-1.jpg +0 -0
- package/lowcode/pisell-avatar/meta.ts +111 -0
- package/lowcode/pisell-avatar/snippets.ts +14 -0
- package/lowcode/pisell-custom-checkbox-group/__screenshots__/card-1.png +0 -0
- package/lowcode/pisell-custom-checkbox-group/meta.ts +202 -0
- package/lowcode/pisell-custom-checkbox-group/snippets.ts +56 -0
- package/lowcode/pisell-dropdown/__screenshots__/dropdown-1.png +0 -0
- package/lowcode/pisell-dropdown/meta.ts +180 -0
- package/lowcode/pisell-dropdown/snippets.ts +69 -0
- package/lowcode/pisell-image-carousels/meta.ts +143 -0
- package/lowcode/pisell-image-carousels/snippets.ts +26 -0
- package/lowcode/pisell-progress-bar/meta.ts +115 -0
- package/lowcode/pisell-progress-bar/snippets.ts +15 -0
- package/lowcode/pisell-section-headers/meta.ts +91 -0
- package/lowcode/pisell-section-headers/snippets.ts +22 -0
- package/lowcode/pisell-view-grid/__screenshots__/card-1.png +0 -0
- package/lowcode/pisell-view-grid/meta.ts +167 -0
- package/lowcode/pisell-view-grid/snippets.ts +54 -0
- package/package.json +4 -3
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellCustomCheckboxGroup/index.tsx
|
|
30
|
+
var pisellCustomCheckboxGroup_exports = {};
|
|
31
|
+
__export(pisellCustomCheckboxGroup_exports, {
|
|
32
|
+
default: () => pisellCustomCheckboxGroup_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(pisellCustomCheckboxGroup_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_classnames = __toESM(require("classnames"));
|
|
37
|
+
var import_pisellViewGrid = __toESM(require("../pisellViewGrid"));
|
|
38
|
+
var import_index = require("./index.less");
|
|
39
|
+
var PisellCustomCheckboxGroup = ({
|
|
40
|
+
dataSource = [],
|
|
41
|
+
allowAdd = false,
|
|
42
|
+
onAdd,
|
|
43
|
+
disabled = false,
|
|
44
|
+
isMultiple = false,
|
|
45
|
+
value,
|
|
46
|
+
onChange,
|
|
47
|
+
className,
|
|
48
|
+
...rest
|
|
49
|
+
}) => {
|
|
50
|
+
const [selectedValues, setSelectedValues] = (0, import_react.useState)(
|
|
51
|
+
Array.isArray(value) ? value : value ? [value] : []
|
|
52
|
+
);
|
|
53
|
+
const finalDataSource = (0, import_react.useMemo)(() => {
|
|
54
|
+
return allowAdd ? [{ id: 0, text: "3", isAddCard: true }, ...dataSource] : dataSource;
|
|
55
|
+
}, [allowAdd, dataSource]);
|
|
56
|
+
const handleItemClick = (item) => {
|
|
57
|
+
if (disabled)
|
|
58
|
+
return;
|
|
59
|
+
const value2 = item == null ? void 0 : item.id;
|
|
60
|
+
let newValues;
|
|
61
|
+
if (!isMultiple) {
|
|
62
|
+
newValues = [value2];
|
|
63
|
+
} else {
|
|
64
|
+
if (selectedValues.includes(value2)) {
|
|
65
|
+
newValues = selectedValues.filter((v) => v !== id);
|
|
66
|
+
} else {
|
|
67
|
+
newValues = [...selectedValues, value2];
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
setSelectedValues(newValues);
|
|
71
|
+
onChange == null ? void 0 : onChange(!isMultiple ? newValues[0] : newValues);
|
|
72
|
+
};
|
|
73
|
+
const renderGridItem = (item, index) => {
|
|
74
|
+
var _a;
|
|
75
|
+
let obj = { ...item };
|
|
76
|
+
if (selectedValues) {
|
|
77
|
+
const selected = selectedValues.includes(item == null ? void 0 : item.id);
|
|
78
|
+
obj = { ...item, disabled, selected };
|
|
79
|
+
}
|
|
80
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { onClick: () => (item == null ? void 0 : item.isAddCard) ? onAdd : handleItemClick(item) }, (_a = rest == null ? void 0 : rest.renderItem) == null ? void 0 : _a.call(rest, obj, index));
|
|
81
|
+
};
|
|
82
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
83
|
+
import_pisellViewGrid.default,
|
|
84
|
+
{
|
|
85
|
+
...rest,
|
|
86
|
+
dataSource: finalDataSource,
|
|
87
|
+
renderItem: (item, index) => {
|
|
88
|
+
return renderGridItem(item, index);
|
|
89
|
+
},
|
|
90
|
+
className: (0, import_classnames.default)("pisell-custom-checkbox-group", className)
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
};
|
|
94
|
+
var pisellCustomCheckboxGroup_default = PisellCustomCheckboxGroup;
|
|
File without changes
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
export interface MenuItemType {
|
|
4
|
+
key: string;
|
|
5
|
+
label: string;
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
shortcut?: string;
|
|
8
|
+
divider?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface PisellDropdownProps {
|
|
11
|
+
trigger?: React.ReactNode;
|
|
12
|
+
items?: MenuItemType[];
|
|
13
|
+
showShortcut?: boolean;
|
|
14
|
+
triggerType?: ('click' | 'hover')[];
|
|
15
|
+
className?: string;
|
|
16
|
+
style?: React.CSSProperties;
|
|
17
|
+
onSelect?: (key: string) => void;
|
|
18
|
+
}
|
|
19
|
+
declare const PisellDropdown: React.FC<PisellDropdownProps>;
|
|
20
|
+
export default PisellDropdown;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellDropdown/index.tsx
|
|
30
|
+
var pisellDropdown_exports = {};
|
|
31
|
+
__export(pisellDropdown_exports, {
|
|
32
|
+
default: () => pisellDropdown_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(pisellDropdown_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_antd = require("antd");
|
|
37
|
+
var import_dropdown = __toESM(require("../dropdown"));
|
|
38
|
+
var import_classnames = __toESM(require("classnames"));
|
|
39
|
+
var import_index = require("./index.less");
|
|
40
|
+
var PisellDropdown = ({
|
|
41
|
+
trigger,
|
|
42
|
+
items = [],
|
|
43
|
+
showShortcut = true,
|
|
44
|
+
triggerType = ["click"],
|
|
45
|
+
className,
|
|
46
|
+
style,
|
|
47
|
+
onSelect
|
|
48
|
+
}) => {
|
|
49
|
+
const renderMenuItem = (item) => {
|
|
50
|
+
const menuItem = /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-dropdown-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-dropdown-item-content" }, item.icon && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-dropdown-item-icon" }, item.icon), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-dropdown-item-label" }, item.label)), showShortcut && item.shortcut && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-dropdown-item-shortcut" }, item.shortcut));
|
|
51
|
+
return item.divider ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: item.key }, /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Item, { key: item.key }, menuItem), /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Divider, null)) : /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Item, { key: item.key }, menuItem);
|
|
52
|
+
};
|
|
53
|
+
const menu = /* @__PURE__ */ import_react.default.createElement(
|
|
54
|
+
import_antd.Menu,
|
|
55
|
+
{
|
|
56
|
+
onClick: ({ key }) => onSelect == null ? void 0 : onSelect(key),
|
|
57
|
+
className: "pisell-dropdown-menu"
|
|
58
|
+
},
|
|
59
|
+
items.map(renderMenuItem)
|
|
60
|
+
);
|
|
61
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
62
|
+
import_dropdown.default,
|
|
63
|
+
{
|
|
64
|
+
overlay: menu,
|
|
65
|
+
trigger: triggerType,
|
|
66
|
+
className: (0, import_classnames.default)("pisell-dropdown", className),
|
|
67
|
+
style
|
|
68
|
+
},
|
|
69
|
+
trigger || /* @__PURE__ */ import_react.default.createElement("span", null, "Account")
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
var pisellDropdown_default = PisellDropdown;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
.pisell-dropdown {
|
|
2
|
+
&-menu {
|
|
3
|
+
min-width: 200px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
&-item {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
padding: 8px 12px;
|
|
11
|
+
|
|
12
|
+
&-content {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: 8px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&-icon {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
font-size: 16px;
|
|
22
|
+
color: #666;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&-label {
|
|
26
|
+
color: #333;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&-shortcut {
|
|
30
|
+
color: #999;
|
|
31
|
+
font-size: 12px;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.ant-dropdown-menu-item {
|
|
37
|
+
padding: 0 !important;
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
.pisell-dropdown-item {
|
|
41
|
+
background-color: #f5f5f5;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import 'swiper/swiper-bundle.css';
|
|
3
|
+
import './index.less';
|
|
4
|
+
export interface PisellImageCarouselsProps {
|
|
5
|
+
dataSource?: Array<{
|
|
6
|
+
url: string;
|
|
7
|
+
alt?: string;
|
|
8
|
+
}>;
|
|
9
|
+
width?: number;
|
|
10
|
+
height?: number;
|
|
11
|
+
showArrows?: boolean;
|
|
12
|
+
showDots?: boolean;
|
|
13
|
+
autoplay?: boolean;
|
|
14
|
+
interval?: number;
|
|
15
|
+
borderRadius?: number;
|
|
16
|
+
className?: string;
|
|
17
|
+
style?: React.CSSProperties;
|
|
18
|
+
}
|
|
19
|
+
declare const PisellImageCarousels: React.FC<PisellImageCarouselsProps>;
|
|
20
|
+
export default PisellImageCarousels;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellImageCarousels/index.tsx
|
|
30
|
+
var pisellImageCarousels_exports = {};
|
|
31
|
+
__export(pisellImageCarousels_exports, {
|
|
32
|
+
default: () => pisellImageCarousels_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(pisellImageCarousels_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_antd = require("antd");
|
|
37
|
+
var import_swiper = require("swiper");
|
|
38
|
+
var import_swiper_bundle = require("swiper/swiper-bundle.css");
|
|
39
|
+
var import_iconfont = __toESM(require("../iconfont"));
|
|
40
|
+
var import_classnames = __toESM(require("classnames"));
|
|
41
|
+
var import_index = require("./index.less");
|
|
42
|
+
var PisellImageCarousels = ({
|
|
43
|
+
dataSource = [],
|
|
44
|
+
width = 640,
|
|
45
|
+
height = 400,
|
|
46
|
+
showArrows = true,
|
|
47
|
+
showDots = true,
|
|
48
|
+
autoplay = true,
|
|
49
|
+
interval = 3e3,
|
|
50
|
+
borderRadius = 8,
|
|
51
|
+
className,
|
|
52
|
+
style
|
|
53
|
+
}) => {
|
|
54
|
+
const swiperRef = (0, import_react.useRef)(null);
|
|
55
|
+
const swiperInstance = (0, import_react.useRef)(null);
|
|
56
|
+
(0, import_react.useEffect)(() => {
|
|
57
|
+
if (swiperRef.current) {
|
|
58
|
+
swiperInstance.current = new import_swiper.Swiper(swiperRef.current, {
|
|
59
|
+
modules: [import_swiper.Navigation, import_swiper.Pagination, import_swiper.Autoplay],
|
|
60
|
+
slidesPerView: 1,
|
|
61
|
+
spaceBetween: 0,
|
|
62
|
+
loop: true,
|
|
63
|
+
// 导航箭头
|
|
64
|
+
navigation: showArrows ? {
|
|
65
|
+
nextEl: ".pisell-carousel-next",
|
|
66
|
+
prevEl: ".pisell-carousel-prev"
|
|
67
|
+
} : false,
|
|
68
|
+
// 分页点
|
|
69
|
+
pagination: showDots ? {
|
|
70
|
+
el: ".pisell-carousel-pagination",
|
|
71
|
+
clickable: true
|
|
72
|
+
} : false,
|
|
73
|
+
// 自动播放
|
|
74
|
+
autoplay: autoplay ? {
|
|
75
|
+
delay: interval,
|
|
76
|
+
disableOnInteraction: false
|
|
77
|
+
} : false
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
return () => {
|
|
81
|
+
if (swiperInstance.current) {
|
|
82
|
+
swiperInstance.current.destroy();
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}, [showArrows, showDots, autoplay, interval]);
|
|
86
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
87
|
+
"div",
|
|
88
|
+
{
|
|
89
|
+
className: (0, import_classnames.default)("pisell-image-carousel", className),
|
|
90
|
+
style: { width, height, ...style }
|
|
91
|
+
},
|
|
92
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "swiper", ref: swiperRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "swiper-wrapper" }, dataSource == null ? void 0 : dataSource.map((image, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index, className: "swiper-slide" }, /* @__PURE__ */ import_react.default.createElement(
|
|
93
|
+
import_antd.Image,
|
|
94
|
+
{
|
|
95
|
+
preview: false,
|
|
96
|
+
src: image.url,
|
|
97
|
+
alt: image.alt,
|
|
98
|
+
width,
|
|
99
|
+
height,
|
|
100
|
+
style: {
|
|
101
|
+
borderRadius: `${borderRadius}px`
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
)))), showArrows && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-carousel-prev" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "carousel-arrow" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-chevron-left" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-carousel-next" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "carousel-arrow" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-chevron-right" })))), showDots && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-carousel-pagination" }))
|
|
105
|
+
);
|
|
106
|
+
};
|
|
107
|
+
var pisellImageCarousels_default = PisellImageCarousels;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
.pisell-image-carousel {
|
|
2
|
+
position: relative;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
|
|
5
|
+
.swiper {
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.swiper-slide {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
|
|
15
|
+
img {
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
object-fit: cover;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// 导航箭头样式
|
|
23
|
+
.pisell-carousel-prev,
|
|
24
|
+
.pisell-carousel-next {
|
|
25
|
+
position: absolute;
|
|
26
|
+
top: 50%;
|
|
27
|
+
transform: translateY(-50%);
|
|
28
|
+
width: 44px;
|
|
29
|
+
height: 44px;
|
|
30
|
+
border-radius: 50%;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
z-index: 10;
|
|
36
|
+
transition: all 0.3s;
|
|
37
|
+
padding: 10px;
|
|
38
|
+
background: rgba(255, 255, 255, 0.6);
|
|
39
|
+
backdrop-filter: blur(4px);
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
background: rgba(255, 255, 255, 1);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.carousel-arrow {
|
|
46
|
+
color: #344054;
|
|
47
|
+
font-size: 24px;
|
|
48
|
+
line-height: 1;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.pisell-carousel-prev {
|
|
53
|
+
left: 20px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.pisell-carousel-next {
|
|
57
|
+
right: 20px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// 分页点样式
|
|
61
|
+
.pisell-carousel-pagination {
|
|
62
|
+
position: absolute;
|
|
63
|
+
bottom: 16px;
|
|
64
|
+
left: 50%;
|
|
65
|
+
transform: translateX(-50%);
|
|
66
|
+
z-index: 10;
|
|
67
|
+
display: inline-flex;
|
|
68
|
+
padding: 12px;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: 6px;
|
|
72
|
+
border-radius: 17px;
|
|
73
|
+
background: rgba(255, 255, 255, 0.9);
|
|
74
|
+
backdrop-filter: blur(4px);
|
|
75
|
+
width: max-content;
|
|
76
|
+
|
|
77
|
+
.swiper-pagination-bullet {
|
|
78
|
+
width: 10px;
|
|
79
|
+
height: 10px;
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
background: var(--Gray-300, #d0d5dd);
|
|
83
|
+
mix-blend-mode: multiply;
|
|
84
|
+
margin: 0;
|
|
85
|
+
opacity: 1;
|
|
86
|
+
|
|
87
|
+
&-active {
|
|
88
|
+
background: var(--Primary-700, #6941c6);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
export interface PisellStepHeaderProps {
|
|
4
|
+
step?: number;
|
|
5
|
+
title?: string;
|
|
6
|
+
showBack?: boolean;
|
|
7
|
+
showClose?: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: React.CSSProperties;
|
|
10
|
+
onBack?: () => void;
|
|
11
|
+
onClose?: () => void;
|
|
12
|
+
}
|
|
13
|
+
declare const PisellStepHeader: React.FC<PisellStepHeaderProps>;
|
|
14
|
+
export default PisellStepHeader;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellProgressBar/index.tsx
|
|
30
|
+
var pisellProgressBar_exports = {};
|
|
31
|
+
__export(pisellProgressBar_exports, {
|
|
32
|
+
default: () => pisellProgressBar_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(pisellProgressBar_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_icons = require("@ant-design/icons");
|
|
37
|
+
var import_pisellSectionHeaders = __toESM(require("../pisellSectionHeaders"));
|
|
38
|
+
var import_classnames = __toESM(require("classnames"));
|
|
39
|
+
var import_index = require("./index.less");
|
|
40
|
+
var PisellStepHeader = ({
|
|
41
|
+
step = 1,
|
|
42
|
+
title,
|
|
43
|
+
showBack = true,
|
|
44
|
+
showClose = true,
|
|
45
|
+
className,
|
|
46
|
+
style,
|
|
47
|
+
onBack,
|
|
48
|
+
onClose
|
|
49
|
+
}) => {
|
|
50
|
+
const leftContent = /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-step-header-left" }, showBack && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-step-header-back", onClick: onBack }, /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-step-header-content" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-step-header-step" }, "Step ", step), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-step-header-title" }, title)));
|
|
51
|
+
const rightContent = showClose ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-step-header-close", onClick: onClose }, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null)) : null;
|
|
52
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
53
|
+
import_pisellSectionHeaders.default,
|
|
54
|
+
{
|
|
55
|
+
className: (0, import_classnames.default)("pisell-step-header", className),
|
|
56
|
+
style,
|
|
57
|
+
backNode: leftContent,
|
|
58
|
+
actionNode: rightContent
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
};
|
|
62
|
+
var pisellProgressBar_default = PisellStepHeader;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
.pisell-step-header {
|
|
2
|
+
&-left {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: 16px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&-back {
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
color: #666;
|
|
11
|
+
font-size: 16px;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
|
|
15
|
+
&:hover {
|
|
16
|
+
color: #1890ff;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&-content {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: 8px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&-step {
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
color: #666;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&-title {
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
font-weight: 500;
|
|
34
|
+
color: #333;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&-close {
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
color: #666;
|
|
40
|
+
font-size: 16px;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
|
|
44
|
+
&:hover {
|
|
45
|
+
color: #1890ff;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
export interface PisellSectionHeadersProps {
|
|
4
|
+
/** 是否占据空间(true: 占据空间, false: 不占据空间) */
|
|
5
|
+
/** 左侧返回区域 */
|
|
6
|
+
backNode?: React.ReactNode;
|
|
7
|
+
/** 中间内容区域 */
|
|
8
|
+
centerNode?: React.ReactNode;
|
|
9
|
+
/** 右侧操作区域 */
|
|
10
|
+
actionNode?: React.ReactNode;
|
|
11
|
+
/** 自定义类名 */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** 自定义样式 */
|
|
14
|
+
style?: React.CSSProperties;
|
|
15
|
+
/** 返回按钮点击事件 */
|
|
16
|
+
onBack?: () => void;
|
|
17
|
+
/** 操作区域点击事件 */
|
|
18
|
+
onAction?: () => void;
|
|
19
|
+
}
|
|
20
|
+
declare const PisellSectionHeaders: React.FC<PisellSectionHeadersProps>;
|
|
21
|
+
export default PisellSectionHeaders;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellSectionHeaders/index.tsx
|
|
30
|
+
var pisellSectionHeaders_exports = {};
|
|
31
|
+
__export(pisellSectionHeaders_exports, {
|
|
32
|
+
default: () => pisellSectionHeaders_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(pisellSectionHeaders_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_classnames = __toESM(require("classnames"));
|
|
37
|
+
var import_index = require("./index.less");
|
|
38
|
+
var prefixCls = "pisell-section-headers";
|
|
39
|
+
var PisellSectionHeaders = ({
|
|
40
|
+
// takeSpace = true,
|
|
41
|
+
backNode,
|
|
42
|
+
centerNode,
|
|
43
|
+
actionNode,
|
|
44
|
+
className,
|
|
45
|
+
style,
|
|
46
|
+
onBack,
|
|
47
|
+
onAction
|
|
48
|
+
}) => {
|
|
49
|
+
const classes = (0, import_classnames.default)(
|
|
50
|
+
prefixCls,
|
|
51
|
+
// {
|
|
52
|
+
// [`${prefixCls}-float`]: !takeSpace,
|
|
53
|
+
// },
|
|
54
|
+
className
|
|
55
|
+
);
|
|
56
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: classes, style: { ...style } }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, backNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-back`, onClick: onBack }, backNode), centerNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-main` }, centerNode), actionNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-actions`, onClick: onAction }, actionNode))));
|
|
57
|
+
};
|
|
58
|
+
var pisellSectionHeaders_default = PisellSectionHeaders;
|