@synerise/ds-card-tabs 1.5.23 → 1.5.25
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/CHANGELOG.md +8 -0
- package/dist/CardTab/CardTab.d.ts +2 -2
- package/dist/CardTab/CardTab.js +102 -144
- package/dist/CardTab/CardTab.styles.d.ts +11 -11
- package/dist/CardTab/CardTab.styles.js +239 -253
- package/dist/CardTab/CardTab.types.d.ts +4 -4
- package/dist/CardTab/CardTab.types.js +10 -7
- package/dist/CardTab/CardTabActions/CardTabActions.d.ts +2 -2
- package/dist/CardTab/CardTabActions/CardTabActions.js +15 -24
- package/dist/CardTab/CardTabActions/CardTabActions.types.d.ts +2 -2
- package/dist/CardTab/CardTabActions/CardTabActions.types.js +1 -1
- package/dist/CardTab/CardTabDropdown/CardTabDropdown.d.ts +2 -2
- package/dist/CardTab/CardTabDropdown/CardTabDropdown.js +27 -43
- package/dist/CardTab/CardTabDropdown/CardTabDropdown.types.d.ts +1 -1
- package/dist/CardTab/CardTabDropdown/CardTabDropdown.types.js +1 -1
- package/dist/CardTab/CardTabPrefix/CardTabPrefix.d.ts +2 -2
- package/dist/CardTab/CardTabPrefix/CardTabPrefix.js +38 -41
- package/dist/CardTab/CardTabPrefix/CardTabPrefix.types.d.ts +1 -1
- package/dist/CardTab/CardTabPrefix/CardTabPrefix.types.js +1 -1
- package/dist/CardTab/CardTabPrefix/CardTabPrefix.utils.d.ts +1 -1
- package/dist/CardTab/CardTabPrefix/CardTabPrefix.utils.js +12 -6
- package/dist/CardTabs.d.ts +2 -2
- package/dist/CardTabs.js +46 -54
- package/dist/CardTabs.styles.d.ts +2 -2
- package/dist/CardTabs.styles.js +9 -5
- package/dist/CardTabs.types.d.ts +3 -3
- package/dist/CardTabs.types.js +1 -1
- package/dist/index.js +17 -10
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils.js +11 -7
- package/package.json +14 -14
|
@@ -1,25 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Cruds from
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
editTooltip: texts == null ? void 0 : texts.changeNameTooltip,
|
|
17
|
-
onDuplicate: onDuplicateTab,
|
|
18
|
-
duplicateTooltip: texts == null ? void 0 : texts.duplicateTooltip,
|
|
19
|
-
onRemove: onRemoveTab,
|
|
20
|
-
removeTooltip: texts == null ? void 0 : texts.removeTooltip,
|
|
21
|
-
onPreview: onPreviewTab,
|
|
22
|
-
previewTooltip: texts == null ? void 0 : texts.previewTooltip
|
|
23
|
-
}));
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Cruds from "@synerise/ds-cruds";
|
|
3
|
+
import { CardTabSuffix } from "../CardTab.styles.js";
|
|
4
|
+
const CardTabActions = ({
|
|
5
|
+
onChangeName,
|
|
6
|
+
enterEditNameMode,
|
|
7
|
+
onDuplicateTab,
|
|
8
|
+
onRemoveTab,
|
|
9
|
+
onPreviewTab,
|
|
10
|
+
texts
|
|
11
|
+
}) => {
|
|
12
|
+
return /* @__PURE__ */ jsx(CardTabSuffix, { "data-testid": "card-tab-suffix", className: "ds-card-tabs__suffix-nodrag", children: /* @__PURE__ */ jsx(Cruds, { onEdit: onChangeName ?? enterEditNameMode, editTooltip: texts?.changeNameTooltip, onDuplicate: onDuplicateTab, duplicateTooltip: texts?.duplicateTooltip, onRemove: onRemoveTab, removeTooltip: texts?.removeTooltip, onPreview: onPreviewTab, previewTooltip: texts?.previewTooltip }) });
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
CardTabActions as default
|
|
24
16
|
};
|
|
25
|
-
export default CardTabActions;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import { CardTabTexts } from '../CardTab.types';
|
|
3
3
|
export type CardTabActionsProps = {
|
|
4
4
|
onChangeName?: (event?: MouseEvent<HTMLElement>) => void;
|
|
5
5
|
/** @deprecated */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CardTabDropdownProps } from './CardTabDropdown.types';
|
|
3
3
|
declare const CardTabDropdown: ({ editNameHandler, duplicateHandler, removeHandler, texts, }: CardTabDropdownProps) => React.JSX.Element;
|
|
4
4
|
export default CardTabDropdown;
|
|
@@ -1,65 +1,49 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { DropdownMenu } from
|
|
3
|
-
import Icon, { DuplicateM,
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { DropdownMenu } from "@synerise/ds-dropdown";
|
|
3
|
+
import Icon, { EditM, DuplicateM, TrashM, OptionVerticalM } from "@synerise/ds-icon";
|
|
4
|
+
import { CardTabSuffix } from "../CardTab.styles.js";
|
|
5
|
+
const CardTabDropdown = ({
|
|
6
|
+
editNameHandler,
|
|
7
|
+
duplicateHandler,
|
|
8
|
+
removeHandler,
|
|
9
|
+
texts
|
|
10
|
+
}) => {
|
|
11
|
+
const menuItems = [];
|
|
11
12
|
if (editNameHandler) {
|
|
12
13
|
menuItems.push({
|
|
13
|
-
onClick:
|
|
14
|
+
onClick: (event) => {
|
|
14
15
|
editNameHandler(event.domEvent);
|
|
15
16
|
},
|
|
16
|
-
key:
|
|
17
|
-
prefixel:
|
|
18
|
-
component: /*#__PURE__*/React.createElement(EditM, null)
|
|
19
|
-
}),
|
|
17
|
+
key: "card-tabs-menu-item-rename",
|
|
18
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditM, {}) }),
|
|
20
19
|
text: texts.changeNameMenuItem
|
|
21
20
|
});
|
|
22
21
|
}
|
|
23
22
|
if (duplicateHandler) {
|
|
24
23
|
menuItems.push({
|
|
25
|
-
onClick:
|
|
24
|
+
onClick: (event) => {
|
|
26
25
|
duplicateHandler(event.domEvent);
|
|
27
26
|
},
|
|
28
|
-
key:
|
|
29
|
-
prefixel:
|
|
30
|
-
component: /*#__PURE__*/React.createElement(DuplicateM, null)
|
|
31
|
-
}),
|
|
27
|
+
key: "card-tabs-menu-item-duplicate",
|
|
28
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DuplicateM, {}) }),
|
|
32
29
|
text: texts.duplicateMenuItem
|
|
33
30
|
});
|
|
34
31
|
}
|
|
35
32
|
if (removeHandler) {
|
|
36
33
|
menuItems.push({
|
|
37
|
-
prefixel:
|
|
38
|
-
|
|
39
|
-
}),
|
|
40
|
-
onClick: function onClick(event) {
|
|
34
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(TrashM, {}) }),
|
|
35
|
+
onClick: (event) => {
|
|
41
36
|
removeHandler(event.domEvent);
|
|
42
37
|
},
|
|
43
|
-
key:
|
|
44
|
-
type:
|
|
38
|
+
key: "card-tabs-menu-item-delete",
|
|
39
|
+
type: "danger",
|
|
45
40
|
text: texts.removeMenuItem
|
|
46
41
|
});
|
|
47
42
|
}
|
|
48
|
-
return
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
hideOnItemClick: true,
|
|
55
|
-
trigger: "click",
|
|
56
|
-
asChild: true,
|
|
57
|
-
popoverProps: {
|
|
58
|
-
testId: 'card-tabs-contextmenu'
|
|
59
|
-
}
|
|
60
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
61
|
-
"data-testid": "ds-card-tabs-contextmenu",
|
|
62
|
-
component: /*#__PURE__*/React.createElement(OptionVerticalM, null)
|
|
63
|
-
})));
|
|
43
|
+
return /* @__PURE__ */ jsx(CardTabSuffix, { "data-testid": "card-tab-suffix", className: "ds-card-tabs__suffix-nodrag", children: /* @__PURE__ */ jsx(DropdownMenu, { dataSource: menuItems, placement: "bottomLeft", hideOnItemClick: true, trigger: "click", asChild: true, popoverProps: {
|
|
44
|
+
testId: "card-tabs-contextmenu"
|
|
45
|
+
}, children: /* @__PURE__ */ jsx(Icon, { "data-testid": "ds-card-tabs-contextmenu", component: /* @__PURE__ */ jsx(OptionVerticalM, {}) }) }) });
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
CardTabDropdown as default
|
|
64
49
|
};
|
|
65
|
-
export default CardTabDropdown;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { CardTabTexts, ListItemEventType } from '../CardTab.types';
|
|
2
2
|
export type CardTabDropdownProps = {
|
|
3
3
|
editNameHandler?: (event: ListItemEventType) => void;
|
|
4
4
|
duplicateHandler?: (event: ListItemEventType) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CardTabPrefixProps } from './CardTabPrefix.types';
|
|
3
3
|
declare const CardTabPrefix: ({ draggable, dragHandleProps, ...rest }: CardTabPrefixProps) => React.JSX.Element;
|
|
4
4
|
export default CardTabPrefix;
|
|
@@ -1,52 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var prefixElement = useMemo(function () {
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import Icon, { DragHandleM } from "@synerise/ds-icon";
|
|
4
|
+
import { CardTabTag, CardDotPrefix, CardDot, CardIconPrefix, CardDragPrefix, CardTabPrefix as CardTabPrefix$1 } from "../CardTab.styles.js";
|
|
5
|
+
import { prefixType } from "../CardTab.types.js";
|
|
6
|
+
import { isTagPrefix, isDotPrefix, isIconPrefix, isHandlePrefix } from "./CardTabPrefix.utils.js";
|
|
7
|
+
const CardTabPrefix = ({
|
|
8
|
+
draggable,
|
|
9
|
+
dragHandleProps,
|
|
10
|
+
...rest
|
|
11
|
+
}) => {
|
|
12
|
+
const prefixElement = useMemo(() => {
|
|
14
13
|
if (isTagPrefix(rest)) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
const {
|
|
15
|
+
tag
|
|
16
|
+
} = rest;
|
|
17
|
+
return /* @__PURE__ */ jsx(CardTabTag, { "data-testid": "card-tab-tag", children: tag });
|
|
19
18
|
}
|
|
20
19
|
if (isDotPrefix(rest)) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
const {
|
|
21
|
+
colorDot
|
|
22
|
+
} = rest;
|
|
23
|
+
return /* @__PURE__ */ jsx(CardDotPrefix, { "data-testid": "card-tab-dot", children: colorDot || /* @__PURE__ */ jsx(CardDot, {}) });
|
|
25
24
|
}
|
|
26
25
|
if (isIconPrefix(rest)) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
component: prefixIcon
|
|
32
|
-
}));
|
|
26
|
+
const {
|
|
27
|
+
prefixIcon
|
|
28
|
+
} = rest;
|
|
29
|
+
return /* @__PURE__ */ jsx(CardIconPrefix, { "data-testid": "card-tab-icon", children: /* @__PURE__ */ jsx(Icon, { component: prefixIcon }) });
|
|
33
30
|
}
|
|
34
|
-
return
|
|
31
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
35
32
|
}, [rest]);
|
|
36
|
-
|
|
33
|
+
const handleElement = useMemo(() => {
|
|
37
34
|
if (isHandlePrefix(rest) || draggable) {
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
className: "ds-card-tabs__handle-icon sortable-drag",
|
|
43
|
-
component: /*#__PURE__*/React.createElement(DragHandleM, null)
|
|
44
|
-
}), ' ');
|
|
35
|
+
return /* @__PURE__ */ jsxs(CardDragPrefix, { "data-testid": "card-tab-handle", persistent: rest.prefix === prefixType.HANDLE, ...dragHandleProps, children: [
|
|
36
|
+
/* @__PURE__ */ jsx(Icon, { className: "ds-card-tabs__handle-icon sortable-drag", component: /* @__PURE__ */ jsx(DragHandleM, {}) }),
|
|
37
|
+
" "
|
|
38
|
+
] });
|
|
45
39
|
}
|
|
46
|
-
return
|
|
40
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
47
41
|
}, [dragHandleProps, draggable, rest]);
|
|
48
|
-
return
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
return /* @__PURE__ */ jsxs(CardTabPrefix$1, { "data-testid": "card-tab-prefix", children: [
|
|
43
|
+
prefixElement,
|
|
44
|
+
handleElement
|
|
45
|
+
] });
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
CardTabPrefix as default
|
|
51
49
|
};
|
|
52
|
-
export default CardTabPrefix;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DotPrefixProps, HandlePrefixProps, IconPrefixProps, PrefixProps, TagPrefixProps } from '../CardTab.types';
|
|
2
2
|
export declare const isTagPrefix: (props: PrefixProps) => props is TagPrefixProps;
|
|
3
3
|
export declare const isDotPrefix: (props: PrefixProps) => props is DotPrefixProps;
|
|
4
4
|
export declare const isIconPrefix: (props: PrefixProps) => props is IconPrefixProps;
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
-
import { prefixType } from
|
|
2
|
-
|
|
1
|
+
import { prefixType } from "../CardTab.types.js";
|
|
2
|
+
const isTagPrefix = (props) => {
|
|
3
3
|
return props.prefix === prefixType.TAG;
|
|
4
4
|
};
|
|
5
|
-
|
|
5
|
+
const isDotPrefix = (props) => {
|
|
6
6
|
return props.prefix === prefixType.DOT;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
const isIconPrefix = (props) => {
|
|
9
9
|
return props.prefix === prefixType.ICON;
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
const isHandlePrefix = (props) => {
|
|
12
12
|
return props.prefix === prefixType.HANDLE;
|
|
13
|
-
};
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
isDotPrefix,
|
|
16
|
+
isHandlePrefix,
|
|
17
|
+
isIconPrefix,
|
|
18
|
+
isTagPrefix
|
|
19
|
+
};
|
package/dist/CardTabs.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CardTabsProps } from './CardTabs.types';
|
|
3
3
|
declare const CardTabs: <IdType extends string | number>({ className, onChangeOrder, onAddTab, maxTabsCount, children, addTabLabel, ...htmlAttributes }: CardTabsProps<IdType>) => React.JSX.Element;
|
|
4
4
|
export default CardTabs;
|
package/dist/CardTabs.js
CHANGED
|
@@ -1,59 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
19
|
-
var handleChangeOrder = function handleChangeOrder(newOrder) {
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Children, isValidElement, cloneElement } from "react";
|
|
3
|
+
import Button from "@synerise/ds-button";
|
|
4
|
+
import { defaultColorsOrder } from "@synerise/ds-core";
|
|
5
|
+
import Sortable from "@synerise/ds-sortable";
|
|
6
|
+
import CardTab from "./CardTab/CardTab.js";
|
|
7
|
+
import { CardTabsAddButton, CardTabsContainer } from "./CardTabs.styles.js";
|
|
8
|
+
const CardTabs = ({
|
|
9
|
+
className,
|
|
10
|
+
onChangeOrder,
|
|
11
|
+
onAddTab,
|
|
12
|
+
maxTabsCount,
|
|
13
|
+
children = [],
|
|
14
|
+
addTabLabel,
|
|
15
|
+
...htmlAttributes
|
|
16
|
+
}) => {
|
|
17
|
+
const handleChangeOrder = (newOrder) => {
|
|
20
18
|
onChangeOrder && onChangeOrder(newOrder);
|
|
21
19
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}));
|
|
30
|
-
var childrenCount = Children.count(children);
|
|
31
|
-
var childrenData = Children.map(children, function (child, i) {
|
|
32
|
-
return _extends({}, child.props, {
|
|
33
|
-
color: defaultColorsOrder[i % defaultColorsOrder.length],
|
|
34
|
-
draggable: childrenCount > 1 && (Boolean(onChangeOrder) || child.props.draggable)
|
|
35
|
-
}, child.props.keyId ? {
|
|
20
|
+
const addTab = onAddTab && /* @__PURE__ */ jsx(CardTabsAddButton, { className: "ds-card-tabs-nodrag", "data-testid": "card-tabs-add-button", children: /* @__PURE__ */ jsx(Button.Creator, { disabled: !!maxTabsCount && Children.toArray(children).length >= maxTabsCount, label: addTabLabel ?? "", onClick: onAddTab }) });
|
|
21
|
+
const childrenCount = Children.count(children);
|
|
22
|
+
const childrenData = Children.map(children, (child, i) => ({
|
|
23
|
+
...child.props,
|
|
24
|
+
color: defaultColorsOrder[i % defaultColorsOrder.length],
|
|
25
|
+
draggable: childrenCount > 1 && (Boolean(onChangeOrder) || child.props.draggable),
|
|
26
|
+
...child.props.keyId ? {
|
|
36
27
|
key: child.props.keyId
|
|
37
|
-
} : {}
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
28
|
+
} : {}
|
|
29
|
+
}));
|
|
30
|
+
const renderChildren = () => /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child, i) => {
|
|
31
|
+
const {
|
|
32
|
+
props
|
|
33
|
+
} = child;
|
|
34
|
+
return isValidElement(child) && cloneElement(child, {
|
|
35
|
+
...props.color ? {} : {
|
|
43
36
|
color: defaultColorsOrder[i % defaultColorsOrder.length]
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
37
|
+
},
|
|
38
|
+
draggable: childrenCount > 1 && (Boolean(onChangeOrder) || props.draggable)
|
|
39
|
+
});
|
|
40
|
+
}) });
|
|
41
|
+
return /* @__PURE__ */ jsx(CardTabsContainer, { "data-testid": "card-tabs-container", ...htmlAttributes, className: `ds-card-tabs ${className || ""}`, children: onChangeOrder && childrenCount > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42
|
+
/* @__PURE__ */ jsx(Sortable, { items: childrenData, ItemComponent: CardTab, onOrderChange: handleChangeOrder }),
|
|
43
|
+
addTab
|
|
44
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
45
|
+
renderChildren(),
|
|
46
|
+
addTab
|
|
47
|
+
] }) });
|
|
48
|
+
};
|
|
49
|
+
export {
|
|
50
|
+
CardTabs as default
|
|
58
51
|
};
|
|
59
|
-
export default CardTabs;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const CardTabsContainer: import(
|
|
2
|
-
export declare const CardTabsAddButton: import(
|
|
1
|
+
export declare const CardTabsContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const CardTabsAddButton: import('styled-components').StyledComponent<"span", any, {}, never>;
|
package/dist/CardTabs.styles.js
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import { ButtonStyles } from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { ButtonStyles } from "@synerise/ds-button";
|
|
3
|
+
const CardTabsContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "CardTabsstyles__CardTabsContainer",
|
|
5
5
|
componentId: "sc-1uu9dja-0"
|
|
6
6
|
})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;min-width:588px;gap:16px 12px;flex-wrap:wrap;padding-bottom:16px;@media (max-width:588px){.ds-button-creator{width:48px !important;", "{display:none;}}}"], ButtonStyles.Creator.CreatorLabel);
|
|
7
|
-
|
|
7
|
+
const CardTabsAddButton = /* @__PURE__ */ styled.span.withConfig({
|
|
8
8
|
displayName: "CardTabsstyles__CardTabsAddButton",
|
|
9
9
|
componentId: "sc-1uu9dja-1"
|
|
10
|
-
})(["display:flex;flex-grow:1;flex-shrink:0;"]);
|
|
10
|
+
})(["display:flex;flex-grow:1;flex-shrink:0;"]);
|
|
11
|
+
export {
|
|
12
|
+
CardTabsAddButton,
|
|
13
|
+
CardTabsContainer
|
|
14
|
+
};
|
package/dist/CardTabs.types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { WithHTMLAttributes } from '@synerise/ds-utils';
|
|
3
|
+
import { CardTabProps } from './CardTab/CardTab.types';
|
|
4
4
|
export type CardTabsPropsBase<IdType extends string | number> = {
|
|
5
5
|
onChangeOrder?: (newOrder: CardTabProps<IdType>[]) => void;
|
|
6
6
|
onAddTab?: () => void;
|
package/dist/CardTabs.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
CardTabs:
|
|
9
|
-
CardTab:
|
|
10
|
-
};
|
|
1
|
+
import * as CardTab_CardTab_styles from "./CardTab/CardTab.styles.js";
|
|
2
|
+
import { CardDot } from "./CardTab/CardTab.styles.js";
|
|
3
|
+
import * as CardTabs_styles from "./CardTabs.styles.js";
|
|
4
|
+
import { default as default2 } from "./CardTabs.js";
|
|
5
|
+
import { default as default3 } from "./CardTab/CardTab.js";
|
|
6
|
+
import { prefixType } from "./CardTab/CardTab.types.js";
|
|
7
|
+
const CardTabsStyles = {
|
|
8
|
+
CardTabs: CardTabs_styles,
|
|
9
|
+
CardTab: CardTab_CardTab_styles
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
CardDot,
|
|
13
|
+
default3 as CardTab,
|
|
14
|
+
CardTabsStyles,
|
|
15
|
+
default2 as default,
|
|
16
|
+
prefixType
|
|
17
|
+
};
|
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/dist/utils.js
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
const getColor = (isActive, activeColor, defaultColor) => {
|
|
2
2
|
if (isActive) {
|
|
3
3
|
return activeColor;
|
|
4
4
|
}
|
|
5
5
|
return defaultColor;
|
|
6
6
|
};
|
|
7
|
-
|
|
7
|
+
const getLighterColor = (color) => {
|
|
8
8
|
if (color) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
if (matches
|
|
12
|
-
|
|
9
|
+
const levelRegex = /(\d){3}$/g;
|
|
10
|
+
const matches = color.match(levelRegex);
|
|
11
|
+
if (matches?.length) {
|
|
12
|
+
const level = parseInt(matches[0], 10);
|
|
13
13
|
return color.replace(levelRegex, (level - 100).toString());
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
return color;
|
|
17
|
-
};
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
getColor,
|
|
20
|
+
getLighterColor
|
|
21
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-card-tabs",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.25",
|
|
4
4
|
"description": "CardTabs UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^1.5.
|
|
39
|
-
"@synerise/ds-cruds": "^1.1.
|
|
40
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
41
|
-
"@synerise/ds-icon": "^1.15.
|
|
42
|
-
"@synerise/ds-inline-edit": "^1.1.
|
|
43
|
-
"@synerise/ds-menu": "^1.4.
|
|
44
|
-
"@synerise/ds-sortable": "^1.3.
|
|
45
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
46
|
-
"@synerise/ds-typography": "^1.1.
|
|
47
|
-
"@synerise/ds-utils": "^1.7.
|
|
38
|
+
"@synerise/ds-button": "^1.5.19",
|
|
39
|
+
"@synerise/ds-cruds": "^1.1.3",
|
|
40
|
+
"@synerise/ds-dropdown": "^1.3.3",
|
|
41
|
+
"@synerise/ds-icon": "^1.15.2",
|
|
42
|
+
"@synerise/ds-inline-edit": "^1.1.25",
|
|
43
|
+
"@synerise/ds-menu": "^1.4.14",
|
|
44
|
+
"@synerise/ds-sortable": "^1.3.14",
|
|
45
|
+
"@synerise/ds-tooltip": "^1.4.11",
|
|
46
|
+
"@synerise/ds-typography": "^1.1.14",
|
|
47
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"@synerise/ds-core": "*",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"styled-components": "^5.3.3",
|
|
55
55
|
"vitest": "4"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
|
|
58
58
|
}
|