oxy-uni-ui 1.0.1

package/components/oxy-toast/types.ts

@@ -0,0 +1,181 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+import type { LoadingType } from '../oxy-loading/types'
+
+export type ToastIconType = 'success' | 'error' | 'warning' | 'loading' | 'info' // 图标类型
+
+export type ToastPositionType = 'top' | 'middle-top' | 'middle' | 'bottom' // 提示信息框的位置类型
+
+export type ToastDirection = 'vertical' | 'horizontal' // 提示信息框的排列方向
+
+export type ToastLoadingType = LoadingType // 提示信息加载状态类型
+
+export type ToastOptions = {
+  msg?: string
+  duration?: number
+  direction?: ToastDirection
+  iconName?: ToastIconType
+  iconSize?: number
+  loadingType?: ToastLoadingType
+  loadingColor?: string
+  loadingSize?: number
+  iconColor?: string
+  position?: ToastPositionType
+  show?: boolean
+  zIndex?: number
+  /**
+   * 是否存在遮罩层
+   */
+  cover?: boolean
+  /**
+   * 图标类名
+   */
+  iconClass?: string
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  classPrefix?: string
+  /**
+   * 完全展示后的回调函数
+   */
+  opened?: () => void
+  /**
+   * 完全关闭时的回调函数
+   */
+  closed?: () => void
+}
+
+export interface Toast {
+  // 打开Toast
+  show(toastOptions: ToastOptions | string): void
+  // 成功提示
+  success(toastOptions: ToastOptions | string): void
+  // 关闭提示
+  error(toastOptions: ToastOptions | string): void
+  // 常规提示
+  info(toastOptions: ToastOptions | string): void
+  // 警告提示
+  warning(toastOptions: ToastOptions | string): void
+  // 加载提示
+  loading(toastOptions: ToastOptions | string): void
+  // 关闭Toast
+  close(): void
+}
+
+export const toastProps = {
+  ...baseProps,
+  /**
+   * 选择器
+   * @type {string}
+   * @default ''
+   */
+  selector: makeStringProp(''),
+  /**
+   * 提示信息
+   * @type {string}
+   * @default ''
+   */
+  msg: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 排列方向
+   * @type {'vertical' | 'horizontal'}
+   * @default 'horizontal'
+   */
+  direction: makeStringProp<ToastDirection>('horizontal'),
+  /**
+   * 图标名称
+   * @type {'success' | 'error' | 'warning' | 'loading' | 'info'}
+   * @default ''
+   */
+  iconName: {
+    type: String as PropType<ToastIconType>,
+    default: ''
+  },
+  /**
+   * 图标大小
+   * @type {number}
+   */
+  iconSize: Number,
+  /**
+   * 加载类型
+   * @type {'outline' | 'ring'}
+   * @default 'outline'
+   */
+  loadingType: makeStringProp<ToastLoadingType>('outline'),
+  /**
+   * 加载颜色
+   * @type {string}
+   * @default '#4D80F0'
+   */
+  loadingColor: {
+    type: String,
+    default: '#4D80F0'
+  },
+  /**
+   * 加载大小
+   * @type {number}
+   */
+  loadingSize: Number,
+  /**
+   * 图标颜色
+   * @type {string}
+   */
+  iconColor: String,
+  /**
+   * 位置
+   * @type {'top' | 'middle-top' | 'middle' | 'bottom'}
+   * @default 'middle-top'
+   */
+  position: makeStringProp<ToastPositionType>('middle-top'),
+  /**
+   * 层级
+   * @type {number}
+   * @default 100
+   */
+  zIndex: {
+    type: Number,
+    default: 100
+  },
+  /**
+   * 是否存在遮罩层
+   * @type {boolean}
+   * @default false
+   */
+  cover: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 图标类名
+   * @type {string}
+   * @default ''
+   */
+  iconClass: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 类名前缀
+   * @type {string}
+   * @default 'oxy-icon'
+   */
+  classPrefix: {
+    type: String,
+    default: 'oxy-icon'
+  },
+  /**
+   * 完全展示后的回调函数
+   * @type {Function}
+   */
+  opened: Function as PropType<() => void>,
+  /**
+   * 完全关闭时的回调函数
+   * @type {Function}
+   */
+  closed: Function as PropType<() => void>
+}
+
+export type ToastProps = ExtractPropTypes<typeof toastProps>

package/components/oxy-tooltip/index.scss

@@ -0,0 +1,66 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+
+  @include b(tooltip) {
+
+    @include e(pos) {
+      background: $-dark-background4;
+      color: $-tooltip-color;
+    }
+
+    @include triangleArrow($-tooltip-arrow-size, $-dark-background4);
+
+  }
+
+}
+
+@include b(tooltip) {
+  position: relative;
+  display: inline-block;
+
+  @include edeep(pos) {
+    position: absolute;
+    min-width: 138px;
+    min-height: 36px;
+    font-size: $-tooltip-fs;
+    backdrop-filter: blur($-tooltip-blur);
+    background-clip: padding-box;
+    border-radius: $-tooltip-radius;
+    background: $-tooltip-bg;
+    color: $-tooltip-color;
+    text-align: center;
+    box-sizing: border-box;
+    z-index: $-tooltip-z-index;
+  }
+
+
+  @include e(hidden) {
+    left: -100vw;
+    bottom: -100vh;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    line-height: $-tooltip-line-height;
+    font-size: $-tooltip-fs;
+  }
+
+  @include e(inner) {
+    padding: $-tooltip-padding;
+    white-space: nowrap;
+    line-height: $-tooltip-line-height;
+  }
+
+  @include edeep(close-icon) {
+    font-size: 12px;
+    position: absolute;
+    right: -8px;
+    top: -10px;
+    transform: scale(0.5);
+    padding: 10px;
+  }
+
+  @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
+}

package/components/oxy-tooltip/oxy-tooltip.vue

@@ -0,0 +1,141 @@
+<template>
+  <view :class="`oxy-tooltip ${customClass}`" :style="customStyle" id="tooltip" @click.stop="popover.noop">
+    <!-- 用于为渲染获取宽高的元素 -->
+    <view class="oxy-tooltip__pos oxy-tooltip__hidden" id="pos">
+      <view class="oxy-tooltip__container custom-pop">
+        <view v-if="!useContentSlot" class="oxy-tooltip__inner">{{ content }}</view>
+      </view>
+    </view>
+    <oxy-transition custom-class="oxy-tooltip__pos" :custom-style="popover.popStyle.value" :show="showTooltip" name="fade" :duration="200">
+      <view class="oxy-tooltip__container custom-pop">
+        <view v-if="visibleArrow" :class="`oxy-tooltip__arrow ${popover.arrowClass.value} ${customArrow}`" :style="popover.arrowStyle.value"></view>
+        <!-- 普通模式 -->
+        <view v-if="!useContentSlot" class="oxy-tooltip__inner">{{ content }}</view>
+        <!-- 用户自定义样式 -->
+        <slot name="content" v-else />
+      </view>
+      <oxy-icon v-if="showClose" name="close" custom-class="oxy-tooltip__close-icon" @click="toggle"></oxy-icon>
+    </oxy-transition>
+    <view @click="toggle" class="oxy-tooltip__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-tooltip',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { usePopover } from '../composables/usePopover'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { tooltipProps, type TooltipExpose } from './types'
+
+const props = defineProps(tooltipProps)
+const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
+
+const popover = usePopover(props.visibleArrow)
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'tooltip'
+const { proxy } = getCurrentInstance() as any
+const showTooltip = ref<boolean>(false) // 控制tooltip显隐
+
+watch(
+  () => props.content,
+  (newVal) => {
+    if (newVal === null || newVal === undefined) {
+      // eslint-disable-next-line prettier/prettier
+      console.error('[oxy-design] warning(oxy-tooltip): content can\'t be null or undefined')
+    }
+  }
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, props.visibleArrow, selector)
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showTooltip.value = newValue
+  }
+)
+
+watch(
+  () => showTooltip.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(props.placement, props.offset)
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+    popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+    emit('change', { show: newValue })
+    emit(`${newValue ? 'open' : 'close'}`)
+  }
+)
+
+onMounted(() => {
+  popover.init(props.placement, props.visibleArrow, selector)
+})
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  popover.showStyle.value = props.modelValue ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showTooltip.value)
+}
+
+function open() {
+  updateModelValue(true)
+}
+
+function close() {
+  updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+  showTooltip.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<TooltipExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-tooltip/types.ts

@@ -0,0 +1,107 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type PlacementType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+
+export const tooltipProps = {
+  ...baseProps,
+
+  /**
+   * 自定义箭头内容
+   * 类型：string
+   */
+  customArrow: makeStringProp(''),
+
+  /**
+   * 自定义弹出内容
+   * 类型：string
+   */
+  customPop: makeStringProp(''),
+
+  /**
+   * 是否显示Tooltip箭头
+   * 类型：boolean
+   * 默认值：true
+   */
+  visibleArrow: makeBooleanProp(true),
+
+  /**
+   * 显示的内容，也可以通过`slot#content`传入
+   * 类型：string | Array<Record<string, any>>
+   * 默认值：无（根据传入值而定）
+   */
+  content: {
+    type: [String, Array] as PropType<string | Array<Record<string, any>>>
+  },
+
+  /**
+   * Tooltip的出现位置
+   * 类型：string
+   * 可选值：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
+   * 默认值：'bottom'
+   */
+  placement: makeStringProp<PlacementType>('bottom'),
+
+  /**
+   * 出现位置的偏移量
+   * 类型：number
+   * 默认值：0
+   */
+  // offset: makeNumberProp(0),
+  offset: {
+    // 需要支持数字、数组、对象类型
+    type: [Number, Array, Object] as PropType<number | Array<number> | Record<'x' | 'y', number>>,
+    default: 0
+  },
+
+  /**
+   * 是否使用slot来传入content内容
+   * 类型：boolean
+   * 默认值：false
+   */
+  useContentSlot: makeBooleanProp(false),
+
+  /**
+   * Tooltip是否可用
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 是否显示Tooltip内部的关闭按钮
+   * 类型：boolean
+   * 默认值：false
+   */
+  showClose: makeBooleanProp(false),
+
+  /**
+   * Tooltip的状态是否可见，通过v-model绑定
+   * 类型：boolean
+   * 默认值：false
+   */
+  modelValue: makeBooleanProp(false)
+}
+
+export type TooltipProps = ExtractPropTypes<typeof tooltipProps>
+
+export type TooltipExpose = {
+  // 打开tooltip
+  open: () => void
+  // 关闭tooltip
+  close: () => void
+}
+
+export type TooltipInstance = ComponentPublicInstance<TooltipProps, TooltipExpose>

package/components/oxy-transition/index.scss

@@ -0,0 +1,95 @@
+.oxy-transition {
+  transition-timing-function: ease;
+}
+
+.oxy-fade-enter,
+.oxy-fade-leave-to {
+  opacity: 0;
+}
+
+.oxy-fade-enter-active,
+.oxy-fade-leave-active {
+  transition-property: opacity;
+}
+
+.oxy-fade-up-enter,
+.oxy-fade-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+  opacity: 0;
+}
+
+.oxy-fade-down-enter,
+.oxy-fade-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+  opacity: 0;
+}
+
+.oxy-fade-left-enter,
+.oxy-fade-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+
+.oxy-fade-right-enter,
+.oxy-fade-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+
+.oxy-slide-up-enter,
+.oxy-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.oxy-slide-down-enter,
+.oxy-slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.oxy-slide-left-enter,
+.oxy-slide-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.oxy-slide-right-enter,
+.oxy-slide-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+}
+
+.oxy-zoom-in-enter,
+.oxy-zoom-in-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.oxy-zoom-out-enter,
+.oxy-zoom-out-leave-to {
+  transform: scale(1.2);
+  opacity: 0;
+}
+
+.oxy-zoom-in-enter-active,
+.oxy-zoom-in-leave-active,
+.oxy-zoom-out-enter-active,
+.oxy-zoom-out-leave-active,
+.oxy-fade-up-enter-active,
+.oxy-fade-up-leave-active,
+.oxy-fade-down-enter-active,
+.oxy-fade-down-leave-active,
+.oxy-fade-left-enter-active,
+.oxy-fade-left-leave-active,
+.oxy-fade-right-enter-active,
+.oxy-fade-right-leave-active {
+  transition-property: opacity, transform;
+}
+
+.oxy-slide-up-enter-active,
+.oxy-slide-up-leave-active,
+.oxy-slide-down-enter-active,
+.oxy-slide-down-leave-active,
+.oxy-slide-left-enter-active,
+.oxy-slide-left-leave-active,
+.oxy-slide-right-enter-active,
+.oxy-slide-right-leave-active {
+  transition-property: transform;
+}