@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/tagManager.md

@@ -0,0 +1,476 @@
+# TagManager
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/tagManager
+*Captured:* 2025-12-12T12:39:02.256Z
+
+The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.
+
+## TagManager
+
+**Without adding custom tag option**
+
+**In Combination with state component**
+
+### Example: Example 1
+
+Type in new fleet group name above
+Choose existing fleet group
+Lorem
+Ipsum
+Dolor sit amet
+Connectivity Test
+
+Foo
+
+Bar
+
+Save
+
+#### Summary
+
+Type in new fleet group name above
+Choose existing fleet group
+Lorem
+Ipsum
+Dolor sit amet
+Connectivity Test
+
+Foo
+
+Bar
+
+Save
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { isEmpty } from 'es-toolkit/compat';
+
+import TagManager from '@rio-cloud/rio-uikit/TagManager';
+import Button from '@rio-cloud/rio-uikit/Button';
+import type { TagManagerTag } from '@rio-cloud/rio-uikit';
+
+const tagListSuggestions: TagManagerTag[] = [
+    { label: 'Lorem' },
+    { label: 'Ipsum' },
+    { label: 'Dolor sit amet' },
+    { label: 'Connectivity Test' },
+];
+
+const existingTags: TagManagerTag[] = [{ label: 'Foo' }, { label: 'Bar' }];
+
+export default () => {
+    const [tagList, setTagList] = useState(existingTags);
+    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);
+
+    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);
+
+    const handleSave = () => {
+        const updatedTagList = unsavedTags
+            .filter(tag => !tag.toRemove)
+            .map(tag => {
+                delete tag.toAdd;
+                return tag;
+            });
+
+        setTagList(updatedTagList);
+        setUnsavedTags([]);
+    };
+
+    return (
+        <div className='row'>
+            <div className='col-ls-6 col-lg-4'>
+                <TagManager
+                    tagList={tagList}
+                    onTagListChange={handleTagListChange}
+                    tagSuggestions={tagListSuggestions}
+                    placeholder='Search fleet group or create new'
+                    customTagPlaceholder='Type in new fleet group name above'
+                    dropdownSeparatorText='Choose existing fleet group'
+                />
+                <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>
+                    Save
+                </Button>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="row">
+    <div class="col-ls-6 col-lg-4">
+        <div class="TagManager">
+            <div class="AutoSuggest dropdown margin-bottom-10">
+                <div class="ClearableInput input-group">
+                    <input placeholder="Search fleet group or create new" class="form-control" autocomplete="off" type="text" tabindex="1" value="">
+                    <span class="clearButton hide">
+                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        </span>
+                    </span>
+                </div>
+                <ul role="menu" class="dropdown-menu">
+                    <li role="presentation" class="disabled" data-item-index="0">
+                        <a role="menuitem">
+                            <span class="display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray">
+                                <span class="margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up">
+                                </span>
+                                <span class="text-italic">Type in new fleet group name above</span>
+                            </span>
+                        </a>
+                    </li>
+                    <li class="dropdown-header center ">
+                        <span class="dropdown-header-text">Choose existing fleet group</span>
+                    </li>
+                    <li role="presentation" class="" data-item-index="2">
+                        <a role="menuitem">Lorem</a>
+                    </li>
+                    <li role="presentation" class="" data-item-index="3">
+                        <a role="menuitem">Ipsum</a>
+                    </li>
+                    <li role="presentation" class="" data-item-index="4">
+                        <a role="menuitem">Dolor sit amet</a>
+                    </li>
+                    <li role="presentation" class="" data-item-index="5">
+                        <a role="menuitem">Connectivity Test</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="taglist taglist-autowidth taglist-vertical">
+                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
+                    <div class="tag-inner">Foo</div>
+                </div>
+                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
+                    <div class="tag-inner">Bar</div>
+                </div>
+            </div>
+        </div>
+        <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
+    </div>
+</div>
+```
+
+#### Props (json)
+
+```json
+[
+        {
+            label: 'Foo',
+        },
+        {
+            label: 'Bar',
+            toAdd: true,
+        },
+        {
+            label: 'Lorem ipsum',
+            toRemove: true,
+        }
+    ]
+```
+
+### Example: Example 2
+
+Lorem
+Ipsum
+Dolor sit amet
+
+Save
+
+#### Summary
+
+Lorem
+Ipsum
+Dolor sit amet
+
+Save
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { isEmpty } from 'es-toolkit/compat';
+
+import TagManager from '@rio-cloud/rio-uikit/TagManager';
+import Button from '@rio-cloud/rio-uikit/Button';
+import type { TagManagerTag } from '@rio-cloud/rio-uikit';
+
+const tagListSuggestions: TagManagerTag[] = [{ label: 'Lorem' }, { label: 'Ipsum' }, { label: 'Dolor sit amet' }];
+const existingTags: TagManagerTag[] = [];
+
+export default () => {
+    const [tagList, setTagList] = useState(existingTags);
+    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);
+
+    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);
+
+    const handleSave = () => {
+        const updatedTagList = unsavedTags
+            .filter(tag => !tag.toRemove)
+            .map(tag => {
+                delete tag.toAdd;
+                return tag;
+            });
+
+        setTagList(updatedTagList);
+        setUnsavedTags([]);
+    };
+
+    return (
+        <div className='row'>
+            <div className='col-ls-6 col-lg-4'>
+                <TagManager
+                    tagList={tagList}
+                    onTagListChange={handleTagListChange}
+                    tagSuggestions={tagListSuggestions}
+                    placeholder='Search fleet group'
+                    dropdownSeparatorText='Choose existing fleet group'
+                    noItemMessage='No group found with this name.'
+                    useCustomTags={false}
+                />
+                <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>
+                    Save
+                </Button>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="row">
+    <div class="col-ls-6 col-lg-4">
+        <div class="TagManager">
+            <div class="AutoSuggest dropdown dropup">
+                <div class="ClearableInput input-group">
+                    <input placeholder="Search fleet group" class="form-control" autocomplete="off" type="text" tabindex="1" value="">
+                    <span class="clearButton hide">
+                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        </span>
+                    </span>
+                </div>
+                <ul role="menu" class="dropdown-menu">
+                    <li role="presentation" class="" data-item-index="0">
+                        <a role="menuitem">Lorem</a>
+                    </li>
+                    <li role="presentation" class="" data-item-index="1">
+                        <a role="menuitem">Ipsum</a>
+                    </li>
+                    <li role="presentation" class="" data-item-index="2">
+                        <a role="menuitem">Dolor sit amet</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="taglist taglist-autowidth taglist-vertical">
+            </div>
+        </div>
+        <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
+    </div>
+</div>
+```
+
+#### Props (json)
+
+```json
+[
+        {
+            label: 'Foo',
+        },
+        {
+            label: 'Bar',
+            toAdd: true,
+        },
+        {
+            label: 'Lorem ipsum',
+            toRemove: true,
+        }
+    ]
+```
+
+### Example: Fleet groups
+
+Fleet groups
+Select an already created fleet group or create a new one and save it immediately.
+
+Type in new fleet group name above
+Choose existing fleet group
+Lorem
+Ipsum
+Dolor sit amet
+
+Foo
+
+Bar
+
+Save
+
+#### Summary
+
+Fleet groups
+Select an already created fleet group or create a new one and save it immediately.
+
+Type in new fleet group name above
+Choose existing fleet group
+Lorem
+Ipsum
+Dolor sit amet
+
+Foo
+
+Bar
+
+Save
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { isEmpty } from 'es-toolkit/compat';
+
+import TagManager from '@rio-cloud/rio-uikit/TagManager';
+import CustomState from '@rio-cloud/rio-uikit/CustomState';
+import Button from '@rio-cloud/rio-uikit/Button';
+import type { TagManagerTag } from '@rio-cloud/rio-uikit';
+
+const tagListSuggestions: TagManagerTag[] = [{ label: 'Lorem' }, { label: 'Ipsum' }, { label: 'Dolor sit amet' }];
+const existingTags: TagManagerTag[] = [{ label: 'Foo' }, { label: 'Bar' }];
+
+export default () => {
+    const [tagList, setTagList] = useState(existingTags);
+    const [unsavedTags, setUnsavedTags] = useState([] as TagManagerTag[]);
+
+    const handleTagListChange = (tags: TagManagerTag[]) => setUnsavedTags(tags);
+
+    const handleSave = () => {
+        const updatedTagList = unsavedTags
+            .filter(tag => !tag.toRemove)
+            .map(tag => {
+                delete tag.toAdd;
+                return tag;
+            });
+
+        setTagList(updatedTagList);
+        setUnsavedTags([]);
+    };
+
+    return (
+        <div className='max-width-300'>
+            <CustomState
+                headline='Fleet groups'
+                message={
+                    <div>
+                        <div className='margin-bottom-20'>
+                            Select an already created fleet group or create a new one and save it immediately.
+                        </div>
+                        <TagManager
+                            tagList={tagList}
+                            onTagListChange={handleTagListChange}
+                            tagSuggestions={tagListSuggestions}
+                            placeholder='Search fleet group or create new'
+                            customTagPlaceholder='Type in new fleet group name above'
+                            dropdownSeparatorText='Choose existing fleet group'
+                            noItemMessage='No group found with this name.'
+                        />
+                    </div>
+                }
+                icon='rioglyph-group'
+                outerClassName='margin-bottom-15'
+                condensed
+            />
+            <Button className={`margin-top-15 ${isEmpty(unsavedTags) ? 'disabled' : ''}`} onClick={handleSave}>
+                Save
+            </Button>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-300">
+    <div class="display-flex justify-content-center max-width-100pct">
+        <div class="margin-0 width-100pct max-width-600 panel-default panel padding-10 margin-bottom-15">
+            <div class="display-flex flex-column align-items-center text-center padding-15">
+                <div class="text-size-16 margin-bottom-10">
+                    <span class="rioglyph rioglyph-group text-color-light text-size-300pct">
+                    </span>
+                </div>
+                <div class="text-size-h4 line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">Fleet groups</div>
+                <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">
+                    <div>
+                        <div class="margin-bottom-20">Select an already created fleet group or create a new one and save it immediately.</div>
+                        <div class="TagManager">
+                            <div class="AutoSuggest dropdown dropup margin-bottom-10">
+                                <div class="ClearableInput input-group">
+                                    <input placeholder="Search fleet group or create new" class="form-control" autocomplete="off" type="text" tabindex="1" value="">
+                                    <span class="clearButton hide">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                </div>
+                                <ul role="menu" class="dropdown-menu">
+                                    <li role="presentation" class="disabled" data-item-index="0">
+                                        <a role="menuitem">
+                                            <span class="display-flex align-items-center padding-top-5 padding-bottom-5 text-color-gray">
+                                                <span class="margin-left--5 margin-right-5 margin-top--1 rioglyph rioglyph-arrow-up">
+                                                </span>
+                                                <span class="text-italic">Type in new fleet group name above</span>
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="dropdown-header center ">
+                                        <span class="dropdown-header-text">Choose existing fleet group</span>
+                                    </li>
+                                    <li role="presentation" class="" data-item-index="2">
+                                        <a role="menuitem">Lorem</a>
+                                    </li>
+                                    <li role="presentation" class="" data-item-index="3">
+                                        <a role="menuitem">Ipsum</a>
+                                    </li>
+                                    <li role="presentation" class="" data-item-index="4">
+                                        <a role="menuitem">Dolor sit amet</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="taglist taglist-autowidth taglist-vertical">
+                                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
+                                    <div class="tag-inner">Foo</div>
+                                </div>
+                                <div class="tag deletable clickable rioglyph rioglyph-remove rounded">
+                                    <div class="tag-inner">Bar</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
+</div>
+```
+
+#### Props (json)
+
+```json
+[
+        {
+            label: 'Foo',
+        },
+        {
+            label: 'Bar',
+            toAdd: true,
+        },
+        {
+            label: 'Lorem ipsum',
+            toRemove: true,
+        }
+    ]
+```