Skip to content

Commit 2b3de8a

Browse files
abichingerabichinger
committed
feat: add quasar (vite)
1 parent 01a78a0 commit 2b3de8a

File tree

16 files changed

+554
-11
lines changed

16 files changed

+554
-11
lines changed

‎.eslintignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
.temp
55
node_modules
66
dist
7-
docs/src/api/default/*.js
7+
docs/src/api/default/*.js
8+
quasar

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ This monorepo includes the following packages:
2020
- vuetify - Vuetify component to edit cron expressions.
2121
- element-plus - Element Plus component
2222
- ant - Ant Design Vue component
23+
- quasar - Quasar component
2324
- docs - Vue.js Cron documentation powered by [VuePress](https://vuepress.vuejs.org/)
2425

2526
# Development

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,27 @@
88
"light",
99
"vuetify",
1010
"element-plus",
11-
"ant"
11+
"ant",
12+
"quasar"
1213
],
1314
"private": true,
1415
"scripts": {
1516
"clean": "yarn workspaces run clean",
16-
"build": "yarn build-core && yarn build-light && yarn build-vuetify && yarn build-element && yarn build-ant",
17+
"build": "yarn build-core && yarn build-light && yarn build-vuetify && yarn build-element && yarn build-ant && yarn build-quasar",
1718
"build-docs": "cd docs && yarn build",
1819
"build-core": "cd core && yarn build",
1920
"build-light": "cd light && yarn build",
2021
"build-vuetify": "cd vuetify && yarn build",
2122
"build-element": "cd element-plus && yarn build",
2223
"build-ant": "cd ant && yarn build",
24+
"build-quasar": "cd quasar && yarn build",
2325
"dev-docs": "cd docs && yarn dev",
2426
"dev-core": "cd core && yarn serve",
2527
"dev-light": "cd light && yarn serve",
2628
"dev-vuetify": "cd vuetify && yarn serve",
2729
"dev-element": "cd element-plus && yarn serve",
2830
"dev-ant": "cd ant && yarn serve",
31+
"dev-quasar": "cd quasar && yarn dev",
2932
"test": "yarn test-core",
3033
"test-core": "cd core && yarn test",
3134
"dry-run": "multi-semantic-release --dry-run --ignore-private-packages",

‎quasar/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎quasar/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
![Vue.js Cron Vuetify Hero](https://raw.githubusercontent.com/abichinger/vue-js-cron/main/assets/vue-js-cron-hero.png)
2+
3+
<p align="center">
4+
<em>generate cron expressions using vue.js</em>
5+
</p>
6+
7+
<p align="center">
8+
<a href="https://www.npmjs.com/package/@vue-js-cron/core">Core</a> |
9+
<a href="https://www.npmjs.com/package/@vue-js-cron/light">Light</a> |
10+
<a href="https://www.npmjs.com/package/@vue-js-cron/vuetify">Vuetify</a> |
11+
<a href="https://www.npmjs.com/package/@vue-js-cron/element-plus">Element Plus</a> |
12+
<a href="https://www.npmjs.com/package/@vue-js-cron/ant">Ant</a> |
13+
<a href="https://www.npmjs.com/package/@vue-js-cron/quasar">Quasar</a>
14+
</p>
15+
16+
## Usage - Quasar
17+
18+
[Demo](https://abichinger.github.io/vue-js-cron/demo.html)
19+
20+
[Get Started](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quasar)
21+
22+
[API - cron-quasar](https://abichinger.github.io/vue-js-cron/api/quasar.html)
23+
24+
## Attribution
25+
26+
This component is inspired by [react-js-cron](https://github.com/xrutayisire/react-js-cron) and [jqcron](https://github.com/arnapou/jqcron)

‎quasar/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" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎quasar/package.json

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@vue-js-cron/quasar",
3+
"version": "0.0.0",
4+
"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+
},
10+
"repository": "https://github.com/abichinger/vue-js-cron",
11+
"author": "Andreas Bichinger",
12+
"license": "MIT",
13+
"private": false,
14+
"scripts": {
15+
"dev": "vite",
16+
"build": "vite build",
17+
"preview": "vite preview",
18+
"clean": "git clean -xf dist"
19+
},
20+
"dependencies": {
21+
"@quasar/extras": "^1.15.9",
22+
"@vue-js-cron/core": "^3.3.0",
23+
"quasar": "^2.11.3"
24+
},
25+
"devDependencies": {
26+
"@quasar/vite-plugin": "^1.3.0",
27+
"@vitejs/plugin-vue": "^4.0.0",
28+
"sass": "^1.57.1",
29+
"vite": "^4.0.0"
30+
},
31+
"files": [
32+
"package.json",
33+
"dist",
34+
"README.md"
35+
],
36+
"keywords": [
37+
"vue",
38+
"vue.js",
39+
"vue component",
40+
"cron",
41+
"cron expression",
42+
"cron editor",
43+
"quasar",
44+
"quasar component"
45+
]
46+
}

‎quasar/src/App.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div id="app">
3+
<CronQuasar v-model="expr" />
4+
<div class="q-ma-md">{{ expr }}</div>
5+
</div>
6+
</template>
7+
8+
<script setup>
9+
import { ref } from "vue";
10+
import CronQuasar from "./components/CronQuasar.vue";
11+
12+
const expr = ref("* * * * *");
13+
</script>

‎quasar/src/components/CronQuasar.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<span>
3+
<CronCore
4+
v-bind="$attrs"
5+
@update:model-value="$emit('update:model-value', $event)"
6+
@error="$emit('error', $event)"
7+
v-slot="{ fields, period }"
8+
>
9+
<span>
10+
{{ period.prefix }}
11+
12+
<CustomSelect
13+
v-bind="period.attrs"
14+
:items="period.items"
15+
v-on="period.events"
16+
item-value="id"
17+
:button-props="buttonProps"
18+
:menu-props="{ autoClose: true }"
19+
/>
20+
21+
{{ period.suffix }}
22+
23+
<template v-for="f in fields" :key="f.id">
24+
{{ f.prefix }}
25+
26+
<CustomSelect
27+
v-bind="f.attrs"
28+
v-on="f.events"
29+
:selection="f.selectedStr"
30+
:cols="cols[f.id]"
31+
:items="f.items"
32+
multiple
33+
:button-props="buttonProps"
34+
:hideOnClick="false"
35+
clearable
36+
/>
37+
38+
{{ f.suffix }}
39+
</template>
40+
</span>
41+
</CronCore>
42+
</span>
43+
</template>
44+
45+
<script setup>
46+
import core from "@vue-js-cron/core";
47+
import CustomSelect from "./CustomSelect.vue";
48+
const CronCore = core.component;
49+
50+
defineProps({
51+
buttonProps: {
52+
type: Object,
53+
default() {
54+
return {
55+
outline: true,
56+
rounded: true,
57+
color: "primary",
58+
};
59+
},
60+
},
61+
cols: {
62+
type: Object,
63+
default: () => {
64+
return {
65+
minute: 5,
66+
hour: 4,
67+
day: 4,
68+
};
69+
},
70+
},
71+
});
72+
</script>

‎quasar/src/components/CustomSelect.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<renderless-select
3+
v-bind="$attrs"
4+
@update:model-value="$emit('update:model-value', $event)"
5+
#default="{ selectedStr, itemRows, select, isSelected, clearable, clear }"
6+
>
7+
<span>
8+
<q-btn class="q-ma-xs" v-bind="buttonProps">
9+
{{ selectedStr }}
10+
<q-icon
11+
class="q-pl-xs"
12+
v-if="clearable"
13+
name="close"
14+
:size="buttonProps.size ?? 'sm'"
15+
@click="clear()"
16+
@click.stop=""
17+
/>
18+
<q-menu :offset="[0, 7]" v-bind="menuProps">
19+
<div
20+
class="row"
21+
style="line-height: 32px"
22+
v-for="(itemRow, r) in itemRows"
23+
:key="r"
24+
>
25+
<q-item
26+
clickable
27+
v-ripple
28+
dense
29+
:active="isSelected(item)"
30+
class="col"
31+
v-for="(item, c) in itemRow"
32+
:key="c"
33+
@click="select(item)"
34+
>
35+
<template v-if="item">{{ item.text }}</template>
36+
</q-item>
37+
</div>
38+
</q-menu>
39+
</q-btn>
40+
</span>
41+
</renderless-select>
42+
</template>
43+
44+
<script>
45+
export default {
46+
inheritAttrs: false,
47+
};
48+
</script>
49+
50+
<script setup>
51+
import { RenderlessSelect } from "@vue-js-cron/core";
52+
53+
defineProps({
54+
buttonProps: {
55+
type: Object,
56+
default: () => {},
57+
},
58+
menuProps: {
59+
type: Object,
60+
default: () => {},
61+
},
62+
});
63+
64+
defineEmits(["update:model-value"]);
65+
</script>
66+
67+
<style scoped>
68+
</style>

‎quasar/src/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Import vue component
2+
import core from '@vue-js-cron/core'
3+
import component from './components/CronQuasar.vue'
4+
5+
// Declare install function executed by Vue.use()
6+
export function install (Vue) {
7+
if (install.installed) return
8+
install.installed = true
9+
Vue.component('CronQuasar', component)
10+
}
11+
12+
// Create module definition for Vue.use()
13+
const plugin = {
14+
install,
15+
component,
16+
util: core.util
17+
}
18+
19+
// To allow use as module (npm/webpack/etc.) export component
20+
export default plugin

‎quasar/src/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import './style.css'
4+
5+
import '@quasar/extras/material-icons/material-icons.css'
6+
import { Quasar } from 'quasar'
7+
import 'quasar/src/css/index.sass'
8+
9+
const app = createApp(App)
10+
app.use(Quasar)
11+
12+
app.mount('#app')

‎quasar/src/style.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body {
2+
margin: 0;
3+
display: flex;
4+
place-items: center;
5+
min-width: 320px;
6+
min-height: 100vh;
7+
}
8+
9+
#app {
10+
max-width: 1280px;
11+
margin: 0 auto;
12+
padding: 2rem;
13+
text-align: center;
14+
}

‎quasar/vite.config.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { quasar } from '@quasar/vite-plugin';
2+
import vue from '@vitejs/plugin-vue';
3+
import path from 'path';
4+
import { defineConfig } from 'vite';
5+
6+
// https://vitejs.dev/config/
7+
export default defineConfig({
8+
build: {
9+
lib: {
10+
entry: path.resolve(__dirname, 'src/index.js'),
11+
name: 'CronQuasar',
12+
fileName: (format) => `quasar.${format}.js`,
13+
},
14+
rollupOptions: {
15+
external: ['vue', '@vue-js-cron/core', 'quasar', '@quasar/extras'],
16+
output: {
17+
globals: {
18+
vue: 'Vue',
19+
quasar: 'Quasar',
20+
'@vue-js-cron/core': 'core',
21+
},
22+
},
23+
},
24+
},
25+
plugins: [
26+
vue(),
27+
quasar({}),
28+
],
29+
})

0 commit comments

Comments
 (0)