@siemens/ix-docs 0.0.0-pr-2238-20251103095443 → 0.0.0-pr-2297-20251204163058

package/build/static/demo/v2/vue/select-editable.vue

@@ -0,0 +1,21 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSelect value="1" editable>
+    <IxSelectItem label="Item 1" value="1"></IxSelectItem>
+    <IxSelectItem label="Item 2" value="2"></IxSelectItem>
+    <IxSelectItem label="Item 3" value="3"></IxSelectItem>
+    <IxSelectItem label="Item 4" value="4"></IxSelectItem>
+  </IxSelect>
+</template>

package/build/static/demo/v2/vue/select-multiple.vue

@@ -0,0 +1,26 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
+import { nextTick, onMounted, ref } from 'vue';
+
+const selection = ref<string[]>([]);
+
+onMounted(() => nextTick(() => (selection.value = ['1', '3'])));
+</script>
+
+<template>
+  <IxSelect mode="multiple" :value="selection">
+    <IxSelectItem label="Item 1" value="1"></IxSelectItem>
+    <IxSelectItem label="Item 2" value="2"></IxSelectItem>
+    <IxSelectItem label="Item 3" value="3"></IxSelectItem>
+    <IxSelectItem label="Item 4" value="4"></IxSelectItem>
+  </IxSelect>
+</template>

package/build/static/demo/v2/vue/select-validation.vue

@@ -0,0 +1,64 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <div>
+    <IxSelect
+      label='Framework options'
+      name='framework-option'
+      info-text='We will show examples based on your selection.'
+      class='ix-info'
+    >
+      <IxSelectItem value='angular' label='Angular'></IxSelectItem>
+      <IxSelectItem value='react' label='React'></IxSelectItem>
+      <IxSelectItem value='vue' label='Vue'></IxSelectItem>
+    </IxSelect>
+  </div>
+  <div>
+    <IxSelect
+      label='Framework options'
+      name='framework-option'
+      warning-text='Selected Framework is partly supported.'
+      class='ix-warning'
+      value='blazor'
+    >
+      <IxSelectItem value='blazor' label='Blazor'></IxSelectItem>
+      <IxSelectItem value='nextjs' label='NextJS'></IxSelectItem>
+    </IxSelect>
+  </div>
+  <div>
+    <IxSelect
+      label='Framework options'
+      name='framework-option'
+      valid-text='Selected Framework is fully supported.'
+      class='ix-valid'
+      value='angular'
+    >
+      <IxSelectItem value='angular' label='Angular'></IxSelectItem>
+      <IxSelectItem value='react' label='React'></IxSelectItem>
+      <IxSelectItem value='vue' label='Vue'></IxSelectItem>
+    </IxSelect>
+  </div>
+  <div>
+    <IxSelect
+      label='Framework options'
+      name='framework-option'
+      invalid-text='Selected Framework is not supported.'
+      class='ix-invalid'
+      value='svelte'
+    >
+      <IxSelectItem value='svelte' label='Svelte'></IxSelectItem>
+      <IxSelectItem value='solid' label='Solid'></IxSelectItem>
+    </IxSelect>
+  </div>
+</template>

package/build/static/demo/v2/vue/select.vue

@@ -0,0 +1,21 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSelect value="1">
+    <IxSelectItem label="Item 1" value="1"></IxSelectItem>
+    <IxSelectItem label="Item 2" value="2"></IxSelectItem>
+    <IxSelectItem label="Item 3" value="3"></IxSelectItem>
+    <IxSelectItem label="Item 4" value="4"></IxSelectItem>
+  </IxSelect>
+</template>

package/build/static/demo/v2/vue/settings.vue

@@ -0,0 +1,41 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import {
+  HTMLRefElement,
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuSettings,
+  IxMenuSettingsItem,
+} from '@siemens/ix-vue';
+import { nextTick, onMounted, ref } from 'vue';
+
+const menu = ref<HTMLRefElement<HTMLIxMenuElement>>();
+
+onMounted(async () => {
+  await nextTick();
+  menu.value?.$el.toggleSettings(true);
+});
+</script>
+
+<template>
+  <IxApplication>
+    <IxApplicationHeader>
+      <div className="placeholder-logo" slot="logo"></div>
+    </IxApplicationHeader>
+    <IxMenu ref="menu">
+      <IxMenuSettings>
+        <IxMenuSettingsItem label="Example Setting 1"></IxMenuSettingsItem>
+        <IxMenuSettingsItem label="Example Setting 2"></IxMenuSettingsItem>
+      </IxMenuSettings>
+    </IxMenu>
+  </IxApplication>
+</template>

package/build/static/demo/v2/vue/slider-error.vue

@@ -0,0 +1,37 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSlider } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSlider
+    trace
+    :trace-reference="50"
+    :marker="[0, 25, 50, 75, 100]"
+    :error="true"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </IxSlider>
+
+  <IxSlider
+    :min="0"
+    :max="50"
+    :step="10"
+    trace
+    :trace-reference="10"
+    :marker="[0, 10, 20, 30, 40, 50]"
+    error="Error message"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">50</span>
+  </IxSlider>
+</template>

package/build/static/demo/v2/vue/slider-marker.vue

@@ -0,0 +1,24 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSlider } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSlider :marker="[0, 25, 50, 75, 100]">
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </IxSlider>
+
+  <IxSlider :min="0" :max="50" :step="10" :marker="[0, 10, 20, 30, 40, 50]">
+    <span slot="label-start">0</span>
+    <span slot="label-end">50</span>
+  </IxSlider>
+</template>

package/build/static/demo/v2/vue/slider-trace.vue

@@ -0,0 +1,37 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSlider } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSlider
+    trace
+    :trace-reference="50"
+    :marker="[0, 25, 50, 75, 100]"
+    :value="25"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </IxSlider>
+
+  <IxSlider
+    :min="0"
+    :max="50"
+    :value="20"
+    :step="10"
+    :trace="true"
+    :trace-reference="10"
+    :marker="[0, 10, 20, 30, 40, 50]"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">50</span>
+  </IxSlider>
+</template>

package/build/static/demo/v2/vue/slider.vue

@@ -0,0 +1,24 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSlider } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSlider :value="25">
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </IxSlider>
+
+  <IxSlider :min="0" :max="50" :step="10" :value="10">
+    <span slot="label-start">0</span>
+    <span slot="label-end">50</span>
+  </IxSlider>
+</template>

package/build/static/demo/v2/vue/spinner-large.vue

@@ -0,0 +1,16 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSpinner } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSpinner size="large"></IxSpinner>
+</template>

package/build/static/demo/v2/vue/spinner.vue

@@ -0,0 +1,16 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxSpinner } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSpinner></IxSpinner>
+</template>

package/build/static/demo/v2/vue/split-button-icons.vue

@@ -0,0 +1,24 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import {
+  iconBulb,
+  iconChevronDownSmall,
+  iconCut,
+} from '@siemens/ix-icons/icons';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall">
+    <IxDropdownItem label="Item 1" :icon="iconCut"></IxDropdownItem>
+    <IxDropdownItem label="Item 2" :icon="iconBulb"></IxDropdownItem>
+  </IxSplitButton>
+</template>

package/build/static/demo/v2/vue/split-button.css

@@ -0,0 +1,7 @@
+body {
+  display: flex;
+}
+
+ix-split-button {
+  margin: 0.25rem;
+}

package/build/static/demo/v2/vue/split-button.vue

@@ -0,0 +1,36 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { iconChevronDownSmall } from '@siemens/ix-icons/icons';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <div>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall" disabled>
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall" disableButton>
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall" disableDropdownButton>
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+</div>
+</template>
+
+<style scoped src="./split-button.css"></style>

package/build/static/demo/v2/vue/tabs-rounded.vue

@@ -0,0 +1,43 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import {
+  iconCalendarSettings,
+  iconHierarchy,
+  iconMaintenance,
+  iconSoundLoud,
+  iconSuccess,
+  iconTree,
+} from '@siemens/ix-icons/icons';
+import { IxIcon, IxTabItem, IxTabs } from '@siemens/ix-vue';
+</script>
+
+<template>
+  <IxTabs rounded>
+    <IxTabItem>
+      <IxIcon :name="iconSuccess"></IxIcon>
+    </IxTabItem>
+    <IxTabItem :counter="200">
+      <IxIcon :name="iconTree"></IxIcon>
+    </IxTabItem>
+    <IxTabItem>
+      <IxIcon :name="iconMaintenance"></IxIcon>
+    </IxTabItem>
+    <IxTabItem disabled :counter="24">
+      <IxIcon :name="iconSoundLoud"></IxIcon>
+    </IxTabItem>
+    <IxTabItem>
+      <IxIcon :name="iconHierarchy"></IxIcon>
+    </IxTabItem>
+    <IxTabItem disabled>
+      <IxIcon :name="iconCalendarSettings"></IxIcon>
+    </IxTabItem>
+  </IxTabs>
+</template>

package/build/static/demo/v2/vue/tabs.css

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+.tabs {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+.tabs > div[data-tab-content] {
+  display: none;
+}
+
+.tabs > div[data-tab-content].show {
+  display: block;
+}

package/build/static/demo/v2/vue/tabs.vue

@@ -0,0 +1,31 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts">
+import { IxTabItem, IxTabs } from '@siemens/ix-vue';
+import { ref } from 'vue';
+
+const selectedTab = ref(0);
+const changeTab = (tabId: number) => (selectedTab.value = tabId);
+</script>
+
+<style scoped src="./tabs.css"></style>
+
+<template>
+  <div class="tabs">
+    <IxTabs :selected="selectedTab">
+      <IxTabItem @click="changeTab(0)">Tab 1</IxTabItem>
+      <IxTabItem @click="changeTab(1)">Tab 2</IxTabItem>
+      <IxTabItem @click="changeTab(2)">Tab 3</IxTabItem>
+    </IxTabs>
+    <div v-show="selectedTab === 0">Content 1</div>
+    <div v-show="selectedTab === 1">Content 2</div>
+    <div v-show="selectedTab === 2">Content 3</div>
+  </div>
+</template>

package/build/static/demo/v2/vue/textarea-disabled.vue

@@ -0,0 +1,24 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script lang="ts">
+import { IxTextarea } from '@siemens/ix-vue';
+
+export default {
+  name: 'TextareaDisabled',
+  components: { IxTextarea },
+};
+</script>
+
+<template>
+  <IxTextarea
+    value="Some text"
+    disabled
+  ></IxTextarea>
+</template>

package/build/static/demo/v2/vue/textarea-legacy-disabled.vue

@@ -0,0 +1,14 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <textarea placeholder="Enter text here" disabled>Some example text</textarea>
+</template>

package/build/static/demo/v2/vue/textarea-legacy-readonly.vue

@@ -0,0 +1,14 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <textarea placeholder="Enter text here" readOnly>Some example text</textarea>
+</template>

package/build/static/demo/v2/vue/textarea-legacy.vue

@@ -0,0 +1,14 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <textarea placeholder="Enter text here"></textarea>
+</template>

package/build/static/demo/v2/vue/textarea-readonly.vue

@@ -0,0 +1,23 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script lang="ts">
+import { IxTextarea } from '@siemens/ix-vue';
+
+export default {
+  name: 'TextareaReadonly',
+  components: { IxTextarea },
+};
+</script>
+
+<template>
+  <IxTextarea
+    disabled
+  ></IxTextarea>
+</template>

package/build/static/demo/v2/vue/textarea-rows-cols.vue

@@ -0,0 +1,28 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+-->
+
+<script lang="ts">
+import { IxTextarea } from '@siemens/ix-vue'
+
+export default {
+  name: 'TextareaRowsCols',
+  components: { IxTextarea },
+};
+</script>
+
+<template>
+  <IxTextarea
+    :maxLength="100"
+    name="comment"
+    label="Comment"
+    :textarea-rows="15"
+    :textarea-cols="20"
+    helper-text="Let us know if you have any special requests or comments. We will do our best to accommodate you."
+  ></IxTextarea>
+</template>