hy-app 0.4.13 → 0.5.0

package/components/hy-divider/hy-divider.vue

@@ -1,211 +1,132 @@
 <template>
-  <view :class="['hy-divider', customClass]" :style="dividerStyle">
-    <HyLine
-      :color="lineColor"
-      :customStyle="leftLineStyle"
-      :style="leftLineStyle"
-      :hairline="hairline"
-      :dashed="dashed"
-    ></HyLine>
-    <HyLoading :show="text === 'loading'" size="18" mode="spinner"></HyLoading>
-    <text v-if="dot" class="hy-divider__dot">●</text>
-    <text v-else-if="text" class="hy-divider__text" :style="textStyle">{{
-      content
-    }}</text>
-    <HyLine
-      :color="lineColor"
-      :customStyle="rightLineStyle"
-      :style="rightLineStyle"
-      :hairline="hairline"
-      :dashed="dashed"
-    ></HyLine>
-  </view>
+    <view :class="['hy-divider', customClass]" :style="dividerStyle">
+        <hy-line
+            :color="lineColor"
+            :customStyle="leftLineStyle"
+            :style="leftLineStyle"
+            :hairline="hairline"
+            :dashed="dashed"
+        ></hy-line>
+        <hy-loading :show="text === 'loading'" size="18" mode="spinner"></hy-loading>
+        <text v-if="dot" class="hy-divider__dot">●</text>
+        <text v-else-if="text" class="hy-divider__text" :style="textStyle">{{ content }}</text>
+        <hy-line
+            :color="lineColor"
+            :customStyle="rightLineStyle"
+            :style="rightLineStyle"
+            :hairline="hairline"
+            :dashed="dashed"
+        ></hy-line>
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-divider",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-divider',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { addUnit, IconConfig } from "../../libs";
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import dividerProps from './props'
 // 组件
-import HyLine from "../hy-line/hy-line.vue";
-import HyLoading from "../hy-loading/hy-loading.vue";
+import HyLine from '../hy-line/hy-line.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
 
 /**
  * 区隔内容的分割线，一般用于页面底部"没有更多"的提示
  * @displayName hy-divider
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps);
-const props = defineProps({
-  /** 是否虚线 */
-  dashed: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否细线 */
-  hairline: {
-    type: Boolean,
-    default: true,
-  },
-  /** 是否以点替代文字，优先于text字段起作用 */
-  dot: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 内容文本的位置
-   * @values left,center,right
-   * */
-  textPosition: {
-    type: String,
-    default: "center",
-  },
-  /** 文本内容，如果为loadMore就是加载前，如果为loading就是加载中，如果为noMore就是没有更多 */
-  text: {
-    type: String,
-    default: "",
-  },
-  /** 文本大小 */
-  textSize: {
-    type: [String, Number],
-    default: 14,
-  },
-  /** 文本颜色 */
-  textColor: String,
-  /** 线条颜色 */
-  lineColor: String,
-  /** 加载图标 */
-  loadingIcon: {
-    type: String,
-    default: IconConfig.LOADING,
-  },
-  /** 加载前的提示语 */
-  loadMoreText: {
-    type: String,
-    default: "加载更多",
-  },
-  /** 加载中提示语 */
-  loadingText: {
-    type: String,
-    default: "正在加载...",
-  },
-  /** 没有更多的提示语 */
-  noMoreText: {
-    type: String,
-    default: "没有更多了",
-  },
-  /** 上边距 */
-  marginTop: {
-    type: [String, Number],
-    default: 0,
-  },
-  /** 下边距 */
-  marginBottom: {
-    type: [String, Number],
-    default: 0,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
+const props = defineProps(dividerProps)
 
-const isLoad = ["loadMore", "loading", "noMore"].includes(props.text);
+const isLoad = ['loadMore', 'loading', 'noMore'].includes(props.text)
 
 /**
  * @description 分割线样式
  * */
 const dividerStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.marginTop =
-    addUnit(props.marginTop) || isLoad ? "20px" : addUnit(props.marginTop);
-  style.marginBottom =
-    addUnit(props.marginBottom) || isLoad
-      ? "20px"
-      : addUnit(props.marginBottom);
-  return Object.assign(style, props.customStyle);
-});
+    const style: CSSProperties = {}
+    style.marginTop = addUnit(props.marginTop) || isLoad ? '20px' : addUnit(props.marginTop)
+    style.marginBottom =
+        addUnit(props.marginBottom) || isLoad ? '20px' : addUnit(props.marginBottom)
+    return Object.assign(style, props.customStyle)
+})
 /**
  * @description 文本内容
  * */
 const content = computed(() => {
-  let text;
-  switch (props.text) {
-    case "loadMore":
-      text = props.loadMoreText;
-      break;
-    case "loading":
-      text = props.loadingText;
-      break;
-    case "noMore":
-      text = props.noMoreText;
-      break;
-    default:
-      text = props.text;
-      break;
-  }
-  return text;
-});
+    let text
+    switch (props.text) {
+        case 'loadMore':
+            text = props.loadMoreText
+            break
+        case 'loading':
+            text = props.loadingText
+            break
+        case 'noMore':
+            text = props.noMoreText
+            break
+        default:
+            text = props.text
+            break
+    }
+    return text
+})
 /**
  * @description 文本内容样式
  * */
 const textStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.fontSize = addUnit(props.textSize);
-  style.color = props.textColor;
-  return style;
-});
+    const style: CSSProperties = {}
+    style.fontSize = addUnit(props.textSize)
+    style.color = props.textColor
+    return style
+})
 
 /**
  * @description 左边线条的的样式
  * */
 const leftLineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    marginRight: "20rpx",
-  };
-  // 如果是在左边，设置左边的宽度为固定值
-  if (isLoad) {
-    style.width = "80px";
-  } else if (props.textPosition === "left") {
-    style.width = "80rpx";
-  } else {
-    style.flex = 1;
-  }
-  return style;
-});
+    const style: CSSProperties = {
+        marginRight: '20rpx'
+    }
+    // 如果是在左边，设置左边的宽度为固定值
+    if (isLoad) {
+        style.width = '80px'
+    } else if (props.textPosition === 'left') {
+        style.width = '80rpx'
+    } else {
+        style.flex = 1
+    }
+    return style
+})
 /**
  * @description 右边线条的的样式
  * */
 const rightLineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    marginLeft: "20rpx",
-  };
-  // 如果是在右边，设置右边的宽度为固定值
-  if (isLoad) {
-    style.width = "80px";
-  } else if (props.textPosition === "right") {
-    style.width = "80rpx";
-  } else {
-    style.flex = 1;
-  }
-  return style;
-});
+    const style: CSSProperties = {
+        marginLeft: '20rpx'
+    }
+    // 如果是在右边，设置右边的宽度为固定值
+    if (isLoad) {
+        style.width = '80px'
+    } else if (props.textPosition === 'right') {
+        style.width = '80rpx'
+    } else {
+        style.flex = 1
+    }
+    return style
+})
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-divider/props.ts

@@ -1,21 +1,80 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../libs/config";
+import { IconConfig } from '../../libs/config'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  dashed: false,
-  hairline: true,
-  dot: false,
-  textPosition: "center",
-  text: "",
-  textSize: 14,
-  textColor: "",
-  lineColor: "",
-  loadingIcon: IconConfig.LOADING,
-  loadMoreText: "加载更多",
-  loadingText: "正在加载...",
-  noMoreText: "没有更多了",
-  marginTop: "0",
-  marginBottom: "0",
-};
+const dividerProps = {
+    /** 是否虚线 */
+    dashed: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否细线 */
+    hairline: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否以点替代文字，优先于text字段起作用 */
+    dot: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 内容文本的位置
+     * @values left,center,right
+     * */
+    textPosition: {
+        type: String,
+        default: 'center'
+    },
+    /** 文本内容，如果为loadMore就是加载前，如果为loading就是加载中，如果为noMore就是没有更多 */
+    text: {
+        type: String,
+        default: ''
+    },
+    /** 文本大小 */
+    textSize: {
+        type: [String, Number],
+        default: 14
+    },
+    /** 文本颜色 */
+    textColor: String,
+    /** 线条颜色 */
+    lineColor: String,
+    /** 加载图标 */
+    loadingIcon: {
+        type: String,
+        default: IconConfig.LOADING
+    },
+    /** 加载前的提示语 */
+    loadMoreText: {
+        type: String,
+        default: '加载更多'
+    },
+    /** 加载中提示语 */
+    loadingText: {
+        type: String,
+        default: '正在加载...'
+    },
+    /** 没有更多的提示语 */
+    noMoreText: {
+        type: String,
+        default: '没有更多了'
+    },
+    /** 上边距 */
+    marginTop: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 下边距 */
+    marginBottom: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default dividerProps

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

@@ -1,64 +1,64 @@
 import type { CSSProperties } from 'vue'
 
 export default interface HyDividerProps {
-  /**
-   * @description 是否虚线 （默认 false ）
-   * */
-  dashed?: boolean
-  /**
-   * @description 是否细线 （默认  true ）
-   * */
-  hairline?: boolean
-  /**
-   * @description 是否以点替代文字，优先于text字段起作用 （默认 false ）
-   * */
-  dot?: boolean
-  /**
-   * @description 内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
-   * */
-  textPosition?: HyApp.RowCenterType
-  /**
-   * @description 文本内容
-   * */
-  text?: string | 'loadMore' | 'loading' | 'noMore'
-  /**
-   * @description 文本大小 （默认 14）
-   * */
-  textSize?: string | number
-  /**
-   * @description 文本颜色 （默认 '#909399' ）
-   * */
-  textColor?: string
-  /**
-   * @description 线条颜色 （默认 '#dcdfe6' ）
-   * */
-  lineColor?: string
-  /**
-   * @description 加载图标（默认 'loading' ）
-   * */
-  loadingIcon?: string
-  /**
-   * @description 加载前的提示语（默认 '加载更多' ）
-   * */
-  loadMoreText?: string
-  /**
-   * @description 加载中提示语（默认 '正在加载...' ）
-   * */
-  loadingText?: string
-  /**
-   * @description 没有更多的提示语（默认 '没有更多了' ）
-   * */
-  noMoreText?: string
-  /**
-   * @description 上边距 （默认 0 ）
-   * */
-  marginTop?: string | number
-  /**
-   * @description 下边距 （默认 0 ）
-   * */
-  marginBottom?: string | number
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
+    /**
+     * @description 是否虚线 （默认 false ）
+     * */
+    dashed?: boolean
+    /**
+     * @description 是否细线 （默认  true ）
+     * */
+    hairline?: boolean
+    /**
+     * @description 是否以点替代文字，优先于text字段起作用 （默认 false ）
+     * */
+    dot?: boolean
+    /**
+     * @description 内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
+     * */
+    textPosition?: HyApp.RowCenterType
+    /**
+     * @description 文本内容
+     * */
+    text?: string | 'loadMore' | 'loading' | 'noMore'
+    /**
+     * @description 文本大小 （默认 14）
+     * */
+    textSize?: string | number
+    /**
+     * @description 文本颜色 （默认 '#909399' ）
+     * */
+    textColor?: string
+    /**
+     * @description 线条颜色 （默认 '#dcdfe6' ）
+     * */
+    lineColor?: string
+    /**
+     * @description 加载图标（默认 'loading' ）
+     * */
+    loadingIcon?: string
+    /**
+     * @description 加载前的提示语（默认 '加载更多' ）
+     * */
+    loadMoreText?: string
+    /**
+     * @description 加载中提示语（默认 '正在加载...' ）
+     * */
+    loadingText?: string
+    /**
+     * @description 没有更多的提示语（默认 '没有更多了' ）
+     * */
+    noMoreText?: string
+    /**
+     * @description 上边距 （默认 0 ）
+     * */
+    marginTop?: string | number
+    /**
+     * @description 下边距 （默认 0 ）
+     * */
+    marginBottom?: string | number
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
 }

package/components/hy-dropdown/hy-dropdown.vue

@@ -1,94 +1,60 @@
 <template>
-  <view class="hy-dropdown" :style="dropdownStyle">
-    <slot></slot>
-  </view>
+    <view class="hy-dropdown" :style="dropdownStyle">
+        <slot></slot>
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-dropdown",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-dropdown',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { provide, ref, computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { IconConfig, addUnit } from "../../libs";
+import { provide, ref, computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import dropdownProps from './props'
 
 /**
  * 主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。
  * @displayName hy-dropdown
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 标题菜单的高度，单位px */
-  height: {
-    type: [String, Number],
-    default: 40,
-  },
-  /** 标题菜单是否显示下边框 */
-  borderBottom: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否固定定位 */
-  sticky: {
-    type: Boolean,
-    default: true,
-  },
-  /** 标题和选项卡选中的颜色 */
-  activeColor: String,
-  /** 标题和选项卡未选中的颜色 */
-  inactiveColor: String,
-  /** 图标名称 */
-  menuIcon: {
-    type: String,
-    default: IconConfig.ARROW_DOWN_FILL,
-  },
-  /** 图标大小 */
-  menuIconSize: {
-    type: [String, Number],
-    default: 14,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-});
+const props = defineProps(dropdownProps)
 
 //样式设置
 const dropdownStyle = computed(() => {
-  const style: CSSProperties = props.sticky
-    ? {
-        position: "fixed",
-        left: 0,
-        // #ifdef H5
-        top: "44px",
-        // #endif
-        // #ifndef H5
-        top: "0px",
-        // #endif
-      }
-    : {};
-  style.height = addUnit(props.height);
-  if (props.borderBottom) style.borderBottom = "1px solid #dadbde";
-
-  return Object.assign(style, props.customStyle);
-});
+    const style: CSSProperties = props.sticky
+        ? {
+              position: 'fixed',
+              left: 0,
+              // #ifdef H5
+              top: '44px',
+              // #endif
+              // #ifndef H5
+              top: '0px'
+              // #endif
+          }
+        : {}
+    style.height = addUnit(props.height)
+    if (props.borderBottom) style.borderBottom = '1px solid #dadbde'
+
+    return Object.assign(style, props.customStyle)
+})
 
 //当前打开的项（以标题标识）
-const currentDropItem = ref("");
-provide("dropdownProps", props);
-provide("currentDropItem", currentDropItem);
+const currentDropItem = ref('')
+provide('dropdownProps', props)
+provide('currentDropItem', currentDropItem)
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>