uvarov-frontend · uvarov-frontend · Nov 27, 2023 · Nov 9, 2023 · Nov 9, 2023 · Nov 9, 2023
diff --git a/.eslintrc b/.eslintrc
@@ -26,8 +26,9 @@
 		"class-methods-use-this": "off",
 		"max-len": ["error", { "code": 180 }],
 		"prefer-destructuring": ["error", { "object": true, "array": false }],
-		"indent": ["error", "tab", { "SwitchCase": 1 }],
-		"@typescript-eslint/indent": ["error", "tab", { "SwitchCase": 1 }]
+		"indent": "off",
+		"@typescript-eslint/indent": ["error", "tab", { "SwitchCase": 1 }],
+		"@typescript-eslint/lines-between-class-members": "off"
 	},
 	"overrides": [
 		{

diff --git a/config/js.config.ts b/config/js.config.ts
@@ -13,7 +13,14 @@ export default defineConfig({
 		lib: {
 			name: 'VanillaCalendar',
 			fileName(format, entryName) { return `${entryName}.min${format === 'es' ? '.mjs' : '.js'}`; },
-			entry: resolve(__dirname, '../package/src/scripts/vanilla-calendar.ts'),
+			entry: resolve(__dirname, '../package/src/vanilla-calendar.ts'),
+		},
+	},
+	resolve: {
+		alias: {
+			'@': resolve(__dirname, '../'),
+			'@src': resolve(__dirname, '../package/src'),
+			'@scripts': resolve(__dirname, '../package/src/scripts'),
 		},
 	},
 	plugins: [

diff --git a/demo/index.css b/demo/index.css
@@ -23,5 +23,5 @@
 }
 
 .input {
-	@apply bg-white py-2 px-3 rounded text-sm text-slate-900 w-64 border-gray-200 outline-none h-9 text-left
+	@apply bg-white py-2 px-3 rounded text-sm text-slate-900 w-64 border-gray-200 outline-none h-9 text-left inline-block
 }
diff --git a/demo/main.ts b/demo/main.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import '@/package/src/styles/vanilla-calendar.css';
-import '@/package/src/styles/themes/light.css';
-import '@/package/src/styles/themes/dark.css';
+import '@src/styles/vanilla-calendar.css';
+import '@src/styles/themes/light.css';
+import '@src/styles/themes/dark.css';
 // import VanillaCalendar from '@/package/build/vanilla-calendar.min';
-import VanillaCalendar from '@/package/src/scripts/vanilla-calendar';
-import IVanillaCalendar, { Options } from '@/package/src';
+import VanillaCalendar from '@src/vanilla-calendar';
+import { IOptions } from '@src/types';
 
-const config: Options = {
+const config: IOptions = {
 	settings: {
 		selected: {
 			month: 3,
@@ -16,7 +16,6 @@ const config: Options = {
 };
 
 document.addEventListener('DOMContentLoaded', () => {
-	// @ts-ignore: VanillaCalendar config
-	const calendar: IVanillaCalendar<string, Options> = new VanillaCalendar('#calendar', config);
+	const calendar = new VanillaCalendar('#calendar', config);
 	calendar.init();
 });
diff --git a/demo/pages/input/index.html b/demo/pages/input/index.html
@@ -12,12 +12,12 @@
 	<body class="font-sans bg-white bg-light-mode text-slate-900 min-h-screen container mx-auto text-center flex flex-col items-center py-12 dark:bg-slate-900 dark:bg-dark-mode dark:text-white">
 		<h1 class="block mb-7 text-6xl font-extrabold">Vanilla Calendar</h1>
 		<p class="text-lg mb-12 dark:text-slate-400">A pure JavaScript date and time picker using TypeScript so it supports any JS framework and library.</p>
-		<label class="wrapper-calendar">
-			<span>Datepicker tag 'input'</span>
+		<label>
+			<div>Datepicker tag 'input'</div>
 			<input id="calendar-input" class="input" name="calendar" type="text" readonly />
 		</label>
-		<div class="wrapper-calendar">
-			<span>Datepicker tag 'div'</span>
+		<div>
+			<div>Datepicker tag 'div'</div>
 			<div id="calendar-div" class="input"></div>
 		</div>
 	</body>

diff --git a/demo/pages/input/main.ts b/demo/pages/input/main.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import '@/package/src/styles/vanilla-calendar.css';
-import '@/package/src/styles/themes/light.css';
-import '@/package/src/styles/themes/dark.css';
+import '@src/styles/vanilla-calendar.css';
+import '@src/styles/themes/light.css';
+import '@src/styles/themes/dark.css';
 // import VanillaCalendar from '@/package/build/vanilla-calendar.min';
-import VanillaCalendar from '@/package/src/scripts/vanilla-calendar';
-import IVanillaCalendar, { Options } from '@/package/src';
+import VanillaCalendar from '@src/vanilla-calendar';
+import { IOptions } from '@src/types';
 
-const configInput: Options = {
+const configInput: IOptions = {
 	input: true,
 	actions: {
 		changeToInput(e, calendar, dates) {
@@ -21,7 +21,7 @@ const configInput: Options = {
 	},
 };
 
-const configDiv: Options = {
+const configDiv: IOptions = {
 	input: true,
 	actions: {
 		changeToInput(e, calendar, dates) {
@@ -37,10 +37,9 @@ const configDiv: Options = {
 };
 
 document.addEventListener('DOMContentLoaded', () => {
-	// @ts-ignore: VanillaCalendar config
-	const calendarInput: IVanillaCalendar<string, Options> = new VanillaCalendar('#calendar-input', configInput);
+	const calendarInput = new VanillaCalendar('#calendar-input', configInput);
 	calendarInput.init();
-	// @ts-ignore: VanillaCalendar config
-	const calendarDiv: IVanillaCalendar<string, Options> = new VanillaCalendar('#calendar-div', configDiv);
+
+	const calendarDiv = new VanillaCalendar('#calendar-div', configDiv);
 	calendarDiv.init();
 });
diff --git a/demo/pages/multiple/main.ts b/demo/pages/multiple/main.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import '@/package/src/styles/vanilla-calendar.css';
-import '@/package/src/styles/themes/light.css';
-import '@/package/src/styles/themes/dark.css';
+import '@src/styles/vanilla-calendar.css';
+import '@src/styles/themes/light.css';
+import '@src/styles/themes/dark.css';
 // import VanillaCalendar from '@/package/build/vanilla-calendar.min';
-import VanillaCalendar from '@/package/src/scripts/vanilla-calendar';
-import IVanillaCalendar, { Options } from '@/package/src';
+import VanillaCalendar from '@src/vanilla-calendar';
+import { IOptions } from '@src/types';
 
-const config: Options = {
+const config: IOptions = {
 	type: 'multiple',
 	settings: {
 		selection: {
@@ -20,7 +20,6 @@ const config: Options = {
 };
 
 document.addEventListener('DOMContentLoaded', () => {
-	// @ts-ignore: VanillaCalendar config
-	const calendar: IVanillaCalendar<string, Options> = new VanillaCalendar('#calendar', config);
+	const calendar = new VanillaCalendar('#calendar', config);
 	calendar.init();
 });
diff --git a/package.json b/package.json
@@ -45,19 +45,19 @@
 		"@types/node": "^18.14.4",
 		"@typescript-eslint/eslint-plugin": "^5.54.0",
 		"@typescript-eslint/parser": "^5.54.0",
-		"autoprefixer": "^10.4.13",
+		"autoprefixer": "^10.4.16",
 		"cypress": "^12.11.0",
 		"eslint": "^8.35.0",
 		"eslint-config-airbnb-base": "^15.0.0",
 		"eslint-config-airbnb-typescript": "^17.0.0",
 		"eslint-plugin-cypress": "^2.13.2",
 		"eslint-plugin-import": "^2.27.5",
-		"postcss": "^8.4.21",
+		"postcss": "^8.4.31",
 		"start-server-and-test": "^2.0.0",
 		"tailwindcss": "^3.2.7",
 		"terser": "^5.16.5",
 		"typescript": "^4.9.3",
-		"vite": "^4.1.0",
+		"vite": "^4.5.0",
 		"vite-plugin-banner": "^0.7.0",
 		"vite-plugin-eslint": "^1.8.1"
 	},

diff --git a/package/.npmignore b/package/.npmignore
@@ -0,0 +1,4 @@
+src/vanilla-calendar.ts
+src/scripts
+src/styles
+public
diff --git a/package/README.md b/package/README.md
@@ -1,15 +1,15 @@
-# Vanilla Calendar - A Lightweight, Feature-Rich JavaScript Date and Time Picker
+# VanillaCalendar - A Lightweight, Feature-Rich JavaScript Date and Time Picker
 
 [![vanilla-calendar preview](https://vanilla-calendar.com/vanilla-calendar-preview.png)](https://vanilla-calendar.com/)
 
 [![package-badge]][package]
 
-Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.
+VanillaCalendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.
 
 ## Key Features
 
 - **Lightweight**: The final minified .js file is only approximately **44.4 KB**, and with gzip compression, it's just around **10.8 KB**.
-- **No Dependencies**: Vanilla Calendar is entirely self-contained, ensuring you don't need to include additional libraries.
+- **No Dependencies**: VanillaCalendar is entirely self-contained, ensuring you don't need to include additional libraries.
 - **Simple Localization**: Supports simple localization for any language.
 - **Customizable**: Can be easily configured using CSS and HTML markup.
 - **Multiple Instances**: Allows for an unlimited number of calendar instances on a single page.
@@ -20,7 +20,7 @@ Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript
 
 ## Browser Support
 
-Vanilla Calendar is compatible with a wide range of browsers:
+VanillaCalendar is compatible with a wide range of browsers:
 
 ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
@@ -30,13 +30,13 @@ Vanilla Calendar is compatible with a wide range of browsers:
 
 This plugin is completely free, and your support is important. Please feel free to report any issues or share your new ideas; it's really important!
 
-If you like Vanilla Calendar, please consider giving it a 🌟 star on GitHub.
+If you like VanillaCalendar, please consider giving it a 🌟 star on GitHub.
 
 ## Getting Started
 
 ### Installation
 
-You can install Vanilla Calendar using npm or yarn:
+You can install VanillaCalendar using npm or yarn:
 
 ```sh
 npm install @uvarov.frontend/vanilla-calendar
@@ -48,7 +48,7 @@ If you prefer not to use a package manager, you can also include it via [CDN](ht
 
 ### Usage
 
-Here's a simple example of how to use Vanilla Calendar in your HTML:
+Here's a simple example of how to use VanillaCalendar in your HTML:
 
 ```html
 <html>
@@ -65,18 +65,18 @@ Here's a simple example of how to use Vanilla Calendar in your HTML:
 To add the necessary styles and scripts, you can use the following code:
 
 ```js
-// Import Vanilla Calendar
-import Vanilla Calendar from '@uvarov.frontend/vanilla-calendar';
+// JS Script
+import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
 
-// Import the basic styles
+// Basic styles
 import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 
-// Import additional styles
+// Additional styles
 import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
 
 // Initialize the calendar
-const calendar = new Vanilla Calendar('#calendar');
+const calendar = new VanillaCalendar('#calendar');
 calendar.init();
 // or
 // const calendarWithInput = new VanillaCalendar('#calendar-input', { input: true });
@@ -110,7 +110,7 @@ If you're not using a package manager and prefer manual installation or CDN usag
 
 ## CSS Themes
 
-Vanilla Calendar includes two CSS themes: the **light theme** and the **dark theme**.
+VanillaCalendar includes two CSS themes: the **light theme** and the **dark theme**.
 
 - The **vanilla-calendar.min.css** file contains the essential structural styles for the calendar.
 - The **light.min.css** theme provides a light color scheme.
@@ -120,7 +120,7 @@ The calendar will automatically display the theme based on the user's system pre
 
 ## DOM Templates
 
-Vanilla Calendar features customizable DOM templates that allow you to modify the structure of the calendar to fit your needs. The templates are identified by tags containing the **#** character, and they should include a trailing slash at the end.
+VanillaCalendar features customizable DOM templates that allow you to modify the structure of the calendar to fit your needs. The templates are identified by tags containing the **#** character, and they should include a trailing slash at the end.
 
 Here's an example of the default template:
 
@@ -151,7 +151,7 @@ new VanillaCalendar('#calendar', {
 
 ## React Component
 
-For detailed instructions on using Vanilla Calendar in a React component with TypeScript, please visit the [website](https://vanilla-calendar.com/docs/learn/additional-features/react-component) for comprehensive documentation and examples.
+For detailed instructions on using VanillaCalendar in a React component with TypeScript, please visit the [website](https://vanilla-calendar.com/docs/learn/additional-features/react-component) for comprehensive documentation and examples.
 
 ## API Reference
 

diff --git a/package/build/themes/dark.min.css b/package/build/themes/dark.min.css
diff --git a/package/build/themes/light.min.css b/package/build/themes/light.min.css