@fullcalendar/vue
Advanced tools
Comparing version 6.0.0-beta.1 to 6.0.0-beta.2
import Vue from 'vue'; | ||
import { Calendar, CalendarOptions } from '@fullcalendar/core'; | ||
declare const FullCalendar: import("vue/types/vue").ExtendedVue<Vue, { | ||
import { CustomRendering } from '@fullcalendar/core/internal'; | ||
declare const FullCalendar: import("vue/types/vue.js").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>, { | ||
renderId: number; | ||
customRenderingMap: Map<string, CustomRendering<any>>; | ||
}, { | ||
getApi: typeof getApi; | ||
buildOptions: typeof buildOptions; | ||
getApi(): Calendar; | ||
buildOptions(suppliedOptions: CalendarOptions | undefined): CalendarOptions; | ||
}, unknown, { | ||
options: CalendarOptions; | ||
}>; | ||
declare function buildOptions(this: { | ||
$options: any; | ||
}, suppliedOptions: CalendarOptions, parent: Vue): CalendarOptions; | ||
declare function getApi(this: { | ||
$options: any; | ||
}): Calendar; | ||
}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin>; | ||
export default FullCalendar; |
@@ -1,33 +0,65 @@ | ||
import { __assign } from "tslib"; | ||
import Vue from 'vue'; | ||
import { Calendar } from '@fullcalendar/core'; | ||
import { OPTION_IS_COMPLEX } from './options'; | ||
import { shallowCopy, mapHash } from './utils'; | ||
import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type'; | ||
var FullCalendar = Vue.extend({ | ||
import { CustomRenderingStore } from '@fullcalendar/core/internal'; | ||
import { OPTION_IS_COMPLEX } from './options.js'; | ||
import { shallowCopy } from './utils.js'; | ||
import OffscreenFragment from './OffscreenFragment.js'; | ||
import TransportContainer from './TransportContainer.js'; | ||
const FullCalendar = Vue.extend({ | ||
props: { | ||
options: Object | ||
}, | ||
data: initData, | ||
render: function (createElement) { | ||
return createElement('div', { | ||
data() { | ||
return { | ||
renderId: 0, | ||
customRenderingMap: new Map() | ||
}; | ||
}, | ||
methods: { | ||
getApi() { | ||
return getSecret(this).calendar; | ||
}, | ||
buildOptions(suppliedOptions) { | ||
return Object.assign(Object.assign({}, suppliedOptions), { customRenderingMetaMap: this.$scopedSlots, handleCustomRendering: getSecret(this).handleCustomRendering }); | ||
}, | ||
}, | ||
render(h) { | ||
const transportContainerNodes = []; | ||
for (const customRendering of this.customRenderingMap.values()) { | ||
transportContainerNodes.push(h(TransportContainer, { | ||
key: customRendering.id, | ||
props: { | ||
inPlaceOf: customRendering.containerEl, | ||
elTag: customRendering.elTag, | ||
elClasses: customRendering.elClasses, | ||
elStyle: customRendering.elStyle, | ||
elAttrs: customRendering.elAttrs, | ||
} | ||
}, customRendering.generatorMeta(// a slot-render-function | ||
customRendering.renderProps))); | ||
} | ||
return h('div', { | ||
// when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated | ||
attrs: { 'data-fc-render-id': this.renderId } | ||
}); | ||
}, [ | ||
// for containing TransportContainer keys | ||
h(OffscreenFragment, transportContainerNodes) | ||
]); | ||
}, | ||
mounted: function () { | ||
var internal = this.$options; | ||
internal.scopedSlotOptions = mapHash(this.$scopedSlots, wrapVDomGenerator); // needed for buildOptions | ||
var calendar = new Calendar(this.$el, this.buildOptions(this.options, this)); | ||
internal.calendar = calendar; | ||
mounted() { | ||
const customRenderingStore = new CustomRenderingStore(); | ||
getSecret(this).handleCustomRendering = customRenderingStore.handle.bind(customRenderingStore); | ||
const calendarOptions = this.buildOptions(this.options); | ||
const calendar = new Calendar(this.$el, calendarOptions); | ||
getSecret(this).calendar = calendar; | ||
calendar.render(); | ||
customRenderingStore.subscribe((customRenderingMap) => { | ||
this.renderId++; // because below line won't trigger if reference is same | ||
this.customRenderingMap = customRenderingMap; | ||
}); | ||
}, | ||
methods: { | ||
getApi: getApi, | ||
buildOptions: buildOptions, | ||
}, | ||
beforeUpdate: function () { | ||
beforeUpdate() { | ||
this.getApi().resumeRendering(); // the watcher handlers paused it | ||
}, | ||
beforeDestroy: function () { | ||
beforeDestroy() { | ||
this.getApi().destroy(); | ||
@@ -37,20 +69,10 @@ }, | ||
}); | ||
function initData() { | ||
return { | ||
renderId: 0 | ||
}; | ||
export default FullCalendar; | ||
// storing internal state: | ||
// https://github.com/vuejs/vue/issues/1988#issuecomment-163013818 | ||
function getSecret(inst) { | ||
return inst; | ||
} | ||
function buildOptions(suppliedOptions, parent) { | ||
var internal = this.$options; | ||
suppliedOptions = suppliedOptions || {}; | ||
return __assign(__assign(__assign({}, internal.scopedSlotOptions), suppliedOptions), { plugins: (suppliedOptions.plugins || []).concat([ | ||
createVueContentTypePlugin(parent) | ||
]) }); | ||
} | ||
function getApi() { | ||
var internal = this.$options; | ||
return internal.calendar; | ||
} | ||
function buildWatchers() { | ||
var watchers = { | ||
let watchers = { | ||
// watches changes of ALL options and their nested objects, | ||
@@ -60,6 +82,7 @@ // but this is only a means to be notified of top-level non-complex options changes. | ||
deep: true, | ||
handler: function (options) { | ||
var calendar = this.getApi(); | ||
handler(options) { | ||
let calendar = this.getApi(); | ||
calendar.pauseRendering(); | ||
calendar.resetOptions(this.buildOptions(options, this)); | ||
let calendarOptions = this.buildOptions(options); | ||
calendar.resetOptions(calendarOptions); | ||
this.renderId++; // will queue a rerender | ||
@@ -69,17 +92,16 @@ } | ||
}; | ||
var _loop_1 = function (complexOptionName) { | ||
for (let complexOptionName in OPTION_IS_COMPLEX) { | ||
// handlers called when nested objects change | ||
watchers["options." + complexOptionName] = { | ||
watchers[`options.${complexOptionName}`] = { | ||
deep: true, | ||
handler: function (val) { | ||
var _a; | ||
handler(val) { | ||
// unfortunately the handler is called with undefined if new props were set, but the complex one wasn't ever set | ||
if (val !== undefined) { | ||
var calendar = this.getApi(); | ||
let calendar = this.getApi(); | ||
calendar.pauseRendering(); | ||
calendar.resetOptions((_a = {}, | ||
calendar.resetOptions({ | ||
// the only reason we shallow-copy is to trick FC into knowing there's a nested change. | ||
// TODO: future versions of FC will more gracefully handle event option-changes that are same-reference. | ||
_a[complexOptionName] = shallowCopy(val), | ||
_a), true); | ||
[complexOptionName]: shallowCopy(val) | ||
}, true); | ||
this.renderId++; // will queue a rerender | ||
@@ -89,9 +111,5 @@ } | ||
}; | ||
}; | ||
for (var complexOptionName in OPTION_IS_COMPLEX) { | ||
_loop_1(complexOptionName); | ||
} | ||
return watchers; | ||
} | ||
export default FullCalendar; | ||
//# sourceMappingURL=FullCalendar.js.map |
@@ -1,2 +0,2 @@ | ||
export var OPTION_IS_COMPLEX = { | ||
export const OPTION_IS_COMPLEX = { | ||
headerToolbar: true, | ||
@@ -3,0 +3,0 @@ footerToolbar: true, |
export declare function shallowCopy(val: any): any; | ||
export declare function mapHash(input: any, func: any): any; |
// TODO: add types! | ||
import { __assign } from "tslib"; | ||
/* | ||
@@ -12,3 +11,3 @@ works with objects and arrays | ||
else if (val) { // non-null | ||
val = __assign({}, val); | ||
val = Object.assign({}, val); | ||
} | ||
@@ -18,11 +17,2 @@ } | ||
} | ||
export function mapHash(input, func) { | ||
var output = {}; | ||
for (var key in input) { | ||
if (input.hasOwnProperty(key)) { | ||
output[key] = func(input[key], key); | ||
} | ||
} | ||
return output; | ||
} | ||
//# sourceMappingURL=utils.js.map |
MIT License | ||
Copyright (c) 2020 Adam Shaw | ||
Copyright (c) 2022 Adam Shaw | ||
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining |
{ | ||
"name": "@fullcalendar/vue", | ||
"version": "6.0.0-beta.1", | ||
"version": "6.0.0-beta.2", | ||
"title": "FullCalendar Vue 2 Component", | ||
@@ -17,17 +17,4 @@ "description": "An official FullCalendar component for Vue 2", | ||
}, | ||
"scripts": { | ||
"tsc": "tsc -p tsconfig.json", | ||
"clean": "rm -rf dist tmp", | ||
"watch": "tsc -p tsconfig.json --watch", | ||
"build": "tsc -p tsconfig.json && rollup -c && npm run minify", | ||
"minify": "terser --compress --mangle --comments false --output dist/main.global.min.js -- dist/main.global.js", | ||
"test": "concurrently 'webpack --watch' 'karma start karma.config.js'", | ||
"test:ci": "webpack && karma start karma.config.js --browsers ChromeHeadless --single-run --no-auto-watch", | ||
"ci": "./scripts/ci.sh" | ||
}, | ||
"dependencies": { | ||
"@fullcalendar/core": "6.0.0-beta.1", | ||
"tslib": "^2.1.0" | ||
}, | ||
"peerDependencies": { | ||
"@fullcalendar/core": "6.0.0-beta.2", | ||
"vue": "^2.6.12" | ||
@@ -40,6 +27,4 @@ }, | ||
"@babel/runtime": "^7.12.1", | ||
"@fullcalendar/daygrid": "6.0.0-beta.1", | ||
"@rollup/plugin-node-resolve": "^8.4.0", | ||
"@types/estree": "^0.0.45", | ||
"@types/node": "14.10.0", | ||
"@fullcalendar/core": "6.0.0-beta.2", | ||
"@fullcalendar/daygrid": "6.0.0-beta.2", | ||
"@vue/test-utils": "^1.0.3", | ||
@@ -57,3 +42,3 @@ "babel-loader": "^8.1.0", | ||
"style-loader": "^2.0.0", | ||
"terser": "^4.8.0", | ||
"terser": "^5.4.0", | ||
"typescript": "^4.0.5", | ||
@@ -66,10 +51,37 @@ "vue": "^2.6.12", | ||
}, | ||
"main": "dist/main.cjs.js", | ||
"module": "dist/main.js", | ||
"types": "dist/main.d.ts", | ||
"jsdelivr": "dist/main.global.min.js", | ||
"type": "module", | ||
"main": "dist/index.cjs", | ||
"module": "dist/index.js", | ||
"types": "dist/index.d.ts", | ||
"unpkg": "dist/index.global.min.js", | ||
"jsdelivr": "dist/index.global.min.js", | ||
"exports": { | ||
"./package.json": "./package.json", | ||
".": { | ||
"require": "./dist/index.cjs", | ||
"import": "./dist/index.js", | ||
"types": "./dist/index.d.ts", | ||
"default": "./dist/index.global.js" | ||
} | ||
}, | ||
"files": [ | ||
"dist", | ||
"src" | ||
] | ||
], | ||
"scripts": { | ||
"build": "pnpm run tsc && pnpm run rollup && pnpm run webpack && pnpm run minify && pnpm run meta", | ||
"dev": "pnpm run tsc && concurrently 'npm:tsc:dev' 'npm:rollup:dev' 'npm:webpack:dev'", | ||
"clean": "rm -rf dist tests/dist", | ||
"tsc": "tsc -p .", | ||
"tsc:dev": "tsc -p . --watch --preserveWatchOutput --pretty", | ||
"rollup": "rollup -c", | ||
"rollup:dev": "rollup -c --watch", | ||
"webpack": "webpack", | ||
"webpack:dev": "webpack --watch", | ||
"test": "karma start karma.config.cjs --browsers ChromeHeadless --single-run --no-auto-watch", | ||
"test:dev": "karma start karma.config.cjs", | ||
"minify": "terser --compress --mangle --comments false --output dist/index.global.min.js -- dist/index.global.js", | ||
"meta": "mkdir -p dist && cp README.md LICENSE.txt dist", | ||
"ci": "pnpm run clean && pnpm run build && pnpm run test" | ||
} | ||
} |
@@ -13,5 +13,5 @@ | ||
``` | ||
npm install @fullcalendar/vue | ||
npm install @fullcalendar/core @fullcalendar/vue | ||
``` | ||
For view Vue 3, visit the [vue3 branch](https://github.com/fullcalendar/fullcalendar-vue/tree/vue3). |
@@ -1,17 +0,10 @@ | ||
import Vue, { PropType } from 'vue' | ||
import { NormalizedScopedSlot } from 'vue/types/vnode' | ||
import Vue, { PropType, VNode } from 'vue' | ||
import { Calendar, CalendarOptions } from '@fullcalendar/core' | ||
import { OPTION_IS_COMPLEX } from './options' | ||
import { shallowCopy, mapHash } from './utils' | ||
import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type' | ||
import { CustomRendering, CustomRenderingStore } from '@fullcalendar/core/internal' | ||
import { OPTION_IS_COMPLEX } from './options.js' | ||
import { shallowCopy } from './utils.js' | ||
import OffscreenFragment from './OffscreenFragment.js' | ||
import TransportContainer from './TransportContainer.js' | ||
interface FullCalendarInternal { | ||
calendar: Calendar | ||
scopedSlotOptions: { [name: string]: NormalizedScopedSlot } | ||
} | ||
const FullCalendar = Vue.extend({ | ||
props: { | ||
@@ -21,25 +14,67 @@ options: Object as PropType<CalendarOptions> | ||
data: initData, // separate func b/c of type inferencing | ||
data() { | ||
return { | ||
renderId: 0, | ||
customRenderingMap: new Map<string, CustomRendering<any>>() | ||
} | ||
}, | ||
render(createElement) { | ||
return createElement('div', { | ||
methods: { | ||
getApi(): Calendar { | ||
return getSecret(this).calendar | ||
}, | ||
buildOptions(suppliedOptions: CalendarOptions | undefined): CalendarOptions { | ||
return { | ||
...suppliedOptions, | ||
customRenderingMetaMap: this.$scopedSlots, | ||
handleCustomRendering: getSecret(this).handleCustomRendering, | ||
} | ||
}, | ||
}, | ||
render(h) { | ||
const transportContainerNodes: VNode[] = [] | ||
for (const customRendering of this.customRenderingMap.values()) { | ||
transportContainerNodes.push( | ||
h(TransportContainer, { | ||
key: customRendering.id, | ||
props: { | ||
inPlaceOf: customRendering.containerEl, | ||
elTag: customRendering.elTag, | ||
elClasses: customRendering.elClasses, | ||
elStyle: customRendering.elStyle, | ||
elAttrs: customRendering.elAttrs, | ||
} | ||
}, customRendering.generatorMeta( // a slot-render-function | ||
customRendering.renderProps | ||
)) | ||
) | ||
} | ||
return h('div', { | ||
// when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated | ||
attrs: { 'data-fc-render-id': this.renderId } | ||
}) | ||
}, [ | ||
// for containing TransportContainer keys | ||
h(OffscreenFragment, transportContainerNodes) | ||
]) | ||
}, | ||
mounted() { | ||
let internal = this.$options as FullCalendarInternal | ||
internal.scopedSlotOptions = mapHash(this.$scopedSlots, wrapVDomGenerator) // needed for buildOptions | ||
const customRenderingStore = new CustomRenderingStore<any>() | ||
getSecret(this).handleCustomRendering = customRenderingStore.handle.bind(customRenderingStore) | ||
let calendar = new Calendar(this.$el as HTMLElement, this.buildOptions(this.options, this)) | ||
internal.calendar = calendar | ||
const calendarOptions = this.buildOptions(this.options) | ||
const calendar = new Calendar(this.$el as HTMLElement, calendarOptions) | ||
getSecret(this).calendar = calendar | ||
calendar.render() | ||
customRenderingStore.subscribe((customRenderingMap) => { | ||
this.renderId++ // because below line won't trigger if reference is same | ||
this.customRenderingMap = customRenderingMap | ||
}) | ||
}, | ||
methods: { // separate funcs b/c of type inferencing | ||
getApi, | ||
buildOptions, | ||
}, | ||
beforeUpdate() { | ||
@@ -56,32 +91,19 @@ this.getApi().resumeRendering() // the watcher handlers paused it | ||
export default FullCalendar | ||
function initData() { | ||
return { | ||
renderId: 0 | ||
} | ||
} | ||
// Internals | ||
type FullCalendarInstance = InstanceType<typeof FullCalendar> | ||
function buildOptions(this: { $options: any }, suppliedOptions: CalendarOptions, parent: Vue): CalendarOptions { | ||
let internal = this.$options as FullCalendarInternal | ||
suppliedOptions = suppliedOptions || {} | ||
return { | ||
...internal.scopedSlotOptions, | ||
...suppliedOptions, // spread will pull out the values from the options getter functions | ||
plugins: (suppliedOptions.plugins || []).concat([ | ||
createVueContentTypePlugin(parent) | ||
]) | ||
} | ||
interface FullCalendarSecret { | ||
calendar: Calendar | ||
handleCustomRendering: (customRendering: CustomRendering<any>) => void | ||
} | ||
function getApi(this: { $options: any }) { | ||
let internal = this.$options as FullCalendarInternal | ||
return internal.calendar | ||
// storing internal state: | ||
// https://github.com/vuejs/vue/issues/1988#issuecomment-163013818 | ||
function getSecret(inst: FullCalendarInstance): FullCalendarSecret { | ||
return inst as any as FullCalendarSecret | ||
} | ||
type FullCalendarInstance = InstanceType<typeof FullCalendar> | ||
function buildWatchers() { | ||
@@ -98,3 +120,6 @@ | ||
calendar.pauseRendering() | ||
calendar.resetOptions(this.buildOptions(options, this)) | ||
let calendarOptions = this.buildOptions(options) | ||
calendar.resetOptions(calendarOptions) | ||
this.renderId++ // will queue a rerender | ||
@@ -131,4 +156,1 @@ } | ||
} | ||
export default FullCalendar |
// TODO: add types! | ||
/* | ||
@@ -19,14 +18,1 @@ works with objects and arrays | ||
} | ||
export function mapHash(input: any, func: any) { | ||
const output: any = {} | ||
for (const key in input) { | ||
if (input.hasOwnProperty(key)) { | ||
output[key] = func(input[key], key) | ||
} | ||
} | ||
return output | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
48103
2
25
32
Yes
922
1
+ Added@fullcalendar/core@6.0.0-beta.2(transitive)
- Removed@fullcalendar/core@6.0.0-beta.1
- Removedtslib@^2.1.0
- Removed@fullcalendar/common@6.0.0-beta.1(transitive)
- Removed@fullcalendar/core@6.0.0-beta.1(transitive)
- Removedtslib@2.6.2(transitive)