Merge pull request #180 from mskocik/svelte-5

Svelte 5 rewrite

.editorconfig

@@ -5,6 +5,6 @@ insert_final_newline = true
 charset = utf-8
 trim_trailing_whitespace = true
 
-[*.{svelte,js,css}]
+[*.{svelte,js,css,md}]
 indent_style = space
 indent_size = 2

.gitignore

@@ -1,14 +1,29 @@
-.DS_Store
 node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
 /build
-/_old
 /dist
-!/dist/svelty-picker
-/.svelte-kit
-/src/routes/test
-/package
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
+!.env.test
+
+# Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+/__old
+/docs
+*.todo
+src/routes/test/*

.npmrc

@@ -1,2 +1 @@
 engine-strict=true
-resolution-mode=highest

CHANGELOG.md

@@ -0,0 +1,6 @@
+## v6.0
+
+- breaking: svelte 5 only
+- breaking: remove `initialDate` property in favor of function bindings (https://svelte.dev/docs/svelte/bind#Function-bindings)
+- breaking: fix wrapper class names typos: `std-component-wrap` to `sdt-component-wrap` and `std-calendar-wrap` to `sdt-calendar-wrap`
+- breaking: event emitting logic (on every change there is event emitted, if it's not desired, disable autocommit)

README.md

@@ -1,67 +1,58 @@
-# 📆 Svelty Picker [![NPM version](https://img.shields.io/npm/v/svelty-picker.svg?style=flat)](https://www.npmjs.org/package/svelty-picker)
+# create-svelte
 
-Simple date & time picker implemented in svelte.
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
-Features:
-- date/time/datetime/range picker mode
-- various formatting options
-- keyboard navigation
-- replacable slots
-- themable
-- customizable disabled dates
-<!-- - validator action for `<input>` using `svelte-use-forms` (optional) -->
-- custom element
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-## ⚙️ Install
+## Creating a project
 
-```js
-npm install svelty-picker
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
 ```
 
-## Property list
-
-| Property        | Type          | Default       | Description |
-|-----------------|---------------|---------------|-------------------|
-| inputId         | `string`      | `""`          | id attribute for input element
-| name            | `string`      | `'date'`      | html attribute for underlying `<input>` element  |
-| disabled        | `bool`        | `false`       | html attribute for underlying `<input>` element  |
-| placeholder     | `string`      | `null`        | html attribute for underlying `<input>` element  |
-| required        | `bool`        | `false`       | html attribute for underlying `<input>` element  |
-| value           | `string`      | `null`        | string representation of selected value |
-| initialDate     | `Date`        | `null`        | initial date object, if you prefer that to `value` |
-| isRange         | `bool`        | `false`       | enables range picker mode  |
-| startDate       | <code>string\|Date</code>| `null`        | limit minimal selectable date |
-| endDate         | <code>string\|Date</code>| `null`        | limit maximal selectable date |
-| pickerOnly      | `bool`        | `false`       | Picker is always visible and input field is then hidden, but still present |
-| startView       | `number`      | `2`           | Which mode should picker at, `0` - decade, `1` - year, `2` - month (default), `3` - time picker
-| mode            | `string`      | `auto`        | restrict picker's mode. Possible values: `auto\|date\|datetime\|time`. By default it try to guess the mode from `format` |
-| disableDatesFn  | `function`    | `null`        | Function whether passed date should be disabled or not |
-| manualInput     | `bool`        | `false`       | Whether manual date entry is allowed |
-| format          | `string`      | `'yyyy-mm-dd'`  | Format of entered date/time.  |
-| formatType      | `string`      | `'standard'`  | Format type (`standard` or `php`) |
-| displayFormat          | `string`      | `null`  | Display format of entered date/time.  |
-| displayFormatType      | `string`      | `null`  | Display format type (`standard` or `php`) |
-| minuteIncrement | `number`      | `1`           | number in range `1-60` to set the increment of minutes choosable |
-| weekStart       | `number`      | `1`           | number in range `0-6` to select first day of the week. Sunday is `0` |
-| inputClasses    | `string`      | `""`            | input css class string |
-| todayBtnClasses | `string`      | `'sdt-action-btn sdt-today-btn'` | today button css classes |
-| clearBtnClasses | `string`      | `'sdt-action-btn sdt-clear-btn'` | clear button css classes |
-| todayBtn        | `bool`        | `true`        | Show today button |
-| clearBtn        | `bool`        | `true`        | Show clear button |
-| clearToggle     | `bool`        | `true`        | Allows to clear selected date when clicking on the same date when in `mode='date'` or `mode='auto'` resolving to `'date'` |
-| autocommit       | `bool`        | `true`        | Whether date/time selection is automatic or manual |
-| i18n            | `object`      | `en`          | localization object, english is by default |
-| validatorAction | `array`       | `null`        | Bind validator action for inner `<input>` element. Designed to be used with `svelte-use-form`.
-| positionResolver | `function`   | internal      | Action which resolves floating position of picker. Default one uses `@floating-ui` under the hood. So you can use this library for your custom position resolver function
-
-### Documentation
-
-For more details check the [documentation](https://mskocik.github.io/svelty-picker/)
-
-## 🏆 Thanks to:
-
-- [Bootstrap datepicker](https://github.com/smalot/bootstrap-datetimepicker/blob/master/js/bootstrap-datetimepicker.js) for some internal date and format handling
-
-## Licence
-
-MIT
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```