[#623] Docs 샘플 컴포넌트 구성

docs/App.vue

@@ -1,4 +1,6 @@
 <template>
+  <link ref="lightCss" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/github.min.css">
+  <link ref="darkCss" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/hybrid.min.css" disabled>
   <div
     :class="['evui-docs', docsTheme]"
   >
@@ -13,7 +15,7 @@
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, watchEffect, onMounted } from 'vue';
 import MainHeader from './components/Header';
 import MainContent from './components/Content';
 import MainNav from './components/Menu';
@@ -27,8 +29,25 @@ export default {
   },
   setup() {
     const docsTheme = ref('light');
+    const lightCss = ref(null);
+    const darkCss = ref(null);
+
+    onMounted(() => {
+      watchEffect(() => {
+        if (docsTheme.value === 'light') {
+          lightCss.value.disabled = false;
+          darkCss.value.disabled = true;
+        } else {
+          lightCss.value.disabled = true;
+          darkCss.value.disabled = false;
+        }
+      });
+    });
+
     return {
       docsTheme,
+      lightCss,
+      darkCss,
     };
   },
 };

docs/components/Content.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="evui-content">
+  <main class="evui-content">
     <router-view />
-  </div>
+  </main>
 </template>
 
 <script>
@@ -15,6 +15,6 @@ export default {
 
 .evui-content {
   position: relative;
-  padding: 30px;
+  padding: 30px 40px;
 }
 </style>

docs/components/Example.vue

@@ -1,32 +1,46 @@
 <template>
-  <section>
-    <h2>{{ title }}</h2>
-    <br>
-    <p class="example-desc">
+  <article class="article-wrapper">
+    <h3 class="article-title">
+      {{ title }}
+    </h3>
+    <p class="article-description">
       {{ description }}
     </p>
-    <br><br>
-    <div
-      class="example-sample"
-    >
-      <component
-        :is="contents"
-      />
-      <hr class="example-splitter">
-      <div v-highlight>
-        <pre>
-          {{ content }}
-        </pre>
+    <div class="article-example">
+      <div class="view">
+        <component
+          :is="contents"
+        />
+      </div>
+      <div
+        v-highlight
+        :class="['code', { 'expend': codeExpend }]"
+      >
+        <div
+          ref="codeWrapper"
+          class="code-wrapper"
+        >
+          <pre
+            v-for="(code, key) in codeText"
+            :key="key"
+          >
+            {{ code }}
+          </pre>
+        </div>
+        <div
+          class="btn-show-more"
+          @click="clickExpend"
+        >
+          {{ codeExpend ? '▲ Fold the code' : '▼ Unfold the code' }}
+        </div>
       </div>
     </div>
-  </section>
+  </article>
 </template>
 
 <script>
-import { parseComponent } from 'vue-template-compiler';
+import { ref } from 'vue';
 import hljs from 'highlight.js';
-import CheckboxRaw from '!!raw-loader!../views/checkbox/example/Default';
-import 'highlight.js/styles/github.css';
 
 export default {
   name: 'Example',
@@ -40,8 +54,6 @@ export default {
       },
     },
   },
-  components: {
-  },
   props: {
     title: {
       type: String,
@@ -59,38 +71,110 @@ export default {
       type: String,
       default: '',
     },
+    codeText: {
+      type: Object,
+      default: () => {},
+    },
   },
   setup() {
-    const { template } = parseComponent(CheckboxRaw);
-    const { content } = template;
-
+    const codeExpend = ref(false);
+    const codeWrapper = ref(null);
+    const clickExpend = () => {
+      codeExpend.value = !codeExpend.value;
+      if (!codeExpend.value) {
+        codeWrapper.value.scrollTop = 0;
+      }
+    };
     return {
-      content,
-      template,
+      codeExpend,
+      codeWrapper,
+      clickExpend,
     };
   },
 };
 </script>
 
 <style lang="scss">
-.example-sample {
+@import '../style/index.scss';
+
+.content-title {
+  padding-bottom: 15px;
+  margin-bottom: 35px;
+  font-size: 28px;
+  font-weight: bold;
+
+  @include themify() {
+    border-bottom: 1px solid themed('border-color-base');
+  }
+}
+.article-wrapper {
+  margin-bottom: 55px;
+  font-size: 15px;
+}
+.article-title {
+  margin-bottom: 20px;
+  font-size: 23px;
+  font-weight: bold;
+}
+.article-description {
+  margin-bottom: 30px;
+  line-height: 1.5em;
+}
+.article-example {
   display: flex;
-  border: 1px solid #FFDD57;
+  border: 1px solid $color-yellow;
   border-radius: 4px;
-  div {
-    max-height: 600px;
-    flex-grow: 1;
-    padding: 15px;
-    overflow-y: auto;
+  .view {
+    flex: 1;
+    padding: 15px 20px;
+    border-right: 1px solid $color-yellow;
   }
-  div:last-child {
-    padding: 0;
+  .code {
+    position: relative;
+    width: 50%;
+    max-width: 700px;
+    .code-wrapper {
+      height: 400px;
+      overflow-y: hidden;
+    }
+    .btn-show-more {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 45px;
+      line-height: 45px;
+      background-color: rgba($color-yellow, 0.7);
+      color: $color-black;
+      text-align: center;
+      cursor: pointer;
+    }
+    &.expend {
+      .code-wrapper {
+        height: auto;
+        max-height: 600px;
+        padding-bottom: 45px;
+        overflow-y: auto;
+      }
+    }
+    * {
+      font-family: consolas, monospace;
+    }
   }
 }
 
-.example-splitter {
-  width: 1px;
-  background-color: #FFDD57;
-  border: none;
+@media all and (max-width: 1280px) {
+  .article-example {
+    display: block;
+    .view {
+      width: 100%;
+      border-right: 0;
+      border-bottom: 1px solid $color-yellow;
+    }
+    .code {
+      max-width: none;
+      width: 100%;
+    }
+  }
 }
 </style>

docs/components/Header.vue

@@ -59,7 +59,7 @@ a {
   height: $header-height;
   padding: 0 10px;
   align-items: center;
-  background-color: #67A1F4;
+  background-color: $color-blue;
   z-index: 10;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 

docs/components/Menu.vue

@@ -149,7 +149,10 @@ export default {
   height: 100%;
   padding: 25px 12px;
   overflow: auto;
-  border-right: 1px solid #DDDDDD;
+
+  @include themify() {
+    border-right: 1px solid themed('border-color-base');
+  }
 
   ul, li {
     list-style: none;
@@ -161,7 +164,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      color: $color-main;
+      color: $color-blue;
     }
   }
 }

docs/style/index.scss

@@ -4,7 +4,3 @@
 @import 'mixins';
 @import 'variables';
 @import 'themes';
-
-body {
-  background: yellowgreen;
-}

docs/style/themes.scss

@@ -5,6 +5,7 @@ $ev-themes: (
     /* common
     -------------------------- */
     background-color-base: $color-white,
+    border-color-base: #DDDDDD,
     font-color-base: $color-black,
     color-primary: #1A6AFE,
     color-info: #5AC8FA,
@@ -17,6 +18,7 @@ $ev-themes: (
     /* common
     -------------------------- */
     background-color-base: #2D2D2D,
+    border-color-base: #222222,
     font-color-base: $color-white,
     color-primary: #007AFF,
     color-info: #64D2FF,

docs/style/variables.scss

@@ -10,12 +10,12 @@ $font-family-base: inherit !default;
 // Common Color
 $color-white: #FFFFFF !default;
 $color-black: #0D0D0D !default;
-$color-main: #67A1F4 !default;
+$color-blue: #3C81F6 !default;
+$color-red: #FF470E !default;
+$color-yellow: #FADE4C !default;
 
 // etc
 $border-radius-base: 2px;
-$border-solid: 1px solid;
-$border-dotted: 1px dotted;
 
 // layout
 $header-height: 55px;

docs/views/checkbox/index.vue

@@ -1,22 +1,24 @@
 <template>
-  <div class="article-title">
-    <h1> CHECK BOX </h1>
-  </div>
-  <br><hr><br>
+  <h2 class="content-title">
+    Checkbox
+  </h2>
   <Example
     v-for="(component, index) in components"
     :key="`${component.title}_${index}`"
     :title="component.title"
     :description="component.description"
     :contents="component.component"
     :url="component.url"
+    :code-text="component.codeText"
   />
 </template>
 
 <script>
 import { ref, defineAsyncComponent } from 'vue';
+import { parseComponent } from 'vue-template-compiler';
 import Example from '../../components/Example';
 import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
 
 export default {
   name: 'Checkbox',
@@ -33,20 +35,27 @@ export default {
       console.log(`value: ${value}, e : ${e}`);
     };
 
+    const { template, script } = parseComponent(DefaultRaw);
+    const codeTextObj = {
+      template: template.content,
+      script: script.content,
+    };
+
     const components = [
       {
         title: 'Default',
         description: '여러 개의 선택 사항을 고르기 위한 단일 체크 박스의 기능입니다.',
         component: defineAsyncComponent(() => Promise.resolve(Default)),
         url: './docs/views/checkbox/example/Default.vue',
+        codeText: codeTextObj,
       },
     ];
 
     return {
+      components,
       checkVal1,
       checkVal2,
       checkVal3,
-      components,
       onChange,
     };
   },