eco-vue-js 0.26.1 → 0.26.3

package/dist/components/DragContainer/WDragContainer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WDragContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/DragContainer/WDragContainer.vue"],"names":[],"mappings":"AAyBA;AAAA,OAiGO,EAAC,KAAK,cAAc,EAAa,MAAM,KAAK,CAAA;AAKnD,QAAA,MAAM,YAAY,GAAK,IAAI,EAC1B,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAgKO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA9JtD,kCAAkC;cAC5B,IAAI,EAAE;QACZ,yCAAyC;mBAC9B,OAAO;;;KA2JuE,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;QAlJT,0QAA0Q;kBAChQ,CAAC,KAAK,EAAE;YAChB,IAAI,EAAE,IAAI,CAAA;YACV,KAAK,EAAE,MAAM,CAAA;YACb,IAAI,EAAE,OAAO,CAAA;YACb,WAAW,EAAE,IAAI,EAAE,CAAA;YACnB,QAAQ,EAAE,OAAO,CAAA;YACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;YACpB,SAAS,EAAE,cAAc,CAAA;SAC1B,KAAK,IAAI;;cAdN,aAAa,SAAS,IAAI,EAAE,KAAG,IAAI;EA2JrC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WDragContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/DragContainer/WDragContainer.vue"],"names":[],"mappings":"AAyBA;AAAA,OAqGO,EAAC,KAAK,cAAc,EAAuB,MAAM,KAAK,CAAA;AAK7D,QAAA,MAAM,YAAY,GAAK,IAAI,EAC1B,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAqKO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAnKtD,kCAAkC;cAC5B,IAAI,EAAE;QACZ,yCAAyC;mBAC9B,OAAO;;;KAgKuE,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;QAvJT,0QAA0Q;kBAChQ,CAAC,KAAK,EAAE;YAChB,IAAI,EAAE,IAAI,CAAA;YACV,KAAK,EAAE,MAAM,CAAA;YACb,IAAI,EAAE,OAAO,CAAA;YACb,WAAW,EAAE,IAAI,EAAE,CAAA;YACnB,QAAQ,EAAE,OAAO,CAAA;YACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;YACpB,SAAS,EAAE,cAAc,CAAA;SAC1B,KAAK,IAAI;;cAdN,aAAa,SAAS,IAAI,EAAE,KAAG,IAAI;EAgKrC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/DragContainer/WDragContainer.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import DragItem_default from "./components/DragItem.vue.js";
 import { useDragContainer } from "./use/useDragContainer.js";
-import { Fragment, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderList, renderSlot, unref, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderList, renderSlot, unref, watch, withCtx } from "vue";
 //#region src/components/DragContainer/WDragContainer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "relative grid grid-cols-1" };
 var WDragContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -14,45 +14,47 @@ var WDragContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const props = __props;
 		const emit = __emit;
 		const { draggable, dragging, startDrag, stopDrag } = useDragContainer();
-		const value = ref(props.list.slice());
-		let dragItem = null;
-		const dragStart = (item) => {
+		const getInitialOrder = (list) => list.map((_, index) => index);
+		const order = ref(getInitialOrder(props.list));
+		const orderedList = computed(() => order.value.map((index) => props.list[index]));
+		let dragIndex = null;
+		const dragStart = (index) => {
 			startDrag();
-			dragItem = item;
+			dragIndex = index;
 		};
-		const dragEnter = (order) => {
-			if (dragItem === null) return;
-			const index = value.value.indexOf(dragItem);
-			if (index === -1) return;
-			value.value.splice(index, 1);
-			value.value.splice(order, 0, dragItem);
+		const dragEnter = (position) => {
+			if (dragIndex === null) return;
+			const from = order.value.indexOf(dragIndex);
+			if (from === -1) return;
+			order.value.splice(from, 1);
+			order.value.splice(position, 0, dragIndex);
 		};
 		const dragEnd = () => {
 			stopDrag();
-			dragItem = null;
+			dragIndex = null;
 		};
 		const drop = () => {
-			emit("update:list", value.value);
+			emit("update:list", orderedList.value);
 			dragEnd();
 		};
-		watch(() => props.list, (newList) => {
-			value.value = newList.slice();
+		watch([() => props.list, () => props.list.length], ([newList]) => {
+			order.value = getInitialOrder(newList);
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item, index) => {
 				return openBlock(), createBlock(DragItem_default, {
 					key: index,
 					disabled: __props.disabled || !unref(draggable),
-					order: value.value.indexOf(item),
-					"onDrag:start": ($event) => dragStart(item),
+					order: order.value.indexOf(index),
+					"onDrag:start": ($event) => dragStart(index),
 					"onDrag:enter": dragEnter,
 					"onDrag:end": drop
 				}, {
 					default: withCtx((defaultScope) => [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, defaultScope, {
 						item,
-						index: value.value.indexOf(item),
-						last: value.value.indexOf(item) === value.value.length - 1,
-						orderedList: value.value,
+						index: order.value.indexOf(index),
+						last: order.value.indexOf(index) === order.value.length - 1,
+						orderedList: orderedList.value,
 						dragging: unref(dragging)
 					}))]),
 					_: 2

package/dist/components/Tabs/WTabs.vue_vue_type_script_setup_true_lang.js

@@ -434,8 +434,8 @@ var WTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						"--direction-factor": isDirect.value ? "1" : "-1"
 					})
 				}, [createVNode(TransitionGroup, {
-					"enter-active-class": "transition-[translate,opacity] duration-250 w-full",
-					"leave-active-class": "transition-[translate,opacity] duration-250 w-full absolute top-0",
+					"enter-active-class": "transition-[translate,opacity] duration-250 w-full [overflow-anchor:none]",
+					"leave-active-class": "transition-[translate,opacity] duration-250 w-full absolute top-0 [overflow-anchor:none]",
 					"enter-from-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor))]",
 					"leave-to-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0 absolute" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor)*-1)]",
 					css: !__props.flat

package/docs/components/drag-container.md

@@ -1,6 +1,6 @@
 # Drag container
 
-`WDragContainer` lets the user reorder `list` by dragging its items. It doesn't render the items itself: the default slot renders each one, and binds `container` — the drag attributes and its place in the order — to the item's root. An item becomes draggable when `initDrag` is called, usually on mousedown of a drag handle, so that text in the item can still be selected. The items move as the dragged one passes over them; `update:list` emits the new order once it is dropped.
+`WDragContainer` lets the user reorder `list` by dragging its items. It doesn't render the items itself: the default slot renders each one, and binds `container` — the drag attributes and its place in the order — to the item's root. An item becomes draggable when `initDrag` is called, usually on mousedown of a drag handle, so that text in the item can still be selected. The items move as the dragged one passes over them; `update:list` emits the new order once it is dropped. Items are tracked by their position, so `list` may hold equal values — the same string twice, or the same object.
 
 The `w-drag-item-overlay-*` utility sets the color laid over the item being dragged.
 

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.1, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.3, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
 

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.26.1",
+  "version": "0.26.3",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",