oxy-uni-ui 1.0.1

package/components/oxy-loading/types.ts

@@ -0,0 +1,22 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumericProp, makeStringProp } from '../common/props'
+
+export type LoadingType = 'outline' | 'ring' // 提示信息加载状态类型
+
+export const loadingProps = {
+  ...baseProps,
+  /**
+   * 加载指示器类型，可选值：'outline' | 'ring'
+   */
+  type: makeStringProp<LoadingType>('ring'),
+  /**
+   * 设置加载指示器颜色
+   */
+  color: makeStringProp('#4D80F0'),
+  /**
+   * 设置加载指示器大小
+   */
+  size: makeNumericProp('')
+}
+
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>

package/components/oxy-loadmore/index.scss

@@ -0,0 +1,39 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+.oxy-theme-dark {
+  @include b(loadmore) {
+    color: $-dark-color;
+  }
+}
+
+@include b(loadmore) {
+  width: 100%;
+  height: $-loadmore-height;
+  line-height: $-loadmore-height;
+  text-align: center;
+  color: $-loadmore-color;
+
+  @include edeep(loading) {
+    display: inline-block;
+    margin-right: 8px;
+    vertical-align:  middle;
+    width: $-loadmore-loading-size;
+    height: $-loadmore-loading-size;
+  }
+  @include e(text) {
+    display: inline-block;
+    font-size: $-loadmore-fs;
+    vertical-align: middle;
+
+    @include when(light) {
+      margin: 0 6px;
+      color: $-loadmore-error-color;
+    }
+  }
+  @include edeep(refresh) {
+    display: inline-block;
+    color: $-loadmore-error-color;
+    vertical-align: middle;
+    font-size: $-loadmore-refresh-fs;
+  }
+}

package/components/oxy-loadmore/oxy-loadmore.vue

@@ -0,0 +1,59 @@
+<template>
+  <view :class="['oxy-loadmore', customClass]" :style="customStyle" @click="reload">
+    <oxy-divider v-if="state === 'finished'">{{ finishedText || translate('finished') }}</oxy-divider>
+    <block v-if="state === 'error'">
+      <text class="oxy-loadmore__text">{{ errorText || translate('error') }}</text>
+      <text class="oxy-loadmore__text is-light">{{ translate('retry') }}</text>
+      <oxy-icon name="refresh" custom-class="oxy-loadmore__refresh" />
+    </block>
+    <block v-if="state === 'loading'">
+      <oxy-loading v-bind="customLoadingProps" />
+      <text class="oxy-loadmore__text">{{ loadingText || translate('loading') }}</text>
+    </block>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-loadmore',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyDivider from '../oxy-divider/oxy-divider.vue'
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, ref } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { loadmoreProps, type LoadMoreState } from './types'
+import type { LoadingProps } from '../oxy-loading/types'
+import { isDef, isUndefined, omitBy } from '../common/util'
+
+const customLoadingProps = computed(() => {
+  const loadingProps: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
+  loadingProps.customClass = `oxy-loadmore__loading ${loadingProps.customClass || ''}`
+  return loadingProps
+})
+
+const props = defineProps(loadmoreProps)
+const emit = defineEmits(['reload'])
+
+const { translate } = useTranslate('loadmore')
+
+const currentState = ref<LoadMoreState | null>(null)
+
+function reload() {
+  if (props.state !== 'error') return
+  currentState.value = 'loading'
+  emit('reload')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-loadmore/types.ts

@@ -0,0 +1,30 @@
+import type { PropType } from 'vue'
+import { baseProps } from '../common/props'
+import type { LoadingProps } from '../oxy-loading/types'
+
+export type LoadMoreState = 'loading' | 'error' | 'finished'
+
+export const loadmoreProps = {
+  ...baseProps,
+  /**
+   * 加载状态，可选值：'loading' | 'error' | 'finished'
+   */
+  state: String as PropType<LoadMoreState>,
+  /**
+   * 加载提示文案
+   */
+  loadingText: String,
+  /**
+   * 全部加载完的提示文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   */
+  errorText: String,
+  /**
+   * 加载中loading组件的属性
+   * 参考loading组件
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
+}

package/components/oxy-message-box/index.scss

@@ -0,0 +1,108 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+.oxy-theme-dark {
+  @include b(message-box) {
+    @include e(body) {
+      background-color: $-dark-background2;
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(content) {
+      color: $-dark-color3;
+
+      &::-webkit-scrollbar-thumb {
+        background: $-dark-border-color;
+      }
+    }
+  }
+}
+
+:deep(.oxy-message-box){
+  border-radius: $-message-box-radius;
+  overflow: hidden;
+}
+
+@include b(message-box) {
+  border-radius: $-message-box-radius;
+  overflow: hidden;
+
+  @include e(container) {
+    width: $-message-box-width;
+    box-sizing: border-box;
+  }
+
+  @include e(body) {
+    background-color: $-message-box-bg;
+    padding: $-message-box-padding;
+
+    @include when(no-title) {
+      padding: 25px 24px 0px;
+    }
+  }
+
+  @include e(title) {
+    text-align: center;
+    font-size: $-message-box-title-fs;
+    color: $-message-box-title-color;
+    line-height: 20px;
+    font-weight: 500;
+    padding-top: 5px;
+    padding-bottom: 10px;
+  }
+
+  @include e(content) {
+    max-height: $-message-box-content-max-height;
+    color: $-message-box-content-color;
+    font-size: $-message-box-content-fs;
+    text-align: center;
+    overflow: auto;
+    line-height: 20px;
+
+    &::-webkit-scrollbar {
+      width: $-message-box-content-scrollbar-width;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      width: $-message-box-content-scrollbar-width;
+      background: $-message-box-content-scrollbar-color;
+      border-radius: calc($-message-box-content-scrollbar-width / 2);
+    }
+  }
+
+  @include e(input-error) {
+    min-height: 18px;
+    margin-top: 2px;
+    color: $-message-box-input-error-color;
+    text-align: left;
+
+    @include when(hidden) {
+      visibility: hidden;
+    }
+  }
+
+  @include e(actions) {
+    padding: 24px;
+  }
+  
+  @include edeep(actions-btn) {
+    &:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+
+  @include e(flex) {
+    display: flex;
+  }
+
+  @include e(block) {
+    display: block;
+  }
+
+  @include e(cancel) {
+    margin-right: 16px;
+  }
+}

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

@@ -0,0 +1,87 @@
+import { inject, provide, ref } from 'vue'
+import type { Message, MessageOptions, MessageOptionsWithCallBack, MessageResult, MessageType } from './types'
+import { deepMerge } from '../common/util'
+
+const messageDefaultOptionKey = '__MESSAGE_OPTION__'
+
+const None = Symbol('None')
+
+// 默认模板
+export const defaultOptions: MessageOptionsWithCallBack = {
+  title: '',
+  showCancelButton: false,
+  show: false,
+  closeOnClickModal: true,
+  msg: '',
+  type: 'alert',
+  inputType: 'text',
+  inputValue: '',
+  showErr: false,
+  zIndex: 99,
+  lazyRender: true,
+  inputError: ''
+}
+
+export function useMessage(selector: string = ''): Message {
+  const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey
+  const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack | typeof None>(None)) // Message选项
+  if (messageOption.value === None) {
+    messageOption.value = defaultOptions
+    provide(messageOptionKey, messageOption)
+  }
+
+  const createMethod = (type: MessageType) => {
+    // 优先级：options->MessageOptions->defaultOptions
+    return (options: MessageOptions | string) => {
+      const messageOptions = deepMerge({ type: 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)
+      messageOption.value = deepMerge(options, {
+        show: true,
+        success: (res: MessageResult) => {
+          close()
+          resolve(res)
+        },
+        fail: (res: MessageResult) => {
+          close()
+          reject(res)
+        }
+      })
+    })
+  }
+
+  // 打开Alert 弹框
+  const alert = createMethod('alert')
+  // 打开Confirm 弹框
+  const confirm = createMethod('confirm')
+  // 打开Prompt 弹框
+  const prompt = createMethod('prompt')
+
+  const close = () => {
+    if (messageOption.value !== None) {
+      messageOption.value.show = false
+    }
+  }
+  return {
+    show,
+    alert,
+    confirm,
+    prompt,
+    close
+  }
+}
+
+export const getMessageDefaultOptionKey = (selector: string) => {
+  return selector ? `${messageDefaultOptionKey}${selector}` : messageDefaultOptionKey
+}

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

@@ -0,0 +1,291 @@
+<template>
+  <view>
+    <oxy-popup
+      transition="zoom-in"
+      v-model="messageState.show"
+      :close-on-click-modal="messageState.closeOnClickModal"
+      :lazy-render="messageState.lazyRender"
+      custom-class="oxy-message-box"
+      @click-modal="toggleModal('modal')"
+      :z-index="messageState.zIndex"
+      :duration="200"
+      :root-portal="rootPortal"
+    >
+      <view :class="rootClass">
+        <view :class="bodyClass">
+          <view v-if="messageState.title" class="oxy-message-box__title">
+            {{ messageState.title }}
+          </view>
+          <view class="oxy-message-box__content">
+            <block v-if="messageState.type === 'prompt'">
+              <oxy-input
+                v-model="messageState.inputValue"
+                :type="messageState.inputType"
+                :size="messageState.inputSize"
+                :placeholder="messageState.inputPlaceholder"
+                @input="inputValChange"
+              />
+              <view v-if="messageState.showErr" class="oxy-message-box__input-error">
+                {{ messageState.inputError || translate('inputNoValidate') }}
+              </view>
+            </block>
+            <slot>{{ messageState.msg }}</slot>
+          </view>
+        </view>
+        <view :class="`oxy-message-box__actions ${messageState.showCancelButton ? 'oxy-message-box__flex' : 'oxy-message-box__block'}`">
+          <oxy-button v-bind="customCancelProps" v-if="messageState.showCancelButton" @click="toggleModal('cancel')">
+            {{ messageState.cancelButtonText || translate('cancel') }}
+          </oxy-button>
+          <oxy-button v-bind="customConfirmProps" @click="toggleModal('confirm')">
+            {{ messageState.confirmButtonText || translate('confirm') }}
+          </oxy-button>
+        </view>
+      </view>
+    </oxy-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-message-box',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyPopup from '../oxy-popup/oxy-popup.vue'
+import OxyButton from '../oxy-button/oxy-button.vue'
+import OxyInput from '../oxy-input/oxy-input.vue'
+import { computed, inject, reactive, ref, watch } from 'vue'
+import { messageBoxProps, type MessageOptionsWithCallBack, type MessageResult } from './types'
+import { defaultOptions, getMessageDefaultOptionKey } from '.'
+import { deepAssign, isDef, isFunction, isUndefined, omitBy } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import type { ButtonProps } from '../oxy-button/types'
+
+const props = defineProps(messageBoxProps)
+
+const { translate } = useTranslate('message-box')
+
+const rootClass = computed(() => {
+  return `oxy-message-box__container ${props.customClass}`
+})
+
+const bodyClass = computed(() => {
+  return `oxy-message-box__body ${!messageState.title ? 'is-no-title' : ''} ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
+})
+
+const messageOptionKey = getMessageDefaultOptionKey(props.selector)
+const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack>(defaultOptions)) // message选项
+
+const messageState = reactive<MessageOptionsWithCallBack>({
+  msg: '', // 消息内容
+  show: false, // 是否显示弹框
+  title: '', // 标题
+  showCancelButton: false, // 是否展示取消按钮
+  closeOnClickModal: true, // 是否支持点击蒙层关闭
+  confirmButtonText: '', // 确定按钮文案
+  cancelButtonText: '', // 取消按钮文案
+  type: 'alert', // 弹框类型
+  inputType: 'text', // 输入框类型
+  inputValue: '', // 输入框初始值
+  inputPlaceholder: '', // 输入框placeholder
+  inputError: '', // 输入框错误提示文案
+  showErr: false, // 是否显示错误提示
+  zIndex: 99, // 弹窗层级
+  lazyRender: true // 弹层内容懒渲染
+})
+
+/**
+ * 确认按钮属性
+ */
+const customConfirmProps = computed(() => {
+  const buttonProps: Partial<ButtonProps> = deepAssign(
+    {
+      block: true
+    },
+    isDef(messageState.confirmButtonProps) ? omitBy(messageState.confirmButtonProps, isUndefined) : {}
+  )
+  buttonProps.customClass = `${buttonProps.customClass || ''} oxy-message-box__actions-btn`
+  return buttonProps
+})
+
+/**
+ * 取消按钮属性
+ */
+const customCancelProps = computed(() => {
+  const buttonProps: Partial<ButtonProps> = deepAssign(
+    {
+      block: true,
+      type: 'info'
+    },
+    isDef(messageState.cancelButtonProps) ? omitBy(messageState.cancelButtonProps, isUndefined) : {}
+  )
+  buttonProps.customClass = `${buttonProps.customClass || ''} oxy-message-box__actions-btn`
+  return buttonProps
+})
+
+// 监听options变化展示
+watch(
+  () => messageOption.value,
+  (newVal: MessageOptionsWithCallBack) => {
+    reset(newVal)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => messageState.show,
+  (newValue) => {
+    resetErr(!!newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 点击操作
+ * @param action
+ */
+function toggleModal(action: 'confirm' | 'cancel' | 'modal') {
+  if (action === 'modal' && !messageState.closeOnClickModal) {
+    return
+  }
+  if (messageState.type === 'prompt' && action === 'confirm' && !validate()) {
+    return
+  }
+  switch (action) {
+    case 'confirm':
+      if (messageState.beforeConfirm) {
+        messageState.beforeConfirm({
+          resolve: (isPass) => {
+            if (isPass) {
+              handleConfirm({
+                action: action,
+                value: messageState.inputValue
+              })
+            }
+          }
+        })
+      } else {
+        handleConfirm({
+          action: action,
+          value: messageState.inputValue
+        })
+      }
+      break
+    case 'cancel':
+      handleCancel({
+        action: action
+      })
+      break
+    default:
+      handleCancel({
+        action: 'modal'
+      })
+      break
+  }
+}
+
+/**
+ * 确认回调
+ * @param result
+ */
+function handleConfirm(result: MessageResult) {
+  messageState.show = false
+  if (isFunction(messageState.success)) {
+    messageState.success(result)
+  }
+}
+
+/**
+ * 取消回调
+ * @param result
+ */
+function handleCancel(result: MessageResult) {
+  messageState.show = false
+  if (isFunction(messageState.fail)) {
+    messageState.fail(result)
+  }
+}
+
+/**
+ * 如果存在校验规则行为，则进行判断校验是否通过规则。默认不存在校验直接铜鼓。
+ */
+function validate() {
+  if (messageState.inputPattern && !messageState.inputPattern.test(String(messageState.inputValue))) {
+    messageState.showErr = true
+    return false
+  }
+  if (typeof messageState.inputValidate === 'function') {
+    const validateResult = messageState.inputValidate(messageState.inputValue!)
+    if (!validateResult) {
+      messageState.showErr = true
+      return false
+    }
+  }
+  messageState.showErr = false
+  return true
+}
+
+/**
+ * @description show关闭时，销毁错误提示
+ * @param val
+ */
+function resetErr(val: boolean) {
+  if (val === false) {
+    messageState.showErr = false
+  }
+}
+function inputValChange({ value }: { value: string | number }) {
+  if (value === '') {
+    messageState.showErr = false
+    return
+  }
+  messageState.inputValue = value
+}
+
+/**
+ * 重置message选项值
+ * @param option message选项值
+ */
+function reset(option: MessageOptionsWithCallBack) {
+  if (option) {
+    messageState.title = isDef(option.title) ? option.title : ''
+    messageState.showCancelButton = isDef(option.showCancelButton) ? option.showCancelButton : false
+    messageState.show = option.show
+    messageState.closeOnClickModal = option.closeOnClickModal
+    messageState.confirmButtonText = option.confirmButtonText
+    messageState.cancelButtonText = option.cancelButtonText
+    messageState.msg = option.msg
+    messageState.type = option.type
+    messageState.inputType = option.inputType
+    messageState.inputSize = option.inputSize
+    messageState.inputValue = option.inputValue
+    messageState.inputPlaceholder = option.inputPlaceholder
+    messageState.inputPattern = option.inputPattern!
+    messageState.inputValidate = option.inputValidate
+    messageState.success = option.success
+    messageState.fail = option.fail
+    messageState.beforeConfirm = option.beforeConfirm
+    messageState.inputError = option.inputError
+    messageState.showErr = option.showErr
+    messageState.zIndex = option.zIndex
+    messageState.lazyRender = option.lazyRender
+    messageState.confirmButtonProps = option.confirmButtonProps
+    messageState.cancelButtonProps = option.cancelButtonProps
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>