@vuu-ui/vuu-filters 0.8.35 → 0.8.36

package/cjs/filter-bar/FilterBar.css

@@ -0,0 +1,47 @@
+.vuuFilterBar {
+  --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z" /></svg>');
+  --vuuOverflowContainer-minWidth: 0;
+
+  align-items: center;
+  background-color: var(--salt-container-secondary-background);
+  border-color: var(--salt-container-primary-borderColor);
+  border-style: var(--vuuFilterBar-borderStyle, none none solid none);
+  border-width: 1px;
+  display: flex;
+  flex: var(--vuuFilterBar-flex);
+  gap: var(--salt-spacing-100);
+  height: calc(var(--salt-size-base) + var(--salt-spacing-100) + 1px);
+  padding: 0px var(--salt-spacing-200);
+}
+
+.vuuFilterBar-filters {
+  align-items: center;
+  display: flex; 
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+
+.vuuFilterbar-icon {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+}
+
+.vuuFilterBar [data-icon="tune"] {
+  --vuu-icon-size: 16px;
+  --vuu-icon-svg: var(--vuu-svg-tune);
+}
+
+.vuuFilterBar [data-icon="plus"] {
+  --vuu-icon-size: 16px;
+}
+
+.vuuFilterBar .vuuToolbar {
+  flex: 0 1 auto;
+}
+
+.vuuFilterBar-Editor {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--salt-spacing-100);}

package/cjs/filter-clause/ExpandoCombobox.css

@@ -0,0 +1,58 @@
+.vuuExpandoCombobox {
+  --expando-combobox-height: var(--vuuExpandoCombobox-height, var(--salt-size-base));
+  --expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSize, 12px);
+
+  --saltInput-outline: none;
+  --saltInput-fontSize: var(--expando-combobox-fontSize);
+  --saltInput-height: var(--expando-combobox-height);
+  --saltInput-minWidth: 4px;
+
+  display: inline-flex;
+  flex-direction: column;
+  height: var(--expando-combobox-height);
+  min-width: 4px;
+  padding: 0;
+}
+
+.vuuExpandoCombobox .saltInput {
+  background-color: transparent;
+  position: absolute;
+}
+
+.vuuExpandoCombobox .vuuDropdown {
+  height: 100%;
+}
+
+/** double up the selector just to increase specificity, won't need when we use cascade layers */
+.vuuExpandoCombobox-Input.saltInput {
+  border: none;
+  left: 0px;
+  margin: 0;
+  min-height: 100%;
+  padding: 0;
+  right: 0px;
+  width: auto;
+}
+
+.vuuExpandoCombobox .saltInput-input {
+  border: none;
+  box-sizing: content-box;
+  display: block;
+  flex: 1;
+  font: inherit;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  padding: 0;
+}
+
+.vuuExpandoCombobox:before {
+  content: attr(data-text);
+  display: block;
+  font-size: var(--expando-combobox-fontSize);
+  height: 0px;
+  overflow: hidden;
+  /* visibility: hidden; */
+  white-space: pre-wrap;
+  /* position: absolute; */
+}

package/cjs/filter-clause/FilterClause.css

@@ -0,0 +1,92 @@
+.vuuFilterClause {
+  --vuuExpandoInput-top: 0;
+  --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));
+  --vuuExpandoInput-height: var(--content-height);
+  --vuuExpandoCombobox-height: var(--content-height);
+  --saltButton-height: 16px;
+  --saltButton-width: 16px;
+  --salt-focused-outlineStyle: dotted;
+
+  align-items: center;
+  background: var(--salt-container-primary-background);
+  border-color: var(--vuu-color-gray-45);
+  border-radius: var(--saltButton-borderRadius);
+  border-width: 1px;
+  border-style: solid;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-50);
+  height: var(--salt-size-base);
+  min-width: calc(var(--salt-size-base) * 4);
+  padding: 0 var(--salt-spacing-100);
+  width: fit-content;
+}
+
+.vuuFilterClause:focus-within {
+  border-color: var(--vuu-color-purple-10);
+}
+
+.vuu-density-high .vuuFilterClause {
+  padding: 4px 8px;
+  gap: 4px;
+  --salt-text-lineHeight: 12px;
+  --saltInputLegacy-fontSize: 12px;
+  --saltInputLegacy-minWidth: 12px;
+}
+
+.vuu-density-high .vuuFilterClause .saltInput {
+  padding: 0;
+  min-height: 16px;
+  height: 16px;
+}
+
+.vuuFilterClause .vuuExpandoCombobox {
+  flex-basis: auto;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.vuuFilterClauseOperator-hidden {
+  display: none;
+}
+
+
+.vuuFilterClause .saltInput-focused,
+.vuuFilterClause .saltTokenizedInput-focused {
+  outline: none;
+  color: var(--salt-content-primary-foreground);
+}
+
+.vuu-theme .saltList {
+  --list-borderWidth: 1px;
+  --list-borderStyle: solid;
+  border-radius: 4px;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
+}
+
+.saltListItem[aria-selected="true"]:not(.saltListItem-checkbox) {
+  --list-item-background: var(--list-item-background-active);
+  color: var(--list-item-text-color-active);
+}
+
+.saltTokenizedInput {
+  height: 16px;
+  min-height: 16px;
+}
+
+.saltTokenizedInput .saltInputPill {
+  --pill-fontSize: 12px;
+  --saltButton-borderStyle: none;
+  --pill-background: none;
+  height: 16px;
+  margin: 0;
+}
+
+.saltTokenizedInput-pillGroup {
+  padding: 0;
+  height: 16px;
+}
+
+.vuuFilterClause-DatePicker {
+  border: none;
+}

package/cjs/filter-editor/FilterClauseCombinator.css

@@ -0,0 +1,9 @@
+.vuuFilterClauseCombinator {
+    --saltButton-height: calc(var(--salt-spacing-400));
+    font-size: 9px;
+    padding: 0 4px;
+}
+.vuuFilterClauseCombinator:focus {
+    background-color: var(--vuu-color-gray-50);
+    color: white;
+}

package/cjs/filter-editor/FilterEditor.css

@@ -0,0 +1,7 @@
+.vuuFilterEditor {
+    align-items: center;
+    display: flex;
+    gap: var(--salt-spacing-200);
+    height: var(--vuuFilterEditor-height, calc(var(--salt-size-base) + var(--salt-size-unit)));
+    padding: 0 var(--salt-spacing-400);
+}

package/cjs/filter-input/FilterInput.css

@@ -0,0 +1,53 @@
+
+.salt-theme {
+    --vuuFilterEditor-lineHeight: 28px;
+}
+
+.salt-density-high {
+    --vuuFilterEditor-buttonWidth: 20px;
+    --vuuFilterEditor-height: 22px;
+    --vuuFilterEditor-lineHeight: 20px;
+}
+
+.vuuFilterInput {
+    --vuuFilterEditor-background: var(--salt-container-primary-background);
+    --vuuFilterEditor-color: var(--salt-content-primary-foreground);
+    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
+    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
+    --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);
+    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
+    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
+    --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); 
+    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
+    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
+    --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);
+    --vuuFilterEditor-suggestion-height: 24px;
+    --vuuFilterEditor-variableColor: var(--vuu-color_purple-10);
+
+    align-items: center;
+    border-color: var(--salt-container-secondary-borderColor);
+    border-style: solid none;
+    border-width: 1px;
+    box-sizing: border-box;
+    display: flex;
+    height: var(--vuuFilterEditor-height, 30px);
+}
+
+.vuuFilterInput-Editor {
+    flex: 1 1 auto;
+    height: 100%;
+}
+
+.vuuFilterInput-FilterButton,
+.vuuFilterInput-ClearButton {
+    --vuu-icon-size: 12px;
+    --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
+}
+
+.vuuIllustration {
+    --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);
+    background: var(--salt-container-secondary-background);
+    color: var(--salt-text-secondary-foreground);
+}
+
+

package/cjs/filter-pill/FilterPill.css

@@ -0,0 +1,11 @@
+.vuuFilterPill {
+    --saltButton-textTransform: none;
+    max-width: var(--vuuFilterPill-maxWidth, 200px);
+}
+
+.vuuFilterPill-tooltip {
+    ul {
+        padding-left: var(--salt-spacing-400);
+    }    
+}
+