Skip to content

Commit f898127

Browse files
abichingerabichinger
committed
fix(vuetify): migrate to typescript and vite
#40
1 parent fdfb859 commit f898127

19 files changed

+273
-208
lines changed

‎package-lock.json

Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎typedoc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "https://typedoc.org/schema.json",
3-
"entryPoints": ["core", "light", "ant"],
3+
"entryPoints": ["core", "light", "ant", "vuetify"],
44
"entryPointStrategy": "packages",
55
"out": "typedoc",
66
"plugin": ["typedoc-plugin-vue"]

‎vuetify/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>

‎vuetify/package.json

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,24 @@
22
"name": "@vue-js-cron/vuetify",
33
"version": "4.0.1",
44
"description": "Cron editor for vuetify",
5+
"type": "module",
56
"main": "dist/vuetify.umd.js",
6-
"module": "dist/vuetify.esm.js",
7-
"browser": {
8-
"./sfc": "src/CronEditor.vue"
9-
},
7+
"module": "dist/vuetify.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": {
2021
"@vue-js-cron/core": "4.1.0",
21-
"vuetify": "^3.0.0-beta.6"
22+
"vuetify": "^3.4.0"
2223
},
2324
"devDependencies": {
2425
"@mdi/font": "^7.0.96"

‎vuetify/rollup.config.mjs

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

‎vuetify/dev/example-usage.vue renamed to ‎vuetify/src/App.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
@update:model-value="nextValue = $event"
1010
@blur="value = nextValue"
1111
></v-text-field>
12-
<VueCronEditor v-model="value" :fields="fields" :chipProps="{ color: 'primary' }" />
12+
<CronVuetify v-model="value" :fields="fields" :chipProps="{ color: 'primary' }" />
1313
</v-card-text>
1414
</v-card>
1515

1616
<v-card class="mt-10 pa-15" elevation="0" :border="30" color="#f5f5f5" style="margin: auto">
1717
<v-card-text class="text-center text-black">
18-
<VueCronEditor v-model="value" :chipProps="{ color: '#004ba0' }" />
18+
<CronVuetify v-model="value" :chipProps="{ color: '#004ba0' }" />
1919
<div class="mt-6 text-h4 text-grey-darken-3 font-weight-light">
2020
{{ value }}
2121
</div>
@@ -25,13 +25,13 @@
2525
</v-app>
2626
</template>
2727

28-
<script>
28+
<script lang="ts">
29+
import CronVuetify from '@/components/cron-vuetify.vue'
2930
import { defaultItems, pad } from '@vue-js-cron/core'
30-
import VueCronEditor from '../src/CronEditor'
3131
3232
export default {
3333
components: {
34-
VueCronEditor,
34+
CronVuetify,
3535
},
3636
3737
data: () => {

‎vuetify/src/CronEditor.vue

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

‎vuetify/src/components/CustomSelect.vue

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

‎vuetify/src/components/cron-vuetify.vue

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<div style="display: inline-block">
3+
<v-row align="baseline" dense>
4+
<v-col v-if="period.prefix.value" class="flex-grow-0">{{ period.prefix.value }}</v-col>
5+
<v-col cols="auto">
6+
<custom-select
7+
:model-value="period.selected.value.id"
8+
item-value="id"
9+
:items="period.items"
10+
@update:model-value="period.select($event)"
11+
:chip-props="chipProps"
12+
/>
13+
</v-col>
14+
<v-col v-if="period.suffix.value" class="flex-grow-0">{{ period.suffix.value }}</v-col>
15+
16+
<template v-for="f in selected" :key="f.id">
17+
<v-col v-if="f.prefix.value" class="flex-grow-0">{{ f.prefix.value }}</v-col>
18+
<v-col cols="auto">
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+
:chip-props="chipProps"
28+
:menu-props="{ closeOnContentClick: false }"
29+
/>
30+
</v-col>
31+
<v-col v-if="f.suffix.value" class="flex-grow-0">{{ f.suffix.value }}</v-col>
32+
</template>
33+
</v-row>
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 type { ExtractPropTypes } from 'vue'
41+
import { defineComponent } from 'vue'
42+
43+
export const cronVuetifyProps = () => ({
44+
/**
45+
* Properties of Vuetify VChip
46+
*
47+
* @remarks
48+
* See {@link https://vuetifyjs.com/en/api/v-chip/#props}
49+
*/
50+
chipProps: {
51+
type: Object,
52+
default() {
53+
return {}
54+
},
55+
},
56+
...cronCoreProps(),
57+
})
58+
59+
/**
60+
* Props of {@link CronVuetify}
61+
*
62+
* See {@link @vue-js-cron/core!CronCoreProps | CronCoreProps} for a detailed description of each prop
63+
*
64+
* @interface
65+
*/
66+
export type CronVuetifyProps = Partial<ExtractPropTypes<ReturnType<typeof cronVuetifyProps>>>
67+
68+
export default defineComponent({
69+
name: 'CronVuetify',
70+
components: {
71+
CustomSelect,
72+
},
73+
props: cronVuetifyProps(),
74+
emits: ['update:model-value', 'error'],
75+
setup(props, ctx) {
76+
return setupCron(props, () => props.modelValue, ctx)
77+
},
78+
})
79+
</script>
80+
81+
<style lang="css"></style>

0 commit comments

Comments
 (0)