pds-dev-kit-web 1.3.6 → 1.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form } from './src/common';
2
- export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors };
1
+ import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form } from './src/common';
2
+ export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors };
3
3
  export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
4
4
  export { theme };
5
5
  export { Form };
@@ -1,6 +1,6 @@
1
1
  import { UITheme } from './styles/colorSet/ui-type';
2
- import { IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors, PDSValueOption } from './types';
3
- export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors, PDSValueOption };
2
+ import { IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors } from './types';
3
+ export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors };
4
4
  import { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing } from './styles/theme';
5
5
  import { uiColors, customTheme } from './styles/ui-colors';
6
6
  export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
@@ -73,7 +73,7 @@
73
73
  "sys_temp_secondary_01": "darkgreen700",
74
74
  "sys_temp_red": "darkred500",
75
75
  "sys_temp_white_opacity_00": "white/opacity00",
76
- "sys_temp_dimmed": "black/opacity65",
76
+ "sys_temp_dimmed": "black/opacity20",
77
77
  "sys_temp_black": "black",
78
78
  "sys_temp_primary_02": "darkblue700",
79
79
  "sys_temp_primary_03": "darkblue300",
@@ -140,5 +140,13 @@
140
140
  "sys_gradient_base_01_opacity40": "grey950/opacity40",
141
141
  "sys_widget_black": "black",
142
142
  "usr_temp_primary_01": "darkblue500",
143
- "sys_cpnt_sheet_base_02_opacity50": "darkgrey50/opacity50"
143
+ "sys_cpnt_sheet_base_02_opacity50": "darkgrey50/opacity50",
144
+ "usr_menu_primarymenu_main": "darkgrey900",
145
+ "usr_menu_primarymenu_sub": "darkgrey500",
146
+ "usr_menu_secondarymenu_main": "darkgrey900",
147
+ "usr_menu_secondarymenu_sub": "darkgrey500",
148
+ "usr_menu_hover": "darkblue500",
149
+ "usr_menu_active": "darkblue500",
150
+ "usr_menu_background": "grey950",
151
+ "sys_cpnt_base_white_opacity50": "white/opacity50"
144
152
  }
@@ -73,7 +73,7 @@
73
73
  "sys_temp_secondary_01": "green700",
74
74
  "sys_temp_red": "red500",
75
75
  "sys_temp_white_opacity_00": "white/opacity00",
76
- "sys_temp_dimmed": "black/opacity65",
76
+ "sys_temp_dimmed": "black/opacity20",
77
77
  "sys_temp_black": "black",
78
78
  "sys_temp_primary_02": "blue700",
79
79
  "sys_temp_primary_03": "blue300",
@@ -140,5 +140,13 @@
140
140
  "sys_gradient_base_01_opacity40": "white/opacity40",
141
141
  "sys_widget_black": "black",
142
142
  "usr_temp_primary_01": "blue500",
143
- "sys_cpnt_sheet_base_02_opacity50": "grey50/opacity50"
143
+ "sys_cpnt_sheet_base_02_opacity50": "grey50/opacity50",
144
+ "usr_menu_primarymenu_main": "grey900",
145
+ "usr_menu_primarymenu_sub": "grey500",
146
+ "usr_menu_secondarymenu_main": "grey900",
147
+ "usr_menu_secondarymenu_sub": "grey500",
148
+ "usr_menu_hover": "blue500",
149
+ "usr_menu_active": "blue500",
150
+ "usr_menu_background": "white",
151
+ "sys_cpnt_base_white_opacity50": "white/opacity50"
144
152
  }
@@ -470,5 +470,13 @@
470
470
  "ui_cpnt_pg_gradient_05": "sys_gradient_base_01_opacity40",
471
471
  "ui_cpnt_mask_base": "sys_component_base_02",
472
472
  "ui_temp_usr_primary_01": "usr_brand_primary",
473
- "ui_cpnt_sheet_base_02_opacity50": "sys_cpnt_sheet_base_02_opacity50"
473
+ "ui_cpnt_sheet_base_02_opacity50": "sys_cpnt_sheet_base_02_opacity50",
474
+ "ui_menu_primarymenu_main": "usr_menu_primarymenu_main",
475
+ "ui_menu_primarymenu_sub": "usr_menu_primarymenu_sub",
476
+ "ui_menu_secondarymenu_main": "usr_menu_secondarymenu_main",
477
+ "ui_menu_secondarymenu_sub": "usr_menu_secondarymenu_sub",
478
+ "ui_menu_hover": "usr_menu_hover",
479
+ "ui_menu_active": "usr_menu_active",
480
+ "ui_menu_background": "usr_menu_background",
481
+ "ui_cpnt_video_progress_base": "sys_cpnt_base_white_opacity50"
474
482
  }
@@ -56,150 +56,6 @@ declare const colorSet: {
56
56
  grey30: string;
57
57
  opacity95: string;
58
58
  };
59
- readonly PaletteColor_Dark: {
60
- sys_container_background_01: string;
61
- sys_container_background_02: string;
62
- sys_container_background_03: string;
63
- sys_background_dimmed: string;
64
- sys_text_grey_01: string;
65
- sys_text_grey_02: string;
66
- sys_text_grey_03: string;
67
- sys_text_white: string;
68
- sys_text_brand_primary: string;
69
- sys_text_error_01: string;
70
- sys_widget_grey_01: string;
71
- sys_widget_grey_02: string;
72
- sys_widget_grey_03: string;
73
- sys_widget_primary_01: string;
74
- sys_widget_error_01: string;
75
- sys_widget_warning_01: string;
76
- sys_widget_success_01: string;
77
- sys_widget_white: string;
78
- sys_border_area_01: string;
79
- sys_border_line_01: string;
80
- sys_border_line_02: string;
81
- sys_border_line_03: string;
82
- sys_border_line_04: string;
83
- sys_border_line_05: string;
84
- sys_component_base_01: string;
85
- sys_component_base_02: string;
86
- sys_component_base_03: string;
87
- sys_component_base_red: string;
88
- sys_component_base_white: string;
89
- sys_component_base_white_opacity00: string;
90
- sys_on_base_white_opacity00: string;
91
- sys_on_base_white_opacity30: string;
92
- sys_on_base_black_opacity20: string;
93
- usr_brand_primary: string;
94
- usr_brand_secondary: string;
95
- usr_brand_secondary_variant: string;
96
- usr_background: string;
97
- usr_surface: string;
98
- usr_border: string;
99
- usr_on_brand_primary: string;
100
- usr_on_brand_secondary: string;
101
- usr_on_background: string;
102
- usr_on_surface: string;
103
- sys_widget_status_active_01: string;
104
- sys_text_success_01: string;
105
- sys_widget_grey_04: string;
106
- sys_text_active: string;
107
- sys_component_base_blue: string;
108
- sys_on_base_black_opacity65: string;
109
- sys_component_base_04: string;
110
- sys_component_base_black: string;
111
- sys_component_base_black_opacity00: string;
112
- usr_text_brand_secondary_variant: string;
113
- usr_text_brand_primary: string;
114
- usr_text_brand_on_primary: string;
115
- sys_text_brand_secondary_variant: string;
116
- sys_component_base_navy: string;
117
- sys_widget_lightgreen: string;
118
- sys_border_line_06: string;
119
- sys_background_dimmed_20: string;
120
- sys_widget_pink: string;
121
- sys_widget_primary_opacity20: string;
122
- sys_widget_secondary_variant_01: string;
123
- usr_component_base_brand_primary_opacity10: string;
124
- sys_temp_grey_01: string;
125
- sys_temp_grey_02: string;
126
- sys_temp_grey_03: string;
127
- sys_temp_grey_04: string;
128
- sys_temp_grey_05: string;
129
- sys_temp_white: string;
130
- sys_temp_primary_01: string;
131
- sys_temp_secondary_01: string;
132
- sys_temp_red: string;
133
- sys_temp_white_opacity_00: string;
134
- sys_temp_dimmed: string;
135
- sys_temp_black: string;
136
- sys_temp_primary_02: string;
137
- sys_temp_primary_03: string;
138
- sys_temp_secondary_02: string;
139
- sys_temp_lightgreen_01: string;
140
- sys_text_grey_04: string;
141
- sys_papp_post_social_background: string;
142
- sys_papp_post_notice_background: string;
143
- sys_papp_post_free_background: string;
144
- sys_papp_vod_background: string;
145
- sys_papp_vodplus_background: string;
146
- sys_papp_live_background: string;
147
- sys_selcontrols_base_off_disabled: string;
148
- sys_selcontrols_base_on_disabled: string;
149
- sys_component_base_blue_opacity10: string;
150
- sys_component_base_05: string;
151
- sys_background_dimmed_65: string;
152
- sys_temp_grey_06: string;
153
- sys_on_base_white_opacity10: string;
154
- sys_on_base_black_opacity10: string;
155
- sys_component_base_05_opacity00: string;
156
- sys_papp_post_notice_link: string;
157
- sys_component_base_navy_light: string;
158
- sys_component_base_orange: string;
159
- sys_component_base_grey: string;
160
- sys_component_base_black_opacity80: string;
161
- sys_text_darkgrey_02: string;
162
- sys_border_line_darktheme_01: string;
163
- sys_border_line_darktheme_02: string;
164
- sys_component_base_darktheme_01: string;
165
- sys_component_base_darktheme_02: string;
166
- sys_component_base_darktheme_03: string;
167
- sys_text_grey_darktheme_01: string;
168
- sys_text_grey_darktheme_02: string;
169
- sys_text_grey_darktheme_03: string;
170
- sys_widget_grey_darktheme_01: string;
171
- sys_widget_grey_darktheme_02: string;
172
- sys_widget_grey_darktheme_03: string;
173
- sys_component_base_green: string;
174
- sys_text_error_darktheme_01: string;
175
- sys_border_line_darktheme_03: string;
176
- sys_border_line_darktheme_04: string;
177
- usr_widget_brand_primary_darktheme_01: string;
178
- usr_text_brand_primary_darktheme_01: string;
179
- sys_component_base_black_opacity50: string;
180
- sys_component_base_card: string;
181
- sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
182
- sys_widget_green_01: string;
183
- sys_component_base_black_opacity30: string;
184
- sys_area_background: string;
185
- sys_border_white_opacity30: string;
186
- sys_container_background_wt: string;
187
- sys_channeldesc_grey_03: string;
188
- sys_channeldesc_border_grey_03: string;
189
- sys_gradient_base_01: string;
190
- sys_gradient_base_01_opacity00: string;
191
- sys_channeldesc_background: string;
192
- sys_channeldesc_bottomsheet_base: string;
193
- sys_channeldesc_bottomsheet_border: string;
194
- sys_channeldesc_contents_base: string;
195
- sys_channeldesc_dimmed: string;
196
- sys_gradient_base_01_opacity50: string;
197
- sys_gradient_base_01_opacity75: string;
198
- sys_gradient_base_01_opacity40: string;
199
- sys_widget_black: string;
200
- usr_temp_primary_01: string;
201
- sys_cpnt_sheet_base_02_opacity50: string;
202
- };
203
59
  readonly UIColor: {
204
60
  ui_cpnt_button_fill_base_primary: string;
205
61
  ui_cpnt_button_fill_base_default: string;
@@ -673,6 +529,166 @@ declare const colorSet: {
673
529
  ui_cpnt_mask_base: string;
674
530
  ui_temp_usr_primary_01: string;
675
531
  ui_cpnt_sheet_base_02_opacity50: string;
532
+ ui_menu_primarymenu_main: string;
533
+ ui_menu_primarymenu_sub: string;
534
+ ui_menu_secondarymenu_main: string;
535
+ ui_menu_secondarymenu_sub: string;
536
+ ui_menu_hover: string;
537
+ ui_menu_active: string;
538
+ ui_menu_background: string;
539
+ ui_cpnt_video_progress_base: string;
540
+ };
541
+ readonly PaletteColor_Dark: {
542
+ sys_container_background_01: string;
543
+ sys_container_background_02: string;
544
+ sys_container_background_03: string;
545
+ sys_background_dimmed: string;
546
+ sys_text_grey_01: string;
547
+ sys_text_grey_02: string;
548
+ sys_text_grey_03: string;
549
+ sys_text_white: string;
550
+ sys_text_brand_primary: string;
551
+ sys_text_error_01: string;
552
+ sys_widget_grey_01: string;
553
+ sys_widget_grey_02: string;
554
+ sys_widget_grey_03: string;
555
+ sys_widget_primary_01: string;
556
+ sys_widget_error_01: string;
557
+ sys_widget_warning_01: string;
558
+ sys_widget_success_01: string;
559
+ sys_widget_white: string;
560
+ sys_border_area_01: string;
561
+ sys_border_line_01: string;
562
+ sys_border_line_02: string;
563
+ sys_border_line_03: string;
564
+ sys_border_line_04: string;
565
+ sys_border_line_05: string;
566
+ sys_component_base_01: string;
567
+ sys_component_base_02: string;
568
+ sys_component_base_03: string;
569
+ sys_component_base_red: string;
570
+ sys_component_base_white: string;
571
+ sys_component_base_white_opacity00: string;
572
+ sys_on_base_white_opacity00: string;
573
+ sys_on_base_white_opacity30: string;
574
+ sys_on_base_black_opacity20: string;
575
+ usr_brand_primary: string;
576
+ usr_brand_secondary: string;
577
+ usr_brand_secondary_variant: string;
578
+ usr_background: string;
579
+ usr_surface: string;
580
+ usr_border: string;
581
+ usr_on_brand_primary: string;
582
+ usr_on_brand_secondary: string;
583
+ usr_on_background: string;
584
+ usr_on_surface: string;
585
+ sys_widget_status_active_01: string;
586
+ sys_text_success_01: string;
587
+ sys_widget_grey_04: string;
588
+ sys_text_active: string;
589
+ sys_component_base_blue: string;
590
+ sys_on_base_black_opacity65: string;
591
+ sys_component_base_04: string;
592
+ sys_component_base_black: string;
593
+ sys_component_base_black_opacity00: string;
594
+ usr_text_brand_secondary_variant: string;
595
+ usr_text_brand_primary: string;
596
+ usr_text_brand_on_primary: string;
597
+ sys_text_brand_secondary_variant: string;
598
+ sys_component_base_navy: string;
599
+ sys_widget_lightgreen: string;
600
+ sys_border_line_06: string;
601
+ sys_background_dimmed_20: string;
602
+ sys_widget_pink: string;
603
+ sys_widget_primary_opacity20: string;
604
+ sys_widget_secondary_variant_01: string;
605
+ usr_component_base_brand_primary_opacity10: string;
606
+ sys_temp_grey_01: string;
607
+ sys_temp_grey_02: string;
608
+ sys_temp_grey_03: string;
609
+ sys_temp_grey_04: string;
610
+ sys_temp_grey_05: string;
611
+ sys_temp_white: string;
612
+ sys_temp_primary_01: string;
613
+ sys_temp_secondary_01: string;
614
+ sys_temp_red: string;
615
+ sys_temp_white_opacity_00: string;
616
+ sys_temp_dimmed: string;
617
+ sys_temp_black: string;
618
+ sys_temp_primary_02: string;
619
+ sys_temp_primary_03: string;
620
+ sys_temp_secondary_02: string;
621
+ sys_temp_lightgreen_01: string;
622
+ sys_text_grey_04: string;
623
+ sys_papp_post_social_background: string;
624
+ sys_papp_post_notice_background: string;
625
+ sys_papp_post_free_background: string;
626
+ sys_papp_vod_background: string;
627
+ sys_papp_vodplus_background: string;
628
+ sys_papp_live_background: string;
629
+ sys_selcontrols_base_off_disabled: string;
630
+ sys_selcontrols_base_on_disabled: string;
631
+ sys_component_base_blue_opacity10: string;
632
+ sys_component_base_05: string;
633
+ sys_background_dimmed_65: string;
634
+ sys_temp_grey_06: string;
635
+ sys_on_base_white_opacity10: string;
636
+ sys_on_base_black_opacity10: string;
637
+ sys_component_base_05_opacity00: string;
638
+ sys_papp_post_notice_link: string;
639
+ sys_component_base_navy_light: string;
640
+ sys_component_base_orange: string;
641
+ sys_component_base_grey: string;
642
+ sys_component_base_black_opacity80: string;
643
+ sys_text_darkgrey_02: string;
644
+ sys_border_line_darktheme_01: string;
645
+ sys_border_line_darktheme_02: string;
646
+ sys_component_base_darktheme_01: string;
647
+ sys_component_base_darktheme_02: string;
648
+ sys_component_base_darktheme_03: string;
649
+ sys_text_grey_darktheme_01: string;
650
+ sys_text_grey_darktheme_02: string;
651
+ sys_text_grey_darktheme_03: string;
652
+ sys_widget_grey_darktheme_01: string;
653
+ sys_widget_grey_darktheme_02: string;
654
+ sys_widget_grey_darktheme_03: string;
655
+ sys_component_base_green: string;
656
+ sys_text_error_darktheme_01: string;
657
+ sys_border_line_darktheme_03: string;
658
+ sys_border_line_darktheme_04: string;
659
+ usr_widget_brand_primary_darktheme_01: string;
660
+ usr_text_brand_primary_darktheme_01: string;
661
+ sys_component_base_black_opacity50: string;
662
+ sys_component_base_card: string;
663
+ sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
664
+ sys_widget_green_01: string;
665
+ sys_component_base_black_opacity30: string;
666
+ sys_area_background: string;
667
+ sys_border_white_opacity30: string;
668
+ sys_container_background_wt: string;
669
+ sys_channeldesc_grey_03: string;
670
+ sys_channeldesc_border_grey_03: string;
671
+ sys_gradient_base_01: string;
672
+ sys_gradient_base_01_opacity00: string;
673
+ sys_channeldesc_background: string;
674
+ sys_channeldesc_bottomsheet_base: string;
675
+ sys_channeldesc_bottomsheet_border: string;
676
+ sys_channeldesc_contents_base: string;
677
+ sys_channeldesc_dimmed: string;
678
+ sys_gradient_base_01_opacity50: string;
679
+ sys_gradient_base_01_opacity75: string;
680
+ sys_gradient_base_01_opacity40: string;
681
+ sys_widget_black: string;
682
+ usr_temp_primary_01: string;
683
+ sys_cpnt_sheet_base_02_opacity50: string;
684
+ usr_menu_primarymenu_main: string;
685
+ usr_menu_primarymenu_sub: string;
686
+ usr_menu_secondarymenu_main: string;
687
+ usr_menu_secondarymenu_sub: string;
688
+ usr_menu_hover: string;
689
+ usr_menu_active: string;
690
+ usr_menu_background: string;
691
+ sys_cpnt_base_white_opacity50: string;
676
692
  };
677
693
  readonly PaletteColor_light: {
678
694
  sys_container_background_01: string;
@@ -817,6 +833,14 @@ declare const colorSet: {
817
833
  sys_widget_black: string;
818
834
  usr_temp_primary_01: string;
819
835
  sys_cpnt_sheet_base_02_opacity50: string;
836
+ usr_menu_primarymenu_main: string;
837
+ usr_menu_primarymenu_sub: string;
838
+ usr_menu_secondarymenu_main: string;
839
+ usr_menu_secondarymenu_sub: string;
840
+ usr_menu_hover: string;
841
+ usr_menu_active: string;
842
+ usr_menu_background: string;
843
+ sys_cpnt_base_white_opacity50: string;
820
844
  };
821
845
  };
822
846
  export default colorSet;
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
8
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
9
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
10
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
13
  UIColor: UIColor_json_1.default,
14
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default,
15
15
  PaletteColor_light: PaletteColor_light_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
@@ -471,4 +471,12 @@ export interface UITheme {
471
471
  ui_cpnt_mask_base: string;
472
472
  ui_temp_usr_primary_01: string;
473
473
  ui_cpnt_sheet_base_02_opacity50: string;
474
+ ui_menu_primarymenu_main: string;
475
+ ui_menu_primarymenu_sub: string;
476
+ ui_menu_secondarymenu_main: string;
477
+ ui_menu_secondarymenu_sub: string;
478
+ ui_menu_hover: string;
479
+ ui_menu_active: string;
480
+ ui_menu_background: string;
481
+ ui_cpnt_video_progress_base: string;
474
482
  }
@@ -4,7 +4,6 @@ import { PDSValueOption } from '../../../common';
4
4
  declare type Props = {
5
5
  headerBarSize?: 'regular' | 'small';
6
6
  headerBarTitleText?: TFunctionResult;
7
- itemCountUnit?: number;
8
7
  currentPage?: number;
9
8
  totalPage?: number;
10
9
  contentText?: TFunctionResult;
@@ -13,6 +12,8 @@ declare type Props = {
13
12
  onChangeCount?: (option: PDSValueOption) => void;
14
13
  onClickNextButton?: () => void;
15
14
  onClickPrevButton?: () => void;
15
+ /** @deprecated v1.5 totalPage를 받아오기 때문에 deprecated 될 예정입니다. */
16
+ itemCountUnit?: number;
16
17
  };
17
18
  declare function AdminListHeader({ headerBarSize, headerBarTitleText, itemCountUnit, currentPage, totalPage, contentText, filterBar, dropdownTextArray, onChangeCount, onClickNextButton, onClickPrevButton }: Props): JSX.Element;
18
19
  export default AdminListHeader;
@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var hybrid_1 = require("../../../hybrid");
13
13
  var TextLabel_1 = require("../TextLabel");
14
14
  var HeaderBar_1 = __importDefault(require("./HeaderBar"));
15
- var defaultPaginaionTextArray = [
15
+ var defaultPaginationTextArray = [
16
16
  {
17
17
  text: '15',
18
18
  value: 15
@@ -31,10 +31,10 @@ var defaultPaginaionTextArray = [
31
31
  }
32
32
  ];
33
33
  function AdminListHeader(_a) {
34
- var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, _c = _a.itemCountUnit, itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginaionTextArray : _f, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
34
+ var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, _c = _a.itemCountUnit, itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginationTextArray : _f, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
35
35
  return (react_1.default.createElement(S_AdminListHeader, null,
36
- react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, count: itemCountUnit, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
37
- headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
36
+ react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
37
+ headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
38
38
  headerBarTitleText && contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
39
39
  contentText && (react_1.default.createElement(react_1.default.Fragment, null,
40
40
  react_1.default.createElement(S_ContentTextWrapper, null,
@@ -4,7 +4,6 @@ import { PDSValueOption } from '../../../common';
4
4
  declare type Props = {
5
5
  titleText?: TFunctionResult;
6
6
  size?: 'regular' | 'small';
7
- count?: number;
8
7
  currentPage?: number;
9
8
  totalPage?: number;
10
9
  dropdownTextArray: PDSValueOption[];
@@ -12,5 +11,5 @@ declare type Props = {
12
11
  onClickIBtn1?: () => void;
13
12
  onClickIBtn2?: () => void;
14
13
  };
15
- declare function HeaderBar({ titleText, size, count, currentPage, totalPage, dropdownTextArray, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
14
+ declare function HeaderBar({ titleText, size, currentPage, totalPage, dropdownTextArray, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
16
15
  export default HeaderBar;
@@ -34,7 +34,7 @@ var Dropdown_1 = require("../Dropdown");
34
34
  var IconButton_1 = require("../IconButton");
35
35
  var TextLabel_1 = require("../TextLabel");
36
36
  function HeaderBar(_a) {
37
- var titleText = _a.titleText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.count, count = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, dropdownTextArray = _a.dropdownTextArray, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
37
+ var titleText = _a.titleText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.totalPage, totalPage = _d === void 0 ? 1 : _d, dropdownTextArray = _a.dropdownTextArray, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
38
38
  var t = (0, react_i18next_1.useTranslation)('translation').t;
39
39
  var handleDropdown = function (option) {
40
40
  if (onChangeDropdown) {
@@ -52,7 +52,7 @@ function HeaderBar(_a) {
52
52
  react_1.default.createElement(S_Page, null,
53
53
  react_1.default.createElement(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }),
54
54
  react_1.default.createElement(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }),
55
- react_1.default.createElement(TextLabel_1.TextLabel, { text: Math.ceil(totalPage / count), styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })),
55
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })),
56
56
  react_1.default.createElement(S_IconButtonBox, null,
57
57
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }),
58
58
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
@@ -50,24 +50,21 @@ function DesktopTabBar(_a) {
50
50
  return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
51
51
  }
52
52
  };
53
- return (react_1.default.createElement(react_1.default.Fragment, null,
54
- react_1.default.createElement(S_TabBox, null,
55
- textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname.includes(value.path), styleTheme: styleTheme, onClick: function () {
53
+ return (react_1.default.createElement(S_TabBox, null,
54
+ textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname.includes(value.path), styleTheme: styleTheme },
55
+ react_1.default.createElement(S_TitleWrapper, { onClick: function () {
56
56
  handleClick(value);
57
- } },
58
- textLabel(value, false),
59
- value.subArray && pathname.includes(value.path) && (react_1.default.createElement(S_SubTabBox, null, value.subArray.map(function (subValue) { return (react_1.default.createElement(S_SubWrapper, { key: subValue.path }, textLabel(subValue, true))); }))))); }),
60
- textArray.map(function (value) { return value.subArray && pathname.includes(value.path) && react_1.default.createElement(S_SubBackground, null); }))));
57
+ } }, textLabel(value, false)),
58
+ value.subArray && pathname.includes(value.path) && (react_1.default.createElement(S_SubTabBox, null, value.subArray.map(function (subValue) { return (react_1.default.createElement(S_SubWrapper, { onClick: function () {
59
+ handleClick(subValue);
60
+ }, key: subValue.path }, textLabel(subValue, true))); }))))); }),
61
+ textArray.map(function (value) {
62
+ return value.subArray && pathname.includes(value.path) && react_1.default.createElement(S_SubBackground, { key: value.path });
63
+ })));
61
64
  }
62
- var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
65
+ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
63
66
  var theme = _a.theme;
64
67
  return theme.spacing.spacingD;
65
- }, function (_a) {
66
- var theme = _a.theme;
67
- return theme.spacing.spacingA;
68
- }, function (_a) {
69
- var theme = _a.theme;
70
- return theme.spacing.spacingB;
71
68
  }, function (_a) {
72
69
  var theme = _a.theme, styleTheme = _a.styleTheme;
73
70
  return styleTheme === 'content'
@@ -78,7 +75,14 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
78
75
  return !isActive && "display: none;";
79
76
  });
80
77
  var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n ", "\n"], ["\n position: relative;\n ", "\n"])), mediumStyle);
81
- var S_TabBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"])), function (_a) {
78
+ var S_TitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n min-width: 100%;\n padding: 0 ", ";\n padding-bottom: ", ";\n"], ["\n cursor: pointer;\n min-width: 100%;\n padding: 0 ", ";\n padding-bottom: ", ";\n"])), function (_a) {
79
+ var theme = _a.theme;
80
+ return theme.spacing.spacingA;
81
+ }, function (_a) {
82
+ var theme = _a.theme;
83
+ return theme.spacing.spacingB;
84
+ });
85
+ var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"])), function (_a) {
82
86
  var theme = _a.theme;
83
87
  return theme.ui_cpnt_tabbar_base_area;
84
88
  }, function (_a) {
@@ -88,12 +92,12 @@ var S_TabBox = styled_components_1.default.div(templateObject_3 || (templateObje
88
92
  var theme = _a.theme;
89
93
  return theme.spacing.spacingE;
90
94
  });
91
- var S_SubBackground = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"], ["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"])), function (_a) {
95
+ var S_SubBackground = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"], ["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"])), function (_a) {
92
96
  var theme = _a.theme;
93
97
  return theme.ui_cpnt_tabbar_base_area_sub;
94
98
  });
95
- var S_SubTabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"], ["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"])));
96
- var S_SubWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n"])), function (_a) {
99
+ var S_SubTabBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"], ["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"])));
100
+ var S_SubWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n"])), function (_a) {
97
101
  var theme = _a.theme;
98
102
  return theme.spacing.spacingE;
99
103
  }, function (_a) {
@@ -101,4 +105,4 @@ var S_SubWrapper = styled_components_1.default.div(templateObject_6 || (template
101
105
  return theme.spacing.spacingA;
102
106
  });
103
107
  exports.default = DesktopTabBar;
104
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
108
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
@@ -37,8 +37,8 @@ var S_ChipBox = styled_components_1.default.div(templateObject_2 || (templateObj
37
37
  var theme = _a.theme;
38
38
  return theme.spacing.spacingE;
39
39
  });
40
- var S_ChipWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n"], ["\n padding: ", ";\n"])), function (_a) {
40
+ var S_ChipWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-right: ", ";\n\n &:last-child {\n padding-right: 0;\n }\n"], ["\n padding-right: ", ";\n\n &:last-child {\n padding-right: 0;\n }\n"])), function (_a) {
41
41
  var theme = _a.theme;
42
- return theme.spacing.spacingA;
42
+ return theme.spacing.spacingB;
43
43
  });
44
44
  var templateObject_1, templateObject_2, templateObject_3;
@@ -13,6 +13,6 @@ var LayoutWF = function (_a) {
13
13
  var children = _a.children;
14
14
  return react_1.default.createElement(S_LayoutWF, null, children);
15
15
  };
16
- var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100vh;\n width: 100vw;\n"], ["\n height: 100vh;\n width: 100vw;\n"])));
16
+ var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"], ["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"])));
17
17
  exports.default = LayoutWF;
18
18
  var templateObject_1;
@@ -15,7 +15,7 @@ var LayoutWS = function (_a) {
15
15
  react_1.default.createElement(S_LeftWrapper, null, globalMenuContainer),
16
16
  react_1.default.createElement(S_RightWrapper, null, children)));
17
17
  };
18
- var S_LayoutWS = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100vh;\n width: 100vw;\n"], ["\n display: flex;\n height: 100vh;\n width: 100vw;\n"])));
18
+ var S_LayoutWS = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"], ["\n display: flex;\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"])));
19
19
  var S_LeftWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
20
20
  var S_RightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* width: calc(100% - 240px); */\n width: 100%;\n"], ["\n /* width: calc(100% - 240px); */\n width: 100%;\n"])));
21
21
  exports.default = LayoutWS;
@@ -16,7 +16,7 @@ var LayoutWT = function (_a) {
16
16
  react_1.default.createElement(S_TopWrapper, null, globalMenuContainer),
17
17
  react_1.default.createElement(S_BottomWrapper, null, children))));
18
18
  };
19
- var S_LayoutWT = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100vh;\n width: 100vw;\n"], ["\n height: 100vh;\n width: 100vw;\n"])));
19
+ var S_LayoutWT = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"], ["\n height: 100vh;\n width: 100vw;\n min-width: 1200px;\n"])));
20
20
  var S_Box = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
21
21
  var S_TopWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
22
22
  var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n height: 100%;\n overflow: hidden;\n"], ["\n flex: 1;\n height: 100%;\n overflow: hidden;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.3.6",
3
+ "version": "1.3.7",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,20 +1,18 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.3.6]
2
+ ## [v1.3.7]
3
+
4
+ ### Layout
5
+ * LayoutWF, LayoutWS, LayoutWT에 min-width:1200px 부여
3
6
 
4
7
  ### Component
5
- * DesktopHeaderBar
6
- * prop 추가
7
- * rightBtn2Mode
8
- * rightBtn3Mode
9
- * mBtnState
10
- * mBtn2State
11
- * mBtn2Text
12
- * onClickRightBtn2
13
- * onClickRightBtn3
14
- * EditApplyTextField
15
- * data 관리를 제대로 하지 못하고 있던 문제 해결
16
- * Icon
17
- * line 아이콘 추가 (ic_design_preference)
8
+ * PDSValueOption타입 import 가능하게 조치
9
+ * DesktopTabBar
10
+ * 클릭 이벤트 영역 수정
11
+ * subTab단에 클릭 이벤트 추가
12
+ * AdminListHeader
13
+ * 내부에 있던 totalPage를 구하는 연산의 제거
14
+ * FilterBar
15
+ * Chip 주변의 spacing 부여 방식 조절
18
16
 
19
17
  ### Color
20
18
  * 컬러 키 값 22.04.19 18시 19분 기준 싱크