@dvcol/neo-svelte 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.5](https://github.com/dvcol/neo-svelte/compare/v0.1.4...v0.1.5) (2025-01-10)
+
+
+### Features
+
+* **input:** adds basic select support ([f0a7973](https://github.com/dvcol/neo-svelte/commit/f0a797395a67017a437e9f32229d0ccc578b47a4))
+* **input:** adds range prefix & suffix ([1c6ab9c](https://github.com/dvcol/neo-svelte/commit/1c6ab9c731a9964dc921e6f11f77a0c45a7bfaf7))
+* **input:** adds range slider drag support ([f9c6275](https://github.com/dvcol/neo-svelte/commit/f9c6275ff0bf3cb717de94cbe75190237ca143be))
+* **input:** adds styling to labels ([7823b84](https://github.com/dvcol/neo-svelte/commit/7823b845e58762e51dae6eba36cc42f73b3349f2))
+* **input:** range switch to variable value ([41e491d](https://github.com/dvcol/neo-svelte/commit/41e491dd10ef6992c3e1b679edf4846c037f9e4c))
+
+
+### Bug Fixes
+
+* **input:** adjust range spacing ([d68bd8f](https://github.com/dvcol/neo-svelte/commit/d68bd8f2d7ebfd3c27b1d8f87aa15748eebd98be))
+
 ### [0.1.4](https://github.com/dvcol/neo-svelte/compare/v0.1.3...v0.1.4) (2024-12-31)
 
 

package/README.md

@@ -1,5 +1,52 @@
-# neo-svelte
-Neomorphic ui library for svelte 5
+<h1 align="center">Welcome to <i>Neo Svelte</i></h1>
+<h3 align="center">A neo-morphic ui library for svelte 5</h3>
+
+<p>
+  <img src="https://img.shields.io/badge/pnpm-%3E%3D8.0.0-blue.svg" />
+  <img src="https://img.shields.io/badge/node-%3E%3D20.0.0-blue.svg" />
+  <a href="https://github.com/dvcol/neo-svelte#readme" target="_blank">
+    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
+  </a>
+  <a href="https://github.com/dvcol/neo-svelte/graphs/commit-activity" target="_blank">
+    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
+  </a>
+  <a href="https://github.com/dvcol/neo-svelte/blob/master/LICENSE" target="_blank">
+    <img alt="License: MIT" src="https://img.shields.io/github/license/dvcol/neo-svelte" />
+  </a>
+ <a href="https://paypal.me/dvcol/5" target="_blank">
+    <img alt="donate" src="https://img.shields.io/badge/Donate%20€-PayPal-brightgreen.svg" />
+  </a>
+</p>
+
+## Prerequisites
+
+Note: Svelte Simple Router is a svelte 5 native library, and will not work with prior versions of svelte.
+
+- svelte >= 5.0.0
+
+## Install
+
+```sh
+pnpm add @dvcol/neo-svelte
+```
+
+## Getting Started
+
+Wrap any component inside the style provider
+
+```svelte
+<script lang="ts">
+  import { NeoThemeProvider } from '@dvcol/neo-svelte';
+</script>
+
+<NeoThemeProvider>
+  ...
+</NeoThemeProvider>
+```
+
+Then import any of the components you want to use.
+
+See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/fed1b3f42e863e18968c77256527a837957b3304/demo/components), live demo [here](https://dvcol.github.io/neo-svelte/#/inputs)).
 
 ## TODO
 - [ ] @media any-pointer:coarse any-hover:none
@@ -19,20 +66,18 @@ Neomorphic ui library for svelte 5
   - [x] multiple
 - [x] numbers
   - [x] digits
-  - [ ] range
   - [ ] phone
   - [ ] credit card
   - [x] pin
 - [x] time/date/week
   - [ ] range
 - [x] switch
-- [ ] slider
-  - [ ] range
-  - [ ] inset
-  - [ ] before - after stepper
-  - [ ] custom before-after
-  - [ ] steps/ticks
-  - [ ] labels
+- [x] slider
+  - [X] range
+  - [X] inset
+  - [x] custom before-after
+  - [x] steps
+  - [ ] vertical
 - [ ] select
 - [ ] table
 - [ ] pagination
@@ -83,6 +128,21 @@ Neomorphic ui library for svelte 5
   - [ ] grid
   - [ ] masonry ?
 
+## Author
+
+* Github: [@dvcol](https://github.com/dvcol)
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+ <a href="https://paypal.me/dvcol/5" target="_blank">
+    <img alt="donate" src="https://img.shields.io/badge/Donate%20€-PayPal-brightgreen.svg" />
+</a>
+
+## 📝 License
 
-# TODO (work in progress)
+This project is [MIT](https://github.com/dvcol/neo-svelte/blob/master/LICENSE) licensed.
 
+***
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

package/dist/buttons/NeoButton.svelte

@@ -461,6 +461,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  min-width: max-content;
 }
 .neo-button .neo-content {
   height: 100%;

package/dist/cards/NeoCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FocusEventHandler, MouseEventHandler } from 'svelte/elements';
+  import type { FocusEventHandler, PointerEventHandler } from 'svelte/elements';
   import type { NeoCardContext, NeoCardProps } from './neo-card.model.js';
 
   import NeoButton from '../buttons/NeoButton.svelte';
@@ -62,8 +62,8 @@
     onClose,
     onfocusin,
     onfocusout,
-    onmouseenter,
-    onmouseleave,
+    onpointerenter,
+    onpointerleave,
 
     // Other props
     contentTag = 'div',
@@ -92,14 +92,14 @@
 
   const segments = $derived([content, header, action, footer, media, close].filter(Boolean).length > 1);
 
-  const onMouseEnter: MouseEventHandler<HTMLDivElement> = e => {
+  const onPointerEnter: PointerEventHandler<HTMLDivElement> = e => {
     hovered = true;
-    onmouseenter?.(e);
+    onpointerenter?.(e);
   };
 
-  const onMouseLeave: MouseEventHandler<HTMLDivElement> = e => {
+  const onPointerLeave: PointerEventHandler<HTMLDivElement> = e => {
     hovered = false;
-    onmouseleave?.(e);
+    onpointerleave?.(e);
   };
 
   const onFocusIn: FocusEventHandler<HTMLInputElement> = e => {
@@ -192,8 +192,8 @@
   out:outFn={outProps}
   in:inFn={inProps}
   {...rest}
-  onmouseenter={onMouseEnter}
-  onmouseleave={onMouseLeave}
+  onpointerenter={onPointerEnter}
+  onpointerleave={onPointerLeave}
   onfocusin={onFocusIn}
   onfocusout={onFocusOut}
 >

package/dist/inputs/NeoPin.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EventHandler, FocusEventHandler, MouseEventHandler } from 'svelte/elements';
+  import type { EventHandler, FocusEventHandler, PointerEventHandler } from 'svelte/elements';
   import type { NeoInputHTMLElement } from './common/neo-input.model.js';
   import type { NeoPinContext, NeoPinProps } from './neo-pin.model.js';
   import type { SvelteEvent } from '../utils/html-element.utils.js';
@@ -297,13 +297,13 @@
     oninvalid?.(e);
   };
 
-  const onMouseEnter: MouseEventHandler<HTMLDivElement> = e => {
+  const onPointerEnter: PointerEventHandler<HTMLDivElement> = e => {
     hovered = true;
-    containerProps?.onmouseenter?.(e);
+    containerProps?.onpointerenter?.(e);
   };
-  const onMouseLeave: MouseEventHandler<HTMLDivElement> = e => {
+  const onPointerLeave: PointerEventHandler<HTMLDivElement> = e => {
     hovered = false;
-    containerProps?.onmouseleave?.(e);
+    containerProps?.onpointerleave?.(e);
   };
 
   const affix = $derived(clearable || loading !== undefined || validation);
@@ -359,8 +359,8 @@
     {...containerProps}
     onfocusin={onFocusIn}
     onfocusout={onFocusOut}
-    onmouseenter={onMouseEnter}
-    onmouseleave={onMouseLeave}
+    onpointerenter={onPointerEnter}
+    onpointerleave={onPointerLeave}
   >
     {#if before}
       <svelte:element this={beforeTag} class:neo-pin-before={true} class:neo-vertical={vertical} {...beforeProps}>