@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/color-picker/README.en-US.md

@@ -0,0 +1,62 @@
+:: BASE_DOC ::
+
+## API
+
+### ColorPicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+auto-close | Boolean | true | \- | N
+enable-alpha | Boolean | false | \- | N
+fixed | Boolean | false | \- | N
+format | String | RGB | When `enableAlpha` is true, `HEX8/RGBA/HSLA/HSVA` are valid。options: HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
+popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts) | N
+swatch-colors | Array | undefined | swatch colors。Typescript：`Array<string> \| null \| undefined` | N
+type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts) | N
+use-popup | Boolean | false | \- | N
+value | String | - | color value。`v-model:value` is supported | N
+default-value | String | - | color value。uncontrolled property | N
+visible | Boolean | false | \- | N
+
+### ColorPicker Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }})` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+close | `(context: { trigger: ColorPickerTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
+
+### ColorPicker Slots
+
+name | Description
+-- | --
+footer | \-
+header | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-color-picker-gradient-preview-height | 56rpx | -
+--td-color-picker-gradient-preview-radius | 6rpx | -
+--td-color-picker-gradient-preview-width | 56rpx | -
+--td-color-picker-input-format-margin-left | 48rpx | -
+--td-color-picker-panel-background | @bg-color-container | -
+--td-color-picker-panel-padding | 32rpx | -
+--td-color-picker-panel-radius | 24rpx | -
+--td-color-picker-panel-width | 750rpx | -
+--td-color-picker-saturation-height | 288rpx | -
+--td-color-picker-saturation-radius | 12rpx | -
+--td-color-picker-saturation-thumb-size | 48rpx | -
+--td-color-picker-slider-height | 16rpx | -
+--td-color-picker-slider-thumb-padding | 6rpx | -
+--td-color-picker-slider-thumb-size | 48rpx | -
+--td-color-picker-slider-thumb-transform-x | -18rpx | -
+--td-color-picker-slider-wrapper-padding | 0 18rpx | -
+--td-color-picker-swatch-border-radius | @radius-small | -
+--td-color-picker-swatch-height | 48rpx | -
+--td-color-picker-swatch-padding | 0 | -
+--td-color-picker-swatch-width | 48rpx | -
+--td-color-picker-swatches-title-font | @font-title-medium | -

package/dist/color-picker/README.md

@@ -0,0 +1,110 @@
+---
+title: ColorPicker 颜色选择器
+description: 用于颜色选择，支持多种格式。
+spline: data
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TColorPicker from '@tdesign/uniapp/color-picker/color-picker.vue';
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 基础颜色选择器
+
+{{ base }}
+
+#### 带色板的颜色选择器
+
+{{ multiple }}
+
+### 组件状态
+
+{{ format }}
+
+## FAQ
+
+如果使用场景为 `scroll-view`，除了需要显示指定 `fixed` 属性为 `true`，还需要手动调用组件的 debouncedUpdateEleRect() 事件。
+
+```html
+<scroll-view type="list" scroll-y bind:scroll="onScroll">
+  <t-color-picker id="ColorPicker" fixed />
+</scroll-view>
+```
+
+```js
+onScroll(e) {
+  if (!this.colorPicker) this.colorPicker = this.selectComponent('#ColorPicker');
+  this.colorPicker.debouncedUpdateEleRect(e);
+}
+```
+
+## API
+
+### ColorPicker Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+auto-close | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
+enable-alpha | Boolean | false | 是否开启透明通道 | N
+fixed | Boolean | false | 如果 color-picker 是在一个 `position:fixed` 的区域，需要显式指定属性 fixed 为 true | N
+format | String | RGB | 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效。可选项：HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
+popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts) | N
+swatch-colors | Array | undefined | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null \| undefined` | N
+type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts) | N
+use-popup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
+value | String | - | 色值。支持语法糖 `v-model:value` | N
+default-value | String | - | 色值。非受控属性 | N
+visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
+
+### ColorPicker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }})` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+close | `(context: { trigger: ColorPickerTrigger })` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
+
+### ColorPicker Slots
+
+名称 | 描述
+-- | --
+footer | 底部插槽，仅在 `usePopup` 为 `true` 时有效
+header | 顶部插槽，仅在 `usePopup` 为 `true` 时有效
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-color-picker-gradient-preview-height | 56rpx | -
+--td-color-picker-gradient-preview-radius | 6rpx | -
+--td-color-picker-gradient-preview-width | 56rpx | -
+--td-color-picker-input-format-margin-left | 48rpx | -
+--td-color-picker-panel-background | @bg-color-container | -
+--td-color-picker-panel-padding | 32rpx | -
+--td-color-picker-panel-radius | 24rpx | -
+--td-color-picker-panel-width | 750rpx | -
+--td-color-picker-saturation-height | 288rpx | -
+--td-color-picker-saturation-radius | 12rpx | -
+--td-color-picker-saturation-thumb-size | 48rpx | -
+--td-color-picker-slider-height | 16rpx | -
+--td-color-picker-slider-thumb-padding | 6rpx | -
+--td-color-picker-slider-thumb-size | 48rpx | -
+--td-color-picker-slider-thumb-transform-x | -18rpx | -
+--td-color-picker-slider-wrapper-padding | 0 18rpx | -
+--td-color-picker-swatch-border-radius | @radius-small | -
+--td-color-picker-swatch-height | 48rpx | -
+--td-color-picker-swatch-padding | 0 | -
+--td-color-picker-swatch-width | 48rpx | -
+--td-color-picker-swatches-title-font | @font-title-medium | -

package/dist/color-picker/color-picker.css

@@ -0,0 +1,271 @@
+.t-color-picker__panel {
+  padding: 0;
+  width: var(--td-color-picker-panel-width, 750rpx);
+  background: var(--td-color-picker-panel-background, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  border-top-left-radius: var(--td-color-picker-panel-radius, 24rpx);
+  border-top-right-radius: var(--td-color-picker-panel-radius, 24rpx);
+  user-select: none;
+}
+.t-color-picker__body {
+  padding: var(--td-color-picker-panel-padding, 32rpx);
+  padding-bottom: 56rpx;
+}
+.t-color-picker__thumb {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  width: var(--td-color-picker-slider-thumb-size, 48rpx);
+  height: var(--td-color-picker-slider-thumb-size, 48rpx);
+  border-radius: var(--td-radius-circle, 50%);
+  box-shadow: var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12));
+  color: var(--td-text-color-brand, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  box-sizing: border-box;
+}
+.t-color-picker__thumb::before,
+.t-color-picker__thumb::after {
+  content: '';
+  position: absolute;
+  border-radius: var(--td-radius-circle, 50%);
+  box-sizing: border-box;
+  display: block;
+  border: 1px solid var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
+}
+.t-color-picker__thumb::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.t-color-picker__thumb::after {
+  left: 3px;
+  top: 3px;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+  padding: var(--td-color-picker-slider-thumb-padding, 6rpx);
+  background: currentcolor;
+}
+.t-color-picker__saturation {
+  height: var(--td-color-picker-saturation-height, 288rpx);
+  border-radius: var(--td-color-picker-saturation-radius, 12rpx);
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+}
+.t-color-picker__saturation::before,
+.t-color-picker__saturation::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.t-color-picker__saturation::before {
+  /* stylelint-disable-next-line color-no-hex */
+  background: linear-gradient(90deg, #fff, transparent);
+}
+.t-color-picker__saturation::after {
+  /* stylelint-disable-next-line color-no-hex */
+  background: linear-gradient(0deg, #000, transparent);
+}
+.t-color-picker__saturation .t-color-picker__thumb {
+  width: var(--td-color-picker-saturation-thumb-size, 48rpx);
+  height: var(--td-color-picker-saturation-thumb-size, 48rpx);
+  border-radius: var(--td-radius-circle, 50%);
+  transform: translate(-50%, -50%);
+}
+.t-color-picker__slider-wrapper {
+  border-radius: calc(var(--td-color-picker-slider-height, 16rpx) / 2);
+  padding: var(--td-color-picker-slider-wrapper-padding, 0 18rpx);
+  position: relative;
+}
+.t-color-picker__slider-wrapper--hue-type {
+  /* stylelint-disable-next-line color-named */
+  background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+  margin: 16rpx 0;
+}
+.t-color-picker__slider-wrapper--alpha-type {
+  background: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
+  margin: 40rpx 0 16rpx 0;
+  /* stylelint-disable-next-line color-no-hex */
+  background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
+}
+.t-color-picker__slider-wrapper--alpha-type .t-color-picker__rail {
+  background: linear-gradient(to right, transparent, currentcolor);
+}
+.t-color-picker__slider-padding {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: var(--td-color-picker-slider-height, 16rpx);
+  border-radius: calc(var(--td-color-picker-slider-height, 16rpx) / 2);
+}
+.t-color-picker__slider {
+  height: var(--td-color-picker-slider-height, 16rpx);
+  position: relative;
+  border-radius: calc(var(--td-color-picker-slider-height, 16rpx) / 2);
+  color: transparent;
+  outline: none;
+  z-index: 1;
+}
+.t-color-picker__slider .t-color-picker__thumb {
+  transform: translate(var(--td-color-picker-slider-thumb-transform-x, -18rpx), -50%);
+  top: 50%;
+}
+.t-color-picker__slider .t-color-picker__rail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+.t-color-picker__sliders-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 32rpx 0 40rpx;
+}
+.t-color-picker__sliders {
+  width: 100%;
+}
+.t-color-picker__sliders-preview {
+  flex-shrink: 0;
+  margin-left: var(--td-spacer-1, 24rpx);
+  width: var(--td-color-picker-gradient-preview-width, 56rpx);
+  height: var(--td-color-picker-gradient-preview-height, 56rpx);
+  border-radius: var(--td-color-picker-gradient-preview-radius, 6rpx);
+  overflow: hidden;
+  background: var(--td-text-color-anti, var(--td-font-white-1, #ffffff));
+  /* stylelint-disable-next-line color-no-hex */
+  background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
+}
+.t-color-picker__sliders-preview-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.t-color-picker__format {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  text-align: center;
+}
+.t-color-picker__format:not(:empty) + .t-color-picker__swatches-wrap:not(:empty) {
+  margin-top: 56rpx;
+}
+.t-color-picker__format-item {
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-color-picker__format-item--first {
+  flex-shrink: 0;
+  width: 136rpx;
+  border: 2rpx solid var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
+  border-radius: var(--td-radius-default, 12rpx);
+  padding: 6rpx 0;
+  margin-right: 24rpx;
+}
+.t-color-picker__format-item--second {
+  flex: 1;
+}
+.t-color-picker__format-inputs {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.t-color-picker__format-input {
+  flex: 1;
+  width: 0;
+  margin-left: -2rpx;
+  padding: 6rpx 0;
+  border: 1px solid var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
+  border-radius: var(--td-radius-default, 12rpx);
+}
+.t-color-picker__format-input:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.t-color-picker__format-input:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.t-color-picker__format-input:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.t-color-picker__format-input--fixed {
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: 133rpx;
+}
+.t-color-picker__swatches-wrap {
+  position: relative;
+}
+.t-color-picker__swatches + .t-color-picker__swatches {
+  margin-top: var(--td-spacer-1, 24rpx);
+}
+.t-color-picker__swatches-title {
+  font: var(--td-color-picker-swatches-title-font, var(--td-font-title-medium, 600 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  padding: 0;
+  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.t-color-picker__swatches-items {
+  margin-top: 24rpx;
+  width: 100%;
+  list-style: none;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+.t-color-picker__swatches-items::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.t-color-picker__swatches-item {
+  width: var(--td-color-picker-swatch-width, 48rpx);
+  height: var(--td-color-picker-swatch-height, 48rpx);
+  border-radius: var(--td-radius-small, 6rpx);
+  padding: var(--td-color-picker-swatch-padding, 0);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transform-origin: center;
+  transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin-right: 24rpx;
+  border-radius: var(--td-color-picker-swatch-border-radius, var(--td-radius-small, 6rpx));
+}
+.t-color-picker__swatches-item::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.2);
+}
+.t-color-picker__swatches-item:active::after {
+  opacity: 1;
+}
+.t-color-picker__swatches-inner {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: var(--td-color-picker-swatch-border-radius, var(--td-radius-small, 6rpx));
+  position: relative;
+}