@thinkpixellab-public/px-vue 5.0.3 → 5.2.0

package/stories/PxExpander.stories.js

@@ -1,33 +0,0 @@
-import PxExpander from '@/components/PxExpander.vue';
-// import { within } from '@storybook/testing-library';
-
-export default {
-    component: PxExpander,
-    args: {
-        expanded: true,
-    },
-};
-
-const Template = args => ({
-    components: { PxExpander },
-    template: '<PxExpander  v-bind="args" v-on="$props">This is content1.</PxExpander>',
-});
-
-export const Default = {
-    render: (args, { argTypes }) => ({
-        components: { PxExpander },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="story-bounds">
-                <PxExpander v-bind="args" v-on="$props">
-                    <div class="story-circle"></div>
-                </PxExpander>
-            </div>
-        `,
-        args: {
-            expanded: true,
-        },
-    }),
-};

package/stories/PxFit.stories.js

@@ -1,40 +0,0 @@
-import PxFit from '@/components/PxFit.vue';
-import PxResizer from '@/components/PxResizer.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxFit',
-    component: PxFit,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxFit),
-    },
-    args: {
-        debug: false,
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxFit, PxResizer },
-        setup() {
-            return { args };
-        },
-        template: `
-        <PxResizer :initialWidth="600" :initialHeight="200" allowResize="x" overlayVisible="always">
-            <PxFit v-bind="args">
-                <template #default="{ fit }">
-                    <div>
-                        <div v-if="fit == 'lg'" class="story-fill story-center" style="width: 600px">lg (600px)</div>
-                        <div v-if="fit == 'md'" class="story-fill story-center" style="width: 400px">md (400px)</div>
-                        <div v-if="fit == 'sm'" class="story-fill story-center" style="width: 200px">sm (200px)</div>
-                    </div>
-                </template>
-            </PxFit>
-        </PxResizer>`,
-    }),
-};

package/stories/PxFlex.stories.js

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

package/stories/PxFlip.stories.js

@@ -1,51 +0,0 @@
-import PxFlip from '@/components/PxFlip.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxFlip',
-    component: PxFlip,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxFlip),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxFlip },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                state: 'blue',
-            };
-        },
-        template: `
-
-            <PxFlip :states="['blue', 'orange']" :current="state">
-                <template #default="{state}">
-                    <div data-flip :class="'story-state-' + state">
-                    {{state}}
-                    </div>
-                </template>
-            </PxFlip>
-            <br>
-            <button @click="state = state == 'blue' ? 'orange' : 'blue'">Toggle State</button>
-        `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxFloat.stories.js

@@ -1,147 +0,0 @@
-import PxFloat from '@/components/PxFloat.vue';
-import PxToggleButton from '@/components/PxToggleButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxFloat,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // decorators: [
-    //     (story, context) => {
-    //         const [args, updateArgs, resetArgs] = useArgs();
-
-    //         return {
-    //             components: { PxToggleButton },
-    //             data() {
-    //                 return {
-    //                     isVisible: args.visible,
-    //                 };
-    //             },
-    //             watch: {
-    //                 isVisible(nv) {
-    //                     updateArgs({ ...args, visible: nv });
-    //                 },
-    //             },
-
-    //             template:
-    //                 '<div><PxToggleButton label="Visible" labelUnchecked="Hidden" v-model:checked="isVisible" /><story /></div>',
-    //         };
-    //     },
-    // ],
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxFloat),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        portalEnabled: true,
-        variant: 'default',
-        keepInDom: true,
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => {
-        return {
-            components: { PxFloat, PxToggleButton },
-            setup() {
-                return { args };
-            },
-            data() {
-                return {
-                    popupVisible: args.visible,
-                };
-            },
-            template: `
-                <PxToggleButton label="Toggle Visible" v-model:checked="popupVisible" />
-                <PxFloat v-bind="args" v-model:visible="popupVisible"><div style="max-width:50em;">Laudantium totam dicta reiciendis quod iste sunt rerum repellendus eum adipisci et consequatur quae dolorem eos. Culpa sint sequi autem optio atque. Sit eum eum veniam aut. Illo eum eum dicta dicta ut nobis natus. Similique ea sit quo dolorum ullam qui iste. Consequatur doloribus esse et qui voluptas magnam qui est eos et similique vel libero in fugit.</div></PxFloat>
-            `,
-        };
-    },
-};
-
-export const DialogVariant = {
-    ...Basic,
-    args: { variant: 'dialog' },
-};
-
-export const MessageVariant = {
-    ...Basic,
-    args: { variant: 'message' },
-};
-
-export const MenuVariant = {
-    ...Basic,
-    args: { variant: 'menu' },
-};
-
-export const BlurVariant = {
-    ...Basic,
-    args: { variant: 'centered dialog blur' },
-};
-
-export const GrayVariant = {
-    ...Basic,
-    args: { variant: 'centered dialog gray' },
-};
-
-export const CenteredVariant = {
-    ...Basic,
-    args: { variant: 'centered' },
-};
-
-export const SmVariant = {
-    ...Basic,
-    args: { variant: 'dialog sm' },
-};
-
-export const MdVariant = {
-    ...Basic,
-    args: { variant: 'dialog md' },
-};
-
-export const LgVariant = {
-    ...Basic,
-    args: { variant: 'dialog lg' },
-};
-
-export const NoTransition = {
-    ...Basic,
-    args: { variant: 'dialog', transitionName: '' },
-};
-
-export const FloatInFloat = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => {
-        return {
-            components: { PxFloat, PxToggleButton },
-            setup() {
-                return { args };
-            },
-            data() {
-                return {
-                    popupVisible: args.visible,
-                    innerPopupVisible: false,
-                };
-            },
-            template: `
-                <PxToggleButton label="Toggle Visible" v-model:checked="popupVisible" />
-                <PxFloat v-bind="args" v-model:visible="popupVisible">
-                    <div style="max-width:50em;">
-                        <PxToggleButton label="Toggle Inner Visible" v-model:checked="innerPopupVisible" />
-                        <PxFloat v-bind="args" v-model:visible="innerPopupVisible">
-                            <div style="max-width:50em;">
-                                This is the inner popup
-                            </div>
-                        </PxFloat>
-                    </div>
-                </PxFloat>
-                <div class="story-gradient" :style="{width: '20vw', height: '300vh', textAlign: 'center', padding: '1em', margin: '1em auto'}">SCROLL<br>CHECK</div>
-            `,
-        };
-    },
-};

package/stories/PxGsapScrubber.stories.js

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

package/stories/PxIcon.stories.js

@@ -1,189 +0,0 @@
-import PxIcon from '@/components/PxIcon.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { svgArrow, svgCheck, svgX } from '../utils/svgIcons';
-
-import smileSvg from '@/assets/feather/smile.svg';
-import arrowRightSvg from '@/assets/feather/arrow-right.svg';
-import databaseSvg from '@/assets/feather/database.svg';
-import boxSvg from '@/assets/feather/box.svg';
-
-export default {
-    component: PxIcon,
-    argTypes: {
-        ...extractArgTypes(PxIcon),
-        src: { control: 'select', options: [smileSvg, boxSvg, databaseSvg] },
-    },
-    args: {
-        src: smileSvg,
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxIcon },
-        setup() {
-            return { args };
-        },
-        template: `<PxIcon v-bind="args" />`,
-    }),
-};
-
-export const NoSrc = {
-    ...Basic,
-    args: { src: null },
-};
-
-export const Events = {
-    render: (args, { argTypes }) => ({
-        components: { PxIcon },
-        data() {
-            return { opacity: 0.25 };
-        },
-        setup() {
-            return { args };
-        },
-        template: `<PxIcon v-bind="args" :style="{opacity}" @mouseenter="opacity = 1" @mouseleave="opacity = 0.25" />`,
-    }),
-};
-export const StrokeWidth = {
-    ...Basic,
-    args: { strokeWidth: 4 },
-};
-
-export const SizeAndStrokeWidth = {
-    ...Basic,
-    args: { size: '8em', strokeWidth: 1 },
-};
-
-export const Spacing = {
-    ...Basic,
-    render: (args, { argTypes }) => ({
-        components: { PxIcon },
-        setup() {
-            return { args };
-        },
-        template: `
-        <div>
-            <span>This icon (<PxIcon v-bind="args" />) is normal spacing</span> and
-            <span>this icon (<PxIcon v-bind="args" spacing="0.5" />) has extra.</span>
-        </div>
-    `,
-    }),
-};
-
-export const Offset = {
-    ...Basic,
-    render: (args, { argTypes }) => ({
-        components: { PxIcon },
-        setup() {
-            return { args };
-        },
-        template: `
-        <div>
-            <span>This icon (<PxIcon v-bind="args" />) is normal offset</span> and
-            <span>this icon (<PxIcon v-bind="args" offset="0.2" />) is shifted down.</span>
-        </div>
-    `,
-    }),
-};
-
-export const StrokeWidthScales = {
-    ...Basic,
-    render: (args, { argTypes }) => ({
-        components: { PxIcon },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                arrowRightSvg,
-
-                arrowUp: svgArrow({ angle: 'up' }),
-            };
-        },
-        template: `
-        <div>
-            <PxIcon :src="arrowRightSvg" :strokeWidthScales="false" strokeWidth="2" size="5" />
-            <PxIcon :src="arrowRightSvg" :strokeWidthScales="true" strokeWidth="2" size="5" />
-            <PxIcon :src="arrowUp" :strokeWidthScales="false" strokeWidth="2" size="5" />
-            <PxIcon :src="arrowUp" :strokeWidthScales="true" strokeWidth="2" size="5" />
-        </div>
-    `,
-    }),
-};
-
-export const SvgSource = {
-    ...Basic,
-    args: {
-        strokeWidth: 2,
-        size: '10em',
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxIcon },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                arrowRightSvg,
-                //longArrowRight: svgArrow({ angle: 45, pointerSize: 0.2 }),
-                //longArrow45: svgArrow({ angle: 10, pointerSize: 0.2 }),
-                arrowAngle: svgArrow({ angle: 45 }),
-                arrowUp: svgArrow({ angle: 'up' }),
-                arrowRight: svgArrow({ angle: 'right' }),
-                longArrowUp: svgArrow({ angle: 'up', pointerSize: 0.1 }),
-                chevron: svgArrow({ angle: 'right', chevron: true }),
-                check: svgCheck(),
-                x: svgX(),
-            };
-        },
-        methods: {
-            svgArrow,
-        },
-        template: `
-    <div>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="svgArrow({angle: 45})" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="svgArrow({angle: 'right', pointerSize: 0.2})" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="svgArrow({angle: 'right', chevron: true, pointerSize: 0.2})" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="svgArrow({angle: 'right', chevron: true, pointerSize: 0.5})" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="arrowUp" sizeBias="height" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="arrowRight" sizeBias="height" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="chevron" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="longArrowUp" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="check" />
-        </span>
-
-        <span class="story-inline-border">
-            <PxIcon v-bind="args" :src="x" />
-        </span>
-
-    </div>
-    `,
-    }),
-};

package/stories/PxIconButton.stories.js

@@ -1,87 +0,0 @@
-import PxIconButton from '@/components/PxIconButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { svgArrow } from '../utils/svgIcons';
-import smileSvg from '@/assets/feather/smile.svg';
-import playSvg from '@/assets/feather/play.svg';
-import pauseSvg from '@/assets/feather/pause.svg';
-
-export default {
-    title: 'PxIconButton',
-    component: PxIconButton,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxIconButton),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        icon: smileSvg,
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxIconButton },
-        setup() {
-            return { args };
-        },
-        methods: {
-            svgArrow,
-        },
-        template: `
-            <PxIconButton v-bind="args"></PxIconButton>`,
-    }),
-};
-
-export const SrcProp = {
-    ...Basic,
-    args: {
-        icon: null,
-        src: playSvg,
-    },
-};
-
-export const Toggle = {
-    ...Basic,
-    args: {
-        icon: playSvg,
-        iconChecked: pauseSvg,
-        toggles: true,
-    },
-};
-
-export const SrcToggle = {
-    ...Basic,
-    args: {
-        icon: null,
-        iconChecked: null,
-        src: playSvg,
-        srcChecked: pauseSvg,
-        toggles: true,
-    },
-};
-
-export const CheckedInherits = {
-    ...Basic,
-    args: {
-        icon: { size: 4, src: playSvg, strokeWidthScales: false, strokeWidth: 2 },
-        iconChecked: pauseSvg,
-        iconCheckedInherits: true,
-        variant: 'basic accent-hover',
-    },
-};
-
-export const SvgString = {
-    ...Basic,
-    args: {
-        icon: {
-            size: 4,
-            src: svgArrow({ angle: 'right', chevron: true, naturalSizeFixed: 'both' }),
-        },
-        iconChecked: svgArrow({ angle: 'down', chevron: true, naturalSizeFixed: 'both' }),
-    },
-};