fix(element-plus): migrate to typescript and vite

#40
abichinger · Nov 14, 2023 · 7c44b00 · 7c44b00
1 parent 2f3dc0a
commit 7c44b00
Show file tree

Hide file tree

Showing 18 changed files with 304 additions and 227 deletions.
diff --git a/element-plus/index.html b/element-plus/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/element-plus/package.json b/element-plus/package.json
@@ -2,18 +2,19 @@
   "name": "@vue-js-cron/element-plus",
   "version": "2.0.1",
   "description": "Cron editor for Element Plus",
-  "main": "dist/element-plus.umd.js",
-  "module": "dist/element-plus.esm.js",
-  "browser": {
-    "./sfc": "src/CronEditor.vue"
-  },
+  "type": "module",
+  "main": "dist/element-plus.umd.cjs",
+  "module": "dist/element-plus.js",
+  "types": "dist/index.d.ts",
   "repository": "https://github.com/abichinger/vue-js-cron",
   "author": "Andreas Bichinger",
   "license": "MIT",
   "private": false,
   "scripts": {
-    "dev": "vue-cli-service serve dev/serve.js",
-    "build": "npx rollup --config",
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "clean": "git clean -xf dist"
   },
   "dependencies": {

diff --git a/element-plus/rollup.config.mjs b/element-plus/rollup.config.mjs
diff --git a/element-plus/dev/App.vue → element-plus/src/App.vue b/element-plus/dev/App.vue → element-plus/src/App.vue
@@ -1,19 +1,19 @@
 <template>
   <div id="app">
     <!-- <v-text-field label="" :model-value="value" @update:model-value="nextValue = $event" @blur="value=nextValue"></v-text-field> -->
-    <VueCronEditor v-model="value" />
+    <CronElementPlus v-model="value" />
 
     <br />
     {{ value }}
   </div>
 </template>
 
-<script>
-import VueCronEditor from '../src/CronEditor'
+<script lang="ts">
+import CronElementPlus from '@/components/cron-element-plus.vue'
 
 export default {
   components: {
-    VueCronEditor,
+    CronElementPlus,
   },
 
   data: () => {

diff --git a/element-plus/src/CronEditor.vue b/element-plus/src/CronEditor.vue
diff --git a/element-plus/src/components/CustomSelect.vue b/element-plus/src/components/CustomSelect.vue
diff --git a/element-plus/src/components/cron-element-plus.vue b/element-plus/src/components/cron-element-plus.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    {{ period.prefix.value }}
+
+    <custom-select
+      :model-value="period.selected.value.id"
+      item-value="id"
+      :items="period.items"
+      @update:model-value="period.select($event)"
+      :button-props="buttonProps"
+    />
+
+    {{ period.suffix.value }}
+
+    <template v-for="f in selected" :key="f.id">
+      {{ f.prefix.value }}
+
+      <div class="vcron-el-spacer">
+        <custom-select
+          :model-value="f.selected.value"
+          @update:model-value="f.select($event)"
+          :items="f.items"
+          :cols="cols[f.id] || 1"
+          :selection="f.text.value"
+          multiple
+          clearable
+          :button-props="buttonProps"
+          :dropdown-props="{ hideOnClick: false }"
+        />
+      </div>
+
+      {{ f.suffix.value }}
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import CustomSelect from '@/components/select.vue'
+import { cronCoreProps, setupCron } from '@vue-js-cron/core'
+import { defineComponent, type ExtractPropTypes } from 'vue'
+
+export const cronElementPlusProps = () => ({
+  /**
+   * Properties of Element Plus Button
+   *
+   * @remarks
+   * See {@link https://element-plus.org/en-US/component/button.html#button-attributes}
+   */
+  buttonProps: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  ...cronCoreProps(),
+})
+
+/**
+ * Props of {@link CronElementPlus}
+ *
+ * See {@link @vue-js-cron/core!CronCoreProps | CronCoreProps} for a detailed description of each prop
+ *
+ * @interface
+ */
+export type CronElementPlusProps = Partial<
+  ExtractPropTypes<ReturnType<typeof cronElementPlusProps>>
+>
+
+export default defineComponent({
+  name: 'VueCronEditor',
+  components: {
+    CustomSelect,
+  },
+  props: cronElementPlusProps(),
+  emits: ['update:model-value', 'error'],
+  setup(props, ctx) {
+    return setupCron(props, () => props.modelValue, ctx)
+  },
+})
+</script>
+
+<style lang="css">
+.vcron-el-spacer {
+  display: inline-block;
+  padding: 3px;
+}
+</style>