From 1c9694295bea894eba38c148dd9acc8cb6df32a6 Mon Sep 17 00:00:00 2001
From: nightswinger <stardustkids83@gmail.com>
Date: Tue, 27 Feb 2024 10:17:13 +0900
Subject: [PATCH] update emoji docs

---
 .../elements/Emoji/AutosizingDoc.vue          |  42 +++++
 .../components/elements/Emoji/DisabledDoc.vue |  20 +++
 .../src/components/elements/Emoji/LinkDoc.vue |  20 +++
 .../components/elements/Emoji/LoadingDoc.vue  |  24 +++
 .../src/components/elements/Emoji/SizeDoc.vue |  26 ++++
 docs/src/pages/EmojiDoc.vue                   | 143 ------------------
 docs/src/pages/elements/Emoji.vue             |  53 +++++++
 docs/src/router.ts                            |   6 +-
 8 files changed, 188 insertions(+), 146 deletions(-)
 create mode 100644 docs/src/components/elements/Emoji/AutosizingDoc.vue
 create mode 100644 docs/src/components/elements/Emoji/DisabledDoc.vue
 create mode 100644 docs/src/components/elements/Emoji/LinkDoc.vue
 create mode 100644 docs/src/components/elements/Emoji/LoadingDoc.vue
 create mode 100644 docs/src/components/elements/Emoji/SizeDoc.vue
 delete mode 100644 docs/src/pages/EmojiDoc.vue
 create mode 100644 docs/src/pages/elements/Emoji.vue

diff --git a/docs/src/components/elements/Emoji/AutosizingDoc.vue b/docs/src/components/elements/Emoji/AutosizingDoc.vue
new file mode 100644
index 0000000..f370de2
--- /dev/null
+++ b/docs/src/components/elements/Emoji/AutosizingDoc.vue
@@ -0,0 +1,42 @@
+<template>
+  <DocSection label="Autosizing" :code="code">
+    <template #description>
+      If no specific size class is given, all emojis are automatically sized according to the current element font-size
+    </template>
+    <template #example>
+      <SuiHeader size="small">
+        Within a Header
+        <SuiEmoji name="relaxed" />
+      </SuiHeader>
+      <SuiButton as="div" size="large">
+        Within a Button
+        <SuiEmoji name="relaxed" />
+      </SuiButton>
+      <SuiLabel size="massive">
+        Within a Label
+        <SuiEmoji name="relaxed" />
+      </SuiLabel>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji, SuiHeader, SuiButton, SuiLabel } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader size="small">
+    Within a Header
+    <SuiEmoji name="relaxed" />
+  </SuiHeader>
+  <SuiButton as="div" size="large">
+    Within a Button
+    <SuiEmoji name="relaxed" />
+  </SuiButton>
+  <SuiLabel size="massive">
+    Within a Label
+    <SuiEmoji name="relaxed" />
+  </SuiLabel>
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/DisabledDoc.vue b/docs/src/components/elements/Emoji/DisabledDoc.vue
new file mode 100644
index 0000000..c18219c
--- /dev/null
+++ b/docs/src/components/elements/Emoji/DisabledDoc.vue
@@ -0,0 +1,20 @@
+<template>
+  <DocSection label="Disabled" :code="code">
+    <template #description>
+      An emoji can show that it is disabled
+    </template>
+    <template #example>
+      <SuiEmoji name="anguished" disabled />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji name="anguished" disabled />
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/LinkDoc.vue b/docs/src/components/elements/Emoji/LinkDoc.vue
new file mode 100644
index 0000000..0e3a0c9
--- /dev/null
+++ b/docs/src/components/elements/Emoji/LinkDoc.vue
@@ -0,0 +1,20 @@
+<template>
+  <DocSection label="Link" :code="code">
+    <template #description>
+      An emoji can be formatted as a link
+    </template>
+    <template #example>
+      <SuiEmoji link name="slight_smile" size="medium" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji link name="slight_smile" size="medium" />
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/LoadingDoc.vue b/docs/src/components/elements/Emoji/LoadingDoc.vue
new file mode 100644
index 0000000..810625f
--- /dev/null
+++ b/docs/src/components/elements/Emoji/LoadingDoc.vue
@@ -0,0 +1,24 @@
+<template>
+  <DocSection label="Loading" :code="code">
+    <template #description>
+      An emoji can be used as a simple loader
+    </template>
+    <template #example>
+      <SuiEmoji name="angel" loading />
+      <SuiEmoji name="blush" loading />
+      <SuiEmoji name="grin" loading />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji name="angel" loading />
+  <SuiEmoji name="blush" loading />
+  <SuiEmoji name="grin" loading />
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/SizeDoc.vue b/docs/src/components/elements/Emoji/SizeDoc.vue
new file mode 100644
index 0000000..d523c48
--- /dev/null
+++ b/docs/src/components/elements/Emoji/SizeDoc.vue
@@ -0,0 +1,26 @@
+<template>
+  <DocSection label="Size" :code="code">
+    <template #description>
+      An emoji can vary in size
+    </template>
+    <template #example>
+      <SuiEmoji name="relaxed" size="small" />
+      <SuiEmoji name="relaxed" size="medium" />
+      <SuiEmoji name="relaxed" size="large" />
+      <SuiEmoji name="relaxed" size="big" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji name="relaxed" size="small" />
+  <SuiEmoji name="relaxed" size="medium" />
+  <SuiEmoji name="relaxed" size="large" />
+  <SuiEmoji name="relaxed" size="big" />
+<\/template>`
+</script>
diff --git a/docs/src/pages/EmojiDoc.vue b/docs/src/pages/EmojiDoc.vue
deleted file mode 100644
index d10a1ea..0000000
--- a/docs/src/pages/EmojiDoc.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div>
-    <sui-segment vertical>
-      <sui-container class="main">
-        <div class="intro">
-          <sui-header as="h1">Emoji
-            <sui-header-subheader>
-              An emoji is a glyph used to represent an emotional state
-            </sui-header-subheader>
-          </sui-header>
-
-          <sui-divider hidden />
-
-          <sui-menu floated="right">
-            <sui-menu-item as="a" icon>
-              <sui-icon name="edit"></sui-icon>
-            </sui-menu-item>
-            <sui-menu-item as="a" icon>
-              <sui-icon name="github"></sui-icon>
-            </sui-menu-item>
-          </sui-menu>
-        </div>
-      </sui-container>
-    </sui-segment>
-
-    <sui-container class="main">
-      <sui-header as="h2" dividing>States</sui-header>
-
-      <doc-example
-        title="Disabled"
-        description="An emoji can show that it is disabled"
-        :code="disabledCode"
-      >
-        <sui-segment basic>
-          <sui-emoji name="anguished" disabled />
-        </sui-segment>
-      </doc-example>
-
-      <doc-example
-        title="Loading"
-        description="An emoji can be used as a simple loader"
-        :code="loadingCode"
-      >
-        <sui-segment basic>
-          <sui-emoji name="angel" loading />
-          <sui-emoji name="blush" loading />
-          <sui-emoji name="grin" loading />
-        </sui-segment>
-      </doc-example>
-
-      <sui-header as="h2" dividing>Variations</sui-header>
-
-      <doc-example
-        title="Size"
-        description="An emoji can vary in size"
-        :code="sizeCode"
-      >
-        <sui-segment basic>
-          <sui-emoji name="relaxed" size="small" /> Small
-          <br>
-          <sui-emoji name="relaxed" size="medium" /> Medium
-          <br>
-          <sui-emoji name="relaxed" size="large" /> Large
-          <br>
-          <sui-emoji name="relaxed" size="big" /> Big
-        </sui-segment>
-      </doc-example>
-
-      <doc-example
-        title="Autosizing"
-        description="If no specific size class is given, all emojis are automatically sized according to the current element font-size"
-        :code="autosizingCode"
-      >
-        <sui-segment basic>
-          <sui-header size="small">Within a header <sui-emoji name="relaxed" /></sui-header>
-          <sui-button size="large">Within a button <sui-emoji name="relaxed" /></sui-button>
-          <br><br>
-          <sui-label size="massive">Within a label <sui-emoji name="relaxed" /></sui-label>
-        </sui-segment>
-      </doc-example>
-
-      <doc-example
-        title="Link"
-        description="An emoji can be formatted as a link"
-        :code="linkCode"
-      >
-        <sui-segment basic>
-          <sui-emoji name="slight_smile" link />
-        </sui-segment>
-      </doc-example>
-    </sui-container>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-import DocExample from '../components/DocExample.vue'
-
-export default defineComponent({
-  name: 'EmojiDoc',
-  components: { DocExample },
-  setup() {
-    const disabledCode = `<sui-segment basic>
-  <sui-emoji name="anguished" disabled />
-</sui-segment>`
-
-    const loadingCode = `<sui-segment basic>
-  <sui-emoji name="angel" loading />
-  <sui-emoji name="blush" loading />
-  <sui-emoji name="grin" loading />
-</sui-segment>`
-
-    const sizeCode = `<sui-segment basic>
-  <sui-emoji name="relaxed" size="small" /> Small
-  <br>
-  <sui-emoji name="relaxed" size="medium" /> Medium
-  <br>
-  <sui-emoji name="relaxed" size="large" /> Large
-  <br>
-  <sui-emoji name="relaxed" size="big" /> Big
-</sui-segment>`
-
-    const autosizingCode = `<sui-segment basic>
-  <sui-header size="small">Within a header <sui-emoji name="relaxed" /></sui-header>
-  <sui-button size="large">Within a button <sui-emoji name="relaxed" /></sui-button>
-  <br><br>
-  <sui-label size="massive">Within a label <sui-emoji name="relaxed" /></sui-label>
-</sui-segment>`
-
-    const linkCode = `<sui-segment basic>
-  <sui-emoji name="slight_smile" link />
-</sui-segment>`
-
-    return {
-      disabledCode,
-      loadingCode,
-      sizeCode,
-      autosizingCode,
-      linkCode
-    }
-  }
-})
-</script>
\ No newline at end of file
diff --git a/docs/src/pages/elements/Emoji.vue b/docs/src/pages/elements/Emoji.vue
new file mode 100644
index 0000000..30e77db
--- /dev/null
+++ b/docs/src/pages/elements/Emoji.vue
@@ -0,0 +1,53 @@
+<template>
+  <DocComponent
+    title="Emoji"
+    description="An emoji is a glyph used to represent an emotional state"
+    :component-docs="docs"
+  />
+</template>
+
+<script setup>
+import DocComponent from '@/components/doc/DocComponent.vue'
+
+// States
+import DisabledDoc from '@/components/elements/Emoji/DisabledDoc.vue'
+import LoadingDoc from '@/components/elements/Emoji/LoadingDoc.vue'
+
+// Variations
+import SizeDoc from '@/components/elements/Emoji/SizeDoc.vue'
+import AutosizingDoc from '@/components/elements/Emoji/AutosizingDoc.vue'
+import LinkDoc from '@/components/elements/Emoji/LinkDoc.vue'
+
+const docs = [
+  {
+    id: 'disabled',
+    label: 'Disabled',
+    category: 'States',
+    component: DisabledDoc,
+  },
+  {
+    id: 'loading',
+    label: 'Loading',
+    category: 'States',
+    component: LoadingDoc,
+  },
+  {
+    id: 'size',
+    label: 'Size',
+    category: 'Variations',
+    component: SizeDoc,
+  },
+  {
+    id: 'autosizing',
+    label: 'Autosizing',
+    category: 'Variations',
+    component: AutosizingDoc,
+  },
+  {
+    id: 'link',
+    label: 'Link',
+    category: 'Variations',
+    component: LinkDoc,
+  },
+]
+</script>
diff --git a/docs/src/router.ts b/docs/src/router.ts
index 506b684..8b5a16d 100644
--- a/docs/src/router.ts
+++ b/docs/src/router.ts
@@ -2,9 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from './pages/Home.vue'
 import GettingStarted from './pages/GettingStarted.vue'
 import Button from './pages/elements/Button.vue'
-import Container from './pages/Container.vue'
+import Container from './pages/elements/Container.vue'
 import Divider from './pages/elements/Divider.vue'
-import EmojiDoc from './pages/EmojiDoc.vue'
+import Emoji from './pages/elements/Emoji.vue'
 import FlagDoc from './pages/FlagDoc.vue'
 import HeaderDoc from './pages/HeaderDoc.vue'
 import IconDoc from './pages/IconDoc.vue'
@@ -55,7 +55,7 @@ const routes: any = [
       { path: 'elements/button', component: Button },
       { path: 'elements/container', component: Container },
       { path: 'elements/divider', component: Divider },
-      { path: 'elements/emoji', component: EmojiDoc },
+      { path: 'elements/emoji', component: Emoji },
       { path: 'elements/flag', component: FlagDoc },
       { path: 'elements/header', component: HeaderDoc },
       { path: 'elements/icon', component: IconDoc },