hy-app 0.3.4 → 0.3.6

package/components/hy-button/index.scss

@@ -84,4 +84,9 @@
   @include m(hairline) {
     border-width: 0.5px;
   }
+}
+
+/* 去掉背景色 */
+button {
+  background: transparent;
 }

package/components/hy-button/props.ts

@@ -1,7 +1,6 @@
-import type { HyButtonProps } from './typing'
-import { HyApp } from 'hy-app/typing/modules/common'
-import type { CSSProperties, PropType } from 'vue'
-import HyIconProps from '@/package/components/hy-icon/typing'
+import type { HyButtonProps } from "./typing";
+import type { CSSProperties, PropType } from "vue";
+import type HyIconProps from "@/package/components/hy-icon/typing";
 
 export const defaultProps = {
   /** 是否显示按钮的细边框 */
@@ -12,20 +11,21 @@ export const defaultProps = {
   /** 按钮的预置样式 */
   type: {
     type: String as PropType<HyApp.ThemeType>,
-    default: 'primary',
-    validator: (v) => ['info', 'primary', 'error', 'warning', 'success'].includes(v),
+    default: "primary",
+    validator: (v) =>
+      ["info", "primary", "error", "warning", "success"].includes(v),
   },
   /** 按钮尺寸 */
   size: {
-    type: String as PropType<HyApp.SizeType | 'mini'>,
-    default: 'medium',
-    validator: (v) => ['large', 'medium', 'small', 'mini'].includes(v),
+    type: String as PropType<HyApp.SizeType | "mini">,
+    default: "medium",
+    validator: (v) => ["large", "medium", "small", "mini"].includes(v),
   },
   /** 按钮形状 */
   shape: {
     type: String as PropType<HyApp.ShapeType>,
-    default: 'square',
-    validator: (v) => ['circle', 'square'].includes(v),
+    default: "square",
+    validator: (v) => ["circle", "square"].includes(v),
   },
   /** 按钮是否镂空，背景色透明  */
   plain: {
@@ -45,13 +45,13 @@ export const defaultProps = {
   /** 加载中提示文字 */
   loadingText: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 加载状态图标类型 */
   loadingMode: {
     type: String as PropType<HyApp.LoadingMode>,
-    default: 'spinner',
-    validator: (v) => ['spinner', 'circle', 'semicircle'].includes(v),
+    default: "spinner",
+    validator: (v) => ["spinner", "circle", "semicircle"].includes(v),
   },
   /** 加载图标大小 */
   loadingSize: {
@@ -61,17 +61,17 @@ export const defaultProps = {
   /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
   openType: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
   formType: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效） */
   appParameter: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
   hoverStopPropagation: {
@@ -81,27 +81,27 @@ export const defaultProps = {
   /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ） */
   lang: {
     type: String,
-    default: 'en',
+    default: "en",
   },
   /** 会话来源，openType="contact"时有效 */
   sessionFrom: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 会话内消息卡片标题，openType="contact"时有效 */
   sendMessageTitle: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 */
   sendMessagePath: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 会话内消息卡片图片，openType="contact"时有效 */
   sendMessageImg: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 */
   showMessageCard: {
@@ -111,7 +111,7 @@ export const defaultProps = {
   /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
   dataName: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 节流时间，一定时间内只能触发一次 */
   throttleTime: {
@@ -131,7 +131,7 @@ export const defaultProps = {
   /** 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） */
   text: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 按钮图标api集合 */
   icon: {
@@ -141,7 +141,7 @@ export const defaultProps = {
   /** 按钮颜色，支持传入linear-gradient渐变色 */
   color: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 阻止事件冒泡 */
   stop: {
@@ -156,4 +156,4 @@ export const defaultProps = {
   customClass: {
     type: String,
   },
-} as const
+} as const;

package/components/hy-card/hy-card.vue

@@ -60,7 +60,7 @@
       class="hy-card__foot"
       @tap="footClick"
       :style="[
-        { padding: $slots.foot ? addUnit(paddingFoot || padding) : 0 },
+        { padding: $slots.footer ? addUnit(paddingFoot || padding) : 0 },
         footStyle,
       ]"
       :class="{
@@ -134,7 +134,7 @@ const props = defineProps({
   /** 卡片与屏幕两边和上下元素的间距，需带单位，如"30px 20px" */
   margin: {
     type: String,
-    default: "15px",
+    default: "10px",
   },
   /** 卡片整体的圆角值，单位px */
   borderRadius: {

package/components/hy-flex/hy-flex.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="cls" :style="style">
+  <view :class="flexClass" :style="flexStyle">
     <slot />
   </view>
 </template>
@@ -16,7 +16,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, type CSSProperties } from "vue";
 import type { PropType } from "vue";
 import type { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from "./typing";
 import { addUnit, isArray } from "../../utils";
@@ -73,13 +73,24 @@ const props = defineProps({
     type: [String, Number],
     default: "auto",
   },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => {},
+  },
+  /** 自定义外部类名 */
+  customClass: String,
 });
 
 // 计算 class
-const cls = computed(() => ["hy-flex", props.vertical && "hy-flex--vertical"]);
+const flexClass = computed(() => [
+  "hy-flex",
+  props.customClass,
+  props.vertical && "hy-flex--vertical",
+]);
 
 // 计算 style
-const style = computed(() => {
+const flexStyle = computed(() => {
   const gap = isArray(props.gap) ? props.gap : [props.gap, props.gap];
   const [rowGap, colGap] = gap.map((v) => addUnit(v));
 
@@ -92,6 +103,7 @@ const style = computed(() => {
     "flex-basis": props.basis,
     "row-gap": colGap,
     "column-gap": rowGap,
+    ...props.customStyle,
   };
 });
 </script>

package/components/hy-grid/hy-grid.vue

@@ -64,7 +64,7 @@ defineOptions({});
 const props = defineProps({
   /** 数据列表 */
   list: {
-    type: Array as PropType<GridItemVo[]>,
+    type: Array as PropType<(GridItemVo | string)[]>,
     default: () => [],
   },
   /** 自定义键值 */

package/components/hy-tag/hy-tag.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from "vue";
+import { computed } from "vue";
 import type { CSSProperties, PropType } from "vue";
 import type { ITagEmits } from "./typing";
 import { IconConfig } from "../../config";
@@ -93,7 +93,7 @@ const props = defineProps({
   },
   /**
    * 标签的大小
-   * @values large,medium,small
+   * @values large,medium,small,mini
    * */
   size: {
     type: String,

package/components/hy-tag/index.scss

@@ -26,6 +26,12 @@ $hy-background--disabled);
   }
 
   @include e(text) {
+
+    @include m(mini) {
+      font-size: 20rpx;
+      line-height: 20rpx;
+    }
+
     @include m(small) {
       font-size: $hy-font-size-sm;
       line-height: $hy-font-size-sm;
@@ -42,6 +48,12 @@ $hy-background--disabled);
     }
   }
 
+  @include m(mini) {
+    height: 17px;
+    line-height: 17px;
+    padding: 0 $hy-border-margin-padding-sm;
+  }
+
   @include m(small) {
     height: 22px;
     line-height: 22px;

package/components/hy-text/hy-text.vue

@@ -98,8 +98,11 @@ const props = defineProps({
     default: "",
     required: true,
   },
-  /** 主题颜色 */
-  type: String,
+  /**
+   * 主题颜色
+   * @values primary,success,error,warning,info
+   * */
+  type: String as PropType<HyApp.ThemeType>,
   /** 是否显示 */
   show: {
     type: Boolean,

package/components/hy-warn/hy-warn.vue

@@ -1,15 +1,15 @@
 <template>
   <HyTransition mode="fade" :show="show">
     <view
-      :class="['hy-warn', `hy-warn--${type}--${theme}`, customClass]"
+      :class="['hy-warn', `hy-warn--${type}__${theme}`, customClass]"
       @tap.stop="clickHandler"
       :style="customStyle"
     >
-      <view class="hy-warn__icon--left" v-if="showIcon">
+      <view class="hy-warn--icon__left" v-if="showIcon">
         <HyIcon :name="iconName(type)" size="21" :color="iconColor"></HyIcon>
       </view>
       <view
-        class="hy-warn__content"
+        class="hy-warn--content"
         :style="[
           {
             paddingRight: closable ? '20px' : 0,
@@ -17,7 +17,7 @@
         ]"
       >
         <text
-          class="hy-warn__content__title"
+          class="hy-warn--content__title"
           v-if="title"
           :style="[
             {
@@ -27,14 +27,14 @@
           ]"
           :class="[
             theme === 'dark'
-              ? 'hy-warn__text--dark'
-              : `hy-warn__text--${type}--light`,
+              ? 'hy-warn--text__dark'
+              : `hy-warn--text__${type}--light`,
           ]"
         >
           {{ title }}
         </text>
         <text
-          class="hy-warn__content__desc"
+          class="hy-warn--content__desc"
           v-if="description"
           :style="[
             {
@@ -44,14 +44,17 @@
           ]"
           :class="[
             theme === 'dark'
-              ? 'hy-warn__text--dark'
-              : `hy-warn__text--${type}--light`,
+              ? 'hy-warn--text__dark'
+              : `hy-warn--text__${type}--light`,
           ]"
         >
           {{ description }}
         </text>
       </view>
-      <view class="hy-warn__close" v-if="closable" @tap.stop="closeHandler">
+      <view class="hy-warn--right" v-if="$slots.right">
+        <slot name="right"></slot>
+      </view>
+      <view class="hy-warn--close" v-if="closable" @tap.stop="closeHandler">
         <HyIcon :name="IconConfig.CLOSE" :color="iconColor" size="15"></HyIcon>
       </view>
     </view>
@@ -111,8 +114,8 @@ const props = defineProps({
   },
   /** 显示的暗色或者亮色 */
   theme: {
-    type: String,
-    default: "light",
+    type: String as PropType<HyApp.DarkModeType>,
+    default: "dark",
   },
   /** 文字是否居中 */
   center: {

package/components/hy-warn/index.scss

@@ -29,37 +29,37 @@
   align-items: center;
   border-radius: $hy-border-radius-sm;
 
-  &--primary--dark {
+  @include m(primary__dark) {
     background-color: $hy-primary;
   }
 
-  &--primary--light {
+  @include m(primary__light) {
     background-color: $hy-primary-light;
-    .hy-warn__icon--left {
+    .hy-warn--icon__left {
       :deep(.hy-icon) {
         color: $hy-primary;
       }
     }
   }
 
-  &--error--dark {
+  @include m(error__dark) {
     background-color: $hy-error;
   }
 
-  &--error--light {
+  @include m(error__light) {
     background-color: $hy-error-light;
-    .hy-warn__icon--left {
+    .hy-warn--icon__left {
       :deep(.hy-icon) {
         color: $hy-error;
       }
     }
   }
 
-  &--success--dark {
+  @include m(success__dark) {
     background-color: $hy-success;
   }
 
-  &--success--light {
+  @include m(success__light) {
     background-color: $hy-success-light;
     .hy-warn__icon--left {
       :deep(.hy-icon) {
@@ -68,11 +68,11 @@
     }
   }
 
-  &--warning--dark {
+  @include m(warning__dark) {
     background-color: $hy-warning;
   }
 
-  &--warning--light {
+  @include m(warning__light) {
     background-color: $hy-warning-light;
     .hy-warn__icon--left {
       :deep(.hy-icon) {
@@ -81,72 +81,66 @@
     }
   }
 
-  &--info--dark {
+  @include m(info__dark) {
     background-color: $hy-info;
   }
 
-  &--info--light {
+  @include m(info__light) {
     background-color: $hy-info-light;
-    .hy-warn__icon--left {
+    .hy-warn--icon__left {
       :deep(.hy-icon) {
         color: $hy-info;
       }
     }
   }
 
-  &__icon {
+  @include m(icon) {
     margin-right: $hy-border-margin-padding-sm;
   }
 
-  &__content {
+  @include m(content) {
     @include flex(column);
     flex: 1;
 
-    &__title {
+    @include e(title) {
       font-size: 14px;
       font-weight: bold;
       color: #fff;
       margin-bottom: 2px;
     }
 
-    &__desc {
+    @include e(desc) {
       font-size: 14px;
       flex-wrap: wrap;
       color: #fff;
     }
   }
 
-  &__title--dark,
-  &__desc--dark {
+  @include m([title__dark, desc__dark]) {
     color: #ffffff;
   }
 
-  &__text--primary--light,
-  &__text--primary--light {
+  @include m(text__primary--light) {
     color: $hy-primary;
   }
 
-  &__text--success--light,
-  &__text--success--light {
+  @include m(text__success--light) {
     color: $hy-success;
   }
 
-  &__text--warning--light,
-  &__text--warning--light {
+  @include m(text__primary--light) {
     color: $hy-warning;
   }
 
-  &__text--error--light,
-  &__text--error--light {
+  @include m(text__error--light) {
     color: $hy-error;
   }
 
-  &__text--info--light,
-  &__text--info--light {
+  @include m(text__info--light) {
     color: $hy-info;
   }
 
-  &__close {
+  @include m(close) {
     position: absolute;
     top: 11px;
     right: 10px;

package/libs/css/_function.scss

@@ -1,7 +1,5 @@
-/**
- * 辅助函数
- */
-@import 'config';
+@use 'config';
+
 $default-theme: #4d80f0 !default; // 正常色
 
 /* 转换成字符串 */
@@ -16,7 +14,7 @@ $default-theme: #4d80f0 !default; // 正常色
 @function containsModifier($selector) {
   $selector: selectorToString($selector);
 
-  @if str-index($selector, $modifierSeparator) {
+  @if str-index($selector, config.$modifier-separator) {
     @return true;
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.3.4",
-  "description": "修改微信小程序适配",
+  "version": "0.3.6",
+  "description": "修改小bug",
   "main": "./index.ts",
   "private": false,
   "scripts": {},
@@ -11,9 +11,6 @@
     "暗黑模式"
   ],
   "web-types": "./web-types.json",
-  "author": "gaoxianhua",
-  "license": "MIT",
-  "dependencies": {
-    "hy-app": "0.3.*"
-  }
+  "author": "华玥作者",
+  "license": "MIT"
 }