npm - @siemens/ix-docs - Versions diffs - 4.0.0 → 4.2.0 - Mend

@siemens/ix-docs 4.0.0 → 4.2.0

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.

Files changed (853) hide show

package/build/docs/autogenerated/prompt/ix-tree/readme.md CHANGED Viewed

@@ -1,853 +1,3 @@
-# ix-tree
-## HTML Examples
-### Example: tree-custom
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tree custom example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconStar, iconCut, iconPrint } from '@siemens/ix-icons/icons';
-      addIcons({ iconStar, iconCut, iconPrint });
-    </script>
-  </head>
-  <body>
-    <div style="height: 8rem; width: 100%">
-      <ix-button variant="tertiary" id="expand" style="margin-bottom: 2rem">Expand Tree</ix-button
-      >
-      <ix-tree root="root" id="tree"></ix-tree>
-    </div>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-tree');
-        const tree = document.getElementById('tree');
-        const expandButton = document.getElementById('expand');
-        expandButton.addEventListener('click', () => {
-          tree.context = {
-            sample: {
-              isExpanded: true,
-              isSelected: false,
-            },
-            'sample-child-2': {
-              isSelected: true,
-              isExpanded: false,
-            },
-          };
-        });
-        tree.renderItem = (index, item, dataList, context, update) => {
-          const el = document.createElement('ix-tree-item');
-          el.hasChildren = item.hasChildren;
-          el.context = context[item.id];
-          const div = document.createElement('div');
-          div.style.display = 'flex';
-          const name = document.createElement('span');
-          const icon = document.createElement('ix-icon');
-          icon.name = item.data.icon;
-          icon.style.marginRight = '0.5rem';
-          div.appendChild(icon);
-          div.appendChild(name);
-          name.innerText = item.data.name;
-          el.appendChild(div);
-          update((updateTreeItem) => {
-            name.innerText = updateTreeItem.data.name;
-          });
-          return el;
-        };
-        tree.model = {
-          root: {
-            id: 'root',
-            data: null,
-            hasChildren: true,
-            children: ['sample'],
-          },
-          sample: {
-            id: 'sample',
-            data: {
-              name: 'Sample',
-              icon: 'star',
-            },
-            hasChildren: true,
-            children: ['sample-child-1', 'sample-child-2'],
-          },
-          'sample-child-1': {
-            id: 'sample-child-1',
-            data: {
-              name: 'Sample Child 1',
-              icon: 'cut',
-            },
-            hasChildren: false,
-            children: [],
-          },
-          'sample-child-2': {
-            id: 'sample-child-2',
-            data: {
-              name: 'Sample Child 2',
-              icon: 'print',
-            },
-            hasChildren: false,
-            children: [],
-          },
-        };
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: tree
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tree example</title>
-  </head>
-  <body>
-    <div style="height: 8rem; width: 100%">
-      <ix-tree root="root" id="tree"></ix-tree>
-    </div>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-tree');
-        const tree = document.getElementById('tree');
-        tree.model = {
-          root: {
-            id: 'root',
-            data: null,
-            hasChildren: true,
-            children: ['sample'],
-          },
-          sample: {
-            id: 'sample',
-            data: {
-              name: 'Sample',
-            },
-            hasChildren: true,
-            children: ['sample-child-1', 'sample-child-2'],
-          },
-          'sample-child-1': {
-            id: 'sample-child-1',
-            data: {
-              name: 'Sample Child 1',
-            },
-            hasChildren: false,
-            children: [],
-          },
-          'sample-child-2': {
-            id: 'sample-child-2',
-            data: {
-              name: 'Sample Child 2',
-            },
-            hasChildren: false,
-            children: [],
-          },
-        };
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: tree-custom
-```tsx
-import { TreeContext, TreeModel } from '@siemens/ix';
-import { iconCut, iconPrint, iconStar } from '@siemens/ix-icons/icons';
-import { IxButton, IxIcon, IxTree } from '@siemens/ix-react';
-import { useState } from 'react';
-type TreeData = {
-  name: string;
-  icon: string;
-};
-export default () => {
-  const [context, setContext] = useState<TreeContext>();
-  const [model] = useState<TreeModel<TreeData>>({
-    root: {
-      id: 'root',
-      data: {
-        icon: '',
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-        icon: iconStar,
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-        icon: iconCut,
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-        icon: iconPrint,
-      },
-      hasChildren: false,
-      children: [],
-    },
-  });
-  function expandAndSelect() {
-    setContext({
-      sample: {
-        isExpanded: true,
-        isSelected: false,
-      },
-      'sample-child-2': {
-        isSelected: true,
-        isExpanded: false,
-      },
-    });
-  }
-  return (
-    <div
-      style={{
-        display: 'block',
-        position: 'relative',
-        width: '100%',
-        height: '40rem',
-      }}
-    >
-      <IxButton variant="tertiary" onClick={expandAndSelect} style={{ marginBottom: '2rem' }}>
-        Expand Tree
-      </IxButton>
-      <IxTree
-        root="root"
-        model={model}
-        context={context}
-        onContextChange={({ detail }) => {
-          setContext(detail);
-        }}
-        renderItem={(data: TreeData) => (
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <IxIcon
-              name={data.icon}
-              size="16"
-              style={{
-                marginInlineEnd: '0.5rem',
-              }}
-            />
-            {data.name}
-          </div>
-        )}
-      ></IxTree>
-    </div>
-  );
-};
-```
-### Example: tree
-```tsx
-import { TreeModel } from '@siemens/ix';
-import { IxTree } from '@siemens/ix-react';
-import { useState } from 'react';
-type TreeData = {
-  name: string;
-};
-export default () => {
-  const [model] = useState<TreeModel<TreeData>>({
-    root: {
-      id: 'root',
-      data: {
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-      },
-      hasChildren: false,
-      children: [],
-    },
-  });
-  return (
-    <div
-      style={{
-        display: 'block',
-        position: 'relative',
-        width: '100%',
-        height: '40rem',
-      }}
-    >
-      <IxTree root="root" model={model}></IxTree>
-    </div>
-  );
-};
-```
-## Vue Examples
-### Example: tree-custom
-```tsx
-<script setup lang="ts">
-import { TreeContext, TreeModel } from '@siemens/ix';
-import { IxButton, IxTree } from '@siemens/ix-vue';
-import { defineComponent, onMounted, ref } from 'vue';
-type TreeData = {
-  name: string;
-  icon: string;
-};
-const context = ref<TreeContext>();
-const model = ref<TreeModel<TreeData>>();
-function renderItem(data: TreeData) {
-  return defineComponent({
-    setup: () => {
-      data;
-    },
-    template: `
-    <div style="display: flex; align-items: center">
-      <IxIcon :name="data.icon" size="16" style="margin-inline-end: 0.5rem" />
-      {{ data.name }}
-    </div>`,
-  });
-}
-function expandAndSelect() {
-  context.value = {
-    sample: {
-      isExpanded: true,
-      isSelected: false,
-    },
-    'sample-child-2': {
-      isSelected: true,
-      isExpanded: false,
-    },
-  };
-}
-onMounted(() => {
-  model.value = {
-    root: {
-      id: 'root',
-      data: {
-        icon: '',
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-        icon: 'star',
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-        icon: 'cut',
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-        icon: 'print',
-      },
-      hasChildren: false,
-      children: [],
-    },
-  };
-});
-</script>
-<template>
-  <div style="display: block; position: relative; width: 100%; height: 40rem">
-    <IxButton variant="tertiary" @click="expandAndSelect" style="margin-bottom: 2rem">
-      Expand Tree
-    </IxButton>
-    <IxTree
-      root="root"
-      :model="model"
-      :context="context"
-      @contextChange="({ detail }) => (context = detail)"
-    >
-    </IxTree>
-  </div>
-</template>
-```
-### Example: tree
-```tsx
-<script setup lang="ts">
-import { TreeModel } from '@siemens/ix';
-import { IxTree } from '@siemens/ix-vue';
-import { onMounted, ref } from 'vue';
-type TreeData = {
-  name: string;
-};
-const model = ref<TreeModel<TreeData>>();
-onMounted(() => {
-  model.value = {
-    root: {
-      id: 'root',
-      data: {
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-      },
-      hasChildren: false,
-      children: [],
-    },
-  };
-});
-</script>
-<template>
-  <div style="display: block; position: relative; width: 100%; height: 40rem">
-    <IxTree root="root" :model="model"></IxTree>
-  </div>
-</template>
-```
-## Angular Examples
-### Example: tree-custom
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { TreeContext, TreeModel } from '@siemens/ix';
-type TreeData = {
-  name: string;
-  icon: string;
-};
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  styles: [
-    `
-      .example {
-        display: block;
-        position: relative;
-        height: 32rem;
-        width: 100%;
-      }
-    `,
-  ],
-  template: `<div class="example">
-    <ix-button variant="tertiary" id="expand" style="margin-bottom: 2rem" (click)="expandAndSelect()">Expand Tree</ix-button
-    >
-    <ix-tree
-      root="root"
-      [model]="model"
-      [context]="context"
-      [renderItem]="treeItem"
-    ></ix-tree>
-    <ng-template #treeItem let-item>
-      <div style="display: flex; align-items: center">
-        <ix-icon
-          [name]="item.icon"
-          size="16"
-          style="margin-inline-end: 0.5rem"
-        ></ix-icon>
-        {{ item.name }}
-      </div>
-    </ng-template>
-  </div>`,
-})
-export default class TreeCustom {
-  context: TreeContext = {};
-  model: TreeModel<TreeData> = {
-    root: {
-      id: 'root',
-      data: {
-        icon: '',
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-        icon: 'star',
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-        icon: 'cut',
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-        icon: 'print',
-      },
-      hasChildren: false,
-      children: [],
-    },
-  };
-  expandAndSelect() {
-    this.context = {
-      sample: {
-        isExpanded: true,
-        isSelected: false,
-      },
-      'sample-child-2': {
-        isSelected: true,
-        isExpanded: false,
-      },
-    };
-  }
-}
-```
-### Example: tree
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { TreeModel } from '@siemens/ix';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: ` <div class="example">
-    <ix-tree root="root" [model]="model"></ix-tree>
-  </div>`,
-  styles: [
-    `
-      .example {
-        display: block;
-        position: relative;
-        height: 32rem;
-        width: 100%;
-      }
-    `,
-  ],
-})
-export default class Tree {
-  model: TreeModel<{
-    name: string;
-  }> = {
-    root: {
-      id: 'root',
-      data: {
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-      },
-      hasChildren: false,
-      children: [],
-    },
-  };
-}
-```
-## Angular Standalone Examples
-### Example: tree-custom
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxButton, IxTree, IxIcon } from '@siemens/ix-angular/standalone';
-import { TreeContext, TreeModel } from '@siemens/ix';
-type TreeData = {
-  name: string;
-  icon: string;
-};
-@Component({
-  selector: 'app-example',
-  imports: [IxButton, IxTree, IxIcon],
-  styles: [
-    `
-      .example {
-        display: block;
-        position: relative;
-        height: 32rem;
-        width: 100%;
-      }
-    `,
-  ],
-  template: `<div class="example">
-    <ix-button variant="tertiary" id="expand" style="margin-bottom: 2rem" (click)="expandAndSelect()">Expand Tree</ix-button
-    >
-    <ix-tree
-      root="root"
-      [model]="model"
-      [context]="context"
-      [renderItem]="treeItem"
-    ></ix-tree>
-    <ng-template #treeItem let-item>
-      <div style="display: flex; align-items: center">
-        <ix-icon
-          [name]="item.icon"
-          size="16"
-          style="margin-inline-end: 0.5rem;"
-        ></ix-icon>
-        {{ item.name }}
-      </div>
-    </ng-template>
-  </div>`,
-})
-export default class TreeCustom {
-  context: TreeContext = {};
-  model: TreeModel<TreeData> = {
-    root: {
-      id: 'root',
-      data: {
-        icon: '',
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-        icon: 'star',
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-        icon: 'cut',
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-        icon: 'print',
-      },
-      hasChildren: false,
-      children: [],
-    },
-  };
-  expandAndSelect() {
-    this.context = {
-      sample: {
-        isExpanded: true,
-        isSelected: false,
-      },
-      'sample-child-2': {
-        isSelected: true,
-        isExpanded: false,
-      },
-    };
-  }
-}
-```
-### Example: tree
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxTree } from '@siemens/ix-angular/standalone';
-import { TreeModel } from '@siemens/ix';
-@Component({
-  selector: 'app-example',
-  imports: [IxTree],
-  template: ` <div class="example">
-    <ix-tree root="root" [model]="model"></ix-tree>
-  </div>`,
-  styles: [
-    `
-      .example {
-        display: block;
-        position: relative;
-        height: 32rem;
-        width: 100%;
-      }
-    `,
-  ],
-})
-export default class Tree {
-  model: TreeModel<{
-    name: string;
-  }> = {
-    root: {
-      id: 'root',
-      data: {
-        name: '',
-      },
-      hasChildren: true,
-      children: ['sample'],
-    },
-    sample: {
-      id: 'sample',
-      data: {
-        name: 'Sample',
-      },
-      hasChildren: true,
-      children: ['sample-child-1', 'sample-child-2'],
-    },
-    'sample-child-1': {
-      id: 'sample-child-1',
-      data: {
-        name: 'Sample Child 1',
-      },
-      hasChildren: false,
-      children: [],
-    },
-    'sample-child-2': {
-      id: 'sample-child-2',
-      data: {
-        name: 'Sample Child 2',
-      },
-      hasChildren: false,
-      children: [],
-    },
-  };
-}
-```
 <!-- Auto Generated Below -->