From 15e90cbc52f17600d1dea119553c20f77176b7fe Mon Sep 17 00:00:00 2001
From: c0dedance <38075730+c0dedance@users.noreply.github.com>
Date: Sun, 16 Oct 2022 15:20:52 +0800
Subject: [PATCH] feat: init result component (#17)

---
 src/components/Data/result.story.vue | 70 ++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/components/Data/result.story.vue

diff --git a/src/components/Data/result.story.vue b/src/components/Data/result.story.vue
new file mode 100644
index 0000000..6ba623f
--- /dev/null
+++ b/src/components/Data/result.story.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ResultProps } from 'element-plus'
+
+const currentIcon = ref('info')
+const title = ref('Tip')
+const subTitle = ref('Please follow the instructions')
+const iconList: Record<'label' & 'value', ResultProps['icon']>[] = [
+  {
+    label: 'success',
+    value: 'success',
+  },
+  {
+    label: 'warning',
+    value: 'warning',
+  },
+  {
+    label: 'error',
+    value: 'error',
+  },
+  {
+    label: 'info',
+    value: 'info',
+  },
+]
+</script>
+
+<template>
+  <Story title="Data/Result">
+    <Variant title="Basic usage">
+      <el-result
+        :icon="currentIcon"
+        :title="title"
+        :sub-title="subTitle"
+      />
+      <template #controls>
+        <HstRadio
+          v-model="currentIcon"
+          title="Icon"
+          :options="iconList"
+        />
+      </template>
+    </Variant>
+    <Variant title="Customized content">
+      <el-result title="404" sub-title="Sorry, request error">
+        <template #icon>
+          <el-image
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+          />
+        </template>
+        <template #extra>
+          <el-button type="primary">
+            Back
+          </el-button>
+        </template>
+      </el-result>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+Used to give feedback on the result of user's operation or access exception.
+
+## Basic usage
+
+Result usage
+
+## Customized content
+</docs>
+