test(ssr): add ssr testing cases

- Add more cases for running ssr tests

ssr-testing/cases/basic.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-switch v-model="value1" />
+  <el-switch
+    v-model="value2"
+    class="ml-2"
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const value1 = ref(true)
+const value2 = ref(true)
+</script>

ssr-testing/cases/drawer.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-radio-group v-model="direction">
+    <el-radio label="ltr">left to right</el-radio>
+    <el-radio label="rtl">right to left</el-radio>
+    <el-radio label="ttb">top to bottom</el-radio>
+    <el-radio label="btt">bottom to top</el-radio>
+  </el-radio-group>
+
+  <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
+    open
+  </el-button>
+  <el-button type="primary" style="margin-left: 16px" @click="drawer2 = true">
+    with footer
+  </el-button>
+
+  <el-drawer v-model="drawer" title="I am the title" :direction="direction">
+    <span>Hi, there!</span>
+  </el-drawer>
+  <el-drawer v-model="drawer2" :direction="direction">
+    <template #title>
+      <h4>set title by slot</h4>
+    </template>
+    <template #default>
+      <div>
+        <el-radio v-model="radio1" label="Option 1" size="large"
+          >Option 1</el-radio
+        >
+        <el-radio v-model="radio1" label="Option 2" size="large"
+          >Option 2</el-radio
+        >
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="cancelClick">cancel</el-button>
+        <el-button type="primary">confirm</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const drawer = ref(false)
+const drawer2 = ref(false)
+const direction = ref<'rtl'>('rtl')
+const radio1 = ref('Option 1')
+
+function cancelClick() {
+  drawer2.value = false
+}
+</script>

ssr-testing/cases/dropdown.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-dropdown>
+    <span
+      class="el-dropdown-link"
+      style="
+        cursor: pointer;
+        color: var(--el-color-primary);
+        display: flex;
+        align-items: center;
+      "
+    >
+      Dropdown List
+      <el-icon class="el-icon--right">
+        <arrow-down />
+      </el-icon>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item>Action 1</el-dropdown-item>
+        <el-dropdown-item>Action 2</el-dropdown-item>
+        <el-dropdown-item>Action 3</el-dropdown-item>
+        <el-dropdown-item disabled>Action 4</el-dropdown-item>
+        <el-dropdown-item divided>Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script lang="ts" setup>
+import { ArrowDown } from '@element-plus/icons-vue'
+</script>

ssr-testing/cases/empty.vue

@@ -0,0 +1,3 @@
+<template>
+  <el-empty description="description" />
+</template>

ssr-testing/cases/form.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="dynamicValidateForm"
+    label-width="120px"
+    class="demo-dynamic"
+  >
+    <el-form-item
+      prop="email"
+      label="Email"
+      :rules="[
+        {
+          required: true,
+          message: 'Please input email address',
+          trigger: 'blur',
+        },
+        {
+          type: 'email',
+          message: 'Please input correct email address',
+          trigger: ['blur', 'change'],
+        },
+      ]"
+    >
+      <el-input v-model="dynamicValidateForm.email" />
+    </el-form-item>
+    <el-form-item
+      v-for="(domain, index) in dynamicValidateForm.domains"
+      :key="domain.key"
+      :label="'Domain' + index"
+      :prop="'domains.' + index + '.value'"
+      :rules="{
+        required: true,
+        message: 'domain can not be null',
+        trigger: 'blur',
+      }"
+    >
+      <el-input v-model="domain.value" />
+      <el-button style="margin-top: 8px" @click.prevent="removeDomain(domain)"
+        >Delete</el-button
+      >
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
+      <el-button @click="addDomain">New domain</el-button>
+      <el-button @click="resetForm(formRef)">Reset</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+
+const formRef = ref<FormInstance>()
+const dynamicValidateForm = reactive<{
+  domains: DomainItem[]
+  email: string
+}>({
+  domains: [
+    {
+      key: 1,
+      value: '',
+    },
+  ],
+  email: '',
+})
+
+interface DomainItem {
+  key: number
+  value: string
+}
+
+const removeDomain = (item: DomainItem) => {
+  const index = dynamicValidateForm.domains.indexOf(item)
+  if (index !== -1) {
+    dynamicValidateForm.domains.splice(index, 1)
+  }
+}
+
+const addDomain = () => {
+  dynamicValidateForm.domains.push({
+    key: Date.now(),
+    value: '',
+  })
+}
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>

ssr-testing/cases/image.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="demo-image">
+    <div
+      v-for="fit in fits"
+      :key="fit"
+      class="block"
+      style="
+        padding: 30px 0;
+        text-align: center;
+        border-right: solid 1px var(--el-border-color);
+        display: inline-block;
+        width: 20%;
+        box-sizing: border-box;
+        vertical-align: top;
+      "
+    >
+      <span
+        class="demonstration"
+        style="
+          display: block;
+          color: var(--el-text-color-secondary);
+          font-size: 14px;
+          margin-bottom: 20px;
+        "
+        >{{ fit }}</span
+      >
+      <el-image style="width: 100px; height: 100px" :url="url" :fit="fit" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as const
+const url =
+  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+</script>

ssr-testing/cases/infinite-scroll.vue

@@ -0,0 +1,39 @@
+<template>
+  <ul
+    v-infinite-scroll="load"
+    class="infinite-list"
+    style="
+      overflow: auto;
+      height: 300px;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    "
+  >
+    <li
+      v-for="i in count"
+      :key="i"
+      class="infinite-list-item"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        background: var(--el-color-primary-light-9);
+        margin: 10px;
+        color: var(--el-color-primary);
+        margin-top: 10px;
+      "
+    >
+      {{ i }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const count = ref(0)
+const load = () => {
+  count.value += 2
+}
+</script>

ssr-testing/cases/input-number.vue

@@ -0,0 +1,9 @@
+<template>
+  <el-input-number v-model="num" :min="1" :max="10" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const num = ref(1)
+</script>

ssr-testing/cases/input.vue

@@ -0,0 +1,8 @@
+<template>
+  <el-input v-model="input" placeholder="Please input" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const input = ref('')
+</script>

ssr-testing/cases/layout.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-row style="margin-bottom: 20px">
+    <el-col :span="24" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple-dark"
+        style="border-radius: 4px; min-height: 36px; background: #99a9bf"
+    /></el-col>
+  </el-row>
+  <el-row style="margin-bottom: 20px">
+    <el-col :span="12" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+    <el-col :span="12" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
+    /></el-col>
+  </el-row>
+  <el-row style="margin-bottom: 20px">
+    <el-col :span="8" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+    <el-col :span="8" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
+    /></el-col>
+    <el-col :span="8" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+  </el-row>
+  <el-row style="margin-bottom: 20px">
+    <el-col :span="6" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+    <el-col :span="6" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
+    /></el-col>
+    <el-col :span="6" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+    <el-col :span="6" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
+    /></el-col>
+  </el-row>
+  <el-row style="margin-bottom: 20px">
+    <el-col :span="4" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+    <el-col :span="4" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
+    /></el-col>
+    <el-col :span="4" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+    <el-col :span="4" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
+    /></el-col>
+    <el-col :span="4" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #d3dce6"
+    /></el-col>
+    <el-col :span="4" style="border-radius: 4px"
+      ><div
+        class="grid-content bg-purple"
+        style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
+    /></el-col>
+  </el-row>
+</template>