first commit
This commit is contained in:
lingxiao865
104
miniprogram_npm/tdesign-miniprogram/color-picker/color-picker.d.ts
vendored
Normal file
104
miniprogram_npm/tdesign-miniprogram/color-picker/color-picker.d.ts
vendored
Normal file
@@ -0,0 +1,104 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { Coordinate } from './interfaces';
|
||||
import { Color } from './utils';
|
||||
export default class ColorPicker extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdColorPickerProps;
|
||||
observers: {
|
||||
format(): void;
|
||||
swatchColors(value: any): void;
|
||||
type(value: any): void;
|
||||
'usePopup, visible'(usePopup: boolean, visible: boolean): void;
|
||||
value(v: string): void;
|
||||
};
|
||||
color: Color;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
panelRect: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
sliderRect: {
|
||||
width: number;
|
||||
left: number;
|
||||
};
|
||||
saturationInfo: {
|
||||
saturation: number;
|
||||
value: number;
|
||||
};
|
||||
saturationThumbStyle: {
|
||||
left: number;
|
||||
top: number;
|
||||
};
|
||||
sliderInfo: {
|
||||
value: number;
|
||||
};
|
||||
hueSliderStyle: {
|
||||
left: number;
|
||||
};
|
||||
alphaSliderStyle: {
|
||||
left: number;
|
||||
};
|
||||
innerValue: string;
|
||||
showPrimaryColorPreview: boolean;
|
||||
previewColor: string;
|
||||
formatList: any[];
|
||||
innerSwatchList: any;
|
||||
isMultiple: boolean;
|
||||
defaultOverlayProps: {};
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
attached(): void;
|
||||
detached(): void;
|
||||
};
|
||||
methods: {
|
||||
init(): void;
|
||||
updateEleRect(e: WechatMiniprogram.TouchEvent): void;
|
||||
getEleReact(): void;
|
||||
clickSwatch(e: any): void;
|
||||
setCoreStyle(): void;
|
||||
emitColorChange(trigger: any): void;
|
||||
defaultEmptyColor(): string;
|
||||
updateColor(): void;
|
||||
getSaturationAndValueByCoordinate(coordinate: Coordinate): {
|
||||
saturation: number;
|
||||
value: number;
|
||||
};
|
||||
getSaturationThumbStyle({ saturation, value }: {
|
||||
saturation: any;
|
||||
value: any;
|
||||
}): {
|
||||
color: any;
|
||||
left: string;
|
||||
top: string;
|
||||
};
|
||||
getSliderThumbStyle({ value, maxValue }: {
|
||||
value: any;
|
||||
maxValue: any;
|
||||
}): {
|
||||
left: string;
|
||||
color: any;
|
||||
};
|
||||
onChangeSaturation({ saturation, value }: {
|
||||
saturation: any;
|
||||
value: any;
|
||||
}): void;
|
||||
formatValue(): any;
|
||||
onChangeSlider({ value, isAlpha }: {
|
||||
value: any;
|
||||
isAlpha: any;
|
||||
}): void;
|
||||
handleSaturationDrag(e: any): void;
|
||||
handleSliderDrag(e: any, isAlpha?: boolean): void;
|
||||
handleDiffDrag(e: any): void;
|
||||
onTouchStart(e: any): void;
|
||||
onTouchMove(e: any): void;
|
||||
onTouchEnd(e: any): void;
|
||||
close(trigger: string): void;
|
||||
onVisibleChange(): void;
|
||||
};
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"component":true,"usingComponents":{"t-popup":"../popup/popup"}}
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="../common/utils.wxs" module="_"/><t-popup wx:if="{{usePopup}}" class="class" visible="{{visible}}" using-custom-navbar="{{popupProps.usingCustomNavbar || false}}" show-overlay="{{popupProps.showOverlay || true}}" z-index="{{ popupProps.zIndex || 11500 }}" overlay-props="{{ popupProps.overlayProps || defaultOverlayProps }}" placement="bottom" bind:visible-change="onVisibleChange"><slot name="header"/><include src="./template.wxml"/><slot name="footer"/></t-popup><block wx:else><include src="./template.wxml"/></block>
|
||||
@@ -0,0 +1,42 @@
|
||||
@import '../common/style/index.wxss';.t-color-picker__panel{padding:0;width:var(--td-color-picker-panel-width,750rpx);background:var(--td-color-picker-background,#fff);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:0;width:var(--td-color-picker-slider-thumb-size,48rpx);height:var(--td-color-picker-slider-thumb-size,48rpx);border-radius:var(--td-color-picker-border-radius-circle,50%);box-shadow:var(--td-shadow-1,0 1px 10px rgba(0,0,0,.05),0 4px 5px rgba(0,0,0,.08),0 2px 4px -1px rgba(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::after,.t-color-picker__thumb::before{content:'';position:absolute;border-radius:var(--td-color-picker-border-radius-circle,50%);box-sizing:border-box;display:block;border:1px solid #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:0 0;}
|
||||
.t-color-picker__saturation::after,.t-color-picker__saturation::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;}
|
||||
.t-color-picker__saturation::before{background:linear-gradient(90deg,#fff,transparent);}
|
||||
.t-color-picker__saturation::after{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-color-picker-border-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{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,#fff));margin:40rpx 0 16rpx 0;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:0;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-color-picker-margin,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,#fff));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:rgba(0,0,0,.4);font-size:28rpx;text-align:center;line-height:56rpx;height:56rpx;margin-top:40rpx;}
|
||||
.t-color-picker__format-item{background:var(--td-color-picker-format-background-color,var(--td-gray-color-1,#f3f3f3));}
|
||||
.t-color-picker__format-item--first{flex-shrink:0;width:136rpx;border:1px solid #dcdcdc;border-radius:12rpx;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:-1px;border:1px solid #dcdcdc;border-radius: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{margin-top:56rpx;position:relative;}
|
||||
.t-color-picker__swatches+.t-color-picker__swatches{margin-top:var(--td-color-picker-margin,24rpx);}
|
||||
.t-color-picker__swatches-title{font:var(--td-color-picker-swatches-title-font,32rpx);padding:0;color:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:space-between;height:48rpx;line-height:48rpx;}
|
||||
.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: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,.2s) var(--td-anim-time-fn-easing,cubic-bezier(.38,0,.24,1));box-sizing:border-box;flex-shrink:0;margin-right:24rpx;border-radius:var(--td-color-picker-swatch-border-radius,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,.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,6rpx);position:relative;}
|
||||
7
miniprogram_npm/tdesign-miniprogram/color-picker/constants.d.ts
vendored
Normal file
7
miniprogram_npm/tdesign-miniprogram/color-picker/constants.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
export declare const DEFAULT_COLOR = "#001F97";
|
||||
export declare const DEFAULT_SYSTEM_SWATCH_COLORS: string[];
|
||||
export declare const SATURATION_PANEL_DEFAULT_WIDTH = 343;
|
||||
export declare const SATURATION_PANEL_DEFAULT_HEIGHT = 144;
|
||||
export declare const SLIDER_DEFAULT_WIDTH = 303;
|
||||
export declare const HUE_MAX = 360;
|
||||
export declare const ALPHA_MAX = 100;
|
||||
@@ -0,0 +1 @@
|
||||
export const DEFAULT_COLOR="#001F97";export const DEFAULT_SYSTEM_SWATCH_COLORS=["#F2F3FF","#D9E1FF","#B5C7FF","#8EABFF","#618DFF","#366EF4","#0052D9","#003CAB","#002A7C","#001A57"];export const SATURATION_PANEL_DEFAULT_WIDTH=343;export const SATURATION_PANEL_DEFAULT_HEIGHT=144;export const SLIDER_DEFAULT_WIDTH=303;export const HUE_MAX=360;export const ALPHA_MAX=100;
|
||||
5
miniprogram_npm/tdesign-miniprogram/color-picker/interfaces.d.ts
vendored
Normal file
5
miniprogram_npm/tdesign-miniprogram/color-picker/interfaces.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
export interface Coordinate {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
export declare type ColorPickerChangeTrigger = 'palette-saturation-brightness' | 'palette-saturation' | 'palette-brightness' | 'palette-hue-bar' | 'palette-alpha-bar' | 'preset';
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
3
miniprogram_npm/tdesign-miniprogram/color-picker/props.d.ts
vendored
Normal file
3
miniprogram_npm/tdesign-miniprogram/color-picker/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdColorPickerProps } from './type';
|
||||
declare const props: TdColorPickerProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={autoClose:{type:Boolean,value:!0},enableAlpha:{type:Boolean,value:!1},fixed:{type:Boolean,value:!1},format:{type:String,value:"RGB"},popupProps:{type:Object,value:{}},swatchColors:{type:Array},type:{type:String,value:"base"},usePopup:{type:Boolean,value:!1},value:{type:String,value:null},defaultValue:{type:String,value:""},visible:{type:Boolean,value:!1}};export default props;
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="../common/utils.wxs" module="_"/><view class="{{classPrefix}}__panel" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__body {{classPrefix}}__body--{{type}}"><view class="{{classPrefix}}__saturation" wx:if="{{isMultiple}}" catchtouchstart="onTouchStart" catchtouchmove="onTouchMove" catchtouchend="onTouchEnd" data-type="saturation" style="background: hsl({{sliderInfo.value}}, 100%, 50%)"><view class="{{classPrefix}}__thumb" tabIndex="{{0}}" style="{{_._style(saturationThumbStyle)}}"></view></view><view class="{{classPrefix}}__sliders-wrapper" wx:if="{{isMultiple}}"><view class="{{classPrefix}}__sliders"><view class="{{classPrefix}}__slider-wrapper {{classPrefix}}__slider-wrapper--hue-type"><view class="{{classPrefix}}__slider" catchtouchstart="onTouchStart" catchtouchmove="onTouchMove" catchtouchend="onTouchEnd" data-type="hue-slider"><view class="{{classPrefix}}__rail"></view><view class="{{classPrefix}}__thumb" style="{{_._style(hueSliderStyle)}}"></view></view></view><view wx:if="{{enableAlpha}}" class="{{classPrefix}}__slider-wrapper {{classPrefix}}__slider-wrapper--alpha-type"><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%)"></view><view class="{{classPrefix}}__slider" catchtouchstart="onTouchStart" catchtouchmove="onTouchMove" catchtouchend="onTouchEnd" data-type="alpha-slider"><view class="{{classPrefix}}__rail" style="background: linear-gradient(to right, rgba(0, 0, 0, 0), {{alphaSliderStyle.color}})"></view><view class="{{classPrefix}}__thumb" style="{{_._style(alphaSliderStyle)}}"></view></view></view></view><view wx:if="{{showPrimaryColorPreview}}" class="{{classPrefix}}__sliders-preview {{classPrefix}}--bg-alpha"><view class="{{classPrefix}}__sliders-preview-inner" style="background: {{previewColor}}"/></view></view><view class="{{classPrefix}}__format" wx:if="{{isMultiple}}"><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 wx:for="{{formatList}}" wx:key="index" class="{{classPrefix}}__format-input {{classPrefix}}__format-input--{{ index === formatList.length - 1 && formatList.length === 2 ? 'fixed' : 'base' }}">{{item}}</view></view></view></view><view class="{{classPrefix}}__swatches-wrap" wx:if="{{innerSwatchList.length}}"><view class="{{classPrefix}}__swatches"><view class="{{classPrefix}}__swatches-title" wx:if="{{isMultiple}}">系统预设色彩</view><view class="{{classPrefix}}__swatches-items"><view wx:for="{{innerSwatchList}}" wx:for-item="swatch" wx:key="swatch" class="{{classPrefix}}__swatches-item" data-value="{{swatch}}" catch:tap="clickSwatch"><view class="{{classPrefix}}__swatches-inner" style="background-color: {{swatch}};"></view></view></view></view></view></view></view>
|
||||
48
miniprogram_npm/tdesign-miniprogram/color-picker/type.d.ts
vendored
Normal file
48
miniprogram_npm/tdesign-miniprogram/color-picker/type.d.ts
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
import { PopupProps } from '../popup/index';
|
||||
export interface TdColorPickerProps {
|
||||
autoClose?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
enableAlpha?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
fixed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
format?: {
|
||||
type: StringConstructor;
|
||||
value?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS';
|
||||
};
|
||||
popupProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: PopupProps;
|
||||
};
|
||||
swatchColors?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string> | null;
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: TypeEnum;
|
||||
};
|
||||
usePopup?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export declare type TypeEnum = 'base' | 'multiple';
|
||||
1
miniprogram_npm/tdesign-miniprogram/color-picker/type.js
Normal file
1
miniprogram_npm/tdesign-miniprogram/color-picker/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export{};
|
||||
1
miniprogram_npm/tdesign-miniprogram/color-picker/utils.d.ts
vendored
Normal file
1
miniprogram_npm/tdesign-miniprogram/color-picker/utils.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export * from '../common/shared/color-picker/index';
|
||||
@@ -0,0 +1 @@
|
||||
export*from"../common/shared/color-picker/index";
|
||||
Reference in New Issue
Block a user