@will-ui/vue 1.0.0

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

@@ -0,0 +1,253 @@
+.w-btn {
+  /* 三级回退必须在组件根求值；勿在 :root 写 --w-btn-size/color: var(--w-*)，否则会算死 */
+  --__size: var(--w-prop-btn-size, var(--w-btn-size, var(--w-size)));
+  --__color: var(--w-prop-btn-color, var(--w-btn-color, var(--w-color)));
+  --__bg: var(--w-prop-btn-bg-color, var(--w-btn-bg-color, var(--w-bg-color)));
+  --__text: var(
+    --w-prop-btn-text-color,
+    var(--w-btn-text-color, var(--w-text-color))
+  );
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-btn-font-ratio))
+  );
+  --__pad-x: calc(var(--__size) * var(--w-btn-pad-x-ratio));
+  --__inner-gap: calc(var(--__size) * var(--w-btn-inner-gap-ratio));
+  --__radius: var(--w-btn-radius, var(--w-radius));
+
+  /* 主色阶梯按有效主色重绑；mix% 来自 _var（勿直接用 :root 的 --w-color-light*） */
+  --__color-light-4: color-mix(
+    in srgb,
+    var(--__color) var(--w-btn-color-light-4-mix),
+    var(--__bg)
+  );
+  --__color-light-8: color-mix(
+    in srgb,
+    var(--__color) var(--w-btn-color-light-8-mix),
+    var(--__bg)
+  );
+  --__color-light-9: color-mix(
+    in srgb,
+    var(--__color) var(--w-btn-color-light-9-mix),
+    var(--__bg)
+  );
+  --__color-dark-0: color-mix(
+    in srgb,
+    var(--__color) var(--w-btn-color-dark-0-mix),
+    var(--__text)
+  );
+
+  border: var(--w-btn-border);
+  background-color: transparent;
+  display: inline-flex;
+  border-radius: var(--__radius);
+  cursor: pointer;
+  position: relative;
+  transition:
+    color var(--w-transition-quick-time, 0.25s),
+    background-color var(--w-transition-quick-time, 0.25s),
+    border-color var(--w-transition-quick-time, 0.25s),
+    opacity var(--w-transition-quick-time, 0.25s),
+    box-shadow var(--w-transition-quick-time, 0.25s);
+  padding: 0 var(--__pad-x);
+  font-size: var(--__font);
+  height: var(--__size);
+  line-height: var(--w-btn-line-height);
+  align-items: center;
+  justify-content: center;
+  /* loading 指示器间距由 .w-btn-loading-wrap 的 margin 承担，便于随展开动画 */
+  gap: 0;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+
+  &:focus-visible {
+    outline: var(--w-btn-focus-outline);
+    outline-offset: var(--w-btn-focus-outline-offset);
+  }
+
+  & .w-btn-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--__inner-gap);
+  }
+
+  /* loading 指示器：宽度展开 + 淡入，避免突然插入顶开文案 */
+  & .w-btn-loading-wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    width: 1em;
+    margin-inline-end: var(--__inner-gap);
+    opacity: 1;
+  }
+
+  & .w-btn-spinner {
+    width: 1em;
+    height: 1em;
+    border: var(--w-btn-spinner-border);
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: w-btn-spin var(--w-btn-spinner-duration) linear infinite;
+    flex-shrink: 0;
+  }
+
+  &.w-btn-default {
+    color: var(--w-btn-default-text-color);
+    background-color: var(--w-btn-default-bg-color);
+
+    &.w-btn-mode-text {
+      color: var(--w-btn-default-text-color);
+      border-color: transparent;
+      background-color: transparent;
+
+      &:hover:not(.w-btn-disabled):not(.w-btn-loading) {
+        color: var(--__color);
+        background-color: var(--__color-light-9);
+      }
+    }
+
+    &.w-btn-mode-line {
+      border-color: var(--w-btn-default-border-color);
+      background-color: transparent;
+      color: var(--w-btn-default-text-color);
+
+      &:hover:not(.w-btn-disabled):not(.w-btn-loading) {
+        background-color: var(--w-btn-default-bg-color);
+        border-color: var(--w-btn-default-border-color);
+        color: var(--w-btn-default-text-color);
+      }
+    }
+
+    &:hover:not(.w-btn-mode-text):not(.w-btn-mode-line):not(.w-btn-disabled):not(
+        .w-btn-loading
+      ) {
+      background-color: var(--w-btn-default-hover-bg-color);
+    }
+  }
+
+  &.w-btn-primary {
+    background-color: var(--__color);
+    color: var(--w-btn-solid-text-color);
+
+    &.w-btn-mode-text {
+      color: var(--__color);
+      background-color: transparent;
+
+      &:hover:not(.w-btn-disabled):not(.w-btn-loading) {
+        background-color: var(--__color-light-8);
+      }
+    }
+
+    &.w-btn-mode-line {
+      border-color: var(--__color);
+      background-color: transparent;
+      color: var(--__color);
+
+      &:hover:not(.w-btn-disabled):not(.w-btn-loading) {
+        background-color: var(--__color);
+        color: var(--w-btn-solid-text-color);
+      }
+    }
+
+    &:hover:not(.w-btn-mode-text):not(.w-btn-mode-line):not(.w-btn-disabled):not(
+        .w-btn-loading
+      ) {
+      background-color: var(--__color-dark-0);
+    }
+  }
+
+  &.w-btn-danger {
+    background-color: var(--w-btn-danger-color);
+    color: var(--w-btn-solid-text-color);
+
+    &.w-btn-mode-text {
+      color: var(--w-btn-danger-color);
+      background-color: transparent;
+
+      &:hover:not(.w-btn-disabled):not(.w-btn-loading) {
+        background-color: var(--w-btn-danger-text-hover-bg);
+      }
+    }
+
+    &.w-btn-mode-line {
+      border-color: var(--w-btn-danger-color);
+      background-color: transparent;
+      color: var(--w-btn-danger-color);
+
+      &:hover:not(.w-btn-disabled):not(.w-btn-loading) {
+        background-color: var(--w-btn-danger-color);
+        color: var(--w-btn-solid-text-color);
+      }
+    }
+
+    &:hover:not(.w-btn-mode-text):not(.w-btn-mode-line):not(.w-btn-disabled):not(
+        .w-btn-loading
+      ) {
+      filter: brightness(var(--w-btn-danger-hover-brightness));
+    }
+
+    &:focus-visible {
+      outline: var(--w-btn-danger-focus-outline);
+    }
+  }
+
+  &.w-btn-gap {
+    &:not(:last-child) {
+      margin-right: var(--__pad-x);
+    }
+  }
+
+  &.w-btn-capsule {
+    border-radius: calc(var(--__size) * var(--w-btn-capsule-radius-ratio));
+  }
+
+  &.w-btn-block {
+    display: flex;
+    width: 100%;
+  }
+
+  &.w-btn-disabled,
+  &.w-btn-loading,
+  &.w-btn-cooling {
+    cursor: not-allowed;
+  }
+
+  &.w-btn-disabled {
+    opacity: var(--w-btn-disabled-opacity);
+  }
+
+  &.w-btn-loading,
+  &.w-btn-cooling {
+    opacity: var(--w-btn-loading-opacity);
+  }
+}
+
+@keyframes w-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 对齐 Vue Transition / React CSSTransition name="w-btn-loading"
+ * 双 class 与 `.w-btn .w-btn-loading-wrap` 同优先级，靠后声明盖住稳态 width */
+.w-btn-loading-enter-active.w-btn-loading-wrap,
+.w-btn-loading-leave-active.w-btn-loading-wrap {
+  transition:
+    width var(--w-transition-quick-time, 0.25s) var(--w-cubic-bezier-quick),
+    opacity var(--w-transition-quick-time, 0.25s) var(--w-cubic-bezier-quick),
+    margin-inline-end var(--w-transition-quick-time, 0.25s)
+      var(--w-cubic-bezier-quick);
+  overflow: hidden;
+}
+
+.w-btn-loading-enter-from.w-btn-loading-wrap,
+.w-btn-loading-leave-to.w-btn-loading-wrap {
+  width: 0;
+  opacity: 0;
+  margin-inline-end: 0;
+}

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

@@ -0,0 +1,68 @@
+.w-btn-group {
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: stretch;
+
+  & .w-btn {
+    margin-right: 0;
+    position: relative;
+
+    &:hover,
+    &:focus-visible {
+      z-index: 1;
+    }
+
+    /* 相邻边重叠 1px，避免双边框；分隔色需同时写在左右，否则会被下一项盖住 */
+    &:not(:first-child) {
+      margin-left: -1px;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  /* 实心：半透明分隔线（左右都设，重叠后仍可见） */
+  & .w-btn-primary:not(.w-btn-mode-text):not(.w-btn-mode-line),
+  & .w-btn-danger:not(.w-btn-mode-text):not(.w-btn-mode-line) {
+    &:not(:last-child) {
+      border-right-color: var(--w-btn-divide-border-color);
+    }
+
+    &:not(:first-child) {
+      border-left-color: var(--w-btn-divide-border-color);
+    }
+  }
+
+  /* 实心 default：灰底分隔线（与 primary 实心同结构） */
+  & .w-btn-default:not(.w-btn-mode-text):not(.w-btn-mode-line) {
+    &:not(:last-child) {
+      border-right-color: var(--w-btn-default-divide-border-color);
+    }
+
+    &:not(:first-child) {
+      border-left-color: var(--w-btn-default-divide-border-color);
+    }
+  }
+
+  /* line default：描边分隔用边框色 */
+  & .w-btn-default.w-btn-mode-line {
+    &:not(:last-child) {
+      border-right-color: var(--w-btn-default-border-color);
+    }
+
+    &:not(:first-child) {
+      border-left-color: var(--w-btn-default-border-color);
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+.w-layer-content.w-cascade-layer {
+  --__size: var(--w-prop-cascade-size, var(--w-cascade-size, var(--w-size)));
+  --__color: var(--w-prop-cascade-color, var(--w-cascade-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-cascade-bg-color,
+    var(--w-cascade-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-cascade-text-color,
+    var(--w-cascade-text-color, var(--w-text-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__gap: calc(var(--__size) * var(--w-cascade-gap-ratio));
+  --__panel-pad: min(5px, 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-list-item-radius-inset))
+  );
+  /* 子件跟本实例有效基；表面由 Layer --__bg/--__text 接线（JS 桥 --w-prop-layer-*） */
+  --w-prop-list-size: var(--__size);
+  --w-prop-list-color: var(--__color);
+  --w-prop-list-bg-color: var(--__bg);
+  --w-prop-list-text-color: var(--__text);
+  --w-list-panel-padding: var(--__panel-pad);
+  --w-list-item-gap: var(--__item-gap);
+
+  display: flex;
+  align-items: flex-start;
+  max-height: var(--w-cascade-layer-max-height, 300px);
+  box-sizing: border-box;
+  font-size: var(--__font);
+  color: var(--__text);
+  background-color: var(--__bg);
+
+  & .w-cascade-list {
+    align-self: stretch;
+    max-height: var(--w-cascade-layer-max-height, 300px);
+    min-width: var(--w-cascade-list-min-width, calc(var(--__size) * var(--w-cascade-list-min-width-ratio)));
+    overflow: auto;
+    box-sizing: border-box;
+    font-size: inherit;
+
+    &:first-child {
+      border-top-left-radius: var(--w-radius);
+      border-bottom-left-radius: var(--w-radius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--w-radius);
+      border-bottom-right-radius: var(--w-radius);
+    }
+
+    &:not(:last-child) {
+      border-right: 1px solid var(--w-color-border);
+    }
+
+    & .w-cascade-list-disabled {
+      color: var(--w-color-disabled);
+      cursor: not-allowed;
+    }
+
+    & .w-cascade-icon {
+      font-size: var(--__font);
+      margin-left: calc(var(--__gap) * 2);
+      transition:
+        color var(--w-transition-quick-time) var(--w-cubic-bezier-quick, ease),
+        left var(--w-transition-time);
+      position: relative;
+      left: 0;
+
+      &.w-cascade-icon-active {
+        color: var(--__color);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+@keyframes w-checkbox-pop {
+  0% {
+    transform: scale(0.55);
+    opacity: 0.55;
+  }
+  85% {
+    transform: scale(1.03);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.w-checkbox {
+  --__size: var(--w-prop-checkbox-size, var(--w-checkbox-size, var(--w-size)));
+  --__color: var(
+    --w-prop-checkbox-color,
+    var(--w-checkbox-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-checkbox-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__pad-x: calc(var(--__size) * var(--w-checkbox-pad-x-ratio));
+  --w-checkbox-icon-gap: calc(var(--__size) * var(--w-checkbox-icon-gap-ratio));
+  --w-checkbox-item-gap: calc(var(--__size) * var(--w-checkbox-item-gap-ratio));
+  --w-icon-font-size: var(--__icon);
+
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  vertical-align: middle;
+  font-size: var(--__font);
+
+  &.w-checkbox-gap:not(:last-child) {
+    margin-right: var(--w-checkbox-item-gap);
+  }
+
+  &.w-checkbox-disabled {
+    cursor: not-allowed;
+  }
+
+  &:active:not(.w-checkbox-disabled) .w-checkbox-icon {
+    transform: scale(0.9);
+  }
+
+  & .w-checkbox-icon {
+    font-weight: normal;
+    font-size: var(--__icon);
+    color: var(--w-form-item-icon-color);
+    transform-origin: center center;
+    transition:
+      color var(--w-transition-quick-time) var(--w-cubic-bezier-quick),
+      transform var(--w-transition-quick-time) var(--w-cubic-bezier-quick);
+
+    &.w-checkbox-icon-gap {
+      margin-right: var(--w-checkbox-icon-gap);
+    }
+
+    &.w-checkbox-icon-checked {
+      color: var(--__color);
+      animation: w-checkbox-pop var(--w-checkbox-pop-duration)
+        var(--w-cubic-bezier);
+    }
+
+    &.w-checkbox-icon-disabled {
+      cursor: not-allowed;
+      opacity: var(--w-checkbox-disabled-opacity);
+
+      &:not(.w-checkbox-icon-checked) {
+        color: var(--w-color-font-4);
+      }
+    }
+
+    &:hover:not(.w-checkbox-icon-disabled) {
+      color: var(--__color);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .w-checkbox {
+    &:active:not(.w-checkbox-disabled) .w-checkbox-icon {
+      transform: none;
+    }
+
+    & .w-checkbox-icon {
+      transition: color var(--w-transition-quick-time);
+
+      &.w-checkbox-icon-checked {
+        animation: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,175 @@
+.w-choose-trigger,
+.w-layer-content.w-choose-layer {
+  --__size: var(--w-prop-choose-size, var(--w-choose-size, var(--w-size)));
+  --__color: var(--w-prop-choose-color, var(--w-choose-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-choose-bg-color,
+    var(--w-choose-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-choose-text-color,
+    var(--w-choose-text-color, var(--w-text-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__color-light-6: color-mix(in srgb, var(--__color) var(--w-choose-color-light-6-mix), transparent);
+}
+
+.w-choose-trigger {
+  --__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));
+  --w-form-item-width: calc(var(--__size) * var(--w-form-item-width-ratio));
+  --w-choose-item-height: var(--__size);
+  --w-choose-icon-font-size: var(--__icon);
+  --w-close-font-size: var(--__icon);
+  --w-icon-font-size: var(--__icon);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: var(--__size);
+  cursor: pointer;
+  user-select: none;
+  padding: 0 var(--__pad-x);
+  outline: 0;
+  box-sizing: border-box;
+  font-size: var(--__font);
+  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-choose-disabled {
+    cursor: not-allowed;
+  }
+
+  & .w-choose-close-btn {
+    font-size: var(--w-choose-icon-font-size);
+  }
+
+  & .w-choose-arrow-btn {
+    pointer-events: none;
+
+    &.w-icon {
+      color: var(--w-form-item-icon-color);
+    }
+  }
+
+  & .w-choose-text,
+  & .w-choose-placeholder {
+    color: var(--w-form-item-placeholder-color);
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    font-size: inherit;
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  & .w-choose-text {
+    color: var(--w-form-item-color);
+  }
+
+  &.w-choose-mode-default {
+    background-color: var(--w-form-item-background-color);
+    border-radius: var(--w-radius);
+    border: 1px solid var(--w-form-item-border-color);
+    width: var(--w-form-item-width);
+
+    &.w-choose-block {
+      display: flex;
+      flex: 1;
+      width: auto;
+    }
+
+    &:hover:not(.w-choose-disabled) {
+      border-color: var(--w-form-item-border-color-hover);
+      background-color: var(--w-form-item-background-color-hover);
+    }
+
+    &.w-choose-spread {
+      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);
+    }
+
+    &.w-choose-isError {
+      border-color: var(--w-error);
+    }
+
+    &.w-choose-disabled {
+      background-color: var(--w-form-item-disabled-background-color);
+      border-color: var(--w-form-item-disabled-border-color);
+
+      & .w-choose-text {
+        color: var(--w-form-item-color);
+      }
+
+      & .w-choose-placeholder {
+        color: var(--w-form-item-disabled-placeholder-color);
+      }
+    }
+  }
+
+  &.w-choose-mode-text {
+    & .w-choose-text {
+      width: auto;
+    }
+  }
+}
+
+.w-layer-content.w-choose-layer {
+  --__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-choose-item-radius-inset))
+  );
+  --w-choose-item-height: var(--__size);
+  --w-choose-panel-padding: var(--__panel-pad);
+  --w-choose-item-gap: var(--__item-gap);
+  /* 子件跟本实例有效基；表面由 Layer --__bg/--__text 接线（JS 桥 --w-prop-layer-*） */
+  --w-prop-list-size: var(--__size);
+  --w-prop-list-color: var(--__color);
+  --w-prop-list-bg-color: var(--__bg);
+  --w-prop-list-text-color: var(--__text);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--__item-gap);
+  /* ChooseItem / Virtual：弹层自带 pad；嵌 List 时由 List 自身 pad（与 Choose2 一致） */
+  padding: var(--__panel-pad);
+  background-color: var(--__bg);
+  color: var(--__text);
+  max-height: var(--w-choose-layer-max-height);
+  overflow: hidden auto;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  border-radius: var(--w-radius);
+  font-size: var(--__font);
+
+  /* 直出 List：去掉弹层 pad，保留 List 自身 panel padding */
+  &:has(> .w-list) {
+    padding: 0;
+  }
+
+  &.w-choose-layer--virtual {
+    overflow: hidden;
+  }
+}
+
+.w-choose-virtual {
+  max-height: var(--w-choose-layer-max-height);
+  overflow: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w-choose-item-gap, var(--__item-gap, 0px));
+}