hy-app 0.5.1 → 0.5.3

package/components/hy-form-group/index.scss

@@ -1,33 +0,0 @@
-@use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
-
-
-@include b(form) {
-  @include m(item) {
-    color: $hy-text-color;
-    display: flex;
-    //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;
-    }
-    &__container {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      &-content {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        .flex {
-          flex: 1;
-        }
-      }
-      &-warning {
-        color: $hy-error;
-        font-size: $hy-font-size-sm;
-      }
-    }
-  }
-}

package/components/hy-form-group/props.ts

@@ -1,15 +1,105 @@
-import type IProps from "./typing";
+import type { FormColumnsType } from '../../libs'
+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'
+import type { PropType } from 'vue'
 
-const defaultProps: IProps = {
-  labelPosition: "left",
-  labelWidth: "auto",
-  labelAlign: "left",
-  symbol: false,
-  borderBottom: false,
-  right: false,
-  itemHeight: 40,
-  columns: [],
-  formData: {},
-};
+const formGroupProps = {
+    /**
+     * 表单域提示文字的位置
+     * @values left, top
+     * */
+    labelPosition: {
+        type: String,
+        default: 'left'
+    },
+    /**
+     * label宽度
+     * */
+    labelWidth: {
+        type: [String, Number],
+        default: 'auto'
+    },
+    /**
+     * 是否右对齐
+     * */
+    right: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * label字体的对齐方式
+     * @values left,center,right
+     * */
+    labelAlign: {
+        type: String,
+        default: 'left'
+    },
+    /**
+     * 显示底部下划线
+     * */
+    border: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否全部禁用
+     * */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 输入框属性api集合
+     * */
+    input: {
+        type: Object as PropType<Partial<HyInputProps>>
+    },
+    /**
+     * 文本域属性api集合
+     * */
+    textarea: {
+        type: Array as PropType<Partial<HyTextareaProps>>
+    },
+    /**
+     * 选择器属性api集合
+     * */
+    picker: {
+        type: Array as PropType<Partial<HyPickerProps>>
+    },
+    /**
+     * 开关属性api集合
+     * */
+    switchItem: {
+        type: Array as PropType<Partial<HySwitchProps>>
+    },
+    /**
+     * 单选属性api集合
+     * */
+    radio: {
+        type: Array as PropType<Partial<HyRadioProps>>
+    },
+    /**
+     * 选择按钮属性api集合
+     * */
+    checkButton: {
+        type: Array as PropType<Partial<HyCheckButtonProps>>
+    },
+    /**
+     * 表单配置
+     * */
+    columns: {
+        type: Array as PropType<FormColumnsType[]>
+    },
+    /**
+     * 表单值
+     * */
+    formData: {
+        type: Object as PropType<Record<string, any>>
+    }
+}
 
-export default defaultProps;
+export default formGroupProps

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

@@ -1,77 +0,0 @@
-import type { FormColumnsType } from '../../libs'
-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 HyFormProps {
-    /**
-     * @description 表单域提示文字的位置
-     * left - 左侧
-     * top - 上方
-     * */
-    labelPosition?: 'left' | 'top'
-    /**
-     * @description label宽度
-     * 数字 - 固定值
-     * auto - 自适应
-     * */
-    labelWidth?: string | number
-    /**
-     * @description 是否右对齐
-     * */
-    right?: boolean
-    /**
-     * @description label字体的对齐方式
-     * left - 左对齐
-     * center - 中间对齐
-     * right - 右对齐
-     * */
-    labelAlign?: HyApp.RowCenterType
-    /**
-     * @description 显示冒号符号
-     * */
-    symbol?: boolean
-    /**
-     * @description 显示底部下划线
-     * */
-    borderBottom?: boolean
-    /**
-     * @description 当行内容高度
-     * */
-    itemHeight?: number | string
-    /**
-     * @description 输入框属性api集合
-     * */
-    input?: Partial<HyInputProps>
-    /**
-     * @description 文本域属性api集合
-     * */
-    textarea?: Partial<HyTextareaProps>
-    /**
-     * @description 选择器属性api集合
-     * */
-    picker?: Partial<HyPickerProps>
-    /**
-     * @description 开关属性api集合
-     * */
-    switchItem?: Partial<HySwitchProps>
-    /**
-     * @description 单选属性api集合
-     * */
-    radio?: Partial<HyRadioProps>
-    /**
-     * @description 选择按钮属性api集合
-     * */
-    checkButton?: Partial<HyCheckButtonProps>
-    /**
-     * @description 表单配置
-     * */
-    columns: FormColumnsType[]
-    /**
-     * @description 表单值
-     * */
-    formData: Record<string, any>
-}

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

@@ -1,10 +1,10 @@
 <template>
-    <view class="hy-form-item" :class="[`hy-form-item--${labelPosition}`]">
+    <view class="hy-form-item" :class="[`hy-form-item--${labelPos}`]">
         <view v-if="label" class="hy-form-item__label" :style="labelStyle">
             <text v-if="isRequired" class="hy-form-item__label--required">*</text>
             {{ label }}
         </view>
-        <view :class="['hy-form-item__content', formContext.border && 'hy-border__bottom']">
+        <view :class="['hy-form-item__content', formContext.border.value && 'hy-border__bottom']">
             <slot></slot>
         </view>
         <view v-if="errorMessage" class="hy-form-item__error">
@@ -98,7 +98,7 @@ const labelStyle = computed(() => {
 })
 
 // 标签位置
-const labelPosition = computed(() => {
+const labelPos = computed(() => {
     return formContext?.labelPosition?.value || 'left'
 })
 

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

@@ -1,5 +1,8 @@
 <template>
-    <view :class="['hy-input', inputClass]" :style="[wrapperStyle, borderStyle(focused)]">
+    <view
+        :class="['hy-input', inputClass, customClass]"
+        :style="[wrapperStyle, borderStyle(focused)]"
+    >
         <view class="hy-input__content">
             <view
                 class="hy-input__content--prefix-icon"
@@ -7,7 +10,7 @@
                 @tap.stop="onPrefix"
             >
                 <slot v-if="$slots.prefix" name="prefix"></slot>
-                <HyIcon
+                <hy-icon
                     v-else
                     :name="prefixIcon?.name"
                     :size="prefixIcon?.size"
@@ -21,7 +24,7 @@
                     :stop="prefixIcon?.stop"
                     :round="prefixIcon?.round"
                     :customStyle="prefixIcon?.customStyle"
-                ></HyIcon>
+                ></hy-icon>
             </view>
             <view class="hy-input__content--field-wrapper" @tap="clickHandler">
                 <!-- 根据uni-app的input组件文档，H5和APP中只要声明了password参数(无论true还是false)，type均失效，此时
@@ -29,7 +32,10 @@
 				 -->
                 <input
                     ref="input-native"
-                    class="hy-input__content--field-wrapper__field"
+                    :class="[
+                        'hy-input__content--field-wrapper__field',
+                        disabled && 'hy-input__disabled-text'
+                    ]"
                     :style="[inputStyle]"
                     :type="type"
                     :focus="focus"
@@ -58,12 +64,12 @@
                 />
             </view>
             <view class="hy-input__content--clear" v-if="isShowClear" @tap.stop="onClear">
-                <HyIcon
+                <hy-icon
                     :name="IconConfig.CLOSE"
                     size="11"
                     color="#ffffff"
                     :customStyle="{ lineHeight: '12px' }"
-                ></HyIcon>
+                ></hy-icon>
             </view>
             <view
                 class="hy-input__content--subfix-icon"
@@ -71,7 +77,7 @@
                 @tap.stop="onSuffix"
             >
                 <slot v-if="$slots.suffix" name="suffix"></slot>
-                <HyIcon
+                <hy-icon
                     v-else
                     :name="suffixIcon?.name"
                     :size="suffixIcon?.size"
@@ -85,7 +91,7 @@
                     :stop="suffixIcon?.stop"
                     :round="suffixIcon?.round"
                     :customStyle="suffixIcon?.customStyle"
-                ></HyIcon>
+                ></hy-icon>
             </view>
         </view>
     </view>
@@ -162,8 +168,8 @@ watch(
  * @description 是否显示清除控件
  * */
 const isShowClear = computed(() => {
-    const { clearable, readonly } = props
-    return clearable && !readonly && innerValue.value !== ''
+    const { clearable, readonly, disabled } = props
+    return clearable && !readonly && !disabled && innerValue.value !== ''
 })
 /**
  * @description 组件的类名

package/components/hy-input/index.scss

@@ -18,6 +18,10 @@
     :deep(.hy-icon) {
       color: $hy-text-color--disabled;
     }
+
+    &-text {
+      color: $hy-text-color--disabled !important;
+    }
   }
 
   @include e(no-radius){

package/components/hy-input/props.ts

@@ -151,7 +151,7 @@ const inputProps = {
      * @values surround,bottom,none
      * */
     border: {
-        type: String as PropType<HyApp.BorderType>,
+        type: String,
         default: 'surround'
     },
     /** 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 */
@@ -164,7 +164,7 @@ const inputProps = {
      * @values circle,square
      * */
     shape: {
-        type: String as PropType<HyApp.ShapeType>,
+        type: String,
         default: 'square'
     },
     /** 是否忽略组件内对文本合成系统事件的处理 */

package/components/hy-notice-bar/hy-column-notice.vue

@@ -1,101 +1,94 @@
 <template>
-  <view class="hy-notice" @tap="clickHandler">
-    <slot name="icon">
-      <view class="hy-notice__left-icon" v-if="icon">
-        <HyIcon :name="icon" :color="color" size="19"></HyIcon>
-        <!--        <HyIcon :name="icon" :color="color" size="19"></HyIcon>-->
-      </view>
-    </slot>
-    <swiper
-      :disable-touch="disableTouch"
-      :vertical="!step"
-      :circular="true"
-      :interval="duration"
-      :autoplay="true"
-      class="hy-notice__swiper"
-      @change="noticeChange"
-    >
-      <swiper-item
-        v-for="(item, index) in text"
-        :key="index"
-        class="hy-notice__swiper--item"
-        :style="{ justifyContent: justifyContent }"
-      >
-        <text class="hy-notice__swiper--item__text" :style="[textStyle]">{{
-          item
-        }}</text>
-      </swiper-item>
-    </swiper>
-    <view
-      class="hy-notice__right-icon"
-      v-if="['link', 'closable'].includes(mode)"
-    >
-      <HyIcon
-        v-if="mode === 'link'"
-        :name="IconConfig.RIGHT"
-        :size="17"
-        :color="color"
-      ></HyIcon>
-      <HyIcon
-        v-if="mode === 'closable'"
-        :name="IconConfig.CLOSE"
-        :size="16"
-        :color="color"
-        @click="close"
-      ></HyIcon>
+    <view class="hy-notice" @tap="clickHandler">
+        <slot name="icon">
+            <view class="hy-notice__left-icon" v-if="icon">
+                <hy-icon :name="icon" :color="color" size="19"></hy-icon>
+            </view>
+        </slot>
+        <swiper
+            :disable-touch="disableTouch"
+            :vertical="!step"
+            :circular="true"
+            :interval="duration"
+            :autoplay="true"
+            class="hy-notice__swiper"
+            @change="noticeChange"
+        >
+            <swiper-item
+                v-for="(item, index) in text"
+                :key="index"
+                class="hy-notice__swiper--item"
+                :style="{ justifyContent: justifyContent }"
+            >
+                <text class="hy-notice__swiper--item__text" :style="[textStyle]">{{ item }}</text>
+            </swiper-item>
+        </swiper>
+        <view class="hy-notice__right-icon" v-if="['link', 'closable'].includes(mode)">
+            <hy-icon
+                v-if="mode === 'link'"
+                :name="IconConfig.RIGHT"
+                :size="17"
+                :color="color"
+            ></hy-icon>
+            <hy-icon
+                v-if="mode === 'closable'"
+                :name="IconConfig.CLOSE"
+                :size="16"
+                :color="color"
+                @click="close"
+            ></hy-icon>
+        </view>
     </view>
-  </view>
 </template>
 
 <script setup lang="ts">
-import { type CSSProperties, toRefs, computed, ref, watch } from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { addUnit, error, IconConfig } from "../../libs";
+import { type CSSProperties, toRefs, computed, ref, watch } from 'vue'
+import noticeBarProps from './props'
+import { addUnit, error, IconConfig } from '../../libs'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { text, fontSize, color } = toRefs(props);
-const emit = defineEmits(["click", "close"]);
+const props = defineProps(noticeBarProps)
+const { text, fontSize, color } = toRefs(props)
+const emit = defineEmits(['click', 'close'])
 
-const index = ref(0);
+const index = ref(0)
 
 watch(
-  () => text.value,
-  (newVal) => !Array.isArray(newVal) && error("传入值必须是数组"),
-  { immediate: true },
-);
+    () => text.value,
+    (newVal) => !Array.isArray(newVal) && error('传入值必须是数组'),
+    { immediate: true }
+)
 
 /**
  * @description 文字内容的样式
  * */
 const textStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {};
-  style.color = color.value;
-  style.fontSize = addUnit(fontSize.value);
-  return style;
-});
+    let style: CSSProperties = {}
+    style.color = color.value
+    style.fontSize = addUnit(fontSize.value)
+    return style
+})
 
 const noticeChange = (e: any) => {
-  index.value = e.detail.current;
-};
+    index.value = e.detail.current
+}
 
 /**
  * @description 点击通告栏
  * */
 const clickHandler = (index: number) => {
-  emit("click", index);
-};
+    emit('click', index)
+}
 /**
  * @description 点击关闭按钮
  * */
 const close = () => {
-  emit("close");
-};
+    emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>