@wlydfe/pro-ui 0.2.19 → 0.2.21

package/packages/eslint-config/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@wlydfe/pro-ui-eslint-config",
+  "version": "0.0.3",
+  "description": "eslint config of plus-pro-components",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "npx unbuild",
+    "stub": "npx unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "eslint": "^8.40.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-cypress": "^2.13.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.13.0",
+    "typescript": "^4.9.4"
+  }
+}

package/packages/eslint-config/src/index.ts

@@ -0,0 +1,125 @@
+export default {
+  parser: 'vue-eslint-parser',
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    },
+    extraFileExtensions: ['.vue']
+  },
+  plugins: ['vue', '@typescript-eslint', 'import'],
+  rules: {
+    // base
+    'no-unused-vars': 0,
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    semi: [2, 'never'],
+    'semi-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
+    'comma-style': [2, 'last'],
+    'arrow-parens': [2, 'as-needed'],
+    'arrow-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'jsx-quotes': 2,
+    'no-async-promise-executor': 0,
+    'space-before-function-paren': 0,
+    'no-empty': 0,
+    'spaced-comment': ['error', 'always'],
+    'no-undef': 0,
+    eqeqeq: 2,
+
+    // vue
+    'vue/no-unused-vars': [
+      'error',
+      {
+        ignorePattern: '^_'
+      }
+    ],
+    'vue/valid-attribute-name': 0,
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/no-v-html': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always'
+        },
+        svg: 'always',
+        math: 'always'
+      }
+    ],
+    'vue/html-indent': 0,
+    'vue/max-attributes-per-line': 0,
+    'vue/custom-event-name-casing': 0,
+    'vue/eqeqeq': [2, 'always', { null: 'ignore' }],
+    'vue/multi-word-component-names': 0,
+    'vue/v-on-event-hyphenation': 0,
+    'vue/first-attribute-linebreak': 0,
+    'vue/no-reserved-props': 0,
+
+    // import
+    'import/first': 'error',
+    'import/no-duplicates': 'error',
+    'import/order': [
+      'error',
+      {
+        pathGroups: [
+          {
+            pattern: '@/**',
+            group: 'external',
+            position: 'after'
+          }
+        ],
+        pathGroupsExcludedImportTypes: ['builtin']
+      }
+    ],
+
+    // typescript
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/consistent-type-imports': [2, { disallowTypeAnnotations: false }]
+  }
+}

package/packages/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useGetOptions'
+export * from './useLocale'
+export * from './useTable'

package/packages/hooks/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@wlydfe/pro-ui-hooks",
+  "version": "0.0.1",
+  "private": true,
+  "main": "index.ts",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/hooks/useGetOptions.ts

@@ -0,0 +1,114 @@
+import type { Ref } from 'vue'
+import { ref, isRef, watch, isReactive } from 'vue'
+import {
+  isPromise,
+  isFunction,
+  isArray,
+  toRawType,
+  isPlainObject
+} from '@wlydfe/pro-ui-components/utils'
+import type { OptionsRow, PlusColumn } from '@wlydfe/pro-ui-types'
+
+const throwError = (data: unknown) => {
+  if (!isArray(data)) {
+    console.error('Uncaught TypeError: ', `options expected Array but got ${toRawType(data)}`)
+  }
+}
+
+/**
+ * 映射options
+ * @version v0.1.15
+ * @param options
+ * @param optionsMap
+ * @returns
+ */
+export const getOptionsByOptionsMap = (options: OptionsRow[], props: PlusColumn): OptionsRow[] => {
+  const optionsMap = props.optionsMap || {}
+  const valueType = props.valueType
+
+  // 不处理级联，optionsMap不存在处理
+  if (valueType === 'cascader' || !isPlainObject(optionsMap)) {
+    return options
+  }
+
+  const data = options.map(item => {
+    const temp = item
+    const label = optionsMap?.label || 'label'
+    const value = optionsMap?.value || 'value'
+    const __origin = {
+      [label]: temp[label],
+      [value]: temp[value]
+    }
+
+    return { ...temp, __origin, label: item[label], value: item[value] }
+  })
+
+  return data || []
+}
+
+export const useGetOptions = (
+  props: PlusColumn
+): {
+  customOptions: Ref<OptionsRow[]>
+  customOptionsIsReady: Ref<boolean>
+} => {
+  const options = ref<OptionsRow[]>([])
+  const optionsIsReady = ref<boolean>(false)
+
+  if (!props.options) {
+    options.value = []
+    optionsIsReady.value = true
+  } else if (isRef(props.options) || isReactive(props.options) || isArray(props.options)) {
+    // computed或者数组
+    watch(
+      () => props.options,
+      val => {
+        const value = isRef(val) ? (val.value as OptionsRow[]) : (val as OptionsRow[])
+        options.value = getOptionsByOptionsMap(value, props)
+        optionsIsReady.value = true
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+  } else if (isFunction(props.options)) {
+    // 函数或Promise
+    const getValue = props.options
+    const result = getValue(props)
+    // 函数返回一个Promise
+    if (isPromise(result)) {
+      // eslint-disable-next-line @typescript-eslint/no-extra-semi
+      result
+        .then((value: OptionsRow[]) => {
+          options.value = getOptionsByOptionsMap(value, props)
+          optionsIsReady.value = true
+          throwError(options.value)
+        })
+        .catch((err: unknown) => {
+          throw err
+        })
+    } else {
+      // 函数
+      options.value = getOptionsByOptionsMap(result, props)
+      optionsIsReady.value = true
+    }
+  } else if (isPromise(props.options)) {
+    // 本身是一个Promise
+    const getValue = props.options
+    getValue
+      .then(value => {
+        options.value = getOptionsByOptionsMap(value, props)
+        optionsIsReady.value = true
+        throwError(options.value)
+      })
+      .catch((err: unknown) => {
+        throw err
+      })
+  } else {
+    optionsIsReady.value = true
+    throwError(props.options)
+  }
+
+  return { customOptions: options, customOptionsIsReady: optionsIsReady }
+}

package/packages/hooks/useLocale.ts

@@ -0,0 +1,52 @@
+/**
+ * fork = require( https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-locale/index.ts)
+ */
+import type { Ref } from 'vue'
+import { computed, ref, inject, unref, isRef } from 'vue'
+import { get } from 'lodash-es'
+import { localeContextKey } from 'element-plus'
+import English from '@wlydfe/pro-ui-locale/lang/en'
+import type { Language } from '@wlydfe/pro-ui-locale'
+
+type MaybeRef<T> = T | Ref<T>
+
+export type TranslatorOption = Record<string, string | number>
+export type Translator = (path: string, option?: TranslatorOption) => string
+export type LocaleContext = {
+  locale: Ref<Language>
+  lang: Ref<string>
+  t: Translator
+}
+
+export const buildTranslator =
+  (locale: MaybeRef<Language>): Translator =>
+  (path, option) =>
+    translate(path, option, unref(locale))
+
+export const translate = (
+  path: string,
+  option: undefined | TranslatorOption,
+  locale: Language
+): string =>
+  (get(locale, path, path) as string).replace(
+    /\{(\w+)\}/g,
+    (_, key) => `${option?.[key] ?? `{${key}}`}`
+  )
+
+export const buildLocaleContext = (locale: MaybeRef<Language>): LocaleContext => {
+  const lang = computed(() => unref(locale).name)
+  const localeRef = isRef(locale) ? locale : ref(locale)
+  return {
+    lang,
+    locale: localeRef,
+    t: buildTranslator(locale)
+  }
+}
+
+export const useLocale = (localeOverrides?: Ref<Language | undefined>) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const locale = localeOverrides || inject(localeContextKey, ref())!
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return buildLocaleContext(computed(() => (locale.value?.plus ? locale.value : English)) as any)
+}

package/packages/hooks/useTable.ts

@@ -0,0 +1,28 @@
+import type { Ref } from 'vue'
+import { ref, shallowRef, unref } from 'vue'
+import { DefaultPageInfo } from '@wlydfe/pro-ui-constants'
+import type { ActionBarButtonsRow } from '@wlydfe/pro-ui-components/table'
+import type { PageInfo } from '@wlydfe/pro-ui-types'
+
+/**
+ * 初始化表格基本数据
+ *
+ */
+export function useTable<T extends Record<string, any>[] = any>(
+  _pageInfo?: PageInfo | Ref<PageInfo>
+) {
+  const defaultPageInfo = unref(_pageInfo) || DefaultPageInfo
+  const tableData = ref<T>([] as any)
+  const pageInfo = ref<PageInfo>({ ...defaultPageInfo })
+  const total = ref<number>(0)
+  const loadingStatus = ref<boolean>(false)
+  const buttons = shallowRef<ActionBarButtonsRow[]>([])
+
+  return {
+    tableData,
+    pageInfo,
+    total,
+    loadingStatus,
+    buttons
+  }
+}

package/packages/locale/index.ts

@@ -0,0 +1,14 @@
+export { default as en } from './lang/en'
+export { default as zhCn } from './lang/zh-cn'
+export { default as ja } from './lang/ja'
+export { default as ko } from './lang/ko'
+export { default as zhTw } from './lang/zh-tw'
+
+export type Translate = {
+  [key: string]: string | string[] | Translate
+}
+
+export type Language = {
+  name: string
+  plus: Translate
+}

package/packages/locale/lang/en.ts

@@ -0,0 +1,68 @@
+export default {
+  name: 'en',
+  plus: {
+    dialog: {
+      confirmText: 'Yes',
+      cancelText: 'No',
+      title: 'Dialog'
+    },
+    datepicker: {
+      startPlaceholder: 'Please select start time',
+      endPlaceholder: 'Please select end time'
+    },
+    dialogForm: {
+      title: 'Dialog form'
+    },
+    drawerForm: {
+      title: 'Drawer form',
+      confirmText: 'Yes',
+      cancelText: 'No'
+    },
+    form: {
+      submitText: 'Submit',
+      resetText: 'Reset',
+      errorTip: 'Please complete the form and submit again!'
+    },
+    field: {
+      pleaseEnter: 'Please enter ',
+      pleaseSelect: 'Please select '
+    },
+    popover: {
+      confirmText: 'Yes',
+      cancelText: 'No'
+    },
+    search: {
+      searchText: 'Search',
+      resetText: 'Reset',
+      expand: 'Expand',
+      retract: 'Retract'
+    },
+    table: {
+      title: 'Table',
+      density: 'Density',
+      refresh: 'Refresh',
+      columnSettings: 'Column settings',
+      selectAll: 'Select all',
+      default: 'Default',
+      loose: 'Loose',
+      compact: 'Compact',
+      action: 'Action',
+      more: 'More',
+      confirmToPerformThisOperation: 'Confirm to perform this operation?',
+      prompt: 'Prompt',
+      sort: 'Sort',
+      resetText: 'Reset'
+    },
+    stepsForm: {
+      nextText: 'Next step',
+      preText: 'Previous step',
+      submitText: 'Submit'
+    },
+    inputTag: {
+      placeholder: 'Please enter keywords and press enter or space key'
+    },
+    header: {
+      logout: 'logout'
+    }
+  }
+}

package/packages/locale/lang/ja.ts

@@ -0,0 +1,68 @@
+export default {
+  name: 'ja',
+  plus: {
+    dialog: {
+      confirmText: '確定',
+      cancelText: 'キャンセル',
+      title: 'ポップアップ'
+    },
+    datepicker: {
+      startPlaceholder: '開始時間を選択してください',
+      endPlaceholder: '終了時間を選択してください'
+    },
+    dialogForm: {
+      title: 'ポップアップフォーム'
+    },
+    drawerForm: {
+      title: 'ドゥロワーフォーム',
+      confirmText: '確定',
+      cancelText: 'キャンセル'
+    },
+    form: {
+      submitText: '送信',
+      resetText: 'リセット',
+      errorTip: 'フォームを完全に記入してから再度送信してください！'
+    },
+    field: {
+      pleaseEnter: '入力してください',
+      pleaseSelect: '選択してください'
+    },
+    popover: {
+      confirmText: '確定',
+      cancelText: 'キャンセル'
+    },
+    search: {
+      searchText: '検索',
+      resetText: 'リセット',
+      expand: '開く',
+      retract: '閉まる'
+    },
+    table: {
+      title: 'テーブル',
+      density: '密度',
+      refresh: 'リフレッシュ',
+      columnSettings: '列の設定',
+      selectAll: 'すべて選択',
+      default: 'デフォルト',
+      loose: 'ゆったり',
+      compact: 'きちんと',
+      action: 'オプション',
+      more: 'もっと見る',
+      confirmToPerformThisOperation: 'この操作を実行してもよろしいですか？',
+      prompt: 'ヒント',
+      sort: '並べ替え',
+      resetText: 'リセット'
+    },
+    stepsForm: {
+      nextText: '次へ',
+      preText: '前へ',
+      submitText: '送信'
+    },
+    inputTag: {
+      placeholder: 'キーワードを入力してEnter/スペースキーを押してください'
+    },
+    header: {
+      logout: 'ログアウト'
+    }
+  }
+}

package/packages/locale/lang/ko.ts

@@ -0,0 +1,68 @@
+export default {
+  name: 'ko',
+  plus: {
+    dialog: {
+      confirmText: '확신하는',
+      cancelText: '취소',
+      title: '팝 업'
+    },
+    datepicker: {
+      startPlaceholder: '시작 시간을 선택하세요',
+      endPlaceholder: '종료시간을 선택해주세요'
+    },
+    dialogForm: {
+      title: '팝업 형태'
+    },
+    drawerForm: {
+      title: '서랍 형태',
+      confirmText: '확신하는',
+      cancelText: '취소'
+    },
+    form: {
+      submitText: '제출하다',
+      resetText: '초기화',
+      errorTip: '양식을 완전히 작성하신 후 다시 제출해 주세요!'
+    },
+    field: {
+      pleaseEnter: '들어 오세요',
+      pleaseSelect: '선택해주세요'
+    },
+    popover: {
+      confirmText: '확신하는',
+      cancelText: '취소'
+    },
+    search: {
+      searchText: '찾다',
+      resetText: '초기화',
+      expand: '확장하다',
+      retract: '닫다'
+    },
+    table: {
+      title: '시트',
+      density: '밀도',
+      refresh: '새로 고치다',
+      columnSettings: '열 설정',
+      selectAll: '모두 선택',
+      default: '기본',
+      loose: '헐렁한',
+      compact: '콤팩트',
+      action: '작동하다',
+      more: '더',
+      confirmToPerformThisOperation: '이 작업을 수행하려면 확인하세요?',
+      prompt: '힌트',
+      sort: '종류',
+      resetText: '초기화'
+    },
+    stepsForm: {
+      nextText: '다음 단계',
+      preText: '이전의',
+      submitText: '제출하다'
+    },
+    inputTag: {
+      placeholder: '키워드를 입력하고 Enter/스페이스바를 누르세요'
+    },
+    header: {
+      logout: '로그아웃'
+    }
+  }
+}

package/packages/locale/lang/zh-cn.ts

@@ -0,0 +1,68 @@
+export default {
+  name: 'zh-cn',
+  plus: {
+    dialog: {
+      confirmText: '确定',
+      cancelText: '取消',
+      title: '弹窗'
+    },
+    datepicker: {
+      startPlaceholder: '请选择开始时间',
+      endPlaceholder: '请选择结束时间'
+    },
+    dialogForm: {
+      title: '弹窗表单'
+    },
+    drawerForm: {
+      title: '抽屉表单',
+      confirmText: '确定',
+      cancelText: '取消'
+    },
+    form: {
+      submitText: '提交',
+      resetText: '重置',
+      errorTip: '请完整填写表单然后再次提交！'
+    },
+    field: {
+      pleaseEnter: '请输入',
+      pleaseSelect: '请选择'
+    },
+    popover: {
+      confirmText: '确定',
+      cancelText: '取消'
+    },
+    search: {
+      searchText: '搜索',
+      resetText: '重置',
+      expand: '展开',
+      retract: '收起'
+    },
+    table: {
+      title: '表格',
+      density: '密度',
+      refresh: '刷新',
+      columnSettings: '列设置',
+      selectAll: '全选',
+      default: '默认',
+      loose: '宽松',
+      compact: '紧凑',
+      action: '操作',
+      more: '更多',
+      confirmToPerformThisOperation: '确定执行本次操作?',
+      prompt: '提示',
+      sort: '排序',
+      resetText: '重置'
+    },
+    stepsForm: {
+      nextText: '下一步',
+      preText: '上一步',
+      submitText: '提交'
+    },
+    inputTag: {
+      placeholder: '请输入关键字后按回车/空格键'
+    },
+    header: {
+      logout: '退出登录'
+    }
+  }
+}