ten-protons-datepicker 1.0.1 → 1.1.1

package/README.md

@@ -22,9 +22,11 @@ npm i ten-protons-datepicker
   import 'ten-protons-datepicker/locales/uk'; // optional UI strings for locale="uk"
 </script>
 
-<x-datepicker name="period" mode="range" locale="uk" min="2025-01-01" label="Period"></x-datepicker>
+<ten-protons-datepicker name="period" mode="range" locale="uk" min="2025-01-01" label="Period"></ten-protons-datepicker>
 ```
 
+`<x-datepicker>` is registered as an alias for the same element, so either tag works. Prefer `ten-protons-datepicker`: `x-datepicker` is a generic name another library could also claim, and the first one registered wins.
+
 `mode="range"` / `mode="multiple"` and `enable-time` load their module on demand, so single-date pages don't pay for them.
 
 | Attribute | Notes |
@@ -35,14 +37,37 @@ npm i ten-protons-datepicker
 | `number-of-months`, `show-other-months`, `allow-input`, `close-on-select`, `disabled-days`, `output-timestamp`, `enable-time`, `value-in-utc`, `inline` | booleans: present = true, `="false"` = false |
 
 ```js
-const el = document.querySelector('x-datepicker');
+const el = document.querySelector('ten-protons-datepicker');
 el.value;                       // ISO string of the current selection
 el.options = { disabledDates: (d) => d.getDay() === 0, onChange: console.log };
 el.addEventListener('change', (e) => console.log(e.detail)); // also: open, close, monthChange, yearChange
 await el.ready;                 // resolves with the underlying Datepicker
 ```
 
-Style with `::part(input)`, `::part(toggle)` and the `--tp-*` variables.
+The input is styled out of the box to match the calendar (border, radius and colours, light and dark, red border on invalid input). Restyle it with `::part(input)` and `::part(toggle)`, e.g. `ten-protons-datepicker::part(input) { border-radius: 0 }`. The calendar button is the web component's own icon (at the start of the field, like `showIcon` on a plain input), so `showIcon` doesn't apply to it.
+
+### Vue
+
+Tell Vue that the tag is a custom element (Vite: `vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'ten-protons-datepicker' } } })`), then bind `value` and listen to `change`:
+
+```vue
+<script setup lang="ts">
+  import 'ten-protons-datepicker/wc'; // its CSS is built in; enable-time loads the time module itself
+
+  defineProps<{ modelValue: number | null }>();
+  const emit = defineEmits<{ 'update:modelValue': [timestamp: number | null] }>();
+  const onChange = (e: Event) => {
+    const value = (e as CustomEvent).detail;
+    emit('update:modelValue', typeof value === 'number' ? value : null);
+  };
+</script>
+
+<template>
+  <ten-protons-datepicker :value="modelValue ?? ''" label="Due" value-in-utc output-timestamp enable-time @change="onChange" />
+</template>
+```
+
+Attributes such as `theme` and `max` can be bound the same way. The element is created and destroyed with the component, so there is nothing to clean up. Other frameworks work the same: set attributes, listen to `change`.
 
 ## Imperative API
 
@@ -149,7 +174,7 @@ const dp = withTime(new Datepicker(input, { dateFormat: 'dd.MM.yyyy', onChange:
 ```
 
 ```html
-<x-datepicker enable-time output-timestamp name="meeting"></x-datepicker> <!-- loads the time module itself -->
+<ten-protons-datepicker enable-time output-timestamp name="meeting"></ten-protons-datepicker> <!-- loads the time module itself -->
 ```
 
 How it behaves:
@@ -198,7 +223,7 @@ withTime(new Datepicker(input, { dateFormat: 'dd.MM.yyyy', outputTimestamp: true
 //    typed "1742044029"            shows 15.03.2025 13:07:09   getDate() = 1742044029                  exact round trip
 ```
 
-Ranges work the same way: `withTime(withRange(new Datepicker(input, { outputTimestamp: true })))` returns `[1741597200, 1741804200]` for 10 March 09:00:00 to 12 March 18:30:00 (UTC). In the web component, `<x-datepicker enable-time mode="range">` has the value `2025-03-10T09:00:00/2025-03-12T18:30:00`, or `1741597200/1741804200` with `output-timestamp`.
+Ranges work the same way: `withTime(withRange(new Datepicker(input, { outputTimestamp: true })))` returns `[1741597200, 1741804200]` for 10 March 09:00:00 to 12 March 18:30:00 (UTC). In the web component, `<ten-protons-datepicker enable-time mode="range">` has the value `2025-03-10T09:00:00/2025-03-12T18:30:00`, or `1741597200/1741804200` with `output-timestamp`.
 
 Things to know:
 
@@ -217,7 +242,7 @@ dp.getDate().toISOString();                     // '2025-03-15T00:00:00.000Z', s
 ```
 
 ```html
-<x-datepicker name="due" value-in-utc value="2025-03-15T00:00:00.000Z"></x-datepicker>
+<ten-protons-datepicker name="due" value-in-utc value="2025-03-15T00:00:00.000Z"></ten-protons-datepicker>
 ```
 
 Without it, a user in Kyiv (UTC+2) who picks 15 March gets a `Date` for **local** midnight, and `toISOString()` sends `2025-03-14T22:00:00.000Z`: the backend stores the 14th. That is the bug this option removes.

package/dist/core.css

@@ -1,8 +1,10 @@
-.tp-dp{
+.tp-dp,:host{
   --tp-bg:#fff;--tp-fg:#1f2328;--tp-muted:#656d76;--tp-border:#d0d7de;--tp-hover:#eef1f4;
   --tp-accent:#2563eb;--tp-accent-fg:#fff;--tp-range:#dbe7fd;--tp-focus:#2563eb;
   --tp-radius:.5rem;--tp-cell:2.25rem;--tp-pad:.75rem;--tp-z:1000;
-  --tp-shadow:0 8px 24px rgba(0,0,0,.15);
+  --tp-shadow:0 8px 24px rgba(0,0,0,.15)
+}
+.tp-dp{
   position:relative;box-sizing:border-box;width:max-content;max-width:calc(100vw - 1rem);padding:var(--tp-pad);
   background:var(--tp-bg);color:var(--tp-fg);border:1px solid var(--tp-border);border-radius:var(--tp-radius);
   font:.875rem/1.4 var(--tp-font,inherit)

package/dist/themes.css

@@ -1,10 +1,10 @@
 /* Dark follows prefers-color-scheme unless data-theme="light"; data-theme="dark" forces it. */
-.tp-dp[data-theme=dark]{
+.tp-dp[data-theme=dark],:host([theme=dark]){
   --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
   --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
 }
 @media (prefers-color-scheme:dark){
-  .tp-dp:not([data-theme=light]){
+  .tp-dp:not([data-theme=light]),:host(:not([theme=light])){
     --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
     --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
   }

package/dist/wc.d.ts

@@ -2,7 +2,7 @@ import { a as Datepicker, d as DatepickerOptions } from './Datepicker-Dt5Dt_UX.j
 
 declare const Base: typeof HTMLElement;
 /**
- * `<x-datepicker>`: an input + calendar toggle with the popup inside its shadow root.
+ * `<ten-protons-datepicker>` (alias `<x-datepicker>`): an input + calendar toggle with the popup inside its shadow root.
  *
  * Attributes: `value` (ISO or Unix seconds, ranges `a/b`, multiple `a,b`), `name`, `placeholder`, `label`, `disabled`,
  * `mode`, `locale`, `min`, `max`, `date-format`, `first-day`, `position`, `theme`, `number-of-months`,
@@ -51,6 +51,7 @@ declare class XDatepicker extends Base {
 declare global {
     interface HTMLElementTagNameMap {
         'x-datepicker': XDatepicker;
+        'ten-protons-datepicker': XDatepicker;
     }
 }
 

package/dist/wc.js

@@ -1,8 +1,10 @@
-import {a as a$1}from'./chunk-MTBE7EMZ.js';import'./chunk-CUGUCENC.js';import'./chunk-Q2P4Y4T6.js';import'./chunk-BHROFXOE.js';import'./chunk-ANB32WKT.js';var d=`.tp-dp{
+import {a as a$1}from'./chunk-MTBE7EMZ.js';import'./chunk-CUGUCENC.js';import'./chunk-Q2P4Y4T6.js';import'./chunk-BHROFXOE.js';import'./chunk-ANB32WKT.js';var l=`.tp-dp,:host{
   --tp-bg:#fff;--tp-fg:#1f2328;--tp-muted:#656d76;--tp-border:#d0d7de;--tp-hover:#eef1f4;
   --tp-accent:#2563eb;--tp-accent-fg:#fff;--tp-range:#dbe7fd;--tp-focus:#2563eb;
   --tp-radius:.5rem;--tp-cell:2.25rem;--tp-pad:.75rem;--tp-z:1000;
-  --tp-shadow:0 8px 24px rgba(0,0,0,.15);
+  --tp-shadow:0 8px 24px rgba(0,0,0,.15)
+}
+.tp-dp{
   position:relative;box-sizing:border-box;width:max-content;max-width:calc(100vw - 1rem);padding:var(--tp-pad);
   background:var(--tp-bg);color:var(--tp-fg);border:1px solid var(--tp-border);border-radius:var(--tp-radius);
   font:.875rem/1.4 var(--tp-font,inherit)
@@ -60,15 +62,15 @@ import {a as a$1}from'./chunk-MTBE7EMZ.js';import'./chunk-CUGUCENC.js';import'./
 @media (forced-colors:active){
   .tp-selected{forced-color-adjust:none;background:Highlight;color:HighlightText}
 }
-`;var l=`/* Dark follows prefers-color-scheme unless data-theme="light"; data-theme="dark" forces it. */
-.tp-dp[data-theme=dark]{
+`;var c=`/* Dark follows prefers-color-scheme unless data-theme="light"; data-theme="dark" forces it. */
+.tp-dp[data-theme=dark],:host([theme=dark]){
   --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
   --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
 }
 @media (prefers-color-scheme:dark){
-  .tp-dp:not([data-theme=light]){
+  .tp-dp:not([data-theme=light]),:host(:not([theme=light])){
     --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
     --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
   }
 }
-`;var f={range:()=>import('./range.js'),multiple:()=>import('./multiple.js')},v=()=>import('./time.js'),o=e=>e??void 0,c=e=>e===null?void 0:Number(e),a=e=>e===null?void 0:e!=="false",k=e=>e===null?void 0:e.split(",").map(Number),u=e=>e.split(/\s*[/,;]\s*/).filter(Boolean),h={mode:["mode",o],locale:["locale",o],min:["minDate",o],max:["maxDate",o],"date-format":["dateFormat",o],"first-day":["firstDayOfWeek",c],position:["position",o],theme:["theme",o],"number-of-months":["numberOfMonths",c],"show-other-months":["showOtherMonths",a],"allow-input":["allowInput",a],"close-on-select":["closeOnSelect",a],"disabled-days":["disabledDaysOfWeek",k],"output-timestamp":["outputTimestamp",a],"enable-time":["enableTime",a],"value-in-utc":["valueInUtc",a],inline:["inline",a]},w=["change","open","close","monthChange","yearChange"],y='<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>',x=":host{display:inline-block}:host([hidden]){display:none}.wrap{position:relative;display:flex;align-items:center}input{box-sizing:border-box;width:100%;padding-inline-end:2.25rem;font:inherit}.toggle{position:absolute;inset-inline-end:.25rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:none;color:inherit;cursor:pointer}.toggle:disabled{opacity:.4;cursor:default}:host([inline]) .toggle{display:none}",E=typeof HTMLElement>"u"?class{}:HTMLElement,n=class extends E{constructor(){super();this.ready=Promise.resolve(null);this.picker=null;this.extra={};this.gen=0;this.internals=this.attachInternals?.();let t=this.root=this.attachShadow({mode:"open",delegatesFocus:true});t.innerHTML=`<style>${d}${l}${x}</style><div class="wrap" part="wrap"><input part="input"><button type="button" class="toggle" part="toggle" aria-haspopup="dialog">${y}</button></div>`,this.wrap=t.querySelector(".wrap"),this.input=t.querySelector("input"),this.toggleBtn=t.querySelector("button"),this.iso=document.createElement("input"),this.toggleBtn.addEventListener("click",()=>this.picker?.toggle());}get value(){return this.iso.value}set value(t){this.setAttribute("value",t);}set options(t){this.extra={...this.extra,...t},this.apply();}open(){this.picker?.open();}close(){this.picker?.close();}toggle(){this.picker?.toggle();}connectedCallback(){this.ready=this.init();}disconnectedCallback(){this.teardown();}attributeChangedCallback(t,i,r){if(t==="placeholder")this.input.placeholder=r??"";else if(t==="label")r===null?this.input.removeAttribute("aria-label"):this.input.setAttribute("aria-label",r);else if(t==="disabled")this.setDisabled(r!==null);else if(this.picker)t==="value"?this.setValue(r):t==="inline"?(this.teardown(),this.ready=this.init()):this.apply();else return}formResetCallback(){this.setValue(this.getAttribute("value"));}formDisabledCallback(t){this.setDisabled(t);}opts(){let t={};for(let[i,[r,s]]of Object.entries(h))t[r]=s(this.getAttribute(i));return {...t,...this.extra}}async load({mode:t,enableTime:i}){await Promise.all([t&&f[t]?.(),i&&v()]);}async init(){if(this.picker)return this.picker;let t=++this.gen;if(await this.load(this.opts()),t!==this.gen||!this.isConnected)return null;let i=this.getAttribute("value"),r=this.picker=new a$1(this.input,{...this.opts(),showIcon:false,selected:i?u(i):null,isoInput:this.iso,anchor:this.wrap,appendTo:this.root});for(let s of w)r.addEventListener(s,g=>{s==="change"&&this.syncForm(),this.dispatchEvent(new CustomEvent(s,{detail:g.detail,bubbles:true,composed:true}));});return this.toggleBtn.setAttribute("aria-label",r.strings.label),this.setDisabled(this.hasAttribute("disabled")),this.syncForm(),r}teardown(){this.gen++,this.picker?.destroy(),this.picker=null;}async apply(){let t=this.opts();await this.load(t),this.picker&&(this.picker.setOptions(t),this.syncForm(),this.toggleBtn.setAttribute("aria-label",this.picker.strings.label));}setValue(t){this.picker?.setDate(t?u(t):[]),this.syncForm();}setDisabled(t){this.input.disabled=this.toggleBtn.disabled=t,t&&this.picker?.close();}syncForm(){this.internals?.setFormValue?.(this.iso.value||null);}};n.formAssociated=true,n.observedAttributes=[...Object.keys(h),"value","placeholder","label","disabled"];typeof customElements<"u"&&!customElements.get("x-datepicker")&&customElements.define("x-datepicker",n);export{n as XDatepicker};
+`;var v={range:()=>import('./range.js'),multiple:()=>import('./multiple.js')},k=()=>import('./time.js'),o=e=>e??void 0,u=e=>e===null?void 0:Number(e),a=e=>e===null?void 0:e!=="false",w=e=>e===null?void 0:e.split(",").map(Number),h=e=>e.split(/\s*[/,;]\s*/).filter(Boolean),g={mode:["mode",o],locale:["locale",o],min:["minDate",o],max:["maxDate",o],"date-format":["dateFormat",o],"first-day":["firstDayOfWeek",u],position:["position",o],theme:["theme",o],"number-of-months":["numberOfMonths",u],"show-other-months":["showOtherMonths",a],"allow-input":["allowInput",a],"close-on-select":["closeOnSelect",a],"disabled-days":["disabledDaysOfWeek",w],"output-timestamp":["outputTimestamp",a],"enable-time":["enableTime",a],"value-in-utc":["valueInUtc",a],inline:["inline",a]},y=["change","open","close","monthChange","yearChange"],x='<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>',E=":host{display:inline-block}:host([hidden]){display:none}.wrap{position:relative;display:flex;align-items:center}input{box-sizing:border-box;width:100%;padding:.5rem .75rem;padding-inline-start:2.25rem;font:inherit;color:var(--tp-fg);background:var(--tp-bg);border:1px solid var(--tp-border);border-radius:var(--tp-radius)}input:disabled{opacity:.6}input[aria-invalid=true]{border-color:#d1242f}.toggle{position:absolute;inset-inline-start:.25rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:none;color:var(--tp-fg);cursor:pointer}.toggle:disabled{opacity:.4;cursor:default}:host([inline]) .toggle{display:none}",D=typeof HTMLElement>"u"?class{}:HTMLElement,n=class extends D{constructor(){super();this.ready=Promise.resolve(null);this.picker=null;this.extra={};this.gen=0;this.internals=this.attachInternals?.();let t=this.root=this.attachShadow({mode:"open",delegatesFocus:true});t.innerHTML=`<style>${l}${c}${E}</style><div class="wrap" part="wrap"><input part="input"><button type="button" class="toggle" part="toggle" aria-haspopup="dialog">${x}</button></div>`,this.wrap=t.querySelector(".wrap"),this.input=t.querySelector("input"),this.toggleBtn=t.querySelector("button"),this.iso=document.createElement("input"),this.toggleBtn.addEventListener("click",()=>this.picker?.toggle());}get value(){return this.iso.value}set value(t){this.setAttribute("value",t);}set options(t){this.extra={...this.extra,...t},this.apply();}open(){this.picker?.open();}close(){this.picker?.close();}toggle(){this.picker?.toggle();}connectedCallback(){this.ready=this.init();}disconnectedCallback(){this.teardown();}attributeChangedCallback(t,i,r){if(t==="placeholder")this.input.placeholder=r??"";else if(t==="label")r===null?this.input.removeAttribute("aria-label"):this.input.setAttribute("aria-label",r);else if(t==="disabled")this.setDisabled(r!==null);else if(this.picker)t==="value"?this.setValue(r):t==="inline"?(this.teardown(),this.ready=this.init()):this.apply();else return}formResetCallback(){this.setValue(this.getAttribute("value"));}formDisabledCallback(t){this.setDisabled(t);}opts(){let t={};for(let[i,[r,s]]of Object.entries(g))t[r]=s(this.getAttribute(i));return {...t,...this.extra}}async load({mode:t,enableTime:i}){await Promise.all([t&&v[t]?.(),i&&k()]);}async init(){if(this.picker)return this.picker;let t=++this.gen;if(await this.load(this.opts()),t!==this.gen||!this.isConnected)return null;let i=this.getAttribute("value"),r=this.picker=new a$1(this.input,{...this.opts(),showIcon:false,selected:i?h(i):null,isoInput:this.iso,anchor:this.wrap,appendTo:this.root});for(let s of y)r.addEventListener(s,b=>{s==="change"&&this.syncForm(),this.dispatchEvent(new CustomEvent(s,{detail:b.detail,bubbles:true,composed:true}));});return this.toggleBtn.setAttribute("aria-label",r.strings.label),this.setDisabled(this.hasAttribute("disabled")),this.syncForm(),r}teardown(){this.gen++,this.picker?.destroy(),this.picker=null;}async apply(){let t=this.opts();await this.load(t),this.picker&&(this.picker.setOptions(t),this.syncForm(),this.toggleBtn.setAttribute("aria-label",this.picker.strings.label));}setValue(t){this.picker?.setDate(t?h(t):[]),this.syncForm();}setDisabled(t){this.input.disabled=this.toggleBtn.disabled=t,t&&this.picker?.close();}syncForm(){this.internals?.setFormValue?.(this.iso.value||null);}};n.formAssociated=true,n.observedAttributes=[...Object.keys(g),"value","placeholder","label","disabled"];var M={"ten-protons-datepicker":class extends n{},"x-datepicker":n};if(typeof customElements<"u")for(let[e,p]of Object.entries(M))customElements.get(e)||customElements.define(e,p);export{n as XDatepicker};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ten-protons-datepicker",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Zero-dependency, accessible, tiny datepicker. Vanilla TypeScript + Web Component.",
   "keywords": [
     "datepicker",