hy-app 0.2.5 → 0.2.6

package/components/hy-float-button/typing.d.ts

@@ -1,93 +1,104 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 interface MenusVo {
   /**
    * @description 显示菜单文本
    * */
-  label?: string;
+  label?: string
   /**
    * @description 跳转路径
    * */
-  url?: string;
+  url?: string
 }
 
-export type MenusType = MenusVo | string;
+export type MenusType = MenusVo | string
+export type IGap = {
+  left?: number
+  right?: number
+  top?: number
+  bottom?: number
+}
 
 export default interface HyFloatButtonProps {
   /**
    * @description 菜单栏集合
    * */
-  menus?: MenusType[];
+  menus?: MenusType[]
   /**
    * @description 打开方向，row-横向；column-纵向
    * */
-  direction?: HyApp.DirectionType;
+  direction?: HyApp.DirectionType
   /**
    * @description 按钮显示的图标
    * */
-  icon?: string;
+  icon?: string
   /**
    * @description 按钮图标大小
    * */
-  iconSize?: string | number;
+  iconSize?: string | number
   /**
    * @description 按钮图标颜色
    * */
-  iconColor?: string;
+  iconColor?: string
+  gap?: IGap
   /**
    * @description 按钮距离底部的距离，默认单位为px
    * */
-  bottom?: number | string;
+  top?: number | string
   /**
    * @description 按钮距离左边的距离，默认单位为px
    * */
-  left?: number | string;
+  left?: number | string
   /**
    * @description 层级（默认：10086）
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description 按钮背景颜色
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 按钮文字
    * */
-  text?: string;
+  text?: string
   /**
    * @description 按钮文字大小
    * */
-  fontSize?: string | number;
+  fontSize?: string | number
   /**
    * @description 按钮文字的颜色
    * */
-  textColor?: string;
+  textColor?: string
   /**
    * @description 按钮的尺寸
    * */
-  size?: HyApp.SizeType | string | number;
+  size?: HyApp.SizeType | string | number
   /**
    * @description 按钮的形状
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 按钮的透明度
    * */
-  opacity?: number;
+  opacity?: number
   /**
    * @description 是否显示阴影（默认：true）
    * */
-  shadow?: boolean;
+  shadow?: boolean
   /**
    * @description 是否显示漂浮的动画（默认：true）
    * */
-  float?: boolean;
+  float?: boolean
   /**
    * @description 是否固定位置（默认：true）
    * */
-  fixed?: boolean;
+  fixed?: boolean
+  /**
+   * @description 是否能拖动（默认：true）
+   * */
+  draggable?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-icon/hy-icon.vue

@@ -1,18 +1,13 @@
 <template>
-  <view class="hy-icon" @tap="clickHandler" :class="[`hy-icon--${labelPos}`]">
+  <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
     <image
       class="hy-icon__img"
       v-if="isImg"
       :src="name"
       :mode="imgMode"
-      :style="[imgStyle, customStyle]"
+      :style="[imgStyle]"
     ></image>
-    <text
-      v-else
-      class="hy-icon__icon"
-      :class="uClasses"
-      :style="[iconStyle, customStyle]"
-    ></text>
+    <text v-else class="hy-icon__icon" :class="uClasses" :style="[iconStyle, customStyle]"></text>
     <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
     <text
       v-if="label !== ''"
@@ -23,8 +18,9 @@
         marginLeft: labelPos == 'right' ? addUnit(space) : 0,
         marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
       }"
-      >{{ label }}</text
     >
+      {{ label }}
+    </text>
   </view>
 </template>
 
@@ -34,18 +30,18 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import { addUnit } from "../../utils";
-import defaultProps from "./props";
-import type IProps from "./typing";
+import { computed, type CSSProperties, toRefs } from 'vue'
+import { addUnit } from '../../utils'
+import defaultProps from './props'
+import type IProps from './typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   customPrefix,
   name,
@@ -59,66 +55,68 @@ const {
   index,
   isRotate,
   round,
-} = toRefs(props);
-const emit = defineEmits(["click"]);
+  customClass,
+  customStyle,
+} = toRefs(props)
+const emit = defineEmits(['click'])
 
 const uClasses = computed(() => {
   let classes: string | string[] = [
-    "iconfont",
+    'iconfont',
     `${customPrefix.value}-${name.value}`,
     customPrefix.value,
-  ];
-  if (isRotate.value) classes.push("hy-rotate");
+  ]
+  if (isRotate.value) classes.push('hy-rotate')
   if (color.value)
     // 主题色，通过类配置
-    classes.push("hy-icon__icon--" + color.value);
+    classes.push('hy-icon__icon--' + color.value)
   // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
   // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
   //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-  classes = classes.join(" ");
+  classes = classes.join(' ')
   //#endif
-  return classes;
-});
+  return classes
+})
 const iconStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {};
+  let style: CSSProperties = {}
   style = {
     fontSize: addUnit(size.value),
     lineHeight: addUnit(size.value),
-    fontWeight: bold.value ? "bold" : "normal",
+    fontWeight: bold.value ? 'bold' : 'normal',
     // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
     top: addUnit(top.value),
     borderRadius: addUnit(round.value),
     color: color.value,
-  };
+  }
 
-  return style;
-});
+  return style
+})
 
 /**
  * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
  * */
 const isImg = computed(() => {
-  return name.value.indexOf("/") !== -1;
-});
+  return name.value.indexOf('/') !== -1
+})
 const imgStyle = computed((): CSSProperties => {
-  let style: CSSProperties = {};
+  let style: CSSProperties = {}
   // 如果设置width和height属性，则优先使用，否则使用size属性
-  style.width = width.value ? addUnit(width.value) : addUnit(size.value);
-  style.height = height.value ? addUnit(height.value) : addUnit(size.value);
-  style.borderRadius = addUnit(round.value);
-  return style;
-});
+  style.width = width.value ? addUnit(width.value) : addUnit(size.value)
+  style.height = height.value ? addUnit(height.value) : addUnit(size.value)
+  style.borderRadius = addUnit(round.value)
+  return style
+})
 
 /**
  * @description 点击
  * */
 const clickHandler = (e: any) => {
-  emit("click", index.value, e);
+  emit('click', index.value, e)
   // 是否阻止事件冒泡
-  stop.value && e.stopPropagation();
-};
+  stop.value && e.stopPropagation()
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-icon/props.ts

@@ -1,24 +1,25 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
-  name: "",
-  color: "",
-  size: "20px",
+  name: '',
+  color: '',
+  size: '20px',
   bold: false,
-  index: "",
-  customPrefix: "hy-icon",
-  label: "",
-  labelPos: "right",
-  labelSize: "",
-  labelColor: "",
-  space: "2px",
-  imgMode: "",
-  width: "",
-  height: "",
+  index: '',
+  customPrefix: 'hy-icon',
+  label: '',
+  labelPos: 'right',
+  labelSize: '',
+  labelColor: '',
+  space: '2px',
+  imgMode: '',
+  width: '',
+  height: '',
   top: 0,
   stop: false,
   isRotate: false,
   round: 0,
-};
+  customClass: '',
+}
 
-export default defaultProps;
+export default defaultProps

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

@@ -1,80 +1,84 @@
-import { CSSProperties } from "vue";
+import { CSSProperties } from 'vue'
 
 export default interface HyIconProps {
   /**
    * @description 图标名称，见示例图标集
    * */
-  name: string | HyIconConfig;
+  name: string | HyIconConfig
   /**
    * @description 图标颜色
    * */
-  color?: string;
+  color?: string
   /**
    * @description 图标字体大小，单位px （默认 '16px' ）
    * */
-  size?: string | number;
+  size?: string | number
   /**
    * @description 是否显示粗体 （默认 false ）
    * */
-  bold?: boolean;
+  bold?: boolean
   /**
    * @description 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
    * */
-  index?: string | number;
+  index?: string | number
   /**
    * @description 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'hy-icon' ）
    * */
-  customPrefix?: string;
+  customPrefix?: string
   /**
    * @description 图标右侧的label文字
    * */
-  label?: string;
+  label?: string
   /**
    * @description label相对于图标的位置，只能right或bottom （默认 'right' ）
    * */
-  labelPos?: "right" | "bottom";
+  labelPos?: 'right' | 'bottom'
   /**
    * @description label字体大小，单位px （默认 '15px' ）
    * */
-  labelSize?: string | number;
+  labelSize?: string | number
   /**
    * @description 图标右侧的label文字颜色
    * */
-  labelColor?: string;
+  labelColor?: string
   /**
    * @description label与图标的距离，单位px （默认 '3px' ）
    * */
-  space?: string | number;
+  space?: string | number
   /**
    * @description 图片的mode
    * */
-  imgMode?: string;
+  imgMode?: string
   /**
    * @description 显示图片小图标时的宽度
    * */
-  width?: string | number;
+  width?: string | number
   /**
    * @description 显示图片小图标时的高度
    * */
-  height?: string | number;
+  height?: string | number
   /**
    * @description 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
    * */
-  top?: number | string;
+  top?: number | string
   /**
    * @description 是否阻止事件传播 （默认 false ）
    * */
-  stop?: boolean;
+  stop?: boolean
   /**
    * @description 是否旋转 （默认 false ）
    * */
-  isRotate?: boolean;
+  isRotate?: boolean
   /**
    * @description 图标圆角
    * */
-  round?: string | number;
+  round?: string | number
   /**
    * @description 自定义样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+  /**
+   * @description 自定义类名
+   * */
+  customClass?: string
 }

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);
 }