@thinkpixellab-public/px-vue 3.0.1

package/components/PxDatePicker.vue

@@ -0,0 +1,249 @@
+<!--
+    Complete date picker with optional modes for button and textbox input.
+
+-->
+<template>
+    <px-popup
+        :class="bem({ mode: mode, ...variantsMap })"
+        :tag="buttonMode ? 'button' : 'div'"
+        :trigger="buttonMode ? 'click' : null"
+        :modalAttrs="modalAttrs"
+        v-bind="popupProps"
+        ref="popup"
+    >
+        <!-- button mode -->
+        <span :class="bem('button-outer')" v-if="buttonMode">
+            {{ formatDate(dateValue) || placeholder }}
+            <px-icon :class="bem('icon')" :src="icon" :size="iconSize" v-if="icon" />
+        </span>
+
+        <!-- textbox mode -->
+        <div :class="bem('textbox-outer')" v-else>
+            <px-textbox
+                ref="textbox"
+                :value="textboxValue"
+                @focus="textboxFocus"
+                @input="textboxInput"
+                @keydown="textboxKeyDown"
+                @blur="textboxBlur"
+            ></px-textbox>
+            <px-icon-button
+                v-if="icon"
+                :class="bem('icon-button')"
+                ref="textboxButton"
+                variant="basic accent-hover"
+                :src="icon"
+                :size="iconSize"
+                @click="textboxButtonClick"
+            />
+        </div>
+
+        <template #popup>
+            <div ref="dialog" :class="bem('dialog')">
+                <px-calendar :class="bem('calendar')" v-model="dateValue" />
+                <div :class="bem('clock')" v-if="clock">
+                    <px-clock v-model="dateValue" />
+                </div>
+            </div>
+        </template>
+    </px-popup>
+</template>
+
+<script>
+import * as chrono from 'chrono-node';
+import dateFormat from 'dateformat';
+import PxBase from './PxBase.vue';
+import PxBaseDate from './PxBaseDate.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+import PxCalendar from './PxCalendar.vue';
+import PxClock from './PxClock.vue';
+import PxIcon from './PxIcon.vue';
+import PxIconButton from './PxIconButton.vue';
+import PxPopup from './PxPopup.vue';
+import PxTextbox from './PxTextbox.vue';
+
+export default {
+    name: 'px-date-picker',
+    mixins: [PxBase, PxBaseDate, PxBaseVariants],
+    components: { PxPopup, PxCalendar, PxClock, PxIcon, PxTextbox, PxIconButton },
+    props: {
+        // button or textbox mode
+        mode: { type: String, default: 'button' },
+
+        // whether or not to also show the time picker
+        clock: { type: Boolean, default: false },
+
+        // date format options (see https://github.com/felixge/node-dateformat#mask-options)
+        format: { type: String, default: 'auto' },
+
+        // placeholder text (shown when date is null)
+        placeholder: { type: String, default: 'Select a date...' },
+
+        // icon to be displayed in the button / textbox to indiciate this is a picker
+        icon: { type: String, default: require('../assets/icons/calendar.svg') },
+
+        // the size of the icon
+        iconSize: { default: null },
+
+        // properties that get set on the popup object (see PxPopup for details)
+        popupProps: {
+            type: Object,
+            default: () => {
+                return {
+                    placement: 'bottom-start',
+                    setPopupMinWidth: false,
+                };
+            },
+        },
+    },
+    data() {
+        return {
+            textboxFocused: false,
+            textboxEditValue: '',
+        };
+    },
+    computed: {
+        buttonMode() {
+            return this.mode == 'button';
+        },
+        textboxMode() {
+            return !this.buttonMode;
+        },
+        showPlaceholder() {
+            return !!this.dateValue;
+        },
+        textboxValue() {
+            return this.textboxFocused ? this.textboxEditValue : this.formatDate(this.dateValue);
+        },
+        modalAttrs() {
+            return {
+                autoFocusSelector: '.dp-selected',
+                autoFocusEnabled: this.buttonMode,
+                restoreFocusEnabled: this.buttonMode,
+            };
+        },
+    },
+    methods: {
+        formatDate(date) {
+            if (date) {
+                let format = this.format;
+                if (format == 'auto') {
+                    format = 'm/d/yy hh:MM tt';
+                    if (!this.clock) {
+                        format = 'mediumDate';
+                    }
+                }
+
+                return dateFormat(date, format);
+            }
+            return null;
+        },
+        textboxFocus() {
+            this.textboxFocused = true;
+            this.textboxEditValue = this.formatDate(this.dateValue);
+            this.$refs.popup.openPopup();
+        },
+        textboxInput(e) {
+            this.textboxEditValue = e.target.value;
+            this.$nextTick(() => {
+                let date = chrono.parseDate(this.textboxEditValue);
+                if (date) {
+                    this.dateValue = date;
+                }
+            });
+        },
+
+        textboxKeyDown(e) {
+            if (e.key == 'Enter') {
+                if (this.dateValue) {
+                    this.textboxEditValue = this.formatDate(this.dateValue);
+                    this.$refs.popup.closePopup();
+                }
+            }
+        },
+        textboxBlur() {
+            this.textboxFocused = false;
+            setTimeout(() => {
+                let dialogFocus = this.$refs.dialog.contains(document.activeElement);
+                if (!dialogFocus) {
+                    this.$refs.popup.closePopup();
+                }
+            }, 100);
+        },
+        textboxButtonClick() {
+            this.$refs.popup.openPopup();
+            this.$refs.textbox.$el.focus();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-date-picker {
+    $popup: get(
+        'controls:popup',
+        (
+            background-color: clr(page-bg),
+            border-radius: get('controls:border-radius'),
+            box-shadow: shadow(15),
+            font-size: get('controls:font-size'),
+            font-family: get('controls:font-family'),
+        )
+    );
+
+    &__dialog {
+        @include css-map($popup);
+        display: flex;
+        overflow: hidden;
+    }
+
+    @include bem(calendar) {
+        padding: sp(2);
+    }
+
+    // "default" variant
+
+    &--default {
+        &.px-date-picker--mode-button {
+            $dropdown-button: get('controls:dropdown:button', ());
+            @include button($dropdown-button);
+            justify-content: stretch;
+
+            // placeholder
+            @include bem(placeholder) {
+                $placeholder: get('controls:dropdown:placeholder', ());
+                $placeholder: control-placeholder-style($placeholder);
+                @include css-map($placeholder);
+            }
+        }
+    }
+    &__button-outer {
+        display: inline-flex;
+        justify-content: space-between;
+        flex: 1;
+        align-items: center;
+    }
+
+    &__icon {
+        margin-left: 1em;
+        margin-right: -0.1em;
+    }
+
+    &__textbox-outer {
+        position: relative;
+    }
+
+    &__icon-button {
+        @include center-y;
+        right: 0.5em;
+        z-index: 1;
+    }
+}
+
+.px-date-picker__clock {
+    background-color: gray(8);
+    padding: sp(1);
+}
+</style>

package/components/PxDropdown.vue

@@ -0,0 +1,181 @@
+<!--
+
+    Default variant style keys:
+
+        - controls:dropdown:button - style for the default button (that gets clicked to open the popup)
+        - controls:dropdown:popup - style for the outer container for the popup
+        - controls:dropdown:item - style for the individual clickable items in the popup
+
+-->
+
+<template>
+    <px-popup
+        :class="bem(variantsMap)"
+        :popupClass="[bem('popup', variantsMap), popupClass]"
+        :tag="'button'"
+        :trigger="'click'"
+        v-bind="popupProps"
+        ref="popup"
+    >
+        <slot name="selected" :item="selectedItem" :label="selectedLabel">
+            <span v-if="selectedLabel">{{ selectedLabel }}</span>
+            <span v-else :class="bem('placeholder')">{{ placeholder }}</span>
+        </slot>
+        <px-icon :class="bem('icon')" :src="icon" :size="iconSize" v-if="icon" />
+
+        <template #popup>
+            <button
+                v-for="item in items"
+                :key="getItemKey(item)"
+                :class="[
+                    bem('item', {
+                        selected: isItemSelected(item),
+                        ...variantsMap,
+                    }),
+                    itemClass,
+                ]"
+                :variant="variant"
+                @click="itemClick(item)"
+            >
+                <slot name="item" :item="item" :checked="isItemSelected(item)">
+                    {{ getItemLabel(item) }}
+                </slot>
+            </button>
+        </template>
+    </px-popup>
+</template>
+
+<script>
+import PxPopup from './PxPopup.vue';
+import PxBase from './PxBase.vue';
+import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+import PxIcon from './PxIcon.vue';
+
+export default {
+    name: 'px-dropdown',
+    components: { PxPopup, PxIcon },
+    mixins: [PxBase, PxBaseItemsSelect, PxBaseVariants],
+    props: {
+        value: { default: null },
+
+        // text that will be displayed by default in the selected slot when no item has been selected
+        placeholder: { type: String, default: null },
+
+        // name of icon to be displayed when the button is in a checked state
+        icon: { type: String, default: require('../assets/icons/dropdown.svg') },
+
+        // the size of the icon
+        iconSize: { default: null },
+
+        // class set on each of the generated menu items
+        itemClass: { type: String, default: null },
+
+        // class set on the popup
+        popupClass: { type: String, default: null },
+
+        // properties that get set on the popup object (see PxPopup for details)
+        popupProps: {
+            type: Object,
+            default: () => {
+                return {
+                    placement: 'bottom-start',
+                };
+            },
+        },
+    },
+
+    computed: {
+        allowMultiSelect() {
+            return false;
+        },
+        selectedItem() {
+            if (this.syncSelected) {
+                return this.getItem(this.syncSelected);
+            }
+            return null;
+        },
+        selectedLabel() {
+            return this.getItemLabel(this.selectedItem);
+        },
+    },
+
+    mounted() {
+        this.select;
+    },
+    methods: {
+        itemClick(item) {
+            this.selectItemOnly(item);
+            this.$refs.popup.closePopup();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-dropdown {
+    @include bem(icon) {
+        margin-left: 0.5em;
+    }
+
+    // popup
+
+    $dropdown-popup: flat-merge(
+        get(
+            'controls:popup',
+            (
+                display: flex,
+                flex-direction: column,
+                background-color: clr(page-bg),
+                border-radius: get('controls:border-radius'),
+                box-shadow: shadow(15),
+            )
+        )
+    );
+
+    &__popup {
+        @include css-map($dropdown-popup);
+    }
+
+    // "default" variant
+
+    &--default {
+        $dropdown-button: flat-merge(
+            get('controls:dropdown:button', ()),
+            (
+                justify-content: space-between,
+            )
+        );
+        @include button($dropdown-button);
+
+        // placeholder
+        @include bem(placeholder) {
+            $placeholder: get('controls:dropdown:placeholder', ());
+            $placeholder: control-placeholder-style($placeholder);
+            @include css-map($placeholder);
+        }
+    }
+
+    &__item--default {
+        $dropdown-item: flat-merge(
+            get('controls:dropdown:item', ()),
+            (
+                text-align: left,
+                justify-content: stretch,
+                border-radius: 0,
+                box-shadow: none,
+            )
+        );
+        @include button($dropdown-item);
+
+        // set transparent here instead of the mixin so that we
+        // keep the derived colors for other states
+        background-color: transparent;
+        color: inherit;
+
+        @include first-last-radius();
+    }
+}
+</style>

package/components/PxExpander.vue

@@ -0,0 +1,46 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()"></div>
+</template>
+
+<script>
+export default {
+    name: 'px-expander',
+    // components: { Component },
+
+    props: {
+        expanded: { default: null },
+    },
+
+    data() {
+        return {
+            // create a data field that will mirror expanded
+            expandedValue: this.expanded,
+        };
+    },
+
+    // computed: {},
+
+    watch: {
+        expanded(newVal) {
+            // update expandedValue when expanded changes
+            this.expandedValue = newVal;
+        },
+
+        expandedValue(newVal) {
+            // emit update when expandedValue changes (enables .sync on parent)
+            this.$emit('update:expanded', newVal);
+        },
+    },
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+.px-expander {
+    // add styles here
+}
+</style>

package/components/PxFeatherIcon.vue

@@ -0,0 +1,29 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <px-icon
+        :src="featherSrc"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :style="{ strokeWidth: strokeWidth }"
+    />
+</template>
+
+<script>
+import PxIcon from './PxIcon.vue';
+
+export default {
+    name: 'px-feather-icon',
+    components: { PxIcon },
+    props: {
+        name: { type: String, default: 'smile' },
+        strokeWidth: { type: Number, default: null },
+    },
+    computed: {
+        featherSrc() {
+            return require(`../assets/feather/${this.name}.svg`);
+        },
+    },
+};
+</script>

package/components/PxFeatherIconButton.vue

@@ -0,0 +1,19 @@
+<template>
+    <px-icon-button
+        :src="featherSrc"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :style="{ strokeWidth: strokeWidth }"
+    />
+</template>
+
+<script>
+import PxIconButton from './PxIconButton.vue';
+import PxFeatherIcon from './PxFeatherIcon.vue';
+
+export default {
+    name: 'px-feather-icon',
+    mixins: [PxFeatherIcon],
+    components: { PxIconButton },
+};
+</script>