Implement new features

This commit is contained in:
tugcekucukoglu
2024-03-04 19:06:15 +03:00
parent 4c1770dd8c
commit 9f1d6f08e3
7 changed files with 64 additions and 62 deletions

View File

@@ -19,6 +19,5 @@ const onUpload = () => {
<FileUpload mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
</div>
</div>
<Toast />
</div>
</template>

View File

@@ -46,40 +46,40 @@ const searchCountry = (event) => {
<h5>Float Label</h5>
<div class="grid p-fluid mt-3">
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<InputText type="text" id="inputtext" v-model="value1" />
<label for="inputtext">InputText</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></AutoComplete>
<label for="autocomplete">AutoComplete</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<Calendar inputId="calendar" v-model="value3"></Calendar>
<label for="calendar">Calendar</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<Chips inputId="chips" v-model="value4"></Chips>
<label for="chips">Chips</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<InputMask id="inputmask" mask="99/99/9999" v-model="value5"></InputMask>
<label for="inputmask">InputMask</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<InputNumber id="inputnumber" v-model="value6"></InputNumber>
<label for="inputnumber">InputNumber</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<InputGroup>
@@ -93,22 +93,22 @@ const searchCountry = (event) => {
</InputGroup>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
<label for="dropdown">Dropdown</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false"></MultiSelect>
<label for="multiselect">MultiSelect</label>
</span>
</FloatLabel>
</div>
<div class="field col-12 md:col-4">
<span class="p-float-label">
<FloatLabel>
<Textarea inputId="textarea" rows="3" cols="30" v-model="value10"></Textarea>
<label for="textarea">Textarea</label>
</span>
</FloatLabel>
</div>
</div>
</div>

View File

@@ -88,7 +88,7 @@ const searchCountry = (event) => {
<InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText type="text" placeholder="Invalid" class="p-invalid" />
<InputText type="text" placeholder="Invalid" invalid />
</div>
</div>
@@ -109,10 +109,10 @@ const searchCountry = (event) => {
</div>
<h5>Float Label</h5>
<span class="p-float-label">
<FloatLabel>
<InputText id="username" type="text" v-model="floatValue" />
<label for="username">Username</label>
</span>
</FloatLabel>
<h5>Textarea</h5>
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />

View File

@@ -42,23 +42,20 @@ const showError = () => {
<div class="col-12 lg:col-6">
<div class="card">
<h5>Toast</h5>
<Toast />
<Button @click="showSuccess()" label="Success" class="p-button-success mr-2" />
<Button @click="showInfo()" label="Info" class="p-button-info mr-2" />
<Button @click="showWarn()" label="Warn" class="p-button-warning mr-2" />
<Button @click="showError()" label="Error" class="p-button-danger mr-2" />
<Button @click="showSuccess()" label="Success" class="mr-2" severity="success" />
<Button @click="showInfo()" label="Info" class="mr-2" severity="info" />
<Button @click="showWarn()" label="Warn" class="mr-2" severity="warning" />
<Button @click="showError()" label="Error" class="mr-2" severity="danger" />
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h5>Messages</h5>
<Button label="Success" @click="addMessage('success')" class="p-button-success mr-2" />
<Button label="Info" @click="addMessage('info')" class="p-button-info mr-2" />
<Button label="Warn" @click="addMessage('warn')" class="p-button-warning mr-2" />
<Button label="Error" @click="addMessage('error')" class="p-button-danger mr-2" />
<Button label="Success" @click="addMessage('success')" class="mr-2" severity="success" />
<Button label="Info" @click="addMessage('info')" class="mr-2" severity="info" />
<Button label="Warn" @click="addMessage('warn')" class="mr-2" severity="warning" />
<Button label="Error" @click="addMessage('error')" class="mr-2" severity="danger" />
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
@@ -72,14 +69,14 @@ const showError = () => {
<div class="field grid">
<label for="username1" class="col-fixed w-9rem">Username</label>
<div class="col">
<InputText id="username1" v-model="username" :required="true" class="p-invalid mr-2"></InputText>
<InputText id="username1" v-model="username" :required="true" invalid class="mr-2"></InputText>
<InlineMessage>Username is required</InlineMessage>
</div>
</div>
<div class="field grid">
<label for="email" class="col-fixed w-9rem">Email</label>
<div class="col">
<InputText id="email" v-model="email" :required="true" class="p-invalid mr-2"></InputText>
<InputText id="email" v-model="email" :required="true" invalid class="mr-2"></InputText>
<InlineMessage />
</div>
</div>

View File

@@ -179,7 +179,6 @@ const confirm = (event) => {
<div class="card">
<h5>ConfirmPopup</h5>
<ConfirmPopup></ConfirmPopup>
<Toast />
<Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
</div>
</div>