feat(element): add element support (#1734)

packages/element/.eslintrc

@@ -0,0 +1,73 @@
+{
+  "parser": "vue-eslint-parser",
+  "extends": [
+    "plugin:vue/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "commonjs": true
+  },
+  "plugins": ["@typescript-eslint", "prettier"],
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "project": "./tsconfig.json",
+    "sourceType": "module",
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "extraFileExtensions": [".vue"]
+  },
+  "rules": {
+    "prettier/prettier": 0,
+    // don't force es6 functions to include space before paren
+    "space-before-function-paren": 0,
+    // maybe we should no-public
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/interface-name-prefix": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/no-parameter-properties": 0,
+    "@typescript-eslint/array-type": 0,
+    "@typescript-eslint/no-object-literal-type-assertion": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/no-unused-vars": 2,
+    "@typescript-eslint/no-namespace": 0,
+    "@typescript-eslint/ban-types": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error", "info"]
+      }
+    ],
+    "prefer-const": 1,
+    "no-var": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-ignore": "allow-with-description",
+        "ts-check": true
+      }
+    ],
+    "prefer-rest-params": 1,
+    "vue/html-self-closing": 0,
+    "vue/max-attributes-per-line": [
+      "error",
+      {
+        "singleline": 3,
+        "multiline": {
+          "max": 1,
+          "allowFirstLine": false
+        }
+      }
+    ],
+    "react-hooks/rules-of-hooks": 0,
+    "vue/one-component-per-file": 0
+  }
+}

packages/element/.npmignore

@@ -0,0 +1,12 @@
+node_modules
+*.log
+build
+docs
+doc-site
+__tests__
+.eslintrc
+jest.config.js
+vue.config.js
+tsconfig.json
+.umi
+src

packages/element/README.md

@@ -0,0 +1,11 @@
+# @formily/element
+
+### Requirement
+
+vue^2.6.0 + @vue/composition-api^1.0.0-beta.1
+
+### Install
+
+```bash
+npm install --save @formily/element
+```

packages/element/build-style.ts

@@ -0,0 +1,7 @@
+import { build } from '../../scripts/build-style'
+
+build({
+  esStr: 'element/es/',
+  libStr: 'element/lib/',
+  allStylesOutputFile: 'dist/element.css',
+})

packages/element/create-style.ts

@@ -0,0 +1,21 @@
+import glob from 'glob'
+import path from 'path'
+import fs from 'fs-extra'
+
+glob(
+  './*/style.scss',
+  { cwd: path.resolve(__dirname, './src') },
+  (err, files) => {
+    if (err) return console.error(err)
+    fs.writeFile(
+      path.resolve(__dirname, './src/style.ts'),
+      `// auto generated code
+${files
+  .map((path) => {
+    return `import '${path}'\n`
+  })
+  .join('')}`,
+      'utf8'
+    )
+  }
+)

packages/element/docs/.vuepress/components/dumi-previewer.vue

@@ -0,0 +1,241 @@
+<template>
+  <client-only>
+    <section class="dumi-previewer">
+      <div class="dumi-previewer-demo">
+        <template v-if="demoPath && demo">
+          <component :is="demo" />
+        </template>
+
+        <template v-else>
+          <slot name="demo"></slot>
+        </template>
+      </div>
+
+      <div class="dumi-previewer-actions">
+        <div></div>
+
+        <div>
+          <svg
+            v-if="copied"
+            class="dumi-previewer-actions__icon"
+            style="fill: green"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+          >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"
+            />
+          </svg>
+
+          <svg
+            v-else
+            class="dumi-previewer-actions__icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            @click="handleCopy"
+          >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
+            />
+          </svg>
+
+          <svg
+            class="dumi-previewer-actions__icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            @click="handleCollapse"
+          >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <div v-show="!collapsed" class="dumi-previewer-source">
+        <div v-html="highlightCode" class="language-vue extra-class" />
+      </div>
+    </section>
+  </client-only>
+</template>
+
+<script>
+import copy from 'copy-to-clipboard'
+import highlight from './highlight'
+
+export default {
+  name: 'dumi-previewer',
+
+  props: {
+    code: {
+      type: String,
+      default: '',
+    },
+
+    demoPath: {
+      type: String,
+      default: '',
+    },
+    collapsed: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      innerCollapsed: this.collapsed,
+      copied: false,
+      timerId: null,
+      demoStr: '',
+      /**
+       * take over VuePress render
+       * 接管VuePress渲染
+       */
+      demo: null,
+    }
+  },
+
+  computed: {
+    decodedCode() {
+      return decodeURIComponent(this.code || this.demoStr)
+    },
+
+    highlightCode() {
+      return highlight(this.decodedCode, 'vue')
+    },
+  },
+
+  created() {
+    if (this.demoPath) {
+      import(
+        /* webpackPrefetch: true */ `../../demos/${this.demoPath}.vue`
+      ).then((module) => {
+        this.demo = module.default
+      })
+      import(
+        /* webpackPrefetch: true */ `!raw-loader!../../demos/${this.demoPath}.vue`
+      ).then((module) => {
+        this.demoStr = module.default
+      })
+    }
+  },
+
+  beforeDestroy() {
+    clearTimeout(this.timerId)
+  },
+
+  methods: {
+    handleCollapse() {
+      this.innerCollapsed = !this.innerCollapsed
+    },
+
+    handleCopy() {
+      this.copied = true
+      copy(this.decodedCode)
+
+      clearTimeout(this.timer)
+      this.timerId = setTimeout(() => {
+        this.copied = false
+      }, 2000)
+    },
+  },
+}
+</script>
+
+<style lang="stylus">
+.dumi-previewer {
+  background-color: #fff;
+  border: 1px solid #ebedf1;
+  border-radius: 1px;
+
+  .dumi-previewer-demo {
+    padding: 40px 24px;
+  }
+
+  .dumi-previewer-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px dashed #ebedf1;
+    height: 40px;
+    padding: 0 1em;
+
+    .dumi-previewer-actions__icon {
+      width: 16px;
+      height: 16px;
+      padding: 8px 4px;
+      opacity: 0.4;
+      cursor: pointer;
+      transition: opacity .3s;
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .dumi-previewer-source {
+    border-top: 1px dashed #ebedf1;
+
+    div[class*="language-"] {
+      background-color: #f9fafb;
+      border-radius: 0;
+    }
+
+    pre[class*="language-"] {
+      margin: 0 !important;
+    }
+
+    pre[class*="language-"] code {
+      color: #000 !important;
+    }
+
+    .token.cdata,.token.comment,.token.doctype,.token.prolog {
+      color: #708090
+    }
+
+    .token.punctuation {
+      color: #999
+    }
+
+    .token.namespace {
+      opacity: .7
+    }
+
+    .token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag {
+      color: #905
+    }
+
+    .token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string {
+      color: #690
+    }
+
+    .language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url {
+      color: #9a6e3a;
+      background: hsla(0,0%,100%,.5)
+    }
+
+    .token.atrule,.token.attr-value,.token.keyword {
+      color: #07a
+    }
+
+    .token.class-name,.token.function {
+      color: #dd4a68
+    }
+
+    .token.important,.token.regex,.token.variable {
+      color: #e90
+    }
+  }
+}
+</style>