@thinkpixellab-public/px-vue 3.0.1

package/dev/data/fruits.js

@@ -0,0 +1,59 @@
+export default [
+    {
+        id: 'apple',
+        name: 'Apple',
+        color: 'red',
+        deliciousNess: 7,
+        description:
+            'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.',
+        lastPurchase: new Date('2022-03-01T00:00:00.000Z'),
+        image: 'https://source.unsplash.com/MardkT836BU/1600x900',
+    },
+    {
+        id: 'orange',
+        name: 'Orange',
+        color: 'orange',
+        deliciousNess: 8,
+        description:
+            'Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.',
+        lastPurchase: new Date('2022-02-01T00:00:00.000Z'),
+        image: 'https://source.unsplash.com/U1iYwZ8Dx7k/1600x900',
+    },
+    {
+        id: 'lime',
+        name: 'Lime',
+        color: 'yellowgreen',
+        deliciousNess: 3,
+        description: 'Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.',
+        lastPurchase: new Date('2022-01-01T00:00:00.000Z'),
+        image: 'https://source.unsplash.com/fjc3Ynol3Bs/1600x900',
+    },
+    {
+        id: 'banana',
+        name: 'Banana',
+        color: 'gold',
+        deliciousNess: 7,
+        description: 'Donec id elit non mi porta gravida at eget metus.',
+        lastPurchase: new Date('2021-12-01T00:00:00.000Z'),
+        image: 'https://source.unsplash.com/sf_1ZDA1YFw/1600x900',
+    },
+    {
+        id: 'grape',
+        name: 'Grape',
+        color: 'purple',
+        deliciousNess: 5,
+        description:
+            'Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.',
+        lastPurchase: new Date('2021-11-01T00:00:00.000Z'),
+        image: 'https://source.unsplash.com/ASKgnwyif3E/1600x900',
+    },
+    {
+        id: 'strawberry',
+        name: 'Strawberry',
+        color: 'pink',
+        deliciousNess: 9,
+        description: 'Donec ullamcorper nulla non metus auctor fringilla.',
+        lastPurchase: new Date('2021-10-01T00:00:00.000Z'),
+        image: 'https://source.unsplash.com/xnRg3xDcNnE/1600x900',
+    },
+];

package/dev/data/random.js

@@ -0,0 +1,13 @@
+import fruits from './fruits.js';
+
+export default {
+    randomFruits(count) {
+        let f = [];
+        for (let i = 0; i < count; i++) {
+            let randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
+
+            f.push({ ...randomFruit, id: randomFruit.id + '-' + i });
+        }
+        return f;
+    },
+};

package/dev/demos/Demo-PxBaseDrag.vue

@@ -0,0 +1,94 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <div :class="bem('status')"></div>
+        <div
+            :class="bem('ball')"
+            :style="{ transform: `translate(${cssPx(dx)},${cssPx(dy)})` }"
+        ></div>
+        <div :class="bem('status')">
+            <div>dx:{{ dx }}</div>
+            <div>dy:{{ dy }}</div>
+            <div>isDragging:{{ isDragging }}</div>
+            <div>isMoving:{{ isMoving }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import drag from '../../utils/drag.js';
+
+export default {
+    name: 'demo-px-drag-base',
+    props: {},
+    data() {
+        return { dx: 0, dy: 0, isMoving: false, isDragging: false };
+    },
+    // computed: {},
+    // watch: {},
+    mounted() {
+        this.drag = new drag(this.$el, {
+            lock: 'x',
+            onStart: () => {
+                this.isDragging = true;
+            },
+            onDrag: ev => {
+                this.isMoving = true;
+                if (ev.delta) {
+                    this.dx += ev.delta.x;
+                    this.dy += ev.delta.y;
+                }
+            },
+            onEnd: ev => {
+                // this.dx = 0;
+                // this.dy = 0;
+                this.isDragging = false;
+                console.log(ev.delta);
+            },
+            onMoveEnd: () => {
+                this.isMoving = false;
+            },
+        });
+    },
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+
+.demo-px-drag-base {
+    width: 100vw;
+    height: 60vh;
+    background-color: peachpuff;
+    border: 4px solid tomato;
+    box-sizing: border-box;
+    position: relative;
+    &__ball {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -60px;
+        margin-top: -60px;
+        width: 120px;
+        height: 120px;
+        background-color: tomato;
+        border-radius: 50%;
+    }
+    &__status {
+        background-color: accent(-6);
+        color: accent(8);
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        width: 16em;
+        padding: 1.5em;
+        border-radius: 0.5em;
+        font-family: get('code-font-family');
+        font-size: 10px;
+        line-height: 1.5;
+    }
+}
+</style>

package/dev/demos/Demo-PxCardGrid.vue

@@ -0,0 +1,53 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <px-card-grid
+            :items="fruits"
+            :debug="true"
+            :gap="60"
+            :allow-orphans="true"
+            :maxColumns="4"
+            :templates="{
+                4: ['== -- -----', '-- == -- --', '----- -- ==', '-- -- == --'],
+                3: ['== -- --', '-- -- ==', '-- == --'],
+                2: ['-- --', '-----', '== --'],
+            }"
+        >
+            <template #default="{ item }">{{ item.name }}</template>
+        </px-card-grid>
+    </div>
+</template>
+
+<script>
+import PxCardGrid from '../../components/PxCardGrid.vue';
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+import random from '../data/random.js';
+
+export default {
+    components: { PxCardGrid },
+    name: 'demo-px-card-grid',
+    // components: { Component },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return { fruits: [] };
+    },
+    // computed: {},
+    // watch: {},
+    mounted() {
+        this.fruits = random.randomFruits(20);
+    },
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+.demo-px-card-grid {
+    // add styles here
+}
+</style>

package/dev/demos/Demo-PxPivot.vue

@@ -0,0 +1,58 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <px-pivot :items="tabs" v-model="selectedTab" />
+        <px-slides :items="tabs" v-model="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';
+
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+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

@@ -0,0 +1,72 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <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';
+
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+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>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+.demo-px-slide-drawer {
+    // add styles here
+}
+</style>

package/dev/demos/Demo-PxSlideTransition.vue

@@ -0,0 +1,86 @@
+<!--
+    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 { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+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

@@ -0,0 +1,142 @@
+<!--
+    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="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

@@ -0,0 +1,46 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <px-styles-preview />
+    </div>
+</template>
+
+<script>
+import PxStylesPreview from '../../components/PxStylesPreview.vue';
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.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);
+
+    // add styles here
+}
+</style>

package/dev/demos/Demo-PxSwiper.vue

@@ -0,0 +1,44 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <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>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+
+.demo-px-swiper {
+    // add styles here
+}
+</style>