hy-app 0.2.6 → 0.2.8

package/components/hy-image/typing.d.ts

@@ -1,76 +1,80 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyImageProps {
   /**
    * @description 图片地址
    * */
-  src?: string;
+  src?: string
   /**
    * @description 裁剪模式，见官网说明 （默认 'aspectFill' ）
    * */
-  mode?: HyApp.ImageModeVo;
+  mode?: HyApp.ImageModeVo
   /**
    * @description 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
    * */
-  width?: string | number;
+  width?: string | number
   /**
    * @description 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
    * */
-  height?: string | number;
+  height?: string | number
   /**
    * @description 图片形状，circle-圆形，square-方形 （默认 'square' ）
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
    * */
-  radius?: number | string;
+  radius?: number | string
   /**
    * @description 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
    * */
-  lazyLoad?: boolean;
+  lazyLoad?: boolean
   /**
    * @description 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
    * */
-  showMenuByLongPress?: boolean;
+  showMenuByLongPress?: boolean
   /**
    * @description 加载中的图标，或者小图片 （默认 'photo' ）
    * */
-  loadingIcon?: string;
+  loadingIcon?: string
   /**
    * @description 加载失败的图标，或者小图片 （默认 'error-circle' ）
    * */
-  errorIcon?: string;
+  errorIcon?: string
   /**
    * @description 是否显示加载中的图标或者自定义的slot （默认 true ）
    * */
-  showLoading?: boolean;
+  showLoading?: boolean
   /**
    * @description 是否显示加载错误的图标或者自定义的slot （默认 true ）
    * */
-  showError?: boolean;
+  showError?: boolean
   /**
    * @description 是否需要淡入效果 （默认 true ）
    * */
-  fade?: boolean;
+  fade?: boolean
   /**
    * @description 只支持网络资源，只对微信小程序有效 （默认 false ）
    * */
-  webp?: boolean;
+  webp?: boolean
   /**
    * @description 搭配fade参数的过渡时间，单位ms （默认 500 ）
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
    * */
-  bgColor?: string;
+  bgColor?: string
+  /**
+   * @description 是否模糊图片  (默认 false )
+   * */
+  indistinct?: boolean
   /**
    * @description 是否预览图片  (默认 false )
    * */
-  previewImage?: boolean;
+  previewImage?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-modal/index.scss

@@ -86,7 +86,7 @@
         }
 
         &--hover {
-          background-color: $hy-background--hover;
+          opacity: 0.7;
         }
 
         &__text {

package/components/hy-popover/hy-popover.vue

@@ -0,0 +1,200 @@
+<template>
+  <view class="hy-popover" :style="customStyle" id="popover" @click.stop="popover.noop">
+    <!-- 使用插槽时无法获取正确宽高 -->
+    <view class="hy-popover__pos hy-popover__hidden" id="pos">
+      <view class="hy-popover__container">
+        <view v-if="mode === 'normal'" class="hy-popover__inner">
+          {{ content }}
+        </view>
+        <view v-if="mode === 'menu' && typeof content === 'object'" class="hy-popover__menu">
+          <view
+            v-for="(item, index) in content"
+            :key="index"
+            class="hy-popover__menu-inner"
+            @click="menuClick(index)"
+          >
+            <hy-icon v-if="item.iconClass" :name="item.iconClass" custom-class="hy-popover__icon" />
+            <text>{{ item.content }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <hy-transition
+      custom-class="hy-popover__pos"
+      :custom-style="popover.popStyle"
+      :show="showPopover"
+      name="fade"
+      :duration="200"
+    >
+      <view class="hy-popover__container">
+        <!-- 三角形 -->
+        <view
+          :class="`hy-popover__arrow ${popover.arrowClass.value}`"
+          :style="popover.arrowStyle.value"
+        ></view>
+        <!-- 三角形 -->
+
+        <!-- 普通模式 -->
+        <view v-if="mode === 'normal'" class="hy-popover__inner">
+          {{ content }}
+        </view>
+        <!-- 普通模式 -->
+
+        <!-- 列表模式 -->
+        <view v-if="mode === 'menu'" class="hy-popover__menu">
+          <view
+            v-for="(item, index) in content"
+            :key="index"
+            class="hy-popover__menu-inner"
+            @click="menuClick(index)"
+            :style="index === 0 ? 'border-top: none' : ''"
+          >
+            <hy-icon
+              v-if="typeof item === 'object' && item.iconClass"
+              :name="item.iconClass"
+              custom-class="hy-popover__icon"
+            />
+            <view style="display: inline-block">
+              {{ typeof item === 'object' && item.content ? item.content : item }}
+            </view>
+          </view>
+        </view>
+        <!-- 列表模式 -->
+
+        <!-- 用户自定义样式 -->
+        <slot name="content" v-else />
+        <!-- 用户自定义样式 -->
+      </view>
+      <hy-icon
+        v-if="showClose"
+        name="close"
+        custom-class="hy-popover__close-icon"
+        @click="toggle"
+      ></hy-icon>
+    </hy-transition>
+    <view @click="toggle" class="hy-popover__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'hy-popover',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
+import defaultProps from './props'
+import IProps, { type PopoverExpose } from './typing'
+import { isArray } from '../../utils'
+import { type Queue, queueKey, usePopover } from '../../composables'
+
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyTransition from '../hy-transition/hy-transition.vue'
+
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { modelValue, content, mode, placement } = toRefs(props)
+const emit = defineEmits(['update:modelValue', 'menuClick', 'change', 'open', 'close'])
+
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'popover'
+const { proxy } = getCurrentInstance() as any
+const popover = usePopover()
+const showPopover = ref<boolean>(false) // 控制popover显隐
+
+watch(
+  () => content.value,
+  (newVal) => {
+    if (mode.value === 'normal' && typeof newVal !== 'string') {
+      console.error('在“normal”模式下，值类型必须为字符串类型。')
+    } else if (mode.value === 'menu' && !isArray(newVal)) {
+      console.error('在“menu”模式下，值类型必须是数组类型。')
+    }
+  },
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(placement.value, true, selector)
+  },
+)
+
+watch(
+  () => modelValue.value,
+  (newValue: boolean) => {
+    showPopover.value = newValue
+  },
+)
+
+watch(
+  () => showPopover.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(placement.value, props.offset)
+      // if (queue && queue.closeOther) {
+      //   queue.closeOther(proxy)
+      // }
+      queue.closeOther(proxy)
+    }
+    popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+    emit('change', { show: newValue })
+    emit(`${newValue ? 'open' : 'close'}`)
+  },
+)
+
+onMounted(() => {
+  popover.init(placement.value, true, selector)
+})
+
+onBeforeMount(() => {
+  queue.pushToQueue(proxy)
+  popover.showStyle.value = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+  queue.removeFromQueue(proxy)
+})
+
+const menuClick = (index: number) => {
+  updateModelValue(false)
+  emit('menuClick', {
+    item: (props.content as Array<Record<string, any>>)[index],
+    index,
+  })
+}
+
+const toggle = () => {
+  if (props.disabled) return
+  updateModelValue(!showPopover.value)
+}
+
+const open = () => {
+  updateModelValue(true)
+}
+
+const close = () => {
+  updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+  showPopover.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<PopoverExpose>({
+  open,
+  close,
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-popover/index.scss

@@ -0,0 +1,83 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+$z-index: 998;
+
+@include b(popover) {
+  position: relative;
+  display: inline-block;
+
+  @include edeep(icon) {
+    vertical-align: middle;
+    font-size: 18px;
+    margin-right: 5px;
+  }
+
+  /* 菜单 */
+  @include e(menu-inner) {
+    position: relative;
+    padding: 20rpx 0;
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      border-bottom: $hy-border-line;
+    }
+  }
+
+  @include e(menu) {
+    display: inline-block;
+    padding: 0 $hy-border-margin-padding-base;
+    white-space: nowrap;
+    z-index: $z-index;
+    position: relative;
+    background-color: $hy-background--container;
+    border-radius: $hy-border-radius-sm;
+  }
+
+  @include edeep(pos) {
+    position: absolute;
+    box-sizing: border-box;
+    background-clip: padding-box;
+    text-align: center;
+    min-height: 36px;
+    z-index: $z-index;
+    transition: opacity 0.2s;
+    box-shadow: $hy-box-shadow;
+    border-radius: $hy-border-radius-sm;
+  }
+
+
+  @include e(hidden) {
+    left: -220vw;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    position: relative;
+    border-radius: $hy-border-radius-sm;
+  }
+
+  @include e(inner) {
+    position: relative;
+    padding: $hy-border-margin-padding-base;
+    line-height: 22px;
+    z-index: $z-index;
+    background-color: $hy-background--container;
+    border-radius: $hy-border-radius-sm;
+    box-sizing: content-box;
+    width: 200px;
+  }
+
+
+  @include edeep(close-icon) {
+    font-size: 12px;
+    position: absolute;
+    right: -10px;
+    top: -7px;
+    padding: 10px;
+    z-index: $z-index;
+  }
+
+  @include squareArrow(6px, $hy-background--container, $z-index, $hy-box-shadow);
+}

package/components/hy-popover/props.ts

@@ -0,0 +1,13 @@
+import type IProps from './typing'
+
+const defaultProps: IProps = {
+  modelValue: false,
+  content: '',
+  placement: 'bottom',
+  offset: 0,
+  showClose: false,
+  disabled: false,
+  mode: 'normal',
+}
+
+export default defaultProps

package/components/hy-popover/typing.d.ts

@@ -0,0 +1,56 @@
+import type { CSSProperties } from 'vue'
+
+export type IPlacementVo =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+export type IOffset = number | number[] | Record<'x' | 'y', number>
+
+export type PopoverExpose = {
+  open: () => void
+  close: () => void
+}
+
+export default interface HyOverlayProps {
+  /**
+   * @description 控制 popover 的显示状态
+   * */
+  modelValue?: boolean
+  /**
+   * @description 显示的内容，也可以通过 slot#content 传入
+   */
+  content?: string | Record<string, any>[]
+  /**
+   * @description 指定 popover 的放置位置：top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
+   */
+  placement?: IPlacementVo
+  /**
+   * @description 控制 popover 的显示状态
+   */
+  offset?: IOffset
+  /**
+   * @description 是否禁用 popover
+   */
+  disabled?: boolean
+  /**
+   * @description 是否显示关闭按钮
+   */
+  showClose?: boolean
+  /**
+   * 当前显示的模式，决定内容的展现形式，可选值：normal（普通模式）/ menu（菜单模式）
+   */
+  mode?: 'normal' | 'menu'
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties
+}

package/components/hy-qrcode/hy-qrcode.vue

@@ -26,40 +26,39 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance, toRefs, ref, onMounted } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import QRCode from "./qrcode.js";
-import { addUnit, error } from "../../utils";
-import { IconConfig } from "../../config";
+import { getCurrentInstance, toRefs, ref, onMounted } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
+import QRCode from './qrcode.js'
+import { addUnit, error } from '../../utils'
+import { IconConfig } from '../../config'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyLoading from "../hy-loading/hy-loading.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { text, allowPreview } = toRefs(props);
-const emit = defineEmits(["result", "preview", "longPress"]);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { text, allowPreview } = toRefs(props)
+const emit = defineEmits(['result', 'preview', 'longPress'])
 
-const instance = getCurrentInstance();
-const loading = ref(false);
-const qrcode = ref("");
-const result = ref("");
+const instance = getCurrentInstance()
+const loading = ref(false)
+const qrcode = ref('')
+const result = ref('')
 
 onMounted(() => {
-  console.log(111);
-  initQrCode();
-});
+  initQrCode()
+})
 
 const initQrCode = () => {
   if (text.value) {
-    loading.value = true;
+    loading.value = true
     qrcode.value = new QRCode({
       context: instance, // 上下文环境
       canvasId: props.cid, // canvas-id
@@ -76,34 +75,34 @@ const initQrCode = () => {
       imageSize: props.iconSize, // 二维码图标大小
       cbResult: function (res: any) {
         // 生成二维码的回调
-        _result(res);
+        _result(res)
       },
-    });
+    })
   } else {
-    error("二维码内容不能为空");
+    error('二维码内容不能为空')
   }
-};
+}
 
 const _result = (res: any) => {
-  loading.value = false;
-  result.value = res;
-  emit("result", res);
-};
+  loading.value = false
+  result.value = res
+  emit('result', res)
+}
 
 const _saveCode = () => {
-  if (result.value != "") {
+  if (result.value != '') {
     uni.saveImageToPhotosAlbum({
       filePath: result.value,
       success: function () {
         uni.showToast({
-          title: "二维码保存成功",
-          icon: "success",
+          title: '二维码保存成功',
+          icon: 'success',
           duration: 2000,
-        });
+        })
       },
-    });
+    })
   }
-};
+}
 /**
  * @description 预览
  * */
@@ -114,29 +113,29 @@ const preview = (e) => {
     uni.previewImage({
       urls: [result.value],
       longPressActions: {
-        itemList: ["保存二维码图片"],
+        itemList: ['保存二维码图片'],
         success: function (data) {
           // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
           switch (data.tapIndex) {
             case 0:
-              _saveCode();
-              break;
+              _saveCode()
+              break
           }
         },
         fail: function (err) {
-          console.error(err.errMsg);
+          console.error(err.errMsg)
         },
       },
-    });
+    })
   }
-  emit("preview", result.value, e);
-};
+  emit('preview', result.value, e)
+}
 
 const onLongPress = () => {
-  emit("longPress");
-};
+  emit('longPress')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-rate/props.ts

@@ -1,5 +1,5 @@
-import { ColorConfig, IconConfig } from "../../config";
-import type IProps from "./typing";
+import { ColorConfig, IconConfig } from '../../config'
+import type IProps from './typing'
 
 const defaultProps: IProps = {
   modelValue: 1,
@@ -7,13 +7,13 @@ const defaultProps: IProps = {
   disabled: false,
   readonly: false,
   size: 18,
-  inactiveColor: "#b2b2b2",
-  activeColor: "#FFF00D",
+  inactiveColor: '#b2b2b2',
+  activeColor: '#FFF00D',
   gutter: 4,
   minCount: 1,
   allowHalf: false,
   activeIcon: IconConfig.STAR_FILL,
   inactiveIcon: IconConfig.STAR,
   touchable: true,
-};
-export default defaultProps;
+}
+export default defaultProps