hy-app 0.1.4 → 0.2.0

package/components/hy-card/index.scss

@@ -1,7 +1,17 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-card {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(card) {
+      color: $hy-dark-color;
+      background-color: $hy-dark-background--container;
+    }
+  }
+}
+
+@include b(card) {
   position: relative;
   overflow: hidden;
   font-size: 28rpx;
@@ -27,7 +37,6 @@
     }
 
     &--left {
-      color: #303133ff;
       display: flex;
 
       &__thumb {
@@ -36,8 +45,7 @@
 
       &__title {
         max-width: 400rpx;
-        height: 20px;
-        @include line-feed;
+        @include lineEllipsis;
       }
     }
 
@@ -46,12 +54,4 @@
       margin-left: 6rpx;
     }
   }
-
-  &__body {
-    color: $hy-bg-color;
-  }
-
-  &__foot {
-    color: $hy-text-color-grey;
-  }
 }

package/components/hy-card/props.ts

@@ -3,8 +3,8 @@ import type IProps from "./typing";
 const defaultProps: IProps = {
   full: false,
   title: "",
-  titleColor: "#303133",
-  titleSize: "15px",
+  titleColor: "",
+  titleSize: "18px",
   subTitle: "",
   subTitleColor: "#909399",
   subTitleSize: "13",

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyCardProps {
   /**
    * @description 卡片与屏幕两侧是否留空隙（默认false）
    * */

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

@@ -1,29 +1,27 @@
 <template>
   <view :style="customStyle" class="hy-cell">
     <view
-      class="hy-cell__title"
-      :style="{ borderBottom: titleBorder ? '1rpx solid #c8c7cc66' : '' }"
+      :class="['hy-cell--title', showVertical && 'hy-cell--title__vertical']"
       v-if="title || $slots['title']"
     >
       <slot name="title" :title="title">
-        <view class="hy-cell__title-nav">
-          <view
-            class="hy-cell__title-nav--ver"
-            :style="{ background: verticalColor }"
-            v-if="showVertical"
-          ></view>
-          <text class="hy-cell__title-nav--text">{{ title }}</text>
-        </view>
+        <text class="hy-cell--title__text">{{ title }}</text>
       </slot>
     </view>
-    <view class="hy-cell__body">
+    <view
+      class="hy-cell__body"
+      :style="{ 'border-radius': addUnit(borderRadius) }"
+    >
       <slot>
         <template v-for="(item, i) in list" :key="i">
           <view
             :class="ItemClass"
             :hover-class="containerClass(item)"
             :hover-stay-time="250"
-            :style="{ borderBottom: border ? '1rpx solid #c8c7cc66' : '' }"
+            :style="{
+              borderBottom:
+                border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
+            }"
             @tap="clickHandler($event, item, i)"
           >
             <view class="hy-cell__body--container__content">
@@ -31,8 +29,19 @@
                 <slot name="icon" :icon="item?.icon">
                   <HyIcon
                     :size="iconSize"
-                    :name="item?.icon"
-                    :color="disabled || item?.disabled ? '#c0c0c0' : ''"
+                    :name="item?.icon?.name"
+                    :color="
+                      disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color
+                    "
+                    :bold="item?.icon?.bold"
+                    :customPrefix="item?.icon?.customPrefix"
+                    :imgMode="item?.icon?.imgMode"
+                    :width="item?.icon?.width"
+                    :height="item?.icon?.height"
+                    :top="item?.icon?.top"
+                    :stop="item?.icon?.stop"
+                    :round="item?.icon?.round"
+                    :customStyle="item?.icon?.customStyle"
                   ></HyIcon>
                 </slot>
               </view>
@@ -86,10 +95,27 @@
             >
               <slot name="right-icon" :icon="item?.rightIcon || rightIcon">
                 <HyIcon
-                  :name="item?.rightIcon || rightIcon"
-                  :custom-style="rightIconStyle"
-                  :color="disabled || item?.disabled ? '#c0c0c0' : 'info'"
-                  :size="iconSize"
+                  :name="
+                    item?.rightIcon?.name || rightIcon?.name || IconConfig.RIGHT
+                  "
+                  :color="
+                    disabled || item?.disabled
+                      ? '#c0c0c0'
+                      : item?.rightIcon?.color || rightIcon?.color
+                  "
+                  :bold="item?.rightIcon?.bold || rightIcon?.bold"
+                  :customPrefix="
+                    item?.rightIcon?.customPrefix || rightIcon?.customPrefix
+                  "
+                  :imgMode="item?.rightIcon?.imgMode || rightIcon?.imgMode"
+                  :width="item?.rightIcon?.width || rightIcon?.width"
+                  :height="item?.rightIcon?.height || rightIcon?.height"
+                  :top="item?.rightIcon?.top || rightIcon?.name"
+                  :stop="item?.rightIcon?.stop || rightIcon?.stop"
+                  :round="item?.rightIcon?.round || rightIcon?.round"
+                  :customStyle="
+                    item?.rightIcon?.customStyle || rightIcon?.customStyle
+                  "
                 ></HyIcon>
               </slot>
             </view>
@@ -102,16 +128,28 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-cell",
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
 <script setup lang="ts">
 import defaultProps from "./props";
 import type IProps from "./typing";
 import type { CellContentVo } from "./typing";
+import { IconConfig } from "../../config";
 
 import HyIcon from "../hy-icon/hy-icon.vue";
 import { computed, toRefs } from "vue";
+import { addUnit } from "@/package";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { size, disabled, clickable } = toRefs(props);
+const { size, disabled, clickable, borderRadius } = toRefs(props);
 const emit = defineEmits(["click"]);
 
 /**

package/components/hy-cell/index.scss

@@ -1,29 +1,62 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-cell {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(cell) {
+      color: $hy-dark-color;
+      &__body--container {
+        background-color: $hy-dark-background--container;
+        &__right-icon {
+          :deep() {
+            @include b(icon) {
+              color: $hy-dark-icon;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@include b(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;
+  @include m(title) {
+    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
+    &__vertical {
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 51%;
+        transform: translateY(-50%);
         width: 4px;
         height: 20px;
-        margin-right: 16rpx;
-      }
-      &--text {
-        font-size: $hy-font-size-subtitle;
-        line-height: 16px;
-        color: $hy-color-title;
+        background: $hy-primary;
+        border-radius: $hy-border-radius-semicircle;
       }
     }
+    &__text {
+      font-size: $hy-font-size-lg;
+    }
+    //&-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;
+    //  }
+    //}
   }
 
   /*row内容*/
@@ -32,10 +65,9 @@
     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;
+    border-radius: $hy-border-margin-padding-sm;
+    overflow: hidden;
 
     &--container {
       @include flex(row);
@@ -66,14 +98,14 @@
 
       /*点击状态*/
       &__clickable {
-        background-color: $hy-bg-color-grey;
+        background-color: $hy-light-background-hover;
       }
 
       &__content {
         @include flex(row);
         /*左边icon*/
         &-icon {
-          @include flex();
+          @include flex;
           align-items: center;
           margin-right: 10px;
         }
@@ -84,11 +116,6 @@
           display: flex;
           flex-direction: column;
 
-          /*标题*/
-          &--text {
-            color: $hy-color-title;
-          }
-
           /*sub值*/
           &--sub {
             margin-top: $hy-border-margin-padding-sm;
@@ -99,7 +126,7 @@
 
       /*cell值*/
       &__center {
-        @include flex();
+        @include flex;
         max-width: 90%;
         flex: 1;
         &__value {
@@ -128,7 +155,7 @@
     }
   }
 
-  &--disabled {
+  @include m(disabled) {
     color: $hy-text-color-disable;
     /* #ifndef APP-NVUE */
     cursor: not-allowed;

package/components/hy-cell/props.ts

@@ -1,19 +1,18 @@
 import type IProps from "./typing";
-import { ColorConfig, IconConfig } from "../../config";
+import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
   list: [],
   title: "",
-  titleBorder: false,
-  border: true,
-  verticalColor: ColorConfig.primary,
   showVertical: true,
+  border: true,
+  borderRadius: "5px",
   disabled: false,
   clickable: false,
   size: "medium",
   value: "",
   arrange: "right",
-  rightIcon: IconConfig.RIGHT,
+  rightIcon: {},
   arrowDirection: "right",
 };
 

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

@@ -1,11 +1,12 @@
 import type { CSSProperties } from "vue";
 import { HyApp } from "@/package/typing/modules/common";
+import type HyIconProps from "../hy-icon/typing";
 
 export interface CellContentVo extends AnyObject {
   /**
    * @description 单元格左图标
    * */
-  icon?: string;
+  icon?: Partial<HyIconProps>;
   /**
    * @description 单元格标题
    * */
@@ -19,9 +20,9 @@ export interface CellContentVo extends AnyObject {
    * */
   disabled?: boolean;
   /**
-   * @description 单元格右图标
+   * @description 单元格右图标集合
    * */
-  rightIcon?: string;
+  rightIcon?: Partial<HyIconProps>;
   /**
    * @description 单元格值
    * */
@@ -31,11 +32,11 @@ export interface CellContentVo extends AnyObject {
    * */
   url?: string;
   /**
-   * @description 单元格右侧箭头的方向，可选值为：left，up，down
+   * @description 单元格右侧箭头的方向，可选值为：left，up，down,right
    * */
   arrowDirection?: HyApp.RotateType;
 }
-export default interface IProps {
+export default interface HyCellProps {
   /**
    * @description cell列表数据
    * */
@@ -45,21 +46,14 @@ export default interface IProps {
    * */
   title?: string;
   /**
-   * @description 是否显示头部底部边框
+   * @description 是否显示标题前缀竖线
    * */
-  titleBorder?: boolean;
+  showVertical?: boolean;
   /**
    * @description 是否显示cell下边框 (默认 true )
    * */
   border?: boolean;
-  /**
-   * @description 标题前缀竖线颜色
-   * */
-  verticalColor?: string;
-  /**
-   * @description 是否显示标题前缀竖线
-   * */
-  showVertical?: boolean;
+  borderRadius?: string | number;
   /**
    * @description 是否禁用cell（默认false）
    * */
@@ -81,17 +75,13 @@ export default interface IProps {
    * */
   arrange?: HyApp.LeftRightType | "center";
   /**
-   * @description 右侧的图标箭头 （默认 'right'）
+   * @description 右侧的图标箭头icon集合
    * */
-  rightIcon?: string;
+  rightIcon?: Partial<HyIconProps>;
   /**
    * @description 右侧箭头的方向，可选值为：left，up，down
    * */
   arrowDirection?: "left" | "up" | "down" | "right";
-  /**
-   * @description 自定义右侧icon样式
-   * */
-  rightIconStyle?: CSSProperties;
   /**
    * @description 定义需要用到的外部样式
    * */

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

@@ -15,6 +15,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-check-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { toRefs, watch, ref } from "vue";
 import defaultProps from "./props";
@@ -69,8 +80,8 @@ const onCheckbox = ({ name }: { name: number }) => {
 </script>
 
 <style lang="scss" scoped>
-//@import "./index.scss";
-.hy-check-button {
+@import "../../libs/css/mixin.scss";
+@include b(check-button) {
   display: grid;
   grid-template-columns: v-bind(col);
   gap: v-bind(gap);

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

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

package/components/hy-check-button/typing.d.ts

@@ -35,7 +35,7 @@ export type FieldNamesType = {
   [key in keyof IFieldNames as IFieldNames[key]]?: string | number | boolean;
 };
 
-export default interface IProps {
+export default interface HyCheckButtonProps {
   /**
    * @description 选中得值，radio是字符串，checkbox是数组
    * */

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

@@ -48,6 +48,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-checkbox',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import defaultProps from "./props";
 import type { CheckboxColumnsVo } from "./typing";
@@ -72,6 +83,7 @@ const {
   customStyle,
   borderBottom,
   placement,
+  labelDisabled,
 } = toRefs(props);
 const emit = defineEmits(["change", "update:modelValue"]);
 
@@ -84,8 +96,12 @@ const sizeType: AnyObject = reactive({
 
 watch(
   () => modelValue.value,
-  (newValue) => {
-    if (Array.isArray(newValue)) {
+  (newValue: boolean | (string | number)[]) => {
+    // 判断数组长度为1可以传true/false
+    if (columns.value?.length === 1 && typeof newValue === "boolean") {
+      columns.value[0][fieldNames.value.checked] = newValue;
+      columns_1.value = columns.value;
+    } else if (Array.isArray(newValue)) {
       columns_1.value = columns.value.map((item) => {
         item[fieldNames.value.checked] = newValue.includes(
           item[fieldNames.value.value] as string,
@@ -130,8 +146,11 @@ const iconClasses = computed(() => {
     if (isDisabled(temp?.disabled)) {
       classes.push("hy-checkbox__icon-wrap--disabled");
     }
-    if (temp[fieldNames.value.checked] && isDisabled(temp?.disabled)) {
-      classes.push("hy-checkbox__icon-wrap--disabled--checked");
+    if (temp[fieldNames.value.checked]) {
+      classes.push("hy-checkbox__icon-wrap--checked");
+      if (isDisabled(temp?.disabled)) {
+        classes.push("hy-checkbox__icon-wrap--disabled--checked");
+      }
     }
     return classes;
   };
@@ -147,7 +166,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
@@ -172,7 +193,7 @@ const iconClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
  * */
 const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
   e.stopPropagation();
-  if (!isDisabled(temp?.disabled)) {
+  if (!isDisabled(temp?.disabled) || !labelDisabled.value) {
     setRadioCheckedStatus(temp);
   }
 };
@@ -181,7 +202,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);
   }
 };
@@ -198,11 +219,14 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
     return item;
   });
   emit("change", temp);
+  console.log(columns_1.value[0].checked, "前");
   emit(
     "update:modelValue",
-    columns_1.value
-      .filter((item: CheckboxColumnsVo) => item[fieldNames.value.checked])
-      .map((item: CheckboxColumnsVo) => item[fieldNames.value.value]),
+    columns_1.value.length === 1
+      ? columns_1.value[0].checked
+      : columns_1.value
+          .filter((item: CheckboxColumnsVo) => item[fieldNames.value.checked])
+          .map((item: CheckboxColumnsVo) => item[fieldNames.value.value]),
   );
   // 双向绑定
   // if (this.usedAlone) {

package/components/hy-checkbox/index.scss

@@ -1,7 +1,16 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-checkbox {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(checkbox) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(checkbox) {
   &-group {
     &--row {
       /* #ifndef APP-NVUE */
@@ -65,17 +74,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;
     }
   }
 
@@ -83,7 +94,6 @@
     /* #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;
 

package/components/hy-checkbox/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: "square",
   size: "medium",
   disabled: false,
-  activeColor: ColorConfig.primary,
+  activeColor: "",
   inactiveColor: "#c8c9cc",
   iconSize: "20",
   iconColor: "",
@@ -20,7 +19,7 @@ const defaultProps: IProps = {
   borderBottom: false,
   labelSize: "",
   labelColor: "",
-  labelDisabled: "",
+  labelDisabled: false,
   placement: "row",
 };
 

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

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