@thinkpixellab-public/px-vue 5.0.3 → 5.2.0

package/stories/PxToggleButtonList.stories.js

@@ -1,102 +0,0 @@
-import PxToggleButtonList from '@/components/PxToggleButtonList.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { fruits } from '@/storybook/sb-sampledata.js';
-import CheckSvg from '../assets/feather/check.svg';
-
-export default {
-    component: PxToggleButtonList,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-
-    argTypes: {
-        ...extractArgTypes(PxToggleButtonList),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        items: fruits,
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        setup() {
-            return { args };
-        },
-        data() {
-            return { mySelected: fruits[1].id };
-        },
-        components: { PxToggleButtonList },
-        template: `
-            <p>Selected: {{ mySelected }}</p>
-            <PxToggleButtonList v-bind="args" v-model:selected="mySelected" />
-        `,
-    }),
-};
-
-export const Multiselect = {
-    ...Basic,
-    args: { multiSelect: true },
-};
-export const AutoSelectFirst = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        setup() {
-            return { args };
-        },
-
-        data() {
-            return { mySelected: null };
-        },
-        components: { PxToggleButtonList },
-        template: `
-            <p>Selected: {{ mySelected }}</p>
-            <PxToggleButtonList v-bind="args" v-model:selected="mySelected" />
-        `,
-    }),
-    args: { autoSelectFirst: true },
-};
-
-export const ConnectedVariant = {
-    ...Basic,
-    args: { variant: 'default connected' },
-};
-
-export const MultiselectConnectedVariant = {
-    ...Basic,
-    args: { multiSelect: true, variant: 'default connected' },
-};
-
-export const Check = {
-    ...Basic,
-    args: { icon: CheckSvg },
-};
-
-export const ConnectedVariantCheck = {
-    ...Basic,
-    args: { icon: CheckSvg, variant: 'default connected' },
-};
-
-export const MultiselectConnectedVariantCheck = {
-    ...Basic,
-    args: { multiSelect: true, variant: 'default connected', icon: CheckSvg },
-};
-export const OutlineVariant = {
-    ...Basic,
-    args: { variant: 'outline' },
-};
-
-export const OutlineVariantCheck = {
-    ...Basic,
-    args: { variant: 'outline', icon: CheckSvg },
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxToolPanel.stories.js

@@ -1,351 +0,0 @@
-// Reference:
-// https://storybook.js.org/blog/storybook-7-docs/
-// https://storybook.js.org/docs/7.5/writing-docs/autodocs
-
-import { ref } from 'vue';
-import PxToolPanel from '@/components/PxToolPanel.vue';
-import PxToggleButton from '@/components/PxToggleButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'Components/PxToolPanel',
-    component: PxToolPanel,
-    argTypes: {
-        title: { control: 'text' },
-        allowResize: {
-            control: 'select',
-            options: ['N', 'S', 'E', 'W', 'NS', 'EW', 'NSEW', 'NEWS', 'SWEN'],
-        },
-        showHeader: { control: 'boolean' },
-        teleportToBody: { control: 'boolean' },
-        minWidth: { control: 'number' },
-        minHeight: { control: 'number' },
-        constrainingRect: { control: 'object' },
-        bounds: { control: 'object' },
-    },
-};
-
-const Basic = {
-    args: {
-        title: 'Basic Panel',
-        allowResize: 'NSEW',
-        showHeader: true,
-        bounds: { x: 50, y: 50, width: 300, height: 200 },
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="drag-container">
-                <PxToolPanel v-bind="args">
-                    <div class="panel-content">
-                        <p>Basic panel with all resize handles enabled</p>
-                    </div>
-                </PxToolPanel>
-            </div>
-        `,
-    }),
-};
-
-export const WithCustomHeader = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        headerClass: 'custom-header',
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="drag-container">
-                <PxToolPanel v-bind="args">
-                    <template #header="{ title }">
-                        <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
-                            <span>{{ title }}</span>
-                            <button>⚙️</button>
-                        </div>
-                    </template>
-                    <div class="panel-content">
-                        <p>Panel with custom header template</p>
-                    </div>
-                </PxToolPanel>
-            </div>
-        `,
-    }),
-};
-
-export const WithoutHeader = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        allowResize: 'NEWS',
-        showHeader: false,
-    },
-};
-
-export const AllResizeHandles = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        allowResize: 'NSEW',
-        title: 'All Resize Handles',
-    },
-};
-
-export const HorizontalResizeOnly = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        allowResize: 'EW',
-        title: 'Horizontal Resize Only',
-    },
-};
-
-export const VerticalResizeOnly = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        allowResize: 'NS',
-        title: 'Vertical Resize Only',
-    },
-};
-
-export const CustomResizeHandleWidth = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        allowResize: 'NSEW',
-        title: 'Custom Resize Handle Width',
-    },
-    parameters: {
-        customCSS: `
-            .drag-container { width: 100%; height: 800px; position: relative; border: 1px dashed gray; }
-            .custom-resize-handles .px-tool-panel {
-                --px-tool-panel-resize-width: 20px;
-            }
-        `,
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="drag-container custom-resize-handles">
-                <PxToolPanel v-bind="args">
-                    <div class="panel-content">
-                        <p>Panel with larger resize handles (20px)</p>
-                        <p>The resize handles should be visibly larger than other stories.</p>
-                    </div>
-                </PxToolPanel>
-            </div>
-        `,
-    }),
-};
-
-export const ConstrainedMovement = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        title: 'Constrained Panel',
-        constrainingRect: { x: 100, y: 100, width: 600, height: 400 },
-        bounds: { x: 150, y: 150, width: 300, height: 200 },
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="drag-container">
-                <!-- Visual representation of the constraining rect -->
-                <div
-                    style="
-                        position: absolute;
-                        left: 100px;
-                        top: 100px;
-                        width: 600px;
-                        height: 400px;
-                        border: 2px dashed #666;
-                        background: rgba(0,0,0,0.05);
-                    "
-                ></div>
-                <PxToolPanel v-bind="args">
-                    <div class="panel-content">
-                        <p>This panel is constrained within the dashed rectangle</p>
-                    </div>
-                </PxToolPanel>
-            </div>
-        `,
-    }),
-};
-
-export const MultiplePanels = {
-    ...Basic,
-    parameters: {
-        customCSS: `
-            .drag-container { width: min(100%, 800px); height: 800px; position: relative; border: 1px dashed gray; padding: 1em; }
-        `,
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="drag-container">
-                <PxToolPanel
-                    v-bind="args"
-                    title="Panel 1"
-                    :bounds="{ x: 50, y: 50, width: 300, height: 200 }"
-                    allowResize="NSEW"
-                >
-                    <div class="panel-content">
-                        <p>Try interacting with multiple panels</p>
-                    </div>
-                </PxToolPanel>
-                <PxToolPanel
-                    v-bind="args"
-                    title="Panel 2"
-                    :bounds="{ x: 400, y: 50, width: 300, height: 200 }"
-                    allowResize="NSEW"
-                >
-                    <div class="panel-content">
-                        <p>Panels can be moved and resized independently</p>
-                    </div>
-                </PxToolPanel>
-            </div>
-        `,
-    }),
-};
-
-export const TeleportToBody = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        teleportToBody: true,
-        title: 'Teleported Panel',
-        allowResize: 'NSEW',
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel, PxToggleButton },
-        setup() {
-            const showPanel = ref(false);
-            return { args, showPanel };
-        },
-        template: `
-            <div>
-                <div class="drag-container">
-                    <p>Click the button below to show a panel that will be teleported to the body element.</p>
-                    <p>This is the original container. When shown, the panel can move outside of it.</p>
-                    <p>Panel visible: {{ showPanel }}</p>
-                    <PxToggleButton v-model:checked="showPanel">
-                        {{ showPanel ? 'Hide Panel' : 'Show Panel' }}
-                    </PxToggleButton>
-                    <PxToolPanel v-if="showPanel" v-bind="args">
-                        <div class="panel-content">
-                            <p>This panel is rendered directly in the body element.</p>
-                            <p>You can drag it anywhere on the page!</p>
-                        </div>
-                    </PxToolPanel>
-                </div>
-            </div>
-        `,
-    }),
-};
-
-export const ContentConstrainedSize = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        allowResize: 'NSEW',
-        title: 'Content-Constrained Size',
-        bounds: { x: 100, y: 100, width: 200, height: 200 }, // Intentionally smaller than minWidth/minHeight
-        minWidth: 300,
-        minHeight: 300,
-    },
-    parameters: {
-        customCSS: `
-            .drag-container { width: min(100%, 800px); height: 800px; position: relative; border: 1px dashed gray; padding: 1em; }
-            .content-constrained {
-                padding: 1em;
-            }
-            .content-constrained p {
-                margin: 0.5em 0;
-            }
-        `,
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="drag-container">
-                <PxToolPanel v-bind="args">
-                    <div class="panel-content content-constrained">
-                        <p>Size-Constrained Panel</p>
-                        <p>Try resizing the panel smaller than the minimum dimensions.</p>
-                    </div>
-                </PxToolPanel>
-            </div>
-        `,
-    }),
-};
-
-export const AutoHeight = {
-    ...Basic,
-    args: {
-        ...Basic.args,
-        allowResize: 'EW', // Only allow horizontal resizing
-        title: 'Auto Height Panel',
-        bounds: {
-            x: 50,
-            y: 50,
-            width: 300, // Initial width
-            height: null, // null height for auto sizing
-        },
-    },
-    parameters: {
-        customCSS: `
-            .drag-container { width: min(100%, 800px); height: 800px; position: relative; border: 1px dashed gray; padding: 1em; }
-            .auto-height-content {
-                padding: 1em;
-            }
-            .auto-height-content p {
-                margin: 0.5em 0;
-            }
-            .spacer {
-                height: 20px;
-            }
-        `,
-    },
-    render: (args, { argTypes }) => ({
-        components: { PxToolPanel },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="drag-container">
-                <PxToolPanel v-bind="args">
-                    <div class="panel-content auto-height-content">
-                        <p>This panel's height is determined by its content.</p>
-                        <p>You can only resize it horizontally.</p>
-                        <div class="spacer"></div>
-                        <p>The panel will automatically grow...</p>
-                        <div class="spacer"></div>
-                        <p>...or shrink...</p>
-                        <div class="spacer"></div>
-                        <p>...to fit its content!</p>
-                        <div class="spacer"></div>
-                        <p>Try resizing horizontally - the height will stay fitted to content.</p>
-                    </div>
-                </PxToolPanel>
-            </div>
-        `,
-    }),
-};

package/stories/PxTransition.stories.js

@@ -1,74 +0,0 @@
-import PxTransition from '@/components/PxTransition.vue';
-import PxToggle from '@/components/PxToggle.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxTransition',
-    component: PxTransition,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxTransition),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        animation: 'up:50px zoomin',
-        duration: 0.3,
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxTransition, PxToggle },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                checked: true,
-            };
-        },
-        template: `
-            <div class="story-flex-vert">
-                <div class="story-flex">
-                    <div class="story-flex-vert">
-                        Reverse
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxTransition v-bind="args" >
-                                <div v-show="checked" class="story-circle" />
-                            </PxTransition>
-                        </div>
-                    </div>
-                    <div class="story-flex-vert">
-                        Continue
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxTransition v-bind="args" autoHide="continue">
-                                <div v-show="checked" class="story-circle" />
-                            </PxTransition>
-                        </div>
-                    </div>
-                    <div class="story-flex-vert">
-                        Custom (Right)
-                        <div class="story-bounds" style="width: 6em; height: 6em">
-                            <PxTransition v-bind="args" hideAnimation="fade right">
-                                <div v-show="checked" class="story-circle" />
-                            </PxTransition>
-                        </div>
-                    </div>
-
-                </div>
-                <PxToggle v-model:checked="checked" />
-            </div>
-            `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxTransitionExpand.stories.js

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

package/stories/PxTransitionItem.stories.js

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

package/stories/PxValidator.stories.js

@@ -1,100 +0,0 @@
-import PxValidator from '@/components/PxValidator.vue';
-import PxTextbox from '@/components/PxTextbox.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxValidator',
-    component: PxValidator,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxValidator),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxValidator, PxTextbox },
-        setup() {
-            return { args };
-        },
-
-        data() {
-            return {
-                // validation is all data driven so the components need to
-                // have data fields associated with them
-                fieldOne: '',
-                fieldTwo: '',
-
-                // tracks validation information for all fields on the page
-                validation: {},
-            };
-        },
-        computed: {
-            fieldWithErrors() {
-                return Object.keys(this.validation).filter(key => {
-                    return !this.validation[key].isValid;
-                });
-            },
-            hasErrors() {
-                return this.fieldWithErrors?.length > 0;
-            },
-        },
-        methods: {
-            validChanged(validatorData) {
-                this.validation = { ...this.validation, [validatorData.fieldId]: validatorData };
-            },
-        },
-
-        template: `
-
-        <div class="story-flex-vert">
-            <div>Has errors: {{ hasErrors }}</div>
-
-            <PxValidator
-                :value="fieldOne"
-                :active="true"
-                rules="required"
-                @valid-changed="validChanged"
-            >
-                <template #default>
-                    <PxTextbox v-model:value="fieldOne" placeholder="Required" style="width: 30em" />
-                </template>
-            </PxValidator>
-
-            <px-validator
-                :value="fieldTwo"
-                :active="true"
-                :rules="{
-                    apples: (value) => {
-                        if (value.indexOf('apples') == -1) {
-                            return 'Must mention the word apples';
-                        }
-                    }
-                }"
-                @valid-changed="validChanged"
-            >
-                <template #default="{ validator }">
-                    <PxTextbox :class="validator.class" v-model:value="fieldTwo" placeholder="Must include 'apples'" style="width: 30em" />
-                    <pre>
-{{ JSON.stringify(validator, null, 4) }}
-                    </pre>
-                </template>
-            </px-validator>
-        </div>
-        `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };