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

Updated demo pages

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-30 00:13:31 +03:00
parent 20eedb4b2b
commit 72ef6a60b6
52 changed files with 514 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/uikit/ButtonDoc.vue
View File

@@ -28,10 +28,10 @@ const load = (index) => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card flex flex-col gap-2">
<h5>Default</h5>
<div class="font-semibold text-xl">Default</div>
<div class="flex flex-wrap gap-2">
<Button label="Submit"></Button>
<Button label="Disabled" :disabled="true"></Button>
@@ -39,7 +39,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Severities</h5>
<div class="font-semibold text-xl">Severities</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
@@ -52,7 +52,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Text</h5>
<div class="font-semibold text-xl">Text</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
@@ -65,7 +65,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Outlined</h5>
<div class="font-semibold text-xl">Outlined</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
@@ -78,7 +78,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Button Group</h5>
<div class="font-semibold text-xl">Group</div>
<div class="flex flex-wrap gap-2">
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
@@ -88,7 +88,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>SplitButton</h5>
<div class="font-semibold text-xl">SplitButton</div>
<div class="flex flex-wrap gap-2">
<SplitButton label="Save" :model="items"></SplitButton>
<SplitButton label="Save" :model="items" severity="secondary"></SplitButton>
@@ -101,7 +101,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Templating</h5>
<div class="font-semibold text-xl">Templating</div>
<div class="flex flex-wrap gap-2">
<Button type="button">
<img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
@@ -115,7 +115,7 @@ const load = (index) => {
</div>
<div class="md:w-1/2">
<div class="card flex flex-col gap-2">
<h5>Icons</h5>
<div class="font-semibold text-xl">Icons</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
<Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
@@ -123,7 +123,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Raised</h5>
<div class="font-semibold text-xl">Raised</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
@@ -136,7 +136,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded</h5>
<div class="font-semibold text-xl">Rounded</div>
<div class="flex flex-wrap gap-2">
<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
@@ -149,7 +149,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded Icons</h5>
<div class="font-semibold text-xl">Rounded Icons</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded />
<Button icon="pi pi-bookmark" severity="secondary" rounded />
@@ -161,7 +161,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded Text</h5>
<div class="font-semibold text-xl">Rounded Text</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" text raised rounded />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded />
@@ -173,7 +173,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Rounded Outlined</h5>
<div class="font-semibold text-xl">Rounded Outlined</div>
<div class="flex flex-wrap gap-2">
<Button icon="pi pi-check" rounded outlined />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined />
@@ -185,7 +185,7 @@ const load = (index) => {
</div>
</div>
<div class="card flex flex-col gap-2">
<h5>Loading</h5>
<div class="font-semibold text-xl">Loading</div>
<div class="flex flex-wrap gap-2">
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
<Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" />

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

@@ -242,40 +242,40 @@ watch(
</script>
<template>
<Fluid class="grid grid-cols-12 gap-4">
<Fluid class="grid grid-cols-12 gap-8">
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Linear Chart</h5>
<div class="font-semibold text-xl mb-4">Linear</div>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Bar Chart</h5>
<div class="font-semibold text-xl mb-4">Bar</div>
<Chart type="bar" :data="barData" :options="barOptions"></Chart>
</div>
</div>
<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>
<div class="font-semibold text-xl mb-4">Pie</div>
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<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>
<div class="font-semibold text-xl mb-4">Doughnut</div>
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<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>
<div class="font-semibold text-xl mb-4">Polar Area</div>
<Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
</div>
</div>
<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>
<div class="font-semibold text-xl mb-4">Radar</div>
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
</div>
</div>

14
src/views/uikit/FileDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
const toast = useToast();
const fileupload = ref();
@@ -15,17 +15,19 @@ const onUpload = () => {
</script>
<template>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12">
<div class="grid grid-cols-12 gap-8">
<div class="col-span-full lg:col-span-6">
<div class="card">
<h5>Advanced</h5>
<div class="font-semibold text-xl mb-4">Advanced</div>
<FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />
</div>
</div>
<div class="col-span-full lg:col-span-6">
<div class="card">
<h5>Basic</h5>
<div class="font-semibold text-xl mb-4">Basic</div>
<div class="card flex flex-col gap-6 items-center justify-center">
<Toast />
<FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
<FileUpload ref="fileupload" mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
<Button label="Upload" @click="upload" severity="secondary" />
</div>
</div>

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

@@ -12,10 +12,10 @@ const dropdownItem = ref(null);
<template>
<Fluid>
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<h5>Vertical</h5>
<div class="font-semibold text-xl">Vertical</div>
<div class="flex flex-col gap-2">
<label for="name1">Name</label>
<InputText id="name1" type="text" />
@@ -31,7 +31,7 @@ const dropdownItem = ref(null);
</div>
<div class="card flex flex-col gap-4">
<h5>Vertical Grid</h5>
<div class="font-semibold text-xl">Vertical Grid</div>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col grow basis-0 gap-2">
<label for="name2">Name</label>
@@ -46,7 +46,7 @@ const dropdownItem = ref(null);
</div>
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<h5>Horizontal</h5>
<div class="font-semibold text-xl">Horizontal</div>
<div class="grid grid-cols-12 gap-2">
<label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
<div class="col-span-12 md:col-span-10">
@@ -62,7 +62,7 @@ const dropdownItem = ref(null);
</div>
<div class="card flex flex-col gap-4">
<h5>Inline</h5>
<div class="font-semibold text-xl">Inline</div>
<div class="flex flex-wrap items-start gap-4">
<div class="field">
<label for="firstname1" class="sr-only">Firstname</label>
@@ -76,7 +76,7 @@ const dropdownItem = ref(null);
</div>
</div>
<div class="card flex flex-col gap-4">
<h5>Help Text</h5>
<div class="font-semibold text-xl">Help Text</div>
<div class="flex flex-wrap gap-2">
<label for="username">Username</label>
<InputText id="username" type="text" />
@@ -86,9 +86,9 @@ const dropdownItem = ref(null);
</div>
</div>
<div class="flex mt-6">
<div class="flex mt-8">
<div class="card flex flex-col gap-4 w-full">
<h5>Advanced</h5>
<div class="font-semibold text-xl">Advanced</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-wrap gap-2 w-full">
<label for="firstname2">Firstname</label>

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

@@ -9,7 +9,6 @@ const selectedAutoValue = ref(null);
const autoFilteredValue = ref([]);
const calendarValue = ref(null);
const inputNumberValue = ref(null);
const chipsValue = ref(null);
const sliderValue = ref(50);
const ratingValue = ref(null);
const colorValue = ref('#1976D2');
@@ -47,10 +46,8 @@ const multiselectValues = ref([
const multiselectValue = ref(null);
const toggleValue = ref(false);
const selectButtonValue1 = ref(null);
const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const selectButtonValue2 = ref(null);
const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const selectButtonValue = ref(null);
const selectButtonValues = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
const knobValue = ref(50);
const inputGroupValue = ref(false);
const treeSelectNodes = ref(null);
@@ -75,17 +72,17 @@ const searchCountry = (event) => {
</script>
<template>
<Fluid class="flex flex-col md:flex-row gap-6">
<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 mb-4">InputText</div>
<div class="font-semibold text-xl">InputText</div>
<div class="flex flex-col md:flex-row gap-4">
<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>
<div class="font-semibold text-xl">Icons</div>
<IconField>
<InputIcon class="pi pi-user" />
<InputText type="text" placeholder="Username" />
@@ -95,51 +92,48 @@ const searchCountry = (event) => {
<InputIcon class="pi pi-search" />
</IconField>
<h5 class="mt-6">Float Label</h5>
<div class="font-semibold text-xl">Float Label</div>
<FloatLabel>
<InputText id="username" type="text" v-model="floatValue" />
<label for="username">Username</label>
</FloatLabel>
<h5 class="mt-6">Textarea</h5>
<div class="font-semibold text-xl">Textarea</div>
<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" />
<div class="font-semibold text-xl">AutoComplete</div>
<AutoComplete placeholder="Search" :dropdown="true" display="chip" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
<h5 class="mt-6">DatePicker</h5>
<div class="font-semibold text-xl">DatePicker</div>
<DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker>
<h5 class="mt-6">Spinner</h5>
<div class="font-semibold text-xl">InputNumber</div>
<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
<h5 class="mt-6">Chips</h5>
<AutoComplete v-model="chipsValue" :typeahead="false" multiple />
</div>
<div class="card flex flex-col gap-4">
<h5>Slider</h5>
<div class="font-semibold text-xl">Slider</div>
<InputText v-model.number="sliderValue" />
<Slider v-model="sliderValue" />
<div class="flex flex-row mt-6">
<div class="flex flex-col gap-4 w-1/2">
<h5>Rating</h5>
<div class="font-semibold text-xl">Rating</div>
<Rating v-model="ratingValue" />
</div>
<div class="flex flex-col gap-4 w-1/2">
<h5>ColorPicker</h5>
<div class="font-semibold text-xl">ColorPicker</div>
<ColorPicker style="width: 2rem" v-model="colorValue" />
</div>
</div>
<h5 class="mt-6">Knob</h5>
<div class="font-semibold text-xl">Knob</div>
<Knob v-model="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">
<h5>RadioButton</h5>
<div class="font-semibold text-xl">RadioButton</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center">
<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
@@ -155,7 +149,7 @@ const searchCountry = (event) => {
</div>
</div>
<h5 class="mt-6">Checkbox</h5>
<div class="font-semibold text-xl">Checkbox</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center">
<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
@@ -171,18 +165,18 @@ const searchCountry = (event) => {
</div>
</div>
<h5 class="mt-6">Input Switch</h5>
<div class="font-semibold text-xl">ToggleSwitch</div>
<ToggleSwitch v-model="switchValue" />
</div>
<div class="card flex flex-col gap-4">
<h5>Listbox</h5>
<div class="font-semibold text-xl">Listbox</div>
<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
<h5 class="mt-6">Select</h5>
<div class="font-semibold text-xl">Select</div>
<Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
<h5 class="mt-6">MultiSelect</h5>
<div class="font-semibold text-xl">MultiSelect</div>
<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">
@@ -201,26 +195,23 @@ const searchCountry = (event) => {
</template>
</MultiSelect>
<h5 class="mt-6">TreeSelect</h5>
<div class="font-semibold text-xl">TreeSelect</div>
<TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
</div>
<div class="card flex flex-col gap-4">
<h5>ToggleButton</h5>
<div class="font-semibold text-xl">ToggleButton</div>
<ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" />
<h5 class="mt-6">SelectButton</h5>
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
<h5 class="mt-6">SelectButton - Multiple</h5>
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
<div class="font-semibold text-xl">SelectButton</div>
<SelectButton v-model="selectButtonValue" :options="selectButtonValues" optionLabel="name" />
</div>
</div>
</Fluid>
<Fluid class="flex mt-6">
<Fluid class="flex mt-8">
<div class="card flex flex-col gap-4 w-full">
<h5>Input Groups</h5>
<div class="font-semibold text-xl">InputGroup</div>
<div class="flex flex-col md:flex-row gap-4">
<InputGroup>
<InputGroupAddon>

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

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
const picklistValue = ref([
[
@@ -51,9 +51,9 @@ const getSeverity = (product) => {
</script>
<template>
<div class="flex flex-col gap-6">
<div class="flex flex-col">
<div class="card">
<h5>DataView</h5>
<div class="font-semibold text-xl">DataView</div>
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-end">
@@ -68,7 +68,7 @@ const getSeverity = (product) => {
<template #list="slotProps">
<div class="flex flex-col">
<div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface': index !== 0 }">
<div class="md:w-40 relative">
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
@@ -109,7 +109,7 @@ const getSeverity = (product) => {
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 lg:col-span-4 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="bg-surface-50 flex justify-center rounded p-4">
<div class="relative mx-auto">
@@ -153,10 +153,10 @@ const getSeverity = (product) => {
</DataView>
</div>
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-2/3">
<div class="card">
<h5>PickList</h5>
<div class="font-semibold text-xl mb-4">PickList</div>
<PickList v-model="picklistValue" breakpoint="1400px" dataKey="id">
<template #option="{ option }">
{{ option.name }}
@@ -167,14 +167,12 @@ const getSeverity = (product) => {
<div class="lg:w-1/3">
<div class="card">
<h5>OrderList</h5>
<div class="lg:flex lg:justify-center">
<OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
<template #option="{ option }">
{{ option.name }}
</template>
</OrderList>
</div>
<div class="font-semibold text-xl mb-4">OrderList</div>
<OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
<template #option="{ option }">
{{ option.name }}
</template>
</OrderList>
</div>
</div>
</div>

14
src/views/uikit/MediaDoc.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { ProductService } from '@/service/ProductService';
import { PhotoService } from '@/service/PhotoService';
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
const products = ref([]);
const images = ref([]);
@@ -65,7 +65,7 @@ const getSeverity = (status) => {
<template>
<div class="card">
<h5>Carousel</h5>
<div class="font-semibold text-xl mb-4">Carousel</div>
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
<template #item="slotProps">
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
@@ -89,14 +89,12 @@ const getSeverity = (status) => {
</div>
<div class="card">
<h5>Image</h5>
<div class="flex justify-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
<div class="font-semibold text-xl mb-4">Image</div>
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
<div class="card">
<h5>Galleria</h5>
<div class="font-semibold text-xl mb-4">Galleria</div>
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />

76
src/views/uikit/MenuDoc.vue
View File

@@ -423,7 +423,7 @@ const onContextRightClick = (event) => {
<template>
<div class="card">
<h5 class="mb-2">Menubar</h5>
<div class="font-semibold text-xl mb-4">Menubar</div>
<Menubar :model="nestedMenuitems">
<template #end>
<IconField iconPosition="left">
@@ -435,128 +435,78 @@ const onContextRightClick = (event) => {
</div>
<div class="card">
<h5 class="mb-2">Breadcrumb</h5>
<div class="font-semibold text-xl mb-4">Breadcrumb</div>
<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">Stepper</h5>
<div class="font-semibold text-xl mb-4">Steps</div>
<Stepper value="1">
<StepList>
<Step value="1">Header I</Step>
<Step value="2">Header II</Step>
<Step value="3">Header III</Step>
</StepList>
<StepPanels>
<StepPanel v-slot="{ activateCallback }" value="1">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
</div>
<div class="flex pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="2">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
</div>
<div class="flex pt-6 justify-between">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
<Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
</div>
</StepPanel>
<StepPanel v-slot="{ activateCallback }" value="3">
<div class="flex flex-col h-48">
<div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
</div>
<div class="pt-6">
<Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
</div>
</StepPanel>
</StepPanels>
</Stepper>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">Tabs</h5>
<div class="font-semibold text-xl mb-4">TabMenu</div>
<Tabs value="0">
<TabList>
<Tab value="0">Header I</Tab>
<Tab value="1">Header II</Tab>
<Tab value="2">Header III</Tab>
</TabList>
<TabPanels>
<TabPanel value="0">
<p class="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 value="1">
<p class="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 value="2">
<p class="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>
</TabPanel>
</TabPanels>
</Tabs>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<div class="flex flex-col md:flex-row gap-8 mt-6">
<div class="md:w-1/3">
<div class="card">
<h5 class="mb-2">Tiered Menu</h5>
<div class="font-semibold text-xl mb-4">Tiered Menu</div>
<TieredMenu :model="tieredMenuItems" />
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<h5 class="mb-2">Plain Menu</h5>
<div class="font-semibold text-xl mb-4">Plain Menu</div>
<Menu :model="menuitems" />
</div>
</div>
<div class="md:w-1/3">
<div class="card">
<h5 class="mb-2">Overlay Menu</h5>
<div class="font-semibold text-xl mb-4">Overlay Menu</div>
<Menu ref="menu" :model="overlayMenuItems" :popup="true" />
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
</div>
<div class="card" @contextmenu="onContextRightClick">
<h5 class="mb-2">ContextMenu</h5>
<div class="font-semibold text-xl mb-4">Context Menu</div>
Right click to display.
<ContextMenu ref="contextMenu" :model="contextMenuItems" />
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<div class="flex flex-col md:flex-row gap-8 mt-8">
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">MegaMenu - Horizontal</h5>
<div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
<MegaMenu :model="megamenuItems" />
<h5 class="mb-2 mt-8">MegaMenu - Vertical</h5>
<div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
<MegaMenu :model="megamenuItems" orientation="vertical" />
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-2">PanelMenu</h5>
<div class="font-semibold text-xl mb-4">PanelMenu</div>
<PanelMenu :model="panelMenuitems" />
</div>
</div>

43
src/views/uikit/MessagesDoc.vue
View File

@@ -1,12 +1,11 @@
<script setup>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
const toast = useToast();
const message = ref([]);
const username = ref(null);
const email = ref(null);
const value = ref(null);
const count = ref(0);
const addMessage = (type) => {
@@ -39,34 +38,17 @@ const showError = () => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-4 items-start">
<div class="card md:w-1/2">
<h5 class="mb-2">Toast</h5>
<div class="font-semibold text-xl mb-4">Toast</div>
<div class="flex flex-wrap gap-2">
<Button @click="showSuccess()" label="Success" severity="success" />
<Button @click="showInfo()" label="Info" severity="info" />
<Button @click="showWarn()" label="Warn" severity="warning" />
<Button @click="showError()" label="Error" severity="danger" />
</div>
</div>
<div class="card md:w-1/2">
<h5 class="mb-2">Messages</h5>
<div class="flex flex-wrap gap-2 mb-4">
<Button label="Success" @click="addMessage('success')" severity="success" />
<Button label="Info" @click="addMessage('info')" severity="info" />
<Button label="Warn" @click="addMessage('warn')" severity="warning" />
<Button label="Error" @click="addMessage('error')" severity="danger" />
</div>
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<div class="card md:w-1/2">
<h5 class="mb-2">Inline</h5>
<div class="font-semibold text-xl mt-4 mb-4">Inline</div>
<div class="flex flex-wrap mb-4 gap-2">
<InputText v-model="username" placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
@@ -77,12 +59,19 @@ const showError = () => {
</div>
</div>
<div class="card md:w-1/2">
<h5 class="mb-2">Help Text</h5>
<div class="flex flex-col gap-2">
<label for="username">Username</label>
<InputText id="username" v-model="value" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
<div class="font-semibold text-xl mb-4">Message</div>
<div class="flex flex-col gap-4 mb-4">
<Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message>
<Message severity="error">Error Message</Message>
<Message severity="secondary">Secondary Message</Message>
<Message severity="contrast">Contrast Message</Message>
</div>
<transition-group name="p-message" tag="div">
<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
</transition-group>
</div>
</div>
</template>

49
src/views/uikit/MiscDoc.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
const value = ref(0);
let interval = null;
@@ -29,7 +29,7 @@ onBeforeUnmount(() => {
<template>
<div class="card">
<h5>ProgressBar</h5>
<div class="font-semibold text-xl mb-4">ProgressBar</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="md:w-1/2">
<ProgressBar :value="value"></ProgressBar>
@@ -40,11 +40,10 @@ onBeforeUnmount(() => {
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 mt-4">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<h4 class="mb-2">Badge</h4>
<h5 class="mb-2">Numbers</h5>
<div class="font-semibold text-xl mb-4">Badge</div>
<div class="flex gap-2">
<Badge :value="2"></Badge>
<Badge :value="8" severity="success"></Badge>
@@ -53,7 +52,7 @@ onBeforeUnmount(() => {
<Badge :value="3" severity="danger"></Badge>
</div>
<h5 class="my-4">Positioned Badge</h5>
<div class="font-semibold my-4">Overlay</div>
<div class="flex gap-6">
<OverlayBadge value="2">
<i class="pi pi-bell" style="font-size: 2rem" />
@@ -66,11 +65,13 @@ onBeforeUnmount(() => {
</OverlayBadge>
</div>
<h5 class="my-4">Inline Button Badge</h5>
<Button label="Emails" badge="8" class="mr-2"></Button>
<Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button>
<div class="font-semibold my-4">Button</div>
<div class="flex gap-2">
<Button label="Emails" badge="8" class="mr-2"></Button>
<Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button>
</div>
<h5 class="my-4">Sizes</h5>
<div class="font-semibold my-4">Sizes</div>
<div class="flex items-start gap-2">
<Badge :value="2"></Badge>
<Badge :value="4" size="large" severity="warn"></Badge>
@@ -79,8 +80,8 @@ onBeforeUnmount(() => {
</div>
<div class="card">
<h4>Avatar</h4>
<h5 class="my-4">Avatar Group</h5>
<div class="font-semibold text-xl mb-4">Avatar</div>
<div class="font-semibold mb-4">Group</div>
<AvatarGroup>
<Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
<Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
@@ -90,19 +91,19 @@ onBeforeUnmount(() => {
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
</AvatarGroup>
<h5 class="my-4">Label - Circle</h5>
<div class="font-semibold my-4">Label - Circle</div>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
<Avatar label="V" class="mr-2" size="large" :style="{ 'background-color': '#2196F3', color: '#ffffff' }" shape="circle"></Avatar>
<Avatar label="U" class="mr-2" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }" shape="circle"></Avatar>
<h5 class="my-4">Icon - Badge</h5>
<div class="font-semibold my-4">Icon - Badge</div>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
<div class="card">
<h4>ScrollTop</h4>
<div class="font-semibold text-xl mb-4">ScrollTop</div>
<ScrollPanel :style="{ width: '250px', height: '200px' }">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
@@ -117,8 +118,8 @@ onBeforeUnmount(() => {
</div>
<div class="md:w-1/2">
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
<div class="font-semibold text-xl mb-4">Tag</div>
<div class="font-semibold mb-4">Default</div>
<div class="flex gap-2">
<Tag value="Primary"></Tag>
<Tag severity="success" value="Success"></Tag>
@@ -127,7 +128,7 @@ onBeforeUnmount(() => {
<Tag severity="danger" value="Danger"></Tag>
</div>
<h5>Pills</h5>
<div class="font-semibold my-4">Pills</div>
<div class="flex gap-2">
<Tag value="Primary" :rounded="true"></Tag>
<Tag severity="success" value="Success" :rounded="true"></Tag>
@@ -136,7 +137,7 @@ onBeforeUnmount(() => {
<Tag severity="danger" value="Danger" :rounded="true"></Tag>
</div>
<h5>Icons</h5>
<div class="font-semibold my-4">Icons</div>
<div class="flex gap-2">
<Tag icon="pi pi-user" value="Primary"></Tag>
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
@@ -147,8 +148,8 @@ onBeforeUnmount(() => {
</div>
<div class="card">
<h4>Chip</h4>
<h5>Basic</h5>
<div class="font-semibold text-xl mb-4">Chip</div>
<div class="font-semibold mb-4">Basic</div>
<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>
@@ -156,7 +157,7 @@ onBeforeUnmount(() => {
<Chip label="Thriller" :removable="true" class="mb-2"></Chip>
</div>
<h5>Icon</h5>
<div class="font-semibold my-4">Icon</div>
<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>
@@ -164,7 +165,7 @@ onBeforeUnmount(() => {
<Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip>
</div>
<h5>Image</h5>
<div class="font-semibold my-4">Image</div>
<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>
@@ -173,7 +174,7 @@ onBeforeUnmount(() => {
</div>
<div class="card">
<h4>Skeleton</h4>
<div class="font-semibold text-xl mb-4">Skeleton</div>
<div class="rounded-border border border-surface p-6">
<div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>

47
src/views/uikit/OverlayDoc.vue
View File

@@ -1,8 +1,8 @@
<script setup>
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { ProductService } from '@/service/ProductService';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref } from 'vue';
const display = ref(false);
const displayConfirmation = ref(false);
@@ -77,31 +77,26 @@ const confirm = (event) => {
</script>
<template>
<div class="flex flex-col md:flex-row gap-6">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-4">Dialog</h5>
<div class="font-semibold text-xl mb-4">Dialog</div>
<Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
<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>
<template #footer>
<Button label="Ok" @click="close" icon="pi pi-check" class="p-button-outlined" />
<Button label="Save" @click="close" />
</template>
</Dialog>
<Button label="Show" icon="pi pi-external-link" style="width: auto" @click="open" />
<Button label="Show" style="width: auto" @click="open" />
</div>
<div class="card">
<h5 class="mb-4">Popover</h5>
<div class="font-semibold text-xl mb-4">Popover</div>
<div class="flex flex-wrap gap-2">
<Button type="button" label="Image" @click="toggle" severity="success" />
<Popover ref="op">
<img src="https://primefaces.org/cdn/primevue/images/nature/nature9.jpg" alt="Image" />
</Popover>
<Button type="button" label="DataTable" @click="toggleDataTable" severity="success" />
<Button type="button" label="Show" @click="toggleDataTable" />
<Popover ref="op2" id="overlay_panel" style="width: 450px">
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
@@ -119,16 +114,16 @@ const confirm = (event) => {
</div>
<div class="card">
<h5 class="mb-4">Tooltip</h5>
<div class="font-semibold text-xl mb-4">Tooltip</div>
<div class="inline-flex gap-4">
<InputText type="text" placeholder="Username" v-tooltip="'Your username'" />
<Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
<Button type="button" label="Save" v-tooltip="'Click to proceed'" />
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="card">
<h5 class="mb-4">Drawer</h5>
<div class="font-semibold text-xl mb-4">Drawer</div>
<Drawer v-model:visible="visibleLeft" header="Drawer">
<p>
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
@@ -164,21 +159,21 @@ const confirm = (event) => {
</p>
</Drawer>
<Button icon="pi pi-arrow-right" severity="warn" @click="visibleLeft = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-left" severity="warn" @click="visibleRight = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-down" severity="warn" @click="visibleTop = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-up" severity="warn" @click="visibleBottom = true" style="margin-right: 0.25em" />
<Button icon="pi pi-external-link" severity="warn" @click="visibleFull = true" />
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right: 0.25em" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right: 0.25em" />
<Button icon="pi pi-external-link" @click="visibleFull = true" />
</div>
<div class="card">
<h5 class="mb-4">ConfirmPopup</h5>
<div class="font-semibold text-xl mb-4">ConfirmPopup</div>
<ConfirmPopup></ConfirmPopup>
<Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
</div>
<div class="card">
<h5 class="mb-4">Confirmation</h5>
<div class="font-semibold text-xl mb-4">ConfirmDialog</div>
<Button label="Delete" icon="pi pi-trash" severity="danger" style="width: auto" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
<div class="flex items-center justify-center">
@@ -186,8 +181,8 @@ const confirm = (event) => {
<span>Are you sure you want to proceed?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text" />
<Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
<Button label="No" icon="pi pi-times" @click="closeConfirmation" text severity="secondary" />
<Button label="Yes" icon="pi pi-check" @click="closeConfirmation" severity="danger" outlined autofocus />
</template>
</Dialog>
</div>

27
src/views/uikit/PanelsDoc.vue
View File

@@ -32,9 +32,9 @@ const toggle = () => {
</script>
<template>
<div class="flex flex-col gap-4">
<div class="flex flex-col">
<div class="card">
<h5>Toolbar</h5>
<div class="font-semibold text-xl mb-4">Toolbar</div>
<Toolbar>
<template #start>
<Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
@@ -55,10 +55,10 @@ const toggle = () => {
</Toolbar>
</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<div class="card">
<h5>Accordion</h5>
<div class="font-semibold text-xl mb-4">Accordion</div>
<Accordion value="0">
<AccordionPanel value="0">
<AccordionHeader>Header I</AccordionHeader>
@@ -93,7 +93,7 @@ const toggle = () => {
</Accordion>
</div>
<div class="card">
<h5>Tabs</h5>
<div class="font-semibold text-xl mb-4">Tabs</div>
<Tabs value="0">
<TabList>
<Tab value="0">Header I</Tab>
@@ -128,7 +128,7 @@ const toggle = () => {
</div>
<div class="md:w-1/2 mt-6 md:mt-0">
<div class="card">
<h5>Panel</h5>
<div class="font-semibold text-xl mb-4">Panel</div>
<Panel header="Header" :toggleable="true">
<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
@@ -138,7 +138,7 @@ const toggle = () => {
</Panel>
</div>
<div class="card">
<h5>Fieldset</h5>
<div class="font-semibold text-xl mb-4">Fieldset</div>
<Fieldset legend="Legend" :toggleable="true">
<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
@@ -151,7 +151,7 @@ const toggle = () => {
<Card>
<template v-slot:title>
<div class="flex items-center justify-between mb-0">
<h5>Card</h5>
<div class="font-semibold text-xl mb-4">Card</div>
<Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
</div>
<Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" />
@@ -168,8 +168,8 @@ const toggle = () => {
</div>
</div>
<div class="card mt-4">
<h5>Divider</h5>
<div class="card mt-8">
<div class="font-semibold text-xl mb-4">Divider</div>
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
<div class="flex flex-col gap-2">
@@ -185,8 +185,8 @@ const toggle = () => {
</div>
</div>
<div class="w-full md:w-2/12">
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
<Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
<Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
</div>
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
@@ -195,8 +195,7 @@ const toggle = () => {
</div>
<div class="card">
<h5>Splitter</h5>
<div class="font-semibold text-xl mb-4">Splitter</div>
<Splitter style="height: 300px" class="mb-8">
<SplitterPanel :size="30" :minSize="10">
<div className="h-full flex items-center justify-center">Panel 1</div>

12
src/views/uikit/TableDoc.vue
View File

@@ -1,8 +1,8 @@
<script setup>
import { ref, onBeforeMount, reactive } from 'vue';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import { CustomerService } from '@/service/CustomerService';
import { ProductService } from '@/service/ProductService';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import { onBeforeMount, reactive, ref } from 'vue';
const customers1 = ref(null);
const customers2 = ref(null);
@@ -143,7 +143,7 @@ const calculateCustomerTotal = (name) => {
<template>
<div class="card">
<h5>Filter Menu</h5>
<div class="font-semibold text-xl mb-4">Filtering</div>
<DataTable
:value="customers1"
:paginator="true"
@@ -269,7 +269,7 @@ const calculateCustomerTotal = (name) => {
</div>
<div class="card">
<h5>Frozen Columns</h5>
<div class="font-semibold text-xl mb-4">Frozen Columns</div>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
<DataTable :value="customers2" scrollable scrollHeight="400px" class="mt-6">
@@ -291,7 +291,7 @@ const calculateCustomerTotal = (name) => {
</div>
<div class="card">
<h5>Row Expand</h5>
<div class="font-semibold text-xl mb-4">Row Expansion</div>
<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" tableStyle="min-width: 60rem">
<template #header>
<div class="flex flex-wrap justify-end gap-2">
@@ -351,7 +351,7 @@ const calculateCustomerTotal = (name) => {
</div>
<div class="card">
<h5>Subheader Grouping</h5>
<div class="font-semibold text-xl mb-4">Grouping</div>
<DataTable :value="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
<template #groupheader="slotProps">
<div class="flex items-center gap-2">

159
src/views/uikit/TimelineDoc.vue Normal file
View File

@@ -0,0 +1,159 @@
<script setup>
import { ref } from 'vue';
const events = ref([
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
]);
const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
</script>
<template>
<div class="grid grid-cols-12 gap-8">
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Left Align</div>
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Right Align</div>
<Timeline :value="events" align="right">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Alternate Align</div>
<Timeline :value="events" align="alternate">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Opposite Content</div>
<Timeline :value="events">
<template #opposite="slotProps">
<small class="text-muted-color">{{ slotProps.item.date }}</small>
</template>
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
</div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Templating</div>
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card class="mt-4">
<template #title>
{{ slotProps.item.status }}
</template>
<template #subtitle>
{{ slotProps.item.date }}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
cupiditate neque quas!
</p>
<Button label="Read more" text></Button>
</template>
</Card>
</template>
</Timeline>
</div>
</div>
<div class="col-span-full">
<div class="card">
<div class="font-semibold text-xl mb-4">Horizontal</div>
<div class="font-semibold mb-2">Top Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<div class="font-semibold mt-4 mb-2">Bottom Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<div class="font-semibold mt-4 mb-2">Alternate Align</div>
<Timeline :value="horizontalEvents" layout="horizontal" align="alternate">
<template #opposite> &nbsp; </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 960px) {
::v-deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;
.p-timeline-event-content {
text-align: left !important;
}
}
.p-timeline-event-opposite {
flex: 0;
}
.p-card {
margin-top: 1rem;
}
}
}
</style>

7
src/views/uikit/TreeDoc.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { onMounted, ref } from 'vue';
import { NodeService } from '@/service/NodeService';
import { onMounted, ref } from 'vue';
const treeValue = ref(null);
const selectedTreeValue = ref(null);
@@ -15,14 +15,13 @@ onMounted(() => {
<template>
<div class="card">
<h5 class="mb-4">Tree</h5>
<div class="font-semibold text-xl">Tree</div>
<Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
</div>
<div class="card">
<h5 class="mb-4">TreeTable</h5>
<div class="font-semibold text-xl mb-4">TreeTable</div>
<TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
<template #header> FileSystem </template>
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>

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

@@ -1,6 +0,0 @@
<template>
<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>
</template>

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

@@ -1,6 +0,0 @@
<template>
<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>
</template>

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

@@ -1,6 +0,0 @@
<template>
<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>
</template>

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

@@ -1,6 +0,0 @@
<template>
<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>
</template>