@will-ui/vue 1.0.0

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

@@ -0,0 +1,50 @@
+.w-form {
+  --w-form-item-label-width: calc(
+    var(--w-size) * var(--w-form-item-label-width-ratio)
+  );
+  padding: var(--w-form-padding);
+  min-width: 0;
+  box-sizing: border-box;
+  font-size: var(--w-font-size);
+
+  &.w-form-fieldset {
+    border: 1px solid var(--w-color-border);
+    border-radius: var(--w-radius);
+    padding: calc(var(--w-form-padding) * 1.2);
+  }
+
+  & > .w-form-item:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.w-form-title {
+  margin: 0 0 var(--w-form-title-gap);
+  font-size: var(--w-form-title-font-size);
+  color: var(--w-color-font-1);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.w-form-inline {
+  --w-form-item-label-width: calc(
+    var(--w-size) * var(--w-form-item-label-width-ratio)
+  );
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--w-form-inline-gap);
+  padding: var(--w-form-padding);
+  min-width: 0;
+
+  & .w-form-item {
+    margin-bottom: 0;
+
+    &.is-error {
+      margin-bottom: calc(
+        var(--w-form-item-error-font-size) * var(--w-form-item-error-line-height) +
+          var(--w-form-item-error-gap)
+      );
+    }
+  }
+}

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

@@ -0,0 +1,194 @@
+.w-form-item {
+  /* 三级：prop > --w-form-item-size > --w-size（Form 整表可写 --w-size） */
+  --__size: var(
+    --w-prop-form-item-size,
+    var(--w-form-item-size, var(--w-size))
+  );
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-form-item-font-ratio))
+  );
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: var(--w-form-item-margin-bottom);
+  font-size: var(--__font);
+
+  &.w-form-item-top {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+
+    & > .w-form-item-label {
+      width: auto;
+      max-width: 100%;
+    }
+
+    & > .w-form-item-content {
+      width: 100%;
+    }
+  }
+}
+
+.w-form-item-label {
+  width: var(--w-form-item-label-width);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-shrink: 0;
+  min-height: var(--__size);
+  font-size: var(--w-form-item-label-font-size, var(--__font));
+  color: var(--w-color-font-2);
+  line-height: var(--w-form-item-label-line-height);
+  box-sizing: border-box;
+  padding-right: var(--w-form-item-label-gap);
+
+  & > label {
+    min-width: 0;
+    word-break: break-word;
+  }
+}
+
+.w-form-item-label-required {
+  &::before {
+    content: '*';
+    color: var(--w-error);
+    margin-right: var(--w-form-item-required-gap);
+  }
+}
+
+.w-form-item-label-left {
+  justify-content: flex-start;
+}
+
+.w-form-item-label-top {
+  display: flex;
+  width: auto;
+  max-width: 100%;
+  min-height: 0;
+  margin-bottom: var(--w-form-item-label-top-gap);
+  line-height: var(--w-form-item-label-line-height);
+  padding-right: 0;
+  justify-content: flex-start;
+}
+
+.w-form-item-label-pos-top {
+  align-items: flex-start;
+  padding-top: var(--w-form-item-label-align-pad);
+}
+
+.w-form-item-label-pos-bottom {
+  align-items: flex-end;
+}
+
+.w-form-item-label-pos-center {
+  align-items: center;
+}
+
+.w-form-item-content {
+  position: relative;
+  min-width: 0;
+  min-height: var(--__size);
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.w-form-item-wrapper {
+  width: 100%;
+  min-width: 0;
+  min-height: var(--__size);
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+}
+
+.w-form-item-wrapper-error {
+  & .w-write-wrapper,
+  & .w-choose-trigger,
+  & .w-choose2-trigger,
+  & .w-trigger,
+  & .w-match,
+  & .w-tree-choose-trigger,
+  & .w-color-picker-trigger,
+  & .w-upload-trigger,
+  & .w-upload-card-trigger {
+    border-color: var(--w-error);
+  }
+}
+
+.w-form-item.is-error {
+  & .w-write-input,
+  & .w-write-textarea,
+  & .w-trigger,
+  & .w-choose2-trigger,
+  & .w-match,
+  & .w-tree-choose-trigger,
+  & .w-color-picker-trigger,
+  & .w-upload-trigger,
+  & .w-upload-card-trigger {
+    border-color: var(--w-error);
+    transition: border-color var(--w-transition-quick-time)
+      var(--w-cubic-bezier-quick);
+  }
+}
+
+.w-form-item-error {
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+  font-size: var(--w-form-item-error-font-size);
+  line-height: var(--w-form-item-error-line-height);
+  color: var(--w-form-item-error-color);
+  pointer-events: none;
+  transform-origin: top left;
+}
+
+.w-form-item-error-bottom {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding-top: var(--w-form-item-error-gap);
+  box-sizing: border-box;
+}
+
+.w-form-item-error-right {
+  position: relative;
+  margin-left: var(--w-form-item-error-right-gap);
+  padding-top: 0;
+  white-space: nowrap;
+  flex-shrink: 0;
+  pointer-events: auto;
+  transform-origin: center left;
+}
+
+.w-form-error-enter-active,
+.w-form-error-leave-active {
+  transition:
+    opacity var(--w-transition-quick-time) var(--w-cubic-bezier-quick),
+    transform var(--w-transition-quick-time) var(--w-cubic-bezier-quick);
+}
+
+.w-form-error-enter-from,
+.w-form-error-leave-to {
+  opacity: 0;
+}
+
+.w-form-error-enter-from.w-form-item-error-bottom,
+.w-form-error-leave-to.w-form-item-error-bottom {
+  transform: translateY(-3px);
+}
+
+.w-form-error-enter-from.w-form-item-error-right,
+.w-form-error-leave-to.w-form-item-error-right {
+  transform: translateX(-4px);
+}
+
+.w-form-error-enter-to,
+.w-form-error-leave-from {
+  opacity: 1;
+  transform: translate(0, 0);
+}

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

@@ -0,0 +1,41 @@
+.w-icon {
+  --color: var(--w-icon-color, currentColor);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--w-icon-font-size);
+  line-height: 1;
+  color: var(--color);
+  transition:
+    color var(--w-transition-time),
+    transform var(--w-icon-rotate-duration);
+
+  &:hover {
+    color: var(--w-icon-hover-color, var(--color));
+  }
+
+  &.w-icon-rotate-x {
+    transform: rotateX(var(--w-icon-rotate-deg, 180deg));
+  }
+
+  &.w-icon-rotate-y {
+    transform: rotateY(var(--w-icon-rotate-deg, 180deg));
+  }
+
+  &.w-icon-rotate-z {
+    transform: rotateZ(var(--w-icon-rotate-deg, 180deg));
+  }
+
+  &.w-icon-spin {
+    animation: w-icon-spin var(--w-icon-spin-duration) linear infinite;
+  }
+}
+
+@keyframes w-icon-spin {
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(360deg);
+  }
+}

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

@@ -0,0 +1,70 @@
+.w-image {
+  --__size: var(--w-prop-image-size, var(--w-image-size, var(--w-size)));
+  --__radius: var(
+    --w-prop-image-radius,
+    var(--w-image-radius, 0px)
+  );
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--__size);
+  height: var(--__size);
+  overflow: hidden;
+  border-radius: var(--__radius);
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  &.w-image--round {
+    --__radius: 50%;
+    border-radius: var(--__radius);
+  }
+
+  &.w-image--shadow {
+    box-shadow: var(--w-image-shadow);
+  }
+
+  &.w-image--placeholder {
+    background-color: var(--w-image-placeholder-bg);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: calc(var(--__size) * var(--w-image-placeholder-head-ratio));
+      left: 20%;
+      width: calc(var(--__size) * var(--w-image-placeholder-dot-ratio));
+      height: calc(var(--__size) * var(--w-image-placeholder-dot-ratio));
+      border-radius: 100%;
+      background-color: var(--w-image-placeholder-fg);
+      box-shadow: 0 0 10px color-mix(in srgb, #000 20%, transparent);
+      z-index: 1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: var(--w-image-placeholder-body-top);
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      border-radius: var(--__radius);
+      background-color: var(--w-image-placeholder-fg);
+      box-shadow: calc(
+          var(--__size) * var(--w-image-placeholder-shadow-x-ratio)
+        )
+        calc(var(--__size) * var(--w-image-placeholder-shadow-y-ratio))
+        var(--w-image-placeholder-fg);
+      transform: rotate(45deg) translateX(-50%);
+      z-index: 0;
+    }
+  }
+
+  & > .w-image__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--w-image-object-fit);
+  }
+}

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

@@ -0,0 +1,190 @@
+/* nearby：trigger + 弹层同根，作为 absolute 定位包含块 */
+.w-layer {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+  vertical-align: top;
+
+  &:has(.w-trigger-block) {
+    display: flex;
+    width: 100%;
+  }
+
+  /* 根随 trigger 收缩，100% 会把弹层高度卡成 trigger 高 */
+  & .w-layer-content {
+    max-height: none;
+  }
+}
+
+/* React Layer 始终包一层 trigger 根；须随内容收缩，否则 getBoundingClientRect 会按父宽算，bottom-start 等定位偏到容器另一侧 */
+.w-layer-trigger {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+  vertical-align: top;
+
+  /* Trigger block：子项 flex:1，外层需占满可分配宽度 */
+  &:has(.w-trigger-block) {
+    display: flex;
+    width: 100%;
+  }
+}
+
+.w-layer-content {
+  /* 三级：prop > --w-layer-* > 全局核；Teleport 由 Layer 同步 size/color/bg/text
+   * 业务弹层用 .w-layer-content.w-xxx 覆写 --__* */
+  --__size: var(--w-prop-layer-size, var(--w-layer-size, var(--w-size)));
+  --__bg: var(--w-prop-layer-bg-color, var(--w-layer-bg-color, var(--w-bg-color)));
+  --__text: var(
+    --w-prop-layer-text-color,
+    var(--w-layer-text-color, var(--w-text-color))
+  );
+
+  /* 下游排版 / 表单跟层 */
+  --w-form-item-width: calc(var(--__size) * var(--w-form-item-width-ratio));
+  --w-font-size: max(var(--w-font-size-min), calc(var(--__size) * var(--w-layer-font-ratio)));
+  --w-gap: calc(var(--__size) * var(--w-layer-gap-ratio));
+  --w-color-font-1: var(--__text);
+  --w-color-border: color-mix(
+    in srgb,
+    var(--__text) var(--w-layer-border-mix),
+    var(--__bg)
+  );
+  --w-form-item-color: var(--__text);
+  --w-form-item-color-hover: var(--__text);
+  --w-form-item-color-focus: var(--__text);
+
+  /*
+   * 绘制 API（Tooltip / AudioPlayer / style 可覆写）：直接吃 --__*，无 --w-layer-* 跳板
+   * 箭头几何：size/inset 跟 --__size；x/y 由定位脚本写入
+   */
+  --_layer-background-color: var(--__bg);
+  --_layer-color: var(--__text);
+  --_layer-border-color: var(--w-color-border);
+  --_layer-arrow-x: 5px;
+  --_layer-arrow-y: 5px;
+  --_layer-arrow-size: clamp(
+    var(--w-layer-arrow-size-min),
+    calc(var(--__size) * var(--w-layer-arrow-size-ratio)),
+    var(--w-layer-arrow-size-max)
+  );
+  --_layer-arrow-inset: clamp(
+    var(--w-layer-arrow-inset-min),
+    calc(var(--__size) * var(--w-layer-arrow-inset-ratio)),
+    var(--w-layer-arrow-inset-max)
+  );
+
+  /* 边框跟绘制 API，保证 style/--_layer-border-color 覆写生效；主题默认可改 :root --w-layer-border-mix */
+  border: 1px solid var(--_layer-border-color);
+  max-height: 100%;
+  border-radius: var(--w-radius);
+  position: absolute;
+  color: var(--_layer-color);
+  box-shadow: var(--w-box-shadow);
+  background-color: var(--_layer-background-color);
+  transform-origin: var(--_layer-arrow-x) var(--_layer-arrow-y);
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    height: 0;
+    width: 0;
+    border-width: var(--_layer-arrow-size);
+    border-style: solid;
+    border-color: transparent;
+  }
+
+  &.w-layer-no-arrow {
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  &.w-layer-center {
+    transform-origin: center center;
+  }
+
+  &.w-layer-client-center {
+    position: fixed;
+  }
+
+  /* 贴边轴用 -2*size + inset 压进框内消缝；勿用层宽高当 top/left（相对 padding box 会偏出） */
+  &.w-layer-bottom,
+  &.w-layer-bottom-start,
+  &.w-layer-bottom-end {
+    &::before {
+      left: var(--_layer-arrow-x);
+      top: calc(
+        var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset) - 1px
+      );
+      border-color: transparent transparent var(--_layer-border-color);
+    }
+    &::after {
+      left: var(--_layer-arrow-x);
+      top: calc(var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset));
+      border-color: transparent transparent var(--_layer-background-color);
+    }
+  }
+
+  &.w-layer-top,
+  &.w-layer-top-start,
+  &.w-layer-top-end {
+    &::before {
+      left: var(--_layer-arrow-x);
+      top: auto;
+      bottom: calc(
+        var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset) - 1px
+      );
+      border-color: var(--_layer-border-color) transparent transparent;
+    }
+    &::after {
+      left: var(--_layer-arrow-x);
+      top: auto;
+      bottom: calc(var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset));
+      border-color: var(--_layer-background-color) transparent transparent;
+    }
+  }
+
+  &.w-layer-left,
+  &.w-layer-left-start,
+  &.w-layer-left-end {
+    &::before {
+      left: auto;
+      right: calc(
+        var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset) - 1px
+      );
+      top: var(--_layer-arrow-y);
+      border-color: transparent transparent transparent var(--_layer-border-color);
+    }
+    &::after {
+      left: auto;
+      right: calc(var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset));
+      top: var(--_layer-arrow-y);
+      border-color: transparent transparent transparent
+        var(--_layer-background-color);
+    }
+  }
+
+  &.w-layer-right,
+  &.w-layer-right-start,
+  &.w-layer-right-end {
+    &::before {
+      left: calc(
+        var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset) - 1px
+      );
+      top: var(--_layer-arrow-y);
+      border-color: transparent var(--_layer-border-color) transparent transparent;
+    }
+    &::after {
+      left: calc(var(--_layer-arrow-size) * -2 + var(--_layer-arrow-inset));
+      top: var(--_layer-arrow-y);
+      border-color: transparent var(--_layer-background-color) transparent
+        transparent;
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+.w-lcd-font {
+  --__text: var(
+    --w-prop-lcd-font-text-color,
+    var(--w-lcd-font-text-color, var(--w-text-color))
+  );
+  --__inactive: color-mix(
+    in srgb,
+    var(--__text) var(--w-lcd-font-inactive-mix),
+    transparent
+  );
+  /* 默认段厚（viewBox 1.3 / 18 × 字高）；weight 为绝对长度，换算成仅改粗细的 scale */
+  --__base-thickness: calc(1em * var(--w-lcd-font-segment-thickness-ratio));
+  --__segment-scale: 1;
+
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: calc(1em * var(--w-lcd-font-gap-ratio));
+  max-width: 100%;
+  /* 仅在有 prop / 主题 token 时生效；未设时整条声明失效，class / style 的 font-size 可接管 */
+  font-size: var(--w-prop-lcd-font-size, var(--w-lcd-font-size));
+  color: var(--__text);
+  line-height: 1;
+  vertical-align: middle;
+  font-variant-numeric: tabular-nums;
+
+  &.w-lcd-font--auto {
+    width: 100%;
+    height: 1em;
+    align-items: stretch;
+    justify-content: stretch;
+  }
+
+  &.w-lcd-font--dim .w-lcd-font-segment--off {
+    fill: var(--__inactive);
+  }
+
+  &:not(.w-lcd-font--dim) .w-lcd-font-segment--off {
+    fill: transparent;
+  }
+
+  /* weight：绝对段厚（px/em 等），与 size 无关；仅缩放段粗细，不改数字整体尺寸 */
+  &.w-lcd-font--weight {
+    --__segment-scale: calc(
+      var(--w-prop-lcd-font-weight, var(--w-lcd-font-weight)) /
+        var(--__base-thickness)
+    );
+  }
+
+  /* 未设 weight 时，font-weight 加粗仍只加粗段，不放大整字 */
+  &:not(.w-lcd-font--weight).font-bold,
+  &:not(.w-lcd-font--weight)[style*='font-weight: bold'],
+  &:not(.w-lcd-font--weight)[style*='font-weight:700'],
+  &:not(.w-lcd-font--weight)[style*='font-weight: 700'],
+  &:not(.w-lcd-font--weight)[style*='font-weight:600'],
+  &:not(.w-lcd-font--weight)[style*='font-weight: 600'] {
+    --__segment-scale: var(--w-lcd-font-bold-segment-scale);
+  }
+}
+
+.w-lcd-font-digit {
+  display: block;
+  flex: 0 0 auto;
+  height: 1em;
+  width: calc(1em * var(--w-lcd-font-digit-aspect));
+  overflow: visible;
+  /* 继承根上 text-color 三级有效色，供子形状 fill: currentColor */
+  color: inherit;
+
+  .w-lcd-font--auto & {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+    height: 100%;
+  }
+}
+
+.w-lcd-font-digit--dot {
+  width: calc(1em * var(--w-lcd-font-dot-width-ratio));
+}
+
+.w-lcd-font-digit--comma {
+  width: calc(1em * var(--w-lcd-font-comma-width-ratio));
+}
+
+.w-lcd-font-digit--minus {
+  width: calc(1em * var(--w-lcd-font-minus-width-ratio));
+}
+
+.w-lcd-font-digit--plus {
+  width: calc(1em * var(--w-lcd-font-plus-width-ratio));
+}
+
+.w-lcd-font-space {
+  display: block;
+  flex: 0 0 auto;
+  width: calc(1em * var(--w-lcd-font-space-width-ratio));
+  height: 1em;
+}
+
+.w-lcd-font-segment {
+  transition: fill var(--w-lcd-font-transition);
+}
+
+.w-lcd-font-dot-shape {
+  fill: currentColor;
+  transform-box: fill-box;
+  transform-origin: center;
+  transform: scale(var(--__segment-scale));
+}
+
+.w-lcd-font-comma-shape {
+  fill: currentColor;
+  transform-box: fill-box;
+  transform-origin: center;
+  transform: scale(var(--__segment-scale));
+}
+
+.w-lcd-font-plus-bar {
+  fill: currentColor;
+}