Dev

babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    ['@vue/cli-plugin-babel/preset', {
+      targets: {
+        browsers: ['> 1%', 'not dead', 'not op_mini all']
+      }
+    }]
   ]
 }

cypress.json

@@ -1,4 +1,4 @@
 {
-	"baseUrl": "http://localhost:8081",
+	"baseUrl": "http://localhost:8080",
 	"projectId": "32fyob"
 }

dist/build.js.LICENSE.txt

@@ -62,13 +62,13 @@
 
 /*! -!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=style&index=0&lang=scss& */
 
-/*! -!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=template&id=b50420d4& */
+/*! -!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=template&id=5a07fa16& */
 
 /*! -!../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js& */
 
 /*! -!../node_modules/style-loader/dist/cjs.js!../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss& */
 
-/*! -!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=template&id=1ca67f6e& */
+/*! -!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=template&id=5efbd083& */
 
 /*! ../../node_modules/css-loader/dist/runtime/api.js */
 
@@ -308,7 +308,7 @@
 
 /*! ./App.vue?vue&type=style&index=0&lang=scss& */
 
-/*! ./App.vue?vue&type=template&id=1ca67f6e& */
+/*! ./App.vue?vue&type=template&id=5efbd083& */
 
 /*! ./ArrowIcon.vue?vue&type=script&lang=js& */
 
@@ -334,7 +334,7 @@
 
 /*! ./DatePicker.vue?vue&type=style&index=0&lang=scss& */
 
-/*! ./DatePicker.vue?vue&type=template&id=b50420d4& */
+/*! ./DatePicker.vue?vue&type=template&id=5a07fa16& */
 
 /*! ./arrayLikeToArray.js */
 
@@ -491,7 +491,7 @@
   \****************************************************/
 
 /*!****************************************************!*\
-  !*** ./src/App.vue?vue&type=template&id=1ca67f6e& ***!
+  !*** ./src/App.vue?vue&type=template&id=5efbd083& ***!
   \****************************************************/
 
 /*!*****************************************************!*\
@@ -1047,7 +1047,7 @@
   \**********************************************************************/
 
 /*!**********************************************************************!*\
-  !*** ./src/components/DatePicker.vue?vue&type=template&id=b50420d4& ***!
+  !*** ./src/components/DatePicker.vue?vue&type=template&id=5a07fa16& ***!
   \**********************************************************************/
 
 /*!***********************************************************************!*\
@@ -1171,15 +1171,15 @@
   \***************************************************************************************************************************************************************************************/
 
 /*!*******************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=1ca67f6e& ***!
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=5efbd083& ***!
   \*******************************************************************************************************************************************************************************************/
 
 /*!********************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/utils/components/CalendarClockIcon.vue?vue&type=script&lang=js& ***!
   \********************************************************************************************************************************************************************************************/
 
 /*!*************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/DatePicker.vue?vue&type=template&id=b50420d4& ***!
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/DatePicker.vue?vue&type=template&id=5a07fa16& ***!
   \*************************************************************************************************************************************************************************************************************/
 
 /*!*****************************************************************************************************************************************************************************************************************************!*\

dist/datepicker.common.js.LICENSE.txt

@@ -40,7 +40,7 @@
 
 /*! -!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=style&index=0&lang=scss& */
 
-/*! -!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=template&id=b50420d4& */
+/*! -!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=template&id=5a07fa16& */
 
 /*! ../../node_modules/css-loader/dist/runtime/api.js */
 
@@ -294,7 +294,7 @@
 
 /*! ./DatePicker.vue?vue&type=style&index=0&lang=scss& */
 
-/*! ./DatePicker.vue?vue&type=template&id=b50420d4& */
+/*! ./DatePicker.vue?vue&type=template&id=5a07fa16& */
 
 /*! ./arrayLikeToArray.js */
 
@@ -979,7 +979,7 @@
   \**********************************************************************/
 
 /*!**********************************************************************!*\
-  !*** ./src/components/DatePicker.vue?vue&type=template&id=b50420d4& ***!
+  !*** ./src/components/DatePicker.vue?vue&type=template&id=5a07fa16& ***!
   \**********************************************************************/
 
 /*!***********************************************************************!*\
@@ -1103,7 +1103,7 @@
   \********************************************************************************************************************************************************************************************/
 
 /*!*************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/DatePicker.vue?vue&type=template&id=b50420d4& ***!
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/DatePicker.vue?vue&type=template&id=5a07fa16& ***!
   \*************************************************************************************************************************************************************************************************************/
 
 /*!*****************************************************************************************************************************************************************************************************************************!*\

dist/datepicker.min.js.LICENSE.txt

@@ -40,7 +40,7 @@
 
 /*! -!../../node_modules/style-loader/dist/cjs.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=style&index=0&lang=scss& */
 
-/*! -!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=template&id=b50420d4& */
+/*! -!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DatePicker.vue?vue&type=template&id=5a07fa16& */
 
 /*! ../../node_modules/css-loader/dist/runtime/api.js */
 
@@ -294,7 +294,7 @@
 
 /*! ./DatePicker.vue?vue&type=style&index=0&lang=scss& */
 
-/*! ./DatePicker.vue?vue&type=template&id=b50420d4& */
+/*! ./DatePicker.vue?vue&type=template&id=5a07fa16& */
 
 /*! ./arrayLikeToArray.js */
 
@@ -979,7 +979,7 @@
   \**********************************************************************/
 
 /*!**********************************************************************!*\
-  !*** ./src/components/DatePicker.vue?vue&type=template&id=b50420d4& ***!
+  !*** ./src/components/DatePicker.vue?vue&type=template&id=5a07fa16& ***!
   \**********************************************************************/
 
 /*!***********************************************************************!*\
@@ -1103,7 +1103,7 @@
   \********************************************************************************************************************************************************************************************/
 
 /*!*************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/DatePicker.vue?vue&type=template&id=b50420d4& ***!
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/DatePicker.vue?vue&type=template&id=5a07fa16& ***!
   \*************************************************************************************************************************************************************************************************************/
 
 /*!*****************************************************************************************************************************************************************************************************************************!*\

nuxt.js

@@ -7,6 +7,7 @@ export default function (option) {
 	this.nuxt.hook("components:dirs", (dirs) => {
 		dirs.push({
 			path: join(__dirname, "src/components"),
+			pattern: "**/*.vue",
 		});
 	});
 }

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@alireza-ab/vue-persian-datepicker",
 	"description": "A datepicker component for select persian date",
-	"version": "2.3.0",
+	"version": "2.3.2",
 	"main": "./dist/datepicker.common.js",
 	"unpkg": "./dist/datepicker.min.js",
 	"scripts": {
@@ -54,11 +54,13 @@
 	"author": "Alireza Alibeiki <[email protected]>",
 	"license": "MIT",
 	"dependencies": {
-		"@alireza-ab/persian-date": "^2.6.1"
+		"@alireza-ab/persian-date": "^2.6.2"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.17.0",
 		"@vue/cli-plugin-babel": "^4.5.15",
+		"@vue/compat": "^3.1.0",
+		"@vue/compiler-sfc": "^3.1.0",
 		"@webpack-cli/serve": "^1.6.1",
 		"babel-loader": "^8.2.3",
 		"core-js": "^3.21.0",
@@ -71,16 +73,16 @@
 		"sass-loader": "^12.4.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.1",
-		"vue": "^2.6.14",
-		"vue-loader": "^15.9.8",
-		"vue-template-compiler": "^2.6.14",
+		"vue": "^3.1.0",
+		"vue-loader": "^16.0.0",
 		"webpack": "^5.68.0",
 		"webpack-cli": "^4.9.2",
 		"webpack-dev-server": "^3.11.2"
 	},
 	"browserslist": [
 		"> 1%",
 		"last 2 versions",
-		"not dead"
+		"not dead",
+		"not op_mini all"
 	]
 }

public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+		<title>Vue Persian DatePicker</title>
+		<link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/font-face.css" rel="stylesheet" type="text/css" />
+	</head>
+	<body>
+		<noscript>
+			<strong
+				>We're sorry but this doesn't work properly without JavaScript enabled.
+				Please enable it to continue.</strong
+			>
+		</noscript>
+		<div id="app"></div>
+		<!-- built files will be auto injected -->
+		<script src="dist/build.js"></script>
+	</body>
+</html>

src/components/DatePicker.vue

@@ -9,7 +9,7 @@
 		ref="root"
 	>
 		<slot name="before">
-			<label v-if="label" :for="attrs.input.id" v-bind="attrs.label">
+			<label v-if="label"  v-bind="attrs.label" :for="attrs.input.id">
 				{{ label }}
 			</label>
 		</slot>
@@ -41,11 +41,11 @@
 				</slot>
 			</div>
 			<input
+				v-bind="attrs.input"
 				type="text"
 				autocomplete="off"
 				ref="pdpInput"
 				v-model="displayValue"
-				v-bind="attrs.input"
 				v-on="$listeners"
 				@focus="showPicker('input')"
 				@keydown="selectWithArrow"
@@ -1523,6 +1523,7 @@
 			setDate(date) {
 				if (!date) return;
 				if (this.mode == "single" && typeof date === "string") date = [date];
+				this.selectedDates = [];
 				date.some((d, index) => {
 					d = this.core
 						.clone()
@@ -1546,5 +1547,5 @@
 </script>
 
 <style lang="scss">
-	@import "./assets/sass/app.scss";
+	@use "./assets/sass/app.scss";
 </style>

src/components/assets/sass/app.scss

@@ -1,4 +1,4 @@
-@import "_variable";
+@use "variable" as *;
 
 @mixin little-flag {
 	&:after {

test/props.json

@@ -1,4 +1,6 @@
 {
-  "clearable": true,
-  "type": "datetime"
+  "from": "1399",
+  "to": "1399/06/31",
+  "locale": "fa",
+  "disable": "1399/6/10"
 }

test/slots.json

@@ -1,11 +1 @@
-{
-  "before": "<label>select date:</label>",
-  "after": "<small>Please select date.</small>",
-  "icon": "Date",
-  "right-arrow": "ماه قبل",
-  "left-arrow": "ماه بعد",
-  "footer": "تاریخ انتخابی:",
-  "clear": "بستن",
-  "up-arrow": "افزایش",
-  "down-arrow": "کاهش"
-}
+{}

webpack.config.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const webpack = require("webpack");
-const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const { VueLoaderPlugin } = require("vue-loader");
 const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = {
@@ -26,13 +26,14 @@ module.exports = {
 			},
 			{
 				test: /\.vue$/,
-				loader: "vue-loader",
+				loader: 'vue-loader',
 				options: {
-					loaders: {
-						scss: ["style-loader", "css-loader", "sass-loader"],
-						sass: ["style-loader", "css-loader", "sass-loader?indentedSyntax"],
-					},
-				},
+					compilerOptions: {
+						compatConfig: {
+							MODE: 2
+						}
+					}
+				}
 			},
 			{
 				test: /\.js$/,
@@ -50,7 +51,7 @@ module.exports = {
 	},
 	resolve: {
 		alias: {
-			vue$: "vue/dist/vue.esm.js",
+			vue: '@vue/compat',
 		},
 		extensions: ["*", ".js", ".vue", ".json"],
 	},

yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@alireza-ab/persian-date@^2.6.1":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@alireza-ab/persian-date/-/persian-date-2.6.1.tgz#ea452fa87c3e4b38ac93c42834c6d0c18f088be0"
-  integrity sha512-yXQGTJ5v79IHmqphRAWlROR6N/T19cByIjWe60sI1H1QtW2dx5ctZ0BEUMk6973+oxVLa4sJ3y/O1kk7uqPhEg==
+"@alireza-ab/persian-date@^2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@alireza-ab/persian-date/-/persian-date-2.6.2.tgz#03c968cc00a4976f83366ab1a0980698f0cc49bc"
+  integrity sha512-Xv7gi9z4a9Y+2C7iklVaOOAuWWPFUxJbvoDgOJFATNirTFvzWtiKWAwXY/rYfil4Z8TrPD2RSpvBQZ4PoemGrw==
 
 "@ampproject/remapping@^2.0.0":
   version "2.0.2"