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-modal-content/readme.md CHANGED Viewed

@@ -1,550 +1,3 @@
-# ix-modal-content
-## HTML Examples
-### Example: modal-form-ix-button-submit
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Modal Form Example</title>
-  </head>
-  <body>
-    <ix-button>Show modal</ix-button>
-    <template id="modal-form-template">
-      <ix-modal-header>Create Resource</ix-modal-header>
-      <ix-modal-content>
-        <form id="create-resource-form">
-          <ix-input label="Name" type="text" id="name" name="name"></ix-input>
-        </form>
-      </ix-modal-content>
-      <ix-modal-footer>
-        <ix-button variant="subtle-primary" data-cancel>Cancel</ix-button>
-        <ix-button type="submit" form="create-resource-form">Submit</ix-button>
-      </ix-modal-footer>
-    </template>
-    <script type="module">
-      import { showModal, closeModal, dismissModal } from '@siemens/ix';
-      function createFormModal() {
-        const name = 'modal-form-example';
-        window.customElements.define(
-          name,
-          class extends HTMLElement {
-            isInitalRender = false;
-            connectedCallback() {
-              if (this.isInitalRender) {
-                return;
-              }
-              this.isInitalRender = true;
-              this.firstRender();
-            }
-            firstRender() {
-              const modalTemplate = document.getElementById(
-                'modal-form-template'
-              );
-              const template = modalTemplate.content.cloneNode(true);
-              const cancelButton = template.querySelector('[data-cancel]');
-              const form = template.querySelector('#create-resource-form');
-              cancelButton.addEventListener('click', () => {
-                dismissModal(this);
-              });
-              form.addEventListener('submit', (event) => {
-                event.preventDefault();
-                closeModal(this);
-              });
-              this.append(template);
-            }
-          }
-        );
-        return name;
-      }
-      (async function () {
-        const formModalName = createFormModal();
-        await window.customElements.whenDefined('ix-button');
-        const button = document.querySelector('ix-button');
-        button.addEventListener('click', async () => {
-          const customModal = document.createElement(formModalName);
-          await showModal({
-            content: customModal,
-          });
-        });
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: modal
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Modal example</title>
-  </head>
-  <body>
-    <ix-button>Show modal</ix-button>
-    <template id="modal-example-template">
-      <ix-modal-header>Message headline</ix-modal-header>
-      <ix-modal-content>Message text lorem ipsum</ix-modal-content>
-      <ix-modal-footer>
-        <ix-button variant="subtle-primary" data-cancel>Cancel</ix-button>
-        <ix-button data-okay>OK</ix-button>
-      </ix-modal-footer>
-    </template>
-    <script type="module">
-      import { showModal, closeModal, dismissModal } from '@siemens/ix';
-      function createExampleModal() {
-        const name = 'modal-example';
-        window.customElements.define(
-          name,
-          class extends HTMLElement {
-            isInitalRender = false;
-            constructor() {
-              super();
-            }
-            connectedCallback() {
-              if (this.isInitalRender) {
-                return;
-              }
-              this.isInitalRender = true;
-              this.firstRender();
-            }
-            firstRender() {
-              const modalTemplate = document.getElementById(
-                'modal-example-template'
-              );
-              const template = modalTemplate.content.cloneNode(true);
-              const cancelButton = template.querySelector('[data-cancel]');
-              const okayButton = template.querySelector('[data-okay]');
-              cancelButton.addEventListener('click', () => {
-                dismissModal(this);
-              });
-              okayButton.addEventListener('click', () => {
-                closeModal(this);
-              });
-              this.append(template);
-            }
-          }
-        );
-        return name;
-      }
-      (async function () {
-        const exampleModalName = createExampleModal();
-        await window.customElements.whenDefined('ix-button');
-        const button = document.querySelector('ix-button');
-        button.addEventListener('click', async () => {
-          const customModal = document.createElement(exampleModalName);
-          const modal = await showModal({
-            content: customModal,
-          });
-        });
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: modal-form-ix-button-submit
-```tsx
-import {
-  IxButton,
-  IxModalContent,
-  IxModalFooter,
-  IxModalHeader,
-  Modal,
-  ModalRef,
-  showModal,
-  IxInput,
-} from '@siemens/ix-react';
-import { useRef } from 'react';
-function CustomModal() {
-  const modalRef = useRef<ModalRef>(null);
-  const close = () => {
-    modalRef.current?.close('close payload!');
-  };
-  const dismiss = () => {
-    modalRef.current?.dismiss('dismiss payload');
-  };
-  return (
-    <Modal ref={modalRef}>
-      <IxModalHeader onCloseClick={() => dismiss()}>
-        Create Resource
-      </IxModalHeader>
-      <IxModalContent>
-        <form
-          id="create-resource-form"
-          onSubmit={(e) => {
-            e.preventDefault();
-            close();
-          }}
-        >
-          <IxInput label="Name" type="text" id="name" name="name"></IxInput>
-        </form>
-      </IxModalContent>
-      <IxModalFooter>
-        <IxButton variant="subtle-primary" onClick={() => dismiss()}>
-          Cancel
-        </IxButton>
-        <IxButton form="create-resource-form" type="submit">
-          Submit
-        </IxButton>
-      </IxModalFooter>
-    </Modal>
-  );
-}
-export default () => {
-  async function show() {
-    await showModal({
-      content: <CustomModal />,
-    });
-  }
-  return <IxButton onClick={show}>Show modal</IxButton>;
-};
-```
-### Example: modal
-```tsx
-import {
-  IxButton,
-  IxModalContent,
-  IxModalFooter,
-  IxModalHeader,
-  Modal,
-  ModalRef,
-  showModal,
-} from '@siemens/ix-react';
-import { useRef } from 'react';
-function CustomModal() {
-  const modalRef = useRef<ModalRef>(null);
-  const close = () => {
-    modalRef.current?.close('close payload!');
-  };
-  const dismiss = () => {
-    modalRef.current?.dismiss('dismiss payload');
-  };
-  return (
-    <Modal ref={modalRef}>
-      <IxModalHeader onCloseClick={() => dismiss()}>
-        Message headline
-      </IxModalHeader>
-      <IxModalContent>Message text lorem ipsum</IxModalContent>
-      <IxModalFooter>
-        <IxButton variant="subtle-primary" onClick={() => dismiss()}>
-          Cancel
-        </IxButton>
-        <IxButton onClick={() => close()}>OK</IxButton>
-      </IxModalFooter>
-    </Modal>
-  );
-}
-export default () => {
-  async function show() {
-    await showModal({
-      content: <CustomModal />,
-    });
-  }
-  return (
-    <>
-      <IxButton onClick={show}>Show modal</IxButton>
-    </>
-  );
-};
-```
-## Vue Examples
-### Example: modal-form-ix-button-submit
-```tsx
-<script setup lang="ts">
-import {
-  HTMLRefElement,
-  IxButton,
-  IxModalHeader,
-  IxModalContent,
-  IxModalFooter,
-  IxInput,
-} from '@siemens/ix-vue';
-import { ref } from 'vue';
-const modalRef = ref<HTMLRefElement<HTMLIxModalElement>>();
-const show = ref(false);
-const close = () => {
-  modalRef.value?.$el.closeModal('close payload!');
-  show.value = false;
-};
-const dismiss = () => {
-  modalRef.value?.$el.dismissModal('dismiss payload');
-  show.value = false;
-};
-const submitForm = (event: Event) => {
-  event.preventDefault();
-  close();
-};
-</script>
-<template>
-  <IxButton @click="show = true">Show modal</IxButton>
-  <IxDialog ref="modalRef" v-if="show">
-    <IxModalHeader @closeClick="dismiss">Create Resource</IxModalHeader>
-    <IxModalContent>
-      <form id="create-resource-form" @submit="submitForm">
-        <IxInput label="Name" type="text" id="name" name="name"></IxInput>
-      </form>
-    </IxModalContent>
-    <IxModalFooter>
-      <IxButton variant="subtle-primary" @click="dismiss">Cancel</IxButton>
-      <IxButton form="create-resource-form" type="submit">Submit</IxButton>
-    </IxModalFooter>
-  </IxDialog>
-</template>
-```
-### Example: modal
-```tsx
-<script setup lang="tsx">
-import {
-  IxButton,
-  IxModalHeader,
-  IxModalContent,
-  IxModalFooter,
-  Modal,
-  ModalSlotProps,
-  showModal
-} from '@siemens/ix-vue';
-function show() {
-  showModal({
-    content: <Modal>{
-      ({ closeModal, dismissModal }: ModalSlotProps) => [
-        <IxModalHeader>Message headline</IxModalHeader>,
-        <IxModalContent>Message text lorem ipsum</IxModalContent>,
-        <IxModalFooter>
-          <IxButton variant="subtle-primary" onClick={() => dismissModal()}>Cancel</IxButton>
-          <IxButton onClick={() => closeModal()}>OK</IxButton>
-        </IxModalFooter>
-      ]
-    }
-    </Modal >
-  })
-}
-</script>
-<template>
-  <IxButton @click="show()">Show modal</IxButton>
-</template>
-```
-## Angular Examples
-### Example: modal-form-ix-button-submit
-#### Component typescript
-```typescript
-import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { ModalService } from '@siemens/ix-angular';
-import { NgForm } from '@angular/forms';
-@Component({
-  standalone: false,
-  selector: 'app-modal-form-ix-button-submit',
-  templateUrl: './modal-form-ix-button-submit.html',
-})
-export default class ModalFormIxButtonSubmit {
-  @ViewChild('customModal', { read: TemplateRef })
-  customModalRef!: TemplateRef<any>;
-  constructor(private readonly modalService: ModalService) {}
-  async openModal() {
-    await this.modalService.open({
-      content: this.customModalRef,
-      data: 'Some data',
-    });
-  }
-  onSubmit(form: NgForm): void {
-    if (form.valid) {
-      return;
-    }
-    form.control.markAllAsTouched();
-  }
-}
-```
-#### Component template
-```html
-<ix-button
-  (click)="openModal()"
-  (keydown.enter)="openModal()"
-  (keydown.space)="openModal()"
->
-  Show modal
-</ix-button>
-<ng-template #customModal let-modal>
-  <ix-modal>
-    <ix-modal-header> Create Resource </ix-modal-header>
-    <ix-modal-content>
-      <form
-        id="create-resource-form"
-        #formRef="ngForm"
-        (ngSubmit)="onSubmit(formRef)"
-      >
-        <ix-input label="Name:" type="text" name="name" ngModel></ix-input>
-      </form>
-    </ix-modal-content>
-    <ix-modal-footer>
-      <ix-button variant="subtle-primary" (click)="modal.dismiss('dismiss')" (keydown.enter)="modal.dismiss('dismiss')" (keydown.space)="modal.dismiss('dismiss')">
-        Cancel
-      </ix-button>
-      <ix-button form="create-resource-form" type="submit"> Submit </ix-button>
-    </ix-modal-footer>
-  </ix-modal>
-</ng-template>
-```
-## Angular Standalone Examples
-### Example: modal-form-ix-button-submit
-#### Component typescript
-```typescript
-import { Component, TemplateRef, ViewChild } from '@angular/core';
-import {
-  IxButton,
-  IxModal,
-  IxModalHeader,
-  IxModalContent,
-  IxModalFooter,
-  IxInput,
-  ModalService,
-} from '@siemens/ix-angular/standalone';
-import { FormsModule, NgForm } from '@angular/forms';
-@Component({
-  selector: 'app-modal-form-ix-button-submit',
-  templateUrl: './modal-form-ix-button-submit.html',
-  imports: [
-    FormsModule,
-    IxButton,
-    IxModal,
-    IxModalHeader,
-    IxModalContent,
-    IxModalFooter,
-    IxInput,
-  ],
-})
-export default class ModalFormIxButtonSubmit {
-  @ViewChild('customModal', { read: TemplateRef })
-  customModalRef!: TemplateRef<any>;
-  constructor(private readonly modalService: ModalService) {}
-  async openModal() {
-    await this.modalService.open({
-      content: this.customModalRef,
-      data: 'Some data',
-    });
-  }
-  onSubmit(form: NgForm): void {
-    if (form.valid) {
-      return;
-    }
-    form.control.markAllAsTouched();
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 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.
--->
-<ix-button (click)="openModal()"> Show modal </ix-button>
-<ng-template #customModal let-modal>
-  <ix-modal>
-    <ix-modal-header> Create Resource </ix-modal-header>
-    <ix-modal-content>
-      <form
-        id="create-resource-form"
-        #formRef="ngForm"
-        (ngSubmit)="onSubmit(formRef)"
-      >
-        <ix-input label="Name:" type="text" name="name" ngModel></ix-input>
-      </form>
-    </ix-modal-content>
-    <ix-modal-footer>
-      <ix-button variant="subtle-primary" (click)="modal.dismiss('dismiss')"> Cancel </ix-button>
-      <ix-button form="create-resource-form" type="submit"> Submit </ix-button>
-    </ix-modal-footer>
-  </ix-modal>
-</ng-template>
-```
 <!-- Auto Generated Below -->