Feat/init select

package.json

@@ -23,6 +23,7 @@
     "@vitejs/plugin-vue": "^3.1.0",
     "@vueuse/core": "^9.3.1",
     "commander": "^9.4.1",
+    "consola": "^2.15.3",
     "eslint": "^8.25.0",
     "histoire": "^0.11.2",
     "inquirer": "^9.1.3",

script/create/constant.ts

@@ -5,20 +5,30 @@ export const resolver = (dir: string) => resolve(PROJECT_DIR, dir)
 export const createStoryComponent = (category: CategoryType, component: ComponentType) => `\
 <script setup lang="ts">
 import type { ${component}Props } from 'element-plus'
+function initState () {
+  return {
+  }
+}
 </script>
 
 <template>
   <!-- icon from https://icones.js.org/collection/all?s=element -->
   <Story title="${category}/${component}" icon="ep:element-plus">
-    <Variant title="Basic Usage">
-      <template #controls>
+    <Variant
+      title="Basic Usage"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <!-- default -->
+      </template>
+      <template #controls="{ state }">
         <!-- HstControl -->
       </template>
     </Variant>
   </Story>
 </template>
 
-<style>
+<style scoped>
 </style>
 `
 

script/create/utils.ts

@@ -1,5 +1,5 @@
-/* eslint-disable no-console */
 import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'fs'
+import consola from 'consola'
 import { lowerFirst, upperFirst } from '../utils'
 import type { CategoryType, ComponentType } from './constant'
 import { categoryList, componentCollection, createStoryComponent, createStoryMd, resolver } from './constant'
@@ -32,7 +32,7 @@ export const getComponentChoices = async () => {
 export const generateStoryDoc = (component: ComponentType) => {
   const category = categoryList.find(type => (componentCollection[type]?.components as [ComponentType])?.includes(component))!
   if (!category)
-    return console.log(`${component} not a legal component of EP, please check and re-enter!`)
+    return consola.error(`${component} not a legal component of EP, please check and re-enter!`)
 
   // 确定生成路径
   const fileVueName = `${lowerFirst(component)}.story.vue`
@@ -52,24 +52,26 @@ export const generateStoryDoc = (component: ComponentType) => {
 
     // 组件文档存在则退出
     if (existsSync(storyDocFileVue)) {
-      console.log(`${storyDocFileVue} Already existed!`)
+      consola.error(`${storyDocFileVue} Already existed!`)
       return
     }
     writeFileSync(storyDocFileVue, template, { encoding: 'utf-8' })
 
     if (existsSync(storyDocFileMd)) {
-      console.log(`${storyDocFileMd} Already existed!`)
+      consola.error(`${storyDocFileMd} Already existed!`)
       return
     }
     writeFileSync(storyDocFileMd, md, { encoding: 'utf-8' })
 
-    console.log(`${storyDocFileVue} Creation success!`)
-    console.log(`${storyDocFileMd} Creation success!`)
-    console.log(`path: ${storyDocFileVue}`)
-    console.log(`path: ${storyDocFileMd}`)
+    printSuccess(component, storyDocFileVue)
   }
   catch (e) {
     console.error(e.toString())
     process.exit(1)
   }
 }
+
+function printSuccess(component: ComponentType, dir: string) {
+  consola.success(`\x1B[36m${component} Creation Success\x1B[39m`)
+  consola.info(`\x1B[36mPath:\x1B[39m \x1B[32m${dir}\x1B[39m`)
+}

src/components/Basic/Container/container.story.vue

@@ -36,7 +36,7 @@ const asideWidth = ref(100)
   </Story>
 </template>
 
-<style>
+<style scoped>
   .el-header, .el-footer {
     background-color: #c6e2ff;
     color: #333;

src/components/Feedback/alert.story.vue

@@ -180,7 +180,7 @@ Alert provide two different themes, light and dark.
 Set effect to change theme, default is light.
 </docs>
 
-<style>
+<style scoped>
 .el-alert {
   margin: 20px 0 0;
 }

src/components/Form/Select/constant.ts

@@ -0,0 +1,142 @@
+export const selectOptions = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+    disabled: true,
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+
+export const groupOptions = [
+  {
+    label: 'Popular cities',
+    options: [
+      {
+        value: 'Shanghai',
+        label: 'Shanghai',
+      },
+      {
+        value: 'Beijing',
+        label: 'Beijing',
+      },
+    ],
+  },
+  {
+    label: 'City name',
+    options: [
+      {
+        value: 'Chengdu',
+        label: 'Chengdu',
+      },
+      {
+        value: 'Shenzhen',
+        label: 'Shenzhen',
+      },
+      {
+        value: 'Guangzhou',
+        label: 'Guangzhou',
+      },
+      {
+        value: 'Dalian',
+        label: 'Dalian',
+      },
+    ],
+  },
+]
+
+export const templateSource = `
+<el-select
+  v-model="value"
+>
+  <el-option
+    v-for="item in Options"
+    :key="item.value"
+    :label="item.label"
+    :value="item.value"
+  >
+    <span style="float: left">{{ item.label }}</span>
+    <span
+      style="
+        float: right;
+        color: var(--el-text-color-secondary);
+        font-size: 13px;
+      "
+    >{{ item.value }}</span>
+  </el-option>
+</el-select>
+`
+export const templateSourceGroup = `
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option-group
+      v-for="group in options"
+      :key="group.label"
+      :label="group.label"
+    >
+      <el-option
+        v-for="item in group.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-option-group>
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    label: 'Popular cities',
+    options: [
+      {
+        value: 'Shanghai',
+        label: 'Shanghai',
+      },
+      {
+        value: 'Beijing',
+        label: 'Beijing',
+      },
+    ],
+  },
+  {
+    label: 'City name',
+    options: [
+      {
+        value: 'Chengdu',
+        label: 'Chengdu',
+      },
+      {
+        value: 'Shenzhen',
+        label: 'Shenzhen',
+      },
+      {
+        value: 'Guangzhou',
+        label: 'Guangzhou',
+      },
+      {
+        value: 'Dalian',
+        label: 'Dalian',
+      },
+    ],
+  },
+]
+</script>
+`