selectamelo 0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,261 @@
+
+
+# Selectamelo
+
+`selectamelo` is a **vanilla JavaScript** component that enhances a standard  
+HTML `<select>` element (single or multiple) into a modern, accessible and dynamic select.
+
+It does **not** use jQuery, does **not** depend on UI frameworks, and keeps the original  
+`<select>` in the DOM to preserve native form submission and backend compatibility.
+
+---
+
+## Features
+
+- Single and multiple select
+- Built-in search
+- Clear button (X)
+- Multiple select with removable chips
+- Full keyboard navigation (↑ ↓ Enter Esc Tab Backspace)
+- Dynamic option management
+- Native HTML `disabled`
+- Simulated `readonly` (non-editable but still submitted)
+- Custom events (`zselect:*`)
+- 100% Vanilla JS
+
+---
+
+## Installation
+
+### NPM
+```bash
+npm install selectamelo
+```
+
+### Build (package development only)
+```bash
+npm run build
+```
+
+---
+
+## Basic usage
+
+### HTML
+```html
+<select id="role">
+  <option value=""></option>
+  <option value="admin">Admin</option>
+  <option value="editor">Editor</option>
+</select>
+```
+
+### JavaScript (ESM)
+```js
+import { ZSelectCore } from "selectamelo";
+
+const select = document.querySelector("#role");
+
+ZSelectCore.create(select, {
+  placeholder: "Select a role"
+});
+```
+
+---
+
+## Options
+
+```ts
+type ZSelectCoreOptions = {
+  searchable?: boolean;   // default true
+  placeholder?: string;   // default ""
+  allowClear?: boolean;   // default true
+  hideSearch?: boolean;   // default false
+
+  disabled?: boolean;     // disables the select (NOT submitted)
+  readonly?: boolean;     // locks UI but value is submitted
+};
+```
+
+### disabled vs readonly
+
+| State     | Interaction | Submit |
+|----------|-------------|--------|
+| disabled | ❌          | ❌     |
+| readonly | ❌          | ✅     |
+
+HTML-driven options are also supported:
+```html
+<select
+  data-allow-clear="true"
+  data-hide-search="true"
+  data-searchable="false"
+  data-readonly="true"
+></select>
+```
+
+---
+
+## Instance API
+
+### Create / Get
+```js
+const inst = ZSelectCore.create(select);
+const same = ZSelectCore.get(select);
+```
+
+---
+
+### Value
+
+```js
+inst.getValue();              // string | string[]
+inst.setValue("admin");       // single
+inst.setValue(["1","2"]);     // multiple
+inst.setValue(null);          // reset
+```
+
+---
+
+### Open / Close
+
+```js
+inst.open();
+inst.close();
+```
+
+---
+
+### State
+
+```js
+inst.setDisabled(true);
+inst.setDisabled(false);
+
+inst.setReadonly(true);
+inst.setReadonly(false);
+
+inst.isDisabled(); // boolean
+inst.isReadonly(); // boolean
+```
+
+---
+
+### Loading
+
+Temporarily blocks UI interaction.
+
+```js
+inst.setLoading(true);
+inst.setLoading(false);
+```
+
+---
+
+## Dynamic option management
+
+### Clear options
+```js
+inst.clearOptions(true); // keep placeholder
+```
+
+---
+
+### Set a full option list
+```js
+inst.setOptions(
+  [
+    { value: "1", label: "Rome" },
+    { value: "2", label: "Tivoli", disabled: true }
+  ],
+  true
+);
+```
+
+---
+
+### Add an option
+```js
+inst.addOption({ value: "3", label: "Latina" });
+```
+
+### Add and select
+```js
+inst.addOption({ value: "3", label: "Latina" }, true);
+```
+
+---
+
+### Remove an option
+```js
+inst.removeOption("2");
+```
+
+---
+
+### Update an option
+```js
+inst.updateOption("1", { label: "Rome (RM)" });
+inst.updateOption("2", { disabled: false });
+```
+
+---
+
+### Upsert (create or update)
+```js
+inst.upsertOption({ value: "9", label: "Frosinone" });
+inst.upsertOption({ value: "9", label: "Frosinone (FR)" });
+```
+
+---
+
+## Custom events
+
+Events are emitted **on the original `<select>` element**.
+
+```js
+select.addEventListener("zselect:change", e => {
+  console.log(e.detail.value);
+});
+```
+
+### Available events
+
+| Event            | Description |
+|------------------|-------------|
+| `zselect:open`   | Dropdown opened |
+| `zselect:close`  | Dropdown closed |
+| `zselect:search` | Search input (`detail.q`) |
+| `zselect:clear`  | Value cleared |
+| `zselect:change` | Value changed |
+
+---
+
+## Common pattern: dependent selects
+
+```js
+province.addEventListener("change", () => {
+  cityInst.setOptions(
+    [...province.selectedOptions].map(o => ({
+      value: o.value,
+      label: o.textContent.trim()
+    }))
+  );
+});
+```
+
+---
+
+## Philosophy
+
+- No dependencies
+- No frameworks
+- DOM as the source of truth
+- Core-only and framework-agnostic
+- Optional adapters/wrappers
+
+---
+
+## License
+
+MIT © Zycon