@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/color-picker/template.vue

@@ -0,0 +1,198 @@
+<template>
+  <view
+    :class="classPrefix + '__panel'"
+    :style="customStyle"
+  >
+    <view
+      :class="classPrefix + '__body ' + classPrefix + '__body--' + type"
+    >
+      <!-- #ifdef MP-ALIPAY -->
+      <view
+        disable-scroll
+      >
+        <!-- #endif -->
+
+        <view
+          v-if="isMultiple"
+          :class="classPrefix + '__saturation'"
+          data-type="saturation"
+          :style="'background: hsl(' + sliderInfo.value + ', 100%, 50%)'"
+          @touchstart.stop.prevent="onTouchStart"
+          @touchmove.stop.prevent="onTouchMove"
+          @touchend.stop.prevent="onTouchEnd"
+        >
+          <view
+            :class="classPrefix + '__thumb'"
+            :tab-index="0"
+            :style="utils._style(saturationThumbStyle)"
+          />
+        </view>
+        <!-- #ifdef MP-ALIPAY -->
+      </view>
+      <!-- #endif -->
+
+
+      <view
+        v-if="isMultiple"
+        :class="classPrefix + '__sliders-wrapper'"
+      >
+        <view
+          :class="classPrefix + '__sliders'"
+        >
+          <view
+            :class="classPrefix + '__slider-wrapper ' + classPrefix + '__slider-wrapper--hue-type'"
+            disable-scroll
+          >
+            <view
+              :class="classPrefix + '__slider'"
+              data-type="hue-slider"
+              @touchstart.stop.prevent="onTouchStart"
+              @touchmove.stop.prevent="onTouchMove"
+              @touchend.stop.prevent="onTouchEnd"
+            >
+              <view :class="classPrefix + '__rail'" />
+              <view
+                :class="classPrefix + '__thumb'"
+                :style="utils._style(hueSliderStyle)"
+              />
+            </view>
+          </view>
+          <view
+            v-if="enableAlpha"
+            :class="classPrefix + '__slider-wrapper ' + classPrefix + '__slider-wrapper--alpha-type'"
+            :disable-scroll="true"
+          >
+            <view
+              :class="classPrefix + '__slider-padding'"
+              :style="
+                'background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ' + alphaSliderStyle.color + ' 93%, ' + alphaSliderStyle.color + ' 100%)'
+              "
+              :disable-scroll="false"
+            />
+            <view
+              :class="classPrefix + '__slider'"
+              data-type="alpha-slider"
+              @touchstart.stop.prevent="onTouchStart"
+              @touchmove.stop.prevent="onTouchMove"
+              @touchend.stop.prevent="onTouchEnd"
+            >
+              <view
+                :class="classPrefix + '__rail'"
+                :style="'background: linear-gradient(to right, rgba(0, 0, 0, 0), ' + alphaSliderStyle.color + ')'"
+              />
+              <view
+                :class="classPrefix + '__thumb'"
+                :style="utils._style(alphaSliderStyle)"
+              />
+            </view>
+          </view>
+        </view>
+        <view
+          v-if="showPrimaryColorPreview"
+          :class="classPrefix + '__sliders-preview ' + classPrefix + '--bg-alpha'"
+        >
+          <view
+            :class="classPrefix + '__sliders-preview-inner'"
+            :style="'background: ' + previewColor"
+          />
+        </view>
+      </view>
+      <view
+        v-if="isMultiple"
+        :class="classPrefix + '__format'"
+      >
+        <view :class="classPrefix + '__format-item ' + classPrefix + '__format-item--first'">
+          {{ format }}
+        </view>
+        <view :class="classPrefix + '__format-item ' + classPrefix + '__format-item--second'">
+          <view :class="classPrefix + '__format-inputs'">
+            <view
+              v-for="(item, index) in formatList"
+              :key="index"
+              :class="
+                classPrefix + '__format-input ' + classPrefix + '__format-input--' + (index === formatList.length - 1 && formatList.length === 2 ? 'fixed' : 'base')
+              "
+            >
+              {{ item }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="innerSwatchList.length"
+        :class="classPrefix + '__swatches-wrap'"
+      >
+        <view :class="classPrefix + '__swatches'">
+          <view
+            v-if="isMultiple"
+            :class="classPrefix + '__swatches-title'"
+          >
+            系统预设色彩
+          </view>
+          <view :class="classPrefix + '__swatches-items'">
+            <view
+              v-for="(swatch, index) in innerSwatchList"
+              :key="index"
+              :class="classPrefix + '__swatches-item'"
+              :data-value="swatch"
+              @click.stop.prevent="clickSwatch"
+            >
+              <view
+                :class="classPrefix + '__swatches-inner'"
+                :style="'background-color: ' + swatch + ';'"
+              />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import utils from '../common/utils.wxs';
+import props from './template.props';
+import { getRect } from '../common/utils';
+
+
+export default {
+  options: {
+    styleIsolation: 'shared',
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'onTouchStart',
+    'onTouchMove',
+    'onTouchEnd',
+    'clickSwatch',
+  ],
+  data() {
+    return {
+      utils,
+    };
+  },
+  methods: {
+    onTouchStart(...args) {
+      this.$emit('onTouchStart', ...args);
+    },
+    onTouchMove(...args) {
+      this.$emit('onTouchMove', ...args);
+    },
+    onTouchEnd(...args) {
+      this.$emit('onTouchEnd', ...args);
+    },
+    clickSwatch(...args) {
+      this.$emit('clickSwatch', ...args);
+    },
+    getRect(selector, needAll, useH5Origin) {
+      return getRect(this, selector, needAll, useH5Origin);
+    },
+  },
+};
+</script>
+
+<style scoped>
+@import './color-picker.css';
+</style>

package/dist/color-picker/type.ts

@@ -0,0 +1,96 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps as PopupProps } from '../popup/type';
+
+export interface TdColorPickerProps {
+  /**
+   * 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: boolean;
+  /**
+   * 是否开启透明通道
+   * @default false
+   */
+  enableAlpha?: boolean;
+  /**
+   * 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效
+   * @default RGB
+   */
+  format?: 'HEX' | 'HEX8' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSV' | 'HSVA' | 'CMYK' | 'CSS';
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
+  /**
+   * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
+   */
+  swatchColors?: Array<string> | null | undefined;
+  /**
+   * 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容
+   * @default base
+   */
+  type?: TypeEnum;
+  /**
+   * 是否使用弹出层包裹颜色选择器
+   * @default false
+   */
+  usePopup?: boolean;
+  /**
+   * 色值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 色值，非受控属性
+   * @default ''
+   */
+  defaultValue?: string;
+  /**
+   * 是否显示颜色选择器。`usePopup` 为 true 时有效
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
+   */
+  onChange?: (context: { value: string; context: { color: ColorObject; trigger: ColorPickerChangeTrigger } }) => void;
+  /**
+   * 关闭按钮时触发
+   */
+  onClose?: (context: { trigger: ColorPickerTrigger }) => void;
+  /**
+   * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
+   */
+  onPaletteBarChange?: (context: { color: ColorObject }) => void;
+}
+
+export type TypeEnum = 'base' | 'multiple';
+
+export type ColorPickerChangeTrigger = 'palette-hue-bar' | 'palette-alpha-bar' | 'preset';
+
+export type ColorPickerTrigger = 'overlay';
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  value: number;
+}

package/dist/color-picker/utils.js

@@ -0,0 +1 @@
+export * from '../common/shared/color-picker/index';

package/dist/common/bus.js

@@ -0,0 +1,84 @@
+export default class Bus {
+  constructor() {
+    this.listeners = new Map();
+    this.emitted = new Map(); // 改为Map存储事件参数
+    this.onceListeners = new Map();
+  }
+
+  on(evtName, listener) {
+    const target = this.listeners.get(evtName) || [];
+    target.push(listener);
+    this.listeners.set(evtName, target);
+
+    // 如果事件已触发过，用保存的参数立即执行
+    if (this.emitted.has(evtName)) {
+      listener(...this.emitted.get(evtName));
+    }
+  }
+
+  once(evtName, listener) {
+    // 如果事件已经触发过，立即执行并返回
+    if (this.emitted.has(evtName)) {
+      listener(...this.emitted.get(evtName));
+      return;
+    }
+
+    // 封装自移除函数
+    const onceWrapper = (...args) => {
+      listener(...args);
+      this.off(evtName, onceWrapper);
+    };
+
+    // 存储原始监听器用于精准移除
+    const onceMap = this.onceListeners.get(evtName) || new Map();
+    onceMap.set(listener, onceWrapper);
+    this.onceListeners.set(evtName, onceMap);
+
+    // 注册封装函数
+    this.on(evtName, onceWrapper);
+  }
+
+  emit(evtName, ...args) {
+    // 保存事件参数
+    this.emitted.set(evtName, args);
+
+    const listeners = this.listeners.get(evtName) || [];
+    // 使用副本避免执行时修改数组
+    [...listeners].forEach(func => func(...args));
+  }
+
+  off(evtName, listener) {
+    if (listener) {
+      // 处理一次性监听器的原始引用
+      const onceMap = this.onceListeners.get(evtName);
+      if (onceMap && onceMap.has(listener)) {
+        const wrapper = onceMap.get(listener);
+        this._removeListener(evtName, wrapper);
+        onceMap.delete(listener);
+        return;
+      }
+
+      // 处理普通监听器
+      this._removeListener(evtName, listener);
+    } else {
+      // 移除所有监听器
+      this.listeners.delete(evtName);
+      this.onceListeners.delete(evtName);
+      this.emitted.delete(evtName);
+    }
+  }
+
+  // 私有方法：从指定事件中移除单个监听器
+  _removeListener(evtName, listener) {
+    const listeners = this.listeners.get(evtName);
+    if (!listeners) return;
+
+    const index = listeners.indexOf(listener);
+    if (index > -1) {
+      listeners.splice(index, 1);
+      if (listeners.length === 0) {
+        this.listeners.delete(evtName);
+      }
+    }
+  }
+}

package/dist/common/canvas/index.js

@@ -0,0 +1,53 @@
+export async function loadImage({
+  canvas,
+  src,
+}) {
+  let result = null;
+  if (!src || !canvas) {
+    return result;
+  }
+
+  // #ifdef MP
+  // 小程序环境：使用 canvas.createImage
+  if (canvas.createImage) {
+    result = new Promise((resolve, reject) => {
+      const img = canvas.createImage();
+      // 必须先设置 onload 和 onerror，再设置 src
+      img.onload = () => resolve(img);
+      img.onerror = (err) => {
+        console.error('创建图片对象失败:', err);
+        reject(err);
+      };
+      img.src = src;
+    });
+  }
+  // #endif
+
+  // #ifdef APP-PLUS
+  result = new Promise((resolve) => {
+    uni.getImageInfo({
+      src,
+      success: (res) => {
+        const imgPath = res.path; // 本地临时路径
+        resolve(imgPath);
+      },
+    });
+  });
+  // #endif
+
+  // #ifdef H5
+  // H5 环境：创建 Image 对象（参考 TSX 实现）
+  result = new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = (err) => {
+      console.error('图标加载失败:', err);
+      reject(err);
+    };
+    img.src = src;
+  });
+  // #endif
+
+  return result;
+}

package/dist/common/common.ts

@@ -0,0 +1,173 @@
+export type Classes = Array<string>;
+
+export interface Styles {
+  [css: string]: string | number;
+}
+
+export type ImageEvent = any;
+
+export type PlainObject = { [key: string]: any };
+
+export type OptionData = {
+  label?: string;
+  value?: string | number;
+} & PlainObject;
+
+export type TreeOptionData<T = string | number> = {
+  children?: Array<TreeOptionData<T>> | boolean;
+  /** option label content */
+  label?: string;
+  /** option search text */
+  text?: string;
+  /** option value */
+  value?: T;
+  /** option node content */
+  content?: string;
+} & PlainObject;
+
+export type FormResetEvent = Event;
+
+export type FormSubmitEvent = Event;
+
+/**
+ * 移除 on 前缀并可选地去掉可选修饰符
+ * @param T - 原始类型
+ * @param MakeRequired - 是否将属性变为必需（默认 false）
+ */
+export type TransformEventHandlers<
+  T,
+  MakeRequired extends boolean = false
+> = MakeRequired extends true
+  ? {
+    [K in keyof T as K extends `on${infer Event}`
+      ? Uncapitalize<Event>
+      : never
+    ]-?: T[K]
+  }
+  : {
+    [K in keyof T as K extends `on${infer Event}`
+      ? Uncapitalize<Event>
+      : never
+    ]: T[K]
+  };
+
+
+type WrapWithContext<T extends (...args: any[]) => any> =
+  T extends (...args: infer P) => infer R
+    ? (context: { [K in keyof P]: P[K] }) => R
+    : never;
+
+
+export type WrapParamsWithContext<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any
+    ? WrapWithContext<T[K]>
+    : T[K];
+};
+
+
+// 提取非 on 开头的属性
+export type ExtractNonOnProps<T> = {
+  [K in keyof T as K extends `on${string}` ? never : K]: T[K]
+};
+
+export interface IsEmailOptions {
+  allow_display_name?: boolean;
+  require_display_name?: boolean;
+  allow_utf8_local_part?: boolean;
+  require_tld?: boolean;
+  allow_ip_dot?: boolean;
+  domain_specific_validation?: boolean;
+  host_blacklist?: string[];
+  ignore_max_length?: boolean;
+}
+
+export interface IsURLOptions {
+  protocols?: string[];
+  require_tld?: boolean;
+  require_protocol?: boolean;
+  require_host?: boolean;
+  require_port?: boolean;
+  require_valid_protocol?: boolean;
+  allow_underscores?: boolean;
+  host_whitelist?: (string | RegExp)[];
+  host_blacklist?: (string | RegExp)[];
+  allow_trailing_dot?: boolean;
+  allow_protocol_relative_urls?: boolean;
+  disallow_auth?: boolean;
+  validate_length?: boolean;
+}
+/**
+ * 通用全局类型
+ * */
+export type SizeEnum = 'small' | 'medium' | 'large';
+
+export type ShapeEnum = 'circle' | 'round';
+
+export type HorizontalAlignEnum = 'left' | 'center' | 'right';
+
+export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
+
+export type LayoutEnum = 'vertical' | 'horizontal';
+
+export type ClassName = { [className: string]: any } | ClassName[] | string;
+
+export type CSSSelector = string;
+
+export interface KeysType {
+  value?: string;
+  label?: string;
+  disabled?: string;
+}
+
+export interface TreeKeysType extends KeysType {
+  children?: string;
+}
+
+export interface HTMLElementAttributes {
+  [attribute: string]: string;
+}
+
+export interface TScroll {
+  /**
+   * 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白
+   * @default 20
+   */
+  bufferSize?: number;
+  /**
+   * 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值
+   * @default false
+   */
+  isFixedRowHeight?: boolean;
+  /**
+   * 行高，不会给元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑
+   */
+  rowHeight?: number;
+  /**
+   * 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动
+   * @default 100
+   */
+  threshold?: number;
+  /**
+   * 滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性
+   */
+  type: 'lazy' | 'virtual';
+}
+
+/**
+ * @deprecated use TScroll instead
+ */
+export type InfinityScroll = TScroll;
+
+export interface ScrollToElementParams {
+  /** 跳转元素下标 */
+  index?: number;
+  /** 跳转元素距离顶部的距离 */
+  top?: number;
+  /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
+  time?: number;
+  behavior?: 'auto' | 'smooth';
+}
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key?: string | number;
+}

package/dist/common/config.js

@@ -0,0 +1,9 @@
+export default {
+  data() {
+    return {};
+  },
+  prefix: 't',
+};
+export const prefix = 't';
+
+export const ISOLATED_RELATION_KEY = '-1';

package/dist/common/dom/index.js

@@ -0,0 +1 @@
+export { selectComponent } from './select-component';

package/dist/common/dom/select-component.js

@@ -0,0 +1,26 @@
+export function selectComponent(context, selector) {
+  if (!selector || !context) return;
+
+  if (typeof selector === 'function') {
+    return selector(context);
+  }
+
+  let attribute = selector;
+  if (attribute.match(/^[^\w]/)) {
+    attribute = attribute.slice(1);
+  }
+
+  if (
+    context.$refs && context.$refs[attribute]) {
+    return context.$refs[attribute];
+  }
+
+  if (context && typeof context.$selectComponent === 'function') {
+    const res =  context.$selectComponent(selector);
+    return res;
+  }
+
+  return context && context.selectComponent && context.selectComponent(selector);
+}
+
+

package/dist/common/event/dynamic.js

@@ -0,0 +1,10 @@
+/**
+ * 解析事件里的动态函数名，这种没有()的函数名，在uniapp不被执行
+ * 比如：<view bindtap="{{openId==undefined?'denglu':'hy_to'}}">立即</view>
+ * @param {*} exp
+ */
+export function parseEventDynamicCode(e, exp, ...args) {
+  if (typeof(this[exp]) === 'function') {
+    this[exp](e, ...args);
+  }
+}