@thinkpixellab-public/px-vue 5.0.2 → 5.1.0

package/.storybook/preview.js

@@ -1,26 +0,0 @@
-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: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/,
-                string: /(itemsKey|itemsDisabled)$/i,
-            },
-        },
-        order: ['Intro', 'Components'],
-        storySort: (a, b) => a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
-        docs: { },
-    },
-    tags: ['autodocs']
-};
-
-export default preview;

package/.storybook/preview.scss

@@ -1,3 +0,0 @@
-@use '../styles/px.scss' as *;
-@use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
-@use '../storybook/sb-styles.scss' as *;

package/.storybook/px-styles.config.scss

@@ -1,26 +0,0 @@
-// ----------------------------------------------------------------------------
-// Default version (uncomment lines to force recognizable color/font)
-// ----------------------------------------------------------------------------
-
-@forward '@thinkpixellab-public/px-styles/all.scss';
-@use '@thinkpixellab-public/px-styles/all.scss' as *;
-
-// @include config('controls.base.font-family', 'Georgia');
-// @include config('colors.accent', #e4346f);
-
-@include init();
-
-// ----------------------------------------------------------------------------
-// Fluent version of styles (must be run with dev-px in order to get a reference
-// to the px-styles-fluent.scss file)
-// ----------------------------------------------------------------------------
-
-// @forward '@thinkpixellab-public/px-styles/all.scss';
-// @forward '@thinkpixellab/px-edge-shared/styles/px-styles-fluent.scss';
-
-// @use '@thinkpixellab-public/px-styles/all.scss' as *;
-// @use '@thinkpixellab/px-edge-shared/styles/px-styles-fluent.scss' as *;
-
-// @include fluent-defaults();
-
-// @include init();

package/babel.config.js

@@ -1,16 +0,0 @@
-const devPresets = ['@vue/babel-preset-app'];
-const buildPresets = [
-    [
-        '@babel/preset-env',
-        // Config for @babel/preset-env
-        {
-            // Example: Always transpile optional chaining/nullish coalescing
-            // include: [
-            //   /(optional-chaining|nullish-coalescing)/
-            // ],
-        },
-    ],
-];
-module.exports = {
-    presets: process.env.NODE_ENV === 'development' ? devPresets : buildPresets,
-};

package/chromatic.config.json

@@ -1,5 +0,0 @@
-{
-  "onlyChanged": true,
-  "projectId": "Project:662fa9e7fdd6eadb4b9edb11",
-  "zip": true
-}

package/dev/data/fruits.js

@@ -1,59 +0,0 @@
-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/?w=400&h=400',
-    },
-    {
-        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/?w=400&h=400',
-    },
-    {
-        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/?w=400&h=400',
-    },
-    {
-        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/?w=400&h=400',
-    },
-    {
-        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/?w=400&h=400',
-    },
-    {
-        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/?w=400&h=400',
-    },
-];

package/dev/data/random.js

@@ -1,13 +0,0 @@
-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

@@ -1,94 +0,0 @@
-<!--
-    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

@@ -1,50 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div :class="bem()">
-        <px-card-grid
-            :items="fruits"
-            :debug="true"
-            :gap="60"
-            :allow-orphans="true"
-            :pad-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 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 {
-    padding: 5vh 0 10vh;
-}
-</style>

package/dev/demos/Demo-PxContain.vue

@@ -1,106 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div>
-        <px-tester>
-            <px-test name="Aspect" testId="pxcontain-aspect" :size="{ h: 600 }">
-                <px-contain aspect="16:9" :px="true">
-                    <template #default="{ top, left, width, height }">
-                        <div
-                            :style="{
-                                position: 'absolute',
-                                left,
-                                top,
-                                width,
-                                height,
-                                background: 'red',
-                            }"
-                        />
-                    </template>
-                </px-contain>
-            </px-test>
-
-            <px-test name="Width / Height" testId="pxcontain-wh" :size="{ h: 600 }">
-                <px-contain :naturalWidth="1600" :naturalHeight="900">
-                    <template #default="{ top, left, width, height }">
-                        <div
-                            :style="{
-                                position: 'absolute',
-                                left,
-                                top,
-                                width,
-                                height,
-                                background: 'gold',
-                            }"
-                        />
-                    </template>
-                </px-contain>
-            </px-test>
-
-            <px-test name="Scale" testId="pxcontain-scale" :size="{ h: 600 }">
-                <px-contain :naturalWidth="1600" :naturalHeight="900">
-                    <template #default="{ top, left, scale }">
-                        <div
-                            :style="{
-                                position: 'absolute',
-                                width: '1600px',
-                                height: '900px',
-                                top,
-                                left,
-                                transformOrigin: '0 0',
-                                transform: `scale(${scale})`,
-                                background: 'gold',
-                            }"
-                        />
-                    </template>
-                </px-contain>
-            </px-test>
-            <px-test name="Basic with Padding" testId="pxcontain-pad" :size="{ h: 600 }">
-                <div
-                    :style="{
-                        width: '100%',
-                        height: '100%',
-                        padding: '49px',
-                        border: '1px solid red',
-                        boxSizing: 'border-box',
-                    }"
-                >
-                    <px-contain :aspect="4 / 3">
-                        <template #default="{ top, left, width, height }">
-                            <div
-                                :style="{
-                                    position: 'absolute',
-                                    left,
-                                    top,
-                                    width,
-                                    height,
-                                    background: 'lightblue',
-                                }"
-                            >
-                                {{ width }} x {{ height }}
-                            </div>
-                        </template>
-                    </px-contain>
-                </div>
-            </px-test>
-        </px-tester>
-    </div>
-</template>
-
-<script>
-import { PxTester, PxTest } from '@thinkpixellab-public/px-vue-tester';
-import PxContain from '../../components/PxContain.vue';
-
-export default {
-    name: 'demo-px-contain',
-    components: { PxTester, PxTest, PxContain },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    // data() { return { b: 0 }; },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    // methods: {},
-};
-</script>

package/dev/demos/Demo-PxFlip.vue

@@ -1,104 +0,0 @@
-'one | two | 50%'
-<!--
-    Describe this component...
--->
-<template>
-    <div :class="bem()">
-        <PxFlip ref="flip" :states="['one', 'two']" :current="currentState">
-            <template #default="{ state }">
-                {{ state }}
-                <br />
-                <br />
-                <div :class="bem('container', { state })">
-                    <div :class="bem('red')" data-flip />
-                    <div :class="bem('gold')" data-flip />
-                    <div :class="bem('blue')" data-flip />
-                </div>
-            </template>
-        </PxFlip>
-        <button @click="toggleState">Toggle</button>
-    </div>
-</template>
-
-<script>
-import PxFlip from '../../components/PxFlip.vue';
-
-export default {
-    name: 'demo-px-flip',
-    components: { PxFlip },
-
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    data() {
-        return {
-            currentState: 'one',
-        };
-    },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    methods: {
-        toggleState() {
-            if (this.currentState == 'one') {
-                this.currentState = 'two';
-            } else {
-                this.currentState = 'one';
-            }
-        },
-    },
-};
-</script>
-
-<style lang="scss">
-@use '../../styles/px.scss' as *;
-.demo-px-flip {
-    padding: 5em;
-    &__container {
-        width: 200px;
-        height: 200px;
-        border: 1px solid black;
-
-        // prettier-ignore
-        @include grid-art(
-            (
-                '50%  | 50%  | ',
-                'red  | gold | 50%',
-                'blue | blue | 50%'
-            )
-        );
-
-        span {
-            width: 100%;
-            height: 0.5em;
-            background-color: currentColor;
-        }
-
-        &--state-one {
-        }
-
-        &--state-two {
-            // prettier-ignore
-            @include grid-art(
-                (
-                    '33%  | 67%  | ',
-                    'blue | red  | 50%',
-                    'gold | gold | 50%'
-                )
-            );
-        }
-    }
-
-    &__red {
-        background-color: tomato;
-        grid-area: red;
-    }
-    &__gold {
-        background-color: gold;
-        grid-area: gold;
-    }
-    &__blue {
-        background-color: lightblue;
-        grid-area: blue;
-    }
-}
-</style>

package/dev/demos/Demo-PxFloat.vue

@@ -1,105 +0,0 @@
-<!--
-    Describe this component...
--->
-<template>
-    <div :class="bem()">
-        <div :class="bem('dialog-buttons')">
-            <button :class="bem('button')" @click="visible = true">Toggle Dialog</button>
-
-            <px-float v-model:visible="visible" variant="dialog gray" :disablesScroll="false">
-                This is some content
-
-                <button :class="bem('button')" @click="innerVisible = true">Inner Toggle</button>
-
-                <!-- inner dialogs need to be used with a portal if they are contained -->
-                <px-float v-model:visible="innerVisible" variant="dialog blur">
-                    This is some inner content
-
-                    <button :class="bem('button')" @click="innerInnerVisible = true">
-                        Inner Inner Toggle
-                    </button>
-
-                    <!-- inner dialogs need to be used with a portal if they are contained -->
-                    <px-float v-model:visible="innerInnerVisible" variant="dialog blur gray">
-                        Wow this is deep
-                    </px-float>
-                </px-float>
-            </px-float>
-        </div>
-
-        <div :class="bem('position-buttons')">
-            <div :class="bem('button')" @click="showPosition('top')">Top</div>
-            <px-float
-                v-model:visible="positionVisible"
-                :placement="'top-start'"
-                :disablesScroll="false"
-                :offset="10"
-            >
-                Position: {{ position }}
-            </px-float>
-        </div>
-
-        <!-- mouse -->
-        <div :class="bem('button')" @click="showMouseFloat">Mouse</div>
-        <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>
-    </div>
-</template>
-
-<script>
-import PxFloat from '../../components/PxFloat.vue';
-export default {
-    name: 'demo-px-swiper',
-    components: { PxFloat },
-    // mixins: [ Mixin ],
-    // props: { a: { type: Boolean, default: false } },
-    data() {
-        return {
-            visible: false,
-            innerVisible: false,
-            innerInnerVisible: false,
-            position: 'top',
-            positionVisible: false,
-        };
-    },
-    // computed: {},
-    // watch: {},
-    // mounted() {},
-    methods: {
-        showPosition(pos) {
-            this.position = pos;
-            this.positionVisible = true;
-        },
-        showMouseFloat(e) {
-            this.$refs.mouseFloat.showAtCursor(e);
-        },
-    },
-};
-</script>
-
-<style lang="scss">
-@use '../../styles/px.scss' as *;
-
-.demo-px-swiper {
-    min-height: 500vh;
-    @include debug-zebra(rgba(black, 0.03), rgba(black, 0));
-    &__button {
-        position: relative;
-        margin-top: 20px;
-        margin-left: 20px;
-        @include button();
-        &:focus {
-            outline: 2px dashed accent();
-            outline-offset: 5px;
-        }
-    }
-    &__position-buttons {
-        @include center(0%, 50%);
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-    }
-}
-</style>