@thinkpixellab-public/px-vue 5.0.2 → 5.1.0

package/stories/PxImage.stories.js

@@ -1,113 +0,0 @@
-import PxImage from '@/components/PxImage.vue';
-import PxButton from '@/components/PxButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import px01jpg from '@/stories/assets/px-01.jpg';
-import px02jpg from '@/stories/assets/px-02.jpg';
-import px03jpg from '@/stories/assets/px-03.jpg';
-import px04jpg from '@/stories/assets/px-04.jpg';
-
-const localImages = [px01jpg, px02jpg, px03jpg, px04jpg];
-
-const largeImages = [
-    'https://images.unsplash.com/photo-1738969773091-abcf274f7e0a?q=80&w=3000',
-    'https://images.unsplash.com/photo-1738940251292-49709608c8aa?q=80&w=5970',
-    'https://images.unsplash.com/photo-1551692554-d83872f34d55?q=80&w=3226',
-];
-
-const images = localImages;
-
-// REFERENCE:
-//
-// https://storybook.js.org/docs/get-started/frameworks/vue3-vite?renderer=vue
-// https://storybook.js.org/docs/vue/essentials/controls#annotation?renderer=vue
-// https://storybook.js.org/docs/vue/api/argtypes#available-properties?renderer=vue
-//
-// See preview.scss for helper styles.
-
-export default {
-    title: 'PxImage',
-    component: PxImage,
-
-    // decorators: [ ... ],
-
-    // parameters: {
-    //     layout: 'fullscreen', // centered, fullscreen, padded (default)
-    // },
-
-    argTypes: {
-        ...extractArgTypes(PxImage),
-    },
-
-    args: {
-        fit: 'contain',
-        position: null,
-        cacheBuster: 'cb',
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxImage, PxButton },
-
-        data() {
-            return {
-                args,
-                currentSourceIndex: -1,
-            };
-        },
-
-        template: `
-
-            <div class="story-aspect-16-9" style="overflow: hidden;">
-                <PxImage :src="currentSrc" v-bind="args"></PxImage>
-            </div>
-            <br>
-            <p style="max-width: 50em">NOTE: when running with cache disabled, cross fades may appear jumpy because the image will be reloaded while it's fading in. To allow easier visualization of loading (without cache disabled), we a cache buster to the urls when testing (so don't run with cache disabled).</p>
-            <div style="display: flex; gap: 1em;">
-                <PxButton @click="nextSource">Next Source</PxButton>
-                <PxButton @click="clearSource">Clear</PxButton>
-                <PxButton @click="invalidSource">Error</PxButton>
-            </div>
-
-        `,
-
-        computed: {
-            currentSrc() {
-                if (this.currentSourceIndex == -999) {
-                    return 'https://thisurldoesnotexist.com/faker-mc-fakerson-face.jpg';
-                }
-
-                if (this.currentSourceIndex == -1) {
-                    return null;
-                }
-
-                const src = images[this.currentSourceIndex];
-                const sep = src.includes('?') ? '&' : '?';
-                const cacheBuster = `${sep}${this.cacheBuster}=${Date.now()}`;
-
-                return src + cacheBuster;
-            },
-        },
-        methods: {
-            nextSource() {
-                const current = Math.max(this.currentSourceIndex, -1);
-                this.currentSourceIndex = (current + 1) % images.length;
-            },
-            clearSource() {
-                this.currentSourceIndex = -1;
-            },
-            invalidSource() {
-                this.currentSourceIndex = -999;
-            },
-        },
-    }),
-};
-
-// export const CovertBottomRight = {
-//     ...Basic,
-//     args: { fit: 'cover', position: 'bottom right' },
-// };
-
-// export const Advanced = {
-//     ...Basic,
-// };

package/stories/PxLabeledInput.stories.js

@@ -1,44 +0,0 @@
-// Reference:
-// https://storybook.js.org/blog/storybook-7-docs/
-// https://storybook.js.org/docs/7.5/writing-docs/autodocs
-
-import PxLabeledInput from '@/components/PxLabeledInput.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxLabeledInput,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxLabeledInput),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        label: 'My Input',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxLabeledInput },
-        setup() {
-            return { args };
-        },
-        template: `
-        <PxLabeledInput v-bind="args">
-            <template #default="{id}">
-                <input :id="id" type="text" />
-            </template>
-        </PxLabeledInput>`,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxMeasureContainer.stories.js

@@ -1,50 +0,0 @@
-import PxMeasureContainer from '@/components/PxMeasureContainer.vue';
-import PxResizer from '@/components/PxResizer.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxMeasureContainer',
-    component: PxMeasureContainer,
-
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxMeasureContainer),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-        debug: true,
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxMeasureContainer, PxResizer },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                size: { width: null, height: null },
-            };
-        },
-        template: `
-            <PxResizer :initialWidth="300" :initialHeight="300">
-                <PxMeasureContainer v-bind="args" >
-                    <div class="story-aspect-16-9" />
-                </PxMeasureContainer>
-
-            </PxResizer>
-        `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxMenu.stories.js

@@ -1,99 +0,0 @@
-import { PxMenu, contextMenuDirective } from '@/components/PxMenu.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxMenu',
-    component: PxMenu,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxMenu),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxMenu },
-        directives: {
-            contextMenu: contextMenuDirective,
-            menu: {
-                bind(el, binding, vnode) {
-                    console.log('bind');
-                },
-                mounted() {
-                    console.log('mounted');
-                },
-            },
-        },
-        setup() {
-            return { args };
-        },
-        template: `
-
-        <div>
-        <px-menu ref="mymenu" :items="[
-            {
-                id: 'copy',
-
-                label: 'Copy',
-
-                // function with a single arg which will be the context from the directive
-                handler: () => { console.log('copy') },
-
-                // visible / enabled can be a function or bool
-                enabled: (ctx) => ctx.isSomething,
-                visible: true
-            },
-            {
-                id: 'paste',
-
-                label: 'Paste (Disabled)',
-
-                // function with a single arg which will be the context from the directive
-                handler: (ctx) => { console.log('paste') },
-
-                // visible / enabled can be a function or bool
-                disabled: (ctx) => {return true},
-                visible: true
-            },
-            {
-               separator: true
-            },
-            {
-                id: 'advanced',
-                label: 'Advanced',
-
-                // TODO
-
-                items: [
-                    {
-                        id: 'advanced-copy',
-                        label: 'Advanced Copy',
-                        handler: () => { console.log('advanced copy') },
-                    },
-
-                ],
-            },
-        ]" />
-
-        <div v-context-menu="'mymenu'" >
-            Right Click Me!
-        </div>
-
-        </div>
-        `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxPivot.stories.js

@@ -1,42 +0,0 @@
-import PxPivot from '@/components/PxPivot.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { fruits, fruitsPlus } from '@/storybook/sb-sampledata.js';
-
-export default {
-    component: PxPivot,
-    argTypes: {
-        ...extractArgTypes(PxPivot),
-    },
-    args: {
-        items: fruits,
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        setup() {
-            return { args };
-        },
-        components: { PxPivot },
-        template: `<PxPivot v-bind="args" />`,
-    }),
-};
-
-export const Scrolls = {
-    render: (args, { argTypes }) => ({
-        setup() {
-            return { args };
-        },
-        components: { PxPivot },
-        template: `<div style="max-width: 800px; overflow:hidden; margin: 0 auto;"><PxPivot v-bind="args" /></div>`,
-    }),
-    args: {
-        items: fruitsPlus,
-    },
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxPopupButton.stories.js

@@ -1,69 +0,0 @@
-import PxPopupButton from '@/components/PxPopupButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxPopupButton',
-    component: PxPopupButton,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxPopupButton),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxPopupButton },
-        setup() {
-            return { args };
-        },
-        template: `
-            <PxPopupButton v-bind="args">
-                <template #default>
-                    Open Popup
-                </template>
-                <template #popup>
-                    <div class="story-popup">
-                        Popup content goes here!
-                    </div>
-                </template>
-
-            </PxPopupButton>`,
-    }),
-};
-
-export const Tooltip = {
-    render: (args, { argTypes }) => ({
-        components: { PxPopupButton },
-        setup() {
-            return { args };
-        },
-        template: `
-        <div style="padding: 50px 20px">
-            <PxPopupButton v-bind="args" trigger="hover" placement="top" tag="div">
-                <template #default>
-                    Open Popup
-                </template>
-                <template #popup>
-                    <div class="story-tooltip">
-                        Tooltip content!
-                    </div>
-                </template>
-
-            </PxPopupButton>
-        </div>`,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxProgressCircle.stories.js

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

package/stories/PxQrCode.stories.js

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

package/stories/PxRadioButton.stories.js

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

package/stories/PxResizer.stories.js

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

package/stories/PxScrubber.stories.js

@@ -1,58 +0,0 @@
-import PxScrubber from '@/components/PxScrubber.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxScrubber',
-    component: PxScrubber,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxScrubber),
-    },
-    props: {},
-    args: {
-        parentStyle: {},
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxScrubber },
-        data() {
-            return {
-                localProgress: 0.66,
-                parentStyle: {
-                    ...args.parentStyle,
-                },
-            };
-        },
-        setup() {
-            return { args };
-        },
-        template: `
-        <div :style="parentStyle">
-            <PxScrubber v-bind="args" v-model:progress="localProgress" style="width: 600px" ></PxScrubber>
-        </div>`,
-    }),
-};
-
-export const CustomVars = {
-    ...Basic,
-    args: {
-        parentStyle: {
-            '--px-scrubber-bg': 'lightblue',
-            '--px-scrubber-progress-bg': 'tomato',
-            '--px-scrubber-preview-bg': 'yellowgreen',
-        },
-    },
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxSideDrawer.stories.js

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