@will-ui/vue 1.0.0

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

@@ -0,0 +1,67 @@
+.w-switch {
+  /* 三级回退必须在组件根求值；勿在 :root 写 --w-switch-size/color: var(--w-*)，否则会算死 */
+  /* 配色约定：关态 / 禁用 = 黑白灰；品牌色仅开态且可交互时出现 */
+  /* --w-switch-bg-color 历史表示关态轨道色，勿再挂表面三级同名中间层 */
+  /* 阀芯：左=关，右=开 */
+  --__size: var(--w-prop-switch-size, var(--w-switch-size, var(--w-size)));
+  --__color: var(--w-prop-switch-color, var(--w-switch-color, var(--w-color)));
+  --w-switch-height: calc(var(--__size) * var(--w-switch-height-ratio));
+  --w-switch-width: calc(
+    var(--w-switch-height) * var(--w-switch-width-from-height-ratio)
+  );
+  --__width: var(--__switch-width, var(--w-switch-width));
+  --__height: var(--__switch-height, var(--w-switch-height));
+  /* 开态轨道：品牌主色 */
+  --__on-color: var(--__color);
+  /* 关态轨道：中性描边灰 */
+  --__off-color: var(--w-switch-bg-color, var(--w-color-border));
+  /* 阀芯：对比色（默认白），不跟表面核，暗色主题下仍宜浅色 */
+  --__on-valve-color: var(--w-switch-valve-color, var(--w-on-color));
+  --__off-valve-color: var(--w-switch-valve-color, var(--w-on-color));
+  --__valve-inset: var(--w-switch-valve-inset);
+  font-style: normal;
+  display: inline-flex;
+  align-items: center;
+  /* 关：阀芯在左，文案靠右 */
+  justify-content: flex-end;
+  padding: 0 var(--w-switch-pad-x);
+  position: relative;
+  width: var(--__width);
+  height: var(--__height);
+  background-color: var(--__off-color);
+  border-radius: calc(var(--__height) / 2);
+  user-select: none;
+  transition: background-color var(--w-transition-time);
+  cursor: default;
+  color: var(--w-on-color);
+  &::after {
+    /* 控制阀尺寸；关态在左 */
+    --__valve-size: calc(var(--__height) - var(--__valve-inset) * 2);
+    content: '';
+    position: absolute;
+    width: var(--__valve-size);
+    height: var(--__valve-size);
+    border-radius: 100%;
+    left: var(--__valve-inset);
+    top: calc((var(--__height) - var(--__valve-size)) / 2);
+    background-color: var(--__off-valve-color);
+    box-shadow: var(--w-switch-valve-box-shadow);
+    transition: left var(--w-transition-time);
+  }
+  &.w-switch--on {
+    /* 开：阀芯在右，文案靠左 */
+    background-color: var(--__on-color);
+    justify-content: flex-start;
+    &::after {
+      border-color: var(--__on-color);
+      left: calc(var(--__width) - var(--__valve-size) - var(--__valve-inset));
+      background-color: var(--__on-valve-color);
+    }
+  }
+  &.w-switch--disabled {
+    /* 禁用：去掉品牌色（含 onColor 内联），开/关只靠阀芯位置区分 */
+    filter: grayscale(1);
+    opacity: var(--w-switch-disabled-opacity);
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,215 @@
+.w-tab-wrapper {
+  --__size: var(--w-prop-tab-size, var(--w-tab-size, var(--w-size)));
+  --__color: var(--w-prop-tab-color, var(--w-tab-color, var(--w-color)));
+  --__bg: var(--w-prop-tab-bg-color, var(--w-tab-bg-color, var(--w-bg-color)));
+  --__text: var(
+    --w-prop-tab-text-color,
+    var(--w-tab-text-color, var(--w-text-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-tab-font-ratio)));
+  --__pad-y: calc(var(--__size) * var(--w-tab-pad-y-ratio));
+  --__pad-x: calc(var(--__size) * var(--w-tab-pad-x-ratio));
+  --__item-gap: calc(var(--__size) * var(--w-tab-item-gap-ratio));
+  --__close: calc(var(--__size) * var(--w-tab-close-ratio));
+  --__panel-gap: calc(var(--__size) * var(--w-tab-panel-gap-ratio));
+  --__panel-pad: calc(var(--__size) * var(--w-tab-panel-pad-ratio));
+  --__card-gap: calc(var(--__size) * var(--w-tab-card-gap-ratio));
+  --w-color-font-1: var(--__text);
+  --w-color-font-2: color-mix(in srgb, var(--__text) var(--w-tab-font-2-mix), var(--__bg));
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  &.w-tab-wrapper--vertical {
+    flex-direction: row;
+    align-items: stretch;
+  }
+}
+
+.w-tab-panel {
+  min-width: 0;
+  padding-top: var(--__panel-gap);
+  color: var(--__text);
+}
+
+.w-tab-wrapper--vertical .w-tab-panel {
+  flex: 1;
+  padding-top: 0;
+  padding-left: var(--__panel-pad);
+}
+
+.w-tab {
+  --__size: var(--w-prop-tab-size, var(--w-tab-size, var(--w-size)));
+  --__color: var(--w-prop-tab-color, var(--w-tab-color, var(--w-color)));
+  --__bg: var(--w-prop-tab-bg-color, var(--w-tab-bg-color, var(--w-bg-color)));
+  --__text: var(
+    --w-prop-tab-text-color,
+    var(--w-tab-text-color, var(--w-text-color))
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-tab-font-ratio)));
+  --__pad-y: calc(var(--__size) * var(--w-tab-pad-y-ratio));
+  --__pad-x: calc(var(--__size) * var(--w-tab-pad-x-ratio));
+  --__item-gap: calc(var(--__size) * var(--w-tab-item-gap-ratio));
+  --__close: calc(var(--__size) * var(--w-tab-close-ratio));
+  --__card-gap: calc(var(--__size) * var(--w-tab-card-gap-ratio));
+  --w-color-font-2: color-mix(in srgb, var(--__text) var(--w-tab-font-2-mix), var(--__bg));
+
+  display: flex;
+  position: relative;
+  line-height: 1;
+  align-items: stretch;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &.w-tab--horizontal {
+    flex-direction: row;
+  }
+
+  &.w-tab--vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  & .w-tab-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--__item-gap);
+    padding: var(--__pad-y) var(--__pad-x);
+    cursor: pointer;
+    font-size: var(--__font);
+    transition: var(--w-transition-time);
+    color: var(--w-color-font-2);
+    outline: none;
+    user-select: none;
+    position: relative;
+
+    &:hover,
+    &.w-tab-item-active {
+      color: var(--__color);
+    }
+
+    &:focus-visible {
+      color: var(--__color);
+    }
+
+    &.w-tab-item-disabled {
+      cursor: not-allowed;
+      opacity: var(--w-tab-disabled-opacity);
+      color: var(--w-color-font-3, var(--w-color-font-2));
+
+      &:hover {
+        color: var(--w-color-font-3, var(--w-color-font-2));
+      }
+    }
+  }
+
+  & .w-tab-item-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--__close);
+    height: var(--__close);
+    margin-left: calc(var(--__size) * var(--w-tab-close-margin-ratio));
+    border-radius: 50%;
+    font-size: var(--__font);
+    line-height: 1;
+    color: var(--w-color-font-3, var(--w-color-font-2));
+    transition: var(--w-transition-time);
+
+    &:hover {
+      color: var(--__color);
+      background: color-mix(in srgb, var(--__color) var(--w-tab-color-light-8-mix), transparent);
+    }
+  }
+
+  & .w-tab-line {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: var(--__color);
+    transition: transform var(--w-transition-time);
+    will-change: transform;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  /* card */
+  &.w-tab--card {
+    gap: var(--__card-gap);
+
+    & .w-tab-item {
+      border: 1px solid transparent;
+      border-radius: calc(var(--w-radius) / 2) calc(var(--w-radius) / 2) 0 0;
+      background: transparent;
+
+      &.w-tab-item-active {
+        border-color: var(--w-color-border, #e5e7eb);
+        border-bottom-color: transparent;
+        background: var(--__bg);
+      }
+    }
+  }
+
+  &.w-tab--card.w-tab--vertical .w-tab-item {
+    border-radius: calc(var(--w-radius) / 2) 0 0 calc(var(--w-radius) / 2);
+
+    &.w-tab-item-active {
+      border-color: var(--w-color-border, #e5e7eb);
+      border-right-color: transparent;
+    }
+  }
+
+  /* border-card */
+  &.w-tab--border-card {
+    border: 1px solid var(--w-color-border, #e5e7eb);
+    border-bottom: none;
+    background: var(--__bg);
+    border-radius: calc(var(--w-radius) / 2) calc(var(--w-radius) / 2) 0 0;
+
+    & .w-tab-item {
+      border-right: 1px solid var(--w-color-border, #e5e7eb);
+
+      &:last-child {
+        border-right: none;
+      }
+
+      &.w-tab-item-active {
+        background: var(--__bg);
+        color: var(--__color);
+      }
+    }
+  }
+
+  &.w-tab--border-card.w-tab--vertical {
+    border-bottom: 1px solid var(--w-color-border, #e5e7eb);
+    border-right: none;
+    border-radius: calc(var(--w-radius) / 2) 0 0 calc(var(--w-radius) / 2);
+
+    & .w-tab-item {
+      border-right: none;
+      border-bottom: 1px solid var(--w-color-border, #e5e7eb);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.w-tab-wrapper--border-card {
+  border: 1px solid var(--w-color-border, #e5e7eb);
+  border-radius: calc(var(--w-radius) / 2);
+  overflow: hidden;
+
+  & .w-tab--border-card {
+    border: none;
+    border-radius: 0;
+  }
+
+  & .w-tab-panel {
+    padding: var(--__panel-pad);
+    background: var(--__bg);
+  }
+}

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

@@ -0,0 +1,109 @@
+.w-textarea {
+  --__size: var(--w-prop-textarea-size, var(--w-textarea-size, var(--w-size)));
+  --__color: var(
+    --w-prop-textarea-color,
+    var(--w-textarea-color, var(--w-color))
+  );
+  --__bg: var(
+    --w-prop-textarea-bg-color,
+    var(
+      --w-textarea-bg-color,
+      var(--w-form-item-background-color, var(--w-bg-color))
+    )
+  );
+  --__text: var(
+    --w-prop-textarea-text-color,
+    var(--w-textarea-text-color, var(--w-form-item-color, var(--w-text-color)))
+  );
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-textarea-font-ratio))
+  );
+  --__pad-x: calc(var(--__size) * var(--w-textarea-pad-x-ratio));
+  --__pad-y: calc(var(--__size) * var(--w-textarea-pad-y-ratio));
+  --__radius: var(--w-textarea-radius, var(--w-radius));
+  --__line-height: var(--w-textarea-line-height);
+
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: var(--w-textarea-border);
+  border-radius: var(--__radius);
+  background-color: var(--__bg);
+  color: var(--__text);
+  font-size: var(--__font);
+  line-height: var(--__line-height);
+  transition: var(--w-textarea-transition);
+
+  &:hover:not(.w-textarea--disabled) {
+    border-color: var(--w-textarea-border-color-hover);
+  }
+
+  &:focus-within:not(.w-textarea--disabled) {
+    border-color: var(--__color);
+    background-color: var(
+      --w-form-item-background-color-focus,
+      var(--__bg)
+    );
+    box-shadow: var(--w-textarea-focus-ring);
+  }
+
+  &.w-textarea--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-textarea--block {
+    width: 100%;
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.w-textarea-ghost,
+.w-textarea-field {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--__pad-y) var(--__pad-x);
+  border: 0;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.w-textarea-ghost {
+  visibility: hidden;
+  pointer-events: none;
+  min-height: calc(var(--__font) * var(--__line-height) + var(--__pad-y) * 2);
+}
+
+.w-textarea-field {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  outline: none;
+  overflow: hidden;
+  color: inherit;
+  background-color: transparent;
+  border-radius: inherit;
+  cursor: inherit;
+
+  &::placeholder {
+    color: var(--w-form-item-placeholder-color);
+  }
+
+  &:disabled::placeholder {
+    color: var(--w-form-item-disabled-placeholder-color);
+  }
+}

package/dist/theme/tokens/components/time/dial.css

@@ -0,0 +1,123 @@
+.w-time-dial {
+  --__size: var(
+    --w-prop-time-picker-size,
+    var(--w-time-picker-size, var(--w-size))
+  );
+  --__color: var(
+    --w-prop-time-picker-color,
+    var(--w-time-picker-color, var(--w-color))
+  );
+  --__bg: var(
+    --w-prop-time-picker-bg-color,
+    var(--w-time-picker-bg-color, var(--w-bg-color))
+  );
+  --__color-light-6: color-mix(in srgb, var(--__color) var(--w-time-dial-color-light-6-mix), var(--__bg));
+  --__color-light-8: color-mix(in srgb, var(--__color) var(--w-time-dial-color-light-8-mix), var(--__bg));
+  /* 优先跟本节点 / 父级已按 --__size 重算的 token；再兜底本地公式 */
+  --__dial-item-w: var(--w-time-dial-item-width, calc(var(--__size) * var(--w-time-dial-item-width-ratio)));
+  --__dial-col-gap: var(--w-time-dial-col-gap, calc(var(--__size) * var(--w-time-dial-col-gap-ratio)));
+  --__dial-btn-size: var(--w-time-dial-btn-size, calc(var(--__size) * var(--w-time-dial-btn-size-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    var(--__dial-btn-size),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-time-font-ratio)));
+
+  width: 100%;
+  height: 100%;
+  font-size: var(--__font);
+
+  & .w-time-dial-title,
+  & .w-time-dial-btn {
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--__dial-col-gap);
+    height: var(--__size);
+
+    & > span,
+    & > i,
+    & > .w-icon {
+      flex: 0 0 var(--__dial-item-w);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      box-sizing: border-box;
+    }
+  }
+
+  & .w-time-dial-btn {
+    height: var(--__dial-btn-size);
+
+    & > i,
+    & > .w-icon {
+      cursor: pointer;
+      font-size: var(--__icon);
+
+      &:hover {
+        color: var(--w-color-font-2);
+      }
+    }
+  }
+
+  & .w-time-dial-list {
+    display: flex;
+    height: calc(100% - var(--__size) - var(--__dial-btn-size) * 2);
+    justify-content: center;
+    gap: var(--__dial-col-gap);
+  }
+
+  & .w-dial-item {
+    flex: 0 0 var(--__dial-item-w);
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  & .w-dial-toggle-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  & .w-dial-item-item {
+    height: calc(100% / 6);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    transition: var(--w-transition-time);
+    border-radius: var(--w-radius);
+    color: var(--w-color-font-2);
+    border: 1px solid transparent;
+    box-sizing: border-box;
+
+    &.w-dial-item-readonly {
+      color: var(--w-color-font-4);
+    }
+
+    &:hover {
+      &:not(.w-dial-item-readonly) {
+        cursor: pointer;
+      }
+
+      &:not(.w-dial-item-selected):not(.w-dial-item-readonly) {
+        background-color: var(--w-bg-color);
+        color: var(--w-color-font-1);
+      }
+    }
+
+    &.w-dial-item-selected {
+      background-color: var(--__color-light-8);
+      border: 1px solid var(--__color-light-6);
+      color: var(--__color);
+      font-weight: bold;
+    }
+  }
+}

package/dist/theme/tokens/components/time/index.css

@@ -0,0 +1,29 @@
+/* 弹层面板：双类盖过 .w-layer-content 的 --__size */
+.w-layer-content.w-time-picker {
+  --__size: var(
+    --w-prop-time-picker-size,
+    var(--w-time-picker-size, var(--w-size))
+  );
+  --__color: var(
+    --w-prop-time-picker-color,
+    var(--w-time-picker-color, var(--w-color))
+  );
+  /* 派生全部由 --__size 重算，保证实例 prop 生效 */
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-time-font-ratio)));
+  --w-time-dial-item-width: calc(var(--__size) * var(--w-time-dial-item-width-ratio));
+  --w-time-dial-col-gap: calc(var(--__size) * var(--w-time-dial-col-gap-ratio));
+  --w-time-picker-panel-padding: calc(var(--__size) * var(--w-time-picker-panel-padding-ratio));
+  --w-time-dial-btn-size: calc(var(--__size) * var(--w-time-dial-btn-size-ratio));
+  --w-time-picker-panel-width: calc(
+    var(--w-time-dial-item-width) * 3 + var(--w-time-dial-col-gap) * 2 +
+      var(--w-time-picker-panel-padding) * 2
+  );
+  --w-time-picker-panel-height: calc(var(--__size) * var(--w-time-picker-panel-height-ratio));
+
+  padding: var(--w-time-picker-panel-padding);
+  padding-top: calc(var(--__size) * 2 / 15);
+  width: var(--w-time-picker-panel-width);
+  height: var(--w-time-picker-panel-height);
+  font-size: var(--__font);
+  box-sizing: border-box;
+}

package/dist/theme/tokens/components/toggle/index.css

@@ -0,0 +1,14 @@
+@import './scale.css';
+@import './translate.css';
+.w-toggle {
+  position: relative;
+
+  & .w-toggle-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform-origin: var(--__origin-x, center) var(--__origin-y, center);
+  }
+}

package/dist/theme/tokens/components/toggle/scale.css

@@ -0,0 +1,34 @@
+.w-toggle-scale-enter-active,
+.w-toggle-scale-leave-active {
+  transition: opacity var(--w-transition-slow-time) var(--w-cubic-bezier),
+    transform var(--w-transition-slow-time) var(--w-cubic-bezier);
+}
+
+.w-toggle-scale-prev-leave-active {
+  transition: opacity var(--w-transition-slow-time) var(--w-cubic-bezier),
+    transform var(--w-transition-slow-time) var(--w-cubic-bezier);
+}
+
+.w-toggle-scale-prev-enter-active {
+  transition: opacity var(--w-transition-slow-time) var(--w-cubic-bezier-quick),
+    transform var(--w-transition-slow-time) var(--w-cubic-bezier-quick);
+}
+.w-toggle-scale-enter-from {
+  opacity: 0;
+  transform: scale(var(--__scale-from, 0), var(--__scale-from, 0));
+}
+
+.w-toggle-scale-leave-to {
+  opacity: 0;
+  transform: scale(var(--__scale-to, 2), var(--__scale-to, 2));
+}
+
+.w-toggle-scale-prev-enter-from {
+  opacity: 0;
+  transform: scale(var(--__scale-to, 2), var(--__scale-to, 2));
+}
+
+.w-toggle-scale-prev-leave-to {
+  opacity: 0;
+  transform: scale(var(--__scale-from, 0), var(--__scale-from, 0));
+}

package/dist/theme/tokens/components/toggle/translate.css

@@ -0,0 +1,41 @@
+.w-toggle-translate-enter-active,
+.w-toggle-translate-leave-active,
+.w-toggle-translate-prev-enter-active,
+.w-toggle-translate-prev-leave-active,
+.w-toggle-translate-y-enter-active,
+.w-toggle-translate-y-leave-active,
+.w-toggle-translate-y-prev-enter-active,
+.w-toggle-translate-y-prev-leave-active {
+  transition: transform var(--w-transition-slow-time) var(--w-cubic-bezier);
+}
+.w-toggle-translate-enter-from {
+  transform: translate(100%, 0);
+}
+
+.w-toggle-translate-leave-to {
+  transform: translate(-100%, 0);
+}
+
+.w-toggle-translate-prev-enter-from {
+  transform: translate(-100%, 0);
+}
+
+.w-toggle-translate-prev-leave-to {
+  transform: translate(100%, 0);
+}
+
+.w-toggle-translate-y-enter-from {
+  transform: translate(0, 100%);
+}
+
+.w-toggle-translate-y-leave-to {
+  transform: translate(0, -100%);
+}
+
+.w-toggle-translate-y-prev-enter-from {
+  transform: translate(0, -100%);
+}
+
+.w-toggle-translate-y-prev-leave-to {
+  transform: translate(0, 100%);
+}