@thinkpixellab-public/px-vue 3.0.1

package/components/PxCalendar.vue

@@ -0,0 +1,385 @@
+<!--
+    Usage:
+    <px-calendar :date.sync="mydate" />
+    or
+    <px-calendar date="02/15/2020" @datechanged="onDateChange" />
+
+    This component always displays as a calendar. If you want to couple with a text input,
+    you can do that pretty easily on your own or else use DateTimePicker which couples this
+    with an input and a popup.
+
+-->
+
+<template>
+    <div
+        :class="bem()"
+        ref="calendar"
+        :style="{ height: this.fixedHeight ? this.fixedHeight + 'px' : 'auto' }"
+    ></div>
+</template>
+
+<script>
+import PxBaseDate from './PxBaseDate.vue';
+import PxBase from './PxBase.vue';
+
+const compareDates = function (a, b) {
+    if (a && b && a.getTime && b.getTime) {
+        return a.getTime() === b.getTime();
+    } else {
+        return a === b;
+    }
+};
+
+export default {
+    mixins: [PxBase, PxBaseDate],
+    props: {
+        minDate: { type: String, default: null },
+        maxDate: { type: String, default: null },
+    },
+    data() {
+        return {
+            fixedHeight: null,
+        };
+    },
+    mounted: function () {
+        // has a dependency on window, so needs to be loaded here
+        const TinyDatePicker = require('tiny-date-picker');
+
+        // create the calendar
+        this.calendar = TinyDatePicker(this.$refs.calendar, {
+            mode: 'dp-permanent',
+            min: this.minDate,
+            max: this.maxDate,
+        });
+
+        // set the initial date
+        if (this.date) {
+            this.setCalendarDate(this.date);
+        }
+
+        // handle date changes
+        this.calendar.on('select', () => {
+            this.dateValue = this.getCalendarDate();
+        });
+
+        // fix the height when we show the year/month picker
+        this.calendar.on('statechange', () => {
+            this.fixedHeight =
+                this.calendar.state.view === 'month' || this.calendar.state.view === 'year'
+                    ? this.$refs.calendar.offsetHeight
+                    : null;
+        });
+    },
+
+    watch: {
+        dateValue(nv) {
+            this.setCalendarDate(nv);
+        },
+    },
+
+    methods: {
+        getCalendarDate() {
+            return this.calendar.state.selectedDate;
+        },
+
+        setCalendarDate(d) {
+            if (this.calendar) {
+                if (!compareDates(this.calendar.state.selectedDate, d)) {
+                    this.calendar.setState({
+                        selectedDate: d,
+                        highlightedDate: d,
+                    });
+                }
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use 'sass:math';
+@use '../styles/px.scss' as *;
+
+.px-calendar {
+    $dp-day-size: sp(3);
+    $dp-day-radius: 3px; // 50%
+    $dp-button-radius: 3px;
+    $dp-fg: clr(page-fg);
+    $dp-fg-subtle: clr(page-fg, $alpha: 0.4);
+    $dp-bg: white;
+    $dp-selection-bg: accent();
+    $dp-hover-bg: rgba(accent(), 0.1);
+    $dp-hover-fg: accent();
+    $dp-today-bg: rgba(accent(), 0.33);
+    $dp-today-fg: clr(page-fg);
+    $dp-link-fg: accent();
+    $dp-link-hover-fg: accent();
+
+    width: ($dp-day-size * 7) + sp(2);
+
+    .dp {
+        width: 100%;
+        height: 100%;
+        font-size: fs(base);
+        position: relative;
+        background: $dp-bg;
+        padding: sp(1);
+        box-sizing: border-box;
+    }
+
+    .dp-permanent {
+        position: relative;
+        height: 100%;
+    }
+
+    .dp-cal-month,
+    .dp-cal-year,
+    .dp-day,
+    .dp-month,
+    .dp-year {
+        box-sizing: border-box;
+        text-align: center;
+        text-decoration: none;
+        position: relative;
+        border-radius: $dp-button-radius;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+    }
+
+    .dp-cal-header {
+        position: relative;
+        display: flex;
+        //height: $dp-day-size * 1.25;
+        align-items: center;
+        margin-bottom: sp(1);
+    }
+
+    .dp-cal-month,
+    .dp-cal-year {
+        //font-size: fs(md);
+        font-size: 1.1em;
+        height: sp(2.5);
+        padding: 0 0.2em;
+
+        // padding: 16px 8px 8px;
+        // outline: none;
+    }
+
+    .dp-cal-month {
+        font-weight: 700;
+    }
+
+    .dp-next,
+    .dp-prev {
+        @include control-reset();
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        top: 0;
+        position: absolute;
+        width: $dp-day-size;
+        height: $dp-day-size;
+        left: auto;
+        text-indent: -9999px;
+        border-radius: $dp-button-radius;
+        cursor: pointer;
+        &:hover {
+            background-color: transparent;
+        }
+    }
+
+    .dp-next {
+        right: 0;
+        background-image: inline-svg(
+            '<svg width="8px" height="14px" viewBox="0 0 8 14" version="1.1" xmlns="http://www.w3.org/2000/svg" ><polyline stroke="stroke-value" fill="none" fill-rule="evenodd" stroke-width="2" points="1 1 7 7 1 13" stroke-linecap="round" stroke-linejoin="round"></polyline></svg>',
+            (
+                stroke-value: $dp-fg,
+            )
+        );
+    }
+
+    .dp-prev {
+        right: $dp-day-size;
+        background-image: inline-svg(
+            '<svg width="8px" height="14px" viewBox="0 0 8 14" version="1.1" xmlns="http://www.w3.org/2000/svg" ><polyline stroke="stroke-value" fill="none" fill-rule="evenodd" stroke-width="2" points="7 1 1 7 7 13" stroke-linecap="round" stroke-linejoin="round"></polyline></svg>',
+            (
+                stroke-value: $dp-fg,
+            )
+        );
+    }
+
+    .dp-day-today {
+        border-radius: $dp-day-radius;
+        background-image: linear-gradient(
+            135deg,
+            transparent 37.5%,
+            $dp-today-bg 37.5%,
+            $dp-today-bg 50%,
+            transparent 50%,
+            transparent 87.5%,
+            $dp-today-bg 87.5%,
+            $dp-today-bg 100%
+        );
+        background-size: 5.66px 5.66px;
+    }
+
+    .dp-cal-footer {
+        display: flex;
+        justify-content: center;
+        margin-top: sp(0.5);
+        button {
+            font-size: 0.66em;
+            text-transform: uppercase;
+            font-weight: 700;
+            height: sp(2);
+            line-height: sp(2);
+            border-radius: $dp-button-radius;
+            padding: 0 sp(0.5);
+            cursor: pointer;
+
+            &:hover {
+                color: $dp-hover-fg;
+                background-color: $dp-hover-bg;
+            }
+        }
+    }
+
+    .dp-permanent .dp-today,
+    .dp-permanent .dp-clear,
+    .dp-permanent .dp-close {
+        display: none;
+    }
+
+    @media screen and (min-device-width: 1200px) {
+        .dp-close:hover,
+        .dp-close:focus,
+        .dp-clear:hover,
+        .dp-clear:focus,
+        .dp-today:hover,
+        .dp-today:focus,
+        .dp-next:hover,
+        .dp-next:focus,
+        .dp-prev:hover,
+        .dp-prev:focus,
+        .dp-cal-month:focus,
+        .dp-cal-month:hover,
+        .dp-cal-year:hover,
+        .dp-cal-year:focus {
+            background-color: $dp-hover-bg;
+            color: $dp-hover-fg;
+        }
+    }
+
+    .dp-col-header,
+    .dp-day {
+        //width: 14.28571429%;
+        width: divide(1, 7) * 100%;
+        border-radius: $dp-day-radius;
+        display: inline-block;
+        text-align: center;
+    }
+
+    .dp-day {
+        height: $dp-day-size;
+        cursor: pointer;
+    }
+
+    .dp-col-header {
+        color: $dp-fg-subtle;
+        text-transform: uppercase;
+        font-size: 0.66em;
+        font-weight: 700;
+        margin-bottom: sp(0.5);
+    }
+
+    .dp-years,
+    .dp-months {
+        box-sizing: border-box;
+        overflow: auto !important; /* HACK for Chrome on Android */
+        @include abs;
+        padding: sp(1);
+        @include scrollbar(8px, accent(), $background: rgba(accent(), 0.1));
+    }
+
+    .dp-month {
+        width: 50%;
+        display: inline-block;
+        padding: sp(1 0.5);
+    }
+
+    .dp-year {
+        display: block;
+        padding: sp(1 0.5);
+        width: 100%;
+    }
+
+    .dp-edge-day {
+        color: $dp-fg-subtle;
+    }
+
+    .dp-day:hover,
+    .dp-day:focus,
+    .dp-month:hover,
+    .dp-year:hover {
+        outline: none;
+        background: $dp-hover-bg;
+        color: $dp-hover-fg;
+    }
+
+    .dp-day.dp-selected:hover,
+    .dp-day.dp-selected:focus,
+    .dp-day.dp-selected {
+        background: accent();
+        color: #fff;
+        box-shadow: shadow(5);
+    }
+
+    // TODO
+    .dp-day-disabled {
+        background: transparent !important;
+        color: $dp-fg-subtle !important;
+        &:before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 1px;
+            background-color: $dp-fg-subtle;
+            opacity: 0.5;
+            display: block;
+            left: 0%;
+            top: 50%;
+            transform: rotate(-45deg);
+        }
+        //color: $dp-
+    }
+
+    // // TODO
+    // .dp-day-disabled:focus,
+    // .dp-day-disabled:hover {
+    //     background: #ddd;
+    // }
+
+    // // TODO?
+    // .dp-focuser {
+    //     position: absolute;
+    //     z-index: 0;
+    //     top: 50%;
+    //     left: 50%;
+    // }
+
+    /* Responsive overrides */
+    @media (max-width: 480px), (max-height: 480px) {
+        .dp-modal .dp {
+            font-size: 0.9em;
+            width: auto;
+            width: 100%;
+        }
+
+        .dp-day-of-week,
+        .dp-day {
+            padding: 8px;
+        }
+    }
+}
+</style>

package/components/PxCard.vue

@@ -0,0 +1,47 @@
+<!--
+    Basic card component
+-->
+<template>
+    <div :class="bem()">
+        <slot />
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+export default {
+    name: 'px-card',
+    // components: { Component },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    // data() { return { b: 0 }; },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-card {
+    $card: flat-merge(
+        get(
+            'controls:card',
+            (
+                background-color: clr(page-bg),
+                padding: sp(2),
+                border-radius: 10px,
+                box-shadow: depth-shadow(10, 0.1, black),
+                aspect-ratio: calc(4 / 5),
+                min-width: 200px,
+                max-width: 600px,
+            )
+        )
+    );
+
+    @include css-map($card);
+}
+</style>