@thinkpixellab-public/px-vue 4.1.4 → 4.1.6

package/components/PxBalancedText.vue

@@ -5,13 +5,13 @@
     <component
         :is="calcTag"
         class="px-balanced-text"
-        :style="{ opacity: elementOpacity, color: debugColor, textAlign }"
+        :style="{ opacity: elementOpacity, color: debugColor, textAlign, width: '100%' }"
     >
         <!-- html -->
         <component
             v-if="hasHtml"
             :class="[bem('inner', { html: true }), innerClass]"
-            :style="innerStyle"
+            :style="calcInnerStyle"
             :is="calcInnerTag"
             ref="text"
             v-html="html"
@@ -21,7 +21,7 @@
         <component
             v-else
             :class="[bem('inner'), innerClass]"
-            :style="innerStyle"
+            :style="calcInnerStyle"
             :is="calcInnerTag"
             ref="text"
         >
@@ -109,6 +109,17 @@ export default {
             const defaultTag = this.hasHtml ? 'div' : 'span';
             return this.innerTag || defaultTag;
         },
+
+        calcInnerStyle() {
+            const style = this.innerStyle || {};
+            if (typeof style === 'string') {
+                return style + ' display: inline-block;';
+            }
+
+            style.display = 'inline-block';
+            return style;
+        },
+
         hasHtml() {
             return !!this.htmlValue && !this.text;
         },
@@ -204,12 +215,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-.px-balanced-text {
-    width: 100%;
-    &__inner {
-        display: inline-block;
-    }
-}
-</style>

package/components/PxColorPalette.vue

@@ -2,7 +2,7 @@
     Describe this component...
 -->
 <template>
-    <div :class="bem()">
+    <div style="display: flex; gap: 0.5em">
         <PxColorPaletteButton
             v-for="(color, index) in calcPalette"
             :key="index"
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import PxBaseColor from './PxBaseColor.vue';
+import PxBaseColor from '../bases/PxBaseColor.vue';
 import tinycolor from 'tinycolor2';
 import PxColorPaletteButton from './PxColorPaletteButton.vue';
 import PxColorPicker from './PxColorPicker.vue';
@@ -114,12 +114,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-@use '../styles/px.scss' as *;
-
-.px-color-palette {
-    display: flex;
-    gap: 0.5em;
-}
-</style>

package/components/PxColorPaletteButton.vue

@@ -36,6 +36,7 @@ export default {
 </script>
 
 <style lang="scss">
+@use 'sass:string';
 @use '../styles/px.scss' as *;
 
 @function color-wheel-gradient($count, $blend: true, $sat: 100%, $light: 50%) {
@@ -53,7 +54,7 @@ export default {
         }
     }
 
-    @return unquote($grad);
+    @return string.unquote($grad);
 }
 
 .px-color-palette-button {

package/components/PxColorPanel.vue

@@ -51,7 +51,7 @@
 import Drag from '../utils/drag.js';
 import PxBaseColor from '../bases/PxBaseColor.vue';
 import PxIconButton from './PxIconButton.vue';
-import EyeDropperSvg from '../assets/icons/eyedropper.svg';
+import EyeDropperSvg from '../assets/icons/eyedropper.svg?url';
 
 export default {
     name: 'px-color-panel',

package/components/PxColorPicker.vue

@@ -28,8 +28,8 @@ import PxColorPaletteButton from './PxColorPaletteButton.vue';
 import PxBaseColor from '../bases/PxBaseColor.vue';
 import propsFilter from '../utils/propsFilter.js';
 import { PxIcon, PxIconSrcOrAttrs } from './PxIcon.vue';
-import EyeDropperSvg from '../assets/icons/eyedropper.svg';
-import EllipsisSvg from '../assets/icons/ellipsis.svg';
+import EyeDropperSvg from '../assets/icons/eyedropper.svg?url';
+import EllipsisSvg from '../assets/icons/ellipsis.svg?url';
 
 const PxColorPicker = {
     name: 'px-color-picker',

package/components/PxContain.vue

@@ -10,7 +10,7 @@
 -->
 
 <template>
-    <div :class="bem()">
+    <div style="width: 100%; height: 100%; position: relative">
         <slot
             name="default"
             :top="contain.top"
@@ -336,12 +336,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-@use '../styles/px.scss' as *;
-.px-contain {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-</style>

package/components/PxDatePicker.vue

@@ -253,4 +253,3 @@ export default {
     padding: sp(1);
 }
 </style>
-./PxPopupButton.vue

package/components/PxExpander.vue

@@ -4,7 +4,7 @@
 
 <template>
     <px-transition-expand :duration="duration">
-        <div :class="bem()" v-show="expanded">
+        <div v-show="expanded" style="position: relative">
             <slot />
         </div>
     </px-transition-expand>
@@ -54,9 +54,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-.px-expander {
-    position: relative;
-}
-</style>

package/components/PxFit.vue

@@ -252,7 +252,9 @@ export default {
             grid-area: 1 / 1;
         }
 
-        @include transition(opacity, $dur: 100ms);
+        & {
+            @include transition(opacity, $dur: 100ms);
+        }
     }
 
     &--fitting & {

package/components/PxFlip.vue

@@ -12,7 +12,7 @@
 -->
 
 <template>
-    <div :class="bem()">
+    <div>
         <!-- in the component -->
         <slot name="default" :state="currentValue">
             <!-- fallback -->
@@ -91,9 +91,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-.px-flip {
-    // add styles here
-}
-</style>

package/components/PxGsapScrubber.vue

@@ -141,6 +141,5 @@ export default {
         font-weight: bold;
         font-size: 12px;
     }
-    // add styles here
 }
 </style>

package/components/PxLabeledInput.vue

@@ -2,7 +2,15 @@
     Describe this component...
 -->
 <template>
-    <div :class="bem({ ...variantsMap })">
+    <div
+        :class="bem({ ...variantsMap })"
+        :style="{
+            display: 'flex',
+            'align-items': 'flex-start',
+            'flex-direction': 'column',
+            gap: '0.5em',
+        }"
+    >
         <label :for="calcInputId" :class="[bem('label'), labelClass]">
             <slot name="label">
                 {{ label }}
@@ -41,14 +49,3 @@ export default {
     // methods: {},
 };
 </script>
-
-<style lang="scss">
-@use '../styles/px.scss' as *;
-
-.px-labeled-input {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 0.5em;
-}
-</style>

package/components/PxQrCode.vue

@@ -6,7 +6,7 @@
 
 -->
 <template>
-    <div :class="bem()">
+    <div style="aspect-ratio: 1">
         <qrcode-vue
             v-if="content"
             :value="content"
@@ -49,9 +49,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-.px-qr-code {
-    aspect-ratio: 1;
-}
-</style>

package/components/PxResizer.vue

@@ -141,6 +141,7 @@ export default {
 
 <style lang="scss">
 @use '../styles/px.scss' as *;
+@use 'sass:color';
 
 .px-resizer {
     position: relative;
@@ -173,7 +174,7 @@ export default {
     &__resize-y {
         color: accent();
         &:hover {
-            color: darken(accent(), 10%);
+            color: color.adjust(accent(), $lightness: -10%);
         }
         &:active {
             opacity: 0.5;

package/components/PxSvgRender.vue

@@ -1,6 +1,5 @@
 <script>
-import { h, createVNode } from 'vue';
-import { parse } from '@vue/compiler-dom';
+import { h } from 'vue';
 
 export default {
     name: 'px-svg-render',

package/components/PxSyncHeight.vue

@@ -2,7 +2,7 @@
     #VUE3 Todo
 -->
 <template>
-    <component v-bind:is="tag" :class="bem()" :style="{ minHeight: groupHeight + 'px' }">
+    <component v-bind:is="tag" :style="{ minHeight: groupHeight + 'px' }">
         <component v-bind:is="innerTag" ref="inner" :class="[bem('inner'), innerClass]">
             <slot />
         </component>
@@ -125,16 +125,3 @@ export default {
     },
 };
 </script>
-
-<!-- <style lang="scss">
-.px-sync-height {
-    position: relative;
-    &__inner {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        display: inline;
-    }
-}
-</style> -->

package/components/PxToggleButton.vue

@@ -206,7 +206,9 @@ export default {
         @include button();
     }
 
-    gap: var(--px-toggle-button-gap);
+    & {
+        gap: var(--px-toggle-button-gap);
+    }
 
     &__icon,
     &__label {
@@ -256,17 +258,17 @@ export default {
 
     // default checked state
     &--checked.px-button--default:not(:disabled) {
-        background-color: color(select);
+        background-color: clr(select);
         box-shadow: none;
         &:hover {
-            background-color: color(select);
+            background-color: clr(select);
             box-shadow: none;
         }
     }
 
     // outline checked state
     &--checked.px-button--outline:not(:disabled) {
-        background-color: color(accent, 0.15);
+        background-color: clr(accent, 0.15);
     }
 
     &--icon & {

package/components/PxTransition.vue

@@ -193,5 +193,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss"></style>

package/dev/demos/Demo-PxCardGrid.vue

@@ -45,7 +45,6 @@ export default {
 
 <style lang="scss">
 .demo-px-card-grid {
-    // add styles here
     padding: 5vh 0 10vh;
 }
 </style>

package/dev/demos/Demo-PxContain.vue

@@ -2,7 +2,7 @@
     Describe this component...
 -->
 <template>
-    <div :class="bem()">
+    <div>
         <px-tester>
             <px-test name="Aspect" testId="pxcontain-aspect" :size="{ h: 600 }">
                 <px-contain aspect="16:9" :px="true">
@@ -104,9 +104,3 @@ export default {
     // methods: {},
 };
 </script>
-
-<style lang="scss">
-.demo-px-contain {
-    // add styles here
-}
-</style>

package/dev/demos/Demo-PxSideDrawer.vue

@@ -2,7 +2,7 @@
     Describe this component...
 -->
 <template>
-    <div :class="bem()">
+    <div>
         <px-side-drawer>
             <section>
                 <a href="#">Link One</a>
@@ -60,10 +60,3 @@ export default {
     // methods: {},
 };
 </script>
-
-<style lang="scss">
-@use '../../styles/px.scss' as *;
-.demo-px-slide-drawer {
-    // add styles here
-}
-</style>

package/dev/demos/Demo-PxStylesPreview.vue

@@ -37,7 +37,5 @@ export default {
     // initialize
     @include init();
     @include boilerplate($scoped: true);
-
-    // add styles here
 }
 </style>

package/dev/demos/Demo-PxSwiper.vue

@@ -2,7 +2,7 @@
     Describe this component...
 -->
 <template>
-    <div :class="bem()">
+    <div>
         <px-swiper :loop="true">
             <px-swiper-slide>
                 <div class="swiper-max-width">
@@ -34,11 +34,3 @@ export default {
     // methods: {},
 };
 </script>
-
-<style lang="scss">
-@use '../../styles/px.scss' as *;
-
-.demo-px-swiper {
-    // add styles here
-}
-</style>

package/package.json

@@ -1,81 +1,79 @@
 {
-  "name": "@thinkpixellab-public/px-vue",
-  "version": "4.1.4",
-  "description": "General purpose Vue components and helpers that can be used across projects.",
-  "author": {
-    "name": "Pixel Lab"
-  },
-  "license": "MIT",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/thinkpixellab/px-vue.git"
-  },
-  "scripts": {
-    "storybook-px": "PX_LOCAL=1 storybook dev -p 6006",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "test": "vitest",
-    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve dev/serve.js",
-    "chromatic": "npx chromatic --project-token=chpt_30d6cbeac803e5a"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.6.11",
-    "@popperjs/core": "^2.11.8",
-    "@storybook/test": "^8.3.4",
-    "@thinkpixellab-public/px-styles": "^4.1.2",
-    "@thinkpixellab-public/px-vue-tester": "^2.0.0",
-    "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
-    "body-scroll-lock": "^3.1.5",
-    "chrono-node": "^2.7.7",
-    "dateformat": "^5.0.3",
-    "gsap": "^3.12.5",
-    "highlight.js": "^11.10.0",
-    "mitt": "^3.0.1",
-    "qrcode": "^1.5.4",
-    "qrcode.vue": "^3.5.0",
-    "sortablejs": "^1.15.3",
-    "storybook-dark-mode": "^4.0.2",
-    "throttle-debounce": "^5.0.2",
-    "tiny-date-picker": "^3.2.8",
-    "tinycolor2": "^1.6.0",
-    "vue": "^3.5.10",
-    "vue-inline-svg": "^3.1.4"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@chromatic-com/storybook": "^2.0.2",
-    "@nuxt/kit": "^3.15.1",
-    "@rushstack/eslint-patch": "^1.10.4",
-    "@storybook/addon-essentials": "^8.3.4",
-    "@storybook/addon-interactions": "^8.3.4",
-    "@storybook/addon-links": "^8.3.4",
-    "@storybook/addon-mdx-gfm": "^8.3.4",
-    "@storybook/blocks": "^8.3.4",
-    "@storybook/manager-api": "^8.3.4",
-    "@storybook/theming": "^8.3.4",
-    "@storybook/vue3": "^8.3.4",
-    "@storybook/vue3-vite": "^8.3.4",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/test-utils": "^2.4.6",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.2.1",
-    "chromatic": "^11.11.0",
-    "eslint": "^9.11.1",
-    "eslint-plugin-storybook": "^0.9.0",
-    "eslint-plugin-vue": "^9.28.0",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "sass": "^1.77.6",
-    "storybook": "^8.3.4",
-    "storybook-addon-pseudo-states": "^4.0.2",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.1",
-    "vue-loader": "^17.4.2"
-  },
-  "bugs": {
-    "url": "https://github.com/thinkpixellab/px-vue/issues"
-  },
-  "homepage": "https://github.com/thinkpixellab/px-vue#readme"
+    "name": "@thinkpixellab-public/px-vue",
+    "version": "4.1.6",
+    "description": "General purpose Vue components and helpers that can be used across projects.",
+    "author": {
+        "name": "Pixel Lab"
+    },
+    "license": "MIT",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/thinkpixellab/px-vue.git"
+    },
+    "scripts": {
+        "storybook-px": "PX_LOCAL=1 storybook dev -p 6006",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "test": "vitest",
+        "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve dev/serve.js",
+        "chromatic": "npx chromatic --project-token=chpt_30d6cbeac803e5a"
+    },
+    "dependencies": {
+        "@floating-ui/dom": "^1.6.13",
+        "@popperjs/core": "^2.11.8",
+        "@thinkpixellab-public/px-styles": "^4.1.3",
+        "@thinkpixellab-public/px-vue-tester": "^2.0.0",
+        "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
+        "body-scroll-lock": "^3.1.5",
+        "chrono-node": "^2.7.8",
+        "dateformat": "^5.0.3",
+        "gsap": "^3.12.7",
+        "highlight.js": "^11.11.1",
+        "mitt": "^3.0.1",
+        "qrcode.vue": "^3.6.0",
+        "sortablejs": "^1.15.6",
+        "throttle-debounce": "^5.0.2",
+        "tiny-date-picker": "^3.2.8",
+        "tinycolor2": "^1.6.0",
+        "vue-inline-svg": "^3.1.4"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.26.7",
+        "@chromatic-com/storybook": "^3.2.4",
+        "@nuxt/kit": "^3.15.4",
+        "@rushstack/eslint-patch": "^1.10.5",
+        "@storybook/addon-essentials": "^8.5.3",
+        "@storybook/addon-interactions": "^8.5.3",
+        "@storybook/addon-links": "^8.5.3",
+        "@storybook/addon-mdx-gfm": "^8.5.3",
+        "@storybook/blocks": "^8.5.3",
+        "@storybook/manager-api": "^8.5.3",
+        "@storybook/test": "^8.5.3",
+        "@storybook/theming": "^8.5.3",
+        "@storybook/vue3": "^8.5.3",
+        "@storybook/vue3-vite": "^8.5.3",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "@vue/eslint-config-prettier": "^10.2.0",
+        "@vue/test-utils": "^2.4.6",
+        "babel-eslint": "^10.1.0",
+        "babel-loader": "^9.2.1",
+        "chromatic": "^11.25.2",
+        "eslint": "^9.19.0",
+        "eslint-plugin-storybook": "^0.11.2",
+        "eslint-plugin-vue": "^9.32.0",
+        "jsdom": "^26.0.0",
+        "prettier": "^3.4.2",
+        "sass": "^1.83.4",
+        "storybook": "^8.5.3",
+        "storybook-addon-pseudo-states": "^4.0.2",
+        "storybook-dark-mode": "^4.0.2",
+        "vite": "^6.0.11",
+        "vitest": "^3.0.5",
+        "vue-loader": "^17.4.2"
+    },
+    "bugs": {
+        "url": "https://github.com/thinkpixellab/px-vue/issues"
+    },
+    "homepage": "https://github.com/thinkpixellab/px-vue#readme"
 }

package/components/PxBaseColor.vue

@@ -1,187 +0,0 @@
-<script>
-import tinycolor from 'tinycolor2';
-import {
-    hsvaEnsureObject,
-    hsvaIsEqual,
-    hsvaToHsla,
-    hslaToStr,
-    hsvaContrastColor,
-} from '../utils/color.js';
-
-const TINY_FORMATS = ['rgb', 'prgb', 'hex6', 'hex3', 'hex8', 'name', 'hsl', 'hsv'];
-
-export default {
-    name: 'px-color-picker',
-
-    props: {
-        /**
-         * The color value.
-         */
-        color: { default: '#FF0000' },
-
-        /**
-         * The format of the color value (used for emitting events, v-model, and the default format
-         * for getColor). Allowed values are the same as those available from the tinycolor library
-         * (rgb, prgb, hex6, hex3, hex8, name, hsl, hsv) as well as 'auto' (which will attempt to
-         * use the same format as the last value set with the color prop) and 'tiny' (which will
-         * return a tinycolor object) and 'hsva' which will return hsva values as an object. The
-         * format has the advantage of not requiring a tinycolor object to be created when the color
-         * changes.
-         *
-         * @values rgb, prgb, hex6, hex3, hex8, name, hsl, hsv, auto, tiny
-         */
-        format: { type: String, default: 'hsva' },
-
-        /**
-         * Whether alpha colors are enabled.
-         */
-        alphaEnabled: { type: Boolean, default: false },
-    },
-
-    data() {
-        return { autoFormat: this.format, h: 0, s: 0, v: 0, a: 1 };
-    },
-
-    computed: {
-        hsva() {
-            return { h: this.h, s: this.s, v: this.v, a: this.alphaEnabled ? this.a : 1 };
-        },
-        hsla() {
-            return hsvaToHsla(this.hsva);
-        },
-        hslStr() {
-            return hslaToStr(this.hsla, false);
-        },
-        hslaStr() {
-            return hslaToStr(this.hsla, true);
-        },
-        hslaTransparentStr() {
-            return hslaToStr({ ...this.hsla, a: 0 }, true);
-        },
-        hueStr() {
-            return `hsl(${this.h}, 100%, 50%)`;
-        },
-        contrastStr() {
-            return hsvaContrastColor(this.hsva);
-        },
-        eyedropperSupported() {
-            return window?.EyeDropper;
-        },
-    },
-
-    watch: {
-        color(nv) {
-            // update colorValue when color changes
-            this.setColor(nv);
-        },
-        hsla() {
-            // emit change when this changes as a proxy for changes to hsva as individual props
-            this.emitChange();
-        },
-    },
-
-    mounted() {
-        if (this.color) {
-            this.setColor(this.color);
-        }
-
-        // TODO: default is hsva, but that isn't in the TINY_FORMATS list
-        // if (this.format) {
-        //     if (!TINY_FORMATS.includes(this.format)) {
-        //         console.warn(
-        //             `[PxBaseColor] Invalid format: "${this.format}". See comments in PxBaseColor.vue`,
-        //         );
-        //     }
-        // }
-    },
-    methods: {
-        setColor(strOrHsva) {
-            if (typeof strOrHsva === 'string') {
-                this.setColorStr(strOrHsva);
-            }
-
-            if (typeof strOrHsva === 'object') {
-                this.setColorHsva(strOrHsva);
-            }
-        },
-
-        setColorStr(str) {
-            // this is for efficiency but also to prevent color creep as we convert between formats
-            if (this.lastEmit == str) {
-                return;
-            }
-
-            const tiny = tinycolor(str);
-            this.autoFormat = tiny.getFormat();
-
-            const hsva = tiny.toHsv();
-            this.setColorHsva(hsva);
-        },
-
-        setColorHsva(hsva) {
-            if (this.isCurrentHsva(hsva)) {
-                return;
-            }
-
-            this.h = hsva.h;
-            this.s = hsva.s;
-            this.v = hsva.v;
-            this.a = hsva.a;
-        },
-
-        emitChange() {
-            const clr = this.getColor(this.format);
-
-            this.lastEmit = clr;
-
-            this.$emit('update:color', clr);
-            this.$emit('change', clr);
-        },
-
-        getColor(format = null) {
-            format = format || this.format;
-
-            if (format == 'auto') {
-                format = this.autoFormat;
-            }
-
-            let clr = { h: this.h, s: this.s, v: this.v, a: this.a };
-
-            if (format == 'hsva') {
-                return clr;
-            }
-
-            if (format && [...TINY_FORMATS, 'tiny'].includes(format)) {
-                const tiny = tinycolor(clr);
-
-                if (format == 'tiny') {
-                    clr = tiny;
-                } else {
-                    clr = tiny.toString(format);
-                }
-            }
-
-            return clr;
-        },
-
-        colorStrToHsva(str) {
-            const tiny = tinycolor(str);
-            return tiny.toHsv();
-        },
-
-        isCurrentHsva(hOrObj, s, v, a) {
-            const hsvaCompare = hsvaEnsureObject(hOrObj, s, v, a);
-            return hsvaIsEqual(this.hsva, hsvaCompare);
-        },
-
-        setColorFromEyedropper() {
-            if (this.eyedropperSupported) {
-                const eyeDropper = new EyeDropper();
-                eyeDropper.open().then(result => {
-                    this.setColorStr(result.sRGBHex);
-                });
-            }
-        },
-    },
-};
-</script>