-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 🎸 add theme tool and playground
- Loading branch information
xiangxiao
committed
May 10, 2024
1 parent
69ec994
commit d561e78
Showing
55 changed files
with
6,492 additions
and
175 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| { | ||
| "name": "editor", | ||
| "private": true, | ||
| "version": "0.1.0", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "vite build", | ||
| "preview": "vite preview", | ||
| "typecheck": "vue-tsc --noEmit" | ||
| }, | ||
| "dependencies": { | ||
| "@vueuse/core": "9.13.0", | ||
| "@element-plus/icons-vue": "^2.3.1", | ||
| "@element-plus/theme": "workspace:*", | ||
| "element-plus": "^2.7.0", | ||
| "color": "^4.2.0", | ||
| "pinia": "^2.1.7", | ||
| "unocss": "^0.58.0", | ||
| "vue": "^3.4.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@antfu/eslint-config": "^2.4.6", | ||
| "@iconify-json/carbon": "^1.1.31", | ||
| "@types/node": "^18.14.0", | ||
| "@vitejs/plugin-vue": "^4.0.0", | ||
| "typescript": "^5.2.2", | ||
| "unplugin-auto-import": "^0.17.2", | ||
| "unplugin-vue-components": "^0.24.0", | ||
| "vite": "^4.1.2", | ||
| "vite-plugin-pages": "^0.32.0", | ||
| "vite-plugin-vue-devtools": "1.0.0-rc.8", | ||
| "vite-plugin-vue-layouts": "^0.9.1", | ||
| "vue-tsc": "^1.1.3" | ||
| }, | ||
| "license": "MIT" | ||
| } |
File renamed without changes.
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <script setup lang="ts"> | ||
| import { changeThemeByCssvars, getPalette } from '@element-plus/theme' | ||
| const color = ref('#409eff') | ||
| const predefineColors = ref([ | ||
| '#409eff', | ||
| '#da4a45', | ||
| '#e09f00', | ||
| '#67c03a', | ||
| '#00bec3', | ||
| '#9b59eb' | ||
| ]) | ||
| selectTheme(color.value) | ||
| watchEffect(() => { | ||
| selectTheme(color.value) | ||
| }) | ||
| function selectTheme(theme: string) { | ||
| const { light: lightColors, dark: darkColors } = getPalette({ light: theme, dark: theme }) | ||
| const cssvars = { | ||
| light: { | ||
| '--el-color-primary': lightColors[5], | ||
| '--el-color-primary-light-3': lightColors[4], | ||
| '--el-color-primary-light-5': lightColors[3], | ||
| '--el-color-primary-light-7': lightColors[2], | ||
| '--el-color-primary-light-8': lightColors[1], | ||
| '--el-color-primary-light-9': lightColors[0], | ||
| '--el-color-primary-dark-2': lightColors[6], | ||
| }, | ||
| dark: { | ||
| '--el-color-primary': darkColors[5], | ||
| '--el-color-primary-light-3': darkColors[4], | ||
| '--el-color-primary-light-5': darkColors[3], | ||
| '--el-color-primary-light-7': darkColors[2], | ||
| '--el-color-primary-light-8': darkColors[1], | ||
| '--el-color-primary-light-9': darkColors[0], | ||
| '--el-color-primary-dark-2': darkColors[6], | ||
| }, | ||
| } | ||
| changeThemeByCssvars(cssvars[isDark.value ? 'dark' : 'light']) | ||
| } | ||
| </script> | ||
| <template> | ||
| <div flex="~ col" gap-10 p-10> | ||
| <div flex="~" gap-4 text-center items-center justify-center> | ||
| <h1>theme color:</h1> | ||
| <el-color-picker v-model="color" :predefine="predefineColors" /> | ||
| <el-button icon-btn @click="toggleDark()"> | ||
| <div i="carbon-sun dark:carbon-moon" /> | ||
| </el-button> | ||
| </div> | ||
| <HelloWorld /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| #app { | ||
| text-align: center; | ||
| color: var(--el-text-color-primary); | ||
| } | ||
| .element-plus-logo { | ||
| width: 50%; | ||
| } | ||
| </style> |
File renamed without changes
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| <script setup lang="ts"> | ||
| import { ElMessage } from 'element-plus' | ||
| import { | ||
| Location, | ||
| Document, | ||
| Menu as IconMenu, | ||
| Setting, | ||
| } from '@element-plus/icons-vue' | ||
| const isCollapse = ref(true) | ||
| const count = ref(0); | ||
| const toast = () => { | ||
| ElMessage.success('Hello') | ||
| } | ||
| const form = reactive({ | ||
| name: '', | ||
| region: '', | ||
| date1: '', | ||
| date2: '', | ||
| delivery: false, | ||
| type: [], | ||
| resource: '', | ||
| desc: '', | ||
| }) | ||
| const tableData = [ | ||
| { | ||
| date: '2016-05-03', | ||
| name: 'Tom', | ||
| address: 'No. 189, Grove St, Los Angeles', | ||
| }, | ||
| { | ||
| date: '2016-05-02', | ||
| name: 'Tom', | ||
| address: 'No. 189, Grove St, Los Angeles', | ||
| }, | ||
| { | ||
| date: '2016-05-04', | ||
| name: 'Tom', | ||
| address: 'No. 189, Grove St, Los Angeles', | ||
| }, | ||
| { | ||
| date: '2016-05-01', | ||
| name: 'Tom', | ||
| address: 'No. 189, Grove St, Los Angeles', | ||
| }, | ||
| ] | ||
| </script> | ||
| <template> | ||
| <div flex="~ col" gap="2" items-center> | ||
| <el-menu mode="horizontal" w-120> | ||
| <el-menu-item index="1">Element Plus</el-menu-item> | ||
| <el-sub-menu index="2"> | ||
| <template #title>Workspace</template> | ||
| <el-menu-item index="2-1">item one</el-menu-item> | ||
| <el-menu-item index="2-2">item two</el-menu-item> | ||
| <el-menu-item index="2-3">item three</el-menu-item> | ||
| <el-sub-menu index="2-4"> | ||
| <template #title>item four</template> | ||
| <el-menu-item index="2-4-1">item one</el-menu-item> | ||
| <el-menu-item index="2-4-2">item two</el-menu-item> | ||
| <el-menu-item index="2-4-3">item three</el-menu-item> | ||
| </el-sub-menu> | ||
| </el-sub-menu> | ||
| <el-menu-item index="3" disabled>Info</el-menu-item> | ||
| <el-menu-item index="4">Orders</el-menu-item> | ||
| </el-menu> | ||
| <!-- example components --> | ||
|
|
||
| <div class="text-center flex flex-wrap justify-center items-center"> | ||
| <el-button @click="count++">count is: {{ count }}</el-button> | ||
| <el-button type="primary" @click="count++">count is: {{ count }}</el-button> | ||
| <el-button type="success" @click="count++">count is: {{ count }}</el-button> | ||
| <el-button type="warning" @click="count++">count is: {{ count }}</el-button> | ||
| <el-button type="danger" @click="count++">count is: {{ count }}</el-button> | ||
| <el-button type="info" @click="count++">count is: {{ count }}</el-button> | ||
| </div> | ||
|
|
||
| <div> | ||
| <el-tag type="success" class="m-1">Tag 1</el-tag> | ||
| <el-tag type="warning" class="m-1">Tag 1</el-tag> | ||
| <el-tag type="danger" class="m-1">Tag 1</el-tag> | ||
| <el-tag type="info" class="m-1">Tag 1</el-tag> | ||
| </div> | ||
|
|
||
| <el-button size="large" @click="toast">El Message</el-button> | ||
|
|
||
| <el-form :model="form" label-width="auto" style="max-width: 600px"> | ||
| <el-form-item label="Activity name"> | ||
| <el-input v-model="form.name" /> | ||
| </el-form-item> | ||
| <el-form-item label="Activity zone"> | ||
| <el-select v-model="form.region" placeholder="please select your zone"> | ||
| <el-option label="Zone one" value="shanghai" /> | ||
| <el-option label="Zone two" value="beijing" /> | ||
| </el-select> | ||
| </el-form-item> | ||
| <el-form-item label="Activity time"> | ||
| <el-col :span="11"> | ||
| <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" /> | ||
| </el-col> | ||
| <el-col :span="2" class="text-center"> | ||
| <span class="text-gray-500">-</span> | ||
| </el-col> | ||
| <el-col :span="11"> | ||
| <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" /> | ||
| </el-col> | ||
| </el-form-item> | ||
| <el-form-item label="Instant delivery"> | ||
| <el-switch v-model="form.delivery" /> | ||
| </el-form-item> | ||
| <el-form-item label="Activity type"> | ||
| <el-checkbox-group v-model="form.type"> | ||
| <el-checkbox value="Online activities" name="type"> | ||
| Online activities | ||
| </el-checkbox> | ||
| <el-checkbox value="Promotion activities" name="type"> | ||
| Promotion activities | ||
| </el-checkbox> | ||
| <el-checkbox value="Offline activities" name="type"> | ||
| Offline activities | ||
| </el-checkbox> | ||
| <el-checkbox value="Simple brand exposure" name="type"> | ||
| Simple brand exposure | ||
| </el-checkbox> | ||
| </el-checkbox-group> | ||
| </el-form-item> | ||
| <el-form-item label="Resources"> | ||
| <el-radio-group v-model="form.resource"> | ||
| <el-radio value="Sponsor">Sponsor</el-radio> | ||
| <el-radio value="Venue">Venue</el-radio> | ||
| </el-radio-group> | ||
| </el-form-item> | ||
| <el-form-item label="Activity form"> | ||
| <el-input v-model="form.desc" type="textarea" /> | ||
| </el-form-item> | ||
| <el-form-item> | ||
| <el-button type="primary">Create</el-button> | ||
| <el-button>Cancel</el-button> | ||
| </el-form-item> | ||
| </el-form> | ||
|
|
||
|
|
||
|
|
||
| <el-menu default-active="2" :collapse="isCollapse"> | ||
| <el-sub-menu index="1"> | ||
| <template #title> | ||
| <el-icon> | ||
| <location /> | ||
| </el-icon> | ||
| <span>Navigator One</span> | ||
| </template> | ||
| <el-menu-item-group> | ||
| <template #title><span>Group One</span></template> | ||
| <el-menu-item index="1-1">item one</el-menu-item> | ||
| <el-menu-item index="1-2">item two</el-menu-item> | ||
| </el-menu-item-group> | ||
| <el-menu-item-group title="Group Two"> | ||
| <el-menu-item index="1-3">item three</el-menu-item> | ||
| </el-menu-item-group> | ||
| <el-sub-menu index="1-4"> | ||
| <template #title><span>item four</span></template> | ||
| <el-menu-item index="1-4-1">item one</el-menu-item> | ||
| </el-sub-menu> | ||
| </el-sub-menu> | ||
| <el-menu-item index="2"> | ||
| <el-icon><icon-menu /></el-icon> | ||
| <template #title>Navigator Two</template> | ||
| </el-menu-item> | ||
| <el-menu-item index="3" disabled> | ||
| <el-icon> | ||
| <document /> | ||
| </el-icon> | ||
| <template #title>Navigator Three</template> | ||
| </el-menu-item> | ||
| <el-menu-item index="4"> | ||
| <el-icon> | ||
| <setting /> | ||
| </el-icon> | ||
| <template #title>Navigator Four</template> | ||
| </el-menu-item> | ||
| </el-menu> | ||
|
|
||
|
|
||
| <el-table :data="tableData" w-200> | ||
| <el-table-column prop="date" label="Date" width="180" /> | ||
| <el-table-column prop="name" label="Name" width="180" /> | ||
| <el-table-column prop="address" label="Address" /> | ||
| </el-table> | ||
| </div> | ||
|
|
||
| </template> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "baseUrl": ".", | ||
| "target": "esnext", | ||
| "useDefineForClassFields": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "node", | ||
| "strict": true, | ||
| "jsx": "preserve", | ||
| "sourceMap": true, | ||
| "resolveJsonModule": true, | ||
| "esModuleInterop": true, | ||
| "lib": ["esnext", "dom"], | ||
| "paths": { | ||
| "~/*": ["src/*"] | ||
| }, | ||
| "skipLibCheck": true | ||
| }, | ||
| "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] | ||
| } |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import antfu from '@antfu/eslint-config' | ||
|
|
||
| export default antfu() |
Oops, something went wrong.