@thinkpixellab-public/px-vue 3.0.1

package/components/PxTable.vue

@@ -0,0 +1,323 @@
+<!--
+
+    // column definitions
+    {
+        // (null) the property that will be displayed in the column (if undefined, the column needs to be rendered using a slot)
+        property,
+
+        // (null) the column label (defaults to the property name if not specified)
+        label,
+
+        // (hidden | wrap | ellipsis) whether to wrap or show ellipsis
+        overflow,
+
+        // (left | center | right) text alignment for the column
+        align,
+
+        // (auto) size of the column, specified using grid template syntax
+        size,
+
+        // (null) a slot template name used to define the rendering for the column
+        template,
+
+        // (null) a slot template name used to define the rendering for the column header label
+        headerTemplate,
+
+        // (true) whether the column supports sorting (sortEnabled prop must also be true)
+        sortable,
+
+        // class that will be applied to cells in this column
+        class
+    }
+
+-->
+<template>
+    <div :class="bem()">
+        <div
+            :class="[bem('table')]"
+            :style="{
+                gridTemplateColumns: columnWidths,
+                gridAutoRows: rowSize,
+            }"
+        >
+            <!-- header -->
+
+            <div :class="bem('row', { header: true })">
+                <div
+                    :class="[
+                        bem('cell', {
+                            header: true,
+                            fixed: fixedHeader,
+                            align: c.align,
+                            sortable: isColumnSortable(c),
+                            sorted: isColumnSorted(c),
+                        }),
+                    ]"
+                    v-for="(c, index) in columnsAll"
+                    :key="index"
+                    :role="isColumnSortable(c) ? 'button' : null"
+                    @click="isColumnSortable(c) ? columnSortClick(c) : null"
+                >
+                    <slot v-if="c.headerTemplate" :name="c.headerTemplate" v-bind:column="c"></slot>
+                    <span v-else>{{ c.label || c.property }}</span>
+
+                    <px-icon
+                        :class="bem('sort-icon')"
+                        :src="iconSortedAscending"
+                        :style="{ opacity: isColumnSorted(c) ? 1 : 0 }"
+                    />
+                </div>
+            </div>
+
+            <!-- rows -->
+
+            <div :class="[bem('row')]" v-for="(item, itemIndex) in items" :key="getItemKey(item)">
+                <div
+                    :class="[
+                        bem('cell', { overflow: c.overflow, align: c.align }),
+                        cellClass,
+                        c.class,
+                    ]"
+                    v-for="(c, index) in columnsAll"
+                    :key="index"
+                >
+                    <!-- template -->
+                    <slot
+                        v-if="c.template"
+                        :name="c.template"
+                        v-bind:item="item"
+                        v-bind:index="itemIndex"
+                    ></slot>
+
+                    <!-- string (default) -->
+                    <span v-else>
+                        {{ valueToString(item[c.property]) }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import PxBaseItems from './PxBaseItems.vue';
+import PxIcon from './PxIcon.vue';
+export default {
+    components: { PxIcon },
+    name: 'px-table',
+    // components: { Component },
+    mixins: [PxBaseItems],
+    props: {
+        // class that gets applied to individual cells
+        cellClass: { default: null },
+
+        // can be an array of objects (see above) or strings (just property names)
+        columns: { default: null },
+
+        // defines the sizes of rows ( grid-template-row syntax)
+        rowSize: { type: String, default: 'auto' },
+
+        // whether to the header row is fixed (sticky)
+        fixedHeader: { type: Boolean, default: true },
+
+        // sorting
+
+        // Enables sorting on the column (PxTable tracks which column is current selected for
+        // sorting and a direction (ascending/descending) and raises and event (@sort) when it
+        // changes, but the actual sorting need to be handle externally by sorting the items).
+        sortEnabled: { type: Boolean, default: true },
+        iconSortedAscending: { type: String, default: require('../assets/icons/sort-asc.svg') },
+        iconSortedDescending: { type: String, default: require('../assets/icons/sort-desc.svg') },
+
+        // can be used to temporarily disabled item level actions (expand, drag, remove, etc.)
+        actionsEnabled: { type: Boolean, default: true },
+
+        // other actions
+        clickEnabled: { type: Boolean, default: false },
+        removeEnabled: { type: Boolean, default: false },
+
+        // dragging
+        dragEnabled: { type: Boolean, default: true },
+        dragCheck: { default: null }, // expects a function, see sortablejs move callback
+    },
+    data() {
+        return {
+            sortColumn: null,
+            sortAscending: false,
+        };
+    },
+    computed: {
+        defaultColumns() {
+            if (this.items?.length) {
+                return Object.keys(this.items[0]);
+            }
+            return [];
+        },
+        columnsAll() {
+            let cols = this.columns || this.defaultColumns;
+            return cols.map(c => {
+                if (typeof c == 'string') {
+                    return {
+                        property: c,
+                        label: c,
+                        sortable: true,
+                    };
+                }
+                return { sortable: true, ...c };
+            });
+        },
+        columnWidths() {
+            return this.columnsAll.map(col => col.size || 'auto').join(' ');
+        },
+    },
+    // watch: {},
+    // mounted() {},
+    methods: {
+        valueToString(value) {
+            if (typeof value == 'object' && typeof value.getMonth === 'function') {
+                return value.toLocaleDateString();
+            }
+            return value;
+        },
+        isColumnSortable(column) {
+            return this.sortEnabled && column.sortable;
+        },
+        isColumnSorted(column) {
+            return this.sortColumn === column;
+        },
+        columnSortClick(column) {
+            this.sortColumn = column;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-table {
+    // load defaults
+
+    // the outer container for the table (use to style an outer border, etc.)
+
+    $table: flat-merge(
+        get(
+            'controls:table:table',
+            (
+                border: 1px solid gray(5),
+                border-radius: get('controls:border-radius'),
+            )
+        )
+    );
+
+    // row states that can be used when defining config for cell and header
+
+    $cell-state-aliases: (
+        last-row: '.px-table__row:last-child &',
+        even-row: '.px-table__row:nth-child(even) &',
+        odd-row: '.px-table__row:nth-child(odd) &',
+        sortable: '&.px-table__cell--sortable',
+        sorted: '&.px-table__cell--sorted',
+    );
+
+    $cell: flat-merge(
+        get(
+            'controls:table:cell',
+            (
+                padding: 0.5em,
+                background-color: clr(page-bg),
+                border-bottom: 1px solid gray(5),
+                last-row: (
+                    border-bottom: none,
+                ),
+            )
+        )
+    );
+
+    $header: flat-merge(
+        get(
+            'controls:table:header',
+            (
+                background-color: gray(9),
+                sortable: (
+                    hover: (
+                        background-color: gray(8),
+                    ),
+                ),
+            )
+        )
+    );
+
+    // outer grid for the container (not the tabble itself)
+    position: relative;
+    display: grid;
+    max-height: 100%;
+    overflow: auto;
+    @include css-map($table);
+
+    &__table {
+        position: relative;
+        display: grid;
+    }
+
+    &__row {
+        position: relative;
+        display: contents;
+    }
+
+    &__cell {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+
+        @include css-map($cell, $aliases: $cell-state-aliases);
+
+        // overflow
+
+        overflow: hidden;
+        white-space: nowrap;
+
+        &--overflow-ellipsis {
+            text-overflow: ellipsis;
+        }
+        &--overflow-wrap {
+            white-space: normal;
+        }
+
+        // align
+
+        text-align: start;
+
+        &--align-center {
+            text-align: center;
+        }
+
+        &--align-end {
+            text-align: end;
+        }
+
+        // headers
+
+        &--header {
+            @include css-map($header, $aliases: $cell-state-aliases);
+            z-index: 1;
+            &[role='button'] {
+                cursor: pointer;
+            }
+        }
+
+        &--fixed {
+            position: sticky;
+            top: 0;
+        }
+    }
+
+    &__sort-icon {
+        margin-left: 0.5em;
+        flex: none;
+    }
+}
+</style>

package/components/PxTabs.vue

@@ -0,0 +1 @@
+// TBD

package/components/PxTextbox.vue

@@ -0,0 +1,90 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <input
+        v-if="!multiline"
+        :class="bem(variantsMap)"
+        v-on="$listeners"
+        :value="value"
+        @input="inputUpdate"
+        @change="changeUpdate"
+    />
+    <textarea
+        v-else
+        :class="bem({ resize: showResize, ...variantsMap })"
+        v-on="$listeners"
+        :value="value"
+        @input="inputUpdate"
+        @change="changeUpdate"
+    />
+</template>
+
+<script>
+import PxBase from './PxBase.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+
+export default {
+    model: {
+        prop: 'value',
+        event: 'update:value',
+    },
+    name: 'px-textbox',
+    mixins: [PxBase, PxBaseVariants],
+    props: {
+        // whether to render as a textbox or textarea, any truthy value signals use textarea and any numeric value will also set the "rows"
+        multiline: { type: Boolean, default: false },
+
+        // the value of the textbox
+        value: { type: String, default: null },
+
+        // whether to show the resize element in the corner of multiline textbox
+        showResize: { type: Boolean, default: false },
+
+        // whether to fire an update / v-model event on every character change ('input') or when the textbox loses focus ('change')
+        updateMode: {
+            type: String,
+            default: 'input',
+            validator: val => ['input', 'change'].includes(val),
+        },
+    },
+    computed: {},
+    methods: {
+        inputUpdate(e) {
+            if (this.updateMode == 'input') {
+                this.$emit('update:value', e.target.value);
+            }
+        },
+        changeUpdate(e) {
+            if (this.updateMode == 'change') {
+                this.$emit('update:value', e.target.value);
+            }
+        },
+        selectAll() {
+            this.$el.select();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+// variant: default
+
+@include block(px-textbox, default) {
+    @include textbox();
+}
+
+textarea.px-textbox--default {
+    padding-top: 0.5em;
+}
+
+textarea.px-textbox {
+    resize: none;
+}
+
+textarea.px-textbox--resize {
+    resize: initial;
+}
+</style>

package/components/PxToggle.vue

@@ -0,0 +1,125 @@
+<!--
+    Creates a toggle switch.
+
+    TODO: add usage notes (and cover custom styles, etc.)
+
+-->
+<template>
+    <button
+        :class="[
+            bem({ checked: syncChecked, reverse: reverse, ...variantsMap }),
+            checkedClass && syncChecked ? checkedClass : null,
+        ]"
+        aria-role="switch"
+        :aria-checked="syncChecked"
+        v-on="$listeners"
+        @click="toggleChecked"
+    >
+        <span
+            :class="[bem('track'), trackClass]"
+            :style="{ backgroundColor: checked ? onColor : offColor }"
+        >
+            <span :class="bem('spacer')"></span>
+            <span
+                :class="[bem('thumb'), trackClass]"
+                :style="{ backroundColor: thumbColor }"
+            ></span>
+        </span>
+        <slot name="on-label">
+            <span v-if="onLabel && syncChecked" :class="[bem('label'), labelClass]">
+                {{ onLabel }}
+            </span>
+        </slot>
+        <slot name="off-label">
+            <span v-if="offLabel && !syncChecked" :class="[bem('label'), labelClass]">
+                {{ offLabel }}
+            </span>
+        </slot>
+        <slot name="default"></slot>
+    </button>
+</template>
+
+<script>
+import PxBaseToggle from './PxBaseToggle.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+export default {
+    name: 'px-toggle',
+    // components: { Component },
+    mixins: [PxBaseToggle, PxBaseVariants],
+    props: {
+        // label text to be displayed in on state (override with #on-label slot)
+        onLabel: { type: String, default: null },
+
+        // label text to be displayed in off state (override with #off-label slot)
+        offLabel: { type: String, default: null },
+
+        // class that will be applied to the track element
+        trackClass: { type: String, default: null },
+
+        // class that will be applied to the thumb element
+        thumbClass: { type: String, default: null },
+
+        // class that will be applied to the default on/off label element
+        labelClass: { type: String, default: null },
+
+        // color that will be set on track in the on state  (use trackClass for further styling)
+        onColor: { type: String, default: null },
+
+        // color that will optionally be set on track in the off state (use trackClass for further styling)
+        offColor: { type: String, default: null },
+
+        // thumb color that will optionally be set on the thumb (use thumbClass for further styling)
+        thumbColor: { type: String, default: null },
+
+        // toggle the label/toggle order
+        reverse: { type: Boolean, default: false },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-toggle {
+    --px-toggle-size: 1em;
+    --px-toggle-track: #{gray(-8, 0.33)};
+    --px-toggle-checked: #{accent()};
+    --px-toggle-thumb: white;
+
+    @include toggle-switch(
+        (
+            '--thumb:background-color': var(--px-toggle-thumb),
+            '--thumb:font-size': var(--px-toggle-size),
+            '--track:background-color': var(--px-toggle-track),
+            '--track:font-size': var(--px-toggle-size),
+            'checked:--track:background-color': var(--px-toggle-checked),
+        ),
+        '.px-toggle__track',
+        '.px-toggle__thumb',
+        '.px-toggle__spacer'
+    );
+
+    &--reverse {
+        flex-direction: row-reverse;
+    }
+
+    // VARIANTS
+
+    // sm - resizes just the toggle (not the label) to fs(sm)
+
+    &--sm & {
+        &__track,
+        &__thumb {
+            font-size: fs(sm);
+        }
+    }
+
+    // xs - resizes just the toggle (not the label) to fs(xs)
+
+    &--xs & {
+        &__track,
+        &__thumb {
+            font-size: fs(xs);
+        }
+    }
+}
+</style>

package/components/PxToggleButton.vue

@@ -0,0 +1,139 @@
+<!--
+    Creates a toggle button (a control with the appearance of a normal button that can be toggle
+    between an on/off state).
+
+    <px-toggle :v-model="isChecked" variant="sm" />
+-->
+
+<template>
+    <button
+        :class="[
+            bem({ checked: syncChecked, icon: iconReady, ...variantsMap }),
+            checkedClass && syncChecked ? checkedClass : null,
+        ]"
+        role="switch"
+        :aria-checked="syncChecked"
+        v-on="$listeners"
+        v-bind="$attrs"
+        @click="toggleChecked"
+    >
+        <span
+            v-if="hasIcon"
+            :class="bem('icon')"
+            ref="icon"
+            :style="{
+                opacity: iconOpacity,
+                transform: iconTransform,
+            }"
+        >
+            <px-icon @loaded="iconLoaded" :src="icon" :size="iconSize" />
+        </span>
+        <span :class="bem('content')" :style="{ transform: iconTransform }">
+            <slot />
+        </span>
+    </button>
+</template>
+
+<script>
+import PxBaseToggle from './PxBaseToggle.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+import PxIcon from './PxIcon.vue';
+
+export default {
+    components: { PxIcon },
+    name: 'px-toggle-button',
+    mixins: [PxBaseToggle, PxBaseVariants],
+    props: {
+        // name of icon to be displayed when the button is in a checked state
+        icon: { type: String, default: require('../assets/icons/check.svg') },
+
+        // the size of the icon
+        iconSize: { default: null },
+    },
+    computed: {
+        hasIcon() {
+            return this.icon && this.iconWidth;
+        },
+        iconTransform() {
+            if (this.hasIcon) {
+                return this.syncChecked
+                    ? `translateX(0)`
+                    : `translateX(${this.cssPx(this.iconWidth / -2)})`;
+            }
+            return null;
+        },
+        iconOpacity() {
+            return this.syncChecked ? 1 : 0;
+        },
+    },
+    data() {
+        return {
+            iconReady: false,
+            iconWidth: 0,
+        };
+    },
+    methods: {
+        iconLoaded() {
+            this.iconWidth = this.$refs.icon.getBoundingClientRect().width;
+            setTimeout(() => {
+                // used to enable transitions only after the icon is loaded (and avoid a "bounce" on load)
+                this.iconReady = true;
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-toggle-button {
+    @include control-reset();
+    background: transparent;
+
+    @include bem(icon) {
+        position: relative;
+        display: inline-block;
+        padding-right: 0.33em;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &--icon {
+        @include bem(icon content) {
+            @include transition(transform opacity);
+        }
+    }
+
+    &--default {
+        // get base css from button, merged with toggle-button defaults (if defined)
+        $css: button(get('controls:toggle-button', (), false));
+
+        @include css-map($css);
+
+        @include aria-checked() {
+            $accent: get-control-accent($css, background, background-color);
+            $background: shade($accent, -4);
+            background-color: $background;
+            color: contrast-color($background);
+            box-shadow: none;
+        }
+    }
+
+    &--outline {
+        // get base css from button, merged with toggle-button defaults (if defined)
+        $css: button-outline(get('controls:toggle-button-outline', (), false));
+
+        $checked-accent: shade(get-control-accent($css, border-color, color), -4);
+
+        @include css-map($css);
+
+        @include aria-checked() {
+            @include transition(background border color);
+            background-color: $checked-accent;
+            border-color: $checked-accent;
+            color: contrast-color($checked-accent);
+        }
+    }
+}
+</style>