hy-app 0.2.16 → 0.3.0

package/components/hy-textarea/hy-textarea.vue

@@ -6,7 +6,7 @@
     <textarea
       class="hy-textarea--field"
       :value="innerValue"
-      :style="{ height: addUnit(height) }"
+      :style="{ height: autoHeight ? 'auto' : addUnit(height) }"
       :placeholder="placeholder || ''"
       :placeholder-style="placeholderStyle"
       :placeholder-class="placeholderClass"
@@ -46,11 +46,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 用于输入多行文本信息,聊天输入框等。
- * @displayName hy-textarea
- */
-defineOptions({})
 export default {
   name: 'hy-textarea',
   options: {
@@ -62,10 +57,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRefs, watch, nextTick } from 'vue'
+import { computed, ref, toRefs, watch, nextTick, inject } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import type { ITextareaEmits } from './typing'
 import { addUnit } from '../../utils'
+import { FormItemContext } from '@/package/components/hy-form-item/typing'
+
+/**
+ * 用于输入多行文本信息,聊天输入框等。
+ * @displayName hy-textarea
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -176,6 +178,7 @@ const props = defineProps({
 })
 const { modelValue, customStyle, border, disabled, formatter } = toRefs(props)
 const emit = defineEmits<ITextareaEmits>()
+const formItem = inject<FormItemContext>('formItem')
 
 // 输入框的值
 const innerValue = ref<string>('')
@@ -248,16 +251,17 @@ const onFocus = (e: FocusEvent) => {
   isFocus.value = true
   emit('focus', e)
 }
-const onBlur = (e: FocusEvent) => {
+const onBlur = (e: any) => {
   isFocus.value = false
   emit('blur', e)
+  formItem.handleBlur(e.detail.value)
   // 尝试调用u-form的验证方法
   // formValidate(this, "blur");
 }
-const onLinechange = (e: Event) => {
-  emit('linechange', e)
+const onLinechange = (e: any) => {
+  emit('lineChange', e)
 }
-const onInput = (e: Event) => {
+const onInput = (e: any) => {
   let { value } = e?.detail
   // 格式化过滤方法
   const format = formatter.value || innerFormatter
@@ -279,8 +283,7 @@ const valueChange = () => {
     // 标识value值的变化是由内部引起的
     changeFromInner.value = true
     emit('change', value)
-    // 尝试调用u-form的验证方法
-    // formValidate(this, "change");
+    formItem.handleChange(value)
   })
 }
 const onConfirm = (e: Event) => {

package/components/hy-textarea/index.scss

@@ -6,7 +6,12 @@
   position: relative;
   @include flex;
   flex: 1;
-  padding: $hy-border-margin-padding-base;
+  padding: $hy-border-margin-padding-sm;
+
+  @include m(field) {
+    min-height: 50rpx;
+    max-height: 200rpx;
+  }
 
   @include m(radius) {
     border-radius: $hy-border-radius-sm;
@@ -36,4 +41,4 @@
     padding: 1px 4px;
     border-radius: $hy-border-radius-sm;
   }
-}
+}

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

@@ -36,7 +36,7 @@ export interface ITextareaEmits {
   /** 点击完成时， 触发 confirm 事件 */
   (e: 'confirm', event: any): void
   /** 输入框行数变化时调用 */
-  (e: 'linechange'): void
+  (e: 'lineChange', event: any): void
   /** 当键盘输入时，触发 input 事件 */
   (e: 'update:modelValue', value: string): void
   /** 键盘高度发生变化的时候触发此事件 */

package/components/hy-toast/hy-toast.vue

@@ -1,17 +1,11 @@
 <template>
-  <HyOverlay
-    :show="isShow"
-    :zIndex="tmpConfig.overlay ? 10070 : -1"
-    :custom-style="overlayStyle"
-  >
+  <HyOverlay :show="isShow" :zIndex="tmpConfig.overlay ? 10070 : -1" :custom-style="overlayStyle">
     <view
       :style="[contentStyle]"
       :class="[
         'hy-toast__content',
         'hy-toast--' + tmpConfig.type,
-        tmpConfig.type === 'loading' || tmpConfig.loading
-          ? 'hy-toast__content--loading'
-          : '',
+        tmpConfig.type === 'loading' || tmpConfig.loading ? 'hy-toast__content--loading' : '',
       ]"
     >
       <HyLoading
@@ -30,13 +24,11 @@
         :customStyle="iconStyle"
       ></HyIcon>
       <text
-        :class="[
-          'hy-toast__content__text',
-          'hy-toast__content__text--' + tmpConfig.type,
-        ]"
+        :class="['hy-toast__content__text', 'hy-toast__content__text--' + tmpConfig.type]"
         style="max-width: 400rpx"
-        >{{ tmpConfig.message }}</text
       >
+        {{ tmpConfig.message }}
+      </text>
     </view>
   </HyOverlay>
 </template>
@@ -47,140 +39,145 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, reactive, ref, toRefs } from "vue";
-import type ToastParamsVo from "./typing";
-import { getWindowInfo, hexToRgb } from "../../utils";
-import { ColorConfig, iconName } from "../../config";
+import { computed, type CSSProperties, reactive, ref } from 'vue'
+import type ToastParamsVo from './typing'
+import { getWindowInfo, hexToRgb } from '../../utils'
+import { ColorConfig, iconName } from '../../config'
 
 // 组件
-import HyOverlay from "../hy-overlay/hy-overlay.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyLoading from "../hy-loading/hy-loading.vue";
+import HyOverlay from '../hy-overlay/hy-overlay.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
+
+/**
+ * Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们为其提供了多种丰富的API。
+ * @displayName hy-toast
+ */
+defineOptions({})
 
-const isShow = ref(false);
-const tmpConfig = ref<ToastParamsVo>({});
+const isShow = ref(false)
+const tmpConfig = ref<ToastParamsVo>({})
 const config: ToastParamsVo = reactive({
-  message: "",
-  type: "info",
+  message: '',
+  type: 'info',
   duration: 2000,
   icon: false,
-  position: "center",
+  position: 'center',
   complete: null,
   overlay: true,
   loading: false,
-});
-let timer: any = null;
+})
+let timer: any = null
 
 const isThemeType = (type: string): boolean =>
-  ["error", "warning", "success", "primary", "info"].includes(type);
+  ['error', 'warning', 'success', 'primary', 'info'].includes(type)
 
 const overlayStyle = computed(() => {
   const style: CSSProperties = {
-    justifyContent: "center",
-    alignItems: "center",
-    display: "flex",
-  };
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+  }
   // 将遮罩设置为100%透明度，避免出现灰色背景
-  style.backgroundColor = "rgba(0, 0, 0, 0)";
-  return style;
-});
+  style.backgroundColor = 'rgba(0, 0, 0, 0)'
+  return style
+})
 
 const iconNameCom = computed(() => {
   // 只有不为none，并且type为error|warning|succes|info时候，才显示图标
   if (!tmpConfig.value.icon || !tmpConfig.value.type) {
-    return "";
+    return ''
   }
   if (tmpConfig.value.icon === true) {
     if (isThemeType(tmpConfig.value.type)) {
-      return iconName(tmpConfig.value.type);
+      return iconName(tmpConfig.value.type)
     } else {
-      return "";
+      return ''
     }
   } else {
-    return tmpConfig.value.icon;
+    return tmpConfig.value.icon
   }
-});
+})
 const iconStyle = computed(() => {
-  const style: CSSProperties = {};
+  const style: CSSProperties = {}
   // 图标需要一个右边距，以跟右边的文字有隔开的距离
-  style.marginRight = "4px";
-  return style;
-});
+  style.marginRight = '4px'
+  return style
+})
 
 /**
  * @description 内容盒子的样式
  * */
 const contentStyle = computed(() => {
   const windowHeight = getWindowInfo().windowHeight,
-    style: CSSProperties = {};
-  let value = 0;
+    style: CSSProperties = {}
+  let value = 0
   // 根据top和bottom，对Y轴进行窗体高度的百分比偏移
-  if (tmpConfig.value.position === "top") {
-    value = -windowHeight * 0.25;
-  } else if (tmpConfig.value.position === "bottom") {
-    value = windowHeight * 0.25;
+  if (tmpConfig.value.position === 'top') {
+    value = -windowHeight * 0.25
+  } else if (tmpConfig.value.position === 'bottom') {
+    value = windowHeight * 0.25
   }
-  style.transform = `translateY(${value}px)`;
-  return style;
-});
+  style.transform = `translateY(${value}px)`
+  return style
+})
 
 const loadingIconColor = computed(() => {
-  let colorTmp = "rgb(255, 255, 255)";
+  let colorTmp = 'rgb(255, 255, 255)'
   if (isThemeType(tmpConfig.value.type)) {
     // loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
     // 必须为rgb格式的，所以这里做一个处理
-    colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type]) as string;
+    colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type]) as string
   }
-  return colorTmp;
-});
+  return colorTmp
+})
 
 /**
  * @description 显示toast组件，由父组件通过xxx.show(options)形式调用
  * */
 const show = (options: ToastParamsVo) => {
   // 不将结果合并到this.config变量，避免多次调用u-toast，前后的配置造成混乱
-  tmpConfig.value = Object.assign(config, options);
+  tmpConfig.value = Object.assign(config, options)
   // 清除定时器
-  clearTimer();
-  isShow.value = true;
+  clearTimer()
+  isShow.value = true
   // -1时不自动关闭
   if (tmpConfig.value.duration !== -1) {
     timer = setTimeout(() => {
       // 倒计时结束，清除定时器，隐藏toast组件
-      clearTimer();
+      clearTimer()
       // 判断是否存在callback方法，如果存在就执行
-      typeof tmpConfig.value.complete === "function" &&
-        tmpConfig.value.complete();
-    }, tmpConfig.value.duration);
+      typeof tmpConfig.value.complete === 'function' && tmpConfig.value.complete()
+    }, tmpConfig.value.duration)
   }
-};
+}
 
 // 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
 const hide = () => {
-  clearTimer();
-};
+  clearTimer()
+}
 /**
  * @description 清除定时任务
  * */
 const clearTimer = () => {
-  isShow.value = false;
+  isShow.value = false
   // 清除定时器
-  clearTimeout(timer);
-  timer = null;
-};
+  clearTimeout(timer)
+  timer = null
+}
 
 defineExpose({
   show,
   hide,
-});
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-tooltip/hy-tooltip.vue

@@ -89,11 +89,6 @@
 </template>
 
 <script lang="ts">
-/**
- * Tooltip组件主要用于长按操作，类似微信的长按气泡
- * @displayName hy-tooltip
- */
-defineOptions({})
 export default {
   name: 'hy-tooltip',
   options: {
@@ -105,15 +100,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  toRefs,
-  ref,
-  onMounted,
-  getCurrentInstance,
-  type PropType,
-} from 'vue'
+import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import type { ITooltipEmits } from './typing'
 import { addUnit, getRect, guid, sleep } from '../../utils'
 
@@ -122,6 +110,12 @@ import HyOverlay from '../hy-overlay/hy-overlay.vue'
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyLine from '../hy-line/hy-line.vue'
 
+/**
+ * Tooltip组件主要用于长按操作，类似微信的长按气泡
+ * @displayName hy-tooltip
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 需要显示的提示文字 */

package/components/hy-transition/hy-transition.vue

@@ -12,11 +12,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件用于组件的动画过渡效果。
- * @displayName hy-transition
- */
-defineOptions({})
 export default {
   name: 'hy-transition',
   options: {
@@ -28,10 +23,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, ref, watch, nextTick, toRefs, PropType } from 'vue'
+import { computed, ref, watch, nextTick, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { sleep } from '../../utils'
 import type { ITransitionEmits } from './typing'
 
+/**
+ * 该组件用于组件的动画过渡效果。
+ * @displayName hy-transition
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否展示组件 */

package/components/hy-upload/hy-upload.vue

@@ -96,11 +96,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件用于上传图片或者视频等场景
- * @displayName hy-upload
- */
-defineOptions({})
 export default {
   name: 'hy-upload',
   options: {
@@ -121,6 +116,12 @@ import { IconConfig } from '../../config'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 该组件用于上传图片或者视频等场景
+ * @displayName hy-upload
+ */
+defineOptions({})
+
 const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   accept,

package/components/hy-warn/hy-warn.vue

@@ -51,11 +51,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 警告提示，展现需要关注的信息
- * @displayName hy-warn
- */
-defineOptions({})
 export default {
   name: 'hy-warn',
   options: {
@@ -72,11 +67,16 @@ import type { CSSProperties, PropType } from 'vue'
 import type { IWarnEmits } from './typing'
 import { addUnit } from '../../utils'
 import { IconConfig, iconName } from '../../config'
-
 // 组件
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 警告提示，展现需要关注的信息
+ * @displayName hy-warn
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 显示的文字 */

package/components/hy-waterfall/hy-waterfall.vue

@@ -10,13 +10,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。
- * 相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，
- * uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
- * @displayName hy-waterfall
- */
-defineOptions({})
 export default {
   name: 'hy-waterfall',
   options: {
@@ -31,6 +24,14 @@ export default {
 import { computed, getCurrentInstance, ref, toRefs, watch } from 'vue'
 import { getRect, isArray } from '../../utils'
 
+/**
+ * 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。
+ * 相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，
+ * uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
+ * @displayName hy-waterfall
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 数据列表 */

package/components/hy-watermark/hy-watermark.vue

@@ -15,11 +15,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。
- * @displayName hy-watermark
- */
-defineOptions({})
 export default {
   name: 'hy-watermark',
   options: {
@@ -31,15 +26,24 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, nextTick, type CSSProperties, toRefs } from 'vue'
+import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
 import { addUnit, guid } from '../../utils'
 
+/**
+ * 在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。
+ * @displayName hy-watermark
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 显示内容 */
   content: String,
   /** 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片） */
-  image: String,
+  image: {
+    type: String,
+    default: '',
+  },
   /** 图片高度 */
   imageHeight: {
     type: Number,
@@ -86,9 +90,15 @@ const props = defineProps({
     default: 14,
   },
   /** 水印字体样式（仅微信和h5支持） */
-  fontStyle: String,
+  fontStyle: {
+    type: String,
+    default: '',
+  },
   /** 水印字体的粗细 */
-  fontWeight: String,
+  fontWeight: {
+    type: String,
+    default: '',
+  },
   /** 水印字体系列（仅微信和h5支持） */
   fontFamily: {
     type: String,
@@ -507,7 +517,7 @@ function drawTextOffScreen(
   ctx.textAlign = 'center'
   ctx.translate(contentWidth / 2, contentWidth / 2)
   ctx.rotate((Math.PI / 180) * rotate)
-  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px/${contentHeight}px ${fontFamily}`
+  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`
   ctx.fillStyle = color
   ctx.fillText(content, 0, 0)
   ctx.restore()

package/components/index.ts

@@ -19,7 +19,9 @@ import HyDropdownItem from './hy-dropdown-item/hy-dropdown-item.vue'
 import YkEmpty from './hy-empty/hy-empty.vue'
 import YkFloatButton from './hy-float-button/hy-float-button.vue'
 import HyFoldingPanel from './hy-folding-panel/hy-folding-panel.vue'
-import HyForm from './hy-form/hy-form.vue'
+import HyForm from '@/package/components/hy-form-group/hy-form.vue'
+import HyFormSimple from '@/package/components/hy-form/hy-form-simple.vue'
+import HyFormItem from './hy-form-item/hy-form-item.vue'
 import HyGrid from './hy-grid/hy-grid.vue'
 import HyIcon from './hy-icon/hy-icon.vue'
 import HyImage from './hy-image/hy-image.vue'
@@ -80,6 +82,8 @@ const install = (Vue: any) => {
   Vue.component('YkFloatButton', YkFloatButton)
   Vue.component('HyFoldingPanel', HyFoldingPanel)
   Vue.component('HyForm', HyForm)
+  Vue.component('HyFormSimple', HyFormSimple)
+  Vue.component('HyFormItem', HyFormItem)
   Vue.component('HyGrid', HyGrid)
   Vue.component('HyIcon', HyIcon)
   Vue.component('HyImage', HyImage)
@@ -139,6 +143,8 @@ export {
   YkFloatButton,
   HyFoldingPanel,
   HyForm,
+  HyFormSimple,
+  HyFormItem,
   HyGrid,
   HyIcon,
   HyImage,

package/global.d.ts

@@ -24,7 +24,9 @@ declare module 'vue' {
     HyEmpty: (typeof import('./components/hy-empty/hy-empty.vue'))['default']
     HyFloatButton: (typeof import('./components/hy-float-button/hy-float-button.vue'))['default']
     HyFloatingPanel: (typeof import('./components/hy-floating-panel/hy-floating-panel.vue'))['default']
-    HyForm: (typeof import('./components/hy-form/hy-form.vue'))['default']
+    HyForm: (typeof import('@/package/components/hy-form-group/hy-form.vue'))['default']
+    HyFormItem: (typeof import('./components/hy-form-item/hy-form-item.vue'))['default']
+    HyFormGroup: (typeof import('./components/hy-form-group/hy-form-group.vue'))['default']
     HyGrid: (typeof import('./components/hy-grid/hy-grid.vue'))['default']
     HyIcon: (typeof import('./components/hy-icon/hy-icon.vue'))['default']
     HyImage: (typeof import('./components/hy-image/hy-image.vue'))['default']

package/libs/css/common.scss

@@ -31,3 +31,8 @@
   color: transparent;
   display:none;
 }
+
+/* 去除原生按钮边框 */
+button:after {
+  border: none;
+}

package/libs/css/mixin.scss

@@ -11,6 +11,7 @@
   }
 }
 
+/* 加上-- */
 @mixin m($modifier) {
   $selector: &;
   $currentSelector: '';
@@ -29,7 +30,7 @@
   }
 }
 
-/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+/* 定义元素（e）__，对于伪类，会自动将 e 嵌套在 伪类 底下 */
 @mixin e($element...) {
   $selector: &;
   $selectors: "";

package/libs/css/vars.css

@@ -21,7 +21,7 @@
   --hy-background--active: #FFFFFF;
   --hy-background--close:  #f0f0f0;
 
-  --hy-border-line: 1rpx solid #c2c2c4;
+  --hy-border-line: 1rpx solid #e8e8e8;
   --hy-border-color: #c2c2c4;
   --hy-border-color--2: #c9cacc;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.2.16",
-  "description": "组件提示第一版",
+  "version": "0.3.0",
+  "description": "添加分离式表单组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/theme.scss

@@ -88,4 +88,4 @@ $hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default
 $hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
 $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: var(--hy-border-line, 1px solid #c2c2c4) !default;
+$hy-border-line: var(--hy-border-line, 1rpx solid rgba(0, 0, 0, 0.02)) !default;