@egjs/flicking 4.14.2-beta.2 → 4.16.0-beta.0

package/README.md

@@ -1,179 +1,10 @@
-<h1 align="center" style="max-width: 100%;">
-  <img width="800" alt="Flicking Logo" src="https://naver.github.io/egjs-flicking/images/flicking.svg" style="max-width: 100%;" /><br/>
-  <a href="https://naver.github.io/egjs-flicking/">@egjs/flicking</a>
-</h1>
+# @egjs/flicking (core)
 
-<p align="center" style="line-height: 2;">
-  <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking.svg?style=flat-square&color=007acc&label=version&logo=NPM" alt="version" /></a>
-  <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/flicking.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc" /></a>
-  <a href="https://coveralls.io/github/naver/egjs-flicking?branch=master&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-flicking.svg?style=flat-square&label=%E2%9C%85%20coverage" /></a>
-  <a href="https://deepscan.io/dashboard#view=project&tid=3998&pid=5802&bid=46086"><img src="https://flat.badgen.net/deepscan/grade/team/3998/project/5802/branch/46086" alt="DeepScan grade" /></a>
-</p>
-<p align="center" style="line-height: 2;">
-  <a href="https://github.com/naver/egjs-flicking/graphs/commit-activity">
-<img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/naver/egjs-flicking.svg?color=08CE5D&label=%E2%AC%86%20commits&style=flat-square" /></a>
-  <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/dm/@egjs/flicking.svg?style=flat-square&label=%E2%AC%87%20downloads&color=08CE5D" alt="npm downloads per month" /></a>
-  <a href="https://github.com/naver/egjs-flicking/graphs/contributors" target="_blank"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/naver/egjs-flicking.svg?label=%F0%9F%91%A5%20contributors&style=flat-square&color=08CE5D" /></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/LICENSE" target="_blank"><img alt="GitHub" src="https://img.shields.io/github/license/naver/egjs-flicking.svg?style=flat-square&label=%F0%9F%93%9C%20license&color=08CE5D" /></a>
-</p>
-<p align="center" style="line-height: 2;">
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&logo=Angular&color=dd0031" /></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&logo=React&logoColor=white&color=61dafb" /></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&logo=Vue.js&logoColor=white&color=42b883" /></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&logo=Preact&logoColor=white&color=673ab8" /></a>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md" target="_blank"><img alt="Svelte" src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&logo=svelte&logoColor=white&color=FF3E00" /></a>
-  <img src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript" />
-</p>
+This package hosts the core Flicking library code moved from the repository root `src/` during monorepo migration.
 
-<h3 align="center">
-  <a href="https://naver.github.io/egjs-flicking/">Demo</a> / <a href="https://naver.github.io/egjs-flicking/docs/api/Flicking">Documentation</a> / <a href="https://naver.github.io/egjs/"><img height="20" src="https://naver.github.io/egjs/img/logo.svg"/> Other components</a>
-</h3>
+Structure will be populated in subsequent steps:
+- `src/` — TypeScript sources
+- `sass/` — styles
+- build configs/scripts will be migrated later
 
-<p align="center">
-  <b>Everyday 30 million people experience. It's reliable, flexible and extendable carousel.</b><br />📱💻🖥
-</p>
 
-<p align="center">
-  <b>Supported Frameworks</b><br/>
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/angular.svg" alt="AngularJS" /></a>&nbsp;&nbsp;
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/react.svg" alt="React" /></a>&nbsp;&nbsp;
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" alt="Vue.js" /></a>&nbsp;&nbsp;
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/preact.svg" alt="Preact" /></a>&nbsp;&nbsp;
-  <a href="https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/svelte.svg" alt="Svelte" /></a>
-</p>
-
------
-<table style="table-layout: fixed; overflow-wrap: break-word;">
-  <tbody>
-    <tr>
-      <td><a href="https://codepen.io/egjs/pen/vqYyPO" target="_blank"><img width="240" src="https://user-images.githubusercontent.com/26213435/59833703-a2a07600-9381-11e9-8d3e-b1d2af8b1b96.gif" alt="iPhone demo" style="max-width: 100%;" /></a></td>
-      <td><a href="https://codepen.io/woodneck/pen/ydNvYy" target="_blank"><img width="240" src="https://user-images.githubusercontent.com/26213435/59832836-cf538e00-937f-11e9-9e65-ec43c1bde5de.gif" alt="Music app demo" style="max-width: 100%;" /></a></td>
-      <td rowspan="2" style="vertical-align: middle;"><a href="https://codepen.io/egjs/full/MMYQRE" target="_blank"><img width="480" src="https://user-images.githubusercontent.com/26213435/59832834-cf538e00-937f-11e9-8f3a-97e806bb37b1.gif" alt="Full page demo" style="max-width: 100%;" /></a></td>
-    </tr>
-    <tr>
-      <td colspan="2"><a href="https://codepen.io/egjs/pen/vqYjrr" target="_blank"><img width="480" src="https://user-images.githubusercontent.com/26213435/59832835-cf538e00-937f-11e9-99a5-10f24da4c242.gif" alt="Parallax demo" style="max-width: 100%;" /></a></td>
-    </tr>
-  </tbody>
-</table>
-<h6 align="center">
-  🖱️Click each images to see its source or check our <a href="https://naver.github.io/egjs-flicking/">full demos</a>.
-</h6>
-
-## ✨ Features
-- Use it in a framework you like.
-  - We supports all major JS frameworks like React, Vue, Angular
-- SSR(Server Side Rendering) ready
-  - You can use Flicking at your favorite SSR frameworks like [Next.js](https://nextjs.org/) or [Nuxt.js](https://nuxtjs.org/).
-- Circular(Loop) Mode
-- Ready-to-use plugins you can grab right away.
-  - Autoplay, Fade effect, Parallax effect, ...
-- Restore state like position and active slide with [persist](https://naver.github.io/egjs-persist/)
-- You can make native-scroll like UI with `bound` and `moveType: freeScroll`
-- Supports both Desktop & Mobile
-- Rich API
-- Supports IE9+ with the polyfill
-  - [es6-polyfill](https://cdn.jsdelivr.net/npm/es6-promise@latest/dist/es6-promise.auto.js)
-
-## ⚙️ Installation
-#### npm
-```bash
-$ npm install --save @egjs/flicking
-```
-
-#### CDN
-- jsDelivr: https://cdn.jsdelivr.net/npm/@egjs/flicking/dist/
-- unpkg: https://unpkg.com/@egjs/flicking/dist/
-- cdnjs: https://cdnjs.com/libraries/egjs-flicking
-
-## 🏃 Quick Start
-#### HTML
-Flicking requires minimal structure to initialize properly.
-> You don't need to consider this when using Flicking with the frameworks.
-
-```html
-<div id="my-flicking" class="flicking-viewport">
-  <div class="flicking-camera">
-    <div class="panel"></div>
-    <div class="panel"></div>
-    <div class="panel"></div>
-  </div>
-</div>
-```
-
-#### ES Modules
-```ts
-import Flicking from "@egjs/flicking";
-// import styles
-import "@egjs/flicking/dist/flicking.css"; // Supports IE10+, using CSS flex
-// Or...
-import "@egjs/flicking/dist/flicking.inline.css"; //Supports IE9+, using CSS inline-box
-
-const flicking = new Flicking("#my-flicking", { circular: true });
-```
-
-#### With CDN
-```html
-<!-- Packaged with all dependencies -->
-<script src="https://unpkg.com/@egjs/flicking@4.0.0-beta.4/dist/flicking.pkgd.min.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@egjs/flicking@4.0.0/dist/flicking.css">
-```
-```js
-var flicking = new Flicking("#my-flicking", { circular: true });
-```
-
-## 📦 Packages
-|Package|Version|Description|
-|:-----:|:-----:|:-----:|
-|[**@egjs/flicking-plugins**](https://github.com/naver/egjs-flicking-plugins)|<a href="https://www.npmjs.com/package/@egjs/flicking-plugins" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking-plugins.svg?style=flat-square&color=007acc&label=%F0%9F%94%96" alt="version" /></a>|Readymade effects for your carousel|
-|[**@egjs/ngx-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/ngx-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/ngx-flicking.svg?style=flat-square&color=dd0031&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/angular.svg" valign="middle" alt="Angular" /> [Angular](https://angular.io/) port of @egjs/flicking|
-|[**@egjs/react-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/react-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/react-flicking.svg?style=flat-square&color=00d8ff&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/react.svg" valign="middle" alt="React" /> [React](https://reactjs.org/) port of @egjs/flicking|
-|[**@egjs/vue-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@2](https://vuejs.org/v2/guide/index.html) port of @egjs/flicking|
-|[**@egjs/vue3-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue3-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue3-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@3](https://v3.vuejs.org/) port of @egjs/flicking|
-|[**@egjs/preact-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/preact-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/preact-flicking.svg?style=flat-square&color=673ab8&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/preact.svg" valign="middle" alt="Preact" /> [Preact](https://preactjs.com/guide/v10/getting-started) port of @egjs/flicking|
-|[**@egjs/svelte-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/svelte-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/svelte-flicking.svg?style=flat-square&color=FF3E00&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/svelte.svg" valign="middle" alt="Svelte" /> [Svelte](https://svelte.dev/) port of @egjs/flicking|
-
-## 🌐 Supported Browsers
-|<img width="20" src="https://simpleicons.org/icons/internetexplorer.svg" alt="IE" />|<img width="20" src="https://simpleicons.org/icons/googlechrome.svg" alt="Chrome" />|<img width="20" src="https://simpleicons.org/icons/firefoxbrowser.svg" alt="Firefox" />|<img width="20" src="https://simpleicons.org/icons/safari.svg" alt="Safari" />|<img width="20" src="https://simpleicons.org/icons/apple.svg" alt="iOS" />|<img width="20" src="https://simpleicons.org/icons/android.svg" alt="Android" />|
-|:---:|:---:|:---:|:---:|:---:|:---:|
-|9+(With polyfill), 11+ for Angular & Svelte|Latest|Latest|Latest|7+|4+|
-
-## 📼 Demos
-Check our [Demos](https://naver.github.io/egjs-flicking/).
-
-## 📖 Documentation
-See [Documentation](https://naver.github.io/egjs-flicking/docs/api/Flicking) page.
-
-## 🙌 Contributing
-See [CONTRIBUTING.md](https://github.com/naver/egjs-flicking/blob/master/CONTRIBUTING.md).
-
-## 📝 Feedback
-Please file an [Issue](https://github.com/naver/egjs-flicking/issues).
-
-## 🛣️ Roadmap
-See our [Roadmap](https://github.com/naver/egjs-flicking/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%F0%9F%9B%A3%EF%B8%8FRoadmap+).
-
-## 📜 License
-@egjs/flicking is released under the [MIT license](https://github.com/naver/egjs-flicking/blob/master/LICENSE).
-
-```
-Copyright (c) 2015-present NAVER Corp.
-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.
-```
-
-<p align="center">
-  <a href="https://naver.github.io/egjs/"><img height="50" src="https://naver.github.io/egjs/img/logotype1_black.svg" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/naver"><img height="50" src="https://naver.github.io/OpenSourceGuide/book/assets/naver_logo.png" /></a>
-</p>

package/{declaration → dist}/CrossFlicking.d.ts

@@ -1,5 +1,5 @@
-import Flicking, { FlickingEvents, FlickingOptions } from "./Flicking";
-import { ChangedEvent, HoldEndEvent, HoldStartEvent, MoveEndEvent, MoveEvent, MoveStartEvent, RestoredEvent, WillChangeEvent, WillRestoreEvent } from "./type/event";
+import { ChangedEvent, FlickingEvents, HoldEndEvent, HoldStartEvent, MoveEndEvent, MoveEvent, MoveStartEvent, RestoredEvent, WillChangeEvent, WillRestoreEvent } from "./event/types";
+import Flicking, { FlickingOptions } from "./Flicking";
 export declare const SIDE_EVENTS: {
     readonly HOLD_START: "sideHoldStart";
     readonly HOLD_END: "sideHoldEnd";
@@ -43,6 +43,11 @@ export interface CrossFlickingChangedEvent extends ChangedEvent {
 export interface CrossFlickingWillChangeEvent extends WillChangeEvent {
     sideIndex?: number;
 }
+/**
+ * A preset for cross-directional carousel that combines horizontal and vertical Flicking instances
+ * @since 4.12.0
+ * @public
+ */
 export declare class CrossFlicking extends Flicking {
     private _sideFlicking;
     private _sideOptions;