@tplc/wot 0.0.1

package/components/wd-badge/types.ts

@@ -0,0 +1,53 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-03-19 16:33:12
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+export const badgeProps = {
+  ...baseProps,
+  /**
+   * 显示值
+   */
+  modelValue: {
+    type: [Number, String, null] as PropType<number | string | null>,
+    default: null,
+  },
+  /** 当数值为 0 时，是否展示徽标 */
+  showZero: makeBooleanProp(false),
+  bgColor: String,
+  /**
+   * 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
+   */
+  max: Number,
+  /**
+   * 是否为红色点状标注
+   */
+  isDot: Boolean,
+  /**
+   * 是否隐藏 badge
+   */
+  hidden: Boolean,
+  /**
+   * badge类型，可选值primary / success / warning / danger / info
+   */
+  type: makeStringProp<BadgeType | undefined>(undefined),
+  /**
+   * 为正时，角标向下偏移对应的像素
+   */
+  top: Number,
+  /**
+   * 为正时，角标向左偏移对应的像素
+   */
+  right: Number,
+}
+
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>

package/components/wd-badge/wd-badge.vue

@@ -0,0 +1,69 @@
+<template>
+  <view :class="['wd-badge', customClass]" :style="customStyle">
+    <slot></slot>
+    <view
+      v-if="isBadgeShow"
+      :class="[
+        'wd-badge__content',
+        'is-fixed',
+        type ? 'wd-badge__content--' + type : '',
+        isDot ? 'is-dot' : '',
+      ]"
+      :style="contentStyle"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-badge',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { badgeProps } from './types'
+
+const props = defineProps(badgeProps)
+const content = ref<number | string | null>(null)
+
+watch(
+  [() => props.modelValue, () => props.max, () => props.isDot],
+  () => {
+    notice()
+  },
+  { immediate: true, deep: true },
+)
+
+const contentStyle = computed(() => {
+  return `background-color: ${props.bgColor};top:${props.top || 0}px;right:${props.right || 0}px`
+})
+
+// 是否展示徽标数字
+const isBadgeShow = computed(() => {
+  let isBadgeShow: boolean = false
+  if (!props.hidden && (content.value || (content.value === 0 && props.showZero) || props.isDot)) {
+    isBadgeShow = true
+  }
+  return isBadgeShow
+})
+
+function notice() {
+  if (props.isDot) return
+  let value = props.modelValue
+  const max = props.max
+  if (value && max && typeof value === 'number' && !Number.isNaN(value) && !Number.isNaN(max)) {
+    value = max < value ? `${max}+` : value
+  }
+  content.value = value
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-button/index.scss

@@ -0,0 +1,340 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(button) {
+    @include when(info) {
+      color: $-dark-color3;
+      background: $-dark-background4;
+    }
+
+    @include when(plain) {
+      background: transparent;
+
+      @include when(info) {
+        color: $-dark-color;
+
+        &::after {
+          border-color: $-dark-background5;
+        }
+      }
+    }
+
+    @include when(text) {
+      @include when(disabled) {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+
+    @include when(icon) {
+      color: $-dark-color;
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+  }
+}
+
+@include b(button) {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  color: $-button-normal-color;
+  -webkit-appearance: none;
+  user-select: none;
+  background: transparent;
+  border: none;
+  outline: none;
+  transition: opacity 0.2s;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    content: ' ';
+    background: $-color-black;
+    border: inherit;
+    border-color: $-color-black;
+    border-radius: inherit;
+    opacity: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  &::after {
+    border: none;
+  }
+
+  @include m(active) {
+    &:active::before {
+      opacity: 0.15;
+    }
+  }
+
+  @include when(disabled) {
+    opacity: $-button-disabled-opacity;
+  }
+
+  @include e(loading) {
+    margin-right: 5px;
+    animation: wd-rotate 0.8s linear infinite;
+    animation-duration: 2s;
+  }
+
+  @include e(loading-svg) {
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  @include when(loading) {
+  }
+
+  @include when(primary) {
+    color: $-button-primary-color;
+    background: $-button-primary-bg-color;
+  }
+
+  @include when(success) {
+    color: $-button-success-color;
+    background: $-button-success-bg-color;
+  }
+
+  @include when(info) {
+    color: $-button-info-color;
+    background: $-button-info-bg-color;
+  }
+
+  @include when(warning) {
+    color: $-button-warning-color;
+    background: $-button-warning-bg-color;
+  }
+
+  @include when(error) {
+    color: $-button-error-color;
+    background: $-button-error-bg-color;
+  }
+
+  @include when(small) {
+    height: $-button-small-height;
+    padding: $-button-small-padding;
+    font-size: $-button-small-fs;
+    font-weight: normal;
+    border-radius: $-button-small-radius;
+
+    .wd-button__loading {
+      width: $-button-small-loading;
+      height: $-button-small-loading;
+    }
+  }
+
+  @include when(medium) {
+    height: $-button-medium-height;
+    padding: $-button-medium-padding;
+    font-size: $-button-medium-fs;
+    border-radius: $-button-medium-radius;
+
+    @include when(primary) {
+      box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
+    }
+
+    @include when(success) {
+      box-shadow: $-button-medium-box-shadow-size $-button-success-box-shadow-color;
+    }
+
+    @include when(warning) {
+      box-shadow: $-button-medium-box-shadow-size $-button-warning-box-shadow-color;
+    }
+
+    @include when(error) {
+      box-shadow: $-button-medium-box-shadow-size $-button-error-box-shadow-color;
+    }
+
+    @include when(plain) {
+      box-shadow: none;
+    }
+
+    @include when(round) {
+      min-width: 120px;
+
+      @include when(icon) {
+        min-width: 0;
+        border-radius: 50%;
+      }
+
+      @include when(text) {
+        min-width: 0;
+        border-radius: 0;
+      }
+    }
+
+    .wd-button__loading {
+      width: $-button-medium-loading;
+      height: $-button-medium-loading;
+    }
+  }
+
+  @include when(large) {
+    height: $-button-large-height;
+    padding: $-button-large-padding;
+    font-size: $-button-large-fs;
+    border-radius: $-button-large-radius;
+
+    &::after {
+      border-radius: $-button-large-radius;
+    }
+
+    &:not(.is-plain) {
+      @include when(primary) {
+        box-shadow: $-button-large-box-shadow-size $-button-primary-box-shadow-color;
+      }
+
+      @include when(success) {
+        box-shadow: $-button-large-box-shadow-size $-button-success-box-shadow-color;
+      }
+
+      @include when(warning) {
+        box-shadow: $-button-large-box-shadow-size $-button-warning-box-shadow-color;
+      }
+
+      @include when(error) {
+        box-shadow: $-button-large-box-shadow-size $-button-error-box-shadow-color;
+      }
+    }
+
+    .wd-button__loading {
+      width: $-button-large-loading;
+      height: $-button-large-loading;
+    }
+  }
+
+  @include when(round) {
+    overflow: hidden;
+    border-radius: 999px;
+  }
+
+  @include when(text) {
+    min-width: 0;
+    padding: 4px 0;
+    color: $-button-primary-bg-color;
+
+    &::after {
+      display: none;
+    }
+
+    &.wd-button--active {
+      opacity: $-button-text-hover-opacity;
+
+      &:active::before {
+        display: none;
+      }
+    }
+
+    @include when(disabled) {
+      color: $-button-normal-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include when(plain) {
+    background: $-button-plain-bg-color;
+
+    @include when(primary) {
+      color: $-button-primary-bg-color;
+      border: 1px solid $-button-primary-bg-color;
+    }
+
+    @include when(success) {
+      color: $-button-success-bg-color;
+      border: 1px solid $-button-success-bg-color;
+    }
+
+    @include when(info) {
+      color: $-button-info-plain-normal-color;
+      border: 1px solid $-button-info-plain-border-color;
+    }
+
+    @include when(warning) {
+      color: $-button-warning-bg-color;
+      border: 1px solid $-button-warning-bg-color;
+    }
+
+    @include when(error) {
+      color: $-button-error-bg-color;
+      border: 1px solid $-button-error-bg-color;
+    }
+  }
+
+  @include when(hairline) {
+    &.is-plain {
+      border-width: 0;
+      border-radius: 0;
+      @include halfPixelBorderSurround();
+
+      &::after {
+        border-color: inherit;
+      }
+    }
+  }
+
+  @include when(block) {
+    display: flex;
+  }
+
+  @include when(icon) {
+    width: $-button-icon-size;
+    height: $-button-icon-size;
+    padding: 0;
+    color: $-button-icon-color;
+    border-radius: 50%;
+
+    &::after {
+      display: none;
+    }
+
+    :deep(.wd-button__icon) {
+      margin-right: 0;
+    }
+
+    @include when(disabled) {
+      color: $-button-icon-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include edeep(icon) {
+    display: block;
+    margin-right: 6px;
+    font-size: $-button-icon-fs;
+    vertical-align: middle;
+  }
+
+  @include e(text) {
+    white-space: nowrap;
+    user-select: none;
+  }
+}
+
+// 微信2.8.0以上版本加了较高层级的默认样式，需要重置掉
+.wd-button {
+  width: auto;
+  min-height: auto;
+}
+
+@keyframes wd-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/components/wd-button/types.ts

@@ -0,0 +1,112 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-07-23 11:38:09
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-button\types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type ButtonType =
+  | 'primary'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'error'
+  | 'default'
+  | 'text'
+  | 'icon'
+export type ButtonSize = 'small' | 'medium' | 'large'
+
+export const buttonProps = {
+  ...baseProps,
+  /**
+   * 幽灵按钮
+   */
+  plain: makeBooleanProp(false),
+  /**
+   * 圆角按钮
+   */
+  round: makeBooleanProp(true),
+  /**
+   * 禁用按钮
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否细边框
+   */
+  hairline: makeBooleanProp(false),
+  /**
+   * 块状按钮
+   */
+  block: makeBooleanProp(false),
+  /**
+   * 按钮类型，可选值：primary / success / info / warning / error / text / icon
+   */
+  type: makeStringProp<ButtonType>('primary'),
+  /**
+   * 按钮尺寸，可选值：small / medium / large
+   */
+  size: makeStringProp<ButtonSize>('medium'),
+  /**
+   * 图标类名
+   */
+  icon: String,
+  /**
+   * 类名前缀，用于使用自定义图标，用法参考Icon组件
+   */
+  classPrefix: makeStringProp('wd-icon'),
+  /**
+   * 加载中按钮
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载图标颜色
+   */
+  loadingColor: String,
+  /**
+   * 开放能力
+   */
+  openType: String,
+  /**
+   * 指定是否阻止本节点的祖先节点出现点击态
+   */
+  hoverStopPropagation: Boolean,
+  /**
+   * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
+   */
+  lang: String,
+  /**
+   * 会话来源，open-type="contact"时有效
+   */
+  sessionFrom: String,
+  /**
+   * 会话内消息卡片标题，open-type="contact"时有效
+   */
+  sendMessageTitle: String,
+  /**
+   * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+   */
+  sendMessagePath: String,
+  /**
+   * 会话内消息卡片图片，open-type="contact"时有效
+   */
+  sendMessageImg: String,
+  /**
+   * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+   */
+  appParameter: String,
+  /**
+   * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
+   */
+  showMessageCard: Boolean,
+  /**
+   * 按钮的唯一标识，可用于设置隐私同意授权按钮的id
+   */
+  buttonId: String,
+}
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>