realreport-designer 1.9.3 → 1.9.5

package/dist/styles/realreport-designer.css

@@ -1,5 +1,5 @@
 /* 
-RealReport Designer v1.9.3
+RealReport Designer v1.9.5
 Copyright (C) 2013-2024 WooriTech Inc.
 All Rights Reserved.
 */
@@ -1146,7 +1146,7 @@ All Rights Reserved.
     font-family: var(--rct-font-family);
     font-size: var(--rct-font-size);
     color: #000;
-    /* background-color: white; */
+    /* background-color: #fff; */
     /* word-break: break-all;
     word-wrap: break-word; */
     -webkit-touch-callout: default;
@@ -1168,7 +1168,7 @@ All Rights Reserved.
 }
 
 /** palette */
-.rct-root {
+:root, .rct-root {
     --color-1: #0098ff;
     --color-2: #66d0ff;
     --color-3: #ff5c35;
@@ -1278,11 +1278,11 @@ All Rights Reserved.
 .rct-control[data-theme='real'] {
 	--rct-background: #264653;
 }
-.rct-root {
+:root, .rct-root {
     --rct-font-family: AppleSDGothicNeo-Light, "HelveticaNeue", "Malgun Gothic", "맑은 고딕", sans-serif;
     --rct-font-size: 16px;
 
-    --rct-focus-stroke: black;
+    --rct-focus-stroke: #000;
     --rct-focus-stroke-width: 2px;
     --rct-text-fill: #333;
 
@@ -1295,14 +1295,14 @@ All Rights Reserved.
     --rct-axis-line-stroke: #aaa;
     --rct-axis-baseline-stroke: #333;
     --rct-axis-tick-stroke: #555;
-    --rct-axis-label-fill: #555;
+    --rct-axis-label-fill: #333;
     --rct-axis-grid-line-stroke: #ddd;
     --rct-axis-grid-line-stroke-start: none;
     --rct-axis-grid-line-stroke-end: none;
     --rct-axis-grid-line-stroke-width: 1px;
     --rct-axis-scrollbar-track-fill: #fdfdfd;
     --rct-axis-scrollbar-track-stroke: #aaa;
-    --rct-axis-scrollbar-thumb-fill: lightgray;
+    --rct-axis-scrollbar-thumb-fill: #d3d3d3;
     --rct-axis-scrollbar-rx: 4px;
     
     --rct-legend-background: none;
@@ -1317,6 +1317,9 @@ All Rights Reserved.
     --rct-point-label-stroke: none;
     --rct-point-label-fill: #333;
 
+    --rct-point-label-line-stroke-width: 1px;
+    --rct-point-label-line-stroke: #55855560;
+
     --rct-credits-fill: #777;
 
     /* polar */
@@ -1326,7 +1329,7 @@ All Rights Reserved.
 
     /* linear gauge */
     --rct-linear-gauge-background-fill: #eee;
-    --rct-linear-gauge-value-fill: green;
+    --rct-linear-gauge-value-fill: #008000;
     --rct-linear-gauge-band-tick-labels-stroke: #333;
     --rct-linear-gauge-group-label-fill: #333;
     /** bullet gauge */
@@ -1345,9 +1348,9 @@ All Rights Reserved.
     --rct-gauge-scale-tick: #555;
     --rct-gauge-scale-tick-labels-stroke: #333;
     /* clock gauge */
-    --rct-clock-gauge-face-fill: white;
+    --rct-clock-gauge-face-fill: #fff;
     --rct-clock-gauge-rim-fill: #eee;
-    --rct-clock-gauge-rim-stroke: gray;
+    --rct-clock-gauge-rim-stroke: #808080;
     --rct-clock-gauge-tick-stroke: #333;
     --rct-clock-gauge-minor-tick-stroke: #555;
     --rct-clock-gauge-tick-label-fill: #333;
@@ -1357,11 +1360,11 @@ All Rights Reserved.
     /** series navigator */
     --rct-navigator-handle-color: #0098ff; 
     --rct-navigator-handle-hover-color: #55c;
-    --rct-navigator-track-fill: lightgray;
+    --rct-navigator-track-fill: #d3d3d3;
     --rct-navigator-thumb-fill:#0098ff;
 }
 .rct-root[data-theme='dark'] {
-    --rct-focus-stroke: yellow;
+    --rct-focus-stroke: #ccc;
     --rct-text-fill: #fff;
 
     --rct-title-fill: #fff;
@@ -1471,13 +1474,13 @@ All Rights Reserved.
 
 /** label */
 .rct-label-dark {
-    fill: black;
+    fill: #000;
 }
 .rct-label-light {
-    fill: white;
+    fill: #fff;
 }
 .rct-label-background {
-    fill: lightgray;
+    fill: #d3d3d3;
 }
 
 /** button */
@@ -1506,7 +1509,7 @@ All Rights Reserved.
 /** title */
 .rct-title {
     margin-bottom: 10px;
-    font-size: 24px;
+    font-size: 22px;
     fill: var(--rct-title-fill);
 }
 .rct-title-background {
@@ -1514,7 +1517,7 @@ All Rights Reserved.
 }
 .rct-subtitle {
     margin-bottom: 10px;
-    font-size: 16px;
+    font-size: 15px;
     fill: var(--rct-subtitle-fill);
 }
 .rct-subtitle-background {
@@ -1526,6 +1529,7 @@ All Rights Reserved.
     fill: var(--rct-legend-fill);
     stroke: none;
     padding: 3px 6px;
+    font-size: 14px;
 }
 .rct-legend-background {
     fill: var(--rct-legend-background);
@@ -1534,28 +1538,47 @@ All Rights Reserved.
 }
 .rct-legend-item-label[data-hidden] {
     fill: var(--rct-legend-item-disabled);
-    text-decoration: var(--rct-legend-item-disabled-decoration)
+    text-decoration: var(--rct-legend-item-disabled-decoration);
+}
+.rct-legend-item-label[data-empty] {
+    fill: var(--rct-legend-item-disabled);
 }
-/* .rct-legend-item-marker {
-    stroke: none;
-} */
 .rct-legend-item-marker[data-hidden] {
     fill: #aaa !important;
     stroke: #aaa !important;
 }
+.rct-legend-item-marker[data-hidden] path[data-fill] {
+    fill: #aaa !important;
+}
+.rct-legend-item-marker[data-empty] {
+    fill: #aaa !important;
+    stroke: #aaa !important;
+}
+.rct-legend-item-marker[data-empty] path[data-fill] {
+    fill: #aaa !important;
+}
 
-/** plot area */
+/** body */
 .rct-body-background {
     stroke: var(--rct-body-background-stroke);
     fill: none;
+    shape-rendering: crispEdges;
 }
 .rct-body-background[data-polar] {
     stroke: none;
 }
+.rct-empty-view {
+    fill: #fcfcff;
+    stroke: #eee;
+}
+.rct-empty-view-label {
+    fill: #777;
+    font-size: 1.4em;
+}
 
 /** axis */
 .rct-axis-title {
-    font-size: 16px;
+    font-size: 15px;
     fill: var(--rct-axis-title-fill);
 }
 .rct-axis-title-background {
@@ -1564,30 +1587,33 @@ All Rights Reserved.
 .rct-axis-line {
     stroke: var(--rct-axis-line-stroke);
     stroke-width: 1px;
+    shape-rendering: crispEdges;
 }
 .rct-axis-baseline {
     stroke: var(--rct-axis-baseline-stroke);
     stroke-width: 1px;
+    shape-rendering: crispEdges;
 }
 .rct-axis-tick {
     stroke: var(--rct-axis-tick-stroke);
     stroke-width: 1px;
+    shape-rendering: crispEdges;
 }
 .rct-axis-labels {
     font-size: 14px;
     fill: var(--rct-axis-label-fill);
 }
-/* .rct-axis-grid {
-    stroke: var(--rct-axis-grid-stroke);
-    stroke-width: 1px;
-} */
+.rct-axis-grid {
+    fill: none;
+}
 .rct-axis-grid-line {
     stroke: var(--rct-axis-grid-line-stroke);
     stroke-width: var(--rct-axis-grid-line-stroke-width);
+    shape-rendering: crispEdges;
 }
 .rct-axis-break {
     stroke: #aaa;
-    fill: white;
+    fill: #fff;
     fill-opacity: 0.9;
 }
 .rct-axis-guide-label {
@@ -1596,11 +1622,13 @@ All Rights Reserved.
 .rct-axis-guide-line {
     stroke: #555;
     stroke-width: 2px;
+    shape-rendering: crispEdges;
 }
 .rct-axis-guide-range {
     stroke: none;
     fill: #0088ff;
     fill-opacity: 0.2;
+    shape-rendering: crispEdges;
 }
 .rct-axis-scrollbar-track {
     fill: var(--rct-axis-scrollbar-track-fill);
@@ -1619,6 +1647,9 @@ All Rights Reserved.
 .rct-polar-xaxis-sector-line {
     stroke: #555;
 }
+.rct-polar-axis-grids {
+    fill: none;
+}
 .rct-polar-xaxis-grid-line {
     stroke: var(--rct-polar-xaxis-grid-line-stroke)
 }
@@ -1683,7 +1714,7 @@ All Rights Reserved.
 }
 
 .rct-series-trendline {
-    stroke: red;
+    stroke: #ff0000;
     stroke-width: 2px;
     stroke-linejoin: round;
     fill: none;
@@ -1782,21 +1813,34 @@ All Rights Reserved.
     transition-property: opacity;
     transition-duration: 0.7s;
 }
-.rct-series[data-unfocus] {
-    opacity: 0.2;
+.rct-series[data-unhover] {
+    opacity: 0.2 !important;
 }
-.rct-series .rct-point[data-focus] {
+.rct-point[data-unhover] {
+    opacity: 0.2 !important;
+}
+.rct-series .rct-point[data-focus], .rct-point[data-unfocus] {
     stroke: var(--rct-focus-stroke) !important;
-    stroke-width: var(--rct-focus-stroke-width);
-    filter: brightness(115%);
+    stroke-width: var(--rct-focus-stroke-width) !important;
+    filter: brightness(115%) !important;
+    opacity: 1 !important;
+}
+/** data point hover */
+.rct-point-unhover {
+    opacity: 0.3;
+    transition: opacity 0.7s;
+}
+.rct-point-hover {
+    opacity: inherit;
+    transition: opacity 0.7s;
 }
 .rct-point-labels {
     opacity: inherit;
     transition-property: opacity;
     transition-duration: 0.7s;
 }
-.rct-point-labels[data-unfocus] {
-    opacity: 0.3;
+.rct-point-labels[data-unhover] {
+    opacity: 0.3 !important;
 }
 
 /** rct-point 대신 여기에 지정해야 outline에 반영된다. */
@@ -1811,7 +1855,8 @@ All Rights Reserved.
     opacity: 1;
 }
 .rct-point-label-lines {
-    stroke: #585;
+    stroke-width: var(--rct-point-label-line-stroke-width);
+    stroke: var(--rct-point-label-line-stroke);
     fill: none;
 }
 
@@ -1822,7 +1867,7 @@ All Rights Reserved.
 
 /** circlebar series */
 .rct-circlebar-series .rct-point {
-    stroke: white;
+    stroke: #fff;
 }
 
 /** barrange series */
@@ -1837,14 +1882,6 @@ All Rights Reserved.
 .rct-line-series .rct-point {
     stroke-dasharray: none;
 }
-.rct-line-series .rct-point[data-focus] {
-    stroke: #0088ff20 !important; 
-    stroke-width: 9px !important;
-    opacity: inherit !important;
-    /** TODO: 아래가 적용되지 않고 있다 */
-    transition-property: opacity;
-    transition-duration: 0.7s;
-}
 .rct-line-series-flag {
     font-weight: bold;
     font-size: 0.9em;
@@ -1882,6 +1919,9 @@ All Rights Reserved.
 .rct-scatter-series {
     fill-opacity: 0.7;
 }
+.rct-scatter-series .rct-point[data-focus] {
+    fill-opacity: 0.9;
+}
 
 /** boxplot series */
 .rct-boxplot-series {
@@ -1904,7 +1944,7 @@ All Rights Reserved.
     stroke-dasharray: 2;
 }
 .rct-boxplot-series .rct-point[data-focus] .rct-boxplot-point-stem {
-    stroke: black;
+    stroke: #000;
     stroke-dasharray: none;
     stroke-width: 2px;
 }
@@ -1973,6 +2013,9 @@ All Rights Reserved.
 .rct-lollipop-series {
     stroke-width: 3px;
 }
+.rct-lollipop-point-bar {
+    shape-rendering: crispEdges;
+}
 .rct-lollipop-point-marker {
     stroke: none;
 }
@@ -1989,6 +2032,9 @@ All Rights Reserved.
 .rct-dumbbell-series {
     stroke-width: 3px;
 }
+.rct-dumbbell-point-bar {
+    shape-rendering: crispEdges;
+}
 .rct-dumbbell-point-marker {
     stroke: none;
 }
@@ -2011,7 +2057,7 @@ All Rights Reserved.
 
 /** histogram */
 .rct-histogram-series .rct-point {
-    stroke: white;
+    stroke: #fff;
 }
 
 /** vector series */
@@ -2029,12 +2075,12 @@ All Rights Reserved.
 
 /** treemap series */
 .rct-treemap-series .rct-point {
-    stroke: white;
+    stroke: #fff;
 }
 
 /** pie series */
 .rct-pie-series .rct-point {
-    stroke: white;
+    stroke: #fff;
 }
 .rct-pie-series-inner {
     font-size: 20px;
@@ -2043,10 +2089,10 @@ All Rights Reserved.
 
 /** funnel series */
 .rct-funnel-series .rct-point {
-    stroke: white;
+    stroke: #fff;
 }
 .rct-funnel-series .rct-point[data-focus] {
-    stroke: black;
+    stroke: #000;
     stroke-width: 2px;
 }
 
@@ -2082,7 +2128,7 @@ All Rights Reserved.
     font-size: 20px;
 }
 .rct-circle-gauge-pin {
-    fill: white;
+    fill: #fff;
     stroke: #333;
     stroke-width: 3px;
 }
@@ -2114,7 +2160,7 @@ All Rights Reserved.
     font-size: 1em;
 }
 .rct-clock-gauge-pin {
-    fill: white;
+    fill: #fff;
     stroke: #333;
     stroke-width: 3px;
 }
@@ -2203,10 +2249,10 @@ All Rights Reserved.
     opacity: 0.9;
 }
 .rct-tooltip-back {
-    fill: white;
+    fill: #fff;
 }
 .rct-tooltip-tail {
-    fill: white;
+    fill: #fff;
 }
 .rct-tooltip-text {
     fill: #333;
@@ -2229,6 +2275,7 @@ All Rights Reserved.
     fill: none;
     stroke-width: 1;
     stroke: #80808080;
+    shape-rendering: crispEdges;
 }
 .rct-crosshair-bar {
     stroke: none;
@@ -2253,8 +2300,9 @@ All Rights Reserved.
     display: none;
 }
 .rct-navigator-back {
-    fill: white;
+    fill: #fff;
     stroke: #f0f0f0;
+    shape-rendering: crispEdges;
 }
 .rct-navigator-mask {
     fill: #4488cc20;
@@ -2268,7 +2316,6 @@ All Rights Reserved.
     fill: var(--rct-navigator-handle-hover-color);
     stroke: var(--rct-navigator-handle-hover-color);
 }
-
 .rct-navigator-track {
     fill: var(--rct-navigator-track-fill);
     stroke: var(--rct-navigator-track-fill);
@@ -2392,7 +2439,7 @@ All Rights Reserved.
 }
 
 .rp-root input[type=checkbox] {
-    margin-left: 0px;
+    margin: 0px;
 }
 
 .rp-root input::placeholder,
@@ -2521,11 +2568,18 @@ All Rights Reserved.
 }
 
 .rr-property-row-focus {
-    /* background: rgba(0, 127, 255, 0.4); */
     background: #101010;
     color: white;
 }
 
+.rr-property-row-focus svg {
+    fill: white;
+}
+
+.rr-property-row select {
+    min-width: 20px;
+}
+
 .rr-property-row-select {
     background: rgba(0, 127, 255, 0.5);
     color: white;
@@ -2559,6 +2613,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
 
 .rr-property-select {
     flex: 1 1 0;
+    min-height: 20px;
 }
 
 .rr-property-select[data-empty="true"] {
@@ -2655,7 +2710,6 @@ input[data-rrproperty]::-webkit-inner-spin-button {
     width: 13px;
     text-align: center;
     background-color: #555;
-    padding: 2px;
     margin-left: 4px;
     color: lightgray;
     border-radius: 2px;
@@ -3196,11 +3250,14 @@ input[data-rrproperty]::-webkit-inner-spin-button {
   background-color: #00000020;
 }
 
+.rrd-report-designer button {
+  cursor: pointer;
+}
+
 /* parent font 스타일을 상속받지 않으므로 별도로 지정해야한다. */
 .rrd-report-designer button,
 .rrd-report-designer input {
   font-family: var(--rrd-font-family);
-  cursor: pointer;
 }
 
 /* 디자이너 global 기본 전체 설정 스타일 */
@@ -3590,6 +3647,13 @@ input[data-rrproperty]::-webkit-inner-spin-button {
   background-color: var(--rrd-light-theme-primary-color-2);
   z-index: 220;
 }
+.rrd-property-path {
+  display: -webkit-box;
+  word-break: break-word;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
 
 /* 패널 */
 /** panel resizer */
@@ -3931,7 +3995,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
   scrollbar-width: none;
   gap: 2px;
 }
-.rrd-band-field-table-header > spa,
+.rrd-band-field-table-header > span,
 .rrd-simple-field-table-header > span {
   max-width: fit-content;
   white-space: nowrap;
@@ -3967,6 +4031,8 @@ input[data-rrproperty]::-webkit-inner-spin-button {
 .rrd-simple-field-table tr td:nth-child(2) {
   min-width: 20px;
   text-align: center;
+  position: sticky;
+  left: 0;
 }
 .rrd-band-field-table tr td:nth-child(3),
 .rrd-simple-field-table tr td:nth-child(3) {
@@ -4029,7 +4095,6 @@ input[data-rrproperty]::-webkit-inner-spin-button {
 
 .rrd-band-field-table th,
 .rrd-simple-field-table th {
-  position: sticky;
   top: 0;
   z-index: 100;
   background-color: var(--rrd-light-theme-primary-color-3);
@@ -4175,11 +4240,16 @@ input[data-rrproperty]::-webkit-inner-spin-button {
 .rrd-band-data-sample th {
   position: sticky;
   top: 0;
+  left: 0;
   z-index: 100;
   background-color: var(--rrd-light-theme-primary-color-3);
   text-align: center;
   padding: 0px;
 }
+.rrd-band-field-table tr td:first-child {
+  position: sticky;
+  left: 0;
+}
 .rrd-band-data-sample thead tr th:first-child {
   z-index: 101;
   text-align: center;
@@ -4193,6 +4263,12 @@ input[data-rrproperty]::-webkit-inner-spin-button {
   position: sticky;
   left: 0;
 }
+.rrd-band-data-sample tr td:first-child {
+  background-color: var(--rrd-light-theme-primary-color-2);
+}
+.rrd-band-data-sample tr:nth-child(2n + 1) td:first-child {
+  background-color: var(--rrd-light-theme-primary-color-1);
+}
 .rrd-band-data-sample tr td span {
   display: inline-block;
   width: 100%;
@@ -4421,8 +4497,8 @@ input[data-rrproperty]::-webkit-inner-spin-button {
 .rrd-language-field-table tr:nth-child(2n) {
   background-color: var(--rrd-light-theme-primary-color-2);
 }
-.rrd-language-field-table td,
-th {
+.rrd-language-field-table th,
+.rrd-language-field-table td {
   border-right: 1px solid #c0c0c0;
   border-bottom: 1px solid #c0c0c0;
   padding: 0 4px;
@@ -5223,7 +5299,7 @@ th {
   background-color: var(--rrd-light-theme-primary-color-3);
   border-top: none;
   border-bottom: none;
-  height: 18px;
+  height: 20px;
 }
 .rp-text-expander {
   background-color: transparent;
@@ -5235,15 +5311,20 @@ th {
   font-weight: bold;
 }
 .rr-property-row {
-  height: 28px;
+  min-height: 26px;
 }
 .rr-property-row-focus {
+  color: var(--rrd-light-theme-primary-color-9);
   background: var(--rrd-light-theme-primary-color-3);
 }
 .rr-property-row:hover {
   background: var(--rrd-light-theme-primary-color-2);
 }
+.rr-property-row-focus svg {
+  fill: var(--rrd-light-theme-primary-color-7);
+}
 .rr-property-row-label {
+  word-break: break-word;
   color: var(--light-theme-dark-text-color);
 }
 .rr-property-edit-button {
@@ -5261,8 +5342,13 @@ th {
   min-width: 10px;
 }
 .rr-property-indent-mark {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNDIiIGN5PSIzMiIgcj0iMTIiIGZpbGw9IiM4Njg2QjkiLz4KPC9zdmc+Cg==")
-    no-repeat center / contain;
+  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMTIiIGZpbGw9IiM4Njg2QjkiLz4KPC9zdmc+Cg==") no-repeat center / contain;
+}
+.rr-property-row-content input[type="checkbox"] {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
 }
 
 /* 인스펙터 컬러피커 아이콘 */
@@ -5468,9 +5554,12 @@ th {
 }
 
 /* edit layer 영역 */
-.rr-edit-marquee-item:not([style*="left: 0"]):not([style*="top: 0"]) {
+.rr-edit-marquee-item:not([style*="left: 0"]):not([style*="top: 0"]):not(
+    [data-target^="series"]
+  ) {
   display: none;
 }
+
 .rr-edit-marquee.rr-bandgroup-marquee
   > .rr-edit-marquee-item[style*="left: 0"]:not([style*="top: 0"]) {
   display: none;
@@ -5588,8 +5677,7 @@ th {
 }
 .rr-property-row-content input:focus,
 .rr-property-row-content select:focus {
-  outline: none;
-  border: 2px solid var(--rrd-light-theme-primary-color-8);
+  outline: 2px solid var(--rrd-light-theme-primary-color-8);
   border-radius: 3px;
 }
 /** 체크박스 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realreport-designer",
-  "version": "1.9.3",
+  "version": "1.9.5",
   "description": "RealReport Designer component library",
   "author": "Wooritech",
   "homepage": "https://real-report.com",