hy-app 0.2.5 → 0.2.7

package/components/hy-modal/hy-modal.vue

@@ -2,9 +2,9 @@
   <HyPopup
     mode="center"
     :zoom="zoom"
-    :show="show"
+    :show="modelValue"
+    :round="round"
     :customStyle="{
-      borderRadius: '6px',
       overflow: 'hidden',
       marginTop: `-${addUnit(negativeTop)}`,
     }"
@@ -32,53 +32,41 @@
           </text>
         </slot>
       </view>
-      <view
-        class="hy-modal__button-group--confirm-button"
-        v-if="$slots.confirmButton"
-      >
+      <view class="hy-modal__button-group--confirm-button" v-if="$slots.confirmButton">
         <slot name="confirmButton"></slot>
       </view>
       <template v-else>
         <view
-          class="hy-modal__button-group"
+          :class="[
+            'hy-modal__button-group',
+            showCancelButton &&
+              showConfirmButton &&
+              (!buttonReverse ? 'hy-modal__button-exact' : 'hy-modal__button-exact--reverse'),
+          ]"
           :style="{
             flexDirection: buttonReverse ? 'row-reverse' : 'row',
           }"
         >
           <view
-            class="hy-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
+            class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--cancel"
             :hover-stay-time="150"
             hover-class="hy-modal__button-group__wrapper--hover"
-            :class="[
-              showCancelButton &&
-                !showConfirmButton &&
-                'hy-modal__button-group__wrapper--only-cancel',
-            ]"
             v-if="showCancelButton"
             @tap.stop="cancelHandler"
           >
             <text
-              class="hy-modal__button-group__wrapper__text"
+              class="hy-modal__button-group__wrapper__text hy-modal__button-group__wrapper--cancel-text"
               :style="{
                 color: cancelColor,
               }"
-              >{{ cancelText }}</text
             >
+              {{ cancelText }}
+            </text>
           </view>
-          <hy-line
-            v-if="showConfirmButton && showCancelButton"
-            length="48px"
-            direction="column"
-          ></hy-line>
           <view
             class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--confirm"
             :hover-stay-time="150"
             hover-class="hy-modal__button-group__wrapper--hover"
-            :class="[
-              !showCancelButton &&
-                showConfirmButton &&
-                'hy-modal__button-group__wrapper--only-confirm',
-            ]"
             v-if="showConfirmButton"
             @tap="confirmHandler"
           >
@@ -89,8 +77,9 @@
               :style="{
                 color: confirmColor,
               }"
-              >{{ confirmText }}</text
             >
+              {{ confirmText }}
+            </text>
           </view>
         </view>
       </template>
@@ -100,38 +89,37 @@
 
 <script lang="ts">
 export default {
-  name: "hy-modal",
+  name: 'hy-modal',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit } from "../../utils";
+import { ref, toRefs, watch } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
+import { addUnit } from '../../utils'
 
 // 组件
-import HyLine from "../hy-line/hy-line.vue";
-import HyPopup from "../hy-popup/hy-popup.vue";
-import HyLoading from "../hy-loading/hy-loading.vue";
+import HyPopup from '../hy-popup/hy-popup.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { show, asyncClose, closeOnClickOverlay } = toRefs(props);
-const emit = defineEmits(["confirm", "cancel", "close", "update:show"]);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { modelValue, asyncClose, closeOnClickOverlay } = toRefs(props)
+const emit = defineEmits(['confirm', 'cancel', 'close', 'update:modelValue'])
 
-const loading = ref<boolean>(false);
+const loading = ref<boolean>(false)
 
 watch(
-  () => show.value,
+  () => modelValue.value,
   (newValue) => {
-    if (newValue && loading.value) loading.value = false;
+    if (newValue && loading.value) loading.value = false
   },
-);
+)
 
 /**
  * @description 点击确定按钮
@@ -139,34 +127,34 @@ watch(
 const confirmHandler = () => {
   // 如果配置了异步关闭，将按钮值为loading状态
   if (asyncClose.value) {
-    loading.value = true;
+    loading.value = true
   } else {
-    emit("update:show", false);
+    emit('update:modelValue', false)
   }
-  emit("confirm");
-};
+  emit('confirm')
+}
 
 /**
  * @description 点击取消按钮
  * */
 const cancelHandler = () => {
-  emit("update:show", false);
-  emit("cancel");
-};
+  emit('update:modelValue', false)
+  emit('cancel')
+}
 
 /**
  * @description 点击遮罩
  * */
 const clickHandler = () => {
   if (closeOnClickOverlay.value) {
-    emit("update:show", false);
-    emit("close");
+    emit('update:modelValue', false)
+    emit('close')
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 .modal__content__text {
   text-align: v-bind(contentTextAlign);
 }

package/components/hy-modal/index.scss

@@ -6,70 +6,94 @@
   border-radius: $hy-border-radius-base;
   overflow: hidden;
 
+  /* 标题 */
   &__title {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 16px;
+    font-size: $hy-font-size-base;
     font-weight: bold;
     color: $hy-text-color;
     text-align: center;
     padding-top: 25px;
   }
 
+  /* 内容 */
   &__content {
     padding: 20px;
     @include flex;
     justify-content: center;
 
     &__text {
-      font-size: 15px;
+      font-size: $hy-font-size-sm;
       color: $hy-text-color--grey;
       flex: 1;
       text-align: center;
     }
   }
 
-  &__button-group {
-    border-top: $hy-border-line;
-    @include flex;
-
-    &--confirm-button {
-      flex-direction: column;
-      padding: 0 25px 15px;
+  /* 底部按钮 */
+  &__button {
+    /* 两个按钮的样式 */
+    &-exact {
+      view:first-child {
+        margin-right: $hy-border-margin-padding-lg;
+      }
+      &--reverse {
+        view:last-child {
+          margin-right: $hy-border-margin-padding-lg;
+        }
+      }
     }
 
-    &__wrapper {
-      flex: 1;
+
+    &-group {
       @include flex;
-      justify-content: center;
-      align-items: center;
-      height: 48px;
+      padding: 20px;
 
-      &--confirm,
-      &--only-cancel {
-        border-bottom-right-radius: $hy-border-radius-base;
+      /* 自定义底部按钮 */
+      &--confirm-button {
+        flex-direction: column;
+        padding: 0 25px 15px;
       }
 
-      &--cancel,
-      &--only-confirm {
-        border-bottom-left-radius: $hy-border-radius-base;
-      }
 
-      &--hover {
-        background-color: $hy-background--hover;
-      }
+      &__wrapper {
+        flex: 1;
+        @include flex;
+        justify-content: center;
+        align-items: center;
+        height: 43px;
+        border-radius: $hy-border-radius-semicircle;
 
-      &__text {
-        color: $hy-text-color--2;
-        font-size: 16px;
-        text-align: center;
-      }
+        /* 确认 */
+        &--confirm {
+          background-color: $hy-primary;
+          &-text {
+            color: #FFFFFF;
+          }
+        }
+
+        /* 取消 */
+        &--cancel {
+          //background-color: $hy-background--empty;
+          background-color: #323233;
+
+          &-text {
+            color: $hy-text-color;
+          }
+        }
+
+        &--hover {
+          opacity: 0.7;
+        }
 
-      &--confirm-text {
-        color: $hy-primary;
+        &__text {
+          font-size: 16px;
+          text-align: center;
+        }
       }
     }
   }
-}
+}

package/components/hy-modal/props.ts

@@ -1,24 +1,25 @@
-import type IProps from "./typing";
-import { ColorConfig } from "../../config";
+import type IProps from './typing'
+import { ColorConfig } from '../../config'
 
 const defaultProps: IProps = {
-  show: false,
-  title: "",
-  content: "",
-  confirmText: "确认",
-  cancelText: "取消",
+  modelValue: false,
+  title: '',
+  content: '',
+  confirmText: '确认',
+  cancelText: '取消',
   showConfirmButton: true,
   showCancelButton: false,
-  confirmColor: "",
-  cancelColor: "",
+  confirmColor: '',
+  cancelColor: '',
   buttonReverse: false,
   zoom: true,
+  round: 16,
   asyncClose: false,
   closeOnClickOverlay: false,
   negativeTop: 0,
-  width: "550rpx",
-  confirmButtonShape: "",
-  contentTextAlign: "left",
-};
+  width: '550rpx',
+  confirmButtonShape: '',
+  contentTextAlign: 'left',
+}
 
-export default defaultProps;
+export default defaultProps

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

@@ -1,70 +1,76 @@
+import { RowCenterType } from 'hy-app/typing/modules/common'
+
 export default interface HyModalProps {
   /**
    * @description 是否显示模态框，请赋值给show （默认 false ）
    * */
-  show: boolean;
+  modelValue: boolean
   /**
    * @description 标题内容
    * */
-  title?: string;
+  title?: string
   /**
    * @description 模态框内容，如传入slot内容，则此参数无效
    * */
-  content?: string;
+  content?: string
   /**
    * @description 确认按钮的文字 （默认 '确认' ）
    * */
-  confirmText?: string;
+  confirmText?: string
   /**
    * @description 取消按钮的文字 （默认 '取消' ）
    * */
-  cancelText?: string;
+  cancelText?: string
   /**
    * @description 是否显示确认按钮 （默认 true ）
    * */
-  showConfirmButton?: boolean;
+  showConfirmButton?: boolean
   /**
    * @description 是否显示取消按钮 （默认 false ）
    * */
-  showCancelButton?: boolean;
+  showCancelButton?: boolean
   /**
    * @description 确认按钮的颜色 （默认 '#2979ff' ）
    * */
-  confirmColor?: string;
+  confirmColor?: string
   /**
    * @description 取消按钮的颜色 （默认 '#606266' ）
    * */
-  cancelColor?: string;
+  cancelColor?: string
   /**
    * @description 对调确认和取消的位置 （默认 false ）
    * */
-  buttonReverse?: boolean;
+  buttonReverse?: boolean
   /**
    * @description 是否开启缩放模式 （默认 true ）
    * */
-  zoom?: boolean;
+  zoom?: boolean
+  /**
+   * @description 弹窗的圆角 （默认 16 ）
+   * */
+  round?: string | number
   /**
    * @description 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
    * */
-  asyncClose?: boolean;
+  asyncClose?: boolean
   /**
    * @description 是否允许点击遮罩关闭Modal （默认 false ）
    * */
-  closeOnClickOverlay?: boolean;
+  closeOnClickOverlay?: boolean
   /**
    * @description 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
    * */
-  negativeTop?: number;
+  negativeTop?: number
   /**
    * @description modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
    * */
-  width?: string | number;
+  width?: string | number
   /**
    * @description 确认按钮的样式,如设置，将不会显示取消按钮
    * */
-  confirmButtonShape?: HyApp.ShapeType | "";
+  confirmButtonShape?: HyApp.ShapeType | ''
   /**
    * @description 文案对齐方式
    * */
-  contentTextAlign?: HyApp.LeftRightType | "center";
+  contentTextAlign?: HyApp.RowCenterType
 }

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
+      class="hy-popover__pos"
+      :custom-style="popover.popStyle.value"
+      :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>