@thinkpixellab-public/px-vue 3.0.1

package/components/PxVueTest.vue

@@ -0,0 +1,761 @@
+<!--
+
+-->
+<template>
+    <div class="px-vue-test">
+        <px-tester>
+            <px-test test-id="px-nine-grid" name="px-nine-grid" :size="{ h: 300 }">
+                <px-nine-grid
+                    slice="50"
+                    src="https://harnerdesigns.com/wp-content/uploads/2018/08/border.svg"
+                    :src-width="300"
+                    :src-height="300"
+                    :style="{ width: cssPcnt(1), height: cssPcnt(1) }"
+                />
+            </px-test>
+
+            <px-test test-id="px-card-grd" name="px-card-grid" :size="{ h: 300 }">
+                <px-card-grid />
+            </px-test>
+
+            <px-test test-id="px-fit" name="px-fit" :size="{ h: 300 }">
+                <px-fit :fits="['lg', 'md', 'sm']" :debug="false">
+                    <template #default="{ fit }">
+                        <div :class="`fit fit--${fit}`">
+                            <span v-if="fit == 'lg'">LARGE</span>
+                            <span v-if="fit == 'md'">MEDIUM</span>
+                            <span v-if="fit == 'sm'">SMALL</span>
+                            One Two Three Four Five Size Seven Eight Nine Ten
+                        </div>
+                    </template>
+                </px-fit>
+            </px-test>
+
+            <px-test test-id="px-table" name="px-table" :size="{ h: 300 }">
+                <!--
+                id: 'orange',
+                name: 'Orange',
+                color: 'orange',
+                deliciousNess: 8,
+                lastPurchase: new Date('2022-02-01T00:00:00.000Z'),
+
+                -->
+
+                <px-table
+                    :items="fruits"
+                    items-key-property="id"
+                    :columns="[
+                        {
+                            property: 'name',
+                            align: 'start',
+                        },
+                        {
+                            template: 'color',
+                            headerTemplate: 'color-header',
+                            label: 'COLOR',
+                            sortable: false,
+                        },
+                        {
+                            property: 'deliciousNess',
+                        },
+                        {
+                            property: 'description',
+                            overflow: 'ellipsis',
+                            align: 'start',
+                        },
+                        {
+                            property: 'lastPurchase',
+                        },
+                    ]"
+                >
+                    <!-- color column slot -->
+                    <template #color="{ item }">
+                        <div
+                            :style="{
+                                width: '1em',
+                                height: '1em',
+                                borderRadius: '50%',
+                                backgroundColor: item.color,
+                            }"
+                        />
+                    </template>
+
+                    <!-- color-header column header slot -->
+                    <template #color-header>
+                        <div
+                            :style="{
+                                width: '1em',
+                                height: '1em',
+                                borderRadius: '50%',
+                                background: 'silver',
+                            }"
+                        />
+                    </template>
+                </px-table>
+            </px-test>
+            <px-test test-id="px-validator" name="px-validator">
+                <px-flex vertical :style="{ maxWidth: '400px', margin: '0 auto' }" gap="1">
+                    <span>Has errors: {{ !allValid }}</span>
+
+                    <px-validator
+                        :value="validateThree"
+                        @valid-changed="onValidChanged"
+                        :rules="{
+                            apple: val => {
+                                if (val !== 'apple') {
+                                    return 'Must be apple';
+                                }
+                            },
+                        }"
+                    >
+                        <px-dropdown
+                            v-model="validateThree"
+                            tag="button"
+                            trigger="click"
+                            :items="fruits"
+                            items-value-property="id"
+                            items-label-property="name"
+                            items-key-property="id"
+                            placeholder="Select a fruit..."
+                        ></px-dropdown>
+                    </px-validator>
+
+                    PHONE
+                    <br />
+                    <px-validator
+                        :value="validateOne"
+                        rules="required phone"
+                        @valid-changed="onValidChanged"
+                    >
+                        <template #default="v">
+                            <px-textbox
+                                v-model="validateOne"
+                                :class="[v.class, v.requiredClass, v.violationClasses]"
+                            />
+                        </template>
+                    </px-validator>
+
+                    <px-validator
+                        :value="validateTwo"
+                        rules="required"
+                        @valid-changed="onValidChanged"
+                    >
+                        <template #default="v">
+                            <px-textbox
+                                v-model="validateTwo"
+                                :class="[v.class, v.requiredClass, v.violationClasses]"
+                            />
+                        </template>
+                    </px-validator>
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="px-progress-circle" name="px-progress-circle">
+                <px-progress-circle
+                    :progress="0.5"
+                    :stroke-width="4"
+                    style="width: 60px; color: black"
+                />
+            </px-test>
+
+            <px-test test-id="px-aspect" name="px-aspect">
+                <px-aspect :debug="true">
+                    <div :style="{ backgroundColor: 'gold' }">
+                        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere
+                        consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat
+                        porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel
+                        augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
+                        ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Duis
+                        mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia
+                        odio sem nec elit.
+                    </div>
+
+                    <img
+                        :style="{ opacity: 0.5 }"
+                        src="https://images.unsplash.com/photo-1650923500748-eee80ee6e7d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80"
+                    />
+                </px-aspect>
+            </px-test>
+
+            <px-test test-id="px-swiper-cards" name="Card Swiper">
+                <div>
+                    <px-swiper>
+                        <px-swiper-slide>
+                            <px-card>This is some content</px-card>
+                        </px-swiper-slide>
+                        <px-swiper-slide>
+                            <px-card>This is some content</px-card>
+                        </px-swiper-slide>
+                        <px-swiper-slide>
+                            <px-card>This is some content</px-card>
+                        </px-swiper-slide>
+                    </px-swiper>
+                </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> -->
+            </px-test>
+
+            <px-test test-id="px-date-picker" name="px-date-picker">
+                <px-flex vertical align="center" gap="1">
+                    <span>Selected Date: {{ currentDateNull }}</span>
+                    <px-date-picker mode="textbox" v-model="currentDateNull" />
+                    <px-date-picker mode="textbox" clock v-model="currentDateNull" />
+                    <px-date-picker v-model="currentDateNull" />
+                    <px-date-picker time v-model="currentDateNull" />
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="px-clock" name="px-clock">
+                <px-clock v-model="currentDate" />
+                Selected Date: {{ currentDate }}
+            </px-test>
+
+            <px-test test-id="px-calendar" name="px-calendar">
+                <px-calendar v-model="currentDate" />
+                Selected Date: {{ currentDate }}
+            </px-test>
+
+            <px-test test-id="single-vs-multiple" name="Single vs Multiple Selection">
+                <px-flex align="center" gap="1">
+                    <!-- dynamic select -->
+
+                    <px-toggle-button-list
+                        :multi-select="supportsMultiSelect"
+                        :items="fruits"
+                        items-key-property="id"
+                        items-value-property="id"
+                        items-label-property="name"
+                        v-model="currentFruitOrFruits"
+                    ></px-toggle-button-list>
+
+                    <px-toggle v-model="supportsMultiSelect">Multi-select</px-toggle>
+                    <span>{{ currentFruitOrFruits }}</span>
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="px-textbox" name="px-textbox">
+                <px-flex :vertical="true" :gap="1">
+                    <div>currentText: {{ currentText }}</div>
+
+                    <px-textbox v-model="currentText" placeholder="Say what you want..." />
+
+                    <px-textbox
+                        multiline
+                        v-model="currentText"
+                        rows="5"
+                        placeholder="Say it longer..."
+                    />
+
+                    <px-textbox type="password" />
+                    <px-textbox :value="'hello@thinkpixellab.com'" type="email" />
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="px-dropdown" name="px-dropdown">
+                <px-flex gap="1" align="center" justify="center">
+                    <px-dropdown
+                        v-model="currentFruit"
+                        tag="button"
+                        trigger="click"
+                        :items="fruits"
+                        items-value-property="id"
+                        items-label-property="name"
+                        items-key-property="id"
+                        placeholder="Select a fruit..."
+                    >
+                        Button Label
+
+                        <template #popup>
+                            <div class="popup-menu">
+                                <button>Menu Option 1</button>
+                                <button>Menu Option 2</button>
+                            </div>
+                        </template>
+                    </px-dropdown>
+                    <span>{{ currentFruit }}</span>
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="px-popup" name="px-popup">
+                <px-flex vertical gap="1" align="center">
+                    <px-popup tag="button" trigger="click">
+                        Click This Button
+
+                        <template #popup>
+                            <px-flex vertical class="popup-menu">
+                                <button>Option 1</button>
+                                <button>Option 2</button>
+                                <button>Option 3</button>
+                                <button>Option 4</button>
+                            </px-flex>
+                        </template>
+                    </px-popup>
+
+                    <px-popup tag="button" trigger="hover">
+                        Hover Over This
+
+                        <template #popup>
+                            <px-flex vertical class="popup-menu">
+                                <button>Option 1</button>
+                                <button>Option 2</button>
+                                <button>Option 3</button>
+                                <button>Option 4</button>
+                            </px-flex>
+                        </template>
+                    </px-popup>
+
+                    <px-popup tag="button" trigger="contextmenu">
+                        Context Menu
+
+                        <template #popup>
+                            <px-flex vertical class="popup-menu">
+                                <button>Option 1</button>
+                                <button>Option 2</button>
+                                <button>Option 3</button>
+                                <button>Option 4</button>
+                            </px-flex>
+                        </template>
+                    </px-popup>
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="px-swiper" name="px-swiper" :size="{ w: 1440 }">
+                <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>
+            </px-test>
+
+            <px-test test-id="px-icon-button" name="px-icon-button">
+                <px-flex gap="3" justify="center">
+                    <px-icon-button :src="require('../assets/test/trash.svg')" />
+
+                    <px-icon-button :src="require('../assets/test/trash.svg')" variant="basic" />
+                    <px-icon-button
+                        :src="require('../assets/test/trash.svg')"
+                        variant="basic accent-hover"
+                    />
+                    <px-icon-button
+                        :src="require('../assets/test/trash.svg')"
+                        variant="default accent-hover"
+                    />
+                    <px-icon v-if="false" :src="require('../assets/test/trash.svg')" />
+                    <px-svg v-if="false" :src="require('../assets/test/trash.svg')" />
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="toggle-button-list" name="px-toggle-button-list">
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                />
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                    :multi-select="true"
+                    @change="toggleButtonChange"
+                />
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                    variant="radio"
+                />
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                    variant="vertical radio"
+                />
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                    variant="default connected"
+                />
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                >
+                    <template v-slot:item="{ item, checked }">
+                        <span
+                            :style="{
+                                width: '0.5em',
+                                height: '0.5em',
+                                backgroundColor: item.color,
+                                display: 'inline-block',
+                                transform: checked ? 'scale(1.5)' : null,
+                            }"
+                        ></span>
+                        {{ item.name }}
+                    </template>
+                </px-toggle-button-list>
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                    variant="outline"
+                />
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                    variant="connected outline"
+                />
+
+                <br />
+
+                <div style="max-width: 400px">
+                    <px-toggle-button-list
+                        :items="fruits"
+                        items-value-property="id"
+                        items-label-property="name"
+                        items-key-property="id"
+                        variant="default wrap"
+                    />
+                </div>
+
+                <br />
+
+                <px-toggle-button-list
+                    :items="fruits"
+                    items-value-property="id"
+                    items-label-property="name"
+                    items-key-property="id"
+                    variant="tags wrap"
+                    :multi-select="true"
+                />
+            </px-test>
+
+            <px-test test-id="px-flex" name="px-flex">
+                <px-flex gap="2" class="flex-test" justify="center">
+                    <px-flex :vertical="true" class="flex-test" gap="1">
+                        <div class="flex-item"></div>
+                        <div class="flex-item flex-item--small"></div>
+                        <div class="flex-item"></div>
+                    </px-flex>
+
+                    <px-flex :vertical="true" :reverse="true" class="flex-test" gap="1">
+                        <div class="flex-item"></div>
+                        <div class="flex-item flex-item--small"></div>
+                        <div class="flex-item"></div>
+                    </px-flex>
+
+                    <px-flex align-y="center" :vertical="false" class="flex-test" gap="20px">
+                        <div class="flex-item"></div>
+                        <div class="flex-item flex-item--small"></div>
+                        <div class="flex-item"></div>
+                    </px-flex>
+
+                    <px-flex class="flex-test" :reverse="true" gap="0.5">
+                        <div class="flex-item"></div>
+                        <div class="flex-item flex-item--small"></div>
+                        <div class="flex-item"></div>
+                    </px-flex>
+                </px-flex>
+            </px-test>
+
+            <px-test test-id="px-toggle" name="px-toggle">
+                <px-toggle>Test</px-toggle>
+            </px-test>
+
+            <px-test test-id="px-toggle-button" name="px-toggle">
+                <div>
+                    <px-toggle-button>Test</px-toggle-button>
+                </div>
+            </px-test>
+        </px-tester>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+import { PxTester, PxTest } from '@thinkpixellab/px-vue-tester';
+import PxToggle from './PxToggle.vue';
+import PxToggleButton from './PxToggleButton.vue';
+import PxFlex from './PxFlex.vue';
+import PxToggleButtonList from './PxToggleButtonList.vue';
+import PxIconButton from './PxIconButton.vue';
+import PxIcon from './PxIcon.vue';
+import PxSvg from './PxSvg.vue';
+import PxSwiper from './PxSwiper.vue';
+import PxSwiperSlide from './PxSwiperSlide.vue';
+import PxDropdown from './PxDropdown.vue';
+import PxPopup from './PxPopup.vue';
+import PxTextbox from './PxTextbox.vue';
+import PxCalendar from './PxCalendar.vue';
+import PxClock from './PxClock.vue';
+import PxDatePicker from './PxDatePicker.vue';
+import PxCard from './PxCard.vue';
+import PxAspect from './PxAspect.vue';
+import PxProgressCircle from './PxProgressCircle.vue';
+import PxValidator from './PxValidator.vue';
+import PxTable from './PxTable.vue';
+import PxFit from './PxFit.vue';
+import PxCardGrid from './PxCardGrid.vue';
+import PxNineGrid from './PxNineGrid.vue';
+
+export default {
+    name: 'px-vue-test',
+    components: {
+        PxTester,
+        PxTest,
+        PxToggle,
+        PxToggleButton,
+        PxFlex,
+        PxToggleButtonList,
+        PxIconButton,
+        PxIcon,
+        PxSvg,
+        PxSwiper,
+        PxSwiperSlide,
+        PxPopup,
+        PxDropdown,
+        PxTextbox,
+        PxCalendar,
+        PxClock,
+        PxDatePicker,
+        PxCard,
+        PxAspect,
+        PxProgressCircle,
+        PxValidator,
+        PxTable,
+        PxFit,
+        PxCardGrid,
+        PxNineGrid,
+    },
+
+    data() {
+        return {
+            validateOne: null,
+            validateTwo: null,
+            validateThree: null,
+            validation: {},
+
+            currentDate: new Date(),
+            currentDateNull: null,
+            supportsMultiSelect: false,
+            currentFruitOrFruits: null,
+            currentFruits: ['orange', 'apple'],
+            currentFruit: 'orange',
+            fruits: [
+                {
+                    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'),
+                },
+                {
+                    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'),
+                },
+                {
+                    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'),
+                },
+                {
+                    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'),
+                },
+                {
+                    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'),
+                },
+                {
+                    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'),
+                },
+            ],
+            currentText: 'Howdy',
+        };
+    },
+    computed: {
+        allValid() {
+            return Object.values(this.validation).reduce((acc, val) => {
+                return acc && val;
+            }, true);
+        },
+    },
+    methods: {
+        toggleButtonChange(nv) {
+            console.log(`selectedKeys: 👉 ${JSON.stringify(nv, null, 4)}`);
+        },
+        onValidChanged(isValid, id) {
+            this.$set(this.validation, id, isValid);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-vue-test {
+    .fit {
+        white-space: nowrap;
+        color: black;
+    }
+
+    .fit--sm {
+        font-size: 12px;
+        color: red;
+    }
+
+    .fit--md {
+        font-size: 18px;
+        color: purple;
+    }
+
+    .fit--lg {
+        font-size: 24px;
+        color: blue;
+    }
+
+    .swiper-max-width {
+        max-width: 800px;
+        margin: 0 auto;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+    .swiper-img {
+        width: 100%;
+        font-size: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+    .flex-item {
+        background-color: accent();
+        width: 80px;
+        height: 80px;
+        border-radius: 10px;
+        &--small {
+            width: 50px;
+            height: 50px;
+        }
+
+        &:nth-child(2) {
+            background-color: accent(2);
+        }
+        &:nth-child(3) {
+            background-color: accent(4);
+        }
+    }
+    .flex-test {
+        border: 2px dashed gray();
+        padding: 2px;
+        border-radius: 12px;
+    }
+
+    // custom toggle button variant
+    .px-toggle-button-list--tags {
+        .px-toggle-button-list__button {
+            @include button(
+                (
+                    font-size: fs(xs),
+                    background-color: #f6c268,
+                    border-radius: 2px,
+                    min-height: 2em,
+                    min-width: 0,
+                    padding: 0 0.5em,
+                    checked: (
+                        background-color: accent(-2),
+                        color: white,
+                    ),
+                )
+            );
+        }
+    }
+}
+</style>