npm - @zengrid/core - Versions diffs - 1.2.1 → 1.3.0 - Mend

@zengrid/core 1.2.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

package/dist/src/styles/dropdown.css ADDED Viewed

@@ -0,0 +1,156 @@
+/**
+ * Dropdown renderer.
+ * Visual defaults live here (not inline) so apps can re-skin via these classes
+ * without !important. The menu is portaled to <body>, so its rules use
+ * standalone selectors, not descendants of the wrapper.
+ */
+.zg-cell-dropdown {
+  padding: 0;
+}
+/* Wrapper (in-grid) */
+.zg-dropdown-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+/* Trigger button (in-grid) */
+.zg-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--zg-border-color, #d0d0d0);
+  border-radius: 6px;
+  background: var(--zg-bg-primary, #ffffff);
+  color: var(--zg-text-primary, #333333);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.4;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.zg-dropdown-trigger:hover {
+  border-color: var(--zg-focus-ring, #1976d2);
+}
+.zg-dropdown-trigger:focus-visible {
+  outline: none;
+  border-color: var(--zg-focus-ring, #1976d2);
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+}
+.zg-dropdown-wrapper.open .zg-dropdown-trigger {
+  border-color: var(--zg-focus-ring, #1976d2);
+}
+.zg-dropdown-arrow {
+  flex-shrink: 0;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--zg-text-secondary, #666666);
+  transition: transform 0.15s ease;
+}
+.zg-dropdown-wrapper.open .zg-dropdown-arrow {
+  transform: rotate(180deg);
+}
+/* Menu (portaled to <body>) */
+.zg-dropdown-menu {
+  min-width: 200px;
+  overflow-y: auto;
+  background: var(--zg-bg-primary, #ffffff);
+  color: var(--zg-text-primary, #333333);
+  border: 1px solid var(--zg-border-color, #d0d0d0);
+  border-radius: 8px;
+  box-shadow: var(--zg-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.15));
+  overscroll-behavior: contain;
+}
+/* Search */
+.zg-dropdown-search {
+  padding: 8px;
+  border-bottom: 1px solid var(--zg-border-color, #eeeeee);
+}
+.zg-dropdown-search-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--zg-border-color, #d0d0d0);
+  border-radius: 6px;
+  font: inherit;
+  color: inherit;
+  background: var(--zg-bg-primary, #ffffff);
+}
+.zg-dropdown-search-input:focus-visible {
+  outline: none;
+  border-color: var(--zg-focus-ring, #1976d2);
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+}
+/* Options */
+.zg-dropdown-options {
+  padding: 4px;
+}
+.zg-dropdown-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--zg-text-primary, #333333);
+  transition: background-color 0.1s ease;
+}
+.zg-dropdown-option:hover,
+.zg-dropdown-option:focus {
+  background: var(--zg-bg-hover, #f0f4f8);
+  outline: none;
+}
+.zg-dropdown-option.selected {
+  background: var(--zg-bg-selected, #e3f2fd);
+  font-weight: 600;
+}
+.zg-dropdown-option.disabled {
+  color: var(--zg-text-disabled, #999999);
+  cursor: not-allowed;
+}
+.zg-dropdown-group-header {
+  padding: 8px 10px 4px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--zg-text-secondary, #666666);
+}
+.zg-dropdown-no-options {
+  padding: 12px;
+  text-align: center;
+  color: var(--zg-text-disabled, #999999);
+}
+/* Dark theme (in-grid trigger; portaled menu resolves :root vars) */
+[data-theme="dark"] .zg-dropdown-trigger,
+.zg-theme-dark .zg-dropdown-trigger {
+  background: var(--zg-bg-primary, #1e1e1e);
+  border-color: var(--zg-border-color, #444444);
+  color: var(--zg-text-primary, #e0e0e0);
+}

package/dist/src/styles/filter.css ADDED Viewed

@@ -0,0 +1,166 @@
+/**
+ * Filtering UI — active-filter chip bar and the per-column filter popup.
+ */
+/* Active filter chips */
+.zg-filter-chip-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 9;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--zg-border-color);
+  background: var(--zg-bg-secondary, #f9f9f9);
+  box-sizing: border-box;
+}
+.zg-filter-chip-bar__title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--zg-text-secondary, #666666);
+  line-height: 24px;
+}
+.zg-filter-chip-bar__list {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.zg-filter-chip-bar__clear {
+  flex-shrink: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--zg-border-color);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--zg-text-secondary, #666666);
+  font-size: 12px;
+  cursor: pointer;
+}
+.zg-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--zg-border-color);
+  border-radius: 999px;
+  background: var(--zg-bg-color);
+  color: var(--zg-text-color);
+  box-shadow: var(--zg-shadow-sm);
+}
+.zg-filter-chip__label {
+  min-width: 0;
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+.zg-filter-chip__remove {
+  flex-shrink: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+/* Filter popup */
+.zg-filter-popup {
+  position: fixed;
+  min-width: 220px;
+  max-width: 320px;
+  background: var(--zg-bg-color);
+  color: var(--zg-text-color);
+  border: 1px solid var(--zg-border-color);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  padding: 10px;
+  z-index: 2000;
+  font-size: 13px;
+}
+.zg-filter-popup__title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.zg-filter-popup__row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.zg-filter-popup__conditions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.zg-filter-popup__condition {
+  padding: 6px;
+  border: 1px solid var(--zg-border-color);
+  border-radius: 4px;
+  background: var(--zg-bg-secondary, #f9f9f9);
+}
+.zg-filter-popup__condition-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+.zg-filter-popup__select,
+.zg-filter-popup__input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--zg-border-color);
+  border-radius: 4px;
+  background: var(--zg-bg-color);
+  color: var(--zg-text-color);
+  font-size: 13px;
+  box-sizing: border-box;
+}
+.zg-filter-popup__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.zg-filter-popup__btn {
+  padding: 6px 10px;
+  border: 1px solid var(--zg-border-color);
+  background: var(--zg-header-bg);
+  color: var(--zg-header-text);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+.zg-filter-popup__btn--add {
+  width: 100%;
+  margin-bottom: 8px;
+}
+.zg-filter-popup__btn--remove {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+.zg-filter-popup__btn.primary {
+  background: var(--zg-selected-border);
+  border-color: var(--zg-selected-border);
+  color: #fff;
+}