Skip to content

Commit b20f5fb

Browse files
abichingerabichinger
committed
fix(quasar): migrate to typescript
#40
1 parent f898127 commit b20f5fb

19 files changed

+274
-192
lines changed

‎quasar/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="app"></div>
11-
<script type="module" src="/src/main.js"></script>
11+
<script type="module" src="/src/main.ts"></script>
1212
</body>
1313
</html>

‎quasar/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
"name": "@vue-js-cron/quasar",
33
"version": "2.0.1",
44
"description": "Cron editor for Quasar",
5-
"main": "dist/quasar.umd.js",
6-
"module": "dist/quasar.es.js",
7-
"browser": {
8-
"./sfc": "src/components/quasar-cron.vue"
9-
},
5+
"type": "module",
6+
"main": "dist/quasar.umd.cjs",
7+
"module": "dist/quasar.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": {
1514
"dev": "vite",
16-
"build": "vite build",
17-
"preview": "vite preview",
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",
1818
"clean": "git clean -xf dist"
1919
},
2020
"dependencies": {

‎quasar/src/App.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
</div>
66
</template>
77

8-
<script setup>
8+
<script setup lang="ts">
9+
import CronQuasar from '@/components/cron-quasar.vue'
910
import { ref } from 'vue'
10-
import CronQuasar from './components/CronQuasar.vue'
1111
1212
const expr = ref('* * * * *')
1313
</script>

‎quasar/src/components/CronQuasar.vue

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

‎quasar/src/components/CustomSelect.vue

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

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<span>
3+
<span>
4+
{{ period.prefix.value }}
5+
6+
<CustomSelect
7+
:model-value="period.selected.value.id"
8+
item-value="id"
9+
:items="period.items"
10+
@update:model-value="period.select($event)"
11+
:button-props="buttonProps"
12+
:menu-props="{ autoClose: true }"
13+
/>
14+
15+
{{ period.suffix.value }}
16+
17+
<template v-for="f in selected" :key="f.id">
18+
{{ f.prefix.value }}
19+
20+
<CustomSelect
21+
:model-value="f.selected.value"
22+
@update:model-value="f.select($event)"
23+
:items="f.items"
24+
:cols="cols[f.id] || 1"
25+
:selection="f.text.value"
26+
multiple
27+
clearable
28+
:button-props="buttonProps"
29+
/>
30+
31+
{{ f.suffix.value }}
32+
</template>
33+
</span>
34+
</span>
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 cronQuasarProps = () => ({
43+
/**
44+
* Properties of Quasar Button
45+
*
46+
* @remarks
47+
* See {@link https://quasar.dev/vue-components/button#qbtn-api}
48+
*/
49+
buttonProps: {
50+
type: Object,
51+
default() {
52+
return {
53+
outline: true,
54+
rounded: true,
55+
color: 'primary',
56+
}
57+
},
58+
},
59+
...cronCoreProps(),
60+
})
61+
62+
/**
63+
* Props of {@link CronQuasar}
64+
*
65+
* See {@link @vue-js-cron/core!CronCoreProps | CronCoreProps} for a detailed description of each prop
66+
*
67+
* @interface
68+
*/
69+
export type CronQuasarProps = Partial<ExtractPropTypes<ReturnType<typeof cronQuasarProps>>>
70+
71+
export default defineComponent({
72+
name: 'CronQuasar',
73+
components: {
74+
CustomSelect,
75+
},
76+
props: cronQuasarProps(),
77+
emits: ['update:model-value', 'error'],
78+
setup(props, ctx) {
79+
return setupCron(props, () => props.modelValue, ctx)
80+
},
81+
})
82+
</script>

‎quasar/src/components/select.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<span>
3+
<q-btn class="q-ma-xs" v-bind="buttonProps">
4+
{{ selection ?? selectedStr }}
5+
<q-icon
6+
class="q-pl-xs"
7+
v-if="clearable && !isEmpty"
8+
name="close"
9+
:size="buttonProps.size ?? 'sm'"
10+
@click="clear()"
11+
@click.stop=""
12+
/>
13+
<q-menu :offset="[0, 7]" v-bind="menuProps">
14+
<div class="row" style="line-height: 32px" v-for="(itemRow, r) in itemRows" :key="r">
15+
<q-item
16+
clickable
17+
dense
18+
:active="has(item)"
19+
class="col"
20+
v-for="(item, c) in itemRow"
21+
:key="c"
22+
@click="select(item)"
23+
>
24+
<template v-if="item">{{ item.text }}</template>
25+
</q-item>
26+
</div>
27+
</q-menu>
28+
</q-btn>
29+
</span>
30+
</template>
31+
32+
<script lang="ts">
33+
import { selectProps, setupSelect } from '@vue-js-cron/core'
34+
import { QBtn, QIcon, QItem, QMenu } from 'quasar'
35+
import { defineComponent } from 'vue'
36+
37+
export default defineComponent({
38+
inheritAttrs: false,
39+
components: {
40+
QMenu,
41+
QBtn,
42+
QItem,
43+
QIcon,
44+
},
45+
name: 'CustomSelect',
46+
props: {
47+
...selectProps<any, string | number>(),
48+
buttonProps: {
49+
type: Object,
50+
default: () => {},
51+
},
52+
menuProps: {
53+
type: Object,
54+
default: () => {},
55+
},
56+
},
57+
emits: ['update:model-value'],
58+
setup(props, ctx) {
59+
return setupSelect(props, () => props.modelValue, ctx)
60+
},
61+
})
62+
</script>
63+
64+
<style scoped></style>

‎quasar/src/index.js

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

‎quasar/src/index.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {
2+
default as CronQuasar,
3+
cronQuasarProps,
4+
type CronQuasarProps,
5+
} from '@/components/cron-quasar.vue'
6+
import type { App } from 'vue'
7+
8+
export { CronQuasar, cronQuasarProps, type CronQuasarProps }
9+
export const CronQuasarPlugin = {
10+
install: (app: App) => {
11+
app.component('CronQuasar', CronQuasar)
12+
},
13+
}
14+
export default CronQuasarPlugin

‎quasar/src/main.js renamed to ‎quasar/src/main.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
import App from '@/App.vue'
12
import { createApp } from 'vue'
2-
import App from './App.vue'
33
import './style.css'
44

55
import '@quasar/extras/material-icons/material-icons.css'
66
import { Quasar } from 'quasar'
77
import 'quasar/src/css/index.sass'
88

99
const app = createApp(App)
10-
app.use(Quasar)
10+
app.use(Quasar, {})
1111

1212
app.mount('#app')

0 commit comments

Comments
 (0)