@templmf/temp-solf-lmf 0.0.28 → 0.0.29

package/skills/element-plus-vue3/examples/guide/global-config.md

@@ -0,0 +1,95 @@
+# Global Configuration
+
+## Instructions
+
+This example demonstrates how to configure Element Plus globally.
+
+### Key Concepts
+
+- Global config options
+- ConfigProvider
+- Size configuration
+- z-index configuration
+
+### Example: Global Config
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus, {
+  size: 'large',
+  zIndex: 3000,
+  locale: zhCn
+})
+app.mount('#app')
+```
+
+### Example: Using ConfigProvider
+
+```vue
+<template>
+  <el-config-provider :size="size" :z-index="zIndex" :locale="locale">
+    <el-button>Button</el-button>
+    <el-input v-model="input" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+const size = ref('default')
+const zIndex = ref(3000)
+const locale = ref(zhCn)
+const input = ref('')
+</script>
+```
+
+### Example: Size Configuration
+
+```vue
+<template>
+  <el-config-provider :size="size">
+    <el-button>Button</el-button>
+    <el-input v-model="input" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const size = ref('default') // 'large' | 'default' | 'small'
+</script>
+```
+
+### Example: z-index Configuration
+
+```vue
+<template>
+  <el-config-provider :z-index="zIndex">
+    <el-dialog v-model="visible" title="Dialog">
+      Content
+    </el-dialog>
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const zIndex = ref(3000)
+const visible = ref(false)
+</script>
+```
+
+### Key Points
+
+- Configure globally via app.use()
+- Use ConfigProvider for component-level config
+- Size: 'large' | 'default' | 'small'
+- z-index: number (default: 3000)
+- Locale: locale object

package/skills/element-plus-vue3/examples/guide/i18n.md

@@ -0,0 +1,95 @@
+# Internationalization (i18n)
+
+## Instructions
+
+This example demonstrates how to configure internationalization in Element Plus.
+
+### Key Concepts
+
+- Locale configuration
+- Language switching
+- DatePicker locale
+- ConfigProvider
+
+### Example: Basic i18n Setup
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus, {
+  locale: zhCn
+})
+app.mount('#app')
+```
+
+### Example: Using ConfigProvider
+
+```vue
+<template>
+  <el-config-provider :locale="locale">
+    <el-date-picker v-model="date" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+
+const locale = ref(zhCn)
+const date = ref('')
+</script>
+```
+
+### Example: Language Switching
+
+```vue
+<template>
+  <el-config-provider :locale="currentLocale">
+    <el-select v-model="language" @change="handleLanguageChange">
+      <el-option label="中文" value="zh-cn" />
+      <el-option label="English" value="en" />
+    </el-select>
+    <el-date-picker v-model="date" />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+
+const language = ref('zh-cn')
+const currentLocale = ref(zhCn)
+const date = ref('')
+
+const handleLanguageChange = (value) => {
+  currentLocale.value = value === 'zh-cn' ? zhCn : en
+}
+</script>
+```
+
+### Example: Available Locales
+
+```javascript
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+import es from 'element-plus/dist/locale/es.mjs'
+import fr from 'element-plus/dist/locale/fr.mjs'
+import ja from 'element-plus/dist/locale/ja.mjs'
+import ko from 'element-plus/dist/locale/ko.mjs'
+```
+
+### Key Points
+
+- Import locale files
+- Configure locale globally or per component
+- Use ConfigProvider for locale
+- Support multiple languages
+- DatePicker uses Day.js locale

package/skills/element-plus-vue3/examples/guide/installation.md

@@ -0,0 +1,110 @@
+# Installation
+
+## Instructions
+
+This example demonstrates how to install Element Plus in a Vue 3 project.
+
+### Key Concepts
+
+- Package installation
+- Full import
+- On-demand import
+- CDN import
+- Compatibility
+
+### Example: Package Installation
+
+```bash
+# Using npm
+npm install element-plus
+
+# Using yarn
+yarn add element-plus
+
+# Using pnpm
+pnpm add element-plus
+```
+
+### Example: Full Import
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')
+```
+
+### Example: On-Demand Import
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import { ElButton, ElInput } from 'element-plus'
+import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/input/style/css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.component(ElButton.name, ElButton)
+app.component(ElInput.name, ElInput)
+app.mount('#app')
+```
+
+### Example: CDN Import
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script src="https://unpkg.com/vue@next"></script>
+  <script src="https://unpkg.com/element-plus"></script>
+  <script>
+    const { createApp } = Vue
+    const app = createApp({})
+    app.use(ElementPlus)
+    app.mount('#app')
+  </script>
+</body>
+</html>
+```
+
+### Example: Auto Import with unplugin-vue-components
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+})
+```
+
+### Key Points
+
+- Install element-plus package
+- Choose between full import or on-demand import
+- Import CSS styles
+- Use app.use() for full import
+- Use auto-import plugins for better DX
+- Element Plus requires Vue 3

package/skills/element-plus-vue3/examples/guide/quick-start.md

@@ -0,0 +1,103 @@
+# Quick Start
+
+## Instructions
+
+This example provides a quick start guide for Element Plus.
+
+### Key Concepts
+
+- Basic setup
+- First component
+- Global configuration
+- Component usage
+
+### Example: Basic Setup
+
+```vue
+<template>
+  <el-button type="primary">Button</el-button>
+</template>
+
+<script setup>
+// Component is auto-imported if using unplugin-vue-components
+</script>
+```
+
+### Example: With Options API
+
+```vue
+<template>
+  <el-button type="primary" @click="handleClick">
+    Click Me
+  </el-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick() {
+      console.log('Button clicked')
+    }
+  }
+}
+</script>
+```
+
+### Example: With Composition API
+
+```vue
+<template>
+  <el-button type="primary" @click="handleClick">
+    Click Me
+  </el-button>
+</template>
+
+<script setup>
+const handleClick = () => {
+  console.log('Button clicked')
+}
+</script>
+```
+
+### Example: Global Configuration
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus, {
+  size: 'large',
+  zIndex: 3000
+})
+app.mount('#app')
+```
+
+### Example: Using ConfigProvider
+
+```vue
+<template>
+  <el-config-provider :locale="locale" :size="size">
+    <el-button>Button</el-button>
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+const locale = ref(zhCn)
+const size = ref('default')
+</script>
+```
+
+### Key Points
+
+- Use el- prefix for components
+- Support both Options API and Composition API
+- Configure globally or per component
+- Use ConfigProvider for locale and size
+- Import styles for components

package/skills/element-plus-vue3/examples/guide/theme.md

@@ -0,0 +1,78 @@
+# Theme Customization
+
+## Instructions
+
+This example demonstrates how to customize Element Plus theme.
+
+### Key Concepts
+
+- CSS variables
+- SCSS variables
+- Theme builder
+- Color customization
+
+### Example: Using CSS Variables
+
+```vue
+<template>
+  <el-button type="primary">Button</el-button>
+</template>
+
+<style>
+:root {
+  --el-color-primary: #409eff;
+  --el-color-success: #67c23a;
+  --el-color-warning: #e6a23c;
+  --el-color-danger: #f56c6c;
+  --el-color-info: #909399;
+}
+</style>
+```
+
+### Example: SCSS Variables
+
+```scss
+// variables.scss
+$--color-primary: #409eff;
+$--color-success: #67c23a;
+$--color-warning: #e6a23c;
+$--color-danger: #f56c6c;
+$--color-info: #909399;
+```
+
+### Example: Import Custom Theme
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import './theme/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')
+```
+
+### Example: Component-Level Customization
+
+```vue
+<template>
+  <el-button class="custom-button">Button</el-button>
+</template>
+
+<style scoped>
+.custom-button {
+  --el-button-bg-color: #409eff;
+  --el-button-text-color: #fff;
+}
+</style>
+```
+
+### Key Points
+
+- Use CSS variables for customization
+- Override theme variables
+- Use SCSS for advanced customization
+- Component-level customization supported
+- Use theme builder for visual customization

package/skills/element-plus-vue3/templates/component-usage.md

@@ -0,0 +1,92 @@
+# Component Usage Templates
+
+## Button Usage
+
+```vue
+<template>
+  <el-button type="primary" @click="handleClick">
+    Click Me
+  </el-button>
+</template>
+
+<script setup>
+const handleClick = () => {
+  console.log('Clicked')
+}
+</script>
+```
+
+## Form Usage
+
+```vue
+<template>
+  <el-form :model="form" :rules="rules" ref="formRef">
+    <el-form-item label="Name" prop="name">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="handleSubmit">Submit</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const formRef = ref()
+const form = ref({
+  name: ''
+})
+
+const rules = {
+  name: [
+    { required: true, message: 'Please input name', trigger: 'blur' }
+  ]
+}
+
+const handleSubmit = async () => {
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      console.log('Form:', form.value)
+    }
+  })
+}
+</script>
+```
+
+## Table Usage
+
+```vue
+<template>
+  <el-table :data="tableData">
+    <el-table-column prop="name" label="Name" />
+    <el-table-column prop="email" label="Email" />
+  </el-table>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tableData = ref([
+  { name: 'John', email: 'john@example.com' },
+  { name: 'Jane', email: 'jane@example.com' }
+])
+</script>
+```
+
+## Dialog Usage
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">Open Dialog</el-button>
+  <el-dialog v-model="dialogVisible" title="Dialog">
+    <span>Dialog Content</span>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>
+```

package/skills/element-plus-vue3/templates/installation.md

@@ -0,0 +1,82 @@
+# Installation Templates
+
+## npm Installation
+
+```bash
+npm install element-plus
+```
+
+## Full Import
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')
+```
+
+## On-Demand Import
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import { ElButton, ElInput } from 'element-plus'
+import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/input/style/css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.component(ElButton.name, ElButton)
+app.component(ElInput.name, ElInput)
+app.mount('#app')
+```
+
+## Auto Import with unplugin-vue-components
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+})
+```
+
+## CDN Import
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script src="https://unpkg.com/vue@next"></script>
+  <script src="https://unpkg.com/element-plus"></script>
+  <script>
+    const { createApp } = Vue
+    const app = createApp({})
+    app.use(ElementPlus)
+    app.mount('#app')
+  </script>
+</body>
+</html>
+```