nanosplash 4.0.2 → 4.0.4

package/docs/.vitepress/theme/css/style.css

@@ -1,258 +0,0 @@
-/**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
-
-/**
- * Colors
- *
- * Each colors have exact same color scale system with 3 levels of solid
- * colors with different brightness, and 1 soft color.
- * 
- * - `XXX-1`: The most solid color used mainly for colored text. It must
- *   satisfy the contrast ratio against when used on top of `XXX-soft`.
- *
- * - `XXX-2`: The color used mainly for hover state of the button.
- *
- * - `XXX-3`: The color for solid background, such as bg color of the button.
- *   It must satisfy the contrast ratio with pure white (#ffffff) text on
- *   top of it.
- *
- * - `XXX-soft`: The color used for subtle background such as custom container
- *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
- *   on top of it.
- *
- *   The soft color must be semi transparent alpha channel. This is crucial
- *   because it allows adding multiple "soft" colors on top of each other
- *   to create a accent, such as when having inline code block inside
- *   custom containers.
- *
- * - `default`: The color used purely for subtle indication without any
- *   special meanings attched to it such as bg color for menu hover state.
- *
- * - `brand`: Used for primary brand colors, such as link text, button with
- *   brand theme, etc.
- *
- * - `tip`: Used to indicate useful information. The default theme uses the
- *   brand color for this by default.
- *
- * - `warning`: Used to indicate warning to the users. Used in custom
- *   container, badges, etc.
- *
- * - `danger`: Used to show error, or dangerous message to the users. Used
- *   in custom container, badges, etc.
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-c-default-1: var(--vp-c-gray-1);
-	--vp-c-default-2: var(--vp-c-gray-2);
-	--vp-c-default-3: var(--vp-c-gray-3);
-	--vp-c-default-soft: var(--vp-c-gray-soft);
-
-	--vp-c-brand-1: var(--vp-c-indigo-1);
-	--vp-c-brand-2: var(--vp-c-indigo-2);
-	--vp-c-brand-3: var(--vp-c-indigo-3);
-	--vp-c-brand-soft: var(--vp-c-indigo-soft);
-
-	--vp-c-tip-1: var(--vp-c-brand-1);
-	--vp-c-tip-2: var(--vp-c-brand-2);
-	--vp-c-tip-3: var(--vp-c-brand-3);
-	--vp-c-tip-soft: var(--vp-c-brand-soft);
-
-	--vp-c-warning-1: var(--vp-c-yellow-1);
-	--vp-c-warning-2: var(--vp-c-yellow-2);
-	--vp-c-warning-3: var(--vp-c-yellow-3);
-	--vp-c-warning-soft: var(--vp-c-yellow-soft);
-
-	--vp-c-danger-1: var(--vp-c-red-1);
-	--vp-c-danger-2: var(--vp-c-red-2);
-	--vp-c-danger-3: var(--vp-c-red-3);
-	--vp-c-danger-soft: var(--vp-c-red-soft);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-button-brand-border: transparent;
-	--vp-button-brand-text: var(--vp-c-white);
-	--vp-button-brand-bg: var(--vp-c-brand-3);
-	--vp-button-brand-hover-border: transparent;
-	--vp-button-brand-hover-text: var(--vp-c-white);
-	--vp-button-brand-hover-bg: var(--vp-c-brand-2);
-	--vp-button-brand-active-border: transparent;
-	--vp-button-brand-active-text: var(--vp-c-white);
-	--vp-button-brand-active-bg: var(--vp-c-brand-1);
-}
-
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-home-hero-name-color: transparent;
-	--vp-home-hero-name-background: -webkit-linear-gradient(
-		120deg,
-		#bd34fe 30%,
-		#41d1ff
-	);
-
-	--vp-home-hero-image-background-image: linear-gradient(
-		-45deg,
-		#bd34fe 50%,
-		#47caff 50%
-	);
-	--vp-home-hero-image-filter: blur(40px);
-}
-
-@media (min-width: 640px) {
-	:root {
-		--vp-home-hero-image-filter: blur(56px);
-	}
-}
-
-@media (min-width: 960px) {
-	:root {
-		--vp-home-hero-image-filter: blur(72px);
-	}
-}
-
-/**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
-
-:root {
-	--vp-custom-block-tip-border: transparent;
-	--vp-custom-block-tip-text: var(--vp-c-text-1);
-	--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
-	--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
-}
-
-/**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
-
-.DocSearch {
-	--docsearch-primary-color: var(--vp-c-brand-1) !important;
-}
-
-.vp-doc [class*='language-'] code .highlighted {
-	background-color: transparent;
-}
-
-.vp-doc [class*='language-'] .has-highlighted-lines .line {
-	transition:
-		filter 0.35s,
-		opacity 0.35s;
-}
-.vp-doc code:has(.highlighted) .line:not(.highlighted) {
-	filter: blur(1px);
-	opacity: 0.5;
-	transition: all 0.3s ease;
-}
-.vp-doc code:has(.highlighted):hover .line:not(.highlighted) {
-	filter: blur(0);
-	opacity: 1;
-	transition: all 0.3s ease;
-}
-
-:root {
-	--ns-doc-glass-border: 1px solid rgba(130, 130, 130, 0.2);
-}
-
-header {
-	backdrop-filter: blur(10px) !important;
-	-webkit-backdrop-filter: blur(10px) !important;
-	border-top: var(--ns-doc-glass-border);
-	border-bottom: var(--ns-doc-glass-border);
-}
-
-.mac.dark header {
-	background-color: rgba(0, 0, 0, 0.1);
-}
-
-.mac:not(.dark) header {
-	background-color: rgba(255, 255, 255, 0.5);
-}
-
-.VPNavBar {
-	background-color: transparent !important;
-	border-bottom: 0 !important;
-}
-
-.VPNavBar .content-body {
-	background-color: transparent !important;
-	border-bottom: 0 !important;
-}
-
-/* Remove header divider */
-.VPNavBar > .divider {
-	opacity: 0;
-}
-
-.VPNavBarTitle {
-	background: var(--vp-home-hero-name-background);
-	-webkit-background-clip: text;
-	background-clip: text;
-	-webkit-text-fill-color: var(--vp-home-hero-name-color);
-}
-
-.VPNavBarTitle .title {
-	border: 0 !important;
-}
-
-.DocSearch-Button {
-	background-color: rgba(255, 255, 255, 0.05);
-	border: var(--ns-doc-glass-border);
-}
-
-.VPButton {
-	border-radius: 8px !important;
-}
-
-.VPFeature {
-	background-color: transparent !important;
-	box-shadow:
-		0 -8px 32px rgba(0, 81, 255, 0.1),
-		0 8px 32px rgba(251, 0, 255, 0.1);
-}
-
-/* Remove footer border */
-.VPFooter {
-	border-top: 0 !important;
-}
-
-/* Center footer credits */
-.VPFooter .container {
-	justify-content: center;
-}
-
-.VPLocalSearchBox .backdrop {
-	background-color: transparent !important;
-	backdrop-filter: blur(10px) !important;
-	-webkit-backdrop-filter: blur(10px) !important;
-}
-
-.VPButton {
-	border: var(--ns-doc-glass-border) !important;
-	background-color: transparent !important;
-	/* box-shadow:
-		0 2px 4px rgba(0, 0, 0, 0.025),
-		0 4px 8px rgba(0, 0, 0, 0.025),
-		0 8px 16px rgba(0, 0, 0, 0.025); */
-}
-
-.VPButton.brand {
-	background-color: #222 !important;
-}
-
-.VPLocalSearchBox .shell {
-	box-shadow:
-		0 0 2px 1px #0000000d,
-		0 4px 8px rgba(0, 0, 0, 0.05),
-		0 8px 16px rgba(0, 0, 0, 0.05),
-		0 16px 32px rgba(0, 0, 0, 0.05),
-		0 32px 64px rgba(0, 0, 0, 0.05),
-		0 64px 128px rgba(0, 0, 0, 0.05);
-}

package/docs/.vitepress/theme/index.ts

@@ -1,16 +0,0 @@
-// https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import Theme from 'vitepress/theme'
-import './css/style.css'
-
-export default {
-	extends: Theme,
-	Layout: () => {
-		return h(Theme.Layout, null, {
-			// https://vitepress.dev/guide/extending-default-theme#layout-slots
-		})
-	},
-	enhanceApp({ app, router, siteData }) {
-		// ...
-	},
-}

package/docs/.vitepress/theme/vue/Card.vue

@@ -1,31 +0,0 @@
-<script setup>
-import { useAttrs } from 'vue'
-const attrs = useAttrs()
-</script>
-
-<template>
-	<div class="card">
-		<div v-if="attrs.id" class="id">#{{ attrs.id }}</div>
-		<slot></slot>
-	</div>
-</template>
-
-<style lang="sass" scoped>
-.card
-    color: White
-    line-height: 1
-    position: relative
-    padding: 30px
-    border-radius: 5px
-    background-color: rgba(White, 0.2)
-    backdrop-filter: blur(5px)
-    -webkit-backdrop-filter: blur(5px)
-    border: 1px solid rgba(White, 0.2)
-    .id
-        position: absolute
-        top: 5px
-        left: 5px
-        font-size: 10px
-        color: rgba(White, 0.7)
-        letter-spacing: 0.1em
-</style>

package/docs/.vitepress/theme/vue/CardGrid.vue

@@ -1,17 +0,0 @@
-<template>
-	<div class="card-grid">
-		<slot></slot>
-	</div>
-</template>
-
-<style lang="sass" scoped>
-.card-grid
-	display: grid
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
-	grid-gap: 25px
-	background-image: url('/macos.jpg')
-	background-size: cover
-	background-position-y: bottom
-	padding: 25px
-	border-radius: 5px
-</style>

package/docs/.vitepress/theme/vue/PlayGround.vue

@@ -1,36 +0,0 @@
-<script setup>
-import CardGrid from './CardGrid.vue'
-import Card from './Card.vue'
-import { useNs } from '../../../../dist/es/ns'
-if (window) {
-	window.ns = useNs(window)
-}
-</script>
-
-<template>
-	<div class="playground">
-		<CardGrid id="wrapper">
-			<Card id="a">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
-			</Card>
-			<Card id="b">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
-			</Card>
-			<Card id="c">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
-			</Card>
-			<Card id="d">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
-			</Card>
-		</CardGrid>
-	</div>
-</template>
-
-<style lang="sass" scoped>
-.playground
-	display: flex
-	flex-direction: column
-	row-gap: 20px
-	& > *
-		box-shadow: 0 2px 10px rgba(Black, 0.1)
-</style>

package/docs/api/doc/hide.md

@@ -1,48 +0,0 @@
-# Hide Nanosplash
-
-## Hide
-
-Hides the oldest Nanosplash (FIFO).
-
-```ts
-ns.hide(): void
-```
-
-```js
-ns.show('a')
-ns.show('b')
-ns.show('c')
-ns.hide() // Hides 'a'
-ns.hide() // Hides 'b'
-ns.hide() // Hides 'c'
-```
-
-::: tip
-If you have multiple Nanosplashes open at the same time, I would recommend
-that you hide specific elements based on their ID.
-See [Hide by ID](#hide-by-id) for more information.
-:::
-
-## Hide by ID
-
-Hides a Nanosplash by its ID.
-
-```ts
-ns.hide(id: number): number | null
-```
-
-The show method returns the Nanosplash ID. This identifier can be
-used to hide a specific Nanosplash at a later time.
-
-```js
-const id = ns.show('Loading')
-ns.hide(id)
-```
-
-## Hide all
-
-Hides all Nanosplashes in the `window`.
-
-```ts
-ns.hide('*'): void
-```

package/docs/api/doc/show.md

@@ -1,46 +0,0 @@
-# Show Nanosplash
-
-## Show
-
-This function display NS in fullscreen and returns the internal ID.
-
-```ts
-ns.show(text?: string): number
-```
-
-If you enter no text, it will display the spinning wheel only.
-
-```js
-ns.show(): number
-```
-
-If you enter text, it will display the spinning wheel adjacent to the text.
-
-```js
-ns.show('Loading'): number
-```
-
-## Show inside
-
-This function display NS inside another element and returns the internal ID,
-or `null` if the reference argument does not match any node inside the DOM.
-
-```ts
-ns.show(text?: string, ref?: Element | string): number | null
-```
-
-```js
-// DOM selector
-const selector: string = '#my-table'
-ns.show('Loading', selector)
-
-// Element
-const element: HTMLElement = document.getElementById('my-table')
-ns.show('Loading', element)
-```
-
-::: tip
-A host element can only contain one Nanosplash element at a time. If
-you try to show a splash inside an element that already contains a splash,
-the existing splash will be overwritten.
-:::

package/docs/api/start/customize.md

@@ -1,30 +0,0 @@
-# Customize
-
-Styling Nanosplash to your needs is easy!
-
-```css
-/* Backdrop */
-.nsh::before {
-	background-color: var(--your-bg);
-	backdrop-filter: var(--your-filter);
-}
-
-/* Main */
-.ns {
-	gap: var(--text-spinner-gap);
-}
-
-/* Text */
-.nst {
-	color: var(--color);
-	font-size: var(--size);
-	font-family: var(--font);
-	font-weight: var(--weight);
-}
-
-/* Spinner */
-.nss {
-	width: var(--spinner-width);
-	height: var(--spinner-height);
-}
-```

package/docs/api/start/features.md

@@ -1,17 +0,0 @@
-# Features
-
-## Small bundle size
-
-The Nanosplash bundle is less than 2KB minified and gzipped and will not add any significant weight to your application what so ever. Go to [Bundlephobia](https://bundlephobia.com/package/nanosplash) to see for yourself.
-
-## Simple, 2 Function API
-
-Nanosplash was written from the ground up with simplicity in mind. The API is very simple and easy to use, and you can easily get started in seconds. Just install the package and start using `ns.show` and `ns.hide`. Go to [Getting started](/api/start/install.md) to see how.
-
-## Spawning
-
-With Nanosplash you can spawn a splash element anywhere in your DOM. You can even spawn multiple splash elements if you want to. Go to the [API Documentation](/api/doc/show#show-inside) to see how.
-
-## Node recycling
-
-Instead of creating new elements all the time and exhausting DOM manipulations, we recycle and repurpose obsolete splash elements instead. For each time a splash element is created, we check for existing splash elements inside the parent element and use them instead of creating new ones.

package/docs/api/start/install.md

@@ -1,61 +0,0 @@
-<script setup>
-import Card from '../../.vitepress/theme/vue/Card.vue'
-</script>
-
-# Installation
-
-Nanosplash can be installed either via CDN or NPM. Installing via CDN is easier and requires less configuration, but installing via NPM is more flexible and allows you to controll the imports and initialization of the Nanosplash service running in your application.
-
-## CSS
-
-CSS is included inside the JS bundle. 🎉
-
-## Install via CDN
-
-Add the following script tag inside of the `<body>` tag:
-
-```html
-<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
-```
-
-### Example
-
-```html{6}
-<html>
-	<head>
-		<title>My awesome application 🚀</title>
-	</head>
-	<body>
-		<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
-	</body>
-</html>
-```
-
-Now you can easily start using Nanosplash by simply calling `ns.show`.
-
-```ts
-ns.show('It works!')
-```
-
-## Install via NPM
-
-Install Nanosplash via NPM by running the following command:
-
-```bash
-yarn add nanosplash
-```
-
-To import and start the Nanosplash service in your application, you need to import the Service class and start it.
-
-```js{2,3}
-import { useNs } from 'nanosplash'
-const ns = useNs()
-ns.show('It works!')
-```
-
-For ease of use, add it to the window object for global access.
-
-```js{2}
-import { useNs } from 'nanosplash'
-window.ns = useNs()
-```

package/docs/api/start/playground.md

@@ -1,16 +0,0 @@
-<script setup>
-import PlayGround from '../../.vitepress/theme/vue/PlayGround.vue'
-</script>
-
-# Playground
-
-Here you can play around with Nanosplash and see how it works.
-
-<PlayGround />
-
-Open your browser console (developer tools).
-
-- macOS: `⌘` `⌥` `i`
-- Windows: `Ctrl` `⇧` `i`
-
-Try to target different elements in the DOM. Nanosplash is available in the window scope as `ns`. Give it a shot!

package/docs/api/start/usage.md

@@ -1,22 +0,0 @@
-# Usage
-
-```js{2,5,8,11,15,18}
-// Fullscreen spinning wheel
-ns.show()
-
-// Fullscreen spinning wheel with text
-ns.show('Loading')
-
-// Display inside an element
-ns.show('Fetching data', '#my-table')
-
-// Hide the first created loading screen (FIFO)
-ns.hide()
-
-// Hide specific loading screen
-const id = ns.show('Loading')
-ns.hide(id)
-
-// Hide all loading screens
-ns.hide('*')
-```

package/docs/index.md

@@ -1,33 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: 'Nanosplash'
-  text: ''
-  tagline: The tiny loading screen for web artisans
-  actions:
-    - theme: brand
-      text: Get started
-      link: /api/start/install.md
-    - theme: alt
-      text: Playground
-      link: /api/start/playground.md
-    - theme: alt
-      text: API Documentation
-      link: /api/doc/show.md
-
-features:
-  - title: ✨ Tiny
-    details: Less than 2KB minified and gzipped.
-    link: /api/start/features#small-bundle-size
-  - title: ✌️ 2 Function API
-    details: Start using Nanosplash in seconds.
-    link: /api/start/features#simple-api
-  - title: 🪴 Spawning
-    details: Spawn a splash element anywhere in your DOM.
-    link: /api/start/features#spawning
-  - title: 🚀 Node recycling
-    details: Nanosplash will recycle existing elements.
-    link: /api/start/features#element-recycling
----