@thinkpixellab-public/px-vue 5.0.3 → 5.2.0

package/stories/PxSlides.stories.js

@@ -1,65 +0,0 @@
-import PxSlides from '@/components/PxSlides.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { fruitsPlusPlus } from '@/storybook/sb-sampledata.js';
-
-export default {
-    title: 'PxSlides',
-    component: PxSlides,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxSlides),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        items: fruitsPlusPlus,
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxSlides },
-        setup() {
-            return { args };
-        },
-        template: `
-
-            <PxSlides v-bind="args" :style="{height: '600px'}">
-                <template #slide="{ item, index }">
-
-                    <div style="height: 100%; display: flex; justify-content: center; align-items: center;">
-
-                        <h1 style="padding: 0.5em; background-color: black; color: white; position: absolute; z-index: 1; text-align: center;">{{ index+1 }} - {{ item.name }}</h1>
-
-                        <div
-                            data-drag
-                            :style="{
-                                border: '1px solid black',
-                                backgroundImage: cssUrl(item.image),
-                                backgroundSize: 'cover',
-                                backgroundPosition: 'center',
-                                backgroundRepeat: 'no-repeat',
-                                borderRadius: '50%',
-                                aspectRatio: 1,
-                                height: '100%',
-                                objectFit: 'contain',
-
-                            }"
-                        />
-
-                    </div>
-
-                </template>
-            </PxSlides>`,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxSpinner.stories.js

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

package/stories/PxSticky.stories.js

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

package/stories/PxSvg.stories.js

@@ -1,46 +0,0 @@
-import PxSvg from '@/components/PxSvg.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-import alphaSvg from './assets/alpha.svg';
-import alphaSizeWidthSvg from './assets/alphaSizeWidth.svg';
-import alphaNoSizingSvg from './assets/alphaNoSizing.svg';
-
-export default {
-    component: PxSvg,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxSvg),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-        src: { control: 'text' },
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-        src: alphaSvg,
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxSvg },
-        setup() {
-            return { args };
-        },
-        template: `<PxSvg v-bind="args" size="200px" />`,
-    }),
-};
-
-export const WidthAndHeightNoViewBox = {
-    ...Basic,
-    args: { src: alphaSizeWidthSvg },
-};
-
-export const NoSizing = {
-    ...Basic,
-    args: { src: alphaNoSizingSvg },
-};

package/stories/PxSvgRender.stories.js

@@ -1,40 +0,0 @@
-import PxSvgRender from '@/components/PxSvgRender.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { svgArrow } from '../utils/svgIcons';
-
-import alphaSvg from './assets/alpha.svg';
-
-export default {
-    component: PxSvgRender,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxSvgRender),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-        svg: { control: 'text' },
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxSvgRender },
-        setup() {
-            return { args };
-        },
-        template: `<PxSvgRender v-bind="args" :svg="svgArrow()" />`,
-        methods: { svgArrow },
-    }),
-};
-
-export const Advanced = {
-    ...Basic,
-    // args: { size: '2em' },
-};

package/stories/PxSyncHeight.stories.js

@@ -1,48 +0,0 @@
-import PxSyncHeight from '@/components/PxSyncHeight.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxSyncHeight',
-    component: PxSyncHeight,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxSyncHeight),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxSyncHeight },
-        setup() {
-            return { args };
-        },
-        template: `
-        <div style="display: flex; gap: 1em; align-items: flex-start;" >
-            <PxSyncHeight v-bind="args" class="story-bounds" group="a" style="flex: 1" >
-                Many words including praesentium libero dolorem suscipit consequatur distinctio vel ipsa vel aut. Corrupti voluptatibus culpa nam voluptate incidunt a. Officia quia et magni rerum ut temporibus vel fugit perferendis assumenda et aut.
-            </PxSyncHeight>
-            <PxSyncHeight v-bind="args" class="story-bounds" group="a" style="flex: 1" >
-                Just a few words.
-            </PxSyncHeight>
-            <PxSyncHeight v-bind="args" class="story-bounds" group="a" style="flex: 1" >
-                And even fewer.
-            </PxSyncHeight>
-        </div>
-
-            `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxTable.stories.js

@@ -1,145 +0,0 @@
-import PxTable from '@/components/PxTable.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { fruitsPlusPlus, fruitsOneHundred } from '@/storybook/sb-sampledata.js';
-
-export default {
-    title: 'PxTable',
-    component: PxTable,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxTable),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        // label: 'Hello',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxTable },
-        data() {
-            return {
-                fruits: fruitsPlusPlus,
-            };
-        },
-        setup() {
-            return { args };
-        },
-        methods: {
-            onSort(e) {
-                function moveElement(arr, oldIndex, newIndex) {
-                    if (
-                        oldIndex < 0 ||
-                        newIndex < 0 ||
-                        oldIndex >= arr.length ||
-                        newIndex >= arr.length
-                    ) {
-                        console.log('Invalid indices');
-                        return;
-                    }
-
-                    // Removing the element from its original position
-                    const element = arr.splice(oldIndex, 1)[0];
-
-                    // Inserting the element at its new position
-                    arr.splice(newIndex, 0, element);
-                }
-
-                moveElement(this.fruits, e.oldDraggableIndex, e.newDraggableIndex);
-            },
-        },
-        template: `
-            <PxTable v-bind="args"
-                :items="fruits"
-                :columns="[
-                    { label: 'Index', template: 'index', size: '4em',  },
-                    { label: 'Thumb', template: 'thumb' },
-                    { label: 'Fruit Name', property: 'name'  },
-                    { label: 'Description', property: 'description', overflow: 'ellipsis' },
-                    { label: 'Purchased',  property: 'lastPurchase',  align: 'right'},
-                    { property: 'deliciousness', label: 'Deliciousness' },
-                    { label: 'Good', value: item => item.deliciousness > 5, align: 'center' },
-                ]"
-                :dragEnabled="true"
-            >
-                <template #index="{ index }">
-                    {{ index }}
-                </template>
-
-                <template #thumb="{ item }" >
-                    <img :src="item.image" style="width: 3em; height: 3em; object-fit: cover; border-radius: 50%;">
-                </template>
-
-                <template #deliciousness="{ item }" >
-                    <span v-for="idx in item.deliciousness" :key="idx" :style="{ background: 'currentColor', display: 'inline-block', width: '0.25em', height: '0.75em', marginLeft: '0.1em' }" />
-                </template>
-
-                <template #expand="{ item }">
-                    <div style="padding: 1em">
-                        <h2>{{ item.name }}</h2>
-                        <p>{{ item.description }}</p>
-                    </div>
-                </template>
-
-            </PxTable>`,
-    }),
-};
-
-export const FixedHeader = {
-    render: (args, { argTypes }) => ({
-        components: { PxTable },
-        data() {
-            return {
-                fruits: fruitsOneHundred,
-            };
-        },
-        setup() {
-            return { args };
-        },
-        methods: {
-            onSort(e) {
-                function moveElement(arr, oldIndex, newIndex) {
-                    if (
-                        oldIndex < 0 ||
-                        newIndex < 0 ||
-                        oldIndex >= arr.length ||
-                        newIndex >= arr.length
-                    ) {
-                        console.log('Invalid indices');
-                        return;
-                    }
-
-                    // Removing the element from its original position
-                    const element = arr.splice(oldIndex, 1)[0];
-
-                    // Inserting the element at its new position
-                    arr.splice(newIndex, 0, element);
-                }
-
-                moveElement(this.fruits, e.oldDraggableIndex, e.newDraggableIndex);
-            },
-        },
-        template: `
-
-                <PxTable v-bind="args"
-                    :items="fruits"
-                    :fixedHeader="true"
-                >
-                    <template #color="{ item }">
-                        <div :style="{ background: item.color, width: '1.5em', height: '1.5em', borderRadius: '50%' }"></div>
-                    </template>
-                </PxTable>
-            `,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxTextbox.stories.js

@@ -1,59 +0,0 @@
-import PxTextbox from '@/components/PxTextbox.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    component: PxTextbox,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxTextbox),
-    },
-    args: {
-        placeholder: 'Type something...',
-
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxTextbox },
-        setup() {
-            return { args };
-        },
-        data() {
-            return { sampleText: '' };
-        },
-        template: `<input v-model="sampleText" /> <br><br> <PxTextbox v-model:text="sampleText" v-bind="args"/> <br> <br> <PxTextbox :multiline="true" v-model:text="sampleText" v-bind="args"/> <br> <br> {{sampleText}}`,
-        args: {},
-    }),
-};
-
-export const Placeholder = {
-    ...Basic,
-    args: { value: '' },
-};
-
-export const Disabled = {
-    ...Basic,
-    args: { disabled: true },
-};
-
-export const Readonly = {
-    ...Basic,
-    args: { readonly: true },
-};
-
-export const Multiline = {
-    ...Basic,
-    args: { multiline: true, showResize: true, autoResize: true, cols: 50 },
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxToggle.stories.js

@@ -1,77 +0,0 @@
-import PxToggle from '@/components/PxToggle.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-
-export default {
-    title: 'PxToggle',
-    component: PxToggle,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxToggle),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        label: 'Clicking is cool.',
-        // onClick: () => {}),
-    },
-};
-
-export const Basic = {
-    render: (args, { argTypes }) => ({
-        components: { PxToggle },
-        setup() {
-            return { args };
-        },
-        data() {
-            return {
-                isChecked: true,
-            };
-        },
-        template: `
-        <div class="story-flex">
-            <PxToggle v-bind="args" v-model:checked="isChecked" /> <span>Local v-model value: {{ isChecked }}</span>
-        </div>
-            `,
-    }),
-};
-
-export const DefaultSlot = {
-    render: (args, { argTypes }) => ({
-        components: { PxToggle },
-        setup() {
-            return { args };
-        },
-        template: `
-            <PxToggle v-bind="args">
-                <template #default="{checked}">
-                    I am checked: {{ checked }}
-                </template>
-            </PxToggle>`,
-    }),
-};
-
-export const OnOffSlot = {
-    render: (args, { argTypes }) => ({
-        components: { PxToggle },
-        setup() {
-            return { args };
-        },
-        template: `
-            <PxToggle v-bind="args">
-                <template #on-label>
-                    I am checked baby!
-                </template>
-                <template #off-label>
-                    Sadly, I am not checked.
-                </template>
-            </PxToggle>`,
-    }),
-};
-
-// export const Advanced = {
-//     ...Basic,
-//     // args: { ... },
-// };

package/stories/PxToggleButton.stories.js

@@ -1,109 +0,0 @@
-import PxToggleButton from '@/components/PxToggleButton.vue';
-import { extractArgTypes } from '@/storybook/sb-utils.js';
-import { svgCheck, svgX } from '../utils/svgIcons';
-
-export default {
-    component: PxToggleButton,
-    // decorators: [ ... ],
-    // parameters: { ... },
-
-    // https://storybook.js.org/docs/vue/essentials/controls#annotation
-    // https://storybook.js.org/docs/vue/api/argtypes#available-properties
-    argTypes: {
-        ...extractArgTypes(PxToggleButton),
-        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
-    },
-    args: {
-        label: 'Yes',
-        labelUnchecked: 'No',
-        icon: svgCheck({ angle: 42 }),
-        iconUnchecked: svgX(),
-        // onClick: () => {}),
-    },
-};
-
-export const States = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxToggleButton },
-        setup() {
-            return { args };
-        },
-        template: `
-        <div class="story-flex">
-            <PxToggleButton v-bind="args" />
-            <PxToggleButton v-bind="args" labelUnchecked="No Way Dude" />
-        </div>
-        `,
-    }),
-};
-
-export const Basic = {
-    // name: 'Story Name',
-    render: (args, { argTypes }) => ({
-        components: { PxToggleButton },
-        setup() {
-            return { args };
-        },
-        template: `<PxToggleButton v-bind="args" />`,
-    }),
-};
-
-export const Checked = {
-    ...Basic,
-    args: { checked: true },
-};
-
-export const Model = {
-    ...Basic,
-    args: { checked: true },
-    render: (args, { argTypes }) => ({
-        setup() {
-            return { args };
-        },
-        data() {
-            return { isChecked: false };
-        },
-        components: { PxToggleButton },
-        template: `
-            <div>
-                <p>Checked: {{ isChecked }}</p>
-                <PxToggleButton v-bind="args" v-model:checked="isChecked" />
-            </div>
-        `,
-    }),
-};
-
-export const NoIcon = {
-    ...Basic,
-    args: { icon: null },
-};
-
-export const LongTextNoIcon = {
-    ...Basic,
-    args: { label: 'This Button is Checked', labelUnchecked: '', icon: '' },
-};
-
-export const LongTextHasIconUnchecked = {
-    ...Basic,
-    args: { label: 'This Button is Checked', labelUnchecked: '', checked: false },
-};
-
-export const LongTextChecked = {
-    ...Basic,
-    args: { label: 'This Button is Checked', checked: true },
-};
-
-export const Disabled = {
-    ...Basic,
-    args: { disabled: true },
-};
-
-export const DisabledAndChecked = {
-    ...Basic,
-    args: { checked: true, disabled: true },
-};
-export const OutlineVariant = {
-    ...Basic,
-    args: { variant: 'outline' },
-};