Vue.js: مكتبات واجهة المستخدم

<!-- ❌ The "Broken" Version:5 A table,5 Different code snippets -->
<!-- OrdersTable.vue -->
<template>
  <table>
    <thead><tr><th>ID</th><th>User</th><th>Total</th></tr></thead>
    <tbody>
      <tr v-for="order in orders" :key="order.id">
        <td>{{ order.id }}</td>
        <td>{{ order.user }}</td>
        <td>${{ order.total }}</td>
      </tr>
    </tbody>
  </table>
</template>

<!-- ProductsTable.vue - Similar -->
<!-- UsersTable.vue - Similar -->
<!-- ... And also 3 more ... -->

<!-- ✅ Correct Version: Use Element Plus el-table -->
<template>
  <el-table :data="orders" stripe>
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="user" label="User" />
    <el-table-column prop="total" label="Total" :formatter="formatTotal" />
  </el-table>
</template>

<script setup>
import { ElTable, ElTableColumn } from 'element-plus'

const orders = ref([...])
function formatTotal(row) { return `$${row.total}` }
</script>

npm install element-plus @element-plus/icons-vue

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

// Register All Icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import'
import Components from 'unplugin-vue-components'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts'
    })
  ]
})

<!-- ✅ Not required import,Automatic On-Demand Import -->
<template>
  <el-button>Click</el-button>
  <el-input v-model="search" />
  <el-table :data="list">
    <el-table-column prop="name" label="Name" />
  </el-table>
</template>

<template>
  <!-- 1. Button -->
  <el-button type="primary" @click="onClick">Primary</el-button>
  
  <!-- 2. Form -->
  <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>
  
  <!-- 3. Table -->
  <el-table :data="list" stripe>
    <el-table-column prop="name" label="Name" />
  </el-table>
  
  <!-- 4. Dialog -->
  <el-dialog v-model="visible" title="Edit">
    <p>Content</p>
  </el-dialog>
  
  <!-- 5. Message -->
  <el-button @click="$message.success('Saved!')">Click</el-button>
</template>

// src/styles/element-plus.scss
:root {
 --el-color-primary: #42b883; // Change the primary color to Vue Green
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  
  --el-border-radius-base: 8px;      // Increase Corner Radius
  --el-font-size-base: 14px;
}

// main.js
import './styles/element-plus.scss'
import 'element-plus/dist/index.css'

// src/styles/element-plus-vars.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': ('base': #42b883),
    'success': ('base': #67c23a),
    'warning': ('base': #e6a23c),
    'danger':  ('base': #f56c6c),
    'info':    ('base': #909399)
  )
);

// main.js
import './styles/element-plus-vars.scss'
import 'element-plus/dist/index.css'

// Dark Theme
:root {
  --el-color-primary: #42b883;
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
}

html.dark {
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
}

<!-- components/BusinessTable.vue -->
<template>
  <el-table 
    :data="data" 
    v-loading="loading"
    stripe
    border
    :max-height="maxHeight"
  >
    <el-table-column type="index" label="#" width="60" />
    <el-table-column 
      v-for="col in columns" 
      :key="col.key"
      :prop="col.key" 
      :label="col.label"
      :width="col.width"
      :formatter="col.formatter"
    />
  </el-table>
  
  <el-pagination
    v-model:current-page="page"
    v-model:page-size="size"
    :total="total"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    @current-change="onPage"
    @size-change="onSize"
  />
</template>

<script setup lang="ts">
// Business Encapsulation:Automatic loading + Pagination + Column Definition
const props = defineProps<{
  data: any[]
  columns: Array<{ key: string; label: string; width?: number; formatter?: Function }>
  total: number
  loading?: boolean
  maxHeight?: number
}>()

const emit = defineEmits<{
  'update:page': [page: number]
  'update:size': [size: number]
}>()

const page = ref(1)
const size = ref(20)

function onPage(p) { emit('update:page', p) }
function onSize(s) { emit('update:size', s) }
</script>

<!-- Usage:3 All set 1 A table -->
<BusinessTable :data="orders" :columns="orderColumns" :total="100" />

npm install -D unplugin-icons @iconify-json/carbon

// vite.config.ts
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/dist/loader'

export default defineConfig({
  plugins: [
    Icons({
      compiler: 'vue3',
      autoInstall: true,  // Automatically Install Icon Sets
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default)
      }
    })
  ]
})

<template>
  <!-- Carbon Icon (100,000+) -->
  <IconCarbonUser size="20" />
  <IconCarbonShoppingCart size="24" color="green" />
  <IconCarbonTrashCan size="20" @click="delete" />
</template>

<el-button>Button</el-button>
<el-form>Form</el-form>
<el-table>Table</el-table>
<el-dialog>Dialog</el-dialog>
<el-message>Message</el-message>

// 1. CSS Variable
:root { --el-color-primary: #42b883; }

// 2. SCSS Variable
@forward 'var.scss' with ($colors: ...);

// 3. Dark Mode
:root.dark { --el-bg-color: #1a1a1a; }

// 4. Custom Themes
@import 'element-plus/theme-chalk/dark/css-vars.css';

// 5. Change Theme(Runtime)
document.documentElement.classList.toggle('dark')