hy-app 0.1.1 → 0.1.3

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

@@ -5,7 +5,7 @@
       class="hy-card__head"
       :style="[{ padding: addUnit(paddingHead || padding) }, headStyle]"
       :class="{
-        'hy-border-bottom': headBorderBottom
+        'hy-border__bottom': headBorderBottom,
       }"
       @tap="headClick"
     >
@@ -19,14 +19,14 @@
             :style="{
               height: addUnit(thumbWidth),
               width: addUnit(thumbWidth),
-              borderRadius: thumbCircle ? '50px' : '4px'
+              borderRadius: thumbCircle ? '50px' : '4px',
             }"
           ></image>
           <text
             class="hy-card__head--left__title"
             :style="{
               fontSize: addUnit(titleSize),
-              color: titleColor
+              color: titleColor,
             }"
           >
             {{ title }}
@@ -37,7 +37,7 @@
             class="hy-card__head__title__text"
             :style="{
               fontSize: addUnit(subTitleSize),
-              color: subTitleColor
+              color: subTitleColor,
             }"
           >
             {{ subTitle }}
@@ -59,10 +59,10 @@
       @tap="footClick"
       :style="[
         { padding: $slots.foot ? addUnit(paddingFoot || padding) : 0 },
-        footStyle
+        footStyle,
       ]"
       :class="{
-        'hy-border-top': footBorderTop
+        'hy-border-top': footBorderTop,
       }"
     >
       <slot name="footer" />
@@ -72,7 +72,7 @@
 
 <script setup lang="ts">
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit } from "../../utils";
 import { computed, toRefs } from "vue";
 
@@ -89,19 +89,22 @@ const cardClass = computed(() => {
     (typeof borderRadius.value === "number"
       ? borderRadius.value
       : parseInt(borderRadius.value.replace(/px|rpx|vw|vh/g, "")) > 0) &&
-      "hy-card--border"
+      "hy-card--border",
   ].filter(Boolean);
 });
 const cardStyle = computed(() => {
-  return Object.assign(customStyle.value, {
-    borderRadius: addUnit(borderRadius.value),
-    margin: margin.value,
-    boxShadow: boxShadow.value
-      ? typeof boxShadow.value === "boolean"
-        ? "0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)"
-        : boxShadow.value
-      : ""
-  });
+  return Object.assign(
+    {
+      borderRadius: addUnit(borderRadius.value),
+      margin: margin.value,
+      boxShadow: boxShadow.value
+        ? typeof boxShadow.value === "boolean"
+          ? "0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)"
+          : boxShadow.value
+        : "",
+    },
+    customStyle.value,
+  );
 });
 
 const click = () => {
@@ -128,71 +131,5 @@ const footClick = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-card {
-  position: relative;
-  overflow: hidden;
-  font-size: 28rpx;
-  background-color: #ffffff;
-  box-sizing: border-box;
-
-  &-full {
-    // 如果是与屏幕之间不留空隙，应该设置左右边距为0
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    width: 100%;
-  }
-
-  &--border:after {
-    border-radius: 16rpx;
-  }
-
-  &__head {
-    &--flex {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    &--left {
-      color: #303133ff;
-      display: flex;
-
-      &__thumb {
-        margin-right: 16rpx;
-      }
-
-      &__title {
-        max-width: 400rpx;
-        height: 20px;
-        @include line-feed;
-      }
-    }
-
-    &--right {
-      color: $hy-text-color-grey;
-      margin-left: 6rpx;
-    }
-  }
-
-  &__body {
-    color: $hy-bg-color;
-  }
-
-  &__foot {
-    color: $hy-text-color-grey;
-  }
-}
-.hy-border-bottom {
-  border-bottom: $hy-border-line;
-}
-
-.hy-border-top {
-  border-top: $hy-border-line;
-}
-.hy-border {
-  border: $hy-border-line;
-}
+@import "./index.scss";
 </style>

package/components/hy-card/index.scss

@@ -0,0 +1,57 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-card {
+  position: relative;
+  overflow: hidden;
+  font-size: 28rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+
+  &-full {
+    // 如果是与屏幕之间不留空隙，应该设置左右边距为0
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100%;
+  }
+
+  &--border:after {
+    border-radius: 16rpx;
+  }
+
+  &__head {
+    &--flex {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &--left {
+      color: #303133ff;
+      display: flex;
+
+      &__thumb {
+        margin-right: 16rpx;
+      }
+
+      &__title {
+        max-width: 400rpx;
+        height: 20px;
+        @include line-feed;
+      }
+    }
+
+    &--right {
+      color: $hy-text-color-grey;
+      margin-left: 6rpx;
+    }
+  }
+
+  &__body {
+    color: $hy-bg-color;
+  }
+
+  &__foot {
+    color: $hy-text-color-grey;
+  }
+}

package/components/hy-card/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   full: false,
@@ -23,7 +23,7 @@ const defaultProps: IProps = {
   paddingFoot: "",
   showHead: true,
   showFoot: true,
-  boxShadow: true
+  boxShadow: true,
 };
 
 export default defaultProps;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**

package/components/hy-cell/hy-cell.vue

@@ -20,7 +20,7 @@
       <slot>
         <template v-for="(item, i) in list" :key="i">
           <view
-            class="hy-cell__body--container"
+            :class="ItemClass"
             :hover-class="containerClass(item)"
             :hover-stay-time="250"
             :style="{ borderBottom: border ? '1rpx solid #c8c7cc66' : '' }"
@@ -30,7 +30,7 @@
               <view class="hy-cell__body--container__content-icon">
                 <slot name="icon" :icon="item?.icon">
                   <HyIcon
-                    size="25"
+                    :size="iconSize"
                     :name="item?.icon"
                     :color="disabled || item?.disabled ? '#c0c0c0' : ''"
                   ></HyIcon>
@@ -42,7 +42,7 @@
                   <text
                     class="hy-cell__body--container__content-title--text"
                     :class="[
-                      (disabled || item?.disabled) && 'hy-cell--disabled'
+                      (disabled || item?.disabled) && 'hy-cell--disabled',
                     ]"
                     >{{ item?.title }}</text
                   >
@@ -63,8 +63,8 @@
                   arrange === 'left'
                     ? 'flex-start'
                     : arrange === 'right'
-                    ? 'flex-end'
-                    : 'center'
+                      ? 'flex-end'
+                      : 'center',
               }"
             >
               <slot name="value" :record="item">
@@ -81,7 +81,7 @@
               :class="[
                 `hy-cell__body--container__right-icon--${
                   item?.arrowDirection || arrowDirection
-                }`
+                }`,
               ]"
             >
               <slot name="right-icon" :icon="item?.rightIcon || rightIcon">
@@ -89,7 +89,7 @@
                   :name="item?.rightIcon || rightIcon"
                   :custom-style="rightIconStyle"
                   :color="disabled || item?.disabled ? '#c0c0c0' : 'info'"
-                  :size="size === 'large' ? 18 : 16"
+                  :size="iconSize"
                 ></HyIcon>
               </slot>
             </view>
@@ -104,13 +104,14 @@
 
 <script setup lang="ts">
 import defaultProps from "./props";
-import IProps, { CellContentVo } from "./typing";
+import type IProps from "./typing";
+import type { CellContentVo } from "./typing";
 
 import HyIcon from "../hy-icon/hy-icon.vue";
 import { computed, toRefs } from "vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { disabled, clickable } = toRefs(props);
+const { size, disabled, clickable } = toRefs(props);
 const emit = defineEmits(["click"]);
 
 /**
@@ -122,12 +123,29 @@ const containerClass = computed(() => {
       !disabled.value &&
         !temp?.disabled &&
         clickable.value &&
-        "hy-cell__body--container__clickable"
+        "hy-cell__body--container__clickable",
     ]
       .filter(Boolean)
       .join();
   };
 });
+const ItemClass = computed(() => {
+  return [
+    "hy-cell__body--container",
+    `hy-cell__body--container__${size.value}`,
+  ];
+});
+
+const iconSize = computed(() => {
+  switch (size.value) {
+    case "large":
+      return 25;
+    case "medium":
+      return 20;
+    case "small":
+      return 15;
+  }
+});
 
 /**
  * @description 点击cell
@@ -137,7 +155,7 @@ const clickHandler = (e: Event, temp: CellContentVo, index: number) => {
   emit("click", temp, index);
   if (temp?.url) {
     uni.navigateTo({
-      url: temp.url
+      url: temp.url,
     });
   }
   e.stopPropagation();
@@ -145,124 +163,5 @@ const clickHandler = (e: Event, temp: CellContentVo, index: number) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-cell {
-  flex: 1;
-
-  /*标题*/
-  &__title {
-    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-sm;
-
-    &-nav {
-      display: flex;
-      align-items: center;
-
-      &--ver {
-        border-radius: 4rpx;
-        width: 4px;
-        height: 20px;
-        margin-right: 16rpx;
-      }
-      &--text {
-        font-size: $hy-font-size-subtitle;
-        line-height: 16px;
-        color: $hy-color-title;
-      }
-    }
-  }
-
-  /*row内容*/
-  &__body {
-    /* #ifndef APP-NVUE */
-    box-sizing: border-box;
-    /* #endif */
-    font-size: $hy-font-size-paragraph;
-    color: $hy-color-paragraph;
-    // line-height: $u-cell-line-height;
-    align-items: center;
-    //justify-content: space-between;
-
-    &--container {
-      @include flex(row);
-      align-items: center;
-      justify-content: space-between;
-      flex: 1;
-      padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
-
-      /*点击状态*/
-      &__clickable {
-        background-color: $hy-bg-color-grey;
-      }
-
-      &__content {
-        @include flex(row);
-        /*左边icon*/
-        &-icon {
-          @include flex();
-          align-items: center;
-          font-size: 16px;
-          margin-right: 10px;
-        }
-        /*行头部*/
-        &-title {
-          flex: $hy-font-size-subtitle;
-          line-height: 25px;
-          display: flex;
-          flex-direction: column;
-
-          /*标题*/
-          &--text {
-            font-size: $hy-font-size-lg;
-            line-height: 22px;
-            color: $hy-color-title;
-          }
-
-          /*sub值*/
-          &--sub {
-            margin-top: $hy-border-margin-padding-sm;
-            font-size: $hy-font-size-base;
-            color: $hy-text-color-grey;
-            line-height: 18px;
-          }
-        }
-      }
-
-      /*cell值*/
-      &__center {
-        @include flex();
-        max-width: 90%;
-        flex: 1;
-        &__value {
-          //text-align: right;
-          font-size: $hy-font-size-base;
-          line-height: 24px;
-          color: $hy-text-color-grey;
-          margin-right: $hy-border-margin-padding-sm;
-        }
-      }
-
-      /*右边icon*/
-      &__right-icon {
-        transition: transform 0.3s;
-
-        &--up {
-          transform: rotate(-90deg);
-        }
-
-        &--down {
-          transform: rotate(90deg);
-        }
-      }
-    }
-  }
-
-  &--disabled {
-    color: $hy-text-color-disable;
-    /* #ifndef APP-NVUE */
-    cursor: not-allowed;
-    /* #endif */
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-cell/index.scss

@@ -0,0 +1,137 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-cell {
+  flex: 1;
+
+  /*标题*/
+  &__title {
+    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-sm;
+
+    &-nav {
+      display: flex;
+      align-items: center;
+
+      &--ver {
+        border-radius: 4rpx;
+        width: 4px;
+        height: 20px;
+        margin-right: 16rpx;
+      }
+      &--text {
+        font-size: $hy-font-size-subtitle;
+        line-height: 16px;
+        color: $hy-color-title;
+      }
+    }
+  }
+
+  /*row内容*/
+  &__body {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+    font-size: $hy-font-size-paragraph;
+    color: $hy-color-paragraph;
+    // line-height: $u-cell-line-height;
+    align-items: center;
+    //justify-content: space-between;
+
+    &--container {
+      @include flex(row);
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+
+      /* 大 */
+      &__large {
+        font-size: $hy-font-size-lg;
+        padding: 35rpx;
+        line-height: 25px;
+      }
+
+      /* 默认 */
+      &__medium {
+        font-size: $hy-font-size-base;
+        padding: 30rpx;
+        line-height: 20px;
+      }
+
+      /* 小 */
+      &__small {
+        font-size: $hy-font-size-sm;
+        padding: 25rpx;
+        line-height: 15px;
+      }
+
+      /*点击状态*/
+      &__clickable {
+        background-color: $hy-bg-color-grey;
+      }
+
+      &__content {
+        @include flex(row);
+        /*左边icon*/
+        &-icon {
+          @include flex();
+          align-items: center;
+          margin-right: 10px;
+        }
+        /*行头部*/
+        &-title {
+          margin-right: $hy-border-margin-padding-sm;
+          flex: $hy-font-size-subtitle;
+          display: flex;
+          flex-direction: column;
+
+          /*标题*/
+          &--text {
+            color: $hy-color-title;
+          }
+
+          /*sub值*/
+          &--sub {
+            margin-top: $hy-border-margin-padding-sm;
+            color: $hy-text-color-grey;
+          }
+        }
+      }
+
+      /*cell值*/
+      &__center {
+        @include flex();
+        max-width: 90%;
+        flex: 1;
+        &__value {
+          line-height: 24px;
+          color: $hy-text-color-grey;
+          margin-right: $hy-border-margin-padding-sm;
+        }
+      }
+
+      /*右边icon*/
+      &__right-icon {
+        transition: transform 0.3s;
+
+        &--up {
+          transform: rotate(-90deg);
+        }
+
+        &--left {
+          transform: rotate(180deg);
+        }
+
+        &--down {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    color: $hy-text-color-disable;
+    /* #ifndef APP-NVUE */
+    cursor: not-allowed;
+    /* #endif */
+  }
+}

package/components/hy-cell/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { ColorConfig, IconConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -14,7 +14,7 @@ const defaultProps: IProps = {
   value: "",
   arrange: "right",
   rightIcon: IconConfig.RIGHT,
-  arrowDirection: "left"
+  arrowDirection: "right",
 };
 
 export default defaultProps;

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

@@ -1,4 +1,5 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
+import { HyApp } from "@/package/typing/modules/common";
 
 export interface CellContentVo extends AnyObject {
   /**
@@ -32,7 +33,7 @@ export interface CellContentVo extends AnyObject {
   /**
    * @description 单元格右侧箭头的方向，可选值为：left，up，down
    * */
-  arrowDirection?: "left" | "up" | "down";
+  arrowDirection?: HyApp.RotateType;
 }
 export default interface IProps {
   /**
@@ -86,7 +87,7 @@ export default interface IProps {
   /**
    * @description 右侧箭头的方向，可选值为：left，up，down
    * */
-  arrowDirection?: "left" | "up" | "down";
+  arrowDirection?: "left" | "up" | "down" | "right";
   /**
    * @description 自定义右侧icon样式
    * */

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

@@ -18,7 +18,8 @@
 <script setup lang="ts">
 import { toRefs, watch, ref } from "vue";
 import defaultProps from "./props";
-import IProps, { CheckboxColumnsVo } from "./typing";
+import type IProps from "./typing";
+import type { CheckboxColumnsVo } from "./typing";
 import HyTag from "../hy-tag/hy-tag.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -32,16 +33,21 @@ const columns_1 = ref<CheckboxColumnsVo[]>();
 
 watch(
   () => modelValue.value,
-  (newValue: string | (string | number)[]) => {
+  (newValue: string | number | (string | number)[]) => {
     if (!columns.value.length) return;
     columns_1.value = columns.value.map((item) => {
-      item[fieldNames.value.checked] = newValue.includes(
-        item[fieldNames.value.value] as string
-      );
+      if (Array.isArray(newValue)) {
+        item[fieldNames.value.checked] = newValue.includes(
+          item[fieldNames.value.value] as string,
+        );
+      } else {
+        item[fieldNames.value.checked] =
+          newValue === item[fieldNames.value.value];
+      }
       return item;
     });
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const onCheckbox = ({ name }: { name: number }) => {
@@ -52,7 +58,7 @@ const onCheckbox = ({ name }: { name: number }) => {
       "update:modelValue",
       columns.value
         .filter((item) => item[fieldNames.value.checked])
-        .map((item) => item[fieldNames.value.value])
+        .map((item) => item[fieldNames.value.value]),
     );
   } else {
     emit("update:modelValue", columns.value[name][fieldNames.value.value]);
@@ -63,6 +69,7 @@ const onCheckbox = ({ name }: { name: number }) => {
 </script>
 
 <style lang="scss" scoped>
+//@import "./index.scss";
 .hy-check-button {
   display: grid;
   grid-template-columns: v-bind(col);