hy-app 0.1.2 → 0.1.3

package/components/hy-number-step/index.scss

@@ -0,0 +1,71 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+$u-numberBox-hover-bgColor: #e6e6e6 !default;
+$u-numberBox-disabled-color: #c8c9cc !default;
+$u-numberBox-disabled-bgColor: #f7f8fa !default;
+$u-numberBox-plus-radius: 4px !default;
+$u-numberBox-minus-radius: 4px !default;
+$u-numberBox-input-text-align: center !default;
+$u-numberBox-input-font-size: 15px !default;
+$u-numberBox-input-padding: 0 !default;
+$u-numberBox-input-margin: 0 2px !default;
+$u-numberBox-input-disabled-color: #c8c9cc !default;
+$u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
+
+.hy-number-box {
+  @include flex(row);
+  align-items: center;
+
+  &__slot {
+    /* #ifndef APP-NVUE */
+    touch-action: none;
+    /* #endif */
+  }
+
+  &__plus,
+  &__minus {
+    width: 35px;
+    @include flex;
+    justify-content: center;
+    align-items: center;
+    /* #ifndef APP-NVUE */
+    touch-action: none;
+    /* #endif */
+
+    &--hover {
+      background-color: $u-numberBox-hover-bgColor !important;
+    }
+
+    &--disabled {
+      color: $u-numberBox-disabled-color;
+      background-color: $u-numberBox-disabled-bgColor;
+    }
+  }
+
+  &__plus {
+    border-top-right-radius: $u-numberBox-plus-radius;
+    border-bottom-right-radius: $u-numberBox-plus-radius;
+  }
+
+  &__minus {
+    border-top-left-radius: $u-numberBox-minus-radius;
+    border-bottom-left-radius: $u-numberBox-minus-radius;
+  }
+
+  &__input {
+    position: relative;
+    text-align: $u-numberBox-input-text-align;
+    font-size: $u-numberBox-input-font-size;
+    padding: $u-numberBox-input-padding;
+    margin: $u-numberBox-input-margin;
+    @include flex;
+    align-items: center;
+    justify-content: center;
+
+    &--disabled {
+      color: $u-numberBox-input-disabled-color;
+      background-color: $u-numberBox-input-disabled-bgColor;
+    }
+  }
+}

package/components/hy-overlay/hy-overlay.vue

@@ -1,7 +1,7 @@
 <template>
   <HyTransition
     :show="show"
-    custom-class="u-overlay"
+    custom-class="hy-overlay"
     :duration="duration"
     :custom-style="overlayStyle"
     @click="clickHandler"
@@ -38,17 +38,5 @@ const clickHandler = () => {
 </script>
 
 <style lang="scss" scoped>
-$u-overlay-top: 0 !default;
-$u-overlay-left: 0 !default;
-$u-overlay-width: 100% !default;
-$u-overlay-height: 100% !default;
-$u-overlay-background-color: rgba(0, 0, 0, 0.7) !default;
-.u-overlay {
-  position: fixed;
-  top: $u-overlay-top;
-  left: $u-overlay-left;
-  width: $u-overlay-width;
-  height: $u-overlay-height;
-  background-color: $u-overlay-background-color;
-}
+@import "./index.scss";
 </style>

package/components/hy-overlay/index.scss

@@ -0,0 +1,9 @@
+
+.hy-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+}

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

@@ -429,72 +429,5 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-picker {
-  position: relative;
-  &-input {
-    position: relative;
-    .input-cover {
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 1;
-    }
-  }
-
-  &__title {
-    @include flex();
-    justify-content: space-between;
-    padding: $hy-border-margin-padding-lg;
-    &--center {
-      font-size: $hy-font-size-subtitle;
-      color: $hy-color-subtitle;
-    }
-  }
-
-  &__view {
-    &__column {
-      @include flex;
-      flex: 1;
-      justify-content: center;
-
-      &__item {
-        @include flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 16px;
-        text-align: center;
-        /* #ifndef APP-NVUE */
-        display: block;
-        /* #endif */
-        color: #303133ff;
-
-        &--disabled {
-          /* #ifndef APP-NVUE */
-          cursor: not-allowed;
-          /* #endif */
-          opacity: 0.35;
-        }
-      }
-    }
-  }
-
-  &--loading {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    @include flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.87);
-    z-index: 1000;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-picker/index.scss

@@ -0,0 +1,68 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-picker {
+  position: relative;
+  &-input {
+    position: relative;
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+  }
+
+  &__title {
+    @include flex();
+    justify-content: space-between;
+    padding: $hy-border-margin-padding-lg;
+    &--center {
+      font-size: $hy-font-size-subtitle;
+      color: $hy-color-subtitle;
+    }
+  }
+
+  &__view {
+    &__column {
+      @include flex;
+      flex: 1;
+      justify-content: center;
+
+      &__item {
+        @include flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        text-align: center;
+        /* #ifndef APP-NVUE */
+        display: block;
+        /* #endif */
+        color: #303133ff;
+
+        &--disabled {
+          /* #ifndef APP-NVUE */
+          cursor: not-allowed;
+          /* #endif */
+          opacity: 0.35;
+        }
+      }
+    }
+  }
+
+  &--loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    @include flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.87);
+    z-index: 1000;
+  }
+}

package/components/hy-popup/hy-popup.vue

@@ -192,78 +192,5 @@ const clickHandler = () => {
 </script>
 
 <style lang="scss" scoped>
-$u-popup-flex: 1 !default;
-$u-popup-content-background-color: #fff !default;
-
-.hy-popup {
-  flex: $u-popup-flex;
-
-  &__content {
-    background-color: $u-popup-content-background-color;
-    position: relative;
-
-    &--round-top {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 10px;
-    }
-
-    &--round-left {
-      border-top-left-radius: 0;
-      border-top-right-radius: 10px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 10px;
-    }
-
-    &--round-right {
-      border-top-left-radius: 10px;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 0;
-    }
-
-    &--round-bottom {
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--round-center {
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
-      border-bottom-left-radius: 10px;
-      border-bottom-right-radius: 10px;
-    }
-
-    &__close {
-      position: absolute;
-
-      &--hover {
-        opacity: 0.4;
-      }
-    }
-
-    &__close--top-left {
-      top: 15px;
-      left: 15px;
-    }
-
-    &__close--top-right {
-      top: 15px;
-      right: 15px;
-    }
-
-    &__close--bottom-left {
-      bottom: 15px;
-      left: 15px;
-    }
-
-    &__close--bottom-right {
-      right: 15px;
-      bottom: 15px;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-popup/index.scss

@@ -0,0 +1,60 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+.hy-popup {
+  flex: 1;
+
+  &__content {
+    background-color: #fff;
+    position: relative;
+
+    &--round-top {
+      border-radius: 0 0 $hy-border-radius-lg $hy-border-radius-lg;
+    }
+
+    &--round-left {
+      border-radius: 0 $hy-border-radius-lg $hy-border-radius-lg 0;
+    }
+
+    &--round-right {
+      border-radius: $hy-border-radius-lg 0 0 $hy-border-radius-lg;
+    }
+
+    &--round-bottom {
+      border-radius: $hy-border-radius-lg $hy-border-radius-lg 0 0;
+    }
+
+    &--round-center {
+      border-radius: $hy-border-radius-lg;
+    }
+
+    &__close {
+      position: absolute;
+
+      &--hover {
+        opacity: 0.4;
+      }
+    }
+
+    &__close--top-left {
+      top: $hy-border-margin-padding-lg;
+      left: $hy-border-margin-padding-lg;
+    }
+
+    &__close--top-right {
+      top: $hy-border-margin-padding-lg;
+      right: $hy-border-margin-padding-lg;
+    }
+
+    &__close--bottom-left {
+      bottom: $hy-border-margin-padding-lg;
+      left: $hy-border-margin-padding-lg;
+    }
+
+    &__close--bottom-right {
+      right: $hy-border-margin-padding-lg;
+      bottom: $hy-border-margin-padding-lg;
+    }
+  }
+}

package/components/hy-price/hy-price.vue

@@ -72,15 +72,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" scoped>
-.hy-price {
-  font-size: 32rpx;
-  font-weight: 500;
-  margin-top: 5px;
-  &__prefix {
-    font-size: 24rpx;
-  }
-  &__decimal {
-    font-size: 24rpx;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-price/index.scss

@@ -0,0 +1,11 @@
+.hy-price {
+  font-size: 32rpx;
+  font-weight: 500;
+  margin-top: 5px;
+  &__prefix {
+    font-size: 24rpx;
+  }
+  &__decimal {
+    font-size: 24rpx;
+  }
+}

package/components/hy-qrcode/hy-qrcode.vue

@@ -14,7 +14,7 @@
         class="hy-qrcode__loading"
         :style="{ width: addUnit(size), height: addUnit(size) }"
       >
-        <HyIcon :name="IconConfig.LOADING" is-rotate></HyIcon>
+        <HyLoading></HyLoading>
       </view>
     </view>
   </view>
@@ -23,11 +23,14 @@
 <script setup lang="ts">
 import { getCurrentInstance, toRefs, ref, onMounted } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import QRCode from "./qrcode.js";
-import { addUnit } from "../../utils";
+import { addUnit, error } from "../../utils";
 import { IconConfig } from "../../config";
+
+// 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { text, allowPreview } = toRefs(props);
@@ -39,12 +42,13 @@ const qrcode = ref("");
 const result = ref("");
 
 onMounted(() => {
+  console.log(111);
   initQrCode();
 });
 
 const initQrCode = () => {
   if (text.value) {
-    loading.value;
+    loading.value = true;
     qrcode.value = new QRCode({
       context: instance, // 上下文环境
       canvasId: props.cid, // canvas-id
@@ -62,14 +66,10 @@ const initQrCode = () => {
       cbResult: function (res: any) {
         // 生成二维码的回调
         _result(res);
-      }
+      },
     });
   } else {
-    uni.showToast({
-      title: "二维码内容不能为空",
-      icon: "none",
-      duration: 2000
-    });
+    error("二维码内容不能为空");
   }
 };
 
@@ -87,9 +87,9 @@ const _saveCode = () => {
         uni.showToast({
           title: "二维码保存成功",
           icon: "success",
-          duration: 2000
+          duration: 2000,
         });
-      }
+      },
     });
   }
 };
@@ -114,8 +114,8 @@ const preview = (e) => {
         },
         fail: function (err) {
           console.error(err.errMsg);
-        }
-      }
+        },
+      },
     });
   }
   emit("preview", result.value, e);
@@ -127,27 +127,5 @@ const onLongPress = () => {
 </script>
 
 <style lang="scss" scoped>
-.hy-qrcode {
-  &__loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #f7f7f7;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-  &__content {
-    position: relative;
-
-    &__canvas {
-      position: fixed;
-      top: -99999rpx;
-      left: -99999rpx;
-      z-index: -99999;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-qrcode/index.scss

@@ -0,0 +1,23 @@
+.hy-qrcode {
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7f7f7;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  &__content {
+    position: relative;
+
+    &__canvas {
+      position: fixed;
+      top: -99999rpx;
+      left: -99999rpx;
+      z-index: -99999;
+    }
+  }
+}

package/components/hy-qrcode/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   cid: "hy-qrcode-canvas" + Math.random().toString(),
@@ -14,7 +14,7 @@ const defaultProps: IProps = {
   iconSize: 40,
   showLoading: true,
   loadingText: "二维码生成中",
-  allowPreview: false
+  allowPreview: false,
 };
 
 export default defaultProps;

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

@@ -1,8 +1,8 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
-   * @description 实例ID字符串(必须)
+   * @description 实例ID字符串(如果有多个二维码组件必须设置不一样的cid)
    * */
   cid?: string;
   /**

package/components/hy-radio/hy-radio.vue

@@ -7,7 +7,7 @@
         :style="radioStyle"
         :class="[
           `hy-radio-label--${iconPlacement}`,
-          borderBottom && placement === 'column' && 'hy-border-bottom',
+          borderBottom && placement === 'column' && 'hy-border__bottom',
         ]"
       >
         <view
@@ -229,104 +229,5 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-radio {
-  /* #ifndef APP-NVUE */
-  @include flex(row);
-  /* #endif */
-  overflow: hidden;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 5px;
-  margin-top: 5px;
-
-  &-group {
-    flex: 1;
-
-    &--row {
-      /* #ifndef APP-NVUE */
-      display: flex;
-      /* #endif */
-      flex-flow: row wrap;
-    }
-
-    &--column {
-      @include flex(column);
-      margin: $hy-border-margin-padding-lg 0;
-    }
-  }
-
-  &-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;
-    }
-  }
-}
-.hy-border-bottom {
-  border-bottom: $hy-border-line;
-}
+@import "./index.scss";
 </style>