@veltra/sheet 2.0.1 → 2.2.0

package/dist/components/sheet/style2.css

@@ -0,0 +1,654 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-sheet {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--u-border);
+  border-radius: var(--u-radius-default);
+  background-color: var(--u-bg-color-top);
+}
+.u-sheet__toolbar-wrap {
+  position: relative;
+}
+.u-sheet__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--u-gap-small);
+  padding: var(--u-gap-small);
+  border-bottom: 1px solid var(--u-border-muted-color);
+}
+.u-sheet {
+  /* 单行滚动视口：工具超出视口时左右箭头导航（不再换行挤压 grid） */
+}
+.u-sheet__toolbar-scroll {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none; /* Firefox */
+}
+.u-sheet__toolbar-scroll::-webkit-scrollbar {
+  display: none;
+}
+.u-sheet__toolbar-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--u-gap-small);
+}
+.u-sheet__toolbar-nav {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--u-form-component-height-small);
+  height: var(--u-form-component-height-small);
+  padding: 0;
+  border: none;
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-second);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-sheet__toolbar-nav:hover:not(:disabled) {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-color-primary);
+}
+.u-sheet__toolbar-nav:disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
+}
+.u-sheet__toolbar-divider {
+  width: 1px;
+  align-self: stretch;
+  margin: 2px 0;
+  background-color: var(--u-border-muted-color);
+}
+.u-sheet__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: var(--u-form-component-height-small);
+  height: var(--u-form-component-height-small);
+  padding: 0 6px;
+  border: none;
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-sheet__tool:hover:not(:disabled) {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__tool.is-active {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-color-primary);
+}
+.u-sheet__tool:disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
+}
+.u-sheet__tool-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.u-sheet__export-menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 180px;
+  padding: 4px 0;
+}
+.u-sheet__export-option {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  text-align: left;
+  cursor: pointer;
+}
+.u-sheet__export-option:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__formula-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--u-gap-small);
+  padding: var(--u-gap-small);
+  border-bottom: 1px solid var(--u-border-muted-color);
+  position: relative;
+  z-index: 30;
+}
+.u-sheet__fx-editor {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  height: var(--u-form-component-height-small);
+}
+.u-sheet__fx-input-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  border-radius: var(--u-radius-small);
+}
+.u-sheet__fx-input-panel.is-expanded {
+  box-shadow: var(--u-shadow-sm);
+}
+.u-sheet__fx-suggest {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: 20;
+  min-width: 280px;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background-color: var(--u-bg-color-top);
+  box-shadow: var(--u-shadow-sm);
+}
+.u-sheet {
+  /* UScroll 容器：滚动条由 desktop scroll 承担（不再用原生 overflow） */
+}
+.u-sheet__fx-suggest-scroll {
+  width: 100%;
+}
+.u-sheet__fx-suggest-list {
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+}
+.u-sheet__fx-suggest-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 10px;
+  cursor: pointer;
+}
+.u-sheet__fx-suggest-item:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__fx-suggest-item.is-active {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__fx-suggest-sig {
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+.u-sheet__fx-suggest-desc {
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+}
+.u-sheet__name-box {
+  width: 110px;
+  height: var(--u-form-component-height-small);
+  flex-shrink: 0;
+  padding: 0 6px;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  outline: none;
+}
+.u-sheet__name-box:focus {
+  border-color: var(--u-color-primary);
+}
+.u-sheet__fx-label {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: var(--u-form-component-height-small);
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+  font-style: italic;
+  user-select: none;
+}
+.u-sheet__fx-input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--u-form-component-height-small);
+  max-height: calc(var(--u-form-component-height-small) * 8);
+  padding: 2px 6px;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background-color: var(--u-bg-color-top);
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  line-height: 1.4;
+  resize: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none;
+}
+.u-sheet__fx-input:focus {
+  border-color: var(--u-color-primary);
+}
+.u-sheet__fx-input:disabled {
+  color: var(--u-text-color-disabled);
+}
+.u-sheet__fx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-sheet__fx-btn:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__popup {
+  /* UDropdown content 内层内容容器：定位/边框/背景/阴影由 dropdown 弹层提供 */
+  display: flex;
+  flex-direction: column;
+  gap: var(--u-gap-small);
+  padding: var(--u-gap-small);
+}
+.u-sheet__popup-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  max-width: 360px;
+}
+.u-sheet__popup-label {
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+}
+.u-sheet__popup-line {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 20px;
+  padding: 0 4px;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  cursor: pointer;
+}
+.u-sheet__popup-line.is-active {
+  border-color: var(--u-color-primary);
+}
+.u-sheet__popup-line-swatch {
+  width: 100%;
+  height: 4px;
+}
+.u-sheet__popup-preset {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  cursor: pointer;
+}
+.u-sheet__popup-preset:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__popup-preset.is-active {
+  border-color: var(--u-color-primary);
+}
+.u-sheet__popup-preset-glyph {
+  display: block;
+  flex-shrink: 0;
+}
+.u-sheet {
+  /* UScroll 容器：滚动条/滚动由 desktop scroll 组件承担（popup-size-list 不再自滚） */
+}
+.u-sheet__popup-size-scroll {
+  width: 48px;
+}
+.u-sheet__popup-size-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.u-sheet__popup-size-item {
+  padding: 5px 12px;
+  border: none;
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.u-sheet__popup-size-item:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__popup-size-item.is-active {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-color-primary);
+}
+.u-sheet__insert-count-menu {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  user-select: none;
+}
+.u-sheet__insert-count-prefix, .u-sheet__insert-count-suffix {
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-size: var(--u-font-size-main-small);
+}
+.u-sheet__insert-count-input {
+  width: 72px;
+  flex-shrink: 0;
+}
+.u-sheet__find-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.u-sheet__find-input {
+  width: 140px;
+}
+.u-sheet__find-count {
+  min-width: 44px;
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+  text-align: center;
+  white-space: nowrap;
+}
+.u-sheet__find-nav {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  line-height: 1;
+  cursor: pointer;
+}
+.u-sheet__find-nav:hover:not(:disabled) {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__find-nav:disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
+}
+.u-sheet__find-close {
+  width: 22px;
+  height: 22px;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-second);
+  line-height: 1;
+  cursor: pointer;
+}
+.u-sheet__find-close:hover {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-text-color-main);
+}
+.u-sheet__find-btn {
+  padding: 3px 10px;
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.u-sheet__find-btn:hover:not(:disabled) {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__find-btn:disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
+}
+.u-sheet__find-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.u-sheet__find-select {
+  border: 1px solid var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+}
+.u-sheet__insert-image-picker {
+  min-width: 220px;
+  cursor: pointer;
+}
+.u-sheet__insert-image-picker:hover {
+  color: var(--u-color-primary);
+}
+.u-sheet__insert-image-hint {
+  padding: 8px 10px;
+  border: 1px dashed var(--u-border-muted-color);
+  border-radius: var(--u-radius-small);
+  text-align: center;
+  font-size: var(--u-font-size-main-small);
+}
+.u-sheet__insert-image-sub {
+  margin-top: 4px;
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-assist-small);
+}
+.u-sheet__grid {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.u-sheet {
+  /* 导入解析覆盖层（自绘：遮罩 + 动画 + 文字同一层，不依赖 desktop Loading 的
+     text 能力；层级高于 v-loading 遮罩与 grid 实例，文字不被掩盖） */
+}
+.u-sheet__loading-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background-color: var(--u-bg-color-top-alpha);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-direction: column;
+}
+.u-sheet {
+  /* 旋转圈动画（与 desktop dual-ring 同风格：border 圆环 + 顶部高亮 + 旋转） */
+}
+.u-sheet__loading-spinner {
+  width: 36px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 3px solid var(--u-color-primary-a-22);
+  border-top-color: currentColor;
+  color: var(--u-color-primary);
+  animation: u-sheet-loading-spin 0.8s linear infinite;
+}
+.u-sheet__loading-spinner::after {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  border-radius: 50%;
+  border: 2px solid var(--u-color-primary-a-22);
+  border-bottom-color: currentColor;
+  animation: u-sheet-loading-spin 1.2s linear infinite reverse;
+}
+.u-sheet__loading-text {
+  margin-top: var(--u-gap-small);
+  color: var(--u-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);
+  }
+}
+.u-sheet {
+  /* LRU 缓存实例容器：absolute 堆叠于 grid 区，非激活实例 visibility:hidden
+     （保持尺寸不触发 VTable resize，切回仅翻转可见性 + 选区回驱） */
+}
+.u-sheet__grid-instance {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+}
+.u-sheet__tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 2px var(--u-gap-small);
+  border-top: 1px solid var(--u-border-muted-color);
+  background-color: var(--u-bg-color-middle);
+}
+.u-sheet__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: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-second);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-sheet__tabs-nav:hover:not(:disabled) {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-color-primary);
+}
+.u-sheet__tabs-nav:disabled {
+  color: var(--u-text-color-disabled);
+  cursor: not-allowed;
+}
+.u-sheet__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 */
+}
+.u-sheet__tabs-viewport::-webkit-scrollbar {
+  display: none;
+}
+.u-sheet__tabs-list {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  width: max-content;
+}
+.u-sheet__tab {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 4px 12px;
+  border: none;
+  border-radius: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-sheet__tab:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-sheet__tab.is-active {
+  background-color: var(--u-bg-color-top);
+  color: var(--u-color-primary);
+}
+.u-sheet__tab-rename-input {
+  width: 96px;
+  height: 20px;
+  padding: 0 4px;
+  border: 1px solid var(--u-color-primary);
+  border-radius: var(--u-radius-small);
+  outline: none;
+  color: var(--u-text-color-main);
+  font-size: var(--u-font-size-main-small);
+}
+.u-sheet__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: var(--u-radius-small);
+  background: transparent;
+  color: var(--u-text-color-second);
+  font-size: var(--u-font-size-main-small);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-sheet__tab-add:hover {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-color-primary);
+}