Merge branch 'main' into UI-367

bump.config.ts

@@ -0,0 +1,9 @@
+export default {
+  files: [
+    'package.json',
+    'packages/core/package.json',
+    'packages/icons/package.json',
+    'packages/visuals/package.json',
+    'packages/vue3/package.json',
+  ],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youcan/ui",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "packageManager": "[email protected]",
   "engines": {
     "node": "^20.9.0",
@@ -14,11 +14,11 @@
     "lint": "pnpm eslint && pnpm stylelint",
     "lint:fix": "pnpm eslint --fix && pnpm stylelint --fix",
     "prepare": "pnpm -r run stub",
-    "release": "pnpm build && bumpp package.json packages/*/package.json --commit \"[chore]: Release v\" --push --tag && pnpm -r release"
+    "release": "pnpm build && bumpp --commit \"[chore]: Release v\" --push --tag && pnpm -r release"
   },
   "devDependencies": {
     "@youcan/eslint-config": "2.5.6-beta.7",
-    "bumpp": "^8.2.1",
+    "bumpp": "^9.4.1",
     "eslint": "^8.33.0",
     "mitata": "^0.1.6",
     "postcss-html": "^1.5.0",

packages/alto/src/components/Color/ColorInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 import type { ColorInputProps } from './types';
 import { ColorPicker } from '~/components';
@@ -38,7 +38,22 @@ function toggle(override = !show.value) {
 function updateModelValue(value: string) {
   emit('update:modelValue', value);
 }
+
+function handleScroll() {
+  if (show.value) {
+    show.value = false;
+  }
+}
+
 onClickOutside(picker, () => toggle(false));
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+});
 </script>
 
 <template>

packages/alto/src/components/Dropdown/Dropdown.vue

@@ -266,8 +266,15 @@ function setItems(items: DropdownValue[]) {
   itemsList.value = Array.isArray(items) ? items : [];
 }
 
+function handleWindowScroll() {
+  if (show.value) {
+    show.value = false;
+  }
+}
+
 onMounted(() => {
   window.addEventListener('resize', handleResize);
+  window.addEventListener('scroll', handleWindowScroll);
 
   dropdown.value?.addEventListener('keydown', handleKeypress);
 
@@ -278,6 +285,7 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
   window.removeEventListener('keydown', handleKeypress);
+  window.removeEventListener('scroll', handleWindowScroll);
 });
 
 watch(() => props.items, (newValue) => {

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/ui-core",
   "type": "module",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "description": "",
   "author": "YouCan <[email protected]> (https://github.com/youcan-shop/)",
   "homepage": "https://github.com/youcan-shop/youcan-ui",

packages/icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/ui-icons",
   "type": "module",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "description": "YouCan icon set in Iconify JSON format",
   "author": "YouCan <[email protected]> (https://github.com/youcan-shop/)",
   "license": "MIT",

packages/visuals/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/ui-visuals",
   "type": "module",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "description": "YouCan visuals set in Iconify JSON format",
   "author": "YouCan <[email protected]> (https://github.com/youcan-shop/)",
   "license": "MIT",

packages/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youcan/ui-vue3",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "description": "YouCan Vue3 components library",
   "author": "YouCan <[email protected]> (https://github.com/youcan-shop/)",
   "license": "MIT",

packages/vue3/src/components/ResourcePicker/Internal/Resource.vue

@@ -45,7 +45,7 @@ function handleCheck(e: Event) {
 <style scoped>
 .resource {
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   padding: 0 16px;
   transition: background-color 0.3s;
   border-bottom: var(--border);

packages/vue3/src/components/Skeleton/Skeleton.vue

@@ -28,7 +28,7 @@ withDefaults(
   flex-direction: column;
   width: 100%;
   row-gap: 15px;
-  justify-items: start;
+  justify-items: flex-start;
 }
 
 .pulse {

packages/vue3/src/components/Table/Table.vue

@@ -221,7 +221,7 @@ function selectRow(index: number, data: boolean) {
   display: flex;
   box-sizing: border-box;
   align-items: center;
-  justify-content: start;
+  justify-content: flex-start;
   width: 100%;
   overflow: auto hidden;
 }