diff --git a/Gruntfile.js b/Gruntfile.js index d5364258b..9cd070ea2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -38,7 +38,6 @@ module.exports = function(grunt) { copy: { dist: { files: { - 'dist/src/gridstack.scss': ['src/gridstack.scss'], 'dist/angular/README.md': ['angular/README.md'], 'dist/angular/src/gridstack.component.ts': ['angular/projects/lib/src/lib/gridstack.component.ts'], 'dist/angular/src/gridstack-item.component.ts': ['angular/projects/lib/src/lib/gridstack-item.component.ts'], diff --git a/angular/package.json b/angular/package.json index 24c7ae968..2ee4a91bd 100644 --- a/angular/package.json +++ b/angular/package.json @@ -21,7 +21,7 @@ "@angular/platform-browser": "^14", "@angular/platform-browser-dynamic": "^14", "@angular/router": "^14", - "gridstack": "^12.3.3-dev", + "gridstack": "12.3.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/angular/yarn.lock b/angular/yarn.lock index c577bca87..2d64c501e 100644 --- a/angular/yarn.lock +++ b/angular/yarn.lock @@ -3752,7 +3752,7 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== -gridstack@^12.3.3-dev: +gridstack@12.3.3: version "12.3.3" resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-12.3.3.tgz#0c4fc3cdf6e1c16e6095bc79ff7240a590d2c200" integrity sha512-Bboi4gj7HXGnx1VFXQNde4Nwi5srdUSuCCnOSszKhFjBs8EtMEWhsKX02BjIKkErq/FjQUkNUbXUYeQaVMQ0jQ== diff --git a/react/package.json b/react/package.json index b8f5fd05d..4308e840d 100644 --- a/react/package.json +++ b/react/package.json @@ -13,7 +13,7 @@ "test:ui": "vitest --ui" }, "dependencies": { - "gridstack": "^12.3.3-dev", + "gridstack": "^12.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-fast-compare": "^3.2.2", diff --git a/src/gridstack.scss b/src/gridstack.scss index 5e8731e5f..dab3b50a8 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -3,155 +3,144 @@ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license */ -$animation_speed: .3s !default; - -@function fixed($float) { - @return calc(round($float * 1000) / 1000); // total 4-5 digits being % -} - -@mixin vendor($property, $value...){ - // -webkit-#{$property}: $value; - // -moz-#{$property}: $value; - // -ms-#{$property}: $value; - // -o-#{$property}: $value; - #{$property}: $value; -} - -.grid-stack { - position: relative; -} - -.grid-stack-rtl { - direction: ltr; - > .grid-stack-item { - direction: rtl; - } -} - -.grid-stack-placeholder > .placeholder-content { - background-color: rgba(0,0,0,0.1); - margin: 0; - position: absolute; - width: auto; - z-index: 0 !important; -} - -// make those more unique as to not conflict with side panel items -.grid-stack > .grid-stack-item { - position: absolute; - padding: 0; - top: 0; left: 0; // some default to reduce at least first row/column inline styles - width: var(--gs-column-width); // reduce 1x1 items inline styles - height: var(--gs-cell-height); - - > .grid-stack-item-content { - margin: 0; - position: absolute; - width: auto; - overflow-x: hidden; - overflow-y: auto; - } - &.size-to-content:not(.size-to-content-max) > .grid-stack-item-content { - overflow-y: hidden; - } -} - -.grid-stack { - > .grid-stack-item > .grid-stack-item-content, - > .grid-stack-placeholder > .placeholder-content { - top: var(--gs-item-margin-top); - right: var(--gs-item-margin-right); - bottom: var(--gs-item-margin-bottom); - left: var(--gs-item-margin-left); - } -} - -.grid-stack-item { - > .ui-resizable-handle { - position: absolute; - font-size: 0.1px; - display: block; - -ms-touch-action: none; - touch-action: none; - } - - &.ui-resizable-disabled > .ui-resizable-handle, - &.ui-resizable-autohide > .ui-resizable-handle { display: none; } - - > .ui-resizable-ne, - > .ui-resizable-nw, - > .ui-resizable-se, - > .ui-resizable-sw { - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat; - background-position: center; - } - - > .ui-resizable-ne { - @include vendor(transform, rotate(45deg)); - } - > .ui-resizable-sw { - @include vendor(transform, rotate(45deg)); - } - - > .ui-resizable-nw { - @include vendor(transform, rotate(-45deg)); - } - > .ui-resizable-se { - @include vendor(transform, rotate(-45deg)); - } - - > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); left: var(--gs-item-margin-left); } - > .ui-resizable-n { cursor: n-resize; height: 10px; top: var(--gs-item-margin-top); left: 25px; right: 25px; } - > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); } - > .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; right: var(--gs-item-margin-right);} - > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); right: var(--gs-item-margin-right); } - > .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: var(--gs-item-margin-bottom); right: 25px; } - > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); } - > .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; left: var(--gs-item-margin-left); } - - &.ui-draggable-dragging { - &> .ui-resizable-handle { - display: none !important; - } - } - - &.ui-draggable-dragging { - will-change: left, top; - } - - &.ui-resizable-resizing { - will-change: width, height; - } -} - -// not .grid-stack-item specific to also affect dragIn regions -.ui-draggable-dragging, -.ui-resizable-resizing { - z-index: 10000; // bootstrap modal has a z-index of 1050 - - > .grid-stack-item-content { - box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); - opacity: 0.8; - } -} - -.grid-stack-animate, -.grid-stack-animate .grid-stack-item { - @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed); -} - -.grid-stack-animate .grid-stack-item.ui-draggable-dragging, -.grid-stack-animate .grid-stack-item.ui-resizable-resizing, -.grid-stack-animate .grid-stack-item.grid-stack-placeholder{ - @include vendor(transition, left 0s, top 0s, height 0s, width 0s); -} - -// make those more unique as to not conflict with side panel items, but apply to all column layouts (so not in loop below) -.grid-stack > .grid-stack-item[gs-y="0"] { - top: 0px; -} -.grid-stack > .grid-stack-item[gs-x="0"] { - left: 0%; -} - + $animation_speed: .3s !default; + + .grid-stack { + position: relative; + } + + .grid-stack-rtl { + direction: ltr; + > .grid-stack-item { + direction: rtl; + } + } + + .grid-stack-placeholder > .placeholder-content { + background-color: rgba(0,0,0,0.1); + margin: 0; + position: absolute; + width: auto; + z-index: 0 !important; + } + + // make those more unique as to not conflict with side panel items + .grid-stack > .grid-stack-item { + position: absolute; + padding: 0; + top: 0; left: 0; // some default to reduce at least first row/column inline styles + width: var(--gs-column-width); // reduce 1x1 items inline styles + height: var(--gs-cell-height); + + > .grid-stack-item-content { + margin: 0; + position: absolute; + width: auto; + overflow-x: hidden; + overflow-y: auto; + } + &.size-to-content:not(.size-to-content-max) > .grid-stack-item-content { + overflow-y: hidden; + } + } + + .grid-stack { + > .grid-stack-item > .grid-stack-item-content, + > .grid-stack-placeholder > .placeholder-content { + top: var(--gs-item-margin-top); + right: var(--gs-item-margin-right); + bottom: var(--gs-item-margin-bottom); + left: var(--gs-item-margin-left); + } + } + + .grid-stack-item { + > .ui-resizable-handle { + position: absolute; + font-size: 0.1px; + display: block; + -ms-touch-action: none; + touch-action: none; + } + + &.ui-resizable-disabled > .ui-resizable-handle, + &.ui-resizable-autohide > .ui-resizable-handle { display: none; } + + > .ui-resizable-ne, + > .ui-resizable-nw, + > .ui-resizable-se, + > .ui-resizable-sw { + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: center; + } + + > .ui-resizable-ne { + transform: rotate(45deg); + } + > .ui-resizable-sw { + transform: rotate(45deg); + } + + > .ui-resizable-nw { + transform: rotate(-45deg); + } + > .ui-resizable-se { + transform: rotate(-45deg); + } + + > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); left: var(--gs-item-margin-left); } + > .ui-resizable-n { cursor: n-resize; height: 10px; top: var(--gs-item-margin-top); left: 25px; right: 25px; } + > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); } + > .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; right: var(--gs-item-margin-right);} + > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); right: var(--gs-item-margin-right); } + > .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: var(--gs-item-margin-bottom); right: 25px; } + > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); } + > .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; left: var(--gs-item-margin-left); } + + &.ui-draggable-dragging { + &> .ui-resizable-handle { + display: none !important; + } + } + + &.ui-draggable-dragging { + will-change: left, top; + } + + &.ui-resizable-resizing { + will-change: width, height; + } + } + + // not .grid-stack-item specific to also affect dragIn regions + .ui-draggable-dragging, + .ui-resizable-resizing { + z-index: 10000; // bootstrap modal has a z-index of 1050 + + > .grid-stack-item-content { + box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); + opacity: 0.8; + } + } + + .grid-stack-animate, + .grid-stack-animate .grid-stack-item { + transition: left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed; + } + + .grid-stack-animate .grid-stack-item.ui-draggable-dragging, + .grid-stack-animate .grid-stack-item.ui-resizable-resizing, + .grid-stack-animate .grid-stack-item.grid-stack-placeholder{ + transition: left 0s, top 0s, height 0s, width 0s; + } + + // make those more unique as to not conflict with side panel items, but apply to all column layouts (so not in loop below) + .grid-stack > .grid-stack-item[gs-y="0"] { + top: 0px; + } + .grid-stack > .grid-stack-item[gs-x="0"] { + left: 0%; + } + + \ No newline at end of file diff --git a/tsconfig.build.json b/tsconfig.build.json index 5607a3d35..3cfaa1d4d 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -4,8 +4,7 @@ "skipLibCheck": true }, "include": [ - "./src/**/*.ts", - "./angular/projects/lib/src/**/*.ts" + "./src/**/*.ts" ], "exclude": [ "./src/**/*.spec.ts",