fddr-ui

TODO

• [ ] 完善文档的 属性 和 方法
• [ ] popup
• [ ] 返回顶部 backtop
• [ ] 多语言支持

安装

# 安装本地包
ni ../fddr-ui # (或者绝对路径)
ni [email protected]

// main.ts
import 'fddr-ui/dist/style.css';
import FddrUI from 'fddr-ui'
createApp(App)
  .use(FddrUI, { isPure: true })
  .mount('#app')

// TODO 优化icon支持;自动注入
import { addCollection } from '@iconify/vue'
import fddrIconifyJSON from 'fddr-ui/dist/fdd.Iconify.json'
addCollection(fddrIconifyJSON)

// 类型支持: tsconfig.json -> compilerOptions
"types": ["fddr-ui/global"]
// css 变量支持:`CSS Variable Autocomplete` .vscode/settings.json
"cssVariables.lookupFiles": [
  "**/*.css",
  "**/*.scss",
  "**/*.sass",
  "**/*.less",
  "node_modules/fddr-ui/dist/variables.scss"
],

导出多文件入口

  "exports": {
    ".": {
      "import": "./dist/index.js"
    },
    "./prue": {
      "types": "./dist/prue.d.ts",
      "import": "./dist/prue.js"
    },
    "./*": [
      "./*",
      "./*.d.ts"
    ]
  },
  "typesVersions": {
    "*": {
      "*": [
        "./dist/*",
        "./*"
      ]
    }
  },

发版

git commit -am 'publish'
b
cp public/components.global.d.ts public/fdd.Iconify.json ./dist
npm version patch
npm publish
同步 https://npmmirror.com/package/fddr-ui/versions?

beta 版

npm version 0.1.60-beta.6
npm publish --tag beta

pnpm i [email protected] --registry https://registry.npmjs.org/

创建模板

# 无依赖的组件
nr tpl name=button
nr tpl name=tree-select
# 依赖第三方库的组件
nr tpl name=tree-select deps=true

element-plus 类型转换

console.log([...document.querySelector('.vp-table tbody').querySelectorAll('tr')].map(n => [...n.querySelectorAll('td')].map(n => n.innerText.trim().replace(/\s*\/\s*/g, '|').replace(/\n+/g, ''))).map(n => `/** ${n[1]} @default ${n[3]} */\n${n[0].replace(/[^\w-]/g, '').replace(/-\w/g, (match) => match.replace('-', '').toUpperCase())}?: ${n[2].replace(/-/g,'_').match(/\w+/)[0]}`).join('\n'))

vant类型转换

console.log(Array.from(document.querySelector('#props + table tbody').querySelectorAll('tr'))
    .map(n =>  n.innerText.trim().split('\t'))
    .map(n => `  /** ${n[1]} @default ${n[3]} */
  ${n[0].replace(/[^\w-]/g, '').replace(/-\w/g, (match) => match.replace('-', '').toUpperCase())}?: ${n[2]}`).join('\n'))

https://piccalil.li/blog/styling-tables-the-modern-css-way/