@thinkpixellab-public/px-vue 3.0.1

package/components/PxToggleButtonList.vue

@@ -0,0 +1,131 @@
+<!--
+
+       <px-toggle-button-list
+            :items="fruits"
+            items-value-property="id"
+            items-label-property="name"
+            items-key-property="id"
+        >
+            <template v-slot:item="{ item, checked }" :style="{color: checked ? 'green' : null}">{{ item.name }}</template>
+        </px-toggle-button-list>
+
+
+        Supported variants:
+
+        - connected - draws buttons in a single connected group (no gaps between buttons)
+        - connected outline - same as connected but uses an outline button style
+        - wrap - allows the button container to wrap
+
+-->
+<template>
+    <px-flex
+        :class="bem({ readonly: readonly, ...variantsMap })"
+        :gap="isVariant('connected') ? 0 : gap"
+        :wrap="isVariant('wrap')"
+        :vertical="isVariant('vertical')"
+        :role="multiSelect ? null : 'radiogroup'"
+    >
+        <component
+            :is="isVariant('radio') ? 'px-radio-button' : 'px-toggle-button'"
+            v-for="item in items"
+            :key="getItemKey(item)"
+            :class="[bem('button'), buttonClass]"
+            :icon="icon"
+            :iconSize="iconSize"
+            :variant="isVariant('radio') ? 'default' : variant"
+            :checked="isItemSelected(item)"
+            :disabled="readonly"
+            @checked="itemCheck(item)"
+            @unchecked="itemUncheck(item)"
+            :role="multiSelect ? 'switch' : 'radio'"
+        >
+            <slot name="item" :item="item" :checked="isItemSelected(item)">
+                {{ getItemLabel(item) }}
+            </slot>
+        </component>
+    </px-flex>
+</template>
+
+<script>
+import PxBase from './PxBase.vue';
+import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+import PxFlex from './PxFlex.vue';
+import PxRadioButton from './PxRadioButton.vue';
+import PxToggleButton from './PxToggleButton.vue';
+
+export default {
+    name: 'px-toggle-button-list',
+
+    mixins: [PxBase, PxBaseItemsSelect, PxBaseVariants],
+    components: { PxToggleButton, PxRadioButton, PxFlex },
+    props: {
+        // spacing between items (see PxFlex for details)
+        gap: { default: 0.5 },
+
+        // 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 },
+
+        // class set on the individual buttons
+        buttonClass: { type: String, default: null },
+
+        // display only mode
+        readonly: { type: Boolean, default: false },
+    },
+    computed: {
+        calculatedInputGroup() {
+            return this.inputGroup || this.getGeneratedId('group-');
+        },
+    },
+    methods: {
+        itemCheck(item) {
+            if (this.multiSelect) {
+                this.selectItems([item]);
+            } else {
+                this.selectItemOnly(item);
+            }
+        },
+        itemUncheck(item) {
+            this.unselectItems([item]);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-toggle-button-list {
+    $block: get-block-name(&);
+
+    // variant: connected
+
+    &--connected & {
+        &__button:not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        &__button:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+        &__button {
+            &:not(:hover) {
+                box-shadow: none;
+            }
+            &:hover {
+                z-index: 1;
+            }
+        }
+    }
+    &--connected.#{$block}--outline & {
+        &__button {
+            &:not(:last-child) {
+                border-right: none;
+            }
+        }
+    }
+}
+</style>

package/components/PxTransitionExpand.vue

@@ -0,0 +1,100 @@
+<template>
+    <transition
+        name="px-transition-expand"
+        @enter="enter"
+        @after-enter="afterEnter"
+        @leave="leave"
+        @before-enter="before"
+        @before-leave="before"
+        @after-leave="after"
+    >
+        <slot />
+    </transition>
+</template>
+
+<script>
+export default {
+    props: {
+        // override the transition duration (expressed in seconds)
+        duration: { type: Number, default: null },
+    },
+    methods: {
+        before(element) {
+            if (this.duration) {
+                element.style.transitionDuration = this.duration + 's';
+            }
+        },
+
+        after(element) {
+            if (this.duration) {
+                element.style.transitionDuration = null;
+            }
+        },
+
+        enter(element) {
+            // cache width
+            const width = getComputedStyle(element).width;
+
+            // height prep
+            element.style.width = width;
+            element.style.position = 'absolute';
+            element.style.visibility = 'hidden';
+            element.style.height = 'auto';
+            element.style.opacity = 0;
+
+            // cache height
+            const height = getComputedStyle(element).height;
+
+            // restore
+            element.style.width = null;
+            element.style.position = null;
+            element.style.visibility = null;
+            element.style.height = null;
+            element.style.opacity = null;
+
+            // force repaint
+            getComputedStyle(element).height;
+
+            // trigger the animation
+            setTimeout(() => {
+                element.style.height = height;
+            });
+
+            this.$emit('height-computed', height);
+        },
+        afterEnter(element) {
+            element.style.height = null;
+            element.style.opacity = null;
+            this.after(element);
+        },
+        leave(element) {
+            const height = getComputedStyle(element).height;
+
+            element.style.height = height;
+            element.style.opacity = 0;
+
+            // force repaint
+            getComputedStyle(element).height;
+
+            setTimeout(() => {
+                element.style.height = 0;
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-transition-expand-enter-active,
+.px-transition-expand-leave-active {
+    transition: height 600ms $ease-out-quart, opacity 600ms $ease-out-quart;
+}
+
+.px-transition-expand-enter,
+.px-transition-expand-leave-to {
+    opacity: 0;
+    height: 0;
+}
+</style>

package/components/PxValidator.vue

@@ -0,0 +1,431 @@
+<!--
+
+    Provides general purpose data-driven validation functionality and UI. Here is some boilerplate
+    code that shows how you can manage multiple validations in a single page / component:
+
+    <template>
+        <div>
+            <div>Has errors: {{ hasErrors }}</div>
+
+            <px-validator
+                :value="fieldOne"
+                rules="required"
+                @valid-changed="validChanged"
+            >
+                <template #default="v">
+                    <px-textbox :class="v.class" v-model="fieldOne" />
+                </template>
+            </px-validator>
+
+            <px-validator
+                :value="fieldTwo"
+                rules="{
+                    required: true,
+                    apples: (value) => {
+                        if (value.indexOf('apples') == -1) {
+                            return 'Must mention delicious apples';
+                        }
+                    }
+                }"
+                @valid-changed="validChanged"
+            >
+                <template #default="v">
+                    <px-textbox :class="v.class" v-model="fieldTwo" />
+                </template>
+            </px-validator>
+        </div>
+    </template>
+
+    <script>
+    import PxValidator from '@thinkpixellab/px-vue/components/PxValidator.vue';
+    import PxTextbox from '@thinkpixellab/px-vue/components/PxTextbox.vue';
+
+    export default {
+        components: { PxValidator, PxTextbox },
+        data() {
+            return: {
+
+                // validation is all data driven so the components need to
+                // have data fields associated with them
+                fieldOne: null,
+                fieldTwo: null,
+
+                // tracks validation information for all fields on the page
+                validation: {}
+            }
+        },
+        computed: {
+            hasErrors() {
+                return !Object.values(this.validation).reduce((prev, val) => {
+                    return prev && val;
+                }, true);
+            }
+        },
+        methods: {
+            validChanged(isValid, id) {
+                this.$set(this.validation, id, isValid);
+            }
+        }
+
+    }
+    </script>
+
+-->
+
+<template>
+    <div :class="bem()" @focusin="onFocusIn" @focusout="onFocusOut">
+        <slot name="default" v-bind="validatorData"></slot>
+        <slot name="errors">
+            <div v-if="!hideErrors" :class="[bem('error-container'), errorContainerClass]">
+                <span
+                    v-for="error in validatorData.visibleErrors"
+                    :key="error.id"
+                    :class="[bem('error-item'), errorItemClass]"
+                >
+                    <px-icon
+                        :class="bem('error-icon')"
+                        :src="require('../assets/icons/invalid.svg')"
+                    />
+                    {{ error.message }}
+                </span>
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script>
+import PxBase from './PxBase.vue';
+import PxIcon from './PxIcon.vue';
+
+const VALIDATORS = {
+    required(val) {
+        const isValid = val !== null && val !== undefined && val !== '';
+        if (!isValid) {
+            return 'Required. Must provide a value.';
+        }
+        return null;
+    },
+    oneof(val, allowedValues) {
+        const isValid = allowedValues.includes(val);
+        if (!isValid) {
+            return 'Must match one of the allowed values.';
+        }
+        return null;
+    },
+    not(val, notValue) {
+        const isValid = val !== notValue;
+        if (!isValid) {
+            return 'Invalid. Must provide a different value.';
+        }
+    },
+    minlength(val, length) {
+        const isValid = (val + '').length >= length;
+        if (!isValid) {
+            return `Must be at least ${length} characters.`;
+        }
+        return null;
+    },
+    maxlength(val, length) {
+        const isValid = (val + '').length <= length;
+        if (!isValid) {
+            return `Must not exceed ${length} characters.`;
+        }
+        return null;
+    },
+    email(val) {
+        const isValid = /^\w+([.-]?\w+)+@\w+([.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/.test(val);
+        if (!isValid) {
+            return 'Must be a valid email address.';
+        }
+        return null;
+    },
+    phone(val) {
+        // us phone numbers only, based on comment in this post:
+        // https://stackoverflow.com/questions/123559/how-to-validate-phone-numbers-using-regex
+        const isValid =
+            /(?:(?:(\s*\(?([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\)?\s*(?:[.-]\s*)?)([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})/.test(
+                val
+            );
+        if (!isValid) {
+            return 'Must be a valid phone number.';
+        }
+        return null;
+    },
+
+    regex(val, regexStr) {
+        const isValid = new RegExp(regexStr).test(val);
+        if (!isValid) {
+            return 'Must match the specified format.';
+        }
+        return null;
+    },
+
+    // url(val) {
+    //     // TODO
+    // },
+    // number(val) {
+    //     // TODO
+    // },
+    // integer(val) {
+    //     // TODO
+    // },
+    // maxvalue(val, max) {
+    //     // TODO
+    // },
+    // minvalue(val, min) {
+    //     // TODO
+    // },
+};
+
+export default {
+    name: 'px-validator',
+    components: { PxIcon },
+    mixins: [PxBase],
+    props: {
+        // the value to be validated
+        value: { default: null },
+
+        // list of validator rules, see explanation of syntax in notes above
+        rules: { default: null },
+
+        // Whether validation is currently active, possible values are:
+        //  - true / false (obvious)
+        //  - focus-in (becomes active once a child element has been focused)
+        //  - focus-out (becomes active once a child element has lost focus)
+        //  - focus-active (active only while a child element has focus)
+        active: { default: 'focus-out' },
+
+        // message overrides, can be a string (always used), object (overrides based on error id),
+        // or a function (rule object provided as parameter)
+        messageOverride: { default: null },
+
+        // optional field id that can be set to disambiguate valid-changed events
+        fieldId: { type: String, default: null },
+
+        // if true, the default errors slot will be hidden altogether
+        hideErrors: { type: Boolean, default: false },
+
+        // if true, the default messages slot will show all violation messages instead of just the first
+        allErrors: { type: Boolean, default: false },
+
+        // class that will be applied to the default errors container and item respectively
+        errorContainerClass: { type: String, default: null },
+        errorItemClass: { type: String, default: null },
+
+        // override class names
+        inactiveClass: { type: String, default: null },
+        validClass: { type: String, default: 'valid' },
+        invalidClass: { type: String, default: 'invalid' },
+        requiredClass: { type: String, default: 'required' },
+    },
+    data() {
+        return { focusActive: false, focusIn: false, focusOut: false };
+    },
+    computed: {
+        fieldIdInternal() {
+            return this.fieldId || this.uniqueId();
+        },
+
+        activeInternal() {
+            if (typeof this.active == 'string') {
+                if (this.active == 'focus-in') {
+                    return this.focusIn;
+                }
+                if (this.active == 'focus-out') {
+                    return this.focusOut;
+                }
+                if (this.active == 'focus-active') {
+                    return this.focusActive;
+                }
+            }
+            return !!this.active;
+        },
+
+        rulesArray() {
+            let r = [];
+
+            if (this.rules) {
+                let t = typeof this.rules;
+
+                // String
+
+                // Expects a string like "rule1:param rule2 rule3" where rule ids and parameters are
+                // separated by colons. This format works for most rules but won't work for
+                // complicated parameters like those required for regex, oneof or custom callbacks.
+                // For those, use the object format.
+                if (t == 'string') {
+                    const split = this.rules.split(/\s+/);
+                    split.forEach(s => {
+                        s = s.split(':');
+                        const id = s[0];
+                        const validator = id in VALIDATORS ? VALIDATORS[id] : null;
+                        const param = s.length > 1 ? s[1] : null;
+                        if (validator) {
+                            r.push({
+                                id,
+                                validator,
+                                param,
+                            });
+                        }
+                    });
+                }
+
+                // Object
+
+                // Expects an object like {required: true, regex: '...', myvalidator:(value) => {...} }
+                // Use this format for more complex or customized validation rules.
+                else if (t == 'object') {
+                    for (let id in this.rules) {
+                        // custom validator
+                        if (typeof this.rules[id] == 'function') {
+                            r.push({
+                                id,
+                                validator: this.rules[id],
+                            });
+                        }
+
+                        // built in validator
+                        else {
+                            const validator = id in VALIDATORS ? VALIDATORS[id] : null;
+                            if (validator) {
+                                r.push({
+                                    id,
+                                    validator,
+                                    param: this.rules[id],
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+
+            return r;
+        },
+
+        validatorData() {
+            let errors = this.getErrors();
+
+            let visibleErrors = [];
+            if (this.activeInternal) {
+                visibleErrors = !this.allErrors && errors?.length > 0 ? [errors[0]] : errors;
+            }
+
+            const isValid = errors.length == 0;
+            const isRequired = this.rulesArray.find(r => r.id == 'required');
+            const validityClass = isValid ? this.validClass : this.invalidClass;
+
+            let v = {
+                // this will be true unless a violation is found, even if validation is not active
+                isValid: isValid,
+
+                // whether valdition is presently active
+                isActive: this.activeInternal,
+
+                // field id
+                fieldId: this.fieldIdInternal,
+
+                // a class which can be applied to content to style it as valid, invalid (validation not active)
+                class: this.activeInternal ? validityClass : this.inactiveClass,
+
+                // a class for each of the rule violations in the form of invalid--[id]
+                violationClasses: isValid ? [] : errors.map(e => this.invalidClass + '--' + e.id),
+
+                // a class which can be applied to content to style required fields
+                requiredClass: isRequired ? this.requiredClass : null,
+
+                // whether the field is required (base on the special presence of the required rule)
+                required: isRequired,
+
+                errors: errors,
+                visibleErrors: visibleErrors,
+            };
+
+            return v;
+        },
+
+        isValid() {
+            return this.validatorData.isValid;
+        },
+    },
+    watch: {
+        isValid: {
+            immediate: true,
+            handler() {
+                this.$emit('valid-changed', this.validatorData);
+            },
+        },
+    },
+    methods: {
+        onFocusIn() {
+            this.focusIn = true;
+            this.focusActive = true;
+        },
+        onFocusOut() {
+            this.focusOut = true;
+            this.focusActive = false;
+        },
+        getErrorMessage(validator, defaultErrorMessage) {
+            if (this.messageOverride) {
+                if (typeof this.messageOverride == 'string') {
+                    return this.messageOverride;
+                }
+
+                if (
+                    typeof this.messageOverride == 'object' &&
+                    validator.id in this.messageOverride
+                ) {
+                    return this.messageOverride[validator.id];
+                }
+
+                if (typeof this.messageOverride == 'function') {
+                    return this.messageOverride(validator, defaultErrorMessage);
+                }
+            }
+
+            return defaultErrorMessage;
+        },
+        getErrors() {
+            let errors = [];
+
+            this.rulesArray.forEach(r => {
+                let error = r.validator(this.value, r.param);
+                if (error) {
+                    errors.push({ id: r.id, message: this.getErrorMessage(r, error) });
+                }
+            });
+
+            return errors;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-validator {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+
+    $error-color: get('colors:error', #fc433e, false);
+
+    &__error-container {
+        display: flex;
+        flex-direction: column;
+        font-size: fs(xs);
+        color: $error-color;
+        min-height: 1.5em;
+        line-height: 1.1;
+        padding-top: 0.33em;
+    }
+
+    &__error-item {
+        display: flex;
+        align-items: center;
+    }
+
+    &__error-icon {
+        margin-right: 0.3em;
+    }
+}
+</style>