hy-app 0.2.2 → 0.2.4

package/components/hy-button/index.scss

@@ -1,15 +1,13 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-uni-button {
-  margin: 0;
-}
 
 @include b(button){
   height: 40px;
   position: relative;
   align-items: center;
   justify-content: center;
+  margin: 0;
   @include flex;
   /* #ifndef APP-NVUE */
   box-sizing: border-box;

package/components/hy-cell/index.scss

@@ -25,21 +25,6 @@
     &__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内容*/

package/components/hy-code-input/hy-code-input.vue

@@ -14,6 +14,7 @@
       <view
         class="hy-code-input--item__dot"
         v-if="dot && current > index"
+        :style="{ color: color }"
       ></view>
       <text
         v-else
@@ -215,7 +216,7 @@ const inputHandler = (e: any) => {
     &__line {
       &::after {
         height: v-bind(lineHeight);
-        background-color: var(--hy-border-color);
+        background-color: $hy-border-color;
       }
     }
   }

package/components/hy-code-input/typing.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface HyOverlayProps {
+export default interface HyCodeInputProps {
   modelValue: string | number;
   /**
    * @description 键盘弹起时，是否自动上推页面（默认 true ）

package/components/hy-config-provider/props.ts

@@ -5,7 +5,7 @@ const defaultProps: IProps = {
   theme: "light",
   themeColor: ColorConfig.primary,
   themeLightColor: "#ecf5ff",
-  padding: "10px",
+  padding: "",
   customClass: "",
   customStyle: {},
 };

package/components/hy-grid/hy-grid.vue

@@ -10,9 +10,9 @@
       >
         <slot :record="item">
           <HyIcon
-            :name="item?.icon"
+            :name="item[customKeys?.icon]"
             label-pos="bottom"
-            :label="item?.name"
+            :label="item[customKeys?.name]"
             :space="item?.iconConfig?.space || iconConfig?.space || 8"
             :color="item?.iconConfig?.color || iconConfig?.color"
             :size="item?.iconConfig?.size || iconConfig?.size || 30"
@@ -28,7 +28,6 @@
               item?.iconConfig?.customStyle || iconConfig?.customStyle
             "
           ></HyIcon>
-          <!--          <view class="hy-grid-item__title">{{ item.name }}</view>-->
         </slot>
       </view>
     </template>

package/components/hy-grid/props.ts

@@ -2,6 +2,10 @@ import type IProps from "./typing";
 
 const defaultProps: IProps = {
   list: [],
+  customKeys: {
+    name: "name",
+    icon: "icon",
+  },
   col: 5,
   border: false,
   itemHeight: "80px",

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

@@ -19,11 +19,26 @@ interface GridItemVo {
    * */
   [key: string]: any;
 }
+export interface CustomKeysVo {
+  /**
+   * @description 自定义标题键名
+   * */
+  name: string;
+  /**
+   * @description 自定义icon键名
+   * */
+  icon: string;
+}
+
 export default interface HyGridProps {
   /**
    * @description 数据集
    * */
   list: GridItemVo[];
+  /**
+   * @description 自定义键值
+   * */
+  customKeys?: CustomKeysVo;
   /**
    * @description 宫格的列数（默认 3 ）
    * */

package/components/hy-icon/index.scss

@@ -66,12 +66,12 @@
 
   &__label {
     @include lineEllipsis;
-    overflow: hidden;
     /* #ifndef APP-NVUE */
     line-height: 1;
     /* #endif */
     color: $hy-text-color--grey;
-    font-size: 12px;
+    font-size: $hy-font-size-sm;
+    max-width: 150rpx;
   }
 }
 @include b(rotate) {

package/components/hy-login/TheUserLogin.vue

@@ -104,7 +104,6 @@ const userColumns = computed(() => [
       },
       onSuffix: () => {
         showPwd.value = !showPwd.value;
-        console.log(showChoice.value);
       },
     },
     rules: [props.customUserValidator, props.pwdNumValidator],

package/components/hy-menu/hy-menu.vue

@@ -0,0 +1,159 @@
+<template>
+  <view class="hy-menu" :style="{ width: addUnit(width) }">
+    <template v-for="(item, i) in list">
+      <view
+        @click="handleClick(item, i)"
+        :class="menuItemClass(item, i)"
+        :style="customStyle"
+      >
+        <slot name="icon">
+          <hy-icon
+            class="hy-menu-item__icon"
+            :name="item.icon"
+            :color="current === i ? color || 'var(--hy-theme-color)' : ''"
+            :size="icon?.size || 16"
+            :bold="icon?.bold"
+            :customPrefix="icon?.customPrefix"
+            :imgMode="icon?.imgMode"
+            :width="icon?.width"
+            :height="icon?.height"
+            :top="icon?.top"
+            :stop="icon?.stop"
+            :round="icon?.round"
+            :customStyle="icon?.customStyle || { marginRight: '2px' }"
+          ></hy-icon>
+        </slot>
+        <slot>
+          <text class="hy-menu-item--title">{{ item.title }}</text>
+        </slot>
+        <hy-badge
+          :value="item?.badge"
+          :offset="badge?.offset"
+          :shape="badge?.shape"
+          :color="badge?.color"
+          :bg-color="badge?.bgColor"
+          :inverted="badge?.inverted"
+          :type="badge?.type"
+          :number-type="badge?.numberType"
+          :is-dot="badge?.isDot"
+          :absolute="badge?.absolute"
+          :max="badge?.max"
+          :show-zero="badge?.showZero"
+          :custom-style="badge?.customStyle"
+        >
+        </hy-badge>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-menu",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, toRefs, watch } from "vue";
+import type IProps from "./typing";
+import type { MenusType } from "./typing";
+import defaultProps from "./props";
+import { addUnit } from "../../utils";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyBadge from "../hy-badge/hy-badge.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, list, color } = toRefs(props);
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const current = ref<string | number>(0);
+
+watch(
+  () => modelValue.value,
+  (newVal: string | number) => {
+    current.value = list.value.findIndex((item) => item.id === newVal);
+    // current.value = newVal;
+  },
+);
+
+const menuItemClass = computed(() => {
+  return (temp: MenusType, i: number) => {
+    const classes = [
+      "hy-menu-item",
+      prefix.value && "hy-menu-item--prefix",
+      suffix.value && "hy-menu-item--suffix",
+      temp.disabled && "hy-menu-item--disabled",
+    ];
+    if (current.value === i) {
+      classes.push(
+        "hy-menu-item--active",
+        color.value && "hy-menu-item--active__color",
+      );
+    }
+
+    return classes;
+  };
+});
+
+const prefix = computed(() => {
+  // let prefix: boolean = false;
+  // if (sidebar) {
+  //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === sidebar.props.modelValue;
+  //   });
+  //
+  //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === props.value;
+  //   });
+  //
+  //   if (currentIndex === activeIndex - 1) {
+  //     prefix = true;
+  //   }
+  // }
+  return prefix;
+});
+
+const suffix = computed(() => {
+  let suffix: boolean = false;
+  // if (sidebar) {
+  //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === sidebar.props.modelValue;
+  //   });
+  //
+  //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === props.value;
+  //   });
+  //
+  //   if (currentIndex === activeIndex + 1) {
+  //     suffix = true;
+  //   }
+  // }
+  return suffix;
+});
+
+function handleClick(temp: MenusType, i: number) {
+  if (temp?.disabled) {
+    return;
+  }
+  current.value = i;
+  emit("update:modelValue", temp.id);
+  emit("change", temp);
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+.hy-menu-item--active__color {
+  color: v-bind(color);
+  &::before {
+    background: v-bind(color);
+  }
+}
+</style>

package/components/hy-menu/index.scss

@@ -0,0 +1,58 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+@include b(menu) {
+  max-width: 260rpx;
+  background-color: $hy-background--track;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
+    //min-height: $-sidebar-item-height;
+    box-sizing: border-box;
+
+    &:active {
+      background-color: $hy-background--hover;
+    }
+
+    @include m(active) {
+      font-weight: 600;
+      background: $hy-background--active;
+      color: $hy-primary;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 4px;
+        height: 15px;
+        background: $hy-primary;
+        transform: translateY(-50%);
+        border-radius: $hy-border-radius-semicircle;
+      }
+
+      &:active {
+        background-color: transparent;
+      }
+    }
+    @include m(title) {
+      margin-left: 10rpx;
+      font-size: $hy-font-size-base;
+      line-height: $hy-font-size-base;
+      @include lineEllipsis;
+      position: relative;
+    }
+    @include m(disabled) {
+      color: $hy-text-color--disabled;
+      background-color: $hy-background--disabled;
+      cursor: not-allowed;
+
+    }
+
+  }
+}

package/components/hy-menu/props.ts

@@ -0,0 +1,12 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: "",
+  list: [],
+  width: 120,
+  color: "",
+  icon: {},
+  badge: {},
+};
+
+export default defaultProps;

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

@@ -0,0 +1,57 @@
+import type { CSSProperties } from "vue";
+import type HyBadgeProps from "../hy-badge/typing";
+import type HyIconProps from "../hy-icon/typing";
+
+export interface MenusType {
+  /**
+   * @description 唯一id
+   * */
+  id: string | number;
+  /**
+   * @description 标题
+   * */
+  title: string;
+  /**
+   * @description 是否禁用
+   * */
+  disabled?: boolean;
+  /**
+   * @description icon
+   * */
+  icon?: string;
+  /**
+   * @description 徽标值
+   * */
+  badge?: number;
+}
+
+export default interface HyMenuProps {
+  /**
+   * @description 当前值
+   * */
+  modelValue: string | number;
+  /**
+   * @description 菜单数据集
+   * */
+  list: MenusType[];
+  /**
+   * @description 侧边菜单栏宽度
+   * */
+  width?: string | number;
+  /**
+   * @description 选中颜色
+   * */
+  color?: string;
+  /**
+   * @description 图标属性值
+   * */
+  icon?: Partial<HyIconProps>;
+  /**
+   * @description 徽标属性值
+   * */
+  badge?: Partial<HyBadgeProps>;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface HyOverlayProps {
+export default interface HyNotifyProps {
   /**
    * @description 到顶部的距离 ( 默认 0 )
    * */

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface HyOverlayProps {
+export default interface HyPaginationProps {
   /**
    * @description 当前页
    */