hy-app 0.1.4 → 0.2.0

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

@@ -1,7 +1,6 @@
 import type { CSSProperties } from "vue";
-import { IconConfig } from "../../config";
 
-export default interface IProps {
+export default interface HyNavbarProps {
   /**
    * @description 是否开启顶部安全区适配  （默认 true ）
    * */

package/components/hy-notice-bar/hy-notice-bar.vue

@@ -43,6 +43,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-notice-bar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { ref, toRefs } from "vue";
 import defaultProps from "./props";

package/components/hy-notice-bar/index.scss

@@ -2,7 +2,7 @@
 @use "../../libs/css/mixin.scss" as *;
 
 
-.hy-notice {
+@include b(notice) {
   @include flex;
   align-items: center;
   justify-content: space-between;
@@ -52,42 +52,42 @@
 }
 /* #endif */
 
-.hy-notice-bar {
+@include b(notice-bar) {
   overflow: hidden;
   padding: 9px 12px;
   flex: 1;
 }
 
-.hy-notice {
-  @include flex;
-  align-items: center;
-  justify-content: space-between;
-
-  &__left-icon {
-    align-items: center;
-    margin-right: 5px;
-  }
-
-  &__right-icon {
-    margin-left: 5px;
-    align-items: center;
-  }
-
-  &__swiper {
-    height: 16px;
-    @include flex;
-    align-items: center;
-    flex: 1;
-
-    &__item {
-      @include flex;
-      align-items: center;
-      overflow: hidden;
-
-      &__text {
-        font-size: 14px;
-        color: $hy-warning;
-      }
-    }
-  }
-}
+//.hy-notice {
+//  @include flex;
+//  align-items: center;
+//  justify-content: space-between;
+//
+//  &__left-icon {
+//    align-items: center;
+//    margin-right: 5px;
+//  }
+//
+//  &__right-icon {
+//    margin-left: 5px;
+//    align-items: center;
+//  }
+//
+//  &__swiper {
+//    height: 16px;
+//    @include flex;
+//    align-items: center;
+//    flex: 1;
+//
+//    &__item {
+//      @include flex;
+//      align-items: center;
+//      overflow: hidden;
+//
+//      &__text {
+//        font-size: 14px;
+//        color: $hy-warning;
+//      }
+//    }
+//  }
+//}

package/components/hy-notice-bar/typing.d.ts

@@ -2,7 +2,7 @@ import type { CSSProperties } from "vue";
 
 export type NoticeBarModeVo = "closable" | "link" | "";
 
-export default interface IProps {
+export default interface HyNoticeBarProps {
   /**
    * @description 显示的内容，数组
    * */

package/components/hy-number-step/hy-number-step.vue

@@ -24,13 +24,20 @@
       ]"
       :style="buttonStyle('minus')"
     >
-      <HyICon
-        :name="IconConfig.MINUS"
-        :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
-        size="15"
-        bold
-        :customStyle="iconStyle"
-      ></HyICon>
+      <HyIcon
+        :name="minusIcon?.name || IconConfig.MINUS"
+        :color="isDisabled('minus') ? '#c8c9cc' : minusIcon?.color"
+        :size="minusIcon?.size"
+        :bold="minusIcon?.bold"
+        :customPrefix="minusIcon?.customPrefix"
+        :imgMode="minusIcon?.imgMode"
+        :width="minusIcon?.width"
+        :height="minusIcon?.height"
+        :top="minusIcon?.top"
+        :stop="minusIcon?.stop"
+        :round="minusIcon?.round"
+        :customStyle="minusIcon?.customStyle"
+      ></HyIcon>
     </view>
     <!-- 减号 -->
 
@@ -99,18 +106,36 @@
       ]"
       :style="[buttonStyle('plus')]"
     >
-      <HyICon
-        :name="IconConfig.PLUS"
-        :color="isDisabled('plus') ? '#c8c9cc' : '#323233'"
-        size="15"
-        bold
-        :customStyle="iconStyle"
-      ></HyICon>
+      <HyIcon
+        :name="plusIcon?.name || IconConfig.PLUS"
+        :color="isDisabled('plus') ? '#c8c9cc' : plusIcon?.color"
+        :size="plusIcon?.size"
+        :bold="plusIcon?.bold"
+        :customPrefix="plusIcon?.customPrefix"
+        :imgMode="plusIcon?.imgMode"
+        :width="plusIcon?.width"
+        :height="plusIcon?.height"
+        :top="plusIcon?.top"
+        :stop="plusIcon?.stop"
+        :round="plusIcon?.round"
+        :customStyle="plusIcon?.customStyle"
+      ></HyIcon>
     </view>
     <!-- 加号 -->
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-number-step',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -125,7 +150,7 @@ import defaultProps from "./props";
 import type IProps from "./typing";
 import { addUnit } from "../../utils";
 import { IconConfig } from "../../config";
-import HyICon from "../hy-icon/hy-icon.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -221,9 +246,6 @@ const buttonStyle = computed(() => {
       color: color.value,
       borderRadius: buttonRadius.value,
     };
-    if (isDisabled.value(type)) {
-      style.backgroundColor = "#f7f8fa";
-    }
     return style;
   };
 });

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

@@ -1,19 +1,26 @@
 @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;
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(number-box) {
+      color: $hy-dark-color;
+      &__input,
+      &__plus,
+      &__minus {
+        background-color: $hy-dark-background--empty;
+        &--disabled {
+          color: $hy-dark-text-disabled;
+          background-color: $hy-dark-bg-disabled;
+        }
+      }
+    }
+  }
+}
+
 
-.hy-number-box {
+@include b(number-box) {
   @include flex(row);
   align-items: center;
 
@@ -23,8 +30,10 @@ $u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
     /* #endif */
   }
 
+  &__input,
   &__plus,
   &__minus {
+    background-color: #EBECEE;
     width: 35px;
     @include flex;
     justify-content: center;
@@ -34,38 +43,38 @@ $u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
     /* #endif */
 
     &--hover {
-      background-color: $u-numberBox-hover-bgColor !important;
+      background-color: $hy-light-background-hover;
     }
 
     &--disabled {
-      color: $u-numberBox-disabled-color;
-      background-color: $u-numberBox-disabled-bgColor;
+      color: $hy-text-color-disable;
+      background-color: $hy-light-background-disabled;
     }
   }
 
   &__plus {
-    border-top-right-radius: $u-numberBox-plus-radius;
-    border-bottom-right-radius: $u-numberBox-plus-radius;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
 
   &__minus {
-    border-top-left-radius: $u-numberBox-minus-radius;
-    border-bottom-left-radius: $u-numberBox-minus-radius;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
   }
 
   &__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;
+    text-align: center;
+    font-size: 15px;
+    padding: 0;
+    margin: 0 2px;
     @include flex;
     align-items: center;
     justify-content: center;
 
     &--disabled {
-      color: $u-numberBox-input-disabled-color;
-      background-color: $u-numberBox-input-disabled-bgColor;
+      color: #c8c9cc;
+      background-color: #f2f3f5;
     }
   }
 }

package/components/hy-number-step/props.ts

@@ -14,12 +14,12 @@ const defaultProps: IProps = {
   showPlus: true,
   decimalLength: null,
   longPress: true,
-  color: "#323233",
+  color: "",
   buttonWidth: 30,
   buttonSize: 30,
-  buttonRadius: "0px",
-  bgColor: "#EBECEE",
-  inputBgColor: "#EBECEE",
+  buttonRadius: "",
+  bgColor: "",
+  inputBgColor: "",
   cursorSpacing: 100,
   disableMinus: false,
   disablePlus: false,

package/components/hy-number-step/typing.d.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "vue";
+import type HyIconProps from "../hy-icon/typing";
 
-export default interface IProps {
+export default interface HyNumberStepProps {
   /**
    * @description 用于双向绑定的值，初始化时设置设为默认min值(最小值)  （默认 0 ）
    * */
@@ -90,9 +91,13 @@ export default interface IProps {
    * */
   disablePlus?: boolean;
   /**
-   * @description 加减按钮图标的样式
+   * @description 减号按钮图标
    * */
-  iconStyle?: CSSProperties;
+  minusIcon?: Partial<HyIconProps>;
+  /**
+   * @description 加号按钮图标
+   * */
+  plusIcon?: Partial<HyIconProps>;
   /**
    * @description 迷你模式（默认 false ）
    * */

package/components/hy-overlay/index.scss

@@ -1,5 +1,7 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
 
-.hy-overlay {
+@include b(overlay) {
   position: fixed;
   top: 0;
   left: 0;

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyOverlayProps {
   /**
    * @description 是否显示遮罩（默认 false ）
    * */

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyParseProps {
   /**
    * @description 用于渲染的 html 字符串
    * */

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

@@ -8,12 +8,22 @@
       <slot>
         <HyInput
           v-model="inputLabelValue"
-          :disabled="disabled"
           :readonly="true"
-          :shape="shape"
-          :border="border"
-          :placeholder="placeholder"
-          :customStyle="customStyle"
+          :disabled="input?.disabled"
+          :disabledColor="input?.disabledColor"
+          :shape="input?.shape"
+          :border="input?.border"
+          :prefixIcon="input?.prefixIcon"
+          :suffixIcon="input?.suffixIcon"
+          :color="input?.color"
+          :fontSize="input?.fontSize"
+          :inputAlign="input?.inputAlign"
+          :placeholder="input?.placeholder || '请选择'"
+          :placeholderStyle="input?.placeholderStyle"
+          :placeholderClass="input?.placeholderClass"
+          :customStyle="
+            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
+          "
         ></HyInput>
         <div class="input-cover"></div>
       </slot>
@@ -60,6 +70,7 @@
           :style="{
             height: `${addUnit(visibleItemCount * itemHeight)}`,
           }"
+          maskStyle="backgroundImage: none;"
           @change="changeHandler"
         >
           <picker-view-column
@@ -98,6 +109,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, ref, toRefs, watch } from "vue";
 import { deepClone, sleep, addUnit } from "../../utils";
@@ -112,7 +134,6 @@ import HyPopup from "../hy-popup/hy-popup.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
-  disabled,
   keyName,
   closeOnClickOverlay,
   hasInput,
@@ -120,6 +141,7 @@ const {
   modelValue,
   columns,
   separator,
+  input,
 } = toRefs(props);
 const emit = defineEmits([
   "update:show",
@@ -157,7 +179,7 @@ const setColumns = (columns: any[]) => {
  * */
 watch(
   () => defaultIndex.value,
-  (newValue, oldValue) => {
+  (newValue) => {
     setIndexs(newValue, true);
   },
 );
@@ -232,7 +254,7 @@ const inputValue = computed(() => {
  * @description 显示
  * */
 const onShowByClickInput = () => {
-  if (!disabled.value) {
+  if (!input.value.disabled) {
     showByClickInput.value = !showByClickInput.value;
   }
 };

package/components/hy-picker/index.scss

@@ -1,7 +1,8 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-picker {
+
+@include b(picker) {
   position: relative;
   &-input {
     position: relative;
@@ -24,6 +25,10 @@
       font-size: $hy-font-size-subtitle;
       color: $hy-color-subtitle;
     }
+
+    &--right {
+      color: $hy-primary;
+    }
   }
 
   &__view {
@@ -41,7 +46,6 @@
         /* #ifndef APP-NVUE */
         display: block;
         /* #endif */
-        color: #303133ff;
 
         &--disabled {
           /* #ifndef APP-NVUE */
@@ -53,7 +57,7 @@
     }
   }
 
-  &--loading {
+  @include m(loading) {
     position: absolute;
     top: 0;
     right: 0;

package/components/hy-picker/props.ts

@@ -2,7 +2,6 @@ import type IProps from "./typing";
 
 const defaultProps: IProps = {
   modelValue: "",
-  disabled: false,
   show: false,
   popupMode: "bottom",
   separator: "/",
@@ -14,7 +13,7 @@ const defaultProps: IProps = {
   cancelText: "取消",
   confirmText: "确定",
   cancelColor: "#909193",
-  confirmColor: "#3c9cff",
+  confirmColor: "",
   visibleItemCount: 5,
   keyName: "text",
   closeOnClickOverlay: false,
@@ -22,10 +21,8 @@ const defaultProps: IProps = {
   immediateChange: true,
   zIndex: 10076,
   hasInput: false,
-  placeholder: "请选择",
+  input: {},
   toolbarRightSlot: false,
-  shape: "square",
-  border: "surround",
 };
 
 export default defaultProps;

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from "vue";
+import type HyInputProps from "../hy-input/typing";
 
 interface PickerColumnVo extends AnyObject {
   /**
@@ -11,7 +12,7 @@ interface PickerColumnVo extends AnyObject {
   text?: string;
 }
 
-export default interface IProps {
+export default interface HyPickerProps {
   /**
    * @description 显示到输入框值
    * */
@@ -24,10 +25,6 @@ export default interface IProps {
    * @description 是否显示弹窗（默认 false ）
    * */
   show?: boolean;
-  /**
-   * @description 是否禁用输入框（hasInput为true可以设置）
-   * */
-  disabled?: boolean;
   /**
    * @description 弹窗弹出模式
    * */
@@ -97,21 +94,13 @@ export default interface IProps {
    * */
   hasInput?: boolean;
   /**
-   * @description 输入框默认占位内容（hasInput为true可以设置）
+   * @description 输入框集合属性
    * */
-  placeholder?: string;
+  input?: Partial<HyInputProps>;
   /**
    * @description 是否自定义选择器nav左边内容
    * */
   toolbarRightSlot?: boolean;
-  /**
-   * @description 输入框形状
-   * */
-  shape?: HyApp.ShapeType;
-  /**
-   * @description 输入框边框
-   * */
-  border?: HyApp.BorderType;
   /**
    * @description 自定义输入框外部样式
    * */

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

@@ -42,6 +42,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-popup',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, ref, toRefs, watch } from "vue";
 import defaultProps from "./props";

package/components/hy-popup/index.scss

@@ -1,8 +1,17 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
+/* 暗色主题 */
+@include b(theme) {
+  @include m(dark) {
+    @include b(popup__content) {
+      background-color: $hy-dark-background--2;
+      color: $hy-dark-color;
+    }
+  }
+}
 
-.hy-popup {
+@include b(popup) {
   flex: 1;
 
   &__content {

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyPopupProps {
   /**
    * @description 是否展示弹窗 (默认 false )
    * */

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

@@ -16,6 +16,17 @@
   </text>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-price',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";

package/components/hy-price/index.scss

@@ -1,4 +1,7 @@
-.hy-price {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(price) {
   font-size: 32rpx;
   font-weight: 500;
   margin-top: 5px;

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyPriceProps {
   /**
    * @description 传入金额值
    * */