hy-app 0.4.13 → 0.5.0

package/components/hy-picker/index.scss

@@ -57,18 +57,14 @@
     @include edeep(mask) {
       background-image: none;
     }
-  }
 
-  @include m(loading) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    @include flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.87);
-    z-index: 1000;
+    @include edeep(loading) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      z-index: 1000;
+    }
   }
 }

package/components/hy-picker/props.ts

@@ -1,28 +1,112 @@
-import type IProps from "./typing";
+import type { PickerColumnVo } from './typing'
+import type HyInputProps from './typing'
+import type { PropType } from 'vue'
 
-const defaultProps: IProps = {
-  modelValue: "",
-  show: false,
-  popupMode: "bottom",
-  separator: "/",
-  showToolbar: true,
-  title: "",
-  columns: [],
-  loading: false,
-  itemHeight: 44,
-  cancelText: "取消",
-  confirmText: "确定",
-  cancelColor: "#909193",
-  confirmColor: "",
-  visibleItemCount: 5,
-  keyName: "text",
-  closeOnClickOverlay: false,
-  defaultIndex: [],
-  immediateChange: true,
-  zIndex: 10076,
-  hasInput: false,
-  input: {},
-  toolbarRightSlot: false,
-};
+const pickerProps = {
+    /** 显示到输入框值 */
+    modelValue: {
+        type: [String, Array],
+        default: ''
+    },
+    /** 是否显示弹窗 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 弹窗弹出模式 */
+    popupMode: {
+        type: String,
+        default: 'bottom'
+    },
+    /** 分割数组条件 */
+    separator: {
+        type: String,
+        default: '/'
+    },
+    /** 是否显示顶部的操作栏 */
+    showToolbar: {
+        type: Boolean,
+        default: true
+    },
+    /** 顶部标题 */
+    title: String,
+    /** 二维数组，设置每一列的数据 */
+    columns: {
+        type: Array as unknown as PropType<(string | PickerColumnVo)[][]>,
+        default: []
+    },
+    /** 是否显示加载中状态 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 各列中，单个选项的高度 */
+    itemHeight: {
+        type: Number,
+        default: 44
+    },
+    /** 取消按钮的文字 */
+    cancelText: {
+        type: String,
+        default: '取消'
+    },
+    /** 确认按钮的文字 */
+    confirmText: {
+        type: String,
+        default: '确定'
+    },
+    /** 取消按钮的颜色 */
+    cancelColor: {
+        type: String,
+        default: '#909193'
+    },
+    /** 确认按钮的颜色 */
+    confirmColor: String,
+    /** 每列中可见选项的数量 */
+    visibleItemCount: {
+        type: Number,
+        default: 5
+    },
+    /** 显示到选项对象中，需要展示的属性键名 */
+    keyName: {
+        type: String,
+        default: 'text'
+    },
+    /** 是否允许点击遮罩关闭选择器 */
+    closeOnClickOverlay: {
+        type: Boolean,
+        default: false
+    },
+    /** 各列的默认索引 */
+    defaultIndex: {
+        type: Array as PropType<number[]>,
+        default: []
+    },
+    /** 是否在手指松开时立即触发change事件 */
+    immediateChange: {
+        type: Boolean,
+        default: true
+    },
+    /** 最高层级 */
+    zIndex: {
+        type: Number,
+        default: 10076
+    },
+    /** 是否显示输入框 */
+    hasInput: {
+        type: Boolean,
+        default: false
+    },
+    /** 输入框集合属性 */
+    input: {
+        type: Object as PropType<HyInputProps>,
+        default: () => {}
+    },
+    /** 是否自定义选择器nav左边内容 */
+    toolbarRightSlot: {
+        type: Boolean,
+        default: false
+    }
+}
 
-export default defaultProps;
+export default pickerProps

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

@@ -1,258 +1,196 @@
 <template>
-  <view
-    :class="['hy-popover', customClass]"
-    :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="!slots.content && mode === 'normal'"
-          class="hy-popover__inner"
-        >
-          {{ content }}
-        </view>
-        <view
-          v-if="!slots.content && mode === 'menu' && isArray(content)"
-          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.value"
-      :show="showPopover"
-      :duration="200"
+    <view
+        :class="['hy-popover', customClass]"
+        :style="customStyle"
+        id="popover"
+        @click.stop="popover.noop"
     >
-      <view class="hy-popover__container">
-        <!-- 三角形 -->
-        <view
-          :class="`hy-popover__arrow ${popover.arrowClass.value}`"
-          :style="popover.arrowStyle.value"
-        ></view>
-        <!-- 三角形 -->
-
-        <!-- 普通模式 -->
-        <view
-          v-if="!slots.content && mode === 'normal'"
-          class="hy-popover__inner"
-        >
-          {{ content }}
+        <!-- 使用插槽时无法获取正确宽高 -->
+        <view class="hy-popover__pos hy-popover__hidden" id="pos">
+            <view class="hy-popover__container">
+                <view v-if="!slots.content && mode === 'normal'" class="hy-popover__inner">
+                    {{ content }}
+                </view>
+                <view
+                    v-if="!slots.content && mode === 'menu' && isArray(content)"
+                    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>
-        <!-- 普通模式 -->
 
-        <!-- 列表模式 -->
-        <view
-          v-if="!slots.content && mode === 'menu' && isArray(content)"
-          class="hy-popover__menu"
+        <hy-transition
+            custom-class="hy-popover__pos"
+            :custom-style="popover.popStyle.value"
+            :show="showPopover"
+            :duration="200"
         >
-          <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.icon"
-              :name="item.icon"
-              custom-class="hy-popover__icon"
-            />
-            <view style="display: inline-block">
-              {{
-                typeof item === "object" && item.content ? item.content : item
-              }}
+            <view class="hy-popover__container">
+                <!-- 三角形 -->
+                <view
+                    :class="`hy-popover__arrow ${popover.arrowClass.value}`"
+                    :style="popover.arrowStyle.value"
+                ></view>
+                <!-- 三角形 -->
+
+                <!-- 普通模式 -->
+                <view v-if="!slots.content && mode === 'normal'" class="hy-popover__inner">
+                    {{ content }}
+                </view>
+                <!-- 普通模式 -->
+
+                <!-- 列表模式 -->
+                <view
+                    v-if="!slots.content && mode === 'menu' && isArray(content)"
+                    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.icon"
+                            :name="item.icon"
+                            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>
-          </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>
-        <!-- 列表模式 -->
-
-        <!-- 用户自定义样式 -->
-        <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",
-  },
-};
+    name: 'hy-popover',
+    options: {
+        virtualHost: true,
+        addGlobalClass: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script lang="ts" setup>
 import {
-  getCurrentInstance,
-  onMounted,
-  onBeforeMount,
-  onBeforeUnmount,
-  ref,
-  useSlots,
-  watch,
-  inject,
-  nextTick,
-} from "vue";
-import type { PropType, CSSProperties } from "vue";
-import type {
-  IOffset,
-  IPlacementVo,
-  IPopoverEmits,
-  PopoverExpose,
-} from "./typing";
+    getCurrentInstance,
+    onBeforeMount,
+    onBeforeUnmount,
+    ref,
+    useSlots,
+    watch,
+    inject,
+    nextTick
+} from 'vue'
+import type { IPopoverEmits, PopoverExpose } from './typing'
 import {
-  type Queue,
-  queueKey,
-  usePopover,
-  closeOther,
-  pushToQueue,
-  removeFromQueue,
-  isArray,
-} from "../../libs";
+    type Queue,
+    queueKey,
+    usePopover,
+    closeOther,
+    pushToQueue,
+    removeFromQueue,
+    isArray
+} from '../../libs'
+import popoverProps from './props'
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyTransition from "../hy-transition/hy-transition.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyTransition from '../hy-transition/hy-transition.vue'
 
 /**
  * 常用于展示提示信息。
  * @displayName hy-popover
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 控制 popover 的显示状态 */
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  /** 显示的内容，也可以通过 slot#content 传入 */
-  content: {
-    type: [String, Array] as PropType<string | any[]>,
-  },
-  /**
-   * 指定 popover 的放置位置
-   * @values top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end
-   * */
-  placement: {
-    type: String as PropType<IPlacementVo>,
-    default: "bottom",
-  },
-  /** 控制 popover 的显示状态 */
-  offset: {
-    type: [Number, Array, Object] as PropType<IOffset>,
-    default: 0,
-  },
-  /** 是否显示关闭按钮 */
-  showClose: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否禁用 popover */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 当前显示的模式，决定内容的展现形式
-   * @values normal,menu
-   * */
-  mode: {
-    type: String,
-    default: "normal",
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: Object as PropType<CSSProperties>,
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<IPopoverEmits>();
+const props = defineProps(popoverProps)
+const emit = defineEmits<IPopoverEmits>()
 
-const slots = useSlots();
-const queue = inject<Queue | null>(queueKey, null);
-const selector: string = "popover";
-const visibleArrow = ref<boolean>(true);
-const { proxy } = getCurrentInstance() as any;
-const popover = usePopover();
-const showPopover = ref<boolean>(false); // 控制popover显隐
+const slots = useSlots()
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'popover'
+const visibleArrow = ref<boolean>(true)
+const { proxy } = getCurrentInstance() as any
+const popover = usePopover()
+const showPopover = ref<boolean>(false) // 控制popover显隐
 
 watch(
-  () => props.content,
-  (newVal) => {
-    if (props.mode === "normal" && typeof newVal !== "string") {
-      console.error("在“normal”模式下，值类型必须为字符串类型。");
-    } else if (props.mode === "menu" && !isArray(newVal)) {
-      console.error("在“menu”模式下，值类型必须是数组类型。");
+    () => props.content,
+    (newVal) => {
+        if (props.mode === 'normal' && typeof newVal !== 'string') {
+            console.error('在“normal”模式下，值类型必须为字符串类型。')
+        } else if (props.mode === 'menu' && !isArray(newVal)) {
+            console.error('在“menu”模式下，值类型必须是数组类型。')
+        }
     }
-  },
-);
+)
 
 watch(
-  () => props.placement,
-  (newVal) => {
-    nextTick(() => {
-      popover.init(newVal, visibleArrow.value, selector);
-    });
-  },
-  { immediate: true },
-);
+    () => props.placement,
+    (newVal) => {
+        nextTick(() => {
+            popover.init(newVal, visibleArrow.value, selector)
+        })
+    },
+    { immediate: true }
+)
 
 watch(
-  () => props.modelValue,
-  (newValue: boolean) => {
-    showPopover.value = newValue;
-  },
-);
+    () => props.modelValue,
+    (newValue: boolean) => {
+        showPopover.value = newValue
+    }
+)
 
 watch(
-  () => showPopover.value,
-  (newValue) => {
-    if (newValue) {
-      popover.control(props.placement, props.offset);
-      if (queue && queue.closeOther) {
-        queue.closeOther(proxy);
-      } else {
-        closeOther(proxy);
-      }
+    () => showPopover.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'}`)
     }
-    popover.showStyle.value = newValue
-      ? "display: inline-block;"
-      : "display: none;";
-    emit("change", { show: newValue });
-    emit(`${newValue ? "open" : "close"}`);
-  },
-);
+)
 
 // onMounted(() => {
 //   setTimeout(() => {
@@ -261,53 +199,53 @@ watch(
 // });
 
 onBeforeMount(() => {
-  if (queue && queue.pushToQueue) {
-    queue.pushToQueue(proxy);
-  } else {
-    pushToQueue(proxy);
-  }
-  popover.showStyle.value = showPopover.value ? "opacity: 1;" : "opacity: 0;";
-});
+    if (queue && queue.pushToQueue) {
+        queue.pushToQueue(proxy)
+    } else {
+        pushToQueue(proxy)
+    }
+    popover.showStyle.value = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
+})
 
 onBeforeUnmount(() => {
-  if (queue && queue.removeFromQueue) {
-    queue.removeFromQueue(proxy);
-  } else {
-    removeFromQueue(proxy);
-  }
-});
+    if (queue && queue.removeFromQueue) {
+        queue.removeFromQueue(proxy)
+    } else {
+        removeFromQueue(proxy)
+    }
+})
 
 const menuClick = (index: number) => {
-  updateModelValue(false);
-  emit("menuClick", {
-    item: isArray(props.content) ? props.content[index] : props.content,
-    index,
-  });
-};
+    updateModelValue(false)
+    emit('menuClick', {
+        item: isArray(props.content) ? props.content[index] : props.content,
+        index
+    })
+}
 
 const toggle = () => {
-  if (props.disabled) return;
-  updateModelValue(!showPopover.value);
-};
+    if (props.disabled) return
+    updateModelValue(!showPopover.value)
+}
 
 const open = () => {
-  updateModelValue(true);
-};
+    updateModelValue(true)
+}
 
 const close = () => {
-  updateModelValue(false);
-};
+    updateModelValue(false)
+}
 
 function updateModelValue(value: boolean) {
-  showPopover.value = value;
-  emit("update:modelValue", value);
+    showPopover.value = value
+    emit('update:modelValue', value)
 }
 
 defineExpose<PopoverExpose>({
-  open,
-  close,
-});
+    open,
+    close
+})
 </script>
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>