@tplc/wot 0.0.1

package/components/wd-message-box/index.ts

@@ -0,0 +1,95 @@
+/*
+ * @Author: weisheng
+ * @Date: 2022-12-14 17:33:21
+ * @LastEditTime: 2024-08-17 18:18:16
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts
+ * 记得注释
+ */
+import { provide, ref } from 'vue'
+import type { Message, MessageOptions, MessageResult, MessageType } from './types'
+import { deepMerge } from '../common/util'
+
+/**
+ * useMessage 用到的key
+ *
+ * @internal
+ */
+export const messageDefaultOptionKey = '__MESSAGE_OPTION__'
+
+// 默认模板
+export const defaultOptions: MessageOptions = {
+  title: '',
+  showCancelButton: false,
+  show: false,
+  closeOnClickModal: true,
+  msg: '',
+  type: 'alert',
+  inputType: 'text',
+  inputValue: '',
+  inputValidate: null,
+  showErr: false,
+  zIndex: 99,
+  lazyRender: true,
+  inputError: '',
+}
+
+export function useMessage(selector: string = ''): Message {
+  const messageOption = ref<MessageOptions>(defaultOptions) // Message选项
+  const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey
+  provide(messageOptionKey, messageOption)
+
+  const createMethod = (type: MessageType) => {
+    // 优先级：options->MessageOptions->defaultOptions
+    return (options: MessageOptions | string) => {
+      const messageOptions = deepMerge(
+        { type },
+        typeof options === 'string' ? { title: options } : options,
+      ) as MessageOptions
+      if (messageOptions.type === 'confirm' || messageOptions.type === 'prompt') {
+        messageOptions.showCancelButton = true
+      } else {
+        messageOptions.showCancelButton = false
+      }
+      return show(messageOptions)
+    }
+  }
+
+  const show = (option: MessageOptions | string) => {
+    // 返回一个promise
+    return new Promise<MessageResult>((resolve, reject) => {
+      const options = deepMerge(
+        defaultOptions,
+        typeof option === 'string' ? { title: option } : option,
+      ) as MessageOptions
+      messageOption.value = deepMerge(options, {
+        show: true,
+        onConfirm: (res: MessageResult) => {
+          resolve(res)
+        },
+        onCancel: (res: MessageResult) => {
+          reject(res)
+        },
+      }) as MessageOptions
+    })
+  }
+
+  // 打开Alert 弹框
+  const alert = createMethod('alert')
+  // 打开Confirm 弹框
+  const confirm = createMethod('confirm')
+  // 打开Prompt 弹框
+  const prompt = createMethod('prompt')
+
+  const close = () => {
+    messageOption.value.show = false
+  }
+  return {
+    show,
+    alert,
+    confirm,
+    prompt,
+    close,
+  }
+}

package/components/wd-message-box/types.ts

@@ -0,0 +1,116 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-04-08 22:34:01
+ * @LastEditTime: 2024-04-10 12:58:10
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\types.ts
+ * 记得注释
+ */
+import { baseProps } from '../common/props'
+
+export type MessageType = 'alert' | 'confirm' | 'prompt'
+
+export type MessageBeforeConfirmOption = {
+  resolve: (isPass: boolean) => void
+}
+
+export type MessageOptions = {
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 是否展示取消按钮
+   */
+  showCancelButton?: boolean
+
+  show?: boolean
+  /**
+   * 是否支持点击蒙层进行关闭，点击蒙层回调传入的action为'modal'
+   */
+  closeOnClickModal?: boolean
+  /**
+   * 确定按钮文案
+   */
+  confirmButtonText?: string
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText?: string
+  /**
+   * 消息文案
+   */
+  msg?: string
+  /**
+   * 弹框类型
+   */
+  type?: MessageType
+  /**
+   * 当type为prompt时，输入框类型
+   */
+  inputType?: string
+  /**
+   * 当type为prompt时，输入框初始值
+   */
+  inputValue?: string | number
+  /**
+   * 当type为prompt时，输入框placeholder
+   */
+  inputPlaceholder?: string
+  /**
+   * 当type为prompt时，输入框正则校验，点击确定按钮时进行校验
+   */
+  inputPattern?: RegExp
+  /**
+   * 当type为prompt时，输入框校验函数，点击确定按钮时进行校验
+   */
+  inputValidate?: InputValidate | null
+  /**
+   * 当type为prompt时，输入框检验不通过时的错误提示文案
+   */
+  inputError?: string
+  /**
+   * 是否展示错误信息
+   */
+  showErr?: boolean
+  /**
+   * 弹窗层级
+   */
+  zIndex?: number
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   */
+  lazyRender?: boolean
+  /**
+   * 确认前钩子
+   */
+  beforeConfirm?: (options: MessageBeforeConfirmOption) => void
+}
+
+export type ActionType = 'confirm' | 'cancel' | 'modal'
+
+export type InputValidate = (inputValue: string | number) => boolean
+
+export interface MessageResult {
+  action: ActionType
+  value?: string | number
+}
+
+export interface Message {
+  // 打开Message
+  show(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Alert 弹框
+  alert(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Confirm 弹框
+  confirm(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Prompt 弹框
+  prompt(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 关闭Message
+  close(): void
+}
+
+export const messageBoxProps = {
+  ...baseProps,
+  selector: String,
+}

package/components/wd-message-box/wd-message-box.vue

@@ -0,0 +1,326 @@
+<template>
+  <view>
+    <wd-popup
+      transition="zoom-in"
+      v-model="show"
+      :close-on-click-modal="closeOnClickModal"
+      :lazy-render="lazyRender"
+      custom-class="wd-message-box"
+      @click-modal="toggleModal('modal')"
+      :z-index="zIndex"
+      :duration="200"
+    >
+      <view :class="rootClass">
+        <view :class="bodyClass">
+          <view v-if="title" class="wd-message-box__title">
+            {{ title }}
+          </view>
+          <view class="wd-message-box__content">
+            <block v-if="type === 'prompt'">
+              <wd-input
+                v-model="inputValue"
+                :type="inputType"
+                size="large"
+                :placeholder="inputPlaceholder || '请输入'"
+                @input="inputValChange"
+              />
+              <view v-if="showErr" class="wd-message-box__input-error">
+                {{ inputError || translate('inputNoValidate') }}
+              </view>
+            </block>
+            <slot>{{ msg }}</slot>
+          </view>
+        </view>
+        <view
+          :class="`wd-message-box__actions ${showCancelButton ? 'wd-message-box__flex' : 'wd-message-box__block'}`"
+        >
+          <wd-button
+            type="info"
+            block
+            v-if="showCancelButton"
+            custom-style="margin-right: 16px;"
+            @click="toggleModal('cancel')"
+          >
+            {{ cancelButtonText || translate('cancel') }}
+          </wd-button>
+          <wd-button block @click="toggleModal('confirm')">
+            {{ confirmButtonText || translate('confirm') }}
+          </wd-button>
+        </view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-message-box',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue'
+import {
+  messageBoxProps,
+  type InputValidate,
+  type MessageBeforeConfirmOption,
+  type MessageOptions,
+  type MessageResult,
+  type MessageType,
+} from './types'
+import { defaultOptions, messageDefaultOptionKey } from '../wd-message-box'
+import { isDef, isFunction } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+
+const props = defineProps(messageBoxProps)
+
+const { translate } = useTranslate('message-box')
+
+const rootClass = computed(() => {
+  return `wd-message-box__container ${props.customClass}`
+})
+
+const bodyClass = computed(() => {
+  return `wd-message-box__body ${!title.value ? 'is-no-title' : ''} ${type.value === 'prompt' ? 'is-prompt' : ''}`
+})
+
+const messageOptionKey = props.selector
+  ? messageDefaultOptionKey + props.selector
+  : messageDefaultOptionKey
+const messageOption = inject(messageOptionKey, ref<MessageOptions>(defaultOptions)) // message选项
+
+/**
+ * 消息文案
+ */
+const msg = ref<string>('')
+let onConfirm: ((res: MessageResult) => void) | null = null
+let onCancel: ((res: MessageResult) => void) | null = null
+let beforeConfirm: ((options: MessageBeforeConfirmOption) => void) | null = null
+const show = ref<boolean>(false)
+/**
+ * 标题
+ */
+const title = ref<string>('')
+/**
+ * 是否展示取消按钮
+ */
+const showCancelButton = ref<boolean>(false)
+/**
+ * 是否支持点击蒙层进行关闭，点击蒙层回调传入的action为'modal'
+ */
+const closeOnClickModal = ref<boolean>(true)
+/**
+ * 确定按钮文案
+ */
+const confirmButtonText = ref<string>('')
+/**
+ * 取消按钮文案
+ */
+const cancelButtonText = ref<string>('')
+
+/**
+ * 弹框类型
+ */
+const type = ref<MessageType>('alert')
+
+/**
+ * 当type为prompt时，输入框类型
+ */
+const inputType = ref<string>('text')
+
+/**
+ * 当type为prompt时，输入框初始值
+ */
+const inputValue = ref<string | number>('')
+
+/**
+ * 当type为prompt时，输入框placeholder
+ */
+const inputPlaceholder = ref<string>('')
+
+/**
+ * 当type为prompt时，输入框正则校验，点击确定按钮时进行校验
+ */
+const inputPattern = ref<RegExp>()
+
+/**
+ * 当type为prompt时，输入框校验函数，点击确定按钮时进行校验
+ */
+let inputValidate: InputValidate | null = null
+
+/**
+ * 当type为prompt时，输入框检验不通过时的错误提示文案
+ */
+const inputError = ref<string>('')
+const showErr = ref<boolean>(false)
+/**
+ * 弹窗层级
+ */
+const zIndex = ref<number>(99)
+/**
+ * 弹层内容懒渲染，触发展示时才渲染内容
+ */
+const lazyRender = ref<boolean>(true)
+
+// 监听options变化展示
+watch(
+  () => messageOption.value,
+  (newVal: MessageOptions) => {
+    reset(newVal)
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => show.value,
+  (newValue) => {
+    resetErr(newValue)
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+/**
+ * 点击操作
+ * @param action
+ */
+function toggleModal(action: 'confirm' | 'cancel' | 'modal') {
+  if (action === 'modal' && !closeOnClickModal.value) {
+    return
+  }
+  if (type.value === 'prompt' && action === 'confirm' && !validate()) {
+    return
+  }
+  switch (action) {
+    case 'confirm':
+      if (beforeConfirm) {
+        beforeConfirm({
+          resolve: (isPass) => {
+            if (isPass) {
+              handleConfirm({
+                action,
+                value: inputValue.value,
+              })
+            }
+          },
+        })
+      } else {
+        handleConfirm({
+          action,
+          value: inputValue.value,
+        })
+      }
+      break
+    case 'cancel':
+      handleCancel({
+        action,
+      })
+      break
+    default:
+      handleCancel({
+        action: 'modal',
+      })
+      break
+  }
+}
+
+/**
+ * 确认回调
+ * @param result
+ */
+function handleConfirm(result: MessageResult) {
+  show.value = false
+  if (isFunction(onConfirm)) {
+    onConfirm(result)
+  }
+}
+
+/**
+ * 取消回调
+ * @param result
+ */
+function handleCancel(result: MessageResult) {
+  show.value = false
+  if (isFunction(onCancel)) {
+    onCancel(result)
+  }
+}
+
+/**
+ * @description 如果存在校验规则行为，则进行判断校验是否通过规则。默认不存在校验直接铜鼓。
+ * @return {Boolean} 是否通过校验
+ */
+function validate() {
+  if (inputPattern.value && !inputPattern.value.test(String(inputValue.value))) {
+    showErr.value = true
+    return false
+  }
+  if (typeof inputValidate === 'function') {
+    const validateResult = inputValidate(inputValue.value)
+    if (!validateResult) {
+      showErr.value = true
+      return false
+    }
+  }
+  showErr.value = false
+  return true
+}
+/**
+ * @description show关闭时，销毁错误提示
+ * @param val
+ */
+function resetErr(val: boolean) {
+  if (val === false) {
+    showErr.value = false
+  }
+}
+function inputValChange({ value }: { value: string | number }) {
+  if (value === '') {
+    showErr.value = false
+    return
+  }
+  inputValue.value = value
+}
+
+/**
+ * 重置message选项值
+ * @param option message选项值
+ */
+function reset(option: MessageOptions) {
+  if (option) {
+    title.value = isDef(option.title) ? option.title : ''
+    showCancelButton.value = isDef(option.showCancelButton) ? option.showCancelButton : false
+    show.value = option.show!
+    closeOnClickModal.value = option.closeOnClickModal!
+    confirmButtonText.value = option.confirmButtonText!
+    cancelButtonText.value = option.cancelButtonText!
+    msg.value = option.msg!
+    type.value = option.type!
+    inputType.value = option.inputType!
+    inputValue.value = option.inputValue!
+    inputPlaceholder.value = option.inputPlaceholder!
+    inputPattern.value = option.inputPattern!
+    inputValidate = option.inputValidate!
+    onConfirm = (option as any).onConfirm
+    onCancel = (option as any).onCancel
+    beforeConfirm = option.beforeConfirm!
+    inputError.value = option.inputError!
+    showErr.value = option.showErr!
+    zIndex.value = option.zIndex!
+    lazyRender.value = option.lazyRender!
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-navbar/index.scss

@@ -0,0 +1,103 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(navbar) {
+    background-color: $-dark-background;
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(text) {
+      color: $-dark-color;
+      @include m(hover) {
+        background-color: $-dark-background3;
+      }
+    }
+
+    :deep(.wd-navbar__arrow) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(navbar) {
+  position: relative;
+  box-sizing: content-box;
+  height: $-navbar-height;
+  line-height: $-navbar-height;
+  text-align: center;
+  user-select: none;
+  background-color: $-navbar-background;
+
+  @include e(content) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(title) {
+    max-width: 60%;
+    height: 100%;
+    margin: 0 auto;
+    font-size: $-navbar-title-font-size;
+    font-weight: $-navbar-title-font-weight;
+    color: $-navbar-color;
+    @include lineEllipsis();
+  }
+
+  @include e(text) {
+    display: inline-block;
+    color: $-navbar-desc-font-color;
+    vertical-align: middle;
+  }
+
+  @include e(left, right, capsule) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    font-size: $-navbar-desc-font-size;
+
+    @include when(disabled) {
+      opacity: $-navbar-disabled-opacity;
+    }
+  }
+
+  @include e(left, capsule) {
+    left: 0;
+  }
+
+  @include e(left) {
+    @include m(hover) {
+      background-color: $-navbar-hover-color;
+    }
+  }
+
+  @include e(right) {
+    right: 0;
+    @include m(hover) {
+      background-color: $-navbar-hover-color;
+    }
+  }
+
+  @include edeep(arrow) {
+    font-size: $-navbar-arrow-size;
+    color: $-navbar-color;
+  }
+
+  @include when(border) {
+    @include halfPixelBorder('bottom');
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 500;
+    width: 100%;
+  }
+}

package/components/wd-navbar/types.ts

@@ -0,0 +1,52 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export const navbarProps = {
+  ...baseProps,
+  /**
+   * 标题文字
+   */
+  title: String,
+  /**
+   * 左侧文案
+   */
+  leftText: String,
+  /**
+   * 右侧文案
+   */
+  rightText: String,
+  /**
+   * 是否显示左侧箭头
+   */
+  leftArrow: makeBooleanProp(false),
+  /**
+   * 是否显示下边框
+   */
+  bordered: makeBooleanProp(true),
+  /**
+   * 是否固定到顶部
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 固定在顶部时，是否在标签位置生成一个等高的占位元素
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 导航栏 z-index
+   */
+  zIndex: makeNumberProp(500),
+  /**
+   * 是否开启顶部安全区适配
+   */
+  safeAreaInsetTop: makeBooleanProp(false),
+  /**
+   * 是否禁用左侧按钮，禁用时透明度降低，且无法点击
+   */
+  leftDisabled: makeBooleanProp(false),
+  /**
+   * 是否禁用右侧按钮，禁用时透明度降低，且无法点击
+   */
+  rightDisabled: makeBooleanProp(false),
+}
+
+export type NavbarProps = ExtractPropTypes<typeof navbarProps>