@itcase/ui-web 1.10.17 → 1.10.18
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var s=require("react/jsx-runtime"),i=require("clsx"),r=require("@itcase/ui-core/hooks");exports.Grid=function(
|
|
1
|
+
"use strict";var s=require("react/jsx-runtime"),i=require("clsx"),r=require("@itcase/ui-core/hooks");exports.Grid=function(t){const{id:l,className:e,dataTestId:a,dataTour:o,type:d,horizontalResizing:n,horizontalScroll:_,print:c,tag:g="div",useGridSystem:C,verticalResizing:u,before:m,after:$,onClick:h,onDoubleClick:p,children:f}=t,w=r.useDevicePropsGenerator(t),{directionClass:y,justifyContentClass:v,justifyItemsClass:j,alignContentClass:G,alignItemsClass:S,fillClass:x,fillHoverClass:b,borderColorClass:k,columnGapClass:z,columnsClass:N,heightClass:I,rowGapClass:T,rowsClass:D,widthClass:q}=w,{styles:H}=r.useStyles(t);return s.jsxs(g,{id:l,className:i(e,"grid",q&&`width_${q}`,I&&`height_${I}`,C&&"grid_state_system",y&&`grid_direction_${y}`,_&&"grid_scroll_horizontal",d&&`grid_type_${d}`,N&&`grid_columns_${N}`,D&&`grid_rows_${D}`,T&&`grid_row-gap_${T}`,z&&`grid_column-gap_${z}`,G&&`grid_align-content_${G}`,S&&`grid_align-items_${S}`,k&&`border-color_${k}`,v&&`grid_justify-content_${v}`,j&&`grid_justify-items_${j}`,x&&`fill_${x}`,b&&`fill_hover_${b}`,n&&`grid_horizontal-resizing_${n}`,u&&`grid_vertical-resizing_${u}`,!c&&"no-print",c&&"print"),"data-testid":a,"data-tour":o,style:H,onClick:h,onDoubleClick:p,children:[m&&s.jsx("div",{className:"grid__before",children:m}),f,$&&s.jsx("div",{className:"grid__after",children:$})]})},exports.GridItem=function(t){const{id:l,className:e,dataTestId:a,dataTour:o,print:d,style:n,onClick:_,children:c}=t,g=r.useDevicePropsGenerator(t),{directionClass:C,justifySelfClass:u,alignSelfClass:m,fillClass:$,fillHoverClass:h,columnEndClass:p,columnGapClass:f,columnSpanClass:w,columnStartClass:y,gapClass:v,heightClass:j,orderClass:G,rowEndClass:S,rowGapClass:x,rowSpanClass:b,rowStartClass:k,widthClass:z}=g,{styles:N}=r.useStyles(t);return s.jsx("div",{id:l,className:i(e,"grid__item",G&&`order_${G}`,$&&`fill_${$}`,h&&`fill_hover_${h}`,m&&`grid__item_align-self_${m}`,u&&`grid__item_justify-self_${u}`,y&&`grid__item_column-start_${y}`,p&&`grid__item_column-end_${p}`,w&&`grid__item_column-span_${w}`,k&&`grid__item_row-start_${k}`,S&&`grid__item_row-end_${S}`,b&&`grid__item_row-span_${b}`,C&&`direction_${C}`,v&&`gap_${v}`,z&&`width_${z}`,j&&`height_${j}`,x&&`row-gap_${x}`,!d&&"no-print",d&&"print",f&&`column-gap_${f}`),"data-testid":a,"data-tour":o,style:Object.assign({},N,n),onClick:_,children:c})},exports.GridRow=function(t){const{id:l,className:e,dataTestId:a,dataTour:o,dataId:d,htmlFor:n,print:_,tag:c="div",onClick:g,children:C}=t,u=r.useDevicePropsGenerator(t),{fillClass:m,fillHoverClass:$,borderColorClass:h,heightClass:p,widthClass:f}=u,{styles:w}=r.useStyles(t);return s.jsx(c,{id:l,className:i(e,"grid__row",f&&`width_${f}`,p&&`height_${p}`,m&&`fill_${m}`,$&&`fill_hover_${$}`,!_&&"no-print",_&&"print",h&&`border-color_${h}`),"data-id":d,"data-testid":a,"data-tour":o,htmlFor:n,style:w,onClick:g,children:C})};
|
package/dist/components/Grid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as i,jsx as s}from"react/jsx-runtime";import l from"clsx";import{useDevicePropsGenerator as t,useStyles as r}from"@itcase/ui-core/hooks";function a(a){const{id:e,className:o,dataTestId:_,dataTour:d,type:n,horizontalResizing:c,horizontalScroll:g,print:C,tag:m="div",useGridSystem:$,verticalResizing:h,before:u,after:f,onClick:p,onDoubleClick:w,children:y}=a,v=t(a),{
|
|
1
|
+
import{jsxs as i,jsx as s}from"react/jsx-runtime";import l from"clsx";import{useDevicePropsGenerator as t,useStyles as r}from"@itcase/ui-core/hooks";function a(a){const{id:e,className:o,dataTestId:_,dataTour:d,type:n,horizontalResizing:c,horizontalScroll:g,print:C,tag:m="div",useGridSystem:$,verticalResizing:h,before:u,after:f,onClick:p,onDoubleClick:w,children:y}=a,v=t(a),{directionClass:b,justifyContentClass:k,justifyItemsClass:j,alignContentClass:z,alignItemsClass:N,fillClass:S,fillHoverClass:I,borderColorClass:T,columnGapClass:G,columnsClass:x,heightClass:H,rowGapClass:D,rowsClass:E,widthClass:F}=v,{styles:R}=r(a);return i(m,{id:e,className:l(o,"grid",F&&`width_${F}`,H&&`height_${H}`,$&&"grid_state_system",b&&`grid_direction_${b}`,g&&"grid_scroll_horizontal",n&&`grid_type_${n}`,x&&`grid_columns_${x}`,E&&`grid_rows_${E}`,D&&`grid_row-gap_${D}`,G&&`grid_column-gap_${G}`,z&&`grid_align-content_${z}`,N&&`grid_align-items_${N}`,T&&`border-color_${T}`,k&&`grid_justify-content_${k}`,j&&`grid_justify-items_${j}`,S&&`fill_${S}`,I&&`fill_hover_${I}`,c&&`grid_horizontal-resizing_${c}`,h&&`grid_vertical-resizing_${h}`,!C&&"no-print",C&&"print"),"data-testid":_,"data-tour":d,style:R,onClick:p,onDoubleClick:w,children:[u&&s("div",{className:"grid__before",children:u}),y,f&&s("div",{className:"grid__after",children:f})]})}function e(i){const{id:a,className:e,dataTestId:o,dataTour:_,print:d,style:n,onClick:c,children:g}=i,C=t(i),{directionClass:m,justifySelfClass:$,alignSelfClass:h,fillClass:u,fillHoverClass:f,columnEndClass:p,columnGapClass:w,columnSpanClass:y,columnStartClass:v,gapClass:b,heightClass:k,orderClass:j,rowEndClass:z,rowGapClass:N,rowSpanClass:S,rowStartClass:I,widthClass:T}=C,{styles:G}=r(i);return s("div",{id:a,className:l(e,"grid__item",j&&`order_${j}`,u&&`fill_${u}`,f&&`fill_hover_${f}`,h&&`grid__item_align-self_${h}`,$&&`grid__item_justify-self_${$}`,v&&`grid__item_column-start_${v}`,p&&`grid__item_column-end_${p}`,y&&`grid__item_column-span_${y}`,I&&`grid__item_row-start_${I}`,z&&`grid__item_row-end_${z}`,S&&`grid__item_row-span_${S}`,m&&`direction_${m}`,b&&`gap_${b}`,T&&`width_${T}`,k&&`height_${k}`,N&&`row-gap_${N}`,!d&&"no-print",d&&"print",w&&`column-gap_${w}`),"data-testid":o,"data-tour":_,style:Object.assign({},G,n),onClick:c,children:g})}function o(i){const{id:a,className:e,dataTestId:o,dataTour:_,dataId:d,htmlFor:n,print:c,tag:g="div",onClick:C,children:m}=i,$=t(i),{fillClass:h,fillHoverClass:u,borderColorClass:f,heightClass:p,widthClass:w}=$,{styles:y}=r(i);return s(g,{id:a,className:l(e,"grid__row",w&&`width_${w}`,p&&`height_${p}`,h&&`fill_${h}`,u&&`fill_hover_${u}`,!c&&"no-print",c&&"print",f&&`border-color_${f}`),"data-id":d,"data-testid":o,"data-tour":_,htmlFor:n,style:y,onClick:C,children:m})}export{a as Grid,e as GridItem,o as GridRow};
|
|
@@ -64024,6 +64024,90 @@ h2.react-datepicker__current-month {
|
|
|
64024
64024
|
}
|
|
64025
64025
|
}
|
|
64026
64026
|
}
|
|
64027
|
+
.grid {
|
|
64028
|
+
&_direction {
|
|
64029
|
+
&_horizontal {
|
|
64030
|
+
display: flex;
|
|
64031
|
+
flex-direction: row;
|
|
64032
|
+
align-items: flex-start;
|
|
64033
|
+
&.print {
|
|
64034
|
+
@media print {
|
|
64035
|
+
display: flex;
|
|
64036
|
+
}
|
|
64037
|
+
}
|
|
64038
|
+
&-reverse {
|
|
64039
|
+
display: flex;
|
|
64040
|
+
flex-direction: row-reverse;
|
|
64041
|
+
align-items: flex-start;
|
|
64042
|
+
&.print {
|
|
64043
|
+
@media print {
|
|
64044
|
+
display: flex;
|
|
64045
|
+
}
|
|
64046
|
+
}
|
|
64047
|
+
}
|
|
64048
|
+
}
|
|
64049
|
+
&_vertical {
|
|
64050
|
+
display: flex;
|
|
64051
|
+
flex-direction: column;
|
|
64052
|
+
align-items: flex-start;
|
|
64053
|
+
&.print {
|
|
64054
|
+
@media print {
|
|
64055
|
+
display: flex;
|
|
64056
|
+
}
|
|
64057
|
+
}
|
|
64058
|
+
&-reverse {
|
|
64059
|
+
display: flex;
|
|
64060
|
+
flex-direction: column-reverse;
|
|
64061
|
+
align-items: flex-start;
|
|
64062
|
+
&.print {
|
|
64063
|
+
@media print {
|
|
64064
|
+
display: flex;
|
|
64065
|
+
}
|
|
64066
|
+
}
|
|
64067
|
+
}
|
|
64068
|
+
}
|
|
64069
|
+
&_row {
|
|
64070
|
+
display: flex;
|
|
64071
|
+
flex-direction: row;
|
|
64072
|
+
align-items: flex-start;
|
|
64073
|
+
&.print {
|
|
64074
|
+
@media print {
|
|
64075
|
+
display: flex;
|
|
64076
|
+
}
|
|
64077
|
+
}
|
|
64078
|
+
}
|
|
64079
|
+
&_row-reverse {
|
|
64080
|
+
display: flex;
|
|
64081
|
+
flex-direction: row-reverse;
|
|
64082
|
+
align-items: flex-start;
|
|
64083
|
+
&.print {
|
|
64084
|
+
@media print {
|
|
64085
|
+
display: flex;
|
|
64086
|
+
}
|
|
64087
|
+
}
|
|
64088
|
+
}
|
|
64089
|
+
&_column {
|
|
64090
|
+
display: flex;
|
|
64091
|
+
flex-direction: column;
|
|
64092
|
+
align-items: flex-start;
|
|
64093
|
+
&.print {
|
|
64094
|
+
@media print {
|
|
64095
|
+
display: flex;
|
|
64096
|
+
}
|
|
64097
|
+
}
|
|
64098
|
+
}
|
|
64099
|
+
&_column-reverse {
|
|
64100
|
+
display: flex;
|
|
64101
|
+
flex-direction: column-reverse;
|
|
64102
|
+
align-items: flex-start;
|
|
64103
|
+
&.print {
|
|
64104
|
+
@media print {
|
|
64105
|
+
display: flex;
|
|
64106
|
+
}
|
|
64107
|
+
}
|
|
64108
|
+
}
|
|
64109
|
+
}
|
|
64110
|
+
}
|
|
64027
64111
|
.grid {
|
|
64028
64112
|
&&_vertical-resizing {
|
|
64029
64113
|
&_fill {
|
|
@@ -4,8 +4,8 @@ import { useDevicePropsGenerator, useStyles } from '@itcase/ui-core/hooks';
|
|
|
4
4
|
function Grid(props) {
|
|
5
5
|
const { id, className, dataTestId, dataTour, type, horizontalResizing, horizontalScroll, print, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
|
|
6
6
|
const propsGenerator = useDevicePropsGenerator(props);
|
|
7
|
-
const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
|
|
7
|
+
const { directionClass, justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
|
|
8
8
|
const { styles: gridStyles } = useStyles(props);
|
|
9
|
-
return (_jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && _jsx("div", { className: "grid__before", children: before }), children, after && _jsx("div", { className: "grid__after", children: after })] }));
|
|
9
|
+
return (_jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, directionClass && `grid_direction_${directionClass}`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && _jsx("div", { className: "grid__before", children: before }), children, after && _jsx("div", { className: "grid__after", children: after })] }));
|
|
10
10
|
}
|
|
11
11
|
export { Grid };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.18",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -116,5 +116,5 @@
|
|
|
116
116
|
"storybook": "^10.4.1",
|
|
117
117
|
"typescript": "^6.0.3"
|
|
118
118
|
},
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "60caa3c47e25c3b96ee0540a91547595c9ab7aed"
|
|
120
120
|
}
|