vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated to new slot syntax of 2.6.0

pull/12/head
cagataycivici 2019-03-21 11:32:46 +03:00
parent 71c9427dbc
commit 0267d6d24b
9 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/chips/Chips.vue
View File

@ -2,7 +2,7 @@
<div class="p-chips p-component">
<ul :class="['p-inputtext', {'p-disabled': disabled, 'p-focus': focused}]" @click="onWrapperClick()">
<li v-for="(val,i) of value" :key="val" class="p-chips-token p-highlight">
<slot :value="val">
<slot name="chip" :value="val">
<span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
<span class="p-chips-token-label">{{val}}</span>
</slot>

2
src/components/listbox/Listbox.vue
View File

@ -10,7 +10,7 @@
<ul class="p-listbox-list">
<li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
:aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)">
<slot :option="option" :index="i">
<slot name="option" :option="option" :index="i">
{{getOptionLabel(option)}}
</slot>
</li>

2
src/components/selectbutton/SelectButton.vue
View File

@ -4,7 +4,7 @@
@click="onOptionSelect($event, option, i)" @keydown.enter.prevent="onOptionSelect($event, option, i)" @keydown.space.prevent="onOptionSelect($event, option, i)"
:tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event, i)" @blur="onBlur($event)"
:class="['p-button p-component p-button-text-only', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option), 'p-focus': (i === focusedIndex)}]">
<slot :option="option" :index="i">
<slot name="option" :option="option" :index="i">
<span class="p-button-text p-c">{{getOptionLabel(option)}}</span>
</slot>
</div>

6
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -14,10 +14,10 @@
<h3>Dropdown and Templating</h3>
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
<template slot="item" slot-scope="{item}">
<template #item="slotProps">
<div class="p-clearfix p-autocomplete-brand-item">
<img :alt="item" :src="'/demo/images/car/' + item + '.png'" />
<div>{{item}}</div>
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
<div>{{slotProps.item}}</div>
</div>
</template>
</AutoComplete>

4
src/views/chips/ChipsDemo.vue
View File

@ -13,9 +13,9 @@
<h3>Template</h3>
<Chips v-model="value2">
<template slot-scope="{value}">
<template #chip="slotProps">
<div>
<span>{{value}} - (active) </span>
<span>{{slotProps.value}} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>

6
src/views/dropdown/DropdownDemo.vue
View File

@ -22,10 +22,10 @@
<span>{{props.option.brand}}</span>
</div>
</template>
<template slot="option" slot-scope="{option}">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</Dropdown>

6
src/views/listbox/ListboxDemo.vue
View File

@ -13,10 +13,10 @@
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
<template slot-scope="{option}">
<template #option="slotProps">
<div class="p-clearfix">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
<span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
</div>
</template>
</Listbox>

12
src/views/multiselect/MultiSelectDemo.vue
View File

@ -13,19 +13,19 @@
<h3>Advanced with Templating and Filtering</h3>
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
<template slot="value" slot-scope="{value}">
<div class="p-multiselect-car-token" v-for="option of value" :key="option.brand">
<template #value="slotProps">
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
</div>
<div class="p-multiselect-empty-car-token" v-if="!value || value.length === 0">
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
Select Brands
</div>
</template>
<template slot="option" slot-scope="{option}">
<template #option="slotProps">
<div class="p-multiselect-car-option">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
</template>
</MultiSelect>

6
src/views/selectbutton/SelectButtonDemo.vue
View File

@ -18,10 +18,10 @@
<h3>Custom Content</h3>
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
<template slot-scope="{option}">
<template #option="slotProps">
<div style="text-align: center; padding: 1em; width: 125px">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="width:48px" />
<div style="margin-top: 1em">{{option.brand}}</div>
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
</div>
</template>
</SelectButton>