@tekkare/romulus 0.1.126 → 0.1.128
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/shell.css +1 -1
- package/dist/runtime/components/AlertCard.vue +42 -4
- package/dist/runtime/components/AlertEvents.vue +80 -0
- package/dist/runtime/components/Alerts.vue +58 -49
- package/dist/runtime/utils/alerts.d.ts +8 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--rm-shell-bg:#f9f9fa;--rm-shell-surface:#fff;--rm-shell-border:#dbdef0;--rm-shell-subtle:#f5f5f9;--rm-shell-text:#1e293b;--rm-shell-text-dark:#475569;--rm-shell-text-muted:#878ca6;--rm-shell-accent:#2017ad;--rm-shell-inset:8px;--rm-shell-radius:12px;--rm-bar-h:56px;--rm-nav-w:240px;--rm-nav-collapsed-w:64px;--rm-rail-w:56px;--rm-rail-wide-w:240px;--rm-dots-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAcUlEQVR42u3TwQmAMAxAUdfQfUoSZ3OBTNMFHEqLVBEtCB6M8B8EevwktOsAAACAl0SkNzNXtaw6zut7SikNYeJq2Hksh4gs27rG7ZH+eWA7bttigMC78x4TIdBbceX8fJKnkSL1s5RY8zBxAAAA+LUF0ula10BxVDoAAAAASUVORK5CYII=");--rm-dots-size:12px;--rm-dots-opacity:0.1}body.night{--rm-shell-bg:var(--bg-app);--rm-shell-surface:var(--bg-surface,#1a1a24);--rm-shell-border:var(--border-default);--rm-shell-subtle:var(--bg-subtle,#22222e);--rm-shell-text:var(--text-primary);--rm-shell-text-dark:var(--text-secondary);--rm-shell-text-muted:var(--text-muted);--rm-shell-accent:var(--color-primary);--rm-dots-opacity:0.06}.rm-shell{background:var(--rm-shell-bg);color:var(--rm-shell-text);font-family:var(--font-sans,"Figtree",sans-serif);inset:0;overflow:hidden;position:fixed}.rm-shell__dots{background-image:var(--rm-dots-image);background-repeat:repeat;background-size:var(--rm-dots-size) var(--rm-dots-size);inset:0;opacity:var(--rm-dots-opacity);pointer-events:none;position:absolute}.rm-shell__frame{border:1px solid var(--rm-shell-border);border-radius:var(--rm-shell-radius);display:flex;inset:var(--rm-shell-inset);overflow:hidden;position:absolute}.rm-shell__body{display:flex;flex:1;flex-direction:column;min-width:0}.rm-shell__main{flex:1;min-width:0;overflow-y:auto}.rm-sb{background:var(--rm-shell-surface);display:flex;flex-direction:column;flex-shrink:0;height:100%}.rm-sb--left{border-right:1px solid var(--rm-shell-border);position:relative;transition:width .2s;width:var(--rm-nav-w);z-index:200}.rm-sb--left.rm-sb--collapsed{width:var(--rm-nav-collapsed-w)}.rm-sb--right{border-left:1px solid var(--rm-shell-border);transition:width .2s;width:var(--rm-rail-w)}.rm-sb--right.rm-sb--wide{width:var(--rm-rail-wide-w)}.rm-rail__head{align-items:center;border-bottom:1px solid var(--rm-shell-border);color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;font-size:15px;font-weight:600;height:var(--rm-bar-h);padding:0 var(--space-16);white-space:nowrap}.rm-sb--wide .rm-rail__item{align-items:center;border-radius:8px;flex-direction:row;gap:var(--space-10);justify-content:flex-start;margin:1px 8px;padding:9px var(--space-12);width:auto}.rm-sb--wide .rm-rail__item:first-of-type{margin-top:8px}.rm-sb--wide .rm-rail__caption{color:var(--rm-shell-text-dark);flex:1;font-size:var(--font-13);font-weight:500;line-height:18px;text-align:left}.rm-sb--wide .rm-rail__tile{color:var(--rm-shell-text-muted);display:contents}.rm-sb--wide .rm-rail__badge,.rm-sb--wide .rm-rail__dot{order:1;position:static}.rm-sb--wide .rm-rail__chev{order:2}.rm-sb--wide .rm-rail__dot{border:none;height:8px;width:8px}.rm-sb--wide .rm-rail__item:hover{background:var(--rm-shell-subtle)}.rm-sb--wide .rm-rail__item.rm-rail__item--active .rm-rail__dot{border-color:color-mix(in srgb,var(--rm-shell-accent) 8%,var(--rm-shell-surface))}.rm-sb--wide .rm-rail__avatar{font-size:var(--font-10);height:22px;width:22px}.rm-sb--wide .rm-rail__item--active{background:color-mix(in srgb,var(--rm-shell-accent) 8%,transparent)}.rm-sb--wide .rm-rail__item--active .rm-rail__caption,.rm-sb--wide .rm-rail__item--active .rm-rail__chev,.rm-sb--wide .rm-rail__item.rm-rail__item--active .rm-rail__tile{background:none;color:var(--rm-shell-accent)}.rm-sb--wide .rm-rail__item--active .rm-rail__caption{font-weight:600}.rm-rail__chev{font-size:var(--font-14);opacity:0}.rm-sb--wide .rm-rail__item--active .rm-rail__chev{opacity:1}.rm-sb--wide .rm-rail__item--active .rm-rail__badge{background:var(--rm-shell-accent);color:#fff}.rm-sb--wide .rm-rail__bottom{align-items:stretch;gap:var(--space-6);padding:0 var(--space-8) var(--space-12)}.rm-sb--wide .rm-lang{display:block}.rm-sb--wide .rm-lang__current{border-radius:8px;height:32px;justify-content:flex-start;padding:0 var(--space-10);width:100%}.rm-lang__name{color:var(--rm-shell-text-dark);font-size:var(--font-13)}.rm-sb__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:var(--space-8);height:var(--rm-bar-h);padding:0 var(--space-16)}.rm-sb--collapsed .rm-sb__header{justify-content:center;padding:0}.rm-sb__logo{align-items:center;color:var(--rm-shell-text);display:flex;flex:1;font-size:20px;font-weight:700;gap:var(--space-8);line-height:1.4;min-width:0;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__toggle{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-sb__toggle:hover{color:var(--rm-shell-text)}.rm-sb__toggle svg{display:block;height:100%;width:100%}.rm-sb__nav{display:flex;flex:1;flex-direction:column;gap:var(--space-16);overflow-y:auto;padding:var(--space-16)}.rm-sb--collapsed .rm-sb__nav{padding-left:var(--space-8);padding-right:var(--space-8)}.rm-sb__group{flex-direction:column}.rm-sb__group,.rm-sb__label{display:flex;gap:var(--space-4)}.rm-sb__label{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);font-family:inherit;font-size:var(--font-10);font-weight:500;letter-spacing:.025em;line-height:1.6;margin:0;padding:0 var(--space-2);text-align:left;text-transform:uppercase;width:100%}button.rm-sb__label{cursor:pointer}button.rm-sb__label:hover{color:var(--rm-shell-text)}.rm-sb__label-text{flex:1;min-width:0}.rm-sb__chev{display:block;flex-shrink:0;height:12px;transition:transform .2s;width:12px}.rm-sb__label[aria-expanded=true] .rm-sb__chev{transform:rotate(90deg)}.rm-sb__rule{background:var(--rm-shell-border);height:1px;margin:4px}.rm-mi{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;color:var(--rm-shell-text);cursor:pointer;display:flex;font-family:inherit;gap:var(--space-8);height:26px;margin:0;padding:var(--space-2);text-align:left;text-decoration:none;transition:background-color .15s;width:100%}.rm-mi:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-mi.rm-mi--active{background:var(--rm-shell-subtle)}.rm-mi.rm-mi--current{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent)}.rm-mi.rm-mi--current .rm-mi__icon{background:var(--rm-shell-accent);color:#fff}.rm-mi.rm-mi--current .rm-mi__icon svg{stroke:#fff}.rm-mi__icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-mi__icon svg{display:block;height:14px;width:14px}.rm-mi__icon i{font-size:var(--font-14);line-height:1}.rm-mi__label{color:var(--rm-shell-text);flex:1;font-size:var(--font-14);line-height:1.625;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-mi__badge{background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-muted);flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.025em;padding:var(--space-2) var(--space-4);text-transform:uppercase}.rm-sb--collapsed .rm-mi{justify-content:center}.rm-sb--collapsed .rm-mi>:not(.rm-mi__icon),.rm-sb--collapsed .rm-sb__sub{display:none}.rm-sb__tip{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:6px;box-shadow:0 4px 12px rgba(30,41,59,.1);color:var(--rm-shell-text);font-size:var(--font-12);line-height:1.3;padding:5px 9px;pointer-events:none;position:fixed;transform:translateY(-50%);white-space:nowrap;z-index:60}.rm-sb__sub{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) 0 var(--space-2) 28px}.rm-sb__sub-item{border-radius:4px;color:var(--rm-shell-text);display:block;font-size:var(--font-14);line-height:1.625;overflow:hidden;padding:var(--space-2) var(--space-4);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__sub-item:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-rail__item{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;gap:var(--space-4);margin:0;padding:var(--space-12) 0 var(--space-8);text-decoration:none;width:100%}.rm-rail__avatar{align-items:center;border:2px solid var(--rm-shell-surface);border-radius:9999px;color:#fff;display:flex;font-size:var(--font-14);height:32px;justify-content:center;transition:opacity .15s;width:32px}.rm-rail__item:hover .rm-rail__avatar{opacity:.8}.rm-rail__tile{align-items:center;background:var(--rm-shell-subtle);border-radius:8px;color:var(--rm-shell-text-dark);display:flex;font-size:var(--font-16);height:32px;justify-content:center;transition:background-color .15s,color .15s;width:32px}.rm-rail__item:hover .rm-rail__tile{background:var(--rm-shell-border)}.rm-rail__item.rm-rail__item--active .rm-rail__tile{background:var(--rm-shell-accent);color:#fff}.rm-rail__tile{position:relative}.rm-rail__badge{background:var(--rm-shell-accent);border-radius:9999px;color:#fff;font-size:var(--font-10);font-weight:700;height:16px;line-height:16px;min-width:16px;padding:0 var(--space-4);position:absolute;right:-4px;text-align:center;top:-4px}.rm-rail__item--active .rm-rail__badge{background:#fff;color:var(--rm-shell-accent)}.rm-rail__dot{animation:rm-rail-dot-pulse 2s ease-out infinite;background:var(--color-success,#16a34a);border:2px solid var(--rm-shell-surface);border-radius:9999px;height:10px;position:absolute;right:-2px;top:-2px;width:10px}@keyframes rm-rail-dot-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-rail__dot{animation:none}}.rm-rail__item--active .rm-rail__dot{border-color:var(--rm-shell-accent)}.rm-rail__caption{color:var(--rm-shell-text-muted);font-size:var(--font-10);line-height:1;max-width:100%;overflow:hidden;padding:0 var(--space-2);text-overflow:ellipsis;transition:color .15s;white-space:nowrap}.rm-rail__item--active .rm-rail__caption,.rm-rail__item:hover .rm-rail__caption{color:var(--rm-shell-text)}.rm-rail__bottom{align-items:center;display:flex;flex-direction:column;gap:var(--space-10);margin-top:auto;padding-bottom:var(--space-16)}.rm-dns{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--bg-app,#f5f5f9);border:1px solid var(--rm-shell-border);border-radius:9999px;box-shadow:inset 0 1px 2px rgba(30,41,59,.06);box-sizing:border-box;cursor:pointer;display:flex;flex:0 0 auto;flex-direction:column;height:64px;margin:0;padding:var(--space-2);position:relative;width:32px}.rm-dns__thumb{background:#fff;border-radius:9999px;box-shadow:0 1px 3px rgba(30,41,59,.15);height:calc(50% - 2px);left:2px;position:absolute;top:2px;transition:top .24s cubic-bezier(.2,0,0,1);width:calc(100% - 4px);z-index:1}.rm-dns__half{align-items:center;border-radius:9999px;display:flex;flex:1;font-size:var(--font-14);justify-content:center;line-height:1;position:relative;transition:color .2s ease;z-index:2}.rm-dns__half[data-dns=day]{color:#f59e0b}.rm-dns__half[data-dns=night]{color:var(--text-muted,#8a90a8)}.rm-dns:focus-visible{outline:2px solid var(--rm-shell-accent);outline-offset:2px}body.night .rm-dns{background:#14141c;border-color:#2f2f40;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}body.night .rm-dns__thumb{background:var(--color-accent-soft);box-shadow:0 1px 4px rgba(180,133,255,.5);top:50%}body.night .rm-dns__half[data-dns=day]{color:#525670}body.night .rm-dns__half[data-dns=night]{color:var(--bg-surface)}.rm-dns--wide{flex-direction:row;height:32px;width:100%}.rm-dns--wide .rm-dns__thumb{height:calc(100% - 4px);left:2px;top:2px;transition:left .24s cubic-bezier(.2,0,0,1);width:calc(50% - 2px)}body.night .rm-dns--wide .rm-dns__thumb{left:50%;top:2px}.rm-dns--wide .rm-dns__half{font-size:var(--font-12);gap:var(--space-6)}.rm-dns__text{font-weight:600}@media (prefers-reduced-motion:reduce){.rm-dns__thumb{transition:none}}.rm-lang__current span,.rm-lang__item-flag{font-family:Twemoji Country Flags,Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif}.rm-lang{display:flex;flex:0 0 auto;position:relative}.rm-lang__current{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:9999px;box-sizing:border-box;cursor:pointer;display:flex;font-size:17px;gap:var(--space-8);height:32px;justify-content:center;line-height:1;margin:0;padding:0;transition:border-color .15s,background-color .15s;width:32px}.rm-lang__current:hover{background:var(--rm-shell-subtle)}.rm-lang__current:hover,.rm-lang__current[aria-expanded=true]{border-color:var(--rm-shell-accent)}.rm-lang__current:focus-visible{outline:2px solid var(--rm-shell-accent);outline-offset:2px}.rm-lang__menu{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:8px;bottom:0;box-shadow:0 8px 24px rgba(var(--shadow-rgb,30,41,59),.12);min-width:160px;padding:var(--space-4);position:absolute;right:calc(100% + 8px);z-index:300}.rm-lang__item{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-sizing:border-box;color:var(--rm-shell-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14);gap:var(--space-8);line-height:1.5;margin:0;padding:var(--space-4) var(--space-6);text-align:left;white-space:nowrap;width:100%}.rm-lang__item:hover{background:var(--rm-shell-subtle)}.rm-lang__item--active{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent);font-weight:600}.rm-lang__item-flag{flex-shrink:0;font-size:17px;line-height:1}.rm-lang-enter-active,.rm-lang-leave-active{transition:opacity .14s ease,transform .14s ease}.rm-lang-enter-from,.rm-lang-leave-to{opacity:0;transform:translateX(4px)}@media (prefers-reduced-motion:reduce){.rm-lang-enter-active,.rm-lang-leave-active{transition:none}}.rm-hd{background:var(--rm-shell-surface);border-bottom:1px solid var(--rm-shell-border);display:flex;flex-direction:column;flex-shrink:0}.rm-hd__row{gap:var(--space-16);height:var(--rm-bar-h);padding:0 var(--space-16)}.rm-hd__crumbs,.rm-hd__row{align-items:center;display:flex}.rm-hd__crumbs{flex:1;font-size:var(--font-14);gap:var(--space-4);min-width:0}.rm-hd__crumb{align-items:center;color:var(--rm-shell-text-muted);display:inline-flex;gap:var(--space-6);text-decoration:none;transition:color .15s;white-space:nowrap}a.rm-hd__crumb:hover{color:var(--rm-shell-text)}.rm-hd__sep{color:var(--rm-shell-text-muted)}.rm-hd__picker{display:inline-flex;min-width:0;position:relative}.rm-hd__crumb--picker{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;cursor:pointer;font:inherit;font-size:var(--font-14);margin:0;padding:var(--space-2) var(--space-4);transition:background-color .15s,color .15s}.rm-hd__crumb--picker:hover{background:var(--rm-shell-subtle)}.rm-hd__caret{display:block;flex-shrink:0;height:12px;opacity:.7;transition:transform .15s;width:12px}.rm-hd__caret--open{transform:rotate(180deg)}.rm-hd__menu{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:8px;box-shadow:0 8px 24px rgba(30,41,59,.12);left:0;max-height:60vh;max-width:320px;min-width:200px;overflow-y:auto;padding:var(--space-4);position:absolute;top:calc(100% + 4px);z-index:300}.rm-hd__menu-item{align-items:center;border-radius:4px;color:var(--rm-shell-text);display:flex;font-size:var(--font-14);gap:var(--space-8);line-height:1.5;overflow:hidden;padding:var(--space-4) var(--space-6);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-hd__menu-item:hover{background:var(--rm-shell-subtle)}.rm-hd__menu-group{color:var(--rm-shell-text-muted);display:block;font-size:var(--font-10);font-weight:500;letter-spacing:.025em;line-height:1.6;padding:var(--space-8) var(--space-6) var(--space-2);text-transform:uppercase}.rm-hd__menu-group:first-child{padding-top:var(--space-2)}.rm-hd__menu-item--active{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent);font-weight:600}.rm-hd__menu-icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-hd__menu-icon i{font-size:var(--font-14);line-height:1}.rm-hd__menu-item--active .rm-hd__menu-icon{background:var(--rm-shell-accent);color:#fff}.rm-hd__crumb--last{color:var(--rm-shell-text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-hd__search{align-items:center;background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:9999px;display:flex;flex-shrink:0;gap:var(--space-4);padding:var(--space-4) var(--space-12);width:300px}.rm-hd__search input{background:transparent;border:none;color:var(--rm-shell-text);flex:1;font-family:inherit;font-size:var(--font-14);line-height:20px;min-width:0;outline:none;padding:0}.rm-hd__search input::-moz-placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search input::placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search i,.rm-hd__search svg{color:var(--rm-shell-text-muted);display:block;flex-shrink:0;font-size:var(--font-14);height:14px;line-height:20px;width:14px}.rm-hd__tabs{display:flex;gap:var(--space-16);padding:0 var(--space-16)}.rm-hd__tab{align-items:flex-start;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--rm-shell-text-dark);cursor:pointer;display:flex;flex-direction:column;font-family:inherit;font-size:var(--font-14);font-weight:700;line-height:1.6;margin:0;padding:var(--space-4) var(--space-4) var(--space-8);white-space:nowrap}.rm-hd__tab--active{border-bottom-color:var(--rm-shell-accent);color:var(--rm-shell-text)}@media (max-width:767px){.rm-sb--left{inset:0 auto 0 0;position:absolute;transform:translateX(-100%);transition:transform .2s;z-index:40}.rm-sb--left.rm-sb--open{transform:translateX(0)}.rm-sb--right{display:none}.rm-hd__search{flex:1;width:auto}}.rm-panel{background:var(--rm-shell-surface);border-left:1px solid var(--rm-shell-border);bottom:0;box-shadow:-8px 0 24px rgba(30,41,59,.08);display:flex;flex-direction:column;position:absolute;right:0;top:0;width:var(--rm-panel-w,360px);z-index:401}.rm-panel__veil{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:var(--rm-panel-veil,rgba(100,116,139,.12));cursor:default;inset:0;position:absolute;z-index:400}.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:opacity .22s ease}.rm-panel-veil-enter-from,.rm-panel-veil-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:none}}.rm-sb--right{position:relative;z-index:402}.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:transform .22s cubic-bezier(.4,0,.2,1)}.rm-panel-enter-from,.rm-panel-leave-to{transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:none}}.rm-panel__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:var(--space-8);height:var(--rm-bar-h);padding:0 var(--space-16)}.rm-panel__title{color:var(--rm-shell-text);flex:1;font-size:var(--font-14);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-panel__close{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-panel__close:hover{color:var(--rm-shell-text)}.rm-panel__close svg{display:block;height:100%;width:100%}.rm-panel__body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-16)}@media (max-width:767px){.rm-panel{border-left:none;left:0;width:auto}}
|
|
1
|
+
:root{--rm-shell-bg:#f9f9fa;--rm-shell-surface:#fff;--rm-shell-border:#dbdef0;--rm-shell-subtle:#f5f5f9;--rm-shell-text:#1e293b;--rm-shell-text-dark:#475569;--rm-shell-text-muted:#878ca6;--rm-shell-accent:#2017ad;--rm-shell-inset:8px;--rm-shell-radius:12px;--rm-bar-h:56px;--rm-nav-w:240px;--rm-nav-collapsed-w:64px;--rm-rail-w:56px;--rm-rail-wide-w:240px;--rm-dots-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAcUlEQVR42u3TwQmAMAxAUdfQfUoSZ3OBTNMFHEqLVBEtCB6M8B8EevwktOsAAACAl0SkNzNXtaw6zut7SikNYeJq2Hksh4gs27rG7ZH+eWA7bttigMC78x4TIdBbceX8fJKnkSL1s5RY8zBxAAAA+LUF0ula10BxVDoAAAAASUVORK5CYII=");--rm-dots-size:12px;--rm-dots-opacity:0.1}body.night{--rm-shell-bg:var(--bg-app);--rm-shell-surface:var(--bg-surface,#1a1a24);--rm-shell-border:var(--border-default);--rm-shell-subtle:var(--bg-subtle,#22222e);--rm-shell-text:var(--text-primary);--rm-shell-text-dark:var(--text-secondary);--rm-shell-text-muted:var(--text-muted);--rm-shell-accent:var(--color-primary);--rm-dots-opacity:0.06}.rm-shell{background:var(--rm-shell-bg);color:var(--rm-shell-text);font-family:var(--font-sans,"Figtree",sans-serif);inset:0;overflow:hidden;position:fixed}.rm-shell__dots{background-image:var(--rm-dots-image);background-repeat:repeat;background-size:var(--rm-dots-size) var(--rm-dots-size);inset:0;opacity:var(--rm-dots-opacity);pointer-events:none;position:absolute}.rm-shell__frame{border:1px solid var(--rm-shell-border);border-radius:var(--rm-shell-radius);display:flex;inset:var(--rm-shell-inset);overflow:hidden;position:absolute}.rm-shell__body{display:flex;flex:1;flex-direction:column;min-width:0}.rm-shell__main{flex:1;min-width:0;overflow-y:auto}.rm-sb{background:var(--rm-shell-surface);display:flex;flex-direction:column;flex-shrink:0;height:100%}.rm-sb--left{border-right:1px solid var(--rm-shell-border);position:relative;transition:width .2s;width:var(--rm-nav-w);z-index:200}.rm-sb--left.rm-sb--collapsed{width:var(--rm-nav-collapsed-w)}.rm-sb--right{border-left:1px solid var(--rm-shell-border);transition:width .2s;width:var(--rm-rail-w)}.rm-sb--right.rm-sb--wide{border-right:1px solid var(--rm-shell-border);width:var(--rm-rail-wide-w)}.rm-rail__head{align-items:center;border-bottom:1px solid var(--rm-shell-border);color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;font-size:15px;font-weight:600;height:var(--rm-bar-h);padding:0 var(--space-16);white-space:nowrap}.rm-sb--wide .rm-rail__item{align-items:center;border-radius:8px;flex-direction:row;gap:var(--space-10);justify-content:flex-start;margin:1px 8px;padding:9px var(--space-12);width:auto}.rm-sb--wide .rm-rail__item:first-of-type{margin-top:8px}.rm-sb--wide .rm-rail__caption{color:var(--rm-shell-text-dark);flex:1;font-size:var(--font-13);font-weight:500;line-height:18px;text-align:left}.rm-sb--wide .rm-rail__tile{color:var(--rm-shell-text-muted);display:contents}.rm-sb--wide .rm-rail__badge,.rm-sb--wide .rm-rail__dot{order:1;position:static}.rm-sb--wide .rm-rail__chev{order:2}.rm-sb--wide .rm-rail__dot{border:none;height:8px;width:8px}.rm-sb--wide .rm-rail__item:hover{background:var(--rm-shell-subtle)}.rm-sb--wide .rm-rail__item.rm-rail__item--active .rm-rail__dot{border-color:color-mix(in srgb,var(--rm-shell-accent) 8%,var(--rm-shell-surface))}.rm-sb--wide .rm-rail__avatar{font-size:var(--font-10);height:22px;width:22px}.rm-sb--wide .rm-rail__item--active{background:color-mix(in srgb,var(--rm-shell-accent) 8%,transparent)}.rm-sb--wide .rm-rail__item--active .rm-rail__caption,.rm-sb--wide .rm-rail__item--active .rm-rail__chev,.rm-sb--wide .rm-rail__item.rm-rail__item--active .rm-rail__tile{background:none;color:var(--rm-shell-accent)}.rm-sb--wide .rm-rail__item--active .rm-rail__caption{font-weight:600}.rm-rail__chev{font-size:var(--font-14);opacity:0}.rm-sb--wide .rm-rail__item--active .rm-rail__chev{opacity:1}.rm-sb--wide .rm-rail__item--active .rm-rail__badge{background:var(--rm-shell-accent);color:#fff}.rm-sb--wide .rm-rail__bottom{align-items:stretch;gap:var(--space-6);padding:0 var(--space-8) var(--space-12)}.rm-sb--wide .rm-lang{display:block}.rm-sb--wide .rm-lang__current{border-radius:8px;height:32px;justify-content:flex-start;padding:0 var(--space-10);width:100%}.rm-lang__name{color:var(--rm-shell-text-dark);font-size:var(--font-13)}.rm-sb__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:var(--space-8);height:var(--rm-bar-h);padding:0 var(--space-16)}.rm-sb--collapsed .rm-sb__header{justify-content:center;padding:0}.rm-sb__logo{align-items:center;color:var(--rm-shell-text);display:flex;flex:1;font-size:20px;font-weight:700;gap:var(--space-8);line-height:1.4;min-width:0;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__toggle{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-sb__toggle:hover{color:var(--rm-shell-text)}.rm-sb__toggle svg{display:block;height:100%;width:100%}.rm-sb__nav{display:flex;flex:1;flex-direction:column;gap:var(--space-16);overflow-y:auto;padding:var(--space-16)}.rm-sb--collapsed .rm-sb__nav{padding-left:var(--space-8);padding-right:var(--space-8)}.rm-sb__group{flex-direction:column}.rm-sb__group,.rm-sb__label{display:flex;gap:var(--space-4)}.rm-sb__label{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);font-family:inherit;font-size:var(--font-10);font-weight:500;letter-spacing:.025em;line-height:1.6;margin:0;padding:0 var(--space-2);text-align:left;text-transform:uppercase;width:100%}button.rm-sb__label{cursor:pointer}button.rm-sb__label:hover{color:var(--rm-shell-text)}.rm-sb__label-text{flex:1;min-width:0}.rm-sb__chev{display:block;flex-shrink:0;height:12px;transition:transform .2s;width:12px}.rm-sb__label[aria-expanded=true] .rm-sb__chev{transform:rotate(90deg)}.rm-sb__rule{background:var(--rm-shell-border);height:1px;margin:4px}.rm-mi{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;color:var(--rm-shell-text);cursor:pointer;display:flex;font-family:inherit;gap:var(--space-8);height:26px;margin:0;padding:var(--space-2);text-align:left;text-decoration:none;transition:background-color .15s;width:100%}.rm-mi:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-mi.rm-mi--active{background:var(--rm-shell-subtle)}.rm-mi.rm-mi--current{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent)}.rm-mi.rm-mi--current .rm-mi__icon{background:var(--rm-shell-accent);color:#fff}.rm-mi.rm-mi--current .rm-mi__icon svg{stroke:#fff}.rm-mi__icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-mi__icon svg{display:block;height:14px;width:14px}.rm-mi__icon i{font-size:var(--font-14);line-height:1}.rm-mi__label{color:var(--rm-shell-text);flex:1;font-size:var(--font-14);line-height:1.625;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-mi__badge{background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-muted);flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.025em;padding:var(--space-2) var(--space-4);text-transform:uppercase}.rm-sb--collapsed .rm-mi{justify-content:center}.rm-sb--collapsed .rm-mi>:not(.rm-mi__icon),.rm-sb--collapsed .rm-sb__sub{display:none}.rm-sb__tip{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:6px;box-shadow:0 4px 12px rgba(30,41,59,.1);color:var(--rm-shell-text);font-size:var(--font-12);line-height:1.3;padding:5px 9px;pointer-events:none;position:fixed;transform:translateY(-50%);white-space:nowrap;z-index:60}.rm-sb__sub{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) 0 var(--space-2) 28px}.rm-sb__sub-item{border-radius:4px;color:var(--rm-shell-text);display:block;font-size:var(--font-14);line-height:1.625;overflow:hidden;padding:var(--space-2) var(--space-4);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__sub-item:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-rail__item{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;gap:var(--space-4);margin:0;padding:var(--space-12) 0 var(--space-8);text-decoration:none;width:100%}.rm-rail__avatar{align-items:center;border:2px solid var(--rm-shell-surface);border-radius:9999px;color:#fff;display:flex;font-size:var(--font-14);height:32px;justify-content:center;transition:opacity .15s;width:32px}.rm-rail__item:hover .rm-rail__avatar{opacity:.8}.rm-rail__tile{align-items:center;background:var(--rm-shell-subtle);border-radius:8px;color:var(--rm-shell-text-dark);display:flex;font-size:var(--font-16);height:32px;justify-content:center;transition:background-color .15s,color .15s;width:32px}.rm-rail__item:hover .rm-rail__tile{background:var(--rm-shell-border)}.rm-rail__item.rm-rail__item--active .rm-rail__tile{background:var(--rm-shell-accent);color:#fff}.rm-rail__tile{position:relative}.rm-rail__badge{background:var(--rm-shell-accent);border-radius:9999px;color:#fff;font-size:var(--font-10);font-weight:700;height:16px;line-height:16px;min-width:16px;padding:0 var(--space-4);position:absolute;right:-4px;text-align:center;top:-4px}.rm-rail__item--active .rm-rail__badge{background:#fff;color:var(--rm-shell-accent)}.rm-rail__dot{animation:rm-rail-dot-pulse 2s ease-out infinite;background:var(--color-success,#16a34a);border:2px solid var(--rm-shell-surface);border-radius:9999px;height:10px;position:absolute;right:-2px;top:-2px;width:10px}@keyframes rm-rail-dot-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-rail__dot{animation:none}}.rm-rail__item--active .rm-rail__dot{border-color:var(--rm-shell-accent)}.rm-rail__caption{color:var(--rm-shell-text-muted);font-size:var(--font-10);line-height:1;max-width:100%;overflow:hidden;padding:0 var(--space-2);text-overflow:ellipsis;transition:color .15s;white-space:nowrap}.rm-rail__item--active .rm-rail__caption,.rm-rail__item:hover .rm-rail__caption{color:var(--rm-shell-text)}.rm-rail__bottom{align-items:center;display:flex;flex-direction:column;gap:var(--space-10);margin-top:auto;padding-bottom:var(--space-16)}.rm-dns{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--bg-app,#f5f5f9);border:1px solid var(--rm-shell-border);border-radius:9999px;box-shadow:inset 0 1px 2px rgba(30,41,59,.06);box-sizing:border-box;cursor:pointer;display:flex;flex:0 0 auto;flex-direction:column;height:64px;margin:0;padding:var(--space-2);position:relative;width:32px}.rm-dns__thumb{background:#fff;border-radius:9999px;box-shadow:0 1px 3px rgba(30,41,59,.15);height:calc(50% - 2px);left:2px;position:absolute;top:2px;transition:top .24s cubic-bezier(.2,0,0,1);width:calc(100% - 4px);z-index:1}.rm-dns__half{align-items:center;border-radius:9999px;display:flex;flex:1;font-size:var(--font-14);justify-content:center;line-height:1;position:relative;transition:color .2s ease;z-index:2}.rm-dns__half[data-dns=day]{color:#f59e0b}.rm-dns__half[data-dns=night]{color:var(--text-muted,#8a90a8)}.rm-dns:focus-visible{outline:2px solid var(--rm-shell-accent);outline-offset:2px}body.night .rm-dns{background:#14141c;border-color:#2f2f40;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}body.night .rm-dns__thumb{background:var(--color-accent-soft);box-shadow:0 1px 4px rgba(180,133,255,.5);top:50%}body.night .rm-dns__half[data-dns=day]{color:#525670}body.night .rm-dns__half[data-dns=night]{color:var(--bg-surface)}.rm-dns--wide{flex-direction:row;height:32px;width:100%}.rm-dns--wide .rm-dns__thumb{height:calc(100% - 4px);left:2px;top:2px;transition:left .24s cubic-bezier(.2,0,0,1);width:calc(50% - 2px)}body.night .rm-dns--wide .rm-dns__thumb{left:50%;top:2px}.rm-dns--wide .rm-dns__half{font-size:var(--font-12);gap:var(--space-6)}.rm-dns__text{font-weight:600}@media (prefers-reduced-motion:reduce){.rm-dns__thumb{transition:none}}.rm-lang__current span,.rm-lang__item-flag{font-family:Twemoji Country Flags,Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif}.rm-lang{display:flex;flex:0 0 auto;position:relative}.rm-lang__current{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:9999px;box-sizing:border-box;cursor:pointer;display:flex;font-size:17px;gap:var(--space-8);height:32px;justify-content:center;line-height:1;margin:0;padding:0;transition:border-color .15s,background-color .15s;width:32px}.rm-lang__current:hover{background:var(--rm-shell-subtle)}.rm-lang__current:hover,.rm-lang__current[aria-expanded=true]{border-color:var(--rm-shell-accent)}.rm-lang__current:focus-visible{outline:2px solid var(--rm-shell-accent);outline-offset:2px}.rm-lang__menu{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:8px;bottom:0;box-shadow:0 8px 24px rgba(var(--shadow-rgb,30,41,59),.12);min-width:160px;padding:var(--space-4);position:absolute;right:calc(100% + 8px);z-index:300}.rm-lang__item{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-sizing:border-box;color:var(--rm-shell-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14);gap:var(--space-8);line-height:1.5;margin:0;padding:var(--space-4) var(--space-6);text-align:left;white-space:nowrap;width:100%}.rm-lang__item:hover{background:var(--rm-shell-subtle)}.rm-lang__item--active{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent);font-weight:600}.rm-lang__item-flag{flex-shrink:0;font-size:17px;line-height:1}.rm-lang-enter-active,.rm-lang-leave-active{transition:opacity .14s ease,transform .14s ease}.rm-lang-enter-from,.rm-lang-leave-to{opacity:0;transform:translateX(4px)}@media (prefers-reduced-motion:reduce){.rm-lang-enter-active,.rm-lang-leave-active{transition:none}}.rm-hd{background:var(--rm-shell-surface);border-bottom:1px solid var(--rm-shell-border);display:flex;flex-direction:column;flex-shrink:0}.rm-hd__row{gap:var(--space-16);height:var(--rm-bar-h);padding:0 var(--space-16)}.rm-hd__crumbs,.rm-hd__row{align-items:center;display:flex}.rm-hd__crumbs{flex:1;font-size:var(--font-14);gap:var(--space-4);min-width:0}.rm-hd__crumb{align-items:center;color:var(--rm-shell-text-muted);display:inline-flex;gap:var(--space-6);text-decoration:none;transition:color .15s;white-space:nowrap}a.rm-hd__crumb:hover{color:var(--rm-shell-text)}.rm-hd__sep{color:var(--rm-shell-text-muted)}.rm-hd__picker{display:inline-flex;min-width:0;position:relative}.rm-hd__crumb--picker{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;cursor:pointer;font:inherit;font-size:var(--font-14);margin:0;padding:var(--space-2) var(--space-4);transition:background-color .15s,color .15s}.rm-hd__crumb--picker:hover{background:var(--rm-shell-subtle)}.rm-hd__caret{display:block;flex-shrink:0;height:12px;opacity:.7;transition:transform .15s;width:12px}.rm-hd__caret--open{transform:rotate(180deg)}.rm-hd__menu{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:8px;box-shadow:0 8px 24px rgba(30,41,59,.12);left:0;max-height:60vh;max-width:320px;min-width:200px;overflow-y:auto;padding:var(--space-4);position:absolute;top:calc(100% + 4px);z-index:300}.rm-hd__menu-item{align-items:center;border-radius:4px;color:var(--rm-shell-text);display:flex;font-size:var(--font-14);gap:var(--space-8);line-height:1.5;overflow:hidden;padding:var(--space-4) var(--space-6);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-hd__menu-item:hover{background:var(--rm-shell-subtle)}.rm-hd__menu-group{color:var(--rm-shell-text-muted);display:block;font-size:var(--font-10);font-weight:500;letter-spacing:.025em;line-height:1.6;padding:var(--space-8) var(--space-6) var(--space-2);text-transform:uppercase}.rm-hd__menu-group:first-child{padding-top:var(--space-2)}.rm-hd__menu-item--active{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent);font-weight:600}.rm-hd__menu-icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-hd__menu-icon i{font-size:var(--font-14);line-height:1}.rm-hd__menu-item--active .rm-hd__menu-icon{background:var(--rm-shell-accent);color:#fff}.rm-hd__crumb--last{color:var(--rm-shell-text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-hd__search{align-items:center;background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:9999px;display:flex;flex-shrink:0;gap:var(--space-4);padding:var(--space-4) var(--space-12);width:300px}.rm-hd__search input{background:transparent;border:none;color:var(--rm-shell-text);flex:1;font-family:inherit;font-size:var(--font-14);line-height:20px;min-width:0;outline:none;padding:0}.rm-hd__search input::-moz-placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search input::placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search i,.rm-hd__search svg{color:var(--rm-shell-text-muted);display:block;flex-shrink:0;font-size:var(--font-14);height:14px;line-height:20px;width:14px}.rm-hd__tabs{display:flex;gap:var(--space-16);padding:0 var(--space-16)}.rm-hd__tab{align-items:flex-start;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--rm-shell-text-dark);cursor:pointer;display:flex;flex-direction:column;font-family:inherit;font-size:var(--font-14);font-weight:700;line-height:1.6;margin:0;padding:var(--space-4) var(--space-4) var(--space-8);white-space:nowrap}.rm-hd__tab--active{border-bottom-color:var(--rm-shell-accent);color:var(--rm-shell-text)}@media (max-width:767px){.rm-sb--left{inset:0 auto 0 0;position:absolute;transform:translateX(-100%);transition:transform .2s;z-index:40}.rm-sb--left.rm-sb--open{transform:translateX(0)}.rm-sb--right{display:none}.rm-hd__search{flex:1;width:auto}}.rm-panel{background:var(--rm-shell-surface);border-left:1px solid var(--rm-shell-border);bottom:0;box-shadow:-8px 0 24px rgba(30,41,59,.08);display:flex;flex-direction:column;position:absolute;right:0;top:0;width:var(--rm-panel-w,360px);z-index:401}.rm-panel__veil{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:var(--rm-panel-veil,rgba(100,116,139,.12));cursor:default;inset:0;position:absolute;z-index:400}.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:opacity .22s ease}.rm-panel-veil-enter-from,.rm-panel-veil-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:none}}.rm-sb--right{position:relative;z-index:402}.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:transform .22s cubic-bezier(.4,0,.2,1)}.rm-panel-enter-from,.rm-panel-leave-to{transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:none}}.rm-panel__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:var(--space-8);height:var(--rm-bar-h);padding:0 var(--space-16)}.rm-panel__title{color:var(--rm-shell-text);flex:1;font-size:var(--font-14);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-panel__close{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-panel__close:hover{color:var(--rm-shell-text)}.rm-panel__close svg{display:block;height:100%;width:100%}.rm-panel__body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-16)}@media (max-width:767px){.rm-panel{border-left:none;left:0;width:auto}}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
-->
|
|
15
15
|
<script setup lang="ts">
|
|
16
16
|
import { computed, ref } from 'vue'
|
|
17
|
-
import type { RmAlert, RmAlertMenuItem } from '../utils/alerts'
|
|
17
|
+
import type { RmAlert, RmAlertEvent, RmAlertMenuItem } from '../utils/alerts'
|
|
18
18
|
|
|
19
19
|
const props = withDefaults(
|
|
20
20
|
defineProps<{
|
|
@@ -27,8 +27,20 @@ const props = withDefaults(
|
|
|
27
27
|
* reconstruire sa requete Elasticsearch.
|
|
28
28
|
*/
|
|
29
29
|
onWatchedPage?: boolean
|
|
30
|
+
/** Le journal de l'alerte est deplie sous la carte. */
|
|
31
|
+
expanded?: boolean
|
|
32
|
+
/** Ce que l'alerte a rapporte, charge par l'appelant au depliement. */
|
|
33
|
+
events?: RmAlertEvent[]
|
|
34
|
+
eventsLoading?: boolean
|
|
30
35
|
}>(),
|
|
31
|
-
{
|
|
36
|
+
{
|
|
37
|
+
menu: () => [],
|
|
38
|
+
lang: 'fr',
|
|
39
|
+
onWatchedPage: false,
|
|
40
|
+
expanded: false,
|
|
41
|
+
events: () => [],
|
|
42
|
+
eventsLoading: false,
|
|
43
|
+
},
|
|
32
44
|
)
|
|
33
45
|
|
|
34
46
|
const emit = defineEmits<{
|
|
@@ -52,6 +64,9 @@ const FR = {
|
|
|
52
64
|
resume: 'Réactiver',
|
|
53
65
|
rearm: 'Réarmer depuis cette page',
|
|
54
66
|
shared: "Partagée avec l'espace",
|
|
67
|
+
journal: "Voir ce que l'alerte a rapporté",
|
|
68
|
+
journalClose: 'Replier le journal',
|
|
69
|
+
noEvents: 'Rien de signalé depuis la création.',
|
|
55
70
|
appeared: 'Nouvel élément',
|
|
56
71
|
changed: 'Changement de valeur',
|
|
57
72
|
disappeared: 'Sortie du périmètre',
|
|
@@ -113,6 +128,9 @@ const EN = {
|
|
|
113
128
|
resume: 'Resume',
|
|
114
129
|
rearm: 'Re-arm from this page',
|
|
115
130
|
shared: 'Shared with the workspace',
|
|
131
|
+
journal: 'See what this alert reported',
|
|
132
|
+
journalClose: 'Collapse the journal',
|
|
133
|
+
noEvents: 'Nothing reported since it was created.',
|
|
116
134
|
appeared: 'New item',
|
|
117
135
|
changed: 'Value change',
|
|
118
136
|
disappeared: 'Left the scope',
|
|
@@ -234,7 +252,21 @@ function pick(item: RmAlertMenuItem) {
|
|
|
234
252
|
<template>
|
|
235
253
|
<div class="rm-alert" :class="`rm-alert--${alert.status}`">
|
|
236
254
|
<div class="rm-alert__head">
|
|
237
|
-
|
|
255
|
+
<!-- Le titre est la commande du depliement : c'est le geste attendu
|
|
256
|
+
d'une carte qui cache quelque chose, et ca evite un bouton de plus
|
|
257
|
+
dans un en-tete qui en porte deja deux. -->
|
|
258
|
+
<button
|
|
259
|
+
type="button"
|
|
260
|
+
class="rm-alert__title"
|
|
261
|
+
:aria-expanded="expanded"
|
|
262
|
+
:title="expanded ? T.journalClose : T.journal"
|
|
263
|
+
@click="emit('open', alert.id)"
|
|
264
|
+
>
|
|
265
|
+
<RmIcon
|
|
266
|
+
:name="expanded ? 'CaretDown' : 'CaretRight'"
|
|
267
|
+
:size="14"
|
|
268
|
+
class="rm-alert__caret"
|
|
269
|
+
/>
|
|
238
270
|
{{ alert.title }}
|
|
239
271
|
<span v-if="alert.unreadCount" class="rm-alert__unread">
|
|
240
272
|
{{ alert.unreadCount }}
|
|
@@ -344,9 +376,15 @@ function pick(item: RmAlertMenuItem) {
|
|
|
344
376
|
<RmIcon name="Fire" :size="13" />{{ alert.lastEventLabel }}
|
|
345
377
|
</span>
|
|
346
378
|
</div>
|
|
379
|
+
|
|
380
|
+
<div v-if="expanded" class="rm-alert__journal">
|
|
381
|
+
<RmLoadingState v-if="eventsLoading" />
|
|
382
|
+
<RmAlertEvents v-else-if="events.length" :events="events" :lang="lang" />
|
|
383
|
+
<p v-else class="rm-alert__journal-empty">{{ T.noEvents }}</p>
|
|
384
|
+
</div>
|
|
347
385
|
</div>
|
|
348
386
|
</template>
|
|
349
387
|
|
|
350
388
|
<style scoped>
|
|
351
|
-
.rm-alert{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:10px;display:flex;flex-direction:column;gap:10px;padding:14px 16px}.rm-alert--paused,.rm-alert--seeding{background:var(--rm-surface-muted,#fafafa)}.rm-alert__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.rm-alert__title{all:unset;align-items:center;color:var(--rm-text,#111827);cursor:pointer;display:inline-flex;font-size:15px;font-weight:600;gap:8px;line-height:1.35}.rm-alert__title:hover{color:var(--rm-primary,#4f46e5)}.rm-alert__unread{align-items:center;background:var(--rm-primary,#4f46e5);border-radius:999px;color:#fff;display:inline-flex;font-size:11px;font-weight:700;height:18px;justify-content:center;min-width:18px;padding:0 5px}.rm-alert__head-actions{align-items:center;display:flex;flex-shrink:0;gap:6px}.rm-alert__status{align-items:center;background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;color:var(--rm-text-soft,#6b7280);display:inline-flex;font-size:11px;font-weight:600;gap:5px;letter-spacing:.03em;padding:3px 8px;text-transform:uppercase;white-space:nowrap}.rm-alert__dot{background:currentColor;border-radius:999px;height:6px;width:6px}.rm-alert__status--active{background:var(--rm-success-soft,#ecfdf5);color:var(--rm-success,#047857)}.rm-alert__status--failing,.rm-alert__status--stale{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#b45309)}.rm-alert__view{align-items:center;color:var(--rm-text-soft,#6b7280);display:flex;flex-wrap:wrap;font-size:12px;gap:5px;margin:0}.rm-alert__shared{border-radius:999px;font-size:11px;padding:1px 6px}.rm-alert__notice,.rm-alert__shared{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__notice{align-items:flex-start;border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;padding:9px 11px}.rm-alert__notice--warn{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#92400e)}.rm-alert__notice-detail{display:block;font-size:11.5px;font-style:normal;margin-top:3px;opacity:.8}.rm-alert__spec{background:var(--rm-surface-muted,#f9fafb);border-radius:8px;display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px}.rm-alert__row{align-items:baseline;display:grid;gap:10px;grid-template-columns:110px 1fr}.rm-alert__row dt{color:var(--rm-text-soft,#9ca3af);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.rm-alert__row dd{color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:13px;gap:5px;margin:0}.rm-alert__chip{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:6px;font-size:12px;padding:1px 7px}.rm-alert__reseed{margin:0}.rm-alert__meta,.rm-alert__reseed{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert__meta{border-top:1px solid var(--rm-border-soft,#f3f4f6);display:flex;flex-wrap:wrap;gap:12px;padding-top:9px}.rm-alert__meta span{align-items:center;display:inline-flex;gap:4px}.rm-alert__menu-wrap{position:relative}.rm-alert__more{all:unset;border-radius:6px;color:var(--rm-text-soft,#9ca3af);cursor:pointer;display:inline-flex;padding:3px}.rm-alert__more:hover{background:var(--rm-surface-muted,#f3f4f6);color:var(--rm-text,#111827)}.rm-alert__menu-shade{inset:0;position:fixed;z-index:20}.rm-alert__menu{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);display:flex;flex-direction:column;min-width:190px;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:21}.rm-alert__menu-item{all:unset;align-items:center;border-radius:6px;color:var(--rm-text,#111827);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:7px 9px}.rm-alert__menu-item:hover{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__menu-item--danger{color:var(--rm-danger,#b91c1c)}
|
|
389
|
+
.rm-alert{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:10px;display:flex;flex-direction:column;gap:10px;padding:14px 16px}.rm-alert--paused,.rm-alert--seeding{background:var(--rm-surface-muted,#fafafa)}.rm-alert__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.rm-alert__journal{border-top:1px solid var(--rm-border,#e5e7eb);padding-top:10px}.rm-alert__journal-empty{color:var(--rm-text-soft,#9ca3af);font-size:12.5px;margin:0}.rm-alert__caret{color:var(--rm-text-soft,#9ca3af);flex-shrink:0}.rm-alert__title{all:unset;align-items:center;color:var(--rm-text,#111827);cursor:pointer;display:inline-flex;font-size:15px;font-weight:600;gap:8px;line-height:1.35}.rm-alert__title:hover{color:var(--rm-primary,#4f46e5)}.rm-alert__unread{align-items:center;background:var(--rm-primary,#4f46e5);border-radius:999px;color:#fff;display:inline-flex;font-size:11px;font-weight:700;height:18px;justify-content:center;min-width:18px;padding:0 5px}.rm-alert__head-actions{align-items:center;display:flex;flex-shrink:0;gap:6px}.rm-alert__status{align-items:center;background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;color:var(--rm-text-soft,#6b7280);display:inline-flex;font-size:11px;font-weight:600;gap:5px;letter-spacing:.03em;padding:3px 8px;text-transform:uppercase;white-space:nowrap}.rm-alert__dot{background:currentColor;border-radius:999px;height:6px;width:6px}.rm-alert__status--active{background:var(--rm-success-soft,#ecfdf5);color:var(--rm-success,#047857)}.rm-alert__status--failing,.rm-alert__status--stale{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#b45309)}.rm-alert__view{align-items:center;color:var(--rm-text-soft,#6b7280);display:flex;flex-wrap:wrap;font-size:12px;gap:5px;margin:0}.rm-alert__shared{border-radius:999px;font-size:11px;padding:1px 6px}.rm-alert__notice,.rm-alert__shared{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__notice{align-items:flex-start;border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;padding:9px 11px}.rm-alert__notice--warn{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#92400e)}.rm-alert__notice-detail{display:block;font-size:11.5px;font-style:normal;margin-top:3px;opacity:.8}.rm-alert__spec{background:var(--rm-surface-muted,#f9fafb);border-radius:8px;display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px}.rm-alert__row{align-items:baseline;display:grid;gap:10px;grid-template-columns:110px 1fr}.rm-alert__row dt{color:var(--rm-text-soft,#9ca3af);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.rm-alert__row dd{color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:13px;gap:5px;margin:0}.rm-alert__chip{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:6px;font-size:12px;padding:1px 7px}.rm-alert__reseed{margin:0}.rm-alert__meta,.rm-alert__reseed{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert__meta{border-top:1px solid var(--rm-border-soft,#f3f4f6);display:flex;flex-wrap:wrap;gap:12px;padding-top:9px}.rm-alert__meta span{align-items:center;display:inline-flex;gap:4px}.rm-alert__menu-wrap{position:relative}.rm-alert__more{all:unset;border-radius:6px;color:var(--rm-text-soft,#9ca3af);cursor:pointer;display:inline-flex;padding:3px}.rm-alert__more:hover{background:var(--rm-surface-muted,#f3f4f6);color:var(--rm-text,#111827)}.rm-alert__menu-shade{inset:0;position:fixed;z-index:20}.rm-alert__menu{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);display:flex;flex-direction:column;min-width:190px;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:21}.rm-alert__menu-item{all:unset;align-items:center;border-radius:6px;color:var(--rm-text,#111827);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:7px 9px}.rm-alert__menu-item:hover{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__menu-item--danger{color:var(--rm-danger,#b91c1c)}
|
|
352
390
|
</style>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
RmAlertEvents - ce qu'une alerte a rapporte.
|
|
3
|
+
|
|
4
|
+
La meme liste sert a deux endroits : le journal du panneau, qui melange
|
|
5
|
+
toutes les alertes, et le depliement d'une carte, qui n'en montre qu'une.
|
|
6
|
+
D'ou `showSource` : rappeler « Veille Keytruda » sous chaque ligne d'une
|
|
7
|
+
carte qui porte deja ce titre n'apprend rien.
|
|
8
|
+
|
|
9
|
+
Le composant ne met rien en forme lui-meme : les dates arrivent deja
|
|
10
|
+
ecrites, comme partout ailleurs dans le paquet.
|
|
11
|
+
-->
|
|
12
|
+
<script setup lang="ts">
|
|
13
|
+
import { computed } from 'vue'
|
|
14
|
+
import type { RmAlertEvent } from '../utils/alerts'
|
|
15
|
+
|
|
16
|
+
const props = withDefaults(
|
|
17
|
+
defineProps<{
|
|
18
|
+
events: RmAlertEvent[]
|
|
19
|
+
/** Nommer l'alerte d'ou vient chaque ligne. */
|
|
20
|
+
showSource?: boolean
|
|
21
|
+
lang?: 'fr' | 'en'
|
|
22
|
+
}>(),
|
|
23
|
+
{ showSource: false, lang: 'fr' },
|
|
24
|
+
)
|
|
25
|
+
|
|
26
|
+
const FR = {
|
|
27
|
+
appeared: 'Nouveau',
|
|
28
|
+
changed: 'Modifié',
|
|
29
|
+
disappeared: 'Sorti du périmètre',
|
|
30
|
+
becomes: 'devient',
|
|
31
|
+
empty: '(vide)',
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const EN = {
|
|
35
|
+
appeared: 'New',
|
|
36
|
+
changed: 'Changed',
|
|
37
|
+
disappeared: 'Left the scope',
|
|
38
|
+
becomes: 'becomes',
|
|
39
|
+
empty: '(empty)',
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const T = computed(() => (props.lang === 'en' ? EN : FR))
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<template>
|
|
46
|
+
<div class="rm-alert-events">
|
|
47
|
+
<article
|
|
48
|
+
v-for="event in events"
|
|
49
|
+
:key="event.id"
|
|
50
|
+
class="rm-alert-events__item"
|
|
51
|
+
:class="{ 'rm-alert-events__item--unread': !event.read }"
|
|
52
|
+
>
|
|
53
|
+
<header class="rm-alert-events__head">
|
|
54
|
+
<span class="rm-alert-events__kind" :class="`rm-alert-events__kind--${event.kind}`">
|
|
55
|
+
{{ T[event.kind] }}
|
|
56
|
+
</span>
|
|
57
|
+
<time class="rm-alert-events__date">{{ event.dateLabel }}</time>
|
|
58
|
+
</header>
|
|
59
|
+
<p class="rm-alert-events__title">{{ event.title }}</p>
|
|
60
|
+
<p v-if="event.subtitle" class="rm-alert-events__sub">{{ event.subtitle }}</p>
|
|
61
|
+
<p
|
|
62
|
+
v-for="(change, index) in event.changes ?? []"
|
|
63
|
+
:key="index"
|
|
64
|
+
class="rm-alert-events__change"
|
|
65
|
+
>
|
|
66
|
+
{{ change.label || change.field }} :
|
|
67
|
+
<s>{{ change.before || T.empty }}</s>
|
|
68
|
+
{{ T.becomes }}
|
|
69
|
+
<strong>{{ change.after || T.empty }}</strong>
|
|
70
|
+
</p>
|
|
71
|
+
<p v-if="showSource && event.alertTitle" class="rm-alert-events__from">
|
|
72
|
+
{{ event.alertTitle }}
|
|
73
|
+
</p>
|
|
74
|
+
</article>
|
|
75
|
+
</div>
|
|
76
|
+
</template>
|
|
77
|
+
|
|
78
|
+
<style scoped>
|
|
79
|
+
.rm-alert-events{display:flex;flex-direction:column;gap:10px}.rm-alert-events__item{border:1px solid var(--rm-border,#e5e7eb);border-radius:9px;display:flex;flex-direction:column;gap:3px;padding:10px 12px}.rm-alert-events__item--unread{border-left:3px solid var(--rm-primary,#4f46e5)}.rm-alert-events__head{align-items:center;display:flex;gap:8px;justify-content:space-between}.rm-alert-events__kind{color:var(--rm-text-soft,#6b7280);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.rm-alert-events__kind--appeared{color:var(--rm-success,#047857)}.rm-alert-events__kind--changed{color:var(--rm-info,#1d4ed8)}.rm-alert-events__kind--disappeared{color:var(--rm-warn,#b45309)}.rm-alert-events__date{color:var(--rm-text-soft,#9ca3af);font-size:11px}.rm-alert-events__title{color:var(--rm-text,#111827);font-size:13.5px;line-height:1.4;margin:0}.rm-alert-events__from,.rm-alert-events__sub{color:var(--rm-text-soft,#9ca3af);font-size:11.5px;margin:0}.rm-alert-events__change{color:var(--rm-text-soft,#4b5563);font-size:12.5px;margin:2px 0 0}.rm-alert-events__change s{opacity:.65}
|
|
80
|
+
</style>
|
|
@@ -30,6 +30,11 @@ const props = withDefaults(
|
|
|
30
30
|
createHint?: string
|
|
31
31
|
/** La page affichee est celle que les alertes de la liste surveillent. */
|
|
32
32
|
onWatchedPage?: boolean
|
|
33
|
+
/** Alerte dont le journal est deplie, s'il y en a une. */
|
|
34
|
+
expandedId?: string | null
|
|
35
|
+
/** Evenements de cette alerte, charges par l'appelant. */
|
|
36
|
+
expandedEvents?: RmAlertEvent[]
|
|
37
|
+
expandedLoading?: boolean
|
|
33
38
|
lang?: 'fr' | 'en'
|
|
34
39
|
}>(),
|
|
35
40
|
{
|
|
@@ -40,6 +45,9 @@ const props = withDefaults(
|
|
|
40
45
|
canCreate: false,
|
|
41
46
|
createHint: '',
|
|
42
47
|
onWatchedPage: false,
|
|
48
|
+
expandedId: null,
|
|
49
|
+
expandedEvents: () => [],
|
|
50
|
+
expandedLoading: false,
|
|
43
51
|
lang: 'fr',
|
|
44
52
|
},
|
|
45
53
|
)
|
|
@@ -68,11 +76,6 @@ const FR = {
|
|
|
68
76
|
emptyEvents: 'Rien de neuf',
|
|
69
77
|
emptyEventsText:
|
|
70
78
|
'Les changements détectés sur vos périmètres apparaîtront ici, du plus récent au plus ancien.',
|
|
71
|
-
appeared: 'Nouveau',
|
|
72
|
-
changed: 'Modifié',
|
|
73
|
-
disappeared: 'Sorti du périmètre',
|
|
74
|
-
becomes: 'devient',
|
|
75
|
-
empty: '(vide)',
|
|
76
79
|
}
|
|
77
80
|
|
|
78
81
|
const EN = {
|
|
@@ -89,11 +92,6 @@ const EN = {
|
|
|
89
92
|
emptyEvents: 'Nothing new',
|
|
90
93
|
emptyEventsText:
|
|
91
94
|
'Changes detected on your scopes will show up here, most recent first.',
|
|
92
|
-
appeared: 'New',
|
|
93
|
-
changed: 'Changed',
|
|
94
|
-
disappeared: 'Left the scope',
|
|
95
|
-
becomes: 'becomes',
|
|
96
|
-
empty: '(empty)',
|
|
97
95
|
}
|
|
98
96
|
|
|
99
97
|
const T = computed(() => (props.lang === 'en' ? EN : FR))
|
|
@@ -108,6 +106,29 @@ const paused = computed(() => props.alerts.filter((alert) => alert.status === 'p
|
|
|
108
106
|
*/
|
|
109
107
|
const active = computed(() => props.alerts.filter((alert) => alert.status !== 'paused'))
|
|
110
108
|
|
|
109
|
+
/**
|
|
110
|
+
* La liste visible, coupee en sections.
|
|
111
|
+
*
|
|
112
|
+
* Les sections suivent l'ordre d'apparition des alertes : c'est l'appelant
|
|
113
|
+
* qui trie, parce que lui seul sait ce qui vient en premier (chez lui, la
|
|
114
|
+
* page affichee). Sans `group`, tout tient dans une section sans titre et
|
|
115
|
+
* la liste se lit comme avant.
|
|
116
|
+
*/
|
|
117
|
+
const sections = computed(() => {
|
|
118
|
+
const list = props.tab === 'paused' ? paused.value : active.value
|
|
119
|
+
const order: string[] = []
|
|
120
|
+
const byLabel = new Map<string, RmAlert[]>()
|
|
121
|
+
for (const alert of list) {
|
|
122
|
+
const label = alert.group ?? ''
|
|
123
|
+
if (!byLabel.has(label)) {
|
|
124
|
+
byLabel.set(label, [])
|
|
125
|
+
order.push(label)
|
|
126
|
+
}
|
|
127
|
+
byLabel.get(label)!.push(alert)
|
|
128
|
+
}
|
|
129
|
+
return order.map((label) => ({ label, alerts: byLabel.get(label)! }))
|
|
130
|
+
})
|
|
131
|
+
|
|
111
132
|
const unreadTotal = computed(() =>
|
|
112
133
|
props.alerts.reduce((total, alert) => total + (alert.unreadCount ?? 0), 0),
|
|
113
134
|
)
|
|
@@ -162,50 +183,38 @@ function setTab(value: 'active' | 'paused' | 'events') {
|
|
|
162
183
|
{{ T.readAll }}
|
|
163
184
|
</button>
|
|
164
185
|
|
|
165
|
-
<
|
|
166
|
-
v-for="event in events"
|
|
167
|
-
:key="event.id"
|
|
168
|
-
class="rm-alerts__event"
|
|
169
|
-
:class="{ 'rm-alerts__event--unread': !event.read }"
|
|
170
|
-
>
|
|
171
|
-
<header class="rm-alerts__event-head">
|
|
172
|
-
<span class="rm-alerts__kind" :class="`rm-alerts__kind--${event.kind}`">
|
|
173
|
-
{{ T[event.kind] }}
|
|
174
|
-
</span>
|
|
175
|
-
<time class="rm-alerts__event-date">{{ event.dateLabel }}</time>
|
|
176
|
-
</header>
|
|
177
|
-
<p class="rm-alerts__event-title">{{ event.title }}</p>
|
|
178
|
-
<p v-if="event.subtitle" class="rm-alerts__event-sub">{{ event.subtitle }}</p>
|
|
179
|
-
<p
|
|
180
|
-
v-for="(change, index) in event.changes ?? []"
|
|
181
|
-
:key="index"
|
|
182
|
-
class="rm-alerts__change"
|
|
183
|
-
>
|
|
184
|
-
{{ change.label || change.field }} :
|
|
185
|
-
<s>{{ change.before || T.empty }}</s>
|
|
186
|
-
{{ T.becomes }}
|
|
187
|
-
<strong>{{ change.after || T.empty }}</strong>
|
|
188
|
-
</p>
|
|
189
|
-
<p v-if="event.alertTitle" class="rm-alerts__event-from">{{ event.alertTitle }}</p>
|
|
190
|
-
</article>
|
|
186
|
+
<RmAlertEvents :events="events" show-source :lang="lang" />
|
|
191
187
|
</div>
|
|
192
188
|
|
|
193
189
|
<RmEmptyState v-else :title="T.emptyEvents" :text="T.emptyEventsText" />
|
|
194
190
|
</template>
|
|
195
191
|
|
|
196
192
|
<template v-else>
|
|
197
|
-
<div v-if="
|
|
198
|
-
<
|
|
199
|
-
v-for="
|
|
200
|
-
:key="
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
193
|
+
<div v-if="sections.length" class="rm-alerts__list">
|
|
194
|
+
<section
|
|
195
|
+
v-for="section in sections"
|
|
196
|
+
:key="section.label"
|
|
197
|
+
class="rm-alerts__section"
|
|
198
|
+
>
|
|
199
|
+
<h3 v-if="section.label" class="rm-alerts__section-title">
|
|
200
|
+
{{ section.label }}
|
|
201
|
+
<span class="rm-alerts__section-count">{{ section.alerts.length }}</span>
|
|
202
|
+
</h3>
|
|
203
|
+
<RmAlertCard
|
|
204
|
+
v-for="alert in section.alerts"
|
|
205
|
+
:key="alert.id"
|
|
206
|
+
:alert="alert"
|
|
207
|
+
:menu="menu"
|
|
208
|
+
:lang="lang"
|
|
209
|
+
:on-watched-page="onWatchedPage"
|
|
210
|
+
:expanded="expandedId === alert.id"
|
|
211
|
+
:events="expandedId === alert.id ? expandedEvents : []"
|
|
212
|
+
:events-loading="expandedId === alert.id && expandedLoading"
|
|
213
|
+
@open="emit('open', $event)"
|
|
214
|
+
@rearm="emit('rearm', $event)"
|
|
215
|
+
@menu="emit('menu', $event)"
|
|
216
|
+
/>
|
|
217
|
+
</section>
|
|
209
218
|
</div>
|
|
210
219
|
|
|
211
220
|
<RmEmptyState
|
|
@@ -218,5 +227,5 @@ function setTab(value: 'active' | 'paused' | 'events') {
|
|
|
218
227
|
</template>
|
|
219
228
|
|
|
220
229
|
<style scoped>
|
|
221
|
-
.rm-alerts{display:flex;flex-direction:column;gap:14px}.rm-alerts__intro{color:var(--rm-text-soft,#6b7280);font-size:13px;line-height:1.5;margin:0}.rm-alerts__create{align-items:flex-start;display:flex;flex-direction:column;gap:6px}.rm-alerts__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0}.rm-alerts__tabs{border-bottom:1px solid var(--rm-border,#e5e7eb);display:flex;gap:4px}.rm-alerts__tab{all:unset;align-items:center;border-bottom:2px solid transparent;color:var(--rm-text-soft,#6b7280);cursor:pointer;display:inline-flex;font-size:13px;font-weight:500;gap:6px;padding:8px 10px}.rm-alerts__tab--on{border-bottom-color:var(--rm-primary,#4f46e5);color:var(--rm-primary,#4f46e5)}.rm-alerts__tab-count{background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;font-size:11px;font-weight:700;padding:0 6px}.rm-alerts__tab--on .rm-alerts__tab-count{background:var(--rm-primary,#4f46e5);color:#fff}.rm-alerts__events,.rm-alerts__list
|
|
230
|
+
.rm-alerts{display:flex;flex-direction:column;gap:14px}.rm-alerts__intro{color:var(--rm-text-soft,#6b7280);font-size:13px;line-height:1.5;margin:0}.rm-alerts__create{align-items:flex-start;display:flex;flex-direction:column;gap:6px}.rm-alerts__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0}.rm-alerts__tabs{border-bottom:1px solid var(--rm-border,#e5e7eb);display:flex;gap:4px}.rm-alerts__tab{all:unset;align-items:center;border-bottom:2px solid transparent;color:var(--rm-text-soft,#6b7280);cursor:pointer;display:inline-flex;font-size:13px;font-weight:500;gap:6px;padding:8px 10px}.rm-alerts__tab--on{border-bottom-color:var(--rm-primary,#4f46e5);color:var(--rm-primary,#4f46e5)}.rm-alerts__tab-count{background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;font-size:11px;font-weight:700;padding:0 6px}.rm-alerts__tab--on .rm-alerts__tab-count{background:var(--rm-primary,#4f46e5);color:#fff}.rm-alerts__events,.rm-alerts__list,.rm-alerts__section{display:flex;flex-direction:column;gap:10px}.rm-alerts__section-title{align-items:center;color:var(--rm-text-soft,#6b7280);display:flex;font-size:11.5px;font-weight:700;gap:6px;letter-spacing:.05em;margin:4px 0 0;text-transform:uppercase}.rm-alerts__section-count{background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;font-size:11px;letter-spacing:0;padding:0 6px}.rm-alerts__read-all{all:unset;align-self:flex-end;color:var(--rm-primary,#4f46e5);cursor:pointer;font-size:12px}
|
|
222
231
|
</style>
|
|
@@ -65,6 +65,14 @@ export interface RmAlert {
|
|
|
65
65
|
createdLabel?: string | null;
|
|
66
66
|
lastEventLabel?: string | null;
|
|
67
67
|
eventsThisMonth?: number;
|
|
68
|
+
/**
|
|
69
|
+
* Section ou ranger l'alerte dans la liste, deja traduite.
|
|
70
|
+
*
|
|
71
|
+
* L'appelant seul sait ce qui separe ses alertes : ici, la page surveillee.
|
|
72
|
+
* Les alertes se rangent dans l'ordre ou leurs sections apparaissent, donc
|
|
73
|
+
* c'est a lui de trier la liste avant de la passer.
|
|
74
|
+
*/
|
|
75
|
+
group?: string;
|
|
68
76
|
/** Partagee avec l'espace de travail. */
|
|
69
77
|
shared?: boolean;
|
|
70
78
|
/** L'utilisateur courant en est proprietaire. */
|