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

alias for images

pull/3449/head
Tuğçe Küçükoğlu 2022-12-26 19:20:31 +03:00
parent 38b5526bab
commit c3b08bd370
20 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/autocomplete/index.vue
View File

@ -22,7 +22,7 @@
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
<div>{{ slotProps.item.label }}</div>
</div>
</template>
@ -32,7 +32,7 @@
<AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-spinner" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" optionLabel="name" forceSelection>
<template #item="slotProps">
<div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
<div>{{ slotProps.item.name }}</div>
</div>
</template>

4
pages/button/ButtonDoc.vue
View File

@ -136,11 +136,11 @@ import Button from 'primevue/button';
<p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<pre v-code><code>
&lt;Button type="button" class="px-3"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
&lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem"/&gt;
&lt;/Button&gt;
&lt;Button type="button" class="p-button-outlined p-button-success"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt;
&lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem" /&gt;
&lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt;

2
pages/cascadeselect/CascadeSelectDoc.vue
View File

@ -118,7 +118,7 @@ data() &#123;
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt;

2
pages/cascadeselect/index.vue
View File

@ -22,7 +22,7 @@
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img v-if="slotProps.option.states" src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img v-if="slotProps.option.states" src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>

4
pages/datatable/Filter.vue
View File

@ -46,7 +46,7 @@
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">
@ -169,7 +169,7 @@
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel, filterCallback }">

6
pages/datatable/RowGroup.vue
View File

@ -17,7 +17,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>
@ -61,7 +61,7 @@
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>
@ -100,7 +100,7 @@
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>

2
pages/datatable/Scroll.vue
View File

@ -104,7 +104,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>

4
pages/datatable/State.vue
View File

@ -36,7 +36,7 @@
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
<template #filter>
@ -102,7 +102,7 @@
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
<template #filter>

2
pages/datatable/index.vue
View File

@ -54,7 +54,7 @@
</Column>
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
<template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">

2
pages/dock/index.vue
View File

@ -362,7 +362,7 @@ export default {
width: 100%;
height: 450px;
position: relative;
background-image: url('../../assets/images/dock/window.jpg');
background-image: url('@/assets/images/dock/window.jpg');
background-repeat: no-repeat;
background-size: cover;
z-index: 1;

6
pages/dropdown/index.vue
View File

@ -25,7 +25,7 @@
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
@ -35,7 +35,7 @@
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
<div v-if="slotProps.value" class="country-item country-item-value">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<div>{{ slotProps.value.name }}</div>
</div>
<span v-else>
@ -44,7 +44,7 @@
</template>
<template #option="slotProps">
<div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>

2
pages/filterservice/index.vue
View File

@ -31,7 +31,7 @@
</Column>
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
<template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel, filterCallback }">

4
pages/landing/ThemeSection.vue
View File

@ -44,7 +44,7 @@
</Column>
<Column field="country.name" header="Country" sortable style="min-width: 14rem">
<template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
</Column>
@ -86,8 +86,8 @@
</template>
<script>
import CustomerService from '../../service/CustomerService';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '../../service/CustomerService';
export default {
emits: ['table-theme-change'],

4
pages/listbox/index.vue
View File

@ -22,7 +22,7 @@
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width: 15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
@ -32,7 +32,7 @@
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width: 15rem" filterPlaceholder="Search">
<template #option="slotProps">
<div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>

2
pages/menubar/index.vue
View File

@ -17,7 +17,7 @@
<div class="card">
<Menubar :model="items">
<template #start>
<img alt="logo" src="../../assets/images/logo.svg" height="40" class="mr-2" />
<img alt="logo" src="@/assets/images/logo.svg" height="40" class="mr-2" />
</template>
<template #end>
<InputText placeholder="Search" type="text" />

6
pages/multiselect/index.vue
View File

@ -25,7 +25,7 @@
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
@ -35,14 +35,14 @@
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps">
<div v-for="option of slotProps.value" :key="option.code" class="country-item country-item-value">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
<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="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>

10
pages/setup/index.vue
View File

@ -332,31 +332,31 @@ app.use(PrimeVue, {
<tr>
<th>
<div class="flex align-items-center">
<img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
<img src="@/assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
Edge
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
<img src="@/assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
Firefox
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
<img src="@/assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
Chrome
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
<img src="@/assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
Safari
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
<img src="@/assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
Opera
</div>
</th>

2
pages/splitbutton/SplitButtonDoc.vue
View File

@ -96,7 +96,7 @@ export default {
<pre v-code><code>
&lt;SplitButton :model="items" class="bg-primary border-round"&gt;
&lt;Button @click="save"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" /&gt;
&lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" /&gt;
&lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt;
&lt;/SplitButton&gt;

2
pages/splitbutton/index.vue
View File

@ -83,7 +83,7 @@
<h5>Templating</h5>
<SplitButton :model="items" class="bg-primary border-round">
<Button @click="save">
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" />
<img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</Button>
</SplitButton>

4
pages/theming/index.vue
View File

@ -10,7 +10,7 @@
<p>Choose from a variety of themes or develop your own theme easily.</p>
<h5>Architecture</h5>
<img alt="Architecture" src="../../assets/images/architecture.jpg" class="architecture-image" />
<img alt="Architecture" src="@/assets/images/architecture.jpg" class="architecture-image" />
<p>
PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into core and theme. Core resides inside
PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings and margins.
@ -45,7 +45,7 @@
</div>
<a href="http://www.primefaces.org/designer/primevue" class="designer-image">
<img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" />
<img alt="PrimeVue Designer" src="@/assets/images/primevue-designer.jpg" style="width: 100%" />
</a>
<h5>Scaling</h5>