@svgrid/create 1.0.3 → 2.0.0

package/package.json

@@ -1,38 +1,38 @@
-{
-  "name": "@svgrid/create",
-  "version": "1.0.3",
-  "description": "Scaffold a Svelte app powered by SvGrid in one command: npm create @svgrid@latest",
-  "type": "module",
-  "license": "MIT",
-  "author": "jQWidgets Ltd",
-  "homepage": "https://www.svgrid.com",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sv-grid/sv-grid.git",
-    "directory": "packages/create-sv-grid"
-  },
-  "keywords": [
-    "svelte",
-    "sveltekit",
-    "data-grid",
-    "datagrid",
-    "table",
-    "sv-grid",
-    "create",
-    "scaffold",
-    "starter",
-    "template"
-  ],
-  "bin": "index.mjs",
-  "files": [
-    "index.mjs",
-    "templates"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "sync-templates": "node sync-templates.mjs",
-    "prepack": "node sync-templates.mjs"
-  }
-}
+{
+  "name": "@svgrid/create",
+  "version": "2.0.0",
+  "description": "Scaffold a Svelte app powered by SvGrid in one command: npm create @svgrid@latest",
+  "type": "module",
+  "license": "MIT",
+  "author": "jQWidgets Ltd",
+  "homepage": "https://www.svgrid.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sv-grid/sv-grid.git",
+    "directory": "packages/create-sv-grid"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "data-grid",
+    "datagrid",
+    "table",
+    "sv-grid",
+    "create",
+    "scaffold",
+    "starter",
+    "template"
+  ],
+  "bin": "index.mjs",
+  "files": [
+    "index.mjs",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "sync-templates": "node sync-templates.mjs",
+    "prepack": "node sync-templates.mjs"
+  }
+}

package/templates/admin-dashboard/_package.json

@@ -22,6 +22,6 @@
     "vite": "^8.0.10"
   },
   "dependencies": {
-    "@svgrid/grid": "^1.0.1"
+    "@svgrid/grid": "^1.0.2"
   }
 }

package/templates/admin-dashboard/src/app.css

@@ -89,325 +89,44 @@ body {
     sans-serif;
 }
 
-
 /* ---------------------------------------------------------------------------
- * Grid theming overrides. SvGrid ships hard-coded light-mode colors on its
- * internals (.sv-grid-cell, .sv-grid-head, menus, pager, ...). These rules -
- * the same ones the svgrid.com demos use - route them through the --sg-* tokens
- * above so the grid themes (and goes dark) with the rest of the app.
+ * Optional polish. The grid themes itself from the --sg-* tokens above, so it
+ * already follows light / dark with no extra CSS. These rules only add table
+ * niceties the grid leaves to the app: cell gridlines, zebra striping, row
+ * hover, and a styled pagination bar. Delete any you don't want.
  * ------------------------------------------------------------------------- */
-/*
- * The SvGrid component ships with hard-coded light-mode colors on
- * .sv-grid-cell / .sv-grid-head / .sv-grid-foot / .sv-grid-shell. We
- * override them to use our CSS custom properties so dark mode works.
- */
-.sv-grid-shell {
-  border-bottom: 1px solid var(--sg-border) !important;
-}
+
+/* Cell gridlines (the grid draws none by default). */
 .sv-grid-column,
 .sv-grid-cell {
-  background: var(--sg-bg) !important;
-  color: var(--sg-fg);
-  /* Visible row + column borders. The table uses border-collapse: separate
-   * so we draw right + bottom only (no doubles between adjacent cells). */
   border-right: 1px solid var(--sg-border) !important;
   border-bottom: 1px solid var(--sg-border) !important;
 }
-/* Last column has no right border so it doesn't double up against the grid edge */
 .sv-grid-table tr > :last-child.sv-grid-column,
 .sv-grid-table tr > :last-child.sv-grid-cell {
   border-right: 0 !important;
 }
-.sv-grid-head {
-  background: var(--sg-header-bg) !important;
-  color: var(--sg-header-fg);
-}
-.sv-grid-foot {
-  background: var(--sg-header-bg) !important;
-  color: var(--sg-header-fg);
-}
-.sv-grid-scrollbar-corner,
-.sv-grid-scrollbar-corner-br {
-  background: var(--sg-header-bg) !important;
-  border-bottom-color: var(--sg-border) !important;
-}
-/* Hide the corner when its accompanying scrollbar is absent. */
-.sv-grid-no-scroll .sv-grid-scrollbar-corner,
-.sv-grid-no-scroll .sv-grid-scrollbar {
-  display: none !important;
-}
-/* Tone down the active-cell outline; SvGrid's default is 2px solid #0b63f3 which
-   reads as a hard rectangle on otherwise calm rows. */
-.sv-grid-cell-active {
-  outline-color: var(--sg-accent) !important;
-  outline-offset: -1px !important;
-}
-
-/* Filter row inputs + cell editor inputs + column menu inputs */
-.sv-grid-column-filter,
-.sv-grid-filter-value,
-.sv-grid-cell-editor,
-.sv-grid-menu-search,
-.sv-grid-menu-condition-value,
-.sv-grid-global-filter input {
-  background: var(--sg-input-bg) !important;
-  color: var(--sg-fg) !important;
-  border: 1px solid var(--sg-input-border) !important;
-  border-radius: 4px !important;
-  padding: 0 8px !important;
-  box-sizing: border-box !important;
-}
-/*
- * SvGrid's `.sv-grid-menu-condition-value` is styled `flex: 1 1 0`, which is
- * only meaningful inside a flex parent. Since the redesigned menu uses block
- * layout, force the input to span the full menu width.
- */
-.sv-grid-menu-condition-value,
-.sv-grid-menu-search {
-  width: 100% !important;
-}
-.sv-grid-column-filter::placeholder,
-.sv-grid-filter-value::placeholder,
-.sv-grid-cell-editor::placeholder,
-.sv-grid-menu-search::placeholder {
-  color: var(--sg-muted);
-  opacity: 0.7;
-}
-
-/* Filter row sizing - make the row read as a single calm bar */
-.sv-grid-column-filter {
-  height: 28px !important;
-  width: 100% !important;
-  font-size: 0.8125rem !important;
-}
-
-/*
- * Override SvGrid's hard-coded #0b63f3 focus outline on filter inputs and the
- * inline cell editor. The library sets:
- *   outline: 2px solid #0b63f3; outline-offset: -2px; border-color: #0b63f3
- * which is harsh on a dark background. Replace with a calm accent-tinted
- * box-shadow that respects the active theme.
- */
-.sv-grid-column-filter:focus,
-.sv-grid-filter-value:focus,
-.sv-grid-menu-search:focus,
-.sv-grid-menu-condition-value:focus,
-.sv-grid-global-filter input:focus,
-.sv-grid-cell-editor:focus {
-  outline: none !important;
-  outline-offset: 0 !important;
-  border-color: var(--sg-accent) !important;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent) 30%, transparent) !important;
-}
-
-/* Column menu popover */
-.sv-grid-menu {
-  background: var(--sg-bg) !important;
-  color: var(--sg-fg) !important;
-  border-color: var(--sg-border) !important;
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
-}
-.sv-grid-menu-item:hover {
-  background: var(--sg-row-hover-bg) !important;
-}
-.sv-grid-menu-sep {
-  background: var(--sg-border) !important;
-}
-.sv-grid-menu-filter-head {
-  color: var(--sg-muted) !important;
-}
-.sv-grid-menu-operator-btn {
-  background: var(--sg-input-bg) !important;
-  color: var(--sg-fg) !important;
-  border-color: var(--sg-input-border) !important;
-}
-.sv-grid-menu-operator-btn.is-active {
-  background: var(--sg-accent) !important;
-  color: #fff !important;
-  border-color: var(--sg-accent) !important;
-}
 
-/* New <select> for filter operator (replaces the radio-button group) */
-.sv-grid-menu-operator-select {
-  width: 100%;
-  height: 28px;
-  padding: 0 22px 0 8px;
-  margin-bottom: 6px;
-  border: 1px solid var(--sg-input-border);
-  border-radius: 5px;
-  background: var(--sg-input-bg);
-  color: var(--sg-fg);
-  font: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position:
-    calc(100% - 12px) 12px,
-    calc(100% - 8px) 12px;
-  background-size:
-    4px 4px,
-    4px 4px;
-  background-repeat: no-repeat;
-}
-.sv-grid-menu-operator-select:focus {
-  outline: none;
-  border-color: var(--sg-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent) 40%, transparent);
+/* Zebra striping + row hover. */
+.sv-grid-table tbody tr:nth-child(even) .sv-grid-cell {
+  background: var(--sg-row-alt-bg) !important;
 }
-
-/* Facet list (the "Select all" + value checklist inside the menu) */
-.sv-grid-facet:hover {
+.sv-grid-table tbody tr:hover .sv-grid-cell {
   background: var(--sg-row-hover-bg) !important;
 }
-.sv-grid-facet-all {
-  border-bottom-color: var(--sg-border) !important;
-}
-.sv-grid-facet-list {
-  border-color: var(--sg-border) !important;
-}
-.sv-grid-facet-empty,
-.sv-grid-facet-note {
-  color: var(--sg-muted) !important;
-}
-
-/* Menu action buttons */
-.sv-grid-menu-btn {
-  background: var(--sg-input-bg) !important;
-  color: var(--sg-fg) !important;
-  border-color: var(--sg-input-border) !important;
-}
-.sv-grid-menu-btn-primary {
-  background: var(--sg-accent) !important;
-  color: #fff !important;
-  border-color: var(--sg-accent) !important;
-}
-
-/* New filter-only popover (split out from the column menu) */
-.sv-grid-filter-menu {
-  width: 260px;
-}
-
-/* Choose Columns submenu */
-.sv-grid-choose-columns-menu {
-  width: 240px;
-}
-.sv-grid-choose-columns-menu .sv-grid-facet-list {
-  max-height: 280px;
-}
-/* Native checkboxes inside the facet list pick up the theme accent */
-.sv-grid-facet input[type='checkbox'] {
-  accent-color: var(--sg-accent);
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-}
-
-/* Right-chevron on the "Choose columns" item to indicate a submenu */
-.sv-grid-menu-item-chevron {
-  margin-left: auto;
-  transform: rotate(-90deg);
-  opacity: 0.55;
-}
-.sv-grid-menu-item.is-open .sv-grid-menu-item-chevron {
-  opacity: 1;
-}
-
-/* Filter button on the column header (funnel icon, next to the 3-line menu)
- * Hidden when the column is idle. Becomes visible when:
- *   - the column is hovered, OR
- *   - the menu is open on this column, OR
- *   - the column has an active filter (.is-active - also tinted in accent). */
-.sv-grid-col-filter-btn {
-  opacity: 0 !important;
-}
-.sv-grid-column:hover .sv-grid-col-filter-btn,
-.sv-grid-col-filter-btn:hover,
-.sv-grid-col-filter-btn.is-open {
-  opacity: 1 !important;
-}
-.sv-grid-col-filter-btn.is-active {
-  color: var(--sg-accent) !important;
-  opacity: 1 !important;
-}
-
-/* Magnifying-glass prefix on the filter menu's search input */
-.sv-grid-menu-search {
-  padding-left: 28px !important;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
-  background-position: 8px center;
-  background-repeat: no-repeat;
-  background-size: 14px 14px;
-}
-
-/* Filter menu spacing rhythm */
-.sv-grid-menu-filter > * + * {
-  margin-top: 6px;
-}
-.sv-grid-facet-all {
-  font-weight: 600;
-}
-
-/* Row-number column: themed muted text and matched background tokens. */
-.sv-grid-row-number-column,
-.sv-grid-row-number-cell {
-  color: var(--sg-muted) !important;
-  background: var(--sg-header-bg) !important;
-}
-
-/* Group row background (selection rules live below the zebra rule so they
- * win on source order; see below). */
-.sv-grid-group-row > .sv-grid-cell {
-  background: var(--sg-header-bg) !important;
-  color: var(--sg-header-fg) !important;
-}
-
-/* Checkbox (used for row selection + the read-only checkbox cells) */
-.sv-grid-checkbox {
-  background: var(--sg-input-bg) !important;
-  border-color: var(--sg-input-border) !important;
-}
-.sv-grid-checkbox[aria-checked='true'],
-.sv-grid-checkbox[aria-checked='mixed'] {
-  background: var(--sg-accent) !important;
-  border-color: var(--sg-accent) !important;
-  color: #fff !important;
-}
-
-/* Filter-row operator button: SvGrid's scoped styles hard-code white bg +
- * dark text which is too bright in dark mode. Route through theme tokens. */
-.sv-grid-filter-operator-btn {
-  background: var(--sg-input-bg) !important;
-  color: var(--sg-fg) !important;
-  border-color: var(--sg-input-border) !important;
-  opacity: 0.85;
-}
-.sv-grid-filter-operator-btn:hover {
-  opacity: 1;
-  border-color: var(--sg-accent) !important;
-}
-.sv-grid-filter-operator-btn.is-open {
-  border-color: var(--sg-accent) !important;
-  opacity: 1;
-}
-.sv-grid-filter-operator-btn .sv-grid-header-icon {
-  color: var(--sg-muted);
-}
-.sv-grid-filter-operator-btn .sv-grid-caret {
-  color: var(--sg-muted);
+/* Selection wins over zebra (declared after, same specificity). */
+.sv-grid-table tbody tr.sv-grid-row-selected .sv-grid-cell,
+.sv-grid-table tbody tr .sv-grid-cell[data-selected-range='true'] {
+  background: var(--sg-selection-bg) !important;
 }
 
-/* Pagination footer below the grid. Layout: PageSize · Range · Nav buttons.
- * Matches the AG-Grid-style pager the user shipped as a reference. */
+/* Pagination bar: layout + theme (the grid ships the markup, not the styling). */
 .sv-grid-pagination {
   display: flex !important;
   align-items: center !important;
   justify-content: flex-end !important;
   gap: 24px !important;
   padding: 12px 16px !important;
-  margin-top: 0 !important;
   border: 1px solid var(--sg-border) !important;
   border-top: 0 !important;
   border-radius: 0 0 6px 6px !important;
@@ -415,66 +134,31 @@ body {
   color: var(--sg-fg) !important;
   font-size: 13px !important;
 }
-
 .sv-grid-pagination-pagesize {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--sg-muted);
 }
-.sv-grid-pagination-pagesize select {
-  height: 28px;
-  padding: 0 22px 0 8px;
+.sv-grid-pagination-pagesize select,
+.sv-grid-pagination-btn {
   border: 1px solid var(--sg-input-border);
-  border-radius: 5px;
   background: var(--sg-input-bg);
   color: var(--sg-fg);
+  border-radius: 5px;
+  height: 28px;
   font: inherit;
   font-size: 13px;
   cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position:
-    calc(100% - 12px) 12px,
-    calc(100% - 8px) 12px;
-  background-size:
-    4px 4px,
-    4px 4px;
-  background-repeat: no-repeat;
 }
-.sv-grid-pagination-pagesize select:focus {
-  outline: none;
-  border-color: var(--sg-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent) 30%, transparent);
-}
-
-.sv-grid-pagination-range {
-  color: var(--sg-fg);
-}
-
-.sv-grid-pagination-nav {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
 .sv-grid-pagination-btn {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 28px !important;
-  height: 28px !important;
-  padding: 0 !important;
   border: 0 !important;
-  border-radius: 5px !important;
   background: transparent !important;
-  color: var(--sg-fg) !important;
-  font: inherit !important;
   font-size: 16px !important;
-  cursor: pointer !important;
-  transition: background-color 100ms ease, color 100ms ease;
 }
 .sv-grid-pagination-btn:hover:not(:disabled) {
   background: var(--sg-input-bg) !important;
@@ -485,64 +169,8 @@ body {
   opacity: 0.4 !important;
   cursor: default !important;
 }
-
-.sv-grid-pagination-label {
-  margin: 0 8px;
-  color: var(--sg-fg);
-}
-
-/* Resize handle: an invisible 6px hit-zone on the right edge of every
- * header. The pill ::after only appears while the column is hovered, the
- * handle is hovered, or a drag is in progress. Standard AG-Grid behavior. */
-.sv-grid-resize-handle {
-  position: absolute !important;
-  top: 0 !important;
-  right: 0 !important;
-  width: 6px !important;
-  height: 100% !important;
-  z-index: 100 !important;
-  cursor: col-resize !important;
-  background: transparent !important;
-  pointer-events: auto !important;
-}
-.sv-grid-resize-handle::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  margin: auto 2px;
-  width: 2px;
-  background: var(--sg-fg);
-  opacity: 0;
-  border-radius: 1px;
-  transition: background-color 100ms ease, opacity 100ms ease;
-}
-/* faint pill while the parent column is hovered */
-.sv-grid-column:hover .sv-grid-resize-handle::after {
-  opacity: 0.3;
-}
-/* bright accent pill when the handle itself is hovered or being dragged.
- * The selector includes ".sv-grid-column:hover" to match the specificity
- * of the rule above and rank higher (extra :hover) so it wins on cascade. */
-.sv-grid-column:hover .sv-grid-resize-handle:hover::after,
-.sv-grid-resize-handle.is-resizing::after {
-  background: var(--sg-accent);
-  opacity: 1;
-}
-/* zebra striping by row */
-.sv-grid-table tbody tr:nth-child(even) .sv-grid-cell {
-  background: var(--sg-row-alt-bg) !important;
-}
-.sv-grid-table tbody tr:hover .sv-grid-cell {
-  background: var(--sg-row-hover-bg) !important;
-}
-/* Selected row and cell-range backgrounds. We re-write them here, AFTER
- * the zebra rule, with the same `.sv-grid-table tbody tr` prefix so they
- * match zebra's specificity (0,3,2) and beat it on source order. Without
- * this, even-numbered selected rows show the zebra bg instead of the
- * selection bg. */
-.sv-grid-table tbody tr.sv-grid-row-selected .sv-grid-cell {
-  background: var(--sg-selection-bg) !important;
-}
-.sv-grid-table tbody tr .sv-grid-cell[data-selected-range='true'] {
-  background: var(--sg-selection-bg) !important;
+.sv-grid-pagination-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }