@thinkpixellab-public/px-vue 3.0.68 → 3.0.69

package/components/PxArrowScroller.vue

@@ -55,7 +55,7 @@ ar
 // import Component from '~/components/Component.vue';
 // import Mixin from '~/components/Mixin.vue';
 import PxBaseResize from './PxBaseResize.vue';
-import PxIcon from '@thinkpixellab-public/px-vue/components/PxIcon.vue';
+import PxIcon from './PxIcon.vue';
 
 export default {
     name: 'px-arrow-scroller',

package/components/PxIconButton.vue

@@ -29,6 +29,7 @@
             :viewBox="svgViewBox"
             :height="calcHeight"
             :width="calcWidth"
+            :title="title"
         />
     </button>
 </template>
@@ -111,5 +112,12 @@ export default {
             color: accent(-2);
         }
     }
+
+    &--subtle {
+        opacity: 0.33;
+        &:hover {
+            opacity: 1;
+        }
+    }
 }
 </style>

package/components/PxMenu.vue

@@ -0,0 +1,240 @@
+<!--
+    The general idea here is that you define a context menu and then use the v-context-menu
+    directive to assign it to an element and pass in optional context.
+
+    The directive creates a handler for the element's contextmenu event and shows the appropriate
+    context menu with the provided context.
+
+    Here is what all of that looks like:
+
+    // define the context menu
+
+    <px-menu ref="mymenu" :items="[
+        {
+            id: 'copy',
+            icon: require('myicon.svg'),
+            label: 'Copy',
+
+            // function with a single arg which will be the context from the directive
+            handler: 'onContextMenuCopy',
+
+            // visible / enabled can be a function or bool
+            enabled: (ctx) => ctx.isSomething,
+            visible: true
+        },
+        {
+            id: 'copy',
+            icon: require('myicon.svg'),
+            label: 'Copy',
+
+            // function with a single arg which will be the context from the directive
+            handler: 'onContextMenuCopy',
+
+            // visible / enabled can be a function or bool
+            enabled: (ctx) => ctx.isSomething,
+            visible: true
+        },
+        {
+            isSeparator: true
+        },
+        {
+            id: 'advanced',
+            label: 'Advanced',
+            items: [],
+        },
+    ]" />
+
+    // use the context menu (no context)
+    <div v-context-menu="'mymenu'" />
+
+    // use the context menu (pass dynamic mydata as context)
+    <div v-context-menu:[mydata]="'mymenu'" />
+
+
+-->
+<template>
+    <px-float
+        v-bind="{
+            placement: 'right-start',
+            ...floatProps,
+        }"
+        :popup-class="bem('popup')"
+        ref="popup"
+        variant="none"
+        @hide="afterHide"
+    >
+        <div :class="bem()">
+            <slot v-for="item in items" :item="item" :data="data" :done="hide">
+                <PxMenuItem
+                    :key="item.id"
+                    :separator="item.separator"
+                    :label="item.label"
+                    :hint="item.hint"
+                    :items="item.items"
+                    :icon="item.icon"
+                    :visible="item.visible"
+                    :disabled="item.disabled"
+                    :handler="item.handler"
+                    :iconSize="calcIconSize"
+                    :iconClass="iconClass"
+                    :data="data"
+                    @done="hide"
+                    @iconsized="iconSized"
+                />
+            </slot>
+        </div>
+    </px-float>
+</template>
+
+<script>
+import PxFloat from './PxFloat.vue';
+import PxMenuItem from './PxMenuItem.vue';
+
+// ================================================================================
+// Component
+// ================================================================================
+
+const PxMenu = {
+    name: 'px-menu',
+    components: { PxFloat, PxMenuItem },
+    mixins: [],
+    props: {
+        items: { type: Array, default: null },
+        iconSize: { type: [String, Number], default: 1 },
+        iconClass: { type: String, default: null },
+        floatProps: { type: Object, default: null },
+    },
+    data() {
+        return {
+            data: null,
+        };
+    },
+    computed: {
+        calcIconSize() {
+            if (this.items.find(item => !!item.icon)) {
+                return this.iconSize;
+            }
+            return 0;
+        },
+    },
+    methods: {
+        showAtCursor(mouseEvent, data) {
+            this.data = data;
+            this.$refs.popup?.showAtCursor(mouseEvent);
+        },
+        show(data) {
+            this.data = data;
+            this.$refs.popup?.show();
+        },
+        hide() {
+            this.$refs.popup?.hide();
+        },
+        afterHide() {
+            this.data = null;
+        },
+        iconSized(e) {
+            console.log(e);
+        },
+    },
+};
+
+// ================================================================================
+// Directives
+// ================================================================================
+
+const contextMenuDirective = {
+    //bind: (el, binding, vnode) => {
+    bind(el, binding, vnode) {
+        if (!binding || !vnode) {
+            return;
+        }
+
+        binding.el = vnode?.elm;
+        binding.contextMenuHandler = e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const name = binding?.value;
+            const data = binding?.arg;
+            const $refs = vnode?.context?.$refs;
+
+            if ($refs && name in $refs) {
+                const menu = $refs[name];
+
+                if (typeof menu?.show == 'function') {
+                    menu.showAtCursor(e, data);
+                }
+            }
+        };
+
+        if (binding.el) {
+            binding.el.addEventListener('contextmenu', binding.contextMenuHandler);
+        }
+    },
+    unbind(el, binding) {
+        if (binding.el) {
+            binding.el.removeEventListener('contextmenu', binding.contextMenuHandler);
+        }
+    },
+};
+
+const menuDirective = {
+    //bind: (el, binding, vnode) => {
+    bind(el, binding, vnode) {
+        if (!binding || !vnode) {
+            return;
+        }
+
+        binding.el = vnode?.elm;
+        binding.contextMenuHandler = e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const name = binding?.value;
+            const data = binding?.arg;
+            const $refs = vnode?.context?.$refs;
+
+            if ($refs && name in $refs) {
+                const menu = $refs[name];
+
+                if (typeof menu?.show == 'function') {
+                    menu.show(e, data);
+                }
+            }
+        };
+
+        if (binding.el) {
+            binding.el.addEventListener('click', binding.contextMenuHandler);
+        }
+    },
+    unbind(el, binding) {
+        if (binding.el) {
+            binding.el.removeEventListener('click', binding.contextMenuHandler);
+        }
+    },
+};
+
+export {
+    PxMenu as default,
+    contextMenuDirective as contextMenuDirective,
+    menuDirective as menuDirective,
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-menu {
+    font-family: get('font-family');
+    background-color: clr(page-bg);
+    color: clr(page-fg);
+    border-radius: get('controls:border-radius');
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+
+    &__popup {
+        @include css-map(popup());
+    }
+}
+</style>

package/components/PxMenuItem.vue

@@ -0,0 +1,147 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <button
+        v-if="!separator && isVisible"
+        :class="bem({ clicked, disabled: isDisabled })"
+        :title="hint"
+        :disabled="isDisabled"
+        @click="onClick"
+    >
+        <span
+            ref="icon"
+            v-if="iconSize"
+            :class="[bem('icon'), iconClass]"
+            :style="{ minWidth: cssEmFallback(iconSize) }"
+        >
+            <PxIcon :src="icon" :size="cssEmFallback(iconSize)" size-bias="width" />
+        </span>
+        <span :class="bem('label')">
+            {{ label }}
+        </span>
+    </button>
+
+    <hr v-else-if="visible" :class="bem({ separator: true })" :visible="isVisible" />
+</template>
+
+<script>
+import PxIcon from './PxIcon.vue';
+
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+export default {
+    name: 'px-menu-item',
+    components: { PxIcon },
+    // mixins: [ Mixin ],
+    props: {
+        separator: { type: Boolean, default: false },
+        label: { type: String, default: null },
+        hint: { type: String, default: null },
+        items: { type: Array, default: null },
+        icon: { type: String, default: null },
+        iconSize: { type: [String, Number], default: 1 },
+        iconClass: { type: String, default: null },
+        disabled: { type: [Function, Boolean], default: false },
+        visible: { type: [Function, Boolean], default: true },
+        handler: { type: Function, default: null },
+        data: { default: null },
+    },
+    data() {
+        return {
+            // used only to track visual state
+            clicked: false,
+        };
+    },
+    computed: {
+        isVisible() {
+            if (typeof this.visible == 'boolean') {
+                return this.visible;
+            }
+            if (typeof this.visible == 'function') {
+                return this.visible(this.data);
+            }
+            return true;
+        },
+        isDisabled() {
+            if (typeof this.disabled == 'boolean') {
+                return this.disabled;
+            }
+            if (typeof this.disabled == 'function') {
+                return this.disabled(this.data);
+            }
+            return false;
+        },
+    },
+    // watch: {},
+    mounted() {
+        this.clicked = false;
+    },
+    methods: {
+        onClick() {
+            this.clicked = true;
+
+            if (typeof this.handler == 'function') {
+                this.handler(this.data);
+            }
+            setTimeout(() => {
+                this.$emit('done');
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-menu-item {
+    @include control-reset();
+    font-size: inherit;
+    background-color: inherit;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    min-width: 7em;
+    max-width: 20em;
+    white-space: wrap;
+    line-height: 1.33;
+    text-align: left;
+    padding: 0.33em 1em;
+
+    &__icon {
+        margin-left: -0.25em;
+        flex: none;
+        display: flex;
+        align-items: center;
+    }
+
+    &__label {
+        white-space: nowrap;
+    }
+
+    &--clicked,
+    &:hover {
+        background-color: clr(select);
+        color: contrast-color(clr(select));
+    }
+
+    &:disabled {
+        background-color: transparent !important;
+        color: inherit !important;
+        opacity: 0.5;
+    }
+
+    &--separator {
+        background-color: currentColor;
+        opacity: 0.25;
+        height: 1px;
+        min-height: 1px;
+        max-height: 1px;
+        padding: 0;
+    }
+}
+</style>

package/components/PxSvg.vue

@@ -23,10 +23,11 @@
     <inline-svg
         class="px-svg"
         :transformSource="transform"
-        :src="src"
+        :src="src || ''"
         :viewBox="svgViewBox"
         :height="calcHeight"
         :width="calcWidth"
+        :title="title"
         v-on="$listeners"
     />
 </template>
@@ -59,6 +60,9 @@ export default {
 
         // string replacements to be made on the svg (we replace black with currentColor by default)
         replacements: { type: Object, default: null },
+
+        // set the title for accessibility
+        title: { type: String, default: null },
     },
     data() {
         return { svgWidth: null, svgHeight: null, svgViewBox: null };

package/dev/demos/Demo-PxFloat.vue

@@ -41,7 +41,7 @@
 
         <!-- mouse -->
         <div :class="bem('button')" @click="showMouseFloat">Mouse</div>
-        <px-float ref="mouseFloat" :placement="'bottom-start'" variant="default sm">
+        <px-float ref="mouseFloat" :placement="'bottom-start'" variant="dialog sm">
             Positioned with showAtCursor! (Note: needs to be done pogramatically because we only
             have access to mouse coordinates in a mouse event.)
         </px-float>

package/dev/demos/Demo-PxMenu.vue

@@ -0,0 +1,90 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <PxMenu
+            ref="menu"
+            :items="[
+                {
+                    id: 'copy',
+                    label: 'Copy',
+                    icon: require('../../assets/feather/copy.svg'),
+                    iconSize: 1,
+                    handler: onCopy,
+                },
+                {
+                    id: 'paste',
+                    label: 'Paste',
+                    icon: require('../../assets/feather/clipboard.svg'),
+                    iconSize: 1,
+                    handler: onPaste,
+                },
+                {
+                    id: 'sep1',
+                    separator: true,
+                },
+                {
+                    id: 'paste2',
+                    label: 'Paste',
+
+                    iconSize: 1,
+                },
+                {
+                    id: 'paste3',
+                    label: 'Paste',
+                    icon: require('../../assets/feather/clipboard.svg'),
+                    iconSize: 1.5,
+                },
+            ]"
+        />
+
+        <div :class="bem('target')" v-context-menu:[mydata]="'menu'" v-if="visible">
+            Right Click Me!
+        </div>
+
+        <button @click="visible = !visible">{{ visible ? 'Hide' : 'Show' }}</button>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+import { contextMenuDirective } from '../../components/PxMenu.vue';
+import PxMenu from '../../components/PxMenu.vue';
+
+export default {
+    name: 'demo-px-menu',
+    components: { PxMenu },
+    directives: { contextMenu: contextMenuDirective },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return { visible: true, mydata: 'This is some data.' };
+    },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    methods: {
+        onCopy(data) {
+            console.log('copy: ' + data);
+        },
+        onPaste(data) {
+            console.log('paste: ' + data);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+.demo-px-menu {
+    &__target {
+        width: 300px;
+        height: 300px;
+        background-color: orange;
+    }
+}
+</style>

package/dev/dev.vue

@@ -18,6 +18,7 @@ import DemoPxStylesPreview from './demos/Demo-PxStylesPreview.vue';
 import DemoPxPivot from './demos/Demo-PxPivot.vue';
 import DemoPxFloat from './demos/Demo-PxFloat.vue';
 import DemoPxContain from './demos/Demo-PxContain.vue';
+import DemoPxMenu from './demos/Demo-PxMenu.vue';
 
 export default Vue.extend({
     components: {
@@ -32,6 +33,7 @@ export default Vue.extend({
         DemoPxPivot,
         DemoPxFloat,
         DemoPxContain,
+        DemoPxMenu,
     },
     name: 'ServeDev',
     data() {
@@ -44,7 +46,7 @@ export default Vue.extend({
         const params = new Proxy(new URLSearchParams(window.location.search), {
             get: (searchParams, prop) => searchParams.get(prop),
         });
-        this.componentToRender = params.component || 'DemoPxFloat';
+        this.componentToRender = params.component || 'DemoPxMenu';
         console.log(`this.componentToRender: ${this.componentToRender}`);
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.68",
+    "version": "3.0.69",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -9,7 +9,7 @@
         "url": "git+https://github.com/thinkpixellab/px-vue.git"
     },
     "scripts": {
-        "serve": "vue-cli-service serve dev/serve.js"
+        "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve dev/serve.js"
     },
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",