@thinkpixellab-public/px-vue 5.0.3 → 5.2.0

package/stories/PxCardGrid.stories.js

@@ -1,60 +0,0 @@
-import PxCardGrid from '@/components/PxCardGrid.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { fruits } from '@/storybook/sb-sampledata.js';
-
-export default {
-    title: 'PxCardGrid',
-    component: PxCardGrid,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxCardGrid),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxCardGrid },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                fruits: fruits,
-                templates: {
-                    4: ['== -- -----', '-- == -- --', '----- -- ==', '-- -- == --'],
-                    3: ['== -- --', '-- -- ==', '-- == --'],
-                    2: ['-- --', '-----', '== --'],
-                },
-            };
-        },
-        template: `
-
-        <PxCardGrid
-            :items="fruits"
-            :gap="30"
-            :maxColumns="4"
-            :debug="true"
-            :templates="templates"
-            :allowOrphans="false"
-        >
-            <template #default="{ item }">{{ item.name }}</template>
-        </PxCardGrid>
-
-
-        `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxClock.stories.js

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

package/stories/PxCodeSample.stories.js

@@ -1,53 +0,0 @@
-// Reference:
-// https://storybook.js.org/blog/storybook-7-docs/
-// https://storybook.js.org/docs/7.5/writing-docs/autodocs
-
-import PxCodeSample from '@/components/PxCodeSample.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxCodeSample,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxCodeSample),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-const htmlSample = `
-<div>
-    <h1>Hello World</h1>
-    <p>This is a paragraph</p>
-</div>
-`;
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxCodeSample },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                htmlSample,
-            };
-        },
-        template: `<PxCodeSample v-bind="args"
-        :code="htmlSample" :lang="'html'"
-        />`,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxColorPalette.stories.js

@@ -1,59 +0,0 @@
-import PxColorPalette from '@/components/PxColorPalette.vue';
-
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxColorPalette',
-    component: PxColorPalette,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxColorPalette),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-        color: 'black',
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxColorPalette },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                myPalette: ['lightblue', 'yellowgreen', 'gold', 'orangered', 'tomato'],
-                myColor: 'yellowgreen',
-            };
-        },
-        template: `
-            <PxColorPalette v-model:color="myColor" :palette="myPalette" format="name" pickerMode="none"></PxColorPalette>
-            <br>
-            <br>
-            <PxColorPalette v-model:color="myColor" :palette="myPalette" format="name" pickerMode="picker"></PxColorPalette>
-            <br>
-            <br>
-            <PxColorPalette v-model:color="myColor" :palette="myPalette" format="name" pickerMode="eyedropper"></PxColorPalette>
-            <br>
-            <br>
-            <PxColorPalette v-model:color="myColor" :palette="myPalette" format="name" pickerMode="eyedropper-only"></PxColorPalette>
-            <br>
-            <br>
-
-            {{myColor}}<br>
-
-            `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxColorPanel.stories.js

@@ -1,31 +0,0 @@
-import PxColorPanel from '@/components/PxColorPanel.vue';
-import PxTextbox from '@/components/PxTextbox.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxColorPanel',
-    component: PxColorPanel,
-    argTypes: {
-        ...extractArgTypes(PxColorPanel),
-    },
-    args: {
-        color: 'black',
-        alphaEnabled: true,
-        format: 'hex8',
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxColorPanel, PxTextbox },
-        data() {
-            return { args, myColor: 'purple' };
-        },
-        template: `
-            <PxColorPanel v-bind="args" v-model:color="myColor"></PxColorPanel>
-            <br>
-            {{myColor}}<br>
-            <PxTextbox v-model:value="myColor" variant="default">test</PxTextbox>
-            `,
-    }),
-};

package/stories/PxColorPicker.stories.js

@@ -1,41 +0,0 @@
-import PxColorPicker from '@/components/PxColorPicker.vue';
-import PxTextbox from '@/components/PxTextbox.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxColorPicker',
-    component: PxColorPicker,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxColorPicker),
-    },
-    args: {
-        color: 'black',
-        alphaEnabled: true,
-        format: 'hex8',
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxColorPicker, PxTextbox },
-        data() {
-            return { args, myColor: 'purple' };
-        },
-        template: `
-            <PxColorPicker v-bind="args" v-model:color="myColor"></PxColorPicker>
-            <br>
-            {{myColor}}<br>
-            <PxTextbox v-model:value="myColor" variant="default">test</PxTextbox>
-            `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxContain.stories.js

@@ -1,80 +0,0 @@
-import PxContain from '@/components/PxContain.vue';
-import PxResizer from '@/components/PxResizer.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxContain',
-    component: PxContain,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxContain),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxResizer, PxContain },
-        setup() {
-            return { args };
-        },
-        template: `
-
-        <PxResizer :initialWidth="400" initialHeight="400" class="story-bounds" >
-            <PxContain #default="{width, height, left, top, scale}" :aspect="16/9" :naturalWidth="400" :round="true" :to-px="true" v-bind="args" >
-                <div class="story-fill story-flex" :style="{position: 'absolute', left: left, top: top,  width: width, height: height}">
-                    Scale {{Math.round(1000 * scale) / 1000}}
-                </div>
-            </PxContain>
-        </PxResizer>
-
-
-        `,
-    }),
-};
-
-export const ScaledContentExample = {
-    render: (args, { argTypes }) => ({
-        components: { PxResizer, PxContain },
-        setup() {
-            return { args };
-        },
-        template: `
-        <PxResizer :initialWidth="400" initialHeight="400" class="story-bounds" >
-            <PxContain #default="{width, height, left, top, scale}" :naturalWidth="1000" :naturalHeight="1000" :round="true" :to-px="true" v-bind="args" >
-                <div
-                    class="story-fill"
-                    :style="{
-                        top,
-                        left,
-                        width: '1000px',
-                        height: '1000px',
-                        position: 'absolute',
-                        transform: 'scale(' + scale + ')',
-                        transformOrigin: '0 0',
-                        fontSize: '50px',
-                    }">
-                    Outer natural size: 1000px x 1000px<br>
-                    Font-size: 50px<br>
-                    Scale {{Math.round(1000 * scale) / 1000}}
-
-
-                    <div style="width: 500px; height: 500px; background-color: rgba(0,0,0,0.5); top: 250px; left: 250px; position: absolute;">
-                        Inner Rectangle Size: 500px x 500px
-                    </div>
-                </div>
-            </PxContain>
-        </PxResizer>
-
-
-        `,
-    }),
-};

package/stories/PxCopyText.stories.js

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

package/stories/PxCorners.stories.js

@@ -1,187 +0,0 @@
-// Reference:
-// https://storybook.js.org/blog/storybook-7-docs/
-// https://storybook.js.org/docs/7.5/writing-docs/autodocs
-
-import PxCorners from '@/components/PxCorners.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxCorners,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/7.0/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/7.0/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxCorners),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Compare = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `
-            <div class="story-flex" style=" position: relative;">
-                <div v-bind="args" class="story-bg-blue" style="border-radius: 50px; width: 200px; height: 200px;" />
-                <PxCorners v-bind="args" class="story-bg-orange" :radius="50" style="width: 200px; height: 200px;" />
-            </div>
-        `,
-    }),
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners v-bind="args" class="story-size-md story-bg-orange" :radius="40" :borderWidth="4" borderColor="black" />`,
-    }),
-};
-
-export const Slot = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners v-bind="args" class="story-size-md story-bg-blue story-center" :radius="40" > Slot content </PxCorners>`,
-    }),
-};
-
-export const SlotWithBorder = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners v-bind="args" class="story-size-md story-bg-blue story-center" :radius="40" :borderWidth="4"> Slot content </PxCorners>`,
-    }),
-};
-
-export const HoverWithBorder = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners v-bind="args" class="story-size-md story-bg-orange story-hover-bg-blue story-center" :radius="40" :borderWidth="10"> Slot content </PxCorners>`,
-    }),
-};
-
-export const AutoFromStyle = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners :smoothingEnabled="true" v-bind="args" class="story-size-md story-bg-orange" style="border-radius: 40px; border: 4px solid black;" />`,
-    }),
-};
-
-export const AutoPercent = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `
-        <div class="story-flex" style=" position: relative;">
-            <PxCorners :smoothingEnabled="true" v-bind="args" class="story-bg-orange story-center" style="width: 300px; height: 200px; border-radius: 20%;">
-                Style 20%
-            </PxCorners>
-            <PxCorners :smoothingEnabled="true" v-bind="args" class="story-bg-orange story-center" style="width: 300px; height: 200px;" :radius="60">
-                :radius 60px
-            </PxCorners>
-            <div class="story-bg-orange story-center" style="width: 300px; height: 200px; border-radius: 20%;">
-                Div 20%
-            </div>
-            <div class="story-bg-orange story-center" style="width: 300px; height: 200px; border-radius: 60px;">
-                Div 60px
-            </div>
-        </div>
-        `,
-    }),
-};
-
-export const Disabled = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners :smoothingEnabled="false" v-bind="args" class="story-size-md story-bg-orange" :radius="40" :borderWidth="4" borderColor="black" />`,
-    }),
-};
-
-export const DisabledAutoFromStyle = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners :smoothingEnabled="false" v-bind="args" class="story-size-md story-bg-orange" style="border-radius: 40px; border: 4px solid black;" />`,
-    }),
-};
-
-export const BasicMask = {
-    // name: 'Story Name',
-    // parameters: {
-    //     customCSS: `.myclass { border: 4px solid red; }`,
-    // },
-    render: (args, { argTypes }) => ({
-        components: { PxCorners },
-        setup() {
-            return { args };
-        },
-        template: `<PxCorners v-bind="args" renderMode="mask" class="story-size-md story-bg-orange" :radius="40" :borderWidth="4" borderColor="black" />`,
-    }),
-};
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxDatePicker.stories.js

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

package/stories/PxDropdown.stories.js

@@ -1,56 +0,0 @@
-import PxDropdown from '@/components/PxDropdown.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { fruits } from '@/storybook/sb-sampledata.js';
-
-export default {
-    component: PxDropdown,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxDropdown),
-        // 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 { sbSelected: this.sbInitialSelected };
-        },
-        components: { PxDropdown },
-        template: `
-            <p>Selected: {{ sbSelected }}</p>
-            <PxDropdown :items="args.items" :placeholder="args.placeholder" :variant="args.variant" v-model:selected="sbSelected" />
-        `,
-    }),
-    args: {
-        sbInitialSelected: fruits[1].id,
-    },
-};
-
-export const Placeholder = {
-    ...Basic,
-    args: { placeholder: 'Select a fruit...', sbInitialSelected: null },
-};
-
-export const Outline = {
-    ...Basic,
-    args: { variant: 'outline' },
-};
-
-export const Reset = {
-    ...Basic,
-    args: { variant: 'reset' },
-};