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

Migrated to new design tokens of v4

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-25 17:37:08 +03:00
parent a7bec8d7a5
commit cafcd0449e
51 changed files with 1084 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/uikit/Button.vue
View File

@@ -28,8 +28,8 @@ const load = (index) => {
</script>
<template>
<div class="grid">
<div class="col-12 md:col-6">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>Default</h5>
<Button label="Submit" class="mr-2 mb-2"></Button>
@@ -108,7 +108,7 @@ const load = (index) => {
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>Icons</h5>
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>

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

@@ -233,39 +233,39 @@ watch(
</script>
<template>
<div class="grid p-fluid">
<div class="col-12 xl:col-6">
<div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Linear Chart</h5>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Bar Chart</h5>
<Chart type="bar" :data="barData" :options="barOptions"></Chart>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card flex flex-column align-items-center">
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Pie Chart</h5>
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card flex flex-column align-items-center">
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Doughnut Chart</h5>
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card flex flex-column align-items-center">
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Polar Area Chart</h5>
<Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card flex flex-column align-items-center">
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<h5 class="text-left w-full">Radar Chart</h5>
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
</div>

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

@@ -9,8 +9,8 @@ const onUpload = () => {
</script>
<template>
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<h5>Advanced</h5>
<FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />

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

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

36
src/views/uikit/FormLayout.vue
View File

@@ -11,8 +11,8 @@ const dropdownItem = ref(null);
</script>
<template>
<div class="grid">
<div class="col-12 md:col-6">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6">
<div class="card p-fluid">
<h5>Vertical</h5>
<div class="field">
@@ -31,7 +31,7 @@ const dropdownItem = ref(null);
<div class="card p-fluid">
<h5>Vertical Grid</h5>
<div class="formgrid grid">
<div class="formgrid grid grid-cols-12 gap-4">
<div class="field col">
<label for="name2">Name</label>
<InputText id="name2" type="text" />
@@ -44,18 +44,18 @@ const dropdownItem = ref(null);
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card p-fluid">
<h5>Horizontal</h5>
<div class="field grid">
<label for="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
<div class="col-12 md:col-10">
<div class="field grid grid-cols-12 gap-4">
<label for="name3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
<div class="col-span-12 md:col-span-10">
<InputText id="name3" type="text" />
</div>
</div>
<div class="field grid">
<label for="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
<div class="col-12 md:col-10">
<div class="field grid grid-cols-12 gap-4">
<label for="email3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
<div class="col-span-12 md:col-span-10">
<InputText id="email3" type="text" />
</div>
</div>
@@ -86,31 +86,31 @@ const dropdownItem = ref(null);
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Advanced</h5>
<div class="p-fluid formgrid grid">
<div class="field col-12 md:col-6">
<div class="p-fluid formgrid grid grid-cols-12 gap-4">
<div class="field col-span-12 md:col-span-6">
<label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" />
</div>
<div class="field col-12 md:col-6">
<div class="field col-span-12 md:col-span-6">
<label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" />
</div>
<div class="field col-12">
<div class="field col-span-12">
<label for="address">Address</label>
<Textarea id="address" rows="4" />
</div>
<div class="field col-12 md:col-6">
<div class="field col-span-12 md:col-span-6">
<label for="city">City</label>
<InputText id="city" type="text" />
</div>
<div class="field col-12 md:col-3">
<div class="field col-span-12 md:col-span-3">
<label for="state">State</label>
<Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown>
</div>
<div class="field col-12 md:col-3">
<div class="field col-span-12 md:col-span-3">
<label for="zip">Zip</label>
<InputText id="zip" type="text" />
</div>

84
src/views/uikit/Input.vue
View File

@@ -76,31 +76,31 @@ const searchCountry = (event) => {
};
</script>
<template>
<div class="grid p-fluid">
<div class="col-12 md:col-6">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>InputText</h5>
<div class="grid formgrid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText type="text" placeholder="Default"></InputText>
<div class="grid grid-cols-12 gap-4 formgrid">
<div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
<InputText type="text" placeholder="Default" fluid></InputText>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
<div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
<InputText type="text" placeholder="Disabled" :disabled="true" fluid></InputText>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText type="text" placeholder="Invalid" invalid />
<div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
<InputText type="text" placeholder="Invalid" invalid fluid />
</div>
</div>
<h5>Icons</h5>
<div class="grid formgrid">
<div class="col-12 mb-2 lg:col-6 lg:mb-0">
<div class="grid grid-cols-12 gap-4 formgrid">
<div class="col-span-12 mb-2 lg:col-span-6 lg:mb-0">
<IconField>
<InputIcon class="pi pi-user" />
<InputText type="text" placeholder="Username" />
</IconField>
</div>
<div class="col-12 mb-2 lg:col-6 lg:mb-0">
<div class="col-span-12 mb-2 lg:col-span-6 lg:mb-0">
<IconField iconPosition="left">
<InputText type="text" placeholder="Search" />
<InputIcon class="pi pi-search" />
@@ -118,7 +118,8 @@ const searchCountry = (event) => {
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
<h5>AutoComplete</h5>
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue"
:suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<h5>Calendar</h5>
<Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
@@ -131,21 +132,21 @@ const searchCountry = (event) => {
</div>
<div class="card">
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<h5>Slider</h5>
<InputText v-model.number="sliderValue" />
<Slider v-model="sliderValue" />
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<h5>Rating</h5>
<Rating v-model="ratingValue" />
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<h5>ColorPicker</h5>
<ColorPicker style="width: 2rem" v-model="colorValue" />
</div>
<div class="col-12">
<div class="col-span-12">
<h5>Knob</h5>
<Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
</div>
@@ -153,23 +154,23 @@ const searchCountry = (event) => {
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>RadioButton</h5>
<div class="grid">
<div class="col-12 md:col-4">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-4">
<div class="field-radiobutton mb-0">
<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
<label for="option1">Chicago</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-span-12 md:col-span-4">
<div class="field-radiobutton mb-0">
<RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
<label for="option2">Los Angeles</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-span-12 md:col-span-4">
<div class="field-radiobutton mb-0">
<RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
<label for="option3">New York</label>
@@ -178,20 +179,20 @@ const searchCountry = (event) => {
</div>
<h5>Checkbox</h5>
<div class="grid">
<div class="col-12 md:col-4">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-4">
<div class="field-checkbox mb-0">
<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
<label for="checkOption1">Chicago</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-span-12 md:col-span-4">
<div class="field-checkbox mb-0">
<Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
<label for="checkOption2">Los Angeles</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-span-12 md:col-span-4">
<div class="field-checkbox mb-0">
<Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
<label for="checkOption3">New York</label>
@@ -211,10 +212,13 @@ const searchCountry = (event) => {
<Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
<h5>MultiSelect</h5>
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true">
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name"
placeholder="Select Countries" :filter="true">
<template #value="slotProps">
<div class="inline-flex align-items-center py-1 px-2 bg-primary text-primary border-round 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" />
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast text-primary 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" />
<div>{{ option.name }}</div>
</div>
<template v-if="!slotProps.value || slotProps.value.length === 0">
@@ -222,8 +226,9 @@ const searchCountry = (event) => {
</template>
</template>
<template #option="slotProps">
<div class="flex align-items-center">
<span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()" style="width: 18px; height: 12px" />
<div class="flex items-center">
<span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()"
style="width: 18px; height: 12px" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>
@@ -241,15 +246,16 @@ const searchCountry = (event) => {
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
<h5>SelectButton - Multiple</h5>
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name"
:multiple="true" />
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Input Groups</h5>
<div class="grid p-fluid">
<div class="col-12 md:col-6">
<div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col-span-12 md:col-span-6">
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
@@ -258,7 +264,7 @@ const searchCountry = (event) => {
</InputGroup>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<InputGroup>
<InputGroupAddon>
<i class="pi pi-clock"></i>
@@ -272,14 +278,14 @@ const searchCountry = (event) => {
</InputGroup>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<InputGroup>
<Button label="Search" />
<InputText placeholder="Keyword" />
</InputGroup>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<InputGroup>
<InputGroupAddon>
<Checkbox v-model="inputGroupValue" :binary="true" />

8
src/views/uikit/InvalidState.vue
View File

@@ -43,12 +43,12 @@ const searchCountry = (event) => {
</script>
<template>
<div class="grid p-fluid">
<div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col">
<div class="card">
<h5>Invalid State</h5>
<div class="p-fluid grid">
<div class="col-12 md:col-6">
<div class="p-fluid grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6">
<div class="field">
<label for="inputtext">InputText</label>
<InputText id="inputtext" type="text" v-model="value1" invalid />
@@ -71,7 +71,7 @@ const searchCountry = (event) => {
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="field">
<label for="inputmask">InputMask</label>
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />

72
src/views/uikit/List.vue
View File

@@ -26,7 +26,7 @@ const orderlistValue = ref([
]);
const dataviewValue = ref(null);
const layout = ref('grid');
const layout = ref('grid grid-cols-12 gap-4');
const sortKey = ref(null);
const sortOrder = ref(null);
const sortField = ref(null);
@@ -74,48 +74,48 @@ const getSeverity = (product) => {
</script>
<template>
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<h5>DataView</h5>
<DataView :value="dataviewValue" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
<template #header>
<div class="grid grid-nogutter">
<div class="col-6 text-left">
<div class="grid grid-cols-12 gap-4 grid-nogutter">
<div class="col-span-6 text-left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
</div>
<div class="col-6 text-right">
<div class="col-span-6 text-right">
<DataViewLayoutOptions v-model="layout" />
</div>
</div>
</template>
<template #list="slotProps">
<div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-10rem relative">
<img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<div class="grid grid-cols-12 gap-4 grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
<div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded-border w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div>
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div>
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
<div class="text-lg font-medium text-surface-900 dark:text-surface-0 mt-2">{{ item.name }}</div>
</div>
<div class="surface-100 p-1" style="border-radius: 30px">
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
<div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
<div class="bg-surface-0 dark:bg-surface-900 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<span class="text-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
<i class="pi pi-star-fill text-yellow-500"></i>
</div>
</div>
</div>
<div class="flex flex-column md:align-items-end gap-5">
<span class="text-xl font-semibold text-900">${{ item.price }}</span>
<div class="flex flex-col md:items-end gap-8">
<span class="text-xl font-semibold text-surface-900 dark:text-surface-0">${{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2">
<Button icon="pi pi-heart" outlined></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
</div>
</div>
</div>
@@ -125,32 +125,32 @@ const getSeverity = (product) => {
</template>
<template #grid="slotProps">
<div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 p-2">
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
<div class="surface-50 flex justify-content-center border-round p-3">
<div class="grid grid-cols-12 gap-4 grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 p-2">
<div class="p-6 border border-surface bg-surface-0 dark:bg-surface-900 rounded-border flex flex-col">
<div class="bg-surface-50 dark:bg-surface-800 flex justify-center rounded-border p-4">
<div class="relative mx-auto">
<img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
<img class="rounded-border w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
</div>
</div>
<div class="pt-4">
<div class="flex flex-row justify-content-between align-items-start gap-2">
<div class="pt-6">
<div class="flex flex-row justify-between items-start gap-2">
<div>
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
<div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div>
<div class="text-lg font-medium text-surface-900 dark:text-surface-0 mt-1">{{ item.name }}</div>
</div>
<div class="surface-100 p-1" style="border-radius: 30px">
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
<div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
<div class="bg-surface-0 dark:bg-surface-900 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
<span class="text-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
<i class="pi pi-star-fill text-yellow-500"></i>
</div>
</div>
</div>
<div class="flex flex-column gap-4 mt-4">
<span class="text-2xl font-semibold text-900">${{ item.price }}</span>
<div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold text-surface-900 dark:text-surface-0">${{ item.price }}</span>
<div class="flex gap-2">
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button>
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
<Button icon="pi pi-heart" outlined></Button>
</div>
</div>
@@ -163,7 +163,7 @@ const getSeverity = (product) => {
</div>
</div>
<div class="col-12 lg:col-8">
<div class="col-span-12 lg:col-span-8">
<div class="card">
<h5>PickList</h5>
<PickList v-model="picklistValue" listStyle="height:250px" dataKey="code">
@@ -176,7 +176,7 @@ const getSeverity = (product) => {
</div>
</div>
<div class="col-12 lg:col-4">
<div class="col-span-12 lg:col-span-4">
<div class="card">
<h5>OrderList</h5>
<OrderList v-model="orderlistValue" listStyle="height:250px" dataKey="code" :rows="10">

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

@@ -67,21 +67,21 @@ const getSeverity = (status) => {
</script>
<template>
<div class="grid p-fluid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col-span-12">
<div class="card">
<h5>Carousel</h5>
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 p-3">
<div class="mb-3">
<div class="border border-surface rounded-border m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded-border" />
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
</div>
</div>
<div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-content-between align-items-center">
<div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
<span>
<Button icon="pi pi-heart" severity="secondary" outlined />
@@ -94,16 +94,16 @@ const getSeverity = (status) => {
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Image</h5>
<div class="flex justify-content-center">
<div class="flex justify-center">
<Image :src="'/demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
</div>
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Galleria</h5>
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7"

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

@@ -440,8 +440,8 @@ const onContextRightClick = (event) => {
</script>
<template>
<div class="grid p-fluid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4 p-fluid">
<div class="col-span-12">
<div class="card card-w-title">
<h5>Menubar</h5>
<Menubar :model="nestedMenuitems">
@@ -455,14 +455,14 @@ const onContextRightClick = (event) => {
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card card-w-title">
<h5>Breadcrumb</h5>
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card card-w-title">
<h5>Steps</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p>
@@ -471,7 +471,7 @@ const onContextRightClick = (event) => {
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card card-w-title">
<h5>TabMenu</h5>
<p>Steps and TabMenu are integrated with the same child routes.</p>
@@ -480,21 +480,21 @@ const onContextRightClick = (event) => {
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-span-12 md:col-span-4">
<div class="card">
<h5>Tiered Menu</h5>
<TieredMenu :model="tieredMenuItems" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-span-12 md:col-span-4">
<div class="card">
<h5>Plain Menu</h5>
<Menu :model="menuitems" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="col-span-12 md:col-span-4">
<div class="card">
<h5>Overlay Menu</h5>
@@ -509,7 +509,7 @@ const onContextRightClick = (event) => {
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>MegaMenu - Horizontal</h5>
<MegaMenu :model="megamenuItems" />
@@ -519,7 +519,7 @@ const onContextRightClick = (event) => {
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>PanelMenu</h5>
<PanelMenu :model="panelMenuitems" />

18
src/views/uikit/Messages.vue
View File

@@ -38,8 +38,8 @@ const showError = () => {
</script>
<template>
<div class="grid">
<div class="col-12 lg:col-6">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-6">
<div class="card">
<h5>Toast</h5>
<Button @click="showSuccess()" label="Success" class="mr-2" severity="success" />
@@ -49,7 +49,7 @@ const showError = () => {
</div>
</div>
<div class="col-12 lg:col-6">
<div class="col-span-12 lg:col-span-6">
<div class="card">
<h5>Messages</h5>
<Button label="Success" @click="addMessage('success')" class="mr-2" severity="success" />
@@ -63,18 +63,18 @@ const showError = () => {
</div>
</div>
<div class="col-12 lg:col-8">
<div class="col-span-12 lg:col-span-8">
<div class="card">
<h5>Inline</h5>
<div class="field grid">
<label for="username1" class="col-fixed w-9rem">Username</label>
<div class="field grid grid-cols-12 gap-4">
<label for="username1" class="col-fixed w-36">Username</label>
<div class="col">
<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="field grid grid-cols-12 gap-4">
<label for="email" class="col-fixed w-36">Email</label>
<div class="col">
<InputText id="email" v-model="email" :required="true" invalid class="mr-2"></InputText>
<InlineMessage />
@@ -83,7 +83,7 @@ const showError = () => {
</div>
</div>
<div class="col-12 lg:col-4">
<div class="col-span-12 lg:col-span-4">
<div class="card">
<h5>Help Text</h5>
<div class="field p-fluid">

28
src/views/uikit/Misc.vue
View File

@@ -28,11 +28,11 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<h5>ProgressBar</h5>
<div class="grid">
<div class="grid grid-cols-12 gap-4">
<div class="col">
<ProgressBar :value="value"></ProgressBar>
</div>
@@ -42,7 +42,7 @@ onBeforeUnmount(() => {
</div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="col-span-12 lg:col-span-6">
<div class="card">
<h4>Badge</h4>
<h5>Numbers</h5>
@@ -55,8 +55,8 @@ onBeforeUnmount(() => {
</div>
<h5>Positioned Badge</h5>
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-bell mr-6 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar mr-6 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Inline Button Badge</h5>
@@ -74,7 +74,7 @@ onBeforeUnmount(() => {
<div class="card">
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<AvatarGroup class="mb-4">
<Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
<Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
<Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
@@ -106,7 +106,7 @@ onBeforeUnmount(() => {
</ScrollPanel>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="col-span-12 lg:col-span-6">
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
@@ -134,7 +134,7 @@ onBeforeUnmount(() => {
<div class="card">
<h4>Chip</h4>
<h5>Basic</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<div class="flex items-center flex-col sm:flex-row">
<Chip label="Action" class="mr-2 mb-2"></Chip>
<Chip label="Comedy" class="mr-2 mb-2"></Chip>
<Chip label="Mystery" class="mr-2 mb-2"></Chip>
@@ -142,7 +142,7 @@ onBeforeUnmount(() => {
</div>
<h5>Icon</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<div class="flex items-center flex-col sm:flex-row">
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
<Chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></Chip>
@@ -150,7 +150,7 @@ onBeforeUnmount(() => {
</div>
<h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<div class="flex items-center flex-col sm:flex-row">
<Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" :image="'/demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
@@ -159,8 +159,8 @@ onBeforeUnmount(() => {
<div class="card">
<h4>Skeleton</h4>
<div class="border-round border-1 surface-border p-4">
<div class="flex mb-3">
<div class="rounded-border border border-surface p-6">
<div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -169,7 +169,7 @@ onBeforeUnmount(() => {
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-content-between mt-3">
<div class="flex justify-between mt-4">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>

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

@@ -74,12 +74,12 @@ const confirm = (event) => {
</script>
<template>
<div class="grid">
<div class="col-12 lg:col-6">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-6">
<div class="card p-fluid">
<h5>Dialog</h5>
<Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
@@ -102,10 +102,10 @@ const confirm = (event) => {
<Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
<OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
<Column field="name" header="Name" :sortable="true" headerStyle="min-width:12rem;"></Column>
<Column field="name" header="Name" :sortable="true" headerStyle="min-width:12rem;"> </Column>
<Column header="Image" headerStyle="min-width:5rem;">
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow-2" />
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
@@ -119,13 +119,13 @@ const confirm = (event) => {
</div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="col-span-12 lg:col-span-6">
<div class="card p-fluid">
<h5>Confirmation</h5>
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" style="width: auto" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<div class="flex items-center justify-center">
<i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
<span>Are you sure you want to proceed?</span>
</div>
<template #footer>
@@ -135,7 +135,7 @@ const confirm = (event) => {
</Dialog>
</div>
<div class="card">
<h5>Sidebar</h5>
<h5 class="font-bold text-xl">Sidebar</h5>
<Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
<h1 style="font-weight: normal">Left Sidebar</h1>
</Sidebar>
@@ -163,7 +163,7 @@ const confirm = (event) => {
<Button icon="pi pi-external-link" class="p-button-warning" @click="visibleFull = true" />
</div>
</div>
<div class="col-12 lg:col-6">
<div class="col-span-12 lg:col-span-6">
<div class="card">
<h5>Tooltip</h5>
<div class="formgroup-inline">
@@ -175,7 +175,7 @@ const confirm = (event) => {
</div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="col-span-12 lg:col-span-6">
<div class="card">
<h5>ConfirmPopup</h5>
<ConfirmPopup></ConfirmPopup>

54
src/views/uikit/Panels.vue
View File

@@ -32,8 +32,8 @@ const toggle = () => {
</script>
<template>
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<h5>Toolbar</h5>
<Toolbar>
@@ -53,25 +53,25 @@ const toggle = () => {
</Toolbar>
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>AccordionPanel</h5>
<Accordion :activeIndex="0">
<AccordionTab header="Header I">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</AccordionTab>
<AccordionTab header="Header II">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</AccordionTab>
<AccordionTab header="Header III">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
@@ -82,20 +82,20 @@ const toggle = () => {
<h5>TabView</h5>
<TabView>
<TabPanel header="Header I">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p></TabPanel
>
<TabPanel header="Header II">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</TabPanel>
<TabPanel header="Header III">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
@@ -103,11 +103,11 @@ const toggle = () => {
</TabView>
</div>
</div>
<div class="col-12 md:col-6">
<div class="col-span-12 md:col-span-6">
<div class="card">
<h5>Panel</h5>
<Panel header="Header" :toggleable="true">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
@@ -116,7 +116,7 @@ const toggle = () => {
<div class="card">
<h5>Fieldset</h5>
<Fieldset legend="Legend" :toggleable="true">
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
@@ -125,7 +125,7 @@ const toggle = () => {
<Card>
<template v-slot:title>
<div class="flex align-items-center justify-content-between mb-0">
<div class="flex items-center justify-between mb-0">
<h5>Card</h5>
<Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
</div>
@@ -133,7 +133,7 @@ const toggle = () => {
</template>
<template v-slot:content>
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
@@ -141,11 +141,11 @@ const toggle = () => {
</Card>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Divider</h5>
<div class="grid">
<div class="col-5 flex align-items-center justify-content-center">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-5 flex items-center justify-center">
<div class="p-fluid">
<div class="field">
<label for="username">Username</label>
@@ -159,13 +159,13 @@ const toggle = () => {
</div>
</div>
<div class="col-2">
<div class="col-span-2">
<Divider layout="vertical">
<b>OR</b>
</Divider>
</div>
<div class="col-5 align-items-center justify-content-center">
<p class="line-height-3 m-0">
<div class="col-span-5 items-center justify-center">
<p class="leading-normal m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
@@ -174,7 +174,7 @@ const toggle = () => {
<span class="p-tag">Badge</span>
</Divider>
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
@@ -183,7 +183,7 @@ const toggle = () => {
<Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
</Divider>
<p class="line-height-3 m-0">
<p class="leading-normal m-0">
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
</p>
@@ -192,21 +192,21 @@ const toggle = () => {
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Splitter</h5>
<Splitter style="height: 300px" class="mb-5">
<Splitter style="height: 300px" class="mb-8">
<SplitterPanel :size="30" :minSize="10">
<div className="h-full flex align-items-center justify-content-center">Panel 1</div>
<div className="h-full flex items-center justify-center">Panel 1</div>
</SplitterPanel>
<SplitterPanel :size="70">
<Splitter layout="vertical">
<SplitterPanel :size="15">
<div className="h-full flex align-items-center justify-content-center">Panel 2</div>
<div className="h-full flex items-center justify-center">Panel 2</div>
</SplitterPanel>
<SplitterPanel :size="50">
<div className="h-full flex align-items-center justify-content-center">Panel 3</div>
<div className="h-full flex items-center justify-center">Panel 3</div>
</SplitterPanel>
</Splitter>
</SplitterPanel>

38
src/views/uikit/Table.vue
View File

@@ -124,8 +124,8 @@ const calculateCustomerTotal = (name) => {
</script>
<template>
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<h5>Filter Menu</h5>
<DataTable :value="customer1" :paginator="true" :rows="10" dataKey="id" :rowHover="true"
@@ -133,7 +133,7 @@ const calculateCustomerTotal = (name) => {
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
showGridlines>
<template #header>
<div class="flex justify-content-between flex-column sm:flex-row">
<div class="flex justify-between flex-col sm:flex-row">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined
@click="clearFilter1()" />
<IconField iconPosition="left">
@@ -156,7 +156,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png"
:class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
@@ -178,7 +178,7 @@ const calculateCustomerTotal = (name) => {
<Column header="Agent" filterField="representative" :showFilterMatchModes="false"
:filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name"
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
style="width: 32px" />
@@ -186,7 +186,7 @@ const calculateCustomerTotal = (name) => {
</div>
</template>
<template #filter="{ filterModel }">
<div class="mb-3 text-bold">Agent Picker</div>
<div class="mb-4 text-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name"
placeholder="Any" class="p-column-filter">
<template #option="slotProps">
@@ -242,8 +242,8 @@ const calculateCustomerTotal = (name) => {
<ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar>
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" :range="true" class="m-3"></Slider>
<div class="flex align-items-center justify-content-between px-2">
<Slider v-model="filterModel.value" :range="true" class="m-4"></Slider>
<div class="flex items-center justify-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div>
@@ -263,19 +263,19 @@ const calculateCustomerTotal = (name) => {
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Frozen Columns</h5>
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id"
offLabel="Freeze Id" style="width: 10rem" />
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2"
scrollDirection="both" class="mt-3">
scrollDirection="both" class="mt-4">
<Column field="name" header="Name" style="min-width: 200px" frozen></Column>
<Column field="id" header="Id" style="min-width: 100px" :frozen="idFrozen"></Column>
<Column field="country.name" header="Country" :style="{ width: '200px' }">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png"
:class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
@@ -292,7 +292,7 @@ const calculateCustomerTotal = (name) => {
<Column field="activity" header="Activity" style="min-width: 200px"></Column>
<Column field="representative.name" header="Representative" style="min-width: 200px">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="data.representative.name"
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
style="width: 32px" />
@@ -309,7 +309,7 @@ const calculateCustomerTotal = (name) => {
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Row Expand</h5>
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
@@ -329,7 +329,7 @@ const calculateCustomerTotal = (name) => {
<Column header="Image">
<template #body="slotProps">
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
class="shadow-2" width="100" />
class="shadow" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true">
@@ -354,7 +354,7 @@ const calculateCustomerTotal = (name) => {
</template>
</Column>
<template #expansion="slotProps">
<div class="p-3">
<div class="p-4">
<h5>Orders for {{ slotProps.data.name }}</h5>
<DataTable :value="slotProps.data.orders">
<Column field="id" header="Id" :sortable="true">
@@ -396,7 +396,7 @@ const calculateCustomerTotal = (name) => {
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>Subheader Grouping</h5>
<DataTable :value="customer3" rowGroupMode="subheader" groupRowsBy="representative.name"
@@ -405,7 +405,7 @@ const calculateCustomerTotal = (name) => {
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img alt="flag" src="/demo/images/flag/flag_placeholder.png"
:class="`flag flag-${data.country.code}`" style="width: 24px" />
<span>{{ data.country.name }}</span>
@@ -421,7 +421,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<div class="flex align-items-center gap-2">
<div class="flex items-center gap-2">
<img :alt="slotProps.data.representative.name"
:src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32"
style="vertical-align: middle" />
@@ -429,7 +429,7 @@ const calculateCustomerTotal = (name) => {
</div>
</template>
<template #groupfooter="slotProps">
<td style="text-align: right" class="text-bold pr-6">Total Customers: {{
<td style="text-align: right" class="text-bold pr-12">Total Customers: {{
calculateCustomerTotal(slotProps.data.representative.name) }}</td>
</template>
</DataTable>

6
src/views/uikit/Tree.vue
View File

@@ -15,14 +15,14 @@ onMounted(() => {
</script>
<template>
<div class="grid">
<div class="col-12">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="card">
<h5>Tree</h5>
<Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
</div>
</div>
<div class="col-12">
<div class="col-span-12">
<div class="card">
<h5>TreeTable</h5>
<TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">

2
src/views/uikit/menu/ConfirmationDemo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex align-items-center py-5 px-3">
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-check mr-2 text-2xl" />
<p class="m-0 text-lg">Confirmation Component Content via Child Route</p>
</div>

2
src/views/uikit/menu/PaymentDemo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex align-items-center py-5 px-3">
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-money-bill mr-2 text-2xl" />
<p class="m-0 text-lg">Payment Component Content via Child Route</p>
</div>

2
src/views/uikit/menu/PersonalDemo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex align-items-center py-5 px-3">
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-user mr-2 text-2xl" />
<p class="m-0 text-lg">Personal Component Content via Child Route</p>
</div>

2
src/views/uikit/menu/SeatDemo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex align-items-center py-5 px-3">
<div class="flex items-center py-8 px-4">
<i class="pi pi-fw pi-ticket mr-2 text-2xl" />
<p class="m-0 text-lg">Seat Component Content via Child Route</p>
</div>