@thinkpixellab-public/px-vue 3.0.81 → 3.0.83

package/components/PxSideDrawer.vue

@@ -14,7 +14,13 @@
 -->
 <template>
     <div>
-        <px-toggle-button :class="toggleButtonClass" variant="icon" :checked.sync="visibleValue">
+        <px-toggle-button
+            :class="toggleButtonClass"
+            variant="icon"
+            :checked.sync="visibleValue"
+            :controls="drawerA11yId"
+            mode="expander"
+        >
             <px-icon :src="toggleIcon" />
         </px-toggle-button>
 
@@ -24,14 +30,20 @@
             v-bind="modalProps"
             transition-name="px-side-drawer__tr"
         >
-            <div :class="bem()">
+            <div :id="drawerA11yId" :class="bem()">
                 <div :class="drawerClass">
                     <div :class="bem('top')">
                         <div :class="bem('close')">
-                            <button :class="closeButtonClass" @click="visibleValue = false">
-                                <px-icon :src="closeIcon" />
+                            <button
+                                :class="closeButtonClass"
+                                @click="visibleValue = false"
+                                :aria-label="closeButtonLabel"
+                            >
+                                <px-icon :src="closeIcon" size="1.25" />
                             </button>
                         </div>
+                    </div>
+                    <div :class="bem('content')">
                         <slot name="default" />
                     </div>
                     <div :class="bem('bottom')">
@@ -75,9 +87,16 @@ export default {
 
         // PxModal (see PxModal for details)
         modalProps: { type: Object },
+
+        // accessibility props
+        closeButtonLabel: { type: String, default: 'Close' },
     },
     // data() { return { b: 0 }; },
-    // computed: {},
+    computed: {
+        drawerA11yId() {
+            return this.uniqueId('drawer');
+        },
+    },
     // watch: {},
     // mounted() {},
     // methods: {},
@@ -141,8 +160,21 @@ $dur: 400ms;
         width: 320px;
         max-width: 100vw;
         height: 100%;
-        background-color: clr(page-bg);
+        background-color: clr(page-bg, $alpha: 0.9);
+        backdrop-filter: blur(8px);
         box-shadow: depth-shadow(15, 0.1);
+        overflow: auto;
+    }
+
+    &__top {
+        position: sticky;
+        top: 0;
+        background-color: clr(page-bg, $alpha: 0.5);
+        backdrop-filter: blur(2px);
+        z-index: 1;
+    }
+    &__content {
+        flex: 1;
     }
 
     &__close {
@@ -153,7 +185,7 @@ $dur: 400ms;
     &__icon-button {
         @include button-icon(
             (
-                padding: 0.5em,
+                padding: 1em,
                 min-height: 0,
                 min-width: 0,
             )

package/components/PxSvg.vue

@@ -28,6 +28,8 @@
         :height="calcHeight"
         :width="calcWidth"
         :title="title"
+        :role="role"
+        :focusable="focusable"
         v-on="$listeners"
     />
 </template>
@@ -63,6 +65,12 @@ export default {
 
         // set the title for accessibility
         title: { type: String, default: null },
+
+        // the role applied for accessibility
+        role: { type: String, default: 'img' },
+
+        // focusable false by default for accessibility in older browsers
+        focusable: { type: Boolean, default: false },
     },
     data() {
         return { svgWidth: null, svgHeight: null, svgViewBox: null };

package/components/PxToggleButton.vue

@@ -11,8 +11,10 @@
             bem({ checked: syncChecked, icon: iconReady, ...variantsMap }),
             checkedClass && syncChecked ? checkedClass : null,
         ]"
-        role="switch"
-        :aria-checked="syncChecked ? 'true' : 'false'"
+        :role="ariaRole"
+        :aria-checked="ariaChecked"
+        :aria-expanded="ariaExpanded"
+        :aria-controls="controls"
         v-on="$listeners"
         v-bind="$attrs"
         @click="toggleChecked"
@@ -49,6 +51,12 @@ export default {
 
         // the size of the icon
         iconSize: { default: null },
+
+        // the mode of the toggle button (switch | expander)
+        mode: { type: String, default: 'switch' },
+
+        // id of the element that this toggle button controls
+        controls: { type: String, default: null },
     },
     computed: {
         hasIcon() {
@@ -65,6 +73,22 @@ export default {
         iconOpacity() {
             return this.syncChecked ? 1 : 0;
         },
+        isSwitch() {
+            return this.mode === 'switch';
+        },
+        ariaRole() {
+            return this.mode === 'expander' ? 'button' : 'switch';
+        },
+        ariaChecked() {
+            if (!this.isSwitch) return null;
+
+            return this.syncChecked ? 'true' : 'false';
+        },
+        ariaExpanded() {
+            if (this.isSwitch) return null;
+
+            return this.syncChecked ? 'true' : 'false';
+        },
     },
     data() {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.81",
+    "version": "3.0.83",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

package/utils/cssStr.js

@@ -79,7 +79,7 @@ function cssUnit(val) {
     if (!val) {
         return '';
     }
-    const allowedUnits = ['em', 'px', '%', 'rem', 'vw', 'vh', 'ex', 'ch', 'vmin', 'vmax'];
+    const allowedUnits = ['em', 'px', '%', 'rem', 'vw', 'vh', 'ex', 'ch', 'vmin', 'vmax', 'fr'];
 
     val = val
         .toString()
@@ -216,6 +216,70 @@ function cssPxFallback(val, allowNumberless = false) {
     return cssUnitFallback(val, 'px', allowNumberless);
 }
 
+/**
+ * Returns true if the value is a valid calc() function
+ */
+function cssIsCalc(val) {
+    if (val && typeof val == 'string' && val.indexOf('calc') > -1) {
+        return /^calc\(.+\)$/.test(val.trim());
+    }
+    return false;
+}
+
+/**
+ * Takes two css values and adds them together. If they have the same unit, it just adds them
+ * together. If they have different units, it creates a calc() function.
+ *
+ *     cssCalcAdd('100%', '5em')   => 'calc(100% + 5em)'
+ *     cssCalcAdd('100%', '-5em')  => 'calc(100% - 5em)'
+ *     cssCalcAdd('auto', cssCalcAdd('0px', 'auto'))  => 'auto'
+ *     cssCalcAdd('100%', cssCalcAdd('-2em', '-5em')) => 'calc(100% - 7em)'
+ *     cssCalcAdd('100%', cssCalcAdd('-2em', '10px')) => 'calc(100% - calc(2em + 10px))'
+ */
+
+function cssCalcAdd(val1 = 0, val2 = 0, op = '+') {
+    const num1 = cssNum(val1);
+    const num2 = cssNum(val2);
+
+    const isCalc1 = cssIsCalc(val1);
+    const isCalc2 = cssIsCalc(val2);
+
+    // if either is equivalent to 0, return the other
+
+    if (!num1 && !isCalc1) {
+        return val2;
+    }
+
+    if (!num2 && !isCalc2) {
+        return val1;
+    }
+
+    const unit1 = cssUnit(val1);
+    const unit2 = cssUnit(val2);
+
+    if (unit1 == unit2) {
+        if (op == '-') {
+            return num1 - num2 + unit1;
+        } else {
+            return num1 + num2 + unit1;
+        }
+    }
+
+    if (num2 < 0) {
+        const reverseOp = op == '+' ? '-' : '+';
+        return `calc(${val1} ${reverseOp} ${num2 * -1}${unit2})`;
+    }
+
+    return `calc(${val1} ${op} ${val2})`;
+}
+
+/**
+ * Samem as cssCalcAdd with the op set to '-'. Makes reading code a little easier.
+ */
+function cssCalcSubtract(val1 = 0, val2 = 0) {
+    return cssCalcAdd(val1, val2, '-');
+}
+
 export {
     cssPx,
     cssEm,
@@ -229,4 +293,7 @@ export {
     cssUnitFallback,
     cssEmFallback,
     cssPxFallback,
+    cssIsCalc,
+    cssCalcAdd,
+    cssCalcSubtract,
 };