hy-app 0.2.12 → 0.2.13

package/component-helper.ts

@@ -0,0 +1,177 @@
+import fg from 'fast-glob'
+import { read, parse, vetur, webTypes, write, isString } from 'components-helper'
+import type {
+  Config,
+  InstallOptions,
+  NormalizeData,
+  Options,
+  ParseData,
+  ParseTable,
+} from 'components-helper'
+
+const config: Config = {
+  tags: 'tags.json',
+  attributes: 'attributes.json',
+  webTypes: 'web-types.json',
+  titleRegExp: /#+\s+(.*)\n+([^(#|\n)]*)/g,
+  tableRegExp: /#+\s+(.*)\n+(\|?.+\|.+)\n\|?\s*:?-+:?\s*\|.+((\n\|?.+\|.+)+)/g,
+  fileNameRegExp: /\/((\w|-)+)\.\w+$/,
+  separator: ',', // values截取
+  props: 'Props',
+  propsName: 'Prop name',
+  propsType: 'Type',
+  propsDescription: 'Description',
+  propsOptions: 'Values',
+  propsDefault: 'Default',
+  events: 'events',
+  eventsName: 'Event name',
+  eventsDescription: 'Description',
+  slots: 'slots',
+  slotsName: 'Name',
+  slotsDescription: 'Description',
+  slotsType: 'Type',
+  slotsSubtags: 'Subtags',
+  directives: 'directives',
+  directivesName: 'Name',
+  directivesType: 'Type',
+  directivesDescription: 'Description',
+}
+
+function normalize(options: Options, data: ParseData, path: string): NormalizeData {
+  const { fileNameRegExp, props, events, slots, directives } = options
+  const _fileNameRegExp = isString(fileNameRegExp) ? new RegExp(fileNameRegExp) : fileNameRegExp
+  const _path = path.match(_fileNameRegExp)
+  const fileName = _path ? _path[1] : ''
+  const _data: NormalizeData = Object.assign(data, { path, fileName })
+  const _props = new RegExp(props, 'i')
+  const _events = new RegExp(events, 'i')
+  const _slots = new RegExp(slots, 'i')
+  const _directives = new RegExp(directives, 'i')
+
+  if (!_data.table || !_data.table.length) return _data
+
+  for (let i = 0; i < _data.table.length; i++) {
+    const item = _data.table[i]
+    const title = item.title
+    if (!title) continue
+
+    if (_props.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'props',
+        regExp: _props,
+      })
+    } else if (_events.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'events',
+        regExp: _events,
+      })
+    } else if (_slots.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'slots',
+        regExp: _slots,
+      })
+    } else if (_directives.test(title)) {
+      setData({
+        data: _data,
+        item,
+        path,
+        fileName,
+        title,
+        key: 'directives',
+        regExp: _directives,
+      })
+    }
+  }
+  return _data
+}
+
+function setData({
+  data,
+  key,
+  item,
+  title,
+  path,
+  fileName,
+  regExp,
+}: {
+  data: NormalizeData
+  key: 'props' | 'events' | 'slots' | 'directives'
+  item: ParseTable
+  title: string
+  path: string
+  fileName: string
+  regExp: RegExp
+}) {
+  const childTitle = title.replace(regExp, '').trim()
+
+  if (childTitle) {
+    const childHeader = data.headers?.find((item) => item.title === childTitle)
+    const childItem = {
+      path,
+      fileName,
+      title: childTitle,
+      description: childHeader?.description || data.description,
+      [key]: item,
+    }
+
+    if (!data.children) {
+      data.children = [childItem]
+    } else {
+      const child = data.children.find((item) => item.title === childTitle)
+
+      if (child) {
+        child[key] = item
+      } else {
+        data.children.push(childItem)
+      }
+    }
+  } else {
+    data[key] = item
+  }
+}
+
+export function generateWebTypes(options = {} as InstallOptions) {
+  if (!options.entry) throw new Error('entry must be a string (non empty) or an array of strings')
+  if (!options.outDir) throw new Error('outDir must be a string (non empty)')
+  if (!options.name) console.warn('missing property "name"')
+  if (!options.version) console.warn('missing property "version"')
+
+  const _options: Options = Object.assign(config, options)
+  const files: string[] = fg.sync(_options.entry, _options.fastGlobConfig)
+  const data = files.map((path) => {
+    const fileContent = read(path)
+    const parseContent = parse(_options, fileContent)
+    const content = normalize(_options, parseContent, path)
+    if (content.title === 'hy-button') console.log(JSON.stringify(content))
+    return content
+  })
+  const { tags, attributes } = vetur(_options, data)
+  const webTypesData = webTypes(_options, data)
+  console.log(_options, data)
+
+  write(_options, 'tags', tags)
+  write(_options, 'attributes', attributes)
+  write(_options, 'webTypes', webTypesData)
+}
+
+generateWebTypes({
+  entry: './dist/docs/components/hy-button/hy-button.md', // 你的组件路径
+  outDir: 'dist', // 输出目录
+  name: 'hy-app', // 组件库名字
+  version: '0.2.10', // 版本号
+})

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

@@ -1,3 +1,7 @@
+<!--
+  @component hy-button 按钮组件
+  @description 用于页面中的操作按钮，支持多种状态和样式
+-->
 <template>
   <!-- #ifndef APP-NVUE -->
   <button
@@ -47,6 +51,7 @@
         :round="icon?.round"
         :customStyle="icon?.customStyle || { marginRight: '2px' }"
       ></HyIcon>
+      <!-- @slot 插入默认的值 -->
       <slot>
         <text class="hy-button__text" :style="[{ fontSize: textSize + 'px' }]">{{ text }}</text>
       </slot>
@@ -63,8 +68,8 @@
       !disabled && !loading && !color && (plain || type === 'info')
         ? 'hy-button--active--plain'
         : !disabled && !loading && !plain
-          ? 'hy-button--active'
-          : ''
+        ? 'hy-button--active'
+        : ''
     "
     @click="clickHandler"
     :class="bemClass"
@@ -114,6 +119,12 @@
 </template>
 
 <script lang="ts">
+/**
+ * 从底部弹出的动作菜单面板组件
+ *
+ * @displayName HyButton 动作面板
+ * @version 1.0.0
+ */
 export default {
   name: 'hy-button',
   options: {
@@ -125,12 +136,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-/**
- * 自定义按钮组件
- * @description 用于表单提交、操作触发等场景，支持多种尺寸和状态
- * @component hy-button
- */
-
 import { computed, type CSSProperties, toRefs } from 'vue'
 import { bem, throttle } from '../../utils'
 import defaultProps from './props'
@@ -140,35 +145,135 @@ import type { HyButtonProps, IButtonEmits } from './typing.d.ts'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
+import { HyApp } from 'hy-app/typing/modules/common'
 
-const props = withDefaults(defineProps<HyButtonProps>(), {
-  hairline: false,
-  type: 'primary',
-  size: 'medium',
-  shape: 'square',
-  plain: false,
-  disabled: false,
-  loading: false,
-  loadingText: '',
-  loadingMode: 'spinner',
-  loadingSize: 13,
-  openType: '',
-  formType: '',
-  appParameter: '',
-  hoverStopPropagation: true,
-  lang: 'en',
-  sessionFrom: '',
-  sendMessageTitle: '',
-  sendMessagePath: '',
-  sendMessageImg: '',
-  showMessageCard: false,
-  dataName: '',
-  throttleTime: 0,
-  hoverStartTime: 0,
-  hoverStayTime: 200,
-  text: '',
-  color: '',
-  stop: true,
+type MessageType = 'info' | 'primary' | 'error' | 'warning' | 'success'
+// const props = withDefaults(defineProps<{ type: MessageType }>(), { type: 'error' })
+const props = defineProps({
+  hairline: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['info', 'primary', 'error', 'warning', 'success'].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (v) => ['large', 'medium', 'small', 'mini'].includes(v),
+  },
+  shape: {
+    type: String,
+    default: 'square',
+    validator: (v) => ['circle', 'square'].includes(v),
+  },
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingText: {
+    type: String,
+    default: '',
+  },
+  loadingMode: {
+    type: String,
+    default: 'spinner',
+    validator: (v) => ['spinner', 'circle', 'semicircle'].includes(v),
+  },
+  loadingSize: {
+    type: Number,
+    default: 13,
+  },
+  openType: {
+    type: String,
+    default: '',
+  },
+  formType: {
+    type: String,
+    default: '',
+  },
+  appParameter: {
+    type: String,
+    default: '',
+  },
+  hoverStopPropagation: {
+    type: Boolean,
+    default: true,
+  },
+  lang: {
+    type: String,
+    default: 'en',
+  },
+  sessionFrom: {
+    type: String,
+    default: '',
+  },
+  sendMessageTitle: {
+    type: String,
+    default: '',
+  },
+  sendMessagePath: {
+    type: String,
+    default: '',
+  },
+  sendMessageImg: {
+    type: String,
+    default: '',
+  },
+  showMessageCard: {
+    type: Boolean,
+    default: false,
+  },
+  dataName: {
+    type: String,
+    default: '',
+  },
+  throttleTime: {
+    type: Number,
+    default: 0,
+  },
+  hoverStartTime: {
+    type: Number,
+    default: 0,
+  },
+  hoverStayTime: {
+    type: Number,
+    default: 200,
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: Object,
+    default: () => ({}),
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+  stop: {
+    type: Boolean,
+    default: true,
+  },
+  /**阻止事件冒泡*/
+  customStyle: {
+    type: CSSProperties,
+  },
+  /**阻止事件冒泡*/
+  customClass: {
+    type: String,
+  },
 })
 const { disabled, loading, throttleTime, stop, size, type, plain, color, icon } = toRefs(props)
 const emit = defineEmits<IButtonEmits>()

package/components/hy-button/props.ts

@@ -1,34 +1,160 @@
 import type { HyButtonProps } from './typing'
+import { HyApp } from 'hy-app/typing/modules/common'
+import type { CSSProperties } from 'vue'
 
-const defaultProps: HyButtonProps = {
-  hairline: false,
-  type: 'primary',
-  size: 'medium',
-  shape: 'square',
-  plain: false,
-  disabled: false,
-  loading: false,
-  loadingText: '',
-  loadingMode: 'spinner',
-  loadingSize: 13,
-  openType: '',
-  formType: '',
-  appParameter: '',
-  hoverStopPropagation: true,
-  lang: 'en',
-  sessionFrom: '',
-  sendMessageTitle: '',
-  sendMessagePath: '',
-  sendMessageImg: '',
-  showMessageCard: false,
-  dataName: '',
-  throttleTime: 0,
-  hoverStartTime: 0,
-  hoverStayTime: 200,
-  text: '',
-  icon: {},
-  color: '',
-  stop: true,
+const defaultProps = {
+  /**是否显示按钮的细边框*/
+  hairline: {
+    type: Boolean,
+    default: false,
+  },
+  /**按钮的预置样式*/
+  type: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['info', 'primary', 'error', 'warning', 'success'].includes(v),
+  },
+  /**按钮尺寸*/
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (v) => ['large', 'medium', 'small', 'mini'].includes(v),
+  },
+  /**按钮形状*/
+  shape: {
+    type: String,
+    default: 'square',
+    validator: (v) => ['circle', 'square'].includes(v),
+  },
+  /**按钮是否镂空，背景色透明 */
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  /**是否禁用*/
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**按钮名称前是否带 loading 图标*/
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**加载中提示文字*/
+  loadingText: {
+    type: String,
+    default: '',
+  },
+  /**加载状态图标类型*/
+  loadingMode: {
+    type: String,
+    default: 'spinner',
+    validator: (v) => ['spinner', 'circle', 'semicircle'].includes(v),
+  },
+  /**加载图标大小*/
+  loadingSize: {
+    type: Number,
+    default: 13,
+  },
+  /**开放能力，具体请看uniapp稳定关于button组件部分说明*/
+  openType: {
+    type: String,
+    default: '',
+  },
+  /**用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件*/
+  formType: {
+    type: String,
+    default: '',
+  },
+  /**打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）*/
+  appParameter: {
+    type: String,
+    default: '',
+  },
+  /**指定是否阻止本节点的祖先节点出现点击态，微信小程序有效*/
+  hoverStopPropagation: {
+    type: Boolean,
+    default: true,
+  },
+  /**指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）*/
+  lang: {
+    type: String,
+    default: 'en',
+  },
+  /**会话来源，openType="contact"时有效*/
+  sessionFrom: {
+    type: String,
+    default: '',
+  },
+  /**会话内消息卡片标题，openType="contact"时有效*/
+  sendMessageTitle: {
+    type: String,
+    default: '',
+  },
+  /**会话内消息卡片点击跳转小程序路径，openType="contact"时有效*/
+  sendMessagePath: {
+    type: String,
+    default: '',
+  },
+  /**会话内消息卡片图片，openType="contact"时有效*/
+  sendMessageImg: {
+    type: String,
+    default: '',
+  },
+  /**是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效*/
+  showMessageCard: {
+    type: Boolean,
+    default: false,
+  },
+  /**额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取*/
+  dataName: {
+    type: String,
+    default: '',
+  },
+  /**节流时间，一定时间内只能触发一次*/
+  throttleTime: {
+    type: Number,
+    default: 0,
+  },
+  /**按住后多久出现点击态，单位毫秒*/
+  hoverStartTime: {
+    type: Number,
+    default: 0,
+  },
+  /**手指松开后点击态保留时间，单位毫秒*/
+  hoverStayTime: {
+    type: Number,
+    default: 200,
+  },
+  /**按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）*/
+  text: {
+    type: String,
+    default: '',
+  },
+  /**按钮图标api集合*/
+  icon: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**按钮颜色，支持传入linear-gradient渐变色*/
+  color: {
+    type: String,
+    default: '',
+  },
+  /**阻止事件冒泡*/
+  stop: {
+    type: Boolean,
+    default: true,
+  },
+  /**阻止事件冒泡*/
+  customStyle: {
+    type: CSSProperties,
+  },
+  /**阻止事件冒泡*/
+  customClass: {
+    type: String,
+  },
 }
 
 export default defaultProps

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

@@ -1,25 +1,27 @@
 import type { CSSProperties } from 'vue'
 import type HyIconProps from '../hy-icon/typing'
+import HyApp from 'hy-app'
 
 export interface HyButtonProps {
   /**
-   * 是否显示按钮的细边框 (默认 true )
+   * 是否显示按钮的细边框
+   * @default true
+   * @type {boolean}
    * */
   hairline?: boolean
   /**
    * 按钮的预置样式
-   * @type ThemeType
+   * @type {ThemeType}
    * @default 'primary'
-   * @enum {string}      // 声明为枚举类型
    * @values info, primary, error, warning, success
    * */
-  type?: 'info' | 'primary' | 'error' | 'warning' | 'success'
+  type?: HyApp.ThemeType
   /**
    * 按钮尺寸
    * @type {'large' | 'medium' | 'small' | 'mini'}
    * @default 'medium'
    * */
-  size?: HyApp.SizeType | 'mini'
+  size?: 'large' | 'medium' | 'small' | 'mini'
   /**
    * 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
    * */
@@ -137,23 +139,27 @@ export interface IButtonEmits {
    * */
   (e: 'click', event: Event): void
   /**
-   * 点击按钮事件
+   * 仅限微信小程序，当使用开放能力时，发生错误的回调
+   * */
+  (e: 'error', event: Event): void
+  /**
+   * 微信小程序获取手机号
    * */
   (e: 'getphonenumber', event: Event): void
   /**
-   * 点击按钮事件
+   * 微信小程序用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
    * */
   (e: 'getuserinfo', event: Event): void
   /**
-   * 点击按钮事件
+   * 仅限微信小程序，在打开授权设置页并关闭后回调
    * */
   (e: 'opensetting', event: Event): void
   /**
-   * 点击按钮事件
+   * 仅限微信小程序，打开 APP 成功的回调
    * */
   (e: 'launchapp', event: Event): void
   /**
-   * 点击按钮事件
+   * 仅限微信小程序，用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效
    * */
   (e: 'agreeprivacyauthorization', event: Event): void
 }