hy-app 0.1.4 → 0.2.0

package/components/hy-address-picker/hy-address-picker.vue

@@ -3,18 +3,27 @@
     <view
       v-if="hasInput"
       class="u-datetime-picker__has-input"
-      @click="onShowByClickInput"
+      @tap="onShowByClickInput"
     >
       <slot name="trigger" :value="inputValue">
         <HyInput
-          :placeholder="placeholder"
-          :readonly="true"
           v-model="inputValue"
-          :disabled="disabled"
-          :shape="shape"
-          :border="border"
-          :disabledColor="disabledColor"
-          :customStyle="customStyle"
+          :readonly="true"
+          :disabled="input?.disabled"
+          :disabledColor="input?.disabledColor"
+          :shape="input?.shape"
+          :border="input?.border"
+          :prefixIcon="input?.prefixIcon"
+          :suffixIcon="input?.suffixIcon"
+          :color="input?.color"
+          :fontSize="input?.fontSize"
+          :inputAlign="input?.inputAlign"
+          :placeholder="input?.placeholder || '请选择地址'"
+          :placeholderStyle="input?.placeholderStyle"
+          :placeholderClass="input?.placeholderClass"
+          :customStyle="
+            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
+          "
         ></HyInput>
         <view class="input-cover"></view>
       </slot>
@@ -53,6 +62,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-address-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { onMounted, ref, toRefs } from "vue";
 import defaultProps from "./props";
@@ -64,7 +84,7 @@ import HyInput from "../hy-input/hy-input.vue";
 import HyPicker from "../hy-picker/hy-picker.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { show, modelValue, hasInput, disabled, separator, closeOnClickOverlay } =
+const { show, modelValue, hasInput, input, separator, closeOnClickOverlay } =
   toRefs(props);
 const emit = defineEmits([
   "close",
@@ -223,7 +243,8 @@ const change = (e: any) => {
 };
 
 const onShowByClickInput = () => {
-  if (!disabled.value) {
+  console.log(input.value?.disabled);
+  if (!input.value?.disabled) {
     showByClickInput.value = !showByClickInput.value;
   }
 };

package/components/hy-address-picker/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/mixin.scss" as *;
-.hy-datetime-picker {
+@include b(datetime-picker) {
   flex: 1;
   &__has-input {
     position: relative;

package/components/hy-address-picker/props.ts

@@ -16,10 +16,8 @@ const defaultProps: IProps = {
   visibleItemCount: 5,
   closeOnClickOverlay: false,
   defaultIndex: [],
-  disabled: false,
   hasInput: false,
-  placeholder: "请选择地址",
-  disabledColor: "#F5F5F5",
+  input: {},
   toolbarRightSlot: false,
 };
 

package/components/hy-address-picker/typing.d.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "vue";
+import type HyInputProps from "../hy-input/typing";
 
-export default interface IProps {
+export default interface HyAddressPickerProps {
   /**
    * @description 用于控制选择器的弹出和收起 ( 默认 false )
    * */
@@ -62,22 +63,14 @@ export default interface IProps {
    * @note 类型有问题,需要调整
    * */
   defaultIndex?: Array<any>;
-  /**
-   * @description 是否禁用输入框 ( 默认 false )
-   * */
-  disabled?: boolean;
   /**
    * @description 输入框是否显示边框 ( 默认 false )
    * */
   hasInput?: boolean;
   /**
-   * @description 输入框提示信息
-   * */
-  placeholder?: string;
-  /**
-   * @description 禁用时候输入框颜色
+   * @description 输入框集合属性
    * */
-  disabledColor?: string;
+  input?: Partial<HyInputProps>;
   /**
    * @description 右边插槽
    * */

package/components/hy-avatar/hy-avatar.vue

@@ -49,6 +49,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-avatar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs, ref, watch } from "vue";
 import defaultProps from "./props";

package/components/hy-avatar/index.scss

@@ -1,30 +1,30 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-avatar {
+@include b(avatar) {
   @include flex;
   align-items: center;
   justify-content: center;
 
-  &--circle {
+  @include m(circle) {
     border-radius: $hy-border-radius-circle;
   }
 
-  &--square {
+  @include m(square) {
     border-radius: $hy-border-margin-padding-sm;
   }
 
-  &--small {
+  @include m(small) {
     width: $hy-avatar-size-sm;
     height: $hy-avatar-size-sm;
   }
 
-  &--medium {
+  @include m(medium) {
     width: $hy-avatar-size-base;
     height: $hy-avatar-size-base;
   }
 
-  &--large {
+  @include m(large) {
     width: $hy-avatar-size-lg;
     height: $hy-avatar-size-lg;
   }
@@ -33,12 +33,12 @@
     width: 100%;
     height: 100%;
 
-    &--circle {
+    @include m(circle) {
       border-radius: $hy-border-radius-circle;
       overflow: hidden;
     }
 
-    &--square {
+    @include m(square) {
       border-radius: $hy-border-margin-padding-sm;
     }
   }

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyAvatarProps {
   /**
    * @description 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
    * */

package/components/hy-back-top/hy-back-top.vue

@@ -2,21 +2,46 @@
   <HyTransition mode="fade" :customStyle="backTopStyle" :show="show">
     <slot>
       <view class="hy-back-top" :style="contentStyle" @click="backToTop">
-        <HyIcon :name="icon" :custom-style="iconStyle"></HyIcon>
+        <HyIcon
+          :name="icon?.name || IconConfig.DOWNLOAD"
+          :color="icon?.color"
+          :size="icon?.size"
+          :bold="icon?.bold"
+          :customPrefix="icon?.customPrefix"
+          :imgMode="icon?.imgMode"
+          :width="icon?.width"
+          :height="icon?.height"
+          :top="icon?.top"
+          :stop="icon?.stop"
+          :round="icon?.round"
+          :customStyle="icon?.customStyle"
+        ></HyIcon>
         <text v-if="text" class="hy-back-top__text">{{ text }}</text>
       </view>
     </slot>
   </HyTransition>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-back-top',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";
+import { addUnit, getPx } from "../../utils";
+import { IconConfig } from "@/package";
 import type IProps from "./typing";
 // 组件
 import HyTransition from "../hy-transition/hy-transition.vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
-import { addUnit, getPx } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { customStyle, duration, mode, bottom, right, top, scrollTop } =

package/components/hy-back-top/index.scss

@@ -1,6 +1,16 @@
 @use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
 
-.hy-back-top {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(back-top) {
+      background-color: $hy-dark-background--track;
+    }
+  }
+}
+
+@include b(back-top) {
   @include flex;
   flex-direction: column;
   align-items: center;

package/components/hy-back-top/props.ts

@@ -1,9 +1,8 @@
 import type IProps from "./typing";
-import { IconConfig } from "../../config";
 
 const defaultProps: IProps = {
   mode: "circle",
-  icon: IconConfig.DOWNLOAD,
+  icon: {},
   text: "",
   duration: 500,
   scrollTop: 0,
@@ -11,10 +10,6 @@ const defaultProps: IProps = {
   bottom: 100,
   right: 20,
   zIndex: 888,
-  iconStyle: {
-    color: "#909399",
-    fontSize: "19px",
-  },
   customStyle: {
     transform: "rotate(180deg)",
   },

package/components/hy-back-top/typing.d.ts

@@ -1,14 +1,15 @@
 import type { CSSProperties } from "vue";
+import type HyIconProps from "../hy-icon/typing";
 
-export default interface IProps {
+export default interface HyBackTopProps {
   /**
    * @description 返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
    * */
   mode?: HyApp.ShapeType;
   /**
-   * @description 自定义图标 （默认 'arrow-upward' ） 见官方文档示例
+   * @description 自定义图标属性集合
    * */
-  icon?: string;
+  icon?: Partial<HyIconProps>;
   /**
    * @description 提示文字
    * */
@@ -37,10 +38,6 @@ export default interface IProps {
    * @description 层级   （默认 888 ）
    * */
   zIndex?: number;
-  /**
-   * @description 图标的样式，对象形式   （默认 {color: '#909399',fontSize: '19px'}）
-   * */
-  iconStyle?: CSSProperties;
   /**
    * @description 定义需要用到的外部样式（默认{transform: "rotate(180deg)"}）
    * */

package/components/hy-badge/hy-badge.vue

@@ -13,6 +13,17 @@
   >
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-badge',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import type IProps from "./typing";
 import defaultProps from "./props";

package/components/hy-badge/index.scss

@@ -4,69 +4,47 @@
 $hy-badge-dot-size: 8px !default;
 $hy-badge-text-font-size: 11px !default;
 
-.hy-badge {
+
+
+@include b(badge) {
   border-radius: 100px;
   @include flex;
   line-height: $hy-badge-text-font-size;
   text-align: center;
   font-size: $hy-badge-text-font-size;
-  color: $hy-text-color-inverse;
   z-index: 999;
 
-  &--dot {
+  @include m(dot) {
     height: $hy-badge-dot-size;
     width: $hy-badge-dot-size;
   }
 
-  &--inverted {
+  @include m(inverted) {
     font-size: 13px;
   }
 
-  &--not-dot {
+  @include m(not-dot) {
     padding: 2px 5px;
   }
 
-  &--horn {
+  @include m(horn) {
     border-bottom-left-radius: 0;
   }
 
-  &--primary {
-    background-color: $hy-primary;
-  }
-
-  &--primary--inverted {
-    color: $hy-primary;
-  }
-
-  &--error {
-    background-color: $hy-error;
-  }
-
-  &--error--inverted {
-    color: $hy-error;
-  }
-
-  &--success {
-    background-color: $hy-success;
-  }
+  /* 主题色 */
+  @include themeColor(primary, $hy-primary);
+  @include themeColor(primary--inverted, "", "", $hy-primary);
 
-  &--success--inverted {
-    color: $hy-success;
-  }
+  @include themeColor(error, $hy-error);
+  @include themeColor(error--inverted, "", "", $hy-error);
 
-  &--info {
-    background-color: $hy-info;
-  }
+  @include themeColor(success, $hy-success);
+  @include themeColor(success--inverted, "", "", $hy-success);
 
-  &--info--inverted {
-    color: $hy-info;
-  }
+  @include themeColor(warning, $hy-warning);
+  @include themeColor(warning--inverted, "", "", $hy-warning);
 
-  &--warning {
-    background-color: $hy-warning;
-  }
+  @include themeColor(info, $hy-info);
+  @include themeColor(info--inverted, "", "", $hy-info);
 
-  &--warning--inverted {
-    color: $hy-warning;
-  }
 }

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyBadgeProps {
   /**
    * @description 是否显示圆点 （默认 false ）
    * */

package/components/hy-button/hy-button.vue

@@ -21,10 +21,9 @@
     @launchapp="launchapp"
     @agreeprivacyauthorization="agreeprivacyauthorization"
     :hover-class="!disabled && !loading ? 'hy-button--active' : ''"
-    class="hy-button hy-reset-button"
     :style="[baseColor, customStyle]"
     @tap="clickHandler"
-    :class="bemClass"
+    :class="['hy-button', 'hy-reset-button', bemClass]"
   >
     <template v-if="loading">
       <HyLoading
@@ -40,11 +39,19 @@
     </template>
     <template v-else>
       <HyIcon
-        v-if="icon"
-        :name="icon"
+        v-if="icon?.name"
+        :name="icon?.name"
         :color="iconColorCom"
-        :size="textSize * 1.35"
-        :customStyle="{ marginRight: '2px' }"
+        :size="icon?.size || textSize * 1.35"
+        :bold="icon?.bold"
+        :customPrefix="icon?.customPrefix"
+        :imgMode="icon?.imgMode"
+        :width="icon?.width"
+        :height="icon?.height"
+        :top="icon?.top"
+        :stop="icon?.stop"
+        :round="icon?.round"
+        :customStyle="icon?.customStyle || { marginRight: '2px' }"
       ></HyIcon>
       <slot>
         <text
@@ -74,11 +81,11 @@
     :style="[baseColor, customStyle]"
   >
     <template v-if="loading">
-      <up-loading-icon
+      <HyLoading
         :mode="loadingMode"
-        :size="loadingSize * 1.15"
+        :size="loadingSize"
         :color="loadingColor"
-      ></up-loading-icon>
+      ></HyLoading>
       <text
         class="hy-button__loading-text"
         :style="[nvueTextStyle]"
@@ -88,10 +95,19 @@
     </template>
     <template v-else>
       <HyIcon
-        v-if="icon"
-        :name="icon"
+        v-if="icon?.name"
+        :name="icon?.name"
         :color="iconColorCom"
-        :size="textSize * 1.35"
+        :size="icon?.size || textSize * 1.35"
+        :bold="icon?.bold"
+        :customPrefix="icon?.customPrefix"
+        :imgMode="icon?.imgMode"
+        :width="icon?.width"
+        :height="icon?.height"
+        :top="icon?.top"
+        :stop="icon?.stop"
+        :round="icon?.round"
+        :customStyle="icon?.customStyle || { marginRight: '2px' }"
       ></HyIcon>
       <text
         class="hy-button__text"
@@ -109,6 +125,17 @@
   <!-- #endif -->
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import { bem, throttle } from "../../utils";
@@ -130,7 +157,7 @@ const {
   type,
   plain,
   color,
-  iconColor,
+  icon,
 } = toRefs(props);
 const emit = defineEmits([
   "click",
@@ -181,11 +208,11 @@ const loadingColor = computed(() => {
 const iconColorCom = computed((): string => {
   // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
   // u-icon的color能接受一个主题颜色的值
-  if (iconColor.value) return iconColor.value;
+  if (icon.value?.color) return icon.value?.color;
   if (plain.value) {
     return color.value ? color.value : textColor;
   } else {
-    return type.value === "info" ? "#000000" : "#ffffff";
+    return (type.value = "#ffffff");
   }
 });
 const baseColor = computed((): CSSProperties => {
@@ -195,7 +222,7 @@ const baseColor = computed((): CSSProperties => {
     style.color = plain.value ? color.value : "white";
     if (!plain.value) {
       // 非镂空，背景色使用自定义的颜色
-      style["background-color"] = color.value;
+      style["background"] = color.value;
     }
     if (color.value.indexOf("gradient") !== -1) {
       // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
@@ -216,7 +243,7 @@ const baseColor = computed((): CSSProperties => {
     }
   } else {
     // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
-    style.color = plain.value ? textColor : "";
+    // style.color = plain.value ? textColor : "";
   }
   return style;
 });