@scalar/draggable - npm Package Compare versions

Comparing version 0.0.2 to 0.0.5

CHANGELOG.md

 # @scalar/draggable
 
+## 0.0.5
+
+### Patch Changes
+
+- 45dc04b: fix: can’t release packages
+
+## 0.0.4
+
+### Patch Changes
+
+- f0cc812: chore: update exports for draggable and add jsdoc types
+- 05e2e27: chore: add provenance statement
+- bf430f6: fix: export draggable types
+
+## 0.0.3
+
+### Patch Changes
+
+- 07211ad: chore: added new lint rule for type importing for better perf
+
 ## 0.0.2
@@ -4,0 +24,0 @@

dist/index.d.ts

 import Draggable from './Draggable.vue';
+export type { DraggingItem, HoveredItem } from './store';
 export { Draggable };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,10 +0,9 @@
-import { ref, defineComponent, computed, mergeProps, useSSRContext } from 'vue';
-import { ssrRenderAttrs, ssrRenderSlot } from 'vue/server-renderer';
-
-ref(null);
-const hoveredItem = ref(null);
-
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { ref as D, defineComponent as S, computed as p, openBlock as T, createElementBlock as Y, normalizeClass as _, withModifiers as v, unref as m, renderSlot as w } from "vue";
+const o = D(null), r = D(null), C = (i, d) => {
+  let t = !1;
+  return function(...l) {
+    t || (i(...l), t = !0, setTimeout(() => t = !1, d));
+  };
+}, k = /* @__PURE__ */ S({
   __name: "Draggable",
-  __ssrInlineRender: true,
   props: {
@@ -17,33 +16,39 @@ ceiling: { default: 0.8 },
   emits: ["onDragEnd", "onDragStart"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    computed(
-      () => (props.parentIds.length ?? 0) > 0 ? props.parentIds[props.parentIds.length - 1] : null
-    );
-    const positionDict = ["above", "below", "asChild"];
-    const containerClass = computed(() => {
-      let classList = "sidebar-indent-nested";
-      if (props.id === hoveredItem.value?.id) {
-        classList += ` dragover-${positionDict[hoveredItem.value.offset]}`;
-      }
-      return classList;
-    });
-    return (_ctx, _push, _parent, _attrs) => {
-      _push(`<div${ssrRenderAttrs(mergeProps({
-        class: containerClass.value,
-        draggable: "true"
-      }, _attrs))}>`);
-      ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
-      _push(`</div>`);
+  setup(i, { emit: d }) {
+    const t = i, l = d, f = p(
+      () => (t.parentIds.length ?? 0) > 0 ? t.parentIds[t.parentIds.length - 1] : null
+    ), I = (e) => {
+      !e.dataTransfer || !(e.target instanceof HTMLDivElement) || (e.target.classList.add("dragging"), e.dataTransfer.dropEffect = "move", e.dataTransfer.effectAllowed = "move", o.value = { id: t.id, parentId: f.value }, l("onDragStart", { id: t.id, parentId: f.value }));
+    }, u = C((e) => {
+      if (o.value?.id === t.id || t.parentIds.includes(o.value?.id ?? ""))
+        return;
+      const n = r.value?.offset, a = e.target.offsetHeight, g = t.floor * a, c = t.ceiling * a;
+      let s = 3;
+      e.offsetY <= 0 && n && n !== 3 ? s = n : e.offsetY <= g ? s = 0 : e.offsetY >= c ? s = 1 : e.offsetY > g && e.offsetY < c && (s = 2), r.value = { id: t.id, parentId: f.value, offset: s };
+    }, 25), h = ["above", "below", "asChild"], E = p(() => {
+      let e = "sidebar-indent-nested";
+      return t.id === r.value?.id && (e += ` dragover-${h[r.value.offset]}`), e;
+    }), b = () => {
+      if (!r.value || !o.value)
+        return;
+      const e = { ...o.value }, n = { ...r.value };
+      o.value = null, r.value = null, document.querySelectorAll("div.dragging").forEach((a) => a.classList.remove("dragging")), e.id !== n.id && l("onDragEnd", e, n);
     };
+    return (e, n) => (T(), Y("div", {
+      class: _(E.value),
+      draggable: "true",
+      onDragend: b,
+      onDragover: n[0] || (n[0] = v(
+        //@ts-ignore
+        (...a) => m(u) && m(u)(...a),
+        ["prevent", "stop"]
+      )),
+      onDragstart: v(I, ["stop"])
+    }, [
+      w(e.$slots, "default")
+    ], 34));
   }
 });
-
-const _sfc_setup = _sfc_main.setup;
-_sfc_main.setup = (props, ctx) => {
-  const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/Draggable.vue");
-  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+export {
+  k as Draggable
 };
-
-export { _sfc_main as Draggable };

package.json

@@ -8,6 +8,11 @@ {
   "bugs": "https://github.com/scalar/scalar/issues/new/choose",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scalar/scalar.git",
+    "directory": "packages/draggable"
+  },
   "keywords": [
     "vue drag and drop draggable html"
   ],
-  "version": "0.0.2",
+  "version": "0.0.5",
   "engines": {
@@ -21,12 +26,6 @@ "node": ">=18"
       "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./css/*.css": {
-      "import": "./dist/css/*.css",
-      "require": "./dist/css/*.css"
-    },
-    "./*.css": {
-      "import": "./dist/*.css",
-      "require": "./dist/*.css"
-    }
+    "./*.css": "./dist/*.css"
   },
@@ -38,7 +37,2 @@ "files": [
   "module": "dist/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/scalar/scalar.git",
-    "directory": "packages/draggable"
-  },
   "devDependencies": {
@@ -48,6 +42,6 @@ "@vitejs/plugin-vue": "^5.0.4",
     "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.6.3",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
-    "vue-tsc": "^1.8.19",
-    "@scalar/build-tooling": "0.1.2"
+    "vue-tsc": "^1.8.19"
   },
@@ -54,0 +48,0 @@ "peerDependencies": {

README.md

@@ -1,2 +0,2 @@
-# Scalar Draggable Componebtb
+# Scalar Draggable component
 
@@ -6,3 +6,3 @@ [![Version](https://img.shields.io/npm/v/%40scalar/draggable)](https://www.npmjs.com/package/@scalar/draggable)
 [![License](https://img.shields.io/npm/l/%40scalar%2Fdraggable)](https://www.npmjs.com/package/@scalar/draggable)
-[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/8HeZcRGPFS)
+[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)
 
@@ -17,3 +17,3 @@ ## Installation
 
-A complete example can be found the [playground](https://github.com/scalar/scalar/packages/draggable/playground), but basically you need a data structure like:
+A complete example can be found the [playground](https://github.com/scalar/scalar/tree/main/packages/draggable/playground), but basically you need a data structure like:
 
@@ -79,2 +79,2 @@ ```ts
 
-You can find an example in this repo under the [playground](https://github.com/scalar/scalar/packages/draggable/playground)
+You can find an example in this repo under the [playground](https://github.com/scalar/scalar/tree/main/packages/draggable/playground)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15652

increased by20.22%

Number of package files

15

increased by7.14%

Worsened metrics

Lines of code

187

decreased by-6.5%

Number of low quality alerts

2

increased by100%

No dependency changes