@dashboard-designer/ui 0.1.2 → 0.1.27

package/dist/styles.css

@@ -589,9 +589,90 @@
   transition: box-shadow 120ms ease;
 }
 
+/* Never show resize grips in view / readonly mode */
+.dd-root.dd-readonly .dd-canvas .react-resizable-handle,
+.dd-root.dd-readonly .dd-canvas .dd-grid-resize-handle {
+  display: none !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  opacity: 0 !important;
+}
+
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item {
+  overflow: visible;
+}
+
 .dd-canvas .react-grid-item > .dd-widget,
-.dd-canvas .react-grid-item > div {
+.dd-canvas .react-grid-item > div:not(.react-resizable-handle) {
   height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* Pass clicks through widget corner to the resize handle */
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item > .dd-widget {
+  pointer-events: none;
+}
+
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item > .dd-widget > * {
+  pointer-events: auto;
+}
+
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item > .dd-widget .dd-widget-body {
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 28px),
+    calc(100% - 28px) calc(100% - 28px),
+    calc(100% - 28px) 100%,
+    0 100%
+  );
+}
+
+/* Bottom-right resize handle (edit mode); left calc keeps physical right in RTL */
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item .dd-grid-resize-handle {
+  position: absolute !important;
+  z-index: 100;
+  pointer-events: auto;
+  display: flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  align-items: center;
+  justify-content: center;
+  background-image: none;
+  padding: 0;
+  box-sizing: border-box;
+  touch-action: none;
+  margin: 0 !important;
+  transform: none !important;
+}
+
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item .dd-grid-resize-handle.react-resizable-handle-se {
+  width: 20px;
+  height: 20px;
+  top: auto !important;
+  right: auto !important;
+  left: calc(100% - 30px) !important;
+  bottom: 10px !important;
+  cursor: se-resize;
+  background: var(--dd-surface);
+  border: 1px solid var(--dd-border);
+  border-radius: 4px;
+  color: var(--dd-muted);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--dd-shadow) 65%, transparent);
+}
+
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item .dd-grid-resize-handle-icon {
+  flex-shrink: 0;
+  pointer-events: none;
+  opacity: 0.85;
+}
+
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item .dd-grid-resize-handle:hover,
+.dd-root:not(.dd-readonly) .dd-canvas .react-grid-item.resizing .dd-grid-resize-handle {
+  color: var(--dd-accent);
+  border-color: color-mix(in srgb, var(--dd-accent) 50%, var(--dd-border));
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--dd-accent) 25%, transparent);
 }
 
 .dd-canvas .react-resizable-handle::after {
@@ -614,6 +695,34 @@
   box-shadow: 0 0 0 2px var(--dd-accent-soft), var(--dd-shadow);
 }
 
+.dd-widget-headerless {
+  position: relative;
+}
+
+.dd-widget-headerless .dd-widget-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.dd-widget-floating-actions {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 3;
+  display: flex;
+  gap: 2px;
+  pointer-events: auto;
+}
+
+.dd-widget-headerless .dd-widget-body.dd-widget-drag {
+  cursor: grab;
+  user-select: none;
+}
+
+.dd-widget-headerless .dd-widget-body.dd-widget-drag:active {
+  cursor: grabbing;
+}
+
 .dd-widget-header {
   display: flex;
   justify-content: space-between;
@@ -1241,10 +1350,23 @@ select.dd-input[multiple] {
   background: #64748b;
 }
 
+.dd-filters-popover-arrow {
+  position: fixed;
+  z-index: 41;
+  width: 10px;
+  height: 10px;
+  margin: -5px 0 0 -5px;
+  transform: rotate(45deg);
+  background: var(--dd-surface);
+  border-left: 1px solid var(--dd-border);
+  border-top: 1px solid var(--dd-border);
+  border-top-left-radius: 2px;
+}
+
 .dd-filters-popover-panel {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
   z-index: 40;
   width: min(640px, calc(100vw - 32px));
   max-height: min(420px, 70vh);
@@ -1506,6 +1628,257 @@ select.dd-input[multiple] {
   font-size: 13px;
 }
 
+.dd-label-widget {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  border: none;
+  border-radius: var(--dd-radius-sm);
+  text-align: center;
+  line-height: 1.35;
+  font-weight: 600;
+  font-family: inherit;
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  color: var(--dd-on-accent, #fff);
+  background-color: var(--dd-accent);
+}
+
+.dd-label-widget-text {
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dd-label-widget-link:not(:disabled) {
+  cursor: pointer;
+}
+
+.dd-label-widget-link:not(:disabled):hover {
+  filter: brightness(0.95);
+}
+
+.dd-label-widget:disabled {
+  cursor: default;
+  opacity: 1;
+  color: var(--dd-on-accent, #fff);
+  background-color: var(--dd-accent);
+}
+
+.dd-label-container {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  border-radius: var(--dd-radius-sm);
+  background-color: transparent;
+}
+
+.dd-label-container-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.dd-label-container-horizontal {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.dd-label-container-empty {
+  display: block;
+  text-align: center;
+  padding: 8px;
+}
+
+.dd-container-label {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--dd-radius-sm);
+  text-align: center;
+  line-height: 1.35;
+  font-weight: 600;
+  font-family: inherit;
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  color: var(--dd-on-accent, #fff);
+  background-color: var(--dd-accent);
+}
+
+.dd-container-label:disabled {
+  cursor: default;
+  opacity: 1;
+  color: var(--dd-on-accent, #fff);
+  background-color: var(--dd-accent);
+}
+
+.dd-label-container-horizontal .dd-container-label {
+  width: auto;
+  flex: 0 1 auto;
+}
+
+.dd-container-label-text {
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dd-container-label-link:not(:disabled) {
+  cursor: pointer;
+}
+
+.dd-container-label-link:not(:disabled):hover {
+  filter: brightness(0.95);
+}
+
+.dd-label-container-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dd-label-container-editor-item {
+  padding: 12px;
+  border: 1px solid var(--dd-border);
+  border-radius: var(--dd-radius);
+  background: color-mix(in srgb, var(--dd-surface) 96%, var(--dd-border));
+}
+
+.dd-label-container-editor-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.dd-label-container-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.dd-field-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.dd-label-style-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.dd-color-input {
+  padding: 4px;
+  height: 38px;
+  min-height: 38px;
+}
+
+.dd-field-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.dd-measure-aggregations {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dd-measure-agg-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dd-measure-agg-field {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-family: var(--dd-mono);
+  color: var(--dd-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dd-measure-agg-select {
+  width: 120px;
+  flex-shrink: 0;
+}
+
+.dd-label-color-swap-btn {
+  width: 38px;
+  min-width: 38px;
+  height: 38px;
+  padding: 0;
+}
+
+.dd-guidelines-editor {
+  margin-top: 4px;
+}
+
+.dd-guidelines-group {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dd-guidelines-group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.dd-guidelines-group-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--dd-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.dd-guideline-item {
+  padding: 10px 12px;
+  border: 1px solid var(--dd-border-subtle);
+  border-radius: var(--dd-radius-sm);
+  background: var(--dd-surface);
+}
+
+.dd-guideline-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.dd-guideline-item-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dd-guideline-fields {
+  align-items: flex-end;
+}
+
 .dd-listbox {
   display: flex;
   flex-direction: column;
@@ -1612,6 +1985,12 @@ select.dd-input[multiple] {
   z-index: 1;
 }
 
+.dd-table-empty-cell {
+  color: var(--dd-muted);
+  text-align: center;
+  padding: 16px;
+}
+
 .dd-muted {
   color: var(--dd-muted);
   font-size: 13px;
@@ -2920,6 +3299,7 @@ select.dd-input[multiple] {
   html.dd-print-mode .dd-widget-drag-grip,
   html.dd-print-mode .dd-canvas-empty,
   html.dd-print-mode .dd-badge,
+  html.dd-print-mode .dd-grid-resize-handle,
   html.dd-print-mode .react-resizable-handle {
     display: none !important;
   }
@@ -3016,3 +3396,14 @@ select.dd-input[multiple] {
   }
 }
 
+
+
+/* --- table-empty-overrides.css --- */
+/* Overrides .dd-table td { text-align: left } for empty-state rows */
+.dd-table td.dd-table-empty-cell {
+  text-align: center;
+}
+
+.dd-query-data-table td.dd-query-data-empty-cell {
+  text-align: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dashboard-designer/ui",
-  "version": "0.1.2",
+  "version": "0.1.27",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -15,17 +15,11 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom --external lucide-react && node ./scripts/copy-css.mjs",
-    "typecheck": "tsc --noEmit",
-    "dev": "tsup src/index.ts --format esm --dts --external react --external react-dom --external lucide-react --watch"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@dashboard-designer/core": "^0.1.1",
     "html2canvas": "^1.4.1",
     "i18next": "^24.2.2",
     "jspdf": "^4.2.1",
@@ -33,7 +27,8 @@
     "react-grid-layout": "^1.5.0",
     "react-i18next": "^15.4.1",
     "react-resizable": "^3.0.5",
-    "recharts": "^2.15.1"
+    "recharts": "^2.15.1",
+    "@dashboard-designer/core": "0.1.15"
   },
   "devDependencies": {
     "@types/react": "^19.0.10",
@@ -46,5 +41,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom --external lucide-react && node ./scripts/copy-css.mjs",
+    "typecheck": "tsc --noEmit",
+    "dev": "tsup src/index.ts --format esm --dts --external react --external react-dom --external lucide-react --watch"
   }
-}
+}