epic(website): refactor website (#3426)

* feat(website): init viteperss (#3162)

* init vitepress

* Finish homepage

* relayout page

* partial finish

* update

* update use lang

* remove font weight; change font size

* docs: optimize docs folder structure

* reorganize project

* fix ssr issue

* fix build issues

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>

* feat(website) integrate with crowdin (#3218)

- Introduce Crowdin CLI
- Add script for fetching Crowdin token from env
- Add script for local development

* fix formatting

* update codeblocks (#3249)

* feat(docs): update website preview script

- Update azure preview build script
- Eliminate dead links

* bootstrap docs

* fix homepage layout issue

* fix formating

* Finish ToC and codepen integration

* reorganized files and fix issue that causes demo unavailable after build

* feat(docs): migration documentations (#3283)

* feat(docs): migration documentations

- Move documentations to docs/

* remove unused files

* docs: [popconfirm] migrate document (#3285)

* feat(docs): migrate documentation from space.md to upload.md (#3292)

- Upload documentations acorrodingly

* docs: [date-picker] migrate document  (#3289)

* docs: [date-picker] migrate document

* fix: typo

* docs: [slider] migrate document (#3287)

* docs: migrate documents (#3290)

* docs: migrate-datetime-picker

* docs: migrate descriptions

* docs: migrate dialog

* docs: migrate divider

* docs: migrate drawer

* docs: migrate drapdown

* docs: fix drapdown

* docs: migrate empty

* docs: migrate form

* docs: add scoped for style

* docs: simplify toRefs

* chore: update doc (#3297)

* chore: update doc

* chore: update doc

* chore: update doc

* feat(docs): migrate documentations from infinite-scroll to page-header (#3303)

- Update docs accordingly
- Update CodePen icon to match style
- Update component name to match others

* docs: migrate documentions (#3293)

migrate list:
* image
* popover
* scrollbar
* radio
* rate
* skeleton
* select
* select-v2
* reault
* progress
* pagination

* chore: update doc (#3305)

Co-authored-by: 0song <0song@gmail.com>

* Fix broken pipeline

* chore: update demo plugin

* website perfection

* fix hydration bug

* docs: update guide (#3342)

* WIP docs

* docs: update docs

* add dark mode

* make dev fetch components from local instead of node_modules

Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

* fix(docs): fix codepen code example issue (#3380)

* fix(docs): fix codepen code example issue

- Add lang="ts" for all example files
- Fix codepen import error

* revert changes in resource.vue

* feat(docs): complete crowdin integration (#3408)

* Update mds for preparing the integration script

* deprecate old website

* update sponsors and even handler for resize

* update build script for preview

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* update deploy script and some bugs

* Fix existing issue

* chore(project): add dev preview workflow

* chore(project): rename dev to staging

* update the size of toc

* update staging-preview script

* update preview scripts

* enable website build for preview

* fix build error

* final commitment for update the details

* remove azure pipeline

* move docs ignores into docs and update date

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>

docs/examples/input/auto-sizing-textarea.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-input
+    v-model="textarea1"
+    autosize
+    type="textarea"
+    placeholder="Please input"
+  />
+  <div style="margin: 20px 0"></div>
+  <el-input
+    v-model="textarea2"
+    :autosize="{ minRows: 2, maxRows: 4 }"
+    type="textarea"
+    placeholder="Please input"
+  >
+  </el-input>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      textarea1: ref(''),
+      textarea2: ref(''),
+    }
+  },
+})
+</script>

docs/examples/input/autocomplete-template.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-autocomplete
+    v-model="state"
+    :fetch-suggestions="querySearch"
+    popper-class="my-autocomplete"
+    placeholder="Please input"
+    @select="handleSelect"
+  >
+    <template #suffix>
+      <i class="el-icon-edit el-input__icon" @click="handleIconClick"></i>
+    </template>
+    <template #default="{ item }">
+      <div class="value">{{ item.value }}</div>
+      <span class="link">{{ item.link }}</span>
+    </template>
+  </el-autocomplete>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+export default defineComponent({
+  setup() {
+    const links = ref([])
+
+    const querySearch = (queryString: string, cb) => {
+      const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value
+      // call callback function to return suggestion objects
+      cb(results)
+    }
+    const createFilter = (queryString) => {
+      return (restaurant) => {
+        return (
+          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
+          0
+        )
+      }
+    }
+    const loadAll = () => {
+      return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' },
+      ]
+    }
+    const handleSelect = (item) => {
+      console.log(item)
+    }
+
+    const handleIconClick = (ev) => {
+      console.log(ev)
+    }
+
+    onMounted(() => {
+      links.value = loadAll()
+    })
+
+    return {
+      links,
+      state: ref(''),
+      querySearch,
+      createFilter,
+      loadAll,
+      handleSelect,
+      handleIconClick,
+    }
+  },
+})
+</script>
+
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>

docs/examples/input/autocomplete.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-row class="demo-autocomplete">
+    <el-col :span="12">
+      <div class="sub-title">list suggestions when activated</div>
+      <el-autocomplete
+        v-model="state1"
+        :fetch-suggestions="querySearch"
+        class="inline-input"
+        placeholder="Please Input"
+        @select="handleSelect"
+      />
+    </el-col>
+    <el-col :span="12">
+      <div class="sub-title">list suggestions on input</div>
+      <el-autocomplete
+        v-model="state2"
+        :fetch-suggestions="querySearch"
+        :trigger-on-focus="false"
+        class="inline-input"
+        placeholder="Please Input"
+        @select="handleSelect"
+      />
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+export default defineComponent({
+  setup() {
+    const restaurants = ref([])
+    const querySearch = (queryString: string, cb) => {
+      const results = queryString
+        ? restaurants.value.filter(createFilter(queryString))
+        : restaurants.value
+      // call callback function to return suggestions
+      cb(results)
+    }
+    const createFilter = (queryString) => {
+      return (restaurant) => {
+        return (
+          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
+          0
+        )
+      }
+    }
+    const loadAll = () => {
+      return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' },
+      ]
+    }
+    const handleSelect = (item) => {
+      console.log(item)
+    }
+    onMounted(() => {
+      restaurants.value = loadAll()
+    })
+    return {
+      restaurants,
+      state1: ref(''),
+      state2: ref(''),
+      querySearch,
+      createFilter,
+      loadAll,
+      handleSelect,
+    }
+  },
+})
+</script>

docs/examples/input/basic.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-input v-model="input" placeholder="Please input" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      input: ref(''),
+    }
+  },
+})
+</script>

docs/examples/input/clearable.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-input v-model="input" placeholder="Please input" clearable />
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      input: ref(''),
+    }
+  },
+})
+</script>

docs/examples/input/disabled.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-input v-model="input" disabled placeholder="Please input" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      input: ref(''),
+    }
+  },
+})
+</script>

docs/examples/input/length-limiting.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-input
+    v-model="text"
+    maxlength="10"
+    placeholder="Please input"
+    show-word-limit
+    type="text"
+  >
+  </el-input>
+  <div style="margin: 20px 0"></div>
+  <el-input
+    v-model="textarea"
+    maxlength="30"
+    placeholder="Please input"
+    show-word-limit
+    type="textarea"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      text: ref(''),
+      textarea: ref(''),
+    }
+  },
+})
+</script>

docs/examples/input/mixed-input.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-input v-model="input1" placeholder="Please input">
+      <template #prepend>Http://</template>
+    </el-input>
+  </div>
+  <div style="margin-top: 15px">
+    <el-input v-model="input2" placeholder="Please input">
+      <template #append>.com</template>
+    </el-input>
+  </div>
+  <div style="margin-top: 15px">
+    <el-input
+      v-model="input3"
+      placeholder="Please input"
+      class="input-with-select"
+    >
+      <template #prepend>
+        <el-select v-model="select" placeholder="Select">
+          <el-option label="Restaurant" value="1"></el-option>
+          <el-option label="Order No." value="2"></el-option>
+          <el-option label="Tel" value="3"></el-option>
+        </el-select>
+      </template>
+      <template #append>
+        <el-button icon="el-icon-search"></el-button>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      input1: ref(''),
+      input2: ref(''),
+      input3: ref(''),
+      select: ref(''),
+    }
+  },
+})
+</script>
+
+<style>
+.el-select .el-input {
+  width: 110px;
+}
+.input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+</style>

docs/examples/input/password.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-input v-model="input" placeholder="Please input password" show-password />
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      input: ref(''),
+    }
+  },
+})
+</script>

docs/examples/input/remote-search.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-autocomplete
+    v-model="state"
+    :fetch-suggestions="querySearchAsync"
+    placeholder="Please input"
+    @select="handleSelect"
+  />
+</template>
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+export default defineComponent({
+  setup() {
+    const links = ref([])
+    const loadAll = () => {
+      return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' },
+      ]
+    }
+    let timeout
+    const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+      const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value
+
+      clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        cb(results)
+      }, 3000 * Math.random())
+    }
+    const createFilter = (queryString: string) => {
+      return (restaurant) => {
+        return (
+          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
+          0
+        )
+      }
+    }
+    const handleSelect = (item) => {
+      console.log(item)
+    }
+    onMounted(() => {
+      links.value = loadAll()
+    })
+    return {
+      links,
+      state: ref(''),
+      querySearchAsync,
+      createFilter,
+      loadAll,
+      handleSelect,
+    }
+  },
+})
+</script>

docs/examples/input/textarea.vue

@@ -0,0 +1,19 @@
+<template>
+  <el-input
+    v-model="textarea"
+    :rows="2"
+    type="textarea"
+    placeholder="Please input"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      textarea: ref(''),
+    }
+  },
+})
+</script>

docs/examples/input/various-size.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="demo-input-size">
+    <el-input v-model="input1" placeholder="Please Input" />
+    <el-input v-model="input2" size="medium" placeholder="Please Input" />
+    <el-input v-model="input3" size="small" placeholder="Please Input" />
+    <el-input v-model="input4" size="mini" placeholder="Please Input" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      input1: ref(''),
+      input2: ref(''),
+      input3: ref(''),
+      input4: ref(''),
+    }
+  },
+})
+</script>
+
+<style scoped>
+.el-input {
+  margin-bottom: 16px;
+}
+</style>

docs/examples/input/with-icon.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="demo-input-suffix">
+    <span class="demo-input-label">Using attributes</span>
+    <el-row :gutter="20">
+      <el-input
+        v-model="input1"
+        placeholder="Pick a date"
+        suffix-icon="el-icon-date"
+      />
+    </el-row>
+    <el-row :gutter="20">
+      <el-input
+        v-model="input2"
+        placeholder="Type something"
+        prefix-icon="el-icon-search"
+      />
+    </el-row>
+  </div>
+  <div class="demo-input-suffix">
+    <span class="demo-input-label">Using slots</span>
+    <el-row :gutter="20">
+      <el-input v-model="input3" placeholder="Pick a date">
+        <template #suffix>
+          <i class="el-input__icon el-icon-date"></i>
+        </template>
+      </el-input>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-input v-model="input4" placeholder="Type something">
+        <template #prefix>
+          <i class="el-input__icon el-icon-search"></i>
+        </template>
+      </el-input>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup() {
+    return {
+      input1: ref(''),
+      input2: ref(''),
+      input3: ref(''),
+      input4: ref(''),
+    }
+  },
+})
+</script>
+
+<style>
+.demo-input-label {
+  display: inline-block;
+  width: 130px;
+}
+
+.demo-input-suffix {
+  margin-bottom: 16px;
+}
+</style>