From 1fa58c8ce7956d5ba9113126b178d84c32b12d7d Mon Sep 17 00:00:00 2001 From: AndreasBerliner <41509230+AndreasBerliner@users.noreply.github.com> Date: Mon, 16 Dec 2024 11:18:35 +0100 Subject: [PATCH] docs(input): add info about slots and examples for input, number-input, date-input (#1616) Co-authored-by: Lukas Maurer --- .../src/app/app-routing.module.ts | 13 ++++- .../angular-test-app/src/app/app.module.ts | 10 +++- .../date-input-with-slots.html | 13 +++++ .../preview-examples/date-input-with-slots.ts | 16 ++++++ .../preview-examples/input-with-slots.html | 13 +++++ .../src/preview-examples/input-with-slots.ts | 16 ++++++ .../number-input-with-slots.html | 13 +++++ .../number-input-with-slots.ts | 16 ++++++ packages/core/component-doc.json | 57 ++++++++++++++++++- .../src/components/date-input/date-input.tsx | 2 + packages/core/src/components/input/input.tsx | 2 + .../src/components/input/number-input.tsx | 2 + .../docs/controls/_date-input_code.mdx | 9 +++ .../docs/controls/_input_code.md | 13 +++-- .../docs/controls/_number-input_code.mdx | 9 +++ .../date-input-with-slots.html | 25 ++++++++ .../preview-examples/input-with-slots.html | 25 ++++++++ .../number-input-with-slots.html | 25 ++++++++ packages/react-test-app/src/main.tsx | 14 +++++ .../date-input-with-slots.tsx | 19 +++++++ .../src/preview-examples/input-with-slots.tsx | 19 +++++++ .../number-input-with-slots.tsx | 19 +++++++ packages/vue-test-app/src/Root.vue | 12 +++- .../date-input-with-slots.vue | 19 +++++++ .../src/preview-examples/input-with-slots.vue | 19 +++++++ .../number-input-with-slots.vue | 19 +++++++ 26 files changed, 406 insertions(+), 13 deletions(-) create mode 100644 packages/angular-test-app/src/preview-examples/date-input-with-slots.html create mode 100644 packages/angular-test-app/src/preview-examples/date-input-with-slots.ts create mode 100644 packages/angular-test-app/src/preview-examples/input-with-slots.html create mode 100644 packages/angular-test-app/src/preview-examples/input-with-slots.ts create mode 100644 packages/angular-test-app/src/preview-examples/number-input-with-slots.html create mode 100644 packages/angular-test-app/src/preview-examples/number-input-with-slots.ts create mode 100644 packages/html-test-app/src/preview-examples/date-input-with-slots.html create mode 100644 packages/html-test-app/src/preview-examples/input-with-slots.html create mode 100644 packages/html-test-app/src/preview-examples/number-input-with-slots.html create mode 100644 packages/react-test-app/src/preview-examples/date-input-with-slots.tsx create mode 100644 packages/react-test-app/src/preview-examples/input-with-slots.tsx create mode 100644 packages/react-test-app/src/preview-examples/number-input-with-slots.tsx create mode 100644 packages/vue-test-app/src/preview-examples/date-input-with-slots.vue create mode 100644 packages/vue-test-app/src/preview-examples/input-with-slots.vue create mode 100644 packages/vue-test-app/src/preview-examples/number-input-with-slots.vue diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts index 427f2ef819..013e001ec6 100644 --- a/packages/angular-test-app/src/app/app-routing.module.ts +++ b/packages/angular-test-app/src/app/app-routing.module.ts @@ -57,6 +57,7 @@ import DateInputDisabled from '../preview-examples/date-input-disabled'; import DateInputLabel from '../preview-examples/date-input-label'; import DateInputReadonly from '../preview-examples/date-input-readonly'; import DateInputValidation from '../preview-examples/date-input-validation'; +import DateInputWithSlots from '../preview-examples/date-input-with-slots'; import Datepicker from '../preview-examples/datepicker'; import DatepickerLocale from '../preview-examples/datepicker-locale'; import DatepickerRange from '../preview-examples/datepicker-range'; @@ -99,6 +100,8 @@ import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled'; import FormCheckboxGroup from '../preview-examples/form-checkbox-group'; import FormCheckboxGroupIndeterminate from '../preview-examples/form-checkbox-group-indeterminate'; import FormCheckboxValidation from '../preview-examples/form-checkbox-validation'; +import FormLayoutAuto from '../preview-examples/form-layout-auto'; +import FormLayoutGrid from '../preview-examples/form-layout-grid'; import FormValidation from '../preview-examples/form-validation'; import Grid from '../preview-examples/grid'; import GridPadding from '../preview-examples/grid-padding'; @@ -127,6 +130,7 @@ import InputPattern from '../preview-examples/input-pattern'; import InputReadonly from '../preview-examples/input-readonly'; import InputTypes from '../preview-examples/input-types'; import InputValidation from '../preview-examples/input-validation'; +import InputWithSlots from '../preview-examples/input-with-slots'; import KeyValue from '../preview-examples/key-value'; import KeyValueList from '../preview-examples/key-value-list'; import KeyValueListStriped from '../preview-examples/key-value-list-striped'; @@ -157,6 +161,7 @@ import NumberInputLabel from '../preview-examples/number-input-label'; import NumberInputReadonly from '../preview-examples/number-input-readonly'; import NumberInputStepperButton from '../preview-examples/number-input-stepper-button'; import NumberInputValidation from '../preview-examples/number-input-validation'; +import NumberInputWithSlots from '../preview-examples/number-input-with-slots'; import Pagination from '../preview-examples/pagination'; import PaginationAdvanced from '../preview-examples/pagination-advanced'; import Pane from '../preview-examples/pane'; @@ -222,8 +227,6 @@ import VerticalTabs from '../preview-examples/vertical-tabs'; import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar'; import Workflow from '../preview-examples/workflow'; import WorkflowVertical from '../preview-examples/workflow-vertical'; -import FormLayoutAuto from 'src/preview-examples/form-layout-auto'; -import FormLayoutGrid from 'src/preview-examples/form-layout-grid'; const routes: Routes = [ { @@ -434,6 +437,10 @@ const routes: Routes = [ path: 'date-input-validation', component: DateInputValidation, }, + { + path: 'date-input-with-slots', + component: DateInputWithSlots, + }, { path: 'datepicker', component: Datepicker, @@ -770,6 +777,7 @@ const routes: Routes = [ { path: 'input-readonly', component: InputReadonly }, { path: 'input-types', component: InputTypes }, { path: 'input-validation', component: InputValidation }, + { path: 'input-with-slots', component: InputWithSlots }, { path: 'theme-switcher', component: ThemeService }, { path: 'tile', component: Tile }, { path: 'timepicker', component: Timepicker }, @@ -901,6 +909,7 @@ const routes: Routes = [ component: NumberInputStepperButton, }, { path: 'number-input-validation', component: NumberInputValidation }, + { path: 'number-input-with-slots', component: NumberInputWithSlots }, { path: 'tooltip', component: Tooltip }, { path: 'modal-by-instance', component: ModalByInstance }, { path: 'push-card', component: PushCard }, diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts index ee904b99f8..d33aec70dc 100644 --- a/packages/angular-test-app/src/app/app.module.ts +++ b/packages/angular-test-app/src/app/app.module.ts @@ -65,6 +65,7 @@ import DateInputDisabled from '../preview-examples/date-input-disabled'; import DateInputLabel from '../preview-examples/date-input-label'; import DateInputReadonly from '../preview-examples/date-input-readonly'; import DateInputValidation from '../preview-examples/date-input-validation'; +import DateInputWithSlots from '../preview-examples/date-input-with-slots'; import Datepicker from '../preview-examples/datepicker'; import DatepickerLocale from '../preview-examples/datepicker-locale'; import DatepickerRange from '../preview-examples/datepicker-range'; @@ -107,6 +108,8 @@ import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled'; import FormCheckboxGroup from '../preview-examples/form-checkbox-group'; import FormCheckboxGroupIndeterminate from '../preview-examples/form-checkbox-group-indeterminate'; import FormCheckboxValidation from '../preview-examples/form-checkbox-validation'; +import FormLayoutAuto from '../preview-examples/form-layout-auto'; +import FormLayoutGrid from '../preview-examples/form-layout-grid'; import FormValidation from '../preview-examples/form-validation'; import Grid from '../preview-examples/grid'; import GridPadding from '../preview-examples/grid-padding'; @@ -135,6 +138,7 @@ import InputPattern from '../preview-examples/input-pattern'; import InputReadonly from '../preview-examples/input-readonly'; import InputTypes from '../preview-examples/input-types'; import InputValidation from '../preview-examples/input-validation'; +import InputWithSlots from '../preview-examples/input-with-slots'; import KeyValue from '../preview-examples/key-value'; import KeyValueList from '../preview-examples/key-value-list'; import KeyValueListStriped from '../preview-examples/key-value-list-striped'; @@ -165,6 +169,7 @@ import NumberInputLabel from '../preview-examples/number-input-label'; import NumberInputReadonly from '../preview-examples/number-input-readonly'; import NumberInputStepperButton from '../preview-examples/number-input-stepper-button'; import NumberInputValidation from '../preview-examples/number-input-validation'; +import NumberInputWithSlots from '../preview-examples/number-input-with-slots'; import Pagination from '../preview-examples/pagination'; import PaginationAdvanced from '../preview-examples/pagination-advanced'; import Pane from '../preview-examples/pane'; @@ -230,8 +235,6 @@ import VerticalTabs from '../preview-examples/vertical-tabs'; import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar'; import Workflow from '../preview-examples/workflow'; import WorkflowVertical from '../preview-examples/workflow-vertical'; -import FormLayoutAuto from 'src/preview-examples/form-layout-auto'; -import FormLayoutGrid from 'src/preview-examples/form-layout-grid'; @NgModule({ declarations: [ @@ -284,6 +287,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid'; DateInputLabel, DateInputReadonly, DateInputValidation, + DateInputWithSlots, ContentExample, DateDropdown, DateDropdownUserRange, @@ -413,6 +417,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid'; InputReadonly, InputTypes, InputValidation, + InputWithSlots, InputPattern, TextareaLegacyReadonly, TextareaLegacy, @@ -450,6 +455,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid'; NumberInputReadonly, NumberInputStepperButton, NumberInputValidation, + NumberInputWithSlots, TabsRounded, DatepickerRange, Tooltip, diff --git a/packages/angular-test-app/src/preview-examples/date-input-with-slots.html b/packages/angular-test-app/src/preview-examples/date-input-with-slots.html new file mode 100644 index 0000000000..7cfcb9d6f4 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-with-slots.html @@ -0,0 +1,13 @@ + + + + + Slot + diff --git a/packages/angular-test-app/src/preview-examples/date-input-with-slots.ts b/packages/angular-test-app/src/preview-examples/date-input-with-slots.ts new file mode 100644 index 0000000000..003cb39720 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/date-input-with-slots.ts @@ -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. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './date-input-with-slots.html', +}) +export default class DateInputWithSlots {} diff --git a/packages/angular-test-app/src/preview-examples/input-with-slots.html b/packages/angular-test-app/src/preview-examples/input-with-slots.html new file mode 100644 index 0000000000..4fe5530e2d --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-with-slots.html @@ -0,0 +1,13 @@ + + + + + unit + diff --git a/packages/angular-test-app/src/preview-examples/input-with-slots.ts b/packages/angular-test-app/src/preview-examples/input-with-slots.ts new file mode 100644 index 0000000000..649b3a9383 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-with-slots.ts @@ -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. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './input-with-slots.html' +}) +export default class InputWithSlots {} diff --git a/packages/angular-test-app/src/preview-examples/number-input-with-slots.html b/packages/angular-test-app/src/preview-examples/number-input-with-slots.html new file mode 100644 index 0000000000..cb9e63db72 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-with-slots.html @@ -0,0 +1,13 @@ + + + + + unit + diff --git a/packages/angular-test-app/src/preview-examples/number-input-with-slots.ts b/packages/angular-test-app/src/preview-examples/number-input-with-slots.ts new file mode 100644 index 0000000000..5d5e329aa7 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/number-input-with-slots.ts @@ -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. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './number-input-with-slots.html' +}) +export default class NumberInputWithSlots {} diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index ada4ed96bf..bc355c4a68 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -4465,6 +4465,14 @@ { "name": "form-ready", "text": "2.6.0" + }, + { + "name": "slot", + "text": "start - Element will be displayed at the start of the input" + }, + { + "name": "slot", + "text": "end - Element will be displayed at the end of the input" } ], "encapsulation": "shadow", @@ -4941,7 +4949,16 @@ } ], "styles": [], - "slots": [], + "slots": [ + { + "name": "end", + "docs": "Element will be displayed at the end of the input" + }, + { + "name": "start", + "docs": "Element will be displayed at the start of the input" + } + ], "parts": [], "listeners": [] }, @@ -9633,6 +9650,14 @@ { "name": "form-ready", "text": "2.6.0" + }, + { + "name": "slot", + "text": "start - Element will be displayed at the start of the input" + }, + { + "name": "slot", + "text": "end - Element will be displayed at the end of the input" } ], "encapsulation": "shadow", @@ -10165,7 +10190,16 @@ } ], "styles": [], - "slots": [], + "slots": [ + { + "name": "end", + "docs": "Element will be displayed at the end of the input" + }, + { + "name": "start", + "docs": "Element will be displayed at the start of the input" + } + ], "parts": [], "listeners": [] }, @@ -13814,6 +13848,14 @@ { "name": "form-ready", "text": "2.6.0" + }, + { + "name": "slot", + "text": "start - Element will be displayed at the start of the input" + }, + { + "name": "slot", + "text": "end - Element will be displayed at the end of the input" } ], "encapsulation": "shadow", @@ -14332,7 +14374,16 @@ } ], "styles": [], - "slots": [], + "slots": [ + { + "name": "end", + "docs": "Element will be displayed at the end of the input" + }, + { + "name": "start", + "docs": "Element will be displayed at the start of the input" + } + ], "parts": [], "listeners": [] }, diff --git a/packages/core/src/components/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx index 652c6e212d..e84807bcc7 100644 --- a/packages/core/src/components/date-input/date-input.tsx +++ b/packages/core/src/components/date-input/date-input.tsx @@ -42,6 +42,8 @@ export type DateInputValidityState = { /** * @since 2.6.0 * @form-ready 2.6.0 + * @slot start - Element will be displayed at the start of the input + * @slot end - Element will be displayed at the end of the input */ @Component({ tag: 'ix-date-input', diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx index bf83c7c5e9..f2ab6dd774 100644 --- a/packages/core/src/components/input/input.tsx +++ b/packages/core/src/components/input/input.tsx @@ -42,6 +42,8 @@ let inputIds = 0; /** * @since 2.6.0 * @form-ready 2.6.0 + * @slot start - Element will be displayed at the start of the input + * @slot end - Element will be displayed at the end of the input */ @Component({ tag: 'ix-input', diff --git a/packages/core/src/components/input/number-input.tsx b/packages/core/src/components/input/number-input.tsx index 2b99348fc6..4573e4b692 100644 --- a/packages/core/src/components/input/number-input.tsx +++ b/packages/core/src/components/input/number-input.tsx @@ -40,6 +40,8 @@ let numberInputIds = 0; /** * @since 2.6.0 * @form-ready 2.6.0 + * @slot start - Element will be displayed at the start of the input + * @slot end - Element will be displayed at the end of the input */ @Component({ tag: 'ix-number-input', diff --git a/packages/documentation/docs/controls/_date-input_code.mdx b/packages/documentation/docs/controls/_date-input_code.mdx index 8bd6e7cf4c..4bd0edacb1 100644 --- a/packages/documentation/docs/controls/_date-input_code.mdx +++ b/packages/documentation/docs/controls/_date-input_code.mdx @@ -1,6 +1,7 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from '@site/docs/auto-generated/ix-date-input/props.md'; import Events from '@site/docs/auto-generated/ix-date-input/events.md'; +import Slots from '@site/docs/auto-generated/ix-input/slots.md'; ## Development @@ -26,6 +27,10 @@ import Events from '@site/docs/auto-generated/ix-date-input/events.md'; +#### Slots + + + ### API #### Properties @@ -35,3 +40,7 @@ import Events from '@site/docs/auto-generated/ix-date-input/events.md'; #### Events + +#### Slots + + diff --git a/packages/documentation/docs/controls/_input_code.md b/packages/documentation/docs/controls/_input_code.md index 222d7a7158..2c09f55363 100644 --- a/packages/documentation/docs/controls/_input_code.md +++ b/packages/documentation/docs/controls/_input_code.md @@ -1,6 +1,7 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from '@site/docs/auto-generated/ix-input/props.md'; import Events from '@site/docs/auto-generated/ix-input/events.md'; +import Slots from '@site/docs/auto-generated/ix-input/slots.md'; import Tags from '@site/docs/auto-generated/ix-input/tags.md'; ## Development @@ -33,11 +34,11 @@ import Tags from '@site/docs/auto-generated/ix-input/tags.md'; #### Validation - -> +#### Slots + + ### API @@ -48,3 +49,7 @@ height="27rem" #### Events + +#### Slots + + diff --git a/packages/documentation/docs/controls/_number-input_code.mdx b/packages/documentation/docs/controls/_number-input_code.mdx index c2d790c18c..e2f3f0c055 100644 --- a/packages/documentation/docs/controls/_number-input_code.mdx +++ b/packages/documentation/docs/controls/_number-input_code.mdx @@ -1,5 +1,6 @@ import Playground from '@site/src/components/PlaygroundV3'; import Props from '@site/docs/auto-generated/ix-number-input/props.md'; +import Slots from '@site/docs/auto-generated/ix-input/slots.md'; import Events from '@site/docs/auto-generated/ix-number-input/events.md'; ## Development @@ -34,6 +35,10 @@ import Events from '@site/docs/auto-generated/ix-number-input/events.md'; examplesByName > +#### Slots + + + ### API #### Properties @@ -43,3 +48,7 @@ import Events from '@site/docs/auto-generated/ix-number-input/events.md'; #### Events + +#### Slots + + diff --git a/packages/html-test-app/src/preview-examples/date-input-with-slots.html b/packages/html-test-app/src/preview-examples/date-input-with-slots.html new file mode 100644 index 0000000000..6021085b95 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/date-input-with-slots.html @@ -0,0 +1,25 @@ + + + + + + + + Date input with slots example + + + + + Slot + + + + + diff --git a/packages/html-test-app/src/preview-examples/input-with-slots.html b/packages/html-test-app/src/preview-examples/input-with-slots.html new file mode 100644 index 0000000000..bb748f56f6 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/input-with-slots.html @@ -0,0 +1,25 @@ + + + + + + + + Input with slots example + + + + + unit + + + + + diff --git a/packages/html-test-app/src/preview-examples/number-input-with-slots.html b/packages/html-test-app/src/preview-examples/number-input-with-slots.html new file mode 100644 index 0000000000..0c9086f8d8 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/number-input-with-slots.html @@ -0,0 +1,25 @@ + + + + + + + + Number input with slots example + + + + + unit + + + + + diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx index 778af5ab9a..95b53a2fbe 100644 --- a/packages/react-test-app/src/main.tsx +++ b/packages/react-test-app/src/main.tsx @@ -218,6 +218,10 @@ import LayoutAutoCustom from './preview-examples/layout-auto-custom'; import FormCheckboxGroupIndeterminate from './preview-examples/form-checkbox-group-indeterminate'; import FormLayoutAuto from './preview-examples/form-layout-auto'; import FormLayoutGrid from './preview-examples/form-layout-grid'; +import InputWithSlots from './preview-examples/input-with-slots'; +import NumberInputWithSlots from './preview-examples/number-input-with-slots'; +import DateInput from './preview-examples/date-input'; +import DateInputWithSlots from './preview-examples/date-input-with-slots'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( @@ -600,6 +604,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( } /> } /> } /> + } /> } /> } /> } /> @@ -641,6 +646,10 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( } /> } /> } /> + } + /> } @@ -661,6 +670,11 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( path="/preview/number-input-validation" element={} /> + } /> + } + /> } /> } /> } /> diff --git a/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx b/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx new file mode 100644 index 0000000000..61d878a91b --- /dev/null +++ b/packages/react-test-app/src/preview-examples/date-input-with-slots.tsx @@ -0,0 +1,19 @@ +/* + * 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. + */ + +import { IxDateInput, IxIcon, IxTypography } from '@siemens/ix-react'; + +export default () => { + return ( + + + Slot + + ); +}; diff --git a/packages/react-test-app/src/preview-examples/input-with-slots.tsx b/packages/react-test-app/src/preview-examples/input-with-slots.tsx new file mode 100644 index 0000000000..29f9f00244 --- /dev/null +++ b/packages/react-test-app/src/preview-examples/input-with-slots.tsx @@ -0,0 +1,19 @@ +/* + * 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. + */ + +import { IxIcon, IxInput, IxTypography } from '@siemens/ix-react'; + +export default () => { + return ( + + + unit + + ); +}; diff --git a/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx b/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx new file mode 100644 index 0000000000..dc63253fdd --- /dev/null +++ b/packages/react-test-app/src/preview-examples/number-input-with-slots.tsx @@ -0,0 +1,19 @@ +/* + * 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. + */ + +import { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-react'; + +export default () => { + return ( + + + unit + + ); +}; diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue index 00340e0c48..438dd9d7fa 100644 --- a/packages/vue-test-app/src/Root.vue +++ b/packages/vue-test-app/src/Root.vue @@ -56,6 +56,8 @@ import CustomFieldValidation from './preview-examples/custom-field-validation.vu import CustomField from './preview-examples/custom-field.vue'; import DateDropdownUserRange from './preview-examples/date-dropdown-user-range.vue'; import DateDropdown from './preview-examples/date-dropdown.vue'; +import DateInputWithSlots from './preview-examples/date-input-with-slots.vue'; +import DateInput from './preview-examples/date-input.vue'; import DatepickerLocale from './preview-examples/datepicker-locale.vue'; import DatepickerRange from './preview-examples/datepicker-range.vue'; import Datepicker from './preview-examples/datepicker.vue'; @@ -98,6 +100,8 @@ import FormCheckboxGroupIndeterminate from './preview-examples/form-checkbox-gro import FormCheckboxGroup from './preview-examples/form-checkbox-group.vue'; import FormCheckboxValidation from './preview-examples/form-checkbox-validation.vue'; import FormCheckbox from './preview-examples/form-checkbox.vue'; +import FormLayoutAuto from './preview-examples/form-layout-auto.vue'; +import FormLayoutGrid from './preview-examples/form-layout-grid.vue'; import FormValidation from './preview-examples/form-validation.vue'; import GridPadding from './preview-examples/grid-padding.vue'; import GridSize from './preview-examples/grid-size.vue'; @@ -124,6 +128,7 @@ import InputPattern from './preview-examples/input-pattern.vue'; import InputReadonly from './preview-examples/input-readonly.vue'; import InputTypes from './preview-examples/input-types.vue'; import InputValidation from './preview-examples/input-validation.vue'; +import InputWithSlots from './preview-examples/input-with-slots.vue'; import Input from './preview-examples/input.vue'; import KeyValueListStriped from './preview-examples/key-value-list-striped.vue'; import KeyValueListWithCustomValue from './preview-examples/key-value-list-with-custom-value.vue'; @@ -151,6 +156,7 @@ import NumberInputDisabled from './preview-examples/number-input-disabled.vue'; import NumberInputLabel from './preview-examples/number-input-label.vue'; import NumberInputReadOnly from './preview-examples/number-input-readonly.vue'; import NumberInputStepperButton from './preview-examples/number-input-stepper-button.vue'; +import NumberInputWithSlots from './preview-examples/number-input-with-slots.vue'; import NumberInput from './preview-examples/number-input.vue'; import PaginationAdvanced from './preview-examples/pagination-advanced.vue'; import Pagination from './preview-examples/pagination.vue'; @@ -215,8 +221,6 @@ import VerticalTabsWithAvatar from './preview-examples/vertical-tabs-with-avatar import VerticalTabs from './preview-examples/vertical-tabs.vue'; import WorkflowVertical from './preview-examples/workflow-vertical.vue'; import Workflow from './preview-examples/workflow.vue'; -import FormLayoutAuto from './preview-examples/form-layout-auto.vue'; -import FormLayoutGrid from './preview-examples/form-layout-grid.vue'; const routes: any = { '/': App, @@ -357,6 +361,7 @@ const routes: any = { '/preview/input-readonly': InputReadonly, '/preview/input-types': InputTypes, '/preview/input-validation': InputValidation, + '/preview/input-with-slots': InputWithSlots, '/preview/tile': Tile, '/preview/timepicker': Timepicker, '/preview/toast': Toast, @@ -376,6 +381,9 @@ const routes: any = { '/preview/number-input-label': NumberInputLabel, '/preview/number-input-readonly': NumberInputReadOnly, '/preview/number-input-stepper-button': NumberInputStepperButton, + '/preview/number-input-with-slots': NumberInputWithSlots, + '/preview/date-input': DateInput, + '/preview/date-input-with-slots': DateInputWithSlots, '/preview/workflow': Workflow, '/preview/workflow-vertical': WorkflowVertical, '/preview/map-navigation': MapNavigation, diff --git a/packages/vue-test-app/src/preview-examples/date-input-with-slots.vue b/packages/vue-test-app/src/preview-examples/date-input-with-slots.vue new file mode 100644 index 0000000000..1979ec10b0 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/date-input-with-slots.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/input-with-slots.vue b/packages/vue-test-app/src/preview-examples/input-with-slots.vue new file mode 100644 index 0000000000..5d388f72cb --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/input-with-slots.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/number-input-with-slots.vue b/packages/vue-test-app/src/preview-examples/number-input-with-slots.vue new file mode 100644 index 0000000000..d533aefd15 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/number-input-with-slots.vue @@ -0,0 +1,19 @@ + + + + +