Skip to content

Commit 7c44b00

Browse files
abichingerabichinger
committed
fix(element-plus): migrate to typescript and vite
#40
1 parent 2f3dc0a commit 7c44b00

18 files changed

+304
-227
lines changed

‎element-plus/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="/favicon.ico">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎element-plus/package.json

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
"name": "@vue-js-cron/element-plus",
33
"version": "2.0.1",
44
"description": "Cron editor for Element Plus",
5-
"main": "dist/element-plus.umd.js",
6-
"module": "dist/element-plus.esm.js",
7-
"browser": {
8-
"./sfc": "src/CronEditor.vue"
9-
},
5+
"type": "module",
6+
"main": "dist/element-plus.umd.cjs",
7+
"module": "dist/element-plus.js",
8+
"types": "dist/index.d.ts",
109
"repository": "https://github.com/abichinger/vue-js-cron",
1110
"author": "Andreas Bichinger",
1211
"license": "MIT",
1312
"private": false,
1413
"scripts": {
15-
"dev": "vue-cli-service serve dev/serve.js",
16-
"build": "npx rollup --config",
14+
"dev": "vite",
15+
"build": "run-p type-check \"build-only {@}\" --",
16+
"build-only": "vite build",
17+
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
1718
"clean": "git clean -xf dist"
1819
},
1920
"dependencies": {

‎element-plus/rollup.config.mjs

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎element-plus/dev/App.vue renamed to ‎element-plus/src/App.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<template>
22
<div id="app">
33
<!-- <v-text-field label="" :model-value="value" @update:model-value="nextValue = $event" @blur="value=nextValue"></v-text-field> -->
4-
<VueCronEditor v-model="value" />
4+
<CronElementPlus v-model="value" />
55

66
<br />
77
{{ value }}
88
</div>
99
</template>
1010

11-
<script>
12-
import VueCronEditor from '../src/CronEditor'
11+
<script lang="ts">
12+
import CronElementPlus from '@/components/cron-element-plus.vue'
1313
1414
export default {
1515
components: {
16-
VueCronEditor,
16+
CronElementPlus,
1717
},
1818
1919
data: () => {

‎element-plus/src/CronEditor.vue

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎element-plus/src/components/CustomSelect.vue

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎element-plus/src/components/cron-element-plus.vue

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<div>
3+
{{ period.prefix.value }}
4+
5+
<custom-select
6+
:model-value="period.selected.value.id"
7+
item-value="id"
8+
:items="period.items"
9+
@update:model-value="period.select($event)"
10+
:button-props="buttonProps"
11+
/>
12+
13+
{{ period.suffix.value }}
14+
15+
<template v-for="f in selected" :key="f.id">
16+
{{ f.prefix.value }}
17+
18+
<div class="vcron-el-spacer">
19+
<custom-select
20+
:model-value="f.selected.value"
21+
@update:model-value="f.select($event)"
22+
:items="f.items"
23+
:cols="cols[f.id] || 1"
24+
:selection="f.text.value"
25+
multiple
26+
clearable
27+
:button-props="buttonProps"
28+
:dropdown-props="{ hideOnClick: false }"
29+
/>
30+
</div>
31+
32+
{{ f.suffix.value }}
33+
</template>
34+
</div>
35+
</template>
36+
37+
<script lang="ts">
38+
import CustomSelect from '@/components/select.vue'
39+
import { cronCoreProps, setupCron } from '@vue-js-cron/core'
40+
import { defineComponent, type ExtractPropTypes } from 'vue'
41+
42+
export const cronElementPlusProps = () => ({
43+
/**
44+
* Properties of Element Plus Button
45+
*
46+
* @remarks
47+
* See {@link https://element-plus.org/en-US/component/button.html#button-attributes}
48+
*/
49+
buttonProps: {
50+
type: Object,
51+
default() {
52+
return {}
53+
},
54+
},
55+
...cronCoreProps(),
56+
})
57+
58+
/**
59+
* Props of {@link CronElementPlus}
60+
*
61+
* See {@link @vue-js-cron/core!CronCoreProps | CronCoreProps} for a detailed description of each prop
62+
*
63+
* @interface
64+
*/
65+
export type CronElementPlusProps = Partial<
66+
ExtractPropTypes<ReturnType<typeof cronElementPlusProps>>
67+
>
68+
69+
export default defineComponent({
70+
name: 'VueCronEditor',
71+
components: {
72+
CustomSelect,
73+
},
74+
props: cronElementPlusProps(),
75+
emits: ['update:model-value', 'error'],
76+
setup(props, ctx) {
77+
return setupCron(props, () => props.modelValue, ctx)
78+
},
79+
})
80+
</script>
81+
82+
<style lang="css">
83+
.vcron-el-spacer {
84+
display: inline-block;
85+
padding: 3px;
86+
}
87+
</style>

0 commit comments

Comments
 (0)