@thinkpixellab-public/px-vue 4.0.11 → 4.0.13

package/components/PxSvgRender.vue

@@ -0,0 +1,39 @@
+<script>
+import { h, createVNode } from 'vue';
+import { parse } from '@vue/compiler-dom';
+
+export default {
+    name: 'px-svg-render',
+    props: {
+        svg: { type: String, default: null },
+    },
+    data() {
+        return {
+            mounted: false,
+        };
+    },
+    mounted() {
+        this.mounted = true;
+    },
+    render() {
+        if (!this.svg || !this.mounted) {
+            return null;
+        }
+        // create a template element and set its inner html to the svg content
+        const template = document.createElement('template');
+        template.innerHTML = this.svg?.trim();
+
+        // extract the actual svg element
+        const svgElement = template.content.firstChild;
+
+        // convert the svg element to a vnode
+        return h(svgElement.tagName, {
+            innerHTML: svgElement.innerHTML,
+            ...Array.from(svgElement.attributes).reduce((acc, attr) => {
+                acc[attr.name] = attr.value;
+                return acc;
+            }, {}),
+        });
+    },
+};
+</script>

package/components/PxTable.vue

@@ -213,7 +213,7 @@ export default {
          * sorting and a direction (ascending/descending) and raises and event (@sort) when it
          * changes, but the actual sorting need to be handle externally by sorting the items).
          */
-        sortEnabled: { type: Boolean, default: true },
+        sortEnabled: { type: Boolean, default: false },
 
         /**
          * A function that can be used to provide custom sorting. If not provided, a default
@@ -329,14 +329,16 @@ export default {
     },
     // watch: {},
     mounted() {
-        this.sortable = Sortable.create(this.$refs.table, {
-            draggable: `.${this.bem('row')}`,
-            filter: `.${this.bem('row-expand')}, .${this.bem('row-header')}`,
-            chosenClass: this.bem('row--chosen'),
-            ghostClass: this.bem('row--ghost'),
-            dragClass: this.bem('row--drag'),
-            onEnd: this.onDragEnd,
-        });
+        if (this.dragEnabled) {
+            this.sortable = Sortable.create(this.$refs.table, {
+                draggable: `.${this.bem('row')}`,
+                filter: `.${this.bem('row-expand')}, .${this.bem('row-header')}`,
+                chosenClass: this.bem('row--chosen'),
+                ghostClass: this.bem('row--ghost'),
+                dragClass: this.bem('row--drag'),
+                onEnd: this.onDragEnd,
+            });
+        }
     },
     beforeUnmount() {
         this.sortable.destroy();
@@ -469,21 +471,64 @@ export default {
 @use '../styles/px.scss' as *;
 @use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
 
-.px-table {
-    // load defaults
+@at-root {
+    :root {
+        // background for the entire table
+        --px-table-bg: #{clr(page-bg)};
 
-    // the outer container for the table (use to style an outer border, etc.)
+        // background for the entire table
+        --px-table-fg: #{clr(page-fg)};
 
-    $table: flat-merge(
-        get(
-            'controls.table.table',
-            (
-                border: 1px solid gray(5),
-                border-radius: get('controls.border-radius'),
-            )
-        )
-    );
+        // outer border for the entire table
+        --px-table-border: 1px solid #{gray(2, 0.5)};
+
+        // outer border radius for the entire table
+        --px-table-radius: 0.5em;
+
+        // inner border radius (may need to be less than outer in some cases)
+        --px-table-inner-radius: initial;
+
+        // background for the header row
+        --px-table-header-bg: #{gray(8)};
+
+        // background for the header row
+        --px-table-header-fg: unset;
+
+        // separator border below the header row
+        --px-table-header-border: 1px solid #{gray(2, 0.5)};
+
+        // background for all non-header rows
+        --px-table-row-bg: unset;
+
+        // background for all non-header rows
+        --px-table-row-fg: unset;
 
+        // background for odd non-header rows
+        --px-table-row-odd-bg: unset;
+
+        // background for odd non-header rows
+        --px-table-row-odd-fg: unset;
+
+        // separator border below each row
+        --px-table-row-border: 1px solid #{gray(2, 0.5)};
+
+        // cell padding
+        --px-table-cell-padding: 1em;
+
+        // header cell padding
+        --px-table-header-cell-padding: 1em;
+
+        // header cell hover (when clickable)
+        --px-table-header-cell-hover-bg: #{gray(5)};
+        --px-table-header-cell-hover-fg: unset;
+
+        // header cell selected (e.g. sorted)
+        --px-table-header-cell-selected-bg: #{accent(0)};
+        --px-table-header-cell-selected-fg: #{contrast-color(accent(0))};
+    }
+}
+
+.px-table {
     // row states that can be used when defining config for cell and header
 
     $cell-state-aliases: (
@@ -499,8 +544,6 @@ export default {
             'controls.table.cell',
             (
                 padding: 0.5em,
-                background-color: color(page-bg),
-                border-bottom: 1px solid gray(5),
                 last-row: (
                     border-bottom: none,
                 ),
@@ -508,46 +551,37 @@ export default {
         )
     );
 
-    $header: flat-merge(
-        get(
-            'controls.table.header',
-            (
-                background-color: gray(9),
-            )
-        )
-    );
-
-    // outer grid for the container (not the tabble itself)
-    // position: relative;
-    // display: grid;
-    // grid-template-columns: 1fr;
-    // grid-template-rows: 100%;
-
-    @include css-map($table);
+    background: var(--px-table-bg);
+    color: var(--px-table-fg);
+    border: var(--px-table-border);
+    border-radius: var(--px-table-radius);
 
     &__table {
         position: relative;
         display: grid;
         height: 100%;
         max-height: 100%;
+        border-radius: inherit;
+        box-sizing: border-box;
     }
 
     &__row-header,
     &__row {
         position: relative;
-        //display: contents;
         display: grid;
         grid-template-columns: subgrid;
-        background-color: clr(page-bg);
-
-        &:not(:last-child) {
-            border-bottom: 1px solid gray(3);
-        }
     }
 
     &__row-header {
-        @include css-map($header, $aliases: $cell-state-aliases);
+        //@include css-map($header, $aliases: $cell-state-aliases);
         z-index: 1;
+        background: var(--px-table-header-bg);
+        color: var(--px-table-header-fg);
+        border-bottom: var(--px-table-header-border);
+
+        border-top-left-radius: var(--px-table-inner-radius, inherit);
+        border-top-right-radius: var(--px-table-inner-radius, inherit);
+
         &[role='button'] {
             cursor: pointer;
         }
@@ -557,8 +591,34 @@ export default {
         }
     }
 
+    &__row {
+        background: var(--px-table-row-bg);
+        color: var(--px-table-row-fg);
+
+        &:nth-child(odd) {
+            background: var(--px-table-row-odd-bg);
+            color: var(--px-table-row-odd-fg);
+        }
+
+        &:not(:last-child) {
+            border-bottom: var(--px-table-row-border);
+        }
+
+        &:last-child {
+            border-bottom-left-radius: var(--px-table-inner-radius, inherit);
+            border-bottom-right-radius: var(--px-table-inner-radius, inherit);
+        }
+    }
+
     &__cell-header {
         @include control-reset-hard();
+        &:first-child {
+            border-top-left-radius: var(--px-table-inner-radius, inherit);
+        }
+
+        &:last-child {
+            border-top-right-radius: var(--px-table-inner-radius, inherit);
+        }
     }
 
     &__cell-header,
@@ -569,21 +629,25 @@ export default {
         box-sizing: border-box;
         display: flex;
         align-items: center;
-        padding: 0.5em;
+        padding: var(--px-table-cell-padding);
 
         // overflow
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        line-height: 1.33;
 
         &--action {
             padding: 0.5em;
         }
     }
 
+    &__cell-header {
+    }
+
     &__cell-header-default,
     &__cell-default {
-        display: inline-block;
+        display: block;
         max-width: 100%;
         width: 100%;
         overflow: hidden;
@@ -620,15 +684,25 @@ export default {
     }
 
     &__cell-header {
-        padding-top: 0.75em;
-        padding-bottom: 0.75em;
+        // padding-top: 0.75em;
+        // padding-bottom: 0.75em;
+
+        padding: var(--px-table-header-cell-padding);
 
         &--sortable {
             cursor: pointer;
             &:hover {
-                background-color: gray(6);
+                background: var(--px-table-header-cell-hover-bg, inherit);
+                color: var(--px-table-header-cell-hover-fg, inherit);
             }
         }
+
+        &--sorted,
+        &--sorted:hover {
+            cursor: pointer;
+            background: var(--px-table-header-cell-selected-bg, inherit);
+            color: var(--px-table-header-cell-selected-fg, inherit);
+        }
     }
 
     &__expand-toggle {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.0.11",
+    "version": "4.0.13",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -29,6 +29,7 @@
         "dateformat": "^5.0.3",
         "debounce": "^1.2.1",
         "gsap": "^3.10.4",
+        "highlight.js": "^11.9.0",
         "mitt": "^3.0.1",
         "qrcode": "^1.5.1",
         "qrcode.vue": "^3.4.1",
@@ -36,6 +37,7 @@
         "storybook-dark-mode": "^4.0.1",
         "throttle-debounce": "^5.0.0",
         "tiny-date-picker": "^3.2.8",
+        "tinycolor2": "^1.6.0",
         "vue": "^3.4.21",
         "vue-inline-svg": "^3.1.0"
     },

package/stories/PxCodeSample.stories.js

@@ -0,0 +1,53 @@
+// 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 './helpers/extractArgTypes';
+
+export default {
+    component: PxCodeSample,
+    // 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(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

@@ -0,0 +1,59 @@
+import PxColorPalette from '@/components/PxColorPalette.vue';
+
+import extractArgTypes from './helpers/extractArgTypes';
+
+export default {
+    title: 'PxColorPalette',
+    component: PxColorPalette,
+    // 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(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

@@ -0,0 +1,45 @@
+import PxColorPanel from '@/components/PxColorPanel.vue';
+import PxTextbox from '@/components/PxTextbox.vue';
+import extractArgTypes from './helpers/extractArgTypes';
+
+export default {
+    title: 'PxColorPanel',
+    component: PxColorPanel,
+    // 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(PxColorPanel),
+        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
+    },
+    args: {
+        // label: 'Hello',
+        // onClick: () => {}),
+        color: 'black',
+    },
+};
+
+export const Basic = {
+    render: (args, { argTypes }) => ({
+        components: { PxColorPanel, PxTextbox },
+        setup() {
+            return { args };
+        },
+        data() {
+            return { myColor: 'purple' };
+        },
+        template: `
+            <PxColorPanel v-model:color="myColor" format="hex8" :alphaEnabled="true"></PxColorPanel>
+            <br>
+            {{myColor}}<br>
+            <PxTextbox v-model:value="myColor" variant="default">test</PxTextbox>
+            `,
+    }),
+};
+
+// export const Advanced = {
+//     ...Basic,
+//     // args: { ... },
+// };

package/stories/PxColorPicker.stories.js

@@ -0,0 +1,44 @@
+import PxColorPicker from '@/components/PxColorPicker.vue';
+import extractArgTypes from './helpers/extractArgTypes';
+
+export default {
+    title: 'PxColorPicker',
+    component: PxColorPicker,
+    // 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(PxColorPicker),
+        // someProp: { type: 'select', options: ['one', 'two', 'three'] }
+    },
+    args: {
+        // label: 'Hello',
+        // onClick: () => {}),
+        color: 'black',
+    },
+};
+
+export const Basic = {
+    render: (args, { argTypes }) => ({
+        components: { PxColorPicker },
+        setup() {
+            return { args };
+        },
+        data() {
+            return { myColor: 'purple' };
+        },
+        template: `
+            <PxColorPicker v-model:color="myColor" format="hex8" :alphaEnabled="true"></PxColorPanel>
+            <br>
+            {{myColor}}<br>
+
+            `,
+    }),
+};
+
+// export const Advanced = {
+//     ...Basic,
+//     // args: { ... },
+// };

package/stories/PxLabeledInput.stories.js

@@ -0,0 +1,44 @@
+// 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 './helpers/extractArgTypes';
+
+export default {
+    component: PxLabeledInput,
+    // 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(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/PxSvgRender.stories.js

@@ -0,0 +1,40 @@
+import PxSvgRender from '@/components/PxSvgRender.vue';
+import extractArgTypes from './helpers/extractArgTypes';
+import { svgArrow } from '../utils/svgIcons';
+
+import alphaSvg from './assets/alpha.svg';
+
+export default {
+    component: PxSvgRender,
+    // 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(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/test/PxBaseColor.test.js

@@ -0,0 +1,54 @@
+import { shallowMount } from '@vue/test-utils';
+import MockComponent from './MockComponent.vue';
+import PxBaseColor from '@/bases/PxBaseColor.vue';
+
+test('PxBaseColor', () => {
+    const wrapper = shallowMount(MockComponent, {
+        mixins: [PxBaseColor],
+    });
+    expect(wrapper.vm.getColor()).toEqual({
+        a: 1,
+        h: 0,
+        s: 1,
+        v: 1,
+    });
+});
+
+test('PxBaseColor with color initialized to blue and hex6 format', () => {
+    const wrapper = shallowMount(MockComponent, {
+        mixins: [PxBaseColor],
+        props: {
+            color: 'blue',
+            format: 'hex6',
+        },
+    });
+
+    expect(wrapper.vm.getColor()).toEqual('#0000ff');
+});
+
+test('PxBaseColor with color initialized to blue and hsva format', () => {
+    const wrapper = shallowMount(MockComponent, {
+        mixins: [PxBaseColor],
+        props: {
+            color: { a: 0.5, h: 0, s: 0.5, v: 0.5 },
+            format: 'hsva',
+        },
+    });
+    expect(wrapper.vm.getColor()).toEqual({
+        a: 0.5,
+        h: 0,
+        s: 0.5,
+        v: 0.5,
+    });
+});
+
+test('PxBaseColor test auto format', () => {
+    const wrapper = shallowMount(MockComponent, {
+        mixins: [PxBaseColor],
+        props: {
+            color: 'green',
+            format: 'auto',
+        },
+    });
+    expect(wrapper.vm.getColor()).toEqual('green');
+});