@templmf/temp-solf-lmf 0.0.27 → 0.0.29

package/skills/element-plus-vue3/api/global-config.md

@@ -0,0 +1,89 @@
+# Global Configuration
+
+## API Reference
+
+Element Plus global configuration options.
+
+### Global Config Options
+
+When using `app.use(ElementPlus, options)`, you can pass:
+
+```typescript
+interface ElementPlusOptions {
+  size?: 'large' | 'default' | 'small'
+  zIndex?: number
+  locale?: Locale
+}
+```
+
+### ConfigProvider Props
+
+**Props:**
+- `size` - Global size (large, default, small)
+- `zIndex` - Global z-index (default: 3000)
+- `locale` - Locale object
+- `button` - Button config
+- `message` - Message config
+
+### Example: Global Config
+
+```javascript
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+const app = createApp(App)
+app.use(ElementPlus, {
+  size: 'large',
+  zIndex: 3000,
+  locale: zhCn
+})
+```
+
+### Example: ConfigProvider
+
+```vue
+<template>
+  <el-config-provider
+    :size="size"
+    :z-index="zIndex"
+    :locale="locale"
+  >
+    <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 size = ref('default')
+const zIndex = ref(3000)
+const locale = ref(zhCn)
+</script>
+```
+
+### Size Configuration
+
+**Options:**
+- `'large'` - Large size
+- `'default'` - Default size
+- `'small'` - Small size
+
+### z-index Configuration
+
+**Default:** `3000`
+
+Controls z-index for overlays (Dialog, Drawer, etc.).
+
+### Locale Configuration
+
+Import locale from `element-plus/dist/locale/`:
+- `zh-cn.mjs` - Chinese (Simplified)
+- `en.mjs` - English
+- `es.mjs` - Spanish
+- `fr.mjs` - French
+- `ja.mjs` - Japanese
+- `ko.mjs` - Korean
+
+**See also:** `examples/guide/i18n.md` for i18n examples

package/skills/element-plus-vue3/api/props-and-events.md

@@ -0,0 +1,101 @@
+# Props and Events
+
+## API Reference
+
+Common props and events in Element Plus components.
+
+### Common Props
+
+#### size
+
+**Type:** `'large' | 'default' | 'small'`
+
+Component size.
+
+#### disabled
+
+**Type:** `boolean`
+
+**Default:** `false`
+
+Whether component is disabled.
+
+#### className
+
+**Type:** `string`
+
+Custom CSS class name.
+
+#### style
+
+**Type:** `string | object`
+
+Custom inline style.
+
+### Common Events
+
+#### @click
+
+**Type:** `Function`
+
+Click event handler.
+
+**Example:**
+```vue
+<el-button @click="handleClick">Button</el-button>
+```
+
+#### @change
+
+**Type:** `Function`
+
+Change event handler.
+
+**Example:**
+```vue
+<el-input v-model="value" @change="handleChange" />
+```
+
+#### @focus
+
+**Type:** `Function`
+
+Focus event handler.
+
+**Example:**
+```vue
+<el-input @focus="handleFocus" />
+```
+
+#### @blur
+
+**Type:** `Function`
+
+Blur event handler.
+
+**Example:**
+```vue
+<el-input @blur="handleBlur" />
+```
+
+### Event Object
+
+Event handlers receive an event object:
+
+```javascript
+handleEvent(event) {
+  // event.target - Target element
+  // event.currentTarget - Current target element
+  // event.detail - Event detail (component-specific)
+}
+```
+
+### Component-Specific Events
+
+Different components emit different events:
+- **Input**: @input, @change, @focus, @blur
+- **Select**: @change, @visible-change
+- **Table**: @selection-change, @row-click, @sort-change
+- **Form**: @validate
+
+**See also:** `examples/components/` for component-specific examples

package/skills/element-plus-vue3/examples/components/button.md

@@ -0,0 +1,99 @@
+# Button Component
+
+**官方文档**: https://element-plus.org/en-US/component/button.html
+
+
+## Instructions
+
+This example demonstrates the Button component in Element Plus.
+
+### Key Concepts
+
+- Button types
+- Button sizes
+- Button states
+- Button groups
+- Button events
+
+### Example: Basic Button
+
+```vue
+<template>
+  <el-button>Default</el-button>
+  <el-button type="primary">Primary</el-button>
+  <el-button type="success">Success</el-button>
+  <el-button type="info">Info</el-button>
+  <el-button type="warning">Warning</el-button>
+  <el-button type="danger">Danger</el-button>
+</template>
+```
+
+### Example: Button Sizes
+
+```vue
+<template>
+  <el-button size="large">Large</el-button>
+  <el-button size="default">Default</el-button>
+  <el-button size="small">Small</el-button>
+</template>
+```
+
+### Example: Button States
+
+```vue
+<template>
+  <el-button disabled>Disabled</el-button>
+  <el-button loading>Loading</el-button>
+  <el-button plain>Plain</el-button>
+  <el-button round>Round</el-button>
+  <el-button circle>Circle</el-button>
+</template>
+```
+
+### Example: Button Events
+
+```vue
+<template>
+  <el-button type="primary" @click="handleClick">
+    Click Me
+  </el-button>
+</template>
+
+<script setup>
+const handleClick = () => {
+  console.log('Button clicked')
+}
+</script>
+```
+
+### Example: Button Group
+
+```vue
+<template>
+  <el-button-group>
+    <el-button type="primary" icon="ArrowLeft">Previous</el-button>
+    <el-button type="primary" icon="ArrowRight">Next</el-button>
+  </el-button-group>
+</template>
+```
+
+### Example: Button with Icon
+
+```vue
+<template>
+  <el-button type="primary" icon="Search">Search</el-button>
+  <el-button type="primary" :icon="Search">Search</el-button>
+</template>
+
+<script setup>
+import { Search } from '@element-plus/icons-vue'
+</script>
+```
+
+### Key Points
+
+- Multiple types: primary, success, info, warning, danger
+- Multiple sizes: large, default, small
+- Support disabled, loading, plain, round, circle
+- Icon support
+- Button group support

package/skills/element-plus-vue3/examples/components/date-picker.md

@@ -0,0 +1,115 @@
+# DatePicker Component
+
+**官方文档**: https://element-plus.org/en-US/component/date-picker.html
+
+
+## Instructions
+
+This example demonstrates the DatePicker component in Element Plus.
+
+### Key Concepts
+
+- Date selection
+- Date range
+- Date format
+- Date picker types
+
+### Example: Basic DatePicker
+
+```vue
+<template>
+  <el-date-picker v-model="date" type="date" placeholder="Select date" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const date = ref('')
+</script>
+```
+
+### Example: Date Range
+
+```vue
+<template>
+  <el-date-picker
+    v-model="dateRange"
+    type="daterange"
+    range-separator="To"
+    start-placeholder="Start date"
+    end-placeholder="End date"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dateRange = ref([])
+</script>
+```
+
+### Example: Date Picker Types
+
+```vue
+<template>
+  <el-date-picker v-model="date" type="date" />
+  <el-date-picker v-model="datetime" type="datetime" />
+  <el-date-picker v-model="daterange" type="daterange" />
+  <el-date-picker v-model="datetimerange" type="datetimerange" />
+  <el-date-picker v-model="month" type="month" />
+  <el-date-picker v-model="year" type="year" />
+</template>
+```
+
+### Example: Date Format
+
+```vue
+<template>
+  <el-date-picker
+    v-model="date"
+    type="date"
+    format="YYYY-MM-DD"
+    value-format="YYYY-MM-DD"
+  />
+</template>
+```
+
+### Example: Date Picker with Shortcuts
+
+```vue
+<template>
+  <el-date-picker
+    v-model="date"
+    type="date"
+    :shortcuts="shortcuts"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const date = ref('')
+const shortcuts = [
+  {
+    text: 'Today',
+    value: new Date()
+  },
+  {
+    text: 'Yesterday',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24)
+      return date
+    }
+  }
+]
+</script>
+```
+
+### Key Points
+
+- Use v-model for selected date
+- Multiple types: date, datetime, daterange, etc.
+- Configure format and value-format
+- Support shortcuts
+- Use Day.js for date handling

package/skills/element-plus-vue3/examples/components/dialog.md

@@ -0,0 +1,106 @@
+# Dialog Component
+
+**官方文档**: https://element-plus.org/en-US/component/dialog.html
+
+
+## Instructions
+
+This example demonstrates the Dialog component in Element Plus.
+
+### Key Concepts
+
+- Dialog visibility
+- Dialog content
+- Dialog actions
+- Dialog events
+- Dialog methods
+
+### Example: Basic Dialog
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">Open Dialog</el-button>
+  <el-dialog v-model="dialogVisible" title="Dialog Title">
+    <span>Dialog Content</span>
+    <template #footer>
+      <el-button @click="dialogVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>
+```
+
+### Example: Dialog with Form
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">Open Dialog</el-button>
+  <el-dialog v-model="dialogVisible" title="Form Dialog" width="500px">
+    <el-form :model="form" label-width="100px">
+      <el-form-item label="Name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="Email">
+        <el-input v-model="form.email" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="handleSubmit">Submit</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+const form = ref({
+  name: '',
+  email: ''
+})
+
+const handleSubmit = () => {
+  console.log('Form:', form.value)
+  dialogVisible.value = false
+}
+</script>
+```
+
+### Example: Dialog Methods
+
+```vue
+<template>
+  <el-button @click="openDialog">Open Dialog</el-button>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus'
+
+const openDialog = () => {
+  ElMessageBox.confirm('Are you sure?', 'Confirm', {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning'
+  }).then(() => {
+    console.log('Confirmed')
+  }).catch(() => {
+    console.log('Cancelled')
+  })
+}
+</script>
+```
+
+### Key Points
+
+- Control visibility with v-model
+- Use title prop for dialog title
+- Customize footer with footer slot
+- Support form inside dialog
+- Use ElMessageBox for programmatic dialogs

package/skills/element-plus-vue3/examples/components/form.md

@@ -0,0 +1,127 @@
+# Form Component
+
+**官方文档**: https://element-plus.org/en-US/component/form.html
+
+
+## Instructions
+
+This example demonstrates the Form component in Element Plus.
+
+### Key Concepts
+
+- Form structure
+- Form validation
+- Form rules
+- Form submission
+- Form fields
+
+### Example: Basic Form
+
+```vue
+<template>
+  <el-form :model="form" label-width="120px">
+    <el-form-item label="Name">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item label="Email">
+      <el-input v-model="form.email" />
+    </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 form = ref({
+  name: '',
+  email: ''
+})
+
+const handleSubmit = () => {
+  console.log('Form:', form.value)
+}
+</script>
+```
+
+### Example: Form Validation
+
+```vue
+<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    label-width="120px"
+  >
+    <el-form-item label="Name" prop="name">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item label="Email" prop="email">
+      <el-input v-model="form.email" />
+    </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: '',
+  email: ''
+})
+
+const rules = {
+  name: [
+    { required: true, message: 'Please input name', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: 'Please input email', trigger: 'blur' },
+    { type: 'email', message: 'Please input valid email', trigger: 'blur' }
+  ]
+}
+
+const handleSubmit = async () => {
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      console.log('Form valid:', form.value)
+    }
+  })
+}
+</script>
+```
+
+### Example: Form Layout
+
+```vue
+<template>
+  <el-form :model="form" label-position="top">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="Name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="Email">
+          <el-input v-model="form.email" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+```
+
+### Key Points
+
+- Use :model for form data
+- Configure :rules for validation
+- Use prop for form-item validation
+- Handle form submission
+- Support multiple layouts