@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/action-sheet/action-sheet.css

@@ -0,0 +1,162 @@
+.t-action-sheet__content {
+  color: var(--td-action-sheet-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extraLarge, 24rpx));
+  border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extraLarge, 24rpx));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  overflow: hidden;
+}
+.t-action-sheet__content:focus {
+  outline: 0;
+}
+.t-action-sheet--grid {
+  padding-top: var(--td-spacer, 16rpx);
+}
+.t-action-sheet--grid .t-action-sheet__description::after {
+  display: none;
+}
+.t-action-sheet--left .t-action-sheet__description {
+  text-align: left;
+}
+.t-action-sheet--left .t-action-sheet__list-item-content,
+.t-action-sheet--left .t-action-sheet__list-item-desc {
+  justify-content: start;
+}
+.t-action-sheet--left .t-action-sheet__list-item-icon--suffix {
+  margin-left: auto;
+}
+.t-action-sheet__grid {
+  padding-bottom: 16rpx;
+}
+.t-action-sheet__grid--swiper {
+  padding-bottom: 48rpx;
+}
+.t-action-sheet__description {
+  color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font: var(--td-action-sheet-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  text-align: center;
+  padding: var(--td-spacer-1, 24rpx) var(--td-spacer-2, 32rpx);
+  position: relative;
+}
+.t-action-sheet__description:focus {
+  outline: 0;
+}
+.t-action-sheet__description::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-action-sheet__description::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-action-sheet__list-item {
+  flex-direction: column;
+  padding: var(--td-spacer-2, 32rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-action-sheet__list-item:not(:last-child) {
+  position: relative;
+}
+.t-action-sheet__list-item:not(:last-child)::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-action-sheet__list-item:not(:last-child)::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-action-sheet__list-item:focus {
+  outline: 0;
+}
+.t-action-sheet__list-item--disabled {
+  color: var(--td-action-sheet-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-action-sheet__list-item-content,
+.t-action-sheet__list-item-desc {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-action-sheet__list-item-text {
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-action-sheet__list-item-desc {
+  font: var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  margin-top: var(--td-spacer, 16rpx);
+}
+.t-action-sheet__list-item-text,
+.t-action-sheet__list-item-desc {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__list-item-icon {
+  font-size: 48rpx;
+  margin-right: var(--td-spacer, 16rpx);
+}
+.t-action-sheet__list-item-icon--suffix {
+  margin-right: 0;
+  margin-left: var(--td-spacer, 16rpx);
+}
+.t-action-sheet__swiper-wrap {
+  margin-top: 8rpx;
+  position: relative;
+}
+.t-action-sheet__footer {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-action-sheet__gap-list {
+  height: 16rpx;
+  background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-action-sheet__gap-grid {
+  height: 1rpx;
+  background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-action-sheet__cancel {
+  padding: var(--td-spacer-1, 24rpx) var(--td-spacer-2, 32rpx);
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  color: var(--td-action-sheet-cancel-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-action-sheet__dots {
+  position: absolute;
+  left: 50%;
+  bottom: var(--td-spacer-2, 32rpx);
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+}
+.t-action-sheet__dots-item {
+  width: var(--td-action-sheet-dot-size, 16rpx);
+  height: var(--td-action-sheet-dot-size, 16rpx);
+  background-color: var(--td-action-sheet-dot-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  border-radius: 50%;
+  margin: 0 var(--td-spacer, 16rpx);
+  transition: all 0.4s ease-in;
+}
+.t-action-sheet__dots-item.t-is-active {
+  background-color: var(--td-action-sheet-dot-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}

package/dist/action-sheet/action-sheet.vue

@@ -0,0 +1,367 @@
+<template>
+  <view
+    :id="classPrefix"
+    :style="tools._style([rootCustomStyle])"
+    :class="tools.cls(classPrefix, [dataAlign, dataTheme, ['no-description', !description]]) + ' ' + tClass"
+  >
+    <t-popup
+      :visible="dataVisible"
+      placement="bottom"
+      :using-custom-navbar="dataUsingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :show-overlay="dataShowOverlay"
+      :z-index="(dataPopupProps && dataPopupProps.zIndex) || defaultPopUpzIndex"
+      :overlay-props="(dataPopupProps && dataPopupProps.overlayProps) || defaultPopUpProps"
+      @visible-change="onPopupVisibleChange"
+    >
+      <view
+        :class="classPrefix + '__content ' + tClassContent"
+        tabindex="0"
+      >
+        <view
+          v-if="dataDescription"
+          tabindex="0"
+          :class="classPrefix + '__description'"
+        >
+          {{ dataDescription }}
+        </view>
+
+        <block v-if="gridThemeItems.length">
+          <block v-if="gridThemeItems.length === 1">
+            <t-grid
+              align="center"
+              :t-class="classPrefix + '__grid'"
+              :column="dataCount / 2"
+              :class="classPrefix + '__single-wrap'"
+            >
+              <t-grid-item
+                v-for="(item, index) in gridThemeItems[0]"
+                :key="index"
+                :t-class="classPrefix + '__grid-item ' + classPrefix + '__square'"
+                :data-index="index"
+                :icon="{ color: item.color, ...getIconData(item.icon) }"
+                :text="item.label || ''"
+                :description="item.description || ''"
+                :image="item.image || ''"
+                :style="'--td-grid-item-text-color: ' + item.color"
+                @click="onSelect($event, { index })"
+              />
+            </t-grid>
+          </block>
+
+          <block v-else-if="gridThemeItems.length > 1">
+            <view :class="classPrefix + '__swiper-wrap'">
+              <swiper
+                :style="heightStyle"
+                :autoplay="false"
+                :current="currentSwiperIndex"
+                @change="onSwiperChange"
+              >
+                <swiper-item
+                  v-for="(item, index) in gridThemeItems"
+                  :key="index"
+                >
+                  <t-grid
+                    align="center"
+                    :t-class="classPrefix + '__grid ' + classPrefix + '__grid--swiper'"
+                    :column="dataCount / 2"
+                    :custom-style="gridStyle"
+                  >
+                    <t-grid-item
+                      v-for="(item, index1) in item"
+                      :key="index1"
+                      :t-class="classPrefix + '__grid-item'"
+                      :class="classPrefix + '__square'"
+                      :data-index="index"
+                      :icon="{ color: item.color, ...getIconData(item.icon) }"
+                      :text="item.label || ''"
+                      :description="item.description || ''"
+                      :image="item.image || ''"
+                      :style="'--td-grid-item-text-color: ' + item.color"
+                      @click="onSelect($event, { index })"
+                    />
+                  </t-grid>
+                </swiper-item>
+              </swiper>
+              <view :class="classPrefix + '__nav'">
+                <view :class="classPrefix + '__dots'">
+                  <view
+                    v-for="(item, index) in gridThemeItems.length"
+                    :key="index"
+                    :class="classPrefix + '__dots-item ' + (index === currentSwiperIndex ? prefix + '-is-active' : '')"
+                  />
+                </view>
+              </view>
+            </view>
+          </block>
+        </block>
+
+        <view
+          v-else-if="dataItems && dataItems.length"
+          :class="classPrefix + '__list'"
+        >
+          <block
+            v-for="(item, index) in dataItems"
+            :key="index"
+          >
+            <view
+              :data-index="index"
+              :style="item.color ? 'color: ' + item.color : ''"
+              :class="tools.cls(classPrefix + '__list-item', [['disabled', item.disabled]])"
+              :aria-role="ariaRole || 'button'"
+              :aria-label="item.label || item"
+              tabindex="0"
+              @click="() => onSelect(item, { index })"
+            >
+              <view :class="classPrefix + '__list-item-content'">
+                <t-icon
+                  v-if="getIconData(item.icon)"
+                  :prefix="getIconData(item.icon).prefix"
+                  :name="getIconData(item.icon).name"
+                  :size="getIconData(item.icon).size"
+                  :color="getIconData(item.icon).color"
+                  :aria-hidden="getIconData(item.icon).ariaHidden"
+                  :aria-label="getIconData(item.icon).ariaLabel"
+                  :aria-role="getIconData(item.icon).ariaRole"
+                  :t-class="classPrefix + '__list-item-icon'"
+                  :custom-style="iconCustomStyle"
+                />
+                <view :class="classPrefix + '__list-item-text'">
+                  {{ item.label || item }}
+                </view>
+                <t-icon
+                  v-if="getIconData(item.suffixIcon)"
+                  :prefix="getIconData(item.suffixIcon).prefix"
+                  :name="getIconData(item.suffixIcon).name"
+                  :size="getIconData(item.suffixIcon).size"
+                  :color="getIconData(item.suffixIcon).color"
+                  :aria-hidden="getIconData(item.suffixIcon).ariaHidden"
+                  :aria-label="getIconData(item.suffixIcon).ariaLabel"
+                  :aria-role="getIconData(item.suffixIcon).ariaRole"
+                  :t-class="classPrefix + '__list-item-icon ' + classPrefix + '__list-item-icon--suffix'"
+                  style="margin-left: auto;"
+                  :custom-style="suffixIconCustomStyle"
+                />
+              </view>
+              <view
+                v-if="item.description"
+                :class="classPrefix + '__list-item-desc'"
+              >
+                {{ item.description }}
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+      <slot />
+      <view
+        v-if="dataShowCancel"
+        :class="classPrefix + '__footer'"
+      >
+        <view :class="classPrefix + '__gap-' + dataTheme" />
+        <view
+          :class="classPrefix + '__cancel ' + tClassCancel"
+          :hover-class="classPrefix + '__cancel--hover'"
+          hover-stay-time="70"
+          aria-role="button"
+          @click="onCancel"
+        >
+          {{ dataCancelText || '取消' }}
+        </view>
+      </view>
+    </t-popup>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TPopup from '../popup/popup';
+import TGrid from '../grid/grid';
+import TGridItem from '../grid-item/grid-item';
+import { chunk } from '../common/utils';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { actionSheetTheme } from './show';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import tools from '../common/utils.wxs';
+import { getFunctionalMixin } from '../common/functional/mixin';
+import { getIconData } from './computed';
+
+const name = `${prefix}-action-sheet`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [{
+    key: 'visible',
+    event: 'visible-change',
+  }],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-cancel`,
+  ],
+  mixins: [getFunctionalMixin(props), useCustomNavbar],
+  components: {
+    TIcon,
+    TPopup,
+    TGrid,
+    TGridItem,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'visible-change',
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      gridThemeItems: [],
+      currentSwiperIndex: 0,
+      defaultPopUpProps: {},
+      defaultPopUpzIndex: 11500,
+      tools,
+
+      heightStyle: 'height: 456rpx;',
+    };
+  },
+  computed: {
+    rootCustomStyle() {
+      return tools._style([
+        this.customStyle,
+        this.dataTheme === 'grid' ? 'padding-bottom: 16rpx' : '',
+      ]);
+    },
+    iconCustomStyle() {
+      return 'margin-right: 8px;';
+    },
+    suffixIconCustomStyle() {
+      return 'margin-right: 8px;margin-left: auto;';
+    },
+    gridStyle() {
+      return `${this.heightStyle}padding-bottom: 48rpx;`;
+    },
+  },
+  watch: {
+    dataVisible: {
+      handler(e) {
+        if (e) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+    dataItems: {
+      handler() {
+        if (this.dataVisible) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    init() {
+      this.memoInitialData();
+      this.splitGridThemeActions();
+    },
+
+    getIconData,
+
+    memoInitialData() {
+      this.initialData = {
+      };
+    },
+
+    splitGridThemeActions() {
+      if (this.dataTheme !== actionSheetTheme.Grid) return;
+      this.gridThemeItems = chunk(this.dataItems, this.dataCount);
+    },
+
+    /** 指令调用显示 */
+    show(options) {
+      const defaultOptions = [
+        'align',
+        'cancelText',
+        'count',
+        'description',
+        'items',
+        'popupProps',
+        'showCancel',
+        'showOverlay',
+        'theme',
+        'usingCustomNavbar',
+      ].reduce((acc, key) => ({
+        ...acc,
+        [key]: props[key].default,
+      }));
+
+      this.setData({
+        ...defaultOptions,
+        ...options,
+        visible: true,
+      });
+      this.splitGridThemeActions();
+      this.autoClose = true;
+      this._trigger('visible-change', { visible: true });
+    },
+
+    /** 指令调用隐藏 */
+    close() {
+      this.$emit('close', { trigger: 'command' });
+      this._trigger('visible-change', { visible: false });
+    },
+
+    /** 默认点击遮罩关闭 */
+    onPopupVisibleChange(detail) {
+      if (!detail.visible) {
+        this.$emit('close', { trigger: 'overlay' });
+        this._trigger('visible-change', { visible: false });
+      }
+      if (this.autoClose) {
+        this.dataVisible = false;
+        this.autoClose = false;
+      }
+    },
+
+    onSwiperChange(e) {
+      const { current } = e.detail;
+      this.currentSwiperIndex = current;
+    },
+
+    onSelect(event, { index }) {
+      const { currentSwiperIndex, dataItems, gridThemeItems, dataCount, dataTheme } = this;
+      const isSwiperMode = dataTheme === actionSheetTheme.Grid;
+      const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : dataItems[index];
+      const realIndex = isSwiperMode ? index + currentSwiperIndex * dataCount : index;
+
+      if (item) {
+        this.$emit('selected', { selected: item, index: realIndex });
+
+        if (!item.disabled) {
+          this.$emit('close', { trigger: 'select' });
+          this._trigger('visible-change', { visible: false });
+        }
+      }
+    },
+
+    onCancel() {
+      this.$emit('cancel');
+      if (this.autoClose) {
+        this.dataVisible = false;
+        this.autoClose = false;
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+@import './action-sheet.css';
+</style>

package/dist/action-sheet/computed.js

@@ -0,0 +1,29 @@
+import utils from '../common/utils.wxs';
+
+export const getListThemeItemClass = function (props) {
+  const { classPrefix } = props;
+  const { item } = props;
+  const { prefix } = props;
+  const classList = [`${classPrefix}__list-item`];
+  if (item.disabled) {
+    classList.push(`${prefix}-is-disabled`);
+  }
+  return classList.join(' ');
+};
+
+export const getIconData = function (icon) {
+  if (utils.isString(icon)) {
+    return { name: icon };
+  }
+
+  if (utils.isNoEmptyObj(icon)) {
+    return icon;
+  }
+
+  return null;
+};
+
+export const isImage = function (name) {
+  return name.indexOf('/') !== -1;
+};
+

package/dist/action-sheet/index.d.ts

@@ -0,0 +1,11 @@
+import type { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption } from './show.d.ts';
+
+export { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption };
+
+declare type Instance = any;
+
+declare const Handler: {
+  show(options: ActionSheetShowOption): Instance;
+  close(options: ActionSheetShowOption): void;
+};
+export default Handler;

package/dist/action-sheet/index.js

@@ -0,0 +1,13 @@
+import { show, close, ActionSheetTheme, actionSheetTheme } from './show';
+
+export { ActionSheetTheme, actionSheetTheme };
+
+export default {
+  show(options) {
+    return show(options);
+  },
+
+  close(options) {
+    return close(options);
+  },
+};

package/dist/action-sheet/props.ts

@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdActionSheetProps } from './type';
+export default {
+  /** 水平对齐方式 */
+  align: {
+    type: String,
+    default: 'center' as TdActionSheetProps['align'],
+    validator(val: TdActionSheetProps['align']): boolean {
+      if (!val) return true;
+      return ['center', 'left'].includes(val);
+    },
+  },
+  /** 设置取消按钮的文本 */
+  cancelText: {
+    type: String,
+    default: '',
+  },
+  /** 设置每页展示菜单的数量，仅当 type=grid 时有效 */
+  count: {
+    type: Number,
+    default: 8,
+  },
+  /** 动作面板描述文字 */
+  description: {
+    type: String,
+    default: '',
+  },
+  /** 菜单项 */
+  items: {
+    type: Array,
+    default: (): TdActionSheetProps['items'] => [],
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 是否显示取消按钮 */
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 展示类型，列表和表格形式展示 */
+  theme: {
+    type: String,
+    default: 'list' as TdActionSheetProps['theme'],
+    validator(val: TdActionSheetProps['theme']): boolean {
+      if (!val) return true;
+      return ['list', 'grid'].includes(val);
+    },
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 显示与隐藏 */
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 显示与隐藏，非受控属性 */
+  defaultVisible: Boolean,
+  /** 点击取消按钮时触发 */
+  onCancel: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择菜单项时触发 */
+  onSelected: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/action-sheet/show.d.ts

@@ -0,0 +1,28 @@
+import { ActionSheetItem } from './type';
+
+export { ActionSheetItem };
+declare type Instance = any;
+declare type Context = any;
+
+export declare enum ActionSheetTheme {
+  List = 'list',
+  Grid = 'grid'
+}
+
+interface ActionSheetProps {
+  align: 'center' | 'left';
+  cancelText?: string;
+  count?: number;
+  description: string;
+  items: Array<string | ActionSheetItem>;
+  showCancel?: boolean;
+  theme?: ActionSheetTheme;
+  visible: boolean;
+  defaultVisible?: boolean;
+}
+export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
+  context?: Context;
+  selector?: string;
+}
+export declare const show: (options: ActionSheetShowOption) => Instance;
+export declare const close: (options: ActionSheetShowOption) => void;