├── .build.mjs
├── .gitignore
├── .vscode
    └── settings.json
├── LICENSE
├── README.md
├── docs
    └── README.zh.md
├── examples
    ├── nuxt-basic
    │   ├── .eslintrc
    │   ├── .gitignore
    │   ├── .npmrc
    │   ├── .stackblitzrc
    │   ├── LICENSE
    │   ├── README.md
    │   ├── app.vue
    │   ├── components
    │   │   ├── Counter.vue
    │   │   ├── DarkToggle.vue
    │   │   ├── Footer.vue
    │   │   ├── InputEntry.vue
    │   │   ├── Logos.vue
    │   │   ├── PageView.vue
    │   │   └── ToggleEle.vue
    │   ├── composables
    │   │   ├── count.ts
    │   │   ├── cursor.ts
    │   │   └── user.ts
    │   ├── config
    │   │   └── pwa.ts
    │   ├── constants
    │   │   └── index.ts
    │   ├── layouts
    │   │   ├── README.md
    │   │   ├── default.vue
    │   │   └── home.vue
    │   ├── netlify.toml
    │   ├── nuxt.config.ts
    │   ├── package.json
    │   ├── pages
    │   │   ├── [...all].vue
    │   │   ├── hi
    │   │   │   └── [id].vue
    │   │   └── index.vue
    │   ├── plugins
    │   │   └── cursor-directive.ts
    │   ├── pnpm-lock.yaml
    │   ├── public
    │   │   ├── apple-touch-icon.png
    │   │   ├── favicon.ico
    │   │   ├── maskable-icon.png
    │   │   ├── nuxt.svg
    │   │   ├── pwa-192x192.png
    │   │   ├── pwa-512x512.png
    │   │   ├── robots.txt
    │   │   └── vite.png
    │   ├── server
    │   │   ├── api
    │   │   │   └── pageview.ts
    │   │   └── tsconfig.json
    │   ├── tsconfig.json
    │   └── uno.config.ts
    └── react-basic
    │   ├── .eslintrc.cjs
    │   ├── .gitignore
    │   ├── .npmrc
    │   ├── index.html
    │   ├── package.json
    │   ├── pnpm-lock.yaml
    │   ├── public
    │       └── vite.svg
    │   ├── src
    │       ├── App.css
    │       ├── App.tsx
    │       ├── assets
    │       │   └── react.svg
    │       ├── index.css
    │       ├── main.tsx
    │       └── vite-env.d.ts
    │   ├── tsconfig.json
    │   ├── tsconfig.node.json
    │   ├── uno.config.ts
    │   └── vite.config.ts
├── package.json
├── playground
    ├── .vscode
    │   └── extensions.json
    ├── index.html
    ├── public
    │   ├── ipad-cursor-dark.svg
    │   ├── ipad-cursor.svg
    │   ├── og-image.jpg
    │   └── screenshot.gif
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── vue.svg
    │   ├── codes
    │   │   ├── basic.ts
    │   │   ├── blur-effect.ts
    │   │   ├── custom-anime-speed.ts
    │   │   ├── custom-bg.ts
    │   │   ├── custom-border.ts
    │   │   └── install.ts
    │   ├── components
    │   │   ├── AppHeader.vue
    │   │   ├── CodeBox
    │   │   │   └── index.vue
    │   │   └── LanguageIcon.vue
    │   ├── constants
    │   │   └── index.ts
    │   ├── main.ts
    │   ├── pages
    │   │   └── index.vue
    │   ├── style.css
    │   ├── types
    │   │   └── lang.ts
    │   ├── utils
    │   │   └── clipboard.ts
    │   └── vite-env.d.ts
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── uno.config.ts
    └── vite.config.ts
├── pnpm-lock.yaml
├── rollup.config.js
├── src
    ├── index.d.ts
    ├── index.ts
    ├── react
    │   ├── README.md
    │   ├── index.tsx
    │   └── tsconfig.json
    └── vue
    │   └── index.ts
├── tsconfig.json
└── uno.config.ts


/.build.mjs:
--------------------------------------------------------------------------------
  1 | import { dirname, resolve } from "path";
  2 | import { fileURLToPath } from "url";
  3 | import fs from "fs";
  4 | import { readFile, writeFile } from "fs/promises";
  5 | import { execa } from "execa";
  6 | import { execSync } from "child_process";
  7 | import chalk from "chalk";
  8 | import prompts from "prompts";
  9 | import brotliSize from "brotli-size";
 10 | import prettyBytes from "pretty-bytes";
 11 | 
 12 | const info = (m) => console.log(chalk.blue(m));
 13 | const error = (m) => console.log(chalk.red(m));
 14 | const success = (m) => console.log(chalk.green(m));
 15 | const details = (m) => console.log(chalk.pink(m));
 16 | 
 17 | const __filename = fileURLToPath(import.meta.url);
 18 | const __dirname = dirname(__filename);
 19 | const rootDir = resolve(__dirname);
 20 | const isPublishing = process.argv[2] === "--publish";
 21 | 
 22 | async function clean() {
 23 |   if (!fs.existsSync(`${rootDir}/dist`)) return;
 24 |   await execa("shx", ["rm", "-rf", `${rootDir}/dist`]);
 25 | }
 26 | 
 27 | async function baseBuild() {
 28 |   info("Rolling up primary package");
 29 |   await execa("npx", ["rollup", "-c", "rollup.config.js"]);
 30 | }
 31 | 
 32 | async function baseBuildMin() {
 33 |   info("Minifying primary package");
 34 |   await execa("npx", [
 35 |     "rollup",
 36 |     "-c",
 37 |     "rollup.config.js",
 38 |     "--environment",
 39 |     "MIN:true",
 40 |   ]);
 41 | }
 42 | 
 43 | async function vueBuild() {
 44 |   info("Rolling up Vue package");
 45 |   await execa("npx", [
 46 |     "rollup",
 47 |     "-c",
 48 |     "rollup.config.js",
 49 |     "--environment",
 50 |     "FRAMEWORK:vue",
 51 |   ]);
 52 |   /**
 53 |    * This is a super hack — for some reason these imports need to be explicitly
 54 |    * to .mjs files so...we make it so.
 55 |    */
 56 |   let raw = await readFile(resolve(rootDir, "dist/vue/index.mjs"), "utf8");
 57 |   raw = raw.replace("from '../index'", "from '../index.mjs'");
 58 |   await writeFile(resolve(rootDir, "dist/vue/index.mjs"), raw);
 59 | }
 60 | 
 61 | async function reactBuild() {
 62 |   info("Rolling up React package");
 63 |   await execa("npx", [
 64 |     "rollup",
 65 |     "-c",
 66 |     "rollup.config.js",
 67 |     "--environment",
 68 |     "FRAMEWORK:react",
 69 |   ]);
 70 |   /**
 71 |    * This is a super hack — for some reason these imports need to be explicitly
 72 |    * to .mjs files so...we make it so.
 73 |    */
 74 |   let raw = await readFile(resolve(rootDir, "dist/react/index.mjs"), "utf8");
 75 |   raw = raw.replace("from '../index'", "from '../index.mjs'");
 76 |   await writeFile(resolve(rootDir, "dist/react/index.mjs"), raw);
 77 | }
 78 | 
 79 | async function declarationsBuild() {
 80 |   info("Outputting declarations");
 81 |   await execa("npx", [
 82 |     "rollup",
 83 |     "-c",
 84 |     "rollup.config.js",
 85 |     "--environment",
 86 |     "DECLARATIONS:true",
 87 |   ]);
 88 | }
 89 | 
 90 | async function bundleDeclarations() {
 91 |   info("Bundling declarations");
 92 |   await execa("shx", [
 93 |     "mv",
 94 |     `${rootDir}/dist/src/index.d.ts`,
 95 |     `${rootDir}/dist/index.d.ts`,
 96 |   ]);
 97 |   await execa("shx", [
 98 |     "cp",
 99 |     `${rootDir}/dist/index.d.ts`,
100 |     `${rootDir}/src/index.d.ts`,
101 |   ]);
102 |   await execa("shx", [
103 |     "mv",
104 |     `${rootDir}/dist/src/vue/index.d.ts`,
105 |     `${rootDir}/dist/vue/index.d.ts`,
106 |   ]);
107 |   await execa("shx", ["rm", "-rf", `${rootDir}/dist/src`]);
108 |   await execa("shx", ["rm", `${rootDir}/dist/index.js`]);
109 |   await execa("pnpm", ["build:react-ts"]);
110 | }
111 | 
112 | async function addPackageJSON() {
113 |   info("Writing package.json");
114 |   const raw = await readFile(resolve(rootDir, "package.json"), "utf8");
115 |   const packageJSON = JSON.parse(raw);
116 |   delete packageJSON.private;
117 |   delete packageJSON.devDependencies;
118 |   delete packageJSON.scripts;
119 |   await writeFile(
120 |     resolve(rootDir, "dist/package.json"),
121 |     JSON.stringify(packageJSON, null, 2)
122 |   );
123 | }
124 | 
125 | async function addAssets() {
126 |   info("Writing readme and license.");
127 |   await execa("shx", [
128 |     "cp",
129 |     `${rootDir}/README.md`,
130 |     `${rootDir}/dist/README.md`,
131 |   ]);
132 |   await execa("shx", ["cp", `${rootDir}/LICENSE`, `${rootDir}/dist/LICENSE`]);
133 | }
134 | 
135 | async function prepareForPublishing() {
136 |   info("Preparing for publication");
137 |   if (!/npm-cli\.js$/.test(process.env.npm_execpath)) {
138 |     error(`⚠️ You must run this command with npm instead of yarn.`);
139 |     info("Please try again with:\n\n» npm run publish\n\n");
140 |     process.exit();
141 |   }
142 |   const isClean = !execSync(`git status --untracked-files=no --porcelain`, {
143 |     encoding: "utf-8",
144 |   });
145 |   if (!isClean) {
146 |     error("Commit your changes before publishing.");
147 |     process.exit();
148 |   }
149 |   const raw = await readFile(resolve(rootDir, "package.json"), "utf8");
150 |   const packageJSON = JSON.parse(raw);
151 |   const response = await prompts([
152 |     {
153 |       type: "confirm",
154 |       name: "value",
155 |       message: `Confirm you want to publish version ${chalk.red(
156 |         packageJSON.version
157 |       )}?`,
158 |       initial: false,
159 |     },
160 |   ]);
161 |   if (!response.value) {
162 |     error("Please adjust the version and try again");
163 |     process.exit();
164 |   }
165 | }
166 | 
167 | async function publish() {
168 |   const raw = await readFile(resolve(rootDir, "package.json"), "utf8");
169 |   const packageJSON = JSON.parse(raw);
170 |   const response = await prompts([
171 |     {
172 |       type: "confirm",
173 |       name: "value",
174 |       message: `Project is build. Ready to publish?`,
175 |       initial: false,
176 |     },
177 |   ]);
178 |   if (response.value) {
179 |     execSync("npm publish ./dist --registry https://registry.npmjs.org");
180 |     // use `npx bumpp` to bump version, create and push tag
181 |     // execSync(`git tag ${packageJSON.version}`);
182 |     // execSync(`git push origin --tags`);
183 |   }
184 | }
185 | 
186 | async function outputSize() {
187 |   const raw = await readFile(resolve(rootDir, "dist/index.min.js"), "utf8");
188 |   console.log("Brotli size: " + prettyBytes(brotliSize.sync(raw)));
189 | }
190 | 
191 | if (isPublishing) await prepareForPublishing();
192 | await clean();
193 | await baseBuild();
194 | await baseBuildMin();
195 | await vueBuild();
196 | await reactBuild();
197 | await declarationsBuild();
198 | await bundleDeclarations();
199 | await addPackageJSON();
200 | await addAssets();
201 | await outputSize();
202 | isPublishing ? await publish() : success("Build complete");
203 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | dist
 2 | .DS_Store
 3 | node_modules
 4 | coverage
 5 | temp
 6 | *.log
 7 | /.aws/credentials
 8 | .yalc
 9 | .idea
10 | .vercel
11 | .vite-ssg-temp


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "cSpell.words": [
 3 |     "Attributify",
 4 |     "brotli",
 5 |     "btns",
 6 |     "darcula",
 7 |     "execa",
 8 |     "highlightjs",
 9 |     "Mergeble",
10 |     "mousemove",
11 |     "prismjs",
12 |     "rgba",
13 |     "Roadmap",
14 |     "srcset",
15 |     "taze",
16 |     "unhead"
17 |   ]
18 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 CatsJuice
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!-- Logo -->
  2 | <p align="center">
  3 |   <picture>
  4 |     <source media="(prefers-color-scheme: dark)" srcset="https://cursor.oooo.so/ipad-cursor-dark.svg">
  5 |     <img height="100" src="https://cursor.oooo.so/ipad-cursor.svg">
  6 |   </picture>
  7 | </p>
  8 | 
  9 | <!-- Bridge -->
 10 | <h2 align="center">ipad-curosr </h2>
 11 | <!-- Description -->
 12 | <p align="center">
 13 |   Mouse effect hacking of iPad in browser that can be used in any frameworks 
 14 | </p>
 15 | <p align="center">
 16 |   <img src="https://img.shields.io/npm/l/ipad-cursor"/>
 17 |   <img src="https://img.shields.io/bundlephobia/min/ipad-cursor"/>
 18 |   <img src="https://img.shields.io/npm/v/ipad-cursor"/>
 19 | </p>
 20 | 
 21 | <p align="center">
 22 |   <a href="./docs/README.zh.md"> 
 23 |     <img src="https://img.shields.io/badge/language_%E4%B8%AD%E6%96%87-blue"/>
 24 |   </a>
 25 | </p>
 26 | 
 27 | <p align="center">
 28 |   <a href="https://cursor.oooo.so">
 29 |     <img src="./playground/public/screenshot.gif" />
 30 |   </a>
 31 | </p>
 32 | 
 33 | ---
 34 | 
 35 | ## Install
 36 | 
 37 | - NPM
 38 |   
 39 |   ```bash
 40 |   npm install ipad-cursor --save
 41 |   ```
 42 | 
 43 | - CDN
 44 | 
 45 |   Only support `ESM` module
 46 |   
 47 |   ```html
 48 |   <div data-cursor="block">Block</div>
 49 |   <div data-cursor="text">text</div>
 50 | 
 51 |   <script type="module">
 52 |     import cursor from "https://unpkg.com/ipad-cursor@latest"
 53 |     cursor.initCursor()
 54 |   </script>
 55 |   ```
 56 | 
 57 |   See [cursor.oooo.so](https://ipad-cursor.oooo.so) for more details.
 58 | 
 59 | ## Usage
 60 | 
 61 | ### Basic usage
 62 | 
 63 |   Apply `data-cursor` attribute to the element you want to add the effect.
 64 |   
 65 |   - `data-cursor="text"`: text cursor
 66 |   - `data-cursor="block"`: block cursor 
 67 | 
 68 |   ```html
 69 |   <div data-cursor="text">Text Cursor</div>
 70 |   <div data-cursor="block">Block Cursor</div>
 71 |   ```
 72 | 
 73 |   After your dom loaded, call `initCursor` to start the effect. You may need to call `updateCursor()` when dom updated.
 74 | 
 75 |   ```js
 76 |   import { initCursor } from 'ipad-cursor'
 77 | 
 78 |   initCursor()
 79 |   ```
 80 | 
 81 |   > ⚠️ **Notice**: As so far, you need to manage `when to updateCursor` yourself. Make sure to call `updateCursor` after dom updated.
 82 |   > In the future, there maybe a better way to handle this, see [Roadmap](#roadmap) for more details.
 83 | 
 84 | ### Custom Style
 85 | 
 86 |   You can customize the style of the cursor by [Config](#config), config can be passed to `initCursor` method, or use `updateConfig` method to update config. Every type can be configured separately.
 87 | 
 88 |   ```ts
 89 |   import { initCursor, updateConfig } from 'ipad-cursor'
 90 |   import type { IpadCursorConfig, IpadCursorStyle } from 'ipad-cursor'
 91 | 
 92 |   const normalStyle: IpadCursorStyle = { background: 'red' }
 93 |   const textStyle: IpadCursorStyle = { background: 'blue' }
 94 |   const blockStyle: IpadCursorStyle = { background: 'green' }
 95 |   const config: IpadCursorConfig = {
 96 |     normalStyle,
 97 |     textStyle,
 98 |     blockStyle,
 99 |   };
100 |   initCursor(config)
101 |   ```
102 | 
103 |   Sometimes, you may want to customize the style of the cursor for a specific element, you can use `data-cursor-style` attribute to do this.
104 | 
105 |   The value of `data-cursor-style` attribute is a string, split by `;`, and each part is a style, split by `:`. For example, `background:red;color:blue`.
106 | 
107 |   It is recommended to use [customCursorStyle](#customCursorStyle%28style%29) method to create style string.
108 | 
109 |   For example, customize the style for a circle element (Like avatar).
110 | 
111 |   ```html
112 |   <div 
113 |     data-cursor="block" 
114 |     data-cursor-style="radius: 50%" 
115 |     style="width: 50px; height: 50px; border-radius: 50%"
116 |   />
117 | 
118 |   <script type="module">
119 |     import cursor from "https://unpkg.com/ipad-cursor@latest"
120 |     cursor.initCursor()
121 |   </script>
122 |   ```
123 | 
124 |   See [Style](#style) for full style list.
125 | 
126 | ### Use in framework
127 | 
128 | - [Vue.js](https://vuejs.org/)
129 |   - **hooks**
130 | 
131 |     You can use `useCursor` hook to call `updateCursor()` automatically on mounted and unmounted.
132 |     ```ts
133 |     <script setup>
134 |     import { useCursor } from "ipad-cursor/vue"
135 | 
136 |     useCursor()
137 |     </script>
138 |     ```
139 |   - **directive** (v0.5.2+)
140 | 
141 |     Register plugin globally
142 |     ```ts
143 |     // src/main.ts
144 |     import { ipadCursorPlugin } from "ipad-cursor/vue"
145 | 
146 |     app.use(ipadCursorPlugin, {
147 |       // global configurations
148 |       blockStyle: { radius: "auto" }
149 |     })
150 |     ```
151 | 
152 |     Use in component
153 |     ```html
154 |     <div v-cursor-block />
155 |     <div v-cursor-text />
156 |     <div v-cursor-block="{ background: 'red' }" />
157 |     ```
158 | 
159 | - [React](https://react.dev)
160 |   See [App.tsx](./examples/react-basic/src/App.tsx)
161 | - [Hexo](https://hexo.io/)
162 |   See [@zqqcee](https://github.com/zqqcee)'s [Blog](https://zqqcee.github.io/2023/07/23/ebae3e5deab8/)
163 | 
164 | ## Principle
165 | 
166 | When `initCursor` called, it will remove default cursor, and generate a fake cursor use `div` element. Then listen `mousemove` event, and move the fake cursor to the mouse position.
167 | 
168 | After init finished, it will call `updateCursor` method, scan element with `data-cursor` attribute, detect the cursor type, and add event listener to the element.
169 | 
170 | When mouse enter the element, apply styles.
171 | 
172 | ## API
173 | 
174 | ### initCursor(cfg)
175 |   > see [Config](#config) for more details.
176 | 
177 |   Init cursor, remove default cursor, and generate a fake cursor use `div` element. Then listen `mousemove` event, and move the fake cursor to the mouse position.
178 | 
179 | 
180 | ### updateCursor
181 |   Scan element to observe hover event, and apply styles, as well as remove unused element's event listener.
182 | 
183 | ### disposeCursor
184 |   Remove fake cursor, and remove all event listener, recover default cursor.
185 | 
186 | ### updateConfig(cfg)
187 |   Update config, see [Config](#config) for more details.
188 | 
189 | ### customCursorStyle(style)
190 |   Create style string that can be used as `data-cursor-style` attribute.
191 |   This method is used for better type hinting.
192 | 
193 | ### resetCursor
194 |   Reset cursor to default style.
195 | 
196 | ## Config
197 | 
198 | It is recommended to see [index.d.ts](./src/index.d.ts) in the npm package.
199 | 
200 | | Name                                              | Type              | Default             | Description                                                                            | required |
201 | | ------------------------------------------------- | ----------------- | ------------------- | -------------------------------------------------------------------------------------- | -------- |
202 | | `adsorptionStrength`                              | `number`          | `0.2`               | The strength of adsorption effect, number between 0 and 30                             | No       |
203 | | `className`                                       | `string`          | `'ipad-cursor'`     | The class name of fake cursor                                                          | No       |
204 | | `blockPadding`                                    | `number`          | `auto`              | The padding of cursor when hover on block, set to `auto` will calculate  automatic     | No       |
205 | | `enableAutoTextCursor`(`v0.2.0+`)                 | `boolean`         | `false`             | Auto detect text cursor, see [#12](https://github.com/CatsJuice/ipad-cursor/pull/12)   | No       |
206 | | `enableLighting`(`v0.3.0+`)                       | `boolean`         | `false`             | Add a lighting effect to block [#14](https://github.com/CatsJuice/ipad-cursor/pull/14) | No       |
207 | | `enableMouseDownEffect`(`v0.4.3+`,  Experimental) | `boolean`         | `false`             | Add a effect when mouse down, customize style by config `mouseDownStyle`               | No       |
208 | | `enableAutoUpdateCursor`(`v0.5.0+`)               | `boolean`         | `false`             | Auto update cursor when dom updated                                                    | No       |
209 | | `normalStyle`                                     | `IpadCursorStyle` | see [Style](#style) | The style of normal cursor, see [Style](#style)                                        | No       |
210 | | `textStyle`                                       | `IpadCursorStyle` | see [Style](#style) | The style of text cursor, see [Style](#style)                                          | No       |
211 | | `blockStyle`                                      | `IpadCursorStyle` | see [Style](#style) | The style of block cursor, see [Style](#style)                                         | No       |
212 | | `mouseDownStyle`(`v0.4.3+`, Experimental)         | `IpadCursorStyle` | see [Style](#style) | The style of cursor when mouse is pressed, see [Style](#style)                         | No       |
213 | 
214 | ## Style
215 | 
216 | | Name                     | Type                    | Description                                                                                                                                          | example                            |
217 | | ------------------------ | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
218 | | `width`                  | `MaybeSize`             | The width of cursor                                                                                                                                  | `'10px'`, `10`, `'10'`             |
219 | | `height`                 | `MaybeSize`             | The height of cursor                                                                                                                                 | `'10px'`, `10`, `'10'`             |
220 | | `radius`                 | `MaybeSize` \| `'auto'` | The border radius of cursor, if set to `auto` for `blockStyle`, it will be calculated by dom's css `border-radius` and `config.blockPadding`.        | `'10px'`, `10`, `'10'`, `'auto'`   |
221 | | `background`             | `string`                | The background color of cursor                                                                                                                       | `'#fff'`, `'red'`, `'rgba(0,0,0)'` |
222 | | `border`                 | `string`                | The css border property of cursor                                                                                                                    | `'1px solid black'`                |
223 | | `zIndex`                 | `number`                | The z-index of cursor                                                                                                                                | `1`                                |
224 | | `scale`                  | `number`                | The scale of cursor                                                                                                                                  | `1.05`                             |
225 | | `backdropBlur`           | `MaybeSize`             | The backdrop-filter blur of cursor                                                                                                                   | `'10px'`, `10`, `'10'`             |
226 | | `backdropSaturate`       | `string`                | The backdrop-filter saturate of cursor                                                                                                               | `180%`                             |
227 | | `durationBase`           | `MaybeDuration`         | Transition duration of basic properties like `width`, `height`, `radius`, `border`, `background-color`, if unit if not  specified, `ms` will be used | `'1000'`, `1000`, `200ms`, `0.23s` |
228 | | `durationPosition`       | `MaybeDuration`         | Transition duration of position properties like `top`, `left`, if unit if not  specified, `ms` will be used                                          | `'1000'`, `1000`, `200ms`, `0.23s` |
229 | | `durationBackdropFilter` | `MaybeDuration`         | Transition duration of backdrop-filter property, if unit if not  specified, `ms` will be used                                                        | `'1000'`, `1000`, `200ms`, `0.23s` |
230 | 
231 | ### Default Style
232 | 
233 | See `getDefaultConfig` method in [index.ts](./src/index.ts) for more details.
234 | 
235 | 
236 | ## Roadmap
237 | 
238 | - [x] Add Chinese document
239 | - [x] API Docs
240 | - [ ] More examples
241 | - [x] Auto detect dom update, and call `updateCursor` automatically
242 |     - Maybe use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
243 | 
244 | 
245 | ## Showcase
246 | 
247 | - [oooo.so](https://oooo.so)
248 | - [ipad-cursor.oooo.so](https://ipad-cursor.oooo.so)
249 | 


--------------------------------------------------------------------------------
/docs/README.zh.md:
--------------------------------------------------------------------------------
  1 | <!-- Logo -->
  2 | <p align="center">
  3 |   <picture>
  4 |     <source media="(prefers-color-scheme: dark)" srcset="https://cursor.oooo.so/ipad-cursor-dark.svg">
  5 |     <img height="100" src="https://cursor.oooo.so/ipad-cursor.svg">
  6 |   </picture>
  7 | </p>
  8 | 
  9 | <!-- Bridge -->
 10 | <h2 align="center">ipad-mouse </h2>
 11 | <!-- Description -->
 12 | <p align="center">
 13 |   在浏览器中实现 iPad 的鼠标效果，可在任何框架中使用
 14 | </p>
 15 | <p align="center">
 16 |   <img src="https://img.shields.io/npm/l/ipad-cursor"/>
 17 |   <img src="https://img.shields.io/bundlephobia/min/ipad-cursor"/>
 18 |   <img src="https://img.shields.io/npm/v/ipad-cursor"/>
 19 | </p>
 20 | 
 21 | <p align="center">
 22 |   <a href="../README.md"> 
 23 |     <img src="https://img.shields.io/badge/language_English-blue"/>
 24 |   </a>
 25 | </p>
 26 | 
 27 | <p align="center">
 28 |   <a href="https://cursor.oooo.so">
 29 |     <img src="../playground/public/screenshot.gif" />
 30 |   </a>
 31 | </p>
 32 | 
 33 | 
 34 | ---
 35 | 
 36 | 
 37 | ## 安装
 38 | 
 39 | - NPM
 40 |   
 41 |   ```bash
 42 |   npm install ipad-cursor --save
 43 |   ```
 44 | 
 45 | - CDN
 46 |   
 47 |   目前仅支持 `ESM` 模块
 48 |   ```html
 49 |   <div data-cursor="block">Block</div>
 50 |   <div data-cursor="text">text</div>
 51 | 
 52 |   <script type="module">
 53 |     import cursor from "https://unpkg.com/ipad-cursor@latest"
 54 |     cursor.initCursor()
 55 |   </script>
 56 |   ```
 57 | 
 58 |   更多详细信息请查看 [cursor.oooo.so](https://ipad-cursor.oooo.so)。
 59 | 
 60 | ## 使用
 61 | 
 62 | ### 基本使用
 63 | 
 64 |   在你想要添加效果的元素上应用 `data-cursor` 属性。
 65 |   
 66 |   - `data-cursor="text"`: 文本光标
 67 |   - `data-cursor="block"`: 块状光标 
 68 | 
 69 |   ```html
 70 |   <div data-cursor="text">文本光标</div>
 71 |   <div data-cursor="block">块状光标</div>
 72 |   ```
 73 | 
 74 |   在你的dom加载后，调用 `initCursor` 来启动效果。当dom更新时，你可能需要调用 `updateCursor()`。
 75 | 
 76 |   ```js
 77 |   import { initCursor } from 'ipad-cursor'
 78 | 
 79 |   initCursor()
 80 |   ```
 81 | 
 82 |   > ⚠️ **注意**：到目前为止，你需要自己管理 `何时更新光标`。确保在dom更新后调用 `updateCursor`。
 83 |   > 在未来，可能会有更好的方式来处理这个问题，详见 [路线图](#路线图)。
 84 | 
 85 | ### 自定义样式
 86 | 
 87 |   你可以通过配置 [配置](#配置) 来自定义光标的样式，可以在调用 `initCursor` 时传入配置，也可以在初始化后调用 `updateConfig` 来更新配置。每一种光标类型都可以单独定义样式。
 88 | 
 89 |    ```ts
 90 |   import { initCursor, updateConfig } from 'ipad-cursor'
 91 |   import type { IpadCursorConfig, IpadCursorStyle } from 'ipad-cursor'
 92 | 
 93 |   const normalStyle: IpadCursorStyle = { background: 'red' }
 94 |   const textStyle: IpadCursorStyle = { background: 'blue' }
 95 |   const blockStyle: IpadCursorStyle = { background: 'green' }
 96 |   const config: IpadCursorConfig = {
 97 |     normalStyle,
 98 |     textStyle,
 99 |     blockStyle,
100 |   };
101 |   initCursor(config)
102 |   ```
103 | 
104 |   有时候，你可能需要针对某个元素自定义样式， 可以通过给元素绑定 `data-cursor-style` 来设置样式，该属性的值是由 `;` 分割的多个 `key:value` 对，其中 `key` 是 `IpadCursorStyle` 的属性，`value` 是对应的值，如果传入的 `key` 不是 `IpadCursorStyle` 的属性，会被当作 `css` 属性。
105 | 
106 |   推荐通过 [customCursorStyle](#customCursorStyle%28style%29) 方法来创建样式字符串以获得更好的类型提示。
107 | 
108 |   例如，为一个圆形的元素（如头像），需要单独设置：
109 | 
110 |   ```html
111 |   <div 
112 |     data-cursor="block" 
113 |     data-cursor-style="radius: 50%" 
114 |     style="width: 50px; height: 50px; border-radius: 50%"
115 |   />
116 | 
117 |   <script type="module">
118 |     import cursor from "https://unpkg.com/ipad-cursor@latest"
119 |     cursor.initCursor()
120 |   </script>
121 |   ```
122 | 
123 |   查看 [样式](#样式) 浏览完整的样式列表
124 | 
125 | ### 在框架中使用
126 | 
127 | - [Vue.js](https://vuejs.org/)
128 |   - **hooks**
129 | 
130 |     你可以通过使用 `useCursor` hook， 当组件挂载和销毁时自动调用 `updateCursor()`
131 |     ```ts
132 |     <script setup>
133 |     import { useCursor } from "ipad-cursor/vue"
134 | 
135 |     useCursor()
136 |     </script>
137 |     ```
138 |   - **自定义指令** (v0.5.2+)
139 | 
140 |     全局注册插件：
141 |     ```ts
142 |     // src/main.ts
143 |     import { ipadCursorPlugin } from "ipad-cursor/vue"
144 | 
145 |     app.use(ipadCursorPlugin, {
146 |       // global configurations
147 |       blockStyle: { radius: "auto" }
148 |     })
149 |     ```
150 | 
151 |     然后就可以在组件中使用：
152 |     ```html
153 |     <div v-cursor-block />
154 |     <div v-cursor-text />
155 |     <div v-cursor-block="{ background: 'red' }" />
156 |     ```
157 |     
158 | - [React](https://react.dev)
159 |   可参考 [App.tsx](./examples/react-basic/src/App.tsx)
160 | - [Hexo](https://hexo.io/zh-cn/)
161 |   可参考 [@zqqcee](https://github.com/zqqcee)'s [Blog](https://zqqcee.github.io/2023/07/23/ebae3e5deab8/)
162 | 
163 | 
164 | ## 原理
165 | 
166 | 当调用 `initCursor` 时，它将移除默认光标，并使用 `div` 元素生成一个假光标。然后监听 `mousemove` 事件，并将假光标移动到鼠标位置。
167 | 
168 | 初始化完成后，它将调用 `updateCursor` 方法，扫描带有 `data-cursor` 属性的元素，检测光标类型，并为元素添加事件监听器。
169 | 
170 | 当鼠标进入元素时，应用样式。
171 | 
172 | ## API
173 | 
174 | ### initCursor(cfg)
175 |   > 更多详细信息请查看 [配置](#配置)。
176 | 
177 |   初始化光标，移除默认光标，并使用 `div` 元素生成一个假光标。然后监听 `mousemove` 事件，并将假光标移动到鼠标位置。
178 | 
179 | ### updateCursor
180 |   扫描元素以观察悬停事件，并应用样式，以及移除未使用元素的事件监听器。
181 | 
182 | ### disposeCursor
183 |   移除假光标，并移除所有事件监听器，恢复默认光标。
184 | 
185 | ### updateConfig(cfg)
186 |   更新配置，详见 [配置](#配置)。
187 | 
188 | ### customCursorStyle(style)
189 |   创建可用作 `data-cursor-style` 属性的样式字符串。
190 |   这个方法用于更好的类型提示。
191 | 
192 | ### resetCursor
193 |   将光标重置为默认样式。
194 | 
195 | ## 配置
196 | 
197 | 建议查看 npm 包中的 [index.d.ts](./src/index.d.ts)。
198 | 
199 | | 名称                                        | 类型              | 默认值               | 描述                                                                               | 是否必须 |
200 | | ------------------------------------------- | ----------------- | -------------------- | ---------------------------------------------------------------------------------- | -------- |
201 | | `adsorptionStrength`                        | `number`          | `0.2`                | 吸附力强度                                                                         | No       |
202 | | `className`                                 | `string`          | `'ipad-cursor'`      | 光标的css类名                                                                      | No       |
203 | | `blockPadding`                              | `number`          | `auto`               | 当光标聚焦在 `block` 时的内边距，设置为 `auto` 将自动计算                          | No       |
204 | | `enableAutoTextCursor`(`v0.2.0+`)           | `boolean`         | `false`              | 自动检测 `text` 类型的光标 [#12](https://github.com/CatsJuice/ipad-cursor/pull/12) | No       |
205 | | `enableLighting`(`v0.3.0+`)                 | `boolean`         | `false`              | 给 `block` 增加光照效果 [#14](https://github.com/CatsJuice/ipad-cursor/pull/14)    | No       |
206 | | `enableMouseDownEffect`(`v0.4.3+`,  实验性) | `boolean`         | `false`              | 当鼠标按下时应用样式， 通过配置 `mouseDownStyle` 来自定义样式                      | No       |
207 | | `enableAutoUpdateCursor`(`v0.5.0+`)         | `boolean`         | `false`              | 当 dom 更新时自动更更新光标的扫描                                                  | No       |
208 | | `normalStyle`                               | `IpadCursorStyle` | 请查看 [样式](#样式) | 正常情况下的光标样式, 请查看 [样式](#样式)                                         | No       |
209 | | `textStyle`                                 | `IpadCursorStyle` | 请查看 [样式](#样式) | 文字模式下的光标样式, 请查看 [样式](#样式)                                         | No       |
210 | | `blockStyle`                                | `IpadCursorStyle` | 请查看 [样式](#样式) | 块元素下的光标样式, 请查看 [样式](#样式)                                           | No       |
211 | | `mouseDownStyle`(`v0.4.3+`, 实验性)         | `IpadCursorStyle` | 请查看 [样式](#样式) | 鼠标按下时的光标样式, 请查看 [样式](#样式)                                         | No       |
212 | 
213 | 
214 | ## 样式
215 | 
216 | | 名称                     | 类型                     | 描述                                                                                                               | 例子                               |
217 | | ------------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------- |
218 | | `width`                  | `MaybeSize`              | 光标宽度                                                                                                           | `'10px'`, `10`, `'10'`             |
219 | | `height`                 | `MaybeSize`              | 光标高度                                                                                                           | `'10px'`, `10`, `'10'`             |
220 | | `radius`                 | `MaybeSize`  \| `'auto'` | 光标半径, 当给 `blockStyle` 设置为 `auto`  ,将根据元素的 css `border-radius` 和 `config.blockPadding` 自动计算     | `'10px'`, `10`, `'10'`, `'auto'`   |
221 | | `background`             | `string`                 | 光标背景颜色                                                                                                       | `'#fff'`, `'red'`, `'rgba(0,0,0)'` |
222 | | `border`                 | `string`                 | 光标边框的css样式                                                                                                  | `'1px solid black'`                |
223 | | `zIndex`                 | `number`                 | 光标的z-index层级                                                                                                  | `1`                                |
224 | | `scale`                  | `number`                 | 光标缩放                                                                                                           | `1.05`                             |
225 | | `backdropBlur`           | `MaybeSize`              | 光标的 backdrop-filter 模糊                                                                                        | `'10px'`, `10`, `'10'`             |
226 | | `backdropSaturate`       | `string`                 | 光标的 backdrop-filter 饱和度                                                                                      | `180%`                             |
227 | | `durationBase`           | `MaybeDuration`          | 光标的基础属性过度时间 如 `width`, `height`, `radius`, `border`, `background-color`, 如果未指定单位, 将会使用 `ms` | `'1000'`, `1000`, `200ms`, `0.23s` |
228 | | `durationPosition`       | `MaybeDuration`          | 光标的位置属性过度时间 如 `top`, `left`, 如果未指定单位, 将会使用 `ms`                                             | `'1000'`, `1000`, `200ms`, `0.23s` |
229 | | `durationBackdropFilter` | `MaybeDuration`          | 光标的backdrop-filter属性过度时间, 如果未指定单位, 将会使用 `ms`                                                   | `'1000'`, `1000`, `200ms`, `0.23s` |
230 | 
231 | ### 默认样式
232 | 
233 | 请查看 [index.ts](./src/index.ts) 中的 `getDefaultConfig` 方法
234 | 
235 | 
236 | ## 路线图
237 | 
238 | - [x] 添加中文文档
239 | - [x] API 文档
240 | - [ ] 更多示例
241 | - [x] 自动检测 dom 更新，并自动调用 `updateCursor`
242 |     - 可能会使用 [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
243 | 
244 | 
245 | ## 展示
246 | 
247 | - [oooo.so](https://oooo.so)
248 | - [ipad-cursor.oooo.so](https://ipad-cursor.oooo.so)


--------------------------------------------------------------------------------
/examples/nuxt-basic/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "@antfu",
4 |     "@unocss"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | dist
4 | .output
5 | .nuxt
6 | .env
7 | .idea/
8 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | shell-emulator=true
4 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |   "installDependencies": true,
3 |   "startCommand": "npm run dev"
4 | }
5 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021-PRESENT Anthony Fu<https://github.com/antfu>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | <img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
 3 | </p>
 4 | 
 5 | <h2 align="center">
 6 | <a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
 7 | </h2><br>
 8 | 
 9 | <pre align="center">
10 | 🧪 Working in Progress
11 | </pre>
12 | 
13 | <p align="center">
14 | <br>
15 | <a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
16 | <br><br>
17 | <a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
18 | </p>
19 | 
20 | ## Features
21 | 
22 | - 💚 [Nuxt 3](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
23 | 
24 | - ⚡️ Vite - Instant HMR.
25 | 
26 | - 🎨 [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand atomic CSS engine.
27 | 
28 | - 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/unocss/unocss).
29 | 
30 | - 🔥 The `<script setup>` syntax.
31 | 
32 | - 🍍 [State Management via Pinia](https://github.com/vuejs/pinia), see [./composables/user.ts](./composables/user.ts).
33 | 
34 | - 📑 [Layout system](./layouts).
35 | 
36 | - 📥 APIs auto importing - for Composition API, VueUse and custom composables.
37 | 
38 | - 🏎 Zero-config cloud functions and deploy.
39 | 
40 | - 🦾 TypeScript, of course.
41 | 
42 | - 📲 [PWA](https://github.com/vite-pwa/nuxt) with offline support and auto update behavior.
43 | 
44 | 
45 | ## Plugins
46 | 
47 | ### Nuxt Modules
48 | 
49 | - [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
50 | - [ColorMode](https://github.com/nuxt-modules/color-mode) - dark and Light mode with auto detection made easy with Nuxt.
51 | - [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand atomic CSS engine.
52 | - [Pinia](https://github.com/vuejs/pinia) - intuitive, type safe, light and flexible Store for Vue.
53 | - [VitePWA](https://github.com/vite-pwa/nuxt) - zero-config PWA Plugin for Nuxt 3.
54 | - [DevTools](https://github.com/nuxt/devtools) - unleash Nuxt Developer Experience.
55 | 
56 | ## IDE
57 | 
58 | We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable [Vetur](https://vuejs.github.io/vetur/) if you have it).
59 | 
60 | ## Variations
61 | 
62 | - [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
63 | - [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
64 | - [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
65 | - [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
66 | 
67 | ## Try it now!
68 | 
69 | ### Online
70 | 
71 | <a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
72 | 
73 | ### GitHub Template
74 | 
75 | [Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
76 | 
77 | ### Clone to local
78 | 
79 | If you prefer to do it manually with the cleaner git history
80 | 
81 | ```bash
82 | npx degit antfu/vitesse-nuxt3 my-nuxt3-app
83 | cd my-nuxt3-app
84 | pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
85 | ```
86 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { appName } from '~/constants'
 3 | 
 4 | useHead({
 5 |   title: appName,
 6 | })
 7 | 
 8 | // use ipad cursor by hooks
 9 | // useCursor({
10 | //   blockStyle: {
11 | //     radius: 'auto',
12 | //   },
13 | // })
14 | </script>
15 | 
16 | <template>
17 |   <VitePwaManifest />
18 |   <NuxtLayout>
19 |     <NuxtPage />
20 |   </NuxtLayout>
21 | </template>
22 | 
23 | <style>
24 | html, body , #__nuxt{
25 |   height: 100vh;
26 |   margin: 0;
27 |   padding: 0;
28 | }
29 | 
30 | html.dark {
31 |   background: #222;
32 |   color: white;
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/components/Counter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | import useCursor from '../composables/cursor'
 3 | 
 4 | const { count, inc, dec } = useCount()
 5 | 
 6 | useCursor({})
 7 | </script>
 8 | 
 9 | <template>
10 |   <div inline-flex m="y-3">
11 |     <button data-cursor="block" rounded-full p-2 btn @click="dec()">
12 |       <div i-carbon-subtract />
13 |     </button>
14 |     <div data-cursor="text" font="mono" w="15" m-auto inline-block>
15 |       {{ count }}
16 |     </div>
17 |     <button data-cursor="block" rounded-full p-2 btn @click="inc()">
18 |       <div i-carbon-add />
19 |     </button>
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/components/DarkToggle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const color = useColorMode()
 3 | 
 4 | useHead({
 5 |   meta: [{
 6 |     id: 'theme-color',
 7 |     name: 'theme-color',
 8 |     content: () => color.value === 'dark' ? '#222222' : '#ffffff',
 9 |   }],
10 | })
11 | 
12 | function toggleDark() {
13 |   color.preference = color.value === 'dark' ? 'light' : 'dark'
14 | }
15 | </script>
16 | 
17 | <template>
18 |   <button class="!outline-none" @click="toggleDark">
19 |     <div class="i-carbon-sun dark:i-carbon-moon" />
20 |   </button>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/components/Footer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div text="xl gray4" m-5 flex="~ gap3" justify-center>
3 |     <NuxtLink i-carbon-campsite to="/" />
4 |     <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="_blank" />
5 |     <DarkToggle />
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/components/InputEntry.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const name = ref('')
 3 | 
 4 | const router = useRouter()
 5 | function go() {
 6 |   if (name.value)
 7 |     router.push(`/hi/${encodeURIComponent(name.value)}`)
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |   <div>
13 |     <input
14 |       id="input"
15 |       v-model="name"
16 |       placeholder="What's your name?"
17 |       type="text" autocomplete="off"
18 |       p="x-4 y-2" m="t-5" w="250px"
19 |       text="center" bg="transparent"
20 |       border="~ rounded gray-200 dark:gray-700"
21 |       outline="none active:none"
22 |       @keydown.enter="go"
23 |     >
24 |     <div>
25 |       <button
26 |         m-3 text-sm btn
27 |         :disabled="!name"
28 |         data-cursor="block"
29 |         @click="go"
30 |       >
31 |         GO
32 |       </button>
33 |     </div>
34 |   </div>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/components/Logos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div inline-flex cursor-default text-2xl font-300>
 3 |     <div flex flex-col children:mx-auto data-cursor="block">
 4 |       <img inline-block h-18 w-18 src="/nuxt.svg">
 5 |       <span mt--2 text-green5>Nuxt 3</span>
 6 |     </div>
 7 |     <div
 8 |       text="3xl gray4"
 9 |       m="x-4 y-auto"
10 |       i-carbon-add transform transition-all-500 hover:rotate-135
11 |     />
12 |     <div flex flex-col children:mx-auto>
13 |       <img inline-block h-18 w-18 src="/vite.png">
14 |       <span mt--2 text-purple5>Vitesse</span>
15 |     </div>
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/components/PageView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data } = await useFetch('/api/pageview')
 3 | 
 4 | const time = useTimeAgo(() => data.value?.startAt || 0)
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div text-gray:80>
 9 |     <span font-500 text-gray>{{ data?.pageview }}</span>
10 |     page views since
11 |     <span text-gray>{{ time }}</span>
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/components/ToggleEle.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import useCursor from '../composables/cursor'
 3 | 
 4 | const show = ref(false)
 5 | const { updateCursor } = useCursor()
 6 | 
 7 | function toggle() {
 8 |   show.value = !show.value
 9 |   nextTick(() => updateCursor())
10 | }
11 | </script>
12 | 
13 | <template>
14 |   <div h-50px>
15 |     <button v-cursor-block btn @click="toggle">
16 |       toggle
17 |     </button>
18 | 
19 |     <button v-if="show" v-cursor-block btn @click="toggle">
20 |       toggle
21 |     </button>
22 | 
23 |     <div>
24 |       <button v-cursor-block btn @click="toggle">
25 |         toggle
26 |       </button>
27 |     </div>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/composables/count.ts:
--------------------------------------------------------------------------------
 1 | export function useCount() {
 2 |   const count = useState('count', () => Math.round(Math.random() * 20))
 3 | 
 4 |   function inc() {
 5 |     count.value += 1
 6 |   }
 7 |   function dec() {
 8 |     count.value -= 1
 9 |   }
10 | 
11 |   return {
12 |     count,
13 |     inc,
14 |     dec,
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/composables/cursor.ts:
--------------------------------------------------------------------------------
1 | // production
2 | // import { useCursor } from 'ipad-cursor/vue'
3 | 
4 | // development
5 | import { useCursor } from '../../../src/vue'
6 | 
7 | export default useCursor
8 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/composables/user.ts:
--------------------------------------------------------------------------------
 1 | import { acceptHMRUpdate, defineStore } from 'pinia'
 2 | 
 3 | export const useUserStore = defineStore('user', () => {
 4 |   /**
 5 |    * Current named of the user.
 6 |    */
 7 |   const savedName = ref('')
 8 |   const previousNames = ref(new Set<string>())
 9 | 
10 |   const usedNames = computed(() => Array.from(previousNames.value))
11 |   const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
12 | 
13 |   /**
14 |    * Changes the current name of the user and saves the one that was used
15 |    * before.
16 |    *
17 |    * @param name - new name to set
18 |    */
19 |   function setNewName(name: string) {
20 |     if (savedName.value)
21 |       previousNames.value.add(savedName.value)
22 | 
23 |     savedName.value = name
24 |   }
25 | 
26 |   return {
27 |     setNewName,
28 |     otherNames,
29 |     savedName,
30 |   }
31 | })
32 | 
33 | if (import.meta.hot)
34 |   import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
35 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/config/pwa.ts:
--------------------------------------------------------------------------------
 1 | import type { ModuleOptions } from '@vite-pwa/nuxt'
 2 | import { appDescription, appName } from '../constants/index'
 3 | 
 4 | const scope = '/'
 5 | 
 6 | export const pwa: ModuleOptions = {
 7 |   registerType: 'autoUpdate',
 8 |   scope,
 9 |   base: scope,
10 |   manifest: {
11 |     id: scope,
12 |     scope,
13 |     name: appName,
14 |     short_name: appName,
15 |     description: appDescription,
16 |     theme_color: '#ffffff',
17 |     icons: [
18 |       {
19 |         src: 'pwa-192x192.png',
20 |         sizes: '192x192',
21 |         type: 'image/png',
22 |       },
23 |       {
24 |         src: 'pwa-512x512.png',
25 |         sizes: '512x512',
26 |         type: 'image/png',
27 |       },
28 |       {
29 |         src: 'maskable-icon.png',
30 |         sizes: '512x512',
31 |         type: 'image/png',
32 |         purpose: 'any maskable',
33 |       },
34 |     ],
35 |   },
36 |   workbox: {
37 |     globPatterns: ['**/*.{js,css,html,txt,png,ico,svg}'],
38 |     navigateFallbackDenylist: [/^\/api\//],
39 |     navigateFallback: '/',
40 |     cleanupOutdatedCaches: true,
41 |     runtimeCaching: [
42 |       {
43 |         urlPattern: /^https:\/\/fonts.googleapis.com\/.*/i,
44 |         handler: 'CacheFirst',
45 |         options: {
46 |           cacheName: 'google-fonts-cache',
47 |           expiration: {
48 |             maxEntries: 10,
49 |             maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
50 |           },
51 |           cacheableResponse: {
52 |             statuses: [0, 200],
53 |           },
54 |         },
55 |       },
56 |       {
57 |         urlPattern: /^https:\/\/fonts.gstatic.com\/.*/i,
58 |         handler: 'CacheFirst',
59 |         options: {
60 |           cacheName: 'gstatic-fonts-cache',
61 |           expiration: {
62 |             maxEntries: 10,
63 |             maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
64 |           },
65 |           cacheableResponse: {
66 |             statuses: [0, 200],
67 |           },
68 |         },
69 |       },
70 |     ],
71 |   },
72 |   registerWebManifestInRouteRules: true,
73 |   writePlugin: true,
74 |   devOptions: {
75 |     enabled: process.env.VITE_PLUGIN_PWA === 'true',
76 |     navigateFallback: scope,
77 |   },
78 | }
79 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const appName = 'Vitesse for Nuxt 3'
2 | export const appDescription = 'Vitesse for Nuxt 3'
3 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/layouts/README.md:
--------------------------------------------------------------------------------
 1 | ## Layouts
 2 | 
 3 | Vue components in this dir are used as layouts.
 4 | 
 5 | By default, `default.vue` will be used unless an alternative is specified in the route meta.
 6 | 
 7 | ```html
 8 | <script setup lang="ts">
 9 | definePageMeta({
10 |   layout: 'home',
11 | })
12 | </script>
13 | ```
14 | 
15 | Learn more on https://nuxt.com/docs/guide/directory-structure/layouts
16 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="px-10 py-20 text-center">
 3 |     <slot />
 4 |     <Footer />
 5 |     <div class="mx-auto mt-5 text-center text-sm opacity-25">
 6 |       [Default Layout]
 7 |     </div>
 8 |   </main>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/layouts/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="px-10 py-20 text-center">
 3 |     <slot />
 4 |     <Footer />
 5 |     <div class="mx-auto mt-5 text-center text-sm opacity-25">
 6 |       [Home Layout]
 7 |     </div>
 8 |   </main>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build.environment]
 2 |   NODE_VERSION = "16"
 3 | 
 4 | [build]
 5 |   publish = "dist"
 6 |   command = "pnpm run build"
 7 | 
 8 | [[redirects]]
 9 |   from = "/*"
10 |   to = "/index.html"
11 |   status = 200
12 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { pwa } from './config/pwa'
 2 | import { appDescription } from './constants/index'
 3 | 
 4 | export default defineNuxtConfig({
 5 |   modules: [
 6 |     '@vueuse/nuxt',
 7 |     '@unocss/nuxt',
 8 |     '@pinia/nuxt',
 9 |     '@nuxtjs/color-mode',
10 |     '@vite-pwa/nuxt',
11 |   ],
12 | 
13 |   experimental: {
14 |     // when using generate, payload js assets included in sw precache manifest
15 |     // but missing on offline, disabling extraction it until fixed
16 |     payloadExtraction: false,
17 |     inlineSSRStyles: false,
18 |     renderJsonPayloads: true,
19 |     typedPages: true,
20 |   },
21 | 
22 |   css: [
23 |     '@unocss/reset/tailwind.css',
24 |   ],
25 | 
26 |   colorMode: {
27 |     classSuffix: '',
28 |   },
29 | 
30 |   nitro: {
31 |     esbuild: {
32 |       options: {
33 |         target: 'esnext',
34 |       },
35 |     },
36 |     prerender: {
37 |       crawlLinks: false,
38 |       routes: ['/'],
39 |       ignore: ['/hi'],
40 |     },
41 |   },
42 | 
43 |   app: {
44 |     head: {
45 |       viewport: 'width=device-width,initial-scale=1',
46 |       link: [
47 |         { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
48 |         { rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
49 |         { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
50 |       ],
51 |       meta: [
52 |         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
53 |         { name: 'description', content: appDescription },
54 |         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
55 |       ],
56 |     },
57 |   },
58 | 
59 |   pwa,
60 | 
61 |   devtools: {
62 |     enabled: true,
63 |   },
64 | })
65 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "packageManager": "pnpm@8.6.3",
 4 |   "scripts": {
 5 |     "build": "nuxi build",
 6 |     "dev": "nuxi dev",
 7 |     "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
 8 |     "start": "node .output/server/index.mjs",
 9 |     "typecheck": "vue-tsc --noEmit",
10 |     "lint": "eslint .",
11 |     "postinstall": "nuxi prepare",
12 |     "generate": "nuxi generate",
13 |     "start:generate": "npx serve .output/public"
14 |   },
15 |   "devDependencies": {
16 |     "@antfu/eslint-config": "^0.39.5",
17 |     "@iconify-json/carbon": "^1.1.18",
18 |     "@iconify-json/twemoji": "^1.1.11",
19 |     "@nuxt/devtools": "^0.6.2",
20 |     "@nuxtjs/color-mode": "^3.3.0",
21 |     "@pinia/nuxt": "^0.4.11",
22 |     "@unocss/eslint-config": "^0.53.1",
23 |     "@unocss/nuxt": "^0.53.1",
24 |     "@vite-pwa/nuxt": "^0.1.0",
25 |     "@vueuse/nuxt": "^10.2.0",
26 |     "consola": "^3.1.0",
27 |     "eslint": "^8.43.0",
28 |     "nuxt": "^3.5.3",
29 |     "pinia": "^2.1.4",
30 |     "typescript": "^5.1.3",
31 |     "vue-tsc": "^1.8.1"
32 |   },
33 |   "dependencies": {
34 |     "ipad-cursor": "^0.4.3"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/pages/[...all].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const router = useRouter()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <main p="x4 y10" text="center teal-700 dark:gray-200">
 7 |     <div text-4xl>
 8 |       <div i-carbon-warning inline-block />
 9 |     </div>
10 |     <div>Not found</div>
11 |     <div>
12 |       <button text-sm btn m="3 t8" @click="router.back()">
13 |         Back
14 |       </button>
15 |     </div>
16 |   </main>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/pages/hi/[id].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import useCursor from '../../composables/cursor'
 3 | 
 4 | const route = useRoute()
 5 | const user = useUserStore()
 6 | const name = route.params.id
 7 | 
 8 | watchEffect(() => {
 9 |   user.setNewName(route.params.id as string)
10 | })
11 | 
12 | definePageMeta({
13 |   layout: 'home',
14 | })
15 | useCursor()
16 | </script>
17 | 
18 | <template>
19 |   <div>
20 |     <div>
21 |       <div data-cursor="block" i-twemoji:waving-hand inline-block animate-shake-x animate-duration-5000 text-4xl />
22 |     </div>
23 |     <h3 text-2xl font-500>
24 |       Hi,
25 |     </h3>
26 |     <div text-xl>
27 |       {{ name }}!
28 |     </div>
29 | 
30 |     <template v-if="user.otherNames.length">
31 |       <p my-4 text-sm>
32 |         <span op-50>Also as known as:</span>
33 |         <ul>
34 |           <li v-for="otherName in user.otherNames" :key="otherName">
35 |             <router-link :to="`/hi/${otherName}`" replace>
36 |               {{ otherName }}
37 |             </router-link>
38 |           </li>
39 |         </ul>
40 |       </p>
41 |     </template>
42 | 
43 |     <Counter />
44 | 
45 |     <div>
46 |       <NuxtLink
47 |         data-cursor="block"
48 |         class="m-3 text-sm btn"
49 |         to="/"
50 |       >
51 |         Back
52 |       </NuxtLink>
53 |     </div>
54 |   </div>
55 | </template>
56 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import useCursor from '../composables/cursor'
 3 | 
 4 | const online = useOnline()
 5 | 
 6 | const { initCursor } = useCursor()
 7 | initCursor()
 8 | </script>
 9 | 
10 | <template>
11 |   <div>
12 |     <Logos mb-6 />
13 |     <Suspense>
14 |       <ClientOnly>
15 |         <PageView v-if="online" />
16 |         <div v-else text-gray:80>
17 |           You're offline
18 |         </div>
19 |       </ClientOnly>
20 |       <template #fallback>
21 |         <div italic op50>
22 |           <span animate-pulse>Loading...</span>
23 |         </div>
24 |       </template>
25 |     </Suspense>
26 |     <InputEntry />
27 |     <ToggleEle />
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/plugins/cursor-directive.ts:
--------------------------------------------------------------------------------
 1 | import { ipadCursorPlugin } from '../../../src/vue/index'
 2 | 
 3 | export default defineNuxtPlugin((nuxtApp) => {
 4 |   // Doing something with nuxtApp
 5 |   nuxtApp.vueApp.use(ipadCursorPlugin, {
 6 |     blockStyle: {
 7 |       radius: 'auto',
 8 |     },
 9 |   })
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/examples/nuxt-basic/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/examples/nuxt-basic/public/favicon.ico


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/maskable-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/examples/nuxt-basic/public/maskable-icon.png


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/nuxt.svg:
--------------------------------------------------------------------------------
1 | <svg width="900" height="900" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" fill="#00DC82"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/examples/nuxt-basic/public/pwa-192x192.png


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/examples/nuxt-basic/public/pwa-512x512.png


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/public/vite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/examples/nuxt-basic/public/vite.png


--------------------------------------------------------------------------------
/examples/nuxt-basic/server/api/pageview.ts:
--------------------------------------------------------------------------------
1 | const startAt = Date.now()
2 | let count = 0
3 | 
4 | export default defineEventHandler(() => ({
5 |   pageview: count++,
6 |   startAt,
7 | }))
8 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/nuxt-basic/uno.config.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineConfig,
 3 |   presetAttributify,
 4 |   presetIcons,
 5 |   presetTypography,
 6 |   presetUno,
 7 |   presetWebFonts,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from 'unocss'
11 | 
12 | export default defineConfig({
13 |   shortcuts: [
14 |     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
15 |     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
16 |   ],
17 |   presets: [
18 |     presetUno(),
19 |     presetAttributify(),
20 |     presetIcons({
21 |       scale: 1.2,
22 |     }),
23 |     presetTypography(),
24 |     presetWebFonts({
25 |       fonts: {
26 |         sans: 'DM Sans',
27 |         serif: 'DM Serif Display',
28 |         mono: 'DM Mono',
29 |       },
30 |     }),
31 |   ],
32 |   transformers: [
33 |     transformerDirectives(),
34 |     transformerVariantGroup(),
35 |   ],
36 | })
37 | 


--------------------------------------------------------------------------------
/examples/react-basic/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   env: { browser: true, es2020: true },
 6 |   extends: [
 7 |     'eslint:recommended',
 8 |     'plugin:@typescript-eslint/recommended',
 9 |     'plugin:@typescript-eslint/recommended-requiring-type-checking',
10 |     'plugin:react-hooks/recommended',
11 |   ],
12 |   parser: '@typescript-eslint/parser',
13 |   parserOptions: {
14 |     ecmaVersion: 'latest',
15 |     sourceType: 'module',
16 |     project: true,
17 |     tsconfigRootDir: __dirname,
18 |   },
19 |   plugins: ['react-refresh'],
20 |   rules: {
21 |     'react-refresh/only-export-components': [
22 |       'warn',
23 |       { allowConstantExport: true },
24 |     ],
25 |     '@typescript-eslint/no-non-null-assertion': 'off',
26 |   },
27 | }
28 | 


--------------------------------------------------------------------------------
/examples/react-basic/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/examples/react-basic/.npmrc:
--------------------------------------------------------------------------------
1 | ipad-cursor:registry=https://registry.npmjs.org


--------------------------------------------------------------------------------
/examples/react-basic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/examples/react-basic/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-basic",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "ipad-cursor": "0.4.3",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0"
16 |   },
17 |   "devDependencies": {
18 |     "@types/react": "^18.2.14",
19 |     "@types/react-dom": "^18.2.6",
20 |     "@typescript-eslint/eslint-plugin": "^5.61.0",
21 |     "@typescript-eslint/parser": "^5.61.0",
22 |     "@vitejs/plugin-react": "^4.0.1",
23 |     "eslint": "^8.44.0",
24 |     "eslint-plugin-react-hooks": "^4.6.0",
25 |     "eslint-plugin-react-refresh": "^0.4.1",
26 |     "typescript": "^5.0.2",
27 |     "unocss": "^0.53.5",
28 |     "vite": "^4.4.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/examples/react-basic/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/examples/react-basic/src/App.css:
--------------------------------------------------------------------------------
 1 | #root {
 2 |   max-width: 1280px;
 3 |   margin: 0 auto;
 4 |   padding: 2rem;
 5 |   text-align: center;
 6 | }
 7 | 
 8 | .logo {
 9 |   height: 6em;
10 |   padding: 1.5em;
11 |   will-change: filter;
12 |   transition: filter 300ms;
13 | }
14 | .logo:hover {
15 |   filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 |   filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 | 
21 | @keyframes logo-spin {
22 |   from {
23 |     transform: rotate(0deg);
24 |   }
25 |   to {
26 |     transform: rotate(360deg);
27 |   }
28 | }
29 | 
30 | @media (prefers-reduced-motion: no-preference) {
31 |   a:nth-of-type(2) .logo {
32 |     animation: logo-spin infinite 20s linear;
33 |   }
34 | }
35 | 
36 | .card {
37 |   padding: 2em;
38 | }
39 | 
40 | .read-the-docs {
41 |   color: #888;
42 | }
43 | 


--------------------------------------------------------------------------------
/examples/react-basic/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import reactLogo from "./assets/react.svg";
 3 | import viteLogo from "/vite.svg";
 4 | import "./App.css";
 5 | 
 6 | import { IPadCursorProvider, useIPadCursor } from "ipad-cursor/react";
 7 | import { IpadCursorConfig } from "ipad-cursor";
 8 | 
 9 | function App() {
10 |   const config: IpadCursorConfig = {
11 |     blockPadding: "auto",
12 |     blockStyle: {
13 |       radius: "auto",
14 |     },
15 |     enableAutoTextCursor: true,
16 |   };
17 |   useIPadCursor();
18 |   const [count, setCount] = useState(0);
19 | 
20 |   return (
21 |     <IPadCursorProvider config={config}>
22 |       <a
23 |         className="inline-block rounded-30px"
24 |         data-cursor="block"
25 |         href="https://vitejs.dev"
26 |         target="_blank"
27 |       >
28 |         <img src={viteLogo} className="logo" alt="Vite logo" />
29 |       </a>
30 |       <a
31 |         className="inline-block rounded-30px"
32 |         data-cursor="block"
33 |         href="https://react.dev"
34 |         target="_blank"
35 |       >
36 |         <img src={reactLogo} className="logo react" alt="React logo" />
37 |       </a>
38 |       <h1>Vite + React</h1>
39 |       <div className="card">
40 |         <button data-cursor="block" onClick={() => setCount((count) => count + 1)}>
41 |           count is {count}
42 |         </button>
43 |         <p>
44 |           Edit <code>src/App.tsx</code> and save to test HMR
45 |         </p>
46 |       </div>
47 |       <p className="read-the-docs">
48 |         Click on the Vite and React logos to learn more
49 |       </p>
50 |     </IPadCursorProvider>
51 |   );
52 | }
53 | 
54 | export default App;
55 | 


--------------------------------------------------------------------------------
/examples/react-basic/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/examples/react-basic/src/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: rgba(255, 255, 255, 0.87);
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   -webkit-text-size-adjust: 100%;
15 | }
16 | 
17 | a {
18 |   font-weight: 500;
19 |   color: #646cff;
20 |   text-decoration: inherit;
21 | }
22 | a:hover {
23 |   color: #535bf2;
24 | }
25 | 
26 | body {
27 |   margin: 0;
28 |   display: flex;
29 |   place-items: center;
30 |   min-width: 320px;
31 |   min-height: 100vh;
32 | }
33 | 
34 | h1 {
35 |   font-size: 3.2em;
36 |   line-height: 1.1;
37 | }
38 | 
39 | button {
40 |   border-radius: 8px;
41 |   border: 1px solid transparent;
42 |   padding: 0.6em 1.2em;
43 |   font-size: 1em;
44 |   font-weight: 500;
45 |   font-family: inherit;
46 |   background-color: #1a1a1a;
47 |   cursor: pointer;
48 |   transition: border-color 0.25s;
49 | }
50 | button:hover {
51 |   border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 |   outline: 4px auto -webkit-focus-ring-color;
56 | }
57 | 
58 | @media (prefers-color-scheme: light) {
59 |   :root {
60 |     color: #213547;
61 |     background-color: #ffffff;
62 |   }
63 |   a:hover {
64 |     color: #747bff;
65 |   }
66 |   button {
67 |     background-color: #f9f9f9;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/examples/react-basic/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import './index.css'
 5 | import 'virtual:uno.css'
 6 | 
 7 | ReactDOM.createRoot(document.getElementById('root')!).render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 | )
12 | 


--------------------------------------------------------------------------------
/examples/react-basic/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/examples/react-basic/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src"],
24 |   "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/react-basic/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/react-basic/uno.config.ts:
--------------------------------------------------------------------------------
 1 | // uno.config.ts
 2 | import {
 3 |   defineConfig,
 4 |   presetAttributify,
 5 |   presetIcons,
 6 |   presetTypography,
 7 |   presetUno,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from "unocss";
11 | 
12 | export default defineConfig({
13 |   // ...UnoCSS options
14 |   shortcuts: [
15 |     ['btn', 'px4 py1 rounded-md whitespace-nowrap bg-gray/20 hover:bg-gray/30 font-500'],
16 |     ['icon-btn', 'p3 rounded-md'],
17 |     ['full', 'w-full h-full'],
18 |     ['flex-center', 'flex items-center justify-center'],
19 |   ],
20 |   presets: [
21 |     presetUno(),
22 |     presetAttributify(),
23 |     presetIcons({
24 |       scale: 1.2,
25 |       autoInstall: true,
26 |     }),
27 |     presetTypography(),
28 |   ],
29 |   transformers: [transformerDirectives(), transformerVariantGroup()],
30 | });
31 | 


--------------------------------------------------------------------------------
/examples/react-basic/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | import UnoCSS from "unocss/vite"
4 | 
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 |   plugins: [react(), UnoCSS()],
8 | })
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ipad-cursor",
 3 |   "version": "0.5.2",
 4 |   "description": "Mouse effect of iPad in browser that can be used in any framework",
 5 |   "scripts": {
 6 |     "dev": "cd ./playground && vite",
 7 |     "build": "node ./.build.mjs",
 8 |     "build:playground": "cd ./playground && vite-ssg build -c ./vite.config.ts",
 9 |     "publish": "node ./.build.mjs --publish",
10 |     "build:react-ts": "cd ./src/react && tsc"
11 |   },
12 |   "type": "module",
13 |   "main": "index.mjs",
14 |   "module": "index.mjs",
15 |   "types": "index.d.ts",
16 |   "exports": {
17 |     "./vue": {
18 |       "import": "./vue/index.mjs",
19 |       "types": "./vue/index.d.ts",
20 |       "default": "./vue/index.mjs"
21 |     },
22 |     "./react": {
23 |       "import": "./react/index.mjs",
24 |       "types": "./react/index.d.ts",
25 |       "default": "./react/index.mjs"
26 |     },
27 |     ".": {
28 |       "import": "./index.mjs",
29 |       "types": "./index.d.ts",
30 |       "default": "./index.mjs"
31 |     }
32 |   },
33 |   "keywords": [
34 |     "iPad Cursor",
35 |     "Mouse Effect",
36 |     "Vue",
37 |     "iPad",
38 |     "Mouse",
39 |     "Cursor"
40 |   ],
41 |   "author": "CatsJuice<https://github.com/CatsJuice>",
42 |   "repository": "https://github.com/catsjuice/ipad-cursor/",
43 |   "license": "MIT",
44 |   "devDependencies": {
45 |     "@formkit/auto-animate": "^0.7.0",
46 |     "@highlightjs/vue-plugin": "^2.1.0",
47 |     "@iconify-json/carbon": "^1.1.18",
48 |     "@iconify-json/logos": "^1.1.33",
49 |     "@iconify-json/vscode-icons": "^1.1.25",
50 |     "@rollup/plugin-terser": "^0.4.3",
51 |     "@rollup/plugin-typescript": "^11.1.2",
52 |     "@types/highlight.js": "^10.1.0",
53 |     "@types/node": "^20.3.3",
54 |     "@types/react": "^18.2.14",
55 |     "@unhead/vue": "^1.1.30",
56 |     "@vitejs/plugin-vue": "^4.1.0",
57 |     "@vueuse/core": "^10.2.1",
58 |     "brotli-size": "^4.0.0",
59 |     "bumpp": "^9.1.1",
60 |     "chalk": "^5.3.0",
61 |     "execa": "^7.1.1",
62 |     "highlight.js": "^11.8.0",
63 |     "highlightjs-vue": "^1.0.0",
64 |     "pretty-bytes": "^6.1.0",
65 |     "prompts": "^2.4.2",
66 |     "react": "^18.2.0",
67 |     "shx": "^0.3.4",
68 |     "taze": "^0.11.2",
69 |     "tslib": "^2.6.0",
70 |     "typescript": "^5.0.2",
71 |     "unocss": "^0.53.4",
72 |     "url": "^0.11.1",
73 |     "vite": "^4.3.9",
74 |     "vite-ssg": "^0.23.0",
75 |     "vue": "^3.2.47",
76 |     "vue-highlight.js": "^3.1.0",
77 |     "vue-router": "^4.2.3",
78 |     "vue-tsc": "^1.4.2"
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/playground/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + Vue + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/playground/public/ipad-cursor-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_304_284)">
 3 | <g filter="url(#filter0_iii_304_284)">
 4 | <rect width="100" height="100" rx="26" fill="url(#paint0_linear_304_284)"/>
 5 | </g>
 6 | <g filter="url(#filter1_dddd_304_284)">
 7 | <path d="M54.624 83C54.112 83 53.184 82.904 51.84 82.712C50.496 82.52 48.992 82.264 47.328 81.944C45.664 81.624 44.096 81.304 42.624 80.984C41.216 80.6 40.128 80.28 39.36 80.024C39.36 79.576 39.456 79.16 39.648 78.776C39.84 78.392 40.032 78.072 40.224 77.816L42.816 77.432C43.52 77.304 44.096 77.016 44.544 76.568C45.056 76.12 45.44 75.384 45.696 74.36C46.016 73.336 46.176 71.896 46.176 70.04V44.12C46.176 43.48 46.048 43 45.792 42.68C45.6 42.36 45.248 42.104 44.736 41.912L39.36 39.992C39.424 39.352 39.552 38.808 39.744 38.36C39.936 37.848 40.096 37.496 40.224 37.304C41.248 36.792 42.528 36.28 44.064 35.768C45.664 35.256 46.88 35 47.712 35C49.376 35 50.784 35.64 51.936 36.92C53.152 38.136 53.76 39.64 53.76 41.432V71.768C53.76 73.112 53.632 74.264 53.376 75.224C53.184 76.12 52.992 76.76 52.8 77.144L60.672 77.912C60.8 78.104 60.928 78.36 61.056 78.68C61.248 79 61.344 79.416 61.344 79.928C61.024 80.44 60.416 80.92 59.52 81.368C58.688 81.816 57.792 82.2 56.832 82.52C55.936 82.84 55.2 83 54.624 83Z" fill="url(#paint1_linear_304_284)"/>
 8 | <path d="M45.5168 26.4478C44.2162 27.1204 38.175 12.7409 42.2479 13.1258C51.4999 13.9999 56.9999 19.9999 55.9999 19.9999C54.9999 19.9999 54.4824 19.8893 51.0168 19.4478C47.5512 19.0064 52.0168 22.9478 55.2534 25.9047C52.002 25.2321 50.2338 23.9478 48.5168 23.4478C46.7998 22.9478 46.8173 25.7752 45.5168 26.4478Z" fill="#EFEFEF"/>
 9 | </g>
10 | </g>
11 | <defs>
12 | <filter id="filter0_iii_304_284" x="-4" y="-4" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
13 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
14 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
15 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
16 | <feOffset dx="4" dy="4"/>
17 | <feGaussianBlur stdDeviation="2.5"/>
18 | <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
19 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0"/>
20 | <feBlend mode="normal" in2="shape" result="effect1_innerShadow_304_284"/>
21 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
22 | <feOffset dx="-4" dy="-4"/>
23 | <feGaussianBlur stdDeviation="2"/>
24 | <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
25 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.46 0"/>
26 | <feBlend mode="normal" in2="effect1_innerShadow_304_284" result="effect2_innerShadow_304_284"/>
27 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
28 | <feOffset dx="1" dy="1"/>
29 | <feGaussianBlur stdDeviation="1"/>
30 | <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
31 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0"/>
32 | <feBlend mode="normal" in2="effect2_innerShadow_304_284" result="effect3_innerShadow_304_284"/>
33 | </filter>
34 | <filter id="filter1_dddd_304_284" x="21.36" y="-4.88184" width="49.984" height="97.8818" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
35 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
36 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
37 | <feOffset dx="4" dy="4"/>
38 | <feGaussianBlur stdDeviation="2"/>
39 | <feComposite in2="hardAlpha" operator="out"/>
40 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.66 0"/>
41 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_304_284"/>
42 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
43 | <feOffset dx="-4" dy="-4"/>
44 | <feGaussianBlur stdDeviation="7"/>
45 | <feComposite in2="hardAlpha" operator="out"/>
46 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
47 | <feBlend mode="normal" in2="effect1_dropShadow_304_284" result="effect2_dropShadow_304_284"/>
48 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
49 | <feOffset dx="2" dy="2"/>
50 | <feGaussianBlur stdDeviation="1"/>
51 | <feComposite in2="hardAlpha" operator="out"/>
52 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
53 | <feBlend mode="normal" in2="effect2_dropShadow_304_284" result="effect3_dropShadow_304_284"/>
54 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
55 | <feOffset dx="-2" dy="-2"/>
56 | <feGaussianBlur stdDeviation="3"/>
57 | <feComposite in2="hardAlpha" operator="out"/>
58 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.11 0"/>
59 | <feBlend mode="normal" in2="effect3_dropShadow_304_284" result="effect4_dropShadow_304_284"/>
60 | <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_304_284" result="shape"/>
61 | </filter>
62 | <linearGradient id="paint0_linear_304_284" x1="1.5" y1="-2" x2="98" y2="103" gradientUnits="userSpaceOnUse">
63 | <stop stop-color="#333333"/>
64 | <stop offset="1" stop-color="#222222"/>
65 | </linearGradient>
66 | <linearGradient id="paint1_linear_304_284" x1="46.0001" y1="12.5" x2="59.0001" y2="79" gradientUnits="userSpaceOnUse">
67 | <stop stop-color="#CACACA"/>
68 | <stop offset="1" stop-color="#ECECEC"/>
69 | </linearGradient>
70 | <clipPath id="clip0_304_284">
71 | <rect width="100" height="100" fill="white"/>
72 | </clipPath>
73 | </defs>
74 | </svg>
75 | 


--------------------------------------------------------------------------------
/playground/public/ipad-cursor.svg:
--------------------------------------------------------------------------------
 1 | <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_ii_269_262)">
 3 | <rect width="100" height="100" rx="26" fill="url(#paint0_linear_269_262)"/>
 4 | </g>
 5 | <g filter="url(#filter1_dddd_269_262)">
 6 | <path d="M54.624 82.9999C54.112 82.9999 53.184 82.9039 51.84 82.7119C50.496 82.5199 48.992 82.2639 47.328 81.9439C45.664 81.6239 44.096 81.3039 42.624 80.9839C41.216 80.5999 40.128 80.2799 39.36 80.0239C39.36 79.5759 39.456 79.1599 39.648 78.7759C39.84 78.3919 40.032 78.0719 40.224 77.8159L42.816 77.4319C43.52 77.3039 44.096 77.0159 44.544 76.5679C45.056 76.1199 45.44 75.3839 45.696 74.3599C46.016 73.3359 46.176 71.8959 46.176 70.0399V44.1199C46.176 43.4799 46.048 42.9999 45.792 42.6799C45.6 42.3599 45.248 42.1039 44.736 41.9119L39.36 39.9919C39.424 39.3519 39.552 38.8079 39.744 38.3599C39.936 37.8479 40.096 37.4959 40.224 37.3039C41.248 36.7919 42.528 36.2799 44.064 35.7679C45.664 35.2559 46.88 34.9999 47.712 34.9999C49.376 34.9999 50.784 35.6399 51.936 36.9199C53.152 38.1359 53.76 39.6399 53.76 41.4319V71.7679C53.76 73.1119 53.632 74.2639 53.376 75.2239C53.184 76.1199 52.992 76.7599 52.8 77.1439L60.672 77.9119C60.8 78.1039 60.928 78.3599 61.056 78.6799C61.248 78.9999 61.344 79.4159 61.344 79.9279C61.024 80.4399 60.416 80.9199 59.52 81.3679C58.688 81.8159 57.792 82.1999 56.832 82.5199C55.936 82.8399 55.2 82.9999 54.624 82.9999Z" fill="url(#paint1_linear_269_262)"/>
 7 | <path d="M45.5169 26.4478C44.2163 27.1204 38.1751 12.7409 42.248 13.1258C51.5 13.9999 57 19.9999 56 19.9999C55 19.9999 54.4825 19.8893 51.0169 19.4478C47.5512 19.0064 52.0169 22.9478 55.2534 25.9047C52.0021 25.2321 50.2338 23.9478 48.5169 23.4478C46.7999 22.9478 46.8174 25.7752 45.5169 26.4478Z" fill="black"/>
 8 | </g>
 9 | <defs>
10 | <filter id="filter0_ii_269_262" x="-4" y="-4" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
11 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
12 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
13 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
14 | <feOffset dx="4" dy="4"/>
15 | <feGaussianBlur stdDeviation="2.5"/>
16 | <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
17 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.52 0"/>
18 | <feBlend mode="normal" in2="shape" result="effect1_innerShadow_269_262"/>
19 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
20 | <feOffset dx="-4" dy="-4"/>
21 | <feGaussianBlur stdDeviation="2"/>
22 | <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
23 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0"/>
24 | <feBlend mode="normal" in2="effect1_innerShadow_269_262" result="effect2_innerShadow_269_262"/>
25 | </filter>
26 | <filter id="filter1_dddd_269_262" x="31.36" y="5.11816" width="37.984" height="85.8818" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
27 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
28 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
29 | <feOffset dx="4" dy="4"/>
30 | <feGaussianBlur stdDeviation="2"/>
31 | <feComposite in2="hardAlpha" operator="out"/>
32 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
33 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_269_262"/>
34 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
35 | <feOffset dx="-4" dy="-4"/>
36 | <feGaussianBlur stdDeviation="2"/>
37 | <feComposite in2="hardAlpha" operator="out"/>
38 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0"/>
39 | <feBlend mode="normal" in2="effect1_dropShadow_269_262" result="effect2_dropShadow_269_262"/>
40 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
41 | <feOffset dx="2" dy="2"/>
42 | <feGaussianBlur stdDeviation="1"/>
43 | <feComposite in2="hardAlpha" operator="out"/>
44 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
45 | <feBlend mode="normal" in2="effect2_dropShadow_269_262" result="effect3_dropShadow_269_262"/>
46 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
47 | <feOffset dx="-2" dy="-2"/>
48 | <feGaussianBlur stdDeviation="1"/>
49 | <feComposite in2="hardAlpha" operator="out"/>
50 | <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
51 | <feBlend mode="normal" in2="effect3_dropShadow_269_262" result="effect4_dropShadow_269_262"/>
52 | <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_269_262" result="shape"/>
53 | </filter>
54 | <linearGradient id="paint0_linear_269_262" x1="1.5" y1="-2" x2="98" y2="103" gradientUnits="userSpaceOnUse">
55 | <stop stop-color="#E3E3E3"/>
56 | <stop offset="1" stop-color="#E1E1E1"/>
57 | </linearGradient>
58 | <linearGradient id="paint1_linear_269_262" x1="46.0001" y1="12.4999" x2="59.0001" y2="78.9999" gradientUnits="userSpaceOnUse">
59 | <stop stop-color="#2C2C2C"/>
60 | <stop offset="1" stop-color="#0C0C0C"/>
61 | </linearGradient>
62 | </defs>
63 | </svg>
64 | 


--------------------------------------------------------------------------------
/playground/public/og-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/playground/public/og-image.jpg


--------------------------------------------------------------------------------
/playground/public/screenshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CatsJuice/ipad-cursor/34190bd39827e91aff6b6188a39b27695eba23cc/playground/public/screenshot.gif


--------------------------------------------------------------------------------
/playground/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import AppHeader from "./components/AppHeader.vue";
 3 | import { useCursor } from "../../src/vue/index";
 4 | import { useDark } from "@vueuse/core";
 5 | import { useHead } from "@unhead/vue";
 6 | import { watchEffect } from 'vue';
 7 | 
 8 | const isDark = useDark();
 9 | const { updateConfig } = useCursor();
10 | 
11 | const appName = "ipad-cursor";
12 | const appDesc = "iPad Cursor Effect in Browser";
13 | useHead({
14 |   title: appName,
15 |   link: [{ rel: "icon", href: "/ipad-cursor.svg", sizes: "any" }],
16 |   meta: [
17 |     { name: "description", content: appDesc },
18 |     { property: "og:title", content: appName },
19 |     { property: "og:description", content: appDesc },
20 |     { property: "og:image", content: "/og-image.jpg" },
21 |   ],
22 | });
23 | 
24 | watchEffect(() =>
25 |   updateConfig({
26 |     blockStyle: {
27 |       border: `1px solid ${isDark.value ? "#ffffff80" : "#00000020"}`,
28 |     },
29 |   })
30 | );
31 | </script>
32 | 
33 | <template>
34 |   <AppHeader fixed top-0 right-0 />
35 |   <router-view w-full px4 max-w-960px mx-auto />
36 | </template>
37 | 
38 | <style>
39 | * {
40 |   box-sizing: border-box;
41 | }
42 | html,
43 | body,
44 | #app {
45 |   width: 100%;
46 |   height: 100%;
47 | }
48 | 
49 | a,
50 | a:hover {
51 |   color: inherit;
52 |   text-decoration: none;
53 | }
54 | 
55 | html {
56 |   --dark: #222;
57 |   --light: #fff;
58 |   --dark30: rgba(0, 0, 0, 0.3);
59 |   --light30: rgba(255, 255, 255, 0.3);
60 |   --bg: var(--light);
61 |   --front: var(--dark);
62 | 
63 |   background-color: var(--bg) !important;
64 |   color: var(--front) !important;
65 | }
66 | html.dark {
67 |   --bg: var(--dark);
68 |   --front: var(--light);
69 | }
70 | 
71 | #app {
72 |   min-height: 100%;
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/playground/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/playground/src/codes/basic.ts:
--------------------------------------------------------------------------------
 1 | import { UNPKG_CDN } from "../constants";
 2 | import { Code } from "../types/lang";
 3 | 
 4 | export const basicCodes: Code[] = [
 5 |   {
 6 |     lang: "html",
 7 |     code: `
 8 | <body>
 9 |   <div>
10 |     <span>
11 |       will be text
12 |     </span>
13 |     <button data-cursor="block">
14 |       Button
15 |     </button>
16 |   </div>
17 | 
18 |   <script type="module">
19 |     import { initCursor } from "${UNPKG_CDN}";
20 |     initCursor();
21 |   </script>
22 | </body>`,
23 |   },
24 |   {
25 |     lang: "vue",
26 |     code: `<script setup>
27 | import { useCursor } from "ipad-cursor/vue";
28 | 
29 | useCursor()
30 | </script>
31 |     
32 | <template>
33 |   <div>
34 |     <span>
35 |       will be text
36 |     </span>
37 |     <button data-cursor="block">
38 |       Button
39 |     </button>
40 |   </div>
41 | </template>`,
42 |   },
43 |   {
44 |     lang: "react",
45 |     code: `// app.tsx
46 | import { IPadCursorProvider, useIPadCursor } from "ipad-cursor/react";
47 | import type { IpadCursorConfig } from "ipad-cursor";
48 | 
49 | function App() {
50 |   const config: IpadCursorConfig = {};
51 |   useIPadCursor();
52 | 
53 |   return (
54 |     <IPadCursorProvider config={config}>
55 |       <div data-cursor="block"></div>
56 |       <div data-cursor="text"></div>
57 |     </IPadCursorProvider>
58 |   )
59 | }
60 | `
61 |   }
62 | ];
63 | 


--------------------------------------------------------------------------------
/playground/src/codes/blur-effect.ts:
--------------------------------------------------------------------------------
 1 | import { UNPKG_CDN } from "../constants";
 2 | import { Code } from "../types/lang";
 3 | 
 4 | export const blurEffectCodes: Code[] = [
 5 |   {
 6 |     lang: "html",
 7 |     code: `
 8 | <body>
 9 |   <div>
10 |     <span>
11 |       will be text
12 |     </span>
13 |     <button 
14 |       data-cursor="block" 
15 |       data-cursor-style="backdropBlur: 0; durationBackdropFilter: 1000"
16 |     >
17 |       Button
18 |     </button>
19 |   </div>
20 | 
21 |   <script type="module">
22 |     import { initCursor } from "${UNPKG_CDN}";
23 |     initCursor();
24 |   </script>
25 | </body>`,
26 |   },
27 |   {
28 |     lang: "vue",
29 |     code: `<script setup>
30 | import { useCursor } from "ipad-cursor/vue";
31 | 
32 | const { customCursorStyle } = useCursor()
33 | const style = customCursorStyle({
34 |   backdropBlur: 0,
35 |   durationBackdropFilter: 1000,
36 | })
37 | </script>
38 |     
39 | <template>
40 |   <div>
41 |     <span>
42 |       will be text
43 |     </span>
44 |     <button data-cursor="block" :data-cursor-style="style">
45 |       Button
46 |     </button>
47 |   </div>
48 | </template>`,
49 |   },
50 |   {
51 |     lang: "react",
52 |     code: `// app.tsx
53 | import { IPadCursorProvider, useIPadCursor } from "ipad-cursor/react";
54 | import type { IpadCursorConfig } from "ipad-cursor";
55 | 
56 | function App() {
57 |   const config: IpadCursorConfig = {};
58 |   const { customCursorStyle } = useIPadCursor();
59 |   const style = customCursorStyle({
60 |     backdropBlur: 0,
61 |     durationBackdropFilter: 1000,
62 |   });
63 | 
64 |   return (
65 |     <IPadCursorProvider config={config}>
66 |       <span>
67 |         will be text
68 |       </span>
69 |       <button data-cursor="block" data-cursor-style={style}>
70 |         Button
71 |       </button>
72 |     </IPadCursorProvider>
73 |   )
74 | }
75 | `,
76 |   },
77 | ];
78 | 


--------------------------------------------------------------------------------
/playground/src/codes/custom-anime-speed.ts:
--------------------------------------------------------------------------------
 1 | import { UNPKG_CDN } from "../constants";
 2 | import { Code } from "../types/lang";
 3 | 
 4 | export const customAnimeSpeedCodes: Code[] = [
 5 |   {
 6 |     lang: "html",
 7 |     code: `
 8 | <body>
 9 |   <div>
10 |     <span>
11 |       will be text
12 |     </span>
13 |     <button 
14 |       data-cursor="block" 
15 |       data-cursor-style="durationBase: 2000"
16 |     >
17 |       Button
18 |     </button>
19 |   </div>
20 | 
21 |   <script type="module">
22 |     import { initCursor } from "${UNPKG_CDN}";
23 |     initCursor();
24 |   </script>
25 | </body>`,
26 |   },
27 |   {
28 |     lang: "vue",
29 |     code: `<script setup>
30 | import { useCursor } from "ipad-cursor/vue";
31 | 
32 | const { customCursorStyle } = useCursor()
33 | const style = customCursorStyle({
34 |   durationBase: 2000,
35 | })
36 | </script>
37 |     
38 | <template>
39 |   <div>
40 |     <span>
41 |       will be text
42 |     </span>
43 |     <button data-cursor="block" :data-cursor-style="style">
44 |       Button
45 |     </button>
46 |   </div>
47 | </template>`,
48 |   },
49 | 
50 |   {
51 |     lang: "react",
52 |     code: `// app.tsx
53 | import { IPadCursorProvider, useIPadCursor } from "ipad-cursor/react";
54 | import type { IpadCursorConfig } from "ipad-cursor";
55 | 
56 | function App() {
57 |   const config: IpadCursorConfig = {};
58 |   const { customCursorStyle } = useIPadCursor();
59 |   const style = customCursorStyle({
60 |     durationBase: 2000,
61 |   });
62 | 
63 |   return (
64 |     <IPadCursorProvider config={config}>
65 |       <span>
66 |         will be text
67 |       </span>
68 |       <button data-cursor="block" data-cursor-style={style}>
69 |         Button
70 |       </button>
71 |     </IPadCursorProvider>
72 |   )
73 | }
74 | `,
75 |   },
76 | ];
77 | 


--------------------------------------------------------------------------------
/playground/src/codes/custom-bg.ts:
--------------------------------------------------------------------------------
 1 | import { UNPKG_CDN } from "../constants";
 2 | import { Code } from "../types/lang";
 3 | 
 4 | export const customBgCodes: Code[] = [
 5 |   {
 6 |     lang: "html",
 7 |     code: `
 8 | <body>
 9 |   <div>
10 |     <span>
11 |       will be text
12 |     </span>
13 |     <button data-cursor="block" data-cursor-style="background: rgba(255, 0, 0, 0.2)">
14 |       Button
15 |     </button>
16 |   </div>
17 | 
18 |   <script type="module">
19 |     import { initCursor } from "${UNPKG_CDN}";
20 |     initCursor();
21 |   </script>
22 | </body>`,
23 |   },
24 |   {
25 |     lang: "vue",
26 |     code: `<script setup>
27 | import { useCursor } from "ipad-cursor/vue";
28 | 
29 | useCursor()
30 | </script>
31 |     
32 | <template>
33 |   <div>
34 |     <span>
35 |       will be text
36 |     </span>
37 |     <button data-cursor="block"  data-cursor-style="background: rgba(255, 0, 0, 0.2)">
38 |       Button
39 |     </button>
40 |   </div>
41 | </template>`,
42 |   },
43 |   {
44 |     lang: "react",
45 |     code: `// app.tsx
46 | import { IPadCursorProvider, useIPadCursor } from "ipad-cursor/react";
47 | import type { IpadCursorConfig } from "ipad-cursor";
48 | 
49 | function App() {
50 |   const config: IpadCursorConfig = {};
51 |   useIPadCursor();
52 | 
53 |   return (
54 |     <IPadCursorProvider config={config}>
55 |       <span>
56 |         will be text
57 |       </span>
58 |       <button data-cursor="block"  data-cursor-style="background: rgba(255, 0, 0, 0.2)">
59 |         Button
60 |       </button>
61 |     </IPadCursorProvider>
62 |   )
63 | }
64 | `,
65 |   },
66 | ];
67 | 


--------------------------------------------------------------------------------
/playground/src/codes/custom-border.ts:
--------------------------------------------------------------------------------
 1 | import { UNPKG_CDN } from "../constants";
 2 | import { Code } from "../types/lang";
 3 | 
 4 | export const customBorderCodes: Code[] = [
 5 |   {
 6 |     lang: "html",
 7 |     code: `
 8 | <body>
 9 |   <div>
10 |     <span>
11 |       will be text
12 |     </span>
13 |     <button 
14 |       data-cursor="block" 
15 |       data-cursor-style="border: 1px solid currentColor"
16 |     >
17 |       Button
18 |     </button>
19 |   </div>
20 | 
21 |   <script type="module">
22 |     import { initCursor } from "${UNPKG_CDN}";
23 |     initCursor();
24 |   </script>
25 | </body>`,
26 |   },
27 |   {
28 |     lang: "vue",
29 |     code: `<script setup>
30 | import { useCursor } from "ipad-cursor/vue";
31 | 
32 | const { customCursorStyle } = useCursor()
33 | const style = customCursorStyle({
34 |   border: '1px solid currentColor',
35 | })
36 | </script>
37 |     
38 | <template>
39 |   <div>
40 |     <span>
41 |       will be text
42 |     </span>
43 |     <button data-cursor="block" :data-cursor-style="style">
44 |       Button
45 |     </button>
46 |   </div>
47 | </template>`,
48 |   },
49 | 
50 | 
51 |   {
52 |     lang: "react",
53 |     code: `// app.tsx
54 | import { IPadCursorProvider, useIPadCursor } from "ipad-cursor/react";
55 | import type { IpadCursorConfig } from "ipad-cursor";
56 | 
57 | function App() {
58 |   const config: IpadCursorConfig = {};
59 |   const { customCursorStyle } = useIPadCursor();
60 |   const style = customCursorStyle({
61 |     border: '1px solid currentColor',
62 |   });
63 | 
64 |   return (
65 |     <IPadCursorProvider config={config}>
66 |       <span>
67 |         will be text
68 |       </span>
69 |       <button data-cursor="block" data-cursor-style={style}>
70 |         Button
71 |       </button>
72 |     </IPadCursorProvider>
73 |   )
74 | }
75 | `,
76 |   },
77 | ];
78 | 


--------------------------------------------------------------------------------
/playground/src/codes/install.ts:
--------------------------------------------------------------------------------
 1 | import { packageName } from "../constants";
 2 | import { Code } from "../types/lang";
 3 | 
 4 | export const installCodes: Code[] = [
 5 |   {
 6 |     lang: "pnpm",
 7 |     title: "Pnpm",
 8 |     code: `pnpm i ${packageName}`,
 9 |   },
10 |   {
11 |     lang: "npm",
12 |     title: 'NPM',
13 |     code: `npm i ${packageName} --save`,
14 |   },
15 |   {
16 |     lang: "yarn",
17 |     title: "Yarn",
18 |     code: `yarn add ${packageName}`,
19 |   },
20 | ];
21 | 


--------------------------------------------------------------------------------
/playground/src/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useDark, useToggle } from "@vueuse/core";
 3 | const isDark = useDark();
 4 | const toggleDark = useToggle(isDark);
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div
 9 |     class="app-header"
10 |     flex="~"
11 |     gap-3
12 |     justify-end
13 |     items-center
14 |     py7
15 |     px8
16 |   >
17 |     <div rounded-10px v-cursor-block p1 @click="toggleDark()">
18 |       <div v-if="isDark" p0 icon-btn i-carbon:sun text-xl />
19 |       <div v-else p0 icon-btn i-carbon:moon text-xl />
20 |     </div>
21 | 
22 |     <div rounded-10px v-cursor-block p1>
23 |       <a href="https://twitter.com/cats_juice" text-xl>
24 |         <div p0 icon-btn i-carbon:logo-twitter />
25 |       </a>
26 |     </div>
27 | 
28 |     <div rounded-10px v-cursor-block p1>
29 |       <a href="https://github.com/CatsJuice/ipad-cursor" text-xl>
30 |         <div p0 icon-btn i-carbon:logo-github />
31 |       </a>
32 |     </div>
33 |   </div>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/playground/src/components/CodeBox/index.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed, ref } from "vue";
  3 | import LanguageIcon from "../LanguageIcon.vue";
  4 | import type { Code } from "../../types/lang";
  5 | import { useClipboard } from "@vueuse/core";
  6 | 
  7 | const props = defineProps<{
  8 |   codes: Array<Code>;
  9 | }>();
 10 | 
 11 | const active = ref(0);
 12 | const { copy } = useClipboard();
 13 | 
 14 | const activeCode = computed(() => props.codes[active.value]);
 15 | 
 16 | function onCopy(e: any) {
 17 |   const el = e.target as HTMLElement;
 18 |   const tooltip = document.createElement("div");
 19 |   const rect = el.getBoundingClientRect();
 20 |   tooltip.textContent = "Copied!";
 21 |   tooltip.classList.add("tooltip");
 22 |   tooltip.style.position = "fixed";
 23 |   tooltip.style.top = `${rect.top + rect.height + 12}px`;
 24 |   tooltip.style.left = `${rect.left + rect.width / 2}px`;
 25 |   tooltip.style.transform = "translate(-50%, 0)";
 26 |   document.body.appendChild(tooltip);
 27 | 
 28 |   copy(activeCode.value.code);
 29 | 
 30 |   setTimeout(() => {
 31 |     tooltip.remove();
 32 |   }, 1000);
 33 | }
 34 | </script>
 35 | 
 36 | <template>
 37 |   <div
 38 |     bg-dark-8
 39 |     rounded-3
 40 |     p2
 41 |     class="code-box"
 42 |     flex="~ col nowrap gap-2"
 43 |     overflow-hidden
 44 |     relative
 45 |   >
 46 |     <header relative flex="~ gap-3" items-center w-full>
 47 |       <div v-for="({ lang, title }, index) in codes" :key="title || lang">
 48 |         <div
 49 |           v-cursor-block="{ background: 'rgba(255, 255, 255, 0.2)' }"
 50 |           :class="{ 'lang-tab--active': active === index }"
 51 |           class="lang-tab"
 52 |           flex="~ gap-2"
 53 |           flex-center
 54 |           rounded-2
 55 |           transition="~ all"
 56 |           @click="active = index"
 57 |           px4
 58 |           py1
 59 |           font-500
 60 |           text-white
 61 |         >
 62 |           <LanguageIcon :lang="lang" />
 63 |           <div v-if="title">{{ title }}</div>
 64 |           <div v-else capitalize>{{ lang }}</div>
 65 |         </div>
 66 |       </div>
 67 |     </header>
 68 | 
 69 |     <main
 70 |       v-auto-animate
 71 |       bg="#2b2b2b"
 72 |       h-0
 73 |       flex="~ 1"
 74 |       w-full
 75 |       overflow-auto
 76 |       rounded-2
 77 |       v-cursor-text
 78 |     >
 79 |       <highlightjs
 80 |         :key="activeCode.lang"
 81 |         :language="activeCode.lang"
 82 |         :code="activeCode.code"
 83 |       />
 84 |     </main>
 85 | 
 86 |     <div
 87 |       backdrop-blur-12px
 88 |       right-12px
 89 |       top-54px
 90 |       absolute
 91 |       w-36px
 92 |       h-36px
 93 |       class="icon-btn"
 94 |       v-cursor-block
 95 |       p="1"
 96 |       text-sm
 97 |       flex-center
 98 |       @click="onCopy"
 99 |       text-white
100 |     >
101 |       <div i-carbon:copy />
102 |     </div>
103 |   </div>
104 | </template>
105 | 
106 | <style>
107 | .tooltip {
108 |   background: rgba(0, 0, 0, 0.5);
109 |   backdrop-filter: blur(12px) saturate(180%);
110 |   color: white;
111 |   font-size: 0.7rem;
112 |   padding: 0.2rem 0.5rem;
113 |   border-radius: 4px;
114 | }
115 | .lang-tab {
116 |   opacity: 0.8;
117 | }
118 | .lang-tab--active {
119 |   opacity: 1;
120 |   background-color: rgba(120, 120, 120, 0.3);
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/playground/src/components/LanguageIcon.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Lang } from '../types/lang';
 3 | 
 4 | 
 5 | defineProps<{lang: Lang}>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div v-if="lang === 'vue'" i-logos:vue />
10 |   <div v-else-if="lang === 'js'" i-logos:javascript />
11 |   <div v-else-if="lang === 'ts'" i-logos:typescript-icon />
12 |   <div v-else-if="lang === 'html'" i-vscode-icons:file-type-html />
13 |   <div v-else-if="lang === 'npm'" i-logos:npm />
14 |   <div v-else-if="lang === 'yarn'" i-logos:yarn />
15 |   <div v-else-if="lang === 'pnpm'" i-logos:pnpm />
16 |   <div v-else-if="lang === 'react'" i-logos:react />
17 | </template>


--------------------------------------------------------------------------------
/playground/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const packageName = 'ipad-cursor';
2 | export const UNPKG_CDN = `https://unpkg.com/${packageName}@latest`;


--------------------------------------------------------------------------------
/playground/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { ViteSSG } from "vite-ssg";
 2 | import "virtual:uno.css";
 3 | import "./style.css";
 4 | import App from "./App.vue";
 5 | import hljsVuePlugin from "@highlightjs/vue-plugin";
 6 | import "highlight.js/styles/base16/darcula.css";
 7 | import hljs from "highlight.js/lib/core";
 8 | import javascript from "highlight.js/lib/languages/javascript";
 9 | import typescript from "highlight.js/lib/languages/typescript";
10 | import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
11 | import vue from 'vue-highlight.js/lib/languages/vue';
12 | import { ipadCursorPlugin } from "../../src/vue";
13 | 
14 | 
15 | hljs.registerLanguage("js", javascript);
16 | hljs.registerLanguage("ts", typescript);
17 | hljs.registerLanguage("vue", vue);
18 | 
19 | // createApp(App).mount('#app')
20 | export const createApp = ViteSSG(
21 |   App,
22 |   {
23 |     routes: [{ path: "/", component: () => import("./pages/index.vue") }],
24 |   },
25 |   (ctx) => {
26 |     ctx.app.use(hljsVuePlugin);
27 |     ctx.app.use(autoAnimatePlugin);
28 |     ctx.app.use(ipadCursorPlugin, {
29 |       enableMouseDownEffect: true,
30 |       enableAutoTextCursor: true,
31 |       enableLighting: true,
32 |       normalStyle: {
33 |         scale: 1,
34 |       },
35 |       blockPadding: "auto",
36 |       blockStyle: {
37 |         radius: "auto",
38 |       },
39 |     })
40 |   }
41 | );
42 | 


--------------------------------------------------------------------------------
/playground/src/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref, computed } from "vue";
  3 | 
  4 | import CodeBox from "../components/CodeBox/index.vue";
  5 | 
  6 | import { basicCodes } from "../codes/basic";
  7 | import { installCodes } from "../codes/install";
  8 | import { useCursor } from "../../../src/vue/index";
  9 | import { customBgCodes } from "../codes/custom-bg";
 10 | import { blurEffectCodes } from "../codes/blur-effect";
 11 | import { customBorderCodes } from "../codes/custom-border";
 12 | import { customAnimeSpeedCodes } from "../codes/custom-anime-speed";
 13 | import { useDark } from "@vueuse/core";
 14 | 
 15 | const isDark = useDark();
 16 | const { customCursorStyle, initCursor, disposeCursor } = useCursor({
 17 |   normalStyle: { backdropBlur: 12 },
 18 | });
 19 | 
 20 | const btns = [
 21 |   { label: "Default" },
 22 |   { label: "CustomBg", style: customCursorStyle({ background: "#ff204020" }) },
 23 |   {
 24 |     label: "Blur Effect",
 25 |     style: customCursorStyle({
 26 |       backdropBlur: 0,
 27 |       durationBackdropFilter: 1000,
 28 |     }),
 29 |   },
 30 |   {
 31 |     label: "Custom Border",
 32 |     style: customCursorStyle({
 33 |       border: "1px solid currentColor",
 34 |       radius: 0,
 35 |     }),
 36 |   },
 37 |   {
 38 |     label: "Custom Animation Speed",
 39 |     style: customCursorStyle({
 40 |       durationBase: 2000,
 41 |     }),
 42 |   },
 43 | ];
 44 | 
 45 | const activeBtn = ref(btns[0].label);
 46 | 
 47 | const showCodes = computed(() => {
 48 |   return (
 49 |     {
 50 |       default: basicCodes,
 51 |       CustomBg: customBgCodes,
 52 |       "Blur Effect": blurEffectCodes,
 53 |       "Custom Border": customBorderCodes,
 54 |       "Custom Animation Speed": customAnimeSpeedCodes,
 55 |     }[activeBtn.value] || basicCodes
 56 |   );
 57 | });
 58 | </script>
 59 | 
 60 | <template>
 61 |   <div  flex="~ col" items-center h-auto md:h-full md:justify-center py-100px md:py0>
 62 |     <div w-full flex="~ col" md:flex="~ row" gap-10 items-center md:justify-between md:items-start>
 63 |       <!-- logo, info -->
 64 |       <div
 65 |         flex="~ col gap-4"
 66 |         items-center
 67 |         md:items-start
 68 |         md:h-360px
 69 |         items-start
 70 |         justify-between
 71 |         min-w-340px
 72 |       >
 73 |         <!-- icon -->
 74 |         <div
 75 |           w-100px
 76 |           h-100px
 77 |           v-cursor-block
 78 |           rounded-26px
 79 |         >
 80 |           <img w-full h-full :src="isDark ? '/ipad-cursor-dark.svg' : '/ipad-cursor.svg'" />
 81 |         </div>
 82 |   
 83 |         <!-- slog -->
 84 |         <div flex="~ col" items-center text-center md:items-start md:text-left>
 85 |           <h2
 86 |             my-0
 87 |             mt-2
 88 |             v-cursor-text="{ background: 'currentColor' }"
 89 |           >
 90 |             iPad Cursor
 91 |           </h2>
 92 |           <div opacity-70>
 93 |             <div>Hack iPad's mouse effect in browser,</div>
 94 |             <div>can be used in any frameworks</div>
 95 |           </div>
 96 |   
 97 |           <CodeBox mt6 w-full :codes="installCodes" />
 98 |         </div>
 99 |       </div>
100 |   
101 |       <!-- demo -->
102 |       <div w-full md:w0 md:flex-1 flex="~ col items-center">
103 |         <CodeBox h-360px w-full min-w-200px max-w-500px :codes="showCodes" />
104 |         <div>
105 |           <!-- btns -->
106 |           <div flex="~ gap-2 wrap" justify-center items-center pt4>
107 |             <div
108 |               class="btn"
109 |               v-for="btn in btns"
110 |               :key="btn.label"
111 |               v-cursor-block="btn.style"
112 |               :class="
113 |                 activeBtn === btn.label ? ['outline'] : ['border-transparent']
114 |               "
115 |               @click="activeBtn = btn.label"
116 |             >
117 |               {{ btn.label }}
118 |             </div>
119 |           </div>
120 |   
121 |           <!-- actions -->
122 |           <div flex="~ gap-1 wrap" flex-center pt10>
123 |             <div
124 |               v-cursor-block
125 |               class="btn"
126 |               @click="disposeCursor()"
127 |             >
128 |               Recover mouse
129 |             </div>
130 |   
131 |             <div
132 |               v-cursor-block
133 |               class="btn"
134 |               @click="initCursor()"
135 |             >
136 |               Enable iPad Mouse
137 |             </div>
138 |           </div>
139 |         </div>
140 |       </div>
141 |     </div>
142 |   </div>
143 | </template>
144 | 


--------------------------------------------------------------------------------
/playground/src/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: rgba(255, 255, 255, 0.87);
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   -webkit-text-size-adjust: 100%;
15 | }
16 | 
17 | * {
18 |   box-sizing: border-box;
19 |   margin: 0;
20 |   padding: 0;
21 | }
22 | 


--------------------------------------------------------------------------------
/playground/src/types/lang.ts:
--------------------------------------------------------------------------------
1 | export type Lang = "js" | "ts" | "vue" | "html" | "yarn" | "npm" | "pnpm" | "react";
2 | export type Code = {
3 |   lang: Lang;
4 |   code: string;
5 |   title?: string;
6 | };
7 | 


--------------------------------------------------------------------------------
/playground/src/utils/clipboard.ts:
--------------------------------------------------------------------------------
 1 | export function copy2clipboard(text: string) {
 2 |   const el = document.createElement("textarea");
 3 |   el.value = text;
 4 |   el.setAttribute("readonly", "");
 5 |   el.style.position = "absolute";
 6 |   el.style.left = "-9999px";
 7 |   document.body.appendChild(el);
 8 |   el.select();
 9 |   document.execCommand("copy");
10 |   document.body.removeChild(el);
11 | } 


--------------------------------------------------------------------------------
/playground/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "preserve",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
24 |   "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 | 


--------------------------------------------------------------------------------
/playground/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/playground/uno.config.ts:
--------------------------------------------------------------------------------
 1 | // uno.config.ts
 2 | import {
 3 |   defineConfig,
 4 |   presetAttributify,
 5 |   presetIcons,
 6 |   presetTypography,
 7 |   presetUno,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from "unocss";
11 | 
12 | export default defineConfig({
13 |   // ...UnoCSS options
14 |   shortcuts: [
15 |     ['btn', 'px4 py1 rounded-md whitespace-nowrap bg-gray/20 hover:bg-gray/30 font-500'],
16 |     ['icon-btn', 'p3 rounded-md'],
17 |     ['full', 'w-full h-full'],
18 |     ['flex-center', 'flex items-center justify-center'],
19 |   ],
20 |   presets: [
21 |     presetUno(),
22 |     presetAttributify(),
23 |     presetIcons({
24 |       scale: 1.2,
25 |       autoInstall: true,
26 |     }),
27 |     presetTypography(),
28 |   ],
29 |   transformers: [transformerDirectives(), transformerVariantGroup()],
30 | });
31 | 


--------------------------------------------------------------------------------
/playground/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import UnoCSS from "unocss/vite";
 2 | import { defineConfig } from "vite";
 3 | import vue from "@vitejs/plugin-vue";
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue(), UnoCSS()],
 8 |   ssr: {
 9 |     noExternal: ['@highlightjs/vue-plugin']
10 |   }
11 | });
12 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from "@rollup/plugin-typescript";
 2 | import terser from "@rollup/plugin-terser";
 3 | 
 4 | const FRAMEWORK = process.env.FRAMEWORK || "index";
 5 | const DECLARATIONS = process.env.DECLARATIONS || false;
 6 | const MIN = process.env.MIN || false;
 7 | 
 8 | const external = ["vue", "react", "react-dom"];
 9 | 
10 | function createOutput() {
11 |   if (DECLARATIONS) {
12 |     return {
13 |       dir: "./dist",
14 |       format: "esm",
15 |     };
16 |   }
17 |   return {
18 |     file: `./dist/${FRAMEWORK !== "index" ? FRAMEWORK + "/" : ""}index.${
19 |       MIN ? "min.js" : "mjs"
20 |     }`,
21 |     format: "esm",
22 |   };
23 | }
24 | 
25 | function getExt() {
26 |   if (["react"].includes(FRAMEWORK)) return "tsx";
27 |   return "ts";
28 | }
29 | 
30 | const plugins = [
31 |   typescript({
32 |     tsconfig: "tsconfig.json",
33 |     compilerOptions: DECLARATIONS
34 |       ? {
35 |           declaration: true,
36 |           emitDeclarationOnly: true,
37 |         }
38 |       : {},
39 |     rootDir: "./",
40 |     outDir: `./dist`,
41 |     include: ["./src/**/*"],
42 |     exclude: ["./playground"],
43 |   }),
44 | ];
45 | 
46 | if (MIN) {
47 |   plugins.push(terser());
48 | }
49 | 
50 | export default {
51 |   external,
52 |   input: `./src/${
53 |     FRAMEWORK === "index" ? "" : FRAMEWORK + "/"
54 |   }index.${getExt()}`,
55 |   output: createOutput(),
56 |   plugins,
57 | };
58 | 


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
  1 | export type ICursorType = "normal" | "text" | "block";
  2 | /**
  3 |  *  if without unit, `px` is used by default
  4 |  */
  5 | type MaybeSize = string | number;
  6 | /** if without unit `ms` is used by default */
  7 | type MaybeDuration = string | number;
  8 | /** do not use 0x000000, use #000000 instead */
  9 | type MaybeColor = string;
 10 | /**
 11 |  * Configurations for the cursor
 12 |  */
 13 | export interface IpadCursorConfig {
 14 |     /**
 15 |      * Strength of adsorption, the larger the value,
 16 |      * The higher the value, the greater the range of the block that can be moved when it is hovered
 17 |      * @type {number} between 0 and 30
 18 |      * @default 10
 19 |      */
 20 |     adsorptionStrength?: number;
 21 |     /**
 22 |      * The class name of the cursor element
 23 |      * @type {string}
 24 |      * @default 'cursor'
 25 |      */
 26 |     className?: string;
 27 |     /**
 28 |      * The style of the cursor, when it does not hover on any element
 29 |      */
 30 |     normalStyle?: IpadCursorStyle;
 31 |     /**
 32 |      * The style of the cursor, when it hovers on text
 33 |      */
 34 |     textStyle?: IpadCursorStyle;
 35 |     /**
 36 |      * The style of the cursor, when it hovers on a block
 37 |      */
 38 |     blockStyle?: IpadCursorStyle;
 39 |     /**
 40 |      * The style of the cursor, when mousedown
 41 |      */
 42 |     mouseDownStyle?: IpadCursorStyle;
 43 |     /**
 44 |      * Cursor padding when hover on block
 45 |      */
 46 |     blockPadding?: number | "auto";
 47 |     /**
 48 |      * detect text node and apply text cursor automatically
 49 |      **/
 50 |     enableAutoTextCursor?: boolean;
 51 |     /**
 52 |      * enable detect dom change and auto call updateCursor
 53 |      **/
 54 |     enableAutoUpdateCursor?: boolean;
 55 |     /**
 56 |      * whether to enable lighting effect
 57 |      */
 58 |     enableLighting?: boolean;
 59 |     /**
 60 |      * whether to apply effect for mousedown action
 61 |      */
 62 |     enableMouseDownEffect?: boolean;
 63 | }
 64 | /**
 65 |  * Configurable style of the cursor (Experimental)
 66 |  * This feature is Experimental, so it's set to false by default.
 67 |  * And it not support `block` yet
 68 |  */
 69 | export interface IpadCursorStyle {
 70 |     /**
 71 |      * The width of the cursor
 72 |      */
 73 |     width?: MaybeSize;
 74 |     /**
 75 |      * The width of the cursor
 76 |      */
 77 |     height?: MaybeSize;
 78 |     /**
 79 |      * Border radius of cursor
 80 |      */
 81 |     radius?: MaybeSize | "auto";
 82 |     /**
 83 |      * Transition duration of basic properties like width, height, radius, border, background-color
 84 |      */
 85 |     durationBase?: MaybeDuration;
 86 |     /**
 87 |      * Transition duration of position: left, top
 88 |      */
 89 |     durationPosition?: MaybeDuration;
 90 |     /**
 91 |      * Transition duration of backdrop-filter
 92 |      */
 93 |     durationBackdropFilter?: MaybeDuration;
 94 |     /**
 95 |      * The background color of the cursor
 96 |      */
 97 |     background?: MaybeColor;
 98 |     /**
 99 |      * Border of the cursor
100 |      * @example '1px solid rgba(100, 100, 100, 0.1)'
101 |      */
102 |     border?: string;
103 |     /** z-index of cursor */
104 |     zIndex?: number;
105 |     /**
106 |      * Scale of cursor
107 |      */
108 |     scale?: number;
109 |     /**
110 |      * backdrop-filter blur
111 |      */
112 |     backdropBlur?: MaybeSize;
113 |     /**
114 |      * backdrop-filter saturate
115 |      */
116 |     backdropSaturate?: string;
117 | }
118 | /**
119 |  * Init cursor, hide default cursor, and listen mousemove event
120 |  * will only run once in client even if called multiple times
121 |  * @returns
122 |  */
123 | declare function initCursor(_config?: IpadCursorConfig): void;
124 | /**
125 |  * destroy cursor, remove event listener and remove cursor element
126 |  * @returns
127 |  */
128 | declare function disposeCursor(): void;
129 | /**
130 |  * Update current Configuration
131 |  * @param _config
132 |  */
133 | declare function updateConfig(_config: IpadCursorConfig): IpadCursorConfig;
134 | /**
135 |  * Detect all interactive elements in the page
136 |  * Update the binding of events, remove listeners for elements that are removed
137 |  * @returns
138 |  */
139 | declare function updateCursor(): void;
140 | /**
141 |  * Create custom style that can be bound to `data-cursor-style`
142 |  * @param style
143 |  */
144 | declare function customCursorStyle(style: IpadCursorStyle & Record<string, any>): string;
145 | declare function resetCursor(): void;
146 | declare const CursorType: {
147 |     TEXT: ICursorType;
148 |     BLOCK: ICursorType;
149 | };
150 | declare const exported: {
151 |     CursorType: {
152 |         TEXT: ICursorType;
153 |         BLOCK: ICursorType;
154 |     };
155 |     resetCursor: typeof resetCursor;
156 |     initCursor: typeof initCursor;
157 |     updateCursor: typeof updateCursor;
158 |     disposeCursor: typeof disposeCursor;
159 |     updateConfig: typeof updateConfig;
160 |     customCursorStyle: typeof customCursorStyle;
161 | };
162 | export { CursorType, resetCursor, initCursor, updateCursor, disposeCursor, updateConfig, customCursorStyle, };
163 | export default exported;
164 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | // types
  2 | export type ICursorType = "normal" | "text" | "block";
  3 | /**
  4 |  *  if without unit, `px` is used by default
  5 |  */
  6 | type MaybeSize = string | number;
  7 | /** if without unit `ms` is used by default */
  8 | type MaybeDuration = string | number;
  9 | /** do not use 0x000000, use #000000 instead */
 10 | type MaybeColor = string;
 11 | 
 12 | /**
 13 |  * Configurations for the cursor
 14 |  */
 15 | export interface IpadCursorConfig {
 16 |   /**
 17 |    * Strength of adsorption, the larger the value,
 18 |    * The higher the value, the greater the range of the block that can be moved when it is hovered
 19 |    * @type {number} between 0 and 30
 20 |    * @default 10
 21 |    */
 22 |   adsorptionStrength?: number;
 23 | 
 24 |   /**
 25 |    * The class name of the cursor element
 26 |    * @type {string}
 27 |    * @default 'cursor'
 28 |    */
 29 |   className?: string;
 30 | 
 31 |   /**
 32 |    * The style of the cursor, when it does not hover on any element
 33 |    */
 34 |   normalStyle?: IpadCursorStyle;
 35 |   /**
 36 |    * The style of the cursor, when it hovers on text
 37 |    */
 38 |   textStyle?: IpadCursorStyle;
 39 |   /**
 40 |    * The style of the cursor, when it hovers on a block
 41 |    */
 42 |   blockStyle?: IpadCursorStyle;
 43 |   /**
 44 |    * The style of the cursor, when mousedown
 45 |    */
 46 |   mouseDownStyle?: IpadCursorStyle;
 47 |   /**
 48 |    * Cursor padding when hover on block
 49 |    */
 50 |   blockPadding?: number | "auto";
 51 | 
 52 |   /**
 53 |    * detect text node and apply text cursor automatically
 54 |    **/
 55 |   enableAutoTextCursor?: boolean;
 56 | 
 57 |   /**
 58 |    * enable detect dom change and auto call updateCursor
 59 |    **/
 60 |   enableAutoUpdateCursor?: boolean;
 61 |   /**
 62 |    * whether to enable lighting effect
 63 |    */
 64 |   enableLighting?: boolean;
 65 | 
 66 |   /**
 67 |    * whether to apply effect for mousedown action
 68 |    */
 69 |   enableMouseDownEffect?: boolean;
 70 | }
 71 | /**
 72 |  * Configurable style of the cursor (Experimental)
 73 |  * This feature is Experimental, so it's set to false by default.
 74 |  * And it not support `block` yet
 75 |  */
 76 | export interface IpadCursorStyle {
 77 |   /**
 78 |    * The width of the cursor
 79 |    */
 80 |   width?: MaybeSize;
 81 |   /**
 82 |    * The width of the cursor
 83 |    */
 84 |   height?: MaybeSize;
 85 |   /**
 86 |    * Border radius of cursor
 87 |    */
 88 |   radius?: MaybeSize | "auto";
 89 | 
 90 |   /**
 91 |    * Transition duration of basic properties like width, height, radius, border, background-color
 92 |    */
 93 |   durationBase?: MaybeDuration;
 94 |   /**
 95 |    * Transition duration of position: left, top
 96 |    */
 97 |   durationPosition?: MaybeDuration;
 98 |   /**
 99 |    * Transition duration of backdrop-filter
100 |    */
101 |   durationBackdropFilter?: MaybeDuration;
102 |   /**
103 |    * The background color of the cursor
104 |    */
105 |   background?: MaybeColor;
106 |   /**
107 |    * Border of the cursor
108 |    * @example '1px solid rgba(100, 100, 100, 0.1)'
109 |    */
110 |   border?: string;
111 | 
112 |   /** z-index of cursor */
113 |   zIndex?: number;
114 | 
115 |   /**
116 |    * Scale of cursor
117 |    */
118 |   scale?: number;
119 | 
120 |   /**
121 |    * backdrop-filter blur
122 |    */
123 |   backdropBlur?: MaybeSize;
124 | 
125 |   /**
126 |    * backdrop-filter saturate
127 |    */
128 |   backdropSaturate?: string;
129 | }
130 | 
131 | let ready = false;
132 | let observer: MutationObserver | null = null;
133 | let cursorEle: HTMLDivElement | null = null;
134 | let activeDom: Element | null = null;
135 | let isBlockActive = false;
136 | let isTextActive = false;
137 | let isMouseDown = false;
138 | let styleTag: HTMLStyleElement | null = null;
139 | let latestCursorStyle: Record<string, any> = {};
140 | let mousedownStyleRecover: Record<string, any> = {};
141 | const position = { x: -100, y: -100};
142 | const isServer = typeof document === "undefined";
143 | const registeredNodeSet = new Set<Element>();
144 | const eventMap = new Map<
145 |   Element,
146 |   Array<{ event: string; handler: (e: Event) => void }>
147 | >();
148 | const config = getDefaultConfig();
149 | 
150 | /**
151 |  * Util collection
152 |  */
153 | class Utils {
154 |   static clamp(num: number, min: number, max: number) {
155 |     return Math.min(Math.max(num, min), max);
156 |   }
157 |   static isNum(v: string | number) {
158 |     return typeof v === "number" || /^\d+$/.test(v);
159 |   }
160 |   static getSize(size: MaybeSize) {
161 |     if (this.isNum(size)) return `${size}px`;
162 |     return size;
163 |   }
164 |   static getDuration(duration: MaybeDuration): string {
165 |     if (this.isNum(duration)) return `${duration}ms`;
166 |     return `${duration}`;
167 |   }
168 |   static getColor(color: MaybeColor) {
169 |     return color;
170 |   }
171 |   static objectKeys<T extends string>(obj: Partial<Record<T, any>>): T[] {
172 |     return Object.keys(obj) as T[];
173 |   }
174 |   static style2Vars(style: IpadCursorStyle) {
175 |     const map: Record<keyof IpadCursorStyle, string> = {
176 |       backdropBlur: "--cursor-bg-blur",
177 |       backdropSaturate: "--cursor-bg-saturate",
178 |       background: "--cursor-bg",
179 |       border: "--cursor-border",
180 |       durationBackdropFilter: "--cursor-blur-duration",
181 |       durationBase: "--cursor-duration",
182 |       durationPosition: "--cursor-position-duration",
183 |       height: "--cursor-height",
184 |       radius: "--cursor-radius",
185 |       scale: "--cursor-scale",
186 |       width: "--cursor-width",
187 |       zIndex: "--cursor-z-index",
188 |     };
189 |     return this.objectKeys(style).reduce((prev, key) => {
190 |       let value = style[key];
191 |       if (value === undefined) return prev;
192 | 
193 |       const maybeColor = ["background", "border"].includes(key);
194 |       const maybeSize = ["width", "height", "radius", "backdropBlur"].includes(
195 |         key
196 |       );
197 |       const maybeDuration = key.startsWith("duration");
198 | 
199 |       if (maybeColor) value = this.getColor(value as MaybeColor);
200 |       if (maybeSize) value = this.getSize(value as MaybeSize);
201 |       if (maybeDuration) value = this.getDuration(value as MaybeDuration);
202 | 
203 |       const recordKey = map[key] || key;
204 |       return { ...prev, [recordKey]: value };
205 |     }, {});
206 |   }
207 |   static isMergebleObject(obj: any) {
208 |     const isObject = (o: any) =>
209 |       o && typeof o === "object" && !Array.isArray(o);
210 |     return isObject(obj);
211 |   }
212 |   static mergeDeep<T extends any = any>(obj: T, ...sources: any[]): T {
213 |     if (!sources.length) return obj;
214 |     const source = sources.shift();
215 |     if (!source) return obj;
216 |     if (this.isMergebleObject(obj) && this.isMergebleObject(source)) {
217 |       Utils.objectKeys(source).forEach((key) => {
218 |         if (this.isMergebleObject(source[key])) {
219 |           if (!(obj as any)[key]) Object.assign(obj as any, { [key]: {} });
220 |           this.mergeDeep((obj as any)[key], source[key]);
221 |         } else {
222 |           Object.assign(obj as any, { [key]: source[key] });
223 |         }
224 |       });
225 |     }
226 |     return this.mergeDeep(obj, ...sources);
227 |   }
228 | }
229 | 
230 | /**
231 |  * Get default config
232 |  * @returns
233 |  */
234 | function getDefaultConfig(): IpadCursorConfig {
235 |   const normalStyle: IpadCursorStyle = {
236 |     width: "20px",
237 |     height: "20px",
238 |     radius: "10px",
239 |     durationBase: "0.23s",
240 |     durationPosition: "0s",
241 |     durationBackdropFilter: "0s",
242 |     background: "rgba(150, 150, 150, 0.2)",
243 |     scale: 1,
244 |     border: "1px solid rgba(100, 100, 100, 0.1)",
245 |     zIndex: 9999,
246 |     backdropBlur: "0px",
247 |     backdropSaturate: "180%",
248 |   };
249 | 
250 |   const textStyle: IpadCursorStyle = {
251 |     background: "rgba(100, 100, 100, 0.3)",
252 |     scale: 1,
253 |     width: "4px",
254 |     height: "1.2em",
255 |     border: "0px solid rgba(100, 100, 100, 0)",
256 |     durationBackdropFilter: "1s",
257 |     radius: "10px",
258 |   };
259 | 
260 |   const blockStyle: IpadCursorStyle = {
261 |     background: "rgba(100, 100, 100, 0.3)",
262 |     border: "1px solid rgba(100, 100, 100, 0.05)",
263 |     backdropBlur: "0px",
264 |     durationBase: "0.23s",
265 |     durationBackdropFilter: "0.1s",
266 |     backdropSaturate: "120%",
267 |     radius: "10px",
268 |   };
269 | 
270 |   const mouseDownStyle: IpadCursorStyle = {
271 |     background: "rgba(150, 150, 150, 0.3)",
272 |     scale: 0.8,
273 |   };
274 |   const defaultConfig: IpadCursorConfig = {
275 |     blockPadding: "auto",
276 |     adsorptionStrength: 10,
277 |     className: "ipad-cursor",
278 |     normalStyle,
279 |     textStyle,
280 |     blockStyle,
281 |     mouseDownStyle,
282 |   };
283 |   return defaultConfig;
284 | }
285 | 
286 | /** update cursor style (single or multiple) */
287 | function updateCursorStyle(
288 |   keyOrObj: string | Record<string, any>,
289 |   value?: string
290 | ) {
291 |   if (!cursorEle) return;
292 |   if (typeof keyOrObj === "string") {
293 |     latestCursorStyle[keyOrObj] = value;
294 |     value && cursorEle.style.setProperty(keyOrObj, value);
295 |   } else {
296 |     Object.entries(keyOrObj).forEach(([key, value]) => {
297 |       cursorEle && cursorEle.style.setProperty(key, value);
298 |       latestCursorStyle[key] = value;
299 |     });
300 |   }
301 | }
302 | 
303 | /** record mouse position */
304 | function onMousemove(e: MouseEvent) {
305 |   position.x = e.clientX;
306 |   position.y = e.clientY;
307 |   autoApplyTextCursor(e.target as HTMLElement);
308 | }
309 | 
310 | function onMousedown() {
311 |   if (isMouseDown || !config.enableMouseDownEffect || isBlockActive) return;
312 |   isMouseDown = true;
313 |   mousedownStyleRecover = { ...latestCursorStyle };
314 |   updateCursorStyle(Utils.style2Vars(config.mouseDownStyle || {}));
315 | }
316 | 
317 | function onMouseup() {
318 |   if (!isMouseDown || !config.enableMouseDownEffect || isBlockActive) return;
319 |   isMouseDown = false;
320 |   const target = mousedownStyleRecover;
321 |   const styleToRecover = Utils.objectKeys(
322 |     Utils.style2Vars(config.mouseDownStyle || {})
323 |   ).reduce((prev, curr) => ({ ...prev, [curr]: target[curr] }), {});
324 |   updateCursorStyle(styleToRecover);
325 | }
326 | 
327 | /**
328 |  * Automatically apply cursor style when hover on target
329 |  * @param target
330 |  * @returns
331 |  */
332 | function autoApplyTextCursor(target: HTMLElement) {
333 |   if (isBlockActive || isTextActive || !config.enableAutoTextCursor) return;
334 |   if (target && target.childNodes.length === 1) {
335 |     const child = target.childNodes[0] as HTMLElement;
336 |     if (child.nodeType === 3 && child.textContent?.trim() !== "") {
337 |       target.setAttribute("data-cursor", "text");
338 |       applyTextCursor(target);
339 |       return;
340 |     }
341 |   }
342 |   resetCursorStyle();
343 | }
344 | 
345 | let lastNode: Element | null = null;
346 | const scrollHandler = () => {
347 |   const currentNode = document.elementFromPoint(position.x, position.y);
348 |   const mouseLeaveEvent = new MouseEvent("mouseleave", {
349 |     bubbles: true,
350 |     cancelable: true,
351 |     view: window,
352 |   });
353 |   if (currentNode !== lastNode && lastNode && mouseLeaveEvent) {
354 |     lastNode.dispatchEvent(mouseLeaveEvent);
355 |   }
356 |   lastNode = currentNode;
357 | };
358 | 
359 | /**
360 |  * Init cursor, hide default cursor, and listen mousemove event
361 |  * will only run once in client even if called multiple times
362 |  * @returns
363 |  */
364 | function initCursor(_config?: IpadCursorConfig) {
365 |   if (isServer || ready) return;
366 |   if (_config) updateConfig(_config);
367 |   ready = true;
368 |   window.addEventListener("mousemove", onMousemove);
369 |   window.addEventListener("mousedown", onMousedown);
370 |   window.addEventListener("mouseup", onMouseup);
371 |   window.addEventListener("scroll", scrollHandler);
372 |   createCursor();
373 |   createStyle();
374 |   updateCursorPosition();
375 |   updateCursor();
376 |   createObserver();
377 | }
378 | 
379 | function createObserver() {
380 |   if (config.enableAutoUpdateCursor) {
381 |     observer = new MutationObserver(function () {
382 |       updateCursor();
383 |     });
384 |     observer.observe(document.body, { childList: true, subtree: true });
385 |   }
386 | }
387 | 
388 | /**
389 |  * destroy cursor, remove event listener and remove cursor element
390 |  * @returns
391 |  */
392 | function disposeCursor() {
393 |   if (!ready) return;
394 |   ready = false;
395 |   window.removeEventListener("mousemove", onMousemove);
396 |   window.removeEventListener("scroll", scrollHandler);
397 |   cursorEle && cursorEle.remove();
398 |   styleTag && styleTag.remove();
399 |   styleTag = null;
400 |   cursorEle = null;
401 | 
402 |   // iterate nodesMap
403 |   registeredNodeSet.forEach((node) => unregisterNode(node));
404 |   observer?.disconnect()
405 | }
406 | 
407 | /**
408 |  * Update current Configuration
409 |  * @param _config
410 |  */
411 | function updateConfig(_config: IpadCursorConfig) {
412 |   if ("adsorptionStrength" in _config) {
413 |     config.adsorptionStrength = Utils.clamp(
414 |       _config.adsorptionStrength ?? 10,
415 |       0,
416 |       30
417 |     );
418 |   }
419 |   const newConfig = Utils.mergeDeep(config, _config);
420 |   if (!isBlockActive && !isTextActive && _config.normalStyle) {
421 |     updateCursorStyle(Utils.style2Vars(newConfig.normalStyle!));
422 |   } else if (isBlockActive && _config.blockStyle) {
423 |     updateCursorStyle(Utils.style2Vars(newConfig.blockStyle!));
424 |   } else if (isTextActive && _config.textStyle) {
425 |     updateCursorStyle(Utils.style2Vars(newConfig.textStyle!));
426 |   }
427 |   return newConfig;
428 | }
429 | 
430 | /**
431 |  * Create style tag
432 |  * @returns
433 |  */
434 | function createStyle() {
435 |   if (styleTag) return;
436 |   const selector = `.${config.className!.split(/\s+/).join(".")}`;
437 |   styleTag = document.createElement("style");
438 |   styleTag.innerHTML = `
439 |     body, * {
440 |       cursor: none;
441 |     }
442 |     ${selector} {
443 |       --cursor-transform-duration: 0.23s;
444 |       overflow: hidden;
445 |       pointer-events: none;
446 |       position: fixed;
447 |       left: var(--cursor-x);
448 |       top: var(--cursor-y);
449 |       width: var(--cursor-width);
450 |       height: var(--cursor-height);
451 |       border-radius: var(--cursor-radius);
452 |       background-color: var(--cursor-bg);
453 |       border: var(--cursor-border);
454 |       z-index: var(--cursor-z-index);
455 |       font-size: var(--cursor-font-size);
456 |       backdrop-filter:
457 |         blur(var(--cursor-bg-blur))
458 |         saturate(var(--cursor-bg-saturate));
459 |       transition:
460 |         width var(--cursor-duration) ease,
461 |         height var(--cursor-duration) ease,
462 |         border-radius var(--cursor-duration) ease,
463 |         border var(--cursor-duration) ease,
464 |         background-color var(--cursor-duration) ease,
465 |         left var(--cursor-position-duration) ease,
466 |         top var(--cursor-position-duration) ease,
467 |         backdrop-filter var(--cursor-blur-duration) ease,
468 |         transform var(--cursor-transform-duration) ease;
469 |       transform:
470 |         translateX(calc(var(--cursor-translateX, 0px) - 50%))
471 |         translateY(calc(var(--cursor-translateY, 0px) - 50%))
472 |         scale(var(--cursor-scale, 1));
473 |     }
474 |     ${selector}.block-active {
475 |       --cursor-transform-duration: 0s;
476 |     }
477 |     ${selector} .lighting {
478 |       display: none;
479 |     }
480 |     ${selector}.lighting--on .lighting {
481 |       display: block;
482 |       width: 0;
483 |       height: 0;
484 |       position: absolute;
485 |       left: calc(var(--lighting-size) / -2);
486 |       top: calc(var(--lighting-size) / -2);
487 |       transform: translateX(var(--lighting-offset-x, 0)) translateY(var(--lighting-offset-y, 0));
488 |       background-image: radial-gradient(
489 |         circle at center,
490 |         rgba(255, 255, 255, 0.1) 0%,
491 |         rgba(255, 255, 255, 0) 30%
492 |       );
493 |       border-radius: 50%;
494 |     }
495 |     ${selector}.block-active .lighting {
496 |       width: var(--lighting-size, 20px);
497 |       height: var(--lighting-size, 20px);
498 |     }
499 |   `;
500 |   document.head.appendChild(styleTag);
501 | }
502 | 
503 | /**
504 |  * create cursor element, append to body
505 |  * @returns
506 |  */
507 | function createCursor() {
508 |   if (isServer) return;
509 |   cursorEle = document.createElement("div");
510 |   const lightingEle = document.createElement("div");
511 |   cursorEle.classList.add(config.className!);
512 |   lightingEle.classList.add("lighting");
513 |   cursorEle.appendChild(lightingEle);
514 |   document.body.appendChild(cursorEle);
515 |   resetCursorStyle();
516 | }
517 | 
518 | /**
519 |  * update cursor position, request animation frame
520 |  * @returns
521 |  */
522 | function updateCursorPosition() {
523 |   if (isServer || !cursorEle) return;
524 |   if (!isBlockActive) {
525 |     updateCursorStyle("--cursor-x", `${position.x}px`);
526 |     updateCursorStyle("--cursor-y", `${position.y}px`);
527 |   }
528 |   window.requestAnimationFrame(updateCursorPosition);
529 | }
530 | 
531 | /**
532 |  * get all hover targets
533 |  * @returns
534 |  */
535 | function queryAllTargets() {
536 |   if (isServer || !ready) return [];
537 |   return document.querySelectorAll("[data-cursor]");
538 | }
539 | 
540 | /**
541 |  * Detect all interactive elements in the page
542 |  * Update the binding of events, remove listeners for elements that are removed
543 |  * @returns
544 |  */
545 | function updateCursor() {
546 |   initCursor()
547 |   if (isServer || !ready) return;
548 |   const nodesMap = new Map();
549 |   // addDataCursorText(document.body.childNodes)
550 |   const nodes = queryAllTargets();
551 |   nodes.forEach((node) => {
552 |     nodesMap.set(node, true);
553 |     if (registeredNodeSet.has(node)) return;
554 |     registerNode(node);
555 |   });
556 | 
557 |   registeredNodeSet.forEach((node) => {
558 |     if (nodesMap.has(node)) return;
559 |     unregisterNode(node);
560 |   });
561 | }
562 | 
563 | function registerNode(node: Element) {
564 |   let type = node.getAttribute("data-cursor") as ICursorType;
565 |   registeredNodeSet.add(node);
566 |   if (type === "text") registerTextNode(node);
567 |   if (type === "block") registerBlockNode(node);
568 |   else registeredNodeSet.delete(node);
569 | }
570 | 
571 | function unregisterNode(node: Element) {
572 |   registeredNodeSet.delete(node);
573 |   eventMap.get(node)?.forEach(({ event, handler }: any) => {
574 |     if (event === 'mouseleave')
575 |       handler();
576 |     node.removeEventListener(event, handler);
577 |   });
578 |   eventMap.delete(node);
579 |   (node as HTMLElement).style.setProperty("transform", "none");
580 | }
581 | 
582 | function extractCustomStyle(node: Element) {
583 |   const customStyleRaw = node.getAttribute("data-cursor-style");
584 |   const styleObj: Record<string, any> = {};
585 |   if (customStyleRaw) {
586 |     customStyleRaw.split(/(;)/).forEach((style) => {
587 |       const [key, value] = style.split(":").map((s) => s.trim());
588 |       styleObj[key] = value;
589 |     });
590 |   }
591 |   return styleObj;
592 | }
593 | 
594 | /**
595 |  * + ---------------------- +
596 |  * | TextNode               |
597 |  * + ---------------------- +
598 |  */
599 | function registerTextNode(node: Element) {
600 |   let timer: any;
601 | 
602 |   function toggleTextActive(active?: boolean) {
603 |     isTextActive = !!active;
604 |     cursorEle &&
605 |       (active
606 |         ? cursorEle.classList.add("text-active")
607 |         : cursorEle.classList.remove("text-active"));
608 |   }
609 |   function onTextOver(e: Event) {
610 |     timer && clearTimeout(timer);
611 |     toggleTextActive(true);
612 |     // for some edge case, two ele very close
613 |     timer = setTimeout(() => toggleTextActive(true));
614 |     applyTextCursor(e.target as HTMLElement);
615 |   }
616 |   function onTextLeave() {
617 |     timer && clearTimeout(timer);
618 |     timer = setTimeout(() => toggleTextActive(false));
619 |     resetCursorStyle();
620 |   }
621 |   node.addEventListener("mouseover", onTextOver, { passive: true });
622 |   node.addEventListener("mouseleave", onTextLeave, { passive: true });
623 |   eventMap.set(node, [
624 |     { event: "mouseover", handler: onTextOver },
625 |     { event: "mouseleave", handler: onTextLeave },
626 |   ]);
627 | }
628 | 
629 | /**
630 |  * + ---------------------- +
631 |  * | BlockNode              |
632 |  * + ---------------------- +
633 |  */
634 | function registerBlockNode(_node: Element) {
635 |   const node = _node as HTMLElement;
636 |   node.addEventListener("mouseenter", onBlockEnter, { passive: true });
637 |   node.addEventListener("mousemove", onBlockMove, { passive: true });
638 |   node.addEventListener("mouseleave", onBlockLeave, { passive: true });
639 | 
640 |   let timer: any;
641 | 
642 |   function toggleBlockActive(active?: boolean) {
643 |     isBlockActive = !!active;
644 |     cursorEle &&
645 |       (active
646 |         ? cursorEle.classList.add("block-active")
647 |         : cursorEle.classList.remove("block-active"));
648 |     activeDom = active ? node : null;
649 |   }
650 | 
651 |   function onBlockEnter() {
652 |     // TODO: maybe control this in other way
653 |     cursorEle &&
654 |       cursorEle.classList.toggle("lighting--on", !!config.enableLighting);
655 |     
656 |     // Prevents the cursor from shifting from the node during rapid enter/leave.
657 |     toggleNodeTransition(false);
658 |     
659 |     const rect = node.getBoundingClientRect();
660 |     timer && clearTimeout(timer);
661 |     toggleBlockActive(true);
662 |     // for some edge case, two ele very close
663 |     timer = setTimeout(() => toggleBlockActive(true));
664 |     cursorEle && cursorEle.classList.add("block-active");
665 |     const updateStyleObj: IpadCursorStyle = { ...(config.blockStyle || {}) };
666 |     const blockPadding = config.blockPadding ?? 0;
667 |     let padding = blockPadding;
668 |     let radius = updateStyleObj?.radius;
669 |     if (padding === "auto") {
670 |       const size = Math.min(rect.width, rect.height);
671 |       padding = Math.max(2, Math.floor(size / 25));
672 |     }
673 | 
674 |     if (radius === "auto") {
675 |       const paddingCss = Utils.getSize(padding);
676 |       const nodeRadius = window.getComputedStyle(node).borderRadius;
677 |       if (nodeRadius.startsWith("0") || nodeRadius === "none") radius = "0";
678 |       else radius = `calc(${paddingCss} + ${nodeRadius})`;
679 |       updateStyleObj.radius = radius;
680 |     }
681 | 
682 |     updateCursorStyle("--cursor-x", `${rect.left + rect.width / 2}px`);
683 |     updateCursorStyle("--cursor-y", `${rect.top + rect.height / 2}px`);
684 |     updateCursorStyle("--cursor-width", `${rect.width + padding * 2}px`);
685 |     updateCursorStyle("--cursor-height", `${rect.height + padding * 2}px`);
686 | 
687 |     const styleToUpdate: IpadCursorStyle = {
688 |       ...updateStyleObj,
689 |       ...extractCustomStyle(node),
690 |     };
691 | 
692 |     if (styleToUpdate.durationPosition === undefined) {
693 |       styleToUpdate.durationPosition =
694 |         styleToUpdate.durationBase ?? config.normalStyle?.durationBase;
695 |     }
696 | 
697 |     updateCursorStyle(Utils.style2Vars(styleToUpdate));
698 | 
699 |     toggleNodeTransition(true);
700 |     node.style.setProperty(
701 |       "transform",
702 |       "translate(var(--translateX), var(--translateY))"
703 |     );
704 |   }
705 |   function onBlockMove() {
706 |     if (!isBlockActive) {
707 |       onBlockEnter();
708 |     }
709 |     const rect = node.getBoundingClientRect();
710 |     const halfHeight = rect.height / 2;
711 |     const topOffset = (position.y - rect.top - halfHeight) / halfHeight;
712 |     const halfWidth = rect.width / 2;
713 |     const leftOffset = (position.x - rect.left - halfWidth) / halfWidth;
714 | 
715 |     const strength = config.adsorptionStrength ?? 10;
716 |     updateCursorStyle(
717 |       "--cursor-translateX",
718 |       `${leftOffset * ((rect.width / 100) * strength)}px`
719 |     );
720 |     updateCursorStyle(
721 |       "--cursor-translateY",
722 |       `${topOffset * ((rect.height / 100) * strength)}px`
723 |     );
724 | 
725 |     toggleNodeTransition(false);
726 |     const nodeTranslateX = leftOffset * ((rect.width / 100) * strength);
727 |     const nodeTranslateY = topOffset * ((rect.height / 100) * strength);
728 |     node.style.setProperty("--translateX", `${nodeTranslateX}px`);
729 |     node.style.setProperty("--translateY", `${nodeTranslateY}px`);
730 | 
731 |     // lighting
732 |     if (config.enableLighting) {
733 |       const lightingSize = Math.max(rect.width, rect.height) * 3 * 1.2;
734 |       const lightingOffsetX = position.x - rect.left;
735 |       const lightingOffsetY = position.y - rect.top;
736 |       updateCursorStyle("--lighting-size", `${lightingSize}px`);
737 |       updateCursorStyle("--lighting-offset-x", `${lightingOffsetX}px`);
738 |       updateCursorStyle("--lighting-offset-y", `${lightingOffsetY}px`);
739 |     }
740 |   }
741 |   function onBlockLeave() {
742 |     timer && clearTimeout(timer);
743 |     timer = setTimeout(() => toggleBlockActive(false));
744 |     resetCursorStyle();
745 |     toggleNodeTransition(true);
746 |     node.style.setProperty("transform", "translate(0px, 0px)");
747 |   }
748 | 
749 |   function toggleNodeTransition(enable?: boolean) {
750 |     const duration = enable
751 |       ? Utils.getDuration(
752 |         config?.blockStyle?.durationPosition ??
753 |         config?.blockStyle?.durationBase ??
754 |         config?.normalStyle?.durationBase ??
755 |         "0.23s"
756 |       )
757 |       : "";
758 |     node.style.setProperty(
759 |       "transition",
760 |       duration ? `all ${duration} cubic-bezier(.58,.09,.46,1.46)` : "none"
761 |     );
762 |   }
763 | 
764 |   eventMap.set(node, [
765 |     { event: "mouseenter", handler: onBlockEnter },
766 |     { event: "mousemove", handler: onBlockMove },
767 |     { event: "mouseleave", handler: onBlockLeave },
768 |   ]);
769 | }
770 | 
771 | function resetCursorStyle() {
772 |   if (config.normalStyle?.radius === "auto")
773 |     config.normalStyle.radius = config.normalStyle.width;
774 |   updateCursorStyle(Utils.style2Vars(config.normalStyle || {}));
775 | }
776 | 
777 | function applyTextCursor(sourceNode: HTMLElement) {
778 |   updateCursorStyle(Utils.style2Vars(config.textStyle || {}));
779 |   const fontSize = window.getComputedStyle(sourceNode).fontSize;
780 |   updateCursorStyle("--cursor-font-size", fontSize);
781 |   updateCursorStyle(
782 |     Utils.style2Vars({
783 |       ...config.textStyle,
784 |       ...extractCustomStyle(sourceNode),
785 |     })
786 |   );
787 | }
788 | 
789 | /**
790 |  * Create custom style that can be bound to `data-cursor-style`
791 |  * @param style
792 |  */
793 | function customCursorStyle(style: IpadCursorStyle & Record<string, any>) {
794 |   return Object.entries(style)
795 |     .map(([key, value]) => `${key}: ${value}`)
796 |     .join("; ");
797 | }
798 | 
799 | function resetCursor() {
800 |   isBlockActive = false;
801 |   isTextActive = false;
802 |   resetCursorStyle();
803 | }
804 | 
805 | const CursorType = {
806 |   TEXT: "text" as ICursorType,
807 |   BLOCK: "block" as ICursorType,
808 | };
809 | 
810 | const exported = {
811 |   CursorType,
812 |   resetCursor,
813 |   initCursor,
814 |   updateCursor,
815 |   disposeCursor,
816 |   updateConfig,
817 |   customCursorStyle,
818 | };
819 | export {
820 |   CursorType,
821 |   resetCursor,
822 |   initCursor,
823 |   updateCursor,
824 |   disposeCursor,
825 |   updateConfig,
826 |   customCursorStyle,
827 | };
828 | export default exported;
829 | 


--------------------------------------------------------------------------------
/src/react/README.md:
--------------------------------------------------------------------------------
 1 | ## IPad Cursor React Component
 2 | 
 3 | IPad Cursor support of React component usage.
 4 | 
 5 | ## Usage
 6 | 
 7 | it had exported two function
 8 | 
 9 | 1. `IPadCursorProvider` -> add Context on the Top level code.
10 |     ```ts
11 |     <IPadCursorProvider>
12 |         <App/>
13 |     </IPadCursorProvider>
14 |     ```
15 | 2. `useIPadCursor`        -> use a Hook to config
16 |     ```typescript
17 |     const {
18 |         updateConfig,
19 |         updateCursor,
20 |         // ... and so on 
21 |     } = useIPadCursor();
22 |     ```


--------------------------------------------------------------------------------
/src/react/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useLayoutEffect, useRef } from 'react'
 2 | import type * as CursorOutput from '..'
 3 | import {
 4 |   CursorType,
 5 |   IpadCursorConfig,
 6 |   customCursorStyle,
 7 |   disposeCursor,
 8 |   initCursor,
 9 |   resetCursor,
10 |   updateConfig,
11 |   updateCursor,
12 | } from '..'
13 | 
14 | const useIPadCursorInit = (config?: IpadCursorConfig) => {
15 |   useLayoutEffect(() => {
16 |     initCursor(config)
17 |     return () => {
18 |       disposeCursor()
19 |     }
20 |   }, [config])
21 |   return null
22 | }
23 | 
24 | const CursorContext = React.createContext<Partial<typeof CursorOutput>>({})
25 | export function IPadCursorProvider({
26 |   children,
27 |   config,
28 | }: {
29 |   children: React.ReactNode
30 |   config?: IpadCursorConfig
31 | }) {
32 |   useIPadCursorInit(config)
33 |   return (
34 |     <CursorContext.Provider
35 |       value={
36 |         useRef({
37 |           CursorType,
38 |           resetCursor,
39 |           disposeCursor,
40 |           initCursor,
41 |           updateCursor,
42 |           updateConfig,
43 |           customCursorStyle,
44 |         }).current
45 |       }
46 |     >
47 |       {children}
48 |     </CursorContext.Provider>
49 |   )
50 | }
51 | 
52 | export function useIPadCursor() {
53 |   return React.useContext(CursorContext)
54 | }
55 | 


--------------------------------------------------------------------------------
/src/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../../tsconfig.json",
3 |   "compilerOptions": {
4 |     "allowSyntheticDefaultImports": true,
5 |     "declaration": true,
6 |     "emitDeclarationOnly": true
7 |   }
8 | }


--------------------------------------------------------------------------------
/src/vue/index.ts:
--------------------------------------------------------------------------------
 1 | import { onMounted, onUnmounted } from "vue";
 2 | import type { App, Directive, Plugin } from "vue";
 3 | import {
 4 |   CursorType,
 5 |   initCursor,
 6 |   resetCursor,
 7 |   updateCursor,
 8 |   updateConfig,
 9 |   disposeCursor,
10 |   IpadCursorStyle,
11 |   IpadCursorConfig,
12 |   customCursorStyle,
13 | } from "..";
14 | 
15 | export const ipadCursorPlugin: Plugin = {
16 |   install(app: App, options?: IpadCursorConfig): any {    
17 |     initCursor();
18 |     options && updateConfig(options);
19 | 
20 |     function createDirective(type: "block" | "text") {
21 |       return {
22 |         mounted: (el, binding) => {
23 |           el.setAttribute("data-cursor", type);
24 |           if (binding.value) {
25 |             el.setAttribute(
26 |               "data-cursor-style",
27 |               typeof binding.value === "string"
28 |                 ? binding.value
29 |                 : customCursorStyle(binding.value)
30 |             );
31 |           }
32 |           updateCursor();
33 |         },
34 |         unmounted: () => updateCursor(),
35 |       } as Directive<any, (IpadCursorStyle & Record<string, any>) | string>
36 |     }
37 | 
38 |     app.directive("cursor-block", createDirective('block'));
39 |     app.directive("cursor-text", createDirective('text'));
40 |   },
41 | };
42 | 
43 | export function useCursor(config?: IpadCursorConfig) {
44 |   onMounted(() => updateCursor());
45 |   onUnmounted(() => updateCursor());
46 |   config && updateConfig(config);
47 |   initCursor();
48 |   return {
49 |     CursorType,
50 |     resetCursor,
51 |     disposeCursor,
52 |     initCursor,
53 |     updateCursor,
54 |     updateConfig,
55 |     customCursorStyle,
56 |   };
57 | }
58 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "react",
 4 |     "experimentalDecorators": true,
 5 |     "allowSyntheticDefaultImports": true,
 6 |     "module": "esnext",
 7 |     "target": "es2019",
 8 |     "lib": ["es2019", "dom"],
 9 |     "strict": true,
10 |     "allowJs": false,
11 |     "moduleResolution": "node",
12 |     "outDir": "dist",
13 |     "types": [
14 |       "node"
15 |     ]
16 |   },
17 |   "exclude": [
18 |     "*.vue",
19 |     "playground",
20 |     "examples"
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
1 | // uno.config.ts
2 | import { defineConfig } from "unocss";
3 | 
4 | export default defineConfig({
5 |   configFile: "./playground/uno.config.ts",
6 | });
7 | 


--------------------------------------------------------------------------------