@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/drawer/drawer.css

@@ -0,0 +1,62 @@
+.t-drawer {
+  background: var(--td-drawer-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  width: var(--td-drawer-width, 560rpx);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.t-drawer--hover {
+  background-color: var(--td-drawer-hover-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-drawer__title {
+  font: var(--td-drawer-title-font, var(--td-font-title-large, 600 36rpx / 52rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  padding: 48rpx 32rpx 16rpx;
+  color: var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-drawer__sidebar {
+  height: var(--td-drawer-sidebar-height, 70vh);
+}
+.t-drawer__sidebar-item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding-top: var(--td-drawer-item-padding, 32rpx);
+  padding-right: 0;
+  padding-bottom: var(--td-drawer-item-padding, 32rpx);
+  padding-left: var(--td-drawer-item-padding, 32rpx);
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-drawer__sidebar-item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-drawer-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-drawer__sidebar-item::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-drawer__sidebar-item::after {
+  left: var(--td-drawer-item-padding, 32rpx);
+}
+.t-drawer__sidebar-item-title {
+  flex: 1;
+  color: var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-drawer__sidebar-item-icon {
+  padding-right: 16rpx;
+  color: var(--td-drawer-item-icon-color, var(--td-drawer-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))));
+  font-size: var(--td-drawer-item-icon-size, 48rpx);
+}
+.t-drawer__footer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--td-drawer-footer-padding-bottom, 40rpx);
+}

package/dist/drawer/drawer.vue

@@ -0,0 +1,144 @@
+<template>
+  <view>
+    <t-popup
+      v-if="!destroyOnClose || dataVisible"
+      :custom-style="tools._style([customStyle])"
+      :visible="dataVisible"
+      :z-index="zIndex"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      :placement="placement == 'right' ? 'right' : 'left'"
+      :show-overlay="showOverlay"
+      :overlay-props="overlayProps"
+      :close-on-overlay-click="closeOnOverlayClick"
+      @visible-change="onVisibleChange"
+    >
+      <view :class="classPrefix">
+        <slot name="title" />
+        <view
+          v-if="title"
+          :class="classPrefix + '__title'"
+        >
+          {{ title }}
+        </view>
+        <scroll-view
+          :class="classPrefix + '__sidebar'"
+          scroll-y
+          type="list"
+        >
+          <view
+            v-for="(item, index) in items"
+            :key="index"
+            :class="classPrefix + '__sidebar-item'"
+            :hover-class="classPrefix + '--hover'"
+            :hover-start-time="0"
+            :hover-stay-time="100"
+            wx:item="item"
+            :data-item="item"
+            :data-index="index"
+            :aria-role="ariaRole || 'button'"
+            :aria-label="item.title"
+            @click="onItemClick"
+          >
+            <view
+              v-if="item.icon"
+              :aria-hidden="true"
+              :class="classPrefix + '__sidebar-item-icon'"
+            >
+              <t-icon :name="item.icon" />
+            </view>
+
+            <view :class="classPrefix + '__sidebar-item-title'">
+              {{ item.title }}
+            </view>
+          </view>
+        </scroll-view>
+        <view :class="classPrefix + '__footer'">
+          <slot />
+          <slot name="footer" />
+        </view>
+      </view>
+    </t-popup>
+  </view>
+</template>
+<script>
+import TPopup from '../popup/popup';
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-drawer`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  mixins: [
+    useCustomNavbar,
+  ],
+  components: {
+    TPopup,
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+    'close',
+    'overlay-click',
+    'item-click',
+  ],
+  data() {
+    return {
+      classPrefix: name,
+      tools,
+      dataVisible: coalesce(this.visible, this.defaultVisible),
+    };
+  },
+  watch: {
+    visible(e) {
+      this.dataVisible = e;
+    },
+  },
+  methods: {
+    // closeOnOverlayClick 为 true 时才能触发 popup 的 visible-change 事件
+    onVisibleChange(detail) {
+      const { visible } = detail;
+      const { showOverlay } = this;
+
+      this.dataVisible = visible;
+
+      if (!visible) {
+        this.$emit('close', { trigger: 'overlay' });
+      }
+
+      if (showOverlay) {
+        this.$emit('overlay-click', { visible });
+      }
+      this.$emit('update:visible', visible);
+    },
+
+    onItemClick(detail) {
+      const { index, item } = detail.currentTarget.dataset;
+
+      this.$emit('item-click', { index, item });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './drawer.css';
+</style>
+<style>
+.t-drawer__sidebar {
+  width: 100%;
+}
+</style>

package/dist/drawer/props.ts

@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdDrawerProps } from './type';
+export default {
+  /** 点击蒙层时是否触发抽屉关闭事件 */
+  closeOnOverlayClick: {
+    type: Boolean,
+    default: true,
+  },
+  /** 抽屉关闭时是否销毁节点 */
+  destroyOnClose: Boolean,
+  /** 抽屉里的列表项 */
+  items: {
+    type: Array,
+  },
+  /** 遮罩层的属性，透传至 overlay */
+  overlayProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 抽屉方向 */
+  placement: {
+    type: String,
+    default: 'right' as TdDrawerProps['placement'],
+    validator(val: TdDrawerProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 抽屉的标题 */
+  title: {
+    type: String,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 组件是否可见。支持语法糖 `v-model:visible` */
+  visible: Boolean,
+  /** 抽屉层级，样式默认为 11500 */
+  zIndex: {
+    type: Number,
+    default: 11500,
+  },
+  /** 关闭时触发。 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击抽屉里的列表项 */
+  onItemClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 如果蒙层存在，点击蒙层时触发 */
+  onOverlayClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 更新可见性 */
+  onUpdateVisible: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/drawer/type.ts

@@ -0,0 +1,81 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdOverlayProps as OverlayProps } from '../overlay/type';
+
+export interface TdDrawerProps {
+  /**
+   * 点击蒙层时是否触发抽屉关闭事件
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 抽屉关闭时是否销毁节点
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 抽屉里的列表项
+   */
+  items?: DrawerItem[];
+  /**
+   * 遮罩层的属性，透传至 overlay
+   * @default {}
+   */
+  overlayProps?: OverlayProps;
+  /**
+   * 抽屉方向
+   * @default right
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 抽屉的标题
+   */
+  title?: string;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 组件是否可见。支持语法糖 `v-model:visible`
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 抽屉层级，样式默认为 11500
+   * @default 11500
+   */
+  zIndex?: number;
+  /**
+   * 关闭时触发。
+   */
+  onClose?: (context: { trigger: DrawerTriggerSource }) => void;
+  /**
+   * 点击抽屉里的列表项
+   */
+  onItemClick?: (context: { index: number; item: DrawerItem }) => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: () => void;
+  /**
+   * 更新可见性
+   */
+  onUpdateVisible?: (context: { visible: boolean }) => void;
+}
+
+export interface DrawerItem {
+  title: string;
+  icon: string;
+}
+
+export type DrawerTriggerSource = 'overlay';

package/dist/dropdown-item/computed.js

@@ -0,0 +1,6 @@
+export function getStyles(top, zIndex) {
+  const topStyle = top ? `top:${top}px;` : '';
+  const zIndexStyle = zIndex ? `z-index:${zIndex};` : '';
+  return topStyle + zIndexStyle;
+}
+

package/dist/dropdown-item/dropdown-item.css

@@ -0,0 +1,97 @@
+/** dropdown-item */
+.t-dropdown-item {
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  bottom: 0;
+}
+.t-dropdown-item__content {
+  display: flex;
+  flex-direction: column;
+  z-index: 11600;
+  overflow: hidden;
+}
+.t-dropdown-item__popup-host {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.t-dropdown-item__body {
+  flex: 1;
+  background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  overflow: auto;
+  max-height: var(--td-dropdown-body-max-height, 560rpx);
+}
+.t-dropdown-item__body--tree {
+  display: flex;
+  overflow: hidden;
+}
+.t-dropdown-item__body--multi {
+  padding-top: var(--td-spacer, 16rpx);
+  padding-bottom: var(--td-spacer, 16rpx);
+  overflow-y: auto;
+}
+.t-dropdown-item__scroll {
+  max-height: var(--td-dropdown-body-max-height, 560rpx);
+}
+.t-dropdown-item__footer {
+  display: flex;
+  background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  padding: 32rpx;
+  position: relative;
+}
+.t-dropdown-item__footer::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: unset;
+  left: unset;
+  right: unset;
+  background-color: var(--td-component-border, var(--td-gray-color-4, #dcdcdc));
+}
+.t-dropdown-item__footer::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+:deep(.t-dropdown-item__footer-btn) {
+  flex: 1;
+}
+:deep(.t-dropdown-item__footer-btn + .t-dropdown-item__footer-btn) {
+  margin-left: 32rpx;
+}
+.t-dropdown-item__body:empty,
+.t-dropdown-item__footer:empty {
+  display: none;
+}
+.t-dropdown-item__radio,
+.t-dropdown-item__checkbox {
+  width: 100%;
+  overflow: scroll;
+  box-sizing: border-box;
+}
+.t-dropdown-item__radio-group,
+.t-dropdown-item__checkbox-group {
+  display: grid;
+  grid-gap: 24rpx;
+}
+.t-dropdown-item__radio-group {
+  display: grid;
+  grid-gap: 0rpx;
+}
+.t-dropdown-item__checkbox-group {
+  padding: 32rpx;
+}
+.t-dropdown-item__mask {
+  position: fixed;
+  width: 100vh;
+  top: 0;
+  left: 0;
+}