@itcase/ui-web 1.10.1 → 1.10.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/dist/cjs/components/Response.js +1 -1
- package/dist/cjs/components/Tab.js +1 -1
- package/dist/components/Response.js +1 -1
- package/dist/components/Tab.js +1 -1
- package/dist/types/components/Response/Response.constant.d.ts +8 -0
- package/dist/types/components/Response/Response.constant.js +8 -0
- package/dist/types/components/Tab/Tab.appearance.d.ts +8 -0
- package/dist/types/components/Tab/Tab.interface.d.ts +3 -2
- package/dist/types/components/Tab/Tab.js +2 -2
- package/dist/types/components/Tab/appearance/tabSize.d.ts +8 -0
- package/dist/types/components/Tab/appearance/tabSize.js +8 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("./Response/img.js"),r=require("react/jsx-runtime"),a=require("react"),t=require("clsx"),o=require("@itcase/ui-core/hoc"),i=require("@itcase/ui-core/hooks"),s=require("../../Button_cjs_CDr9zTdB.js"),n=require("../../Group_cjs_CiLUYKP7.js"),
|
|
1
|
+
"use strict";var e=require("./Response/img.js"),r=require("react/jsx-runtime"),a=require("react"),t=require("clsx"),o=require("@itcase/ui-core/hoc"),i=require("@itcase/ui-core/hooks"),s=require("../../Button_cjs_CDr9zTdB.js"),n=require("../../Group_cjs_CiLUYKP7.js"),c=require("../../primitives_cjs_ocTnUpml.js");require("@itcase/ui-core/utils"),require("../../Loader_cjs_nwF8h8Ku.js"),require("@itcase/common"),require("@rc-component/tooltip"),require("react-inlinesvg");const l={confirm:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Confirm),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},d={danger:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Danger),primaryButtonAppearance:"dangerPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"dangerPrimary",svgPathFill:"dangerPrimary"}},u={empty:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Empty),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},p={error:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Error),primaryButtonAppearance:"errorPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"errorPrimary",svgPathFill:"errorPrimary"}},y={fail:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Fail),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},m={nothingFound:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.NothingFound),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},f={refresh:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Refresh),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},x={success:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Success),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"accentPrimary",svgPathFill:"accentPrimary"}},g={...l,...u,...d,...f,...{unableLoadData:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.UnableLoadData),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},...m,...y,...p,...x,...{warning:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.responseIcon.Warning),primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonAppearance:"warningPrimary sizeXXL solid rounded",svgFill:"warningPrimary",svgPathFill:"warningPrimary"}},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"}},B={appearance:g,setAppearance:e=>{B.appearance=e}},S=o.urlWithAssetPrefix(a.forwardRef(function(e,o){const{appearance:l,className:d,dataTestId:u,dataTour:p,width:y,height:m,title:f,desc:x,primaryButton:g,secondaryButton:S,showPrimaryButton:z=!0,showSecondaryButton:h=!0,before:X,after:T,isSkeleton:L,isBottomButton:P,onClickPrimaryButton:b,onClickSecondaryButton:A}=e,_=i.useAppearanceConfig(l,B),v=i.useDevicePropsGenerator(e,_),{fillClass:C,fillHoverClass:F,titleTextColor:w,titleTextSize:j,titleTextWeight:I,descTextColor:q,descTextSize:N,descTextWeight:M,borderColorClass:$,borderColorHoverClass:D,borderTypeClass:W,borderWidthClass:k,heightClass:E,imageSrc:H,primaryButtonAfter:Q,primaryButtonAppearance:R,primaryButtonBefore:G,primaryButtonFill:U,primaryButtonFillHover:O,primaryButtonLabel:J,primaryButtonLabelTextColor:K,primaryButtonLabelTextSize:V,primaryButtonShape:Y,primaryButtonSize:Z,primaryButtonWidth:ee,secondaryButtonAfter:re,secondaryButtonAppearance:ae,secondaryButtonBefore:te,secondaryButtonFill:oe,secondaryButtonFillHover:ie,secondaryButtonLabel:se,secondaryButtonLabelTextColor:ne,secondaryButtonLabelTextSize:ce,secondaryButtonShape:le,secondaryButtonSize:de,secondaryButtonWidth:ue,shapeClass:pe,svgFillClass:ye,SvgImage:me,svgPathFillClass:fe,svgSrc:xe,widthClass:ge}=v,Be=a.useMemo(()=>{const e=H||xe,a=me;if(a){const e={};return y&&(e.width=y),m&&(e.height=m),r.jsx(a,{...e})}return e?r.jsx("img",{src:e}):null},[H,xe,me,y,m]),{styles:Se,wrapper:ze}=i.useStyles(e);return r.jsxs("div",{className:t(d,"response",P&&"response_bottom-button",$&&`border-color_${$}`,D&&`border-color_hover_${D}`,W&&`border_type_${W}`,k&&`border-width_${k}`,C&&`fill_${C}`,F&&`fill_hover_${F}`,E&&`height_${E}`,pe&&`shape_${pe}`,ge&&`width_${ge}`,L&&"skeleton"),ref:o,"data-testid":u,"data-tour":p,style:Se,children:[X,r.jsxs("div",{className:"response__wrapper",style:ze,children:[Be&&r.jsx("div",{className:t("response__image",ye&&`svg_fill_${ye}`,fe&&`svg_path_fill_${fe}`),children:Be}),r.jsxs("div",{className:"response__wrapper-inner",children:[f&&r.jsx(c.Text,{className:"response__title",size:j,textColor:w,textWeight:I,children:f}),x&&r.jsx(c.Text,{className:"response__desc",size:N,textColor:q,textWeight:M,children:x})]})]}),(J||g||se||S||_)&&r.jsxs(n.Group,{className:"response__button",width:"fill",children:[J&&z?r.jsx(s.Button,{appearance:R,className:"response__button-item",width:ee||"fill",size:Z,fill:U,fillHover:O,label:J,labelTextColor:K,labelTextSize:V,shape:Y,before:G,after:Q,onClick:b}):g,se&&h?r.jsx(s.Button,{appearance:ae,className:"response__button-item",width:ue||"fill",size:de,fill:oe,fillHover:ie,label:se,labelTextColor:ne,labelTextSize:ce,shape:le,before:te,after:re,onClick:A}):S]}),T]})})),z={error:{appearance:"error sizeM ghost rounded",title:"Ошибка",desc:"Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com",primaryButtonAppearance:"errorPrimary sizeXXL solid rounded",primaryButtonLabel:"ОК",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},errorAccessDenied:{appearance:"unableLoadData sizeM ghost rounded",title:"Доступ ограничен",desc:"Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com",code:"401/403",imageSrc:e.responseIcon.UnableLoadData,primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Повторить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},errorNetwork:{appearance:"unableLoadData sizeM ghost rounded",title:"Ошибка соединения",desc:"Не удалось подключиться. Проверьте интернет-соединение и повторите попытку",imageSrc:e.responseIcon.UnableLoadData,primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Обновить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},fail:{appearance:"fail sizeM ghost rounded",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"ОК"},nothingFound:{appearance:"nothingFound sizeM ghost rounded",title:"Ничего не найдено",desc:"Нет данных по заданным параметрам",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Сбросить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},confirm:{appearance:"confirm sizeM ghost rounded",title:"Вы уверены?",primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",primaryButtonLabel:"Да",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},empty:{appearance:"empty sizeM ghost rounded",title:"Список пуст",desc:"Нет данных по заданным параметрам",code:"200",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"ОК"},success:{appearance:"success sizeM ghost rounded",title:"Готово",desc:"Операция успешно выполнена",code:"200",primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",primaryButtonLabel:"ОК"},warning:{appearance:"warning sizeM ghost rounded",title:"Внимание",primaryButtonAppearance:"warningPrimary sizeXXL solid rounded",primaryButtonLabel:"Повторить",secondaryButtonAppearance:"warningPrimary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"}};exports.responseIcon=e.responseIcon,exports.RESPONSE_MESSAGES=z,exports.Response=S,exports.responseAppearance=g,exports.responseConfig=B;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("clsx"),a=require("@itcase/ui-core/hooks"),l=require("@itcase/ui-core/utils"),s=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc");const c={warningPrimary:{fill:"warningPrimary",fillDisabled:"disabledPrimary",labelColor:"warningTextPrimary",labelColorActive:"warningTextPrimary",badgeAppearance:"warningPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"disabledPrimary"},errorPrimary:{fill:"errorPrimary",fillDisabled:"disabledPrimary",labelColor:"errorTextPrimary",labelColorActive:"errorTextPrimary",labelColorDisabled:"errorTextDisabled",badgeAppearance:"errorPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"errorDisabled"},successPrimary:{fill:"successPrimary",fillDisabled:"successDisabled",labelColor:"successTextPrimary",labelColorActive:"successTextPrimary",labelColorDisabled:"successTextDisabled",badgeAppearance:"successPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"successDisabled"},surfacePrimary:{fill:"surfacePrimary",fillActive:"surfaceActivePrimary",fillActiveHover:"surfaceHoverSecondary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFill:"surfacePrimary",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillActive:"accentActivePrimary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverQuaternary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},sizeXXL:{size:"xxl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXL:{size:"xl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeL:{size:"l",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeM:{size:"m",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeS:{size:"s",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXS:{size:"xs",labelTextSize:"xs",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXXS:{size:"xxs",labelTextSize:"xs",badgeAppearanceSize:"sizeXXS",dividerSize:"s",dividerSizeActive:"m"},solid:{borderColor:"none",borderColorActive:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none",borderColorActive:"none",dividerFill:"none"}},t={appearance:c,setAppearance:e=>{t.appearance=e}};function o(c){const{appearance:o,className:d,dataTestId:n,dataTour:b,label:v,badgeValue:u,href:p,link:f,rel:y,target:m,before:x,after:A,isActive:z=!1,isDisabled:S=!1,isSkeleton:C,onClick:g,onMouseEnter:P,children:T}=c,_=a.useAppearanceConfig(o,t,S),D=a.useDevicePropsGenerator(c,_),{rootClasses:h}=a.useActiveClasses({propsGenerator:D,isActive:z,isDisabled:S}),{justifyContentClass:F,alignClass:H,labelTextAlign:j,labelTextColor:w,labelTextColorActive:$,labelTextColorHover:I,labelTextSize:X,labelTextStyle:k,labelTextWeight:B,labelTextWrap:M,badgeAppearance:N,badgeAppearanceSize:q,badgeShape:L,badgeSize:W,badgeTextColor:G,badgeTextSize:Q,dividerFill:V,dividerFillActive:E,dividerFillActiveHover:K,dividerFillDisabled:O,dividerFillHover:J,dividerSize:R,dividerSizeActive:U,icon:Y,iconFill:Z,iconFillIcon:ee,iconFillSize:ie,iconShape:re,iconSize:ae,iconSrc:le,linkFill:se,shapeClass:ce,sizeClass:te,widthClass:oe}=D,{styles:de}=a.useStyles(c);return e.jsx("div",{className:r("tab",d,h,z&&"tab_state_active",S&&"tab_state_disabled",te&&`tab_size_${te}`,ce&&`shape_${ce}`,oe&&`width_${oe}`,F&&`tab_justify-content_${F}`,C&&"skeleton",g&&"cursor_type_pointer"),"data-testid":n&&`${n}Tab`,"data-tour":b,style:de,onClick:g,onMouseEnter:P,children:e.jsxs(s.Link,{className:r("tab__link",!S&&"cursor_type_pointer"),fill:se,href:f||p,rel:y,target:m,children:[x,T||e.jsxs(i.Fragment,{children:[e.jsxs("div",{className:r("tab__wrapper",H&&`align_${H}`),children:[v&&e.jsx(s.Text,{className:"tab__label",size:X,textAlign:j,textColor:w,textColorActive:$,textColorHover:I,textStyle:k,textWeight:B,textWrap:M,isActive:z,isDisabled:S,children:v}),Boolean(u)&&e.jsx(s.Badge,{appearance:l.mergeAppearanceKeys(N,q),size:W,textColor:G,textSize:Q,shape:L,value:u}),(Y||le)&&e.jsx(s.Icon,{className:"tab__icon_after",fill:Z,fillSize:ie,iconFill:ee,iconSize:ae,imageSrc:le,shape:re,SvgImage:Y})]}),z,e.jsx(s.Divider,{className:"tab__divider",width:"fill",direction:"horizontal",size:z?U:R,fill:V,fillActive:E,fillActiveHover:K,fillDisabled:O,fillHover:J,zIndex:"1",isActive:z,isDisabled:S})]}),A]})})}exports.Tab=o,exports.TabGroup=function(l){const{className:s,dataTestId:c,dataTour:t,horizontalScroll:d,style:n,tabAppearance:b,tabList:v,children:u}=l,p=a.useDevicePropsGenerator(l),{directionClass:f,alignClass:y,alignDirectionClass:m,fillClass:x,borderColorClass:A,borderTypeClass:z,borderWidthClass:S,widthClass:C,wrapClass:g}=p,{styles:P,wrapper:T}=a.useStyles(l);return e.jsx("div",{className:r(s,"tab-group","group",C&&`width_${C}`,m&&`align_${m}`,f&&`group_direction_${f}`,y&&`align_${y}`,x&&`fill_${x}`,d&&"group_scroll_horizontal",g&&`group_wrap_${g}`,A&&`border-color_${A}`,S&&`border-width_${S}`,z&&`border_type_${z}`),"data-testid":c,"data-tour":t,style:Object.assign({},P,n),children:d?e.jsxs("div",{className:"tab-group__wrapper",style:T,children:[v?.map(i=>e.jsx(o,{appearance:b,label:i.label,isActive:i.isActive},i.key)),u]}):e.jsxs(i.Fragment,{children:[v?.map(i=>e.jsx(o,{appearance:b,label:i.label,badgeValue:i.badgeValue,icon:i.icon,iconSrc:i.iconSrc,isActive:i.isActive,onClick:i.onClick},i.key)),u]})})},exports.tabAppearance=c,exports.tabConfig=t;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{responseIcon as e}from"./Response/img.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{forwardRef as t,useMemo as o}from"react";import i from"clsx";import{urlWithAssetPrefix as n}from"@itcase/ui-core/hoc";import{useAppearanceConfig as s,useDevicePropsGenerator as l,useStyles as c}from"@itcase/ui-core/hooks";import{B as d}from"../Button_es_M2ryMLoI.js";import{G as u}from"../Group_es_DIuSNHx3.js";import{T as p}from"../primitives_es_BQqNcRQk.js";import"@itcase/ui-core/utils";import"../Loader_es_CwVQZ1L0.js";import"@itcase/common";import"@rc-component/tooltip";import"react-inlinesvg";const m={confirm:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Confirm),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},y={danger:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Danger),primaryButtonAppearance:"dangerPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"dangerPrimary",svgPathFill:"dangerPrimary"}},f={empty:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Empty),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},g={error:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Error),primaryButtonAppearance:"errorPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"errorPrimary",svgPathFill:"errorPrimary"}},
|
|
1
|
+
import{responseIcon as e}from"./Response/img.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{forwardRef as t,useMemo as o}from"react";import i from"clsx";import{urlWithAssetPrefix as n}from"@itcase/ui-core/hoc";import{useAppearanceConfig as s,useDevicePropsGenerator as l,useStyles as c}from"@itcase/ui-core/hooks";import{B as d}from"../Button_es_M2ryMLoI.js";import{G as u}from"../Group_es_DIuSNHx3.js";import{T as p}from"../primitives_es_BQqNcRQk.js";import"@itcase/ui-core/utils";import"../Loader_es_CwVQZ1L0.js";import"@itcase/common";import"@rc-component/tooltip";import"react-inlinesvg";const m={confirm:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Confirm),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},y={danger:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Danger),primaryButtonAppearance:"dangerPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"dangerPrimary",svgPathFill:"dangerPrimary"}},f={empty:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Empty),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},g={error:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Error),primaryButtonAppearance:"errorPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"errorPrimary",svgPathFill:"errorPrimary"}},B={fail:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Fail),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},x={nothingFound:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.NothingFound),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},S={refresh:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Refresh),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},z={success:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Success),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"accentPrimary",svgPathFill:"accentPrimary"}},h={...m,...f,...y,...S,...{unableLoadData:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.UnableLoadData),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},...x,...B,...g,...z,...{warning:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Warning),primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonAppearance:"warningPrimary sizeXXL solid rounded",svgFill:"warningPrimary",svgPathFill:"warningPrimary"}},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"}},X={appearance:h,setAppearance:e=>{X.appearance=e}},T=n(t(function(e,t){const{appearance:n,className:m,dataTestId:y,dataTour:f,width:g,height:B,title:x,desc:S,primaryButton:z,secondaryButton:h,showPrimaryButton:T=!0,showSecondaryButton:L=!0,before:P,after:b,isSkeleton:_,isBottomButton:A,onClickPrimaryButton:v,onClickSecondaryButton:C}=e,F=s(n,X),w=l(e,F),{fillClass:N,fillHoverClass:$,titleTextColor:M,titleTextSize:k,titleTextWeight:D,descTextColor:W,descTextSize:j,descTextWeight:H,borderColorClass:Q,borderColorHoverClass:U,borderTypeClass:E,borderWidthClass:G,heightClass:I,imageSrc:R,primaryButtonAfter:q,primaryButtonAppearance:J,primaryButtonBefore:K,primaryButtonFill:O,primaryButtonFillHover:V,primaryButtonLabel:Y,primaryButtonLabelTextColor:Z,primaryButtonLabelTextSize:ee,primaryButtonShape:re,primaryButtonSize:ae,primaryButtonWidth:te,secondaryButtonAfter:oe,secondaryButtonAppearance:ie,secondaryButtonBefore:ne,secondaryButtonFill:se,secondaryButtonFillHover:le,secondaryButtonLabel:ce,secondaryButtonLabelTextColor:de,secondaryButtonLabelTextSize:ue,secondaryButtonShape:pe,secondaryButtonSize:me,secondaryButtonWidth:ye,shapeClass:fe,svgFillClass:ge,SvgImage:Be,svgPathFillClass:xe,svgSrc:Se,widthClass:ze}=w,he=o(()=>{const e=R||Se,a=Be;if(a){const e={};return g&&(e.width=g),B&&(e.height=B),r(a,{...e})}return e?r("img",{src:e}):null},[R,Se,Be,g,B]),{styles:Xe,wrapper:Te}=c(e);return a("div",{className:i(m,"response",A&&"response_bottom-button",Q&&`border-color_${Q}`,U&&`border-color_hover_${U}`,E&&`border_type_${E}`,G&&`border-width_${G}`,N&&`fill_${N}`,$&&`fill_hover_${$}`,I&&`height_${I}`,fe&&`shape_${fe}`,ze&&`width_${ze}`,_&&"skeleton"),ref:t,"data-testid":y,"data-tour":f,style:Xe,children:[P,a("div",{className:"response__wrapper",style:Te,children:[he&&r("div",{className:i("response__image",ge&&`svg_fill_${ge}`,xe&&`svg_path_fill_${xe}`),children:he}),a("div",{className:"response__wrapper-inner",children:[x&&r(p,{className:"response__title",size:k,textColor:M,textWeight:D,children:x}),S&&r(p,{className:"response__desc",size:j,textColor:W,textWeight:H,children:S})]})]}),(Y||z||ce||h||F)&&a(u,{className:"response__button",width:"fill",children:[Y&&T?r(d,{appearance:J,className:"response__button-item",width:te||"fill",size:ae,fill:O,fillHover:V,label:Y,labelTextColor:Z,labelTextSize:ee,shape:re,before:K,after:q,onClick:v}):z,ce&&L?r(d,{appearance:ie,className:"response__button-item",width:ye||"fill",size:me,fill:se,fillHover:le,label:ce,labelTextColor:de,labelTextSize:ue,shape:pe,before:ne,after:oe,onClick:C}):h]}),b]})})),L={error:{appearance:"error sizeM ghost rounded",title:"Ошибка",desc:"Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com",primaryButtonAppearance:"errorPrimary sizeXXL solid rounded",primaryButtonLabel:"ОК",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},errorAccessDenied:{appearance:"unableLoadData sizeM ghost rounded",title:"Доступ ограничен",desc:"Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com",code:"401/403",imageSrc:e.UnableLoadData,primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Повторить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},errorNetwork:{appearance:"unableLoadData sizeM ghost rounded",title:"Ошибка соединения",desc:"Не удалось подключиться. Проверьте интернет-соединение и повторите попытку",imageSrc:e.UnableLoadData,primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Обновить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},fail:{appearance:"fail sizeM ghost rounded",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"ОК"},nothingFound:{appearance:"nothingFound sizeM ghost rounded",title:"Ничего не найдено",desc:"Нет данных по заданным параметрам",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Сбросить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},confirm:{appearance:"confirm sizeM ghost rounded",title:"Вы уверены?",primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",primaryButtonLabel:"Да",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},empty:{appearance:"empty sizeM ghost rounded",title:"Список пуст",desc:"Нет данных по заданным параметрам",code:"200",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"ОК"},success:{appearance:"success sizeM ghost rounded",title:"Готово",desc:"Операция успешно выполнена",code:"200",primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",primaryButtonLabel:"ОК"},warning:{appearance:"warning sizeM ghost rounded",title:"Внимание",primaryButtonAppearance:"warningPrimary sizeXXL solid rounded",primaryButtonLabel:"Повторить",secondaryButtonAppearance:"warningPrimary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"}};export{L as RESPONSE_MESSAGES,T as Response,h as responseAppearance,X as responseConfig,e as responseIcon};
|
package/dist/components/Tab.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import r from"react";import a from"clsx";import{useAppearanceConfig as l,useDevicePropsGenerator as s,useActiveClasses as c,useStyles as t}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as o}from"@itcase/ui-core/utils";import{L as d,T as n,B as b,I as v,D as m}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";const f={warningPrimary:{fill:"warningPrimary",fillDisabled:"disabledPrimary",labelColor:"warningTextPrimary",labelColorActive:"warningTextPrimary",badgeAppearance:"warningPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"disabledPrimary"},errorPrimary:{fill:"errorPrimary",fillDisabled:"disabledPrimary",labelColor:"errorTextPrimary",labelColorActive:"errorTextPrimary",labelColorDisabled:"errorTextDisabled",badgeAppearance:"errorPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"errorDisabled"},successPrimary:{fill:"successPrimary",fillDisabled:"successDisabled",labelColor:"successTextPrimary",labelColorActive:"successTextPrimary",labelColorDisabled:"successTextDisabled",badgeAppearance:"successPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"successDisabled"},surfacePrimary:{fill:"surfacePrimary",fillActive:"surfaceActivePrimary",fillActiveHover:"surfaceHoverSecondary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFill:"surfacePrimary",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillActive:"accentActivePrimary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverQuaternary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},sizeXXL:{size:"xxl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXL:{size:"xl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeL:{size:"l",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeM:{size:"m",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeS:{size:"s",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXS:{size:"xs",labelTextSize:"xs",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXXS:{size:"xxs",labelTextSize:"xs",badgeAppearanceSize:"sizeXXS",dividerSize:"s",dividerSizeActive:"m"},solid:{borderColor:"none",borderColorActive:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none",borderColorActive:"none",dividerFill:"none"}},p={appearance:f,setAppearance:e=>{p.appearance=e}};function u(f){const{appearance:u,className:y,dataTestId:z,dataTour:A,label:S,badgeValue:x,href:C,link:g,rel:P,target:T,before:_,after:D,isActive:h=!1,isDisabled:F=!1,isSkeleton:H,onClick:w,onMouseEnter:$,children:I}=f,X=l(u,p,F),k=s(f,X),{rootClasses:B}=c({propsGenerator:k,isActive:h,isDisabled:F}),{justifyContentClass:M,alignClass:N,labelTextAlign:j,labelTextColor:L,labelTextColorActive:W,labelTextColorHover:Q,labelTextSize:V,labelTextStyle:E,labelTextWeight:G,labelTextWrap:O,badgeAppearance:q,badgeAppearanceSize:J,badgeShape:K,badgeSize:R,badgeTextColor:U,badgeTextSize:Y,dividerFill:Z,dividerFillActive:ee,dividerFillActiveHover:ie,dividerFillDisabled:re,dividerFillHover:ae,dividerSize:le,dividerSizeActive:se,icon:ce,iconFill:te,iconFillIcon:oe,iconFillSize:de,iconShape:ne,iconSize:be,iconSrc:ve,linkFill:me,shapeClass:fe,sizeClass:pe,widthClass:ue}=k,{styles:ye}=t(f);return e("div",{className:a("tab",y,B,h&&"tab_state_active",F&&"tab_state_disabled",pe&&`tab_size_${pe}`,fe&&`shape_${fe}`,ue&&`width_${ue}`,M&&`tab_justify-content_${M}`,H&&"skeleton",w&&"cursor_type_pointer"),"data-testid":z&&`${z}Tab`,"data-tour":A,style:ye,onClick:w,onMouseEnter:$,children:i(d,{className:a("tab__link",!F&&"cursor_type_pointer"),fill:me,href:g||C,rel:P,target:T,children:[_,I||i(r.Fragment,{children:[i("div",{className:a("tab__wrapper",N&&`align_${N}`),children:[S&&e(n,{className:"tab__label",size:V,textAlign:j,textColor:L,textColorActive:W,textColorHover:Q,textStyle:E,textWeight:G,textWrap:O,isActive:h,isDisabled:F,children:S}),Boolean(x)&&e(b,{appearance:o(q,J),size:R,textColor:U,textSize:Y,shape:K,value:x}),(ce||ve)&&e(v,{className:"tab__icon_after",fill:te,fillSize:de,iconFill:oe,iconSize:be,imageSrc:ve,shape:ne,SvgImage:ce})]}),h,e(m,{className:"tab__divider",width:"fill",direction:"horizontal",size:h?se:le,fill:Z,fillActive:ee,fillActiveHover:ie,fillDisabled:re,fillHover:ae,zIndex:"1",isActive:h,isDisabled:F})]}),D]})})}function y(l){const{className:c,dataTestId:o,dataTour:d,horizontalScroll:n,style:b,tabAppearance:v,tabList:m,children:f}=l,p=s(l),{directionClass:y,alignClass:z,alignDirectionClass:A,fillClass:S,borderColorClass:x,borderTypeClass:C,borderWidthClass:g,widthClass:P,wrapClass:T}=p,{styles:_,wrapper:D}=t(l);return e("div",{className:a(c,"tab-group","group",P&&`width_${P}`,A&&`align_${A}`,y&&`group_direction_${y}`,z&&`align_${z}`,S&&`fill_${S}`,n&&"group_scroll_horizontal",T&&`group_wrap_${T}`,x&&`border-color_${x}`,g&&`border-width_${g}`,C&&`border_type_${C}`),"data-testid":o,"data-tour":d,style:Object.assign({},_,b),children:n?i("div",{className:"tab-group__wrapper",style:D,children:[m?.map(i=>e(u,{appearance:v,label:i.label,isActive:i.isActive},i.key)),f]}):i(r.Fragment,{children:[m?.map(i=>e(u,{appearance:v,label:i.label,badgeValue:i.badgeValue,icon:i.icon,iconSrc:i.iconSrc,isActive:i.isActive,onClick:i.onClick},i.key)),f]})})}export{u as Tab,y as TabGroup,f as tabAppearance,p as tabConfig};
|
|
@@ -59,6 +59,14 @@ declare const RESPONSE_MESSAGES: {
|
|
|
59
59
|
primaryButtonAppearance: string;
|
|
60
60
|
primaryButtonLabel: string;
|
|
61
61
|
};
|
|
62
|
+
success: {
|
|
63
|
+
appearance: string;
|
|
64
|
+
title: string;
|
|
65
|
+
desc: string;
|
|
66
|
+
code: string;
|
|
67
|
+
primaryButtonAppearance: string;
|
|
68
|
+
primaryButtonLabel: string;
|
|
69
|
+
};
|
|
62
70
|
warning: {
|
|
63
71
|
appearance: string;
|
|
64
72
|
title: string;
|
|
@@ -64,6 +64,14 @@ const RESPONSE_MESSAGES = {
|
|
|
64
64
|
primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
|
|
65
65
|
primaryButtonLabel: 'ОК',
|
|
66
66
|
},
|
|
67
|
+
success: {
|
|
68
|
+
appearance: 'success sizeM ghost rounded',
|
|
69
|
+
title: 'Готово',
|
|
70
|
+
desc: 'Операция успешно выполнена',
|
|
71
|
+
code: '200',
|
|
72
|
+
primaryButtonAppearance: 'accentPrimary sizeXXL solid rounded',
|
|
73
|
+
primaryButtonLabel: 'ОК',
|
|
74
|
+
},
|
|
67
75
|
warning: {
|
|
68
76
|
appearance: 'warning sizeM ghost rounded',
|
|
69
77
|
title: 'Внимание',
|
|
@@ -18,41 +18,49 @@ declare const tabAppearance: {
|
|
|
18
18
|
labelTextSize: "s";
|
|
19
19
|
badgeAppearanceSize: "sizeXS";
|
|
20
20
|
dividerSize: "s";
|
|
21
|
+
dividerSizeActive: "m";
|
|
21
22
|
};
|
|
22
23
|
sizeXL: {
|
|
23
24
|
size: "xl";
|
|
24
25
|
labelTextSize: "s";
|
|
25
26
|
badgeAppearanceSize: "sizeXS";
|
|
26
27
|
dividerSize: "s";
|
|
28
|
+
dividerSizeActive: "m";
|
|
27
29
|
};
|
|
28
30
|
sizeL: {
|
|
29
31
|
size: "l";
|
|
30
32
|
labelTextSize: "s";
|
|
31
33
|
badgeAppearanceSize: "sizeXS";
|
|
32
34
|
dividerSize: "s";
|
|
35
|
+
dividerSizeActive: "m";
|
|
33
36
|
};
|
|
34
37
|
sizeM: {
|
|
35
38
|
size: "m";
|
|
36
39
|
labelTextSize: "s";
|
|
37
40
|
badgeAppearanceSize: "sizeXS";
|
|
38
41
|
dividerSize: "s";
|
|
42
|
+
dividerSizeActive: "m";
|
|
39
43
|
};
|
|
40
44
|
sizeS: {
|
|
41
45
|
size: "s";
|
|
42
46
|
labelTextSize: "s";
|
|
43
47
|
badgeAppearanceSize: "sizeXS";
|
|
44
48
|
dividerSize: "s";
|
|
49
|
+
dividerSizeActive: "m";
|
|
45
50
|
};
|
|
46
51
|
sizeXS: {
|
|
47
52
|
size: "xs";
|
|
48
53
|
labelTextSize: "xs";
|
|
49
54
|
badgeAppearanceSize: "sizeXS";
|
|
55
|
+
dividerSize: "s";
|
|
56
|
+
dividerSizeActive: "m";
|
|
50
57
|
};
|
|
51
58
|
sizeXXS: {
|
|
52
59
|
size: "xxs";
|
|
53
60
|
labelTextSize: "xs";
|
|
54
61
|
badgeAppearanceSize: "sizeXXS";
|
|
55
62
|
dividerSize: "s";
|
|
63
|
+
dividerSizeActive: "m";
|
|
56
64
|
};
|
|
57
65
|
surfacePrimary: {
|
|
58
66
|
fill: "surfacePrimary";
|
|
@@ -26,6 +26,7 @@ type TabAppearanceProps = {
|
|
|
26
26
|
dividerFillDisabled?: DividerProps['fillDisabled'];
|
|
27
27
|
dividerFillHover?: DividerProps['fillHover'];
|
|
28
28
|
dividerSize?: DividerProps['size'];
|
|
29
|
+
dividerSizeActive?: DividerProps['size'];
|
|
29
30
|
fill?: FillProps;
|
|
30
31
|
fillActive?: FillActiveProps;
|
|
31
32
|
fillActiveHover?: FillHoverProps;
|
|
@@ -111,7 +112,7 @@ type TabGroupProps = StyleAttributes & TabGroupAppearanceProps & {
|
|
|
111
112
|
type TabConfig = AppearanceConfig<AppearanceKeysDefault, TabAppearanceProps>;
|
|
112
113
|
type TabAppearance = TabConfig['appearance'];
|
|
113
114
|
type TabAppearanceStyle = AppearanceRecord<AppearanceStyleKey, TabAppearanceProps, Extract<keyof TabAppearanceProps, 'borderColor' | 'borderColorActive' | 'dividerFill' | 'fill'>>;
|
|
114
|
-
type TabAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, TabAppearanceProps, Extract<keyof TabAppearanceProps, 'badgeAppearanceSize' | 'dividerSize' | 'labelTextSize' | 'size'>>;
|
|
115
|
+
type TabAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, TabAppearanceProps, Extract<keyof TabAppearanceProps, 'badgeAppearanceSize' | 'dividerSize' | 'dividerSizeActive' | 'labelTextSize' | 'size'>>;
|
|
115
116
|
type TabAppearanceKey = NonNullable<TabProps['appearance']>;
|
|
116
117
|
type TabGalleryStory = ComponentGalleryArgs & Pick<TabProps, 'isActive' | 'isDisabled' | 'isSkeleton' | 'label'>;
|
|
117
|
-
export type { TabAppearance, TabAppearanceKey, TabAppearanceSize, TabAppearanceStyle, TabConfig, TabGalleryStory, TabGroupProps,
|
|
118
|
+
export type { TabAppearance, TabAppearanceKey, TabAppearanceSize, TabAppearanceStyle, TabConfig, TabGalleryStory, TabGroupProps, TabItem, TabProps, };
|
|
@@ -24,8 +24,8 @@ function Tab(props) {
|
|
|
24
24
|
isActive: isActive,
|
|
25
25
|
isDisabled: isDisabled,
|
|
26
26
|
});
|
|
27
|
-
const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
27
|
+
const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, dividerSizeActive, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
28
28
|
const { styles: tab } = useStyles(props);
|
|
29
|
-
return (_jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: _jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (_jsxs(React.Fragment, { children: [_jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (_jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), _jsx(Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
|
|
29
|
+
return (_jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: _jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (_jsxs(React.Fragment, { children: [_jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (_jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), isActive, _jsx(Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: isActive ? dividerSizeActive : dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
|
|
30
30
|
}
|
|
31
31
|
export { Tab, tabConfig };
|
|
@@ -4,41 +4,49 @@ declare const tabAppearanceSize: {
|
|
|
4
4
|
labelTextSize: "s";
|
|
5
5
|
badgeAppearanceSize: "sizeXS";
|
|
6
6
|
dividerSize: "s";
|
|
7
|
+
dividerSizeActive: "m";
|
|
7
8
|
};
|
|
8
9
|
sizeXL: {
|
|
9
10
|
size: "xl";
|
|
10
11
|
labelTextSize: "s";
|
|
11
12
|
badgeAppearanceSize: "sizeXS";
|
|
12
13
|
dividerSize: "s";
|
|
14
|
+
dividerSizeActive: "m";
|
|
13
15
|
};
|
|
14
16
|
sizeL: {
|
|
15
17
|
size: "l";
|
|
16
18
|
labelTextSize: "s";
|
|
17
19
|
badgeAppearanceSize: "sizeXS";
|
|
18
20
|
dividerSize: "s";
|
|
21
|
+
dividerSizeActive: "m";
|
|
19
22
|
};
|
|
20
23
|
sizeM: {
|
|
21
24
|
size: "m";
|
|
22
25
|
labelTextSize: "s";
|
|
23
26
|
badgeAppearanceSize: "sizeXS";
|
|
24
27
|
dividerSize: "s";
|
|
28
|
+
dividerSizeActive: "m";
|
|
25
29
|
};
|
|
26
30
|
sizeS: {
|
|
27
31
|
size: "s";
|
|
28
32
|
labelTextSize: "s";
|
|
29
33
|
badgeAppearanceSize: "sizeXS";
|
|
30
34
|
dividerSize: "s";
|
|
35
|
+
dividerSizeActive: "m";
|
|
31
36
|
};
|
|
32
37
|
sizeXS: {
|
|
33
38
|
size: "xs";
|
|
34
39
|
labelTextSize: "xs";
|
|
35
40
|
badgeAppearanceSize: "sizeXS";
|
|
41
|
+
dividerSize: "s";
|
|
42
|
+
dividerSizeActive: "m";
|
|
36
43
|
};
|
|
37
44
|
sizeXXS: {
|
|
38
45
|
size: "xxs";
|
|
39
46
|
labelTextSize: "xs";
|
|
40
47
|
badgeAppearanceSize: "sizeXXS";
|
|
41
48
|
dividerSize: "s";
|
|
49
|
+
dividerSizeActive: "m";
|
|
42
50
|
};
|
|
43
51
|
};
|
|
44
52
|
export { tabAppearanceSize };
|
|
@@ -4,41 +4,49 @@ const tabAppearanceSize = {
|
|
|
4
4
|
labelTextSize: 's',
|
|
5
5
|
badgeAppearanceSize: 'sizeXS',
|
|
6
6
|
dividerSize: 's',
|
|
7
|
+
dividerSizeActive: 'm',
|
|
7
8
|
},
|
|
8
9
|
sizeXL: {
|
|
9
10
|
size: 'xl',
|
|
10
11
|
labelTextSize: 's',
|
|
11
12
|
badgeAppearanceSize: 'sizeXS',
|
|
12
13
|
dividerSize: 's',
|
|
14
|
+
dividerSizeActive: 'm',
|
|
13
15
|
},
|
|
14
16
|
sizeL: {
|
|
15
17
|
size: 'l',
|
|
16
18
|
labelTextSize: 's',
|
|
17
19
|
badgeAppearanceSize: 'sizeXS',
|
|
18
20
|
dividerSize: 's',
|
|
21
|
+
dividerSizeActive: 'm',
|
|
19
22
|
},
|
|
20
23
|
sizeM: {
|
|
21
24
|
size: 'm',
|
|
22
25
|
labelTextSize: 's',
|
|
23
26
|
badgeAppearanceSize: 'sizeXS',
|
|
24
27
|
dividerSize: 's',
|
|
28
|
+
dividerSizeActive: 'm',
|
|
25
29
|
},
|
|
26
30
|
sizeS: {
|
|
27
31
|
size: 's',
|
|
28
32
|
labelTextSize: 's',
|
|
29
33
|
badgeAppearanceSize: 'sizeXS',
|
|
30
34
|
dividerSize: 's',
|
|
35
|
+
dividerSizeActive: 'm',
|
|
31
36
|
},
|
|
32
37
|
sizeXS: {
|
|
33
38
|
size: 'xs',
|
|
34
39
|
labelTextSize: 'xs',
|
|
35
40
|
badgeAppearanceSize: 'sizeXS',
|
|
41
|
+
dividerSize: 's',
|
|
42
|
+
dividerSizeActive: 'm',
|
|
36
43
|
},
|
|
37
44
|
sizeXXS: {
|
|
38
45
|
size: 'xxs',
|
|
39
46
|
labelTextSize: 'xs',
|
|
40
47
|
badgeAppearanceSize: 'sizeXXS',
|
|
41
48
|
dividerSize: 's',
|
|
49
|
+
dividerSizeActive: 'm',
|
|
42
50
|
},
|
|
43
51
|
};
|
|
44
52
|
export { tabAppearanceSize };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.3",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@itcase/tokens-am": "^1.1.57",
|
|
54
54
|
"@itcase/tokens-baikal": "^1.1.54",
|
|
55
55
|
"@itcase/tokens-palette": "^1.1.50",
|
|
56
|
-
"@itcase/ui-core": "^1.10.
|
|
56
|
+
"@itcase/ui-core": "^1.10.2",
|
|
57
57
|
"@rc-component/tooltip": "^1.4.0",
|
|
58
58
|
"clsx": "^2.1.1",
|
|
59
59
|
"date-fns": "^4.2.1",
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"storybook": "^10.4.0",
|
|
115
115
|
"typescript": "^6.0.3"
|
|
116
116
|
},
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "f6e8298b248d91b7f28963f93af9078fb21ff525"
|
|
118
118
|
}
|