@will-ui/vue 1.0.0

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

@@ -0,0 +1,302 @@
+.w-upload {
+  --__size: var(--w-prop-upload-size, var(--w-upload-size, var(--w-size)));
+  --__color: var(--w-prop-upload-color, var(--w-upload-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-upload-bg-color,
+    var(--w-upload-bg-color, var(--w-bg-color))
+  );
+  --__color-light-9: color-mix(
+    in srgb,
+    var(--__color) var(--w-upload-color-light-9-mix),
+    var(--__bg)
+  );
+  --__icon: clamp(
+    var(--w-ctrl-icon-size-min),
+    calc(var(--__size) * var(--w-ctrl-icon-ratio)),
+    var(--w-ctrl-icon-size-max)
+  );
+  --w-close-font-size: var(--__icon);
+  /* 子件 Progress 跟本实例有效尺度 / 主色 */
+  --w-prop-progress-size: var(--__size);
+  --w-prop-progress-color: var(--__color);
+  --w-upload-card-size: calc(var(--__size) * var(--w-upload-card-size-ratio));
+  --w-upload-thumb-size: calc(var(--__size) * var(--w-upload-thumb-size-ratio));
+  --w-upload-trigger-min-width: calc(var(--__size) * var(--w-upload-trigger-min-width-ratio));
+  --w-upload-item-padding: calc(var(--__size) * var(--w-upload-item-padding-ratio));
+  --w-upload-remove-height: calc(var(--__size) * var(--w-upload-remove-height-ratio));
+
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--w-gap);
+  outline: none;
+
+  &.w-upload-block {
+    display: flex;
+    width: 100%;
+  }
+
+  &.w-upload-dragging {
+    .w-upload-trigger,
+    .w-upload-card-trigger {
+      border-color: var(--__color);
+      background-color: var(--__color-light-9);
+    }
+  }
+
+  &.w-upload-disabled {
+    opacity: var(--w-upload-disabled-opacity);
+    cursor: not-allowed;
+
+    .w-upload-trigger,
+    .w-upload-card-trigger {
+      pointer-events: none;
+      border-color: var(--w-form-item-disabled-border-color);
+      background-color: var(--w-bg-color);
+    }
+  }
+
+  .w-upload-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    z-index: -1;
+  }
+
+  .w-upload-trigger-wrap {
+    position: relative;
+    display: inline-flex;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .w-upload-trigger {
+    display: inline-flex;
+    gap: var(--w-padding-x);
+    align-items: center;
+    justify-content: center;
+    min-width: var(--w-upload-trigger-min-width);
+    border: 1px dashed var(--w-form-item-border-color);
+    border-radius: var(--w-radius);
+    padding: var(--w-padding-y) var(--w-padding-x);
+    transition: var(--w-transition-time, 0.25s);
+    background-color: var(--w-bg-color-elevated, transparent);
+
+    &:hover {
+      border-color: var(--__color);
+    }
+  }
+
+  .w-upload-card-trigger {
+    box-sizing: border-box;
+    width: var(--w-upload-card-size);
+    height: var(--w-upload-card-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed var(--w-form-item-border-color);
+    border-radius: var(--w-radius);
+    transition: var(--w-transition-time, 0.25s);
+    background-color: var(--w-bg-color);
+
+    &:hover {
+      border-color: var(--__color);
+    }
+  }
+
+  .w-upload-icon {
+    color: var(--w-color-font-3);
+    font-size: var(--__icon);
+    line-height: 1;
+  }
+
+  .w-upload-text {
+    color: var(--w-color-font-3);
+    font-size: var(--w-font-size-2);
+    text-align: center;
+  }
+
+  .w-upload-tip {
+    color: var(--w-color-font-3);
+    font-size: var(--w-font-size-2);
+  }
+
+  .w-upload-file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--w-gap);
+  }
+
+  .w-upload-file-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--w-gap);
+    border: 1px solid var(--w-form-item-border-color);
+    border-radius: var(--w-radius);
+    padding: var(--w-upload-item-padding);
+    overflow: hidden;
+    transition: var(--w-transition-time);
+
+    &:hover {
+      border-color: var(--w-form-item-border-color-hover);
+
+      .w-upload-file-remove {
+        opacity: 1;
+      }
+    }
+
+    &.w-upload-file-item--success {
+      border-color: var(--w-color-success, var(--__color));
+    }
+
+    &.w-upload-file-item--error {
+      border-color: var(--w-color-danger, #f56c6c);
+    }
+  }
+
+  .w-upload-file-body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .w-upload-file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--w-color-font-2);
+    font-size: var(--w-font-size);
+  }
+
+  .w-upload-file-size,
+  .w-upload-file-status {
+    color: var(--w-color-font-3);
+    font-size: var(--w-font-size-2);
+  }
+
+  .w-upload-progress {
+    width: 100%;
+    margin-top: 4px;
+  }
+
+  .w-upload-thumb {
+    flex-shrink: 0;
+    width: var(--w-upload-thumb-size);
+    height: var(--w-upload-thumb-size);
+    border-radius: var(--w-radius);
+    overflow: hidden;
+    background-color: var(--w-bg-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .w-upload-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .w-upload-file-ext {
+    color: var(--w-color-font-3);
+    font-size: var(--w-font-size-2);
+  }
+
+  .w-upload-file-remove {
+    flex-shrink: 0;
+    cursor: pointer;
+    opacity: var(--w-upload-remove-opacity);
+    transition: var(--w-transition-time);
+  }
+
+  /* picture layout */
+  &.w-upload--picture {
+    .w-upload-file-item {
+      padding: var(--w-upload-item-padding);
+    }
+  }
+
+  /* picture-card layout */
+  &.w-upload--picture-card {
+    .w-upload-file-list {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: flex-start;
+    }
+
+    .w-upload-file-item {
+      box-sizing: border-box;
+      width: var(--w-upload-card-size);
+      height: var(--w-upload-card-size);
+      padding: 0;
+      flex-direction: column;
+      justify-content: center;
+
+      .w-upload-img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .w-upload-file-meta {
+        padding: var(--w-padding-x);
+        text-align: center;
+      }
+
+      .w-upload-file-status {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: var(--w-upload-remove-height);
+        text-align: center;
+        pointer-events: none;
+      }
+
+      .w-upload-progress {
+        position: absolute;
+        left: var(--w-gap);
+        right: var(--w-gap);
+        bottom: calc(var(--w-upload-remove-height) + 4px);
+        margin: 0;
+        z-index: 1;
+      }
+
+      .w-upload-file-remove {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: var(--w-upload-remove-height);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--w-upload-remove-color);
+        background-image: var(--w-upload-remove-bg);
+        opacity: 0;
+        transform: translateY(100%);
+        transition: var(--w-transition-time);
+      }
+
+      &:hover .w-upload-file-remove {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+
+  /* text: remove always visible on the right */
+  &.w-upload--text {
+    .w-upload-file-remove {
+      opacity: var(--w-upload-remove-text-opacity);
+    }
+
+    .w-upload-file-item:hover .w-upload-file-remove {
+      opacity: 1;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+.w-virtual {
+  overflow: auto;
+  & .w-virtual-content {
+    position: relative;
+  }
+}

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

@@ -0,0 +1,155 @@
+.w-write {
+  --__size: var(--w-prop-write-size, var(--w-write-size, var(--w-size)));
+  /* 表面 / 正文三级；未设时回退 form-item，再回退全局核 */
+  --__bg: var(
+    --w-prop-write-bg-color,
+    var(
+      --w-write-bg-color,
+      var(--w-form-item-background-color, var(--w-bg-color))
+    )
+  );
+  --__text: var(
+    --w-prop-write-text-color,
+    var(--w-write-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-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-close-font-size: var(--__icon);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: var(--__font);
+
+  &.w-write-block {
+    flex: 1;
+    min-width: 0;
+  }
+
+  & .w-write-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--w-form-item-border);
+    border-radius: var(--w-write-radius);
+    overflow: hidden;
+    height: var(--__size);
+    width: var(--w-form-item-width);
+    background-color: var(--__bg);
+    transition: var(--w-transition-time);
+    font-size: var(--__font);
+
+    & .w-write-input,
+    & .w-write-textarea {
+      border-radius: var(--w-write-radius);
+      border: none;
+      height: 100%;
+      padding: 0 var(--__pad-x);
+      flex: 1;
+      width: 0;
+      font-size: inherit;
+      color: var(--__text);
+      background-color: transparent;
+      transition: var(--w-transition-time);
+      outline: 0;
+
+      &.w-write-align-right {
+        text-align: right;
+      }
+
+      &.w-write-align-left {
+        text-align: left;
+      }
+
+      &.w-write-align-center {
+        text-align: center;
+      }
+
+      &::placeholder {
+        color: var(--w-form-item-placeholder-color);
+      }
+    }
+
+    &:focus-within {
+      &:not(.w-write-input-simple) {
+        background-color: var(--w-form-item-background-color-focus);
+        border-color: var(--w-form-item-border-color-focus);
+        box-shadow: var(--w-form-item-focus-ring);
+      }
+
+      &.w-write-input-simple {
+        box-shadow: none;
+        border-bottom-color: var(--w-form-item-border-color-focus);
+      }
+    }
+
+    & .w-write-textarea {
+      padding: calc(var(--__size) * var(--w-form-item-pad-x-ratio))
+        var(--__pad-x);
+      line-height: 1.5;
+      color: var(--__text);
+    }
+
+    &.w-write-input-block {
+      flex: 1;
+    }
+
+    &.w-write-input-disabled {
+      background-color: var(--w-form-item-disabled-background-color);
+      border-color: var(--w-form-item-disabled-border-color);
+
+      & .w-write-input {
+        color: var(--w-form-item-disabled-color);
+        cursor: not-allowed;
+
+        &::placeholder {
+          color: var(--w-form-item-disabled-placeholder-color);
+        }
+      }
+    }
+
+    &.w-write-input-simple {
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      border-radius: 0;
+      background-color: transparent;
+    }
+
+    & .w-write-input-limit {
+      color: var(--w-form-item-placeholder-color);
+      position: absolute;
+      font-size: max(
+        var(--w-font-size-min),
+        calc(var(--__size) * var(--w-write-limit-font-ratio))
+      );
+      line-height: 1.2;
+      bottom: calc(var(--__size) * var(--w-write-limit-bottom-ratio));
+      right: calc(var(--__size) * var(--w-write-limit-right-ratio));
+    }
+
+    & .w-close {
+      font-size: var(--w-close-font-size);
+      margin: 0 calc(var(--__size) * var(--w-write-close-margin-ratio)) 0 0;
+      font-weight: normal;
+    }
+  }
+
+  &:hover {
+    & .w-write-wrapper {
+      &:not(.w-write-input-disabled):not(:focus-within) {
+        border-color: var(--w-form-item-border-color-hover);
+        background-color: var(--w-form-item-background-color-hover);
+      }
+    }
+  }
+}

package/dist/theme/tokens/iconfont/iconfont.css

@@ -0,0 +1,103 @@
+@font-face {
+  font-family: "iconfont-linkd"; /* Project id 1034390 */
+  src: url('iconfont.woff2?t=1768381489192') format('woff2'),
+       url('iconfont.woff?t=1768381489192') format('woff'),
+       url('iconfont.ttf?t=1768381489192') format('truetype');
+}
+
+.iconfont-linkd {
+  font-family: "iconfont-linkd" !important;
+  font-size: var(--w-icon-font-size, var(--w-font-size-2));
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.w-icon-empty:before {
+  content: "\e613";
+}
+
+.w-icon-loading:before {
+  content: "\e771";
+}
+
+.w-icon-checkbox-fill:before {
+  content: "\e9a2";
+}
+
+.w-icon-checkbox:before {
+  content: "\e99f";
+}
+
+.w-icon-radio:before {
+  content: "\e99a";
+}
+
+.w-icon-radio-fill:before {
+  content: "\e99c";
+}
+
+.w-icon-square:before {
+  content: "\e9a5";
+}
+
+.w-icon-rotate-left:before {
+  content: "\e63b";
+}
+
+.w-icon-rotate-right:before {
+  content: "\e63c";
+}
+
+.w-icon-duihao:before {
+  content: "\e62f";
+}
+
+.w-icon-close-fill:before {
+  content: "\e6a6";
+}
+
+.w-icon-close:before {
+  content: "\e6462";
+}
+
+.w-icon-sort-down:before {
+  content: "\e65a";
+}
+
+.w-icon-search:before {
+  content: "\a612";
+}
+
+.w-icon-folder-open:before {
+  content: "\a708";
+}
+
+.w-icon-folder:before {
+  content: "\a709";
+}
+
+.w-icon-file:before {
+  content: "\a70c";
+}
+
+.w-icon-add:before {
+  content: "\a60a";
+}
+
+.w-icon-warning:before {
+  content: "\a634";
+}
+
+.w-icon-delete:before {
+  content: "\a63e";
+}
+
+.w-icon-ball:before {
+  content: "\a603";
+}
+
+.w-icon-arrow-down:before {
+  content: "\a8f2";
+}
+

package/dist/theme/tokens/index.css

@@ -0,0 +1,19 @@
+/**
+ * @mono/theme —— 与框架无关的设计令牌与通用样式。
+ *
+ * Vue 版（@will-ui/vue）与 React 版（@will-ui/react）共用这一份，
+ * 改动一次两边同时生效。不要在这里放任何框架专属内容
+ * （如 Vue 的 <Transition> 类名、React 的 CSSTransition 类名）。
+ *
+ * 组件结构样式在 `./components/*.css`（按组件按需 @import），
+ * 不要在此入口整包引入，以免拖大两端体积。
+ *
+ * 字体图标（iconfont）与 Vue / React 共用，见 `./iconfont/`。
+ */
+@import './_var.css';
+@import './_base.css';
+@import './_common.css';
+@import './_text.css';
+@import './_size.css';
+@import './_scrollbar.css';
+@import './iconfont/iconfont.css';

package/dist/use/index.d.ts

@@ -0,0 +1,34 @@
+export { default as useMouse } from './useMouse';
+export { default as useBoundingClientRect } from './useBoundingClientRect';
+export { default as useChildComponentsCollector } from './useChildComponentsCollector';
+export { default as useComponentClass } from './useComponentClass';
+export { default as useComponentConfig } from './useComponentConfig';
+export { default as useCount } from './useCount';
+export { default as useDate } from './useDate';
+export { default as useDelay } from './useDelay';
+export { default as useFormItem } from './useFormItem';
+export { default as useElement } from './useElement';
+export { default as useEvent } from './useEvent';
+export { default as useGlobalZIndex } from './useGlobalZIndex';
+export { default as useEscStack, pushEscLayer } from './useEscStack';
+export type { EscLayer } from './useEscStack';
+export { default as useMousePositionInElement } from './useMousePositionInElement';
+export { default as useParentNode } from './useParentNode';
+export { default as usePercentDrag } from './usePercentDrag';
+export { default as useRequest } from './useRequest';
+export { default as useScroll } from './useScroll';
+export { default as useSearch } from './useSearch';
+export { default as useSlot } from './useSlot';
+export { default as useTabIndex } from './useTabIndex';
+export { default as useAudioPlayer } from './useAudioPlayer';
+export type { AudioPlayMode, AudioPlaylist, AudioTrack, InternalAudioPlaylist, InternalAudioTrack, LoadSourceOptions, UseAudioPlayerOptions, } from './useAudioPlayer';
+export { formatAudioTime } from './useAudioPlayer';
+export { default as useVisibleResize } from './useVisibleResize';
+export { default as useScaleFromPoint } from './useScaleFromPoint';
+export { ensureScaleFromPointTracking, captureScaleFromPoint, getScaleFromPoint, originFromElement, } from './useScaleFromPoint';
+export type { ScaleFromPoint, ScaleTriggerKind, MorphVars, TriggerSnapshot } from './useScaleFromPoint';
+export { default as useUpload } from './useUpload';
+export type { UseUploadOptions, UseUploadReturn } from './useUpload';
+export { isImageFile, formatFileSize } from './useUpload';
+export { createPictureViewport, computeFitScale, clampScale, zoomAtPoint, toTransformCss, normalizeRotate, PICTURE_VIEWPORT_ZOOM_STEP, } from './usePictureViewport';
+export type { PictureViewportMode, PictureViewportSnapshot, PictureViewportOptions, UsePictureViewport, } from './usePictureViewport';

package/dist/use/toggle/types.d.ts

@@ -0,0 +1,27 @@
+import { MaybeRef, Ref } from 'vue';
+/** 当前选中位 */
+export interface TogglePosition<T> {
+    item: T | undefined;
+    index: number;
+}
+/**
+ * 初始化 / `set` 入参：`item` 优先于 `index`。
+ * 支持 Ref / ComputedRef / 普通值（含 `reactive({ item: computed(...) })`）。
+ */
+export interface ToggleInitOptions<T> {
+    index?: MaybeRef<number | undefined>;
+    item?: MaybeRef<T | undefined>;
+}
+export type ToggleKey = string | number | boolean | symbol;
+export interface UseToggleCycleReturn<T> {
+    /** 正序切换到下一项（环形） */
+    toggle: () => TogglePosition<T>;
+    /** 同 `toggle` */
+    next: () => TogglePosition<T>;
+    /** 切换到上一项（环形） */
+    prev: () => TogglePosition<T>;
+    item: Ref<T | undefined>;
+    index: Ref<number>;
+    set: (current: ToggleInitOptions<T>) => void;
+    get: () => TogglePosition<T>;
+}

package/dist/use/toggle/useToggle.d.ts

@@ -0,0 +1,22 @@
+import { MaybeRef, Ref } from 'vue';
+export interface UseToggleReturn<T> {
+    /** 当前值 */
+    value: Ref<T>;
+    /** 切换；传入 `force` 时强制设为该值 */
+    toggle: (force?: T) => T;
+    set: (v: T) => void;
+    get: () => T;
+}
+/**
+ * 二元切换。
+ *
+ * - `useToggle()` / `useToggle(false)`：在 `false` ↔ `true` 间切换
+ * - `useToggle(left, right)`：在两个自定义值间切换（可跟初始当前值）
+ *
+ * @example
+ * const { value, toggle } = useToggle()
+ * const { value, toggle } = useToggle(0, 1)
+ * const { value, toggle } = useToggle('off', 'on', 'on')
+ */
+export default function useToggle(initial?: MaybeRef<boolean>): UseToggleReturn<boolean>;
+export default function useToggle<A, B>(left: MaybeRef<A>, right: MaybeRef<B>, current?: MaybeRef<A | B>): UseToggleReturn<A | B>;

package/dist/use/toggle/useToggleArray.d.ts

@@ -0,0 +1,14 @@
+import { MaybeRefOrGetter } from 'vue';
+import { ToggleInitOptions, ToggleKey, UseToggleCycleReturn } from './types';
+export type { ToggleInitOptions, ToggleKey, TogglePosition, UseToggleCycleReturn } from './types';
+export type UseToggleArrayReturn<T> = UseToggleCycleReturn<T> & {
+    setByKey: (k: ToggleKey, localKeyField?: string) => void;
+};
+/**
+ * 在数组项之间环形切换。
+ *
+ * @example
+ * const { toggle, item, index, set } = useToggleArray(data, { index: 0 })
+ * const { toggle, item } = useToggleArray(data, reactive({ item: computed(() => model) }))
+ */
+export default function useToggleArray<T>(data: MaybeRefOrGetter<readonly T[]>, current?: ToggleInitOptions<T>, keyField?: string): UseToggleArrayReturn<T>;