hy-app 0.1.2 → 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

@@ -163,141 +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;
-
-      /* 大 */
-      &__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 */
-  }
-}
+@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-check-button/hy-check-button.vue

@@ -69,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);

package/components/hy-check-button/index.scss

@@ -0,0 +1,5 @@
+.hy-check-button {
+  display: grid;
+  grid-template-columns: v-bind(col);
+  gap: v-bind(gap);
+}

package/components/hy-checkbox/hy-checkbox.vue

@@ -7,7 +7,7 @@
         :style="checkboxStyle"
         :class="[
           `hy-checkbox-label--${iconPlacement}`,
-          borderBottom && placement === 'column' && 'hy-border-bottom',
+          borderBottom && placement === 'column' && 'hy-border__bottom',
         ]"
       >
         <view
@@ -212,98 +212,5 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-checkbox {
-  &-group {
-    &--row {
-      /* #ifndef APP-NVUE */
-      display: flex;
-      /* #endif */
-      flex-flow: row wrap;
-    }
-
-    &--column {
-      @include flex(column);
-    }
-  }
-
-  /* #ifndef APP-NVUE */
-  @include flex(row);
-  /* #endif */
-  overflow: hidden;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 5px;
-  margin-top: 5px;
-
-  &-label--left {
-    flex-direction: row;
-  }
-
-  &-label--right {
-    flex-direction: row-reverse;
-    justify-content: space-between;
-  }
-
-  &__icon-wrap {
-    /* #ifndef APP-NVUE */
-    box-sizing: border-box;
-    // nvue下，border-color过渡有问题
-    transition-property: border-color, background-color, color;
-    transition-duration: 0.2s;
-    /* #endif */
-    @include flex;
-    align-items: center;
-    justify-content: center;
-    color: transparent;
-    text-align: center;
-    margin-right: $hy-border-margin-padding-sm;
-    border: $hy-border-line;
-
-    /* #ifdef MP-TOUTIAO */
-    // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
-    &__icon {
-      line-height: 0;
-    }
-
-    /* #endif */
-
-    &--circle {
-      border-radius: 50%;
-    }
-
-    &--square {
-      border-radius: 3px;
-    }
-
-    &--checked {
-      color: $hy-text-color-inverse;
-      background-color: $hy-primary;
-      border-color: $hy-primary;
-    }
-
-    &--disabled {
-      background-color: $hy-color-disable-bg !important;
-    }
-
-    &--disabled--checked {
-      color: $hy-color-disable-icon !important;
-    }
-  }
-
-  &__label-wrap {
-    /* #ifndef APP-NVUE */
-    word-wrap: break-word;
-    /* #endif */
-    color: $hy-text-color;
-    font-size: $hy-font-size-base;
-    margin-right: $hy-border-margin-padding-sm;
-
-    &--disabled {
-      color: $hy-text-color-disable;
-    }
-  }
-}
+@import "./index.scss";
 </style>