@will-ui/vue 1.0.0

package/dist/theme/tokens/components/date/days.css

@@ -0,0 +1,79 @@
+.w-days {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+}
+
+.w-date-item {
+  flex: 0 0 auto;
+  width: calc(100% / 7);
+  height: calc(100% / 6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  box-sizing: border-box;
+  color: var(--__text, var(--w-color-font-1));
+  user-select: none;
+  border: 1px solid transparent;
+
+  &.w-date-item-not-current {
+    color: var(--w-color-font-4);
+  }
+
+  &.w-date-item-circle,
+  &.w-date-item-day {
+    border-radius: 50%;
+  }
+
+  &.w-date-item-day {
+    position: relative;
+    cursor: pointer;
+    transition:
+      color var(--w-transition-time),
+      background-color var(--w-transition-time),
+      border-color var(--w-transition-time);
+
+    &:hover:not(.w-date-item-selected):not(.w-date-item-disabled) {
+      background-color: var(--__hover-bg);
+      color: var(--__color);
+    }
+
+    &.w-date-item-today {
+      border-color: var(--__color-light-6);
+      color: var(--__color);
+
+      & .w-date-item-today-cur {
+        position: absolute;
+        right: var(--w-date-picker-today-dot-right);
+        bottom: var(--w-date-picker-today-dot-bottom);
+        width: var(--w-date-picker-dot-size);
+        height: var(--w-date-picker-dot-size);
+        background-color: var(--__color);
+        border-radius: 50%;
+        pointer-events: none;
+      }
+    }
+
+    &.w-date-item-selected {
+      border-color: var(--__color-light-6);
+      background-color: var(--__color-light-8);
+      color: var(--__color);
+      font-weight: 600;
+
+      &:hover:not(.w-date-item-disabled) {
+        background-color: var(--__color-light-7);
+      }
+    }
+
+    &.w-date-item-disabled {
+      color: var(--w-color-disabled);
+      cursor: not-allowed;
+    }
+
+    &:active:not(.w-date-item-disabled) {
+      background-color: var(--__color-light-7);
+      color: var(--__color);
+    }
+  }
+}

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

@@ -0,0 +1,249 @@
+@import './days.css';
+@import './months.css';
+
+/* 弹层面板：双类盖过 .w-layer-content 的 --__size（Layer 样式常后加载） */
+.w-layer-content.w-date-picker {
+  /* 有效尺度 / 主色 / 表面：prop > 组件 token > 全局；派生必须在此用 --__* 重绑 */
+  --__size: var(
+    --w-prop-date-picker-size,
+    var(--w-date-picker-size, var(--w-size))
+  );
+  --__color: var(
+    --w-prop-date-picker-color,
+    var(--w-date-picker-color, var(--w-color))
+  );
+  --__bg: var(
+    --w-prop-date-picker-bg-color,
+    var(--w-date-picker-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-date-picker-text-color,
+    var(--w-date-picker-text-color, var(--w-text-color))
+  );
+  --__color-light-2: color-mix(
+    in srgb,
+    var(--__color) var(--w-date-color-light-2-mix),
+    var(--__bg)
+  );
+  --__color-light-6: color-mix(
+    in srgb,
+    var(--__color) var(--w-date-color-light-6-mix),
+    var(--__bg)
+  );
+  --__color-light-7: color-mix(
+    in srgb,
+    var(--__color) var(--w-date-color-light-7-mix),
+    var(--__bg)
+  );
+  --__color-light-8: color-mix(
+    in srgb,
+    var(--__color) var(--w-date-color-light-8-mix),
+    var(--__bg)
+  );
+  --__color-light-9: color-mix(
+    in srgb,
+    var(--__color) var(--w-date-color-light-9-mix),
+    var(--__bg)
+  );
+  /* 中性 hover 底，区别于选中的品牌浅染（同 List） */
+  --__hover-bg: color-mix(
+    in srgb,
+    var(--__text) var(--w-date-hover-bg-mix),
+    var(--__bg)
+  );
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-date-font-ratio)));
+  --__font-2: max(var(--w-font-size-min), calc(var(--__size) * var(--w-date-font-2-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-ctrl-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --w-icon-font-size: var(--__icon);
+  /* 子件 Btn（时间确认等）跟本实例有效核 */
+  --w-prop-btn-size: var(--__size);
+  --w-prop-btn-color: var(--__color);
+  --w-prop-btn-bg-color: var(--__bg);
+  --w-prop-btn-text-color: var(--__text);
+  --w-date-picker-panel-width: calc(
+    var(--__size) * var(--w-date-panel-width-ratio)
+  );
+  --w-date-picker-panel-height: var(--w-date-picker-panel-width);
+  --w-date-picker-gap: calc(var(--__size) * var(--w-date-gap-ratio));
+  --w-date-picker-pad-x: calc(var(--__size) * var(--w-date-pad-x-ratio));
+  --w-date-picker-quick-gap: calc(
+    var(--__size) * var(--w-date-quick-gap-ratio)
+  );
+  --w-date-picker-quick-item-padding-y: calc(
+    var(--__size) * var(--w-date-quick-item-pad-y-ratio)
+  );
+  --w-date-picker-range-gap: calc(var(--__size) * var(--w-date-range-gap-ratio));
+  --w-date-picker-dot-size: calc(var(--__size) * var(--w-date-dot-size-ratio));
+  --w-date-picker-today-dot-right: var(--w-date-picker-dot-size);
+  --w-date-picker-today-dot-bottom: var(--w-date-picker-quick-item-padding-y);
+  --w-date-picker-month-dot-right: var(--w-date-picker-pad-x);
+  --w-date-picker-month-dot-bottom: calc(
+    var(--__size) * var(--w-date-month-dot-bottom-ratio)
+  );
+  --__width: calc(
+    var(--w-date-picker-panel-width) - var(--w-date-picker-gap) * 2
+  );
+  /* 日视图：减去顶栏；月/年视图再加回一周标题的高度 */
+  --__height: calc(
+    var(--w-date-picker-panel-height) - var(--w-date-picker-gap) * 2 -
+      var(--__size)
+  );
+
+  padding: var(--w-date-picker-gap);
+  font-size: var(--__font);
+  color: var(--__text);
+  box-sizing: border-box;
+
+  & .w-date-days {
+    height: var(--__height);
+    width: var(--__width);
+  }
+
+  & .w-date-months {
+    width: var(--__width);
+    height: calc(var(--__height) + var(--__size));
+  }
+
+  & .w-date-control-bar {
+    height: var(--__size);
+    display: flex;
+    align-items: stretch;
+
+    & .w-date-placeholder {
+      display: flex;
+      align-items: center;
+      margin-left: var(--w-date-picker-gap);
+      color: var(--w-color-font-4);
+    }
+
+    & .w-date-control-bar-disabled,
+    & .w-date-control-bar-y-m,
+    & .w-date-control-bar-icon {
+      user-select: none;
+      display: flex;
+      align-items: center;
+      flex: 1;
+      font-size: var(--__font);
+      padding: 0 var(--w-date-picker-pad-x);
+    }
+
+    & .w-date-control-bar-y-m,
+    & .w-date-control-bar-icon {
+      border-radius: var(--w-radius);
+      cursor: pointer;
+      color: var(--w-color-font-3);
+      transition:
+        color var(--w-transition-time),
+        background-color var(--w-transition-time);
+
+      &:hover {
+        color: var(--__color);
+        background-color: var(--__hover-bg);
+      }
+
+      &:active {
+        color: var(--__color);
+        background-color: var(--__color-light-8);
+      }
+    }
+
+    & .w-date-control-bar-icon {
+      flex: 0 0 var(--__size);
+      justify-content: center;
+      padding: 0;
+      font-size: var(--__icon);
+      color: var(--w-color-font-2);
+
+      &:first-of-type {
+        margin-left: var(--w-date-picker-gap);
+      }
+    }
+  }
+
+  & .w-week-title {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: var(--__size);
+
+    & .w-week-title-item {
+      flex: 1;
+      text-align: center;
+      font-weight: 500;
+      color: var(--w-color-font-3);
+      user-select: none;
+    }
+  }
+
+  & .w-date-quick {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--w-date-picker-quick-gap);
+    border-bottom: 1px solid var(--w-color-border);
+    padding-bottom: var(--w-date-picker-gap);
+    width: var(--__width);
+
+    & .w-date-quick-item {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--w-date-picker-quick-item-padding-y)
+        var(--w-date-picker-quick-gap);
+      color: var(--w-color-font-2);
+      border-radius: var(--w-radius);
+      cursor: pointer;
+      border: 1px solid transparent;
+      background-color: color-mix(in srgb, var(--__text) 4%, var(--__bg));
+      transition:
+        color var(--w-transition-time),
+        background-color var(--w-transition-time),
+        border-color var(--w-transition-time);
+      user-select: none;
+
+      &:hover:not(.w-date-quick-item-active) {
+        border-color: color-mix(in srgb, var(--__color) 22%, var(--__bg));
+        background-color: var(--__hover-bg);
+        color: var(--__color);
+      }
+
+      &.w-date-quick-item-active {
+        border-color: var(--__color-light-7);
+        background-color: var(--__color-light-8);
+        color: var(--__color);
+
+        &:hover {
+          background-color: var(--__color-light-7);
+        }
+      }
+
+      &:active {
+        background-color: var(--__color-light-7);
+        border-color: var(--__color-light-6);
+        color: var(--__color);
+      }
+    }
+  }
+
+  &.w-date-picker-range {
+    display: flex;
+    flex-direction: column;
+
+    & .w-date-quick {
+      width: auto;
+      align-self: stretch;
+    }
+
+    & .w-date-start-end {
+      display: flex;
+    }
+
+    & .w-date-range-gap {
+      position: relative;
+      margin: 0 var(--w-date-picker-range-gap);
+      border-left: 1px solid var(--w-color-border);
+    }
+  }
+}

package/dist/theme/tokens/components/date/months.css

@@ -0,0 +1,68 @@
+.w-months {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  align-content: space-evenly;
+}
+
+.w-months-item {
+  width: calc(100% / 4);
+  height: calc(100% / 4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  box-sizing: border-box;
+  color: var(--w-color-font-2);
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  transition:
+    color var(--w-transition-time),
+    background-color var(--w-transition-time),
+    border-color var(--w-transition-time);
+  cursor: pointer;
+  position: relative;
+
+  &:hover:not(.w-months-item-selected):not(.w-months-item-disabled) {
+    background-color: var(--__hover-bg);
+    color: var(--__color);
+  }
+
+  &.w-months-item-current {
+    color: var(--__color);
+    border-color: var(--__color-light-6);
+
+    & .w-months-item-cur {
+      position: absolute;
+      right: var(--w-date-picker-month-dot-right);
+      bottom: var(--w-date-picker-month-dot-bottom);
+      width: var(--w-date-picker-dot-size);
+      height: var(--w-date-picker-dot-size);
+      background-color: var(--__color);
+      border-radius: 50%;
+      pointer-events: none;
+    }
+  }
+
+  &.w-months-item-selected {
+    border-color: var(--__color-light-6);
+    background-color: var(--__color-light-8);
+    color: var(--__color);
+    font-weight: 600;
+
+    &:hover:not(.w-months-item-disabled) {
+      background-color: var(--__color-light-7);
+    }
+  }
+
+  &.w-months-item-disabled {
+    color: var(--w-color-disabled);
+    cursor: not-allowed;
+  }
+
+  &:active:not(.w-months-item-disabled) {
+    background-color: var(--__color-light-7);
+    color: var(--__color);
+  }
+}

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

@@ -0,0 +1,189 @@
+.w-drawer-transition--right-enter-active,
+.w-drawer-transition--left-enter-active,
+.w-drawer-transition--top-enter-active,
+.w-drawer-transition--bottom-enter-active {
+  transition:
+    transform var(--w-transition-slow-time) var(--w-cubic-bezier-quick),
+    opacity var(--w-transition-slow-time) var(--w-cubic-bezier-quick);
+}
+
+.w-drawer-transition--right-leave-active,
+.w-drawer-transition--left-leave-active,
+.w-drawer-transition--top-leave-active,
+.w-drawer-transition--bottom-leave-active {
+  transition:
+    transform var(--w-transition-time) var(--w-cubic-bezier),
+    opacity var(--w-transition-time) var(--w-cubic-bezier);
+}
+
+.w-drawer-transition--right-enter-from,
+.w-drawer-transition--right-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.w-drawer-transition--left-enter-from,
+.w-drawer-transition--left-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.w-drawer-transition--top-enter-from,
+.w-drawer-transition--top-leave-to {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+.w-drawer-transition--bottom-enter-from,
+.w-drawer-transition--bottom-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.w-drawer-transition--right-enter-to,
+.w-drawer-transition--left-enter-to,
+.w-drawer-transition--top-enter-to,
+.w-drawer-transition--bottom-enter-to,
+.w-drawer-transition--right-leave-from,
+.w-drawer-transition--left-leave-from,
+.w-drawer-transition--top-leave-from,
+.w-drawer-transition--bottom-leave-from {
+  transform: none;
+  opacity: 1;
+  filter: none;
+}
+
+.w-drawer {
+  --__size: var(--w-prop-drawer-size, var(--w-drawer-size, var(--w-size)));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-drawer-font-ratio)));
+  --__title-font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-drawer-title-font-ratio)));
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-drawer-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --__bg: var(
+    --w-prop-drawer-bg-color,
+    var(--w-drawer-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-drawer-text-color,
+    var(--w-drawer-text-color, var(--w-text-color))
+  );
+  --w-drawer-header-padding: calc(var(--__size) * var(--w-drawer-header-pad-y-ratio))
+    calc(var(--__size) * var(--w-drawer-header-pad-x-ratio));
+  --w-drawer-max-size: calc(var(--__size) * var(--w-drawer-max-size-ratio));
+  --w-close-font-size: var(--__icon);
+  /* 子件 Loading 跟本实例有效尺度 */
+  --w-prop-loading-size: var(--__size);
+  position: fixed;
+  background-color: var(--__bg);
+  color: var(--__text);
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  font-size: var(--__font);
+
+  &.w-drawer--center {
+    position: relative;
+    overflow: auto;
+    box-shadow: var(--w-drawer-box-shadow);
+  }
+
+  &.w-drawer--center.w-scale-from-trigger.w-scale-enter-active,
+  &.w-drawer--center.w-scale-from-trigger.w-scale-leave-active {
+    overflow: hidden;
+  }
+
+  &.w-scale-from-trigger.w-scale-enter-active .w-drawer-body,
+  &.w-scale-from-trigger.w-scale-leave-active .w-drawer-body {
+    overflow: hidden;
+  }
+
+  &.w-drawer--right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--w-drawer-width, auto);
+    overflow: auto hidden;
+    box-shadow: var(--w-drawer-shadow-right);
+  }
+
+  &.w-drawer--left {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--w-drawer-width, auto);
+    overflow: auto hidden;
+    box-shadow: var(--w-drawer-shadow-left);
+  }
+
+  &.w-drawer--top {
+    right: 0;
+    top: 0;
+    left: 0;
+    height: var(--w-drawer-height, auto);
+    overflow: hidden auto;
+    box-shadow: var(--w-drawer-shadow-top);
+  }
+
+  &.w-drawer--bottom {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--w-drawer-height, auto);
+    overflow: hidden auto;
+    box-shadow: var(--w-drawer-shadow-bottom);
+  }
+
+  & .w-drawer-header {
+    flex-shrink: 0;
+    font-size: var(--__title-font);
+  }
+
+  & .w-drawer-title {
+    padding: var(--w-drawer-header-padding);
+    font-size: inherit;
+    font-weight: 700;
+  }
+
+  & .w-drawer-footer {
+    flex-shrink: 0;
+  }
+
+  & .w-drawer-body {
+    overflow: auto;
+    min-height: 0;
+    flex: 1;
+  }
+
+  & .w-drawer-loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--w-fade-white-background-color);
+  }
+}
+
+.w-drawer-center-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-radius: var(--w-radius);
+
+  &:has(.w-scale-from-trigger.w-scale-enter-active),
+  &:has(.w-scale-from-trigger.w-scale-leave-active) {
+    overflow: hidden;
+  }
+
+  & .w-drawer.w-drawer--center {
+    border-radius: var(--w-radius);
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * .w-ellipsis：单行截断工具（Trigger 等复用）
+ * .w-ellipsis-host：Ellipsis 给 Layer 的 trigger 外壳（避免 cloneVNode 盖掉测量 ref）
+ * .w-ellipsis--comp：Ellipsis 测量/截断根（尺度 / 字号 / 多行）
+ */
+.w-ellipsis-host {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.w-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.w-ellipsis.w-ellipsis--comp {
+  --__size: var(--w-prop-ellipsis-size, var(--w-ellipsis-size, var(--w-size)));
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-ellipsis-font-ratio))
+  );
+  --__lines: var(--w-prop-ellipsis-lines, 1);
+  /* 桥接内部 Tooltip（portal 另在 layerStyle 写 --w-prop-tooltip-size） */
+  --w-prop-tooltip-size: var(--__size);
+  font-size: var(--__font);
+}
+
+.w-ellipsis.w-ellipsis--comp.w-ellipsis--multi {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--__lines);
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  & * {
+    white-space: inherit !important;
+    word-break: inherit !important;
+    overflow: inherit !important;
+    text-overflow: inherit !important;
+  }
+}

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

@@ -0,0 +1,24 @@
+.w-empty {
+  --__size: var(--w-prop-empty-size, var(--w-empty-size, var(--w-size)));
+  /* 有 size prop 时图标=实例核；未设时按全局核比例派生（对齐原 calc(--w-size * 2/3)） */
+  --w-empty-icon-size: var(--w-prop-empty-size, calc(var(--__size) * var(--w-empty-icon-ratio)));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-empty-font-ratio)));
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--__font);
+
+  & .w-empty-text {
+    color: var(--w-empty-text-color);
+    white-space: nowrap;
+    margin-top: var(--w-empty-text-gap);
+  }
+
+  & .w-empty-icon {
+    display: inline-flex;
+    font-size: var(--w-empty-icon-size);
+    color: var(--w-empty-icon-color);
+  }
+}

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

@@ -0,0 +1,51 @@
+.w-equalizer {
+  --__size: var(
+    --w-prop-equalizer-size,
+    var(--w-equalizer-size, calc(var(--w-size) * 0.3))
+  );
+  --__color: var(
+    --w-prop-equalizer-color,
+    var(--w-equalizer-color, currentColor)
+  );
+  --w-equalizer-height: var(--__size);
+  --w-equalizer-bar-width: max(2px, calc(var(--__size) / 6));
+  --w-equalizer-gap: max(2px, calc(var(--__size) / 6));
+
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: var(--w-equalizer-gap);
+  height: var(--w-equalizer-height);
+  color: var(--__color);
+
+  & i {
+    display: block;
+    width: var(--w-equalizer-bar-width);
+    border-radius: 1px;
+    background: currentColor;
+    height: 40%;
+    transform-origin: center bottom;
+
+    &:nth-child(3n + 2) {
+      height: 85%;
+    }
+
+    &:nth-child(3n + 3) {
+      height: 55%;
+    }
+  }
+
+  &.w-equalizer--active i {
+    animation: w-equalizer 0.9s ease-in-out infinite;
+  }
+}
+
+@keyframes w-equalizer {
+  0%,
+  100% {
+    transform: scaleY(0.45);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}

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

@@ -0,0 +1,4 @@
+.w-fallback {
+  padding: 20px;
+  min-height: 90px;
+}