browser source added
Tuğçe Küçükoğlu
parent
c1a7717d5a
commit
9da6976526
|
|
@ -230,6 +230,39 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<h5>Inline</h5>
|
||||||
|
<p-colorpicker v-model="color1" :inline="true"></p-colorpicker>
|
||||||
|
|
||||||
|
<h5>Overlay</h5>
|
||||||
|
<p-colorpicker v-model="color2"></p-colorpicker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const color1 = ref(null);
|
||||||
|
const color2 = ref('1976D2');
|
||||||
|
|
||||||
|
return { color1, color2 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-colorpicker": primevue.colorpicker
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -119,6 +119,49 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<h5>Inline</h5>
|
||||||
|
<p-inputtext class="p-mr-2 p-d-inline"></p-inputtext>
|
||||||
|
<p-inputtext class="p-d-inline"></p-inputtext>
|
||||||
|
|
||||||
|
<h5>Block</h5>
|
||||||
|
<p-inputtext class="p-mb-2 p-d-block"></p-inputtext>
|
||||||
|
<p-inputtext class="p-d-block"></p-inputtext>
|
||||||
|
|
||||||
|
<h5>Visible on a Small Screen</h5>
|
||||||
|
<p>Resize to view.</p>
|
||||||
|
<p-button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none"></p-button>
|
||||||
|
|
||||||
|
<h5>Hidden on a Small Screen</h5>
|
||||||
|
<p>Resize to hide.</p>
|
||||||
|
<p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex"></p-button>
|
||||||
|
|
||||||
|
<h5>Visible to Print, Invisible for Screen</h5>
|
||||||
|
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
|
||||||
|
|
||||||
|
<h5>Visible to Screen, Invisible for Print</h5>
|
||||||
|
<p class="p-d-block p-d-print-none">Not available for printing.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
components: {
|
||||||
|
"p-inputtext": primevue.inputtext,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -93,6 +93,42 @@ export default {
|
||||||
background-color: var(--surface-e);
|
background-color: var(--surface-e);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col" v-for="index in 24" :key="index">
|
||||||
|
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||||
|
p-shadow-{{index}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp } = Vue;
|
||||||
|
|
||||||
|
const App = {};
|
||||||
|
|
||||||
|
createApp(App).mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.shadow-box {
|
||||||
|
min-height: 100px;
|
||||||
|
min-width: 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 2rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: var(--surface-e);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -425,6 +425,55 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-toast></p-toast>
|
||||||
|
|
||||||
|
<h5>Advanced</h5>
|
||||||
|
<p-fileupload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :max-file-size="1000000">
|
||||||
|
<template #empty>
|
||||||
|
<p>Drag and drop files to here to upload.</p>
|
||||||
|
</template>
|
||||||
|
</p-fileupload>
|
||||||
|
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<p-fileupload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :max-file-size="1000000" @upload="onUpload"></p-fileupload>
|
||||||
|
|
||||||
|
<h5>Basic with Auto</h5>
|
||||||
|
<p-fileupload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :max-file-size="1000000" @upload="onUpload" :auto="true" choose-label="Browse"></p-fileupload>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
const { useToast } = primevue.usetoast;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const toast = useToast();
|
||||||
|
const onUpload = () => {
|
||||||
|
toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { onUpload };
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-fileupload": primevue.fileupload,
|
||||||
|
"p-toast": primevue.toast
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.use(primevue.toastservice)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -650,6 +650,231 @@ textarea {
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/dropdown/dropdown.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Vertical</h5>
|
||||||
|
<div class="p-fluid">
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="firstname1">Firstname</label>
|
||||||
|
<p-inputtext id="firstname1" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="lastname1">Lastname</label>
|
||||||
|
<p-inputtext id="lastname1" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Vertical and Grid</h5>
|
||||||
|
<div class="p-fluid p-formgrid p-grid">
|
||||||
|
<div class="p-field p-col">
|
||||||
|
<label for="firstname2">Firstname</label>
|
||||||
|
<p-inputtext id="firstname2" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col">
|
||||||
|
<label for="lastname2">Lastname</label>
|
||||||
|
<p-inputtext id="lastname2" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Horizontal and Fixed Width</h5>
|
||||||
|
<div class="p-field p-grid">
|
||||||
|
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||||
|
<div class="p-col">
|
||||||
|
<p-inputtext id="firstname3" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-grid">
|
||||||
|
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||||
|
<div class="p-col">
|
||||||
|
<p-inputtext id="lastname3" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Horizontal and Fluid</h5>
|
||||||
|
<div class="p-fluid">
|
||||||
|
<div class="p-field p-grid">
|
||||||
|
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
|
||||||
|
<div class="p-col-12 p-md-10">
|
||||||
|
<p-inputtext id="firstname4" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-grid">
|
||||||
|
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
|
||||||
|
<div class="p-col-12 p-md-10">
|
||||||
|
<p-inputtext id="lastname4" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Inline</h5>
|
||||||
|
<div class="p-formgroup-inline">
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="firstname5" class="p-sr-only">Firstname</label>
|
||||||
|
<p-inputtext id="firstname5" type="text" placeholder="Firstname"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="lastname5" class="p-sr-only">Lastname</label>
|
||||||
|
<p-inputtext id="lastname5" type="text" placeholder="Lastname"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<p-button type="button" label="Submit"></p-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Vertical Checkbox</h5>
|
||||||
|
<div class="p-field-checkbox">
|
||||||
|
<p-checkbox id="city1" name="city1" value="Chicago" v-model="cities1"></p-checkbox>
|
||||||
|
<label for="city1">Chicago</label>
|
||||||
|
</div>
|
||||||
|
<div class="p-field-checkbox">
|
||||||
|
<p-checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1"></p-checkbox>
|
||||||
|
<label for="city2">Los Angeles</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal Checkbox</h5>
|
||||||
|
<div class="p-formgroup-inline">
|
||||||
|
<div class="p-field-checkbox">
|
||||||
|
<p-checkbox id="city3" name="city2" value="Chicago" v-model="cities2"></p-checkbox>
|
||||||
|
<label for="city3">Chicago</label>
|
||||||
|
</div>
|
||||||
|
<div class="p-field-checkbox">
|
||||||
|
<p-checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2"></p-checkbox>
|
||||||
|
<label for="city4">Los Angeles</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Vertical RadioButton</h5>
|
||||||
|
<div class="p-field-radiobutton">
|
||||||
|
<p-radiobutton id="city5" name="city1" value="Chicago" v-model="city1"></p-radiobutton>
|
||||||
|
<label for="city5">Chicago</label>
|
||||||
|
</div>
|
||||||
|
<div class="p-field-radiobutton">
|
||||||
|
<p-radiobutton id="city6" name="city1" value="Los Angeles" v-model="city1"></p-radiobutton>
|
||||||
|
<label for="city6">Los Angeles</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal RadioButton</h5>
|
||||||
|
<div class="p-formgroup-inline">
|
||||||
|
<div class="p-field-radiobutton">
|
||||||
|
<p-radiobutton id="city7" name="city2" value="Chicago" v-model="city2"></p-radiobutton>
|
||||||
|
<label for="city7">Chicago</label>
|
||||||
|
</div>
|
||||||
|
<div class="p-field-radiobutton">
|
||||||
|
<p-radiobutton id="city8" name="city2" value="Los Angeles" v-model="city2"></p-radiobutton>
|
||||||
|
<label for="city8">Los Angeles</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Help Text</h5>
|
||||||
|
<div class="p-field p-fluid">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<p-inputtext id="username" type="username" aria-describedby="username-help"></p-inputtext>
|
||||||
|
<small id="username-help">Enter your username to reset your password.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Advanced</h5>
|
||||||
|
<div class="p-fluid p-formgrid p-grid">
|
||||||
|
<div class="p-field p-col-12 p-md-6">
|
||||||
|
<label for="firstname6">Firstname</label>
|
||||||
|
<p-inputtext id="firstname6" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-6">
|
||||||
|
<label for="lastname6">Lastname</label>
|
||||||
|
<p-inputtext id="lastname6" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12">
|
||||||
|
<label for="address">Address</label>
|
||||||
|
<p-textarea id="address" rows="4"></p-textarea>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-6">
|
||||||
|
<label for="city">City</label>
|
||||||
|
<p-inputtext id="city" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-3">
|
||||||
|
<label for="state">State</label>
|
||||||
|
<p-dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select"></p-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="p-field p-col-12 p-md-3">
|
||||||
|
<label for="zip">Zip</label>
|
||||||
|
<p-inputtext id="zip" type="text"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const selectedState = ref(null);
|
||||||
|
const states = ref([
|
||||||
|
{name: 'Arizona', code: 'Arizona'},
|
||||||
|
{name: 'California', value: 'California'},
|
||||||
|
{name: 'Florida', code: 'Florida'},
|
||||||
|
{name: 'Ohio', code: 'Ohio'},
|
||||||
|
{name: 'Washington', code: 'Washington'}
|
||||||
|
]);
|
||||||
|
const cities1 = ref([]);
|
||||||
|
const cities2 = ref([]);
|
||||||
|
const city1 = ref(null);
|
||||||
|
const city2 = ref(null);
|
||||||
|
|
||||||
|
return { selectedState, states, cities1, cities2, city1, city2 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-inputtext": primevue.inputtext,
|
||||||
|
"p-button": primevue.button,
|
||||||
|
"p-checkbox": primevue.checkbox,
|
||||||
|
"p-radiobutton": primevue.radiobutton,
|
||||||
|
"p-textarea": primevue.textarea,
|
||||||
|
"p-dropdown": primevue.dropdown
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@media screen and (max-width: 489px) {
|
||||||
|
.p-formgroup-inline .p-field {
|
||||||
|
margin-bottom: 1em !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-content .content-section.implementation > h3 {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1233,6 +1233,457 @@ export default {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/panel/panel.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="flexgrid-demo p-p-2">
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Dynamic</h5>
|
||||||
|
<p-button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em"></p-button>
|
||||||
|
<p-button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1"></p-button>
|
||||||
|
|
||||||
|
<div style="margin-top: .5em">
|
||||||
|
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||||
|
<div v-for="col of columns" :key="col" class="p-col">
|
||||||
|
<div class="box">{{col}}</div>
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Reverse Direction</h5>
|
||||||
|
<div class="p-grid p-flex-row-reverse">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Column Direction</h5>
|
||||||
|
<div class="p-grid p-flex-column">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Reverse Column Direction</h5>
|
||||||
|
<div class="p-grid p-flex-column-reverse">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>12 Column Grid</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-8">
|
||||||
|
<div class="box">8</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>MultiLine</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Fixed Width Column</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-fixed" style="width:100px">
|
||||||
|
<div class="box">100px</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">auto</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Responsive</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal Alignment - Start</h5>
|
||||||
|
<div class="p-grid p-jc-start">
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-1">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal Alignment - End</h5>
|
||||||
|
<div class="p-grid p-jc-end">
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-1">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal Alignment - Center</h5>
|
||||||
|
<div class="p-grid p-jc-center">
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-1">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal Alignment - Between</h5>
|
||||||
|
<div class="p-grid p-jc-between">
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-1">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal Alignment - Around</h5>
|
||||||
|
<div class="p-grid p-jc-around">
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-1">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Horizontal Alignment - Even</h5>
|
||||||
|
<div class="p-grid p-jc-evenly">
|
||||||
|
<div class="p-col-2">
|
||||||
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-1">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Vertical Alignment - Start</h5>
|
||||||
|
<div class="p-grid p-ai-start vertical-container">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Vertical Alignment - End</h5>
|
||||||
|
<div class="p-grid p-ai-end vertical-container">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Vertical Alignment - Center</h5>
|
||||||
|
<div class="p-grid p-ai-center vertical-container">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Vertical Alignment - Stretch</h5>
|
||||||
|
<div class="p-grid p-ai-stretch vertical-container">
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box box-stretched">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box box-stretched">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box box-stretched">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Vertical Alignment - Per Column</h5>
|
||||||
|
<div class="p-grid vertical-container">
|
||||||
|
<div class="p-col p-as-start">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col p-as-center">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col p-as-end">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Offset</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-6 p-offset-3">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4 p-offset-4">
|
||||||
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Nested</h5>
|
||||||
|
<div class="p-grid nested-grid">
|
||||||
|
<div class="p-col-8">
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12">
|
||||||
|
<div class="box">12</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-4">
|
||||||
|
<div class="box box-stretched">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Panels</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col">
|
||||||
|
<p-panel header="Header">
|
||||||
|
<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.
|
||||||
|
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>
|
||||||
|
</p-panel>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<p-panel header="Header">
|
||||||
|
<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.
|
||||||
|
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>
|
||||||
|
</p-panel>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<p-panel header="Header">
|
||||||
|
<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.
|
||||||
|
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>
|
||||||
|
</p-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const columns = ref([0, 1, 2, 3, 4, 5]);
|
||||||
|
const addColumn = () => {
|
||||||
|
columns.value = [...columns.value, columns.value.length];
|
||||||
|
};
|
||||||
|
const removeColumn = () => {
|
||||||
|
columns.value.pop();
|
||||||
|
};
|
||||||
|
|
||||||
|
return { columns, addColumn, removeColumn }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-button": primevue.button,
|
||||||
|
"p-panel": primevue.panel
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.flexgrid-demo {
|
||||||
|
background-color: var(--surface-b);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo .box {
|
||||||
|
background-color: var(--surface-e);
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo .box-stretched {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo .vertical-container {
|
||||||
|
margin: 0;
|
||||||
|
height: 200px;
|
||||||
|
background: var(--surface-d);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo .nested-grid .p-col-4 {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo .dynamic-box-enter-active, .flexgrid-demo .dynamic-box-leave-active {
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo .dynamic-box-enter, .flexgrid-demo .dynamic-box-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo .dynamic-box-enter, .flexgrid-demo .dynamic-box-leave-to {
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexgrid-demo p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -198,6 +198,45 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/rating/rating.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<h5>Basic {{val1}}</h5>
|
||||||
|
<p-rating v-model="val1"></p-rating>
|
||||||
|
|
||||||
|
<h5>Without Cancel</h5>
|
||||||
|
<p-rating v-model="val2" :cancel="false"></p-rating>
|
||||||
|
|
||||||
|
<h5>ReadOnly</h5>
|
||||||
|
<p-rating :model-value="5" :readonly="true" :stars="10" :cancel="false"></p-rating>
|
||||||
|
|
||||||
|
<h5>Disabled</h5>
|
||||||
|
<p-rating :model-value="8" :disabled="true" :stars="10"></p-rating>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
const val1 = ref();
|
||||||
|
const val2 = ref(3);
|
||||||
|
|
||||||
|
return { val1, val2 }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-rating": primevue.rating
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2522,6 +2522,982 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/chips/chips.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/rating/rating.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/inputswitch/inputswitch.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/listbox/listbox.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/tabview/tabview.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/tabpanel/tabpanel.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/panel/panel.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/overlaypanel/overlaypanel.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/dialog/dialog.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/confirmationservice/confirmationservice.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/message/message.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/timeline/timeline.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/inlinemessage/inlinemessage.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>
|
||||||
|
<script src="./CustomerService.js"><\\/script>
|
||||||
|
<script src="./CountryService.js"><\\/script>
|
||||||
|
<script src="./ProductService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<h1>Responsive Design</h1>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-12 p-md-6 p-fluid">
|
||||||
|
<div class="card">
|
||||||
|
<h5>InputText</h5>
|
||||||
|
<div class="p-grid p-formgrid">
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<p-inputtext type="text" placeholder="Default"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<p-inputtext type="text" placeholder="Disabled" :disabled="true"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<p-inputtext type="text" placeholder="Invalid" class="p-invalid"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Icons</h5>
|
||||||
|
<div class="p-grid p-formgrid">
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<span class="p-input-icon-left">
|
||||||
|
<i class="pi pi-user"></i>
|
||||||
|
<p-inputtext type="text" placeholder="Username"></p-inputtext>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<span class="p-input-icon-right">
|
||||||
|
<p-inputtext type="text" placeholder="Search"></p-inputtext>
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<span class="p-input-icon-left p-input-icon-right">
|
||||||
|
<i class="pi pi-user"></i>
|
||||||
|
<p-inputtext type="text" placeholder="Search"></p-inputtext>
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Float Label</h5>
|
||||||
|
<span class="p-float-label">
|
||||||
|
<p-inputtext id="username" type="text" v-model="floatValue"></p-inputtext>
|
||||||
|
<label for="username">Username</label>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h5>Textarea</h5>
|
||||||
|
<p-textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30"></p-textarea>
|
||||||
|
|
||||||
|
<h5>AutoComplete</h5>
|
||||||
|
<p-autocomplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"></p-autocomplete>
|
||||||
|
|
||||||
|
<h5>Calendar</h5>
|
||||||
|
<p-calendar :show-icon="true" :show-button-bar="true" v-model="calendarValue"></p-calendar>
|
||||||
|
|
||||||
|
<h5>Spinner</h5>
|
||||||
|
<p-inputnumber v-model="inputNumberValue" show-buttons mode="decimal"></p-inputnumber>
|
||||||
|
|
||||||
|
<h5>Chips</h5>
|
||||||
|
<p-chips v-model="chipsValue"></p-chips>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Slider</h5>
|
||||||
|
<p-inputtext v-model.number="sliderValue"></p-inputtext>
|
||||||
|
<p-slider v-model="sliderValue"></p-slider>
|
||||||
|
|
||||||
|
<h5>Rating</h5>
|
||||||
|
<p-rating v-model="ratingValue"></p-rating>
|
||||||
|
|
||||||
|
<h5>Input Switch</h5>
|
||||||
|
<p-inputswitch v-model="switchValue"></p-inputswitch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-6">
|
||||||
|
<div class="card">
|
||||||
|
<h5>RadioButton</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="p-field-radiobutton">
|
||||||
|
<p-radiobutton id="option1" name="option" value="Option 1" v-model="radioValue"></p-radiobutton>
|
||||||
|
<label for="option1">Option 1</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="p-field-radiobutton">
|
||||||
|
<p-radiobutton id="option2" name="option" value="Option 2" v-model="radioValue"></p-radiobutton>
|
||||||
|
<label for="option2">Option 2</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="p-field-radiobutton">
|
||||||
|
<p-radiobutton id="option3" name="option" value="Option 3" v-model="radioValue"></p-radiobutton>
|
||||||
|
<label for="option3">Option 3</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Checkbox</h5>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="p-field-checkbox">
|
||||||
|
<p-checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue"></p-checkbox>
|
||||||
|
<label for="checkOption1">Option 1</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="p-field-checkbox">
|
||||||
|
<p-checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue"></p-checkbox>
|
||||||
|
<label for="checkOption2">Option 2</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="p-field-checkbox">
|
||||||
|
<p-checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue"></p-checkbox>
|
||||||
|
<label for="checkOption3">Option 3</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card p-fluid">
|
||||||
|
<h5>Listbox</h5>
|
||||||
|
<p-listbox v-model="listboxValue" :options="listboxValues" option-label="name" :filter="true"></p-listbox>
|
||||||
|
|
||||||
|
<h5>Dropdown</h5>
|
||||||
|
<p-dropdown v-model="dropdownValue" :options="dropdownValues" option-label="name" placeholder="Select"></p-dropdown>
|
||||||
|
|
||||||
|
<h5>MultiSelect</h5>
|
||||||
|
<p-multiselect v-model="multiselectValue" :options="multiselectValues" option-label="name" placeholder="Select Countries" :filter="true"></p-multiselect>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card p-fluid">
|
||||||
|
<h5>ToggleButton</h5>
|
||||||
|
<p-togglebutton v-model="toggleValue" on-label="Yes" off-label="No"></p-togglebutton>
|
||||||
|
|
||||||
|
<h5>SelectButton</h5>
|
||||||
|
<p-selectbutton v-model="selectButtonValue1" :options="selectButtonValues1" option-label="name"></p-selectbutton>
|
||||||
|
|
||||||
|
<h5>SelectButton - Multiple</h5>
|
||||||
|
<p-selectbutton v-model="selectButtonValue2" :options="selectButtonValues2" option-label="name" :multiple="true"></p-selectbutton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Buttons</h5>
|
||||||
|
<p-button label="Submit" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-check" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Severities</h5>
|
||||||
|
<p-button label="Primary" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Success" class="p-button-success p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Info" class="p-button-info p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Warning" class="p-button-warning p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Help" class="p-button-help p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Danger" class="p-button-danger p-mr-2 p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Raised Buttons</h5>
|
||||||
|
<p-button label="Primary" class="p-button-raised p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Danger" class="p-button-raised p-button-danger p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Rounded Buttons</h5>
|
||||||
|
<p-button label="Primary" class="p-button-rounded p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Danger" class="p-button-rounded p-button-danger p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Text Buttons</h5>
|
||||||
|
<p-button label="Primary" class="p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Plain" class="p-button-text p-button-plain p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Raised Text Buttons</h5>
|
||||||
|
<p-button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>"
|
||||||
|
<p-button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Outlined Buttons</h5>
|
||||||
|
<p-button label="Primary" class="p-button-outlined p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button label="Plain" class="p-button-outlined p-button-plain p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Rounded Icon Buttons</h5>
|
||||||
|
<p-button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Rounded Text Icon Buttons</h5>
|
||||||
|
<p-button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Rounded and Outlined Icon Buttons</h5>
|
||||||
|
<p-button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Badges</h5>
|
||||||
|
<p-button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badge-class="p-badge-danger"></p-button>
|
||||||
|
|
||||||
|
<h5>Button Set</h5>
|
||||||
|
<span class="p-buttonset">
|
||||||
|
<p-button label="Save" icon="pi pi-check"></p-button>
|
||||||
|
<p-button label="Delete" icon="pi pi-trash"></p-button>
|
||||||
|
<p-button label="Cancel" icon="pi pi-times"></p-button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12">
|
||||||
|
<div class="card">
|
||||||
|
<p-datatable :value="customers" :paginator="true" :rows="10"
|
||||||
|
data-key="id" :row-hover="true" v-model:selection="selectedCustomers" :filters="filters"
|
||||||
|
paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rows-per-page-options="[10,25,50]"
|
||||||
|
current-page-report-template="Showing {first} to {last} of {totalRecords} entries" responsive-layout="scroll">
|
||||||
|
<template #header>
|
||||||
|
<div class="p-d-flex p-ai-center p-jc-between">
|
||||||
|
DataTable
|
||||||
|
<span class="p-input-icon-left">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
<p-inputtext v-model="filters['global'].value" placeholder="Global Search"></p-inputtext>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #empty>
|
||||||
|
No customers found.
|
||||||
|
</template>
|
||||||
|
<p-column selection-mode="multiple" header-style="width: 3rem"></p-column>
|
||||||
|
<p-column field="name" header="Name" :sortable="true" style="min-width:16rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
{{slotProps.data.name}}
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column header="Country" :sortable="true" sort-field="country.name" filter-field="country.name" filter-match-mode="contains" style="min-width:16rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
|
||||||
|
<span class="image-text">{{slotProps.data.country.name}}</span>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="status" header="Status" :sortable="true" filter-match-mode="equals" style="min-width:16rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="activity" header="Activity" :sortable="true" filter-match-mode="gte" style="min-width:16rem">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<p-progressbar :value="slotProps.data.activity" :show-value="false" style="width: 100px"></p-progressbar>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
</p-datatable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-6">
|
||||||
|
<div class="card">
|
||||||
|
<h5>AccordionPanel</h5>
|
||||||
|
<p-accordion :multiple="true" :active-index="[0]">
|
||||||
|
<p-accordiontab header="Header I">
|
||||||
|
<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.
|
||||||
|
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>
|
||||||
|
</p-accordiontab>
|
||||||
|
<p-accordiontab header="Header II">
|
||||||
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
|
||||||
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||||
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||||
|
Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||||
|
</p-accordiontab>
|
||||||
|
<p-accordiontab header="Header III">
|
||||||
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
|
||||||
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||||
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
|
||||||
|
quo minus.</p>
|
||||||
|
</p-accordiontab>
|
||||||
|
</p-accordion>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>TabView</h5>
|
||||||
|
<p-tabview>
|
||||||
|
<p-tabpanel header="Header I">
|
||||||
|
<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.
|
||||||
|
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></p-tabpanel>
|
||||||
|
<p-tabpanel header="Header II">
|
||||||
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
|
||||||
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||||
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||||
|
Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||||
|
</p-tabpanel>
|
||||||
|
<p-tabpanel header="Header III">
|
||||||
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
|
||||||
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||||
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
|
||||||
|
quo minus.</p>
|
||||||
|
</p-tabpanel>
|
||||||
|
</p-tabview>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-6">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Panel</h5>
|
||||||
|
<p-panel header="Header" :toggleable="true">
|
||||||
|
<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.
|
||||||
|
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>
|
||||||
|
</p-panel>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h5>Fieldset</h5>
|
||||||
|
<p-fieldset legend="Legend" :toggleable="true">
|
||||||
|
<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.
|
||||||
|
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>
|
||||||
|
</p-fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-3">
|
||||||
|
<div class="card p-fluid">
|
||||||
|
<h5>Overlay Panel</h5>
|
||||||
|
<p-button type="button" label="Choose" @click="toggle" icon="pi pi-search"></p-button>
|
||||||
|
<p-overlaypanel ref="op" append-to="body" :show-close-icon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}">
|
||||||
|
<p-datatable :value="products" v-model:selection="selectedProduct" selection-mode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||||
|
<p-column field="name" header="Name" sortable></p-column>
|
||||||
|
<p-column header="Image">
|
||||||
|
<template #body="slotProps">
|
||||||
|
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="price" header="Price" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
{{formatCurrency(slotProps.data.price)}}
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
</p-datatable>
|
||||||
|
</p-overlaypanel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-3">
|
||||||
|
<div class="card p-fluid">
|
||||||
|
<h5>Dialog</h5>
|
||||||
|
<p-dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
|
||||||
|
<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. Duis aute irure dolor in reprehenderit
|
||||||
|
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
<template #footer>
|
||||||
|
<p-button label="Dismiss" @click="close" icon="pi pi-check" class="p-button-text"></p-button>
|
||||||
|
</template>
|
||||||
|
</p-dialog>
|
||||||
|
<p-button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"></p-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-3">
|
||||||
|
<div class="card p-fluid">
|
||||||
|
<h5>Confirm Popup</h5>
|
||||||
|
<p-button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check"></p-button>
|
||||||
|
<p-confirmpopup group="popup"></p-confirmpopup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-3">
|
||||||
|
<div class="card p-fluid">
|
||||||
|
<h5>Confirm Dialog</h5>
|
||||||
|
<p-button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check"></p-button>
|
||||||
|
<p-confirmdialog group="dialog">></p-confirmdialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12">
|
||||||
|
<div class="card card-w-title">
|
||||||
|
<h5>Menubar</h5>
|
||||||
|
<p-menubar :model="tieredMenuItems">
|
||||||
|
<template #end>
|
||||||
|
<span class="p-input-icon-left">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
<p-inputtext type="text" placeholder="Search"></p-inputtext>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</p-menubar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Plain Menu</h5>
|
||||||
|
<p-menu :model="menuitems"></p-menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Overlay Menu</h5>
|
||||||
|
|
||||||
|
<p-menu ref="menu" :model="menuitems" :popup="true"></p-menu>
|
||||||
|
<p-button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"></p-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" @contextmenu="onContextRightClick">
|
||||||
|
<h5>ContextMenu</h5>
|
||||||
|
Right click to display.
|
||||||
|
<p-contextmenu ref="contextMenu" :model="contextMenuItems"></p-contextmenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-lg-6">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Messages</h5>
|
||||||
|
<p-message severity="info">Info Message</p-message>
|
||||||
|
<p-message severity="success">Success Message</p-message>
|
||||||
|
<p-message severity="warn">Warning Message</p-message>
|
||||||
|
<p-message severity="error">Error Message</p-message>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-lg-6">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Toast</h5>
|
||||||
|
|
||||||
|
<p-toast></p-toast>
|
||||||
|
<p-button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2"></p-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Timeline</h5>
|
||||||
|
<p-timeline :value="timelineEvents" align="alternate">
|
||||||
|
<template #content="slotProps">
|
||||||
|
{{slotProps.item.status}}
|
||||||
|
</template>
|
||||||
|
</p-timeline>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-lg-8">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Inline Message</h5>
|
||||||
|
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
||||||
|
<label for="username1" class="p-sr-only">Username</label>
|
||||||
|
<p-inputtext id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2"></p-inputtext>
|
||||||
|
<p-inlinemessage>Username is required</p-inlinemessage>
|
||||||
|
</div>
|
||||||
|
<div class="p-formgroup-inline">
|
||||||
|
<label for="email" class="p-sr-only">email</label>
|
||||||
|
<p-inputtext id="email" placeholder="Email" class="p-invalid p-mr-2"></p-inputtext>
|
||||||
|
<p-inlinemessage></p-inlinemessage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-col-12 p-lg-4">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Helper Text</h5>
|
||||||
|
<div class="p-field p-fluid">
|
||||||
|
<label for="username2">Username</label>
|
||||||
|
<p-inputtext id="username2" type="text" class="p-invalid" aria-describedby="username-help"></p-inputtext>
|
||||||
|
<small id="username-help" class="p-error">Enter your username to reset your password.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
const { FilterMatchMode, FilterOperator } = primevue.api;
|
||||||
|
const { useToast } = primevue.usetoast;
|
||||||
|
const { useConfirm } = primevue.useconfirm;
|
||||||
|
const BadgeDirective = primevue.badgedirective
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
countryService.value.getCountries().then(data => autoValue.value = data);
|
||||||
|
customerService.value.getCustomersLarge().then(data => customers.value = data);
|
||||||
|
productService.value.getProductsSmall().then(data => products.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const toast = useToast();
|
||||||
|
const confirm = useConfirm();
|
||||||
|
const customers = ref(null);
|
||||||
|
const selectedCustomers = ref(null);
|
||||||
|
const products = ref(null);
|
||||||
|
const selectedProduct = ref(null);
|
||||||
|
const filters = ref({
|
||||||
|
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
|
||||||
|
'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||||
|
'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||||
|
'representative': {value: null, matchMode: FilterMatchMode.IN},
|
||||||
|
'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]},
|
||||||
|
'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||||
|
'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||||
|
'activity': {value: null, matchMode: FilterMatchMode.BETWEEN},
|
||||||
|
'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
|
||||||
|
});
|
||||||
|
const floatValue = ref(null);
|
||||||
|
const autoValue = ref(null);
|
||||||
|
const selectedAutoValue = ref(null);
|
||||||
|
const autoFilteredValue = ref([]);
|
||||||
|
const calendarValue = ref(null);
|
||||||
|
const inputNumberValue = ref(null);
|
||||||
|
const chipsValue = ref(null);
|
||||||
|
const sliderValue = ref(null);
|
||||||
|
const ratingValue = ref(null);
|
||||||
|
const colorValue = ref('1976D2');
|
||||||
|
const radioValue = ref(null);
|
||||||
|
const checkboxValue = ref([]);
|
||||||
|
const switchValue = ref(false);
|
||||||
|
const display = ref(false);
|
||||||
|
const listboxValues = ref([
|
||||||
|
{name: 'New York', code: 'NY'},
|
||||||
|
{name: 'Rome', code: 'RM'},
|
||||||
|
{name: 'London', code: 'LDN'},
|
||||||
|
{name: 'Istanbul', code: 'IST'},
|
||||||
|
{name: 'Paris', code: 'PRS'}
|
||||||
|
]);
|
||||||
|
const listboxValue = ref(null);
|
||||||
|
const dropdownValues = ref([
|
||||||
|
{name: 'New York', code: 'NY'},
|
||||||
|
{name: 'Rome', code: 'RM'},
|
||||||
|
{name: 'London', code: 'LDN'},
|
||||||
|
{name: 'Istanbul', code: 'IST'},
|
||||||
|
{name: 'Paris', code: 'PRS'}
|
||||||
|
]);
|
||||||
|
const dropdownValue = ref(null);
|
||||||
|
const multiselectValue = ref(null);
|
||||||
|
const multiselectValues = ref([
|
||||||
|
{name: 'Australia', code: 'AU'},
|
||||||
|
{name: 'Brazil', code: 'BR'},
|
||||||
|
{name: 'China', code: 'CN'},
|
||||||
|
{name: 'Egypt', code: 'EG'},
|
||||||
|
{name: 'France', code: 'FR'},
|
||||||
|
{name: 'Germany', code: 'DE'},
|
||||||
|
{name: 'India', code: 'IN'},
|
||||||
|
{name: 'Japan', code: 'JP'},
|
||||||
|
{name: 'Spain', code: 'ES'},
|
||||||
|
{name: 'United States', code: 'US'}
|
||||||
|
]);
|
||||||
|
const toggleValue = ref(false);
|
||||||
|
const selectButtonValues1 = ref([
|
||||||
|
{name: 'Option 1', code: 'O1'},
|
||||||
|
{name: 'Option 2', code: 'O2'},
|
||||||
|
{name: 'Option 3', code: 'O3'},
|
||||||
|
]);
|
||||||
|
const selectButtonValue1 = ref(null);
|
||||||
|
const selectButtonValues2 = ref([
|
||||||
|
{name: 'Option 1', code: 'O1'},
|
||||||
|
{name: 'Option 2', code: 'O2'},
|
||||||
|
{name: 'Option 3', code: 'O3'},
|
||||||
|
]);
|
||||||
|
const selectButtonValue2= ref(null);
|
||||||
|
const tieredMenuItems = ref([
|
||||||
|
{
|
||||||
|
label:'Customers',
|
||||||
|
icon:'pi pi-fw pi-table',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'New',
|
||||||
|
icon:'pi pi-fw pi-user-plus',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Customer',
|
||||||
|
icon:'pi pi-fw pi-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Duplicate',
|
||||||
|
icon:'pi pi-fw pi-copy'
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Edit',
|
||||||
|
icon:'pi pi-fw pi-user-edit'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Orders',
|
||||||
|
icon:'pi pi-fw pi-shopping-cart',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'View',
|
||||||
|
icon:'pi pi-fw pi-list'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Search',
|
||||||
|
icon:'pi pi-fw pi-search'
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Shipments',
|
||||||
|
icon:'pi pi-fw pi-envelope',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Tracker',
|
||||||
|
icon:'pi pi-fw pi-compass'
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Map',
|
||||||
|
icon:'pi pi-fw pi-map-marker'
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Manage',
|
||||||
|
icon:'pi pi-fw pi-pencil'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Profile',
|
||||||
|
icon:'pi pi-fw pi-user',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Settings',
|
||||||
|
icon:'pi pi-fw pi-cog'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Billing',
|
||||||
|
icon:'pi pi-fw pi-file'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator:true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Quit',
|
||||||
|
icon:'pi pi-fw pi-sign-out'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const menuitems = ref([
|
||||||
|
{
|
||||||
|
label:'Customers',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'New',
|
||||||
|
icon:'pi pi-fw pi-plus',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Edit',
|
||||||
|
icon:'pi pi-fw pi-user-edit'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Orders',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'View',
|
||||||
|
icon:'pi pi-fw pi-list'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Search',
|
||||||
|
icon:'pi pi-fw pi-search'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const contextMenuItems = ref([
|
||||||
|
{
|
||||||
|
label: 'Save',
|
||||||
|
icon: 'pi pi-save'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Update',
|
||||||
|
icon: 'pi pi-refresh'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Delete',
|
||||||
|
icon: 'pi pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Options',
|
||||||
|
icon: 'pi pi-cog'
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const message = ref([]);
|
||||||
|
const timelineEvents = ref([
|
||||||
|
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
|
||||||
|
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
|
||||||
|
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
|
||||||
|
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
|
||||||
|
]);
|
||||||
|
const countryService = ref(new CountryService());
|
||||||
|
const customerService = ref(new CustomerService());
|
||||||
|
const productService = ref(new ProductService());
|
||||||
|
|
||||||
|
const menu = ref();
|
||||||
|
const contextMenu = ref();
|
||||||
|
const op = ref();
|
||||||
|
|
||||||
|
const toggleMenu = (event) => {
|
||||||
|
menu.value.toggle(event);
|
||||||
|
};
|
||||||
|
const onContextRightClick = (event) => {
|
||||||
|
contextMenu.value.show(event);
|
||||||
|
};
|
||||||
|
const searchCountry = (event) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!event.query.trim().length) {
|
||||||
|
autoFilteredValue.value = [...autoValue.value];
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
autoFilteredValue.value = autoValue.value.filter((country) => {
|
||||||
|
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 250);
|
||||||
|
};
|
||||||
|
const addMessage = (severity) => {
|
||||||
|
message.value = [{severity: severity, content: 'Message Detail'}]
|
||||||
|
};
|
||||||
|
const showToast = (severity) => {
|
||||||
|
toast.add({severity: severity, summary: 'Message Summary', detail:'Message Detail', life: 3000});
|
||||||
|
};
|
||||||
|
const open = () => {
|
||||||
|
display.value = true;
|
||||||
|
};
|
||||||
|
const close = () => {
|
||||||
|
display.value = false;
|
||||||
|
};
|
||||||
|
const toggle = (event) => {
|
||||||
|
op.value.toggle(event);
|
||||||
|
};
|
||||||
|
const confirmWithPopup = (event) => {
|
||||||
|
confirm.require({
|
||||||
|
target: event.currentTarget,
|
||||||
|
group: 'popup',
|
||||||
|
message: 'Are you sure you want to proceed?',
|
||||||
|
icon: 'pi pi-exclamation-triangle',
|
||||||
|
accept: () => {
|
||||||
|
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
||||||
|
},
|
||||||
|
reject: () => {
|
||||||
|
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const confirmWithDialog = () => {
|
||||||
|
confirm.require({
|
||||||
|
group: 'dialog',
|
||||||
|
header: 'Confirm',
|
||||||
|
message: 'Are you sure you want to proceed?',
|
||||||
|
icon: 'pi pi-exclamation-triangle',
|
||||||
|
accept: () => {
|
||||||
|
toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
||||||
|
},
|
||||||
|
reject: () => {
|
||||||
|
toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const formatCurrency = (value) => {
|
||||||
|
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||||
|
};
|
||||||
|
const onProductSelect = (event) => {
|
||||||
|
op.value.hide();
|
||||||
|
toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
|
||||||
|
};
|
||||||
|
|
||||||
|
return { menu, contextMenu, op, customers, selectedCustomers, products, selectedProduct, filters, floatValue, autoValue, selectedAutoValue,
|
||||||
|
autoFilteredValue, calendarValue, inputNumberValue, chipsValue, sliderValue, ratingValue, colorValue, radioValue,
|
||||||
|
checkboxValue, switchValue, display, listboxValues, listboxValue, dropdownValues, dropdownValue, multiselectValue,
|
||||||
|
multiselectValues, toggleValue, selectButtonValues1, selectButtonValue1, selectButtonValues2, selectButtonValue2,
|
||||||
|
tieredMenuItems, menuitems, contextMenuItems, message, timelineEvents, toggleMenu, onContextRightClick, searchCountry,
|
||||||
|
addMessage, showToast, open, close, toggle, confirmWithPopup, confirmWithDialog, formatCurrency, onProductSelect }
|
||||||
|
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-inputtext": primevue.inputtext,
|
||||||
|
"p-textarea": primevue.textarea,
|
||||||
|
"p-autocomplete": primevue.autocomplete,
|
||||||
|
"p-calendar": primevue.calendar,
|
||||||
|
"p-inputnumber": primevue.inputnumber,
|
||||||
|
"p-chips": primevue.chips,
|
||||||
|
"p-slider": primevue.slider,
|
||||||
|
"p-rating": primevue.rating,
|
||||||
|
"p-inputswitch": primevue.inputswitch,
|
||||||
|
"p-radiobutton": primevue.radiobutton,
|
||||||
|
"p-checkbox": primevue.checkbox,
|
||||||
|
"p-listbox": primevue.listbox,
|
||||||
|
"p-dropdown": primevue.dropdown,
|
||||||
|
"p-multiselect": primevue.multiselect,
|
||||||
|
"p-togglebutton": primevue.togglebutton,
|
||||||
|
"p-selectbutton": primevue.selectbutton,
|
||||||
|
"p-button": primevue.button,
|
||||||
|
"p-datatable": primevue.datatable,
|
||||||
|
"p-column": primevue.column,
|
||||||
|
"p-progressbar": primevue.progressbar,
|
||||||
|
"p-accordion": primevue.accordion,
|
||||||
|
"p-accordiontab": primevue.accordiontab,
|
||||||
|
"p-tabview": primevue.tabview,
|
||||||
|
"p-tabpanel": primevue.tabpanel,
|
||||||
|
"p-panel": primevue.panel,
|
||||||
|
"p-fieldset": primevue.fieldset,
|
||||||
|
"p-overlaypanel": primevue.overlaypanel,
|
||||||
|
"p-dialog": primevue.dialog,
|
||||||
|
"p-confirmpopup": primevue.confirmpopup,
|
||||||
|
"p-confirmdialog": primevue.confirmdialog,
|
||||||
|
"p-menubar": primevue.menubar,
|
||||||
|
"p-menu": primevue.menu,
|
||||||
|
"p-contextmenu": primevue.contextmenu,
|
||||||
|
"p-message": primevue.message,
|
||||||
|
"p-toast": primevue.toast,
|
||||||
|
"p-timeline": primevue.timeline,
|
||||||
|
"p-inlinemessage": primevue.inlinemessage
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default, { ripple: true })
|
||||||
|
.use(primevue.toastservice)
|
||||||
|
.use(primevue.confirmationservice)
|
||||||
|
.directive('badge', BadgeDirective)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.image-text {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-progressbar {
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-badge {
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: .25em .5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: .3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-badge .status-qualified {
|
||||||
|
background-color: #C8E6C9;
|
||||||
|
color: #256029;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-badge .status-unqualified {
|
||||||
|
background-color: #FFCDD2;
|
||||||
|
color: #C63737;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-badge .status-negotiation {
|
||||||
|
background-color: #FEEDAF;
|
||||||
|
color: #8A5340;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-badge .status-new {
|
||||||
|
background-color: #B3E5FC;
|
||||||
|
color: #23547B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-badge .status-renewal {
|
||||||
|
background-color: #ECCFFF;
|
||||||
|
color: #694382;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-badge .status-proposal {
|
||||||
|
background-color: #FFD8B2;
|
||||||
|
color: #805B36;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 50px;
|
||||||
|
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-paginator .p-paginator-current {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -231,6 +231,94 @@ export default {
|
||||||
border: 1px solid var(--surface-d);
|
border: 1px solid var(--surface-d);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Margin</h5>
|
||||||
|
<h6>Without Spacing</h6>
|
||||||
|
<p-button type="button" label="Button 1" style="width:20rem"></p-button>
|
||||||
|
<p-button type="button" label="Button 2" style="width:20rem"></p-button>
|
||||||
|
|
||||||
|
<h6>With Spacing</h6>
|
||||||
|
<p-button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2"></p-button>
|
||||||
|
<p-button type="button" label="Button 2" style="width:20rem" class="p-mb-2"></p-button>
|
||||||
|
|
||||||
|
<h5>Responsive Margin</h5>
|
||||||
|
<h6>Without Spacing</h6>
|
||||||
|
<div class="p-grid p-formgrid p-fluid">
|
||||||
|
<div class="p-col-12 p-lg-4">
|
||||||
|
<p-inputtext></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-lg-4">
|
||||||
|
<p-inputtext></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-lg-4">
|
||||||
|
<p-inputtext></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h6>With Spacing</h6>
|
||||||
|
<div class="p-grid p-formgrid p-fluid">
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<p-inputtext></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<p-inputtext></p-inputtext>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
||||||
|
<p-inputtext></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h6>Center</h6>
|
||||||
|
<div class="demo-container p-p-4">
|
||||||
|
<p-button type="button" label="Button" class="p-d-block p-mx-auto"></p-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Padding</h5>
|
||||||
|
<h6>Without Spacing</h6>
|
||||||
|
<div class="demo-container">
|
||||||
|
<p-button type="button" label="Button"></p-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h6>With Spacing</h6>
|
||||||
|
<div class="demo-container p-p-3">
|
||||||
|
<p-button type="button" label="Button"></p-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h6>Responsive Spacing</h6>
|
||||||
|
<div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
|
||||||
|
<p-button type="button" label="Button"></p-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
components: {
|
||||||
|
"p-inputtext": primevue.inputtext,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo-container {
|
||||||
|
border: 1px solid var(--surface-d);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -154,6 +154,51 @@ export default {
|
||||||
border: 2px solid var(--surface-d);
|
border: 2px solid var(--surface-d);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<h5>Alignment</h5>
|
||||||
|
<div class="p-mb-3 p-text-left">Left</div>
|
||||||
|
<div class="p-mb-3 p-text-center">Center</div>
|
||||||
|
<div class="p-text-right">Right</div>
|
||||||
|
|
||||||
|
<h5>Wrap</h5>
|
||||||
|
<div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
|
||||||
|
<div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||||
|
<div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||||
|
|
||||||
|
<h5>Transform</h5>
|
||||||
|
<div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
|
||||||
|
<div class="p-mb-3 p-text-uppercase">uppercase</div>
|
||||||
|
<div class="p-text-capitalize">capitalize</div>
|
||||||
|
|
||||||
|
<h5>Style</h5>
|
||||||
|
<div class="p-mb-3 p-text-bold">Bold</div>
|
||||||
|
<div class="p-mb-3 p-text-normal">Normal</div>
|
||||||
|
<div class="p-mb-3 p-text-light">Light</div>
|
||||||
|
<div class="p-mb-3 p-text-italic">Italic</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo-container {
|
||||||
|
border: 2px solid var(--surface-d);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue