@get-set/gs-sortable 0.0.36 → 0.0.37

package/helpers/uihelpers.ts

@@ -0,0 +1,44 @@
+export const NewGuid = (): string => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+export const removeCssFromHead = (key: string): void => {
+  const style = document.querySelector(`head style[data-key='${key}']`);
+  if (style != null) {
+    style.remove();
+  }
+};
+
+export const injectCssToHead = (css: string, key: string): void => {
+  const style = document.createElement('style');
+  style.dataset.key = key;
+  style.innerHTML = css;
+  document.head.appendChild(style);
+};
+
+const camelToKebab = (str: string): string =>
+  str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+export const convertScssToCss = (scssObj: Record<string, any>): string => {
+  const convertObjectToCss = (
+    obj: Record<string, any>,
+    parent: string = '',
+  ): string => {
+    let css = '';
+    for (const key in obj) {
+      const value = obj[key];
+      if (typeof value === 'object') {
+        const newParent = parent ? `${parent} ${key}` : key;
+        css += convertObjectToCss(value, newParent);
+      } else {
+        css += `${parent} { ${camelToKebab(key)}: ${value}; }\n`;
+      }
+    }
+    return css;
+  };
+  return convertObjectToCss(scssObj, '');
+};

package/package.json

@@ -1,43 +1,71 @@
-{
-  "name": "@get-set/gs-sortable",
-  "version": "0.0.36",
-  "description": "Get-Set Sortable",
-  "main": "index.js",
-  "author": "Get-Set",
-  "license": "ISC",
-  "files": [
-    "index.js",
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc"
-  },
-  "peerDependencies": {
-    "react": ">=16.0.0"
-  },
-  "keywords": [
-    "grid",
-    "flexiblegrid",
-    "plugin",
-    "sortable",
-    "draggable",
-    "droppable",
-    "react",
-    "react-component"
-  ],
-  "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.4",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@types/react": "^19.1.3",
-    "cpy-cli": "^5.0.0",
-    "prettier": "2.7.1",
-    "raw-loader": "^4.0.2"
-  },
-  "dependencies": {
-    "@types/prop-types": "^15.7.13",
-    "jsdoc": "^4.0.3",
-    "prop-types": "^15.8.1"
-  }
-}
+{
+  "name": "@get-set/gs-sortable",
+  "version": "0.0.37",
+  "description": "Get-Set Sortable",
+  "author": "Get-Set",
+  "license": "ISC",
+  "main": "dist/components/GSSortable.js",
+  "module": "dist/components/GSSortable.js",
+  "types": "dist/components/GSSortable.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/components/GSSortable.js",
+      "require": "./dist-js/bundle.js"
+    }
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:react",
+    "build:js": "webpack --config webpack.config.js",
+    "build:react": "tsc -p tsconfig.react.json"
+  },
+  "keywords": [
+    "grid",
+    "sortable",
+    "draggable",
+    "droppable",
+    "plugin",
+    "react",
+    "react-component"
+  ],
+  "dependencies": {
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0 || ^18.0 || ^19.0",
+    "react-dom": "^16.8.0 || ^17.0 || ^18.0 || ^19.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.0",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
+    "@types/react": "^18.0.0",
+    "babel-loader": "^9.1.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.3.0"
+  },
+  "files": [
+    "dist",
+    "dist-js",
+    "components",
+    "constants",
+    "types",
+    "actions",
+    "helpers",
+    "styles"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles/GSSortable.css

@@ -0,0 +1,39 @@
+.gs-sortable-instance {
+  box-sizing: border-box;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+}
+.gs-sortable-instance.gs-sortable-active {
+  z-index: 2;
+}
+.gs-sortable-instance * {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+.gs-sortable-instance .gs-sortable-placeholder {
+  position: absolute;
+  background-color: #f1f1f1;
+  border: 1px solid;
+  z-index: 1;
+}
+.gs-sortable-instance .gs-sortable-item {
+  z-index: 2;
+}
+.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
+  z-index: 3;
+}
+.gs-sortable-instance .gs-sortable-item-inmove {
+  transition: none !important;
+  z-index: 99999;
+}
+.gs-sortable-instance .gs-sortable-item-addjusting {
+  z-index: 99999;
+}
+.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
+  width: -moz-max-content;
+  width: max-content;
+}/*# sourceMappingURL=GSSortable.css.map */

package/styles/GSSortable.scss

@@ -0,0 +1,38 @@
+.gs-sortable-instance {
+  box-sizing: border-box;
+  user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+  &.gs-sortable-active {
+    z-index: 2;
+  }
+
+  * {
+    user-select: none !important;
+  }
+  .gs-sortable-placeholder {
+    position: absolute;
+    background-color: #f1f1f1;
+    border: 1px solid;
+    z-index: 1;
+  }
+  .gs-sortable-item {
+    z-index: 2;
+    &.gs-sortable-item-active-parent {
+      z-index: 3;
+    }
+  }
+  .gs-sortable-item-inmove {
+    //transition: width 0.2s, height 0.2s !important;
+    transition: none !important;
+    z-index: 99999;
+  }
+  .gs-sortable-item-addjusting {
+    z-index: 99999;
+  }
+  &.gs-sortable-row {
+    .gs-sortable-item {
+      width: max-content;
+    }
+  }
+}

package/types/global.d.ts

@@ -0,0 +1,19 @@
+import { Ref, DraggableInfo } from './ref';
+
+declare global {
+  interface Window {
+    GSSortable: any;
+    GSSortableConfigue?: {
+      references: Array<{ key: string; ref: Ref }>;
+      overInItemRef?: Ref;
+      takeFrom?: Ref;
+      draggableInfo?: DraggableInfo;
+      instance: (ref: string) => Ref | undefined;
+    };
+    // Scroll position tracking for drag-while-scroll correction
+    scrollY: number;
+    scrollX: number;
+  }
+}
+
+export {};

package/types/params.ts

@@ -0,0 +1,24 @@
+export interface ResponsiveOption {
+  windowSize: number;
+  params: Partial<Params>;
+}
+
+export interface Params {
+  reference?: string;
+  handler?: string;
+  className?: string;
+  width?: string;
+  takeClone?: boolean;
+  afterSort?: (items: NodeListOf<Element>) => void;
+  gsx?: Record<string, any>;
+  gap?: string;
+  allowOutOfBox?: boolean;
+  count?: number;
+  type?: 'row' | 'column' | 'grid';
+  // Array of reference keys from other GSSortable instances that can drop into this one
+  acceptFrom?: string[];
+  responsive?: ResponsiveOption[];
+  beforeInit?: () => void;
+  afterInit?: () => void;
+  [key: string]: any;
+}

package/types/ref.ts

@@ -0,0 +1,41 @@
+import { Params } from './params';
+
+export interface UiData {
+  containerPT: number;
+  containerPR: number;
+  containerPB: number;
+  containerPL: number;
+  containerWidth: number;
+  currentHeight: number;
+  currentWidth: number;
+  itemWidth: number;
+  gapX: number;
+  gapY: number;
+}
+
+export interface Ref {
+  grid: HTMLElement;
+  currentParams: Params & { reference: string };
+  itemWidth?: string;
+  uiData?: UiData;
+  count?: number;
+  isAdjusting: boolean;
+  itemResizeObservers?: ResizeObserver[];
+  calculate?: () => void;
+  destroy: () => void;
+  refresh: () => void;
+}
+
+export interface DraggableInfo {
+  moved: boolean;
+  ref: Ref;
+  $el: HTMLElement;
+  clientX: number;
+  clientY: number;
+  fromTop: number;
+  fromLeft: number;
+  placeholder?: HTMLElement;
+  newTop: number;
+  newLeft: number;
+  index?: number;
+}

package/index.js

@@ -1,3 +0,0 @@
-import GSSortable from './dist/components/GSSortable';
-
-export default GSSortable;