hy-app 0.1.4 → 0.2.0

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,6 +1,7 @@
 import type { CSSProperties } from "vue";
+import type HyButtonProps from "../hy-button/typing";
 
-export default interface IProps {
+export default interface HyEmptyProps {
   /**
    * @description 是否显示空状态
    * */
@@ -38,25 +39,9 @@ export default interface IProps {
    * */
   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-float-button/typing.d.ts

@@ -13,7 +13,7 @@ interface MenusVo {
 
 export type MenusType = MenusVo | string;
 
-export default interface IProps {
+export default interface HyFloatButtonProps {
   /**
    * @description 菜单栏集合
    * */

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-folding-panel/typing.d.ts

@@ -11,7 +11,7 @@ export interface PanelVo extends CellContentVo {
    * */
   content?: string;
 }
-export default interface IProps {
+export default interface HyFoldingPanelProps {
   /**
    * @description 数据集
    * */

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

@@ -15,26 +15,53 @@
       <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"
-              :placeholder="item.placeholder"
-              :disabled="disabled || item.disabled"
-              :clearable="item.clearable"
-              :readonly="item.readonly"
-              :shape="shape || item.shape"
-              :border="border || item.border"
+              :disabled="item?.input?.disabled || input?.disabled"
+              :disabledColor="
+                item?.input?.disabledColor || input?.disabledColor
+              "
+              :maxlength="item?.input?.maxlength || input?.maxlength"
+              :password="item?.input?.password"
+              :clearable="item?.input?.clearable || input?.clearable"
+              :readonly="item?.input?.readonly || input?.readonly"
+              :placeholder="item?.input?.placeholder"
+              :placeholderClass="
+                item?.input?.placeholderClass || input?.placeholderClass
+              "
+              :placeholderStyle="
+                item?.input?.placeholderStyle || input?.placeholderStyle
+              "
+              :showWordLimit="
+                item?.input?.showWordLimit || input?.showWordLimit
+              "
+              :confirmType="item?.input?.confirmType || input?.confirmType"
+              :confirmHold="item?.input?.confirmHold || input?.confirmHold"
+              :holdKeyboard="item?.input?.holdKeyboard || input?.holdKeyboard"
+              :focus="item?.input?.focus || input?.focus"
+              :autoBlur="item?.input?.autoBlur || input?.autoBlur"
+              :selectionStart="
+                item?.input?.selectionStart || input?.selectionStart
+              "
+              :selectionEnd="item?.input?.selectionEnd || input?.selectionEnd"
+              :adjustPosition="
+                item?.input?.adjustPosition || input?.adjustPosition
+              "
+              :inputAlign="item?.input?.inputAlign || input?.inputAlign"
+              :fontSize="item?.input?.fontSize || input?.fontSize"
+              :color="item?.input?.color || input?.color"
+              :prefixIcon="item?.input?.prefixIcon || input?.prefixIcon"
+              :suffixIcon="item?.input?.suffixIcon || input?.suffixIcon"
+              :formatter="item?.input?.formatter || input?.formatter"
+              :shape="item?.input?.shape || input?.shape"
+              :border="item?.input?.border || input?.border"
               :customStyle="errorStyle(!!errors[item.field])"
               @change="handleChange($event, item)"
               @blur="handleBlur($event, item)"
+              @onPrefix="item?.input?.onPrefix"
+              @onSuffix="item?.input?.onSuffix"
             ></HyInput>
           </view>
           <!--	输入框	-->
@@ -61,25 +88,76 @@
           <view class="flex" v-if="item.type === FormTypeEnum.TEXTAREA">
             <HyTextarea
               v-model="formData[item.field]"
-              :disabled="disabled || item.disabled"
-              :placeholder="item.placeholder"
-              :clearable="item.clearable"
-              :readonly="item.readonly"
-              :shape="shape || item.shape"
-              :border="border || item.border"
+              :disabled="item?.textarea?.disabled || textarea?.disabled"
+              :maxlength="item?.textarea?.maxlength || textarea?.maxlength"
+              :placeholder="item?.textarea?.placeholder"
+              :placeholderClass="
+                item?.textarea?.placeholderClass || textarea?.placeholderClass
+              "
+              :placeholderStyle="
+                item?.textarea?.placeholderStyle || textarea?.placeholderStyle
+              "
+              :holdKeyboard="
+                item?.textarea?.holdKeyboard || textarea?.holdKeyboard
+              "
+              :focus="item?.textarea?.focus || textarea?.focus"
+              :selectionStart="
+                item?.textarea?.selectionStart || textarea?.selectionStart
+              "
+              :selectionEnd="
+                item?.textarea?.selectionEnd || textarea?.selectionEnd
+              "
+              :adjustPosition="
+                item?.textarea?.adjustPosition || textarea?.adjustPosition
+              "
+              :formatter="item?.textarea?.formatter || textarea?.formatter"
+              :border="item?.textarea?.border || textarea?.border"
               :customStyle="errorStyle(!!errors[item.field])"
+              :height="textarea?.height || item?.textarea?.height"
               @change="handleChange($event, item)"
               @blur="handleBlur($event, item)"
             ></HyTextarea>
           </view>
           <!--	文本域	-->
 
+          <!--	复选框/单选框	-->
+          <template v-if="item.type === FormTypeEnum.CHECK_BUTTON">
+            <hy-check-button
+              v-model="formData[item.field]"
+              :columns="item.actions"
+              :type="item?.checkButton?.type || checkButton?.type"
+              :shape="item?.checkButton?.shape || checkButton?.shape"
+              :size="item?.checkButton?.size || checkButton?.size"
+              :col="item?.checkButton?.col || checkButton?.col"
+              :gap="item?.checkButton?.gap || checkButton?.gap"
+              :fieldNames="
+                item?.checkButton?.fieldNames || checkButton?.fieldNames
+              "
+              :disabled="item?.checkButton?.size || checkButton?.disabled"
+              :selectType="
+                item?.checkButton?.selectType || checkButton?.selectType
+              "
+            ></hy-check-button>
+          </template>
+          <!--	复选框/单选框	-->
+
           <!--	单选框	-->
-          <template v-if="item.type === 'radio'">
+          <template v-if="item.type === FormTypeEnum.RADIO">
             <HyRadio
               v-model="formData[item.field]"
-              :disabled="disabled || item.disabled"
               :columns="item.actions"
+              :fieldNames="item?.radio?.fieldNames || radio?.fieldNames"
+              :shape="item?.radio?.shape || radio?.shape"
+              :disabled="item?.radio?.disabled || radio?.disabled"
+              :size="item?.radio?.size || radio?.size"
+              :activeColor="item?.radio?.activeColor || radio?.activeColor"
+              :inactiveColor="
+                item?.radio?.inactiveColor || radio?.inactiveColor
+              "
+              :iconSize="item?.radio?.iconSize || radio?.iconSize"
+              :iconColor="item?.radio?.iconColor || radio?.iconColor"
+              :labelDisabled="item?.radio?.disabled || radio?.labelDisabled"
+              :placement="item?.radio?.placement || radio?.placement"
             ></HyRadio>
           </template>
           <!--	单选框	-->
@@ -88,7 +166,28 @@
           <template v-if="item.type === FormTypeEnum.SWITCH">
             <HySwitch
               v-model="formData[item.field]"
-              :disabled="disabled || item.disabled"
+              :loading="item?.switchItem?.loading || switchItem?.loading"
+              :disabled="item?.switchItem?.disabled || switchItem?.disabled"
+              :size="item?.switchItem?.size || switchItem?.size"
+              :activeColor="
+                item?.switchItem?.activeColor || switchItem?.activeColor
+              "
+              :inactiveColor="
+                item?.switchItem?.inactiveColor || switchItem?.inactiveColor
+              "
+              :activeValue="
+                item?.switchItem?.activeValue || switchItem?.activeValue
+              "
+              :inactiveValue="
+                item?.switchItem?.inactiveValue || switchItem?.inactiveValue
+              "
+              :activeIcon="
+                item?.switchItem?.activeIcon || switchItem?.activeIcon
+              "
+              :inactiveIcon="
+                item?.switchItem?.inactiveIcon || switchItem?.inactiveIcon
+              "
+              :space="item?.switchItem?.space || switchItem?.space"
             ></HySwitch>
           </template>
           <!--	开关	-->
@@ -99,11 +198,29 @@
               v-model="formData[item.field]"
               :columns="item.select"
               has-input
-              :disabled="disabled || item.disabled"
-              :placeholder="item.placeholder"
-              :shape="shape || item.shape"
-              :border="border || item.border"
+              :separator="item?.picker?.separator || picker?.separator"
+              :itemHeight="item?.picker?.itemHeight || picker?.itemHeight"
+              :cancelText="item?.picker?.cancelText || picker?.cancelText"
+              :confirmText="item?.picker?.confirmText || picker?.confirmText"
+              :cancelColor="item?.picker?.cancelColor || picker?.cancelColor"
+              :confirmColor="item?.picker?.confirmColor || picker?.confirmColor"
+              :visibleItemCount="
+                item?.picker?.visibleItemCount || picker?.visibleItemCount
+              "
+              :closeOnClickOverlay="
+                item?.picker?.closeOnClickOverlay || picker?.closeOnClickOverlay
+              "
+              :title="item?.picker?.title || picker?.title"
+              :showToolbar="item?.picker?.showToolbar || picker?.showToolbar"
               :customStyle="errorStyle(!!errors[item.field])"
+              :input="{
+                disabled:
+                  item?.picker?.input?.disabled || picker?.input?.disabled,
+                placeholder: item.picker?.input?.placeholder,
+                shape: item?.picker?.input?.shape || picker?.input?.shape,
+                border: item?.picker?.input?.border || picker?.input?.border,
+                customStyle: errorStyle(!!errors[item.field]),
+              }"
             ></HyPicker>
           </template>
           <!--	自定义选择器	-->
@@ -114,11 +231,29 @@
               v-model="formData[item.field]"
               has-input
               :mode="item.mode"
-              :disabled="disabled || item.disabled"
-              :placeholder="item.placeholder"
-              :shape="shape || item.shape"
-              :border="border || item.border"
+              :separator="item?.picker?.separator || picker?.separator"
+              :itemHeight="item?.picker?.itemHeight || picker?.itemHeight"
+              :cancelText="item?.picker?.cancelText || picker?.cancelText"
+              :confirmText="item?.picker?.confirmText || picker?.confirmText"
+              :cancelColor="item?.picker?.cancelColor || picker?.cancelColor"
+              :confirmColor="item?.picker?.confirmColor || picker?.confirmColor"
+              :visibleItemCount="
+                item?.picker?.visibleItemCount || picker?.visibleItemCount
+              "
+              :closeOnClickOverlay="
+                item?.picker?.closeOnClickOverlay || picker?.closeOnClickOverlay
+              "
+              :title="item?.picker?.title || picker?.title"
+              :showToolbar="item?.picker?.showToolbar || picker?.showToolbar"
               :customStyle="errorStyle(!!errors[item.field])"
+              :input="{
+                disabled:
+                  item?.picker?.input?.disabled || picker?.input?.disabled,
+                placeholder: item.picker?.input?.placeholder,
+                shape: item?.picker?.input?.shape || picker?.input?.shape,
+                border: item?.picker?.input?.border || picker?.input?.border,
+                customStyle: errorStyle(!!errors[item.field]),
+              }"
             ></HyDatetimePicker>
           </template>
           <!--	时间选择器	-->
@@ -128,11 +263,29 @@
             <HyAddressPicker
               v-model="formData[item.field]"
               has-input
-              :disabled="disabled || item.disabled"
-              :placeholder="item.placeholder"
-              :shape="shape || item.shape"
-              :border="border || item.border"
+              :separator="item?.picker?.separator || picker?.separator"
+              :itemHeight="item?.picker?.itemHeight || picker?.itemHeight"
+              :cancelText="item?.picker?.cancelText || picker?.cancelText"
+              :confirmText="item?.picker?.confirmText || picker?.confirmText"
+              :cancelColor="item?.picker?.cancelColor || picker?.cancelColor"
+              :confirmColor="item?.picker?.confirmColor || picker?.confirmColor"
+              :visibleItemCount="
+                item?.picker?.visibleItemCount || picker?.visibleItemCount
+              "
+              :closeOnClickOverlay="
+                item?.picker?.closeOnClickOverlay || picker?.closeOnClickOverlay
+              "
+              :title="item?.picker?.title || picker?.title"
+              :showToolbar="item?.picker?.showToolbar || picker?.showToolbar"
               :customStyle="errorStyle(!!errors[item.field])"
+              :input="{
+                disabled:
+                  item?.picker?.input?.disabled || picker?.input?.disabled,
+                placeholder: item.picker?.input?.placeholder,
+                shape: item?.picker?.input?.shape || picker?.input?.shape,
+                border: item?.picker?.input?.border || picker?.input?.border,
+                customStyle: errorStyle(!!errors[item.field]),
+              }"
             ></HyAddressPicker>
           </template>
           <!--	地址选择器	-->
@@ -160,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";
@@ -178,6 +342,7 @@ import HyRadio from "../hy-radio/hy-radio.vue";
 import HyDatetimePicker from "../hy-datetime-picker/hy-datetime-picker.vue";
 import HyAddressPicker from "../hy-address-picker/hy-address-picker.vue";
 import HyTransition from "../hy-transition/hy-transition.vue";
+import HyCheckButton from "../hy-check-button/hy-check-button.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -191,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 错误输入框样式
@@ -199,7 +368,7 @@ const errorStyle = computed(() => {
   return (err: boolean) => {
     const style: CSSProperties = {};
     if (err) {
-      style.background = "#FFF2F0";
+      style.background = "#dd6161";
     }
 
     return style;
@@ -335,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");
 };
 
@@ -352,4 +527,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 @import "./index.scss";
+.hy-form--item {
+  flex-direction: v-bind(labelPos);
+}
 </style>

package/components/hy-form/index.scss

@@ -1,11 +1,21 @@
 @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;
-    flex-direction: v-bind(labelPos);
     //align-items: center;
     margin-bottom: $hy-border-margin-padding-lg;
+    padding-bottom: $hy-border-margin-padding-sm;
     &__label {
       padding: $hy-border-margin-padding-base 0;
     }

package/components/hy-form/props.ts

@@ -8,8 +8,6 @@ const defaultProps: IProps = {
   borderBottom: false,
   right: false,
   itemHeight: 40,
-  shape: "square",
-  border: "surround",
   columns: [],
   formData: {},
 };

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

@@ -1,6 +1,12 @@
 import type { FormColumnsType } from "../../typing";
+import type HyInputProps from "../hy-input/typing";
+import type HyTextareaProps from "../hy-textarea/typing";
+import type HySwitchProps from "../hy-switch/typing";
+import type HyPickerProps from "../hy-picker/typing";
+import type HyRadioProps from "../hy-radio/typing";
+import type HyCheckButtonProps from "../hy-check-button/typing";
 
-export default interface IProps {
+export default interface HyFormProps {
   /**
    * @description 表单域提示文字的位置
    * left - 左侧
@@ -37,17 +43,29 @@ export default interface IProps {
    * */
   itemHeight?: number | string;
   /**
-   * @description 是否全部禁用
+   * @description 输入框属性api集合
    * */
-  disabled?: boolean;
+  input?: Partial<HyInputProps>;
   /**
-   * @description 输入框形状
+   * @description 文本域属性api集合
    * */
-  shape?: HyApp.ShapeType;
+  textarea?: Partial<HyTextareaProps>;
   /**
-   * @description 输入框边框
+   * @description 选择器属性api集合
    * */
-  border?: HyApp.BorderType;
+  picker?: Partial<HyPickerProps>;
+  /**
+   * @description 开关属性api集合
+   * */
+  switchItem?: Partial<HySwitchProps>;
+  /**
+   * @description 单选属性api集合
+   * */
+  radio?: Partial<HyRadioProps>;
+  /**
+   * @description 选择按钮属性api集合
+   * */
+  checkButton?: Partial<HyCheckButtonProps>;
   /**
    * @description 表单配置
    * */

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

@@ -10,12 +10,23 @@
       >
         <slot :record="item">
           <HyIcon
-            :name="item.icon"
-            :size="iconSize"
-            :round="round"
+            :name="item?.icon"
             label-pos="bottom"
-            :space="space"
-            :label="item.name"
+            :label="item?.name"
+            :space="item?.iconConfig?.space || iconConfig?.space || 12"
+            :color="item?.iconConfig?.color || iconConfig?.color"
+            :size="item?.iconConfig?.size || iconConfig?.size || 30"
+            :bold="item?.iconConfig?.bold || iconConfig?.bold"
+            :customPrefix="item?.iconConfig?.customPrefix"
+            :imgMode="item?.iconConfig?.imgMode || iconConfig?.imgMode"
+            :width="item?.iconConfig?.width || iconConfig?.width"
+            :height="item?.iconConfig?.height || iconConfig?.height"
+            :top="item?.iconConfig?.top || iconConfig?.top"
+            :stop="item?.iconConfig?.stop || iconConfig?.stop"
+            :round="item?.iconConfig?.round || iconConfig?.round || 6"
+            :customStyle="
+              item?.iconConfig?.customStyle || iconConfig?.customStyle
+            "
           ></HyIcon>
           <!--          <view class="hy-grid-item__title">{{ item.name }}</view>-->
         </slot>
@@ -24,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;