Add inputdoc
This commit is contained in:
Çetin
337
src/views/uikit/inputdoc.ts
Normal file
337
src/views/uikit/inputdoc.ts
Normal file
@@ -0,0 +1,337 @@
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import {InputTextModule} from "primeng/inputtext";
|
||||
import {ButtonModule} from "primeng/button";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {CheckboxModule} from "primeng/checkbox";
|
||||
import {RadioButtonModule} from "primeng/radiobutton";
|
||||
import {SelectButtonModule} from "primeng/selectbutton";
|
||||
import {InputGroupModule} from "primeng/inputgroup";
|
||||
import {FluidModule} from "primeng/fluid";
|
||||
import {IconFieldModule} from "primeng/iconfield";
|
||||
import {InputIconModule} from "primeng/inputicon";
|
||||
import {FloatLabelModule} from "primeng/floatlabel";
|
||||
import {AutoCompleteModule} from "primeng/autocomplete";
|
||||
import {InputNumberModule} from "primeng/inputnumber";
|
||||
import {SliderModule} from "primeng/slider";
|
||||
import {RatingModule} from "primeng/rating";
|
||||
import {ColorPickerModule} from "primeng/colorpicker";
|
||||
import {KnobModule} from "primeng/knob";
|
||||
import {SelectModule} from "primeng/select";
|
||||
import {DatePickerModule} from "primeng/datepicker";
|
||||
import {ToggleSwitchModule} from "primeng/toggleswitch";
|
||||
import {TreeSelectModule} from "primeng/treeselect";
|
||||
import {MultiSelectModule} from "primeng/multiselect";
|
||||
import {ListboxModule} from "primeng/listbox";
|
||||
import {InputGroupAddonModule} from "primeng/inputgroupaddon";
|
||||
import {TextareaModule} from "primeng/textarea";
|
||||
import {CountryService} from "../../app/demo/service/country.service";
|
||||
import {NodeService} from "../../app/demo/service/node.service";
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
InputTextModule,
|
||||
ButtonModule,
|
||||
CheckboxModule,
|
||||
RadioButtonModule,
|
||||
SelectButtonModule,
|
||||
InputGroupModule,
|
||||
FluidModule,
|
||||
IconFieldModule,
|
||||
InputIconModule,
|
||||
FloatLabelModule,
|
||||
AutoCompleteModule,
|
||||
InputNumberModule,
|
||||
SliderModule,
|
||||
RatingModule,
|
||||
ColorPickerModule,
|
||||
KnobModule,
|
||||
SelectModule,
|
||||
DatePickerModule,
|
||||
ToggleSwitchModule,
|
||||
TreeSelectModule,
|
||||
MultiSelectModule,
|
||||
ListboxModule,
|
||||
InputGroupAddonModule,
|
||||
TextareaModule
|
||||
],
|
||||
template: `
|
||||
<p-fluid class="flex flex-col md:flex-row gap-8">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">InputText</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<input pInputText type="text" placeholder="Default"/>
|
||||
<input pInputText type="text" placeholder="Disabled" [disabled]="true"/>
|
||||
<input pInputText type="text" placeholder="Invalid" class="ng-dirty ng-invalid"/>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-xl">Icons</div>
|
||||
<p-iconfield>
|
||||
<p-inputicon class="pi pi-user"/>
|
||||
<input pInputText type="text" placeholder="Username"/>
|
||||
</p-iconfield>
|
||||
<p-iconfield iconPosition="left">
|
||||
<input pInputText type="text" placeholder="Search"/>
|
||||
<p-inputicon class="pi pi-search"/>
|
||||
</p-iconfield>
|
||||
|
||||
<div class="font-semibold text-xl">Float Label</div>
|
||||
<p-floatlabel>
|
||||
<input pInputText id="username" type="text" [(ngModel)]="floatValue"/>
|
||||
<label for="username">Username</label>
|
||||
</p-floatlabel>
|
||||
|
||||
<div class="font-semibold text-xl">Textarea</div>
|
||||
<textarea pTextarea placeholder="Your Message" [autoResize]="true" rows="3" cols="30"></textarea>
|
||||
|
||||
<div class="font-semibold text-xl">AutoComplete</div>
|
||||
<p-autocomplete [(ngModel)]="selectedAutoValue" [suggestions]="autoFilteredValue" optionLabel="name"
|
||||
placeholder="Search" dropdown multiple display="chip"
|
||||
(completeMethod)="searchCountry($event)"/>
|
||||
|
||||
<div class="font-semibold text-xl">DatePicker</div>
|
||||
<p-datepicker [showIcon]="true" [showButtonBar]="true" [(ngModel)]="calendarValue"></p-datepicker>
|
||||
|
||||
<div class="font-semibold text-xl">InputNumber</div>
|
||||
<p-inputnumber [(ngModel)]="inputNumberValue" showButtons mode="decimal"></p-inputnumber>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Slider</div>
|
||||
<input pInputText [(ngModel)]="sliderValue" type="number"/>
|
||||
<p-slider [(ngModel)]="sliderValue"/>
|
||||
|
||||
<div class="flex flex-row mt-6">
|
||||
<div class="flex flex-col gap-4 w-1/2">
|
||||
<div class="font-semibold text-xl">Rating</div>
|
||||
<p-rating [(ngModel)]="ratingValue"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 w-1/2">
|
||||
<div class="font-semibold text-xl">ColorPicker</div>
|
||||
<p-colorpicker [style]="{width: '2rem'}" [(ngModel)]="colorValue"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-xl">Knob</div>
|
||||
<p-knob [(ngModel)]="knobValue" [step]="10" [min]="-50" [max]="50" valueTemplate="{value}%"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">RadioButton</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex items-center">
|
||||
<p-radiobutton id="option1" name="option" value="Chicago" [(ngModel)]="radioValue"/>
|
||||
<label for="option1" class="leading-none ml-2">Chicago</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-radiobutton id="option2" name="option" value="Los Angeles" [(ngModel)]="radioValue"/>
|
||||
<label for="option2" class="leading-none ml-2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-radiobutton id="option3" name="option" value="New York" [(ngModel)]="radioValue"/>
|
||||
<label for="option3" class="leading-none ml-2">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-xl">Checkbox</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex items-center">
|
||||
<p-checkbox id="checkOption1" name="option" value="Chicago" [(ngModel)]="checkboxValue"/>
|
||||
<label for="checkOption1" class="ml-2">Chicago</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-checkbox id="checkOption2" name="option" value="Los Angeles"
|
||||
[(ngModel)]="checkboxValue"/>
|
||||
<label for="checkOption2" class="ml-2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p-checkbox id="checkOption3" name="option" value="New York" [(ngModel)]="checkboxValue"/>
|
||||
<label for="checkOption3" class="ml-2">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-semibold text-xl">ToggleSwitch</div>
|
||||
<p-toggleswitch [(ngModel)]="switchValue"/>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">Listbox</div>
|
||||
<p-listbox [(ngModel)]="listboxValue" [options]="listboxValues" optionLabel="name" [filter]="true"/>
|
||||
|
||||
<div class="font-semibold text-xl">Select</div>
|
||||
<p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name"
|
||||
placeholder="Select"/>
|
||||
|
||||
<div class="font-semibold text-xl">MultiSelect</div>
|
||||
<p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true">
|
||||
<template #selecteditems let-countries>
|
||||
@for (country of countries; track country.code) {
|
||||
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2">
|
||||
<span [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width: 18px; height: 12px"></span>
|
||||
<div>{{ country.name }}</div>
|
||||
</div>
|
||||
}
|
||||
</template>
|
||||
<template #item let-country>
|
||||
<div class="flex items-center">
|
||||
<span [class]="'mr-2 flag flag-' + country.option.code.toLowerCase()" style="width: 18px; height: 12px"></span>
|
||||
<div>{{ country.option.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-multiselect>
|
||||
|
||||
<div class="font-semibold text-xl">TreeSelect</div>
|
||||
<p-treeselect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeselect>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-4">
|
||||
<div class="font-semibold text-xl">ToggleButton</div>
|
||||
<p-togglebutton [(ngModel)]="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }"/>
|
||||
|
||||
<div class="font-semibold text-xl">SelectButton</div>
|
||||
<p-selectbutton [(ngModel)]="selectButtonValue" [options]="selectButtonValues" optionLabel="name"/>
|
||||
</div>
|
||||
</div>
|
||||
</p-fluid>
|
||||
|
||||
<p-fluid class="flex mt-8">
|
||||
<div class="card flex flex-col gap-4 w-full">
|
||||
<div class="font-semibold text-xl">InputGroup</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<p-inputgroup>
|
||||
<p-inputgroup-addon>
|
||||
<i class="pi pi-user"></i>
|
||||
</p-inputgroup-addon>
|
||||
<input pInputText placeholder="Username"/>
|
||||
</p-inputgroup>
|
||||
<p-inputgroup>
|
||||
<p-inputgroup-addon>
|
||||
<i class="pi pi-clock"></i>
|
||||
</p-inputgroup-addon>
|
||||
<p-inputgroup-addon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</p-inputgroup-addon>
|
||||
<p-inputnumber placeholder="Price"/>
|
||||
<p-inputgroup-addon>$</p-inputgroup-addon>
|
||||
<p-inputgroup-addon>.00</p-inputgroup-addon>
|
||||
</p-inputgroup>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<p-inputgroup>
|
||||
<p-button label="Search"/>
|
||||
<input pInputText placeholder="Keyword"/>
|
||||
</p-inputgroup>
|
||||
<p-inputgroup>
|
||||
<p-inputgroup-addon>
|
||||
<p-checkbox [(ngModel)]="inputGroupValue" [binary]="true"/>
|
||||
</p-inputgroup-addon>
|
||||
<input pInputText placeholder="Confirm"/>
|
||||
</p-inputgroup>
|
||||
</div>
|
||||
</div>
|
||||
</p-fluid>`
|
||||
})
|
||||
export class InputDoc implements OnInit {
|
||||
floatValue: any = null;
|
||||
|
||||
autoValue: any = null;
|
||||
|
||||
selectedAutoValue: any = null;
|
||||
|
||||
autoFilteredValue: any[] = [];
|
||||
|
||||
calendarValue: any = null;
|
||||
|
||||
inputNumberValue: any = null;
|
||||
|
||||
sliderValue: number = 50;
|
||||
|
||||
ratingValue: any = null;
|
||||
|
||||
colorValue: string = '#1976D2';
|
||||
|
||||
radioValue: any = null;
|
||||
|
||||
checkboxValue: any[] = [];
|
||||
|
||||
switchValue: boolean = false;
|
||||
|
||||
listboxValues: any[] = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
|
||||
listboxValue: any = null;
|
||||
|
||||
dropdownValues = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
|
||||
dropdownValue: any = null;
|
||||
|
||||
multiselectValues = [
|
||||
{ name: 'Australia', code: 'AU' },
|
||||
{ name: 'Brazil', code: 'BR' },
|
||||
{ name: 'China', code: 'CN' },
|
||||
{ name: 'Egypt', code: 'EG' },
|
||||
{ name: 'France', code: 'FR' },
|
||||
{ name: 'Germany', code: 'DE' },
|
||||
{ name: 'India', code: 'IN' },
|
||||
{ name: 'Japan', code: 'JP' },
|
||||
{ name: 'Spain', code: 'ES' },
|
||||
{ name: 'United States', code: 'US' }
|
||||
];
|
||||
|
||||
multiselectValue: any = null;
|
||||
|
||||
toggleValue: boolean = false;
|
||||
|
||||
selectButtonValue: any = null
|
||||
|
||||
selectButtonValues: any = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }];
|
||||
|
||||
knobValue: number = 50;
|
||||
|
||||
inputGroupValue: boolean = false;
|
||||
|
||||
treeSelectNodes: any[] = null;
|
||||
|
||||
selectedNode: any = null;
|
||||
|
||||
countryService = inject(CountryService);
|
||||
|
||||
nodeService = inject(NodeService);
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.autoValue = countries;
|
||||
});
|
||||
|
||||
this.nodeService.getFiles().then((data) => (this.treeSelectNodes = data));
|
||||
}
|
||||
|
||||
searchCountry(event: any) {
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.autoFilteredValue.length; i++) {
|
||||
const country = this.autoFilteredValue[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.autoFilteredValue = filtered;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user