browser source added form components
Tuğçe Küçükoğlu
parent
d68b5fb8b9
commit
fd7a5cc405
|
|
@ -693,6 +693,145 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"><\\/script>
|
||||
<script src="./CountryService.js"><\\/script>`,
|
||||
content:`
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-autocomplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
|
||||
|
||||
<h5>Grouped</h5>
|
||||
<p-autocomplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" option-group-label="label" option-group-children="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-autocomplete>
|
||||
|
||||
<h5>Dropdown, Templating and Force Selection</h5>
|
||||
<p-autocomplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" force-selection>
|
||||
<template #item="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-autocomplete>
|
||||
|
||||
<h5>Virtual Scroll (1000 Items)</h5>
|
||||
<p-autocomplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtual-scroller-options="{ itemSize: 31 }" field="label" dropdown></p-autocomplete>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<span class="p-fluid">
|
||||
<p-autocomplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
const { FilterService,FilterMatchMode } = primevue.api;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
countryService.value.getCountries().then(data => countries.value = data);
|
||||
})
|
||||
|
||||
const countries = ref();
|
||||
const countryService = ref(new CountryService());
|
||||
const selectedCountry1 = ref();
|
||||
const selectedCountry2 = ref();
|
||||
const selectedCity = ref();
|
||||
const filteredCities = ref();
|
||||
const filteredCountries = ref();
|
||||
const selectedCountries = ref([]);
|
||||
const selectedItem = ref();
|
||||
const filteredItems = ref();
|
||||
const groupedCities = ref ([{
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
{label: 'Hamburg', value: 'Hamburg'},
|
||||
{label: 'Munich', value: 'Munich'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
{label: 'New York', value: 'New York'},
|
||||
{label: 'San Francisco', value: 'San Francisco'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}]);
|
||||
const items = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }));
|
||||
|
||||
const searchCountry = (event) => {
|
||||
setTimeout(() => {
|
||||
if (!event.query.trim().length) {
|
||||
filteredCountries.value = [...countries.value];
|
||||
}
|
||||
else {
|
||||
filteredCountries.value = countries.value.filter((country) => {
|
||||
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
||||
});
|
||||
}
|
||||
}, 250);
|
||||
};
|
||||
const searchCity = (event) => {
|
||||
let query = event.query;
|
||||
let newFilteredCities = [];
|
||||
|
||||
for (let country of groupedCities.value) {
|
||||
let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
|
||||
if (filteredItems && filteredItems.length) {
|
||||
newFilteredCities.push({...country, ...{items: filteredItems}});
|
||||
}
|
||||
}
|
||||
|
||||
filteredCities.value = newFilteredCities;
|
||||
};
|
||||
const searchItems = (event) => {
|
||||
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
|
||||
let query = event.query;
|
||||
let _filteredItems = [];
|
||||
|
||||
for(let i = 0; i < this.items.length; i++) {
|
||||
let item = this.items[i];
|
||||
if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
|
||||
_filteredItems.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
filteredItems.value = _filteredItems;
|
||||
}
|
||||
|
||||
return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity, searchItems, selectedItem, filteredItems, items }
|
||||
},
|
||||
components: {
|
||||
"p-autocomplete": primevue.autocomplete
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -849,6 +849,146 @@ export default {
|
|||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Popup</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="basic">Basic</label>
|
||||
<p-calendar id="basic" v-model="date1"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="dateformat">DateFormat</label>
|
||||
<p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="icon">Icon</label>
|
||||
<p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="minmax">MinMax</label>
|
||||
<p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="disableddays">Disabled Days</label>
|
||||
<p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="navigators">Navigators</label>
|
||||
<p-calendar id="navigators" v-model="date6" :month-navigator="true" :year-navigator="true" year-range="2000:2030"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="multiple">Multiple</label>
|
||||
<p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="range">Range</label>
|
||||
<p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="buttonbar">Button Bar</label>
|
||||
<p-calendar id="buttonbar" v-model="date7" :show-button-bar="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="time24">Time / 24h</label>
|
||||
<p-calendar id="time24" v-model="date8" :show-time="true" :show-seconds="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="time12">Time / 12h</label>
|
||||
<p-calendar id="time12" v-model="date9" :time-only="true" hour-format="12"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="monthpicker">Month Picker</label>
|
||||
<p-calendar id="monthpicker" v-model="date10" view="month" date-format="mm/yy" :year-navigator="true" year-range="2000:2030"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="multiplemonths">Multiple Months</label>
|
||||
<p-calendar id="multiplemonths" v-model="date11" :number-of-months="3"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="datetemplate">Date Template</label>
|
||||
<p-calendar id="datetemplate" v-model="date12">
|
||||
<template #date="slotProps">
|
||||
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
|
||||
<template v-else>{{slotProps.date.day}}</template>
|
||||
</template>
|
||||
</p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="touchUI">TouchUI</label>
|
||||
<p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Inline</h5>
|
||||
<p-calendar v-model="date14" :inline="true" :show-week="true" />
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
let today = new Date();
|
||||
let month = today.getMonth();
|
||||
let year = today.getFullYear();
|
||||
let prevMonth = (month === 0) ? 11 : month -1;
|
||||
let prevYear = (prevMonth === 11) ? year - 1 : year;
|
||||
let nextMonth = (month === 11) ? 0 : month + 1;
|
||||
let nextYear = (nextMonth === 0) ? year + 1 : year;
|
||||
|
||||
const minDate = ref(new Date());
|
||||
const maxDate = ref(new Date());
|
||||
const invalidDates = ref();
|
||||
const date1 = ref();
|
||||
const date2 = ref();
|
||||
const date3 = ref();
|
||||
const date4 = ref();
|
||||
const date5 = ref();
|
||||
const date6 = ref();
|
||||
const date7 = ref();
|
||||
const date8 = ref();
|
||||
const date9 = ref();
|
||||
const date10 = ref();
|
||||
const date11 = ref();
|
||||
const date12 = ref();
|
||||
const date13 = ref();
|
||||
const date14 = ref();
|
||||
const dates1 = ref();
|
||||
const dates2 = ref();
|
||||
|
||||
minDate.value.setMonth(prevMonth);
|
||||
minDate.value.setFullYear(prevYear);
|
||||
maxDate.value.setMonth(nextMonth);
|
||||
maxDate.value.setFullYear(nextYear);
|
||||
|
||||
let invalidDate = new Date();
|
||||
invalidDate.setDate(today.getDate() - 1);
|
||||
invalidDates.value = [today, invalidDate];
|
||||
|
||||
return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
|
||||
date8, date9, date10, date11, date12, date13, date14, dates1, dates2 }
|
||||
},
|
||||
components: {
|
||||
"p-calendar": primevue.calendar
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.special-day {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -607,6 +607,136 @@ img {
|
|||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-cascadeselect v-model="selectedCity1" :options="countries" option-label="cname" option-group-label="name"
|
||||
:option-group-children="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City"></p-cascadeselect>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p-cascadeselect v-model="selectedCity2" :options="countries" option-label="cname" option-group-label="name"
|
||||
:option-group-children="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
|
||||
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
|
||||
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</p-cascadeselect>
|
||||
|
||||
<h5>Loading State</h5>
|
||||
<p-cascadeselect placeholder="Loading..." loading style="minWidth: 14rem"></p-cascadeselect>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const selectedCity1 = ref();
|
||||
const selectedCity2 = 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'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
return { selectedCity1, selectedCity2, countries }
|
||||
},
|
||||
components: {
|
||||
"p-cascadeselect": primevue.cascadeselect
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
img {
|
||||
width: 18px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -272,6 +272,68 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<p-checkbox id="binary" v-model="checked" :binary="true"></p-checkbox>
|
||||
<label for="binary">{{checked}}</label>
|
||||
</div>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<p-checkbox id="city1" name="city" value="Chicago" v-model="cities"></p-checkbox>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<p-checkbox id="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<p-checkbox id="city3" name="city" value="New York" v-model="cities"></p-checkbox>
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<p-checkbox id="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox>
|
||||
<label for="city4">San Francisco</label>
|
||||
</div>
|
||||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
|
||||
<p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const checked = ref(false);
|
||||
const cities = ref([]);
|
||||
const categories = ref([
|
||||
{name: 'Accounting', key: 'A'},
|
||||
{name: 'Marketing', key: 'M'},
|
||||
{name: 'Production', key: 'P'},
|
||||
{name: 'Research', key: 'R'}
|
||||
]);
|
||||
const selectedCategories = ref(categories.value.slice(1,3));
|
||||
|
||||
return { checked, cities, categories, selectedCategories }
|
||||
},
|
||||
components: {
|
||||
"p-checkbox": primevue.checkbox
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App).use(primevue.config.default).mount('#app');
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -254,6 +254,55 @@ export default {
|
|||
}
|
||||
<\\/script>
|
||||
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/chips/chips.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="p-fluid">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<p-chips v-model="value1"></p-chips>
|
||||
|
||||
<h5>Comma Separator</h5>
|
||||
<p-chips v-model="value2" separator=","></p-chips>
|
||||
|
||||
<h5>Template</h5>
|
||||
<p-chips v-model="value3">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<span>{{slotProps.value}} - (active) </span>
|
||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</p-chips>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref();
|
||||
const value2 = ref();
|
||||
const value3 = ref();
|
||||
|
||||
return { value1, value2, value3 }
|
||||
},
|
||||
components: {
|
||||
"p-chips": primevue.chips
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -830,6 +830,173 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-dropdown v-model="selectedCity1" :options="cities" option-label="name" option-value="code" placeholder="Select a City"></p-dropdown>
|
||||
|
||||
<h5>Editable</h5>
|
||||
<p-dropdown v-model="selectedCity2" :options="cities" option-label="name" :editable="true"></p-dropdown>
|
||||
|
||||
<h5>Grouped</h5>
|
||||
<p-dropdown v-model="selectedGroupedCity" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-dropdown>
|
||||
|
||||
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
|
||||
<p-dropdown v-model="selectedCountry" :options="countries" option-label="name" :filter="true" placeholder="Select a Country" :show-clear="true">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-if="slotProps.value">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{slotProps.value.name}}</div>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{slotProps.placeholder}}
|
||||
</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-dropdown>
|
||||
|
||||
<h5>Loading State</h5>
|
||||
<p-dropdown placeholder="Loading..." loading></p-dropdown>
|
||||
|
||||
<h5>Virtual Scroll (1000 Items)</h5>
|
||||
<p-dropdown v-model="selectedItem1" :options="items" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 31 }" placeholder="Select Item"></p-dropdown>
|
||||
|
||||
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
|
||||
<p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
|
||||
<template v-slot:loader="{ options }">
|
||||
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
|
||||
<p-skeleton :width="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
</p-dropdown>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const selectedCity1 = ref();
|
||||
const selectedCity2 = ref();
|
||||
const selectedCountry = ref();
|
||||
const selectedGroupedCity = ref();
|
||||
const selectedItem1 = ref();
|
||||
const selectedItem2 = ref();
|
||||
const loading = ref(false);
|
||||
const cities = ref([
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
]);
|
||||
const countries = 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 groupedCities = ref([
|
||||
{
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
{label: 'Hamburg', value: 'Hamburg'},
|
||||
{label: 'Munich', value: 'Munich'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
{label: 'New York', value: 'New York'},
|
||||
{label: 'San Francisco', value: 'San Francisco'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
|
||||
const lazyItems = ref(Array.from({ length: 1000 }));
|
||||
|
||||
return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
|
||||
},
|
||||
loadLazyTimeout: null,
|
||||
methods: {
|
||||
onLazyLoad(event) {
|
||||
this.loading = true;
|
||||
|
||||
if (this.loadLazyTimeout) {
|
||||
clearTimeout(this.loadLazyTimeout);
|
||||
}
|
||||
|
||||
//imitate delay of a backend call
|
||||
this.loadLazyTimeout = setTimeout(() => {
|
||||
const { first, last } = event;
|
||||
const lazyItems = [...this.lazyItems];
|
||||
|
||||
for (let i = first; i < last; i++) {
|
||||
lazyItems[i] = { label: \`Item #\${i}\`, value: i };
|
||||
}
|
||||
|
||||
this.lazyItems = lazyItems;
|
||||
this.loading = false;
|
||||
}, Math.random() * 1000 + 250);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"p-dropdown": primevue.dropdown,
|
||||
"p-skeleton": primevue.skeleton
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-dropdown {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.country-item img{
|
||||
width: 17px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -231,6 +231,52 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/quill/dist/quill.min.js"><\\/script>
|
||||
|
||||
<script src="https://unpkg.com/primevue@^3/editor/editor.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/tooltip/tooltip.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Default</h5>
|
||||
<p-editor v-model="value1" editor-style="height: 320px"></p-editor>
|
||||
|
||||
<h5>Customized</h5>
|
||||
<p-editor v-model="value2" editor-style="height: 320px">
|
||||
<template v-slot:toolbar>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
|
||||
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
|
||||
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
|
||||
</span>
|
||||
</template>
|
||||
</p-editor>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
const Tooltip = primevue.tooltip;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref('<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>');
|
||||
const value2 = ref('');
|
||||
|
||||
return { value1, value2 }
|
||||
},
|
||||
components: {
|
||||
"p-editor": primevue.editor
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.directive("tooltip", Tooltip)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -718,6 +718,277 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<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/inputmask/inputmask.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
|
||||
<script src="./CountryService.js"><\\/script>
|
||||
<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="card">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputtext id="inputtext" type="text" v-model="value1"></p-inputtext>
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext id="inputtext-left" type="text" v-model="valueIconLeft"></p-inputtext>
|
||||
<label for="inputtext-left">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext id="inputtext-right" type="text" v-model="valueIconRight"></p-inputtext>
|
||||
<label for="inputtext-right">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-calendar id="calendar" v-model="value3"></p-calendar>
|
||||
<label for="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-chips id="chips" v-model="value4"></p-chips>
|
||||
<label for="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
|
||||
<label for="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputnumber id="inputnumber" v-model="value6"></p-inputnumber>
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<span class="p-float-label">
|
||||
<p-inputtext id="inputgroup" type="text" v-model="value7" />
|
||||
<label for="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-cascadeselect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
|
||||
:option-group-children="['states', 'cities']"></p-cascadeselect>
|
||||
<label for="multiselect">CascadeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-dropdown id="dropdown" v-model="value8" :options="cities" option-label="name"></p-dropdown>
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-multiselect id="multiselect" v-model="value9" :options="cities" option-label="name">
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-treeselect v-model="selectedNode" :options="nodes"></p-treeselect>
|
||||
<label for="treeselect">TreeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-password id="password" v-model="value11"></p-password>
|
||||
<label for="password">Password</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label">
|
||||
<p-textarea id="textarea" v-model="value10" rows="3"></p-textarea>
|
||||
<label for="textarea">Textarea</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
countryService.value.getCountries().then(data => countries.value = data);
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
})
|
||||
const countryService = ref(new CountryService());
|
||||
const nodeService = ref(new NodeService());
|
||||
const countries = ref();
|
||||
const filteredCountries = ref();
|
||||
const cities = ref([
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
]);
|
||||
const value1 = ref();
|
||||
const value2 = ref();
|
||||
const value3 = ref();
|
||||
const value4 = ref();
|
||||
const value5 = ref();
|
||||
const value6 = ref();
|
||||
const value7 = ref();
|
||||
const value8 = ref();
|
||||
const value9 = ref();
|
||||
const value10 = ref();
|
||||
const value11 = ref();
|
||||
const valueIconLeft = ref();
|
||||
const valueIconRight = ref();
|
||||
const selectedCity = ref();
|
||||
const selectedNode = ref();
|
||||
const nodes = ref();
|
||||
const cascadeCountries = 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'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const searchCountry = (event) => {
|
||||
setTimeout(() => {
|
||||
if (!event.query.trim().length) {
|
||||
filteredCountries.value = [...countries.value];
|
||||
}
|
||||
else {
|
||||
filteredCountries.value = countries.value.filter((country) => {
|
||||
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
||||
});
|
||||
}
|
||||
}, 250);
|
||||
};
|
||||
|
||||
return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, value5, value6,
|
||||
value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry,
|
||||
nodes, selectedNode }
|
||||
},
|
||||
components: {
|
||||
"p-inputtext": primevue.inputtext,
|
||||
"p-inputnumber": primevue.inputnumber,
|
||||
"p-autocomplete": primevue.autocomplete,
|
||||
"p-calendar": primevue.calendar,
|
||||
"p-chips": primevue.chips,
|
||||
"p-inputmask": primevue.inputmask,
|
||||
"p-cascadeselect": primevue.cascadeselect,
|
||||
"p-dropdown": primevue.dropdown,
|
||||
"p-multiselect": primevue.multiselect,
|
||||
"p-treeselect": primevue.treeselect,
|
||||
"p-password": primevue.password,
|
||||
"p-textarea": primevue.textarea
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -252,6 +252,140 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>`
|
||||
},
|
||||
'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>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<p-inputtext placeholder="Username"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<p-inputtext placeholder="Price"></p-inputtext>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<p-inputtext placeholder="Website"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Multiple Addons</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-star"></i>
|
||||
</span>
|
||||
<p-inputtext placeholder="Price"></p-inputtext>
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Button Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<p-button label="Search"></p-button>
|
||||
<p-inputtext placeholder="Keyword"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<p-inputtext placeholder="Keyword"></p-inputtext>
|
||||
<p-button icon="pi pi-search" class="p-button-warning"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<p-button icon="pi pi-check" class="p-button-success"></p-button>
|
||||
<p-inputtext placeholder="Vote"></p-inputtext>
|
||||
<p-button icon="pi pi-times" class="p-button-danger"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Checkbox and RadioButton</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<p-checkbox v-model="checked1" :binary="true"></p-checkbox>
|
||||
</span>
|
||||
<p-inputtext placeholder="Username"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="p-inputgroup">
|
||||
<p-inputtext placeholder="Price"></p-inputtext>
|
||||
<span class="p-inputgroup-addon">
|
||||
<p-radiobutton name="rb1" value="rb1" v-model="radioValue1"></p-radiobutton>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<p-checkbox v-model="checked2" :binary="true"></p-checkbox>
|
||||
</span>
|
||||
<p-inputtext placeholder="Website"></p-inputtext>
|
||||
<span class="p-inputgroup-addon">
|
||||
<p-radiobutton name="rb2" value="rb2" v-model="radioValue2"></p-radiobutton>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const checked1 = ref(false);
|
||||
const checked2 = ref(false);
|
||||
const radioValue1 = ref('');
|
||||
const radioValue2 = ref('');
|
||||
|
||||
return { checked1, checked2, radioValue1, radioValue2 }
|
||||
},
|
||||
components: {
|
||||
"p-inputtext": primevue.inputtext,
|
||||
"p-button": primevue.button,
|
||||
"p-checkbox": primevue.checkbox,
|
||||
"p-radiobutton": primevue.radiobutton
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -237,6 +237,69 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="basic">Basic</label>
|
||||
<p-inputmask mask="99-999999" v-model="val1" placeholder="99-999999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="ssn">SSN</label>
|
||||
<p-inputmask mask="999-99-9999" v-model="val2" placeholder="999-99-9999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="date">Date</label>
|
||||
<p-inputmask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="Phone">Phone</label>
|
||||
<p-inputmask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="phoneext">Phone Ext</label>
|
||||
<p-inputmask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<label for="serial">Serial</label>
|
||||
<p-inputmask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999"></p-inputmask>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const val1 = ref();
|
||||
const val2 = ref();
|
||||
const val3 = ref();
|
||||
const val4 = ref();
|
||||
const val5 = ref();
|
||||
const val6 = ref();
|
||||
|
||||
return { val1, val2, val3, val4, val5, val6 }
|
||||
},
|
||||
components: {
|
||||
"p-inputmask": primevue.inputmask
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -672,6 +672,152 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@version/inputnumber/inputnumber.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Numerals</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="integeronly">Integer Only</label>
|
||||
<p-inputnumber id="integeronly" v-model="value1"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="withoutgrouping">Without Grouping</label>
|
||||
<p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="minmaxfraction">Min-Max Fraction Digits</label>
|
||||
<p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="minmax">Min-Max Boundaries</label>
|
||||
<p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="locale-user">User Locale</label>
|
||||
<p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="locale-us">United States Locale</label>
|
||||
<p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="locale-german">German Locale</label>
|
||||
<p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="locale-indian">Indian Locale</label>
|
||||
<p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Currency</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="currency-us">United States</label>
|
||||
<p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="currency-germany">Germany</label>
|
||||
<p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="currency-india">India</label>
|
||||
<p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="currency-japan">Japan</label>
|
||||
<p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Prefix and Suffix</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="mile">Mile</label>
|
||||
<p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="percent">Percent</label>
|
||||
<p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="expiry">Expiry</label>
|
||||
<p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="temperature">Temperature</label>
|
||||
<p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Buttons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="stacked">Stacked</label>
|
||||
<p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="horizontal">Horizontal with Step</label>
|
||||
<p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
|
||||
decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="minmax-buttons">Min-Max Boundaries</label>
|
||||
<p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="vertical" style="display: block">Vertical</label>
|
||||
<p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
|
||||
decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref(42723);
|
||||
const value2 = ref(58151);
|
||||
const value3 = ref(2351.35);
|
||||
const value4 = ref(50);
|
||||
const value5 = ref(151351);
|
||||
const value6 = ref(115744);
|
||||
const value7 = ref(635524);
|
||||
const value8 = ref(732762);
|
||||
const value9 = ref(1500);
|
||||
const value10 = ref(2500);
|
||||
const value11 = ref(4250);
|
||||
const value12 = ref(5002);
|
||||
const value13 = ref(20);
|
||||
const value14 = ref(50);
|
||||
const value15 = ref(10);
|
||||
const value16 = ref(20);
|
||||
const value17 = ref(20);
|
||||
const value18 = ref(10.50);
|
||||
const value19 = ref(25);
|
||||
const value20 = ref(50);
|
||||
|
||||
return { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10,
|
||||
value11, value12, value13, value14, value15, value16, value17, value18, value19, value20 }
|
||||
},
|
||||
components: {
|
||||
"p-inputnumber": primevue.inputnumber
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,6 +202,39 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/inputswitch/inputswitch.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-inputswitch v-model="checked1"></p-inputswitch>
|
||||
|
||||
<h5>Preselection</h5>
|
||||
<p-inputswitch v-model="checked2"></p-inputswitch>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const checked1 = ref(false);
|
||||
const checked2 = ref(true);
|
||||
|
||||
return { checked1, checked2 }
|
||||
},
|
||||
components: {
|
||||
"p-inputswitch": primevue.inputswitch
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -317,6 +317,98 @@ export default {
|
|||
display: block;
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@version/inputtext/inputtext.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<p-inputtext type="text" v-model="value1"></p-inputtext>
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
|
||||
<h5>Floating Label</h5>
|
||||
<span class="p-float-label">
|
||||
<p-inputtext id="username" type="text" v-model="value2"></p-inputtext>
|
||||
<label for="username">Username</label>
|
||||
</span>
|
||||
|
||||
<h5>Left Icon</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext type="text" v-model="value3" placeholder="Search"></p-inputtext>
|
||||
</span>
|
||||
|
||||
<h5>Right Icon</h5>
|
||||
<span class="p-input-icon-right">
|
||||
<i class="pi pi-spin pi-spinner"></i>
|
||||
<p-inputtext type="text" v-model="value4"></p-inputtext>
|
||||
</span>
|
||||
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field">
|
||||
<label for="username1">Username</label>
|
||||
<p-inputtext id="username1" type="username" aria-describedby="username1-help"></p-inputtext>
|
||||
<small id="username1-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
|
||||
<h5>Invalid</h5>
|
||||
<div class="p-field">
|
||||
<label for="username2">Username</label>
|
||||
<p-inputtext id="username2" type="username" aria-describedby="username2-help" class="p-invalid"></p-inputtext>
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
</div>
|
||||
|
||||
<h5>Disabled</h5>
|
||||
<p-inputtext type="text" v-model="value5" disabled></p-inputtext>
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<div class="sizes">
|
||||
<p-inputtext type="text" class="p-inputtext-sm" placeholder="Small"></p-inputtext>
|
||||
<p-inputtext type="text" placeholder="Normal"></p-inputtext>
|
||||
<p-inputtext type="text" class="p-inputtext-lg" placeholder="Large"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref();
|
||||
const value2 = ref();
|
||||
const value3 = ref();
|
||||
const value4 = ref();
|
||||
const value5 = ref('PrimeVue');
|
||||
|
||||
return { value1, value2, value3, value4, value5 }
|
||||
},
|
||||
components: {
|
||||
"p-inputtext": primevue.inputtext
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.sizes .p-inputtext {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.sizes:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.p-field * {
|
||||
display: block;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -522,6 +522,213 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName :'Browser Source',
|
||||
imports: `<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/inputmask/inputmask.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
|
||||
<script src="./CountryService.js"><\\/script>
|
||||
<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-inputtext id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid"></p-autocomplete>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :show-icon="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid"></p-chips>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy" placeholder="InputMask" class="p-invalid"></p-inputmask>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-inputnumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-cascadeselect v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
|
||||
:option-group-children="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid"></p-cascadeselect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-dropdown id="dropdown" v-model="value7" :options="cities" option-label="name" placeholder="Dropdown" class="p-invalid"></p-dropdown>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-multiselect id="multiselect" v-model="value8" :options="cities" option-label="name" placeholder="MultiSelect" class="p-invalid"></p-multiselect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-treeselect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></p-treeselect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-password id="password" v-model="value10" placeholder="Password" class="p-invalid"></p-password>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<p-textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid"></p-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
countryService.value.getCountries().then(data => countries.value = data);
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
})
|
||||
const countryService = ref(new CountryService());
|
||||
const nodeService = ref(new NodeService());
|
||||
const countries = ref();
|
||||
const filteredCountries = ref();
|
||||
const cities = ref([
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
]);
|
||||
const value1 = ref();
|
||||
const value2 = ref();
|
||||
const value3 = ref();
|
||||
const value4 = ref();
|
||||
const value5 = ref();
|
||||
const value6 = ref();
|
||||
const value7 = ref();
|
||||
const value8 = ref();
|
||||
const value9 = ref();
|
||||
const value10 = ref();
|
||||
const selectedCity = ref();
|
||||
const selectedNode = ref();
|
||||
const nodes = ref();
|
||||
const cascadeCountries = 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'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const searchCountry = (event) => {
|
||||
setTimeout(() => {
|
||||
if (!event.query.trim().length) {
|
||||
filteredCountries.value = [...countries.value];
|
||||
}
|
||||
else {
|
||||
filteredCountries.value = countries.value.filter((country) => {
|
||||
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
||||
});
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
|
||||
return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4,
|
||||
value5, value6, value7, value8, value9, value10, selectedCity, cascadeCountries, searchCountry,
|
||||
nodes, selectedNode }
|
||||
|
||||
},
|
||||
components: {
|
||||
"p-inputtext": primevue.inputtext,
|
||||
"p-autocomplete": primevue.autocomplete,
|
||||
"p-calendar": primevue.calendar,
|
||||
"p-chips": primevue.chips,
|
||||
"p-inputmask": primevue.inputmask,
|
||||
"p-inputnumber": primevue.inputnumber,
|
||||
"p-cascadeselect": primevue.cascadeselect,
|
||||
"p-dropdown": primevue.dropdown,
|
||||
"p-multiselect": primevue.multiselect,
|
||||
"p-treeselect": primevue.treeselect,
|
||||
"p-textarea": primevue.textarea,
|
||||
"p-password": primevue.password
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -339,6 +339,79 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="p-grid p-formgrid p-text-center">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5>Basic</h5>
|
||||
<p-knob v-model="value1"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5>Readonly</h5>
|
||||
<p-knob v-model="value2" readonly></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5>Disabled</h5>
|
||||
<p-knob v-model="value3" disabled></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Min/Max</h5>
|
||||
<p-knob v-model="value4" :min="-50" :max="50"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Step</h5>
|
||||
<p-knob v-model="value5" :step="10"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Template</h5>
|
||||
<p-knob v-model="value6" value-template="{value}%"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Stroke</h5>
|
||||
<p-knob v-model="value7" :stroke-width="5"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Size</h5>
|
||||
<p-knob v-model="value8" :size="200"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Color</h5>
|
||||
<p-knob v-model="value9" value-color="SlateGray" range-color="MediumTurquoise"></p-knob>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref(0);
|
||||
const value2 = ref(50);
|
||||
const value3 = ref(75);
|
||||
const value4 = ref(10);
|
||||
const value5 = ref(40);
|
||||
const value6 = ref(60);
|
||||
const value7 = ref(40);
|
||||
const value8 = ref(60);
|
||||
const value9 = ref(50);
|
||||
|
||||
return { value1, value2, value3, value4, value5, value6, value7, value8, value9 }
|
||||
},
|
||||
components: {
|
||||
"p-knob": primevue.knob
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -562,6 +562,111 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/listbox/listbox.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Single</h5>
|
||||
<p-listbox v-model="selectedCity" :options="cities" option-label="name" style="width:15rem"></p-listbox>
|
||||
|
||||
<h5>Grouped</h5>
|
||||
<p-listbox v-model="selectedGroupedCity" :options="groupedCities" option-label="label" style="width:15rem" option-group-label="label" option-group-children="items" list-style="max-height:250px">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-listbox>
|
||||
|
||||
<h5>Advanced with Templating, Filtering and Multiple Selection</h5>
|
||||
<p-listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" option-label="name" list-style="max-height:250px" style="width:15rem" filter-placeholder="Search">
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-listbox>
|
||||
|
||||
<h5>Virtual Scroll (1000 Items)</h5>
|
||||
<p-listbox v-model="selectedItem" :options="items" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 31 }" style="width:15rem" list-style="height:250px"></p-listbox>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const selectedCity = ref();
|
||||
const selectedCountries = ref();
|
||||
const selectedGroupedCity = ref();
|
||||
const selectedItem = ref();
|
||||
const cities = ref([
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
]);
|
||||
const countries = 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 groupedCities = ref([
|
||||
{
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
{label: 'Hamburg', value: 'Hamburg'},
|
||||
{label: 'Munich', value: 'Munich'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
{label: 'New York', value: 'New York'},
|
||||
{label: 'San Francisco', value: 'San Francisco'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
|
||||
|
||||
return { selectedCity, selectedCountries, selectedGroupedCity, cities, countries, groupedCities, items, selectedItem }
|
||||
},
|
||||
components: {
|
||||
"p-listbox": primevue.listbox
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -836,6 +836,165 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-multiselect v-model="selectedCities1" :options="cities" option-label="name" placeholder="Select Cities"></p-multiselect>
|
||||
|
||||
<h5>Chips</h5>
|
||||
<p-multiselect v-model="selectedCities2" :options="cities" option-label="name" placeholder="Select Cities" display="chip"></p-multiselect>
|
||||
|
||||
<h5>Grouped</h5>
|
||||
<p-multiselect v-model="selectedGroupedCities" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items" placeholder="Select Cities">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-multiselect >
|
||||
|
||||
<h5>Advanced with Templating and Filtering</h5>
|
||||
<p-multiselect v-model="selectedCountries" :options="countries" option-label="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
Select Countries
|
||||
</template>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-multiselect >
|
||||
|
||||
<h5>Loading State</h5>
|
||||
<p-multiselect placeholder="Loading..." loading></p-multiselect >
|
||||
|
||||
<h5>Virtual Scroll (1000 Items)</h5>
|
||||
<p-multiselect v-model="selectedItems" :options="items" :max-selected-labels="3" :select-all="selectAll" @selectall-change="onSelectAllChange($event)" @change="onChange($event)" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 34 }" placeholder="Select Item"></p-multiselect>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const selectedCities1 = ref();
|
||||
const selectedCities2 = ref();
|
||||
const selectedCountries = ref();
|
||||
const selectedGroupedCities = ref();
|
||||
const selectedItems = ref();
|
||||
const selectAll = ref(false);
|
||||
const cities = ref([
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
{name: 'London', code: 'LDN'},
|
||||
{name: 'Istanbul', code: 'IST'},
|
||||
{name: 'Paris', code: 'PRS'}
|
||||
]);
|
||||
const countries = 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 groupedCities = ref([
|
||||
{
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
{label: 'Hamburg', value: 'Hamburg'},
|
||||
{label: 'Munich', value: 'Munich'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
{label: 'New York', value: 'New York'},
|
||||
{label: 'San Francisco', value: 'San Francisco'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}
|
||||
]);
|
||||
const items = Array.from({ length: 1000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
|
||||
|
||||
return { selectedCities1, selectedCities2, selectedCountries, selectedGroupedCities, cities, countries, groupedCities, items, selectedItems, selectAll }
|
||||
},
|
||||
methods: {
|
||||
onSelectAllChange(event) {
|
||||
this.selectedItems = event.checked ? this.items.map((item) => item.value) : [];
|
||||
this.selectAll = event.checked;
|
||||
},
|
||||
onChange(event) {
|
||||
this.selectAll = event.value.length === this.items.length
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"p-multiselect": primevue.multiselect
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-multiselect {
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
.multiselect-custom .p-multiselect-label:not(.p-placeholder) {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.multiselect-custom .country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
margin-right: .5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
.multiselect-custom .country-item-value img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.p-multiselect {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -350,6 +350,70 @@ export default {
|
|||
width: 15rem
|
||||
}
|
||||
</style>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/divider/divider.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-password v-model="value1" :feedback="false"></p-password>
|
||||
|
||||
<h5>p-password Meter</h5>
|
||||
<p-password v-model="value2"></p-password>
|
||||
|
||||
<h5>Show p-password</h5>
|
||||
<p-password v-model="value3" toggle-mask></p-password>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p-password v-model="value4">
|
||||
<template #header>
|
||||
<h6>Pick a password</h6>
|
||||
</template>
|
||||
<template #footer="sp">
|
||||
{{sp.level}}
|
||||
<p-divider></p-divider>
|
||||
<p class="p-mt-2">Suggestions</p>
|
||||
<ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
|
||||
<li>At least one lowercase</li>
|
||||
<li>At least one uppercase</li>
|
||||
<li>At least one numeric</li>
|
||||
<li>Minimum 8 characters</li>
|
||||
</ul>
|
||||
</template>
|
||||
</p-password>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref();
|
||||
const value2 = ref();
|
||||
const value3 = ref();
|
||||
const value4 = ref();
|
||||
|
||||
return { value1, value2, value3, value4 }
|
||||
},
|
||||
components: {
|
||||
"p-password": primevue.password,
|
||||
"p-divider": primevue.divider
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-password input {
|
||||
width: 15rem
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,6 +244,63 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radiobutton id="city1" name="city" value="Chicago" v-model="city"></p-radiobutton>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radiobutton id="city2" name="city" value="Los Angeles" v-model="city"></p-radiobutton>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radiobutton id="city3" name="city" value="New York" v-model="city"></p-radiobutton>
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<p-radiobutton id="city4" name="city" value="San Francisco" v-model="city"></p-radiobutton>
|
||||
<label for="city4">San Francisco</label>
|
||||
</div>
|
||||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
|
||||
<p-radiobutton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const city = ref();
|
||||
const categories = ref([
|
||||
{name: 'Accounting', key: 'A'},
|
||||
{name: 'Marketing', key: 'M'},
|
||||
{name: 'Production', key: 'P'},
|
||||
{name: 'Research', key: 'R'}
|
||||
]);
|
||||
const selectedCategory = ref(categories.value[1]);
|
||||
|
||||
return { city, categories, selectedCategory }
|
||||
},
|
||||
components: {
|
||||
"p-radiobutton": primevue.radiobutton
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -264,6 +264,59 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Single Selection</h5>
|
||||
<p-selectbutton v-model="value1" :options="options"></p-selectbutton>
|
||||
|
||||
<h5>Multiple Selection</h5>
|
||||
<p-selectbutton v-model="value2" :options="paymentOptions" option-label="name" multiple></p-selectbutton>
|
||||
|
||||
<h5>Custom Content</h5>
|
||||
<p-selectbutton v-model="value3" :options="justifyOptions" dataKey="value">
|
||||
<template #option="slotProps">
|
||||
<i :class="slotProps.option.icon"></i>
|
||||
</template>
|
||||
</p-selectbutton>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref('Off');
|
||||
const value2 = ref();
|
||||
const value3 = ref();
|
||||
const options = ref(['Off', 'On']);
|
||||
const paymentOptions = ref([
|
||||
{name: 'Option 1', value: 1},
|
||||
{name: 'Option 2', value: 2},
|
||||
{name: 'Option 3', value: 3}
|
||||
]);
|
||||
const justifyOptions = ref([
|
||||
{icon: 'pi pi-align-left', value: 'left'},
|
||||
{icon: 'pi pi-align-right', value: 'Right'},
|
||||
{icon: 'pi pi-align-center', value: 'Center'},
|
||||
{icon: 'pi pi-align-justify', value: 'Justify'}
|
||||
]);
|
||||
|
||||
return { value1, value2, value3, options, paymentOptions, justifyOptions }
|
||||
},
|
||||
components: {
|
||||
"p-selectbutton": primevue.selectbutton
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
<template>
|
||||
<AppDoc name="SliderDemo" :sources="sources" github="slider/SliderDemo.vue" >
|
||||
<h5>Import</h5>
|
||||
<h5>Import via Module</h5>
|
||||
<pre v-code.script><code>
|
||||
import Slider from 'primevue/slider';
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Import via CDN</h5>
|
||||
<pre v-code><code>
|
||||
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
|
||||
<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"></script>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
|
|
@ -279,6 +286,65 @@ export default {
|
|||
height: 14rem;
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"><\\/script>`,
|
||||
tabName: 'Browser Source',
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic: {{value1}}</h5>
|
||||
<p-slider v-model="value1"></p-slider>
|
||||
|
||||
<h5>Input: {{value2}}</h5>
|
||||
<p-inputtext v-model.number="value2"></p-inputtext>
|
||||
<p-slider v-model="value2"></p-slider>
|
||||
|
||||
<h5>Step: {{value3}}</h5>
|
||||
<p-slider v-model="value3" :step="20"></p-slider>
|
||||
|
||||
<h5>Decimal Step: {{value4}}</h5>
|
||||
<p-slider v-model="value4" :step="0.5"></p-slider>
|
||||
|
||||
<h5>Range: {{value5}}</h5>
|
||||
<p-slider v-model="value5" :range="true"></p-slider>
|
||||
|
||||
<h5>Vertical: {{value6}}</h5>
|
||||
<p-slider v-model="value6" orientation="vertical"></p-slider>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(50);
|
||||
const value3 = ref(20);
|
||||
const value4 = ref(30.5);
|
||||
const value5 = ref([20,80]);
|
||||
const value6 = ref(50);
|
||||
|
||||
return { value1, value2, value3, value4, value5, value6 }
|
||||
},
|
||||
components: {
|
||||
"p-slider": primevue.slider,
|
||||
"p-inputtext": primevue.inputtext
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style scoped>
|
||||
.p-slider-horizontal, .p-inputtext {
|
||||
width: 14rem;
|
||||
}
|
||||
.p-slider-vertical {
|
||||
height: 14rem;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,6 +139,43 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-textarea v-model="value1" rows="5" cols="30"></p-textarea>
|
||||
|
||||
<h5>Auto Resize</h5>
|
||||
<p-textarea v-model="value2" :autoResize="true" rows="5" cols="30"></p-textarea>
|
||||
|
||||
<h5>Disabled</h5>
|
||||
<p-textarea v-model="value3" disabled rows="5" cols="30"></p-textarea>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value1 = ref('');
|
||||
const value2 = ref('');
|
||||
const value3 = ref('');
|
||||
|
||||
return { value1, value2, value3 }
|
||||
},
|
||||
components: {
|
||||
"p-textarea": primevue.textarea
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -192,6 +192,39 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<p-togglebutton v-model="checked1" on-icon="pi pi-check" off-icon="pi pi-times"></p-togglebutton>
|
||||
|
||||
<h5>Customized</h5>
|
||||
<p-togglebutton v-model="checked2" on-label="I confirm" off-label="I reject" on-icon="pi pi-check" off-icon="pi pi-times" style="width: 10em"></p-togglebutton>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const checked1 = ref(false);
|
||||
const checked2 = ref(true);
|
||||
|
||||
return { checked1, checked2 }
|
||||
},
|
||||
components: {
|
||||
"p-togglebutton": primevue.togglebutton
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -577,17 +577,17 @@ import NodeService from './service/NodeService';
|
|||
export default {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
nodeService.value.getTreeNodes().then(data => options.value = data);
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
});
|
||||
|
||||
const options = ref();
|
||||
const nodes = ref();
|
||||
const nodeService = ref(new NodeService());
|
||||
|
||||
const selectedNode = ref();
|
||||
const selectedNodes1 = ref();
|
||||
const selectedNodes2 = ref();
|
||||
|
||||
return { options, selectedNode, selectedNodes1, selectedNodes2 };
|
||||
return { nodes, selectedNode, selectedNodes1, selectedNodes2 };
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
|
|
@ -603,6 +603,62 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"><\\/script>
|
||||
<script src="./NodeService.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<h5>Single</h5>
|
||||
<p-treeselect v-model="selectedNode" :options="nodes" placeholder="Select Item"></p-treeselect>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<p-treeselect v-model="selectedNodes1" :options="nodes" selection-mode="multiple" :meta-key-selection="false" placeholder="Select Items"></p-treeselect>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<p-treeselect v-model="selectedNodes2" :options="nodes" display="chip" selection-mode="checkbox" placeholder="Select Items"></p-treeselect>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref, onMounted } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
nodeService.value.getTreeNodes().then(data => nodes.value = data);
|
||||
});
|
||||
|
||||
const nodes = ref();
|
||||
const nodeService = ref(new NodeService());
|
||||
|
||||
const selectedNode = ref();
|
||||
const selectedNodes1 = ref();
|
||||
const selectedNodes2 = ref();
|
||||
|
||||
return { nodes, selectedNode, selectedNodes1, selectedNodes2 };
|
||||
},
|
||||
components: {
|
||||
"p-treeselect": primevue.treeselect
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-treeselect {
|
||||
width:20rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.p-treeselect {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -138,6 +138,37 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/tristatecheckbox/tristatecheckbox.min.js"><\\/script>`,
|
||||
content: `
|
||||
<div id="app">
|
||||
<div class="p-field-checkbox p-m-0">
|
||||
<p-tristatecheckbox v-model="value"></p-tristatecheckbox>
|
||||
<label>{{value == null ? 'null' : value}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const { createApp, ref } = Vue;
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const value = ref(null);
|
||||
|
||||
return { value }
|
||||
},
|
||||
components: {
|
||||
"p-tristatecheckbox": primevue.tristatecheckbox
|
||||
}
|
||||
};
|
||||
|
||||
createApp(App)
|
||||
.use(primevue.config.default)
|
||||
.mount("#app");
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue