@will-ui/vue 1.0.0

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

@@ -0,0 +1,77 @@
+/* 双类盖过 .w-layer-content 的 --__size / --w-font-size（Layer 样式常后加载） */
+.w-layer-content.w-tooltip {
+  /* 三级尺度：prop > --w-tooltip-size > --w-size；派生在此重绑 */
+  --__size: var(--w-prop-tooltip-size, var(--w-tooltip-size, var(--w-size)));
+  --__bg: var(
+    --w-prop-tooltip-bg-color,
+    var(--w-tooltip-bg-color, var(--w-tooltip-background-color))
+  );
+  --__text: var(
+    --w-prop-tooltip-text-color,
+    var(--w-tooltip-text-color, var(--w-tooltip-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-tooltip-font-ratio)));
+  --__pad-x: calc(var(--__size) * var(--w-tooltip-pad-x-ratio));
+  --__pad-y: calc(var(--__size) * var(--w-tooltip-pad-y-ratio));
+  --__radius: clamp(
+    var(--w-tooltip-radius-min),
+    calc(var(--w-tooltip-radius, var(--w-radius)) * var(--w-tooltip-radius-ratio)),
+    var(--w-tooltip-radius-max)
+  );
+  /* 覆盖 Layer 同节点写入的级联 token，避免字号/圆角被 Layer 公式盖住 */
+  --w-font-size: var(--__font);
+  --w-radius: var(--__radius);
+  --w-tooltip-font-size: var(--__font);
+  --w-tooltip-padding-x: var(--__pad-x);
+  --w-tooltip-padding-y: var(--__pad-y);
+  /* Layer 内联变量优先读 _layer-*；此处同步有效表面 / 正文 */
+  --_layer-background-color: var(--__bg);
+  --_layer-color: var(--__text);
+  --_layer-border-color: var(--w-tooltip-border-color);
+
+  box-sizing: border-box;
+  width: max-content;
+  /* min-width：主题钩子 > 跟有效尺度（勿依赖 :root 里 var(--w-size) 算死值） */
+  min-width: var(--w-tooltip-min-width, var(--__size));
+  max-width: var(--w-tooltip-max-width);
+  padding: var(--__pad-y) var(--__pad-x);
+  font-size: var(--__font);
+  line-height: var(--w-tooltip-line-height);
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-radius: var(--__radius);
+  color: var(--__text);
+  background-color: var(--__bg);
+}
+
+/* 离场钉宽期间勿因 overflow 重排换行 */
+.w-translate-leave-active.w-layer-content.w-tooltip {
+  overflow: hidden;
+}
+
+.w-translate-enter-active,
+.w-translate-leave-active {
+  transition:
+    transform var(--w-transition-slow-time) var(--w-cubic-bezier-quick),
+    opacity var(--w-transition-slow-time) var(--w-cubic-bezier-quick);
+  perspective: 1000px;
+}
+
+.w-translate-leave-active {
+  transition:
+    transform var(--w-transition-time) var(--w-cubic-bezier),
+    opacity var(--w-transition-time) var(--w-cubic-bezier);
+  perspective: 1000px;
+}
+
+.w-translate-enter-from,
+.w-translate-leave-to {
+  transform: var(--_layer-transform);
+  opacity: 0;
+}
+
+.w-translate-enter-to,
+.w-translate-leave-from {
+  transform: none;
+  opacity: 1;
+}

package/dist/theme/tokens/components/tree-choose.css

@@ -0,0 +1,154 @@
+.w-tree-choose-trigger {
+  --__size: var(
+    --w-prop-tree-choose-size,
+    var(--w-tree-choose-size, var(--w-size))
+  );
+  --__color: var(
+    --w-prop-tree-choose-color,
+    var(--w-tree-choose-color, var(--w-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-ctrl-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__pad-x: calc(var(--__size) * var(--w-form-item-pad-x-ratio));
+  --__icon-gap: calc(var(--__size) * var(--w-tree-choose-icon-gap-ratio));
+  --w-tree-choose-min-width: calc(var(--__size) * var(--w-tree-choose-min-width-ratio));
+  --w-tree-choose-icon-gap: var(--__icon-gap);
+  --w-prop-tree-size: var(--__size);
+  --w-close-font-size: var(--__icon);
+  --w-icon-font-size: var(--__icon);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--__size);
+  padding: 0 var(--__pad-x);
+  outline: 0;
+  min-width: var(--w-tree-choose-min-width);
+  border: 1px solid var(--w-form-item-border-color);
+  border-radius: var(--w-radius);
+  background-color: var(--w-form-item-background-color);
+  cursor: pointer;
+  font-size: var(--__font);
+  box-sizing: border-box;
+  transition:
+    border-color var(--w-transition-time) var(--w-cubic-bezier-quick, ease),
+    background-color var(--w-transition-time) var(--w-cubic-bezier-quick, ease),
+    box-shadow var(--w-transition-time) var(--w-cubic-bezier-quick, ease);
+
+  & .w-tree-choose-text {
+    color: var(--w-form-item-color);
+    flex: 1;
+  }
+
+  & .w-tree-choose-icon {
+    flex-shrink: 0;
+    margin-left: var(--w-tree-choose-icon-gap);
+
+    & i.w-close {
+      font-size: var(--w-close-font-size);
+    }
+
+    & i.w-icon-arrow-down {
+      color: var(--w-form-item-icon-color);
+    }
+  }
+
+  &.w-tree-choose-placeholder {
+    color: var(--w-form-item-placeholder-color);
+  }
+
+  &.w-tree-choose-trigger-block {
+    display: flex;
+    flex: 1;
+    width: auto;
+  }
+
+  &:hover {
+    &:not(.w-tree-choose-trigger-disabled):not(.w-tree-choose-trigger-active) {
+      border-color: var(--w-form-item-border-color-hover);
+      background-color: var(--w-form-item-background-color-hover);
+      color: var(--w-form-item-color-hover);
+    }
+  }
+
+  &.w-tree-choose-trigger-disabled {
+    color: var(--w-form-item-disabled-color);
+    background-color: var(--w-form-item-disabled-background-color);
+    border-color: var(--w-form-item-disabled-border-color);
+    cursor: not-allowed;
+  }
+
+  &.w-tree-choose-trigger-active {
+    border-color: var(--__color);
+    background-color: var(--w-form-item-background-color-focus);
+    color: var(--w-form-item-color-focus);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--__color) var(--w-tree-choose-color-light-6-mix), transparent);
+  }
+}
+
+.w-tree-choose-content {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+}
+
+.w-tree-choose-layer {
+  --__size: var(
+    --w-prop-tree-choose-size,
+    var(--w-tree-choose-size, var(--w-size))
+  );
+  --__panel-pad: calc(var(--__size) * var(--w-choose-panel-pad-ratio));
+  --__item-gap: min(2.5px, calc(var(--__panel-pad) / 2));
+  --__item-radius: max(
+    0px,
+    calc(var(--w-radius) - var(--w-tree-choose-item-radius-inset))
+  );
+  --__color: var(
+    --w-prop-tree-choose-color,
+    var(--w-tree-choose-color, var(--w-color))
+  );
+  --__bg: var(
+    --w-prop-tree-choose-bg-color,
+    var(--w-tree-choose-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-tree-choose-text-color,
+    var(--w-tree-choose-text-color, var(--w-text-color))
+  );
+  --w-tree-choose-layer-padding: var(--__panel-pad);
+  --w-tree-choose-item-gap: var(--__item-gap);
+  --w-prop-tree-size: var(--__size);
+  --w-prop-tree-color: var(--__color);
+  --w-prop-tree-bg-color: var(--__bg);
+  --w-prop-tree-text-color: var(--__text);
+  /* Tree 根即列表区：panel pad 跟 Choose2 List 一致 */
+  --w-tree-list-gap: var(--__item-gap);
+  /* 项圆角：可选 --w-tree-choose-item-radius 覆写，否则用本层 inset 派生 */
+  --w-tree-item-radius: var(--w-tree-choose-item-radius, var(--__item-radius));
+
+  overflow: auto;
+  padding: var(--__panel-pad);
+  flex: 1;
+  min-height: 0;
+}
+
+.w-tree-choose-footer {
+  --__size: var(
+    --w-prop-tree-choose-size,
+    var(--w-tree-choose-size, var(--w-size))
+  );
+  --__panel-pad: calc(var(--__size) * var(--w-choose-panel-pad-ratio));
+  --__pad-x: calc(var(--__size) * var(--w-form-item-pad-x-ratio));
+
+  /* 与 Choose2 checkall 区同款：panel + 水平补齐 */
+  padding: var(--__panel-pad) calc(var(--__panel-pad) + var(--__pad-x));
+  border-top: 1px solid var(--w-form-item-border-color);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}

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

@@ -0,0 +1,172 @@
+.w-tree {
+  /* 有效尺度 / 主色 / 表面 / 正文三级 */
+  --__size: var(--w-prop-tree-size, var(--w-tree-size, var(--w-size)));
+  --__color: var(--w-prop-tree-color, var(--w-tree-color, var(--w-color)));
+  --__bg: var(--w-prop-tree-bg-color, var(--w-tree-bg-color, var(--w-bg-color)));
+  --__text: var(
+    --w-prop-tree-text-color,
+    var(--w-tree-text-color, var(--w-text-color))
+  );
+  --__color-light-4: color-mix(in srgb, var(--__color) var(--w-tree-color-light-4-mix), var(--__bg));
+  --__color-light-9: color-mix(in srgb, var(--__color) var(--w-tree-color-light-9-mix), var(--__bg));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-tree-font-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-tree-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  /* 本组件派生全部跟 --__size，覆盖主题 :root 计算值 */
+  --w-tree-indent: calc(var(--__size) * var(--w-tree-indent-ratio));
+  --w-tree-list-gap: calc(var(--__size) * var(--w-tree-list-gap-ratio));
+  --w-tree-item-gap: calc(var(--__size) * var(--w-tree-item-gap-ratio));
+  --w-tree-item-padding-y: calc(var(--__size) * var(--w-tree-item-pad-y-ratio));
+  --w-tree-item-padding-x: calc(var(--__size) * var(--w-tree-item-pad-x-ratio));
+  --w-tree-arrow-size: max(24px, calc(var(--__size) * var(--w-tree-arrow-size-ratio)));
+  --w-tree-item-label-padding: calc(var(--__size) * var(--w-tree-item-label-pad-y-ratio))
+    calc(var(--__size) * var(--w-tree-item-label-pad-x-ratio));
+  --__item-radius: max(
+    0px,
+    calc(var(--w-radius) - var(--w-tree-item-radius-inset))
+  );
+
+  /*
+   * 背景 / 文本三级：表面与正文字色跟 --__bg / --__text 重绑
+   * hover 用正文核浅染，避免与面板底（常同 --__bg）无差别（List 同款）
+   */
+  --w-tree-item-label-color: var(--__text);
+  --w-tree-item-hover-color: color-mix(
+    in srgb,
+    var(--__text) var(--w-tree-item-hover-mix),
+    var(--__bg)
+  );
+  --w-tree-item-current-color: var(--__color-light-9);
+  --w-tree-icon-color: var(--__color-light-4);
+  --w-tree-arrow-color: color-mix(in srgb, var(--__text) var(--w-tree-arrow-color-mix), var(--__bg));
+  /* 子件 Checkbox 跟本实例有效尺度 / 主色 */
+  --w-prop-checkbox-size: var(--__size);
+  --w-prop-checkbox-color: var(--__color);
+
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: var(--__font);
+  color: var(--w-tree-item-label-color);
+  border-radius: var(--w-tree-radius, var(--w-radius));
+
+  & .w-tree-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--w-tree-list-gap);
+  }
+
+  & .w-tree-node-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--w-tree-list-gap);
+
+    & .w-tree-item {
+      display: flex;
+      align-items: center;
+      gap: var(--w-tree-item-gap);
+      min-height: var(--__size);
+      box-sizing: border-box;
+      padding: var(--w-tree-item-padding-y) var(--w-tree-item-padding-x);
+      transition: background-color var(--w-transition-quick-time);
+      color: var(--w-tree-item-label-color);
+      border-radius: var(--w-tree-item-radius, var(--__item-radius));
+
+      & .w-tree-item-arrow {
+        --w-icon-font-size: var(--__icon);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        width: var(--w-tree-arrow-size);
+        height: var(--w-tree-arrow-size);
+        margin-left: calc(var(--__size) * var(--w-tree-arrow-margin-ratio));
+        border-radius: max(
+          0px,
+          calc(var(--w-radius) - var(--w-tree-item-radius-inset))
+        );
+        color: var(--w-tree-arrow-color);
+        cursor: pointer;
+        user-select: none;
+        transition:
+          color var(--w-transition-quick-time, var(--w-transition-time)),
+          background-color var(--w-transition-quick-time, var(--w-transition-time));
+
+        & .w-icon-sort-down {
+          transition: transform var(--w-transition-time);
+        }
+
+        &:hover {
+          color: var(--__color);
+          background-color: color-mix(
+            in srgb,
+            var(--__text) var(--w-tree-arrow-hover-bg-mix),
+            transparent
+          );
+        }
+
+        &.no-children {
+          cursor: default;
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+
+      & .w-tree-item-checkbox {
+        flex-shrink: 0;
+      }
+
+      & .w-tree-item-label-wrapper {
+        flex: 1;
+        user-select: none;
+
+        & .w-tree-item-label {
+          display: flex;
+          align-items: center;
+          padding: var(--w-tree-item-label-padding);
+          cursor: pointer;
+          color: var(--w-tree-item-label-color);
+          transition: color var(--w-transition-quick-time);
+
+          &:hover {
+            color: var(--__color);
+          }
+        }
+      }
+
+      &.w-tree-item-active {
+        background-color: var(--w-tree-item-current-color);
+
+        & .w-tree-item-label {
+          color: var(--__color);
+        }
+      }
+
+      &:hover {
+        &:not(.w-tree-item-active):not(.w-tree-item-disabled) {
+          background-color: var(--w-tree-item-hover-color);
+        }
+      }
+
+      &.w-tree-item-disabled {
+        & .w-tree-item-label-wrapper {
+          & .w-tree-item-label {
+            cursor: not-allowed;
+            color: var(--w-color-disabled);
+          }
+        }
+
+        & .w-tree-item-arrow {
+          color: var(--w-color-font-4);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+.w-trigger {
+  --__size: var(--w-prop-trigger-size, var(--w-trigger-size, var(--w-size)));
+  --__color: var(--w-prop-trigger-color, var(--w-trigger-color, var(--w-color)));
+  /* 表面 / 正文三级；未设时回退 form-item，再回退全局核 */
+  --__bg: var(
+    --w-prop-trigger-bg-color,
+    var(
+      --w-trigger-bg-color,
+      var(--w-form-item-background-color, var(--w-bg-color))
+    )
+  );
+  --__text: var(
+    --w-prop-trigger-text-color,
+    var(--w-trigger-text-color, var(--w-form-item-color, var(--w-text-color)))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-ctrl-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__pad-l: calc(var(--__size) * var(--w-trigger-pad-l-ratio));
+  --__pad-r: calc(var(--__size) * var(--w-trigger-pad-r-ratio));
+  /* 宽度随有效 size（与 :root 5× 一致）；实例 / Form 缩放才跟得住 */
+  --w-form-item-width: calc(var(--__size) * var(--w-form-item-width-ratio));
+  --w-close-font-size: var(--__icon);
+  --w-icon-font-size: var(--__icon);
+  /* 子件 Loading：跟本实例有效核；size 用图标核以对齐箭头 / Close */
+  --w-prop-loading-size: var(--__icon);
+  --w-prop-loading-color: var(--__color);
+  --w-prop-loading-text-color: var(--__text);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--__size);
+  padding: 0 var(--__pad-r) 0 var(--__pad-l);
+  outline: 0;
+  width: var(--w-form-item-width);
+  border: 1px solid var(--w-form-item-border-color);
+  border-radius: var(--w-radius);
+  background-color: var(--__bg);
+  cursor: pointer;
+  transition: var(--w-transition-time);
+  font-size: var(--__font);
+  box-sizing: border-box;
+
+  & .w-trigger-text {
+    color: var(--__text);
+    flex: 1;
+    width: 0;
+    user-select: none;
+    font-size: inherit;
+  }
+
+  & .w-trigger-icon {
+    flex-shrink: 0;
+
+    & i.w-icon-arrow-down,
+    & .w-icon:not(.w-loading-icon) {
+      color: var(--w-form-item-icon-color);
+    }
+  }
+
+  &.w-trigger-block {
+    display: flex;
+    flex: 1;
+    width: auto;
+  }
+
+  &:hover {
+    &:not(.w-trigger-disabled):not(.w-trigger-active) {
+      border-color: var(--w-form-item-border-color-hover);
+    }
+  }
+
+  &.w-trigger-disabled {
+    border-color: var(--w-form-item-disabled-border-color);
+    color: var(--w-form-item-disabled-color);
+    background-color: var(--w-form-item-disabled-background-color);
+    cursor: not-allowed;
+  }
+
+  &.w-trigger-active {
+    border-color: var(--w-form-item-border-color-focus);
+    background-color: var(--w-form-item-background-color-focus);
+    box-shadow: var(--w-form-item-focus-ring);
+  }
+}