Base UI
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Jonathan Nicol
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
<p align="center">
|
||||
<img src="https://user-images.githubusercontent.com/527559/66231995-3cd0c380-e6be-11e9-8782-c50c834aac93.png" width="570" alt="SimpleBar" />
|
||||
</p>
|
||||
<br/>
|
||||
<p align="center" style="margin: 40px;">
|
||||
<a href="https://npmjs.org/package/simplebar-vue"><img alt="NPM version" src="https://img.shields.io/npm/v/simplebar-vue.svg?style=flat-square" /></a>
|
||||
<a href="https://npmjs.org/package/simplebar-vue"><img alt="NPM downloads" src="https://img.shields.io/npm/dm/simplebar-vue.svg?style=flat-square"></a>
|
||||
<a href="https://travis-ci.org/grsmto/simplebar"><img alt="Build Status" src="https://img.shields.io/travis/grsmto/simplebar/master.svg?style=flat-square" /></a>
|
||||
<a href="https://automate.browserstack.com/public-build/amtTU2pEa1FjNmpabTBCbUh2b3FpbFZQaXhNd1Q3bEg0L1dlSzd2SGN2Zz0tLWpjK1ZwWWRNWnVGQWI4OXphWGRISEE9PQ==--39b14340be576db5bd01b020627cd17414003bfb%"><img src='https://automate.browserstack.com/badge.svg?badge_key=amtTU2pEa1FjNmpabTBCbUh2b3FpbFZQaXhNd1Q3bEg0L1dlSzd2SGN2Zz0tLWpjK1ZwWWRNWnVGQWI4OXphWGRISEE9PQ==--39b14340be576db5bd01b020627cd17414003bfb%'/></a>
|
||||
</p>
|
||||
<br/>
|
||||
|
||||
# SimplebarVue
|
||||
|
||||
- **🐦 Follow me on [Twitter!](https://twitter.com/adriendenat) or [Mastodon!](https://mas.to/@adrien)**
|
||||
- **👨💻 I'm available for hire! [Reach out to me!](https://adriendenat.com/)**
|
||||
- **🚧 Check out my new project [Scroll Snap Carousel](https://github.com/Grsmto/scroll-snap-carousel)!**
|
||||
|
||||
### Installation
|
||||
|
||||
**- Via npm**
|
||||
`npm install simplebar-vue --save`
|
||||
|
||||
**- Via Yarn**
|
||||
`yarn add simplebar-vue`
|
||||
|
||||
### Usage
|
||||
|
||||
Check out the [Demo project(vue2)](https://github.com/Grsmto/simplebar/blob/master/examples/vue-2.7/src/App.vue) and the [Demo project(vue3)](https://github.com/Grsmto/simplebar/blob/master/examples/vue-3/src/App.vue)
|
||||
|
||||
First, register it in your Vue app:
|
||||
|
||||
```js
|
||||
import simplebar from 'simplebar-vue';
|
||||
import 'simplebar-vue/dist/simplebar.min.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
simplebar,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Then you can use it in your template
|
||||
|
||||
```js
|
||||
<template>
|
||||
<simplebar data-simplebar-auto-hide="false">
|
||||
// your content elements
|
||||
</simplebar>
|
||||
</template>
|
||||
```
|
||||
|
||||
**Don't forget to import both css and js in your project!**
|
||||
|
||||
### :warning: Warning!
|
||||
|
||||
SimpleBar is **not intended to be used on the `body` element!** I don't recommend wrapping your entire web page inside a custom scroll as it will often badly affect the user experience (slower scroll performance compared to the native body scroll, no native scroll behaviours like click on track, etc.). Do it at your own risk! SimpleBar is meant to improve the experience of **internal web page scrolling**; such as a chat box or a small scrolling area. **Please read the [caveats](#5-caveats) section first to be aware of the limitations!**
|
||||
|
||||
### Options
|
||||
|
||||
Find the list of available options on [the core documentation](https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/README.md#options).
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
If you are experiencing issues when setting up SimpleBar, it is most likely because your styles are clashing with SimpleBar ones. Make sure the element you are setting SimpleBar on does not override any SimpleBar css properties! **We recommend to not style that element at all and use an inner element instead.**
|
||||
|
||||
### Sponsors
|
||||
|
||||
Thanks to BrowserStack for sponsoring open source projects and letting us test SimpleBar for free.
|
||||
<a href="https://www.browserstack.com" target="_blank">
|
||||
<img src="https://user-images.githubusercontent.com/15015324/45184727-368fbf80-b1fe-11e8-8827-08dbc80b0fb1.png" width="200">
|
||||
</a>
|
||||
+172
@@ -0,0 +1,172 @@
|
||||
declare const _default: import("vue-demi").DefineComponent<{
|
||||
/**
|
||||
* By default SimpleBar automatically hides the scrollbar if the user is not scrolling
|
||||
* (it emulates Mac OSX Lion's scrollbar). You can make the scrollbar always visible
|
||||
* by passing `false`.
|
||||
*
|
||||
* Default value is `true`.
|
||||
*
|
||||
* You can also control the animation via CSS as it's a simple CSS opacity transition.
|
||||
*/
|
||||
autoHide: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* It is possible to change the default class names that SimpleBar uses.
|
||||
* To get your own styles to work refer to simplebar.css to get an idea how to setup your css.
|
||||
* - `content` represents the wrapper for the content being scrolled.
|
||||
* - `scrollContent` represents the container containing the elements being scrolled.
|
||||
* - `scrollbar` defines the style of the scrollbar with which the user can interact to scroll the content.
|
||||
* - `track` styles the area surrounding the `scrollbar`.
|
||||
*
|
||||
* ```js
|
||||
* classNames: {
|
||||
* // defaults
|
||||
* content: 'simplebar-content',
|
||||
* scrollContent: 'simplebar-scroll-content',
|
||||
* scrollbar: 'simplebar-scrollbar',
|
||||
* track: 'simplebar-track'
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
classNames: ObjectConstructor;
|
||||
/**
|
||||
* Force the track to be visible (same behaviour as `overflow: scroll`).
|
||||
* Can be `boolean | 'x' | 'y'`, defaults to `false`, which behaves like `overflow: auto`.
|
||||
*/
|
||||
forceVisible: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: boolean | 'x' | 'y') => boolean;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* Set custom aria-label attribute for users with screen reader.
|
||||
*/
|
||||
ariaLabel: StringConstructor;
|
||||
/**
|
||||
* Set custom tabIndex attribute.
|
||||
*/
|
||||
tabIndex: NumberConstructor;
|
||||
/**
|
||||
* Activate RTL support by passing `'rtl'`.
|
||||
* You will also need a css rule with `direction: rtl`.
|
||||
*/
|
||||
direction: {
|
||||
type: StringConstructor;
|
||||
validator: (v: string) => boolean;
|
||||
};
|
||||
/**
|
||||
* Define the delay until the scrollbar hides. Has no effect if `autoHide` is `false`.
|
||||
* Default value is `1000`.
|
||||
*/
|
||||
timeout: NumberConstructor;
|
||||
/**
|
||||
* Controls the click on track behaviour.
|
||||
* Default to `true`.
|
||||
*/
|
||||
clickOnTrack: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* Controls the min size of the scrollbar in `px`.
|
||||
* Default is `25`.
|
||||
*/
|
||||
scrollbarMinSize: NumberConstructor;
|
||||
/**
|
||||
* Controls the max size of the scrollbar in `px`.
|
||||
* Default is `0` (no max size).
|
||||
*/
|
||||
scrollbarMaxSize: NumberConstructor;
|
||||
}, unknown, {}, {}, {
|
||||
recalculate(): void;
|
||||
}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "scroll"[], "scroll", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
|
||||
/**
|
||||
* By default SimpleBar automatically hides the scrollbar if the user is not scrolling
|
||||
* (it emulates Mac OSX Lion's scrollbar). You can make the scrollbar always visible
|
||||
* by passing `false`.
|
||||
*
|
||||
* Default value is `true`.
|
||||
*
|
||||
* You can also control the animation via CSS as it's a simple CSS opacity transition.
|
||||
*/
|
||||
autoHide: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* It is possible to change the default class names that SimpleBar uses.
|
||||
* To get your own styles to work refer to simplebar.css to get an idea how to setup your css.
|
||||
* - `content` represents the wrapper for the content being scrolled.
|
||||
* - `scrollContent` represents the container containing the elements being scrolled.
|
||||
* - `scrollbar` defines the style of the scrollbar with which the user can interact to scroll the content.
|
||||
* - `track` styles the area surrounding the `scrollbar`.
|
||||
*
|
||||
* ```js
|
||||
* classNames: {
|
||||
* // defaults
|
||||
* content: 'simplebar-content',
|
||||
* scrollContent: 'simplebar-scroll-content',
|
||||
* scrollbar: 'simplebar-scrollbar',
|
||||
* track: 'simplebar-track'
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
classNames: ObjectConstructor;
|
||||
/**
|
||||
* Force the track to be visible (same behaviour as `overflow: scroll`).
|
||||
* Can be `boolean | 'x' | 'y'`, defaults to `false`, which behaves like `overflow: auto`.
|
||||
*/
|
||||
forceVisible: {
|
||||
type: (BooleanConstructor | StringConstructor)[];
|
||||
validator: (v: boolean | 'x' | 'y') => boolean;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* Set custom aria-label attribute for users with screen reader.
|
||||
*/
|
||||
ariaLabel: StringConstructor;
|
||||
/**
|
||||
* Set custom tabIndex attribute.
|
||||
*/
|
||||
tabIndex: NumberConstructor;
|
||||
/**
|
||||
* Activate RTL support by passing `'rtl'`.
|
||||
* You will also need a css rule with `direction: rtl`.
|
||||
*/
|
||||
direction: {
|
||||
type: StringConstructor;
|
||||
validator: (v: string) => boolean;
|
||||
};
|
||||
/**
|
||||
* Define the delay until the scrollbar hides. Has no effect if `autoHide` is `false`.
|
||||
* Default value is `1000`.
|
||||
*/
|
||||
timeout: NumberConstructor;
|
||||
/**
|
||||
* Controls the click on track behaviour.
|
||||
* Default to `true`.
|
||||
*/
|
||||
clickOnTrack: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* Controls the min size of the scrollbar in `px`.
|
||||
* Default is `25`.
|
||||
*/
|
||||
scrollbarMinSize: NumberConstructor;
|
||||
/**
|
||||
* Controls the max size of the scrollbar in `px`.
|
||||
* Default is `0` (no max size).
|
||||
*/
|
||||
scrollbarMaxSize: NumberConstructor;
|
||||
}>> & {
|
||||
onScroll?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
autoHide: boolean;
|
||||
forceVisible: string | boolean;
|
||||
clickOnTrack: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import simplebar from './component';
|
||||
export default simplebar;
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
declare module 'simplebar-vue' {
|
||||
import { DefineComponent } from 'vue';
|
||||
import SimpleBar from 'simplebar';
|
||||
|
||||
export type SimpleBarComponent = DefineComponent<{ // Props
|
||||
|
||||
/**
|
||||
* By default SimpleBar automatically hides the scrollbar if the user is not scrolling
|
||||
* (it emulates Mac OSX Lion's scrollbar). You can make the scrollbar always visible
|
||||
* by passing `false`.
|
||||
*
|
||||
* Default value is `true`.
|
||||
*
|
||||
* You can also control the animation via CSS as it's a simple CSS opacity transition.
|
||||
*/
|
||||
autoHide?: boolean;
|
||||
|
||||
/**
|
||||
* It is possible to change the default class names that SimpleBar uses.
|
||||
* To get your own styles to work refer to simplebar.css to get an idea how to setup your css.
|
||||
* - `content` represents the wrapper for the content being scrolled.
|
||||
* - `scrollContent` represents the container containing the elements being scrolled.
|
||||
* - `scrollbar` defines the style of the scrollbar with which the user can interact to scroll the content.
|
||||
* - `track` styles the area surrounding the `scrollbar`.
|
||||
*
|
||||
* ```js
|
||||
* classNames: {
|
||||
* // defaults
|
||||
* content: 'simplebar-content',
|
||||
* scrollContent: 'simplebar-scroll-content',
|
||||
* scrollbar: 'simplebar-scrollbar',
|
||||
* track: 'simplebar-track'
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
classNames?: Partial<{ content: string; scrollContent: string; scrollbar: string; track: string }>;
|
||||
|
||||
/**
|
||||
* Force the track to be visible (same behaviour as `overflow: scroll`).
|
||||
* Can be `boolean | 'x' | 'y'`, defaults to `false`, which behaves like `overflow: auto`.
|
||||
*/
|
||||
forceVisible?: boolean | 'x' | 'y';
|
||||
|
||||
/**
|
||||
* Set custom aria-label attribute for users with screen reader.
|
||||
*/
|
||||
ariaLabel?: string;
|
||||
|
||||
/**
|
||||
* Set custom tabIndex attribute.
|
||||
*/
|
||||
tabIndex?: number;
|
||||
|
||||
/**
|
||||
* Activate RTL support by passing `'rtl'`.
|
||||
* You will also need a css rule with `direction: rtl`.
|
||||
*/
|
||||
direction?: 'ltr' | 'rtl';
|
||||
|
||||
/**
|
||||
* Define the delay until the scrollbar hides. Has no effect if `autoHide` is `false`.
|
||||
* Default value is `1000`.
|
||||
*/
|
||||
timeout?: number;
|
||||
|
||||
/**
|
||||
* Controls the click on track behaviour.
|
||||
* Default to `true`.
|
||||
*/
|
||||
clickOnTrack?: boolean;
|
||||
|
||||
/**
|
||||
* Controls the min size of the scrollbar in `px`.
|
||||
* Default is `25`.
|
||||
*/
|
||||
scrollbarMinSize?: number;
|
||||
|
||||
/**
|
||||
* Controls the max size of the scrollbar in `px`.
|
||||
* Default is `0` (no max size).
|
||||
*/
|
||||
scrollbarMaxSize?: number;
|
||||
},
|
||||
{ }, // RawBindings
|
||||
{ // Data
|
||||
SimpleBar: SimpleBar;
|
||||
contentElement: HTMLDivElement;
|
||||
scrollElement: HTMLDivElement;
|
||||
},
|
||||
{ }, // Computed
|
||||
{ // Methods
|
||||
recalculate (): void;
|
||||
},
|
||||
{ }, // Mixins
|
||||
{ }, // Extends
|
||||
{ // Emits
|
||||
scroll: ($event: Event & { target: HTMLElement }) => void
|
||||
}>;
|
||||
|
||||
const Component: SimpleBarComponent;
|
||||
export default Component;
|
||||
}
|
||||
+271
@@ -0,0 +1,271 @@
|
||||
/**
|
||||
* simplebar-vue - v2.4.2
|
||||
* Vue component for SimpleBar
|
||||
* https://grsmto.github.io/simplebar/
|
||||
*
|
||||
* Made by Piers Olenski
|
||||
* Under MIT License
|
||||
*/
|
||||
|
||||
import SimpleBarCore from 'simplebar-core';
|
||||
import { isVue3, defineComponent, h } from 'vue-demi';
|
||||
|
||||
/******************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var lifecycleEventNames = {
|
||||
beforeUnmount: isVue3 ? 'beforeUnmount' : 'beforeDestroy',
|
||||
unmount: isVue3 ? 'unmount' : 'destroy'
|
||||
};
|
||||
|
||||
var _a;
|
||||
/**
|
||||
* This is not as easy to read than a regular <template> block, but a
|
||||
* render function is a necessary "evil" to avoid compiler output
|
||||
* differences between vue2 and vue3, which would required a
|
||||
* different cross-compatible implementation.
|
||||
*
|
||||
* IMPORTANT NOTES:
|
||||
* - options API is required to keep backwards compatibility to vue<@2.6.
|
||||
* only superior versions get compat with @vue/composition-api plugin.
|
||||
* - String template refs are required for compat @vue<2.7
|
||||
* - If refactoring to composition-api and thus dropping support to vue<@2.6
|
||||
* do note that returning a render function from setup() hook does not
|
||||
* in >=2.6.0 < 2.7.0 because the way @vue/composition-api handles
|
||||
* template refs.
|
||||
* {@link https://github.com/vuejs/composition-api#limitations}
|
||||
*
|
||||
* ALTERNATIVES:
|
||||
* - https://github.com/vueuse/vue-demi/issues/152
|
||||
* - https://github.com/vueuse/vue-demi/issues/153
|
||||
* - https://github.com/vueuse/vue-demi/issues/154
|
||||
* - {@link https://github.com/cloydlau/json-editor-vue/blob/3a6127d6587ef297f7ab60800cf78a8be5327cb7/src/Component.ts}
|
||||
*
|
||||
*
|
||||
* @todo maybe using jsx in a next version would make this a bit more readable.
|
||||
* but we need to ensure it compiles to a cross-compatible render function
|
||||
* to avoid going back to the same place where we've been with the <template>
|
||||
*/
|
||||
function renderFn(_a) {
|
||||
var _b;
|
||||
var h = _a.h, emit = _a.emit, slots = _a.slots, props = _a.props;
|
||||
var onScroll = function (event) { return emit('scroll', event); };
|
||||
var classNames = __assign(__assign({}, SimpleBarCore.defaultOptions.classNames), props.classNames);
|
||||
return h('div', __assign({ ref: 'element' }, (isVue3
|
||||
? {
|
||||
'data-simplebar': 'init'
|
||||
}
|
||||
: {
|
||||
attrs: {
|
||||
'data-simplebar': 'init'
|
||||
}
|
||||
})), [
|
||||
h('div', {
|
||||
"class": classNames.wrapper
|
||||
}, [
|
||||
h('div', { "class": classNames.heightAutoObserverWrapperEl }, [
|
||||
h('div', { "class": classNames.heightAutoObserverEl }),
|
||||
]),
|
||||
h('div', { "class": classNames.mask }, [
|
||||
h('div', { "class": classNames.offset }, [
|
||||
h('div', __assign(__assign({}, (isVue3
|
||||
? {
|
||||
onScroll: onScroll,
|
||||
"class": classNames.contentWrapper,
|
||||
tabIndex: props.tabIndex ||
|
||||
SimpleBarCore.defaultOptions.tabIndex,
|
||||
role: 'region',
|
||||
'aria-label': props.ariaLabel ||
|
||||
SimpleBarCore.defaultOptions.ariaLabel
|
||||
}
|
||||
: {
|
||||
attrs: {
|
||||
"class": classNames.contentWrapper,
|
||||
tabIndex: props.tabIndex ||
|
||||
SimpleBarCore.defaultOptions.tabIndex,
|
||||
role: 'region',
|
||||
'aria-label': props.ariaLabel ||
|
||||
SimpleBarCore.defaultOptions.ariaLabel
|
||||
},
|
||||
on: { scroll: onScroll }
|
||||
})), { ref: 'scrollElement' }), [
|
||||
h('div', { "class": classNames.contentEl, ref: 'contentElement' }, (_b = slots["default"]) === null || _b === void 0 ? void 0 : _b.call(slots)),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
h('div', { "class": classNames.placeholder }),
|
||||
]),
|
||||
h('div', { "class": "".concat(classNames.track, " simplebar-horizontal") }, [
|
||||
h('div', { "class": classNames.scrollbar }),
|
||||
]),
|
||||
h('div', { "class": "".concat(classNames.track, " simplebar-vertical") }, [
|
||||
h('div', { "class": classNames.scrollbar }),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
var simplebar = defineComponent((_a = {
|
||||
name: 'simplebar-vue',
|
||||
props: {
|
||||
/**
|
||||
* By default SimpleBar automatically hides the scrollbar if the user is not scrolling
|
||||
* (it emulates Mac OSX Lion's scrollbar). You can make the scrollbar always visible
|
||||
* by passing `false`.
|
||||
*
|
||||
* Default value is `true`.
|
||||
*
|
||||
* You can also control the animation via CSS as it's a simple CSS opacity transition.
|
||||
*/
|
||||
autoHide: { type: Boolean, "default": undefined },
|
||||
/**
|
||||
* It is possible to change the default class names that SimpleBar uses.
|
||||
* To get your own styles to work refer to simplebar.css to get an idea how to setup your css.
|
||||
* - `content` represents the wrapper for the content being scrolled.
|
||||
* - `scrollContent` represents the container containing the elements being scrolled.
|
||||
* - `scrollbar` defines the style of the scrollbar with which the user can interact to scroll the content.
|
||||
* - `track` styles the area surrounding the `scrollbar`.
|
||||
*
|
||||
* ```js
|
||||
* classNames: {
|
||||
* // defaults
|
||||
* content: 'simplebar-content',
|
||||
* scrollContent: 'simplebar-scroll-content',
|
||||
* scrollbar: 'simplebar-scrollbar',
|
||||
* track: 'simplebar-track'
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
classNames: Object,
|
||||
/**
|
||||
* Force the track to be visible (same behaviour as `overflow: scroll`).
|
||||
* Can be `boolean | 'x' | 'y'`, defaults to `false`, which behaves like `overflow: auto`.
|
||||
*/
|
||||
forceVisible: {
|
||||
type: [Boolean, String],
|
||||
validator: function (v) {
|
||||
return typeof v === 'boolean' || v === 'x' || v === 'y';
|
||||
},
|
||||
"default": undefined
|
||||
},
|
||||
/**
|
||||
* Set custom aria-label attribute for users with screen reader.
|
||||
*/
|
||||
ariaLabel: String,
|
||||
/**
|
||||
* Set custom tabIndex attribute.
|
||||
*/
|
||||
tabIndex: Number,
|
||||
/**
|
||||
* Activate RTL support by passing `'rtl'`.
|
||||
* You will also need a css rule with `direction: rtl`.
|
||||
*/
|
||||
direction: {
|
||||
type: String,
|
||||
validator: function (v) { return v === 'ltr' || v === 'rtl'; }
|
||||
},
|
||||
/**
|
||||
* Define the delay until the scrollbar hides. Has no effect if `autoHide` is `false`.
|
||||
* Default value is `1000`.
|
||||
*/
|
||||
timeout: Number,
|
||||
/**
|
||||
* Controls the click on track behaviour.
|
||||
* Default to `true`.
|
||||
*/
|
||||
clickOnTrack: { type: Boolean, "default": undefined },
|
||||
/**
|
||||
* Controls the min size of the scrollbar in `px`.
|
||||
* Default is `25`.
|
||||
*/
|
||||
scrollbarMinSize: Number,
|
||||
/**
|
||||
* Controls the max size of the scrollbar in `px`.
|
||||
* Default is `0` (no max size).
|
||||
*/
|
||||
scrollbarMaxSize: Number
|
||||
},
|
||||
// @ts-ignore
|
||||
emits: ['scroll'],
|
||||
/**
|
||||
* @returns {{ SimpleBar?: SimpleBar; scrollElement?: HTMLDivElement; contentElement?: HTMLDivElement }}
|
||||
*/
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
mounted: function () {
|
||||
// @ts-ignore (`getOptions` needs to be added to the type definition file)
|
||||
var options = SimpleBarCore.getOptions(this.$refs.element.attributes);
|
||||
for (var _i = 0, _a = Object.entries(this.$props); _i < _a.length; _i++) {
|
||||
var _b = _a[_i], key = _b[0], value = _b[1];
|
||||
if (value != undefined && typeof value !== 'function')
|
||||
options[key] = value;
|
||||
}
|
||||
// @ts-ignore (unable to type cast `$refs`)
|
||||
this.SimpleBar = new SimpleBarCore(this.$refs.element, options);
|
||||
// @ts-ignore (unable to type cast `$refs`)
|
||||
this.scrollElement = this.$refs.scrollElement;
|
||||
// @ts-ignore (unable to type cast `$refs`)
|
||||
this.contentElement = this.$refs.contentElement;
|
||||
}
|
||||
},
|
||||
_a[lifecycleEventNames.beforeUnmount] = function () {
|
||||
var _a;
|
||||
// unMount is not present in types package https://github.com/Grsmto/simplebar/blob/6125d4ac0897c02a82432441aa3bae5e6c6ccb87/packages/simplebar/src/simplebar.js#L925
|
||||
// @ts-ignore
|
||||
(_a = this.SimpleBar) === null || _a === void 0 ? void 0 : _a.unMount();
|
||||
// @ts-ignore
|
||||
this.SimpleBar = undefined;
|
||||
},
|
||||
_a.methods = {
|
||||
recalculate: function () {
|
||||
var _a;
|
||||
// @ts-ignore
|
||||
(_a = this.SimpleBar) === null || _a === void 0 ? void 0 : _a.recalculate();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Note that createElement argument is only provided in <=vue@2.7.x,
|
||||
* in other versions it's a context object that we do not use.
|
||||
*/
|
||||
_a.render = function (createElement) {
|
||||
var _this = this;
|
||||
return renderFn({
|
||||
h: typeof createElement === 'function' ? createElement : h,
|
||||
// @ts-ignore
|
||||
emit: function () {
|
||||
var args = [];
|
||||
for (var _i = 0; _i < arguments.length; _i++) {
|
||||
args[_i] = arguments[_i];
|
||||
}
|
||||
return _this.$emit.apply(_this, args);
|
||||
},
|
||||
// @ts-ignore
|
||||
slots: isVue3 ? this.$slots : this.$scopedSlots,
|
||||
props: this.$props
|
||||
});
|
||||
},
|
||||
_a));
|
||||
|
||||
export { simplebar as default };
|
||||
+277
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* simplebar-vue - v2.4.2
|
||||
* Vue component for SimpleBar
|
||||
* https://grsmto.github.io/simplebar/
|
||||
*
|
||||
* Made by Piers Olenski
|
||||
* Under MIT License
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('simplebar-core'), require('vue-demi')) :
|
||||
typeof define === 'function' && define.amd ? define(['simplebar-core', 'vue-demi'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.SimpleBarVue = factory(global.SimpleBar, global.vueDemi));
|
||||
})(this, (function (SimpleBarCore, vueDemi) { 'use strict';
|
||||
|
||||
/******************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var lifecycleEventNames = {
|
||||
beforeUnmount: vueDemi.isVue3 ? 'beforeUnmount' : 'beforeDestroy',
|
||||
unmount: vueDemi.isVue3 ? 'unmount' : 'destroy'
|
||||
};
|
||||
|
||||
var _a;
|
||||
/**
|
||||
* This is not as easy to read than a regular <template> block, but a
|
||||
* render function is a necessary "evil" to avoid compiler output
|
||||
* differences between vue2 and vue3, which would required a
|
||||
* different cross-compatible implementation.
|
||||
*
|
||||
* IMPORTANT NOTES:
|
||||
* - options API is required to keep backwards compatibility to vue<@2.6.
|
||||
* only superior versions get compat with @vue/composition-api plugin.
|
||||
* - String template refs are required for compat @vue<2.7
|
||||
* - If refactoring to composition-api and thus dropping support to vue<@2.6
|
||||
* do note that returning a render function from setup() hook does not
|
||||
* in >=2.6.0 < 2.7.0 because the way @vue/composition-api handles
|
||||
* template refs.
|
||||
* {@link https://github.com/vuejs/composition-api#limitations}
|
||||
*
|
||||
* ALTERNATIVES:
|
||||
* - https://github.com/vueuse/vue-demi/issues/152
|
||||
* - https://github.com/vueuse/vue-demi/issues/153
|
||||
* - https://github.com/vueuse/vue-demi/issues/154
|
||||
* - {@link https://github.com/cloydlau/json-editor-vue/blob/3a6127d6587ef297f7ab60800cf78a8be5327cb7/src/Component.ts}
|
||||
*
|
||||
*
|
||||
* @todo maybe using jsx in a next version would make this a bit more readable.
|
||||
* but we need to ensure it compiles to a cross-compatible render function
|
||||
* to avoid going back to the same place where we've been with the <template>
|
||||
*/
|
||||
function renderFn(_a) {
|
||||
var _b;
|
||||
var h = _a.h, emit = _a.emit, slots = _a.slots, props = _a.props;
|
||||
var onScroll = function (event) { return emit('scroll', event); };
|
||||
var classNames = __assign(__assign({}, SimpleBarCore.defaultOptions.classNames), props.classNames);
|
||||
return h('div', __assign({ ref: 'element' }, (vueDemi.isVue3
|
||||
? {
|
||||
'data-simplebar': 'init'
|
||||
}
|
||||
: {
|
||||
attrs: {
|
||||
'data-simplebar': 'init'
|
||||
}
|
||||
})), [
|
||||
h('div', {
|
||||
"class": classNames.wrapper
|
||||
}, [
|
||||
h('div', { "class": classNames.heightAutoObserverWrapperEl }, [
|
||||
h('div', { "class": classNames.heightAutoObserverEl }),
|
||||
]),
|
||||
h('div', { "class": classNames.mask }, [
|
||||
h('div', { "class": classNames.offset }, [
|
||||
h('div', __assign(__assign({}, (vueDemi.isVue3
|
||||
? {
|
||||
onScroll: onScroll,
|
||||
"class": classNames.contentWrapper,
|
||||
tabIndex: props.tabIndex ||
|
||||
SimpleBarCore.defaultOptions.tabIndex,
|
||||
role: 'region',
|
||||
'aria-label': props.ariaLabel ||
|
||||
SimpleBarCore.defaultOptions.ariaLabel
|
||||
}
|
||||
: {
|
||||
attrs: {
|
||||
"class": classNames.contentWrapper,
|
||||
tabIndex: props.tabIndex ||
|
||||
SimpleBarCore.defaultOptions.tabIndex,
|
||||
role: 'region',
|
||||
'aria-label': props.ariaLabel ||
|
||||
SimpleBarCore.defaultOptions.ariaLabel
|
||||
},
|
||||
on: { scroll: onScroll }
|
||||
})), { ref: 'scrollElement' }), [
|
||||
h('div', { "class": classNames.contentEl, ref: 'contentElement' }, (_b = slots["default"]) === null || _b === void 0 ? void 0 : _b.call(slots)),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
h('div', { "class": classNames.placeholder }),
|
||||
]),
|
||||
h('div', { "class": "".concat(classNames.track, " simplebar-horizontal") }, [
|
||||
h('div', { "class": classNames.scrollbar }),
|
||||
]),
|
||||
h('div', { "class": "".concat(classNames.track, " simplebar-vertical") }, [
|
||||
h('div', { "class": classNames.scrollbar }),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
var simplebar = vueDemi.defineComponent((_a = {
|
||||
name: 'simplebar-vue',
|
||||
props: {
|
||||
/**
|
||||
* By default SimpleBar automatically hides the scrollbar if the user is not scrolling
|
||||
* (it emulates Mac OSX Lion's scrollbar). You can make the scrollbar always visible
|
||||
* by passing `false`.
|
||||
*
|
||||
* Default value is `true`.
|
||||
*
|
||||
* You can also control the animation via CSS as it's a simple CSS opacity transition.
|
||||
*/
|
||||
autoHide: { type: Boolean, "default": undefined },
|
||||
/**
|
||||
* It is possible to change the default class names that SimpleBar uses.
|
||||
* To get your own styles to work refer to simplebar.css to get an idea how to setup your css.
|
||||
* - `content` represents the wrapper for the content being scrolled.
|
||||
* - `scrollContent` represents the container containing the elements being scrolled.
|
||||
* - `scrollbar` defines the style of the scrollbar with which the user can interact to scroll the content.
|
||||
* - `track` styles the area surrounding the `scrollbar`.
|
||||
*
|
||||
* ```js
|
||||
* classNames: {
|
||||
* // defaults
|
||||
* content: 'simplebar-content',
|
||||
* scrollContent: 'simplebar-scroll-content',
|
||||
* scrollbar: 'simplebar-scrollbar',
|
||||
* track: 'simplebar-track'
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
classNames: Object,
|
||||
/**
|
||||
* Force the track to be visible (same behaviour as `overflow: scroll`).
|
||||
* Can be `boolean | 'x' | 'y'`, defaults to `false`, which behaves like `overflow: auto`.
|
||||
*/
|
||||
forceVisible: {
|
||||
type: [Boolean, String],
|
||||
validator: function (v) {
|
||||
return typeof v === 'boolean' || v === 'x' || v === 'y';
|
||||
},
|
||||
"default": undefined
|
||||
},
|
||||
/**
|
||||
* Set custom aria-label attribute for users with screen reader.
|
||||
*/
|
||||
ariaLabel: String,
|
||||
/**
|
||||
* Set custom tabIndex attribute.
|
||||
*/
|
||||
tabIndex: Number,
|
||||
/**
|
||||
* Activate RTL support by passing `'rtl'`.
|
||||
* You will also need a css rule with `direction: rtl`.
|
||||
*/
|
||||
direction: {
|
||||
type: String,
|
||||
validator: function (v) { return v === 'ltr' || v === 'rtl'; }
|
||||
},
|
||||
/**
|
||||
* Define the delay until the scrollbar hides. Has no effect if `autoHide` is `false`.
|
||||
* Default value is `1000`.
|
||||
*/
|
||||
timeout: Number,
|
||||
/**
|
||||
* Controls the click on track behaviour.
|
||||
* Default to `true`.
|
||||
*/
|
||||
clickOnTrack: { type: Boolean, "default": undefined },
|
||||
/**
|
||||
* Controls the min size of the scrollbar in `px`.
|
||||
* Default is `25`.
|
||||
*/
|
||||
scrollbarMinSize: Number,
|
||||
/**
|
||||
* Controls the max size of the scrollbar in `px`.
|
||||
* Default is `0` (no max size).
|
||||
*/
|
||||
scrollbarMaxSize: Number
|
||||
},
|
||||
// @ts-ignore
|
||||
emits: ['scroll'],
|
||||
/**
|
||||
* @returns {{ SimpleBar?: SimpleBar; scrollElement?: HTMLDivElement; contentElement?: HTMLDivElement }}
|
||||
*/
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
mounted: function () {
|
||||
// @ts-ignore (`getOptions` needs to be added to the type definition file)
|
||||
var options = SimpleBarCore.getOptions(this.$refs.element.attributes);
|
||||
for (var _i = 0, _a = Object.entries(this.$props); _i < _a.length; _i++) {
|
||||
var _b = _a[_i], key = _b[0], value = _b[1];
|
||||
if (value != undefined && typeof value !== 'function')
|
||||
options[key] = value;
|
||||
}
|
||||
// @ts-ignore (unable to type cast `$refs`)
|
||||
this.SimpleBar = new SimpleBarCore(this.$refs.element, options);
|
||||
// @ts-ignore (unable to type cast `$refs`)
|
||||
this.scrollElement = this.$refs.scrollElement;
|
||||
// @ts-ignore (unable to type cast `$refs`)
|
||||
this.contentElement = this.$refs.contentElement;
|
||||
}
|
||||
},
|
||||
_a[lifecycleEventNames.beforeUnmount] = function () {
|
||||
var _a;
|
||||
// unMount is not present in types package https://github.com/Grsmto/simplebar/blob/6125d4ac0897c02a82432441aa3bae5e6c6ccb87/packages/simplebar/src/simplebar.js#L925
|
||||
// @ts-ignore
|
||||
(_a = this.SimpleBar) === null || _a === void 0 ? void 0 : _a.unMount();
|
||||
// @ts-ignore
|
||||
this.SimpleBar = undefined;
|
||||
},
|
||||
_a.methods = {
|
||||
recalculate: function () {
|
||||
var _a;
|
||||
// @ts-ignore
|
||||
(_a = this.SimpleBar) === null || _a === void 0 ? void 0 : _a.recalculate();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Note that createElement argument is only provided in <=vue@2.7.x,
|
||||
* in other versions it's a context object that we do not use.
|
||||
*/
|
||||
_a.render = function (createElement) {
|
||||
var _this = this;
|
||||
return renderFn({
|
||||
h: typeof createElement === 'function' ? createElement : vueDemi.h,
|
||||
// @ts-ignore
|
||||
emit: function () {
|
||||
var args = [];
|
||||
for (var _i = 0; _i < arguments.length; _i++) {
|
||||
args[_i] = arguments[_i];
|
||||
}
|
||||
return _this.$emit.apply(_this, args);
|
||||
},
|
||||
// @ts-ignore
|
||||
slots: vueDemi.isVue3 ? this.$slots : this.$scopedSlots,
|
||||
props: this.$props
|
||||
});
|
||||
},
|
||||
_a));
|
||||
|
||||
return simplebar;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=simplebar-vue.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+1
@@ -0,0 +1 @@
|
||||
[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:' ';display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:'';background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export declare const lifecycleEventNames: {
|
||||
beforeUnmount: string;
|
||||
unmount: string;
|
||||
};
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
#!/bin/sh
|
||||
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
||||
|
||||
case `uname` in
|
||||
*CYGWIN*|*MINGW*|*MSYS*)
|
||||
if command -v cygpath > /dev/null 2>&1; then
|
||||
basedir=`cygpath -w "$basedir"`
|
||||
fi
|
||||
;;
|
||||
esac
|
||||
|
||||
if [ -x "$basedir/node" ]; then
|
||||
exec "$basedir/node" "$basedir/../vue-demi/bin/vue-demi-fix.js" "$@"
|
||||
else
|
||||
exec node "$basedir/../vue-demi/bin/vue-demi-fix.js" "$@"
|
||||
fi
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@ECHO off
|
||||
GOTO start
|
||||
:find_dp0
|
||||
SET dp0=%~dp0
|
||||
EXIT /b
|
||||
:start
|
||||
SETLOCAL
|
||||
CALL :find_dp0
|
||||
|
||||
IF EXIST "%dp0%\node.exe" (
|
||||
SET "_prog=%dp0%\node.exe"
|
||||
) ELSE (
|
||||
SET "_prog=node"
|
||||
SET PATHEXT=%PATHEXT:;.JS;=;%
|
||||
)
|
||||
|
||||
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\vue-demi\bin\vue-demi-fix.js" %*
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
#!/usr/bin/env pwsh
|
||||
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
|
||||
|
||||
$exe=""
|
||||
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
|
||||
# Fix case when both the Windows and Linux builds of Node
|
||||
# are installed in the same directory
|
||||
$exe=".exe"
|
||||
}
|
||||
$ret=0
|
||||
if (Test-Path "$basedir/node$exe") {
|
||||
# Support pipeline input
|
||||
if ($MyInvocation.ExpectingInput) {
|
||||
$input | & "$basedir/node$exe" "$basedir/../vue-demi/bin/vue-demi-fix.js" $args
|
||||
} else {
|
||||
& "$basedir/node$exe" "$basedir/../vue-demi/bin/vue-demi-fix.js" $args
|
||||
}
|
||||
$ret=$LASTEXITCODE
|
||||
} else {
|
||||
# Support pipeline input
|
||||
if ($MyInvocation.ExpectingInput) {
|
||||
$input | & "node$exe" "$basedir/../vue-demi/bin/vue-demi-fix.js" $args
|
||||
} else {
|
||||
& "node$exe" "$basedir/../vue-demi/bin/vue-demi-fix.js" $args
|
||||
}
|
||||
$ret=$LASTEXITCODE
|
||||
}
|
||||
exit $ret
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
#!/bin/sh
|
||||
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
||||
|
||||
case `uname` in
|
||||
*CYGWIN*|*MINGW*|*MSYS*)
|
||||
if command -v cygpath > /dev/null 2>&1; then
|
||||
basedir=`cygpath -w "$basedir"`
|
||||
fi
|
||||
;;
|
||||
esac
|
||||
|
||||
if [ -x "$basedir/node" ]; then
|
||||
exec "$basedir/node" "$basedir/../vue-demi/bin/vue-demi-switch.js" "$@"
|
||||
else
|
||||
exec node "$basedir/../vue-demi/bin/vue-demi-switch.js" "$@"
|
||||
fi
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
@ECHO off
|
||||
GOTO start
|
||||
:find_dp0
|
||||
SET dp0=%~dp0
|
||||
EXIT /b
|
||||
:start
|
||||
SETLOCAL
|
||||
CALL :find_dp0
|
||||
|
||||
IF EXIST "%dp0%\node.exe" (
|
||||
SET "_prog=%dp0%\node.exe"
|
||||
) ELSE (
|
||||
SET "_prog=node"
|
||||
SET PATHEXT=%PATHEXT:;.JS;=;%
|
||||
)
|
||||
|
||||
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\vue-demi\bin\vue-demi-switch.js" %*
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
#!/usr/bin/env pwsh
|
||||
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
|
||||
|
||||
$exe=""
|
||||
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
|
||||
# Fix case when both the Windows and Linux builds of Node
|
||||
# are installed in the same directory
|
||||
$exe=".exe"
|
||||
}
|
||||
$ret=0
|
||||
if (Test-Path "$basedir/node$exe") {
|
||||
# Support pipeline input
|
||||
if ($MyInvocation.ExpectingInput) {
|
||||
$input | & "$basedir/node$exe" "$basedir/../vue-demi/bin/vue-demi-switch.js" $args
|
||||
} else {
|
||||
& "$basedir/node$exe" "$basedir/../vue-demi/bin/vue-demi-switch.js" $args
|
||||
}
|
||||
$ret=$LASTEXITCODE
|
||||
} else {
|
||||
# Support pipeline input
|
||||
if ($MyInvocation.ExpectingInput) {
|
||||
$input | & "node$exe" "$basedir/../vue-demi/bin/vue-demi-switch.js" $args
|
||||
} else {
|
||||
& "node$exe" "$basedir/../vue-demi/bin/vue-demi-switch.js" $args
|
||||
}
|
||||
$ret=$LASTEXITCODE
|
||||
}
|
||||
exit $ret
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020-present, Anthony Fu
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+228
@@ -0,0 +1,228 @@
|
||||
<p align="center">
|
||||
<img src="https://github.com/vueuse/vue-demi/blob/main/assets/banner.png?raw=true" width="600"/>
|
||||
<br>
|
||||
<a href='https://www.npmjs.com/package/vue-demi'><img src='https://img.shields.io/npm/v/vue-demi?color=42b883' alt='npm'></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<b>Vue Demi</b> (<i>half</i> in French) is a developing utility<br> allows you to write <b>Universal Vue Libraries</b> for Vue 2 & 3<br>
|
||||
<i>See more details in <a href='https://antfu.me/posts/make-libraries-working-with-vue-2-and-3'>this blog post</a></i>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<br>
|
||||
|
||||
## Strategies
|
||||
|
||||
- `<=2.6`: exports from `vue` + `@vue/composition-api` with plugin auto installing.
|
||||
- `2.7`: exports from `vue` (Composition API is built-in in Vue 2.7).
|
||||
- `>=3.0`: exports from `vue`, with polyfill of Vue 2's `set` and `del` API.
|
||||
|
||||
## Usage
|
||||
|
||||
Install this as your plugin's dependency:
|
||||
|
||||
```bash
|
||||
npm i vue-demi
|
||||
# or
|
||||
yarn add vue-demi
|
||||
# or
|
||||
pnpm i vue-demi
|
||||
```
|
||||
|
||||
Add `vue` and `@vue/composition-api` to your plugin's peer dependencies to specify what versions you support.
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"dependencies": {
|
||||
"vue-demi": "latest"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^2.0.0 || >=3.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue": "^3.0.0" // or "^2.6.0" base on your preferred working environment
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Import everything related to Vue from it, it will redirect to `vue@2` + `@vue/composition-api` or `vue@3` based on users' environments.
|
||||
|
||||
```ts
|
||||
import { ref, reactive, defineComponent } from 'vue-demi'
|
||||
```
|
||||
|
||||
Publish your plugin and all is done!
|
||||
|
||||
> When using with [Vite](https://vitejs.dev), you will need to opt-out the pre-bundling to get `vue-demi` work properly by
|
||||
> ```js
|
||||
> // vite.config.js
|
||||
> export default defineConfig({
|
||||
> optimizeDeps: {
|
||||
> exclude: ['vue-demi']
|
||||
> }
|
||||
> })
|
||||
> ```
|
||||
|
||||
### Extra APIs
|
||||
|
||||
`Vue Demi` provides extra APIs to help distinguish users' environments and to do some version-specific logic.
|
||||
|
||||
### `isVue2` `isVue3`
|
||||
|
||||
```ts
|
||||
import { isVue2, isVue3 } from 'vue-demi'
|
||||
|
||||
if (isVue2) {
|
||||
// Vue 2 only
|
||||
} else {
|
||||
// Vue 3 only
|
||||
}
|
||||
```
|
||||
|
||||
### `Vue2`
|
||||
|
||||
To avoid bringing in all the tree-shakable modules, we provide a `Vue2` export to support access to Vue 2's global API. (See [#41](https://github.com/vueuse/vue-demi/issues/41).)
|
||||
|
||||
```ts
|
||||
import { Vue2 } from 'vue-demi'
|
||||
|
||||
if (Vue2) {
|
||||
Vue2.config.ignoredElements.push('x-foo')
|
||||
}
|
||||
```
|
||||
|
||||
### `install()`
|
||||
|
||||
Composition API in Vue 2 is provided as a plugin and needs to be installed on the Vue instance before using. Normally, `vue-demi` will try to install it automatically. For some usages where you might need to ensure the plugin gets installed correctly, the `install()` API is exposed to as a safe version of `Vue.use(CompositionAPI)`. `install()` in the Vue 3 environment will be an empty function (no-op).
|
||||
|
||||
```ts
|
||||
import { install } from 'vue-demi'
|
||||
|
||||
install()
|
||||
```
|
||||
|
||||
## CLI
|
||||
|
||||
### Manually Switch Versions
|
||||
|
||||
To explicitly switch the redirecting version, you can use these commands in your project's root.
|
||||
|
||||
```bash
|
||||
npx vue-demi-switch 2
|
||||
# or
|
||||
npx vue-demi-switch 3
|
||||
```
|
||||
|
||||
### Package Aliasing
|
||||
|
||||
If you would like to import `vue` under an alias, you can use the following command
|
||||
|
||||
```bash
|
||||
npx vue-demi-switch 2 vue2
|
||||
# or
|
||||
npx vue-demi-switch 3 vue3
|
||||
```
|
||||
|
||||
Then `vue-demi` will redirect APIs from the alias name you specified, for example:
|
||||
|
||||
```ts
|
||||
import * as Vue from 'vue3'
|
||||
|
||||
var isVue2 = false
|
||||
var isVue3 = true
|
||||
var Vue2 = undefined
|
||||
|
||||
export * from 'vue3'
|
||||
export {
|
||||
Vue,
|
||||
Vue2,
|
||||
isVue2,
|
||||
isVue3,
|
||||
}
|
||||
```
|
||||
|
||||
### Auto Fix
|
||||
|
||||
If the `postinstall` hook doesn't get triggered or you have updated the Vue version, try to run the following command to resolve the redirecting.
|
||||
|
||||
```bash
|
||||
npx vue-demi-fix
|
||||
```
|
||||
|
||||
### Isomorphic Testings
|
||||
|
||||
You can support testing for both versions by adding npm alias in your dev dependencies. For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"test:2": "vue-demi-switch 2 vue2 && jest",
|
||||
"test:3": "vue-demi-switch 3 && jest",
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue": "^3.0.0",
|
||||
"vue2": "npm:vue@2"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"test:2": "vue-demi-switch 2 && jest",
|
||||
"test:3": "vue-demi-switch 3 vue3 && jest",
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue": "^2.6.0",
|
||||
"vue3": "npm:vue@3"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
See [examples](./examples).
|
||||
|
||||
## Who is using this?
|
||||
|
||||
- [VueUse](https://github.com/vueuse/vueuse) - Collection of Composition API utils
|
||||
- [@vue/apollo-composable](https://github.com/vuejs/vue-apollo/tree/v4/packages/vue-apollo-composable) - Apollo GraphQL functions for Vue Composition API
|
||||
- [vuelidate](https://github.com/vuelidate/vuelidate) - Simple, lightweight model-based validation
|
||||
- [vue-composition-test-utils](https://github.com/ariesjia/vue-composition-test-utils) - Simple vue composition api unit test utilities
|
||||
- [vue-use-stripe](https://github.com/frandiox/vue-use-stripe) - Stripe Elements wrapper for Vue.js
|
||||
- [@opd/g2plot-vue](https://github.com/open-data-plan/g2plot-vue) - G2plot for vue
|
||||
- [vue-echarts](https://github.com/ecomfe/vue-echarts) - Vue.js component for Apache ECharts.
|
||||
- [fluent-vue](https://github.com/Demivan/fluent-vue) - Vue.js integration for [Fluent.js](https://github.com/projectfluent/fluent.js) - JavaScript implementation of [Project Fluent](https://projectfluent.org)
|
||||
- [vue-datatable-url-sync](https://github.com/socotecio/vue-datatable-url-sync) - Synchronize datatable options and filters with the url to keep user preference even after refresh or navigation
|
||||
- [vue-insta-stories](https://github.com/UnevenSoftware/vue-insta-stories) - Instagram stories in your vue projects.
|
||||
- [vue-tiny-validate](https://github.com/FrontLabsOfficial/vue-tiny-validate) - Tiny Vue Validate Composition
|
||||
- [v-perfect-signature](https://github.com/wobsoriano/v-perfect-signature) - Pressure-sensitive signature drawing for Vue 2 and 3
|
||||
- [vue-winbox](https://github.com/wobsoriano/vue-winbox) - A wrapper component for WinBox.js that adds the ability to mount Vue components.
|
||||
- [vue-word-highlighter](https://github.com/kawamataryo/vue-word-highlighter) - The word highlighter library for Vue 2 and Vue 3
|
||||
- [vue-chart-3](https://github.com/victorgarciaesgi/vue-chart-3) - Vue.js component for Chart.js
|
||||
- [json-editor-vue](https://github.com/cloydlau/json-editor-vue) - JSON editor & viewer for Vue 2 and 3.
|
||||
- [kidar-echarts](https://github.com/kidarjs/kidar-echarts) - A simpler echarts component for Vue 2 and 3.
|
||||
- [vue3-sketch-ruler](https://github.com/kakajun/vue3-sketch-ruler) - The zoom operation used for page presentation for Vue 2 and 3( Replace render function with template )
|
||||
- [vue-rough-notation](https://github.com/Leecason/vue-rough-notation) - RoughNotation wrapper component for Vue 2 and 3.
|
||||
- [vue-request](https://github.com/AttoJS/vue-request) - Vue composition API for data fetching, supports SWR, polling, error retry, cache request, pagination, etc.
|
||||
- [vue3-lazyload](https://github.com/murongg/vue3-lazyload) - A vue3.x image lazyload plugin.
|
||||
- [vue-codemirror6](https://github.com/logue/vue-codemirror6) - CodeMirror6 component for Vue2 and 3.
|
||||
> open a PR to add your library ;)
|
||||
|
||||
## Underhood
|
||||
|
||||
See [the blog post](https://antfu.me/posts/make-libraries-working-with-vue-2-and-3/#-introducing-vue-demi).
|
||||
|
||||
## License
|
||||
|
||||
MIT License © 2020 [Anthony Fu](https://github.com/antfu)
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
#!/usr/bin/env node
|
||||
'use strict'
|
||||
require('../scripts/postinstall')
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
#!/usr/bin/env node
|
||||
'use strict'
|
||||
require('../scripts/switch-cli')
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
var Vue = require('vue')
|
||||
|
||||
Object.keys(Vue).forEach(function(key) {
|
||||
exports[key] = Vue[key]
|
||||
})
|
||||
|
||||
exports.set = function(target, key, val) {
|
||||
if (Array.isArray(target)) {
|
||||
target.length = Math.max(target.length, key)
|
||||
target.splice(key, 1, val)
|
||||
return val
|
||||
}
|
||||
target[key] = val
|
||||
return val
|
||||
}
|
||||
|
||||
exports.del = function(target, key) {
|
||||
if (Array.isArray(target)) {
|
||||
target.splice(key, 1)
|
||||
return
|
||||
}
|
||||
delete target[key]
|
||||
}
|
||||
|
||||
exports.Vue = Vue
|
||||
exports.Vue2 = undefined
|
||||
exports.isVue2 = false
|
||||
exports.isVue3 = true
|
||||
exports.install = function(){}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import * as Vue from 'vue'
|
||||
declare const isVue2: boolean
|
||||
declare const isVue3: boolean
|
||||
declare const Vue2: any
|
||||
declare const install: (vue?: any) => void
|
||||
/**
|
||||
* @deprecated To avoid bringing in all the tree-shakable modules, this API has been deprecated. Use `Vue2` or named exports instead.
|
||||
* Refer to https://github.com/vueuse/vue-demi/issues/41
|
||||
*/
|
||||
declare const V: typeof Vue
|
||||
|
||||
export function set<T>(target: any, key: any, val: T): T
|
||||
export function del(target: any, key: any): void
|
||||
|
||||
export * from 'vue'
|
||||
export {
|
||||
V as Vue,
|
||||
Vue2,
|
||||
isVue2,
|
||||
isVue3,
|
||||
install,
|
||||
}
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
|
||||
if (VueDemi.install) {
|
||||
return VueDemi
|
||||
}
|
||||
if (!Vue) {
|
||||
console.error('[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.')
|
||||
return VueDemi
|
||||
}
|
||||
|
||||
// Vue 2.7
|
||||
if (Vue.version.slice(0, 4) === '2.7.') {
|
||||
for (var key in Vue) {
|
||||
VueDemi[key] = Vue[key]
|
||||
}
|
||||
VueDemi.isVue2 = true
|
||||
VueDemi.isVue3 = false
|
||||
VueDemi.install = function () {}
|
||||
VueDemi.Vue = Vue
|
||||
VueDemi.Vue2 = Vue
|
||||
VueDemi.version = Vue.version
|
||||
VueDemi.warn = Vue.util.warn
|
||||
function createApp(rootComponent, rootProps) {
|
||||
var vm
|
||||
var provide = {}
|
||||
var app = {
|
||||
config: Vue.config,
|
||||
use: Vue.use.bind(Vue),
|
||||
mixin: Vue.mixin.bind(Vue),
|
||||
component: Vue.component.bind(Vue),
|
||||
provide: function (key, value) {
|
||||
provide[key] = value
|
||||
return this
|
||||
},
|
||||
directive: function (name, dir) {
|
||||
if (dir) {
|
||||
Vue.directive(name, dir)
|
||||
return app
|
||||
} else {
|
||||
return Vue.directive(name)
|
||||
}
|
||||
},
|
||||
mount: function (el, hydrating) {
|
||||
if (!vm) {
|
||||
vm = new Vue(Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }))
|
||||
vm.$mount(el, hydrating)
|
||||
return vm
|
||||
} else {
|
||||
return vm
|
||||
}
|
||||
},
|
||||
unmount: function () {
|
||||
if (vm) {
|
||||
vm.$destroy()
|
||||
vm = undefined
|
||||
}
|
||||
},
|
||||
}
|
||||
return app
|
||||
}
|
||||
VueDemi.createApp = createApp
|
||||
}
|
||||
// Vue 2.6.x
|
||||
else if (Vue.version.slice(0, 2) === '2.') {
|
||||
if (VueCompositionAPI) {
|
||||
for (var key in VueCompositionAPI) {
|
||||
VueDemi[key] = VueCompositionAPI[key]
|
||||
}
|
||||
VueDemi.isVue2 = true
|
||||
VueDemi.isVue3 = false
|
||||
VueDemi.install = function () {}
|
||||
VueDemi.Vue = Vue
|
||||
VueDemi.Vue2 = Vue
|
||||
VueDemi.version = Vue.version
|
||||
} else {
|
||||
console.error('[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.')
|
||||
}
|
||||
}
|
||||
// Vue 3
|
||||
else if (Vue.version.slice(0, 2) === '3.') {
|
||||
for (var key in Vue) {
|
||||
VueDemi[key] = Vue[key]
|
||||
}
|
||||
VueDemi.isVue2 = false
|
||||
VueDemi.isVue3 = true
|
||||
VueDemi.install = function () {}
|
||||
VueDemi.Vue = Vue
|
||||
VueDemi.Vue2 = undefined
|
||||
VueDemi.version = Vue.version
|
||||
VueDemi.set = function (target, key, val) {
|
||||
if (Array.isArray(target)) {
|
||||
target.length = Math.max(target.length, key)
|
||||
target.splice(key, 1, val)
|
||||
return val
|
||||
}
|
||||
target[key] = val
|
||||
return val
|
||||
}
|
||||
VueDemi.del = function (target, key) {
|
||||
if (Array.isArray(target)) {
|
||||
target.splice(key, 1)
|
||||
return
|
||||
}
|
||||
delete target[key]
|
||||
}
|
||||
} else {
|
||||
console.error('[vue-demi] Vue version ' + Vue.version + ' is unsupported.')
|
||||
}
|
||||
return VueDemi
|
||||
})(
|
||||
(this.VueDemi = this.VueDemi || (typeof VueDemi !== 'undefined' ? VueDemi : {})),
|
||||
this.Vue || (typeof Vue !== 'undefined' ? Vue : undefined),
|
||||
this.VueCompositionAPI || (typeof VueCompositionAPI !== 'undefined' ? VueCompositionAPI : undefined)
|
||||
);
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import * as Vue from 'vue'
|
||||
|
||||
var isVue2 = false
|
||||
var isVue3 = true
|
||||
var Vue2 = undefined
|
||||
|
||||
function install() {}
|
||||
|
||||
export function set(target, key, val) {
|
||||
if (Array.isArray(target)) {
|
||||
target.length = Math.max(target.length, key)
|
||||
target.splice(key, 1, val)
|
||||
return val
|
||||
}
|
||||
target[key] = val
|
||||
return val
|
||||
}
|
||||
|
||||
export function del(target, key) {
|
||||
if (Array.isArray(target)) {
|
||||
target.splice(key, 1)
|
||||
return
|
||||
}
|
||||
delete target[key]
|
||||
}
|
||||
|
||||
export * from 'vue'
|
||||
export {
|
||||
Vue,
|
||||
Vue2,
|
||||
isVue2,
|
||||
isVue3,
|
||||
install,
|
||||
}
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
var VueModule = require('vue')
|
||||
|
||||
// get the real Vue https://github.com/vueuse/vue-demi/issues/192
|
||||
var Vue = VueModule.default || VueModule
|
||||
|
||||
exports.Vue = Vue
|
||||
exports.Vue2 = Vue
|
||||
exports.isVue2 = true
|
||||
exports.isVue3 = false
|
||||
exports.install = function () {}
|
||||
exports.warn = Vue.util.warn
|
||||
|
||||
// createApp polyfill
|
||||
exports.createApp = function (rootComponent, rootProps) {
|
||||
var vm
|
||||
var provide = {}
|
||||
var app = {
|
||||
config: Vue.config,
|
||||
use: Vue.use.bind(Vue),
|
||||
mixin: Vue.mixin.bind(Vue),
|
||||
component: Vue.component.bind(Vue),
|
||||
provide: function (key, value) {
|
||||
provide[key] = value
|
||||
return this
|
||||
},
|
||||
directive: function (name, dir) {
|
||||
if (dir) {
|
||||
Vue.directive(name, dir)
|
||||
return app
|
||||
} else {
|
||||
return Vue.directive(name)
|
||||
}
|
||||
},
|
||||
mount: function (el, hydrating) {
|
||||
if (!vm) {
|
||||
vm = new Vue(Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }))
|
||||
vm.$mount(el, hydrating)
|
||||
return vm
|
||||
} else {
|
||||
return vm
|
||||
}
|
||||
},
|
||||
unmount: function () {
|
||||
if (vm) {
|
||||
vm.$destroy()
|
||||
vm = undefined
|
||||
}
|
||||
},
|
||||
}
|
||||
return app
|
||||
}
|
||||
|
||||
Object.keys(VueModule).forEach(function (key) {
|
||||
exports[key] = VueModule[key]
|
||||
})
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
import Vue from 'vue'
|
||||
import type { PluginFunction, PluginObject, VueConstructor, Directive, InjectionKey, Component } from 'vue'
|
||||
|
||||
declare const isVue2: boolean
|
||||
declare const isVue3: boolean
|
||||
declare const Vue2: typeof Vue | undefined
|
||||
declare const version: string
|
||||
declare const install: (vue?: typeof Vue) => void
|
||||
export declare function warn(msg: string, vm?: Component | null): void
|
||||
/**
|
||||
* @deprecated To avoid bringing in all the tree-shakable modules, this API has been deprecated. Use `Vue2` or named exports instead.
|
||||
* Refer to https://github.com/vueuse/vue-demi/issues/41
|
||||
*/
|
||||
declare const V: typeof Vue
|
||||
|
||||
// accept no generic because Vue 3 doesn't accept any
|
||||
// https://github.com/vuejs/vue-next/pull/2758/
|
||||
export declare type Plugin = PluginObject<any> | PluginFunction<any>
|
||||
export type { VNode } from 'vue'
|
||||
export * from 'vue'
|
||||
export { V as Vue, Vue2, isVue2, isVue3, version, install }
|
||||
|
||||
// #region createApp polyfill
|
||||
export interface App<T = any> {
|
||||
config: VueConstructor['config']
|
||||
use: VueConstructor['use']
|
||||
mixin: VueConstructor['mixin']
|
||||
component: VueConstructor['component']
|
||||
directive(name: string): Directive | undefined
|
||||
directive(name: string, directive: Directive): this
|
||||
provide<T>(key: InjectionKey<T> | string, value: T): this
|
||||
mount: Vue['$mount']
|
||||
unmount: Vue['$destroy']
|
||||
}
|
||||
export declare function createApp(rootComponent: any, rootProps?: any): App
|
||||
// #endregion
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
var isVue2 = true
|
||||
var isVue3 = false
|
||||
var Vue2 = Vue
|
||||
var warn = Vue.util.warn
|
||||
|
||||
function install() {}
|
||||
|
||||
// createApp polyfill
|
||||
export function createApp(rootComponent, rootProps) {
|
||||
var vm
|
||||
var provide = {}
|
||||
var app = {
|
||||
config: Vue.config,
|
||||
use: Vue.use.bind(Vue),
|
||||
mixin: Vue.mixin.bind(Vue),
|
||||
component: Vue.component.bind(Vue),
|
||||
provide: function (key, value) {
|
||||
provide[key] = value
|
||||
return this
|
||||
},
|
||||
directive: function (name, dir) {
|
||||
if (dir) {
|
||||
Vue.directive(name, dir)
|
||||
return app
|
||||
} else {
|
||||
return Vue.directive(name)
|
||||
}
|
||||
},
|
||||
mount: function (el, hydrating) {
|
||||
if (!vm) {
|
||||
vm = new Vue(Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }))
|
||||
vm.$mount(el, hydrating)
|
||||
return vm
|
||||
} else {
|
||||
return vm
|
||||
}
|
||||
},
|
||||
unmount: function () {
|
||||
if (vm) {
|
||||
vm.$destroy()
|
||||
vm = undefined
|
||||
}
|
||||
},
|
||||
}
|
||||
return app
|
||||
}
|
||||
|
||||
export { Vue, Vue2, isVue2, isVue3, install, warn }
|
||||
export * from 'vue'
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
var Vue = require('vue')
|
||||
var VueCompositionAPI = require('@vue/composition-api')
|
||||
|
||||
function install(_vue) {
|
||||
var vueLib = _vue || Vue
|
||||
if (vueLib && 'default' in vueLib) {
|
||||
vueLib = vueLib.default
|
||||
}
|
||||
|
||||
if (vueLib && !vueLib['__composition_api_installed__']) {
|
||||
if (VueCompositionAPI && 'default' in VueCompositionAPI)
|
||||
vueLib.use(VueCompositionAPI.default)
|
||||
else if (VueCompositionAPI)
|
||||
vueLib.use(VueCompositionAPI)
|
||||
}
|
||||
}
|
||||
|
||||
install(Vue)
|
||||
|
||||
Object.keys(VueCompositionAPI).forEach(function(key) {
|
||||
exports[key] = VueCompositionAPI[key]
|
||||
})
|
||||
|
||||
exports.Vue = Vue
|
||||
exports.Vue2 = Vue
|
||||
exports.isVue2 = true
|
||||
exports.isVue3 = false
|
||||
exports.install = install
|
||||
exports.version = Vue.version
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import Vue from 'vue'
|
||||
import type { PluginFunction, PluginObject } from 'vue'
|
||||
declare const isVue2: boolean
|
||||
declare const isVue3: boolean
|
||||
declare const Vue2: typeof Vue | undefined
|
||||
declare const version: string
|
||||
declare const install: (vue?: typeof Vue) => void
|
||||
/**
|
||||
* @deprecated To avoid bringing in all the tree-shakable modules, this API has been deprecated. Use `Vue2` or named exports instead.
|
||||
* Refer to https://github.com/vueuse/vue-demi/issues/41
|
||||
*/
|
||||
declare const V: typeof Vue
|
||||
|
||||
/**
|
||||
* DebuggerEvent is a Vue 3 development only feature. This type cannot exist in Vue 2.
|
||||
*/
|
||||
export declare type DebuggerEvent = never
|
||||
|
||||
// accept no generic because Vue 3 doesn't accept any
|
||||
// https://github.com/vuejs/vue-next/pull/2758/
|
||||
export declare type Plugin = PluginObject<any> | PluginFunction<any>
|
||||
export type { VNode } from 'vue'
|
||||
export * from '@vue/composition-api'
|
||||
export {
|
||||
V as Vue,
|
||||
Vue2,
|
||||
isVue2,
|
||||
isVue3,
|
||||
version,
|
||||
install,
|
||||
}
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import Vue from 'vue'
|
||||
import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api.mjs'
|
||||
|
||||
function install(_vue) {
|
||||
_vue = _vue || Vue
|
||||
if (_vue && !_vue['__composition_api_installed__'])
|
||||
_vue.use(VueCompositionAPI)
|
||||
}
|
||||
|
||||
install(Vue)
|
||||
|
||||
var isVue2 = true
|
||||
var isVue3 = false
|
||||
var Vue2 = Vue
|
||||
var version = Vue.version
|
||||
|
||||
/**VCA-EXPORTS**/
|
||||
export * from '@vue/composition-api/dist/vue-composition-api.mjs'
|
||||
/**VCA-EXPORTS**/
|
||||
|
||||
export {
|
||||
Vue,
|
||||
Vue2,
|
||||
isVue2,
|
||||
isVue3,
|
||||
version,
|
||||
install,
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
var Vue = require('vue')
|
||||
|
||||
Object.keys(Vue).forEach(function(key) {
|
||||
exports[key] = Vue[key]
|
||||
})
|
||||
|
||||
exports.set = function(target, key, val) {
|
||||
if (Array.isArray(target)) {
|
||||
target.length = Math.max(target.length, key)
|
||||
target.splice(key, 1, val)
|
||||
return val
|
||||
}
|
||||
target[key] = val
|
||||
return val
|
||||
}
|
||||
|
||||
exports.del = function(target, key) {
|
||||
if (Array.isArray(target)) {
|
||||
target.splice(key, 1)
|
||||
return
|
||||
}
|
||||
delete target[key]
|
||||
}
|
||||
|
||||
exports.Vue = Vue
|
||||
exports.Vue2 = undefined
|
||||
exports.isVue2 = false
|
||||
exports.isVue3 = true
|
||||
exports.install = function(){}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import * as Vue from 'vue'
|
||||
declare const isVue2: boolean
|
||||
declare const isVue3: boolean
|
||||
declare const Vue2: any
|
||||
declare const install: (vue?: any) => void
|
||||
/**
|
||||
* @deprecated To avoid bringing in all the tree-shakable modules, this API has been deprecated. Use `Vue2` or named exports instead.
|
||||
* Refer to https://github.com/vueuse/vue-demi/issues/41
|
||||
*/
|
||||
declare const V: typeof Vue
|
||||
|
||||
export function set<T>(target: any, key: any, val: T): T
|
||||
export function del(target: any, key: any): void
|
||||
|
||||
export * from 'vue'
|
||||
export {
|
||||
V as Vue,
|
||||
Vue2,
|
||||
isVue2,
|
||||
isVue3,
|
||||
install,
|
||||
}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import * as Vue from 'vue'
|
||||
|
||||
var isVue2 = false
|
||||
var isVue3 = true
|
||||
var Vue2 = undefined
|
||||
|
||||
function install() {}
|
||||
|
||||
export function set(target, key, val) {
|
||||
if (Array.isArray(target)) {
|
||||
target.length = Math.max(target.length, key)
|
||||
target.splice(key, 1, val)
|
||||
return val
|
||||
}
|
||||
target[key] = val
|
||||
return val
|
||||
}
|
||||
|
||||
export function del(target, key) {
|
||||
if (Array.isArray(target)) {
|
||||
target.splice(key, 1)
|
||||
return
|
||||
}
|
||||
delete target[key]
|
||||
}
|
||||
|
||||
export * from 'vue'
|
||||
export {
|
||||
Vue,
|
||||
Vue2,
|
||||
isVue2,
|
||||
isVue3,
|
||||
install,
|
||||
}
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "vue-demi",
|
||||
"version": "0.13.11",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"repository": "https://github.com/antfu/vue-demi.git",
|
||||
"funding": "https://github.com/sponsors/antfu",
|
||||
"license": "MIT",
|
||||
"author": "Anthony Fu <anthonyfu117@hotmail.com>",
|
||||
"main": "lib/index.cjs",
|
||||
"jsdelivr": "lib/index.iife.js",
|
||||
"unpkg": "lib/index.iife.js",
|
||||
"module": "lib/index.mjs",
|
||||
"types": "lib/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./lib/index.cjs",
|
||||
"import": "./lib/index.mjs",
|
||||
"browser": "./lib/index.mjs",
|
||||
"types": "./lib/index.d.ts"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"files": [
|
||||
"lib",
|
||||
"bin",
|
||||
"scripts"
|
||||
],
|
||||
"scripts": {
|
||||
"postinstall": "node ./scripts/postinstall.js",
|
||||
"release": "npx bumpp --tag --commit --push && npm publish"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
const { switchVersion, loadModule } = require('./utils')
|
||||
|
||||
const Vue = loadModule('vue')
|
||||
|
||||
if (!Vue || typeof Vue.version !== 'string') {
|
||||
console.warn('[vue-demi] Vue is not found. Please run "npm install vue" to install.')
|
||||
}
|
||||
else if (Vue.version.startsWith('2.7.')) {
|
||||
switchVersion(2.7)
|
||||
}
|
||||
else if (Vue.version.startsWith('2.')) {
|
||||
switchVersion(2)
|
||||
}
|
||||
else if (Vue.version.startsWith('3.')) {
|
||||
switchVersion(3)
|
||||
}
|
||||
else {
|
||||
console.warn(`[vue-demi] Vue version v${Vue.version} is not suppported.`)
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
const { switchVersion } = require('./utils')
|
||||
|
||||
const version = process.argv[2]
|
||||
const vueEntry = process.argv[3] || 'vue'
|
||||
|
||||
if (version === '2.7') {
|
||||
switchVersion(2.7, vueEntry)
|
||||
console.log(`[vue-demi] Switched for Vue 2.7 (entry: "${vueEntry}")`)
|
||||
} else if (version === '2') {
|
||||
switchVersion(2, vueEntry)
|
||||
console.log(`[vue-demi] Switched for Vue 2 (entry: "${vueEntry}")`)
|
||||
} else if (version === '3') {
|
||||
switchVersion(3, vueEntry)
|
||||
console.log(`[vue-demi] Switched for Vue 3 (entry: "${vueEntry}")`)
|
||||
} else {
|
||||
console.warn(`[vue-demi] expecting version "2" or "2.7" or "3" but got "${version}"`)
|
||||
process.exit(1)
|
||||
}
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
const dir = path.resolve(__dirname, '..', 'lib')
|
||||
|
||||
function loadModule(name) {
|
||||
try {
|
||||
return require(name)
|
||||
} catch (e) {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
function copy(name, version, vue) {
|
||||
vue = vue || 'vue'
|
||||
const src = path.join(dir, `v${version}`, name)
|
||||
const dest = path.join(dir, name)
|
||||
let content = fs.readFileSync(src, 'utf-8')
|
||||
content = content.replace(/'vue'/g, `'${vue}'`)
|
||||
// unlink for pnpm, #92
|
||||
try {
|
||||
fs.unlinkSync(dest)
|
||||
} catch (error) { }
|
||||
fs.writeFileSync(dest, content, 'utf-8')
|
||||
}
|
||||
|
||||
function updateVue2API() {
|
||||
const ignoreList = ['version', 'default']
|
||||
const VCA = loadModule('@vue/composition-api')
|
||||
if (!VCA) {
|
||||
console.warn('[vue-demi] Composition API plugin is not found. Please run "npm install @vue/composition-api" to install.')
|
||||
return
|
||||
}
|
||||
|
||||
const exports = Object.keys(VCA).filter(i => !ignoreList.includes(i))
|
||||
|
||||
const esmPath = path.join(dir, 'index.mjs')
|
||||
let content = fs.readFileSync(esmPath, 'utf-8')
|
||||
|
||||
content = content.replace(
|
||||
/\/\*\*VCA-EXPORTS\*\*\/[\s\S]+\/\*\*VCA-EXPORTS\*\*\//m,
|
||||
`/**VCA-EXPORTS**/
|
||||
export { ${exports.join(', ')} } from '@vue/composition-api/dist/vue-composition-api.mjs'
|
||||
/**VCA-EXPORTS**/`
|
||||
)
|
||||
|
||||
fs.writeFileSync(esmPath, content, 'utf-8')
|
||||
|
||||
}
|
||||
|
||||
function switchVersion(version, vue) {
|
||||
copy('index.cjs', version, vue)
|
||||
copy('index.mjs', version, vue)
|
||||
copy('index.d.ts', version, vue)
|
||||
|
||||
if (version === 2)
|
||||
updateVue2API()
|
||||
}
|
||||
|
||||
|
||||
module.exports.loadModule = loadModule
|
||||
module.exports.switchVersion = switchVersion
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"name": "simplebar-vue",
|
||||
"version": "2.4.2",
|
||||
"description": "Vue component for SimpleBar",
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"author": "Piers Olenski",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/grsmto/simplebar.git",
|
||||
"directory": "packages/simplebar-vue"
|
||||
},
|
||||
"main": "dist/simplebar-vue.js",
|
||||
"module": "dist/simplebar-vue.esm.js",
|
||||
"sideEffects": [
|
||||
"*.css"
|
||||
],
|
||||
"types": "dist/index.d.ts",
|
||||
"bugs": "https://github.com/grsmto/simplebar/issues",
|
||||
"homepage": "https://grsmto.github.io/simplebar/",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build": "rollup -c && minify ../simplebar-core/src/simplebar.css > dist/simplebar.min.css && cp simplebar-vue.d.ts dist/simplebar-vue.d.ts",
|
||||
"jest": "jest",
|
||||
"version": "yarn build",
|
||||
"precommit": "lint-staged",
|
||||
"test:2.7": "yarn use-vue:2.7 && yarn jest",
|
||||
"test:3": "yarn use-vue:3 && yarn jest",
|
||||
"test": "yarn test:2.7 && yarn test:3",
|
||||
"use-vue:2.7": "node scripts/swap-vue.js 2.7 && vue-demi-switch 2.7",
|
||||
"use-vue:3": "node scripts/swap-vue.js 3 && vue-demi-switch 3"
|
||||
},
|
||||
"dependencies": {
|
||||
"simplebar-core": "^1.3.2",
|
||||
"vue-demi": "^0.13.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=2.5.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.3",
|
||||
"@vue/compiler-sfc": "^3.2.45",
|
||||
"@vue/composition-api": "^1.7.1",
|
||||
"@vue/test-utils": "^2.2.7",
|
||||
"@vue/test-utils-vue2": "npm:@vue/test-utils@~1",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-jest": "^28.1.0",
|
||||
"eslint-plugin-vue": "^9.8.0",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"rollup-plugin-vue": "^6.0.0",
|
||||
"vue": "^3.2.45",
|
||||
"vue-jest": "^5.0.0-alpha.0",
|
||||
"vue-jest2": "npm:vue-jest@4",
|
||||
"vue-template-compiler2.6": "npm:vue-template-compiler@2.6.14",
|
||||
"vue-template-compiler2.7": "npm:vue-template-compiler@2.7.14",
|
||||
"vue2.7": "npm:vue@2.7.14"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,json}": [
|
||||
"prettier-eslint --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true,
|
||||
"jest": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"gitHead": "46a2c4a8f5b0a4ed66f80dcd4d2a74ee52ce1ff3"
|
||||
}
|
||||
Reference in New Issue
Block a user