@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/resolver/src/index.ts

@@ -0,0 +1,101 @@
+import type { ComponentResolver, SideEffectsInfo, ComponentInfo } from 'unplugin-vue-components'
+
+function kebabCase(key: string) {
+  const result = key.replace(/([A-Z])/g, ' $1').trim()
+  return result.split(' ').join('-').toLowerCase()
+}
+
+export interface PlusProComponentsResolverOptions {
+  /**
+   * @default false
+   */
+  ssr?: boolean
+  /**
+   * import style css or less with components
+   *
+   * @default 'css'
+   */
+  importStyle?: boolean | 'css' | 'scss'
+
+  /**
+   * exclude component name, if match do not resolve the name
+   */
+  exclude?: RegExp
+
+  /**
+   * a list of component names that have no styles, so resolving their styles file should be prevented
+   */
+  noStylesComponents?: string[]
+}
+
+function getSideEffects(
+  name: string,
+  options: PlusProComponentsResolverOptions,
+  module: 'es' | 'lib'
+): SideEffectsInfo | undefined {
+  const { importStyle } = options
+  const filename = kebabCase(name)
+  const noPrefixFilename = filename.replace('plus-', '')
+
+  const componentsFolder = `@wlydfe/pro-ui/${module}/components/${noPrefixFilename}/style`
+
+  if (importStyle === 'scss') {
+    return `${componentsFolder}/index`
+  } else if (importStyle === 'css') {
+    return `${componentsFolder}/css`
+  }
+}
+
+function resolveComponent(
+  name: string,
+  options: PlusProComponentsResolverOptions
+): ComponentInfo | undefined {
+  /**
+   * exclude
+   */
+  if (options.exclude && name.match(options.exclude)) return
+  /**
+   * Exclusion of non-compliance with the pro-ui naming convention
+   */
+  if (!name.match(/^Plus[A-Z]/)) return
+
+  /**
+   * module
+   */
+  const module = options.ssr ? 'lib' : 'es'
+
+  return {
+    name,
+    from: `@wlydfe/pro-ui/${module}`,
+    sideEffects: getSideEffects(name, options, module)
+  }
+}
+
+export function PlusProComponentsResolver(
+  options: PlusProComponentsResolverOptions = {}
+): ComponentResolver {
+  let optionsResolved: PlusProComponentsResolverOptions
+  function resolveOptions() {
+    if (optionsResolved) return optionsResolved
+    optionsResolved = {
+      importStyle: 'css',
+      ssr: false,
+      exclude: undefined,
+      noStylesComponents: options.noStylesComponents || [],
+      ...options
+    }
+    return optionsResolved
+  }
+
+  return (name: string) => {
+    const options = resolveOptions()
+    if ([...(options.noStylesComponents as string[])].includes(name)) {
+      /**
+       * Components without styles, importStyle default is `false`
+       */
+      return resolveComponent(name, { ...options, importStyle: false })
+    } else {
+      return resolveComponent(name, options)
+    }
+  }
+}

package/packages/resolver/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": ["dom", "esnext"],
+    "removeComments": false,
+    "module": "CommonJS",
+    "declaration": false,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/packages/resolver/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'], // 生成 CommonJS 和 ES Module 格式
+  dts: true, // 生成 TypeScript 定义文件
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  outDir: 'dist',
+  external: ['unplugin-vue-components'],
+  target: 'es2015',
+  minify: false
+})

package/packages/theme-chalk/build.ts

@@ -0,0 +1,76 @@
+import path from 'path'
+import { writeFile, mkdir, access } from 'fs/promises'
+import autoprefixer from 'autoprefixer'
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
+import { compile } from 'sass'
+import cssnano from 'cssnano'
+import glob from 'fast-glob'
+import { copy } from 'fs-extra'
+import consola from 'consola'
+
+const pcOutput = path.resolve('../../dist/plus-pro-components')
+
+const isDev = process.env.PLUS_THEME_CHALK_DEV === 'true'
+
+const resolve = (...dir: string[]) => path.resolve(__dirname, ...dir)
+const styleRoot = resolve('./src')
+const distFolder = path.resolve(__dirname, 'dist')
+const distBundle = path.resolve(pcOutput, 'theme-chalk')
+
+const main = async () => {
+  /**
+   * 加载./src下所有scss文件
+   */
+  const files = await glob([`*.scss`], {
+    cwd: resolve(styleRoot),
+    absolute: true
+  })
+
+  /**
+   * 生成./dist文件夹
+   */
+  try {
+    await access(distFolder)
+  } catch (error) {
+    await mkdir(distFolder)
+  }
+
+  for (const item of files) {
+    const content = compile(item)
+    const { name } = path.parse(item)
+    const plugins = [postcssNested as any, autoprefixer]
+
+    // 生产环境开启压缩
+    if (!isDev) {
+      plugins.push(cssnano)
+    }
+
+    const result = await postcss(plugins).process(content.css, { from: undefined })
+    const filename = name === 'index' ? 'index.css' : `plus-${name}.css`
+    await writeFile(resolve(distFolder, filename), result.css)
+  }
+
+  /**
+   * 复制./src的文件到 ./dist/src
+   */
+  await copy(styleRoot, resolve(distFolder, 'src'))
+
+  /**
+   * 复制打包后的文件./dist到/dist/plus-pro-components/theme-chalk
+   */
+  await copy(distFolder, resolve(distBundle))
+
+  /**
+   * 复制打包后的./dist/index.css文件到/dist/plus-pro-components/index.css
+   */
+  await copy(resolve(distFolder, 'index.css'), resolve(pcOutput, 'index.css'))
+}
+
+main()
+  .then(() => {
+    consola.success(`Successfully build theme-chalk!`)
+  })
+  .catch(err => {
+    consola.error(err)
+  })

package/packages/theme-chalk/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@wlydfe/pro-ui-theme-chalk",
+  "private": true,
+  "version": "0.0.1",
+  "description": "plus-pro-components theme-chalk",
+  "license": "MIT",
+  "main": "index.css",
+  "unpkg": "index.css",
+  "jsdelivr": "index.css",
+  "scripts": {
+    "clean": "rimraf dist",
+    "dev": "cross-env PLUS_THEME_CHALK_DEV=true  tsx watch ./build.ts ",
+    "build": "tsx ./build.ts"
+  },
+  "devDependencies": {
+    "sass": "^1.69.4",
+    "postcss": "^8.4.31",
+    "postcss-nested": "^6.0.1",
+    "postcss-scss": "^4.0.9"
+  }
+}

package/packages/types/form.ts

@@ -0,0 +1,465 @@
+import type { Ref, ComputedRef, ExtractPropTypes, CSSProperties } from 'vue'
+import type {
+  FormItemProps,
+  ColProps,
+  // 表单
+  AutocompleteProps,
+  cascaderProps,
+  CheckboxGroupProps,
+  ColorPickerProps,
+  DatePickerProps,
+  InputProps,
+  InputAutoSize,
+  InputNumberProps,
+  RadioGroupProps,
+  RateProps,
+  ISelectProps,
+  SliderProps,
+  SwitchProps,
+  TimePickerDefaultProps,
+  // 显示
+  TextProps,
+  ImageProps,
+  LinkProps,
+  TagProps,
+  ProgressProps
+} from 'element-plus'
+import type { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select'
+import type {
+  PlusFormProps,
+  PlusRadioProps,
+  PlusDatePickerProps,
+  PlusInputTagProps
+} from '@wlydfe/pro-ui-components'
+import type { PropsItemType, PlusColumn, OptionsRow, RenderTypes } from './plus'
+import type { Mutable, RecordType } from './global'
+
+export {}
+
+/**
+ * 级联类型
+ */
+export type CascaderProps = ExtractPropTypes<typeof cascaderProps>
+/**
+ * 原生input所有的type类型
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+ */
+export type InputType =
+  | 'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week'
+
+/**
+ * 需要去除或者需要重新定义的类型
+ */
+export type OmitTypes =
+  // 去除的
+  | 'modelValue'
+  | 'src'
+  // 重新定义过的
+  | 'autocomplete'
+  | 'type'
+  | 'loading'
+  | 'step'
+  | 'format'
+  | 'filterMethod'
+  | 'id'
+  | 'effect'
+  | 'height'
+  | 'autosize'
+
+/**
+ * 表单和显示组件所有字段类型
+ */
+export type FieldProps = Partial<
+  {
+    [key: string]: any
+    style: CSSProperties
+    /**
+     * @desc 输入框行数，仅 type 为 'textarea' 时有效
+     * @desc 补充element-plus input:type='textarea' 时的ts类型缺失
+     */
+    rows: number
+    autocomplete: string
+    /**
+     * type 类型
+     */
+    type:
+      | DatePickerProps['type']
+      | TextProps['type']
+      | LinkProps['type']
+      | ProgressProps['type']
+      | InputType
+      | 'textarea'
+    /**
+     *@desc `valueType` 为 `img `时是 `"lazy" | "eager"`，其余是`boolean`类型
+     */
+    loading: SwitchProps['loading'] | ImageProps['loading']
+    /**
+     * @desc `valueType` 为 `time-select` 时是`string`类型， 其余是`number`类型
+     */
+    step: SliderProps['step'] | TimeSelectProps['step'] | InputNumberProps['step']
+    /**
+     *@desc `valueType` 为 `progress` 时是函数类型，其余是字符串类型
+     */
+    format:
+      | DatePickerProps['format']
+      | TimePickerDefaultProps['format']
+      | TimeSelectProps['format']
+      | ProgressProps['format']
+
+    /**
+     * @desc `valueType` 为 `cascader` 时是`(node: Node, keyword: string) => boolean`类型
+     * @desc `valueType` 为 `select` 时是`() => void`类型
+     */
+    filterMethod: CascaderProps['filterMethod'] | ISelectProps['filterMethod']
+    /**
+     * @desc `valueType` 为 `date-picker` 时**可能**是`[string, string]`类型，其余是`string`类型
+     */
+    id: string | [string, string]
+    /**
+     * @desc el-select，el-time-select 的 effect
+     */
+    effect: ISelectProps['effect']
+    /**
+     * @desc `valueType` 为 `slider` 时是`string`类型，其余是`number`类型
+     */
+    height: string | number
+    /**
+     * @desc `valueType` 为 `textarea` 时
+     */
+    autosize: InputAutoSize
+  } & Mutable<
+    // 表单
+    Omit<AutocompleteProps, OmitTypes> &
+      Omit<CascaderProps, OmitTypes> &
+      Omit<CheckboxGroupProps, OmitTypes> &
+      Omit<ColorPickerProps, OmitTypes> &
+      Omit<DatePickerProps, OmitTypes> &
+      Omit<InputProps, OmitTypes> &
+      Omit<InputNumberProps, OmitTypes> &
+      Omit<RadioGroupProps, OmitTypes> &
+      Omit<RateProps, OmitTypes> &
+      Omit<ISelectProps, OmitTypes> &
+      Omit<SliderProps, OmitTypes> &
+      Omit<SwitchProps, OmitTypes> &
+      Omit<TimePickerDefaultProps, OmitTypes> &
+      Omit<TimeSelectProps, OmitTypes> &
+      // 内置组件表单
+      Omit<PlusRadioProps, OmitTypes> &
+      Omit<PlusDatePickerProps, OmitTypes> &
+      Omit<PlusInputTagProps, OmitTypes> &
+      // 显示
+      Omit<TextProps, OmitTypes> &
+      Omit<ImageProps, OmitTypes> &
+      Omit<LinkProps, OmitTypes> &
+      Omit<TagProps, OmitTypes> &
+      Omit<ProgressProps, OmitTypes>
+  >
+>
+
+/**
+ * 所有表单的类型 默认是  input
+ */
+export type FormItemValueType =
+  | 'autocomplete'
+  | 'cascader'
+  | 'checkbox'
+  | 'color-picker'
+  | 'date-picker'
+  | 'input-number'
+  | 'radio'
+  | 'rate'
+  | 'select'
+  | 'slider'
+  | 'switch'
+  | 'time-picker'
+  | 'time-select'
+  | 'textarea'
+  | 'input'
+  | 'text'
+  | 'plus-radio'
+  | 'plus-date-picker'
+  | 'plus-input-tag'
+  /**
+   * @version 0.1.1 新增
+   */
+  | 'transfer'
+  /**
+   * @version 0.1.1 新增
+   */
+  | 'tree-select'
+  /**
+   * @version 0.1.21 新增
+   */
+  | 'select-v2'
+  | undefined
+
+/**
+ * 表单项的props
+ */
+export interface FormColumnProps {
+  /**
+   * @desc 传递给 PlusForm的配置， 支持所有 el-form的props。值支持对象object。
+   * @version 0.1.17 新增
+   * @version 0.1.19  新增 computed，函数支持，不支持Promise
+   */
+  formProps?:
+    | Partial<PlusFormProps>
+    | ComputedRef<Partial<PlusFormProps>>
+    | ((
+        value: FieldValueType,
+        data: {
+          row: Record<string, any>
+          index: number
+        }
+      ) => Partial<PlusFormProps>)
+
+  /**
+   * @desc 传递给 el-form-item 的配置， 支持所有 el-form-item的props。值支持对象 object，computed，函数和 Promise。
+   */
+  formItemProps?: PropsItemType<
+    Mutable<FormItemProps> & { [key: string]: any; style?: CSSProperties }
+  >
+
+  /**
+   * @desc 支持类似el-input，el-select等所有表单项的props 以及 表格显示的每行 props。值支持对象 object，computed，函数和 Promise。
+   */
+  fieldProps?: PropsItemType<FieldProps>
+
+  /**
+   * @desc 自定义渲染 el-form-item 下的field-item组件。 
+   * @example
+   * ```ts
+   * import { h } from 'vue'
+   * import { ElTag } from 'element-plus'
+   * import type { PlusColumn } from 'plus-pro-components'
+
+   * const columns:PlusColumn[]= [
+   *  {
+   *    label: '自定义el-input',
+   *    prop: 'elData',
+   *    fieldProps: {
+   *     // 优先级低于 renderField 的props
+   *      placeholder: '请输入'
+   *    },
+   *     renderField: (value, onChange) => {
+   *        return h(ElInput as any, {
+   *         // 优先级高于 fieldProps
+   *           placeholder: '请输入自定义el-input',
+   *           type: 'textarea',
+   *           onChange
+   *      })
+   *  }
+   * ]
+   * 
+   * ```
+   */
+  renderField?: (
+    value: FieldValueType,
+    onChange: (value: FieldValueType) => void,
+    props: PlusColumn
+  ) => RenderTypes
+
+  /**
+   * @desc el-col 的 props
+   */
+  colProps?: Partial<Mutable<ColProps> & { [key: string]: any; style?: CSSProperties }>
+
+  /**
+   * 表单中单个项目是否需要 label，默认undefined，优先级高于表单的整体 hasLabel
+   */
+  hasLabel?: boolean | Ref<boolean> | ComputedRef<boolean>
+
+  /**
+   * @desc 渲染form表单的label
+   * @example
+   * ```ts
+   * import { ref, h } from 'vue'
+   * import { ElButton } from 'element-plus'
+   * import type { PlusColumn } from 'plus-pro-components'
+   *
+   * const columns: PlusColumn[] = [
+   *   {
+   *    label: '名称',
+   *    prop: 'name',
+   *    renderLabel:() => 'renderExtra'
+   *   },
+   *   {
+   *    label: '标签',
+   *    prop: 'tag',
+   *    renderLabel: () => h(ElButton,'tag')
+   *   }
+   * ]
+   *
+   * ```
+   */
+  renderLabel?: (label: string, props: PlusColumn) => RenderTypes
+
+  /**
+   * @desc  渲染el-form-item 下一行额外的内容
+   * @example
+   * ```ts
+   * import { ref, h } from 'vue'
+   * import { ElButton } from 'element-plus'
+   * import type { PlusColumn } from 'plus-pro-components'
+   *
+   * const columns: PlusColumn[] = [
+   *   {
+   *    label: '名称',
+   *    prop: 'name',
+   *    renderExtra:() => 'renderExtra'
+   *   },
+   *   {
+   *    label: '标签',
+   *    prop: 'tag',
+   *    renderExtra: () => h(ElButton,'tag')
+   *   }
+   * ]
+   *
+   * ```
+   */
+  renderExtra?: (column: PlusColumn) => RenderTypes
+
+  /**
+   * @desc  渲染el-form-item 上一行的内容
+   * @version 0.1.25 新增
+   * @example
+   * ```ts
+   * import { ref, h } from 'vue'
+   * import { ElButton } from 'element-plus'
+   * import type { PlusColumn } from 'plus-pro-components'
+   *
+   * const columns: PlusColumn[] = [
+   *   {
+   *    label: '名称',
+   *    prop: 'name',
+   *    renderPrevious:() => 'renderPrevious'
+   *   },
+   *   {
+   *    label: '标签',
+   *    prop: 'tag',
+   *    renderPrevious: () => h(ElButton,'tag')
+   *   }
+   * ]
+   *
+   * ```
+   */
+  renderPrevious?: (column: PlusColumn) => RenderTypes
+
+  /**
+   * @desc 表单（表格）单个项目的插槽，支持类似el-input，el-select， el-image ，el-link等所有表单（表格）单项的插槽
+   * @example
+   * ```ts
+   * import { ref, h } from 'vue'
+   * import { Search } from '@element-plus/icons-vue'
+   * import { ElIcon } from 'element-plus'
+   * import type { PlusColumn } from 'plus-pro-components'
+   *
+   * const columns: PlusColumn[] = [
+   *  {
+   *   label: '名称',
+   *   prop: 'name',
+   *   fieldSlots: {
+   *     suffix: () => h(ElIcon, null, () => h(Search)),
+   *     prefix: () => 'prefix',
+   *     prepend: () => 'prepend',
+   *     append: () => 'append'
+   *   }
+   *  },
+   *  {
+   *   label: '链接',
+   *   prop: 'place',
+   *   valueType: 'link',
+   *   linkText: 'link',
+   *   fieldSlots: {
+   *     default: () => 'prefix'
+   *   }
+   *  },
+   * ]
+   *
+   * ```
+   */
+  fieldSlots?: { [slotName: string]: (data?: any) => RenderTypes }
+
+  /**
+   *
+   * 自定义表单每一项子项的插槽 valueType 为 `checkbox` | `radio` | `select` |`plus-radio` 之一时生效。
+   * el-checkbox-group下的，所有el-checkbox的内容整体插槽(即el-checkbox的default插槽)。
+   * el-radio-group下的，所有el-checkbox的内容整体插槽(即el-radio的default插槽)。
+   * el-select下的，所有el-option的内容整体插槽(即el-option的default插槽)。
+   *
+   * @see https://element-plus.org/zh-CN/component/checkbox.html#checkbox-slots
+   * @see https://element-plus.org/zh-CN/component/radio.html#radio-slots
+   * @see https://element-plus.gitee.io/zh-CN/component/select.html#option-slots
+   */
+  fieldChildrenSlot?: (option?: OptionsRow) => RenderTypes
+
+  /**
+   * 渲染el-form-item的error 信息
+   * @param column
+   * @version 0.1.23
+   * @returns
+   */
+  renderErrorMessage?: (
+    props: PlusColumn & {
+      value?: FieldValueType
+      error?: string
+      label?: string
+    }
+  ) => RenderTypes
+}
+
+/**
+ * 通用的单个表单值的类型，适用于大多数通用场景
+ */
+export type FieldValueType =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | Date
+  | string[]
+  | number[]
+  | boolean[]
+  | Date[]
+  | [Date, Date]
+  | [number, number]
+  | [string, string]
+  | string[][]
+  | number[][]
+  // v0.1.7 新增
+  | RecordType
+
+/**
+ * 通用的整体表单值的类型
+ */
+export type FieldValues = Record<keyof any, FieldValueType>
+
+/**
+ * FieldRefs 的类型
+ */
+export type FormFieldRefsType = {
+  fieldInstance?: any
+  valueIsReady?: Ref<boolean>
+}