Skip to content

Commit b53958c

Browse files
abichingerabichinger
committed
feat: add ant
1 parent c2158df commit b53958c

27 files changed

+29168
-25
lines changed

‎ant/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.vscode
2+
node_modules
3+
dist

‎ant/.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
access = "public"

‎ant/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# @vue-js-cron/ant
2+
3+
**Cron editor for Ant Vue**
4+
5+
[Get Started](https://abichinger.github.io/vue-js-cron/next/guide/getting-started.html#ant)
6+
7+
## Attribution
8+
9+
This component is inspired by [react-js-cron](https://github.com/xrutayisire/react-js-cron) and [jqcron](https://github.com/arnapou/jqcron)

‎ant/build/rollup.config.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import commonjs from '@rollup/plugin-commonjs' // Convert CommonJS modules to ES6
2+
import css from 'rollup-plugin-css-only'
3+
import vue from 'rollup-plugin-vue' // Handle .vue SFC files
4+
export default {
5+
input: 'src/index.js', // Path relative to package.json
6+
output: {
7+
name: 'ant',
8+
exports: 'named'
9+
},
10+
plugins: [
11+
css({
12+
output: 'ant.css'
13+
}),
14+
vue({
15+
css: false, // Dynamically inject css as a <style> tag
16+
compileTemplate: false // Explicitly convert template to render function
17+
}),
18+
commonjs()
19+
]
20+
}

‎ant/dev/App.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div id="app">
3+
4+
<!-- <v-text-field label="" :model-value="value" @update:model-value="nextValue = $event" @blur="value=nextValue"></v-text-field> -->
5+
<VueCronEditor v-model="value" />
6+
7+
</div>
8+
</template>
9+
10+
<script>
11+
import VueCronEditor from '../src/CronEditor'
12+
13+
export default {
14+
components: {
15+
VueCronEditor
16+
},
17+
18+
data: () => {
19+
const value = '1-3,5,10-12 */4 * * *'
20+
21+
return {
22+
value,
23+
nextValue: value
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style>
30+
#app {
31+
font-family: var(--el-font-family);
32+
font-size: 14px;
33+
-webkit-font-smoothing: antialiased;
34+
-moz-osx-font-smoothing: grayscale;
35+
color: #2c3e50;
36+
margin: 5px;
37+
}
38+
</style>

‎ant/dev/serve.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Button, Col, Dropdown, Menu, MenuItem, Row } from 'ant-design-vue'
2+
import 'ant-design-vue/dist/antd.css'
3+
import { createApp } from 'vue'
4+
import App from './App.vue'
5+
6+
const app = createApp(App)
7+
app.use(Button)
8+
app.use(Dropdown)
9+
app.use(Menu)
10+
app.use(MenuItem)
11+
app.use(Row)
12+
app.use(Col)
13+
14+
app.mount('#app')

‎ant/package.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@vue-js-cron/ant",
3+
"version": "1.0.0",
4+
"description": "Cron editor for Ant Vue",
5+
"main": "dist/ant.umd.js",
6+
"module": "dist/ant.esm.js",
7+
"unpkg": "dist/ant.min.js",
8+
"browser": {
9+
"./sfc": "src/CronEditor.vue"
10+
},
11+
"repository": "https://github.com/abichinger/vue-js-cron",
12+
"author": "Andreas Bichinger",
13+
"license": "MIT",
14+
"private": false,
15+
"scripts": {
16+
"test": "jest",
17+
"serve": "vue-cli-service serve dev/serve.js",
18+
"build": "yarn build:umd & yarn run build:es & yarn run build:unpkg",
19+
"build:umd": "yarn rollup --config build/rollup.config.js --format umd --file dist/ant.umd.js",
20+
"build:es": "yarn rollup --config build/rollup.config.js --format es --file dist/ant.esm.js",
21+
"build:unpkg": "yarn rollup --config build/rollup.config.js --format iife --file dist/ant.min.js",
22+
"clean": "git clean -xf dist"
23+
},
24+
"dependencies": {
25+
"@vue-js-cron/core": "3.1.1",
26+
"ant-design-vue": "^3.2.12"
27+
},
28+
"files": [
29+
"package.json",
30+
"dist",
31+
"README.md"
32+
],
33+
"keywords": [
34+
"vue",
35+
"vue.js",
36+
"vue component",
37+
"cron",
38+
"cron expression",
39+
"cron editor",
40+
"ant",
41+
"design"
42+
]
43+
}

‎ant/src/CronEditor.vue

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
2+
<template>
3+
<CronCore v-bind="$attrs"
4+
@update:model-value="$emit('update:model-value', $event)"
5+
@error="$emit('error', $event)"
6+
v-slot="{fields, period}">
7+
8+
<div>
9+
{{period.prefix}}
10+
11+
<div class="vcron-a-spacer">
12+
<custom-select
13+
v-bind="period.attrs"
14+
:items="period.items"
15+
v-on="period.events"
16+
item-value="id"
17+
:button-props="buttonProps" />
18+
</div>
19+
20+
{{period.suffix}}
21+
22+
<template v-for="f in fields" :key="f.id">
23+
{{f.prefix}}
24+
25+
<div class="vcron-a-spacer">
26+
<custom-select
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+
</div>
37+
38+
{{f.suffix}}
39+
</template>
40+
</div>
41+
42+
</CronCore>
43+
</template>
44+
45+
<script>
46+
import CronCore from '@vue-js-cron/core'
47+
import CustomSelect from './components/CustomSelect.vue'
48+
49+
export default {
50+
name: 'VueCronEditor',
51+
components: {
52+
CronCore: CronCore.component,
53+
CustomSelect
54+
},
55+
props: {
56+
buttonProps: {
57+
type: Object,
58+
default () {
59+
return {}
60+
}
61+
},
62+
cols: {
63+
type: Object,
64+
default: () => {
65+
return {
66+
minute: 5,
67+
hour: 4,
68+
day: 4
69+
}
70+
}
71+
}
72+
},
73+
emits: ['update:model-value', 'error']
74+
}
75+
</script>
76+
77+
<style lang="css">
78+
79+
.vcron-a-spacer {
80+
display: inline-block;
81+
padding: 3px;
82+
}
83+
84+
</style>

‎ant/src/components/CustomSelect.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<renderless-select
3+
v-bind="$attrs"
4+
@update:model-value="$emit('update:model-value', $event)"
5+
#default="{ selectedStr, itemRows, select, clearable, clear, modelValue, itemValue }">
6+
7+
<span class="custom-select">
8+
<a-dropdown :trigger="['click']" v-model:visible="visible" v-bind="dropdownProps">
9+
10+
<a-button v-bind="buttonProps">
11+
{{selectedStr}}<CloseCircleFilled v-if="clearable" @click="clear()" @click.stop="" />
12+
</a-button>
13+
14+
<template #overlay>
15+
<a-menu multiple :selectedKeys="Array.isArray(modelValue) ? modelValue : [modelValue]">
16+
<a-row class="vcron-a-row" type="flex" v-for="(itemRow, i) in itemRows" :key="i">
17+
<a-col class="vcron-a-col" :flex="1" v-for="(item, j) in itemRow" :key="j">
18+
<a-menu-item v-if="item" :key="item[itemValue]" @click="select(item); updateVisibility();">{{item.text}}</a-menu-item>
19+
<a-menu-item v-else></a-menu-item>
20+
</a-col>
21+
</a-row>
22+
</a-menu>
23+
</template>
24+
25+
</a-dropdown>
26+
</span>
27+
</renderless-select>
28+
</template>
29+
30+
<script>
31+
import { RenderlessSelect } from '@vue-js-cron/core'
32+
import { CloseCircleFilled } from '@ant-design/icons-vue'
33+
34+
export default {
35+
inheritAttrs: false,
36+
components: {
37+
RenderlessSelect,
38+
CloseCircleFilled
39+
},
40+
name: 'CustomSelect',
41+
props: {
42+
buttonProps: {
43+
type: Object,
44+
default: () => {}
45+
},
46+
dropdownProps: {
47+
type: Object,
48+
default: () => {}
49+
},
50+
hideOnClick: {
51+
type: Boolean,
52+
default: true
53+
}
54+
},
55+
data: () => {
56+
return {
57+
visible: false
58+
}
59+
},
60+
emits: ['update:model-value'],
61+
methods: {
62+
updateVisibility () {
63+
if (this.hideOnClick && this.visible) {
64+
this.visible = false
65+
}
66+
}
67+
}
68+
}
69+
</script>
70+
71+
<style scoped>
72+
73+
.vcron-a-row {
74+
flex-wrap: nowrap !important;
75+
}
76+
77+
.vcron-a-col {
78+
flex-basis: 100% !important;
79+
min-width: 0;
80+
text-align: center;
81+
}
82+
83+
</style>

‎ant/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 './CronEditor.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('CronAnt', 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

‎ant/vue.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
chainWebpack: config => {
3+
config.externals({
4+
__VUE_SSR_CONTEXT__: '__VUE_SSR_CONTEXT__'
5+
})
6+
}
7+
}

‎core/src/components/renderless-select.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,9 @@ export default {
123123
cols: this.cols,
124124
rows: this.rows,
125125
itemRows: this.itemRows,
126-
multiple: this.multiple
126+
multiple: this.multiple,
127+
itemText: this.itemText,
128+
itemValue: this.itemValue
127129
})
128130
}
129131
}

‎docs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@vue-js-cron/element-plus": "^1.0.0",
2626
"@vue-js-cron/light": "^2.0.0",
2727
"@vue-js-cron/vuetify": "^3.0.0",
28+
"@vue-js-cron/ant": "^1.0.0",
2829
"vuetify": "^3.0.0-beta.7"
2930
}
3031
}

‎docs/src/.vuepress/client.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import CronAnt from '@vue-js-cron/ant'
2+
import '@vue-js-cron/ant/dist/ant.css'
13
import CronCore from '@vue-js-cron/core'
24
import CronElement from '@vue-js-cron/element-plus'
35
import '@vue-js-cron/element-plus/dist/element-plus.css'
@@ -13,6 +15,9 @@ import 'vuetify/styles'
1315
import ElementPlus from 'element-plus'
1416
import 'element-plus/dist/index.css'
1517

18+
import Ant from 'ant-design-vue'
19+
import '../styles/antd.css'
20+
1621
import { defineClientConfig } from '@vuepress/client'
1722

1823
import { variables } from './vars'
@@ -25,10 +30,12 @@ export default defineClientConfig({
2530
enhance ({ app, router, siteData }) {
2631
app.use(vuetify)
2732
app.use(ElementPlus)
33+
app.use(Ant)
2834
app.use(CronCore)
2935
app.use(CronVuetify)
3036
app.use(CronLight)
3137
app.use(CronElement)
38+
app.use(CronAnt)
3239

3340
app.mixin({
3441
computed: {

0 commit comments

Comments
 (0)