@tekkare/romulus 0.1.91 → 0.1.93
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/A11yPanel.vue +14 -1
- package/dist/runtime/components/SavedViewCard.vue +23 -2
- package/dist/runtime/components/SavedViews.vue +8 -1
- package/dist/runtime/components/SidebarRight.vue +47 -2
- package/dist/runtime/components/ThemeToggle.vue +22 -2
- 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-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);width:var(--rm-rail-w)}.rm-sb__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:8px;height:var(--rm-bar-h);padding:0 16px}.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:8px;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:16px;overflow-y:auto;padding:16px}.rm-sb--collapsed .rm-sb__nav{padding-left:8px;padding-right:8px}.rm-sb__group{display:flex;flex-direction:column;gap:4px}.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);display:flex;font-family:inherit;font-size:10px;font-weight:500;gap:4px;letter-spacing:.025em;line-height:1.6;margin:0;padding:0 2px;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:8px;height:26px;margin:0;padding:2px;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:14px;line-height:1}.rm-mi__label{color:var(--rm-shell-text);flex:1;font-size:14px;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:2px 4px;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:12px;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:2px;padding:2px 0 2px 28px}.rm-sb__sub-item{border-radius:4px;color:var(--rm-shell-text);display:block;font-size:14px;line-height:1.625;overflow:hidden;padding:2px 4px;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:4px;margin:0;padding:12px 0 8px;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:14px;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:16px;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:10px;font-weight:700;height:16px;line-height:16px;min-width:16px;padding:0 4px;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:10px;line-height:1;max-width:100%;overflow:hidden;padding:0 2px;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:10px;margin-top:auto;padding-bottom:16px}.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:2px;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:14px;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)}@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;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:4px;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:14px;gap:8px;line-height:1.5;margin:0;padding:4px 6px;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:16px;height:var(--rm-bar-h);padding:0 16px}.rm-hd__crumbs,.rm-hd__row{align-items:center;display:flex}.rm-hd__crumbs{flex:1;font-size:14px;gap:4px;min-width:0}.rm-hd__crumb{align-items:center;color:var(--rm-shell-text-muted);display:inline-flex;gap:6px;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:14px;margin:0;padding:2px 4px;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:4px;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:14px;gap:8px;line-height:1.5;overflow:hidden;padding:4px 6px;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:10px;font-weight:500;letter-spacing:.025em;line-height:1.6;padding:8px 6px 2px;text-transform:uppercase}.rm-hd__menu-group:first-child{padding-top:2px}.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:14px;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:4px;padding:4px 12px;width:300px}.rm-hd__search input{background:transparent;border:none;color:var(--rm-shell-text);flex:1;font-family:inherit;font-size:14px;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:14px;height:14px;line-height:20px;width:14px}.rm-hd__tabs{display:flex;gap:16px;padding:0 16px}.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:14px;font-weight:700;line-height:1.6;margin:0;padding:4px 4px 8px;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:8px;height:var(--rm-bar-h);padding:0 16px}.rm-panel__title{color:var(--rm-shell-text);flex:1;font-size:14px;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:16px}@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{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 16px;white-space:nowrap}.rm-sb--wide .rm-rail__item{align-items:center;border-radius:10px;flex-direction:row;gap:12px;justify-content:flex-start;margin:2px 8px;padding:8px 10px;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:14px;line-height:1.2;text-align:left}.rm-sb--wide .rm-rail__tile{background:none;color:var(--rm-shell-text-dark)}.rm-sb--wide .rm-rail__item:hover{background:var(--rm-shell-subtle)}.rm-sb--wide .rm-rail__item:hover .rm-rail__tile{background:none}.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__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:14px;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;padding:0 12px 16px}.rm-sb--wide .rm-lang{display:block}.rm-sb--wide .rm-lang__current{border-radius:10px;height:36px;justify-content:flex-start;padding:0 10px;width:100%}.rm-lang__name{color:var(--rm-shell-text-dark);font-size:14px}.rm-sb__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:8px;height:var(--rm-bar-h);padding:0 16px}.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:8px;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:16px;overflow-y:auto;padding:16px}.rm-sb--collapsed .rm-sb__nav{padding-left:8px;padding-right:8px}.rm-sb__group{display:flex;flex-direction:column;gap:4px}.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);display:flex;font-family:inherit;font-size:10px;font-weight:500;gap:4px;letter-spacing:.025em;line-height:1.6;margin:0;padding:0 2px;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:8px;height:26px;margin:0;padding:2px;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:14px;line-height:1}.rm-mi__label{color:var(--rm-shell-text);flex:1;font-size:14px;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:2px 4px;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:12px;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:2px;padding:2px 0 2px 28px}.rm-sb__sub-item{border-radius:4px;color:var(--rm-shell-text);display:block;font-size:14px;line-height:1.625;overflow:hidden;padding:2px 4px;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:4px;margin:0;padding:12px 0 8px;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:14px;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:16px;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:10px;font-weight:700;height:16px;line-height:16px;min-width:16px;padding:0 4px;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:10px;line-height:1;max-width:100%;overflow:hidden;padding:0 2px;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:10px;margin-top:auto;padding-bottom:16px}.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:2px;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:14px;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:40px;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:13px;gap:6px}.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:8px;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:4px;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:14px;gap:8px;line-height:1.5;margin:0;padding:4px 6px;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:16px;height:var(--rm-bar-h);padding:0 16px}.rm-hd__crumbs,.rm-hd__row{align-items:center;display:flex}.rm-hd__crumbs{flex:1;font-size:14px;gap:4px;min-width:0}.rm-hd__crumb{align-items:center;color:var(--rm-shell-text-muted);display:inline-flex;gap:6px;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:14px;margin:0;padding:2px 4px;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:4px;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:14px;gap:8px;line-height:1.5;overflow:hidden;padding:4px 6px;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:10px;font-weight:500;letter-spacing:.025em;line-height:1.6;padding:8px 6px 2px;text-transform:uppercase}.rm-hd__menu-group:first-child{padding-top:2px}.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:14px;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:4px;padding:4px 12px;width:300px}.rm-hd__search input{background:transparent;border:none;color:var(--rm-shell-text);flex:1;font-family:inherit;font-size:14px;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:14px;height:14px;line-height:20px;width:14px}.rm-hd__tabs{display:flex;gap:16px;padding:0 16px}.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:14px;font-weight:700;line-height:1.6;margin:0;padding:4px 4px 8px;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:8px;height:var(--rm-bar-h);padding:0 16px}.rm-panel__title{color:var(--rm-shell-text);flex:1;font-size:14px;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:16px}@media (max-width:767px){.rm-panel{border-left:none;left:0;width:auto}}
|
|
@@ -13,6 +13,13 @@
|
|
|
13
13
|
restauree au demarrage, ou a une bascule declenchee ailleurs (la bascule
|
|
14
14
|
jour / nuit du rail), d'etre reprise sans rien a synchroniser.
|
|
15
15
|
|
|
16
|
+
La simulation du daltonisme se retire par `cvd-simulation`. C'est un outil
|
|
17
|
+
de test, adresse a qui fabrique les ecrans : sa phrase dit « verifier que
|
|
18
|
+
VOS visualisations restent lisibles ». Sur le poste de quelqu'un qui lit des
|
|
19
|
+
donnees, elle propose de degrader l'affichage sans rien reparer, et se
|
|
20
|
+
confond avec le reglage juste en dessous, qui lui aide vraiment. Les apps la
|
|
21
|
+
gardent donc en local et en preproduction, et la retirent en production.
|
|
22
|
+
|
|
16
23
|
Trois reglages absents du panneau, alors que le composable les expose :
|
|
17
24
|
|
|
18
25
|
- La taille du texte et la densite d'affichage, tant que le CSS ne les
|
|
@@ -31,9 +38,15 @@ const props = withDefaults(defineProps<{
|
|
|
31
38
|
lang?: 'fr' | 'en'
|
|
32
39
|
/** Chapeau du panneau. Vide, rien ne sort. */
|
|
33
40
|
description?: string
|
|
41
|
+
/**
|
|
42
|
+
* Rangee « Simuler le daltonisme ». Vraie par defaut, comme dans le design
|
|
43
|
+
* system ; a passer a faux la ou l'app est servie a ses utilisateurs.
|
|
44
|
+
*/
|
|
45
|
+
cvdSimulation?: boolean
|
|
34
46
|
}>(), {
|
|
35
47
|
lang: 'fr',
|
|
36
48
|
description: undefined,
|
|
49
|
+
cvdSimulation: true,
|
|
37
50
|
})
|
|
38
51
|
|
|
39
52
|
const {
|
|
@@ -131,7 +144,7 @@ const motionModel = computed({
|
|
|
131
144
|
<div class="rm-a11y">
|
|
132
145
|
<p class="rm-a11y__intro">{{ description ?? T.intro }}</p>
|
|
133
146
|
|
|
134
|
-
<div class="rm-a11y__row">
|
|
147
|
+
<div v-if="cvdSimulation" class="rm-a11y__row">
|
|
135
148
|
<div class="rm-a11y__head">
|
|
136
149
|
<span class="rm-a11y__label"><i class="ph ph-eye" />{{ T.cvd }}</span>
|
|
137
150
|
</div>
|
|
@@ -50,6 +50,19 @@ export interface RmSavedView {
|
|
|
50
50
|
id: string
|
|
51
51
|
title: string
|
|
52
52
|
description?: string
|
|
53
|
+
/**
|
|
54
|
+
* Pastille d'icone posee devant le titre (nom Phosphor). Les vues
|
|
55
|
+
* enregistrees n'en ont pas : elle distingue les vues fournies, ou toute
|
|
56
|
+
* liste ou l'icone dit de quoi parle la vue.
|
|
57
|
+
*/
|
|
58
|
+
icon?: string
|
|
59
|
+
/** Couleur de la pastille. */
|
|
60
|
+
tone?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
|
|
61
|
+
/**
|
|
62
|
+
* Libelle du bouton d'activation, quand « Activer » ne decrit pas ce qui se
|
|
63
|
+
* passe (« Demarrer » pour une vue fournie, qui ouvre une analyse).
|
|
64
|
+
*/
|
|
65
|
+
actionLabel?: string
|
|
53
66
|
/** La vue est celle qui est appliquee a l'ecran. */
|
|
54
67
|
active?: boolean
|
|
55
68
|
/** La vue s'applique a l'ouverture de la page. */
|
|
@@ -213,6 +226,14 @@ function onCardClick() {
|
|
|
213
226
|
</div>
|
|
214
227
|
|
|
215
228
|
<div class="rm-view__head">
|
|
229
|
+
<span
|
|
230
|
+
v-if="view.icon"
|
|
231
|
+
class="rm-view__icon"
|
|
232
|
+
:class="`rm-view__icon--${view.tone ?? 'primary'}`"
|
|
233
|
+
>
|
|
234
|
+
<RmIcon :name="view.icon" :size="18" />
|
|
235
|
+
</span>
|
|
236
|
+
|
|
216
237
|
<button
|
|
217
238
|
v-if="starrable"
|
|
218
239
|
type="button"
|
|
@@ -252,7 +273,7 @@ function onCardClick() {
|
|
|
252
273
|
size="sm"
|
|
253
274
|
@click="emit('activate', view.id)"
|
|
254
275
|
>
|
|
255
|
-
{{ T.activate }}
|
|
276
|
+
{{ view.actionLabel || T.activate }}
|
|
256
277
|
</RmButton>
|
|
257
278
|
|
|
258
279
|
<div v-if="menu.length" class="rm-view__menu-wrap">
|
|
@@ -345,5 +366,5 @@ function onCardClick() {
|
|
|
345
366
|
</template>
|
|
346
367
|
|
|
347
368
|
<style scoped>
|
|
348
|
-
.rm-view{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);padding:14px 18px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.rm-view:not(.rm-view--active):hover{background:var(--bg-hover);border-color:var(--color-accent-soft)}.rm-view--active{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.08);cursor:default}.rm-view__strip{background:var(--bg-hover);border-bottom:1px solid var(--border-soft);border-radius:7px 7px 0 0;color:var(--color-secondary);font-size:var(--font-11);font-weight:var(--weight-bold);gap:var(--space-8);letter-spacing:.06em;margin:-14px -18px var(--space-12);padding:var(--space-8) var(--space-16);text-transform:uppercase}.rm-view__head,.rm-view__strip{align-items:center;display:flex}.rm-view__head{gap:10px}.rm-view__star{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;padding:0;width:28px}.rm-view__star:hover{background:var(--bg-hover)}.rm-view__star--on,.rm-view__star:hover{color:var(--color-warning)}.rm-view__title,.rm-view__title-edit{flex:1;font-size:var(--font-16);font-weight:var(--weight-bold);min-width:0}.rm-view__title-edit{background:var(--bg-surface);border:1px solid var(--color-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;outline:none;padding:2px var(--space-8)}.rm-view__title-edit:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}.rm-view__actions{align-items:center;display:flex;gap:var(--space-8)}.rm-view__badge{align-items:center;background:var(--color-success-bg);border-radius:var(--radius-pill);color:var(--color-success);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:3px var(--space-8);text-transform:uppercase}.rm-view__menu-wrap{position:relative}.rm-view__more{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;padding:0;width:28px}.rm-view__more:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-view__menu-shade{inset:0;position:fixed;z-index:60}.rm-view__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:200px;padding:var(--space-4);position:absolute;right:0;top:calc(100% + 6px);z-index:61}.rm-view__menu-item{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;width:100%}.rm-view__menu-item:hover{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__menu-item--danger{color:var(--color-danger)}.rm-view__menu-item--danger:hover{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__desc{color:var(--text-secondary);font-size:var(--font-13);margin:var(--space-8) 0 var(--space-12)}.rm-view__config{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-6);margin:10px 0 var(--space-12);padding:10px 14px}.rm-view__row{align-items:flex-start;display:flex;flex-wrap:wrap;font-size:var(--font-12);gap:14px}.rm-view__row-key{color:var(--text-muted);display:inline-flex;flex-shrink:0;font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.04em;min-width:96px;padding-top:4px;text-transform:uppercase}.rm-view__row-key,.rm-view__row-val{align-items:center;gap:var(--space-6)}.rm-view__row-val{color:var(--text-primary);display:flex;flex:1 1 200px;flex-wrap:wrap;padding:2px 0}.rm-view__pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);display:inline-flex;font-size:var(--font-12);gap:var(--space-4);padding:5px 10px}.rm-view__pill-k{color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-view__pill-tip{min-width:0}.rm-view__pill-tip :deep(.rm-tooltip__bubble){max-width:320px}.rm-view__pill-v{display:-webkit-box;-webkit-box-orient:vertical;color:var(--text-primary);font-weight:var(--weight-medium);-webkit-line-clamp:3;overflow:hidden}.rm-view__foot{border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-16);padding-top:10px}.rm-view__foot span{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-view__confirm{align-items:center;background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);display:flex;flex-wrap:wrap;font-size:var(--font-13);gap:var(--space-12);margin-top:var(--space-12);padding:var(--space-8) var(--space-12)}.rm-view__confirm>span{align-items:center;display:inline-flex;flex:1 1 220px;gap:var(--space-8)}.rm-view__confirm-actions{display:flex;flex-shrink:0;gap:var(--space-8)}
|
|
369
|
+
.rm-view{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);padding:14px 18px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.rm-view:not(.rm-view--active):hover{background:var(--bg-hover);border-color:var(--color-accent-soft)}.rm-view--active{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.08);cursor:default}.rm-view__strip{background:var(--bg-hover);border-bottom:1px solid var(--border-soft);border-radius:7px 7px 0 0;color:var(--color-secondary);font-size:var(--font-11);font-weight:var(--weight-bold);gap:var(--space-8);letter-spacing:.06em;margin:-14px -18px var(--space-12);padding:var(--space-8) var(--space-16);text-transform:uppercase}.rm-view__head,.rm-view__strip{align-items:center;display:flex}.rm-view__head{gap:10px}.rm-view__icon{align-items:center;border-radius:var(--radius-md);display:inline-flex;flex:0 0 auto;height:34px;justify-content:center;width:34px}.rm-view__icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-view__icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-view__icon--danger{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-view__star{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;padding:0;width:28px}.rm-view__star:hover{background:var(--bg-hover)}.rm-view__star--on,.rm-view__star:hover{color:var(--color-warning)}.rm-view__title,.rm-view__title-edit{flex:1;font-size:var(--font-16);font-weight:var(--weight-bold);min-width:0}.rm-view__title-edit{background:var(--bg-surface);border:1px solid var(--color-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;outline:none;padding:2px var(--space-8)}.rm-view__title-edit:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}.rm-view__actions{align-items:center;display:flex;gap:var(--space-8)}.rm-view__badge{align-items:center;background:var(--color-success-bg);border-radius:var(--radius-pill);color:var(--color-success);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:3px var(--space-8);text-transform:uppercase}.rm-view__menu-wrap{position:relative}.rm-view__more{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;padding:0;width:28px}.rm-view__more:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-view__menu-shade{inset:0;position:fixed;z-index:60}.rm-view__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:200px;padding:var(--space-4);position:absolute;right:0;top:calc(100% + 6px);z-index:61}.rm-view__menu-item{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:var(--space-8);padding:var(--space-8) var(--space-12);text-align:left;width:100%}.rm-view__menu-item:hover{background:var(--bg-hover);color:var(--color-secondary)}.rm-view__menu-item--danger{color:var(--color-danger)}.rm-view__menu-item--danger:hover{background:var(--color-danger-bg);color:var(--color-danger)}.rm-view__desc{color:var(--text-secondary);font-size:var(--font-13);margin:var(--space-8) 0 var(--space-12)}.rm-view__config{background:var(--bg-surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-6);margin:10px 0 var(--space-12);padding:10px 14px}.rm-view__row{align-items:flex-start;display:flex;flex-wrap:wrap;font-size:var(--font-12);gap:14px}.rm-view__row-key{color:var(--text-muted);display:inline-flex;flex-shrink:0;font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.04em;min-width:96px;padding-top:4px;text-transform:uppercase}.rm-view__row-key,.rm-view__row-val{align-items:center;gap:var(--space-6)}.rm-view__row-val{color:var(--text-primary);display:flex;flex:1 1 200px;flex-wrap:wrap;padding:2px 0}.rm-view__pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);display:inline-flex;font-size:var(--font-12);gap:var(--space-4);padding:5px 10px}.rm-view__pill-k{color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-view__pill-tip{min-width:0}.rm-view__pill-tip :deep(.rm-tooltip__bubble){max-width:320px}.rm-view__pill-v{display:-webkit-box;-webkit-box-orient:vertical;color:var(--text-primary);font-weight:var(--weight-medium);-webkit-line-clamp:3;overflow:hidden}.rm-view__foot{border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-16);padding-top:10px}.rm-view__foot span{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-view__confirm{align-items:center;background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);display:flex;flex-wrap:wrap;font-size:var(--font-13);gap:var(--space-12);margin-top:var(--space-12);padding:var(--space-8) var(--space-12)}.rm-view__confirm>span{align-items:center;display:inline-flex;flex:1 1 220px;gap:var(--space-8)}.rm-view__confirm-actions{display:flex;flex-shrink:0;gap:var(--space-8)}
|
|
349
370
|
</style>
|
|
@@ -51,6 +51,12 @@ const props = withDefaults(
|
|
|
51
51
|
dirtyTitle?: string
|
|
52
52
|
/** Retire la recherche et les pastilles de filtre. */
|
|
53
53
|
hideFilters?: boolean
|
|
54
|
+
/**
|
|
55
|
+
* Retire l'astuce sur la vue par defaut. Une liste ou aucune vue ne peut
|
|
56
|
+
* porter cette marque (des vues fournies, par exemple) la verrait sinon
|
|
57
|
+
* s'afficher en permanence.
|
|
58
|
+
*/
|
|
59
|
+
hideTip?: boolean
|
|
54
60
|
/** Textes de l'etat vide. */
|
|
55
61
|
emptyTitle?: string
|
|
56
62
|
emptyText?: string
|
|
@@ -70,6 +76,7 @@ const props = withDefaults(
|
|
|
70
76
|
loading: false,
|
|
71
77
|
dirtyTitle: '',
|
|
72
78
|
hideFilters: false,
|
|
79
|
+
hideTip: false,
|
|
73
80
|
emptyTitle: '',
|
|
74
81
|
emptyText: '',
|
|
75
82
|
emptyActionLabel: '',
|
|
@@ -154,7 +161,7 @@ const filtered = computed(() => props.views.length > 0 && shown.value.length ===
|
|
|
154
161
|
|
|
155
162
|
/** L'astuce ne sort que s'il y a des vues et qu'aucune ne s'applique seule. */
|
|
156
163
|
const showDefaultTip = computed(
|
|
157
|
-
() => props.views.length > 0 && !props.views.some((view) => view.isDefault),
|
|
164
|
+
() => !props.hideTip && props.views.length > 0 && !props.views.some((view) => view.isDefault),
|
|
158
165
|
)
|
|
159
166
|
|
|
160
167
|
const visibleTabs = computed(() => (props.tabs.length > 1 ? props.tabs : []))
|
|
@@ -19,6 +19,19 @@
|
|
|
19
19
|
rail est le seul endroit du cadre qui n'appartient pas au contenu. Elles
|
|
20
20
|
reprennent l'anatomie du bloc utilisateur - pastille de 32px, libelle de
|
|
21
21
|
10px en dessous - pour ne pas introduire une deuxieme forme.
|
|
22
|
+
|
|
23
|
+
Deplie (`expanded`), le rail devient la colonne « Actions » du design
|
|
24
|
+
system : les memes entrees, mais en rangees, libelle entier a cote de
|
|
25
|
+
l'icone. C'est l'etat a poser pendant qu'un panneau est ouvert. Deux
|
|
26
|
+
raisons de ne pas s'en tenir au rail de 56px a ce moment-la.
|
|
27
|
+
|
|
28
|
+
La place est deja prise : le panneau couvre le bord droit du cadre, la
|
|
29
|
+
colonne s'ouvre dans un espace qui n'appartient plus au contenu de toute
|
|
30
|
+
facon.
|
|
31
|
+
|
|
32
|
+
Et surtout, 56px ne tiennent pas un libelle. « Accessibilite » y sort en
|
|
33
|
+
« Accessibili... », et la personne qui cherche un reglage lit une liste
|
|
34
|
+
d'icones tronquees au moment precis ou elle navigue entre les panneaux.
|
|
22
35
|
-->
|
|
23
36
|
<script setup lang="ts">
|
|
24
37
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
@@ -75,6 +88,15 @@ const props = withDefaults(defineProps<{
|
|
|
75
88
|
* de sa largeur pour rester a sa gauche, plutot que de se laisser recouvrir.
|
|
76
89
|
*/
|
|
77
90
|
offset?: string
|
|
91
|
+
/**
|
|
92
|
+
* Colonne depliee : rangees et libelles entiers, au lieu du rail d'icones.
|
|
93
|
+
* A poser quand un panneau est ouvert.
|
|
94
|
+
*/
|
|
95
|
+
expanded?: boolean
|
|
96
|
+
/** Titre de la colonne depliee. Sans objet en rail. */
|
|
97
|
+
actionsLabel?: string
|
|
98
|
+
/** Noms des deux etats de la bascule depliee : jour, puis nuit. */
|
|
99
|
+
themeLabels?: [string, string]
|
|
78
100
|
}>(), {
|
|
79
101
|
user: undefined,
|
|
80
102
|
profileTo: '/profile',
|
|
@@ -85,6 +107,9 @@ const props = withDefaults(defineProps<{
|
|
|
85
107
|
locale: undefined,
|
|
86
108
|
themeToggle: true,
|
|
87
109
|
offset: '0px',
|
|
110
|
+
expanded: false,
|
|
111
|
+
actionsLabel: 'Actions',
|
|
112
|
+
themeLabels: () => ['Jour', 'Nuit'],
|
|
88
113
|
})
|
|
89
114
|
|
|
90
115
|
const emit = defineEmits<{
|
|
@@ -143,7 +168,17 @@ onBeforeUnmount(() => {
|
|
|
143
168
|
</script>
|
|
144
169
|
|
|
145
170
|
<template>
|
|
146
|
-
<aside
|
|
171
|
+
<aside
|
|
172
|
+
class="rm-sb rm-sb--right"
|
|
173
|
+
:class="{ 'rm-sb--wide': expanded }"
|
|
174
|
+
:style="{ transform: `translateX(calc(-1 * ${offset}))` }"
|
|
175
|
+
>
|
|
176
|
+
<!-- L'en-tete ne sort que deplie : dans un rail de 56px il n'y a la place
|
|
177
|
+
d'aucun titre, et la colonne est alors muette par construction. Sa
|
|
178
|
+
hauteur est celle du bandeau, pour que « Actions » s'aligne sur le
|
|
179
|
+
titre du panneau ouvert a cote. -->
|
|
180
|
+
<div v-if="expanded" class="rm-rail__head">{{ actionsLabel }}</div>
|
|
181
|
+
|
|
147
182
|
<NuxtLink
|
|
148
183
|
v-if="user"
|
|
149
184
|
:to="profileTo"
|
|
@@ -170,12 +205,21 @@ onBeforeUnmount(() => {
|
|
|
170
205
|
<span v-else-if="tile.dot" class="rm-rail__dot" />
|
|
171
206
|
</span>
|
|
172
207
|
<span class="rm-rail__caption">{{ tile.label }}</span>
|
|
208
|
+
<!-- Chevron de l'entree ouverte : il dit que le panneau a droite est
|
|
209
|
+
celui de cette ligne. Rien a montrer en rail, ou la ligne fait
|
|
210
|
+
56px de large. -->
|
|
211
|
+
<i v-if="expanded" class="ph ph-caret-right rm-rail__chev" aria-hidden="true" />
|
|
173
212
|
</button>
|
|
174
213
|
|
|
175
214
|
<slot />
|
|
176
215
|
|
|
177
216
|
<div v-if="themeToggle || locales.length > 1" class="rm-rail__bottom">
|
|
178
|
-
<RmThemeToggle
|
|
217
|
+
<RmThemeToggle
|
|
218
|
+
v-if="themeToggle"
|
|
219
|
+
:variant="expanded ? 'wide' : 'rail'"
|
|
220
|
+
:day-label="themeLabels[0]"
|
|
221
|
+
:night-label="themeLabels[1]"
|
|
222
|
+
/>
|
|
179
223
|
|
|
180
224
|
<div v-if="locales.length > 1" ref="langRoot" class="rm-lang">
|
|
181
225
|
<button
|
|
@@ -188,6 +232,7 @@ onBeforeUnmount(() => {
|
|
|
188
232
|
@click="langOpen = !langOpen"
|
|
189
233
|
>
|
|
190
234
|
<span aria-hidden="true">{{ currentLocale?.flag }}</span>
|
|
235
|
+
<span v-if="expanded" class="rm-lang__name">{{ currentLocale?.label }}</span>
|
|
191
236
|
</button>
|
|
192
237
|
|
|
193
238
|
<Transition name="rm-lang">
|
|
@@ -32,8 +32,21 @@ import { useRomulusTheme } from '../composables/useTheme'
|
|
|
32
32
|
withDefaults(defineProps<{
|
|
33
33
|
/** Infobulle et nom accessible de la bascule. */
|
|
34
34
|
label?: string
|
|
35
|
+
/**
|
|
36
|
+
* `rail` : la pastille verticale du rail de 56px. `wide` : la pilule
|
|
37
|
+
* horizontale, les deux etats nommes, pour le rail deplie et pour le bas
|
|
38
|
+
* d'un tiroir — c'est la forme du design system, qui a la place de
|
|
39
|
+
* l'ecrire. Le nom du jour et celui de la nuit ne sont montres qu'en
|
|
40
|
+
* `wide` ; en `rail`, les deux icones tiennent lieu de libelles.
|
|
41
|
+
*/
|
|
42
|
+
variant?: 'rail' | 'wide'
|
|
43
|
+
dayLabel?: string
|
|
44
|
+
nightLabel?: string
|
|
35
45
|
}>(), {
|
|
36
46
|
label: 'Mode nuit',
|
|
47
|
+
variant: 'rail',
|
|
48
|
+
dayLabel: 'Jour',
|
|
49
|
+
nightLabel: 'Nuit',
|
|
37
50
|
})
|
|
38
51
|
|
|
39
52
|
const { night, setNight } = useRomulusTheme()
|
|
@@ -42,6 +55,7 @@ const { night, setNight } = useRomulusTheme()
|
|
|
42
55
|
<template>
|
|
43
56
|
<button
|
|
44
57
|
class="rm-dns"
|
|
58
|
+
:class="{ 'rm-dns--wide': variant === 'wide' }"
|
|
45
59
|
type="button"
|
|
46
60
|
role="switch"
|
|
47
61
|
:aria-checked="night"
|
|
@@ -50,7 +64,13 @@ const { night, setNight } = useRomulusTheme()
|
|
|
50
64
|
@click="setNight(!night)"
|
|
51
65
|
>
|
|
52
66
|
<span class="rm-dns__thumb" aria-hidden="true" />
|
|
53
|
-
<span class="rm-dns__half" data-dns="day" aria-hidden="true"
|
|
54
|
-
|
|
67
|
+
<span class="rm-dns__half" data-dns="day" aria-hidden="true">
|
|
68
|
+
<i class="ph-fill ph-sun" />
|
|
69
|
+
<span v-if="variant === 'wide'" class="rm-dns__text">{{ dayLabel }}</span>
|
|
70
|
+
</span>
|
|
71
|
+
<span class="rm-dns__half" data-dns="night" aria-hidden="true">
|
|
72
|
+
<i class="ph-fill ph-moon" />
|
|
73
|
+
<span v-if="variant === 'wide'" class="rm-dns__text">{{ nightLabel }}</span>
|
|
74
|
+
</span>
|
|
55
75
|
</button>
|
|
56
76
|
</template>
|