hy-app 0.1.4 → 0.2.0

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

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

package/components/hy-qrcode/index.scss

@@ -1,4 +1,7 @@
-.hy-qrcode {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(qrcode) {
   &__loading {
     display: flex;
     justify-content: center;

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

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

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

@@ -49,6 +49,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-radio',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import type IProps from "./typing";
 import type { CheckboxColumnsVo } from "../hy-check-button/typing";
@@ -81,6 +92,7 @@ const {
   borderBottom,
   placement,
   iconColor,
+  labelDisabled,
 } = toRefs(props);
 const emit = defineEmits(["change", "update:modelValue"]);
 
@@ -153,8 +165,11 @@ const iconClasses = computed(() => {
     if (isDisabled(temp?.disabled)) {
       classes.push("hy-radio__icon-wrap--disabled");
     }
-    if (temp[fieldNames.value.checked] && isDisabled(temp?.disabled)) {
-      classes.push("hy-radio__icon-wrap--disabled--checked");
+    if (temp[fieldNames.value.checked]) {
+      classes.push("hy-radio__icon-wrap--checked");
+      if (isDisabled(temp?.disabled)) {
+        classes.push("hy-radio__icon-wrap--disabled--checked");
+      }
     }
     return classes;
   };
@@ -170,7 +185,9 @@ const iconWrapStyle = computed(() => {
     style.backgroundColor =
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
-        : "#ffffff";
+        : !isDisabled(temp?.disabled)
+          ? "#ffffff"
+          : "";
     style.borderColor =
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
@@ -190,9 +207,12 @@ const iconClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
     setRadioCheckedStatus(temp);
   }
 };
+/**
+ * @description 点击整体
+ * */
 const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
   e.stopPropagation();
-  if (!isDisabled(temp?.disabled)) {
+  if (!isDisabled(temp?.disabled) || !labelDisabled.value) {
     setRadioCheckedStatus(temp);
   }
 };
@@ -201,7 +221,7 @@ const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
  * */
 const labelClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
   e.stopPropagation();
-  if (!isDisabled(temp?.disabled)) {
+  if (!isDisabled(temp?.disabled) || !labelDisabled.value) {
     setRadioCheckedStatus(temp);
   }
 };

package/components/hy-radio/index.scss

@@ -1,7 +1,16 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-radio {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(radio__label-wrap) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(radio) {
   @include flex(row);
   overflow: hidden;
   flex-direction: row;
@@ -64,17 +73,19 @@
     }
 
     &--checked {
-      color: $hy-text-color-inverse;
+      color: #FFFFFF;
       background-color: $hy-primary;
       border-color: $hy-primary;
     }
 
     &--disabled {
-      background-color: $hy-color-disable-bg !important;
+      background-color: $hy-light-background-disabled;
     }
 
     &--disabled--checked {
-      color: $hy-color-disable-icon !important;
+      background-color: $hy-primary;
+      border-color: $hy-primary;
+      opacity: 0.5;
     }
   }
 
@@ -82,7 +93,8 @@
     /* #ifndef APP-NVUE */
     word-wrap: break-word;
     /* #endif */
-    color: $hy-text-color;
+    color:
+$hy-light-color;
     font-size: $hy-font-size-base;
     margin-right: $hy-border-margin-padding-sm;
 

package/components/hy-radio/props.ts

@@ -1,5 +1,4 @@
 import type IProps from "./typing";
-import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
   modelValue: "",
@@ -12,7 +11,7 @@ const defaultProps: IProps = {
   shape: "circle",
   size: "medium",
   disabled: false,
-  activeColor: ColorConfig.primary,
+  activeColor: "",
   inactiveColor: "#c8c9cc",
   iconSize: "20",
   iconColor: "",
@@ -21,7 +20,7 @@ const defaultProps: IProps = {
   label: "",
   labelSize: "",
   labelColor: "",
-  labelDisabled: "",
+  labelDisabled: false,
   placement: "row",
 };
 

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

@@ -1,7 +1,7 @@
 import type { CSSProperties } from "vue";
 import { CheckboxColumnsVo, IFieldNames } from "../hy-check-button/typing";
 
-export default interface IProps {
+export default interface HyRadioProps {
   /**
    * @description 双向绑定值，数组类型
    * */
@@ -73,7 +73,7 @@ export default interface IProps {
   /**
    * @description 是否禁止点击提示语选中复选框
    * */
-  labelDisabled?: string;
+  labelDisabled?: boolean;
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-rate/hy-rate.vue

@@ -62,6 +62,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-rate',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { addUnit, getRect, guid, range, sleep } from "../../utils";
 import { ref, watch, toRefs, onMounted, getCurrentInstance } from "vue";

package/components/hy-rate/index.scss

@@ -1,6 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-rate {
+@include b(rate) {
   @include flex;
   align-items: center;
   margin: 0;
@@ -26,8 +26,8 @@
     }
   }
 }
-.hy-icon {
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-}
+//.hy-icon {
+//  /* #ifndef APP-NVUE */
+//  box-sizing: border-box;
+//  /* #endif */
+//}

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyRateProps {
   /**
    * @description v-model绑定的值
    * */

package/components/hy-read-more/hy-read-more.vue

@@ -19,7 +19,10 @@
       </view>
     </view>
     <view
-      class="hy-read-more__toggle"
+      :class="[
+        'hy-read-more__toggle',
+        status !== 'open' && 'hy-read-more__toggle--mask',
+      ]"
       :style="[innerShadowStyle]"
       v-if="isLongContent"
     >
@@ -47,8 +50,26 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-read-more',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
-import {computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance} from "vue";
+import {
+  computed,
+  type CSSProperties,
+  toRefs,
+  ref,
+  onMounted,
+  getCurrentInstance,
+} from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import { addUnit, getRect, guid, sleep } from "../../utils";

package/components/hy-read-more/index.scss

@@ -1,10 +1,24 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-read-more {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(read-more) {
+      color: $hy-dark-color;
+      &__toggle--mask {
+        background-image:
+                linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, $hy-dark-background 80%);
+        padding-top: 100px;
+        margin-top: -100px;
+      }
+    }
+  }
+}
+
+@include b(read-more) {
   &__content {
     overflow: hidden;
-    color: $hy-color-paragraph;
     font-size: 15px;
     text-align: left;
     transition: height 0.3s ease;
@@ -15,11 +29,24 @@
     justify-content: center;
     position: relative;
 
+    &--mask {
+      background-image:
+              linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, #fff 80%);
+      padding-top: 100px;
+      margin-top: -100px;
+    }
+
     &__text {
       @include flex;
       align-items: center;
       justify-content: center;
       margin-top: 5px;
+      color: $hy-primary;
+      :deep() {
+        @include b(icon) {
+          color: $hy-primary;
+        }
+      }
     }
   }
 }

package/components/hy-read-more/props.ts

@@ -5,16 +5,11 @@ const defaultProps: IProps = {
   toggle: true,
   closeText: "展开阅读全文",
   openText: "收起",
-  color: "#2979ff",
+  color: "",
   fontSize: 14,
   textIndent: "2em",
   name: "",
-  shadowStyle: {
-    backgroundImage:
-      "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
-    paddingTop: "100px",
-    marginTop: "-100px",
-  },
+  shadowStyle: {},
 };
 
 export default defaultProps;

package/components/hy-read-more/typing.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyReadMoreProps {
   /**
    * @description 内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
    * */

package/components/hy-scroll-list/hy-scroll-list.vue

@@ -19,11 +19,7 @@
       <slot></slot>
     </scroll-view>
     <!--	#endif		-->
-    <view
-      class="hy-scroll-list__indicator"
-      v-if="indicator"
-      :style="indicatorStyle"
-    >
+    <view class="hy-scroll-list__indicator" v-if="indicator">
       <view class="hy-scroll-list__indicator__line" :style="lineStyle">
         <view
           class="hy-scroll-list__indicator__line__bar"
@@ -36,11 +32,29 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-scroll-list',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
-import {computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance} from "vue";
+import {
+  computed,
+  type CSSProperties,
+  toRefs,
+  ref,
+  onMounted,
+  getCurrentInstance,
+} from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
-import { addUnit, getRect, sleep } from "../../utils";
+import { addUnit, colorGradient, getRect, sleep } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -59,6 +73,9 @@ const scrollInfo = ref({
 const scrollWidth = ref(0);
 const barLeft = ref(0);
 
+/**
+ * @description 线条样式
+ * */
 const barStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {};
   style.transform = `translateX(${barLeft.value}px)`;
@@ -67,12 +84,17 @@ const barStyle = computed<CSSProperties>(() => {
   style.backgroundColor = indicatorActiveColor.value;
   return style;
 });
-
+/**
+ * @description 轨道样式
+ * */
 const lineStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {};
   // 指示器整体的样式，需要设置其宽度和背景色
   style.width = addUnit(indicatorWidth.value);
-  style.backgroundColor = indicatorColor.value;
+  style.backgroundColor =
+    indicatorColor.value ||
+    (indicatorActiveColor.value &&
+      colorGradient(indicatorActiveColor.value)[90]);
   return style;
 });
 

package/components/hy-scroll-list/index.scss

@@ -1,7 +1,14 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-scroll-list {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+
+  }
+}
+
+@include b(scroll-list) {
   padding-bottom: $hy-border-margin-padding-base;
 
   &__scroll-view {
@@ -23,11 +30,13 @@
       height: 4px;
       border-radius: $hy-border-radius-semicircle;
       overflow: hidden;
+      background-color: var(--hy-theme-color--light, $hy-border-color);
 
       &__bar {
         width: 20px;
         height: 4px;
         border-radius: $hy-border-radius-semicircle;
+        background-color: $hy-primary;
       }
     }
   }

package/components/hy-scroll-list/props.ts

@@ -5,8 +5,8 @@ const defaultProps: IProps = {
   indicatorWidth: 50,
   indicatorBarWidth: 20,
   indicator: true,
-  indicatorColor: "#f2f2f2",
-  indicatorActiveColor: ColorConfig.primary,
+  indicatorColor: "",
+  indicatorActiveColor: "",
 };
 
 export default defaultProps;

package/components/hy-scroll-list/typing.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyScrollListProps {
   /**
    * @description 指示器的整体宽度 (默认 50 )
    * */

package/components/hy-search/hy-search.vue

@@ -24,10 +24,19 @@
       </template>
       <view class="hy-search__content__icon">
         <HyIcon
+          :name="searchIcon?.name || IconConfig.SEARCH"
+          :size="searchIcon?.size"
+          :color="searchIcon?.color || color"
+          :bold="searchIcon?.bold"
+          :customPrefix="searchIcon?.customPrefix"
+          :imgMode="searchIcon?.imgMode"
+          :width="searchIcon?.width"
+          :height="searchIcon?.height"
+          :top="searchIcon?.top"
+          :stop="searchIcon?.stop"
+          :round="searchIcon?.round"
+          :customStyle="searchIcon?.customStyle"
           @tap="clickIcon"
-          :size="searchIconSize"
-          :name="IconConfig.SEARCH"
-          :color="searchIconColor ? searchIconColor : color"
         ></HyIcon>
       </view>
       <input
@@ -83,6 +92,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-search',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, nextTick, toRefs, ref, watch } from "vue";
 import defaultProps from "./props";

package/components/hy-search/index.scss

@@ -10,7 +10,25 @@ $hy-search-close-size: 20px !default;
 }
 /* #endif */
 
-.hy-search {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(search) {
+      color: $hy-dark-color;
+      &__content {
+        background-color: $hy-dark-background--empty;
+        &__input {
+          color: $hy-dark-color;
+        }
+      }
+      &__action {
+        color: $hy-dark-color;
+      }
+    }
+  }
+}
+
+@include b(search) {
   @include flex(row);
   align-items: center;
   flex: 1;
@@ -32,7 +50,8 @@ $hy-search-close-size: 20px !default;
     }
 
     &__label {
-      color: $hy-text-color;
+      color:
+$hy-light-color;
       font-size: $hy-font-size-base;
       margin: 0 4px;
     }
@@ -55,7 +74,8 @@ $hy-search-close-size: 20px !default;
       font-size: $hy-font-size-base;
       line-height: 1;
       margin: 0 $hy-border-margin-padding-sm;
-      color: $hy-text-color;
+      color:
+$hy-light-color;
 
       &--placeholder {
         color: $hy-text-color-grey;
@@ -65,7 +85,8 @@ $hy-search-close-size: 20px !default;
 
   &__action {
     font-size: $hy-font-size-base;
-    color: $hy-text-color;
+    color:
+$hy-light-color;
     width: 0;
     overflow: hidden;
     transition-property: width;

package/components/hy-search/props.ts

@@ -3,7 +3,7 @@ import type IProps from "./typing";
 const defaultProps: IProps = {
   modelValue: "",
   shape: "circle",
-  bgColor: "#f2f2f2",
+  bgColor: "",
   placeholder: "请输入关键字",
   clear: true,
   focus: false,
@@ -12,11 +12,9 @@ const defaultProps: IProps = {
   inputAlign: "left",
   disabled: false,
   borderColor: "transparent",
-  searchIconColor: "#909399",
-  searchIconSize: 18,
-  color: "#606266",
+  color: "",
   placeholderColor: "#909399",
-  searchIcon: "search",
+  searchIcon: {},
   margin: "0",
   animation: false,
   maxlength: "-1",

package/components/hy-search/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 HySearchProps {
   /**
    * @description 输入框初始值
    * */
@@ -40,11 +41,11 @@ export default interface IProps {
   /**
    * @description 输入框内容水平对齐方式 （默认 'left' ）
    * */
-  inputAlign?: "center" | HyApp.LeftRightType;
+  inputAlign?: HyApp.RowCenterType;
   /**
    * @description 自定义输入框样式，对象形式
    * */
-  inputStyle?: Record<string, any>;
+  inputStyle?: CSSProperties;
   /**
    * @description 是否启用输入框（默认 false ）
    * */
@@ -53,14 +54,6 @@ export default interface IProps {
    * @description 边框颜色，配置了颜色，才会有边框 (默认 'transparent' )
    * */
   borderColor?: string;
-  /**
-   * @description 搜索图标的颜色，默认同输入框字体颜色 (默认 '#909399' )
-   * */
-  searchIconColor?: string;
-  /**
-   * @description 搜索图标的字体，默认18
-   * */
-  searchIconSize?: number;
   /**
    * @description 输入框字体颜色（默认 '#606266' ）
    * */
@@ -70,9 +63,9 @@ export default interface IProps {
    * */
   placeholderColor?: string;
   /**
-   * @description 输入框左边的图标，可以为图标名称或图片路径  (默认 'search' )
+   * @description 输入框左边的图标属性集合，可以为图标名称或图片路径  (默认 'search' )
    * */
-  searchIcon?: string;
+  searchIcon?: Partial<HyIconProps>;
   /**
    * @description 组件与其他上下左右之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )
    * */

package/components/hy-slider/hy-slider.vue

@@ -147,6 +147,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-slider',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,