@thinkpixellab-public/px-vue 5.0.2 → 5.1.0

package/stories/PxAnimate.stories.js

@@ -1,184 +0,0 @@
-import PxAnimate from '@/components/PxAnimate.vue';
-import PxToggle from '@/components/PxToggle.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxAnimate',
-    component: PxAnimate,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxAnimate),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        animation: 'up:50px zoomin',
-        duration: 0.3,
-        checked: false,
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxAnimate, PxToggle },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                checked: args.checked,
-            };
-        },
-        template: `
-            <div class="story-flex-vert">
-                <div class="story-flex-top">
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="up3d" class="story-square" />
-                        </div>
-                        "up3d"
-                    </div>
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="down3d" class="story-square" />
-                        </div>
-                        "down3d"
-                    </div>
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="right3d"  class="story-square" />
-                        </div>
-                        "right3d"
-                    </div>
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="left3d" class="story-square" />
-                        </div>
-                        "left3d"
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="right3d xl" easing="easeOutCirc" :duration="1" class="story-square" />
-                        </div>
-                        "right3d xl"
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="right3d sm" class="story-square" />
-                        </div>
-                        "right3d sm"
-                    </div>
-
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="right3d:45deg down3d:30deg fade left:15%" class="story-square" />
-                        </div>
-                        "right3d lg fade"
-                    </div>
-
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="up" class="story-circle" />
-                        </div>
-                        "up"
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="fade" class="story-circle" :invert="true" />
-                        </div>
-                        "fade" (invert)
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="fade scale:1.5" class="story-circle" :invert="true" />
-                        </div>
-                        "fade scale" (invert)
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="down" class="story-circle" />
-                        </div>
-                        "down"
-                    </div>
-                </div>
-            </div>
-
-            <br>
-            <br>
-
-            <div class="story-flex-vert">
-                <div class="story-flex-top">
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="fade" class="story-circle" />
-                        </div>
-                        "fade"
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="zoomin" class="story-circle" />
-                        </div>
-                        "zoomin"
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="fadeout left up:50% zoom:-0.3" class="story-circle" />
-                        </div>
-                        mixed
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" animation="up:50% zoom:-0.3" :duration="1" easing="easeOutExpo" class="story-circle" />
-                        </div>
-                        duration, easing
-                    </div>
-
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate :enabled="false" v-bind="args" v-model:active="checked" animation="fade"  class="story-circle" />
-                        </div>
-                        disabled
-                    </div>
-
-                    <div class="story-flex-vert">
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxAnimate v-bind="args" v-model:active="checked" class="story-circle" animation="" />
-                        </div>
-                        no animation
-                    </div>
-
-
-                </div>
-                <PxToggle v-model:checked="checked" />
-            </div>
-            `,
-    }),
-};
-
-export const StartsLoaded = {
-    ...Basic,
-    args: { checked: true },
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxArrow.stories.js

@@ -1,74 +0,0 @@
-import PxArrow from '@/components/PxArrow.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxArrow,
-    argTypes: {
-        ...extractArgTypes(PxArrow),
-    },
-    args: {},
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxArrow },
-        setup() {
-            return { args };
-        },
-        template: `<PxArrow :style="{maxHeight: '10em'}" v-bind="args" />`,
-    }),
-};
-
-export const pointerAspect = {
-    ...Basic,
-    args: { pointerAspect: 0.5 },
-};
-
-export const pointerSize = {
-    ...Basic,
-    args: { pointerSize: 0.1 },
-};
-
-export const stemVisible = {
-    ...Basic,
-    args: { stemVisible: false },
-};
-
-export const angleNumeric = {
-    ...Basic,
-    args: { angle: 90 },
-};
-
-export const angleString = {
-    ...Basic,
-    args: { angle: 'down' },
-};
-
-export const strokeWidth = {
-    ...Basic,
-    args: { strokeWidth: 10 },
-};
-
-export const scaleStrokeWidth = {
-    ...Basic,
-    args: { strokeWidth: 5, scaleStrokeWidth: false },
-
-    render: (args, { argTypes }) => ({
-        components: { PxArrow },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div style="display: flex">
-                <PxArrow :style="{maxHeight: '2em'}" v-bind="args" :scaleStrokeWidth="true" />
-                <PxArrow :style="{maxHeight: '10em'}" v-bind="args" />
-            </div>
-            <br>
-            <div style="display: flex">
-                <PxArrow :style="{maxHeight: '2em'}" v-bind="args" :scaleStrokeWidth="false" />
-                <PxArrow :style="{maxHeight: '10em'}" v-bind="args" />
-            </div>
-        `,
-    }),
-};

package/stories/PxArrowScroller.stories.js

@@ -1,38 +0,0 @@
-import PxArrowScroller from '@/components/PxArrowScroller.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxArrowScroller,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxArrowScroller),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxArrowScroller },
-        setup() {
-            return { args };
-        },
-        template: `
-            <PxArrowScroller v-bind="args">
-                <div class="story-gradient" :style="{width: '200vw', height: '200px'}" />
-            </PxArrowScroller>`,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxAspect.stories.js

@@ -1,66 +0,0 @@
-import PxAspect from '@/components/PxAspect.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxAspect,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxAspect),
-    },
-    args: {
-        aspect: '16:9',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxAspect },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div :style="{height: '300px', width: '300px'}" class="story-bounds">
-                <PxAspect v-bind="args">
-                    <div class="story-fill" />
-                </PxAspect>
-            </div>
-        `,
-    }),
-};
-
-export const NumberTall = {
-    ...Basic,
-    args: { aspect: 9 / 16 },
-};
-
-export const AlignX = {
-    ...Basic,
-    args: { aspect: 9 / 16, alignX: 0 },
-};
-
-export const AlignY = {
-    ...Basic,
-    args: { alignY: 'start' },
-};
-
-export const Debug = {
-    ...Basic,
-    args: { debug: true },
-    render: (args, { argTypes }) => ({
-        components: { PxAspect },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div :style="{height: '300px', width: '300px'}" class="story-bounds">
-                <PxAspect v-bind="args" />
-            </div>
-        `,
-    }),
-};

package/stories/PxAutoClamp.stories.js

@@ -1,47 +0,0 @@
-import PxAutoClamp from '@/components/PxAutoClamp.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxAutoClamp,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxAutoClamp),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        text: 'Lorem aspernatur exercitationem alias. Eaque nemo nemo quis nisi hic aut iure accusantium assumenda et voluptatem exercitationem consequatur non repellat. Et nam doloribus nulla iusto qui reiciendis dignissimos reprehenderit eaque aspernatur. Odio aut similique nam ullam et cupiditate expedita dolores corporis libero eius odit debitis. Eius nisi nihil quis doloremque.',
-        heightShort: '50px',
-        heightTall: '90px',
-        width: '300px',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxAutoClamp },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div style="display: flex; gap: 20px;">
-                <div class="story-bounds" :style="{height: args.heightTall, width: args.width}">
-                    <PxAutoClamp :text="args.text" />
-                </div>
-                <div class="story-bounds" :style="{height: args.heightShort, width: args.width}">
-                    <PxAutoClamp :text="args.text" />
-                </div>
-            </div>
-        `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxBackgroundFader.stories.js

@@ -1,42 +0,0 @@
-import PxBackgroundFader from '@/components/PxBackgroundFader.vue';
-import PxButton from '@/components/PxButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxBackgroundFader',
-    component: PxBackgroundFader,
-
-    argTypes: {
-        ...extractArgTypes(PxBackgroundFader),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxBackgroundFader, PxButton },
-
-        data() {
-            return {
-                args,
-                currentBackground: 'story-bg-blue',
-            };
-        },
-
-        template: `
-        <div class="story-aspect-16-9" style="overflow: hidden;">
-            <PxBackgroundFader :background="currentBackground"></PxBackgroundFader>
-            <PxButton style="position: absolute; top: 1em; left: 1em; z-index: 1" @click="changeBackground">Fade</PxButton>
-        </div>
-        `,
-
-        methods: {
-            changeBackground() {
-                const backgrounds = 'story-bg-orange|story-bg-blue|story-bg-green|story-bg-gold'
-                    .split('|')
-                    .filter(c => c !== this.currentBackground);
-                this.currentBackground =
-                    backgrounds[Math.floor(Math.random() * backgrounds.length)];
-            },
-        },
-    }),
-};

package/stories/PxBalancedText.stories.js

@@ -1,66 +0,0 @@
-import PxBalancedText from '@/components/PxBalancedText.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-const title =
-    'Cras mattis consectetur purus sit amet fermentum maecenas. Faucibus mollis interdum.';
-const html =
-    '<h2>Cras mattis <em style="color:purple;">consectetur purus sit amet</em> fermentum maecenas. Faucibus mollis interdum.</h2>';
-const p2 =
-    'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui.';
-const p3 = 'Praesent commodo cursus magna, vel scelerisque nisl consectetur et.';
-
-export default {
-    component: PxBalancedText,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxBalancedText),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        html: '',
-        slotContent: `${title}`,
-        width: 500,
-        textAlign: 'left',
-        enabled: true,
-
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxBalancedText },
-        setup() {
-            return { args };
-        },
-        template: `<div class="story-bounds" :style="{width: cssPx(args.width)}" ><PxBalancedText :textAlign="args.textAlign" :enabled="args.enabled" :html="args.html">{{args.slotContent}}</PxBalancedText></div>`,
-    }),
-};
-
-export const Centered = {
-    ...Basic,
-    args: {
-        textAlign: 'center',
-    },
-};
-
-export const Disabled = {
-    ...Basic,
-    args: {
-        enabled: false,
-    },
-};
-
-export const HTML = {
-    ...Basic,
-    args: {
-        width: 700,
-        slotContent: '',
-        html: html,
-    },
-};

package/stories/PxButton.stories.js

@@ -1,83 +0,0 @@
-import PxButton from '@/components/PxButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxButton,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxButton),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        label: 'Click',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => {
-        return {
-            components: { PxButton },
-            setup() {
-                return { args };
-            },
-            template: `
-            <div class="story-flex">
-                <PxButton v-bind="args" />
-            </div>
-            `,
-        };
-    },
-};
-
-export const States = {
-    render: (args, { argTypes }) => {
-        return {
-            components: { PxButton },
-            setup() {
-                return { args };
-            },
-            template: `
-            <div class="story-flex">
-                <PxButton v-bind="args" />
-                <PxButton data-hover v-bind="args" label="Hover" />
-                <PxButton data-active v-bind="args" label="Active" />
-                <PxButton data-focus v-bind="args" label="Focus" />
-                <PxButton v-bind="args" label="Disabled" :disabled="true" />
-            </div>
-            `,
-        };
-    },
-};
-
-States.parameters = {
-    pseudo: {
-        hover: ['[data-hover]'],
-        active: ['[data-active]'],
-        focusVisible: ['[data-focus]'],
-    },
-};
-
-export const PillVariant = {
-    ...States,
-    args: { variant: 'default pill', label: 'Longer Label' },
-};
-
-export const OutlineVariant = {
-    ...States,
-    args: { variant: 'outline' },
-};
-
-export const OutlinePillVariant = {
-    ...States,
-    args: { variant: 'outline pill', label: 'Longer Label' },
-};
-
-export const BaseVariant = {
-    ...States,
-    args: { variant: 'base', label: 'Label' },
-};

package/stories/PxCalendar.stories.js

@@ -1,36 +0,0 @@
-import PxCalendar from '@/components/PxCalendar.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxCalendar',
-    component: PxCalendar,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxCalendar),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxCalendar },
-        setup() {
-            return { args };
-        },
-        template: `
-            <PxCalendar v-bind="args"></PxCalendar>`,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxCard.stories.js

@@ -1,31 +0,0 @@
-import PxCard from '@/components/PxCard.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxCard',
-    component: PxCard,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxCard),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxCard },
-        setup() {
-            return { args };
-        },
-        template: `
-            <PxCard v-bind="args"></PxCard>`,
-    }),
-};