Skip to content

Commit

Permalink
Add bar indicator support
Browse files Browse the repository at this point in the history
  • Loading branch information
Nathan Reyes committed Oct 24, 2017
1 parent 58ad66a commit f656d63
Show file tree
Hide file tree
Showing 26 changed files with 399 additions and 126 deletions.
2 changes: 2 additions & 0 deletions _todos.txt
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
- Add day-height back as a prop
- Add 'Star on Github' button


CALENDAR

Expand Down
4 changes: 2 additions & 2 deletions config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ module.exports = {
},
lib: {
env: require('./prod.env'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'lib',
assetsRoot: path.resolve(__dirname, '../lib'),
assetsSubDirectory: '',
assetsPublicPath: '/',
productionSourceMap: true,
productionGzip: false,
Expand Down
53 changes: 53 additions & 0 deletions docs/components/api/CalendarApiBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<b-table
:data='props'>
<template scope='props'>
<b-table-column label='Property'>
<span v-html='props.row.propertyName'></span>
</b-table-column>
<b-table-column label='Description'>
<span v-html='props.row.description'></span>
</b-table-column>
<b-table-column label='Default'>
<span v-html='props.row.default'></span>
</b-table-column>
</template>
</b-table>
</template>

<script>
export default {
data() {
const props = [
{
propertyName: '<code>height: String</code>',
description: 'Height of bar.',
default: '<code>"5px"</code>',
},
{
propertyName: '<code>backgroundColor: String</code>',
description: 'Background color of bar.',
default: '<code>"rgba(0, 0, 0, 0.5)"</code>',
},
{
propertyName: '<code>borderColor: String</code>',
description: 'Border color of bar.',
default: '<code>undefined</code>',
},
{
propertyName: '<code>borderWidth: String</code>',
description: 'Border width of bar.',
default: '<code>"0"</code>',
},
{
propertyName: '<code>borderStyle: String</code>',
description: 'Border style of bar.',
default: '<code>"solid"</code>',
},
];
return {
props,
};
},
};
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,32 @@ export default {
const props = [
{
propertyName: '<code>diameter: String</code>',
description: 'Diameter of indicator.',
description: 'Diameter of dot.',
default: '<code>"5px"</code>',
},
{
propertyName: '<code>backgroundColor: String</code>',
description: 'Background color of indicator.',
description: 'Background color of dot.',
default: '<code>"rgba(0, 0, 0, 0.5)"</code>',
},
{
propertyName: '<code>borderColor: String</code>',
description: 'Border color of indicator.',
description: 'Border color of dot.',
default: '<code>undefined</code>',
},
{
propertyName: '<code>borderWidth: String</code>',
description: 'Border width of indicator.',
description: 'Border width of dot.',
default: '<code>"0"</code>',
},
{
propertyName: '<code>borderStyle: String</code>',
description: 'Border style of indicator.',
description: 'Border style of dot.',
default: '<code>"solid"</code>',
},
{
propertyName: '<code>borderRadius: String</code>',
description: 'Border radius of indicator.',
description: 'Border radius of dot.',
default: '<code>"50%"<code>',
},
];
Expand Down
9 changes: 7 additions & 2 deletions docs/components/api/CalendarApiProps.vue
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,13 @@ export default {
default: '<code>[]</code>',
},
{
name: '<code>indicators-offset: String',
description: 'Offset margin of indicators from bottom of day cell.',
name: '<code>dots-offset: String',
description: 'Offset margin of dots from bottom of day cell.',
default: '<code>"0"</code>',
},
{
name: '<code>bars-offset: String',
description: 'Offset margin of bars from bottom of day cell.',
default: '<code>"0"</code>',
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export default {
return {
attributes: [
{
indicator: {
backgroundColor: '#ff3333', // Red
bar: {
backgroundColor: '#ff4d4d', // Red
},
dates: [
new Date(thisMonthYear, thisMonth, 1),
Expand All @@ -26,8 +26,8 @@ export default {
],
},
{
indicator: {
backgroundColor: '#0040ff', // Blue
bar: {
backgroundColor: '#398fac', // Turqoise
},
dates: [
new Date(thisMonthYear, thisMonth, 4),
Expand All @@ -42,8 +42,8 @@ export default {
],
},
{
indicator: {
backgroundColor: '#ff8000', // Orange
bar: {
backgroundColor: '#794dff', // Purple
},
dates: [
new Date(thisMonthYear, thisMonth, 12),
Expand Down
6 changes: 3 additions & 3 deletions docs/components/examples/ExContentStyles.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default {
attributes: [
{
contentStyle: {
color: '#ff3333', // Red
color: '#ff4d4d', // Red
fontWeight: 600,
fontSize: '1em',
},
Expand All @@ -34,7 +34,7 @@ export default {
},
{
contentStyle: {
color: '#0040ff', // Blue
color: '#398fac', // Blue
fontWeight: 600,
fontStyle: 'italic',
},
Expand All @@ -50,7 +50,7 @@ export default {
},
{
contentStyle: {
color: '#ff8000', // Orange
color: '#794dff', // Turqoise
fontWeight: 600,
},
dates: [
Expand Down
63 changes: 63 additions & 0 deletions docs/components/examples/ExDots.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<v-calendar
:attributes='attributes'
is-double-paned>
</v-calendar>
</template>

<script>
import { getExampleMonthComps } from '../utils';
export default {
data() {
const { thisMonth, thisMonthYear, nextMonth, nextMonthYear } = getExampleMonthComps();
return {
attributes: [
{
dot: {
backgroundColor: '#ff4d4d', // Red
},
dates: [
new Date(thisMonthYear, thisMonth, 1),
new Date(thisMonthYear, thisMonth, 10),
new Date(thisMonthYear, thisMonth, 22),
new Date(nextMonthYear, nextMonth, 6),
new Date(nextMonthYear, nextMonth, 16),
],
},
{
dot: {
backgroundColor: '#398fac', // Turqoise
},
dates: [
new Date(thisMonthYear, thisMonth, 4),
new Date(thisMonthYear, thisMonth, 10),
new Date(thisMonthYear, thisMonth, 15),
new Date(nextMonthYear, nextMonth, 1),
new Date(nextMonthYear, nextMonth, 12),
{
start: new Date(nextMonthYear, nextMonth, 20),
end: new Date(nextMonthYear, nextMonth, 25),
},
],
},
{
dot: {
backgroundColor: '#794dff', // Purple
},
dates: [
new Date(thisMonthYear, thisMonth, 12),
new Date(thisMonthYear, thisMonth, 26),
new Date(thisMonthYear, thisMonth, 15),
new Date(nextMonthYear, nextMonth, 9),
new Date(nextMonthYear, nextMonth, 5),
new Date(nextMonthYear, nextMonth, 6),
new Date(nextMonthYear, nextMonth, 20),
new Date(nextMonthYear, nextMonth, 25),
],
},
],
};
},
};
</script>
2 changes: 1 addition & 1 deletion docs/components/examples/ExHighlights.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default {
},
{
highlight: {
backgroundColor: '#66b3cc', // Orange
backgroundColor: '#66b3cc', // Turqoise
borderColor: '#53a9c6',
borderWidth: '2px',
borderRadius: '5px',
Expand Down
Empty file modified docs/components/examples/ExStyling-1.vue
100644 → 100755
Empty file.
9 changes: 6 additions & 3 deletions docs/components/pages/PageHome.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<section-intro></section-intro>
<section-attributes></section-attributes>
<section-highlights></section-highlights>
<section-indicators></section-indicators>
<section-dots></section-dots>
<section-bars></section-bars>
<section-content-styles></section-content-styles>
<section-date-picker></section-date-picker>
<section-date-picker-slot></section-date-picker-slot>
Expand All @@ -15,7 +16,8 @@ import SectionIntro from '../sections/SectionIntro';
import SectionAttributes from '../sections/SectionAttributes';
import SectionContentStyles from '../sections/SectionContentStyles';
import SectionHighlights from '../sections/SectionHighlights';
import SectionIndicators from '../sections/SectionIndicators';
import SectionDots from '../sections/SectionDots';
import SectionBars from '../sections/SectionBars';
import SectionDatePicker from '../sections/SectionDatePicker';
import SectionDatePickerSlot from '../sections/SectionDatePickerSlot';
Expand All @@ -25,7 +27,8 @@ export default {
SectionAttributes,
SectionContentStyles,
SectionHighlights,
SectionIndicators,
SectionDots,
SectionBars,
SectionDatePicker,
SectionDatePickerSlot,
},
Expand Down
27 changes: 24 additions & 3 deletions docs/components/pages/PageStyling.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,36 @@
<template>
<div>
<section-styling-1></section-styling-1>
<section-styling
v-for='(example, i) in examples'
:key='i'
:step='i + 1'
:title='example.title'
:code='example.code'>
<component :is='example.component'></component>
</section-styling>
</div>
</template>

<script>
import SectionStyling1 from '../sections/SectionStyling-1';
import ExStyling1 from '../examples/ExStyling-1';
import ExStyling1Code from '!!raw-loader!../examples/ExStyling-1';
import SectionStyling from '../sections/SectionStyling';
export default {
components: {
SectionStyling1,
SectionStyling,
},
data() {
return {
examples: [
{
title: 'Styled Header & Weekday Sections',
code: ExStyling1Code,
component: ExStyling1,
},
],
};
},
};
</script>
13 changes: 9 additions & 4 deletions docs/components/sections/SectionApi.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,11 @@
<b-tab-item label='Highlight'>
<calendar-api-highlight></calendar-api-highlight>
</b-tab-item>
<b-tab-item label='Indicator'>
<calendar-api-indicator></calendar-api-indicator>
<b-tab-item label='Dot'>
<calendar-api-dot></calendar-api-dot>
</b-tab-item>
<b-tab-item label='Bar'>
<calendar-api-bar></calendar-api-bar>
</b-tab-item>
</b-tabs>
</b-tab-item>
Expand All @@ -44,7 +47,8 @@ import CalendarApiEvents from '../api/CalendarApiEvents';
import CalendarApiSlots from '../api/CalendarApiSlots';
import CalendarApiAttribute from '../api/CalendarApiAttribute';
import CalendarApiHighlight from '../api/CalendarApiHighlight';
import CalendarApiIndicator from '../api/CalendarApiIndicator';
import CalendarApiDot from '../api/CalendarApiDot';
import CalendarApiBar from '../api/CalendarApiBar';
import CalendarApiPage from '../api/CalendarApiPage';
import CalendarApiDayInfo from '../api/CalendarApiDayInfo';
Expand All @@ -55,7 +59,8 @@ export default {
CalendarApiSlots,
CalendarApiAttribute,
CalendarApiHighlight,
CalendarApiIndicator,
CalendarApiDot,
CalendarApiBar,
CalendarApiPage,
CalendarApiDayInfo,
},
Expand Down
3 changes: 2 additions & 1 deletion docs/components/sections/SectionAttributes.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
<p>Attributes are used to decorate the calendar with the following objects:</p>
<ul>
<li>highlights</li>
<li>indicators</li>
<li>dot indicators</li>
<li>bar indicators</li>
<li>content styles</li>
<li>content hover styles</li>
</ul>
Expand Down
Loading

0 comments on commit f656d63

Please sign in to comment.