Merge branch 'primefaces:master' into fix/listbox-optiongroup-filter
Uros
GitHub
commit
7cd857855e
|
|
@ -64,7 +64,7 @@ jobs:
|
|||
|
||||
- name: Add Unit Test Fail Comment
|
||||
if: always() && steps.unitTest.outcome == 'failure'
|
||||
uses: thollander/actions-comment-pull-request@v1
|
||||
uses: thollander/actions-comment-pull-request@v2
|
||||
with:
|
||||
message: |
|
||||
Thanks a lot for your contribution! But, Unit tests failed. You can check the unit tests with the command 'npm run test:unit' and commit the changes.
|
||||
|
|
|
|||
|
|
@ -6,6 +6,5 @@ public
|
|||
styles
|
||||
node_modules
|
||||
.vscode
|
||||
dist
|
||||
.nuxt
|
||||
.output
|
||||
.output
|
||||
|
|
|
|||
|
|
@ -95,11 +95,6 @@
|
|||
"name": "Editor",
|
||||
"to": "/editor"
|
||||
},
|
||||
{
|
||||
"name": "IftaLabel",
|
||||
"to": "/iftalabel",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "FloatLabel",
|
||||
"to": "/floatlabel",
|
||||
|
|
@ -109,6 +104,11 @@
|
|||
"name": "IconField",
|
||||
"to": "/iconfield"
|
||||
},
|
||||
{
|
||||
"name": "IftaLabel",
|
||||
"to": "/iftalabel",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "InputGroup",
|
||||
"to": "/inputgroup"
|
||||
|
|
@ -129,6 +129,11 @@
|
|||
"name": "InputText",
|
||||
"to": "/inputtext"
|
||||
},
|
||||
{
|
||||
"name": "KeyFilter",
|
||||
"to": "/keyfilter",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "Knob",
|
||||
"to": "/knob"
|
||||
|
|
@ -451,14 +456,6 @@
|
|||
"name": "MeterGroup",
|
||||
"to": "/metergroup"
|
||||
},
|
||||
{
|
||||
"name": "ScrollTop",
|
||||
"to": "/scrolltop"
|
||||
},
|
||||
{
|
||||
"name": "Skeleton",
|
||||
"to": "/skeleton"
|
||||
},
|
||||
{
|
||||
"name": "ProgressBar",
|
||||
"to": "/progressbar"
|
||||
|
|
@ -467,6 +464,14 @@
|
|||
"name": "ProgressSpinner",
|
||||
"to": "/progressspinner"
|
||||
},
|
||||
{
|
||||
"name": "ScrollTop",
|
||||
"to": "/scrolltop"
|
||||
},
|
||||
{
|
||||
"name": "Skeleton",
|
||||
"to": "/skeleton"
|
||||
},
|
||||
{
|
||||
"name": "Ripple",
|
||||
"to": "/ripple"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ html {
|
|||
font-feature-settings: "cv02","cv03","cv04","cv11";
|
||||
}
|
||||
|
||||
.material {
|
||||
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
min-height: 100%;
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
position: absolute;
|
||||
top: calc(100% + 2px);
|
||||
right: 0;
|
||||
width: 16rem;
|
||||
width: 18rem;
|
||||
padding: .75rem;
|
||||
background-color: var(--overlay-background);
|
||||
border-radius: 6px;
|
||||
|
|
@ -135,7 +135,6 @@
|
|||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -348,7 +348,6 @@ export default {
|
|||
return !findMainInterface || findMainInterface.values.props.length > 0;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
description() {
|
||||
return this.doc && this.doc.length > 0 ? `API defines helper props, events and others for the PrimeVue ${this.header} module.` : `${this.header} is a CSS feature so does not provide a Javascript API`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Some sections may not be visible due to the availability of the particular feature. Section names that start with the <i>pc</i> prefix indicate that the element is a PrimeVue component not a DOM element. Visit the
|
||||
<PrimeVueNuxtLink to="/passthrough/#pcprefix">pass-through</PrimeVueNuxtLink> documentation for more information.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div ref="container" class="doc-ptviewerwrapper card">
|
||||
<div id="doc-ptviewer" class="doc-ptviewer">
|
||||
<slot />
|
||||
|
|
@ -9,7 +15,7 @@
|
|||
<div v-for="item of handleData(doc.data)" :key="item.value" class="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
|
||||
<span class="doc-ptoption-text">
|
||||
{{ item.label }}
|
||||
<template v-if="docs.length > 1">| {{ doc.key }}</template>
|
||||
{{ findComponentName(item.label, doc) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -20,6 +26,7 @@
|
|||
|
||||
<script>
|
||||
import { addClass, find, removeClass } from '@primeuix/utils/dom';
|
||||
import { defaultOptions } from '@primevue/core/config';
|
||||
|
||||
export default {
|
||||
props: ['docs'],
|
||||
|
|
@ -29,14 +36,48 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
findComponentName(label, doc) {
|
||||
let text = '';
|
||||
|
||||
if (this.docs.length > 1) {
|
||||
text += `| ${doc.key}`;
|
||||
}
|
||||
|
||||
if (label.includes('pc')) {
|
||||
let reservedNames = ['Decrement', 'File', 'Increment', 'JumpToPage', 'Maximize', 'Node', 'Option', 'Prev', 'Remove', 'RowPerPage', 'Source', 'Target', 'MoveAllTo', 'MoveAll', 'MoveTop', 'MoveTo']; // the order of this list is important!
|
||||
let whiteList = [...reservedNames, ...Object.keys(defaultOptions.locale), ...Object.keys(defaultOptions.locale.aria)];
|
||||
let elemName = label.replace('pc', '');
|
||||
|
||||
if (elemName.includes('FilterContainer')) elemName = elemName.replace('FilterContainer', 'IconField');
|
||||
else if (elemName.includes('FilterIconContainer')) elemName = elemName.replace('FilterIconContainer', 'InputIcon');
|
||||
else if (elemName.includes('Filter')) elemName = elemName.replace('Filter', 'InputText');
|
||||
|
||||
if (elemName.includes('Action')) elemName = elemName.replace('Action', 'Button');
|
||||
if (elemName.includes('Dropdown')) elemName = elemName.replace('Dropdown', 'Select');
|
||||
|
||||
for (const word of whiteList) {
|
||||
if (elemName.toLowerCase().includes(word.toLowerCase())) {
|
||||
const regex = new RegExp(word, 'gi');
|
||||
|
||||
elemName = elemName.replace(regex, '');
|
||||
}
|
||||
}
|
||||
|
||||
text += ` | ${elemName}`;
|
||||
}
|
||||
|
||||
return text;
|
||||
},
|
||||
enterSection(item, componentName) {
|
||||
let selector,
|
||||
cmpName = componentName;
|
||||
|
||||
if (componentName === 'ConfirmDialog') cmpName = 'Dialog';
|
||||
else if (componentName === 'ScrollTop') cmpName = 'Button';
|
||||
else if (componentName === 'Galleria') cmpName = 'GalleriaContent';
|
||||
|
||||
if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`;
|
||||
if (componentName === 'InputMask') selector = `[data-pc-extend="inputtext"][data-pc-section="root"]`;
|
||||
else if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`;
|
||||
else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`;
|
||||
else selector = `[data-pc-section="${item.label.toLowerCase()}"]`;
|
||||
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@
|
|||
},
|
||||
{ 'text-muted-color hover:bg-emphasis bg-transparent': selectedSampleAppsSidebarNav !== navItem.title, 'text-primary-contrast bg-primary hover:bg-primary-emphasis ': selectedSampleAppsSidebarNav === navItem.title }
|
||||
]"
|
||||
@click="visibleRight = true"
|
||||
>
|
||||
<i :class="navItem.icon"></i>
|
||||
<span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'">・</span>
|
||||
|
|
@ -128,14 +129,210 @@
|
|||
<CardsApp v-if="selectedSampleAppsSidebarNav === 'Cards'" />
|
||||
<InboxApp v-if="selectedSampleAppsSidebarNav === 'Inbox'" />
|
||||
<CustomersApp v-if="selectedSampleAppsSidebarNav === 'Customers'" />
|
||||
|
||||
<Drawer
|
||||
v-model:visible="visibleRight"
|
||||
:containerVisible="true"
|
||||
header="Right Sidebar"
|
||||
position="right"
|
||||
closeIcon="pi pi-sign-out"
|
||||
:pt="{
|
||||
root: {
|
||||
class: '!max-w-2xl !w-full !h-screen rounded-l-2xl'
|
||||
},
|
||||
footer: {
|
||||
class: 'hidden'
|
||||
},
|
||||
content: {
|
||||
class: 'flex-1 flex flex-col'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #container="">
|
||||
<div class="flex flex-col h-screen overflow-auto">
|
||||
<div class="">
|
||||
<div class="flex align-items-center gap-3 p-6">
|
||||
<Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="large" class="rounded-xl overflow-hidden" />
|
||||
<div class="flex-1">
|
||||
<div class="leading-6 text-color font-medium">Brook Simmons</div>
|
||||
<div class="mt-1 leading-5 text-muted-color text-sm">Sales Executive</div>
|
||||
</div>
|
||||
<Button icon="pi pi-sign-out" text rounded severity="secondary" />
|
||||
</div>
|
||||
<SelectButton
|
||||
v-model="selectedSidebarOption"
|
||||
:options="sidebarOptions"
|
||||
:pt="{
|
||||
root: {
|
||||
class: 'px-6 py-3 w-full'
|
||||
},
|
||||
pcToggleButton: {
|
||||
root: {
|
||||
class: 'flex-1 py-2.5'
|
||||
},
|
||||
label: {
|
||||
class: 'text-sm'
|
||||
}
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Interaction Logs'" class="h-[calc(100%-172px)] flex flex-col gap-4 p-6">
|
||||
<div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="leading-6 font-medium text-color">Call Logs</div>
|
||||
<Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
|
||||
<div v-for="(data, index) of callLogs" :key="index" class="flex items-center gap-3 p-2">
|
||||
<OverlayBadge severity="success" class="w-fit">
|
||||
<Avatar :image="data.image" size="small" class="rounded-md w-10 h-10 overflow-hidden flex" />
|
||||
</OverlayBadge>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="text-sm leading-5 font-medium text-color">{{ data.name }}</div>
|
||||
<div class="mt-1 text-sm leading-5 text-muted-color">{{ data.time }}</div>
|
||||
</div>
|
||||
<Button icon="pi pi-phone text-sm" text class="bg-primary/10 dark:bg-primary/20 w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="leading-6 font-medium text-color">Email Records</div>
|
||||
<Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
|
||||
<div v-for="(data, index) of emailRecords" :key="index" class="flex items-center gap-3 p-2">
|
||||
<OverlayBadge severity="danger" class="w-fit">
|
||||
<Avatar :image="data.image" size="small" class="rounded-md overflow-hidden w-10 h-10 flex" />
|
||||
</OverlayBadge>
|
||||
<div class="w-1/5 text-sm leading-5 font-medium text-color">{{ data.name }}</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-sm leading-5 font-medium text-color line-clamp-2">
|
||||
{{ data.title }}
|
||||
<span class="text-muted-color">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/6 text-sm leading-5 text-muted-color text-right">{{ data.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="leading-6 font-medium text-color">Meeting Notes</div>
|
||||
<Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all leading-none" severity="secondary" text />
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col rounded-lg overflow-hidden">
|
||||
<div class="flex items-start justify-between gap-1">
|
||||
<div class="text-sm text-color font-medium max-w-60">Subject: Meeting Wrap-up & Action Items: Jacob Jones</div>
|
||||
<div class="text-sm text-muted-color">February 14, 2024 / 2:00 PM</div>
|
||||
</div>
|
||||
<div class="text-sm text-muted-color mt-6">
|
||||
Here's a quick review of our meeting with Brook Simmons and next steps. Summary:
|
||||
<br />
|
||||
<ul class="list-disc pl-5">
|
||||
<li>Reviewed our SaaS solution and its features.</li>
|
||||
<li>Arlene McCoy intrigued by user experience potential.</li>
|
||||
<li>Voiced concerns on integration with current system.Action Items:</li>
|
||||
</ul>
|
||||
Demo: Schedule product demo with Arlene McCoy. (Assigned to: Jerome Bell)<br /><br />
|
||||
Integration Blueprint: Draft and deliver technical blueprint. (Assigned to: Cameron Williamson)<br /><br />
|
||||
Follow-up Meeting: Arrange to discuss any queries post-demo. (Assigned to: Dianne Russell)
|
||||
<br /><br />
|
||||
Please act on these items promptly.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Preferences'" class="h-[calc(100%-72px)] flex flex-col gap-4 p-6">
|
||||
<div v-for="(data, i) of preferences" :key="i" class="h-1/4 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="leading-6 font-medium text-color p-2">{{ data.title }}</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col gap-3 rounded-lg">
|
||||
<div v-for="(pref, j) of data.prefs" :key="j" class="flex items-center gap-2">
|
||||
<i class="text-lg text-color" :class="pref.icon"></i>
|
||||
<div class="font-medium text-color flex-1">{{ pref.title }}</div>
|
||||
<ToggleSwitch v-model="pref.checked" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Opportunities'" class="grid grid-cols-2 gap-6 p-6">
|
||||
<div v-for="(data, i) of opportunities" :key="i" class="flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="font-medium text-color mt-0.5">{{ data.title }}</div>
|
||||
<NuxtLink :to="data.link" target="_blank" rel="noopener">
|
||||
<Button icon="pi pi-arrow-up-right text-sm !leading-none" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900" severity="secondary" text />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<img class="w-full rounded-lg mt-2 block" :src="data.image" alt="Opportunutiy Image" />
|
||||
<div class="flex-1 mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 text-xs text-color">
|
||||
{{ data.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Statistics'" class="h-[calc(100%-160px)] p-6">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="font-medium text-color p-2">Customer Satisfaction Score</div>
|
||||
</div>
|
||||
<div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Knob v-model="customerSatisfaction" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="font-medium text-color p-2">Estimated Lifetime Value</div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center gap-2 justify-center mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">$</div>
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">272</div>
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">123</div>
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="font-medium text-color p-2">Product Usage</div>
|
||||
</div>
|
||||
<div class="flex-1 mt-2 py-4 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Chart type="line" :data="lineChartData" :options="lineChartOptions" class="min-h-44 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="font-medium text-color p-2">Churn Risk</div>
|
||||
<div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Knob v-model="churnRisk" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 w-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="font-medium text-color p-2">Total Purchases</div>
|
||||
<div class="flex-1 py-4 px-2 w-full mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-60 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lineChartData: {},
|
||||
lineChartOptions: {},
|
||||
chartData: {},
|
||||
chartOptions: {},
|
||||
sampleAppsSidebarNavs: [
|
||||
{ icon: 'pi pi-home', title: 'Overview' },
|
||||
{ icon: 'pi pi-comment', title: 'Chat' },
|
||||
|
|
@ -144,10 +341,7 @@ export default {
|
|||
{ icon: 'pi pi-user', title: 'Customers' },
|
||||
{ icon: 'pi pi-video', title: 'Movies' }
|
||||
],
|
||||
sampleAppsSidebarNavsMore: [
|
||||
{ icon: 'pi pi-flag', title: 'Support' },
|
||||
{ icon: 'pi pi-cog', title: 'Settings' }
|
||||
],
|
||||
sampleAppsSidebarNavsMore: [{ icon: 'pi pi-cog', title: 'Settings' }],
|
||||
selectedSampleAppsSidebarNav: 'Overview',
|
||||
isSlimMenu: true,
|
||||
isSlimMenuSelected: false,
|
||||
|
|
@ -159,16 +353,156 @@ export default {
|
|||
{ icon: 'pi pi-user', title: 'Customers', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/customers' },
|
||||
{ icon: 'pi pi-video', title: 'Movies', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/movies' }
|
||||
],
|
||||
selectedSampleOption: { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' }
|
||||
selectedSampleOption: { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' },
|
||||
visibleRight: false,
|
||||
selectedSidebarOption: 'Statistics',
|
||||
sidebarOptions: ['Interaction Logs', 'Preferences', 'Statistics', 'Opportunities'],
|
||||
callLogs: [
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png', name: 'Brook Simmons', time: '02.02.2024 | 45 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg', name: 'Jacob Jones', time: '02.02.2024 | 45 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg', name: 'Annette Black', time: '02.03.2024 | 13 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg', name: 'Arlene McCoy', time: '02.03.2024 | 14 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg', name: 'Arlene Simmons', time: '02.03.2024 | 14 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg', name: 'Michael Brown', time: '02.04.2024 | 20 min' }
|
||||
],
|
||||
emailRecords: [
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
|
||||
name: 'Brook Simmons',
|
||||
time: '3:24 PM',
|
||||
title: 'Unleash Business Potential',
|
||||
text: 'Automate, analyze, and accelerate with our SaaS platform. Unshackle from mundane tasks and focus on scaling your business. Contact us for a demo today!'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
|
||||
name: 'Jacob Jones',
|
||||
time: '12.23.2023',
|
||||
title: 'Optimized Workflow Revolution ',
|
||||
text: "Experience a workflow revolution with our intuitive SaaS tool. With enhanced features and optimized processes, it's efficiency like never before. Let's get in touch for a brief demo!"
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
|
||||
name: 'Annette Black',
|
||||
time: '12.17.2023',
|
||||
title: 'Innovation at Fingertips',
|
||||
text: 'With our SaaS solution, innovation is only a click away. Shape your future with pioneering features and minimalist design. Join us for your solution walk-through today!'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
|
||||
name: 'Arlene McCoy',
|
||||
time: '06.17.2023',
|
||||
title: 'Seamless Integration',
|
||||
text: 'Integrate effortlessly with our user-friendly SaaS tools. Streamline your operations and boost productivity. Discover more in our demo session.'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
|
||||
name: 'Arlene Simmons',
|
||||
time: '04.17.2023',
|
||||
title: 'Transform Your Business',
|
||||
text: 'Empower your team with our innovative SaaS solutions. Achieve unparalleled efficiency and drive growth. Book a demo to explore the possibilities.'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
|
||||
name: 'Michael Brown',
|
||||
time: '01.05.2024',
|
||||
title: 'Next-Gen Collaboration',
|
||||
text: 'Experience the future of collaboration with our cutting-edge SaaS platform. Enhance teamwork and streamline communication. Contact us for a demo today!'
|
||||
}
|
||||
],
|
||||
preferences: [
|
||||
{
|
||||
title: 'Email',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-bell', title: 'Notification', checked: true },
|
||||
{ icon: 'pi pi-inbox', title: 'Newsletter', checked: false },
|
||||
{ icon: 'pi pi-sync', title: 'Product Updates', checked: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Telephone',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-mobile', title: 'Phone Call', checked: true },
|
||||
{ icon: 'pi pi-volume-down', title: 'Voicemail', checked: false },
|
||||
{ icon: 'pi pi-comments', title: 'SMS text', checked: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Social Media',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-clock', title: 'Automated Post', checked: true },
|
||||
{ icon: 'pi pi-user', title: 'Direct Message', checked: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Data Privacy',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-box', title: 'Share Data with 3rd Parties', checked: true },
|
||||
{ icon: 'pi pi-file', title: 'Cookies', checked: false }
|
||||
]
|
||||
}
|
||||
],
|
||||
opportunities: [
|
||||
{
|
||||
title: 'Apollo',
|
||||
link: 'https://primevue.org/templates/apollo/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg',
|
||||
text: 'Keep your application fresh with Apollo, the newest and most modern template available.'
|
||||
},
|
||||
{
|
||||
title: 'Ultima',
|
||||
link: 'https://primevue.org/templates/ultima/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg',
|
||||
text: "Elevate your application's intuitiveness with Ultima's premium Material Design interface."
|
||||
},
|
||||
{
|
||||
title: 'Diamond',
|
||||
link: 'https://primevue.org/templates/diamond/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg',
|
||||
text: "Handle complex operations with elegance with Diamond's robust and powerful premium design."
|
||||
},
|
||||
{
|
||||
title: 'Atlantis',
|
||||
link: 'https://primevue.org/templates/atlantis/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg',
|
||||
text: "Boost your application's capabilities, customization with the Atlantis template."
|
||||
},
|
||||
{
|
||||
title: 'Verona',
|
||||
link: 'https://primevue.org/templates/verona/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg',
|
||||
text: "Achieve sophistication and subtlety with Verona's minimalistic, content-focused design."
|
||||
},
|
||||
{
|
||||
title: 'Freya',
|
||||
link: 'https://primevue.org/templates/freya/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png',
|
||||
text: "Give your application a sleek, updated look with Freya's chic and modern premium template."
|
||||
}
|
||||
],
|
||||
customerSatisfaction: 56,
|
||||
churnRisk: 24
|
||||
};
|
||||
} /*,
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
EventBus.off('dark-mode-toggle-complete', this.redrawListener);
|
||||
EventBus.off('theme-palette-change', this.redrawListener);
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
this.handleResize();
|
||||
},*/,
|
||||
this.chartData = this.setChartData();
|
||||
this.chartOptions = this.setChartOptions();
|
||||
this.lineChartData = this.setLineChartData();
|
||||
this.lineChartOptions = this.setLineChartOptions();
|
||||
|
||||
this.redrawListener = () => {
|
||||
this.chartOptions = this.setChartOptions();
|
||||
this.chartData = this.setChartData();
|
||||
this.lineChartData = this.setLineChartData();
|
||||
this.lineChartOptions = this.setLineChartOptions();
|
||||
};
|
||||
|
||||
EventBus.on('theme-palette-change', this.redrawListener);
|
||||
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
|
||||
},
|
||||
methods: {
|
||||
setSelectedSampleAppsSidebarNav(title) {
|
||||
this.selectedSampleAppsSidebarNav = title;
|
||||
|
|
@ -176,14 +510,342 @@ export default {
|
|||
isDark() {
|
||||
return this.$appState.darkTheme;
|
||||
},
|
||||
handleResize() {
|
||||
if (!this.isSlimMenuSelected || window.innerWidth <= 1400) {
|
||||
this.isSlimMenu = window.innerWidth <= 1400;
|
||||
}
|
||||
},
|
||||
toggleSlimMenu() {
|
||||
this.isSlimMenu = !this.isSlimMenu;
|
||||
this.isSlimMenuSelected = this.isSlimMenu;
|
||||
},
|
||||
setChartData() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
|
||||
const hoverBackgroundColor = documentStyle.getPropertyValue('--p-primary-color');
|
||||
|
||||
return {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
datasets: [
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Investment Wallet',
|
||||
backgroundColor: borderColor,
|
||||
data: [100, 201, 404, 300, 140, 220, 314, 520, 145, 234, 325, 147],
|
||||
borderRadius: {
|
||||
topLeft: 4,
|
||||
topRight: 4
|
||||
},
|
||||
borderSkipped: true,
|
||||
barThickness: 20,
|
||||
hoverBackgroundColor: hoverBackgroundColor,
|
||||
hoverTransition: '1s ease all'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
setChartOptions() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
|
||||
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||||
const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
|
||||
const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
|
||||
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add('chartjs-tooltip');
|
||||
tooltipEl.style.backgroundColor = backgroundColor;
|
||||
tooltipEl.style.boxShadow =
|
||||
' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
|
||||
tooltipEl.style.borderRadius = '7px';
|
||||
tooltipEl.style.color = textColor;
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.padding = '14.5px';
|
||||
tooltipEl.style.pointerEvents = 'none';
|
||||
tooltipEl.style.position = 'absolute';
|
||||
tooltipEl.style.transform = 'translate(-50%, 0)';
|
||||
tooltipEl.style.transition = 'all .2s ease';
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
plugins: {
|
||||
chartAreaBorder: {
|
||||
borderColor: 'red',
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
borderDashOffset: 2
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
padding: 5,
|
||||
position: 'nearest',
|
||||
external: function (context) {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (tooltip.body) {
|
||||
const bodyLines = tooltip.body.map((b) => {
|
||||
const strArr = b.lines[0].split(':');
|
||||
const data = {
|
||||
text: strArr[0].trim(),
|
||||
value: strArr[1].trim()
|
||||
};
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// Clear old content
|
||||
tooltipEl.innerHTML = '';
|
||||
bodyLines.forEach((body, i) => {
|
||||
const text = document.createElement('div');
|
||||
|
||||
text.appendChild(document.createTextNode('$' + body.value + 'K'));
|
||||
text.style.fontWeight = '500';
|
||||
text.style.lineHeight = '21px';
|
||||
text.style.fontSize = '14px';
|
||||
tooltipEl.appendChild(text);
|
||||
});
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
border: {
|
||||
display: false
|
||||
},
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: borderColor,
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
setLineChartData() {
|
||||
const darkMode = this.$appState.darkTheme;
|
||||
|
||||
return {
|
||||
labels: ['31', '1', '2', '3', '4', '5', '6', '7', '8'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First Dataset',
|
||||
data: [60, 64, 57, 52, 58, 70, 75, 70, 60],
|
||||
fill: true,
|
||||
borderColor: '#16A34A',
|
||||
tension: 0.4,
|
||||
borderWidth: 1.5,
|
||||
pointBackgroundColor: '#16A34A',
|
||||
pointBorderColor: darkMode ? '#09090B' : '#FFF',
|
||||
pointBorderWidth: 3,
|
||||
|
||||
hideInLegendAndTooltip: false,
|
||||
pointStyle: function (context) {
|
||||
let index = context.dataIndex;
|
||||
|
||||
if (index == 6) {
|
||||
return 'circle';
|
||||
} else {
|
||||
return 'line';
|
||||
}
|
||||
},
|
||||
pointRadius: function (context) {
|
||||
let index = context.dataIndex;
|
||||
|
||||
if (index == 6) {
|
||||
return 6;
|
||||
} else {
|
||||
return 0.1;
|
||||
}
|
||||
},
|
||||
backgroundColor: (context) => {
|
||||
const bgColor = ['rgba(22,163,74,0.16)', 'rgba(22,163,74,0)'];
|
||||
|
||||
if (!context.chart.chartArea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
ctx,
|
||||
data,
|
||||
chartArea: { top, bottom }
|
||||
} = context.chart;
|
||||
const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
|
||||
const colorTranches = 1 / (bgColor.length - 1);
|
||||
|
||||
for (let i = 0; i < bgColor.length; i++) {
|
||||
gradientBg.addColorStop(0 + i * colorTranches, bgColor[i]);
|
||||
}
|
||||
|
||||
return gradientBg;
|
||||
}
|
||||
}
|
||||
],
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top'
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
setLineChartOptions() {
|
||||
const darkMode = this.$appState.darkTheme;
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
|
||||
const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
|
||||
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||||
const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
|
||||
const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
|
||||
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add('chartjs-tooltip');
|
||||
tooltipEl.style.backgroundColor = backgroundColor;
|
||||
tooltipEl.style.boxShadow =
|
||||
' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
|
||||
tooltipEl.style.borderRadius = '7px';
|
||||
tooltipEl.style.color = textColor;
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.padding = '2px';
|
||||
tooltipEl.style.pointerEvents = 'none';
|
||||
tooltipEl.style.position = 'absolute';
|
||||
tooltipEl.style.transform = 'translate(-50%, 0)';
|
||||
tooltipEl.style.transition = 'all .2s ease';
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
plugins: {
|
||||
chartAreaBorder: {
|
||||
borderColor: 'red',
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
borderDashOffset: 2
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
padding: 8,
|
||||
position: 'nearest',
|
||||
external: function (context) {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (tooltip.body) {
|
||||
const bodyLines = tooltip.body.map((b) => {
|
||||
const strArr = b.lines[0].split(':');
|
||||
const data = {
|
||||
text: strArr[0].trim(),
|
||||
value: strArr[1].trim()
|
||||
};
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// Clear old content
|
||||
tooltipEl.innerHTML = '';
|
||||
bodyLines.forEach((body, i) => {
|
||||
const text = document.createElement('div');
|
||||
|
||||
text.appendChild(document.createTextNode(body.value + '.000'));
|
||||
text.style.fontWeight = '500';
|
||||
text.style.lineHeight = '21px';
|
||||
text.style.fontSize = '14px';
|
||||
tooltipEl.appendChild(text);
|
||||
});
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = positionY + tooltip.caretY - 40 + 'px';
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
grace: 14
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -93,216 +93,29 @@
|
|||
<Column field="more" header="More">
|
||||
<template #body>
|
||||
<div class="flex justify-end w-full">
|
||||
<Button @click="visibleRight = true" icon="pi pi-ellipsis-h" rounded outlined severity="secondary" />
|
||||
<Button @click="displayPopover" icon="pi pi-search" rounded outlined severity="secondary" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<Popover ref="op">
|
||||
<div class="flex gap-2">
|
||||
<Button label="Details" size="small" outlined @click="hidePopover"></Button>
|
||||
<Button label="Delete" severity="danger" size="small" outlined @click="hidePopover"></Button>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<Drawer
|
||||
v-model:visible="visibleRight"
|
||||
:containerVisible="true"
|
||||
header="Right Sidebar"
|
||||
position="right"
|
||||
closeIcon="pi pi-sign-out"
|
||||
:pt="{
|
||||
root: {
|
||||
class: '!max-w-2xl !w-full !h-screen rounded-l-2xl'
|
||||
},
|
||||
footer: {
|
||||
class: 'hidden'
|
||||
},
|
||||
content: {
|
||||
class: 'flex-1 flex flex-col'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #container="">
|
||||
<div class="flex flex-col h-screen overflow-auto">
|
||||
<div class="">
|
||||
<div class="flex align-items-center gap-3 p-6">
|
||||
<Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="large" class="rounded-xl overflow-hidden" />
|
||||
<div class="flex-1">
|
||||
<div class="leading-6 text-color font-medium">Brook Simmons</div>
|
||||
<div class="mt-1 leading-5 text-muted-color text-sm">Sales Executive</div>
|
||||
</div>
|
||||
<Button icon="pi pi-sign-out" text rounded severity="secondary" />
|
||||
</div>
|
||||
<SelectButton
|
||||
v-model="selectedSidebarOption"
|
||||
:options="sidebarOptions"
|
||||
:pt="{
|
||||
root: {
|
||||
class: 'px-6 py-3 w-full'
|
||||
},
|
||||
pcButton: {
|
||||
root: {
|
||||
class: 'flex-1 py-2.5'
|
||||
},
|
||||
label: {
|
||||
class: 'text-sm'
|
||||
}
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Interaction Logs'" class="h-[calc(100%-172px)] flex flex-col gap-4 p-6">
|
||||
<div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="leading-6 font-medium text-color">Call Logs</div>
|
||||
<Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
|
||||
<div v-for="(data, index) of callLogs" :key="index" class="flex items-center gap-3 p-2">
|
||||
<OverlayBadge severity="success" class="w-fit">
|
||||
<Avatar :image="data.image" size="small" class="rounded-md w-10 h-10 overflow-hidden flex" />
|
||||
</OverlayBadge>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="text-sm leading-5 font-medium text-color">{{ data.name }}</div>
|
||||
<div class="mt-1 text-sm leading-5 text-muted-color">{{ data.time }}</div>
|
||||
</div>
|
||||
<Button icon="pi pi-phone text-sm" text class="bg-primary/10 dark:bg-primary/20 w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="leading-6 font-medium text-color">Email Records</div>
|
||||
<Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all" severity="secondary" text />
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 flex flex-col rounded-lg overflow-hidden divide-y divide-surface-200 dark:divide-surface-800">
|
||||
<div v-for="(data, index) of emailRecords" :key="index" class="flex items-center gap-3 p-2">
|
||||
<OverlayBadge severity="danger" class="w-fit">
|
||||
<Avatar :image="data.image" size="small" class="rounded-md overflow-hidden w-10 h-10 flex" />
|
||||
</OverlayBadge>
|
||||
<div class="w-1/5 text-sm leading-5 font-medium text-color">{{ data.name }}</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-sm leading-5 font-medium text-color line-clamp-2">
|
||||
{{ data.title }}
|
||||
<span class="text-muted-color">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/6 text-sm leading-5 text-muted-color text-right">{{ data.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1/3 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="leading-6 font-medium text-color">Meeting Notes</div>
|
||||
<Button icon="pi pi-download text-sm" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900 hover:opacity-75 transition-all leading-none" severity="secondary" text />
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col rounded-lg overflow-hidden">
|
||||
<div class="flex items-start justify-between gap-1">
|
||||
<div class="text-sm text-color font-medium max-w-60">Subject: Meeting Wrap-up & Action Items: Jacob Jones</div>
|
||||
<div class="text-sm text-muted-color">February 14, 2024 / 2:00 PM</div>
|
||||
</div>
|
||||
<div class="text-sm text-muted-color mt-6">
|
||||
Here's a quick review of our meeting with Brook Simmons and next steps. Summary:
|
||||
<br />
|
||||
<ul class="list-disc pl-5">
|
||||
<li>Reviewed our SaaS solution and its features.</li>
|
||||
<li>Arlene McCoy intrigued by user experience potential.</li>
|
||||
<li>Voiced concerns on integration with current system.Action Items:</li>
|
||||
</ul>
|
||||
Demo: Schedule product demo with Arlene McCoy. (Assigned to: Jerome Bell)<br /><br />
|
||||
Integration Blueprint: Draft and deliver technical blueprint. (Assigned to: Cameron Williamson)<br /><br />
|
||||
Follow-up Meeting: Arrange to discuss any queries post-demo. (Assigned to: Dianne Russell)
|
||||
<br /><br />
|
||||
Please act on these items promptly.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Preferences'" class="h-[calc(100%-72px)] flex flex-col gap-4 p-6">
|
||||
<div v-for="(data, i) of preferences" :key="i" class="h-1/4 flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="leading-6 font-medium text-color p-2">{{ data.title }}</div>
|
||||
<div class="overflow-y-auto flex-1 bg-surface-0 dark:bg-surface-900 mt-2 p-4 flex flex-col gap-3 rounded-lg">
|
||||
<div v-for="(pref, j) of data.prefs" :key="j" class="flex items-center gap-2">
|
||||
<i class="text-lg text-color" :class="pref.icon"></i>
|
||||
<div class="font-medium text-color flex-1">{{ pref.title }}</div>
|
||||
<ToggleSwitch v-model="pref.checked" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Opportunities'" class="grid grid-cols-2 gap-6 p-6">
|
||||
<div v-for="(data, i) of opportunities" :key="i" class="flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="font-medium text-color mt-0.5">{{ data.title }}</div>
|
||||
<NuxtLink :to="data.link" target="_blank" rel="noopener">
|
||||
<Button icon="pi pi-arrow-up-right text-sm !leading-none" class="w-8 h-8 !border-surface !bg-surface-0 dark:!bg-surface-900" severity="secondary" text />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<img class="w-full rounded-lg mt-2 block" :src="data.image" alt="Opportunutiy Image" />
|
||||
<div class="flex-1 mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 text-xs text-color">
|
||||
{{ data.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedSidebarOption === 'Statistics'" class="h-[calc(100%-160px)] p-6">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="font-medium text-color p-2">Customer Satisfaction Score</div>
|
||||
</div>
|
||||
<div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Knob v-model="customerSatisfaction" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="font-medium text-color p-2">Estimated Lifetime Value</div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center gap-2 justify-center mt-2 p-2 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">$</div>
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">272</div>
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">123</div>
|
||||
<div class="font-semibold text-lg leading-none text-color border border-surface py-3.5 px-2 rounded-lg">000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="font-medium text-color p-2">Product Usage</div>
|
||||
</div>
|
||||
<div class="flex-1 mt-2 py-4 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Chart type="line" :data="lineChartData" :options="lineChartOptions" class="min-h-44 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="font-medium text-color p-2">Churn Risk</div>
|
||||
<div class="flex-1 py-4 mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Knob v-model="churnRisk" :size="150" :strokeWidth="8" valueTemplate="{value}%" class="pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 w-full flex flex-col p-3 rounded-xl bg-emphasis">
|
||||
<div class="font-medium text-color p-2">Total Purchases</div>
|
||||
<div class="flex-1 py-4 px-2 w-full mt-2 flex items-center justify-center rounded-lg bg-surface-0 dark:bg-surface-900 shadow-sm">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-60 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
export default {
|
||||
name: 'Inbox',
|
||||
redrawListener: null,
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
lineChartData: {},
|
||||
lineChartOptions: {},
|
||||
chartData: {},
|
||||
chartOptions: {},
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -433,494 +246,21 @@ export default {
|
|||
<path d="M9.79907 18.5C4.82851 18.5 0.799072 14.4706 0.799072 9.5C5.76963 9.5 9.79907 13.5294 9.79907 18.5Z" />
|
||||
</svg>`
|
||||
},
|
||||
selectedRows: [],
|
||||
visibleRight: false,
|
||||
selectedSidebarOption: 'Statistics',
|
||||
sidebarOptions: ['Interaction Logs', 'Preferences', 'Statistics', 'Opportunities'],
|
||||
callLogs: [
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar6.png', name: 'Brook Simmons', time: '02.02.2024 | 45 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar12.jpg', name: 'Jacob Jones', time: '02.02.2024 | 45 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg', name: 'Annette Black', time: '02.03.2024 | 13 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar9.jpg', name: 'Arlene McCoy', time: '02.03.2024 | 14 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar10.jpg', name: 'Arlene Simmons', time: '02.03.2024 | 14 min' },
|
||||
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg', name: 'Michael Brown', time: '02.04.2024 | 20 min' }
|
||||
],
|
||||
emailRecords: [
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
|
||||
name: 'Brook Simmons',
|
||||
time: '3:24 PM',
|
||||
title: 'Unleash Business Potential',
|
||||
text: 'Automate, analyze, and accelerate with our SaaS platform. Unshackle from mundane tasks and focus on scaling your business. Contact us for a demo today!'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar7.png',
|
||||
name: 'Jacob Jones',
|
||||
time: '12.23.2023',
|
||||
title: 'Optimized Workflow Revolution ',
|
||||
text: "Experience a workflow revolution with our intuitive SaaS tool. With enhanced features and optimized processes, it's efficiency like never before. Let's get in touch for a brief demo!"
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar8.png',
|
||||
name: 'Annette Black',
|
||||
time: '12.17.2023',
|
||||
title: 'Innovation at Fingertips',
|
||||
text: 'With our SaaS solution, innovation is only a click away. Shape your future with pioneering features and minimalist design. Join us for your solution walk-through today!'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg',
|
||||
name: 'Arlene McCoy',
|
||||
time: '06.17.2023',
|
||||
title: 'Seamless Integration',
|
||||
text: 'Integrate effortlessly with our user-friendly SaaS tools. Streamline your operations and boost productivity. Discover more in our demo session.'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar13.jpg',
|
||||
name: 'Arlene Simmons',
|
||||
time: '04.17.2023',
|
||||
title: 'Transform Your Business',
|
||||
text: 'Empower your team with our innovative SaaS solutions. Achieve unparalleled efficiency and drive growth. Book a demo to explore the possibilities.'
|
||||
},
|
||||
{
|
||||
image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar2.png',
|
||||
name: 'Michael Brown',
|
||||
time: '01.05.2024',
|
||||
title: 'Next-Gen Collaboration',
|
||||
text: 'Experience the future of collaboration with our cutting-edge SaaS platform. Enhance teamwork and streamline communication. Contact us for a demo today!'
|
||||
}
|
||||
],
|
||||
preferences: [
|
||||
{
|
||||
title: 'Email',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-bell', title: 'Notification', checked: true },
|
||||
{ icon: 'pi pi-inbox', title: 'Newsletter', checked: false },
|
||||
{ icon: 'pi pi-sync', title: 'Product Updates', checked: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Telephone',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-mobile', title: 'Phone Call', checked: true },
|
||||
{ icon: 'pi pi-volume-down', title: 'Voicemail', checked: false },
|
||||
{ icon: 'pi pi-comments', title: 'SMS text', checked: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Social Media',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-clock', title: 'Automated Post', checked: true },
|
||||
{ icon: 'pi pi-user', title: 'Direct Message', checked: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Data Privacy',
|
||||
prefs: [
|
||||
{ icon: 'pi pi-box', title: 'Share Data with 3rd Parties', checked: true },
|
||||
{ icon: 'pi pi-file', title: 'Cookies', checked: false }
|
||||
]
|
||||
}
|
||||
],
|
||||
opportunities: [
|
||||
{
|
||||
title: 'Apollo',
|
||||
link: 'https://primevue.org/templates/apollo/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg',
|
||||
text: 'Keep your application fresh with Apollo, the newest and most modern template available.'
|
||||
},
|
||||
{
|
||||
title: 'Ultima',
|
||||
link: 'https://primevue.org/templates/ultima/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg',
|
||||
text: "Elevate your application's intuitiveness with Ultima's premium Material Design interface."
|
||||
},
|
||||
{
|
||||
title: 'Diamond',
|
||||
link: 'https://primevue.org/templates/diamond/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg',
|
||||
text: "Handle complex operations with elegance with Diamond's robust and powerful premium design."
|
||||
},
|
||||
{
|
||||
title: 'Atlantis',
|
||||
link: 'https://primevue.org/templates/atlantis/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg',
|
||||
text: "Boost your application's capabilities, customization with the Atlantis template."
|
||||
},
|
||||
{
|
||||
title: 'Verona',
|
||||
link: 'https://primevue.org/templates/verona/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg',
|
||||
text: "Achieve sophistication and subtlety with Verona's minimalistic, content-focused design."
|
||||
},
|
||||
{
|
||||
title: 'Freya',
|
||||
link: 'https://primevue.org/templates/freya/',
|
||||
image: 'https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png',
|
||||
text: "Give your application a sleek, updated look with Freya's chic and modern premium template."
|
||||
}
|
||||
],
|
||||
customerSatisfaction: 56,
|
||||
churnRisk: 24
|
||||
selectedRows: []
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventBus.off('dark-mode-toggle-complete', this.redrawListener);
|
||||
EventBus.off('theme-palette-change', this.redrawListener);
|
||||
},
|
||||
mounted() {
|
||||
this.chartData = this.setChartData();
|
||||
this.chartOptions = this.setChartOptions();
|
||||
this.lineChartData = this.setLineChartData();
|
||||
this.lineChartOptions = this.setLineChartOptions();
|
||||
|
||||
this.redrawListener = () => {
|
||||
this.chartOptions = this.setChartOptions();
|
||||
this.chartData = this.setChartData();
|
||||
this.lineChartData = this.setLineChartData();
|
||||
this.lineChartOptions = this.setLineChartOptions();
|
||||
};
|
||||
|
||||
EventBus.on('theme-palette-change', this.redrawListener);
|
||||
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.menu.toggle(event);
|
||||
displayPopover(event) {
|
||||
this.hidePopover();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.op.show(event);
|
||||
});
|
||||
},
|
||||
setChartData() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
|
||||
const hoverBackgroundColor = documentStyle.getPropertyValue('--p-primary-color');
|
||||
|
||||
return {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
datasets: [
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Investment Wallet',
|
||||
backgroundColor: borderColor,
|
||||
data: [100, 201, 404, 300, 140, 220, 314, 520, 145, 234, 325, 147],
|
||||
borderRadius: {
|
||||
topLeft: 4,
|
||||
topRight: 4
|
||||
},
|
||||
borderSkipped: true,
|
||||
barThickness: 20,
|
||||
hoverBackgroundColor: hoverBackgroundColor,
|
||||
hoverTransition: '1s ease all'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
setChartOptions() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
|
||||
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||||
const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
|
||||
const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
|
||||
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add('chartjs-tooltip');
|
||||
tooltipEl.style.backgroundColor = backgroundColor;
|
||||
tooltipEl.style.boxShadow =
|
||||
' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
|
||||
tooltipEl.style.borderRadius = '7px';
|
||||
tooltipEl.style.color = textColor;
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.padding = '14.5px';
|
||||
tooltipEl.style.pointerEvents = 'none';
|
||||
tooltipEl.style.position = 'absolute';
|
||||
tooltipEl.style.transform = 'translate(-50%, 0)';
|
||||
tooltipEl.style.transition = 'all .2s ease';
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
plugins: {
|
||||
chartAreaBorder: {
|
||||
borderColor: 'red',
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
borderDashOffset: 2
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
padding: 5,
|
||||
position: 'nearest',
|
||||
external: function (context) {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (tooltip.body) {
|
||||
const bodyLines = tooltip.body.map((b) => {
|
||||
const strArr = b.lines[0].split(':');
|
||||
const data = {
|
||||
text: strArr[0].trim(),
|
||||
value: strArr[1].trim()
|
||||
};
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// Clear old content
|
||||
tooltipEl.innerHTML = '';
|
||||
bodyLines.forEach((body, i) => {
|
||||
const text = document.createElement('div');
|
||||
|
||||
text.appendChild(document.createTextNode('$' + body.value + 'K'));
|
||||
text.style.fontWeight = '500';
|
||||
text.style.lineHeight = '21px';
|
||||
text.style.fontSize = '14px';
|
||||
tooltipEl.appendChild(text);
|
||||
});
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
border: {
|
||||
display: false
|
||||
},
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: borderColor,
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
setLineChartData() {
|
||||
const darkMode = this.$appState.darkTheme;
|
||||
|
||||
return {
|
||||
labels: ['31', '1', '2', '3', '4', '5', '6', '7', '8'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First Dataset',
|
||||
data: [60, 64, 57, 52, 58, 70, 75, 70, 60],
|
||||
fill: true,
|
||||
borderColor: '#16A34A',
|
||||
tension: 0.4,
|
||||
borderWidth: 1.5,
|
||||
pointBackgroundColor: '#16A34A',
|
||||
pointBorderColor: darkMode ? '#09090B' : '#FFF',
|
||||
pointBorderWidth: 3,
|
||||
|
||||
hideInLegendAndTooltip: false,
|
||||
pointStyle: function (context) {
|
||||
let index = context.dataIndex;
|
||||
|
||||
if (index == 6) {
|
||||
return 'circle';
|
||||
} else {
|
||||
return 'line';
|
||||
}
|
||||
},
|
||||
pointRadius: function (context) {
|
||||
let index = context.dataIndex;
|
||||
|
||||
if (index == 6) {
|
||||
return 6;
|
||||
} else {
|
||||
return 0.1;
|
||||
}
|
||||
},
|
||||
backgroundColor: (context) => {
|
||||
const bgColor = ['rgba(22,163,74,0.16)', 'rgba(22,163,74,0)'];
|
||||
|
||||
if (!context.chart.chartArea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
ctx,
|
||||
data,
|
||||
chartArea: { top, bottom }
|
||||
} = context.chart;
|
||||
const gradientBg = ctx.createLinearGradient(0, top, 0, bottom);
|
||||
const colorTranches = 1 / (bgColor.length - 1);
|
||||
|
||||
for (let i = 0; i < bgColor.length; i++) {
|
||||
gradientBg.addColorStop(0 + i * colorTranches, bgColor[i]);
|
||||
}
|
||||
|
||||
return gradientBg;
|
||||
}
|
||||
}
|
||||
],
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top'
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
setLineChartOptions() {
|
||||
const darkMode = this.$appState.darkTheme;
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
|
||||
const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
|
||||
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||||
const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
|
||||
const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
|
||||
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add('chartjs-tooltip');
|
||||
tooltipEl.style.backgroundColor = backgroundColor;
|
||||
tooltipEl.style.boxShadow =
|
||||
' 0px 33.12px 9.399px 0px rgba(0, 0, 0, 0.00), 0px 21.036px 8.504px 0px rgba(0, 0, 0, 0.01), 0px 12.084px 7.161px 0px rgba(0, 0, 0, 0.05), 0px 5.371px 5.371px 0px rgba(0, 0, 0, 0.09), 0px 1.343px 2.685px 0px rgba(0, 0, 0, 0.10)';
|
||||
tooltipEl.style.borderRadius = '7px';
|
||||
tooltipEl.style.color = textColor;
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.padding = '2px';
|
||||
tooltipEl.style.pointerEvents = 'none';
|
||||
tooltipEl.style.position = 'absolute';
|
||||
tooltipEl.style.transform = 'translate(-50%, 0)';
|
||||
tooltipEl.style.transition = 'all .2s ease';
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
plugins: {
|
||||
chartAreaBorder: {
|
||||
borderColor: 'red',
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
borderDashOffset: 2
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
padding: 8,
|
||||
position: 'nearest',
|
||||
external: function (context) {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (tooltip.body) {
|
||||
const bodyLines = tooltip.body.map((b) => {
|
||||
const strArr = b.lines[0].split(':');
|
||||
const data = {
|
||||
text: strArr[0].trim(),
|
||||
value: strArr[1].trim()
|
||||
};
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// Clear old content
|
||||
tooltipEl.innerHTML = '';
|
||||
bodyLines.forEach((body, i) => {
|
||||
const text = document.createElement('div');
|
||||
|
||||
text.appendChild(document.createTextNode(body.value + '.000'));
|
||||
text.style.fontWeight = '500';
|
||||
text.style.lineHeight = '21px';
|
||||
text.style.fontSize = '14px';
|
||||
tooltipEl.appendChild(text);
|
||||
});
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = positionY + tooltip.caretY - 40 + 'px';
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
color: textMutedColor
|
||||
},
|
||||
grid: {
|
||||
color: 'transparent',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
grace: 14
|
||||
}
|
||||
}
|
||||
};
|
||||
hidePopover() {
|
||||
this.$refs.op.hide();
|
||||
}
|
||||
},
|
||||
components: {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Accordion value="0">
|
||||
<AccordionPanel value="0">
|
||||
|
|
|
|||
|
|
@ -2,10 +2,20 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
|
||||
<label for="ac">Float Label</label>
|
||||
<AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -15,21 +25,43 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
items: [],
|
||||
code: {
|
||||
basic: `
|
||||
<FloatLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
|
||||
<label for="ac">Float Label</label>
|
||||
<AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
|
||||
<label for="ac">Float Label</label>
|
||||
<AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -38,7 +70,9 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
items: []
|
||||
};
|
||||
},
|
||||
|
|
@ -52,10 +86,20 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
|
||||
<label for="ac">Float Label</label>
|
||||
<AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -63,7 +107,9 @@ export default {
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref("");
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const value3 = ref('');
|
||||
const items = ref([]);
|
||||
|
||||
const search = (event) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="ac">Identifier</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
items: [],
|
||||
code: {
|
||||
basic: `
|
||||
<IftaLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="ac">Identifier</label>
|
||||
</IftaLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="ac">Identifier</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
items: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search(event) {
|
||||
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
|
||||
<label for="ac">Identifier</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref("");
|
||||
const items = ref([]);
|
||||
|
||||
const search = (event) => {
|
||||
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search(event) {
|
||||
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,8 +2,9 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
|
||||
<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -12,16 +13,19 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
items: [],
|
||||
code: {
|
||||
basic: `
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''"/>
|
||||
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
|
||||
<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''"/>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
|
||||
<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,7 +33,8 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
items: []
|
||||
};
|
||||
},
|
||||
|
|
@ -43,15 +48,17 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''"/>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
|
||||
<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref("");
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const items = ref([]);
|
||||
|
||||
const search = (event) => {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/autocomplete.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
items: [],
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('AutoComplete'),
|
||||
key: 'AutoComplete'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search(event) {
|
||||
let _items = [...Array(10).keys()];
|
||||
|
||||
this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.autocomplete',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/avatar.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<AvatarGroup>
|
||||
<Avatar label="P" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center" size="xlarge" shape="circle" />
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Avatar'),
|
||||
key: 'Avatar'
|
||||
},
|
||||
{
|
||||
data: getPTOptions('AvatarGroup'),
|
||||
key: 'AvatarGroup'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.avatar',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/badge.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<Badge value="2"></Badge>
|
||||
<OverlayBadge value="3">
|
||||
<i class="pi pi-bell" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Badge'),
|
||||
key: 'Badge'
|
||||
},
|
||||
{
|
||||
data: getPTOptions('OverlayBadge'),
|
||||
key: 'OverlayBadge'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.badge',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/blockui.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<BlockUI blocked>
|
||||
<Panel header="Basic">
|
||||
<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>
|
||||
</Panel>
|
||||
</BlockUI>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('BlockUI'),
|
||||
key: 'BlockUI'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.blockui',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<DocPTViewer :docs="docs">
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
|
@ -15,7 +14,7 @@ export default {
|
|||
icon: 'pi pi-home'
|
||||
},
|
||||
items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
|
||||
ptViewerDoc: [
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Breadcrumb'),
|
||||
key: 'Breadcrumb'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Custom content inside a button is defined as children.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Button outlined class="border-2">
|
||||
<Button outlined class="!border-2">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button outlined class="border-2">
|
||||
<Button outlined class="!border-2">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="..." fill="var(--p-primary-color)" />
|
||||
<path d="..." fill="var(--p-text-color)" />
|
||||
|
|
@ -35,7 +35,7 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button outlined class="border-2">
|
||||
<Button outlined class="!border-2">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||
|
|
@ -56,7 +56,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button outlined class="border-2">
|
||||
<Button outlined class="!border-2">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/button.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<Button label="Profile" icon="pi pi-user" severity="secondary" badge="2" badgeSeverity="contrast" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Button'),
|
||||
key: 'Button'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.button',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Card style="width: 25rem">
|
||||
<template #title>Advanced Card</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<Carousel :value="products" :numVisible="1" :numScroll="1" :responsiveOptions="responsiveOptions" class="!w-3/4 !p-2">
|
||||
<template #item="slotProps">
|
||||
<div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
|
||||
<div class="mb-4">
|
||||
<div class="relative mx-auto">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
|
||||
</div>
|
||||
</div>
|
||||
<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 />
|
||||
<Button icon="pi pi-shopping-cart" class="ml-2" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1400px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 3,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
],
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Carousel'),
|
||||
key: 'Carousel'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
|
||||
},
|
||||
methods: {
|
||||
getSeverity(status) {
|
||||
switch (status) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warn';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.carousel',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -93,13 +93,13 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -191,7 +191,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
|
||||
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -14,12 +14,12 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
|
||||
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
|
||||
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
|
||||
<CascadeSelect disabled placeholder="Disabled" class="w-56" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -90,13 +90,13 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -188,7 +188,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,20 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<FloatLabel>
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<label for="cs-city">City</label>
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56" variant="in">
|
||||
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56" variant="on">
|
||||
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -15,7 +25,9 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
@ -92,19 +104,37 @@ export default {
|
|||
],
|
||||
code: {
|
||||
basic: `
|
||||
<FloatLabel>
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<label for="cs-city">City</label>
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<FloatLabel>
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<label for="cs-city">City</label>
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -113,7 +143,9 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
@ -195,11 +227,20 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<FloatLabel>
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<label for="cs-city">City</label>
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -207,7 +248,9 @@ export default {
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCity = ref();
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
const countries = ref([
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="cs_city">City</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{ cname: 'Sydney', code: 'A-SY' },
|
||||
{ cname: 'Newcastle', code: 'A-NE' },
|
||||
{ cname: 'Wollongong', code: 'A-WO' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{ cname: 'Brisbane', code: 'A-BR' },
|
||||
{ cname: 'Townsville', code: 'A-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{ cname: 'Montreal', code: 'C-MO' },
|
||||
{ cname: 'Quebec City', code: 'C-QU' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{ cname: 'Ottawa', code: 'C-OT' },
|
||||
{ cname: 'Toronto', code: 'C-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{ cname: 'Los Angeles', code: 'US-LA' },
|
||||
{ cname: 'San Diego', code: 'US-SD' },
|
||||
{ cname: 'San Francisco', code: 'US-SF' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{ cname: 'Jacksonville', code: 'US-JA' },
|
||||
{ cname: 'Miami', code: 'US-MI' },
|
||||
{ cname: 'Tampa', code: 'US-TA' },
|
||||
{ cname: 'Orlando', code: 'US-OR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{ cname: 'Austin', code: 'US-AU' },
|
||||
{ cname: 'Dallas', code: 'US-DA' },
|
||||
{ cname: 'Houston', code: 'US-HO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<IftaLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="cs_city">City</label>
|
||||
</IftaLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="cs_city">City</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{ cname: 'Sydney', code: 'A-SY' },
|
||||
{ cname: 'Newcastle', code: 'A-NE' },
|
||||
{ cname: 'Wollongong', code: 'A-WO' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{ cname: 'Brisbane', code: 'A-BR' },
|
||||
{ cname: 'Townsville', code: 'A-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{ cname: 'Montreal', code: 'C-MO' },
|
||||
{ cname: 'Quebec City', code: 'C-QU' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{ cname: 'Ottawa', code: 'C-OT' },
|
||||
{ cname: 'Toronto', code: 'C-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{ cname: 'Los Angeles', code: 'US-LA' },
|
||||
{ cname: 'San Diego', code: 'US-SD' },
|
||||
{ cname: 'San Francisco', code: 'US-SF' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{ cname: 'Jacksonville', code: 'US-JA' },
|
||||
{ cname: 'Miami', code: 'US-MI' },
|
||||
{ cname: 'Tampa', code: 'US-TA' },
|
||||
{ cname: 'Orlando', code: 'US-OR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{ cname: 'Austin', code: 'US-AU' },
|
||||
{ cname: 'Dallas', code: 'US-DA' },
|
||||
{ cname: 'Houston', code: 'US-HO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel class="w-full md:w-56">
|
||||
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
|
||||
<label for="cs_city">City</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCity = ref();
|
||||
const countries = ref([
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{ cname: 'Sydney', code: 'A-SY' },
|
||||
{ cname: 'Newcastle', code: 'A-NE' },
|
||||
{ cname: 'Wollongong', code: 'A-WO' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{ cname: 'Brisbane', code: 'A-BR' },
|
||||
{ cname: 'Townsville', code: 'A-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{ cname: 'Montreal', code: 'C-MO' },
|
||||
{ cname: 'Quebec City', code: 'C-QU' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{ cname: 'Ottawa', code: 'C-OT' },
|
||||
{ cname: 'Toronto', code: 'C-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{ cname: 'Los Angeles', code: 'US-LA' },
|
||||
{ cname: 'San Diego', code: 'US-SD' },
|
||||
{ cname: 'San Francisco', code: 'US-SF' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{ cname: 'Jacksonville', code: 'US-JA' },
|
||||
{ cname: 'Miami', code: 'US-MI' },
|
||||
{ cname: 'Tampa', code: 'US-TA' },
|
||||
{ cname: 'Orlando', code: 'US-OR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{ cname: 'Austin', code: 'US-AU' },
|
||||
{ cname: 'Dallas', code: 'US-DA' },
|
||||
{ cname: 'Houston', code: 'US-HO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,8 +2,19 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
|
||||
<CascadeSelect
|
||||
v-model="selectedCity2"
|
||||
:invalid="!selectedCity2"
|
||||
:options="countries"
|
||||
optionLabel="cname"
|
||||
optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']"
|
||||
class="w-full sm:w-56"
|
||||
placeholder="Select a City"
|
||||
variant="filled"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -12,7 +23,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
@ -89,14 +101,20 @@ export default {
|
|||
],
|
||||
code: {
|
||||
basic: `
|
||||
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
|
||||
<CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
|
||||
</div>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
|
||||
<CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -104,7 +122,8 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
@ -186,16 +205,19 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
|
||||
<CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCity = ref();
|
||||
const selectedCity1 = ref(null);
|
||||
const selectedCity2 = ref(null);
|
||||
const countries = ref([
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Loading state can be used <i>loading</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
|
||||
<CascadeSelect loading placeholder="Loading..." class="w-56" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -14,12 +14,12 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
|
||||
<CascadeSelect loading placeholder="Loading..." class="w-56" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
|
||||
<CascadeSelect loading placeholder="Loading..." class="w-56" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
|
||||
<CascadeSelect loading placeholder="Loading..." class="w-56" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
CascadeSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
|
||||
required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
|
||||
Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>dropdownicon</i>,
|
||||
<i>loadingicon</i>, and <i>optiongroupicon</i> slots are provided for further customization.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center">
|
||||
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
|
||||
|
|
@ -15,6 +15,9 @@
|
|||
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #dropdownicon>
|
||||
<i class="pi pi-map-marker"></i>
|
||||
</template>
|
||||
</CascadeSelect>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -102,7 +105,7 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center">
|
||||
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
|
||||
|
|
@ -111,13 +114,16 @@ export default {
|
|||
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #dropdownicon>
|
||||
<i class="pi pi-map-marker"></i>
|
||||
</template>
|
||||
</CascadeSelect>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center">
|
||||
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
|
||||
|
|
@ -126,6 +132,9 @@ export default {
|
|||
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #dropdownicon>
|
||||
<i class="pi pi-map-marker"></i>
|
||||
</template>
|
||||
</CascadeSelect>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -218,7 +227,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
|
||||
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center">
|
||||
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
|
||||
|
|
@ -227,6 +236,9 @@ export default {
|
|||
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #dropdownicon>
|
||||
<i class="pi pi-map-marker"></i>
|
||||
</template>
|
||||
</CascadeSelect>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/cascadeselect.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{ cname: 'Sydney', code: 'A-SY' },
|
||||
{ cname: 'Newcastle', code: 'A-NE' },
|
||||
{ cname: 'Wollongong', code: 'A-WO' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{ cname: 'Brisbane', code: 'A-BR' },
|
||||
{ cname: 'Townsville', code: 'A-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{ cname: 'Montreal', code: 'C-MO' },
|
||||
{ cname: 'Quebec City', code: 'C-QU' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{ cname: 'Ottawa', code: 'C-OT' },
|
||||
{ cname: 'Toronto', code: 'C-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{ cname: 'Los Angeles', code: 'US-LA' },
|
||||
{ cname: 'San Diego', code: 'US-SD' },
|
||||
{ cname: 'San Francisco', code: 'US-SF' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{ cname: 'Jacksonville', code: 'US-JA' },
|
||||
{ cname: 'Miami', code: 'US-MI' },
|
||||
{ cname: 'Tampa', code: 'US-TA' },
|
||||
{ cname: 'Orlando', code: 'US-OR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{ cname: 'Austin', code: 'US-AU' },
|
||||
{ cname: 'Dallas', code: 'US-DA' },
|
||||
{ cname: 'Houston', code: 'US-HO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('CascadeSelect'),
|
||||
key: 'CascadeSelect'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.cascadeselect',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<DocPTViewer :docs="docs">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
|
@ -14,7 +13,7 @@ export default {
|
|||
return {
|
||||
chartData: null,
|
||||
chartOptions: null,
|
||||
ptViewerDoc: [
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Chart'),
|
||||
key: 'Chart'
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/checkbox.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Checkbox'),
|
||||
key: 'Checkbox'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.checkbox',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/chip.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
||||
<Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
|
||||
</div>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Chip'),
|
||||
key: 'Chip'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.chip',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/colorpicker.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<ColorPicker v-model="color" inline />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color: null,
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('ColorPicker'),
|
||||
key: 'ColorPicker'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.colorpicker',
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/confirmdialog.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<ConfirmDialog group="ptviewer" pt:mask="!relative" class="!my-auto"></ConfirmDialog>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('ConfirmDialog'),
|
||||
key: 'ConfirmDialog'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$confirm.require({
|
||||
group: 'ptviewer',
|
||||
appendTo: '#doc-ptviewer',
|
||||
modal: false,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectProps: {
|
||||
label: 'Cancel',
|
||||
severity: 'secondary',
|
||||
outlined: true
|
||||
},
|
||||
acceptProps: {
|
||||
label: 'Save'
|
||||
},
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.confirmdialog',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<DocPTViewer :docs="docs">
|
||||
<ConfirmPopup group="ptviewer"></ConfirmPopup>
|
||||
<Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button>
|
||||
</DocPTViewer>
|
||||
|
|
@ -12,7 +11,7 @@ import { getPTOptions } from '@/components/doc/helpers';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
ptViewerDoc: [
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('ConfirmPopup'),
|
||||
key: 'ConfirmPopup'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<DocPTViewer :docs="docs">
|
||||
<img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
|
||||
<ContextMenu ref="menu" appendTo="#logo" :model="items" />
|
||||
</DocPTViewer>
|
||||
|
|
@ -16,7 +15,7 @@ export default {
|
|||
{ label: 'Copy', icon: 'pi pi-copy' },
|
||||
{ label: 'Rename', icon: 'pi pi-file-edit' }
|
||||
],
|
||||
ptViewerDoc: [
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('ContextMenu'),
|
||||
key: 'ContextMenu'
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="card">
|
||||
<DataTable ref="dt" :value="products" tableStyle="min-width: 50rem">
|
||||
<template #header>
|
||||
<div style="text-align: left">
|
||||
<div class="text-end pb-4">
|
||||
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
basic: `
|
||||
<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
|
||||
<template #header>
|
||||
<div style="text-align: left">
|
||||
<div class="text-end pb-4">
|
||||
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -46,7 +46,7 @@ export default {
|
|||
<div>
|
||||
<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
|
||||
<template #header>
|
||||
<div style="text-align: left">
|
||||
<div class="text-end pb-4">
|
||||
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -84,7 +84,7 @@ export default {
|
|||
<div>
|
||||
<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
|
||||
<template #header>
|
||||
<div style="text-align: left">
|
||||
<div class="text-end pb-4">
|
||||
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<DataTable :value="products" tableStyle="min-width: 50rem">
|
||||
<Column field="code" header="Code"></Column>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.datatable',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Row selection with an element inside a column is implemented with templating.</p>
|
||||
</DocSectionText>
|
||||
<DeferredDemo @load="loadDemoData">
|
||||
<div class="card">
|
||||
<DataTable :value="products" tableStyle="min-width: 50rem">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column class="w-24 !text-end">
|
||||
<template #body="{ data }">
|
||||
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</DeferredDemo>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DataTable :value="products" tableStyle="min-width: 50rem">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column class="w-24 !text-end">
|
||||
<template #body="{ data }">
|
||||
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable :value="products" tableStyle="min-width: 50rem">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column class="w-24 !text-end">
|
||||
<template #body="{ data }">
|
||||
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
<Toast/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsMini().then((data) => (this.products = data));
|
||||
},
|
||||
methods: {
|
||||
selectRow(data) {
|
||||
this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable :value="products" tableStyle="min-width: 50rem">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column class="w-24 !text-end">
|
||||
<template #body="{ data }">
|
||||
<Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsMini().then((data) => (products.value = data));
|
||||
});
|
||||
|
||||
const products = ref();
|
||||
const toast = useToast();
|
||||
const selectRow = (data) => {
|
||||
toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
data: `
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadDemoData() {
|
||||
ProductService.getProductsMini().then((data) => (this.products = data));
|
||||
},
|
||||
selectRow(data) {
|
||||
this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -6,13 +6,13 @@
|
|||
<div class="card">
|
||||
<Toolbar class="mb-6">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
|
||||
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
|
||||
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
||||
|
|
@ -183,13 +183,13 @@ export default {
|
|||
basic: `
|
||||
<Toolbar class="mb-6">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
|
||||
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
|
||||
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
||||
|
|
@ -255,13 +255,13 @@ export default {
|
|||
<div class="card">
|
||||
<Toolbar class="mb-6">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
|
||||
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
|
||||
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
||||
|
|
@ -547,13 +547,13 @@ export default {
|
|||
<div class="card">
|
||||
<Toolbar class="mb-6">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
|
||||
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
|
||||
<Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,10 @@
|
|||
<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 gap-4">
|
||||
<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="md:w-40 relative">
|
||||
<img class="rounded w-36" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
|
|
@ -60,9 +58,7 @@ export default {
|
|||
<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="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" />
|
||||
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
<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">
|
||||
|
|
@ -101,9 +97,7 @@ export default {
|
|||
<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="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" />
|
||||
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
<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">
|
||||
|
|
@ -176,9 +170,7 @@ export default {
|
|||
<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="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" />
|
||||
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/dataview.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<DataView :value="products">
|
||||
<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 gap-4">
|
||||
<div class="md:w-40 relative">
|
||||
<img class="rounded w-36" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<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-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
|
||||
<div class="text-lg font-medium mt-2">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="bg-surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="bg-surface-0 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 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:items-end gap-8">
|
||||
<span class="text-xl font-semibold">${{ 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 whitespace-nowrap"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('DataView'),
|
||||
key: 'DataView'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 3)));
|
||||
},
|
||||
methods: {
|
||||
getSeverity(product) {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warn';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.dataview',
|
||||
|
|
|
|||
|
|
@ -2,10 +2,20 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<DatePicker v-model="date" inputId="birth_date" />
|
||||
<label for="birth_date">Birth Date</label>
|
||||
<DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -15,20 +25,42 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
code: {
|
||||
basic: `
|
||||
<FloatLabel>
|
||||
<DatePicker v-model="date" inputId="birth_date" />
|
||||
<label for="birth_date">Birth Date</label>
|
||||
<DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<DatePicker v-model="date" inputId="birth_date" />
|
||||
<label for="birth_date">Birth Date</label>
|
||||
<DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -37,18 +69,30 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null
|
||||
};
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<DatePicker v-model="date" inputId="birth_date" />
|
||||
<label for="birth_date">Birth Date</label>
|
||||
<DatePicker v-model="value1" inputId="over_label" showIcon iconDisplay="input" />
|
||||
<label for="over_label">Over Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<DatePicker v-model="value3" inputId="on_label" showIcon iconDisplay="input" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -56,7 +100,9 @@ export default {
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const date = ref();
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,8 +2,9 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -12,15 +13,18 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
date1: null,
|
||||
date2: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -28,7 +32,8 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null
|
||||
date1: null,
|
||||
date2: null
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -36,15 +41,17 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const date = ref();
|
||||
const date1 = ref(null);
|
||||
const date2 = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<DatePicker v-model="date" showIcon fluid iconDisplay="input" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('DatePicker'),
|
||||
key: 'DatePicker'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.datepicker',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
||||
|
||||
<DeferredContent @load="onImageLoad">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||
</DeferredContent>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<DeferredContent @load="onImageLoad">
|
||||
<img src="/images/nature/nature4.jpg" alt="Nature" />
|
||||
<img src="/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||
</DeferredContent>
|
||||
`,
|
||||
options: `
|
||||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
||||
|
||||
<DeferredContent @load="onImageLoad">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||
</DeferredContent>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -51,7 +51,7 @@ export default {
|
|||
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
||||
|
||||
<DeferredContent @load="onImageLoad">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||
</DeferredContent>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A practical example that loads only when table becomes visible in viewport.</p>
|
||||
<p>A practical example that triggers a fetch when the table becomes visible in viewport.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div style="height: 800px">Scroll down to lazy load a DataTable.</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<DeferredContent>
|
||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<DocPTViewer :docs="docs">
|
||||
<Dialog v-model:visible="visible" appendTo="#doc-ptviewer" header="Edit Profile" maximizable pt:mask="!relative" :draggable="false" class="!my-auto" :style="{ width: '25rem' }">
|
||||
<span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
|
|
@ -28,7 +27,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
visible: true,
|
||||
ptViewerDoc: [
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Dialog'),
|
||||
key: 'Dialog'
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
</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>
|
||||
|
|
@ -50,8 +50,8 @@ export default {
|
|||
</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>
|
||||
|
|
@ -76,8 +76,8 @@ export default {
|
|||
</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>
|
||||
|
|
@ -107,8 +107,8 @@ export default {
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/divider.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores debitis praesentium aliquam.</p>
|
||||
|
||||
<Divider align="left" type="solid">
|
||||
<b>Left</b>
|
||||
</Divider>
|
||||
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
|
||||
|
||||
<Divider align="center" type="dotted">
|
||||
<b>Center</b>
|
||||
</Divider>
|
||||
|
||||
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum saepe eveniet ut et voluptates.</p>
|
||||
|
||||
<Divider align="right" type="dashed">
|
||||
<b>Right</b>
|
||||
</Divider>
|
||||
</div>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Divider'),
|
||||
key: 'Divider'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.divider',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<div class="relative w-full h-[400px]">
|
||||
<DocPTViewer :docs="docs">
|
||||
<div class="relative w-full">
|
||||
<Dock :model="items">
|
||||
<template #itemicon="{ item }">
|
||||
<img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
|
||||
|
|
@ -35,7 +34,7 @@ export default {
|
|||
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
|
||||
}
|
||||
],
|
||||
ptViewerDoc: [
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Dock'),
|
||||
key: 'Dock'
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/sidebar.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs" class="!justify-start">
|
||||
<div class="">
|
||||
<div class="p-drawer p-component h-[450px] w-80" role="complementary" aria-modal="true" data-pc-name="drawer" data-pc-section="root">
|
||||
<span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="firstfocusableelement"></span>
|
||||
<div class="p-drawer-header" data-pc-section="header">
|
||||
<div class="p-drawer-title" data-pc-section="title">Drawer</div>
|
||||
<button
|
||||
class="p-button p-component p-button-icon-only p-button-secondary p-button-rounded p-button-text p-drawer-close-button"
|
||||
type="button"
|
||||
aria-label="Close"
|
||||
data-pc-name="pcclosebutton"
|
||||
data-p-disabled="false"
|
||||
data-p-severity="secondary"
|
||||
data-pc-group-section="iconcontainer"
|
||||
data-pc-extend="button"
|
||||
data-pc-section="root"
|
||||
>
|
||||
<TimesIcon class="p-button-icon" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-drawer-content" data-pc-section="content">
|
||||
<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
|
||||
consequat.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-drawer-footer" data-pc-section="footer">Footer</div>
|
||||
<span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="lastfocusableelement"></span>
|
||||
</div>
|
||||
</div>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import TimesIcon from '@primevue/icons/times';
|
||||
import { markRaw } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true,
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Drawer'),
|
||||
key: 'Drawer'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
components: {
|
||||
TimesIcon: markRaw(TimesIcon)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.drawer',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/editor.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<Editor v-model="value" editorStyle="height: 320px" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Editor'),
|
||||
key: 'Editor'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.editor',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Fieldset legend="Header" toggleable>
|
||||
<p class="m-0">
|
||||
|
|
|
|||
|
|
@ -16,8 +16,12 @@
|
|||
</ProgressBar>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
|
||||
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
|
||||
<div class="flex flex-col gap-8 pt-4">
|
||||
<Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length }" severity="error">
|
||||
{{ message }}
|
||||
</Message>
|
||||
|
||||
<div v-if="files.length > 0">
|
||||
<h5>Pending</h5>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
|
|
@ -82,8 +86,12 @@ export default {
|
|||
</ProgressBar>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
|
||||
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
|
||||
<div class="flex flex-col gap-8 pt-4">
|
||||
<Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length}" severity="error">
|
||||
{{ message }}
|
||||
</Message>
|
||||
|
||||
<div v-if="files.length > 0">
|
||||
<h5>Pending</h5>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
|
|
@ -140,8 +148,12 @@ export default {
|
|||
</ProgressBar>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
|
||||
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, messages }">
|
||||
<div class="flex flex-col gap-8 pt-4">
|
||||
<Message v-for="message of messages" :key="message" :class="{ 'mb-8': !files.length && !uploadedFiles.length}" severity="error">
|
||||
{{ message }}
|
||||
</Message>
|
||||
|
||||
<div v-if="files.length > 0">
|
||||
<h5>Pending</h5>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/fileupload.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<div class="w-full">
|
||||
<FileUpload name="demo[]" url="/api/upload" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
||||
<template #empty>
|
||||
<span>Drag and drop files to here to upload.</span>
|
||||
</template>
|
||||
</FileUpload>
|
||||
</div>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('FileUpload'),
|
||||
key: 'FileUpload'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.fileupload',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>When the form element is invalid, the label is also highlighted.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center items-center gap-4">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<InputText id="value1" v-model="value1" autocomplete="off" :invalid="!value1" />
|
||||
<label for="value1">Username</label>
|
||||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center items-center gap-4">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<InputText id="value1" v-model="value1" :invalid="!value1" />
|
||||
<label for="value1">Username</label>
|
||||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center items-center gap-4">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel>
|
||||
<InputText id="value1" v-model="value1" :invalid="!value1" />
|
||||
<label for="value1">Username</label>
|
||||
|
|
@ -101,9 +101,9 @@ export default {
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const value3 = ref('');
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>variant</i> property defines the position of the label. Default value is <i>over</i>, whereas <i>in</i> and <i>on</i> are the alternatives.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" autocomplete="off" />
|
||||
<label for="inlabel">In Label</label>
|
||||
<InputText id="in_label" v-model="value1" autocomplete="off" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" autocomplete="off" />
|
||||
<label for="onlabel">On Label</label>
|
||||
<InputText id="on_label" v-model="value2" autocomplete="off" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -25,31 +25,31 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" />
|
||||
<label for="inlabel">In Label</label>
|
||||
<InputText id="in_label" v-model="value1" autocomplete="off" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" />
|
||||
<label for="onlabel">On Label</label>
|
||||
<InputText id="on_label" v-model="value2" autocomplete="off" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" />
|
||||
<label for="inlabel">In Label</label>
|
||||
<InputText id="in_label" v-model="value1" autocomplete="off" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" />
|
||||
<label for="onlabel">On Label</label>
|
||||
<InputText id="on_label" v-model="value2" autocomplete="off" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -59,19 +59,18 @@ export default {
|
|||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center items-end gap-4">
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" />
|
||||
<label for="inlabel">In Label</label>
|
||||
<InputText id="in_label" v-model="value1" autocomplete="off" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" />
|
||||
<label for="onlabel">On Label</label>
|
||||
<InputText id="on_label" v-model="value2" autocomplete="off" />
|
||||
<label for="on_label">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue