@will-ui/vue 1.0.0

package/dist/theme/tokens/components/sheet.css

@@ -0,0 +1,518 @@
+.w-sheet-container {
+  /* 有效尺度：prop > 组件 token > 默认 calc(--w-size * 4/3)；--w-sheet-size 为可选主题钩子 */
+  --__size: var(
+    --w-prop-sheet-size,
+    var(--w-sheet-size, calc(var(--w-size) * 10 / 8))
+  );
+  --__color: var(--w-prop-sheet-color, var(--w-sheet-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-sheet-bg-color,
+    var(--w-sheet-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-sheet-text-color,
+    var(--w-sheet-text-color, var(--w-text-color))
+  );
+  --__color-light-5: color-mix(in srgb, var(--__color) var(--w-sheet-color-light-5-mix), var(--__bg));
+  --__color-light-8: color-mix(in srgb, var(--__color) var(--w-sheet-color-light-8-mix), var(--__bg));
+  /* 行高=__size；字号按等效控件尺度（默认 sheet=size*4/3 → 与 --w-font-size 一致） */
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-sheet-font-ratio)));
+  --__gap: calc(var(--__size) * var(--w-sheet-gap-ratio));
+  /* 本组件派生全部跟 --__size，覆盖主题 :root 计算值 */
+  --w-sheet-font-size: var(--__font);
+  --w-sheet-gap: var(--__gap);
+  --w-sheet-td-height: var(--__size);
+  --w-sheet-td-padding: calc(var(--__size) * var(--w-sheet-td-pad-y-ratio)) var(--__gap);
+  --w-sheet-td-narrow-padding: calc(var(--__size) * var(--w-sheet-td-narrow-pad-ratio));
+  --w-sheet-sorter-icon-font-size: calc(var(--__size) * var(--w-sheet-sorter-icon-font-ratio));
+  --w-sheet-check-icon-font-size: var(--__font);
+  --w-sheet-sorter-box-width: calc(var(--__size) * var(--w-sheet-sorter-box-width-ratio));
+  --w-sheet-sorter-box-height: calc(var(--__size) * var(--w-sheet-sorter-box-height-ratio));
+  --w-sheet-sorter-offset-right: calc(var(--__size) * var(--w-sheet-sorter-offset-right-ratio));
+  --w-sheet-resize-handle-width: calc(var(--__size) * var(--w-sheet-resize-handle-width-ratio));
+  /* 固定列阴影带：相对行高派生（默认 size≈48 → 15px） */
+  --w-sheet-fixed-shadow-width: calc(var(--__size) * var(--w-sheet-fixed-shadow-width-ratio));
+  /*
+   * 列默认宽：跟 --__size（基准 size=48 时与历史 px 对齐）
+   * 默认列 120、序号 48、勾选 45、单选 42、操作 44
+   */
+  --w-sheet-col-width: calc(var(--__size) * var(--w-sheet-col-width-ratio));
+  --w-sheet-col-index-width: var(--__size);
+  --w-sheet-col-checkbox-width: calc(var(--__size) * var(--w-sheet-col-checkbox-width-ratio));
+  --w-sheet-col-radio-width: calc(var(--__size) * var(--w-sheet-col-radio-width-ratio));
+  --w-sheet-col-action-width: calc(var(--__size) * var(--w-sheet-col-action-width-ratio));
+  /* 子件 Checkbox / Radio 跟本实例有效核 */
+  --w-prop-checkbox-size: var(--__size);
+  --w-prop-checkbox-color: var(--__color);
+  --w-prop-radio-size: var(--__size);
+  --w-prop-radio-color: var(--__color);
+  --w-prop-radio-bg-color: var(--__bg);
+
+  /*
+   * 背景 / 文本三级：表面与正文字色跟 --__bg / --__text 重绑
+   * （:root 的 font/border 绑全局核，实例级在此按有效基重算）
+   */
+  --w-color-font-1: var(--__text);
+  --w-color-font-2: color-mix(in srgb, var(--__text) var(--w-sheet-font-2-mix), var(--__bg));
+  --w-color-font-5: color-mix(in srgb, var(--__text) var(--w-sheet-font-5-mix), var(--__bg));
+  --w-color-border: color-mix(in srgb, var(--__text) var(--w-sheet-border-mix), var(--__bg));
+  --w-sheet-container-background-color: var(--__bg);
+  --w-sheet-tr-background-color: var(--__bg);
+  --w-sheet-tfoot-background-color: var(--__bg);
+  --w-sheet-td-color: var(--w-color-font-1);
+  --w-sheet-thead-th-color: var(--w-color-font-2);
+  --w-sheet-tfoot-th-color: var(--w-color-font-2);
+  --w-sheet-container-border-color: var(--w-color-border);
+  --w-sheet-thead-th-border-color: var(--w-color-border);
+  --w-sheet-tfoot-th-border-color: var(--w-color-font-5);
+  --w-sheet-td-border-color: color-mix(in srgb, var(--__text) var(--w-sheet-td-border-mix), var(--__bg));
+  --w-sheet-tr-stripe-color: color-mix(
+    in srgb,
+    var(--__text) var(--w-sheet-tr-stripe-mix),
+    var(--__bg)
+  );
+  /* 表头：品牌色浅染表面；选中行：警示浅染（均可被作用域 cssVars 覆盖） */
+  --w-sheet-thead-background-color: color-mix(
+    in srgb,
+    var(--__color) var(--w-sheet-thead-bg-mix),
+    var(--__bg)
+  );
+  --w-sheet-tr-checked-background-color: color-mix(
+    in srgb,
+    var(--w-warn) var(--w-sheet-tr-checked-mix),
+    var(--__bg)
+  );
+  --w-sheet-tr-highlight-background-color: var(--__color-light-5);
+  --w-sheet-tr-hover-color: var(--__color-light-8);
+
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--w-radius);
+  background-color: var(--w-sheet-container-background-color);
+  color: var(--w-sheet-td-color);
+  flex: 1;
+  font-size: var(--w-sheet-font-size);
+  & .w-sheet-inner-container {
+    overflow: auto;
+
+    & .w-sheet {
+      /* collapse + sticky 会在固定列之间撕开 1px 缝；separate 后格子各自占位，无需再左移叠边 */
+      border-collapse: separate;
+      border-spacing: 0;
+      /* width: 100%; */
+      font-size: inherit;
+    }
+
+    & .w-cell {
+      padding: var(--w-sheet-td-padding);
+      height: var(--w-sheet-td-height);
+      font-size: var(--w-sheet-font-size);
+      line-height: 1.25;
+      box-sizing: border-box;
+
+      color: var(--w-sheet-td-color);
+      text-align: left;
+      position: relative;
+      transition: background-color var(--w-transition-time);
+      &.w-cell--sticky {
+        position: sticky;
+        background-color: var(--w-sheet-tr-background-color, var(--__bg));
+        z-index: 1;
+      }
+      &.w-cell--narrow {
+        padding: var(--w-sheet-td-narrow-padding);
+      }
+      &.w-cell--center {
+        text-align: center;
+      }
+      &.w-cell--right {
+        text-align: right;
+      }
+      & .w-cell-index,
+      & .w-cell-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        font-size: inherit;
+      }
+      & .w-cell-action {
+        color: var(--w-color-font-3);
+        transform: translateX(100%);
+        visibility: hidden;
+        & .w-cell-action-add {
+          font-size: 1.2em;
+          cursor: pointer;
+          &:hover {
+            color: var(--__color);
+          }
+        }
+        & .w-cell-action-delete {
+          font-size: 1.2em;
+          cursor: pointer;
+          &:hover {
+            color: var(--w-color-danger);
+          }
+        }
+      }
+      & .w-cell-resize-line {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: var(--w-sheet-resize-handle-width);
+        cursor: w-resize;
+        z-index: 0;
+      }
+
+      & .w-cell-sorter {
+        position: absolute;
+        right: var(--w-sheet-sorter-offset-right);
+        top: 0;
+        bottom: 0;
+        width: var(--w-sheet-sorter-box-width);
+        height: var(--w-sheet-sorter-box-height);
+        display: flex;
+        border-radius: calc(2 * var(--w-radius));
+        flex-direction: column;
+        margin: auto;
+        cursor: pointer;
+        transition: background-color var(--w-transition-quick-time);
+        & .w-cell-sorter-icon {
+          color: var(--w-color-font-3);
+          display: inline-flex;
+          position: absolute;
+          font-size: var(--w-sheet-sorter-icon-font-size);
+          width: calc(var(--__size) * var(--w-sheet-sorter-w-ratio));
+          height: calc(var(--__size) * var(--w-sheet-sorter-h-ratio));
+        }
+        &:hover {
+          background-color: var(--__bg);
+          & .w-cell-sorter-icon {
+            color: var(--w-color-font-2);
+          }
+        }
+        & .w-cell-sorter-up {
+          transform: rotate(180deg);
+          top: calc(var(--__size) * -0.08);
+          left: 0;
+          &.w-cell-sorter--0 {
+            color: var(--__color);
+          }
+        }
+        & .w-cell-sorter-down {
+          top: calc(var(--__size) * 0.125);
+          left: calc(var(--__size) * 0.01);
+          &.w-cell-sorter--1 {
+            color: var(--__color);
+          }
+        }
+      }
+
+      &:hover {
+      }
+    }
+
+    .w-sheet-thead {
+      position: sticky;
+      top: 0;
+      background-color: var(--w-sheet-thead-background-color);
+      min-width: min-content;
+      width: 100%;
+      z-index: 2;
+      font-size: var(--w-sheet-font-size);
+      & thead {
+        background-color: var(--w-sheet-thead-background-color);
+        font-size: inherit;
+        & .w-cell {
+          border-color: var(--w-sheet-thead-th-border-color);
+          color: var(--w-sheet-thead-th-color);
+          font-size: var(--w-sheet-font-size);
+          &.w-cell--sticky {
+            background-color: var(--w-sheet-thead-background-color);
+          }
+          &.w-cell--not-bold {
+            font-weight: normal;
+          }
+        }
+      }
+    }
+
+    & .w-sheet-tbody {
+      font-size: var(--w-sheet-font-size);
+      & tbody {
+        font-size: inherit;
+      }
+    }
+
+    & .w-sheet-tfoot {
+      position: sticky;
+      bottom: 0;
+      background-color: var(--w-sheet-tfoot-background-color);
+      min-width: min-content;
+      width: 100%;
+      z-index: 2;
+      font-size: var(--w-sheet-font-size);
+      /* margin-top: -1px; */
+      & tfoot {
+        background-color: var(--w-sheet-tfoot-background-color);
+        font-size: inherit;
+        & .w-cell {
+          border-color: var(--w-sheet-tfoot-th-border-color);
+          color: var(--w-sheet-tfoot-th-color);
+          font-size: var(--w-sheet-font-size);
+          &.w-cell--sticky {
+            background-color: var(--w-sheet-tfoot-background-color);
+          }
+          &.w-cell--not-bold {
+            font-weight: normal;
+          }
+        }
+      }
+    }
+
+    &.w-sheet--min-content {
+      & .w-sheet-tbody {
+        width: min-content;
+      }
+      & .w-sheet {
+        width: min-content;
+        table-layout: fixed;
+      }
+    }
+
+    &.w-sheet--nowrap {
+      & .w-sheet {
+        white-space: nowrap;
+      }
+      & .w-cell {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    &.w-sheet--stripe {
+      & .w-sheet-tbody {
+        & .w-sheet {
+          & tr {
+            /* & td {
+              &.w-cell {
+                background-color: var(--w-sheet-tr-background-color);
+              }
+            } */
+            &:nth-child(2n) {
+              & td {
+                &.w-cell {
+                  background-color: var(--w-sheet-tr-stripe-color);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    & .w-sheet-tbody {
+      /* margin-top: -1px; */
+      & .w-sheet {
+        & tr {
+          background-color: var(--w-sheet-tr-background-color);
+          &.w-sheet-tr--highlight {
+            & td {
+              &.w-cell {
+                background-color: var(--w-sheet-tr-highlight-background-color);
+              }
+            }
+          }
+          &.w-sheet-tr--checked {
+            & td {
+              &.w-cell {
+                background-color: var(--w-sheet-tr-checked-background-color);
+              }
+            }
+          }
+          &:nth-child(2n) {
+            &.w-sheet-tr--highlight {
+              & td {
+                &.w-cell {
+                  background-color: var(
+                    --w-sheet-tr-highlight-background-color
+                  );
+                }
+              }
+            }
+            &.w-sheet-tr--checked {
+              & td {
+                &.w-cell {
+                  background-color: var(--w-sheet-tr-checked-background-color);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &.w-sheet--hover {
+      & .w-sheet-tbody {
+        & .w-sheet {
+          & tr {
+            transition: var(--w-transition-quick-time);
+            &:hover {
+              &:not(.w-sheet-tr--highlight):not(.w-sheet-tr--checked) {
+                & td {
+                  &.w-cell {
+                    background-color: var(--w-sheet-tr-hover-color);
+                  }
+                  /* &.w-cell--sticky {
+                  background-color: var(--w-sheet-tr-hover-color);
+                } */
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &.w-sheet--has-action {
+      & .w-sheet-tbody {
+        & .w-sheet {
+          & tr {
+            &:hover {
+              &:not(.w-sheet-tr--highlight) {
+                & .w-cell {
+                  & .w-cell-index {
+                    transform: translateX(-100%);
+                  }
+                  & .w-cell-action {
+                    transform: translateX(0);
+                    visibility: visible;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &.w-sheet--has-top-shadow {
+      & .w-sheet-thead {
+        box-shadow: var(--w-sheet-sticky-top-shadow);
+      }
+    }
+    &.w-sheet--has-bottom-shadow {
+      & .w-sheet-tfoot {
+        box-shadow: var(--w-sheet-sticky-bottom-shadow);
+      }
+    }
+  }
+
+  & .w-sheet-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(var(--__size) * var(--w-sheet-empty-min-height-ratio));
+    padding: var(--__gap, calc(var(--__size) * var(--w-sheet-gap-ratio)));
+    box-sizing: border-box;
+  }
+
+  & .w-sheet-resize-line,
+  & .w-sheet-left-fixed-shadow-line,
+  & .w-sheet-right-fixed-shadow-line {
+    position: absolute;
+    height: 100%;
+    left: -10000px;
+    top: 0;
+    z-index: 2;
+  }
+  & .w-sheet-resize-line {
+    width: 1px;
+    background-color: var(--w-color-danger-5);
+    box-shadow: var(--w-sheet-resize-line-shadow);
+  }
+  & .w-sheet-left-fixed-shadow-line,
+  & .w-sheet-right-fixed-shadow-line {
+    width: var(--w-sheet-fixed-shadow-width);
+    pointer-events: none;
+    left: -10000px;
+    z-index: 2;
+    transition: opacity var(--w-transition-time) var(--w-cubic-bezier, ease);
+    opacity: 0;
+    &.is-show {
+      opacity: 1;
+    }
+  }
+  & .w-sheet-left-fixed-shadow-line {
+    background-image: var(--w-sheet-fixed-shadow-left);
+  }
+  & .w-sheet-right-fixed-shadow-line {
+    transform: translateX(calc(-1 * var(--w-sheet-fixed-shadow-width)));
+    background-image: var(--w-sheet-fixed-shadow-right);
+  }
+
+  &.w-sheet-bordered {
+    border: 1px solid var(--w-sheet-container-border-color);
+
+    & .w-sheet-inner-container {
+      margin: -1px;
+      & .w-sheet-tbody {
+        & tr.w-sheet-tr--highlight {
+          & > td {
+            &.w-cell {
+              /* border-color: var(--w-sheet-tr-highlight-background-color); */
+            }
+          }
+          border-color: var(--w-sheet-tr-highlight-background-color);
+        }
+      }
+
+      & .w-cell {
+        /* separate 下四边都画会变成 2px；只留右/下，与 collapse 时的 1px 网格一致 */
+        border-style: solid;
+        border-width: 0 1px 1px 0;
+        border-color: var(--w-sheet-td-border-color);
+      }
+    }
+  }
+
+  &.w-sheet-tr-bordered {
+    & .w-sheet-inner-container {
+      & .w-sheet-tbody,
+      & .w-sheet-tfoot {
+        & .w-sheet {
+          & tr {
+            & td,
+            & th {
+              &.w-cell {
+                border-bottom: 1px solid var(--w-sheet-td-border-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.w-sheet-check-icon {
+  font-size: var(--w-sheet-check-icon-font-size);
+  color: var(--w-color-font-4);
+  transform: scale(1.3, 1.3);
+  display: inline-flex;
+  &.w-sheet-check-icon--checked {
+    color: var(--__color);
+  }
+  &.w-sheet-check-icon--disabled {
+    cursor: not-allowed;
+    opacity: var(--w-sheet-check-disabled-opacity);
+  }
+}
+
+/* //????hack?? */
+@-moz-document url-prefix() {
+  .w-cell-sorter-up {
+    left: 0.8px !important;
+  }
+}

package/dist/theme/tokens/components/slider.css

@@ -0,0 +1,171 @@
+.w-slider-has-input {
+  display: flex;
+  align-items: center;
+  & .w-slider {
+    &.w-slider-x {
+      flex: 1;
+      margin-right: var(--w-gap);
+    }
+  }
+}
+.w-slider {
+  --__size: var(--w-prop-slider-size, var(--w-slider-size, var(--w-size)));
+  --__color: var(--w-prop-slider-color, var(--w-slider-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-slider-bg-color,
+    var(--w-slider-bg-color, var(--w-bg-color))
+  );
+  --__color-light-8: color-mix(in srgb, var(--__color) var(--w-slider-color-light-8-mix), var(--__bg));
+  --w-slider-track-thickness: calc(var(--__size) * var(--w-slider-track-thickness-ratio));
+  --w-slider-rod-extra: calc(var(--__size) * var(--w-slider-rod-extra-ratio));
+  --w-slider-xy-size: calc(var(--__size) * var(--w-slider-xy-size-ratio));
+
+  &.w-slider-x {
+    --slider-width: auto;
+    --slider-height: var(--w-slider-track-thickness);
+    --slider-radius: calc(var(--slider-height) / 2);
+    --slider-rod-size: calc(var(--w-slider-rod-extra) + var(--slider-height));
+  }
+  &.w-slider-y {
+    --slider-width: var(--w-slider-track-thickness);
+    --slider-height: var(--w-slider-xy-size);
+    --slider-radius: calc(var(--slider-width) / 2);
+    --slider-rod-size: calc(var(--w-slider-rod-extra) + var(--slider-width));
+  }
+  &.w-slider-xy {
+    --slider-width: var(--w-slider-xy-size);
+    --slider-height: var(--w-slider-xy-size);
+    --slider-radius: 0;
+    --slider-rod-size: calc(var(--__size) * var(--w-slider-xy-rod-ratio));
+  }
+
+  background: var(--w-color-font-5);
+  height: var(--slider-height);
+  border-radius: var(--slider-radius);
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  width: var(--slider-width);
+  box-sizing: border-box;
+  cursor: pointer;
+  outline: none;
+
+  /* 加厚热区，细轨道也好点 */
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: 0;
+  }
+  &.w-slider-x::before {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: max(var(--slider-rod-size), 24px);
+    transform: translateY(-50%);
+  }
+  &.w-slider-y::before {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: max(var(--slider-rod-size), var(--w-slider-hit-min));
+    transform: translateX(-50%);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--w-slider-focus-ring);
+  }
+
+  &.w-slider-disabled,
+  &.w-slider-readonly {
+    cursor: not-allowed;
+    opacity: var(--w-slider-disabled-opacity);
+  }
+  &.w-slider-disabled {
+    pointer-events: none;
+  }
+
+  & .w-slider-progress {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: var(--__color);
+    border-radius: var(--slider-radius);
+    pointer-events: none;
+  }
+
+  & .w-slider-rod {
+    width: var(--slider-rod-size);
+    height: var(--slider-rod-size);
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 2;
+
+    &:active {
+      cursor: grabbing;
+    }
+    /* React Layer 会包 .w-layer-trigger；须占满杆，否则 absolute 的 tip 不撑开触发器，定位偏到左/上缘 */
+    & .w-layer-trigger {
+      display: block;
+      width: 100%;
+      height: 100%;
+      max-width: none;
+    }
+    & .w-slider-for-tip {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      background-color: var(--__bg);
+      background-image: linear-gradient(
+        135deg,
+        var(--__bg),
+        var(--__color-light-8)
+      );
+      border-radius: 100%;
+      border: var(--w-slider-rod-border-width) solid var(--__color);
+      cursor: grab;
+      transition:
+        transform var(--w-transition-time),
+        box-shadow var(--w-transition-time);
+      &:hover,
+      &.rod-in-dragging {
+        transform: scale(var(--w-slider-rod-hover-scale));
+        box-shadow: var(--w-slider-rod-hover-shadow);
+      }
+      &.rod-in-dragging {
+        cursor: grabbing;
+        transition: none;
+      }
+    }
+  }
+  &.w-slider-dragging {
+    cursor: grabbing;
+  }
+
+  &.w-slider-xy {
+    & .w-slider-rod {
+      left: calc(var(--__pos-x, 0) * (100% - var(--slider-rod-size)));
+      top: calc(var(--__pos-y, 0) * (100% - var(--slider-rod-size)));
+      & .w-slider-for-tip {
+        background-color: transparent;
+        border: 2px solid var(--w-color-font-1);
+      }
+    }
+  }
+
+  &.w-slider-x {
+    & .w-slider-rod {
+      left: calc(var(--__pos-x, 0) * (100% - var(--slider-rod-size)));
+      top: calc((var(--slider-rod-size) - var(--slider-height)) / -2);
+    }
+  }
+  &.w-slider-y {
+    & .w-slider-rod {
+      top: calc(var(--__pos-y, 0) * (100% - var(--slider-rod-size)));
+      left: calc((var(--slider-rod-size) - var(--slider-width)) / -2);
+    }
+  }
+}

package/dist/theme/tokens/components/svgIcon.css

@@ -0,0 +1,6 @@
+.w-svg-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  vertical-align: middle;
+  fill: currentColor;
+}