@redneckz/wildless-cms-uni-blocks 0.5.2 → 0.5.3
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/bin/migrate.js +2 -0
- package/bin/migrateContentUnit.js +26 -0
- package/bin/migration-scripts/0.4.0.js +3 -0
- package/bin/migration-scripts/0.4.1.js +3 -0
- package/bin/migration-scripts/0.4.5.js +109 -0
- package/bin/migration-scripts/0.4.5.spec.ts +352 -0
- package/bin/migration-scripts/index.js +21 -0
- package/bin/utils.js +24 -0
- package/bundle/blocks.schema.json +1 -1
- package/bundle/bundle.umd.js +8 -6
- package/bundle/bundle.umd.min.js +1 -1
- package/dist/components/Tabs/TabsContent.d.ts +8 -3
- package/dist/components/Tabs/renderGroupTab.js +1 -1
- package/dist/components/Tabs/renderGroupTab.js.map +1 -1
- package/dist/ui-kit/Button/ButtonInner.js +3 -2
- package/dist/ui-kit/Button/ButtonInner.js.map +1 -1
- package/dist/ui-kit/Button/ButtonSection.js +3 -2
- package/dist/ui-kit/Button/ButtonSection.js.map +1 -1
- package/dist/ui-kit/Select/Select.js +1 -1
- package/dist/ui-kit/Select/Select.js.map +1 -1
- package/lib/common.css +1 -1
- package/lib/components/Tabs/TabsContent.d.ts +8 -3
- package/lib/components/Tabs/renderGroupTab.js +1 -1
- package/lib/components/Tabs/renderGroupTab.js.map +1 -1
- package/lib/ui-kit/Button/ButtonInner.js +3 -2
- package/lib/ui-kit/Button/ButtonInner.js.map +1 -1
- package/lib/ui-kit/Button/ButtonSection.js +3 -2
- package/lib/ui-kit/Button/ButtonSection.js.map +1 -1
- package/lib/ui-kit/Select/Select.js +1 -1
- package/lib/ui-kit/Select/Select.js.map +1 -1
- package/mobile/bundle/bundle.umd.js +7 -5
- package/mobile/bundle/bundle.umd.min.js +1 -1
- package/mobile/dist/components/Tabs/TabsContent.d.ts +8 -3
- package/mobile/dist/components/Tabs/renderGroupTab.js +1 -1
- package/mobile/dist/components/Tabs/renderGroupTab.js.map +1 -1
- package/mobile/dist/ui-kit/Button/ButtonInner.js +3 -2
- package/mobile/dist/ui-kit/Button/ButtonInner.js.map +1 -1
- package/mobile/dist/ui-kit/Button/ButtonSection.js +3 -2
- package/mobile/dist/ui-kit/Button/ButtonSection.js.map +1 -1
- package/mobile/dist/ui-kit/Select/Select.js +1 -1
- package/mobile/dist/ui-kit/Select/Select.js.map +1 -1
- package/mobile/lib/components/Tabs/TabsContent.d.ts +8 -3
- package/mobile/lib/components/Tabs/renderGroupTab.js +1 -1
- package/mobile/lib/components/Tabs/renderGroupTab.js.map +1 -1
- package/mobile/lib/ui-kit/Button/ButtonInner.js +3 -2
- package/mobile/lib/ui-kit/Button/ButtonInner.js.map +1 -1
- package/mobile/lib/ui-kit/Button/ButtonSection.js +3 -2
- package/mobile/lib/ui-kit/Button/ButtonSection.js.map +1 -1
- package/mobile/lib/ui-kit/Select/Select.js +1 -1
- package/mobile/lib/ui-kit/Select/Select.js.map +1 -1
- package/mobile/src/components/Tabs/TabsContent.ts +8 -3
- package/mobile/src/components/Tabs/renderGroupTab.tsx +2 -1
- package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap +6 -6
- package/mobile/src/ui-kit/Button/ButtonInner.tsx +3 -2
- package/mobile/src/ui-kit/Button/ButtonSection.tsx +9 -4
- package/mobile/src/ui-kit/Select/Select.tsx +1 -1
- package/package.json +5 -1
- package/src/components/Tabs/TabsContent.ts +8 -3
- package/src/components/Tabs/renderGroupTab.tsx +2 -1
- package/src/components/__snapshots__/Blocks.spec.tsx.snap +6 -6
- package/src/ui-kit/Button/ButtonInner.tsx +3 -2
- package/src/ui-kit/Button/ButtonSection.tsx +9 -4
- package/src/ui-kit/Select/Select.tsx +1 -1
- package/dist/ui-kit/Tabs/Tabs.d.ts +0 -2
- package/dist/ui-kit/Tabs/Tabs.js +0 -17
- package/dist/ui-kit/Tabs/Tabs.js.map +0 -1
- package/dist/ui-kit/Tabs/TabsProps.d.ts +0 -17
- package/dist/ui-kit/Tabs/TabsProps.js +0 -2
- package/dist/ui-kit/Tabs/TabsProps.js.map +0 -1
- package/lib/ui-kit/Tabs/Tabs.d.ts +0 -2
- package/lib/ui-kit/Tabs/Tabs.js +0 -15
- package/lib/ui-kit/Tabs/Tabs.js.map +0 -1
- package/lib/ui-kit/Tabs/TabsProps.d.ts +0 -17
- package/lib/ui-kit/Tabs/TabsProps.js +0 -2
- package/lib/ui-kit/Tabs/TabsProps.js.map +0 -1
- package/mobile/dist/ui-kit/Tabs/Tabs.d.ts +0 -2
- package/mobile/dist/ui-kit/Tabs/Tabs.js +0 -17
- package/mobile/dist/ui-kit/Tabs/Tabs.js.map +0 -1
- package/mobile/dist/ui-kit/Tabs/TabsProps.d.ts +0 -17
- package/mobile/dist/ui-kit/Tabs/TabsProps.js +0 -2
- package/mobile/dist/ui-kit/Tabs/TabsProps.js.map +0 -1
- package/mobile/lib/ui-kit/Tabs/Tabs.d.ts +0 -2
- package/mobile/lib/ui-kit/Tabs/Tabs.js +0 -15
- package/mobile/lib/ui-kit/Tabs/Tabs.js.map +0 -1
- package/mobile/lib/ui-kit/Tabs/TabsProps.d.ts +0 -17
- package/mobile/lib/ui-kit/Tabs/TabsProps.js +0 -2
- package/mobile/lib/ui-kit/Tabs/TabsProps.js.map +0 -1
- package/mobile/src/ui-kit/Tabs/Tabs.tsx +0 -52
- package/mobile/src/ui-kit/Tabs/TabsProps.ts +0 -20
- package/src/ui-kit/Tabs/Tabs.tsx +0 -52
- package/src/ui-kit/Tabs/TabsProps.ts +0 -20
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import type { LinkProps } from '../../model/LinkProps';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* @title Группа
|
|
5
|
+
*/
|
|
3
6
|
export interface GroupTab {
|
|
4
|
-
/** @default group */
|
|
5
7
|
type: 'group';
|
|
6
8
|
/** @title Тег */
|
|
7
9
|
ref?: string;
|
|
@@ -9,13 +11,16 @@ export interface GroupTab {
|
|
|
9
11
|
title?: string;
|
|
10
12
|
}
|
|
11
13
|
|
|
14
|
+
/**
|
|
15
|
+
* @title Ссылка
|
|
16
|
+
*/
|
|
12
17
|
export type LinkTab = LinkProps & {
|
|
13
|
-
/** @default link */
|
|
14
18
|
type: 'link';
|
|
15
19
|
};
|
|
16
20
|
|
|
17
21
|
/**
|
|
18
|
-
*
|
|
22
|
+
* @title Таб
|
|
23
|
+
* @default {"type": "group"}
|
|
19
24
|
*/
|
|
20
25
|
export type Tab = GroupTab | LinkTab;
|
|
21
26
|
|
|
@@ -9,7 +9,8 @@ import {
|
|
|
9
9
|
} from './tabItemClasses';
|
|
10
10
|
import type { GroupTab } from './TabsContent';
|
|
11
11
|
|
|
12
|
-
const BADGE_CLASSES =
|
|
12
|
+
const BADGE_CLASSES =
|
|
13
|
+
'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
|
|
13
14
|
const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
|
|
14
15
|
const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
|
|
15
16
|
|
|
@@ -353,7 +353,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
|
|
|
353
353
|
target="_blank"
|
|
354
354
|
>
|
|
355
355
|
<div
|
|
356
|
-
class="flex items-center justify-center gap-2 py-4 px-9
|
|
356
|
+
class="group flex items-center justify-center gap-2 py-4 px-9 "
|
|
357
357
|
>
|
|
358
358
|
<div>
|
|
359
359
|
<div
|
|
@@ -894,7 +894,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
894
894
|
Город
|
|
895
895
|
</span>
|
|
896
896
|
<select
|
|
897
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
897
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
898
898
|
placeholder=""
|
|
899
899
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
900
900
|
>
|
|
@@ -917,7 +917,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
917
917
|
Отделение
|
|
918
918
|
</span>
|
|
919
919
|
<select
|
|
920
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
920
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
921
921
|
placeholder=""
|
|
922
922
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
923
923
|
>
|
|
@@ -991,7 +991,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
991
991
|
Размер
|
|
992
992
|
</span>
|
|
993
993
|
<select
|
|
994
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
994
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
995
995
|
placeholder=""
|
|
996
996
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
997
997
|
>
|
|
@@ -1014,7 +1014,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
1014
1014
|
Параметры ячейки, мм (ВхШхД)
|
|
1015
1015
|
</span>
|
|
1016
1016
|
<select
|
|
1017
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
1017
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
1018
1018
|
placeholder=""
|
|
1019
1019
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
1020
1020
|
>
|
|
@@ -1080,7 +1080,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
1080
1080
|
role="button"
|
|
1081
1081
|
>
|
|
1082
1082
|
<div
|
|
1083
|
-
class="flex items-center justify-center gap-2 py-4 px-9
|
|
1083
|
+
class="group flex items-center justify-center gap-2 py-4 px-9 "
|
|
1084
1084
|
>
|
|
1085
1085
|
<div>
|
|
1086
1086
|
<div
|
|
@@ -24,7 +24,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
|
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
const getButtonStyle = (props: ButtonInnerProps) => {
|
|
27
|
-
const { version, aboveText, rounded } = props;
|
|
27
|
+
const { className = '', version, aboveText, rounded } = props;
|
|
28
28
|
|
|
29
29
|
if (version === 'link') {
|
|
30
30
|
return '';
|
|
@@ -33,9 +33,10 @@ const getButtonStyle = (props: ButtonInnerProps) => {
|
|
|
33
33
|
const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
|
|
34
34
|
|
|
35
35
|
return [
|
|
36
|
-
'flex items-center justify-center',
|
|
36
|
+
'group flex items-center justify-center',
|
|
37
37
|
isWithText(props) ? withTextStyle : 'h-12 w-12',
|
|
38
38
|
rounded ? 'rounded-full' : '',
|
|
39
|
+
className,
|
|
39
40
|
].join(' ');
|
|
40
41
|
};
|
|
41
42
|
|
|
@@ -20,19 +20,24 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
|
|
|
20
20
|
) : null;
|
|
21
21
|
});
|
|
22
22
|
|
|
23
|
-
function renderButton(
|
|
23
|
+
function renderButton(
|
|
24
|
+
{ icon, iconRight, version = 'primary', ...button }: ButtonWithIconProps,
|
|
25
|
+
i: number,
|
|
26
|
+
) {
|
|
24
27
|
if (!button?.text) {
|
|
25
28
|
return null;
|
|
26
29
|
}
|
|
30
|
+
const imgStyle = version === 'primary' ? 'group-hover:text-black' : 'group-hover:text-white';
|
|
27
31
|
|
|
28
32
|
return icon ? (
|
|
29
33
|
<Button
|
|
30
34
|
key={String(i)}
|
|
31
|
-
appendLeft={<Img image={icon} width="24" height="24" asSVG />}
|
|
32
|
-
appendRight={<Img image={iconRight} width="24" height="24" asSVG />}
|
|
35
|
+
appendLeft={<Img imageClassName={imgStyle} image={icon} width="24" height="24" asSVG />}
|
|
36
|
+
appendRight={<Img imageClassName={imgStyle} image={iconRight} width="24" height="24" asSVG />}
|
|
37
|
+
version={version}
|
|
33
38
|
{...button}
|
|
34
39
|
/>
|
|
35
40
|
) : (
|
|
36
|
-
<Button key={String(i)} {...button} />
|
|
41
|
+
<Button key={String(i)} version={version} {...button} />
|
|
37
42
|
);
|
|
38
43
|
}
|
|
@@ -16,7 +16,7 @@ export const Select = JSX<SelectProps>(
|
|
|
16
16
|
({ className = '', id, name, children, value, onChange }) => {
|
|
17
17
|
return (
|
|
18
18
|
<select
|
|
19
|
-
className={`appearance-none ${className}`}
|
|
19
|
+
className={`appearance-none pl-0.5 ${className}`}
|
|
20
20
|
style={selectStyle}
|
|
21
21
|
id={id}
|
|
22
22
|
name={name || id}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redneckz/wildless-cms-uni-blocks",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ЦК",
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
"./*.cjs": "./*.cjs"
|
|
56
56
|
},
|
|
57
57
|
"files": [
|
|
58
|
+
"bin",
|
|
58
59
|
"lib",
|
|
59
60
|
"mobile/lib",
|
|
60
61
|
"dist",
|
|
@@ -93,6 +94,7 @@
|
|
|
93
94
|
"lint": "eslint ./src",
|
|
94
95
|
"pretest": "npm run prepare && npm run lint",
|
|
95
96
|
"test": "jest --coverage",
|
|
97
|
+
"test:bin": "jest --config ./jest.config.bin.js",
|
|
96
98
|
"cosmos": "cosmos",
|
|
97
99
|
"cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
|
|
98
100
|
"precosmos:export": "npm run build:icons",
|
|
@@ -121,6 +123,7 @@
|
|
|
121
123
|
"unified": "^10.1.2"
|
|
122
124
|
},
|
|
123
125
|
"devDependencies": {
|
|
126
|
+
"@babel/preset-env": "^7.19.4",
|
|
124
127
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
125
128
|
"@rollup/plugin-typescript": "^8.3.3",
|
|
126
129
|
"@size-limit/file": "^7.0.8",
|
|
@@ -132,6 +135,7 @@
|
|
|
132
135
|
"@typescript-eslint/experimental-utils": "^5.30.6",
|
|
133
136
|
"@typescript-eslint/parser": "^5.30.6",
|
|
134
137
|
"autoprefixer": "^10.4.7",
|
|
138
|
+
"babel-jest": "^28.1.3",
|
|
135
139
|
"copyfiles": "^2.4.1",
|
|
136
140
|
"css-loader": "^6.7.1",
|
|
137
141
|
"cssnano": "^5.1.11",
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import type { LinkProps } from '../../model/LinkProps';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* @title Группа
|
|
5
|
+
*/
|
|
3
6
|
export interface GroupTab {
|
|
4
|
-
/** @default group */
|
|
5
7
|
type: 'group';
|
|
6
8
|
/** @title Тег */
|
|
7
9
|
ref?: string;
|
|
@@ -9,13 +11,16 @@ export interface GroupTab {
|
|
|
9
11
|
title?: string;
|
|
10
12
|
}
|
|
11
13
|
|
|
14
|
+
/**
|
|
15
|
+
* @title Ссылка
|
|
16
|
+
*/
|
|
12
17
|
export type LinkTab = LinkProps & {
|
|
13
|
-
/** @default link */
|
|
14
18
|
type: 'link';
|
|
15
19
|
};
|
|
16
20
|
|
|
17
21
|
/**
|
|
18
|
-
*
|
|
22
|
+
* @title Таб
|
|
23
|
+
* @default {"type": "group"}
|
|
19
24
|
*/
|
|
20
25
|
export type Tab = GroupTab | LinkTab;
|
|
21
26
|
|
|
@@ -9,7 +9,8 @@ import {
|
|
|
9
9
|
} from './tabItemClasses';
|
|
10
10
|
import type { GroupTab } from './TabsContent';
|
|
11
11
|
|
|
12
|
-
const BADGE_CLASSES =
|
|
12
|
+
const BADGE_CLASSES =
|
|
13
|
+
'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
|
|
13
14
|
const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
|
|
14
15
|
const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
|
|
15
16
|
|
|
@@ -353,7 +353,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
|
|
|
353
353
|
target="_blank"
|
|
354
354
|
>
|
|
355
355
|
<div
|
|
356
|
-
class="flex items-center justify-center gap-2 py-4 px-9
|
|
356
|
+
class="group flex items-center justify-center gap-2 py-4 px-9 "
|
|
357
357
|
>
|
|
358
358
|
<div>
|
|
359
359
|
<div
|
|
@@ -894,7 +894,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
894
894
|
Город
|
|
895
895
|
</span>
|
|
896
896
|
<select
|
|
897
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
897
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
898
898
|
placeholder=""
|
|
899
899
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
900
900
|
>
|
|
@@ -917,7 +917,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
917
917
|
Отделение
|
|
918
918
|
</span>
|
|
919
919
|
<select
|
|
920
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
920
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
921
921
|
placeholder=""
|
|
922
922
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
923
923
|
>
|
|
@@ -991,7 +991,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
991
991
|
Размер
|
|
992
992
|
</span>
|
|
993
993
|
<select
|
|
994
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
994
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
995
995
|
placeholder=""
|
|
996
996
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
997
997
|
>
|
|
@@ -1014,7 +1014,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
1014
1014
|
Параметры ячейки, мм (ВхШхД)
|
|
1015
1015
|
</span>
|
|
1016
1016
|
<select
|
|
1017
|
-
class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
1017
|
+
class="appearance-none pl-0.5 h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
|
|
1018
1018
|
placeholder=""
|
|
1019
1019
|
style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
|
|
1020
1020
|
>
|
|
@@ -1080,7 +1080,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
|
|
|
1080
1080
|
role="button"
|
|
1081
1081
|
>
|
|
1082
1082
|
<div
|
|
1083
|
-
class="flex items-center justify-center gap-2 py-4 px-9
|
|
1083
|
+
class="group flex items-center justify-center gap-2 py-4 px-9 "
|
|
1084
1084
|
>
|
|
1085
1085
|
<div>
|
|
1086
1086
|
<div
|
|
@@ -24,7 +24,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
|
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
const getButtonStyle = (props: ButtonInnerProps) => {
|
|
27
|
-
const { version, aboveText, rounded } = props;
|
|
27
|
+
const { className = '', version, aboveText, rounded } = props;
|
|
28
28
|
|
|
29
29
|
if (version === 'link') {
|
|
30
30
|
return '';
|
|
@@ -33,9 +33,10 @@ const getButtonStyle = (props: ButtonInnerProps) => {
|
|
|
33
33
|
const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
|
|
34
34
|
|
|
35
35
|
return [
|
|
36
|
-
'flex items-center justify-center',
|
|
36
|
+
'group flex items-center justify-center',
|
|
37
37
|
isWithText(props) ? withTextStyle : 'h-12 w-12',
|
|
38
38
|
rounded ? 'rounded-full' : '',
|
|
39
|
+
className,
|
|
39
40
|
].join(' ');
|
|
40
41
|
};
|
|
41
42
|
|
|
@@ -20,19 +20,24 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
|
|
|
20
20
|
) : null;
|
|
21
21
|
});
|
|
22
22
|
|
|
23
|
-
function renderButton(
|
|
23
|
+
function renderButton(
|
|
24
|
+
{ icon, iconRight, version = 'primary', ...button }: ButtonWithIconProps,
|
|
25
|
+
i: number,
|
|
26
|
+
) {
|
|
24
27
|
if (!button?.text) {
|
|
25
28
|
return null;
|
|
26
29
|
}
|
|
30
|
+
const imgStyle = version === 'primary' ? 'group-hover:text-black' : 'group-hover:text-white';
|
|
27
31
|
|
|
28
32
|
return icon ? (
|
|
29
33
|
<Button
|
|
30
34
|
key={String(i)}
|
|
31
|
-
appendLeft={<Img image={icon} width="24" height="24" asSVG />}
|
|
32
|
-
appendRight={<Img image={iconRight} width="24" height="24" asSVG />}
|
|
35
|
+
appendLeft={<Img imageClassName={imgStyle} image={icon} width="24" height="24" asSVG />}
|
|
36
|
+
appendRight={<Img imageClassName={imgStyle} image={iconRight} width="24" height="24" asSVG />}
|
|
37
|
+
version={version}
|
|
33
38
|
{...button}
|
|
34
39
|
/>
|
|
35
40
|
) : (
|
|
36
|
-
<Button key={String(i)} {...button} />
|
|
41
|
+
<Button key={String(i)} version={version} {...button} />
|
|
37
42
|
);
|
|
38
43
|
}
|
|
@@ -16,7 +16,7 @@ export const Select = JSX<SelectProps>(
|
|
|
16
16
|
({ className = '', id, name, children, value, onChange }) => {
|
|
17
17
|
return (
|
|
18
18
|
<select
|
|
19
|
-
className={`appearance-none ${className}`}
|
|
19
|
+
className={`appearance-none pl-0.5 ${className}`}
|
|
20
20
|
style={selectStyle}
|
|
21
21
|
id={id}
|
|
22
22
|
name={name || id}
|
package/dist/ui-kit/Tabs/Tabs.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
exports.Tabs = void 0;
|
|
3
|
-
const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
|
|
4
|
-
const uni_jsx_1 = require("@redneckz/uni-jsx");
|
|
5
|
-
const Img_1 = require("../Img/Img");
|
|
6
|
-
const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
|
|
7
|
-
const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
|
|
8
|
-
exports.Tabs = (0, uni_jsx_1.JSX)(({ tabs, currentTabIndex, onTabClick }) => {
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab(currentTabIndex, onTabClick)) }));
|
|
10
|
-
});
|
|
11
|
-
const tabDescriptionStyle = (isActive = false) => `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
|
|
12
|
-
const renderTab = (currentTabIndex, onTabClick) => (tab, index) => {
|
|
13
|
-
const isActive = currentTabIndex === index;
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": isActive, children: [tab?.icon ? renderIcon(tab, isActive) : null, (0, jsx_runtime_1.jsxs)("div", { children: [tab?.title ? (0, jsx_runtime_1.jsx)("h3", { className: "m-0 text-l font-medium", children: tab?.title }) : null, tab?.description ? ((0, jsx_runtime_1.jsx)("span", { className: tabDescriptionStyle(isActive), children: tab?.description })) : null] })] }, String(index)));
|
|
15
|
-
};
|
|
16
|
-
const renderIcon = (tab, isActive) => ((0, jsx_runtime_1.jsx)("div", { className: "h-full mt-1", children: (0, jsx_runtime_1.jsx)(Img_1.Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
|
|
17
|
-
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/Tabs.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,oCAAiC;AAGjC,MAAM,SAAS,GAAG,0DAA0D,CAAC;AAC7E,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAE7D,QAAA,IAAI,GAAG,IAAA,aAAG,EAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,gCAAK,SAAS,EAAC,4CAA4C,EAAC,IAAI,EAAC,SAAS,YACvE,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,GAC9C,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CAC/C,iBAAiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;AAE3D,MAAM,SAAS,GACb,CAAC,eAAuB,EAAE,UAA2B,EAAE,EAAE,CAAC,CAAC,GAAQ,EAAE,KAAa,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,eAAe,KAAK,KAAK,CAAC;IAE3C,OAAO,CACL,iCAEE,SAAS,EAAE,gEACT,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAChC,EAAE,EACF,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,mBACjB,QAAQ,aAEtB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7C,4CACG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,+BAAI,SAAS,EAAC,wBAAwB,YAAE,GAAG,EAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC5E,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAClB,iCAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,CAAC,YAAG,GAAG,EAAE,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,IAAI,IACJ,KAdD,MAAM,CAAC,KAAK,CAAC,CAed,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAE,QAAiB,EAAE,EAAE,CAAC,CAClD,gCAAK,SAAS,EAAC,aAAa,YAC1B,uBAAC,SAAG,IACF,SAAS,EAAE,gBAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrD,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,UAAU,EAC9B,KAAK,EAAE,CAAC,QAAQ,GAChB,GACE,CACP,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { Picture } from '../../model/Picture';
|
|
2
|
-
/**
|
|
3
|
-
* @title Вкладка
|
|
4
|
-
*/
|
|
5
|
-
export interface Tab {
|
|
6
|
-
/** @title Имя вкладки */
|
|
7
|
-
title?: string;
|
|
8
|
-
/** @title Описание */
|
|
9
|
-
description?: string;
|
|
10
|
-
icon?: Picture;
|
|
11
|
-
}
|
|
12
|
-
export declare type TabClickHandler = (tabIndex: number) => void;
|
|
13
|
-
export interface TabsProps {
|
|
14
|
-
tabs?: Tab[];
|
|
15
|
-
currentTabIndex: number;
|
|
16
|
-
onTabClick: TabClickHandler;
|
|
17
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabsProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/TabsProps.ts"],"names":[],"mappings":""}
|
package/lib/ui-kit/Tabs/Tabs.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
|
-
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
-
import { Img } from '../Img/Img.js';
|
|
4
|
-
const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
|
|
5
|
-
const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
|
|
6
|
-
export const Tabs = JSX(({ tabs, currentTabIndex, onTabClick }) => {
|
|
7
|
-
return (_jsx("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab(currentTabIndex, onTabClick)) }));
|
|
8
|
-
});
|
|
9
|
-
const tabDescriptionStyle = (isActive = false) => `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
|
|
10
|
-
const renderTab = (currentTabIndex, onTabClick) => (tab, index) => {
|
|
11
|
-
const isActive = currentTabIndex === index;
|
|
12
|
-
return (_jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": isActive, children: [tab?.icon ? renderIcon(tab, isActive) : null, _jsxs("div", { children: [tab?.title ? _jsx("h3", { className: "m-0 text-l font-medium", children: tab?.title }) : null, tab?.description ? (_jsx("span", { className: tabDescriptionStyle(isActive), children: tab?.description })) : null] })] }, String(index)));
|
|
13
|
-
};
|
|
14
|
-
const renderIcon = (tab, isActive) => (_jsx("div", { className: "h-full mt-1", children: _jsx(Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
|
|
15
|
-
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC,MAAM,SAAS,GAAG,0DAA0D,CAAC;AAC7E,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAE1E,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,cAAK,SAAS,EAAC,4CAA4C,EAAC,IAAI,EAAC,SAAS,YACvE,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,GAC9C,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CAC/C,iBAAiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;AAE3D,MAAM,SAAS,GACb,CAAC,eAAuB,EAAE,UAA2B,EAAE,EAAE,CAAC,CAAC,GAAQ,EAAE,KAAa,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,eAAe,KAAK,KAAK,CAAC;IAE3C,OAAO,CACL,eAEE,SAAS,EAAE,gEACT,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAChC,EAAE,EACF,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,mBACjB,QAAQ,aAEtB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7C,0BACG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAC,wBAAwB,YAAE,GAAG,EAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC5E,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAClB,eAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,CAAC,YAAG,GAAG,EAAE,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,IAAI,IACJ,KAdD,MAAM,CAAC,KAAK,CAAC,CAed,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAE,QAAiB,EAAE,EAAE,CAAC,CAClD,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,GAAG,IACF,SAAS,EAAE,gBAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrD,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,UAAU,EAC9B,KAAK,EAAE,CAAC,QAAQ,GAChB,GACE,CACP,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { Picture } from '../../model/Picture';
|
|
2
|
-
/**
|
|
3
|
-
* @title Вкладка
|
|
4
|
-
*/
|
|
5
|
-
export interface Tab {
|
|
6
|
-
/** @title Имя вкладки */
|
|
7
|
-
title?: string;
|
|
8
|
-
/** @title Описание */
|
|
9
|
-
description?: string;
|
|
10
|
-
icon?: Picture;
|
|
11
|
-
}
|
|
12
|
-
export declare type TabClickHandler = (tabIndex: number) => void;
|
|
13
|
-
export interface TabsProps {
|
|
14
|
-
tabs?: Tab[];
|
|
15
|
-
currentTabIndex: number;
|
|
16
|
-
onTabClick: TabClickHandler;
|
|
17
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabsProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/TabsProps.ts"],"names":[],"mappings":""}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
exports.Tabs = void 0;
|
|
3
|
-
const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
|
|
4
|
-
const uni_jsx_1 = require("@redneckz/uni-jsx");
|
|
5
|
-
const Img_1 = require("../Img/Img");
|
|
6
|
-
const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
|
|
7
|
-
const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
|
|
8
|
-
exports.Tabs = (0, uni_jsx_1.JSX)(({ tabs, currentTabIndex, onTabClick }) => {
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab(currentTabIndex, onTabClick)) }));
|
|
10
|
-
});
|
|
11
|
-
const tabDescriptionStyle = (isActive = false) => `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
|
|
12
|
-
const renderTab = (currentTabIndex, onTabClick) => (tab, index) => {
|
|
13
|
-
const isActive = currentTabIndex === index;
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": isActive, children: [tab?.icon ? renderIcon(tab, isActive) : null, (0, jsx_runtime_1.jsxs)("div", { children: [tab?.title ? (0, jsx_runtime_1.jsx)("h3", { className: "m-0 text-l font-medium", children: tab?.title }) : null, tab?.description ? ((0, jsx_runtime_1.jsx)("span", { className: tabDescriptionStyle(isActive), children: tab?.description })) : null] })] }, String(index)));
|
|
15
|
-
};
|
|
16
|
-
const renderIcon = (tab, isActive) => ((0, jsx_runtime_1.jsx)("div", { className: "h-full mt-1", children: (0, jsx_runtime_1.jsx)(Img_1.Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
|
|
17
|
-
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/Tabs.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,oCAAiC;AAGjC,MAAM,SAAS,GAAG,0DAA0D,CAAC;AAC7E,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAE7D,QAAA,IAAI,GAAG,IAAA,aAAG,EAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,gCAAK,SAAS,EAAC,4CAA4C,EAAC,IAAI,EAAC,SAAS,YACvE,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,GAC9C,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CAC/C,iBAAiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;AAE3D,MAAM,SAAS,GACb,CAAC,eAAuB,EAAE,UAA2B,EAAE,EAAE,CAAC,CAAC,GAAQ,EAAE,KAAa,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,eAAe,KAAK,KAAK,CAAC;IAE3C,OAAO,CACL,iCAEE,SAAS,EAAE,gEACT,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAChC,EAAE,EACF,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,mBACjB,QAAQ,aAEtB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7C,4CACG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,+BAAI,SAAS,EAAC,wBAAwB,YAAE,GAAG,EAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC5E,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAClB,iCAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,CAAC,YAAG,GAAG,EAAE,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,IAAI,IACJ,KAdD,MAAM,CAAC,KAAK,CAAC,CAed,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAE,QAAiB,EAAE,EAAE,CAAC,CAClD,gCAAK,SAAS,EAAC,aAAa,YAC1B,uBAAC,SAAG,IACF,SAAS,EAAE,gBAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrD,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,UAAU,EAC9B,KAAK,EAAE,CAAC,QAAQ,GAChB,GACE,CACP,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { Picture } from '../../model/Picture';
|
|
2
|
-
/**
|
|
3
|
-
* @title Вкладка
|
|
4
|
-
*/
|
|
5
|
-
export interface Tab {
|
|
6
|
-
/** @title Имя вкладки */
|
|
7
|
-
title?: string;
|
|
8
|
-
/** @title Описание */
|
|
9
|
-
description?: string;
|
|
10
|
-
icon?: Picture;
|
|
11
|
-
}
|
|
12
|
-
export declare type TabClickHandler = (tabIndex: number) => void;
|
|
13
|
-
export interface TabsProps {
|
|
14
|
-
tabs?: Tab[];
|
|
15
|
-
currentTabIndex: number;
|
|
16
|
-
onTabClick: TabClickHandler;
|
|
17
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabsProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/TabsProps.ts"],"names":[],"mappings":""}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
|
-
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
-
import { Img } from '../Img/Img.js';
|
|
4
|
-
const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
|
|
5
|
-
const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
|
|
6
|
-
export const Tabs = JSX(({ tabs, currentTabIndex, onTabClick }) => {
|
|
7
|
-
return (_jsx("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab(currentTabIndex, onTabClick)) }));
|
|
8
|
-
});
|
|
9
|
-
const tabDescriptionStyle = (isActive = false) => `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
|
|
10
|
-
const renderTab = (currentTabIndex, onTabClick) => (tab, index) => {
|
|
11
|
-
const isActive = currentTabIndex === index;
|
|
12
|
-
return (_jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": isActive, children: [tab?.icon ? renderIcon(tab, isActive) : null, _jsxs("div", { children: [tab?.title ? _jsx("h3", { className: "m-0 text-l font-medium", children: tab?.title }) : null, tab?.description ? (_jsx("span", { className: tabDescriptionStyle(isActive), children: tab?.description })) : null] })] }, String(index)));
|
|
13
|
-
};
|
|
14
|
-
const renderIcon = (tab, isActive) => (_jsx("div", { className: "h-full mt-1", children: _jsx(Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
|
|
15
|
-
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC,MAAM,SAAS,GAAG,0DAA0D,CAAC;AAC7E,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAE1E,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,cAAK,SAAS,EAAC,4CAA4C,EAAC,IAAI,EAAC,SAAS,YACvE,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,GAC9C,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CAC/C,iBAAiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;AAE3D,MAAM,SAAS,GACb,CAAC,eAAuB,EAAE,UAA2B,EAAE,EAAE,CAAC,CAAC,GAAQ,EAAE,KAAa,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,eAAe,KAAK,KAAK,CAAC;IAE3C,OAAO,CACL,eAEE,SAAS,EAAE,gEACT,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAChC,EAAE,EACF,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,mBACjB,QAAQ,aAEtB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7C,0BACG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAC,wBAAwB,YAAE,GAAG,EAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC5E,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAClB,eAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,CAAC,YAAG,GAAG,EAAE,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,IAAI,IACJ,KAdD,MAAM,CAAC,KAAK,CAAC,CAed,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAE,QAAiB,EAAE,EAAE,CAAC,CAClD,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,GAAG,IACF,SAAS,EAAE,gBAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrD,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,UAAU,EAC9B,KAAK,EAAE,CAAC,QAAQ,GAChB,GACE,CACP,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { Picture } from '../../model/Picture';
|
|
2
|
-
/**
|
|
3
|
-
* @title Вкладка
|
|
4
|
-
*/
|
|
5
|
-
export interface Tab {
|
|
6
|
-
/** @title Имя вкладки */
|
|
7
|
-
title?: string;
|
|
8
|
-
/** @title Описание */
|
|
9
|
-
description?: string;
|
|
10
|
-
icon?: Picture;
|
|
11
|
-
}
|
|
12
|
-
export declare type TabClickHandler = (tabIndex: number) => void;
|
|
13
|
-
export interface TabsProps {
|
|
14
|
-
tabs?: Tab[];
|
|
15
|
-
currentTabIndex: number;
|
|
16
|
-
onTabClick: TabClickHandler;
|
|
17
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabsProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/TabsProps.ts"],"names":[],"mappings":""}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
-
import { Img } from '../Img/Img';
|
|
3
|
-
import type { Tab, TabClickHandler, TabsProps } from './TabsProps';
|
|
4
|
-
|
|
5
|
-
const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
|
|
6
|
-
const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
|
|
7
|
-
|
|
8
|
-
export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
|
|
9
|
-
return (
|
|
10
|
-
<div className="flex items-end border-b border-main-stroke" role="tablist">
|
|
11
|
-
{tabs?.map(renderTab(currentTabIndex, onTabClick))}
|
|
12
|
-
</div>
|
|
13
|
-
);
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
const tabDescriptionStyle = (isActive = false) =>
|
|
17
|
-
`text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
|
|
18
|
-
|
|
19
|
-
const renderTab =
|
|
20
|
-
(currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
|
|
21
|
-
const isActive = currentTabIndex === index;
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<div
|
|
25
|
-
key={String(index)}
|
|
26
|
-
className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${
|
|
27
|
-
isActive ? ACTIVE_TAB_STYLE : TAB_STYLE
|
|
28
|
-
}`}
|
|
29
|
-
role="tab"
|
|
30
|
-
onClick={() => onTabClick(index)}
|
|
31
|
-
aria-selected={isActive}
|
|
32
|
-
>
|
|
33
|
-
{tab?.icon ? renderIcon(tab, isActive) : null}
|
|
34
|
-
<div>
|
|
35
|
-
{tab?.title ? <h3 className="m-0 text-l font-medium">{tab?.title}</h3> : null}
|
|
36
|
-
{tab?.description ? (
|
|
37
|
-
<span className={tabDescriptionStyle(isActive)}>{tab?.description}</span>
|
|
38
|
-
) : null}
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const renderIcon = (tab: Tab, isActive: boolean) => (
|
|
45
|
-
<div className="h-full mt-1">
|
|
46
|
-
<Img
|
|
47
|
-
className={`w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`}
|
|
48
|
-
image={tab?.icon || 'CardIcon'}
|
|
49
|
-
asSVG={!isActive}
|
|
50
|
-
/>
|
|
51
|
-
</div>
|
|
52
|
-
);
|