Skip to content

Commit

Permalink
Demo update on source codes
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Aug 4, 2019
1 parent 84fb736 commit dad7303
Show file tree
Hide file tree
Showing 54 changed files with 1,343 additions and 2,018 deletions.
198 changes: 92 additions & 106 deletions src/views/accordion/AccordionDoc.vue
View file

Large diffs are not rendered by default.

53 changes: 20 additions & 33 deletions src/views/autocomplete/AutoCompleteDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,41 +257,28 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;AutoComplete&lt;/h1&gt;
&lt;p&gt;AutoComplete is an input component that provides real-time suggestions when being typed.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" /&gt;
&lt;span style="marginLeft: .5em"&gt;Country: {{selectedCountry || 'none'}}&lt;/span&gt;

&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" /&gt;
&lt;span style="marginLeft: .5em"&gt;Country: {{selectedCountry || 'none'}}&lt;/span&gt;

&lt;h3&gt;Dropdown and Templating&lt;/h3&gt;
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-clearfix p-autocomplete-brand-item"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/AutoComplete&gt;
&lt;span style="marginLeft: .5em"&gt;Brand: {{brand || 'none'}}&lt;/span&gt;
&lt;h3&gt;Dropdown and Templating&lt;/h3&gt;
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-clearfix p-autocomplete-brand-item"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/AutoComplete&gt;
&lt;span style="marginLeft: .5em"&gt;Brand: {{brand || 'none'}}&lt;/span&gt;

&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;span class="p-fluid"&gt;
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
&lt;/span&gt;
&lt;ul&gt;
&lt;li v-for="(c,i) of selectedCountries" :key="i"&gt;{{c}}&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;span class="p-fluid"&gt;
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
&lt;/span&gt;
&lt;ul&gt;
&lt;li v-for="(c,i) of selectedCountries" :key="i"&gt;{{c}}&lt;/li&gt;
&lt;/ul&gt;
</template>
</CodeHighlight>

Expand Down
69 changes: 28 additions & 41 deletions src/views/button/ButtonDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,49 +129,36 @@ import Button from 'primevue/button';
</a>
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Button&lt;/h1&gt;
&lt;p&gt;Button is an extension to standard button element with icons and theming.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Button label="Click" /&gt;
&lt;Button label="Click" icon="pi pi-check" /&gt;
&lt;Button label="Click" icon="pi pi-check" iconPos="right" /&gt;
&lt;Button icon="pi pi-check" /&gt;
&lt;Button label="Click" disabled="disabled" /&gt;

&lt;h3&gt;Severities&lt;/h3&gt;
&lt;Button label="Primary" /&gt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-success" /&gt;
&lt;Button label="Info" class="p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt;
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Button label="Click" /&gt;
&lt;Button label="Click" icon="pi pi-check" /&gt;
&lt;Button label="Click" icon="pi pi-check" iconPos="right" /&gt;
&lt;Button icon="pi pi-check" /&gt;
&lt;Button label="Click" disabled="disabled" /&gt;

&lt;h3&gt;Raised Buttons&lt;/h3&gt;
&lt;Button label="Primary" class="p-button-raised" /&gt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-raised p-button-success" /&gt;
&lt;Button label="Info" class="p-button-raised p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt;
&lt;h3&gt;Severities&lt;/h3&gt;
&lt;Button label="Primary" /&gt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-success" /&gt;
&lt;Button label="Info" class="p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt;

&lt;h3&gt;Rounded Buttons&lt;/h3&gt;
&lt;Button label="Primary" class="p-button-rounded" /&gt;
&lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-rounded p-button-success" /&gt;
&lt;Button label="Info" class="p-button-rounded p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;h3&gt;Raised Buttons&lt;/h3&gt;
&lt;Button label="Primary" class="p-button-raised" /&gt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-raised p-button-success" /&gt;
&lt;Button label="Info" class="p-button-raised p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt;

&lt;h3&gt;Rounded Buttons&lt;/h3&gt;
&lt;Button label="Primary" class="p-button-rounded" /&gt;
&lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-rounded p-button-success" /&gt;
&lt;Button label="Info" class="p-button-rounded p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
</template>
</CodeHighlight>

Expand Down
149 changes: 69 additions & 80 deletions src/views/calendar/CalendarDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -534,87 +534,76 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Calendar&lt;/h1&gt;
&lt;p&gt;Calendar is an input component to select a date.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="content-section implementation" style="padding-top:0"&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Calendar v-model="date1" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Spanish&lt;/h3&gt;
&lt;Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Icon&lt;/h3&gt;
&lt;Calendar v-model="date3" :showIcon="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Min-Max&lt;/h3&gt;
&lt;Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Disable Days&lt;/h3&gt;
&lt;Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Navigators&lt;/h3&gt;
&lt;Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Range&lt;/h3&gt;
&lt;Calendar v-model="dates2" selectionMode="range" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Button Bar&lt;/h3&gt;
&lt;Calendar v-model="date7" :showButtonBar="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Time / 24h&lt;/h3&gt;
&lt;Calendar v-model="date8" :showTime="true" :showSeconds="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Time Only / 12h&lt;/h3&gt;
&lt;Calendar v-model="date9" :timeOnly="true" hourFormat="12" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Month/Year Picker&lt;/h3&gt;
&lt;Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Multiple Months&lt;/h3&gt;
&lt;Calendar v-model="date11" :numberOfMonths="3" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Date Template&lt;/h3&gt;
&lt;Calendar v-model="date12"&gt;
&lt;template #date="slotProps"&gt;
&lt;div v-if="slotProps.date.day &gt; 10 &amp;&amp; slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/div&gt;
&lt;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Calendar&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Touch UI&lt;/h3&gt;
&lt;Calendar v-model="date13" :touchUI="true" /&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Inline&lt;/h3&gt;
&lt;Calendar v-model="date14" :inline="true" :showWeek="true" /&gt;
&lt;/div&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Calendar v-model="date1" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Spanish&lt;/h3&gt;
&lt;Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Icon&lt;/h3&gt;
&lt;Calendar v-model="date3" :showIcon="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Min-Max&lt;/h3&gt;
&lt;Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Disable Days&lt;/h3&gt;
&lt;Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Navigators&lt;/h3&gt;
&lt;Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Range&lt;/h3&gt;
&lt;Calendar v-model="dates2" selectionMode="range" :manualInput="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Button Bar&lt;/h3&gt;
&lt;Calendar v-model="date7" :showButtonBar="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Time / 24h&lt;/h3&gt;
&lt;Calendar v-model="date8" :showTime="true" :showSeconds="true" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Time Only / 12h&lt;/h3&gt;
&lt;Calendar v-model="date9" :timeOnly="true" hourFormat="12" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Month/Year Picker&lt;/h3&gt;
&lt;Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Multiple Months&lt;/h3&gt;
&lt;Calendar v-model="date11" :numberOfMonths="3" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Date Template&lt;/h3&gt;
&lt;Calendar v-model="date12"&gt;
&lt;template #date="slotProps"&gt;
&lt;div v-if="slotProps.date.day &gt; 10 &amp;&amp; slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/div&gt;
&lt;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Calendar&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Touch UI&lt;/h3&gt;
&lt;Calendar v-model="date13" :touchUI="true" /&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Inline&lt;/h3&gt;
&lt;Calendar v-model="date14" :inline="true" :showWeek="true" /&gt;
</template>
</CodeHighlight>

Expand Down
63 changes: 25 additions & 38 deletions src/views/card/CardDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,45 +81,32 @@ import Card from 'primevue/card';
</a>
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Card&lt;/h1&gt;
&lt;p&gt;Card is a flexible container component.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="content-section implementation"&gt;
&lt;Card style="width: 25em; margin-bottom: 2em"&gt;
&lt;template slot="title"&gt;
Simple Card
&lt;/template&gt;
&lt;template slot="content"&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
&lt;/template&gt;
&lt;/Card&gt;
&lt;Card style="width: 25em; margin-bottom: 2em"&gt;
&lt;template slot="title"&gt;
Simple Card
&lt;/template&gt;
&lt;template slot="content"&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
&lt;/template&gt;
&lt;/Card&gt;

&lt;Card style="width: 25em"&gt;
&lt;template slot="header"&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt;
&lt;/template&gt;
&lt;template slot="title"&gt;
Advanced Card
&lt;/template&gt;
&lt;template slot="content"&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;Button icon="pi pi-check" label="Save" class="p-button-raised" /&gt;
&lt;Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/template&gt;
&lt;/Card&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;Card style="width: 25em"&gt;
&lt;template slot="header"&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt;
&lt;/template&gt;
&lt;template slot="title"&gt;
Advanced Card
&lt;/template&gt;
&lt;template slot="content"&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;Button icon="pi pi-check" label="Save" class="p-button-raised" /&gt;
&lt;Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/template&gt;
&lt;/Card&gt;
</template>
</CodeHighlight>
</TabPanel>
Expand Down
Loading

0 comments on commit dad7303

Please sign in to comment.