@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/search/search.css

@@ -0,0 +1,75 @@
+.t-search {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.t-search__label {
+  padding: 8rpx;
+  color: var(--td-search-label-color, var(--td-text-color-primary, 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-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+  background: var(--td-search-bg-color, var(--td-bg-color-secondarycontainer, 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-bg-color-secondarycontainer, 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-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font: var(--td-search-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  padding-left: 10rpx;
+  min-height: 48rpx;
+}
+.t-search__input-box .t-input--disabled {
+  color: var(--td-search-disabled-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+}
+.t-search__input-box .t-icon {
+  color: var(--td-search-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font-size: var(--td-search-icon-size, 48rpx);
+}
+.t-search__clear {
+  position: relative;
+  margin-left: 10px;
+  font-size: var(--td-search-clear-icon-size, 48rpx);
+  color: var(--td-search-clear-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-search__search-action {
+  margin-left: 30rpx;
+  font: var(--td-search-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-search-action-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-search__placeholder {
+  color: var(--td-search-placeholder-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-search__placeholder--center {
+  text-align: center;
+}
+:deep(.t-search__result-item--highLight) {
+  color: var(--td-search-result-high-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-search__result-list :deep(.t-search__result-item) {
+  padding-left: 0;
+}
+.t-search__result-list :deep(.t-search__result-item)::after {
+  left: 0;
+}

package/dist/search/search.vue

@@ -0,0 +1,285 @@
+<template>
+  <view>
+    <view
+      :style="tools._style([customStyle])"
+      :class="classPrefix + ' ' + tClass"
+    >
+      <view
+        :class="
+          classPrefix +'__input-box ' +
+            prefix + '-' +(focus ? 'is-focused' : 'not-focused') +
+            ' ' + classPrefix + '__input-box--' + (center ? 'center' : '') +
+            ' ' + classPrefix + '__input-box--' + shape +
+            ' ' + tClassInputContainer
+        "
+      >
+        <t-icon
+          v-if="leftIcon"
+          :name="leftIcon"
+          :t-class="prefix + '-icon ' + tClassLeft"
+          :aria-hidden="true"
+        />
+        <slot
+          v-else
+          name="left-icon"
+        />
+        <input
+          :type="type"
+          name="input"
+          :maxlength="maxlength"
+          :disabled="disabled || readonly"
+          :class="prefix + '-input__keyword ' + tClassInput + ' ' + (disabled ? prefix + '-input--disabled' : '')"
+          :focus="focus"
+          :value="dataValue"
+          :confirm-type="confirmType"
+          :confirm-hold="confirmHold"
+          :cursor="cursor"
+          :adjust-position="adjustPosition"
+          :always-embed="alwaysEmbed"
+          :selection-start="selectionStart"
+          :selection-end="selectionEnd"
+          :hold-keyboard="holdKeyboard"
+          :cursor-spacing="cursorSpacing"
+          :cursor-color="cursorColor"
+          :placeholder="placeholder"
+          :placeholder-style="placeholderStyle"
+          :placeholder-class="placeholderClass + ' ' + classPrefix + '__placeholder ' + classPrefix + '__placeholder--' + (center ? 'center' : 'normal')"
+          @input="onInput"
+          @focus="onFocus"
+          @blur="onBlur"
+          @confirm="onConfirm"
+        >
+        <view
+          v-if="dataValue !== '' && clearable && showClearIcon"
+          :class="classPrefix + '__clear hotspot-expanded ' + tClassClear"
+          aria-role="button"
+          aria-label="清除"
+          @touchstart.stop.prevent="handleClear"
+        >
+          <t-icon
+            name="close-circle-filled"
+            size="inherit"
+            color="inherit"
+          />
+        </view>
+      </view>
+      <view
+        v-if="action"
+        :class="classPrefix + '__search-action ' + tClassAction"
+        aria-role="button"
+        @click.stop.prevent="onActionClick"
+      >
+        {{ action }}
+      </view>
+      <slot
+        v-else
+        name="action"
+      />
+    </view>
+    <view
+      v-if="isShowResultList && !isSelected"
+      :class="classPrefix + '__result-list'"
+      aria-role="listbox"
+    >
+      <t-cell
+        v-for="(item, index) in resultList"
+        :key="index"
+        :data-index="index"
+        :t-class="classPrefix + '__result-item'"
+        hover
+        aria-role="option"
+        @click="onSelectResultItem($event, { index })"
+      >
+        <template
+          #title
+        >
+          <rich-text
+            :nodes="highLight(item, dataValue)"
+          />
+        </template>
+      </t-cell>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TCell from '../cell/cell';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getCharacterLength, nextTick } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { highLight } from './computed.js';
+// import { getInnerMaxLen } from '../input/utils';
+
+const name = `${prefix}-search`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-input-container`,
+    `${prefix}-class-input`,
+    `${prefix}-class-action`,
+    `${prefix}-class-left`,
+    `${prefix}-class-clear`,
+  ],
+  components: {
+    TIcon,
+    TCell,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'selectresult',
+  ],
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      isShowResultList: false,
+      isSelected: false,
+      showClearIcon: false,
+      tools,
+
+      dataValue: this.value,
+      // innerMaxLen: -1,
+      // rawValue: '',
+    };
+  },
+  watch: {
+    resultList: {
+      handler(val) {
+        const { isSelected } = this;
+        if (val.length) {
+          if (isSelected) {
+          // 已选择
+            this.isShowResultList = false;
+            this.isSelected = false;
+          } else {
+            this.isShowResultList = true;
+          }
+        } else {
+          this.isShowResultList = false;
+        }
+      },
+      immediate: true,
+    },
+
+    dataValue: {
+      handler() {
+        // this.updateInnerMaxLen();
+        this.updateClearIconVisible();
+      },
+    },
+    clearTrigger: 'updateClearIconVisible',
+    clearable: 'updateClearIconVisible',
+    disabled: 'updateClearIconVisible',
+    readonly: 'updateClearIconVisible',
+
+    // maxcharacter: 'updateInnerMaxLen',
+    // maxlength: 'updateInnerMaxLen',
+  },
+  mounted() {
+    this.updateClearIconVisible();
+  },
+  methods: {
+    updateClearIconVisible(value = false) {
+      const { clearTrigger, disabled, readonly, dataValue } = this;
+      if (disabled || readonly || !dataValue) {
+        this.showClearIcon = false;
+        return;
+      }
+
+      this.showClearIcon = value || String(clearTrigger) === 'always';
+    },
+
+    onInput(e) {
+      let { value } = e.detail;
+      // this.rawValue = value;
+      this.dataValue = value;
+
+      const { maxcharacter } = this;
+      if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
+        const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+
+        value = characters;
+      }
+
+
+      nextTick().then(() => {
+        this.dataValue = value;
+        this.$emit('change', { value });
+      });
+      // this.updateInnerMaxLen();
+    },
+
+    onFocus(e) {
+      const { value } = e.detail;
+      this.updateClearIconVisible(true);
+      this.$emit('focus', { value });
+    },
+
+    onBlur(e) {
+      const { value } = e.detail;
+      this.updateClearIconVisible();
+      this.$emit('blur', { value });
+    },
+
+    handleClear() {
+      this.dataValue = '';
+      this.$emit('clear', { value: '' });
+      this.$emit('change', { value: '' });
+    },
+
+    onConfirm(e) {
+      const { value } = e.detail;
+      this.$emit('submit', { value });
+    },
+
+    onActionClick() {
+      this.$emit('action-click');
+    },
+
+    onSelectResultItem(tools, { index }) {
+      const item = this.resultList[index];
+      this.dataValue = item;
+      this.isSelected = true;
+
+      this.$emit('change', { value: item });
+      this.$emit('selectresult', { index, item });
+    },
+    highLight,
+    // updateInnerMaxLen() {
+    //   // this.innerMaxLen = this.getInnerMaxLen();
+    // },
+    // getInnerMaxLen() {
+    //   const {
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   } = this;
+    //   return getInnerMaxLen({
+    //     allowInputOverMax: false,
+    //     maxcharacter,
+    //     maxlength,
+    //     dataValue,
+    //     rawValue,
+    //     count,
+    //   });
+    // },
+  },
+});
+
+
+</script>
+<style scoped>
+@import './search.css';
+</style>

package/dist/search/type.ts

@@ -0,0 +1,165 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSearchProps {
+  /**
+   * 自定义右侧操作按钮文字
+   * @default ''
+   */
+  action?: string;
+  /**
+   * 键盘弹起时，是否自动上推页面
+   * @default true
+   */
+  adjustPosition?: boolean;
+  /**
+   * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
+   * @default false
+   */
+  alwaysEmbed?: boolean;
+  /**
+   * 是否居中
+   * @default false
+   */
+  center?: boolean;
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
+  /**
+   * 是否启用清除控件
+   * @default true
+   */
+  clearable?: boolean;
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   * @default false
+   */
+  confirmHold?: boolean;
+  /**
+   * 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)
+   * @default search
+   */
+  confirmType?: 'send' | 'search' | 'next' | 'go' | 'done';
+  /**
+   * 指定 focus 时的光标位置
+   * @default -1
+   */
+  cursor?: number;
+  /**
+   * 光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制
+   * @default #0052d9
+   */
+  cursorColor?: string;
+  /**
+   * 搜索框聚焦时底部与键盘的距离
+   * @default 0
+   */
+  cursorSpacing?: number;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否聚焦
+   * @default false
+   */
+  focus?: boolean;
+  /**
+   * focus时，点击页面的时候不收起键盘
+   * @default false
+   */
+  holdKeyboard?: boolean;
+  /**
+   * 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值
+   * @default 'search'
+   */
+  leftIcon?: string;
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
+   */
+  maxcharacter?: number;
+  /**
+   * 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
+   * @default -1
+   */
+  maxlength?: number;
+  /**
+   * 占位符
+   * @default ''
+   */
+  placeholder?: string;
+  /**
+   * 指定 placeholder 的样式类
+   * @default input-placeholder
+   */
+  placeholderClass?: string;
+  /**
+   * 指定 placeholder 的样式
+   * @default ''
+   */
+  placeholderStyle?: string;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * 预览结果列表
+   * @default []
+   */
+  resultList?: Array<string>;
+  /**
+   * 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
+   * @default -1
+   */
+  selectionEnd?: number;
+  /**
+   * 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
+   * @default -1
+   */
+  selectionStart?: number;
+  /**
+   * 搜索框形状
+   * @default 'square'
+   */
+  shape?: 'square' | 'round';
+  /**
+   * 拉起键盘的类型
+   * @default 'text'
+   */
+  type?: 'text' | 'number' | 'idcard' | 'digit' | 'nickname';
+  /**
+   * 值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 点击右侧操作按钮文字时触发
+   */
+  onActionClick?: () => void;
+  /**
+   * 失去焦点时触发
+   */
+  onBlur?: (context: { value: string }) => void;
+  /**
+   * 值发生变化时触发
+   */
+  onChange?: (context: { value: string }) => void;
+  /**
+   * 点击清除时触发
+   */
+  onClear?: (context: { value: string }) => void;
+  /**
+   * 聚焦时触发
+   */
+  onFocus?: (context: { value: string }) => void;
+  /**
+   * 提交时触发
+   */
+  onSubmit?: (context: { value: string }) => void;
+}

package/dist/side-bar/README.en-US.md

@@ -0,0 +1,58 @@
+:: BASE_DOC ::
+
+## API
+
+### SideBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+value | String / Number | - | `v-model:value` is supported | N
+default-value | String / Number | - | uncontrolled property | N
+
+### SideBar Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: number \| string, label: string })` | \-
+click | `(context: { value: number \| string; label: string })` | \-
+
+### SideBar Slots
+
+name | Description
+-- | --
+\- | \-
+
+
+### SideBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/side-bar-item/type.ts) | N
+disabled | Boolean | false | \- | N
+icon | String / Object | - | \- | N
+label | String | - | \- | N
+value | String / Number | - | \- | N
+
+### SideBarItem Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | -
+--td-side-bar-height | 100% | -
+--td-side-bar-width | 206rpx | -
+--td-side-bar-active-color | @brand-color | -
+--td-side-bar-border-radius | 18rpx | -
+--td-side-bar-color | @text-color-primary | -
+--td-side-bar-disabled-color | @text-color-disabled | -
+--td-side-bar-font | @font-body-large | -
+--td-side-bar-icon-size | 40rpx | -
+--td-side-bar-item-height | auto | -

package/dist/side-bar/README.md

@@ -0,0 +1,89 @@
+---
+title: SideBar 侧边栏
+description: 用于信息分类后的展示切换或锚点，位于页面左侧。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSideBar from '@tdesign/uniapp/side-bar/side-bar.vue';
+import TSideBarItem from '@tdesign/uniapp/side-bar-item/side-bar-item.vue';
+```
+
+### 锚点用法
+
+{{ base }}
+
+### 切页用法
+
+{{ switch }}
+
+### 带图标侧边导航
+
+{{ with-icon }}
+
+### 自定义样式
+
+{{ custom }}
+
+## API
+
+### SideBar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+value | String / Number | - | 选项值。支持语法糖 `v-model:value` | N
+default-value | String / Number | - | 选项值。非受控属性 | N
+
+### SideBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: number \| string, label: string })` | 选项值发生变化时触发
+click | `(context: { value: number \| string; label: string })` | 点击选项时触发
+
+### SideBar Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义侧边导航栏内容
+
+
+### SideBarItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | - | 透传至 Badge 组件。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/side-bar-item/type.ts) | N
+disabled | Boolean | false | 是否禁用 | N
+icon | String / Object | - | 图标，传对象则透传至 Icon | N
+label | String | - | 展示的标签 | N
+value | String / Number | - | 当前选项的值 | N
+
+### SideBarItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义侧边导航项内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | -
+--td-side-bar-height | 100% | -
+--td-side-bar-width | 206rpx | -
+--td-side-bar-active-color | @brand-color | -
+--td-side-bar-border-radius | 18rpx | -
+--td-side-bar-color | @text-color-primary | -
+--td-side-bar-disabled-color | @text-color-disabled | -
+--td-side-bar-font | @font-body-large | -
+--td-side-bar-icon-size | 40rpx | -
+--td-side-bar-item-height | auto | -

package/dist/side-bar/props.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 选项值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 选项值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 选项值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击选项时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};