@thinkpixellab-public/px-vue 4.0.8 → 4.0.10

package/.storybook/README.md

@@ -0,0 +1,7 @@
+# Storybook Notes
+
+Just a place to keep some notes while figuring out how to use / integrate storybook.js.
+
+## Global CSS in All Stories
+
+Add to preview.scss and then we import in .storybook/preview.js

package/.storybook/main.js

@@ -0,0 +1,34 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+    stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                mdxPluginOptions: {
+                    // mdxCompileOptions: {
+                    //     remarkPlugins: [remarkGfm],
+                    // },
+                },
+            },
+        },
+        '@storybook/addon-mdx-gfm'
+    ],
+
+    framework: {
+        name: '@storybook/vue3-vite',
+        options: {},
+    },
+
+    docs: {
+        autodocs: true,
+        defaultName: 'Documentation',
+    },
+    features: {
+        interactionsDebugger: true,
+    },
+};
+export default config;

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import PxVueTheme from './px-vue.storybook.theme';
+
+addons.setConfig({
+    theme: PxVueTheme,
+});

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+    window.global = window;
+</script>

package/.storybook/preview.js

@@ -0,0 +1,30 @@
+import { setup } from '@storybook/vue3';
+import common from '../plugins/common.js';
+
+import './preview.scss';
+
+// px-vue common plugins
+setup(app => {
+    app.use(common);
+});
+
+const preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+                string: /(itemsKey|itemsDisabled)$/i,
+            },
+        },
+
+        // theme
+        docs: {
+            // requires import { themes } from '@storybook/theming';
+            //theme: themes.dark,
+        },
+    },
+};
+
+export default preview;

package/.storybook/preview.scss

@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Public+Sans:wght@300;400;500;600&family=Work+Sans:wght@400;600&display=swap');
+
+// .sbdocs-h2,
+// .sbdocs-h3,
+// .sbdocs-h4,
+// .sbdocs-h5,
+// .sbdocs h1:where(:not(.sb-unstyled h1)),
+// .sbdocs h2:where(:not(.sb-unstyled h2)),
+// .sbdocs h3:where(:not(.sb-unstyled h3)),
+// .sbdocs h4:where(:not(.sb-unstyled h4)),
+// .sbdocs h5:where(:not(.sb-unstyled h5)),
+// .sbdocs-title,
+// .sbdocs-content p,
+// .docblock-argstable,
+// .docblock-argstable tr,
+// .docblock-argstable th,
+// .docblock-argstable td,
+// .docblock-argstable td button {
+//     font-family: $font !important;
+// }
+
+.story-bounds {
+    display: inline-block;
+    height: auto;
+    width: auto;
+    padding: 0;
+    margin: 0;
+    display: block;
+    border: 1px dashed rgba(black, 0.33);
+}
+
+.story-circle {
+    background-color: tomato;
+    width: 6em;
+    height: 6em;
+    border-radius: 100%;
+}
+
+.story-fill {
+    background-color: tomato;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+}

package/.storybook/px-vue.storybook.theme.js

@@ -0,0 +1,34 @@
+// https://storybook.js.org/docs/7.0/vue/configure/theming
+
+import { create } from '@storybook/theming/create';
+
+export default create({
+    // base: 'light',
+    // // Typography
+    // fontBase: '"Noto Sans", sans-serif',
+    // fontCode: 'monospace',
+    // brandTitle: 'px-vue',
+    // brandUrl: 'https://example.com',
+    // brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+    // brandTarget: '_self',
+    // //
+    // colorPrimary: '#3A10E5',
+    // colorSecondary: '#585C6D',
+    // // UI
+    // appBg: '#ffffff',
+    // appContentBg: '#ffffff',
+    // appBorderColor: '#585C6D',
+    // appBorderRadius: 4,
+    // // Text colors
+    // textColor: '#10162F',
+    // textInverseColor: '#ffffff',
+    // // Toolbar default and active colors
+    // barTextColor: '#9E9E9E',
+    // barSelectedColor: '#585C6D',
+    // barBg: '#ffffff',
+    // // Form colors
+    // inputBg: '#ffffff',
+    // inputBorder: '#10162F',
+    // inputTextColor: '#10162F',
+    // inputBorderRadius: 2,
+});

package/README.md

@@ -1,40 +1,48 @@
 # px-vue
 
+## Storybook
+
+Basic component preview and testing can be done with storybook. Run storybook with `npm run dev-px`.
+
+---
+
+## Default README
+
 This template should help get you started developing with Vue 3 in Vite.
 
-## Recommended IDE Setup
+### Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-## Customize configuration
+### Customize configuration
 
 See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-## Project Setup
+### Project Setup
 
 ```sh
 npm install
 ```
 
-### Compile and Hot-Reload for Development
+#### Compile and Hot-Reload for Development
 
 ```sh
 npm run dev
 ```
 
-### Compile and Minify for Production
+#### Compile and Minify for Production
 
 ```sh
 npm run build
 ```
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+#### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
 npm run test:unit
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+#### Lint with [ESLint](https://eslint.org/)
 
 ```sh
 npm run lint

package/bases/PxBaseItemsSelect.vue

@@ -4,7 +4,7 @@
 
 <script>
 import PxBaseItems from './PxBaseItems.vue';
-import utils from '../utils/utils.js';
+import { arraySafeIndex } from '../utils/utils.js';
 
 // helper to define what an "empty" key or set of keys looks like
 const isKeySetEmpty = keyOrKeys => {
@@ -356,7 +356,7 @@ export default {
             const replace =
                 replaceSelection == 'auto' ? this.updateMode == 'single' : replaceSelection;
 
-            index = utils.arraySafeIndex(this.items, index, 0, wrap);
+            index = arraySafeIndex(this.items, index, 0, wrap);
             this.selectAt(index, replace);
         },
 
@@ -364,11 +364,11 @@ export default {
             if (this.selectedIndex === null) {
                 this.selectAt(0);
             } else {
-                const index = utils.arraySafeIndex(
+                const index = arraySafeIndex(
                     this.items,
                     this.selectedIndex,
                     offsetFromSelectedIndex,
-                    wrap
+                    wrap,
                 );
                 this.selectAt(index, true);
             }

package/bases/PxBaseMobileAware.vue

@@ -1,73 +1,38 @@
 <!--
     #VUE3 Todo
-
-    Use for global mobile awareness in javascript. This doesn't actually handle mobile detection
-    but provides a consistent interface for communicating between a single component that does
-    the detection and other components that subscribe to an eventbus and update a property called
-    isMobile.
-
-    Sample usage using a css variable for detecting mobile (this keeps css and js in sync):
-
-    ### MyLayout.vue (or other global component)
-
-        // add PxBaseMobileAware as a mixin
-        import PxBaseMobileAware from '@thinkpixellab-public/px-vue/bases/PxBaseMobileAware.vue';
-        mixins: [PxBaseMobileAware],
-
-        // add a resize handler and call setGlobalIsMobile
-        resize() {
-            if (this.$el) {
-                const cssMobile = getComputedStyle(this.$el).getPropertyValue('--is-mobile');
-                this.setGlobalIsMobile(cssMobile.toLowerCase().trim() == 'true');
-            }
-        },
-
-        // add a css variable that changes with the viewport
-
-        .my-layout {
-            --is-mobile: false;
-            @include media-until-mobile() {
-                --is-mobile: true;
-            }
-        }
-
-    ### MyComponent.vue
-
-        // use PxBaseMobileAware as a mixin
-        import PxBaseMobileAware from '@thinkpixellab-public/px-vue/bases/PxBaseMobileAware.vue';
-        mixins: [PxBaseMobileAware]
-
-        // use the isMobile property as needed in a template
-        <div> This is mobile: {{isMobile ? 'yup' : 'nope' }} </div>
-
-        // or in code
-        watch: {
-            isMobile(nv) {
-                // do something when isMobile changes
-            }
-        }
-
-
+    Must be used in conjuction with PxBaseMobileProvide. See notes in that file for details.
 -->
 
 <script>
 export default {
-    data() {
-        return { isMobile: null };
+    inject: {
+        mediaQuery: {
+            default: { isMobile: null, currentBreakpoint: null, breakpoints: {} },
+        },
     },
-    mounted() {
-        if (this.$globalOn) {
-            this.$globalOn('mobile-changed', isMobile => {
-                this.isMobile = isMobile;
-            });
-        }
+    computed: {
+        isMobile() {
+            return this.mediaQuery.isMobile;
+        },
+        currentBreakpoint() {
+            return this.mediaQuery.currentBreakpoint;
+        },
     },
+
     methods: {
-        setGlobalIsMobile(isMobile) {
-            if (this.$globalEmit) {
-                this.$globalEmit('mobile-changed', isMobile);
-                this.isMobile = isMobile;
+        isBreakpointOrSmaller(breakpoint) {
+            if (this.currentBreakpoint === null) {
+                return false;
             }
+
+            if (this.currentBreakpoint === breakpoint) {
+                return true;
+            }
+
+            return (
+                this.mediaQuery.breakpoints[breakpoint] >=
+                this.mediaQuery.breakpoints[this.currentBreakpoint]
+            );
         },
     },
 };

package/bases/PxBaseResize.vue

@@ -31,7 +31,11 @@ export default {
         const resizeDebouncedFn =
             this.resizeDebounceValue && this.resize
                 ? debounce(this.resizeDebounceValue, e => {
-                      this.resize(e);
+                      try {
+                          this.resize(e);
+                      } catch (e) {
+                          console.error('Resize: ' + e);
+                      }
                       this.resizing = false;
                   })
                 : null;
@@ -51,13 +55,28 @@ export default {
             // regular version
             else {
                 if (this.resize) {
-                    this.resize();
+                    try {
+                        this.resize();
+                    } catch (e) {
+                        console.error('Resize: ' + e);
+                    }
                 }
             }
         };
 
         this.resizeObserver = new ResizeObserver(resizeFn);
-        this.resizeObserver.observe(this.observeElementValue);
+
+        if (
+            this.observeElementValue &&
+            (this.observeElementValue instanceof Element ||
+                this.observeElementValue instanceof SVGElement)
+        ) {
+            this.resizeObserver.observe(this.observeElementValue);
+        } else {
+            console.warn(
+                `Could not call ResizeObserver.observe because observeElementValue is not an Element: ${this.observeElementValue}`
+            );
+        }
     },
     beforeUnmount() {
         this.resizeObserver.disconnect();

package/bases/PxBaseToggle.vue

@@ -10,6 +10,7 @@
 
 <script>
 export default {
+    emits: ['update:checked', 'checked', 'unchecked'],
     props: {
         /**
          * The value of the checked property.

package/bases/PxBaseVariants.vue

@@ -45,12 +45,27 @@ export default {
         },
     },
     methods: {
-        // true if the given variant is present
-        isVariant(variantName) {
-            return this.variants?.includes(variantName);
+        // true if the given variant (string) or variants (array) are present
+        isVariant(val) {
+            if (this.variants && this.variants.length && val) {
+                if (typeof val == 'string') {
+                    return this.variants?.includes(val);
+                }
+                if (Array.isArray(val) && val.length) {
+                    for (let i = 0; i < val.length; i++) {
+                        if (this.variants?.includes(val[i])) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
         },
 
-        // find the first matching variant key in a map and return the correspond value
+        // Find the first matching variant key in a map and return the correspond value
+        // Example:
+        //     <MyComponent variant="red" />
+        //     variantsToValue({'red': '#F00', 'blue': '#0F0'}) => '#F00'
         variantsToValue(valueMap, fallback) {
             for (let key in valueMap) {
                 if (this.isVariant(key)) {

package/bases/PxBaseVariantsOverride.vue

@@ -20,7 +20,7 @@ export default {
         variantValue() {
             return (
                 (this.variantBase ? `${this.variantBase} ` : '') +
-                (this.variantDefault ? this.variantDefault : this.variant)
+                (this.variant && this.variant !== 'default' ? this.variant : this.variantDefault)
             );
         },
     },

package/components/PxArrow.vue

@@ -0,0 +1,127 @@
+<!--
+    Generates an SVG arrow based on props.
+-->
+<template>
+    <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        overflow="visible"
+        :viewBox="svgData.viewBox"
+    >
+        <g
+            :stroke-width="svgData.strokeWidth"
+            stroke="currentColor"
+            fill="none"
+            fill-rule="evenodd"
+            stroke-linecap="round"
+        >
+            <polyline :points="svgData.pointer"></polyline>
+            <polyline v-if="stemVisible" :points="svgData.stem"></polyline>
+        </g>
+    </svg>
+</template>
+
+<script>
+import PxBaseResize from '@thinkpixellab-public/px-vue/bases/PxBaseResize.vue';
+import { getBoundingBox, rotatePoints } from '../utils/points.js';
+import { contain } from '@thinkpixellab-public/px-vue/utils/fit.js';
+
+export default {
+    name: 'px-arrow',
+    mixins: [PxBaseResize],
+    props: {
+        // the aspect of the arrow "rectangle"
+        pointerAspect: { type: [Number, String], default: 2 },
+
+        // the relative height of the arrow
+        pointerSize: { type: Number, default: 0.4 },
+
+        // the relative size of the stem
+        stemVisible: { type: Boolean, default: true },
+
+        // the angle in which the arrow is pointing (in degrees)
+        angle: { type: Number, default: 0 },
+
+        // the stroke thickness of the arrow
+        strokeWidth: { type: Number, default: 1 },
+
+        // when true, we scale the strokeWidth in the internal SVG to keep it at the specified value
+        // regardless of render size
+        scaleStrokeWidth: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            elementSize: { width: 100, height: 100 },
+        };
+    },
+    computed: {
+        svgData() {
+            const pointerHeight = this.pointerSize;
+            const pointerWidth = this.pointerAspect * pointerHeight;
+
+            // basic arrow (bottom left corner anchored to origin)
+            let points = [
+                // pointer
+                { x: 0, y: pointerHeight },
+                { x: pointerWidth / 2, y: 0 },
+                { x: pointerWidth, y: pointerHeight },
+
+                // stem
+                { x: pointerWidth / 2, y: 0 },
+                { x: pointerWidth / 2, y: 1 },
+            ];
+
+            // rotate
+            points = rotatePoints(points, this.angle);
+
+            // scale by 100 so the viewbox isn't ridiculous
+            points = points.map(p => {
+                return {
+                    x: p.x * 100,
+                    y: p.y * 100,
+                };
+            });
+
+            // get viewbox bounds
+            const bounds = getBoundingBox(points);
+
+            // get stroke scale
+            const strokeScale = this.scaleStrokeWidth ? contain(this.elementSize, bounds).scale : 1;
+
+            // convert points to a string
+            points = points.map(p => {
+                return `${p.x} ${p.y}`;
+            });
+
+            const svgData = {
+                viewBox: [bounds.x, bounds.y, bounds.width, bounds.height]
+                    .map(n => Math.round(n))
+                    .join(' '),
+                pointer: [points[0], points[1], points[2]].join(' '),
+                stem: [points[3], points[4]].join(' '),
+                strokeWidth: this.strokeWidth * strokeScale,
+            };
+
+            return svgData;
+        },
+    },
+    methods: {
+        resize() {
+            if (this.$el) {
+                const r = this.$el.getBoundingClientRect();
+                this.elementSize = {
+                    width: r.width,
+                    height: r.height,
+                };
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.px-arrow {
+    position: relative;
+}
+</style>