@nepdatejs/vanilla 0.0.0-stage → 0.1.1

package/package.json

@@ -1,6 +1,165 @@
 {
   "name": "@nepdatejs/vanilla",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Nepali BS/AD date picker and calendar as Web Components and a plain JavaScript API.",
+  "keywords": [
+    "nepali",
+    "bikram-sambat",
+    "bs",
+    "nepali-date",
+    "date",
+    "calendar",
+    "datepicker",
+    "nepal"
+  ],
+  "license": "MIT",
+  "author": "Shishir Rai",
+  "homepage": "https://github.com/nepdate/nepdate/tree/main/packages/vanilla#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nepdate/nepdate.git",
+    "directory": "packages/vanilla"
+  },
+  "bugs": {
+    "url": "https://github.com/nepdate/nepdate/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./dist/auto-define.*",
+    "./dist/*.global.js",
+    "./src/auto-define.ts",
+    "./src/global.ts"
+  ],
+  "exports": {
+    ".": {
+      "@nepdatejs/source": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./define": {
+      "@nepdatejs/source": "./src/auto-define.ts",
+      "import": {
+        "types": "./dist/auto-define.d.ts",
+        "default": "./dist/auto-define.js"
+      },
+      "require": {
+        "types": "./dist/auto-define.d.cts",
+        "default": "./dist/auto-define.cjs"
+      }
+    },
+    "./date-picker": {
+      "@nepdatejs/source": "./src/date-picker.ts",
+      "import": {
+        "types": "./dist/date-picker.d.ts",
+        "default": "./dist/date-picker.js"
+      },
+      "require": {
+        "types": "./dist/date-picker.d.cts",
+        "default": "./dist/date-picker.cjs"
+      }
+    },
+    "./calendar": {
+      "@nepdatejs/source": "./src/calendar.ts",
+      "import": {
+        "types": "./dist/calendar.d.ts",
+        "default": "./dist/calendar.js"
+      },
+      "require": {
+        "types": "./dist/calendar.d.cts",
+        "default": "./dist/calendar.cjs"
+      }
+    },
+    "./date-range-picker": {
+      "@nepdatejs/source": "./src/date-range-picker.ts",
+      "import": {
+        "types": "./dist/date-range-picker.d.ts",
+        "default": "./dist/date-range-picker.js"
+      },
+      "require": {
+        "types": "./dist/date-range-picker.d.cts",
+        "default": "./dist/date-range-picker.cjs"
+      }
+    },
+    "./date-time-picker": {
+      "@nepdatejs/source": "./src/date-time-picker.ts",
+      "import": {
+        "types": "./dist/date-time-picker.d.ts",
+        "default": "./dist/date-time-picker.js"
+      },
+      "require": {
+        "types": "./dist/date-time-picker.d.cts",
+        "default": "./dist/date-time-picker.cjs"
+      }
+    },
+    "./multi-date-picker": {
+      "@nepdatejs/source": "./src/multi-date-picker.ts",
+      "import": {
+        "types": "./dist/multi-date-picker.d.ts",
+        "default": "./dist/multi-date-picker.js"
+      },
+      "require": {
+        "types": "./dist/multi-date-picker.d.cts",
+        "default": "./dist/multi-date-picker.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "unpkg": "./dist/nepdate-picker.global.js",
+  "jsdelivr": "./dist/nepdate-picker.global.js",
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@nepdatejs/core": "^0.1.1",
+    "@nepdatejs/calendar": "^0.1.0",
+    "@nepdatejs/datepicker": "^0.1.1",
+    "@nepdatejs/dom": "^0.1.1",
+    "@nepdatejs/styles": "^0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "typesVersions": {
+    "*": {
+      "define": [
+        "./dist/auto-define.d.cts"
+      ],
+      "date-picker": [
+        "./dist/date-picker.d.cts"
+      ],
+      "calendar": [
+        "./dist/calendar.d.cts"
+      ],
+      "date-range-picker": [
+        "./dist/date-range-picker.d.cts"
+      ],
+      "date-time-picker": [
+        "./dist/date-time-picker.d.cts"
+      ],
+      "multi-date-picker": [
+        "./dist/multi-date-picker.d.cts"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p tsconfig.json",
+    "check:package": "publint --strict && attw --pack"
+  }
 }

package/src/auto-define.ts

@@ -0,0 +1,6 @@
+/** `import '@nepdatejs/vanilla/define'` registers every element (<nep-date-picker>, <nep-calendar>, …). */
+import { defineElements } from './define';
+
+defineElements();
+
+export { defineElements, ELEMENT_NAMES } from './define';

package/src/calendar-element.ts

@@ -0,0 +1,129 @@
+import { fromIsoDate } from '@nepdatejs/core';
+import {
+  createCalendar as createCalendarStore,
+  isDayList,
+  type CalendarOptions,
+  type CalendarStore,
+  type DateRange,
+} from '@nepdatejs/calendar';
+import { CalendarView } from './calendar-view';
+import {
+  Base,
+  str,
+  bool,
+  onUnlessFalse,
+  calendarAttr,
+  weekday,
+  theme,
+  isoOf,
+  type RichProps,
+} from './element-utils';
+
+/**
+ * <nep-calendar value="2026-10-18"></nep-calendar>
+ *
+ * A standalone month view. Fires `nep-select` with { date, value } (single) or
+ * { range: { start, end } } (with the `range` attribute).
+ */
+export class NepCalendarElement extends Base {
+  static readonly observedAttributes: readonly string[] = [
+    'value',
+    'calendar',
+    'locale',
+    'min',
+    'max',
+    'week-starts-on',
+    'show-other-calendar',
+    'show-outside-days',
+    'range',
+    'theme',
+  ];
+
+  store: CalendarStore | null = null;
+  private view: CalendarView | null = null;
+  private rich: RichProps = {};
+
+  get holidays(): RichProps['holidays'] {
+    return this.rich.holidays;
+  }
+  set holidays(next: RichProps['holidays']) {
+    this.rich = { ...this.rich, holidays: next };
+    this.store?.setOptions({ holidays: next });
+  }
+  get events(): RichProps['events'] {
+    return this.rich.events;
+  }
+  set events(next: RichProps['events']) {
+    this.rich = { ...this.rich, events: next };
+    this.store?.setOptions({ events: next });
+  }
+  get isDateDisabled(): RichProps['isDateDisabled'] {
+    return this.rich.isDateDisabled;
+  }
+  set isDateDisabled(next: RichProps['isDateDisabled']) {
+    this.rich = { ...this.rich, isDateDisabled: next };
+    this.store?.setOptions({ isDateDisabled: next });
+  }
+
+  connectedCallback(): void {
+    if (this.store) {
+      return;
+    }
+    const store = createCalendarStore({
+      ...this.readOptions(),
+      onSelect: (selection) => {
+        const detail = isDayList(selection)
+          ? { dates: selection, values: selection.map(isoOf) }
+          : 'calendar' in selection
+            ? { date: selection, value: isoOf(selection) }
+            : {
+                range: {
+                  start: isoOf(selection.start),
+                  end: isoOf(selection.end),
+                } satisfies Record<keyof DateRange, string>,
+              };
+        this.dispatchEvent(new CustomEvent('nep-select', { bubbles: true, detail }));
+      },
+    });
+    this.store = store;
+    this.view = new CalendarView(this, store, { locale: () => str(this, 'locale') });
+    this.applyTheme();
+  }
+
+  disconnectedCallback(): void {
+    this.view?.destroy();
+    this.view = null;
+    this.store = null;
+  }
+
+  attributeChangedCallback(): void {
+    this.store?.setOptions(this.readOptions());
+    this.applyTheme();
+  }
+
+  private applyTheme(): void {
+    const value = theme(this);
+    if (this.view) {
+      if (value) {
+        this.view.element.dataset['ndpTheme'] = value;
+      } else {
+        delete this.view.element.dataset['ndpTheme'];
+      }
+    }
+  }
+
+  private readOptions(): CalendarOptions {
+    return {
+      ...this.rich,
+      selected: fromIsoDate(this.getAttribute('value')),
+      calendar: calendarAttr(this, 'calendar'),
+      locale: str(this, 'locale'),
+      min: fromIsoDate(this.getAttribute('min')),
+      max: fromIsoDate(this.getAttribute('max')),
+      weekStartsOn: weekday(this, 'week-starts-on'),
+      showOtherCalendar: onUnlessFalse(this, 'show-other-calendar'),
+      showOutsideDays: onUnlessFalse(this, 'show-outside-days'),
+      selectionMode: bool(this, 'range') ? 'range' : 'single',
+    };
+  }
+}