Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use new Fluid component

Browse Source
This commit is contained in:
tugcekucukoglu
2024-07-26 16:07:48 +03:00
parent 8e983a455a
commit 34a4d4a98d
4 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/uikit/ChartDoc.vue
View File

@@ -233,7 +233,7 @@ watch(
</script>
<template>
<div class="grid grid-cols-12 gap-4 p-fluid">
<Fluid class="grid grid-cols-12 gap-4">
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Linear Chart</h5>
@@ -270,5 +270,5 @@ watch(
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
</div>
</div>
</div>
</Fluid>
</template>

20
src/views/uikit/FloatLabelDoc.vue
View File

@@ -42,26 +42,26 @@ const searchCountry = (event) => {
</script>
<template>
<div class="card">
<Fluid class="card">
<h5>Float Label</h5>
<div class="flex flex-col md:flex-row gap-6">
<FloatLabel class="md:w-1/3">
<InputText type="text" id="inputtext" v-model="value1" fluid />
<InputText type="text" id="inputtext" v-model="value1" />
<label for="inputtext">InputText</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" fluid inputClass="w-full" />
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" inputClass="w-full" />
<label for="autocomplete">AutoComplete</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<DatePicker inputId="calendar" v-model="value3" fluid />
<DatePicker inputId="calendar" v-model="value3" />
<label for="calendar">DatePicker</label>
</FloatLabel>
</div>
<div class="flex flex-col md:flex-row gap-6 mt-6">
<FloatLabel class="md:w-1/3">
<AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" fluid />
<AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" />
<label for="chips">Chips</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
@@ -69,7 +69,7 @@ const searchCountry = (event) => {
<label for="inputmask">InputMask</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<InputNumber id="inputnumber" v-model="value6" fluid />
<InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label>
</FloatLabel>
</div>
@@ -80,7 +80,7 @@ const searchCountry = (event) => {
<i class="pi pi-user"></i>
</InputGroupAddon>
<FloatLabel>
<InputText type="text" id="inputgroup" v-model="value7" fluid />
<InputText type="text" id="inputgroup" v-model="value7" />
<label for="inputgroup">InputGroup</label>
</FloatLabel>
</InputGroup>
@@ -89,16 +89,16 @@ const searchCountry = (event) => {
<label for="dropdown">Select</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" fluid />
<MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" />
<label for="multiselect">MultiSelect</label>
</FloatLabel>
</div>
<div class="flex flex-col md:flex-row gap-6 mt-6">
<FloatLabel class="md:w-1/3">
<Textarea inputId="textarea" rows="3" cols="30" v-model="value10" fluid />
<Textarea inputId="textarea" rows="3" cols="30" v-model="value10" />
<label for="textarea">Textarea</label>
</FloatLabel>
</div>
</div>
</Fluid>
</template>

46
src/views/uikit/InputDoc.vue
View File

@@ -77,51 +77,51 @@ const searchCountry = (event) => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-6">
<Fluid class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<h5>InputText</h5>
<div class="flex flex-col md:flex-row gap-4">
<InputText type="text" placeholder="Default" fluid />
<InputText type="text" placeholder="Disabled" :disabled="true" fluid />
<InputText type="text" placeholder="Invalid" invalid fluid />
<InputText type="text" placeholder="Default" />
<InputText type="text" placeholder="Disabled" :disabled="true" />
<InputText type="text" placeholder="Invalid" invalid />
</div>
<h5 class="mt-6">Icons</h5>
<IconField>
<InputIcon class="pi pi-user" />
<InputText type="text" placeholder="Username" fluid />
<InputText type="text" placeholder="Username" />
</IconField>
<IconField iconPosition="left">
<InputText type="text" placeholder="Search" fluid />
<InputText type="text" placeholder="Search" />
<InputIcon class="pi pi-search" />
</IconField>
<h5 class="mt-6">Float Label</h5>
<FloatLabel>
<InputText id="username" type="text" v-model="floatValue" fluid />
<InputText id="username" type="text" v-model="floatValue" />
<label for="username">Username</label>
</FloatLabel>
<h5 class="mt-6">Textarea</h5>
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" fluid />
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
<h5 class="mt-6">AutoComplete</h5>
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" fluid />
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<h5 class="mt-6">DatePicker</h5>
<DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue" fluid></DatePicker>
<DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker>
<h5 class="mt-6">Spinner</h5>
<InputNumber v-model="inputNumberValue" showButtons mode="decimal" fluid></InputNumber>
<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
<h5 class="mt-6">Chips</h5>
<AutoComplete v-model="chipsValue" :typeahead="false" multiple fluid />
<AutoComplete v-model="chipsValue" :typeahead="false" multiple />
</div>
<div class="card flex flex-col gap-4">
<h5>Slider</h5>
<InputText v-model.number="sliderValue" fluid />
<InputText v-model.number="sliderValue" />
<Slider v-model="sliderValue" />
<div class="flex flex-row mt-6">
@@ -182,10 +182,10 @@ const searchCountry = (event) => {
<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
<h5 class="mt-6">Select</h5>
<Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" fluid />
<Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
<h5 class="mt-6">MultiSelect</h5>
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true" fluid>
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true">
<template #value="slotProps">
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2" v-for="option of slotProps.value" :key="option.code">
<span :class="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px; height: 12px" />
@@ -204,7 +204,7 @@ const searchCountry = (event) => {
</MultiSelect>
<h5 class="mt-6">TreeSelect</h5>
<TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item" fluid></TreeSelect>
<TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
</div>
<div class="card flex flex-col gap-4">
@@ -218,9 +218,9 @@ const searchCountry = (event) => {
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
</div>
</div>
</div>
</Fluid>
<div class="flex mt-6">
<Fluid class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<h5>Input Groups</h5>
<div class="flex flex-col md:flex-row gap-4">
@@ -228,7 +228,7 @@ const searchCountry = (event) => {
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<InputText placeholder="Username" fluid />
<InputText placeholder="Username" />
</InputGroup>
<InputGroup>
<InputGroupAddon>
@@ -237,7 +237,7 @@ const searchCountry = (event) => {
<InputGroupAddon>
<i class="pi pi-star-fill"></i>
</InputGroupAddon>
<InputNumber placeholder="Price" fluid />
<InputNumber placeholder="Price" />
<InputGroupAddon>$</InputGroupAddon>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
@@ -245,15 +245,15 @@ const searchCountry = (event) => {
<div class="flex flex-col md:flex-row gap-4">
<InputGroup>
<Button label="Search" />
<InputText placeholder="Keyword" fluid />
<InputText placeholder="Keyword" />
</InputGroup>
<InputGroup>
<InputGroupAddon>
<Checkbox v-model="inputGroupValue" :binary="true" />
</InputGroupAddon>
<InputText placeholder="Confirm" fluid />
<InputText placeholder="Confirm" />
</InputGroup>
</div>
</div>
</div>
</Fluid>
</template>

22
src/views/uikit/InvalidStateDoc.vue
View File

@@ -43,13 +43,13 @@ const searchCountry = (event) => {
</script>
<template>
<div class="card">
<Fluid class="card">
<h5>Invalid State</h5>
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<div class="flex flex-col gap-2">
<label for="inputtext">InputText</label>
<InputText id="inputtext" type="text" v-model="value1" invalid fluid />
<InputText id="inputtext" type="text" v-model="value1" invalid />
</div>
<div class="flex flex-col gap-2">
<label for="autocomplete">AutoComplete</label>
@@ -57,38 +57,38 @@ const searchCountry = (event) => {
</div>
<div class="flex flex-col gap-2">
<label for="calendar">DatePicker</label>
<DatePicker id="calendar" v-model="value3" invalid :showIcon="true" fluid />
<DatePicker id="calendar" v-model="value3" invalid :showIcon="true" />
</div>
<div class="flex flex-col gap-2">
<label for="chips">Chips</label>
<AutoComplete id="chips" v-model="value4" invalid fluid multiple :typeahead="false" />
<AutoComplete id="chips" v-model="value4" invalid multiple :typeahead="false" />
</div>
<div class="flex flex-col gap-2">
<label for="password">Password</label>
<Password id="password" v-model="value10" invalid fluid />
<Password id="password" v-model="value10" invalid />
</div>
</div>
<div class="md:w-1/2">
<div class="flex flex-col gap-2">
<label for="inputmask">InputMask</label>
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid fluid />
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
</div>
<div class="flex flex-col gap-2">
<label for="inputnumber">InputNumber</label>
<InputNumber id="inputnumber" v-model="value6" invalid fluid />
<InputNumber id="inputnumber" v-model="value6" invalid />
</div>
<div class="flex flex-col gap-2"></div>
<label for="dropdown">Select</label>
<Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid fluid />
<Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
<div class="flex flex-col gap-2">
<label for="multiselect">MultiSelect</label>
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid fluid />
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
</div>
<div class="flex flex-col gap-2">
<label for="textarea">Textarea</label>
<Textarea id="textarea" v-model="value9" rows="3" invalid fluid />
<Textarea id="textarea" v-model="value9" rows="3" invalid />
</div>
</div>
</div>
</div>
</Fluid>
</template>