Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#9721 - Remove migrate tui-form classes from demo #9990

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+614 −20
Open

#9721 - Remove migrate tui-form classes from demo #9990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9423d4c
fix(demo): add example 2 for implementation without tui-form classes
shiv9604 Dec 14, 2024
2a0b1ac
fix(demo): remove tui-form classes & integrate form layout component
shiv9604 Dec 14, 2024
73e1cfd
fix(demo): add depreciation warning
shiv9604 Dec 15, 2024
a8151a5
fix(demo): move form component to layouts
shiv9604 Dec 15, 2024
060901e
fix(demo): refactor warning message
shiv9604 Dec 15, 2024
d4817a4
fix(demo): replace other tui-form instances
shiv9604 Dec 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion projects/demo/src/modules/app/demo-routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const DemoRoute = {
Expand: '/components/expand',
ElasticContainer: '/components/elastic-container',
FieldError: '/pipes/field-error',
FormLayout: '/components/form',
FormLayout: '/layout/form',
InputFiles: '/components/input-files',
InputColor: '/components/input-color',
Group: '/components/group',
Expand Down
2 changes: 1 addition & 1 deletion projects/demo/src/modules/app/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@ export const pages: DocRoutePages = [
route: DemoRoute.Filter,
},
{
section: 'Components',
section: 'Layout',
title: 'Form',
keywords: 'форма, поле, кнопка, группировка, группа',
route: DemoRoute.FormLayout,
Expand Down
3 changes: 1 addition & 2 deletions projects/demo/src/modules/components/multi-select/examples/9/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,14 @@
let-data="data"
>
<div class="tui-container_fullwidth">
<div class="tui-row tui-form__row_multi-fields tui-row_adaptive">
<div class="tui-row tui-row_adaptive">
<label class="tui-col_md-12">
Star Wars persons
<tui-multi-select
[formControl]="testValue"
[rows]="1"
[tuiTextfieldCleaner]="true"
[tuiTextfieldLabelOutside]="true"
[tuiTextfieldSize]="data.textFieldSize"
>
<tui-data-list-wrapper
*tuiDataList
Expand Down
315 changes: 315 additions & 0 deletions projects/demo/src/modules/markup/form/examples/2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,315 @@
<div class="tui-container">
<div class="stepper">
<tui-stepper [activeItemIndex]="0">
<button
tuiStep
type="button"
>
First step
</button>
<button
tuiStep
type="button"
[disabled]="true"
>
Second step
</button>
<button
tuiStep
type="button"
[disabled]="true"
>
Third step
</button>
<button
tuiStep
type="button"
[disabled]="true"
>
Fourth step
</button>
</tui-stepper>
</div>

<form
tuiForm="l"
class="example2-form"
[formGroup]="testForm"
[style.max-width.rem]="45"
>
<header tuiHeader>
<h3 tuiTitle>A header</h3>
</header>

<tui-input
formControlName="nameValue"
tuiHintContent="A tooltip"
>
Textfield
<input
placeholder="Field placeholder"
tuiTextfieldLegacy
/>
<span class="tui-required"></span>
</tui-input>
<tui-error
formControlName="nameValue"
[error]="[] | tuiFieldError | async"
/>

<tui-input-date formControlName="periodValue">
Input date
<input
placeholder="Placeholder"
tuiTextfieldLegacy
/>
<span class="tui-required"></span>
</tui-input-date>
<tui-error
formControlName="periodValue"
[error]="[] | tuiFieldError | async"
/>
<div class="multi-fields">
<div class="multi-field">
<tui-input-password formControlName="passwordValue">Input password</tui-input-password>
<tui-error
formControlName="passwordValue"
class="tui-space-top-none"
[error]="[] | tuiFieldError | async"
/>
</div>
<div class="multi-field">
<tui-input-number
formControlName="moneyValue"
[tuiTextfieldPostfix]="'RUB' | tuiCurrency"
>
Input money
</tui-input-number>
<tui-error
formControlName="moneyValue"
class="tui-space-top-none"
[error]="[] | tuiFieldError | async"
/>
</div>
</div>
<div class="slider">
<tui-input-slider
formControlName="quantityValue"
tuiTextfieldPostfix="₽"
[max]="3000000"
[min]="50000"
[segments]="1"
>
Some slider
</tui-input-slider>
<div class="ticks-labels">
<span>from 50 000 ₽</span>
<span>to 3 000 000 ₽</span>
</div>
<div class="field-note">Some additional text</div>
<tui-error
formControlName="quantityValue"
[error]="[] | tuiFieldError | async"
/>
</div>
<div class="multi-fields tui-space_top-5">
<div class="multi-field">
<tui-select
formControlName="personValue"
[valueContent]="personValueContent"
>
Choose a person
<tui-data-list-wrapper
*tuiDataList
[items]="persons"
/>
</tui-select>
<ng-template
#personValueContent
let-data
>
<div class="uppercase-name">{{ data.firstName }} {{ data.lastName }}</div>
</ng-template>
<tui-error
formControlName="personValue"
class="tui-space-top-none"
[error]="[] | tuiFieldError | async"
/>
</div>
<div class="multi-field">
<tui-input-phone formControlName="phoneValue">Input phone</tui-input-phone>
<tui-error
formControlName="phoneValue"
class="tui-space-top-none"
[error]="[] | tuiFieldError | async"
/>
</div>
</div>
<header tuiHeader>
<h3 tuiTitle>Header</h3>
</header>
<div
tuiGroup
[collapsed]="true"
>
<label tuiBlock>
One option
<input
formControlName="radioValue"
tuiRadio
type="radio"
value="with-commission"
[style.margin-left]="'auto'"
/>
</label>
<label tuiBlock>
An alternative one
<input
formControlName="radioValue"
tuiRadio
type="radio"
value="without-commission"
[style.margin-left]="'auto'"
/>
</label>
</div>
<div class="half-width">
<tui-input-time formControlName="timeValue">Input time</tui-input-time>
</div>
<div class="checkboxes">
<label
tuiLabel
class="checkbox"
>
<input
formControlName="osnoValue"
tuiCheckbox
type="checkbox"
/>
First option
</label>
<label
tuiLabel
class="checkbox"
>
<input
formControlName="usnValue"
tuiCheckbox
type="checkbox"
/>
Cool option
</label>
<label
tuiLabel
class="checkbox"
>
<input
formControlName="eshnValue"
tuiCheckbox
type="checkbox"
/>
Boring option
</label>
<label
tuiLabel
class="checkbox"
>
<input
formControlName="envdValue"
tuiCheckbox
type="checkbox"
/>
Interesting option
</label>
</div>
<header tuiHeader>
<h3 tuiTitle>Header</h3>
</header>
<label class="text-normal">
From
<tui-select
formControlName="accountWherefrom"
class="accounts-select"
[tuiTextfieldLabelOutside]="true"
[valueContent]="accountContent"
>
Choose an account
<tui-data-list-wrapper
*tuiDataList
[itemContent]="accountContent"
[items]="accounts"
/>
</tui-select>
</label>
<label class="text-normal">
To
<tui-select
formControlName="accountWhere"
class="accounts-select"
[tuiTextfieldLabelOutside]="true"
[valueContent]="accountContent"
>
Choose an account
<tui-data-list-wrapper
*tuiDataList
[itemContent]="accountContent"
[items]="accounts"
/>
</tui-select>
</label>
<header tuiHeader>
<h3 tuiTitle>Header</h3>
</header>
<div class="select-with-checkbox">
<tui-input
formControlName="textValue"
tuiHintContent="A tooltip"
>
Textfield
<input
placeholder="Placeholder"
tuiTextfieldLegacy
/>
</tui-input>
<label
tuiLabel
class="tui-space_top-2"
>
<input
formControlName="checkboxValue"
tuiCheckbox
type="checkbox"
/>
Try this
</label>
</div>
<div class="buttons">
<button
size="l"
tuiButton
type="submit"
class=""
>
Submit
</button>
<button
appearance="flat"
size="l"
tuiButton
type="button"
class=""
>
Cancel
</button>
</div>
<ng-template
#accountContent
let-account
>
<span class="account">
{{ account.name }}
<span>{{ account.amount | tuiAmount: 'RUB' | async }}</span>
</span>
</ng-template>
</form>
</div>
Loading
Loading