project init & fix ui

miniprogram_npm/tdesign-miniprogram/search/README.md

@@ -0,0 +1,59 @@
+---
+title: Search 搜索框
+description: 用于用户输入搜索信息，并进行页面内容搜索。
+spline: form
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-search": "tdesign-miniprogram/search/search"
+}
+```
+
+## 代码演示
+
+### 基础搜索框
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/search.png" width="375px" height="50%">
+
+{{ base }}
+
+
+### 状态
+
+{{ status }}
+
+## API
+### Search Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+action | String / Slot | '' | 自定义右侧操作按钮文字 | N
+center | Boolean | false | 是否居中 | N
+disabled | Boolean | false | 是否禁用 | N
+external-classes | Array | - | 组件外部样式类名，分别用于设置组件外层类名、输入框类名、输入框容器类名、右侧 cancel 文本类名、左侧图标类名、右侧图标类型。`['t-class', 't-class-input', 't-class-input-container', 't-class-action','t-class-left','t-class-right']` | N
+focus | Boolean | false | 是否聚焦 | N
+label | String | '' | 左侧文本 | N
+left-icon | String / Slot | 'search' | 左侧图标 | N
+placeholder | String | '' | 占位符 | N
+right-icon | String / Slot | 'close-circle-filled' | 右侧图标 | N
+shape | String | 'square' | 搜索框形状。可选项：square/round | N
+value | String | '' | 值 | N
+
+### Search Events
+
+名称 | 参数 | 描述
+-- | -- | --
+action-click | `({})` | 点击右侧操作按钮文字时触发
+blur | `({ value: string })` | 失去焦点时触发
+change | `({ value: string })` | 值发生变化时触发
+clear | `({ value: string })` | 点击清除时触发
+focus | `({ value: string })` | 聚焦时触发
+submit | `({ value: string })` | 提交时触发

miniprogram_npm/tdesign-miniprogram/search/props.d.ts

@@ -0,0 +1,3 @@
+import { TdSearchProps } from './type';
+declare const props: TdSearchProps;
+export default props;

miniprogram_npm/tdesign-miniprogram/search/props.js

@@ -0,0 +1,50 @@
+const props = {
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    action: {
+        type: String,
+        value: '',
+    },
+    center: {
+        type: Boolean,
+        value: false,
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    focus: {
+        type: Boolean,
+        value: false,
+    },
+    label: {
+        type: String,
+        value: '',
+    },
+    leftIcon: {
+        type: String,
+        value: 'search',
+    },
+    placeholder: {
+        type: String,
+        value: '',
+    },
+    rightIcon: {
+        type: String,
+        value: 'close-circle-filled',
+    },
+    shape: {
+        type: String,
+        value: 'square',
+    },
+    value: {
+        type: String,
+        value: '',
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/search/search.d.ts

@@ -0,0 +1,24 @@
+import { SuperComponent } from '../common/src/index';
+export default class Search extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdSearchProps;
+    observers: {
+        focus(this: Search, nextValue: boolean): void;
+    };
+    data: {
+        classPrefix: string;
+        prefix: string;
+        localValue: {
+            focus: boolean;
+        };
+    };
+    onInput(e: any): void;
+    onFocus(e: any): void;
+    onBlur(e: any): void;
+    handleClear(): void;
+    onConfirm(e: any): void;
+    onActionClick(): void;
+}

miniprogram_npm/tdesign-miniprogram/search/search.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-search`;
+let Search = class Search extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-input-container`,
+            `${prefix}-class-input`,
+            `${prefix}-class-action`,
+            `${prefix}-class-left`,
+            `${prefix}-class-right`,
+        ];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.observers = {
+            focus(nextValue) {
+                this.setData({ 'localValue.focus': nextValue });
+            },
+        };
+        this.data = {
+            classPrefix: name,
+            prefix,
+            localValue: {
+                focus: false,
+            },
+        };
+    }
+    onInput(e) {
+        const { value } = e.detail;
+        this.setData({ value });
+        this.triggerEvent('change', { value });
+    }
+    onFocus(e) {
+        const { value } = e.detail;
+        this.setData({ 'localValue.focus': true });
+        this.triggerEvent('focus', { value });
+    }
+    onBlur(e) {
+        const { value } = e.detail;
+        this.setData({ 'localValue.focus': false });
+        this.triggerEvent('blur', { value });
+    }
+    handleClear() {
+        this.setData({ value: '' });
+        this.triggerEvent('clear', { value: '' });
+    }
+    onConfirm(e) {
+        const { value } = e.detail;
+        this.triggerEvent('submit', { value });
+    }
+    onActionClick() {
+        this.triggerEvent('action-click');
+    }
+};
+Search = __decorate([
+    wxComponent()
+], Search);
+export default Search;

miniprogram_npm/tdesign-miniprogram/search/search.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}

miniprogram_npm/tdesign-miniprogram/search/search.wxml

@@ -0,0 +1,56 @@
+<view style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class">
+  <view
+    class="{{classPrefix}}__input-box {{prefix}}-{{localValue.focus ? 'is-focused' : 'not-focused'}} {{classPrefix}}__input-box--{{center ? 'center' : ''}} {{classPrefix}}__input-box--{{shape}} {{prefix}}-class-input-container"
+  >
+    <!-- <view wx:if="{{label}}" class="{{classPrefix}}__label {{prefix}}-class-label">{{label}}</view>
+    <slot name="label" /> -->
+    <t-icon
+      wx:if="{{leftIcon}}"
+      name="{{leftIcon}}"
+      size="24"
+      class="{{prefix}}-icon {{prefix}}-class-left"
+      aria-hidden="{{true}}"
+    />
+    <slot name="left-icon" />
+    <input
+      type="text"
+      name="input"
+      disabled="{{disabled}}"
+      class="{{prefix}}-input__keyword {{prefix}}-class-input"
+      focus="{{localValue.focus}}"
+      value="{{value}}"
+      confirm-type="search"
+      placeholder="{{placeholder}}"
+      placeholder-class="{{classPrefix}}__placeholder {{classPrefix}}__placeholder--{{center ? 'center': 'normal'}}"
+      bind:input="onInput"
+      bind:focus="onFocus"
+      bind:blur="onBlur"
+      bind:confirm="onConfirm"
+    />
+    <view
+      wx:if="{{value !==''}}"
+      class="{{classPrefix}}__right {{prefix}}-class-right"
+      bind:tap="handleClear"
+      aria-role="button"
+      aria-label="清除"
+    >
+      <t-icon
+        wx:if="{{rightIcon}}"
+        name="{{rightIcon}}"
+        class="{{prefix}}-icon"
+        size="18px"
+        color="rgba(187,187,187,1)"
+      />
+      <slot name="right-icon" />
+    </view>
+  </view>
+  <view
+    wx:if="{{action}}"
+    class="{{classPrefix}}__search-action {{prefix}}-class-action"
+    bindtap="onActionClick"
+    aria-role="button"
+  >
+    {{action}}
+  </view>
+  <slot name="action-text" />
+</view>

miniprogram_npm/tdesign-miniprogram/search/search.wxss

@@ -0,0 +1,97 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-search {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.t-search__label {
+  padding: 8rpx;
+  color: var(--search-label-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-search__input-box {
+  flex: 1;
+  box-sizing: border-box;
+  display: flex;
+  height: var(--td-search-height, 80rpx);
+  align-items: center;
+  border: 2rpx solid var(--td-search-bg-color, var(--td-gray-color-1, #f3f3f3));
+  background: var(--td-search-bg-color, var(--td-gray-color-1, #f3f3f3));
+  padding: var(--td-search-padding, 16rpx 24rpx);
+}
+.t-search__input-box.t-is-focused {
+  border-color: var(--td-search-bg-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-search__input-box--round {
+  border-radius: calc(var(--td-search-height, 80rpx) / 2);
+}
+.t-search__input-box--square {
+  border-radius: var(--td-search-square-radius, var(--td-radius-default, 12rpx));
+}
+.t-search__input-box--center {
+  text-align: center;
+}
+.t-search__input-box .t-input__keyword {
+  display: inline-block;
+  flex: 1;
+  color: var(--td-search-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  font-size: var(--td-search-font-size, var(--td-font-size-m, 32rpx));
+  padding-left: 10rpx;
+}
+.t-search__input-box .t-icon {
+  color: var(--td-search-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
+.t-search__right {
+  position: relative;
+  margin-left: 10px;
+  color: var(--td-search-right-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
+.t-search__right.relative {
+  position: relative;
+}
+.t-search__right::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-search__search-action {
+  margin-left: 30rpx;
+  font-size: var(--td-search-font-size, var(--td-font-size-m, 32rpx));
+  color: var(--td-search-action-color, var(--td-primary-color, #0052d9));
+}
+.t-search__placeholder {
+  color: var(--td-search-placeholder-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
+.t-search__placeholder--center {
+  text-align: center;
+}

miniprogram_npm/tdesign-miniprogram/search/type.d.ts

@@ -0,0 +1,50 @@
+export interface TdSearchProps {
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    action?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    center?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-input', 't-class-input-container', 't-class-cancel', 't-class-left', 't-class-right'];
+    };
+    focus?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    label?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    leftIcon?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    placeholder?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    rightIcon?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'square' | 'round';
+    };
+    value?: {
+        type: StringConstructor;
+        value?: string;
+    };
+}

miniprogram_npm/tdesign-miniprogram/search/type.js

@@ -0,0 +1 @@
+export {};