@greenbone/ui-lib 2.1.2-alpha0 → 2.1.2
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/lib/cjs/components/Tag/Tag.module.css +1 -1
- package/lib/cjs/components/Tag/TagsCollapsed.js +1 -1
- package/lib/cjs/components/Tag/TagsCollapsed.js.map +1 -1
- package/lib/esm/components/Tag/Tag.module.css +1 -1
- package/lib/esm/components/Tag/TagsCollapsed.js +1 -1
- package/lib/esm/components/Tag/TagsCollapsed.js.map +1 -1
- package/package.json +1 -1
- package/types/src/components/Tag/TagsCollapsed.d.ts +4 -3
- package/types/src/components/Tag/TagsCollapsed.d.ts.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.tag-name{margin-right:calc(.25rem*var(--mantine-scale))
|
|
1
|
+
.tag-name{margin-right:calc(.25rem*var(--mantine-scale));max-width:100%}.content{gap:var(--mantine-spacing-xs);min-width:0}.content,.left-icon{align-items:center;display:inline-flex}.left-icon{flex:0 0 auto}.text-wrapper{max-width:calc(18.75rem*var(--mantine-scale));overflow:hidden}.tooltip-text{word-break:break-word}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"TagsCollapsed",{enumerable:true,get:function(){return TagsCollapsed}});const _jsxruntime=require("react/jsx-runtime");const _react=require("react");const _core=require("@mantine/core");const _Badge=require("../Badge");const _Tooltip=require("../Tooltip");const _theme=require("../../theme");const _reacti18next=require("react-i18next");const _Tag=require("./Tag");const _TagsCollapsedmodulecss=/*#__PURE__*/_interop_require_default(require("./TagsCollapsed.module.css"));function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"TagsCollapsed",{enumerable:true,get:function(){return TagsCollapsed}});const _jsxruntime=require("react/jsx-runtime");const _react=require("react");const _core=require("@mantine/core");const _Badge=require("../Badge");const _Tooltip=require("../Tooltip");const _theme=require("../../theme");const _reacti18next=require("react-i18next");const _Tag=require("./Tag");const _TagsCollapsedmodulecss=/*#__PURE__*/_interop_require_default(require("./TagsCollapsed.module.css"));function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}const TagsCollapsed=({onClick,tags})=>{const{t}=(0,_reacti18next.useTranslation)();const[tooltipText,setTooltipText]=(0,_react.useState)("Show remaining tags");const tagsLength=tags.length;if(tagsLength<1){return null}return(0,_jsxruntime.jsxs)("div",{className:_TagsCollapsedmodulecss.default["tag-wrapper"],children:[(0,_jsxruntime.jsx)(_Tag.Tag,{name:tags[0].name,value:tags[0].value,icon:tags[0].icon,onClick:onClick}),tagsLength>1&&(0,_jsxruntime.jsx)("div",{className:_TagsCollapsedmodulecss.default.count,children:(0,_jsxruntime.jsxs)(_core.Popover,{onOpen:()=>setTooltipText("Hide remaining tags"),onClose:()=>setTooltipText("Show remaining tags"),children:[(0,_jsxruntime.jsx)(_core.Popover.Target,{children:(0,_jsxruntime.jsx)("div",{children:(0,_jsxruntime.jsx)(_Tooltip.Tooltip,{label:t(tooltipText),children:(0,_jsxruntime.jsx)(_Badge.Badge,{color:_theme.EThemeColors.NeutralLight,className:_TagsCollapsedmodulecss.default["count-badge"],children:(0,_jsxruntime.jsxs)("div",{children:["+",tagsLength-1]})})})})}),(0,_jsxruntime.jsx)(_core.Popover.Dropdown,{p:"0.5em",children:(0,_jsxruntime.jsx)("div",{className:_TagsCollapsedmodulecss.default["listed-tags-container"],children:[...tags].slice(1).map(tag=>(0,_jsxruntime.jsx)(_Tag.Tag,{name:tag.name,value:tag.value,icon:tag.icon,className:_TagsCollapsedmodulecss.default["listed-tag"]},`${tag.name}:${tag.value}`))})})]})})]})};
|
|
2
2
|
//# sourceMappingURL=TagsCollapsed.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, ReactNode, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype TTagValue = {\n name: string\n value: string\n icon?: ReactNode\n}\n\nexport type TTagsCollapsedProps = {\n onClick?: MouseEventHandler\n tags: Array<TTagValue>\n}\n\nconst TagsCollapsed: FC<TTagsCollapsedProps> = ({ onClick, tags }) => {\n const { t } = useTranslation()\n const [tooltipText, setTooltipText] = useState(\"Show remaining tags\")\n const tagsLength = tags.length\n\n if (tagsLength < 1) {\n return null\n }\n\n return (\n <div className={classes[\"tag-wrapper\"]}>\n <Tag name={tags[0].name} value={tags[0].value} icon={tags[0].icon} onClick={onClick} />\n\n {tagsLength > 1 && (\n <div className={classes.count}>\n <Popover\n onOpen={() => setTooltipText(\"Hide remaining tags\")}\n onClose={() => setTooltipText(\"Show remaining tags\")}\n >\n <Popover.Target>\n <div>\n <Tooltip label={t(tooltipText)}>\n <Badge color={EThemeColors.NeutralLight} className={classes[\"count-badge\"]}>\n <div>+{tagsLength - 1}</div>\n </Badge>\n </Tooltip>\n </div>\n </Popover.Target>\n\n <Popover.Dropdown p=\"0.5em\">\n <div className={classes[\"listed-tags-container\"]}>\n {[...tags].slice(1).map((tag) => (\n <Tag\n key={`${tag.name}:${tag.value}`}\n name={tag.name}\n value={tag.value}\n icon={tag.icon}\n className={classes[\"listed-tag\"]}\n />\n ))}\n </div>\n </Popover.Dropdown>\n </Popover>\n </div>\n )}\n </div>\n )\n}\n\nexport { TagsCollapsed }\n"],"names":["TagsCollapsed","onClick","tags","t","useTranslation","tooltipText","setTooltipText","useState","tagsLength","length","div","className","classes","Tag","name","value","icon","count","Popover","onOpen","onClose","Target","Tooltip","label","Badge","color","EThemeColors","NeutralLight","Dropdown","p","slice","map","tag"],"mappings":"oGAyESA,uDAAAA,qFArEkD,6BACnC,sCACF,mCACE,mCACK,2CACE,oCACX,qFACA,mHAapB,MAAMA,cAAyC,CAAC,CAAEC,OAAO,CAAEC,IAAI,CAAE,IAC/D,KAAM,CAAEC,CAAC,CAAE,CAAGC,GAAAA,4BAAc,IAC5B,KAAM,CAACC,YAAaC,eAAe,CAAGC,GAAAA,eAAQ,EAAC,uBAC/C,MAAMC,WAAaN,KAAKO,MAAM,CAE9B,GAAID,WAAa,EAAG,CAClB,OAAO,IACT,CAEA,MACE,qBAACE,OAAIC,UAAWC,+BAAO,CAAC,cAAc,WACpC,oBAACC,QAAG,EAACC,KAAMZ,IAAI,CAAC,EAAE,CAACY,IAAI,CAAEC,MAAOb,IAAI,CAAC,EAAE,CAACa,KAAK,CAAEC,KAAMd,IAAI,CAAC,EAAE,CAACc,IAAI,CAAEf,QAASA,UAE3EO,WAAa,GACZ,oBAACE,OAAIC,UAAWC,+BAAO,CAACK,KAAK,UAC3B,qBAACC,aAAO,EACNC,OAAQ,IAAMb,eAAe,uBAC7Bc,QAAS,IAAMd,eAAe,iCAE9B,oBAACY,aAAO,CAACG,MAAM,WACb,oBAACX,gBACC,oBAACY,gBAAO,EAACC,MAAOpB,EAAEE,sBAChB,oBAACmB,YAAK,EAACC,MAAOC,mBAAY,CAACC,YAAY,CAAEhB,UAAWC,+BAAO,CAAC,cAAc,UACxE,qBAACF,iBAAI,IAAEF,WAAa,aAM5B,oBAACU,aAAO,CAACU,QAAQ,EAACC,EAAE,iBAClB,oBAACnB,OAAIC,UAAWC,+BAAO,CAAC,wBAAwB,UAC7C,IAAIV,KAAK,CAAC4B,KAAK,CAAC,GAAGC,GAAG,CAAC,AAACC,KACvB,oBAACnB,QAAG,EAEFC,KAAMkB,IAAIlB,IAAI,CACdC,MAAOiB,IAAIjB,KAAK,CAChBC,KAAMgB,IAAIhB,IAAI,CACdL,UAAWC,+BAAO,CAAC,aAAa,EAJ3B,CAAC,EAAEoB,IAAIlB,IAAI,CAAC,CAAC,EAAEkB,IAAIjB,KAAK,CAAC,CAAC,cAcnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tag-name{margin-right:calc(.25rem*var(--mantine-scale))
|
|
1
|
+
.tag-name{margin-right:calc(.25rem*var(--mantine-scale));max-width:100%}.content{gap:var(--mantine-spacing-xs);min-width:0}.content,.left-icon{align-items:center;display:inline-flex}.left-icon{flex:0 0 auto}.text-wrapper{max-width:calc(18.75rem*var(--mantine-scale));overflow:hidden}.tooltip-text{word-break:break-word}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Popover}from"@mantine/core";import{Badge}from"../Badge";import{Tooltip}from"../Tooltip";import{EThemeColors}from"../../theme";import{useTranslation}from"react-i18next";import{Tag}from"./Tag";import classes from"./TagsCollapsed.module.css";const TagsCollapsed=({onClick,tags})=>{const{t}=useTranslation();const[tooltipText,setTooltipText]=useState("Show remaining tags");const tagsLength=tags.length;if(tagsLength<1){return null}return _jsxs("div",{className:classes["tag-wrapper"],children:[_jsx(Tag,{name:tags[0].name,value:tags[0].value,icon:tags[0].icon,onClick:onClick}),tagsLength>1&&_jsx("div",{className:classes.count,children:_jsxs(Popover,{onOpen:()=>setTooltipText("Hide remaining tags"),onClose:()=>setTooltipText("Show remaining tags"),children:[_jsx(Popover.Target,{children:_jsx("div",{children:_jsx(Tooltip,{label:t(tooltipText),children:_jsx(Badge,{color:EThemeColors.NeutralLight,className:classes["count-badge"],children:_jsxs("div",{children:["+",tagsLength-1]})})})})}),_jsx(Popover.Dropdown,{p:"0.5em",children:_jsx("div",{className:classes["listed-tags-container"],children:[...tags].slice(1).map(tag=>_jsx(Tag,{name:tag.name,value:tag.value,icon:tag.icon,className:classes["listed-tag"]},`${tag.name}:${tag.value}`))})})]})})]})};export{TagsCollapsed};
|
|
2
2
|
//# sourceMappingURL=TagsCollapsed.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"sourcesContent":["/* Copyright (C) Greenbone AG\n *\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { FC, MouseEventHandler, ReactNode, useState } from \"react\"\nimport { Popover } from \"@mantine/core\"\nimport { Badge } from \"../Badge\"\nimport { Tooltip } from \"../Tooltip\"\nimport { EThemeColors } from \"../../theme\"\nimport { useTranslation } from \"react-i18next\"\nimport { Tag } from \"./Tag\"\nimport classes from \"./TagsCollapsed.module.css\"\n\ntype TTagValue = {\n name: string\n value: string\n icon?: ReactNode\n}\n\nexport type TTagsCollapsedProps = {\n onClick?: MouseEventHandler\n tags: Array<TTagValue>\n}\n\nconst TagsCollapsed: FC<TTagsCollapsedProps> = ({ onClick, tags }) => {\n const { t } = useTranslation()\n const [tooltipText, setTooltipText] = useState(\"Show remaining tags\")\n const tagsLength = tags.length\n\n if (tagsLength < 1) {\n return null\n }\n\n return (\n <div className={classes[\"tag-wrapper\"]}>\n <Tag name={tags[0].name} value={tags[0].value} icon={tags[0].icon} onClick={onClick} />\n\n {tagsLength > 1 && (\n <div className={classes.count}>\n <Popover\n onOpen={() => setTooltipText(\"Hide remaining tags\")}\n onClose={() => setTooltipText(\"Show remaining tags\")}\n >\n <Popover.Target>\n <div>\n <Tooltip label={t(tooltipText)}>\n <Badge color={EThemeColors.NeutralLight} className={classes[\"count-badge\"]}>\n <div>+{tagsLength - 1}</div>\n </Badge>\n </Tooltip>\n </div>\n </Popover.Target>\n\n <Popover.Dropdown p=\"0.5em\">\n <div className={classes[\"listed-tags-container\"]}>\n {[...tags].slice(1).map((tag) => (\n <Tag\n key={`${tag.name}:${tag.value}`}\n name={tag.name}\n value={tag.value}\n icon={tag.icon}\n className={classes[\"listed-tag\"]}\n />\n ))}\n </div>\n </Popover.Dropdown>\n </Popover>\n </div>\n )}\n </div>\n )\n}\n\nexport { TagsCollapsed }\n"],"names":["useState","Popover","Badge","Tooltip","EThemeColors","useTranslation","Tag","classes","TagsCollapsed","onClick","tags","t","tooltipText","setTooltipText","tagsLength","length","div","className","name","value","icon","count","onOpen","onClose","Target","label","color","NeutralLight","Dropdown","p","slice","map","tag"],"mappings":"wDAIA,QAA2CA,QAAQ,KAAQ,OAAO,AAClE,QAASC,OAAO,KAAQ,eAAe,AACvC,QAASC,KAAK,KAAQ,UAAU,AAChC,QAASC,OAAO,KAAQ,YAAY,AACpC,QAASC,YAAY,KAAQ,aAAa,AAC1C,QAASC,cAAc,KAAQ,eAAe,AAC9C,QAASC,GAAG,KAAQ,OAAO,AAC3B,QAAOC,YAAa,4BAA4B,CAahD,MAAMC,cAAyC,CAAC,CAAEC,OAAO,CAAEC,IAAI,CAAE,IAC/D,KAAM,CAAEC,CAAC,CAAE,CAAGN,iBACd,KAAM,CAACO,YAAaC,eAAe,CAAGb,SAAS,uBAC/C,MAAMc,WAAaJ,KAAKK,MAAM,CAE9B,GAAID,WAAa,EAAG,CAClB,OAAO,IACT,CAEA,OACE,MAACE,OAAIC,UAAWV,OAAO,CAAC,cAAc,WACpC,KAACD,KAAIY,KAAMR,IAAI,CAAC,EAAE,CAACQ,IAAI,CAAEC,MAAOT,IAAI,CAAC,EAAE,CAACS,KAAK,CAAEC,KAAMV,IAAI,CAAC,EAAE,CAACU,IAAI,CAAEX,QAASA,UAE3EK,WAAa,GACZ,KAACE,OAAIC,UAAWV,QAAQc,KAAK,UAC3B,MAACpB,SACCqB,OAAQ,IAAMT,eAAe,uBAC7BU,QAAS,IAAMV,eAAe,iCAE9B,KAACZ,QAAQuB,MAAM,WACb,KAACR,gBACC,KAACb,SAAQsB,MAAOd,EAAEC,sBAChB,KAACV,OAAMwB,MAAOtB,aAAauB,YAAY,CAAEV,UAAWV,OAAO,CAAC,cAAc,UACxE,MAACS,iBAAI,IAAEF,WAAa,aAM5B,KAACb,QAAQ2B,QAAQ,EAACC,EAAE,iBAClB,KAACb,OAAIC,UAAWV,OAAO,CAAC,wBAAwB,UAC7C,IAAIG,KAAK,CAACoB,KAAK,CAAC,GAAGC,GAAG,CAAC,AAACC,KACvB,KAAC1B,KAECY,KAAMc,IAAId,IAAI,CACdC,MAAOa,IAAIb,KAAK,CAChBC,KAAMY,IAAIZ,IAAI,CACdH,UAAWV,OAAO,CAAC,aAAa,EAJ3B,CAAC,EAAEyB,IAAId,IAAI,CAAC,CAAC,EAAEc,IAAIb,KAAK,CAAC,CAAC,cAcnD,CAEA,QAASX,aAAa,CAAE"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { FC, MouseEventHandler } from "react";
|
|
2
|
-
type
|
|
1
|
+
import { FC, MouseEventHandler, ReactNode } from "react";
|
|
2
|
+
type TTagValue = {
|
|
3
3
|
name: string;
|
|
4
4
|
value: string;
|
|
5
|
+
icon?: ReactNode;
|
|
5
6
|
};
|
|
6
7
|
export type TTagsCollapsedProps = {
|
|
7
8
|
onClick?: MouseEventHandler;
|
|
8
|
-
tags: Array<
|
|
9
|
+
tags: Array<TTagValue>;
|
|
9
10
|
};
|
|
10
11
|
declare const TagsCollapsed: FC<TTagsCollapsedProps>;
|
|
11
12
|
export { TagsCollapsed };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagsCollapsed.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TagsCollapsed.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagsCollapsed.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AASlE,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACvB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,mBAAmB,CA+C1C,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
|