@tplc/wot 0.0.1

package/components/wd-button/wd-button.vue

@@ -0,0 +1,176 @@
+<template>
+  <button
+    :id="buttonId"
+    :hover-class="`${disabled || loading ? '' : 'wd-button--active'}`"
+    :style="customStyle"
+    :class="[
+      'wd-button',
+      'is-' + type,
+      'is-' + size,
+      plain ? 'is-plain' : '',
+      disabled ? 'is-disabled' : '',
+      round ? 'is-round' : '',
+      hairline ? 'is-hairline' : '',
+      block ? 'is-block' : '',
+      loading ? 'is-loading' : '',
+      customClass,
+    ]"
+    :hover-start-time="hoverStartTime"
+    :hover-stay-time="hoverStayTime"
+    :open-type="disabled || loading ? '' : openType"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :send-message-img="sendMessageImg"
+    :app-parameter="appParameter"
+    :show-message-card="showMessageCard"
+    :session-from="sessionFrom"
+    :lang="lang"
+    :hover-stop-propagation="hoverStopPropagation"
+    @click="handleClick"
+    @getuserinfo="handleGetuserinfo"
+    @contact="handleConcat"
+    @getphonenumber="handleGetphonenumber"
+    @error="handleError"
+    @launchapp="handleLaunchapp"
+    @opensetting="handleOpensetting"
+    @chooseavatar="handleChooseavatar"
+    @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
+  >
+    <view v-if="loading" class="wd-button__loading">
+      <view class="wd-button__loading-svg" :style="loadingStyle"></view>
+    </view>
+    <wd-icon
+      v-else-if="icon"
+      custom-class="wd-button__icon"
+      :name="icon"
+      :classPrefix="classPrefix"
+    ></wd-icon>
+    <view class="wd-button__text"><slot /></view>
+  </button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { debounce } from '../common/util'
+import { computed, watch, ref } from 'vue'
+import base64 from '../common/base64'
+import { buttonProps } from './types'
+
+const loadingIcon = (color = '#4D80F0', reverse = true) => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="a"><stop stop-color="${
+    reverse ? color : '#fff'
+  }" offset="0%" stop-opacity="0"/><stop stop-color="${
+    reverse ? color : '#fff'
+  }" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${
+    reverse ? '#fff' : color
+  }"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`
+}
+const props = defineProps(buttonProps)
+const emit = defineEmits([
+  'click',
+  'getuserinfo',
+  'contact',
+  'getphonenumber',
+  'error',
+  'launchapp',
+  'opensetting',
+  'chooseavatar',
+  'agreeprivacyauthorization',
+])
+
+const hoverStartTime = ref<number>(20)
+const hoverStayTime = ref<number>(70)
+const loadingIconSvg = ref<string>('')
+
+const loadingStyle = computed(() => {
+  return `background-image: url(${loadingIconSvg.value});`
+})
+
+watch(
+  () => props.loading,
+  () => {
+    buildLoadingSvg()
+  },
+  { deep: true, immediate: true },
+)
+const handleClick = debounce((event: any) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}, 200)
+
+function handleGetuserinfo(event: any) {
+  emit('getuserinfo', event.detail)
+}
+
+function handleConcat(event: any) {
+  emit('contact', event.detail)
+}
+
+function handleGetphonenumber(event: any) {
+  emit('getphonenumber', event.detail)
+}
+
+function handleError(event: any) {
+  emit('error', event.detail)
+}
+
+function handleLaunchapp(event: any) {
+  emit('launchapp', event.detail)
+}
+
+function handleOpensetting(event: any) {
+  emit('opensetting', event.detail)
+}
+
+function handleChooseavatar(event: any) {
+  emit('chooseavatar', event.detail)
+}
+
+function handleAgreePrivacyAuthorization(event: any) {
+  emit('agreeprivacyauthorization', event.detail)
+}
+function buildLoadingSvg() {
+  const { loadingColor, type, plain } = props
+  let color = loadingColor
+  if (!color) {
+    switch (type) {
+      case 'primary':
+        color = '#4D80F0'
+        break
+      case 'success':
+        color = '#34d19d'
+        break
+      case 'info':
+        color = '#333'
+        break
+      case 'warning':
+        color = '#f0883a'
+        break
+      case 'error':
+        color = '#fa4350'
+        break
+      case 'default':
+        color = '#333'
+        break
+    }
+  }
+
+  const svg = loadingIcon(color, !plain)
+  loadingIconSvg.value = `"data:image/svg+xml;base64,${base64(svg)}"`
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-calendar/index.scss

@@ -0,0 +1,244 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(calendar) {
+    @include e(cell) {
+      color: $-dark-color;
+      background-color: $-dark-background2;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+
+    @include e(value) {
+      color: $-dark-color;
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-calendar__arrow),
+    :deep(.wd-calendar__close) {
+      color: $-dark-color;
+    }
+
+    @include when(border) {
+      .wd-calendar__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include e(range-label-item) {
+      color: $-dark-color;
+
+      @include when(placeholder) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(range-sperator) {
+      color: $-dark-color-gray;
+    }
+  }
+}
+
+@include b(calendar) {
+  @include when(border) {
+    .wd-calendar__cell {
+      @include halfPixelBorder('top', $-cell-padding);
+    }
+  }
+
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    overflow: hidden;
+    font-size: $-cell-title-fs;
+    line-height: $-cell-line-height;
+    color: $-cell-title-color;
+    text-decoration: none;
+    background-color: $-color-white;
+  }
+
+  @include e(cell) {
+    @include when(disabled) {
+      .wd-calendar__value {
+        color: $-input-disabled-color;
+      }
+    }
+
+    @include when(align-right) {
+      .wd-calendar__value {
+        text-align: right;
+      }
+    }
+
+    @include when(error) {
+      .wd-calendar__value {
+        color: $-input-error-color;
+      }
+
+      :deep(.wd-calendar__arrow) {
+        color: $-input-error-color;
+      }
+    }
+
+    @include when(large) {
+      font-size: $-cell-title-fs-large;
+
+      :deep(.wd-calendar__arrow) {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+
+    @include when(center) {
+      align-items: center;
+
+      :deep(.wd-calendar__arrow) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include e(error-message) {
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    color: $-form-item-error-message-color;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include e(label) {
+    position: relative;
+    box-sizing: border-box;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    color: $-cell-title-color;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        top: 2px;
+        left: 0;
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+        content: '*';
+      }
+    }
+  }
+
+  @include e(value-wraper) {
+    display: flex;
+  }
+
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+
+    @include m(placeholder) {
+      color: $-input-placeholder-color;
+    }
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    line-height: $-cell-line-height;
+    color: $-cell-arrow-color;
+  }
+
+  @include e(header) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @include e(title) {
+    height: $-action-sheet-title-height;
+    font-size: $-action-sheet-title-fs;
+    font-weight: $-action-sheet-weight;
+    line-height: $-action-sheet-title-height;
+    color: $-action-sheet-color;
+    text-align: center;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: $-action-sheet-close-top;
+    right: $-action-sheet-close-right;
+    font-size: $-action-sheet-close-fs;
+    line-height: 1.1;
+    color: $-action-sheet-close-color;
+    transform: rotate(-45deg);
+  }
+
+  @include e(tabs) {
+    width: 222px;
+    margin: 10px auto 12px;
+  }
+
+  @include e(shortcuts) {
+    padding: 20px 0;
+    text-align: center;
+  }
+
+  @include edeep(tag) {
+    margin-right: 8px;
+  }
+
+  @include e(view) {
+    @include when(show-confirm) {
+      height: 394px;
+
+      @include when(range) {
+        height: 384px;
+      }
+    }
+  }
+
+  @include e(range-label) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+
+    @include when(monthrange) {
+      padding-bottom: 10px;
+      box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  @include e(range-label-item) {
+    flex: 1;
+    color: rgba(0, 0, 0, 0.85);
+
+    @include when(placeholder) {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  @include e(range-sperator) {
+    margin: 0 24px;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  @include e(confirm) {
+    padding: 12px 25px 14px;
+  }
+}

package/components/wd-calendar/types.ts

@@ -0,0 +1,235 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-06-09 14:38:57
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
+import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types'
+import type { FormItemRule } from '../wd-form/types'
+
+export const calendarProps = {
+  ...baseProps,
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   */
+  modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
+  /**
+   * 日期类型，可选值：date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange
+   */
+  type: makeStringProp<CalendarType>('date'),
+  /**
+   * 最小日期，为 13 位时间戳
+   */
+  minDate: makeNumberProp(
+    new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime(),
+  ),
+  /**
+   * 最大日期，为 13 位时间戳
+   */
+  maxDate: makeNumberProp(
+    new Date(
+      new Date().getFullYear(),
+      new Date().getMonth() + 6,
+      new Date().getDate(),
+      23,
+      59,
+      59,
+    ).getTime(),
+  ),
+  /**
+   * 周起始天
+   */
+  firstDayOfWeek: makeNumberProp(0),
+  /**
+   * 日期格式化函数
+   */
+  formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * type 为范围选择时有效，最大日期范围
+   */
+  maxRange: Number,
+  /**
+   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
+   */
+  rangePrompt: String,
+  /**
+   * type 为范围选择时有效，是否允许选择同一天
+   */
+  allowSameDay: makeBooleanProp(false),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   */
+  defaultTime: {
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+   */
+  timeFilter: Function as PropType<CalendarTimeFilter>,
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
+   */
+  hideSecond: makeBooleanProp(false),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: String,
+  /**
+   * 使用 label 插槽时设置该选项
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 使用默认插槽时设置该选项
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 是否垂直居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 是否显示确定按钮
+   */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 确定按钮文字
+   */
+  confirmText: String,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<CalendarDisplayFormat>,
+  /**
+   * 自定义范围选择类型的面板内部回显，返回一个字符串
+   */
+  innerDisplayFormat: Function as PropType<CalendarInnerDisplayFormat>,
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 是否显示类型切换功能
+   */
+  showTypeSwitch: makeBooleanProp(false),
+  /**
+   * 快捷选项，为对象数组，其中对象的 text 必传
+   */
+  shortcuts: makeArrayProp<Record<string, any>>(),
+  /**
+   * 快捷操作点击回调
+   */
+  onShortcutsClick: Function as PropType<CalendarOnShortcutsClick>,
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数
+   */
+  beforeConfirm: Function as PropType<CalendarBeforeConfirm>,
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  customViewClass: makeStringProp(''),
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+}
+
+export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
+
+export type CalendarInnerDisplayFormat = (
+  value: number,
+  rangeType: 'start' | 'end',
+  type: CalendarType,
+) => string
+
+export type CalendarBeforeConfirmOption = {
+  value: number | number[] | null
+  resolve: (isPass: boolean) => void
+}
+
+export type CalendarBeforeConfirm = (option: CalendarBeforeConfirmOption) => void
+
+export type CalendarOnShortcutsClickOption = {
+  item: Record<string, any>
+  index: number
+}
+
+export type CalendarOnShortcutsClick = (option: CalendarOnShortcutsClickOption) => number | number[]
+
+export type CalendarExpose = {
+  /** 关闭时间选择器弹窗 */
+  close: () => void
+  /** 打开时间选择器弹窗 */
+  open: () => void
+}