@turquoisehealth/pit-viper 2.104.2-dev.0 → 2.105.1

package/_site/assets/css/pit-viper-v2-scoped.css

@@ -3301,29 +3301,10 @@
   line-height: 1.33333333;
   font-weight: 500;
 }
-.pv-v2 .pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: unset;
-  gap: 0.5rem;
-  background-color: #242626;
-  color: #FFFFFF;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  font-size: 0.75rem;
-  line-height: 1.33333333;
-  font-weight: 500;
-}
 .pv-v2 .pv-action-bar-container[data-style=white] > div {
   background-color: #FFFFFF;
   color: #121313;
 }
-.pv-v2 .pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #FFFFFF;
-  color: #121313;
-}
 .pv-v2 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #E3E7EA);

package/_site/assets/css/pit-viper-v2.css

@@ -3575,32 +3575,11 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   font-weight: 500;
 }
 
-.pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: unset;
-  gap: 0.5rem;
-  background-color: #242626;
-  color: #FFFFFF;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  font-size: 0.75rem;
-  line-height: 1.33333333;
-  font-weight: 500;
-}
-
 .pv-action-bar-container[data-style=white] > div {
   background-color: #FFFFFF;
   color: #121313;
 }
 
-.pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #FFFFFF;
-  color: #121313;
-}
-
 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #E3E7EA);

package/_site/assets/css/pit-viper.css

@@ -3580,32 +3580,11 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   font-weight: 500;
 }
 
-.pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: space-between;
-  gap: 0.5rem;
-  background-color: #02363D;
-  color: #FFFFFF;
-  padding: 0;
-  box-shadow: 0 8px 32px rgba(2, 54, 61, 0.24);
-  border-radius: 4px;
-  font-size: 1.125rem;
-  line-height: 1.55555555;
-  font-weight: 500;
-}
-
 .pv-action-bar-container[data-style=white] > div {
   background-color: #02363D;
   color: #02363D;
 }
 
-.pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #02363D;
-  color: #02363D;
-}
-
 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #DCDFE4);

package/_site/assets/js/pit-viper.js

@@ -178,4 +178,151 @@ class PVAutoClose extends HTMLElement {
 
     }
     customElements.define('pv-data-grid', PVDataGrid);
+
+  class PvGlobalNav extends HTMLElement {
+    constructor() {
+      super();
+      this.hoverTimeout = null;
+      this.layout = document.querySelector('.pv-layout-primary');
+      this.minimizeButton = this.querySelector('#global-sidebar-toggle');
+    }
+
+    connectedCallback() {
+      this.minimizeButton?.addEventListener('click', (e) => this.toggleSidebar(e.currentTarget));
+      this.addEventListener('mouseenter', () => this.handleHoverIn());
+      this.addEventListener('mouseleave', () => this.handleHoverOut());
+      document.addEventListener('click', (e) => this.handleMenuClick(e));
+      this.initializeSidebar();
+    }
+
+    setState(attributes) {
+      Object.entries(attributes).forEach(([key, value]) => {
+        if (value) {
+          this.layout.setAttribute(key, '');
+        } else {
+          this.layout.removeAttribute(key);
+        }
+      });
+    }
+
+    isExpandedState() {
+      return !this.layout.hasAttribute('data-collapsed') && this.layout.hasAttribute('data-expanded');
+    }
+
+    collapseState() {
+      this.setState({ 'data-collapsed': true, 'data-expanded': false });
+    }
+
+    expandState() {
+      this.setState({ 'data-collapsed': false, 'data-expanded': true });
+    }
+
+    hoverExpandState() {
+      this.layout.removeAttribute('data-collapsed');
+      this.layout.removeAttribute('data-expanded');
+    }
+
+    hoverCollapseState() {
+      this.setState({ 'data-collapsed': true, 'data-expanded': false });
+    }
+
+    getSidebarMinimizeState() {
+      const stored = localStorage.getItem('global-nav-sidebar-minimize');
+      return stored === 'true';
+    }
+
+    setSidebarMinimizeState(value) {
+      localStorage.setItem('global-nav-sidebar-minimize', value.toString());
+    }
+
+    updateIcons(button, isExpanded) {
+      const use = button.querySelector('svg use');
+      const tooltip = document.getElementById('description');
+      use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', isExpanded ? '#panel-left-close' : '#panel-left-open');
+      if (tooltip) tooltip.querySelector('p').textContent = isExpanded ? 'Close Sidebar' : 'Open Sidebar';
+    }
+
+    toggleSidebar(button) {
+      const isExpanded = this.isExpandedState();
+      if (isExpanded) {
+        this.setSidebarMinimizeState(true);
+        this.collapseState();
+        this.updateIcons(button, false);
+      } else {
+        this.setSidebarMinimizeState(false);
+        this.expandState();
+        this.updateIcons(button, true);
+      }
+    }
+
+    handleHoverIn() {
+      clearTimeout(this.hoverTimeout);
+      if (this.layout.hasAttribute('data-collapsed')) {
+        this.hoverTimeout = setTimeout(() => {
+          if (window.innerWidth < 768) {
+            this.layout.removeAttribute('data-collapsed');
+            this.layout.setAttribute('data-floating', '');
+          } else {
+            this.hoverExpandState();
+          }
+        }, 200);
+      }
+    }
+
+    handleHoverOut() {
+      clearTimeout(this.hoverTimeout);
+      if (this.layout.hasAttribute('data-floating') && !this.hasOpenMenu()) {
+        this.layout.removeAttribute('data-floating');
+        this.layout.setAttribute('data-collapsed', '');
+      } else if (!this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-expanded') && !this.hasOpenMenu()) {
+        this.hoverCollapseState();
+      }
+    }
+
+    hasOpenMenu() {
+      return this.querySelector('.pv-popover-menu[data-active]') !== null;
+    }
+
+    handleMenuClick(event) {
+      const clickedMenu = event.target.closest('.pv-popover-menu');
+      const allMenus = this.querySelectorAll('.pv-popover-menu');
+
+      if (clickedMenu && this.contains(clickedMenu)) {
+        allMenus.forEach(menu => menu.removeAttribute('data-active'));
+        clickedMenu.setAttribute('data-active', '');
+        this.style.overflow = 'initial';
+        if (!this.layout.hasAttribute('data-expanded')) {
+            this.hoverExpandState();
+        }
+        return;
+      }
+
+      // Only close menu if click is outside the sidebar
+      if (!this.contains(event.target)) {
+        allMenus.forEach(menu => menu.removeAttribute('data-active'));
+        this.style.overflowX = 'hidden';
+        if (!this.layout.hasAttribute('data-collapsed') && !this.layout.hasAttribute('data-expanded')) {
+          this.hoverCollapseState();
+        }
+      }
+    }
+
+    initializeSidebar() {
+      const currentSidebarMinimize = this.layout.hasAttribute('data-collapsed');
+      if (currentSidebarMinimize) {
+        this.collapseState();
+      }
+      const storedValue = this.getSidebarMinimizeState();
+
+      if (storedValue) {
+        this.collapseState();
+        this.updateIcons(this.minimizeButton, false);
+      } else {
+        this.expandState();
+        this.updateIcons(this.minimizeButton, true);
+      }
+    }
+  }
+
+  customElements.define('pv-global-nav', PvGlobalNav, { extends: 'aside' });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.104.2-dev.0",
+  "version": "2.105.1",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {
@@ -34,6 +34,10 @@
       "types": "./pv-components/dist/vue/visualizations/components/visualizations/index.d.ts",
       "import": "./pv-components/dist/vue/visualizations/pv-components-visualizations.mjs",
       "require": "./pv-components/dist/vue/visualizations/pv-components-visualizations.js"
+    },
+    "./web_components": {
+      "types": "./pv-components/dist/src/web-components.d.ts",
+      "default": "./pv-components/dist/web/pv-components.iife.js"
     }
   },
   "scripts": {
@@ -46,6 +50,7 @@
     "prepublishOnly": "npm install && npm run test && npm run build",
     "start": "npm-run-all build:sass --parallel watch:*",
     "build": "npm-run-all build:*",
+    "postbuild": "eleventy --quiet",
     "prepare": "husky",
     "test": "npm run test --workspace=pv-components",
     "create_pr": "tsx ./scripts/createPR.ts",
@@ -66,37 +71,13 @@
   },
   "homepage": "https://github.com/turquoisehealth/pit-viper/",
   "peerDependencies": {
-    "@floating-ui/vue": "^1.1.9",
-    "@primeuix/themes": "^1.1.1",
-    "@vueuse/components": "^13.0.0",
-    "@vueuse/core": "^13.0.0",
-    "@vueuse/integrations": "^13.1.0",
     "ag-charts-enterprise": "^12.1.0",
     "ag-charts-vue3": "^12.1.0",
     "ag-grid-community": "^33.2.1",
     "ag-grid-enterprise": "^33.2.1",
-    "ag-grid-vue3": "^33.2.1",
-    "papaparse": "^5.5.2",
-    "primevue": "^4.3.5",
-    "sortablejs": "^1.15.6",
-    "vue": "^3.5.13"
+    "ag-grid-vue3": "^33.2.1"
   },
   "peerDependenciesMeta": {
-    "@floating-ui/vue": {
-      "optional": false
-    },
-    "@primeuix/themes": {
-      "optional": false
-    },
-    "@vueuse/components": {
-      "optional": false
-    },
-    "@vueuse/core": {
-      "optional": false
-    },
-    "@vueuse/integrations": {
-      "optional": false
-    },
     "ag-charts-enterprise": {
       "optional": true
     },
@@ -111,18 +92,6 @@
     },
     "ag-grid-vue3": {
       "optional": true
-    },
-    "papaparse": {
-      "optional": false
-    },
-    "primevue": {
-      "optional": false
-    },
-    "sortablejs": {
-      "optional": false
-    },
-    "vue": {
-      "optional": false
     }
   },
   "dependencies": {
@@ -141,6 +110,10 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
+    "chokidar-cli": "^3.0.0",
+    "eslint-plugin-vue": "^9.32.0",
     "pagefind": "^1.3.0",
     "tsx": "^4.0.0"
   }