@thinkpixellab-public/px-vue 5.0.2 → 5.1.0

package/dev/demos/Demo-PxMenu.vue

@@ -1,94 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div :class="bem()">
-        <PxMenu
-            ref="menu"
-            :items="[
-                {
-                    id: 'copy',
-                    label: 'Copy',
-                    icon: iconCopy,
-                    iconSize: 1,
-                    handler: onCopy,
-                },
-                {
-                    id: 'paste',
-                    label: 'Paste',
-                    icon: iconClipboard,
-                    iconSize: 1,
-                    handler: onPaste,
-                },
-                {
-                    id: 'sep1',
-                    separator: true,
-                },
-                {
-                    id: 'paste2',
-                    label: 'Paste',
-
-                    iconSize: 1,
-                },
-                {
-                    id: 'paste3',
-                    label: 'Paste',
-                    icon: iconClipboard,
-                    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 { contextMenuDirective } from '../../components/PxMenu.vue';
-import PxMenu from '../../components/PxMenu.vue';
-
-import iconCopy from '../../assets/feather/copy.svg?url';
-import iconClipboard from '../../assets/feather/clipboard.svg?url';
-
-export default {
-    name: 'demo-px-menu',
-    components: { PxMenu },
-    directives: { contextMenu: contextMenuDirective },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    data() {
-        return {
-            visible: true,
-
-            iconCopy,
-            iconClipboard,
-        };
-    },
-    // 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/demos/Demo-PxPivot.vue

@@ -1,55 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div :class="bem()">
-        <px-pivot :items="tabs" v-model:selected="selectedTab" />
-        <px-slides :items="tabs" v-model:selected="selectedTab" :drag-enabled="false">
-            <template #slide="{ item }">
-                <div :class="bem('slide')">
-                    <h1>{{ item.label }}</h1>
-                </div>
-            </template>
-        </px-slides>
-    </div>
-</template>
-
-<script>
-import PxPivot from '../../components/PxPivot.vue';
-import PxSlides from '../../components/PxSlides.vue';
-import stringToItems from '../../plugins/filters/stringToItems.js';
-
-export default {
-    name: 'demo-px-pivot',
-    components: { PxPivot, PxSlides },
-    filters: { stringToItems },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    data() {
-        const tabs = stringToItems('Apple, Orange, Banana, Super Delicious Pineapple');
-        tabs[1].hideSelector = true;
-
-        return { tabs, selectedTab: null };
-    },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    // methods: {},
-};
-</script>
-
-<style lang="scss">
-.demo-px-pivot {
-    overflow-x: hidden;
-    padding: 20vh 0 150vh;
-    max-width: 100vw;
-
-    &__slide {
-        margin: 0 auto;
-        background-color: rgba(gold, 0.1);
-        width: 80vw;
-        max-width: 600px;
-        aspect-ratio: 4 / 3;
-    }
-}
-</style>

package/dev/demos/Demo-PxSideDrawer.vue

@@ -1,62 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div>
-        <px-side-drawer>
-            <section>
-                <a href="#">Link One</a>
-                <a href="#">Link Two</a>
-                <a href="#">Link Three</a>
-            </section>
-
-            <section>
-                <a href="#">Link Four</a>
-                <a href="#">Link Five</a>
-                <a href="#">Link Six</a>
-            </section>
-
-            <!-- disabled for now...some weirdness with nested modals -->
-            <section v-if="false">
-                <px-dropdown
-                    tag="button"
-                    trigger="click"
-                    :items="fruits"
-                    items-value-property="id"
-                    items-label-property="name"
-                    items-key-property="id"
-                    placeholder="Select a fruit..."
-                    :use-modal="false"
-                ></px-dropdown>
-            </section>
-
-            <template #bottom>
-                <section>
-                    <a href="#">Bottom</a>
-                    <a href="#">Also Bottom</a>
-                </section>
-            </template>
-        </px-side-drawer>
-    </div>
-</template>
-
-<script>
-import PxSideDrawer from '../../components/PxSideDrawer.vue';
-import PxDropdown from '../../components/PxDropdown.vue';
-import random from '../data/random.js';
-
-export default {
-    components: { PxSideDrawer, PxDropdown },
-    name: 'demo-px-slide-drawer',
-    // components: { Component },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    data() {
-        return { fruits: random.randomFruits(5) };
-    },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    // methods: {},
-};
-</script>

package/dev/demos/Demo-PxSlideTransition.vue

@@ -1,84 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div :class="bem()">
-        <div :class="bem('outer')" @click="evenOdd++">
-            <px-slide-transition>
-                <div v-if="evenOdd % 2" :class="bem('inner', { even: true })" />
-            </px-slide-transition>
-            <px-slide-transition>
-                <div v-if="!(evenOdd % 2)" :class="bem('inner', { odd: true })">
-                    <div :class="bem('inner-inner')" data-slide>SO INNER</div>
-                </div>
-            </px-slide-transition>
-        </div>
-    </div>
-</template>
-
-<script>
-import PxSlideTransition from '../../components/PxSlideTransition.vue';
-
-export default {
-    name: 'demo-px-slide-transition',
-    components: { PxSlideTransition },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    data() {
-        return { evenOdd: 0 };
-    },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    // methods: {},
-};
-</script>
-
-<style lang="scss">
-@use '../../styles/px.scss' as *;
-
-.demo-px-slide-transition {
-    &__outer {
-        width: 300px;
-        height: 300px;
-        background-color: hotpink;
-        border-radius: 50%;
-        position: relative;
-        margin: 20px auto;
-        padding: 30px;
-        box-sizing: border-box;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 100%;
-        grid-area: content;
-    }
-
-    &__inner {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        background-color: gold;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        grid-area: 1/1/1/1;
-        &--even {
-            background-color: purple;
-        }
-    }
-
-    &__inner-inner {
-        width: 80%;
-        height: 80%;
-        background-color: orange;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: sans-serif;
-        font-weight: bold;
-        color: white;
-        border-radius: 50%;
-    }
-}
-</style>

package/dev/demos/Demo-PxSlides.vue

@@ -1,142 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <px-flex :class="bem()" vertical style="height: 100%" gap="1">
-        <px-flex justify="center" gap="1">
-            <button @click="clickPrev">Previous</button>
-            <button @click="clickNext">Next</button>
-            <px-toggle v-model:checked="nested">Nested</px-toggle>
-        </px-flex>
-        <px-slides :style="{ flex: 1 }" ref="slides" :items="fruits" items-key-property="id">
-            <template #slide="{ item, index }">
-                <!-- NESTED -->
-                <div v-if="nested && index == 0" :class="bem('nested')">
-                    <img
-                        data-drag
-                        :src="item.image"
-                        :style="{
-                            aspectRatio: 1,
-                            width: '50vw',
-                            objectFit: 'cover',
-                            borderRadius: '50%',
-                        }"
-                    />
-
-                    <px-slides :items="fruits" items-key-property="id">
-                        <template #slide="{ item, index }">
-                            <div :class="bem('item')">
-                                <div>
-                                    <h1>NESTED {{ item.name }} {{ index }}</h1>
-                                </div>
-
-                                <img
-                                    data-drag
-                                    :src="item.image"
-                                    :style="{
-                                        aspectRatio: 1,
-                                        width: '50vw',
-                                        objectFit: 'cover',
-                                        borderRadius: '50%',
-                                    }"
-                                />
-                            </div>
-                        </template>
-                    </px-slides>
-                </div>
-
-                <!-- NORMAL -->
-                <div v-else :class="bem('item')">
-                    <div>
-                        <h1>{{ item.name }} {{ index }}</h1>
-                    </div>
-
-                    <img
-                        data-drag
-                        :src="item.image"
-                        :style="{
-                            aspectRatio: 1,
-                            width: '50vw',
-                            objectFit: 'cover',
-                            borderRadius: '50%',
-                        }"
-                    />
-                </div>
-            </template>
-            <!-- <template #item="{ item, index, dragX }">
-                <div :class="bem('item')" :style="{ transform: `translate(${dragX}px, 0)` }">
-                    <px-card :class="bem('card')">
-                        <div :class="bem('no-swiping')">(no swiping)</div>
-                        <p>{{ item.name }} ({{ index }})</p>
-                        <div
-                            :class="bem('graphic')"
-                            :style="{
-                                backgroundColor: item.color,
-                            }"
-                        ></div>
-                    </px-card>
-                </div>
-            </template> -->
-        </px-slides>
-    </px-flex>
-</template>
-
-<script>
-import PxFlex from '../../components/PxFlex.vue';
-import PxSlides from '../../components/PxSlides.vue';
-import PxToggle from '../../components/PxToggle.vue';
-
-import random from '../data/random.js';
-
-export default {
-    name: 'demo-px-slides',
-    components: { PxSlides, PxFlex, PxToggle },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    data() {
-        return { fruits: [], nested: false };
-    },
-    // computed: {},
-    // watch: {},
-    mounted() {
-        this.fruits = random.randomFruits(3);
-    },
-    methods: {
-        clickPrev() {
-            this.$refs.slides.previous();
-        },
-        clickNext() {
-            this.$refs.slides.next();
-        },
-    },
-};
-</script>
-
-<style lang="scss">
-@use '../../styles/px.scss' as *;
-
-.demo-px-slides {
-    padding: 10px;
-    gap: 10px;
-
-    width: 100vw;
-    box-sizing: border-box;
-    overflow: hidden;
-    height: 100%;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 100%;
-    // min-height: 300vh;
-    border: 5px solid hotpink;
-
-    &__nested {
-        background-color: gold;
-        font-size: 10px;
-        opacity: 0.5;
-        display: flex;
-        > * {
-            flex: 1;
-        }
-    }
-}
-</style>

package/dev/demos/Demo-PxStylesPreview.vue

@@ -1,41 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div :class="bem()">
-        <px-styles-preview />
-    </div>
-</template>
-
-<script>
-import PxStylesPreview from '../../components/PxStylesPreview.vue';
-export default {
-    components: { PxStylesPreview },
-    name: 'demo-px-styles-preview',
-    // components: { Component },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    // data() { return { b: 0 }; },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    // methods: {},
-};
-</script>
-
-<style lang="scss">
-// import the library (so we can configure it)
-@use '@thinkpixellab-public/px-styles' as *;
-
-.demo-px-styles-preview {
-    // add configuration as needed (this is optional)
-    @include config('colors:accent', #5157bd);
-    @include config('controls:border-radius', 6px);
-
-    //@include config('font-family', 'Arial');
-
-    // initialize
-    @include init();
-    @include boilerplate($scoped: true);
-}
-</style>

package/dev/demos/Demo-PxSwiper.vue

@@ -1,36 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div>
-        <px-swiper :loop="true">
-            <px-swiper-slide>
-                <div class="swiper-max-width">
-                    <img class="swiper-img" src="https://picsum.photos/1600/900?grayscale" />
-                </div>
-            </px-swiper-slide>
-            <px-swiper-slide>
-                <img class="swiper-img" src="https://picsum.photos/1601/900?grayscale" />
-            </px-swiper-slide>
-            <px-swiper-slide>
-                <img class="swiper-img" src="https://picsum.photos/1602/900?grayscale" />
-            </px-swiper-slide>
-        </px-swiper>
-    </div>
-</template>
-
-<script>
-import PxSwiper from '../../components/PxSwiper.vue';
-import PxSwiperSlide from '../../components/PxSwiperSlide.vue';
-export default {
-    name: 'demo-px-swiper',
-    components: { PxSwiper, PxSwiperSlide },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    // data() { return { b: 0 }; },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    // methods: {},
-};
-</script>

package/dev/demos/DemoPicker.vue

@@ -1,77 +0,0 @@
-<!--
-    <demo-picker :demos="['PxDatePicker', 'PxDropdown']">
-        <template #default="{ demoComponent }">
-            <component :is="demoComponent" />
-        </template>
-    </demo-picker>
--->
-<template>
-    <div :class="bem()">
-        <div :class="bem('main')">
-            <slot name="default" :demoComponent="demoComponent"></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-import { getQueryParam } from '../../utils/utils.js';
-
-export default {
-    name: 'demo-picker',
-    // mixins: [],
-    // components: {
-    //     MyComponent
-    // },
-    props: {
-        demos: { type: Array, default: null },
-        storageKey: { type: String, default: 'demo' },
-    },
-    data() {
-        return {
-            demoComponent: null,
-            dropdownVisible: false,
-        };
-    },
-    mounted() {
-        const demo = this.getDemoSelection();
-        if (demo && demo.trim()) {
-            this.setDemoSelection(demo);
-        }
-
-        this.demoComponent = demo;
-        console.log(this.demoComponent);
-
-        document.addEventListener('keydown', e => {
-            if (e.key == 'F1') {
-                this.dropdownVisible = !this.dropdownVisible;
-            }
-        });
-    },
-    // watch: {},
-    // computed: {}
-    methods: {
-        setDemoSelection(demo) {
-            if (window?.localStorage) {
-                window.localStorage.setItem(this.storageKey, demo);
-            }
-        },
-        getDemoSelection() {
-            return getQueryParam('demo') || window?.localStorage?.getItem(this.storageKey);
-        },
-    },
-};
-</script>
-
-<style lang="scss">
-.demo-picker {
-    &__main {
-        display: grid;
-        min-width: 100vw;
-        min-height: 100vh;
-    }
-
-    &__toolbar {
-        background-color: #23272e;
-    }
-}
-</style>

package/dev/dev.vue

@@ -1,64 +0,0 @@
-<template>
-    <div id="app">
-        <component :is="componentToRender" v-if="componentToRender" />
-    </div>
-</template>
-
-<script>
-import Vue from 'vue';
-
-import PxVueTest from '../components/PxVueTest.vue';
-import DemoPxSlides from './demos/Demo-PxSlides.vue';
-import DemoPxSideDrawer from './demos/Demo-PxSideDrawer.vue';
-import DemoPxCardGrid from './demos/Demo-PxCardGrid.vue';
-import DemoPxSlideTransition from './demos/Demo-PxSlideTransition.vue';
-import DemoPxSwiper from './demos/Demo-PxSwiper.vue';
-import DemoPxBaseDrag from './demos/Demo-PxBaseDrag.vue';
-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';
-import DemoPxFlip from './demos/Demo-PxFlip.vue';
-
-export default Vue.extend({
-    components: {
-        PxVueTest,
-        DemoPxSlides,
-        DemoPxSideDrawer,
-        DemoPxCardGrid,
-        DemoPxSlideTransition,
-        DemoPxSwiper,
-        DemoPxBaseDrag,
-        DemoPxStylesPreview,
-        DemoPxPivot,
-        DemoPxFloat,
-        DemoPxContain,
-        DemoPxMenu,
-        DemoPxFlip,
-    },
-    name: 'ServeDev',
-    data() {
-        return {
-            componentToRender: null,
-        };
-    },
-    computed: {},
-    mounted() {
-        const params = new Proxy(new URLSearchParams(window.location.search), {
-            get: (searchParams, prop) => searchParams.get(prop),
-        });
-        this.componentToRender = params.component || 'DemoPxFlip';
-        console.log(`this.componentToRender: ${this.componentToRender}`);
-    },
-});
-</script>
-<style>
-html,
-body {
-    margin: 0;
-    padding: 0;
-    min-width: 100vw;
-    min-height: 100vh;
-}
-</style>

package/dev/serve.js

@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import dev from './dev.vue';
-
-import common from '../plugins/common.js';
-Vue.use(common);
-
-import commonLib from '../plugins/common-lib.js';
-Vue.use(commonLib);
-
-import commonClient from '../plugins/common-client.js';
-Vue.use(commonClient);
-
-Vue.config.productionTip = false;
-
-new Vue({
-    render: h => h(dev),
-}).$mount('#app');

package/stories/Intro.mdx

@@ -1 +0,0 @@
-### PxVue