fix missing folders and umd locale builds and i18n docs for umd builds

build/build-locale.ts

@@ -0,0 +1,41 @@
+/* eslint-disable */
+import fs from 'fs'
+import save from 'file-save'
+import { resolve, basename } from 'path'
+import { buildOutput } from './paths'
+
+const localePath = resolve(__dirname, '../packages/locale/lang')
+const fileList = fs.readdirSync(localePath)
+
+const transform = function(filename, name, cb) {
+  require('@babel/core').transformFile(resolve(localePath, filename), {
+    plugins: [
+      '@babel/plugin-transform-modules-umd',
+    ],
+    moduleId: name,
+  }, cb)
+}
+
+fileList
+  .filter(function(file) {
+    return /\.ts$/.test(file)
+  })
+  .forEach(function(file) {
+    const name = basename(file, '.ts')
+
+    transform(file, name, function(err, result) {
+      if (err) {
+        console.error(err)
+      } else {
+        const code = result.code
+        const transformedCode = code
+          .replace('define(\"', 'define(\"element/locale/')
+          .replace(
+            /global\.(\S*) = mod.exports/,
+            'global.ElementPlus.lang = global.ElementPlus.lang || {};\n    global.ElementPlus.lang.$1 = mod.exports.default'
+          )
+
+        save(resolve(buildOutput, 'element-plus/dist/locale', `${name}.js`)).write(transformedCode)
+      }
+    })
+  })

build/components.ts

@@ -97,8 +97,9 @@ async function buildComponents() {
     }
 
     const cjs = {
-      format: 'es',
+      format: 'cjs',
       file: `${outputDir}/lib/components/${componentName}/index.js`,
+      exports: 'named',
       plugins: [
         filesize({
           reporter,

packages/components/head/style/index.ts

@@ -1,2 +0,0 @@
-import '@element-plus/components/base/style'
-import '@element-plus/theme-chalk/src/head.scss'

packages/components/header/style/css.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css'
+import '@element-plus/theme-chalk/el-header.css'

packages/components/header/style/index.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style'
+import '@element-plus/theme-chalk/src/header.scss'

packages/components/menu/src/menu.ts

@@ -87,9 +87,7 @@ export interface ISubMenuProps {
 export interface IMenuItemProps {
   index: string
   route: string | Record<string, unknown>
-  popperClass: string
   disabled: boolean
-  popperAppendToBody?: boolean
 }
 
 // menuGroup

packages/components/menu/src/menuItem.vue

@@ -48,26 +48,26 @@ import {
   getCurrentInstance,
 } from 'vue'
 import ElTooltip from '@element-plus/components/tooltip'
-import { IMenuItemProps, RootMenuProvider, SubMenuProvider } from './menu'
+import { RootMenuProvider, SubMenuProvider } from './menu'
 import useMenu from './useMenu'
 
 export default defineComponent({
   name: 'ElMenuItem',
 
-  componentName: 'ElMenuItem',
+  // componentName: 'ElMenuItem',
 
   components: { ElTooltip },
 
   props: {
     index: {
+      type: String,
       default: null,
-      validator: val => typeof val === 'string' || val === null,
     },
     route: [String, Object],
     disabled: Boolean,
   },
   emits: ['click'],
-  setup(props: IMenuItemProps, { emit, slots }) {
+  setup(props, { emit, slots }) {
     const instance = getCurrentInstance()
     const rootMenu = inject<RootMenuProvider>('rootMenu')
     const { parentMenu, paddingStyle, indexPath } = useMenu(

packages/components/radio-button/style/css.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css'
+import '@element-plus/theme-chalk/el-radio-button.css'

packages/components/radio-button/style/index.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style'
+import '@element-plus/theme-chalk/el-radio-button.scss'

packages/components/radio-group/style/css.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css'
+import '@element-plus/theme-chalk/el-radio-group.css'

packages/components/radio-group/style/index.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style'
+import '@element-plus/theme-chalk/src/radio-group.scss'

packages/components/radio/src/radio-group.vue

@@ -81,7 +81,7 @@ export default defineComponent({
       ...toRefs(props),
       radioGroupSize: radioGroupSize,
       changeEvent: changeEvent,
-    }))
+    } as any))
 
     watch(() => props.modelValue, val => {
       elFormItem.formItemMitt?.emit('el.form.change', [val])

packages/components/step/style/css.ts

@@ -1,2 +1,2 @@
 import '@element-plus/components/base/style/css'
-import '@element-plus/theme-chalk/el-head.css'
+import '@element-plus/theme-chalk/el-step.css'

packages/components/step/style/index.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style'
+import '@element-plus/theme-chalk/el-step.scss'

packages/components/table/src/table-body/render-helper.ts

@@ -148,7 +148,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
         h(
           'tr',
           {
-            key: 'expanded-row__' + tr.key,
+            key: 'expanded-row__' + (tr.key as string),
           },
           [
             h(

packages/components/tree/src/tree.vue

@@ -50,7 +50,6 @@ import type {
   TreeNodeData,
   TreeKey,
   TreeData,
-  RootTreeType,
 } from './tree.type'
 
 export default defineComponent({
@@ -59,6 +58,7 @@ export default defineComponent({
   props: {
     data: {
       type: Array,
+      default: () => [],
     },
     emptyText: {
       type: String,
@@ -83,8 +83,8 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    defaultCheckedKeys: Array,
-    defaultExpandedKeys: Array,
+    defaultCheckedKeys: Array as PropType<TreeComponentProps['defaultCheckedKeys']>,
+    defaultExpandedKeys: Array as PropType<TreeComponentProps['defaultExpandedKeys']>,
     currentNodeKey: [String, Number] as PropType<string | number>,
     renderContent: Function,
     showCheckbox: {
@@ -98,22 +98,20 @@ export default defineComponent({
     allowDrag: Function,
     allowDrop: Function,
     props: {
-      type: Object,
-      default() {
-        return {
-          children: 'children',
-          label: 'label',
-          disabled: 'disabled',
-        }
-      },
+      type: Object as PropType<TreeComponentProps['props']>,
+      default: () => ({
+        children: 'children',
+        label: 'label',
+        disabled: 'disabled',
+      }),
     },
     lazy: {
       type: Boolean,
       default: false,
     },
     highlightCurrent: Boolean,
-    load: Function,
-    filterNodeMethod: Function,
+    load: Function as PropType<TreeComponentProps['load']>,
+    filterNodeMethod: Function as PropType<TreeComponentProps['filterNodeMethod']>,
     accordion: Boolean,
     indent: {
       type: Number,
@@ -136,7 +134,7 @@ export default defineComponent({
     'node-drag-enter',
     'node-drag-over',
   ],
-  setup(props: TreeComponentProps, ctx) {
+  setup(props, ctx) {
     const { t } = useLocaleInject()
 
     const store = ref<TreeStore>(new TreeStore({
@@ -302,7 +300,7 @@ export default defineComponent({
       root,
       currentNode,
       instance: getCurrentInstance(),
-    } as RootTreeType)
+    } as any)
 
     return {
       // ref

scripts/monorepo.sh

@@ -22,6 +22,7 @@ yarn build:hooks
 yarn build:directives
 yarn build:tokens
 yarn build:full-bundle
+yarn build:locale-umd
 
 rsync -a dist/entry/types/ dist/element-plus/es/
 rsync -a dist/entry/types/ dist/element-plus/lib/
@@ -36,9 +37,12 @@ echo "syncing style.js"
 rsync -a dist/styles/es/ dist/element-plus/es/components/
 rsync -a dist/styles/lib/ dist/element-plus/lib/components/
 
+echo "copying source code"
 cp -R packages dist/element-plus
 cp packages/element-plus/package.json dist/element-plus/package.json
 
+echo "copying README"
+cp README.md dist/element-plus
 
 cd dist/element-plus
 npm publish --access public

website/docs/en-US/i18n.md

@@ -47,6 +47,20 @@ export default defineComponent({
 </script>
 ```
 
+## CDN Usage
+
+If you are using ElementPlus via CDN, then you need to do this, let's again take
+unpkg as an example
+
+```html
+<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
+<script>
+app.use(ElementPlus, {
+  locale: ElementPlus.lang.zhCn
+})
+</script>
+```
+
 Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider)
 
 [Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)

website/docs/es/i18n.md

@@ -47,6 +47,20 @@ export default defineComponent({
 </script>
 ```
 
+## CDN Usage
+
+If you are using ElementPlus via CDN, then you need to do this, let's again take
+unpkg as an example
+
+```html
+<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
+<script>
+app.use(ElementPlus, {
+  locale: ElementPlus.lang.zhCn
+})
+</script>
+```
+
 Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider)
 
 [Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)

website/docs/fr-FR/i18n.md

@@ -47,6 +47,20 @@ export default defineComponent({
 </script>
 ```
 
+## CDN Usage
+
+If you are using ElementPlus via CDN, then you need to do this, let's again take
+unpkg as an example
+
+```html
+<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
+<script>
+app.use(ElementPlus, {
+  locale: ElementPlus.lang.zhCn
+})
+</script>
+```
+
 Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider)
 
 [Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)

website/docs/jp/i18n.md

@@ -47,6 +47,20 @@ export default defineComponent({
 </script>
 ```
 
+## CDN Usage
+
+If you are using ElementPlus via CDN, then you need to do this, let's again take
+unpkg as an example
+
+```html
+<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
+<script>
+app.use(ElementPlus, {
+  locale: ElementPlus.lang.zhCn
+})
+</script>
+```
+
 Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider)
 
 [Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)

website/docs/zh-CN/i18n.md

@@ -47,6 +47,19 @@ export default defineComponent({
 
 详细配置见：[ConfigProvider](/#/zh-CN/component/config-provider)
 
+## CDN 用法
+
+如果你是使用 CDN 引入的 ElementPlus，那你将需要这样做，以 unpkg 举例
+
+```html
+<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
+<script>
+app.use(ElementPlus, {
+  locale: ElementPlus.lang.zhCn
+})
+</script>
+```
+
 [支持的语言列表](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
 
 <ul class="language-list">