hy-app 0.2.11 → 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-action-sheet/hy-action-sheet.vue

@@ -1,3 +1,6 @@
+<docs>
+从底部弹出的动作菜单面板。
+</docs>
 <template>
   <view>
     <HyPopup
@@ -102,10 +105,13 @@ export default {
 </script>
 
 <script lang="ts" setup>
+/**
+ * 按钮组件，用于触发操作，如提交表单或打开链接
+ */
 import { watch, ref } from 'vue'
 import { isArray } from '../../utils'
 import defaultProps from './props'
-import IProps, { IActionSheetPanel } from './typing'
+import type { IActionSheetPanel, IActionSheetEmits, HyActionSheetProps } from './typing.d.ts'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -113,8 +119,8 @@ import HyPopup from '../hy-popup/hy-popup.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 import HyButton from '../hy-button/hy-button.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
-const emit = defineEmits(['select', 'cancel', 'close', 'open', 'update:modelValue'])
+const props = withDefaults(defineProps<HyActionSheetProps>(), defaultProps)
+const emit = defineEmits<IActionSheetEmits>()
 
 const formatPanels = ref<Array<IActionSheetPanel> | Array<IActionSheetPanel[]>>([])
 const showPopup = ref<boolean>(false)

package/components/hy-action-sheet/props.ts

@@ -1,6 +1,6 @@
-import type IProps from './typing'
+import type { HyActionSheetProps } from './typing'
 
-const defaultProps: IProps = {
+const defaultProps: HyActionSheetProps = {
   modelValue: false,
   actions: [],
   panels: [],

package/components/hy-action-sheet/typing.d.ts

@@ -32,65 +32,98 @@ export interface IActionSheetPanel {
    */
   name: string
 }
-export default interface HyActionSheetProps {
+export interface HyActionSheetProps {
   /**
-   * @description 操作菜单是否展示 ( 默认 false )
+   * 操作菜单是否展示 ( 默认 false )
    * */
   modelValue?: boolean
   /**
-   * @description 菜单选项
+   * 菜单选项
    * */
   actions?: IActionSheetAction[]
   /**
-   * @description 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
+   * 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
    * */
   panels?: Array<IActionSheetPanel | IActionSheetPanel[]>
   /**
-   * @description 圆角值 (默认 20 )
+   * 圆角值 (默认 20 )
    * */
   round?: string | number
   /**
-   * @description 标题
+   * 标题
    * */
   title?: string
   /**
-   * @description 标题文字位置
+   * 标题文字位置
    * */
   titleAlign?: HyApp.RowCenterType
   /**
-   * @description 取消按钮的提示文字,不为空时显示按钮
+   * 取消按钮的提示文字,不为空时显示按钮
    * */
   cancelText?: string
   /**
-   * @description 点击某个菜单项时是否关闭弹窗 （默认 true ）
+   * 点击某个菜单项时是否关闭弹窗 （默认 true ）
    * */
   closeOnClickAction?: boolean
   /**
-   * @description 点击遮罩是否允许关闭  (默认 true )
+   * 点击遮罩是否允许关闭  (默认 true )
    * */
   closeOnClickOverlay?: boolean
   /**
-   * @description 弹框动画持续时间 ( 默认 200 )
+   * 弹框动画持续时间 ( 默认 200 )
    * */
   duration?: number
   /**
-   * @description 菜单层级 ( 默认 100 )
+   * 菜单层级 ( 默认 100 )
    * */
   zIndex?: number
   /**
-   * @description 处理底部安全区 （默认 true ）
+   * 处理底部安全区 （默认 true ）
    * */
   safeAreaInsetBottom?: boolean
   /**
-   * @description 自定义外部样式
+   * 自定义外部样式
    * */
   customStyle?: CSSProperties
   /**
-   * @description 自定义外部类名
+   * 自定义外部类名
    * */
   customClass?: string
   /**
-   * @description 自定义标题类名
+   * 自定义标题类名
    * */
   customHeaderClass?: string
 }
+
+interface SelectEventParams {
+  /**
+   * 选中的内容
+   * */
+  item: any
+  /**
+   * 选中的横向索引
+   * */
+  rowIndex?: number
+  /**
+   * 选中的竖列索引
+   * */
+  colIndex?: number
+  /**
+   * 选中的索引
+   * */
+  index?: number
+}
+export interface IActionSheetEmits {
+  /** 选中了某个动作时触发 */
+  (e: 'select', params: SelectEventParams): void
+  /** 点击取消按钮时触发 */
+  (e: 'cancel'): void
+  /** 点击遮罩或关闭按钮时触发 */
+  (e: 'close'): void
+  /** 打开面板时触发 */
+  (e: 'open'): void
+  /**
+   * 手动更新弹窗显示隐藏
+   * */
+  (e: 'update:modelValue', visible: boolean): void
+}

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: {
@@ -129,23 +140,143 @@ import { computed, type CSSProperties, toRefs } from 'vue'
 import { bem, throttle } from '../../utils'
 import defaultProps from './props'
 import { ColorConfig } from '../../config'
-import type IProps from './typing'
+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<IProps>(), defaultProps)
+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([
-  'click',
-  'getphonenumber',
-  'getuserinfo',
-  'error',
-  'opensetting',
-  'launchapp',
-  'agreeprivacyauthorization',
-])
+const emit = defineEmits<IButtonEmits>()
 
 const textColor = (ColorConfig as any)[type.value]