@tekkare/romulus 0.1.9 → 0.1.10
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.
- package/dist/module.json +1 -1
- package/dist/runtime/assets/styles/components.css +1 -1
- package/dist/runtime/assets/styles/tokens.css +1 -1
- package/dist/runtime/components/ActionBar.vue +1 -1
- package/dist/runtime/components/AdvancedSearch.vue +29 -10
- package/dist/runtime/components/Breadcrumb.vue +1 -1
- package/dist/runtime/components/Button.vue +1 -1
- package/dist/runtime/components/Card.vue +1 -1
- package/dist/runtime/components/Drawer.vue +1 -1
- package/dist/runtime/components/FilterCheckbox.vue +1 -1
- package/dist/runtime/components/FilterComplex.vue +3 -3
- package/dist/runtime/components/FilterDropdown.vue +26 -1
- package/dist/runtime/components/Input.vue +1 -1
- package/dist/runtime/components/NavLink.vue +1 -1
- package/dist/runtime/components/Pill.vue +1 -1
- package/dist/runtime/components/PillTabs.vue +1 -1
- package/dist/runtime/components/SearchBar.vue +103 -19
- package/dist/runtime/components/Sidebar.vue +1 -1
- package/dist/runtime/components/Tabs.vue +5 -5
- package/dist/runtime/components/ToolbarFilter.vue +1 -1
- package/dist/runtime/composables/useTheme.d.ts +17 -0
- package/dist/runtime/composables/useTheme.js +98 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}
|
|
1
|
+
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}body.theme-switching,body.theme-switching *,body.theme-switching :after,body.theme-switching :before{transition:none!important}body.high-contrast *{box-shadow:none!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--sidebar-w:220px;--sidebar-collapsed-w:56px;--rsidebar-w:280px;--rsidebar-collapsed-w:76px;--topbar-h:56px;--tabs-h:46px;--analysis-header-h:124px;--sourcebar-h:38px;--filterbar-h:56px;--color-primary:#2100ad;--color-primary-hover:#1a0088;--color-secondary:#6b3fff;--color-accent-soft:#b485ff;--color-violet-pale:#d6ccff;--color-healthcare:#4164ee;--color-discovery:#07816f;--color-pharma:#f7520e;--color-databank:#e04380;--color-healthcare-active:#
|
|
1
|
+
:root{--sidebar-w:220px;--sidebar-collapsed-w:56px;--rsidebar-w:280px;--rsidebar-collapsed-w:76px;--topbar-h:56px;--tabs-h:46px;--analysis-header-h:124px;--sourcebar-h:38px;--filterbar-h:56px;--color-primary:#2100ad;--color-primary-hover:#1a0088;--color-secondary:#6b3fff;--color-accent-soft:#b485ff;--color-violet-pale:#d6ccff;--color-healthcare:#4164ee;--color-discovery:#07816f;--color-pharma:#f7520e;--color-databank:#e04380;--color-healthcare-active:#3451d4;--color-discovery-active:#066b5c;--color-pharma-active:#d9470c;--color-databank-active:#c73a6f;--color-pharma-soft:#ff7942;--healthcare-rgb:65,100,238;--discovery-rgb:7,129,111;--pharma-rgb:247,82,14;--databank-rgb:224,67,128;--surface-rgb:255,255,255;--shadow-rgb:30,41,59;--color-accent-teal:#00d4a8;--color-notification:#e59;--color-text-inverse:#fff;--color-success:#16a34a;--color-success-bg:#dcfce7;--color-warning:#d97706;--color-warning-bg:#fef3c7;--color-danger:#dc2626;--color-danger-bg:#fee2e2;--color-info:#4164ee;--color-info-bg:#dbeafe;--bg-app:#eef1f5;--bg-surface:#fff;--bg-surface-2:#fbfbfd;--bg-surface-3:#f5f5f9;--bg-hover:#eef1fe;--border-default:#dbdef0;--border-soft:#f0f1f7;--text-primary:#1e293b;--text-secondary:#525670;--text-muted:#878ca6;--brand-rgb:33,0,173;--chart-cat-1:#2100ad;--chart-cat-2:#00a38e;--chart-cat-3:#e67e22;--chart-cat-4:#d63384;--chart-cat-5:#4164ee;--chart-cat-6:#16a34a;--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-pill:999px;--font-10:10px;--font-11:11px;--font-12:12px;--font-13:13px;--font-14:14px;--font-16:16px;--font-18:18px;--font-22:22px;--font-24:24px;--font-32:32px;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--font-serif:"Caudex",Georgia,serif;--font-sans:"Figtree",system-ui,sans-serif;--font-mono:"SF Mono",Menlo,monospace;--shadow-xs:0 1px 2px rgba(30,41,59,.04);--shadow-sm:0 2px 6px rgba(30,41,59,.06),0 1px 2px rgba(30,41,59,.03);--shadow-md:0 4px 12px rgba(30,41,59,.06),0 1px 3px rgba(30,41,59,.04);--shadow-lg:0 8px 24px rgba(30,41,59,.12);--shadow-focus:0 0 0 3px rgba(107,63,255,.14);--duration-instant:100ms;--duration-fast:150ms;--duration-base:240ms;--duration-slow:400ms;--duration-slowest:600ms;--ease-out:cubic-bezier(.2,0,0,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.5,1.6,.4,1);--z-base:1;--z-sticky:20;--z-header:30;--z-drawer:40;--z-modal:50;--z-toast:60;--z-help:70}body.night{--color-primary:#9b7cff;--color-secondary:#b485ff;--color-accent-soft:#d6ccff;--color-healthcare:#7aa0ff;--color-discovery:#2ecc71;--color-pharma:#ff8c00;--color-databank:#f472b6;--color-healthcare-active:#4164ee;--color-discovery-active:#07816f;--color-pharma-active:#f7520e;--color-databank-active:#e04380;--healthcare-rgb:122,160,255;--discovery-rgb:46,204,113;--pharma-rgb:255,140,0;--databank-rgb:244,114,182;--surface-rgb:26,26,36;--shadow-rgb:0,0,0;--bg-app:#0e0e14;--bg-surface:#1a1a24;--bg-surface-2:#232330;--bg-surface-3:#2a2a38;--bg-hover:#2d2a42;--border-default:#45455c;--border-soft:#32323f;--text-primary:#f5f6fa;--text-secondary:#cfd3e5;--text-muted:#8a90a8;--brand-rgb:155,124,255;--color-success:#6fe8c5;--color-success-bg:rgba(0,212,168,.18);--color-warning:#fbbf24;--color-warning-bg:rgba(245,158,11,.18);--color-danger:#fca5a5;--color-danger-bg:rgba(239,68,68,.18);--color-info:#7aa0ff;--color-info-bg:rgba(65,100,238,.18);--chart-cat-1:#9b7cff;--chart-cat-2:#6fe8c5;--chart-cat-3:#fbbf24;--chart-cat-4:#f472b6;--chart-cat-5:#7b9ef5;--chart-cat-6:#bef264;background:var(--bg-app);color:var(--text-primary)}body.high-contrast:not(.night){--text-primary:#000;--text-secondary:#1a1a24;--text-muted:#2f2f40;--border-default:#000;--border-soft:#525670;--bg-app:#fff;--bg-surface:#fff;--bg-surface-2:#fff;--bg-surface-3:#f0f1f7;--bg-hover:#ffe56b;--color-primary:#1100a0;--color-primary-hover:#0a0070;--color-secondary:#5028d8;--color-success:#006b2c;--color-warning:#8c4500;--color-danger:#a60000;--color-info:#0040c8}body.night.high-contrast{--text-primary:#fff;--text-secondary:#f5f6fa;--text-muted:#cfd3e5;--border-default:#fff;--border-soft:#b8bcd0;--bg-app:#000;--bg-surface:#000;--bg-surface-2:#000;--bg-surface-3:#000;--bg-hover:#ffe56b;--color-primary:#d6ccff;--color-primary-hover:#fff;--color-secondary:#e5daff;--color-accent-soft:#fff;--color-success:#6fe8c5;--color-warning:#fbbf24;--color-danger:#fca5a5;--color-info:#7aa0ff;--brand-rgb:214,204,255}body.reduce-motion *,body.reduce-motion :after,body.reduce-motion :before{animation:none!important;scroll-behavior:auto!important;transition:none!important}:root{--r-color-primary-50:#f0f4ff;--r-color-primary-100:#dce5fd;--r-color-primary-200:#b9cbfb;--r-color-primary-300:#96b0f9;--r-color-primary-400:#7395f5;--r-color-primary-500:#5a7ef2;--r-color-primary-600:var(--color-healthcare);--r-color-primary-700:#3451d4;--r-color-primary-800:#283fb0;--r-color-primary-900:#1c2d8a;--r-color-gray-50:#f9fafb;--r-color-gray-100:#f3f4f6;--r-color-gray-200:#e5e7eb;--r-color-gray-300:#d1d5db;--r-color-gray-400:#9ca3af;--r-color-gray-500:#6b7280;--r-color-gray-600:#4b5563;--r-color-gray-700:#374151;--r-color-gray-800:#1f2937;--r-color-gray-900:#111827;--r-color-gray-950:#030712;--r-color-success-500:var(--color-success);--r-color-success-600:#16a34a;--r-color-warning-500:#f59e0b;--r-color-warning-600:var(--color-warning);--r-color-danger-500:#ef4444;--r-color-danger-600:var(--color-danger);--r-color-white:#fff;--r-color-black:#000;--r-font-family:var(--font-sans);--r-font-mono:var(--font-mono);--r-text-xs:0.75rem;--r-text-sm:0.875rem;--r-text-base:1rem;--r-text-lg:1.125rem;--r-text-xl:1.25rem;--r-text-2xl:1.5rem;--r-text-3xl:1.875rem;--r-text-4xl:2.25rem;--r-font-weight-normal:var(--weight-normal);--r-font-weight-medium:var(--weight-medium);--r-font-weight-semibold:var(--weight-semibold);--r-font-weight-bold:var(--weight-bold);--r-leading-tight:1.25;--r-leading-normal:1.5;--r-leading-relaxed:1.75;--r-space-0:0;--r-space-1:var(--space-4);--r-space-2:var(--space-8);--r-space-3:var(--space-12);--r-space-4:var(--space-16);--r-space-5:var(--space-20);--r-space-6:var(--space-24);--r-space-8:var(--space-32);--r-space-10:var(--space-40);--r-space-12:var(--space-48);--r-radius-none:0;--r-radius-sm:var(--radius-sm);--r-radius-md:var(--radius-md);--r-radius-lg:var(--radius-lg);--r-radius-xl:0.75rem;--r-radius-2xl:1rem;--r-radius-full:var(--radius-pill);--r-shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--r-shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--r-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--r-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--r-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--r-transition-fast:var(--duration-fast) var(--ease-in-out);--r-transition-base:200ms var(--ease-in-out);--r-transition-slow:var(--duration-slow) var(--ease-in-out)}
|
|
@@ -91,5 +91,5 @@ function closeDrawer() {
|
|
|
91
91
|
</template>
|
|
92
92
|
|
|
93
93
|
<style scoped>
|
|
94
|
-
.rm-action-bar{bottom:0;display:flex;position:fixed;right:0;top:0;transition:width .3s cubic-bezier(.4,0,.2,1);z-index:61}.rm-action-bar__panel{background-color:var(--
|
|
94
|
+
.rm-action-bar{bottom:0;display:flex;position:fixed;right:0;top:0;transition:width .3s cubic-bezier(.4,0,.2,1);z-index:61}.rm-action-bar__panel{background-color:var(--color-text-inverse);border-left:1px solid var(--border-default);display:flex;flex-direction:column;flex-shrink:0;height:100%}.rm-action-bar__header{align-items:center;display:flex;gap:12px;justify-content:space-between;min-height:64px;padding:0 16px}.rm-action-bar__tabs{border-bottom:1px solid var(--border-default);padding:8px 16px 12px}.rm-action-bar__content{display:flex;flex:1;flex-direction:column;overflow-y:auto}.rm-action-bar__footer{border-top:1px solid var(--border-default);padding:16px}.rm-action-bar__overlay{backdrop-filter:blur(2px);background-color:rgba(0,0,0,.2);inset:0;position:fixed;z-index:60}.rm-action-bar-overlay-enter-active,.rm-action-bar-overlay-leave-active{transition:opacity .25s ease}.rm-action-bar-overlay-enter-from,.rm-action-bar-overlay-leave-to{opacity:0}.rm-action-bar__drawer{background-color:var(--color-text-inverse);border-left:1px solid var(--border-default);display:flex;flex:1;flex-direction:column;min-width:0;overflow:hidden}.rm-action-bar__drawer-header{align-items:center;border-bottom:1px solid var(--border-default);display:flex;justify-content:space-between;min-height:64px;padding:0 24px}.rm-action-bar__drawer-close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:32px}.rm-action-bar__drawer-close:hover{background-color:var(--bg-surface-3);color:var(--text-secondary)}.rm-action-bar__drawer-body{flex:1;overflow-y:auto;padding:24px}.rm-action-bar__drawer-footer{border-top:1px solid var(--border-default);padding:16px 24px}.rm-action-bar-drawer-enter-active,.rm-action-bar-drawer-leave-active{transition:opacity .25s ease}.rm-action-bar-drawer-enter-from,.rm-action-bar-drawer-leave-to{opacity:0}
|
|
95
95
|
</style>
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
PhMinus,
|
|
7
7
|
} from '@phosphor-icons/vue'
|
|
8
8
|
|
|
9
|
-
interface
|
|
9
|
+
export interface AdvancedSearchRow {
|
|
10
10
|
id: number
|
|
11
11
|
type: 'and' | 'or' | 'not'
|
|
12
12
|
value: string
|
|
@@ -16,17 +16,28 @@ defineProps<{
|
|
|
16
16
|
visible: boolean
|
|
17
17
|
}>()
|
|
18
18
|
|
|
19
|
-
defineEmits<{
|
|
19
|
+
const emit = defineEmits<{
|
|
20
20
|
close: []
|
|
21
21
|
saveSearch: []
|
|
22
|
+
apply: [rows: AdvancedSearchRow[]]
|
|
23
|
+
clear: []
|
|
22
24
|
}>()
|
|
23
25
|
|
|
24
26
|
let nextId = 1
|
|
25
27
|
|
|
26
|
-
const rows = ref<
|
|
28
|
+
const rows = ref<AdvancedSearchRow[]>([
|
|
27
29
|
{ id: nextId++, type: 'and', value: '' },
|
|
28
30
|
])
|
|
29
31
|
|
|
32
|
+
let debounceTimer: ReturnType<typeof setTimeout>
|
|
33
|
+
|
|
34
|
+
function emitApply() {
|
|
35
|
+
clearTimeout(debounceTimer)
|
|
36
|
+
debounceTimer = setTimeout(() => {
|
|
37
|
+
emit('apply', rows.value.filter(r => r.value.trim() !== ''))
|
|
38
|
+
}, 500)
|
|
39
|
+
}
|
|
40
|
+
|
|
30
41
|
function addRow(type: 'and' | 'or' | 'not') {
|
|
31
42
|
rows.value.push({ id: nextId++, type, value: '' })
|
|
32
43
|
}
|
|
@@ -36,16 +47,19 @@ function removeRow(id: number) {
|
|
|
36
47
|
if (rows.value.length === 0) {
|
|
37
48
|
rows.value.push({ id: nextId++, type: 'and', value: '' })
|
|
38
49
|
}
|
|
50
|
+
emitApply()
|
|
39
51
|
}
|
|
40
52
|
|
|
41
53
|
function clearAll() {
|
|
42
54
|
rows.value = [{ id: nextId++, type: 'and', value: '' }]
|
|
55
|
+
emit('clear')
|
|
56
|
+
emitApply()
|
|
43
57
|
}
|
|
44
58
|
|
|
45
59
|
const typeColors: Record<string, string> = {
|
|
46
|
-
and: '
|
|
47
|
-
or: '
|
|
48
|
-
not: '
|
|
60
|
+
and: 'var(--color-healthcare)',
|
|
61
|
+
or: 'var(--color-discovery)',
|
|
62
|
+
not: 'var(--color-pharma)',
|
|
49
63
|
}
|
|
50
64
|
</script>
|
|
51
65
|
|
|
@@ -55,7 +69,6 @@ const typeColors: Record<string, string> = {
|
|
|
55
69
|
<h2 class="advanced-search__title">Advanced search</h2>
|
|
56
70
|
<RmButton variant="outline" size="sm" @click="$emit('saveSearch')">
|
|
57
71
|
Save search
|
|
58
|
-
<PhLineVertical :size="14" />
|
|
59
72
|
</RmButton>
|
|
60
73
|
</div>
|
|
61
74
|
|
|
@@ -74,9 +87,15 @@ const typeColors: Record<string, string> = {
|
|
|
74
87
|
<input
|
|
75
88
|
v-model="row.value"
|
|
76
89
|
type="text"
|
|
77
|
-
|
|
90
|
+
placeholder="Add a keyword"
|
|
78
91
|
class="advanced-search__input"
|
|
79
|
-
:class="{
|
|
92
|
+
:class="{
|
|
93
|
+
'advanced-search__input--and': row.type === 'and',
|
|
94
|
+
'advanced-search__input--or': row.type === 'or',
|
|
95
|
+
'advanced-search__input--not': row.type === 'not',
|
|
96
|
+
}"
|
|
97
|
+
@input="emitApply"
|
|
98
|
+
@keydown.enter="emitApply"
|
|
80
99
|
>
|
|
81
100
|
<button class="advanced-search__delete" @click="removeRow(row.id)">
|
|
82
101
|
<PhTrash :size="16" />
|
|
@@ -106,5 +125,5 @@ const typeColors: Record<string, string> = {
|
|
|
106
125
|
</template>
|
|
107
126
|
|
|
108
127
|
<style scoped>
|
|
109
|
-
.advanced-search{background-color:var(--
|
|
128
|
+
.advanced-search{background-color:var(--color-text-inverse);border-bottom:1px solid var(--border-default);padding:20px 24px}.advanced-search__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.advanced-search__title{color:var(--text-primary);font-family:var(--font-sans);font-size:16px;font-weight:700;margin:0}.advanced-search__rows{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.advanced-search__row{align-items:center;display:flex;gap:12px}.advanced-search__type{flex-shrink:0;font-weight:600;min-width:32px}.advanced-search__input,.advanced-search__type{font-family:var(--font-sans);font-size:var(--font-14)}.advanced-search__input{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-primary);flex:1;height:36px;outline:none;padding:0 12px;transition:border-color var(--duration-fast) var(--ease-in-out)}.advanced-search__input--and:focus,.advanced-search__input:focus{border-color:var(--color-healthcare)}.advanced-search__input--or:focus{border-color:var(--color-discovery)}.advanced-search__input--not,.advanced-search__input--not:focus{border-color:var(--color-pharma)}.advanced-search__input::-moz-placeholder{color:var(--text-muted)}.advanced-search__input::placeholder{color:var(--text-muted)}.advanced-search__delete{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;display:flex;justify-content:center;padding:4px;transition:color var(--duration-fast) var(--ease-in-out)}.advanced-search__delete:hover{color:var(--color-danger)}.advanced-search__actions{display:flex;gap:8px;margin-bottom:16px}.advanced-search__add{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:4px;height:32px;padding:4px 12px;transition:all var(--duration-fast) var(--ease-in-out)}.advanced-search__add:hover{border-color:var(--border-default);box-shadow:0 1px 2px 0 rgba(var(--shadow-rgb),.1)}.advanced-search__clear{background:none;border:1px solid var(--color-danger);border-radius:6px;color:var(--color-danger);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);padding:4px 12px;transition:all var(--duration-fast) var(--ease-in-out)}.advanced-search__clear:hover{background-color:var(--color-danger);color:var(--color-text-inverse)}
|
|
110
129
|
</style>
|
|
@@ -42,5 +42,5 @@ defineProps<RmBreadcrumbProps>()
|
|
|
42
42
|
</template>
|
|
43
43
|
|
|
44
44
|
<style scoped>
|
|
45
|
-
.rm-breadcrumb{align-items:center;color:var(--
|
|
45
|
+
.rm-breadcrumb{align-items:center;color:var(--text-muted);display:flex;font-family:var(--font-sans);font-size:14px;gap:8px}.rm-breadcrumb__sep{color:var(--border-default)}.rm-breadcrumb__item{align-items:center;color:var(--text-muted);display:inline-flex;gap:6px;text-decoration:none;transition:color var(--duration-fast) var(--ease-in-out)}.rm-breadcrumb__item--first{color:var(--text-secondary);font-weight:500}.rm-breadcrumb__icon,a.rm-breadcrumb__item:hover{color:var(--color-healthcare)}
|
|
46
46
|
</style>
|
|
@@ -50,5 +50,5 @@ defineEmits<{
|
|
|
50
50
|
</template>
|
|
51
51
|
|
|
52
52
|
<style scoped>
|
|
53
|
-
.rm-button{align-items:center;border:1px solid transparent;border-radius:6px;cursor:pointer;display:inline-flex;font-family:var(--
|
|
53
|
+
.rm-button{align-items:center;border:1px solid transparent;border-radius:6px;cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-weight:500;gap:8px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-button:focus-visible{outline:2px solid var(--color-healthcare);outline-offset:2px}.rm-button:disabled{cursor:not-allowed;opacity:.5}.rm-button--sm{font-size:13px;height:32px;padding:6px 16px}.rm-button--md{font-size:14px;height:40px;padding:10px 24px}.rm-button--lg{font-size:15px;height:48px;padding:12px 28px}.rm-button--primary-fill{background:linear-gradient(180deg,rgba(var(--healthcare-rgb),.8) 0,rgba(var(--healthcare-rgb),.9) 100%);border-color:var(--color-healthcare);box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-text-inverse)}.rm-button--primary-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-healthcare) 0,var(--color-healthcare) 100%);box-shadow:0 2px 4px 0 rgba(var(--healthcare-rgb),.6)}.rm-button--primary-fill:active:not(:disabled){background:var(--color-healthcare-active);box-shadow:0 1px 2px 0 rgba(var(--healthcare-rgb),.4)}.rm-button--primary-stroke{box-shadow:0 2px 3px 0 rgba(var(--healthcare-rgb),.5);color:var(--color-healthcare)}.rm-button--primary-stroke,.rm-button--primary-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-healthcare)}.rm-button--primary-stroke:hover:not(:disabled){box-shadow:none}.rm-button--primary-stroke:active:not(:disabled){background:var(--bg-hover);box-shadow:none}.rm-button--discovery-fill{background:linear-gradient(180deg,rgba(var(--discovery-rgb),.8) 0,rgba(var(--discovery-rgb),.9) 100%);border-color:var(--color-discovery);box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-text-inverse)}.rm-button--discovery-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-discovery) 0,var(--color-discovery) 100%);border-color:var(--color-discovery);box-shadow:none}.rm-button--discovery-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-discovery-active) 0,var(--color-discovery-active) 100%);box-shadow:none}.rm-button--discovery-stroke{box-shadow:0 2px 3px 0 rgba(var(--discovery-rgb),.5);color:var(--color-discovery)}.rm-button--discovery-stroke,.rm-button--discovery-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-discovery)}.rm-button--discovery-stroke:hover:not(:disabled){box-shadow:none}.rm-button--discovery-stroke:active:not(:disabled){background:rgba(var(--discovery-rgb),.05);box-shadow:none}.rm-button--databank-fill{background:linear-gradient(180deg,rgba(var(--databank-rgb),.8) 0,rgba(var(--databank-rgb),.9) 100%);border-color:var(--color-databank);box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-text-inverse)}.rm-button--databank-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-databank) 0,var(--color-databank) 100%);border-color:var(--color-databank);box-shadow:none}.rm-button--databank-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-databank-active) 0,var(--color-databank-active) 100%);box-shadow:none}.rm-button--databank-stroke{box-shadow:0 2px 3px 0 rgba(var(--databank-rgb),.5);color:var(--color-databank)}.rm-button--databank-stroke,.rm-button--databank-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-databank)}.rm-button--databank-stroke:hover:not(:disabled){box-shadow:none}.rm-button--databank-stroke:active:not(:disabled){background:rgba(var(--databank-rgb),.05);box-shadow:none}.rm-button--pharma-fill{background:linear-gradient(180deg,var(--color-pharma-soft) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-text-inverse)}.rm-button--pharma-fill:hover:not(:disabled){background:linear-gradient(180deg,var(--color-pharma) 0,var(--color-pharma) 100%);border-color:var(--color-pharma);box-shadow:none}.rm-button--pharma-fill:active:not(:disabled){background:linear-gradient(180deg,var(--color-pharma-active) 0,var(--color-pharma-active) 100%);box-shadow:none}.rm-button--pharma-stroke{box-shadow:0 2px 3px 0 rgba(var(--pharma-rgb),.5);color:var(--color-pharma)}.rm-button--pharma-stroke,.rm-button--pharma-stroke:hover:not(:disabled){background:linear-gradient(180deg,rgba(var(--surface-rgb),.5) 0,rgba(var(--surface-rgb),.9) 100%);border-color:var(--color-pharma)}.rm-button--pharma-stroke:hover:not(:disabled){box-shadow:none}.rm-button--pharma-stroke:active:not(:disabled){background:rgba(var(--pharma-rgb),.05);box-shadow:none}.rm-button--secondary{background-color:var(--bg-surface-3);color:var(--text-primary)}.rm-button--secondary:active:not(:disabled),.rm-button--secondary:hover:not(:disabled){background-color:var(--border-default)}.rm-button--outline{background-color:transparent;border-color:var(--border-default);color:var(--text-secondary)}.rm-button--outline:hover:not(:disabled){background-color:var(--bg-surface-2);border-color:var(--text-muted)}.rm-button--outline:active:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--ghost{background-color:transparent;color:var(--text-secondary)}.rm-button--ghost:hover:not(:disabled){background-color:var(--bg-surface-3)}.rm-button--ghost:active:not(:disabled){background-color:var(--border-default)}.rm-button--block{width:100%}
|
|
54
54
|
</style>
|
|
@@ -43,5 +43,5 @@ withDefaults(defineProps<RCardProps>(), {
|
|
|
43
43
|
</template>
|
|
44
44
|
|
|
45
45
|
<style scoped>
|
|
46
|
-
.r-card{background-color:var(--
|
|
46
|
+
.r-card{background-color:var(--color-text-inverse);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--duration-base) var(--ease-in-out)}.r-card--bordered{border:1px solid var(--border-default)}.r-card--shadow-none{box-shadow:none}.r-card--shadow-sm{box-shadow:var(--shadow-sm)}.r-card--shadow-md{box-shadow:var(--shadow-md)}.r-card--hoverable:hover,.r-card--shadow-lg{box-shadow:var(--shadow-lg)}.r-card--hoverable:hover{transform:translateY(-2px)}.r-card--padding-none .r-card__body{padding:0}.r-card--padding-sm .r-card__body{padding:var(--space-12)}.r-card--padding-md .r-card__body{padding:var(--space-20)}.r-card--padding-lg .r-card__body{padding:var(--space-32)}.r-card__header{border-bottom:1px solid var(--border-default);font-weight:var(--weight-semibold)}.r-card__footer,.r-card__header{padding:var(--space-16) var(--space-20)}.r-card__footer{background-color:var(--bg-surface-2);border-top:1px solid var(--border-default)}
|
|
47
47
|
</style>
|
|
@@ -75,5 +75,5 @@ const drawerWidth = computed(() => sizeMap[props.size] || props.size)
|
|
|
75
75
|
</template>
|
|
76
76
|
|
|
77
77
|
<style scoped>
|
|
78
|
-
.rm-drawer-overlay{backdrop-filter:blur(2px);background-color:rgba(0,0,0,.2);inset:0;position:fixed;z-index:90}.rm-drawer{background-color:var(--
|
|
78
|
+
.rm-drawer-overlay{backdrop-filter:blur(2px);background-color:rgba(0,0,0,.2);inset:0;position:fixed;z-index:90}.rm-drawer{background-color:var(--color-text-inverse);bottom:0;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-width:100%;position:fixed;top:0;z-index:91}.rm-drawer--right{border-left:1px solid var(--border-default)}.rm-drawer--left{border-right:1px solid var(--border-default)}.rm-drawer__header{align-items:center;border-bottom:1px solid var(--border-default);display:flex;justify-content:space-between;min-height:64px;padding:16px 24px}.rm-drawer__close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:32px}.rm-drawer__close:hover{background-color:var(--bg-surface-3);color:var(--text-secondary)}.rm-drawer__body{flex:1;overflow-y:auto;padding:24px}.rm-drawer__footer{border-top:1px solid var(--border-default);padding:16px 24px}.rm-drawer-overlay-enter-active,.rm-drawer-overlay-leave-active{transition:opacity .25s ease}.rm-drawer-overlay-enter-from,.rm-drawer-overlay-leave-to{opacity:0}.rm-drawer-slide-right-enter-active,.rm-drawer-slide-right-leave-active{transition:transform .3s cubic-bezier(.4,0,.2,1)}.rm-drawer-slide-right-enter-from,.rm-drawer-slide-right-leave-to{transform:translateX(100%)}.rm-drawer-slide-left-enter-active,.rm-drawer-slide-left-leave-active{transition:transform .3s cubic-bezier(.4,0,.2,1)}.rm-drawer-slide-left-enter-from,.rm-drawer-slide-left-leave-to{transform:translateX(-100%)}
|
|
79
79
|
</style>
|
|
@@ -22,5 +22,5 @@ const checked = defineModel<boolean>({ default: false })
|
|
|
22
22
|
</template>
|
|
23
23
|
|
|
24
24
|
<style scoped>
|
|
25
|
-
.filter-checkbox{align-items:center;background
|
|
25
|
+
.filter-checkbox{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-checkbox:hover{border-color:var(--border-default)}.filter-checkbox--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-checkbox__box{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-checkbox__box--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}
|
|
26
26
|
</style>
|
|
@@ -112,7 +112,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
|
|
112
112
|
<h3 class="filter-complex__title">Custom selection</h3>
|
|
113
113
|
|
|
114
114
|
<div class="filter-complex__search">
|
|
115
|
-
<PhMagnifyingGlass :size="14" color="
|
|
115
|
+
<PhMagnifyingGlass :size="14" color="var(--text-muted)" />
|
|
116
116
|
<input
|
|
117
117
|
v-model="addSearch"
|
|
118
118
|
type="text"
|
|
@@ -165,7 +165,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
|
|
165
165
|
</div>
|
|
166
166
|
|
|
167
167
|
<div v-if="selected.length > 0" class="filter-complex__search">
|
|
168
|
-
<PhMagnifyingGlass :size="14" color="
|
|
168
|
+
<PhMagnifyingGlass :size="14" color="var(--text-muted)" />
|
|
169
169
|
<input
|
|
170
170
|
v-model="delSearch"
|
|
171
171
|
type="text"
|
|
@@ -201,5 +201,5 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
|
|
201
201
|
</template>
|
|
202
202
|
|
|
203
203
|
<style scoped>
|
|
204
|
-
.filter-complex{position:relative}.filter-complex__trigger{align-items:center;background
|
|
204
|
+
.filter-complex{position:relative}.filter-complex__trigger{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-complex__trigger:hover{border-color:var(--border-default)}.filter-complex__icon{color:var(--color-healthcare);flex-shrink:0}.filter-complex__trigger--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-complex__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-complex__badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-complex__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-complex__caret--open{transform:rotate(180deg)}.filter-complex__panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 24px rgba(var(--shadow-rgb),.1),0 2px 8px rgba(var(--shadow-rgb),.05);display:flex;left:0;max-height:380px;overflow:hidden;position:absolute;top:calc(100% + 4px);width:520px;z-index:50}.filter-complex__left{flex:1 1 60%;flex-direction:column}.filter-complex__left,.filter-complex__right{display:flex;gap:8px;overflow:hidden;padding:20px}.filter-complex__right{background-color:var(--bg-surface-2);border-left:1px solid var(--border-default);flex:1 1 40%;flex-direction:column}.filter-complex__right-header{align-items:center;display:flex;justify-content:space-between}.filter-complex__title{color:var(--text-secondary);font-size:var(--font-14);font-weight:var(--weight-semibold);margin:0}.filter-complex__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;display:flex;gap:8px;padding:6px 8px}.filter-complex__search:focus-within{border-color:var(--color-healthcare)}.filter-complex__search-input{background:transparent;border:none;color:var(--text-secondary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);outline:none}.filter-complex__search-input::-moz-placeholder{color:var(--text-muted)}.filter-complex__search-input::placeholder{color:var(--text-muted)}.filter-complex__search-clear{color:var(--text-muted);cursor:pointer;flex-shrink:0}.filter-complex__search-clear:hover{color:var(--text-secondary)}.filter-complex__action{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);padding:0;text-align:left;text-decoration:underline}.filter-complex__action--add{color:var(--color-healthcare)}.filter-complex__action--add:hover{color:var(--color-healthcare-active)}.filter-complex__action--clear,.filter-complex__action--clear:hover{color:var(--color-danger)}.filter-complex__list{display:flex;flex:1;flex-direction:column;overflow-y:auto}.filter-complex__list::-webkit-scrollbar{width:4px}.filter-complex__list::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:100px}.filter-complex__list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.filter-complex__item{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out)}.filter-complex__item:hover{background-color:var(--bg-surface-2)}.filter-complex__right .filter-complex__item:hover{background-color:var(--bg-surface-3)}.filter-complex__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__item-icon{flex-shrink:0;opacity:0;transition:opacity var(--duration-fast) var(--ease-in-out)}.filter-complex__item:hover .filter-complex__item-icon{opacity:1}.filter-complex__item-icon--add{color:var(--color-healthcare)}.filter-complex__item-icon--remove{color:var(--color-danger)}.filter-complex__empty{color:var(--text-muted);font-size:var(--font-14);font-style:italic;padding:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
|
|
205
205
|
</style>
|
|
@@ -12,9 +12,11 @@ const props = withDefaults(defineProps<{
|
|
|
12
12
|
label: string
|
|
13
13
|
options: FilterDropdownOption[]
|
|
14
14
|
multiple?: boolean
|
|
15
|
+
showSelectAll?: boolean
|
|
15
16
|
}>(), {
|
|
16
17
|
icon: undefined,
|
|
17
18
|
multiple: true,
|
|
19
|
+
showSelectAll: false,
|
|
18
20
|
})
|
|
19
21
|
|
|
20
22
|
const selected = defineModel<string[]>({ default: () => [] })
|
|
@@ -61,6 +63,17 @@ function isSelected(value: string) {
|
|
|
61
63
|
return selected.value.includes(value)
|
|
62
64
|
}
|
|
63
65
|
|
|
66
|
+
const allSelected = computed(() => props.options.length > 0 && selected.value.length === props.options.length)
|
|
67
|
+
|
|
68
|
+
function toggleAll() {
|
|
69
|
+
hasUserChanged.value = true
|
|
70
|
+
if (allSelected.value) {
|
|
71
|
+
selected.value = []
|
|
72
|
+
} else {
|
|
73
|
+
selected.value = props.options.map(o => o.value)
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
64
77
|
function onClickOutside(e: Event) {
|
|
65
78
|
if (chipRef.value && !chipRef.value.contains(e.target as Node)) {
|
|
66
79
|
isOpen.value = false
|
|
@@ -92,6 +105,17 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
|
|
92
105
|
|
|
93
106
|
<Transition name="dropdown">
|
|
94
107
|
<div v-if="isOpen" class="filter-chip__dropdown">
|
|
108
|
+
<button
|
|
109
|
+
v-if="showSelectAll && multiple && options.length > 0"
|
|
110
|
+
class="filter-chip__select-all"
|
|
111
|
+
@click="toggleAll"
|
|
112
|
+
>
|
|
113
|
+
<span class="filter-chip__checkbox" :class="{ 'filter-chip__checkbox--checked': allSelected }">
|
|
114
|
+
<PhCheck v-if="allSelected" :size="10" weight="bold" />
|
|
115
|
+
</span>
|
|
116
|
+
<span>{{ allSelected ? 'Deselect all' : 'Select all' }}</span>
|
|
117
|
+
</button>
|
|
118
|
+
<div :class="{ 'filter-chip__options-group': showSelectAll && multiple && options.length > 0 }">
|
|
95
119
|
<button
|
|
96
120
|
v-for="option in options"
|
|
97
121
|
:key="option.value"
|
|
@@ -109,11 +133,12 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
|
|
109
133
|
</span>
|
|
110
134
|
<span>{{ option.label }}</span>
|
|
111
135
|
</button>
|
|
136
|
+
</div>
|
|
112
137
|
</div>
|
|
113
138
|
</Transition>
|
|
114
139
|
</div>
|
|
115
140
|
</template>
|
|
116
141
|
|
|
117
142
|
<style scoped>
|
|
118
|
-
.filter-chip-wrapper{position:relative}.filter-chip{align-items:center;background
|
|
143
|
+
.filter-chip-wrapper{position:relative}.filter-chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap;width:193px}.filter-chip:hover{border-color:var(--border-default)}.filter-chip__icon{color:var(--color-healthcare);flex-shrink:0}.filter-chip--active{border-color:var(--color-healthcare);box-shadow:0 0 8px 0 rgba(var(--healthcare-rgb),.1)}.filter-chip__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-chip__badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-chip__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.filter-chip__caret--open{transform:rotate(180deg)}.filter-chip__dropdown{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:6px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-height:300px;max-width:420px;min-width:380px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);width:-moz-max-content;width:max-content;z-index:50}.filter-chip__option{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.filter-chip__option:hover{background-color:var(--bg-surface-2)}.filter-chip__option--selected{color:var(--text-primary);font-weight:var(--weight-medium)}.filter-chip__checkbox{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__checkbox--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.filter-chip__radio{align-items:center;border:1.5px solid var(--border-default);border-radius:100%;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.filter-chip__radio--checked{border-color:var(--color-healthcare)}.filter-chip__radio--checked:after{background-color:var(--color-healthcare);border-radius:100%;content:"";height:8px;width:8px}.filter-chip__select-all{align-items:center;background:none;border:none;border-radius:4px;color:var(--color-healthcare);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:500;gap:8px;padding:6px 8px;text-align:left;width:100%}.filter-chip__select-all:hover{background-color:rgba(var(--healthcare-rgb),.04)}.filter-chip__options-group{border-left:1px solid var(--border-default);margin-left:14px;padding-left:6px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
|
|
119
144
|
</style>
|
|
@@ -48,5 +48,5 @@ defineEmits<{
|
|
|
48
48
|
</template>
|
|
49
49
|
|
|
50
50
|
<style scoped>
|
|
51
|
-
.r-input-wrapper{display:flex;flex-direction:column;gap:var(--
|
|
51
|
+
.r-input-wrapper{display:flex;flex-direction:column;gap:var(--space-4)}.r-input-label{color:var(--text-secondary);font-size:var(--font-14);font-weight:var(--weight-medium)}.r-input-required{color:var(--color-danger);margin-left:2px}.r-input{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-14);height:2.5rem;line-height:1.5;padding:var(--space-8) var(--space-12);transition:all var(--duration-fast) var(--ease-in-out);width:100%}.r-input::-moz-placeholder{color:var(--text-muted)}.r-input::placeholder{color:var(--text-muted)}.r-input:hover:not(:disabled){border-color:var(--text-muted)}.r-input:focus{border-color:var(--color-healthcare);box-shadow:0 0 0 3px var(--bg-hover);outline:none}.r-input:disabled{background-color:var(--bg-surface-2);cursor:not-allowed;opacity:.5}.r-input--error,.r-input--error:focus{border-color:var(--color-danger)}.r-input--error:focus{box-shadow:0 0 0 3px rgba(239,68,68,.15)}.r-input-error{color:var(--color-danger);font-size:var(--font-12);margin-top:var(--space-4)}
|
|
52
52
|
</style>
|
|
@@ -56,5 +56,5 @@ defineEmits<{
|
|
|
56
56
|
</template>
|
|
57
57
|
|
|
58
58
|
<style scoped>
|
|
59
|
-
.rm-nav-link{background:none;border:none;border-radius:var(--
|
|
59
|
+
.rm-nav-link{background:none;border:none;border-radius:var(--radius-lg);cursor:pointer;gap:8px;padding:6px 12px 6px 6px;text-align:left;width:100%}.rm-nav-link,.rm-nav-link__icon{align-items:center;display:flex;transition:all var(--duration-fast) var(--ease-in-out)}.rm-nav-link__icon{background-color:var(--bg-surface-3);border-radius:var(--radius-md);color:var(--text-secondary);flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-nav-link__label{color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:14px;font-weight:400;line-height:160%;overflow:hidden;text-overflow:ellipsis;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.rm-nav-link__caret{align-items:center;color:var(--text-muted);display:flex;flex-shrink:0;transition:transform .25s ease,color var(--duration-fast) var(--ease-in-out)}.rm-nav-link__caret--expanded{transform:rotate(-180deg)}.rm-nav-link:not(.rm-nav-link--active):hover{background-color:var(--bg-hover)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__icon{background-color:var(--bg-hover);color:var(--color-healthcare)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__caret{color:var(--color-healthcare)}.rm-nav-link--active{background-color:var(--bg-surface-3)}.rm-nav-link--active .rm-nav-link__icon{background-color:var(--color-healthcare);color:var(--color-text-inverse)}.rm-nav-link--active .rm-nav-link__caret{color:var(--color-healthcare)}
|
|
60
60
|
</style>
|
|
@@ -33,5 +33,5 @@ defineEmits<{
|
|
|
33
33
|
</template>
|
|
34
34
|
|
|
35
35
|
<style scoped>
|
|
36
|
-
.toolbar-pill{align-items:center;background-color
|
|
36
|
+
.toolbar-pill{align-items:center;background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:38px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:4px;padding:4px 12px;transition:all var(--duration-fast) var(--ease-in-out);white-space:nowrap}.toolbar-pill:hover{box-shadow:0 1px 2px 0 rgba(var(--shadow-rgb),.1)}.toolbar-pill--active{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.toolbar-pill--active:hover{background-color:var(--color-healthcare-active);border-color:var(--color-healthcare-active);box-shadow:none}.toolbar-pill--primary{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.toolbar-pill--primary:hover{background-color:var(--color-healthcare-active);border-color:var(--color-healthcare-active);box-shadow:none}.toolbar-pill--secondary{background-color:var(--bg-surface-3);border-color:transparent;color:var(--text-primary)}.toolbar-pill--secondary:hover{background-color:var(--border-default);border-color:transparent}.toolbar-pill--pharma{background-color:var(--color-pharma);border-color:var(--color-pharma);color:var(--color-text-inverse)}.toolbar-pill--pharma:hover{background-color:var(--color-pharma-active);border-color:var(--color-pharma-active)}.toolbar-pill--discovery{background-color:var(--color-discovery);border-color:var(--color-discovery);color:var(--color-text-inverse)}.toolbar-pill--discovery:hover{background-color:var(--color-discovery-active);border-color:var(--color-discovery-active)}.toolbar-pill--databank{background-color:var(--color-databank);border-color:var(--color-databank);color:var(--color-text-inverse)}.toolbar-pill--databank:hover{background-color:var(--color-databank-active);border-color:var(--color-databank-active)}
|
|
37
37
|
</style>
|
|
@@ -30,5 +30,5 @@ defineEmits<{
|
|
|
30
30
|
</template>
|
|
31
31
|
|
|
32
32
|
<style scoped>
|
|
33
|
-
.rm-pill-tabs{display:flex;gap:4px}.rm-pill-tabs__tab{background:transparent;border:none;border-radius:var(--
|
|
33
|
+
.rm-pill-tabs{display:flex;gap:4px}.rm-pill-tabs__tab{background:transparent;border:none;border-radius:var(--radius-lg);cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:400;padding:6px 14px;transition:all var(--duration-fast) var(--ease-in-out)}.rm-pill-tabs__tab,.rm-pill-tabs__tab:hover{color:var(--text-secondary)}.rm-pill-tabs__tab--active{background-color:var(--bg-surface-3);color:var(--text-primary);font-weight:600}
|
|
34
34
|
</style>
|
|
@@ -1,38 +1,122 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
|
|
2
|
+
import { PhMagnifyingGlass, PhX } from '@phosphor-icons/vue'
|
|
3
|
+
|
|
4
|
+
export interface SearchSuggestion {
|
|
5
|
+
label: string
|
|
6
|
+
field?: string
|
|
7
|
+
}
|
|
3
8
|
|
|
4
9
|
const model = defineModel<string>({ default: '' })
|
|
5
10
|
|
|
6
|
-
withDefaults(defineProps<{
|
|
11
|
+
const props = withDefaults(defineProps<{
|
|
7
12
|
advancedActive?: boolean
|
|
13
|
+
advancedCount?: number
|
|
14
|
+
suggestions?: SearchSuggestion[]
|
|
15
|
+
placeholder?: string
|
|
8
16
|
}>(), {
|
|
9
17
|
advancedActive: false,
|
|
18
|
+
advancedCount: 0,
|
|
19
|
+
suggestions: () => [],
|
|
20
|
+
placeholder: 'Search...',
|
|
10
21
|
})
|
|
11
22
|
|
|
12
|
-
defineEmits<{
|
|
23
|
+
const emit = defineEmits<{
|
|
13
24
|
advancedSearch: []
|
|
25
|
+
search: [value: string]
|
|
26
|
+
typing: [value: string]
|
|
27
|
+
selectSuggestion: [suggestion: SearchSuggestion]
|
|
14
28
|
}>()
|
|
29
|
+
|
|
30
|
+
const showSuggestions = ref(false)
|
|
31
|
+
const barRef = ref<HTMLElement>()
|
|
32
|
+
let debounceTimer: ReturnType<typeof setTimeout>
|
|
33
|
+
|
|
34
|
+
function onInput() {
|
|
35
|
+
clearTimeout(debounceTimer)
|
|
36
|
+
debounceTimer = setTimeout(() => {
|
|
37
|
+
emit('typing', model.value)
|
|
38
|
+
if (model.value.length >= 2) {
|
|
39
|
+
showSuggestions.value = true
|
|
40
|
+
} else {
|
|
41
|
+
showSuggestions.value = false
|
|
42
|
+
}
|
|
43
|
+
}, 300)
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function submitSearch() {
|
|
47
|
+
showSuggestions.value = false
|
|
48
|
+
emit('search', model.value)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function selectSuggestion(sugg: SearchSuggestion) {
|
|
52
|
+
model.value = sugg.label
|
|
53
|
+
showSuggestions.value = false
|
|
54
|
+
emit('selectSuggestion', sugg)
|
|
55
|
+
emit('search', sugg.label)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function clearSearch() {
|
|
59
|
+
model.value = ''
|
|
60
|
+
showSuggestions.value = false
|
|
61
|
+
emit('search', '')
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function onClickOutside(e: Event) {
|
|
65
|
+
if (barRef.value && !barRef.value.contains(e.target as Node)) {
|
|
66
|
+
showSuggestions.value = false
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
onMounted(() => document.addEventListener('click', onClickOutside))
|
|
71
|
+
onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
|
15
72
|
</script>
|
|
16
73
|
|
|
17
74
|
<template>
|
|
18
|
-
<div
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
75
|
+
<div ref="barRef" class="search-bar-wrapper">
|
|
76
|
+
<div class="search-bar" :class="{ 'search-bar--advanced-active': advancedActive, 'search-bar--has-value': model.length > 0 }">
|
|
77
|
+
<PhMagnifyingGlass :size="16" class="search-bar__icon" />
|
|
78
|
+
<input
|
|
79
|
+
v-model="model"
|
|
80
|
+
type="text"
|
|
81
|
+
:placeholder="placeholder"
|
|
82
|
+
class="search-bar__input"
|
|
83
|
+
@input="onInput"
|
|
84
|
+
@keydown.enter="submitSearch"
|
|
85
|
+
>
|
|
86
|
+
<button
|
|
87
|
+
v-if="model.length > 0"
|
|
88
|
+
class="search-bar__clear"
|
|
89
|
+
@click="clearSearch"
|
|
90
|
+
>
|
|
91
|
+
<PhX :size="12" />
|
|
92
|
+
</button>
|
|
93
|
+
<button
|
|
94
|
+
class="search-bar__advanced"
|
|
95
|
+
:class="{ 'search-bar__advanced--active': advancedActive }"
|
|
96
|
+
@click="$emit('advancedSearch')"
|
|
97
|
+
>
|
|
98
|
+
Advanced search
|
|
99
|
+
<span v-if="advancedCount > 0" class="search-bar__advanced-badge">{{ advancedCount }}</span>
|
|
100
|
+
</button>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<Transition name="suggestions">
|
|
104
|
+
<div v-if="showSuggestions && suggestions.length > 0" class="search-bar__suggestions">
|
|
105
|
+
<button
|
|
106
|
+
v-for="(sugg, i) in suggestions"
|
|
107
|
+
:key="i"
|
|
108
|
+
class="search-bar__suggestion"
|
|
109
|
+
@click="selectSuggestion(sugg)"
|
|
110
|
+
>
|
|
111
|
+
<PhMagnifyingGlass :size="14" class="search-bar__suggestion-icon" />
|
|
112
|
+
<span class="search-bar__suggestion-label">{{ sugg.label }}</span>
|
|
113
|
+
<span v-if="sugg.field" class="search-bar__suggestion-field">{{ sugg.field.split('.').pop() }}</span>
|
|
114
|
+
</button>
|
|
115
|
+
</div>
|
|
116
|
+
</Transition>
|
|
33
117
|
</div>
|
|
34
118
|
</template>
|
|
35
119
|
|
|
36
120
|
<style scoped>
|
|
37
|
-
.search-bar{align-items:center;border:1px solid var(--
|
|
121
|
+
.search-bar-wrapper{position:relative}.search-bar{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-8);height:32px;min-width:200px;padding:var(--space-4) var(--space-12);transition:border-color var(--duration-fast) var(--ease-in-out)}.search-bar:focus-within{border-color:var(--color-secondary);box-shadow:var(--shadow-focus)}.search-bar__icon{color:var(--text-muted);flex-shrink:0}.search-bar__input{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--font-14);outline:none;width:100%}.search-bar__input::-moz-placeholder{color:var(--text-muted)}.search-bar__input::placeholder{color:var(--text-muted)}.search-bar__clear{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:18px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:18px}.search-bar__clear,.search-bar__clear:hover{background:var(--border-default);color:var(--text-secondary)}.search-bar__advanced{background:none;border:none;border-left:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-family:var(--font-sans);font-size:var(--font-14);padding:0 0 0 var(--space-8);text-decoration:underline;transition:color var(--duration-fast) var(--ease-in-out);white-space:nowrap}.search-bar__advanced:hover{color:var(--color-healthcare)}.search-bar--advanced-active{border-color:var(--color-healthcare)}.search-bar__advanced--active{color:var(--color-healthcare);font-weight:500}.search-bar__advanced-badge{align-items:center;background-color:var(--color-healthcare);border-radius:100px;color:var(--color-text-inverse);display:inline-flex;font-size:10px;font-weight:600;height:16px;justify-content:center;line-height:1;min-width:16px;padding:0 4px}.search-bar__suggestions{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08);left:0;max-height:280px;overflow-y:auto;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:50}.search-bar__suggestion{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-14);gap:8px;padding:8px 10px;text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.search-bar__suggestion:hover{background-color:var(--bg-surface-2)}.search-bar__suggestion-icon{color:var(--text-muted);flex-shrink:0}.search-bar__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-bar__suggestion-field{background:var(--bg-surface-2);border-radius:3px;color:var(--text-muted);flex-shrink:0;font-size:11px;padding:1px 6px}.suggestions-enter-active,.suggestions-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.suggestions-enter-from,.suggestions-leave-to{opacity:0;transform:translateY(-4px)}
|
|
38
122
|
</style>
|
|
@@ -139,5 +139,5 @@ function handleClick(item: RmSidebarMenuItem) {
|
|
|
139
139
|
</template>
|
|
140
140
|
|
|
141
141
|
<style scoped>
|
|
142
|
-
.rm-sidebar{background-color:var(--
|
|
142
|
+
.rm-sidebar{background-color:var(--color-text-inverse);border-right:1px solid var(--border-default);bottom:0;display:flex;flex-direction:column;left:0;overflow-y:auto;position:fixed;top:0;transition:width var(--duration-base) var(--ease-in-out);width:240px;z-index:50}.rm-sidebar--collapsed{width:64px}.rm-sidebar__header{align-items:center;border-bottom:1px solid var(--border-default);display:flex;justify-content:space-between;min-height:64px;padding:0 16px}.rm-sidebar__brand{align-items:center;display:flex;gap:8px}.rm-sidebar__logo{color:var(--color-healthcare)}.rm-sidebar__name{color:var(--text-primary);font-family:var(--font-sans);font-size:16px;font-weight:700;white-space:nowrap}.rm-sidebar__toggle{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;padding:4px}.rm-sidebar__toggle:hover{background-color:var(--bg-surface-3)}.rm-sidebar__nav{display:flex;flex:1;flex-direction:column;gap:6px;padding:8px}.rm-sidebar__submenu{display:flex;flex-direction:column;gap:6px;padding-left:20px}.rm-sidebar__submenu-item{animation:rm-submenu-fade-in .25s ease both}@keyframes rm-submenu-fade-in{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.rm-sidebar__footer{border-top:1px solid var(--border-default);padding:12px}
|
|
143
143
|
</style>
|
|
@@ -13,13 +13,13 @@ const props = withDefaults(defineProps<RmTabsProps>(), {
|
|
|
13
13
|
variant: 'default',
|
|
14
14
|
})
|
|
15
15
|
|
|
16
|
-
const defaultColors = { color: '
|
|
16
|
+
const defaultColors = { color: 'var(--color-healthcare)', bg: 'rgba(var(--healthcare-rgb), 0.05)' }
|
|
17
17
|
|
|
18
18
|
const variantColors: Record<string, { color: string; bg: string }> = {
|
|
19
19
|
default: defaultColors,
|
|
20
|
-
pharma: { color: '
|
|
21
|
-
discovery: { color: '
|
|
22
|
-
databank: { color: '
|
|
20
|
+
pharma: { color: 'var(--color-pharma)', bg: 'rgba(var(--pharma-rgb), 0.05)' },
|
|
21
|
+
discovery: { color: 'var(--color-discovery)', bg: 'rgba(var(--discovery-rgb), 0.05)' },
|
|
22
|
+
databank: { color: 'var(--color-databank)', bg: 'rgba(var(--databank-rgb), 0.05)' },
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
const currentColors = computed((): { color: string; bg: string } => variantColors[props.variant] ?? defaultColors)
|
|
@@ -101,5 +101,5 @@ watch(() => props.modelValue, (val) => updateIndicator(val))
|
|
|
101
101
|
</template>
|
|
102
102
|
|
|
103
103
|
<style scoped>
|
|
104
|
-
.rm-tabs{background-color:var(--
|
|
104
|
+
.rm-tabs{background-color:var(--color-text-inverse);border-bottom:1px solid var(--border-default)}.rm-tabs__list{display:flex;padding:8px 20px 0;position:relative}.rm-tabs__tab{background:none;border:none;border-radius:4px 4px 0 0;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:400;padding:12px 16px;position:relative;transition:color var(--duration-fast) var(--ease-in-out),background var(--duration-fast) var(--ease-in-out);white-space:nowrap}.rm-tabs__tab:hover{background:var(--tab-active-bg);color:var(--text-secondary)}.rm-tabs__tab--active{font-weight:500}.rm-tabs__indicator{border-radius:2px 2px 0 0;bottom:0;height:2px;left:0;position:absolute;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
|
|
105
105
|
</style>
|
|
@@ -130,5 +130,5 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
|
|
130
130
|
</template>
|
|
131
131
|
|
|
132
132
|
<style scoped>
|
|
133
|
-
.toolbar-filter{position:relative}.toolbar-filter__caret{opacity:.6;transition:transform var(--
|
|
133
|
+
.toolbar-filter{position:relative}.toolbar-filter__caret{opacity:.6;transition:transform var(--duration-fast) var(--ease-in-out)}.toolbar-filter__caret--open{transform:rotate(180deg)}.toolbar-filter__dropdown{background-color:var(--color-text-inverse);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-height:260px;min-width:200px;overflow-y:auto;padding:var(--space-4);position:absolute;top:calc(100% + var(--space-8));z-index:50}.toolbar-filter__option{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;transition:background-color var(--duration-fast) var(--ease-in-out);width:100%}.toolbar-filter__option:hover{background-color:var(--bg-surface-2)}.toolbar-filter__option--selected{color:var(--text-primary);font-weight:var(--weight-medium)}.toolbar-filter__checkbox{align-items:center;border:1.5px solid var(--border-default);border-radius:var(--radius-sm);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.toolbar-filter__checkbox--checked{background-color:var(--color-healthcare);border-color:var(--color-healthcare);color:var(--color-text-inverse)}.toolbar-filter__radio{align-items:center;border:1.5px solid var(--border-default);border-radius:var(--radius-pill);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.toolbar-filter__radio--checked{border-color:var(--color-healthcare)}.toolbar-filter__radio--checked:after{background-color:var(--color-healthcare);border-radius:var(--radius-pill);content:"";height:8px;width:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
|
|
134
134
|
</style>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export type RmCvdMode = 'none' | 'deutera' | 'protan' | 'trita' | 'mono';
|
|
2
|
+
export type RmTextScale = 'normal' | 'large' | 'xl';
|
|
3
|
+
export declare function useRomulusTheme(): {
|
|
4
|
+
night: Readonly<import("vue").Ref<boolean, boolean>>;
|
|
5
|
+
highContrast: Readonly<import("vue").Ref<boolean, boolean>>;
|
|
6
|
+
reduceMotion: Readonly<import("vue").Ref<boolean, boolean>>;
|
|
7
|
+
compact: Readonly<import("vue").Ref<boolean, boolean>>;
|
|
8
|
+
cvd: Readonly<import("vue").Ref<RmCvdMode, RmCvdMode>>;
|
|
9
|
+
textScale: Readonly<import("vue").Ref<RmTextScale, RmTextScale>>;
|
|
10
|
+
setNight: (value: boolean) => void;
|
|
11
|
+
setHighContrast: (value: boolean) => void;
|
|
12
|
+
setReduceMotion: (value: boolean) => void;
|
|
13
|
+
setCompact: (value: boolean) => void;
|
|
14
|
+
setCvd: (mode: RmCvdMode) => void;
|
|
15
|
+
setTextScale: (scale: RmTextScale) => void;
|
|
16
|
+
reset: () => void;
|
|
17
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { onMounted, readonly, ref } from "vue";
|
|
2
|
+
const CVD_CLASSES = {
|
|
3
|
+
deutera: "cvd-deutera",
|
|
4
|
+
protan: "cvd-protan",
|
|
5
|
+
trita: "cvd-trita",
|
|
6
|
+
mono: "cvd-mono"
|
|
7
|
+
};
|
|
8
|
+
const TEXT_CLASSES = {
|
|
9
|
+
large: "text-large",
|
|
10
|
+
xl: "text-xl"
|
|
11
|
+
};
|
|
12
|
+
export function useRomulusTheme() {
|
|
13
|
+
const night = ref(false);
|
|
14
|
+
const highContrast = ref(false);
|
|
15
|
+
const reduceMotion = ref(false);
|
|
16
|
+
const compact = ref(false);
|
|
17
|
+
const cvd = ref("none");
|
|
18
|
+
const textScale = ref("normal");
|
|
19
|
+
function apply(mutate) {
|
|
20
|
+
if (typeof document === "undefined") return;
|
|
21
|
+
const { body } = document;
|
|
22
|
+
body.classList.add("theme-switching");
|
|
23
|
+
mutate();
|
|
24
|
+
requestAnimationFrame(() => {
|
|
25
|
+
requestAnimationFrame(() => body.classList.remove("theme-switching"));
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
const setNight = (value) => apply(() => {
|
|
29
|
+
night.value = value;
|
|
30
|
+
document.body.classList.toggle("night", value);
|
|
31
|
+
});
|
|
32
|
+
const setHighContrast = (value) => apply(() => {
|
|
33
|
+
highContrast.value = value;
|
|
34
|
+
document.body.classList.toggle("high-contrast", value);
|
|
35
|
+
});
|
|
36
|
+
const setReduceMotion = (value) => apply(() => {
|
|
37
|
+
reduceMotion.value = value;
|
|
38
|
+
document.body.classList.toggle("reduce-motion", value);
|
|
39
|
+
});
|
|
40
|
+
const setCompact = (value) => apply(() => {
|
|
41
|
+
compact.value = value;
|
|
42
|
+
document.body.classList.toggle("density-compact", value);
|
|
43
|
+
});
|
|
44
|
+
const setCvd = (mode) => apply(() => {
|
|
45
|
+
cvd.value = mode;
|
|
46
|
+
const { body } = document;
|
|
47
|
+
Object.values(CVD_CLASSES).forEach((c) => body.classList.remove(c));
|
|
48
|
+
if (mode !== "none") body.classList.add(CVD_CLASSES[mode]);
|
|
49
|
+
});
|
|
50
|
+
const setTextScale = (scale) => apply(() => {
|
|
51
|
+
textScale.value = scale;
|
|
52
|
+
const { body } = document;
|
|
53
|
+
Object.values(TEXT_CLASSES).forEach((c) => body.classList.remove(c));
|
|
54
|
+
if (scale !== "normal") body.classList.add(TEXT_CLASSES[scale]);
|
|
55
|
+
});
|
|
56
|
+
const reset = () => apply(() => {
|
|
57
|
+
const { body } = document;
|
|
58
|
+
night.value = false;
|
|
59
|
+
highContrast.value = false;
|
|
60
|
+
reduceMotion.value = false;
|
|
61
|
+
compact.value = false;
|
|
62
|
+
cvd.value = "none";
|
|
63
|
+
textScale.value = "normal";
|
|
64
|
+
body.classList.remove(
|
|
65
|
+
"night",
|
|
66
|
+
"high-contrast",
|
|
67
|
+
"reduce-motion",
|
|
68
|
+
"density-compact",
|
|
69
|
+
...Object.values(CVD_CLASSES),
|
|
70
|
+
...Object.values(TEXT_CLASSES)
|
|
71
|
+
);
|
|
72
|
+
});
|
|
73
|
+
onMounted(() => {
|
|
74
|
+
const list = document.body.classList;
|
|
75
|
+
night.value = list.contains("night");
|
|
76
|
+
highContrast.value = list.contains("high-contrast");
|
|
77
|
+
reduceMotion.value = list.contains("reduce-motion");
|
|
78
|
+
compact.value = list.contains("density-compact");
|
|
79
|
+
const found = Object.entries(CVD_CLASSES).find(([, c]) => list.contains(c));
|
|
80
|
+
cvd.value = found ? found[0] : "none";
|
|
81
|
+
textScale.value = list.contains("text-xl") ? "xl" : list.contains("text-large") ? "large" : "normal";
|
|
82
|
+
});
|
|
83
|
+
return {
|
|
84
|
+
night: readonly(night),
|
|
85
|
+
highContrast: readonly(highContrast),
|
|
86
|
+
reduceMotion: readonly(reduceMotion),
|
|
87
|
+
compact: readonly(compact),
|
|
88
|
+
cvd: readonly(cvd),
|
|
89
|
+
textScale: readonly(textScale),
|
|
90
|
+
setNight,
|
|
91
|
+
setHighContrast,
|
|
92
|
+
setReduceMotion,
|
|
93
|
+
setCompact,
|
|
94
|
+
setCvd,
|
|
95
|
+
setTextScale,
|
|
96
|
+
reset
|
|
97
|
+
};
|
|
98
|
+
}
|