@thinkpixellab-public/px-vue 4.0.14 → 4.0.16

package/components/PxArrowScroller.vue

@@ -53,8 +53,8 @@ ar
 import PxBaseResize from '../bases/PxBaseResize.vue';
 import PxIconButton from './PxIconButton.vue';
 import PxIcon from './PxIcon.vue';
-import arrowStartIconDefault from '../assets/feather/arrow-left.svg?url';
-import arrowEndIconDefault from '../assets/feather/arrow-right.svg?url';
+// import arrowStartIconDefault from '../assets/feather/arrow-left.svg?url';
+// import arrowEndIconDefault from '../assets/feather/arrow-right.svg?url';
 import { svgArrow } from '../utils/svgIcons.js';
 
 import propsFilter from '../utils/propsFilter.js';
@@ -64,7 +64,7 @@ import propsFilter from '../utils/propsFilter.js';
 Creates a horizontally scrolling container with an invisible scrollbar and arrows on either side.
 
 ```html
-<px-arrow-scroller :arrow-start-src="require(...)" :arrow-end-src="require(...)">
+<px-arrow-scroller :arrow-start-src="yourCustomArrowStartIcon" :arrow-end-src="yourCustomArrowEndIcon">
 
     <template #button="{location}">
         // this can look like a button but it will ultimately be wrapped by a button

package/components/PxTable.vue

@@ -341,7 +341,9 @@ export default {
         }
     },
     beforeUnmount() {
-        this.sortable.destroy();
+        if (this.sortable) {
+            this.sortable.destroy();
+        }
     },
     methods: {
         getItemValue(item, column) {

package/components/PxToggle.vue

@@ -7,6 +7,7 @@
         aria-role="switch"
         :aria-checked="checkedValue"
         @click="toggleChecked"
+        :type="buttonType"
     >
         <span
             :class="[bem('track'), trackClass]"
@@ -66,6 +67,9 @@ export default {
 
         /** Toggle the label/toggle order */
         reverse: { type: Boolean, default: false },
+
+        // 'submit' (default for <button> if not set), 'reset' (resets form) or 'button' (no action)
+        buttonType: { type: String, default: 'button' },
     },
 };
 </script>

package/components/PxTransitionItem.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { getClientRect } from '@thinkpixellab-public/px-vue/utils/utils.js';
+import { getClientRect } from '../utils/utils.js';
 
 export default {
     name: 'px-transition-item',

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.0.14",
+    "version": "4.0.16",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
+    "type": "module",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/thinkpixellab/px-vue.git"
@@ -16,59 +17,56 @@
         "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve dev/serve.js"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.6.3",
+        "@floating-ui/dom": "^1.6.7",
         "@popperjs/core": "^2.11.8",
-        "@storybook/test": "^8.0.8",
+        "@storybook/test": "^8.1.11",
         "@thinkpixellab-public/px-styles": "^4.0.2",
-        "@thinkpixellab-public/px-vue": "^3.0.97",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
-        "@vueuse/core": "^10.9.0",
         "body-scroll-lock": "^3.1.5",
-        "chrono-node": "^2.3.8",
+        "chrono-node": "^2.7.6",
         "dateformat": "^5.0.3",
-        "debounce": "^1.2.1",
-        "gsap": "^3.10.4",
+        "gsap": "^3.12.5",
         "highlight.js": "^11.9.0",
         "mitt": "^3.0.1",
-        "qrcode": "^1.5.1",
+        "qrcode": "^1.5.3",
         "qrcode.vue": "^3.4.1",
         "sortablejs": "^1.15.2",
-        "storybook-dark-mode": "^4.0.1",
-        "throttle-debounce": "^5.0.0",
+        "storybook-dark-mode": "^4.0.2",
+        "throttle-debounce": "^5.0.2",
         "tiny-date-picker": "^3.2.8",
         "tinycolor2": "^1.6.0",
-        "vue": "^3.4.21",
-        "vue-inline-svg": "^3.1.0"
+        "vue": "^3.4.31",
+        "vue-inline-svg": "^3.1.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.23.9",
-        "@chromatic-com/storybook": "^1.3.2",
-        "@rushstack/eslint-patch": "^1.7.2",
-        "@storybook/addon-essentials": "^8.0.8",
-        "@storybook/addon-interactions": "^8.0.8",
-        "@storybook/addon-links": "^8.0.8",
-        "@storybook/addon-mdx-gfm": "^8.0.8",
-        "@storybook/blocks": "^8.0.8",
-        "@storybook/manager-api": "^8.0.8",
-        "@storybook/theming": "^8.0.8",
-        "@storybook/vue3": "^8.0.8",
-        "@storybook/vue3-vite": "^8.0.8",
-        "@vitejs/plugin-vue": "^5.0.4",
+        "@babel/core": "^7.24.7",
+        "@chromatic-com/storybook": "^1.6.0",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@storybook/addon-essentials": "^8.1.11",
+        "@storybook/addon-interactions": "^8.1.11",
+        "@storybook/addon-links": "^8.1.11",
+        "@storybook/addon-mdx-gfm": "^8.1.11",
+        "@storybook/blocks": "^8.1.11",
+        "@storybook/manager-api": "^8.1.11",
+        "@storybook/theming": "^8.1.11",
+        "@storybook/vue3": "^8.1.11",
+        "@storybook/vue3-vite": "^8.1.11",
+        "@vitejs/plugin-vue": "^5.0.5",
         "@vue/eslint-config-prettier": "^9.0.0",
-        "@vue/test-utils": "^2.4.5",
+        "@vue/test-utils": "^2.4.6",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^9.1.3",
-        "eslint": "^8.57.0",
+        "eslint": "^9.6.0",
         "eslint-plugin-storybook": "^0.8.0",
-        "eslint-plugin-vue": "^9.24.0",
-        "jsdom": "^24.0.0",
-        "prettier": "^3.2.5",
-        "sass": "^1.72.0",
-        "storybook": "^8.0.8",
-        "storybook-addon-pseudo-states": "^3.0.1",
-        "vite": "^5.2.6",
-        "vitest": "^1.4.0",
+        "eslint-plugin-vue": "^9.27.0",
+        "jsdom": "^24.1.0",
+        "prettier": "^3.3.2",
+        "sass": "^1.77.6",
+        "storybook": "^8.1.11",
+        "storybook-addon-pseudo-states": "^3.1.1",
+        "vite": "^5.3.2",
+        "vitest": "^1.6.0",
         "vue-loader": "^17.4.2"
     }
 }