hy-app 0.1.5 → 0.2.0

package/components/hy-dropdown-item/hy-dropdown-item.vue

@@ -1,6 +1,12 @@
 <template>
   <!-- 标题栏 -->
-  <view class="hy-dropdown-item__header" @click="handleClick">
+  <view
+    :class="[
+      'hy-dropdown-item__header',
+      isOpen && 'hy-dropdown-item__header--active',
+    ]"
+    @click="handleClick"
+  >
     <text
       class="hy-dropdown-item__header--title"
       :style="{ color: currentColor, fontSize: addUnit(titleSize) }"
@@ -31,7 +37,10 @@
         <!-- 选项 -->
         <view class="hy-dropdown-item__main--container__list" v-else>
           <view
-            class="hy-dropdown-item__main--container__list-item"
+            :class="[
+              'hy-dropdown-item__main--container__list-item',
+              isOpen && 'hy-dropdown-item__main--container__list--active',
+            ]"
             v-for="(item, index) in menus"
             :key="item.value || index"
             @click="onSelect(item, index)"
@@ -57,7 +66,16 @@
 </template>
 
 <script setup lang="ts">
-import {computed, inject, ref, onMounted, watch, useSlots, toRefs, getCurrentInstance} from "vue";
+import {
+  computed,
+  inject,
+  ref,
+  onMounted,
+  watch,
+  useSlots,
+  toRefs,
+  getCurrentInstance,
+} from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import type FatherIProps from "../hy-dropdown/typing";

package/components/hy-dropdown-item/index.scss

@@ -1,6 +1,22 @@
 @use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
 
-.hy-dropdown-item {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(dropdown-item) {
+      color: $hy-dark-color;
+      &__header {
+        background-color: $hy-dark-background--container;
+      }
+      &__main--container {
+        background-color: $hy-dark-background--container;
+      }
+    }
+  }
+}
+
+@include b(dropdown-item) {
   &__header {
     width: 100%;
     height: 100%;
@@ -15,6 +31,15 @@
     position: relative;
     z-index: 999;
     background-color: #ffffff;
+
+    &--active {
+      color: $hy-primary;
+      :deep() {
+        @include b(icon) {
+          color: $hy-primary;
+        }
+      }
+    }
   }
 
   &__main {
@@ -47,6 +72,14 @@
         width: 100%;
         padding: 0 35rpx;
         box-sizing: border-box;
+        &--active {
+          color: $hy-primary;
+          :deep() {
+            @include b(icon) {
+              color: $hy-primary;
+            }
+          }
+        }
         &-item {
           width: 100%;
           padding: 30rpx 0;
@@ -55,7 +88,7 @@
           align-items: center;
 
           &:not(:last-of-type) {
-            border-bottom: 1px solid #f2f2f2;
+            border-bottom: $hy-border-line;
           }
 
           &--label {

package/components/hy-empty/hy-empty.vue

@@ -14,20 +14,32 @@
     <view class="hy-empty__description" v-else>
       <slot v-if="$slots.description" name="description"></slot>
       <text v-else :style="descriptionStyle">{{ emptyDescription }}</text>
-      <HyButton
-        class="hy-empty__button"
-        v-if="btnText"
-        :text="btnText"
-        :size="btnSize"
-        :type="btnType"
-        :shape="btnShape"
-        :plain="btnPlain"
-        @click="handleClick"
-      ></HyButton>
+      <view class="hy-empty__button" v-if="button?.text">
+        <HyButton
+          :text="button?.text"
+          :size="button?.size"
+          :type="button?.type"
+          :shape="button?.shape"
+          :plain="button?.plain"
+          :custom-style="button?.customStyle"
+          @click="handleClick"
+        ></HyButton>
+      </view>
     </view>
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-empty",
+  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-empty/index.scss

@@ -1,4 +1,17 @@
-.hy-empty {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(empty) {
+      background-color: $hy-dark-background;
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(empty) {
   top: 0;
   left: 0;
   width: 100%;
@@ -7,13 +20,14 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  background: rgb(255, 255, 255);
+  background: $hy-light-background;
   &__description {
     width: 70%;
     text-align: center;
+    margin-top: $hy-border-margin-padding-base;
   }
 
   &__button {
-    margin-top: 80rpx;
+    margin-top: 100rpx;
   }
 }

package/components/hy-empty/props.ts

@@ -10,11 +10,7 @@ const defaultProps: IProps = {
   desSize: 15,
   desColor: "#5e6d82",
   imgMargin: "",
-  btnText: "",
-  btnSize: "normal",
-  btnType: "primary",
-  btnShape: "square",
-  btnPlain: false,
+  button: {},
   navigateUrl: "",
 };
 

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from "vue";
+import type HyButtonProps from "../hy-button/typing";
 
 export default interface HyEmptyProps {
   /**
@@ -38,25 +39,9 @@ export default interface HyEmptyProps {
    * */
   imgMargin?: string;
   /**
-   * @description 按钮文字
+   * @description 按钮属性只
    * */
-  btnText?: string;
-  /**
-   * @description 按钮尺寸，large，normal，mini （默认 normal）
-   * */
-  btnSize?: "normal" | "large" | "small" | "mini";
-  /**
-   * @description 按钮的预置样式，info，primary，error，warning，success (默认 'info' )
-   * */
-  btnType?: HyApp.ThemeType;
-  /**
-   * @description 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
-   * */
-  btnShape?: HyApp.ShapeType;
-  /**
-   * @description 按钮是否镂空，背景色透明 （默认 false）
-   * */
-  btnPlain?: boolean;
+  button?: HyButtonProps;
   /**
    * @description 跳转地址
    * */

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

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

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

@@ -1,10 +1,19 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(float-button) {
+      //color: $hy-dark-color;
+    }
+  }
+}
 
-.hy-float-button {
+@include b(float-button) {
   position: relative;
-  opacity: v-bind(opacity);
+  background-color: $hy-primary;
+  color: $hy-dark-color;
   &__circle {
     border-radius: $hy-border-radius-semicircle;
   }
@@ -38,6 +47,7 @@
     justify-content: center;
     align-items: center;
     transition: 0.4s ease;
+    background-color: $hy-primary;
   }
 
   &__menus {
@@ -46,6 +56,7 @@
     overflow: hidden;
     max-height: 250px;
     box-sizing: border-box;
+    background-color: $hy-primary;
     &--item {
       font-size: 28rpx;
       box-sizing: border-box;

package/components/hy-float-button/props.ts

@@ -6,14 +6,14 @@ const defaultProps: IProps = {
   direction: "column",
   icon: IconConfig.PLUS,
   iconSize: "",
-  iconColor: "#FFFFFF",
+  iconColor: "",
   bottom: 80,
   left: 20,
   zIndex: 10086,
-  bgColor: "#3D7EFF",
+  bgColor: "",
   text: "",
   fontSize: "12px",
-  textColor: "#FFFFFF",
+  textColor: "",
   size: "medium",
   shape: "circle",
   opacity: 1,

package/components/hy-folding-panel/hy-folding-panel.vue

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

package/components/hy-folding-panel/index.scss

@@ -1,4 +1,7 @@
-.hy-folding-panel {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(folding-panel) {
   &__main {
     overflow: auto;
     transition: height 0.5s ease;

package/components/hy-form/hy-form.vue

@@ -15,14 +15,7 @@
       <view class="hy-form--item__container">
         <view class="hy-form--item__container-content">
           <!--	输入框	-->
-          <view
-            class="flex"
-            v-if="
-              item.type === FormTypeEnum.TEXT ||
-              item.type === FormTypeEnum.NUMBER ||
-              item.type === FormTypeEnum.PASSWORD
-            "
-          >
+          <view class="flex" v-if="isInput(item.type)">
             <HyInput
               v-model="formData[item.field]"
               :type="item.type"
@@ -67,6 +60,8 @@
               :customStyle="errorStyle(!!errors[item.field])"
               @change="handleChange($event, item)"
               @blur="handleBlur($event, item)"
+              @onPrefix="item?.input?.onPrefix"
+              @onSuffix="item?.input?.onSuffix"
             ></HyInput>
           </view>
           <!--	输入框	-->
@@ -318,6 +313,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-form',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, reactive, toRefs } from "vue";
 import type IProps from "./typing";
@@ -350,6 +356,10 @@ const {
 const emit = defineEmits(["click"]);
 
 const labelPos = labelPosition.value === "top" ? "column" : "row";
+const isInput = (type: FormTypeEnum) =>
+  type === FormTypeEnum.TEXT ||
+  type === FormTypeEnum.NUMBER ||
+  type === FormTypeEnum.PASSWORD;
 
 /**
  * @description 错误输入框样式
@@ -358,7 +368,7 @@ const errorStyle = computed(() => {
   return (err: boolean) => {
     const style: CSSProperties = {};
     if (err) {
-      style.background = "#FFF2F0";
+      style.background = "#dd6161";
     }
 
     return style;
@@ -494,12 +504,18 @@ const handleSubmit = () => {
  * @description 输入值触发
  * */
 const handleChange = (event: string, temp: FormColumnsType) => {
+  if (isInput(temp.type) && temp?.input?.onChange) {
+    temp.input.onChange(event, temp);
+  }
   validateField(temp.rules, event, temp.field, "change");
 };
 /**
  * @description 输入值触发
  * */
 const handleBlur = (event: string, temp: FormColumnsType) => {
+  if (isInput(temp.type) && temp?.input?.onBlur) {
+    temp.input.onBlur(event, temp);
+  }
   validateField(temp.rules, event, temp.field, "blur");
 };
 

package/components/hy-form/index.scss

@@ -1,7 +1,17 @@
 @use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
 
-.hy-form {
-  &--item {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(form) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(form) {
+  @include m(item) {
     display: flex;
     //align-items: center;
     margin-bottom: $hy-border-margin-padding-lg;

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

@@ -35,6 +35,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-grid',
+  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-grid/index.scss

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

package/components/hy-icon/hy-icon.vue

@@ -28,6 +28,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-icon',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import { addUnit } from "../../utils";
@@ -77,7 +88,7 @@ const iconStyle = computed<CSSProperties>(() => {
     // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
     top: addUnit(top.value),
     borderRadius: addUnit(round.value),
-    color: color.value ? color.value : "#606266",
+    color: color.value,
   };
 
   return style;

package/components/hy-icon/index.scss

@@ -2,29 +2,38 @@
 @use "../../public/font/iconfont.css" as *;
 @use "../../theme.scss" as *;
 
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(icon) {
+      color: $hy-dark-color;
+    }
+  }
+}
 
-.hy-icon {
+@include b(icon) {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   align-items: center;
+  color: $hy-text-color-grey;
 
-  &--left {
+  @include m(left) {
     flex-direction: row-reverse;
     align-items: center;
   }
 
-  &--right {
+  @include m(right) {
     flex-direction: row;
     align-items: center;
   }
 
-  &--top {
+  @include m(top) {
     flex-direction: column-reverse;
     justify-content: center;
   }
 
-  &--bottom {
+  @include m(bottom) {
     flex-direction: column;
     justify-content: center;
   }
@@ -63,14 +72,14 @@
   }
 
   &__label {
-    @include line-feed();
+    @include lineEllipsis;
     overflow: hidden;
     /* #ifndef APP-NVUE */
     line-height: 1;
     /* #endif */
   }
 }
-.hy-rotate {
+@include b(rotate) {
   animation: hy-rotate 1s infinite linear;
   @keyframes hy-rotate {
     0% {

package/components/hy-icon/props.ts

@@ -9,8 +9,8 @@ const defaultProps: IProps = {
   customPrefix: "hy-icon",
   label: "",
   labelPos: "right",
-  labelSize: "11px",
-  labelColor: "#606266",
+  labelSize: "",
+  labelColor: "",
   space: "2px",
   imgMode: "",
   width: "",

package/components/hy-image/hy-image.vue

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

package/components/hy-image/index.scss

@@ -1,6 +1,7 @@
 @use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
 
-.hy-image {
+@include b(image) {
   position: relative;
   transition: opacity 0.5s ease-in-out;
 
@@ -19,8 +20,8 @@
     @include flex;
     align-items: center;
     justify-content: center;
-    background-color: #f8f8f8ff;
-    color: #909193ff;
+    background-color: $hy-light-background-image;
+    color: $hy-text-color-grey;
     font-size: 46px;
   }
 }

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

@@ -7,6 +7,7 @@
       <view
         class="hy-input__content__prefix-icon"
         v-if="prefixIcon?.name || $slots.prefix"
+        @tap="onPrefix"
       >
         <slot name="prefix">
           <HyIcon
@@ -75,6 +76,7 @@
       <view
         class="hy-input__content__subfix-icon"
         v-if="suffixIcon?.name || $slots.suffix"
+        @tap="onSuffix"
       >
         <slot name="suffix">
           <HyIcon
@@ -97,6 +99,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-input',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -110,7 +123,7 @@ import type { CSSProperties } from "vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
 import { addUnit, formatObject } from "../../utils";
 import defaultProps from "./props";
-import { ColorConfig, IconConfig } from "../../config";
+import { IconConfig } from "../../config";
 import type IProps from "./typing";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -134,6 +147,8 @@ const emit = defineEmits([
   "change",
   "update:modelValue",
   "clear",
+  "onPrefix",
+  "onSuffix",
 ]);
 
 const instance = getCurrentInstance();
@@ -233,10 +248,10 @@ const borderStyle = computed(() => {
     if (isFocus) {
       switch (border.value) {
         case "surround":
-          style = { border: `1px solid ${ColorConfig.primary}` };
+          style = { border: `1px solid var(--hy-theme-color, #3c9cff)` };
           break;
         case "bottom":
-          style = { borderBottom: `1px solid ${ColorConfig.primary}` };
+          style = { borderBottom: `1px solid var(--hy-theme-color, #3c9cff)` };
           break;
         default:
           break;
@@ -335,6 +350,19 @@ const clickHandler = () => {
     uni.hideKeyboard();
   }
 };
+
+/**
+ * @description 点击前缀
+ * */
+const onPrefix = () => {
+  emit("onPrefix");
+};
+/**
+ * @description 点击后缀
+ * */
+const onSuffix = () => {
+  emit("onSuffix");
+};
 </script>
 
 <style lang="scss" scoped>