@freegridjs/core 0.7.1 → 0.8.0

package/dist/cdn/freegrid.css

@@ -6,7 +6,7 @@
   --fg-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
 }
 .fg-theme-light {
-  --fg-bg: #ffffff; --fg-fg: #1f2430; --fg-muted: #6b7385;
+  --fg-bg: #ffffff; --fg-fg: #1f2430; --fg-muted: #636b7c;
   --fg-header-bg: #f6f7f9; --fg-header-fg: #39404f; --fg-border: #e3e6eb; --fg-row-border: #eef0f3;
   --fg-row-odd: #fbfbfc; --fg-row-hover: #f2f6ff; --fg-row-selected: #e3edff;
   --fg-accent: #2563eb; --fg-accent-fg: #ffffff; --fg-focus: #2563eb; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
@@ -29,6 +29,7 @@
 }
 .fg-root *, .fg-menu * { box-sizing: border-box; }
 .fg-main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
+.fg-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
 .fg-root [hidden], .fg-menu [hidden] { display: none !important; }
 .fg-header { display: flex; flex: none; background: var(--fg-header-bg); color: var(--fg-header-fg); border-bottom: var(--fg-header-border, 1px solid var(--fg-border)); }
 .fg-header-pane { position: relative; overflow: hidden; flex: none; }
@@ -291,7 +292,11 @@ textarea.fg-editor-control { padding-top: 8px; resize: none; }
 .fg-drag-handle.fg-drag-disabled { opacity: .35; cursor: not-allowed; }
 .fg-row-dragging, .fg-row-dragging * { cursor: grabbing !important; }
 .fg-row-drop-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); z-index: 6; pointer-events: none; }
+.fg-row-drop-marker.fg-row-drop-inside { background: color-mix(in srgb, var(--fg-accent) 8%, transparent); box-shadow: inset 0 0 0 2px var(--fg-accent); }
 @media (prefers-reduced-motion: reduce) { .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: none; } }
+.fg-tree-loading svg { animation: fg-spin .8s linear infinite; opacity: .6; }
+@keyframes fg-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .fg-tree-loading svg { animation: none; } }
 
 /* pagination and server rows */
 .fg-pager {
@@ -375,3 +380,42 @@ textarea.fg-editor-control { padding-top: 8px; resize: none; }
 }
 .fg-free-badge:hover { opacity: 1; }
 .fg-free-badge svg { flex: none; }
+
+/* column spans */
+.fg-cell-span-hidden { visibility: hidden; }
+.fg-cell-colspan { z-index: 1; background: inherit; }
+
+/* per-cell locks */
+.fg-cell-readonly { color: var(--fg-muted); background-image: linear-gradient(rgba(14, 23, 38, .025), rgba(14, 23, 38, .025)); }
+.fg-cell-select-locked .fg-checkbox { cursor: not-allowed; opacity: .45; }
+
+/* wrapped cells (autoRowHeight grows the row to fit) */
+.fg-cell-wrap { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }
+
+/* right-to-left: mirror the grid area, then turn every cell back so text reads normally */
+/* the root keeps dir=rtl (side bar on the left); the grid inside is laid out ltr and mirrored */
+.fg-rtl .fg-main { transform: scaleX(-1); direction: ltr; }
+.fg-rtl .fg-cell, .fg-rtl .fg-header-cell, .fg-rtl .fg-statusbar, .fg-rtl .fg-pager, .fg-rtl .fg-group-panel,
+.fg-rtl .fg-overlay, .fg-rtl .fg-find, .fg-rtl .fg-chart-panel, .fg-rtl .fg-row-detail .fg-detail { transform: scaleX(-1); direction: rtl; }
+.fg-rtl .fg-sidebar { direction: rtl; border-left: 0; border-right: 1px solid var(--fg-border); }
+
+/* touch */
+.fg-body { touch-action: pan-x pan-y; }
+@media (pointer: coarse) {
+  .fg-editor input, .fg-editor select, .fg-editor textarea { font-size: 16px; } /* no zoom-in on focus in mobile Safari */
+}
+
+/* card view for narrow screens */
+.fg-card-mode .fg-header, .fg-card-mode .fg-body, .fg-card-mode .fg-grid, .fg-card-mode .fg-summary, .fg-card-mode .fg-pinned-rows { display: none; }
+.fg-cards { flex: 1; min-height: 0; overflow: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
+.fg-cards-canvas { position: relative; }
+.fg-card {
+  position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 10px 14px; overflow: hidden;
+  border: 1px solid var(--fg-border); border-radius: 10px; background: var(--fg-bg); box-shadow: 0 1px 2px rgba(14, 23, 38, .06);
+}
+.fg-card-selected { border-color: var(--fg-accent); background: var(--fg-row-selected); }
+.fg-card-other { background: var(--fg-header-bg); font-weight: 600; display: flex; align-items: center; }
+.fg-card-head { display: flex; align-items: center; gap: 8px; height: var(--fg-card-line, 27px); color: var(--fg-muted); font-size: .92em; }
+.fg-card-line { display: grid; grid-template-columns: minmax(80px, 38%) 1fr; gap: 10px; align-items: center; height: var(--fg-card-line, 27px); }
+.fg-card-label { color: var(--fg-muted); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fg-card-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }