@veltra/sheet 2.0.1 → 2.2.0

package/src/components/sheet/style.scss

@@ -0,0 +1,737 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+@include m.b(sheet) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: fn.use-var(border);
+  border-radius: fn.use-var(radius, default);
+  background-color: fn.use-var(bg-color, top);
+
+  @include m.e(toolbar-wrap) {
+    position: relative;
+  }
+
+  @include m.e(toolbar) {
+    display: flex;
+    align-items: center;
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, small);
+    border-bottom: 1px solid fn.use-var(border, muted-color);
+  }
+
+  /* 单行滚动视口：工具超出视口时左右箭头导航（不再换行挤压 grid） */
+  @include m.e(toolbar-scroll) {
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none; /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  @include m.e(toolbar-list) {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.use-var(gap, small);
+  }
+
+  @include m.e(toolbar-nav) {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: fn.use-var(form-component-height, small);
+    height: fn.use-var(form-component-height, small);
+    padding: 0;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover:not(:disabled) {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(color, primary);
+    }
+
+    &:disabled {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(toolbar-divider) {
+    width: 1px;
+    align-self: stretch;
+    margin: 2px 0;
+    background-color: fn.use-var(border, muted-color);
+  }
+
+  @include m.e(tool) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-width: fn.use-var(form-component-height, small);
+    height: fn.use-var(form-component-height, small);
+    padding: 0 6px;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover:not(:disabled) {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    @include m.is(active) {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(color, primary);
+    }
+
+    &:disabled {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(tool-icon) {
+    display: block;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+  }
+
+  @include m.e(export-menu) {
+    display: flex;
+    flex-direction: column;
+    min-width: 180px;
+    padding: 4px 0;
+  }
+
+  @include m.e(export-option) {
+    display: block;
+    width: 100%;
+    padding: 6px 12px;
+    border: none;
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+  }
+
+  @include m.e(formula-bar) {
+    display: flex;
+    align-items: center;
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, small);
+    border-bottom: 1px solid fn.use-var(border, muted-color);
+    // 浮起的 fx 输入面板 / 候选列表需盖住下方 grid 与浮动图片叠层（image-layer z-index:1）
+    position: relative;
+    z-index: 30;
+  }
+
+  // 文档流只占单行高度；真正的输入区在 fx-input-panel 内绝对定位浮出
+  @include m.e(fx-editor) {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    height: fn.use-var(form-component-height, small);
+  }
+
+  @include m.e(fx-input-panel) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    // 高度随 textarea（suggest 绝对定位不撑高）；浮出时投影盖住下方 grid
+    border-radius: fn.use-var(radius, small);
+
+    @include m.is(expanded) {
+      box-shadow: fn.use-var(shadow, sm);
+    }
+  }
+
+  @include m.e(fx-suggest) {
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    z-index: 20;
+    min-width: 280px;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
+  }
+
+  /* UScroll 容器：滚动条由 desktop scroll 承担（不再用原生 overflow） */
+  @include m.e(fx-suggest-scroll) {
+    width: 100%;
+  }
+
+  @include m.e(fx-suggest-list) {
+    margin: 0;
+    padding: 4px 0;
+    list-style: none;
+  }
+
+  @include m.e(fx-suggest-item) {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 6px 10px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    @include m.is(active) {
+      background-color: fn.use-var(bg-color, hover);
+    }
+  }
+
+  @include m.e(fx-suggest-sig) {
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  }
+
+  @include m.e(fx-suggest-desc) {
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(name-box) {
+    width: 110px;
+    height: fn.use-var(form-component-height, small);
+    flex-shrink: 0;
+    padding: 0 6px;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    outline: none;
+
+    &:focus {
+      border-color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(fx-label) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: fn.use-var(form-component-height, small);
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+    font-style: italic;
+    user-select: none;
+  }
+
+  @include m.e(fx-input) {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: fn.use-var(form-component-height, small);
+    // 浮出后可多展几行；再长在面板内滚动
+    max-height: calc(fn.use-var(form-component-height, small) * 8);
+    padding: 2px 6px;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    // 必须不透明，否则浮在 grid 上会透出单元格
+    background-color: fn.use-var(bg-color, top);
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    line-height: 1.4;
+    resize: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: none;
+
+    &:focus {
+      border-color: fn.use-var(color, primary);
+    }
+
+    &:disabled {
+      color: fn.use-var(text-color, disabled);
+    }
+  }
+
+  @include m.e(fx-btn) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    padding: 0;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+  }
+
+  @include m.e(popup) {
+    /* UDropdown content 内层内容容器：定位/边框/背景/阴影由 dropdown 弹层提供 */
+    display: flex;
+    flex-direction: column;
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, small);
+  }
+
+  @include m.e(popup-row) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    max-width: 360px;
+  }
+
+  @include m.e(popup-label) {
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(popup-line) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 20px;
+    padding: 0 4px;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    cursor: pointer;
+
+    @include m.is(active) {
+      border-color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(popup-line-swatch) {
+    width: 100%;
+    height: 4px;
+  }
+
+  @include m.e(popup-preset) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    @include m.is(active) {
+      border-color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(popup-preset-glyph) {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  /* UScroll 容器：滚动条/滚动由 desktop scroll 组件承担（popup-size-list 不再自滚） */
+  @include m.e(popup-size-scroll) {
+    width: 48px;
+  }
+
+  @include m.e(popup-size-list) {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  @include m.e(popup-size-item) {
+    padding: 5px 12px;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    text-align: left;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    @include m.is(active) {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(insert-count-menu) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    // 菜单为 max-content 时由内容撑开，勿 width:100% 形成循环依赖
+    flex-shrink: 0;
+    user-select: none;
+  }
+
+  @include m.e(insert-count-prefix, insert-count-suffix) {
+    flex-shrink: 0;
+    white-space: nowrap;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(insert-count-input) {
+    width: 72px;
+    flex-shrink: 0;
+  }
+
+  @include m.e(find-row) {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  @include m.e(find-input) {
+    width: 140px;
+  }
+
+  @include m.e(find-count) {
+    min-width: 44px;
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  @include m.e(find-nav) {
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    &:disabled {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(find-close) {
+    width: 22px;
+    height: 22px;
+    margin-left: auto;
+    padding: 0;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(text-color, main);
+    }
+  }
+
+  @include m.e(find-btn) {
+    padding: 3px 10px;
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    &:disabled {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(find-option) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  @include m.e(find-select) {
+    border: 1px solid fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(insert-image-picker) {
+    min-width: 220px;
+    cursor: pointer;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(insert-image-hint) {
+    padding: 8px 10px;
+    border: 1px dashed fn.use-var(border, muted-color);
+    border-radius: fn.use-var(radius, small);
+    text-align: center;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(insert-image-sub) {
+    margin-top: 4px;
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-assist, small);
+  }
+
+  @include m.e(grid) {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* 导入解析覆盖层（自绘：遮罩 + 动画 + 文字同一层，不依赖 desktop Loading 的
+     text 能力；层级高于 v-loading 遮罩与 grid 实例，文字不被掩盖） */
+  @include m.e(loading-mask) {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    background-color: fn.use-var(bg-color, top, alpha);
+    @include m.flex($justify: center, $align: center);
+    flex-direction: column;
+  }
+
+  /* 旋转圈动画（与 desktop dual-ring 同风格：border 圆环 + 顶部高亮 + 旋转） */
+  @include m.e(loading-spinner) {
+    width: 36px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: 3px solid fn.color-a(color, 22, primary);
+    border-top-color: currentColor;
+    color: fn.use-var(color, primary);
+    animation: u-sheet-loading-spin 0.8s linear infinite;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 5px;
+      border-radius: 50%;
+      border: 2px solid fn.color-a(color, 22, primary);
+      border-bottom-color: currentColor;
+      animation: u-sheet-loading-spin 1.2s linear infinite reverse;
+    }
+  }
+
+  @include m.e(loading-text) {
+    margin-top: fn.use-var(gap, small);
+    color: fn.use-var(text-color, secondary);
+    font-size: 12px;
+    line-height: 1.5;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  @keyframes u-sheet-loading-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* LRU 缓存实例容器：absolute 堆叠于 grid 区，非激活实例 visibility:hidden
+     （保持尺寸不触发 VTable resize，切回仅翻转可见性 + 选区回驱） */
+  @include m.e(grid-instance) {
+    position: absolute;
+    inset: 0;
+    visibility: hidden;
+  }
+
+  @include m.e(tabs) {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    padding: 2px fn.use-var(gap, small);
+    border-top: 1px solid fn.use-var(border, muted-color);
+    background-color: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(tabs-nav) {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover:not(:disabled) {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(color, primary);
+    }
+
+    &:disabled {
+      color: fn.use-var(text-color, disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  // grow:0 使少量 tab 时「+」紧跟内容；shrink + min-width:0 溢出时收缩横滚
+  // 隐藏原生滚动条：溢出靠左右 nav 步进，否则滚动条占高会把 tab 顶偏，与 nav 不对齐
+  @include m.e(tabs-viewport) {
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none; /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  @include m.e(tabs-list) {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+    width: max-content;
+  }
+
+  @include m.e(tab) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 4px 12px;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    @include m.is(active) {
+      background-color: fn.use-var(bg-color, top);
+      color: fn.use-var(color, primary);
+    }
+  }
+
+  @include m.e(tab-rename-input) {
+    width: 96px;
+    height: 20px;
+    padding: 0 4px;
+    border: 1px solid fn.use-var(color, primary);
+    border-radius: fn.use-var(radius, small);
+    outline: none;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(tab-add) {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-left: 2px;
+    padding: 0;
+    border: none;
+    border-radius: fn.use-var(radius, small);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: fn.use-var(font-size-main, small);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(color, primary);
+    }
+  }
+}