hy-app 0.1.1 → 0.1.3

package/components/hy-badge/index.scss

@@ -0,0 +1,72 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+$hy-badge-dot-size: 8px !default;
+$hy-badge-text-font-size: 11px !default;
+
+.hy-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 {
+    height: $hy-badge-dot-size;
+    width: $hy-badge-dot-size;
+  }
+
+  &--inverted {
+    font-size: 13px;
+  }
+
+  &--not-dot {
+    padding: 2px 5px;
+  }
+
+  &--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;
+  }
+
+  &--success--inverted {
+    color: $hy-success;
+  }
+
+  &--info {
+    background-color: $hy-info;
+  }
+
+  &--info--inverted {
+    color: $hy-info;
+  }
+
+  &--warning {
+    background-color: $hy-warning;
+  }
+
+  &--warning--inverted {
+    color: $hy-warning;
+  }
+}

package/components/hy-badge/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   isDot: false,
@@ -13,7 +13,7 @@ const defaultProps: IProps = {
   numberType: "overflow",
   offset: null,
   inverted: false,
-  absolute: false
+  absolute: false,
 };
 
 export default defaultProps;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
@@ -18,7 +18,7 @@ export default interface IProps {
    * */
   max?: number;
   /**
-   * @description 主题类型，error|warning|success|primary （默认 'error' ）
+   * @description 主题类型，error|warning|success|primary|info （默认 'error' ）
    * */
   type?: HyApp.ThemeType;
   /**

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

@@ -27,13 +27,13 @@
     :class="bemClass"
   >
     <template v-if="loading">
-      <hy-icon
+      <HyIcon
         :mode="loadingMode"
         :is-rotate="true"
         :name="IconConfig.LOADING"
-        :size="loadingSize * 1.15"
+        :size="loadingSize"
         :color="loadingColor"
-      ></hy-icon>
+      ></HyIcon>
       <text
         class="hy-button__loading-text"
         :style="[{ fontSize: textSize + 'px' }]"
@@ -41,13 +41,13 @@
       >
     </template>
     <template v-else>
-      <hy-icon
+      <HyIcon
         v-if="icon"
         :name="icon"
         :color="iconColorCom"
         :size="textSize * 1.35"
         :customStyle="{ marginRight: '2px' }"
-      ></hy-icon>
+      ></HyIcon>
       <slot>
         <text
           class="hy-button__text"
@@ -68,8 +68,8 @@
       !disabled && !loading && !color && (plain || type === 'info')
         ? 'hy-button--active--plain'
         : !disabled && !loading && !plain
-        ? 'hy-button--active'
-        : ''
+          ? 'hy-button--active'
+          : ''
     "
     @tap="clickHandler"
     :class="bemClass"
@@ -99,9 +99,9 @@
         class="hy-button__text"
         :style="[
           {
-            marginLeft: icon ? '2px' : 0
+            marginLeft: icon ? '2px' : 0,
           },
-          nvueTextStyle
+          nvueTextStyle,
         ]"
         :class="[plain && `hy-button__text--plain--${type}`]"
         >{{ text }}</text
@@ -112,12 +112,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs } from "vue";
+import { computed, type CSSProperties, toRefs } from "vue";
 import { bem, throttle } from "../../utils";
 import defaultProps from "./props";
 import { ColorConfig, IconConfig } from "../../config";
 import HyIcon from "../hy-icon/hy-icon.vue";
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -129,7 +129,7 @@ const {
   type,
   plain,
   color,
-  iconColor
+  iconColor,
 } = toRefs(props);
 const emit = defineEmits([
   "click",
@@ -138,7 +138,7 @@ const emit = defineEmits([
   "error",
   "opensetting",
   "launchapp",
-  "agreeprivacyauthorization"
+  "agreeprivacyauthorization",
 ]);
 
 const textColor = (ColorConfig as any)[type.value];
@@ -153,7 +153,7 @@ const bemClass = computed(() => {
       "button",
       props,
       ["type", "shape", "size"],
-      ["disabled", "plain", "hairline"]
+      ["disabled", "plain", "hairline"],
     );
   } else {
     // 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
@@ -161,7 +161,7 @@ const bemClass = computed(() => {
       "button",
       props,
       ["shape", "size"],
-      ["disabled", "plain", "hairline"]
+      ["disabled", "plain", "hairline"],
     );
   }
 });
@@ -169,7 +169,7 @@ const bemClass = computed(() => {
 const loadingColor = computed(() => {
   if (plain.value) {
     // 如果有设置color值，则用color值，否则使用type主题颜色
-    return color.value ? color.value : (ColorConfig as any)[type.value];
+    return color.value ? color.value : textColor;
   }
   if (type.value === "info") {
     return "#c9c9c9";
@@ -182,7 +182,7 @@ const iconColorCom = computed((): string => {
   // u-icon的color能接受一个主题颜色的值
   if (iconColor.value) return iconColor.value;
   if (plain.value) {
-    return color.value ? color.value : type.value;
+    return color.value ? color.value : textColor;
   } else {
     return type.value === "info" ? "#000000" : "#ffffff";
   }
@@ -213,6 +213,9 @@ const baseColor = computed((): CSSProperties => {
       style.borderWidth = "1px";
       style.borderStyle = "solid";
     }
+  } else {
+    // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+    style.color = plain.value ? textColor : "";
   }
   return style;
 });
@@ -236,7 +239,7 @@ const nvueTextStyle = computed((): CSSProperties => {
 const textSize = computed((): number => {
   let fontSize = 14;
   if (size.value === "large") fontSize = 16;
-  if (size.value === "normal") fontSize = 14;
+  if (size.value === "medium") fontSize = 14;
   if (size.value === "small") fontSize = 12;
   if (size.value === "mini") fontSize = 10;
   return fontSize;
@@ -275,120 +278,5 @@ const agreeprivacyauthorization = (e: any) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-button {
-  height: 40px;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  @include flex;
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-  flex-direction: row;
-
-  &__text {
-    font-size: 15px;
-  }
-
-  &__loading-text {
-    font-size: 15px;
-    margin-left: 4px;
-  }
-
-  &--large {
-    /* #ifndef APP-NVUE */
-    width: 100%;
-    /* #endif */
-    height: 50px;
-    padding: 0 15px;
-  }
-
-  &--normal {
-    padding: 0 12px;
-    font-size: 14px;
-  }
-
-  &--small {
-    /* #ifndef APP-NVUE */
-    min-width: 60px;
-    /* #endif */
-    height: 80px;
-    padding: 0 8px;
-    font-size: 12px;
-  }
-
-  &--mini {
-    height: 22px;
-    font-size: 10px;
-    /* #ifndef APP-NVUE */
-    min-width: 50px;
-    /* #endif */
-    padding: 0 8px;
-  }
-
-  &--disabled {
-    opacity: 0.5;
-  }
-
-  &--info {
-    color: #323233;
-    background-color: #fff;
-    border: 1px solid #ebedf0;
-  }
-
-  &--success {
-    color: #fff;
-    background-color: $hy-success;
-    border: 1px solid $hy-success;
-  }
-
-  &--primary {
-    color: #fff;
-    background-color: $hy-primary;
-    border: 1px solid $hy-primary;
-  }
-
-  &--error {
-    color: #fff;
-    background-color: $hy-error;
-    border: 1px solid $hy-error;
-  }
-
-  &--warning {
-    color: #fff;
-    background-color: $hy-warning;
-    border: 1px solid $hy-warning;
-  }
-
-  &--block {
-    @include flex;
-    width: 100%;
-  }
-
-  &--circle {
-    border-radius: 100px;
-  }
-
-  &--square {
-    border-radius: 3px;
-  }
-
-  &__icon {
-    min-width: 1em;
-    line-height: inherit !important;
-    vertical-align: top;
-  }
-
-  &--plain {
-    color: v-bind(textColor);
-    background-color: #fff;
-  }
-
-  &--hairline {
-    border-width: 0.5;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-button/index.scss

@@ -0,0 +1,116 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-button {
+  height: 40px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  @include flex;
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+
+  &__text {
+    font-size: 15px;
+  }
+
+  &__loading-text {
+    font-size: 15px;
+    margin-left: 4px;
+  }
+
+  &--large {
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    height: 50px;
+    padding: 0 15px;
+  }
+
+  &--medium {
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  &--small {
+    /* #ifndef APP-NVUE */
+    min-width: 60px;
+    /* #endif */
+    height: 30px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+
+  &--mini {
+    height: 22px;
+    font-size: 10px;
+    /* #ifndef APP-NVUE */
+    min-width: 50px;
+    /* #endif */
+    padding: 0 8px;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &--info {
+    color: #323233;
+    background-color: #fff;
+    border: 1px solid #909399;
+  }
+
+  &--success {
+    color: #fff;
+    background-color: $hy-success;
+    border: 1px solid $hy-success;
+  }
+
+  &--primary {
+    color: #fff;
+    background-color: $hy-primary;
+    border: 1px solid $hy-primary;
+  }
+
+  &--error {
+    color: #fff;
+    background-color: $hy-error;
+    border: 1px solid $hy-error;
+  }
+
+  &--warning {
+    color: #fff;
+    background-color: $hy-warning;
+    border: 1px solid $hy-warning;
+  }
+
+  &--block {
+    @include flex;
+    width: 100%;
+  }
+
+  &--circle {
+    border-radius: 100px;
+  }
+
+  &--square {
+    border-radius: 3px;
+  }
+
+  &__icon {
+    min-width: 1em;
+    line-height: inherit !important;
+    vertical-align: top;
+  }
+
+  &--plain {
+    color: v-bind(textColor);
+    background-color: #fff;
+  }
+
+  &--hairline {
+    border-width: 0.5px;
+  }
+}

package/components/hy-button/props.ts

@@ -1,10 +1,9 @@
-import IProps from "./typing";
-import type { CSSProperties } from "vue";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   hairline: false,
-  type: "info",
-  size: "normal",
+  type: "primary",
+  size: "medium",
   shape: "square",
   plain: false,
   disabled: false,
@@ -30,7 +29,7 @@ const defaultProps: IProps = {
   icon: "",
   iconColor: "",
   color: "",
-  stop: true
+  stop: true,
 };
 
 export default defaultProps;

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

@@ -6,13 +6,13 @@ export default interface IProps {
    * */
   hairline?: boolean;
   /**
-   * @description 按钮的预置样式，info，primary，error，warning，success (默认 'info' )
+   * @description 按钮的预置样式，info，primary，error，warning，success (默认 'primary' )
    * */
   type?: HyApp.ThemeType;
   /**
-   * @description 按钮尺寸，large，normal，mini （默认 normal）
+   * @description 按钮尺寸，large，medium，mini （默认 medium）
    * */
-  size?: "normal" | "large" | "small" | "mini";
+  size?: HyApp.SizeType | "mini";
   /**
    * @description 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
    * */

package/components/hy-calendar/header.vue

@@ -0,0 +1,76 @@
+<template>
+  <view class="u-calendar-header u-border-bottom">
+    <text class="u-calendar-header__title" v-if="showTitle">{{ title }}</text>
+    <text class="u-calendar-header__subtitle" v-if="showSubtitle">{{
+      subtitle
+    }}</text>
+    <view class="u-calendar-header__weekdays">
+      <text class="u-calendar-header__weekdays__weekday">{{
+        weekText[0]
+      }}</text>
+      <text class="u-calendar-header__weekdays__weekday">{{
+        weekText[1]
+      }}</text>
+      <text class="u-calendar-header__weekdays__weekday">{{
+        weekText[2]
+      }}</text>
+      <text class="u-calendar-header__weekdays__weekday">{{
+        weekText[3]
+      }}</text>
+      <text class="u-calendar-header__weekdays__weekday">{{
+        weekText[4]
+      }}</text>
+      <text class="u-calendar-header__weekdays__weekday">{{
+        weekText[5]
+      }}</text>
+      <text class="u-calendar-header__weekdays__weekday">{{
+        weekText[6]
+      }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "u-calendar-header",
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: "",
+    },
+    // 副标题
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    // 是否显示标题
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示副标题
+    showSubtitle: {
+      type: Boolean,
+      default: true,
+    },
+    // 星期文本
+    weekText: {
+      type: Array,
+      default: () => {
+        return ["一", "二", "三", "四", "五", "六", "日"];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    name() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>