npm - @ranjbar.amir/persian-datetime-picker - Versions diffs - 1.0.1 - Mend

@ranjbar.amir/persian-datetime-picker 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,234 @@
+# Persian DateTime Picker (Vue 3)
+یک Date & Time Picker شمسی (Jalali) مدرن، سبک و حرفه‌ای برای Vue 3
+ساخته‌شده با Day.js + Jalaliday
+طراحی‌شده با UI سطح Figma و پشتیبانی از Dark Mode
+---
+## ✨ امکانات
+- تقویم کامل شمسی (Jalali)
+- انتخاب تاریخ یا بازه تاریخ (Range)
+- انتخاب ساعت و دقیقه (Time Picker)
+- انتخاب سریع ماه و سال
+- دکمه‌های میان‌بُر (امروز، فردا، هفته بعد، پاک کردن)
+- پشتیبانی کامل از کیبورد
+- انیمیشن‌های نرم (Fade + Slide)
+- طراحی حرفه‌ای و قابل سفارشی‌سازی
+- سازگار با Vue 3 و Nuxt 3
+- بدون وابستگی‌های سنگین (Moment.js ندارد)
+- پشتیبانی از TailwindCSS
+---
+## 📦 نصب
+```bash
+npm install @ranjbar.amir/persian-datetime-picker
+```
+یا
+```bash
+yarn add @ranjbar.amir/persian-datetime-picker
+```
+---
+## 🚀 استفاده در Vue 3
+### 1) ایمپورت کامپوننت و استایل‌ها
+```vue
+<script setup>
+import { ref } from "vue"
+import DatePicker from "@ranjbar.amir/persian-datetime-picker"
+import "@ranjbar.amir/persian-datetime-picker/dist/style.css"
+const date = ref("")
+</script>
+<template>
+  <DatePicker v-model="date" />
+</template>
+```
+---
+## 🌗 فعال‌سازی Dark Mode
+اگر پروژه شما Tailwind دارد:
+```html
+<html class="dark">
+```
+یا داینامیک:
+```js
+document.documentElement.classList.toggle("dark")
+```
+---
+## 📅 انتخاب بازه تاریخ (Range Picker)
+```vue
+<script setup>
+import { ref } from "vue"
+import DatePicker from "@ranjbar.amir/persian-datetime-picker"
+import "@ranjbar.amir/persian-datetime-picker/dist/style.css"
+const range = ref({ start: null, end: null })
+</script>
+<template>
+  <DatePicker v-model="range" range />
+</template>
+```
+---
+## ⏱️ انتخاب ساعت (Time Picker)
+```vue
+<DatePicker v-model="date" enableTime />
+```
+خروجی:
+```
+1402/12/10 14:35
+```
+---
+## ⚡ دکمه‌های میان‌بُر (Shortcuts)
+```vue
+<DatePicker v-model="date" shortcuts />
+```
+میان‌بُرهای پیش‌فرض:
+- امروز
+- فردا
+- هفته بعد
+- پاک کردن
+---
+## 🗓️ انتخاب ماه و سال
+```vue
+<DatePicker
+  v-model="date"
+  showMonthSelector
+  showYearSelector
+/>
+```
+---
+## 📘 API کامل
+### Props
+| نام | نوع | پیش‌فرض | توضیح |
+|-----|------|----------|--------|
+| `modelValue` | String / Object | `""` | مقدار انتخاب‌شده |
+| `range` | Boolean | `false` | فعال‌سازی انتخاب بازه |
+| `enableTime` | Boolean | `false` | فعال‌سازی انتخاب ساعت |
+| `shortcuts` | Boolean | `false` | نمایش دکمه‌های میان‌بُر |
+| `showMonthSelector` | Boolean | `false` | انتخاب سریع ماه |
+| `showYearSelector` | Boolean | `false` | انتخاب سریع سال |
+| `placeholder` | String | `"انتخاب تاریخ"` | متن ورودی |
+| `disabled` | Boolean | `false` | غیرفعال |
+| `clearable` | Boolean | `false` | نمایش دکمه پاک‌کردن |
+---
+### Events
+| رویداد | توضیح |
+|--------|--------|
+| `update:modelValue` | خروجی تاریخ یا بازه |
+| `open` | باز شدن پنل |
+| `close` | بسته شدن پنل |
+---
+## 🧩 خروجی Range
+```json
+{
+  "start": "1402/12/01",
+  "end": "1402/12/10"
+}
+```
+---
+## 🧱 استفاده در Nuxt 3
+### 1) ساخت پلاگین
+`plugins/datetime-picker.client.ts`
+```ts
+import DatePicker from "@ranjbar.amir/persian-datetime-picker"
+import "@ranjbar.amir/persian-datetime-picker/dist/style.css"
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component("DatePicker", DatePicker)
+})
+```
+### 2) استفاده
+```vue
+<DatePicker v-model="date" />
+```
+---
+## 🎨 سفارشی‌سازی UI
+تمام استایل‌ها در این فایل‌ها هستند:
+```
+styles/base.css
+styles/theme.css
+styles/animations.css
+```
+می‌توانید override کنید:
+```css
+:root {
+  --dp-primary: #10b981; /* سبز */
+}
+```
+---
+## 🛠️ توسعه‌دهندگان
+### Build
+```bash
+npm run build
+```
+### انتشار در npm
+```bash
+npm publish --access public
+```
+---
+## 📄 لایسنس
+MIT — استفاده آزاد برای همه.

package/dist/index.cjs.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("dayjs"),V=require("jalaliday"),Y={__name:"DayCell",props:{day:Object,isSelected:Boolean,isInRange:Boolean,isStart:Boolean,isEnd:Boolean},emits:["select","hover"],setup(t,{emit:i}){const l=i;return(a,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["dp-day",{selected:t.isSelected,range:t.isInRange,"range-start":t.isStart,"range-end":t.isEnd}]),onClick:o[0]||(o[0]=c=>l("select",t.day)),onMouseenter:o[1]||(o[1]=c=>l("hover",t.day))},e.toDisplayString(t.day.date()),35))}},x={class:"dp-grid"},E={__name:"Calendar",props:{current:Object,range:Object,hoverDate:Object},emits:["select"],setup(t,{emit:i}){const l=t,a=i,o=computed(()=>{const s=l.current.startOf("month").startOf("week"),r=l.current.endOf("month").endOf("week"),n=[];let p=s;for(;p.isBefore(r);)n.push(p),p=p.add(1,"day");return n});function c(s){return l.range?s.format("YYYY/MM/DD")===l.range.start||s.format("YYYY/MM/DD")===l.range.end:!1}function u(s){var r,n;return!((r=l.range)!=null&&r.start)||!((n=l.range)!=null&&n.end)?!1:s.isAfter(l.range.start)&&s.isBefore(l.range.end)}return(s,r)=>(e.openBlock(),e.createElementBlock("div",x,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),n=>{var p,k;return e.openBlock(),e.createBlock(Y,{key:n.format("YYYY-MM-DD"),day:n,isSelected:c(n),isInRange:u(n),isStart:n.format("YYYY/MM/DD")===((p=t.range)==null?void 0:p.start),isEnd:n.format("YYYY/MM/DD")===((k=t.range)==null?void 0:k.end),onSelect:y=>a("select",n),onHover:y=>t.hoverDate=n},null,8,["day","isSelected","isInRange","isStart","isEnd","onSelect","onHover"])}),128))]))}},S={class:"grid grid-cols-3 gap-2 p-3"},M=["onClick"],w={__name:"MonthSelector",props:{current:Object},emits:["select"],setup(t,{emit:i}){const l=t,a=i,o=["فروردین","اردیبهشت","خرداد","تیر","مرداد","شهریور","مهر","آبان","آذر","دی","بهمن","اسفند"];function c(u){a("select",l.current.month(u))}return(u,s)=>(e.openBlock(),e.createElementBlock("div",S,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(o,(r,n)=>e.createElementVNode("button",{key:n,class:"dp-btn",onClick:p=>c(n)},e.toDisplayString(r),9,M)),64))]))}},$={class:"p-3"},C={class:"flex justify-between mb-3"},D={class:"grid grid-cols-3 gap-2"},N=["onClick"],_={__name:"YearSelector",props:{current:Object},emits:["select"],setup(t,{emit:i}){const l=t,a=i,o=e.ref(l.current.year());function c(s){o.value+=s}function u(s){a("select",l.current.year(s))}return(s,r)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",C,[e.createElementVNode("button",{class:"dp-btn",onClick:r[0]||(r[0]=n=>c(-10))},"«"),e.createElementVNode("span",null,e.toDisplayString(o.value),1),e.createElementVNode("button",{class:"dp-btn",onClick:r[1]||(r[1]=n=>c(10))},"»")]),e.createElementVNode("div",D,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,n=>e.createElementVNode("button",{key:n,class:"dp-btn",onClick:p=>u(o.value+n-6)},e.toDisplayString(o.value+n-6),9,N)),64))])]))}};function O(t){const i=[{label:"امروز",value:f()},{label:"فردا",value:f().add(1,"day")},{label:"هفته بعد",value:f().add(7,"day")},{label:"پاک کردن",value:null}];function l(a){t("update:modelValue",a.value?a.value.format("YYYY/MM/DD"):"")}return{shortcuts:i,applyShortcut:l}}const j={class:"flex gap-2 p-2 border-t dark:border-gray-700"},R=["onClick"],T={__name:"Shortcuts",emits:["apply"],setup(t,{emit:i}){const l=i,{shortcuts:a,applyShortcut:o}=O(c=>l("apply",c));return(c,u)=>(e.openBlock(),e.createElementBlock("div",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(a),s=>(e.openBlock(),e.createElementBlock("button",{key:s.label,class:"dp-btn bg-gray-100 dark:bg-gray-700",onClick:r=>e.unref(o)(s)},e.toDisplayString(s.label),9,R))),128))]))}},I={class:"flex gap-2 p-2 border-t dark:border-gray-700"},P={__name:"TimePicker",props:{value:String},emits:["update"],setup(t,{emit:i}){const l=t,a=i,o=ref(0),c=ref(0);function u(){const s=f(l.value).hour(o.value).minute(c.value);a("update",s.format("YYYY/MM/DD HH:mm"))}return(s,r)=>(e.openBlock(),e.createElementBlock("div",I,[e.withDirectives(e.createElementVNode("input",{type:"number","onUpdate:modelValue":r[0]||(r[0]=n=>e.isRef(o)?o.value=n:null),min:"0",max:"23",class:"w-14 dp-btn",onInput:u},null,544),[[e.vModelText,e.unref(o)]]),e.withDirectives(e.createElementVNode("input",{type:"number","onUpdate:modelValue":r[1]||(r[1]=n=>e.isRef(c)?c.value=n:null),min:"0",max:"59",class:"w-14 dp-btn",onInput:u},null,544),[[e.vModelText,e.unref(c)]])]))}};function H(t,i){var s,r;const l=e.ref(((s=t.value)==null?void 0:s.start)||null),a=e.ref(((r=t.value)==null?void 0:r.end)||null),o=e.ref(null);function c(n){l.value?l.value&&!a.value?n>=l.value?a.value=n:l.value=n:(l.value=n,a.value=null):l.value=n,i("update:modelValue",{start:l.value,end:a.value})}function u(n){o.value=n}return e.watch(t,n=>{l.value=(n==null?void 0:n.start)||null,a.value=(n==null?void 0:n.end)||null}),{start:l,end:a,hovered:o,select:c,onHover:u}}function L(t,i,l){function a(o){if(t.value)switch(o.key){case"ArrowUp":t.value=t.value.subtract(1,"day");break;case"ArrowDown":t.value=t.value.add(1,"day");break;case"ArrowLeft":t.value=t.value.subtract(7,"day");break;case"ArrowRight":t.value=t.value.add(7,"day");break;case"Enter":i(t.value);break;case"Escape":l();break}}return{onKeydown:a}}const A={class:"relative inline-block text-right"},U={class:"flex items-center gap-1"},F=["placeholder","value","disabled"],q=["disabled"],K={key:0,class:"absolute z-50 mt-2 dp-panel w-80"},z={class:"dp-header"},G={class:"flex items-center gap-2"},J={class:"flex items-center gap-1"},Q={class:"px-2 pb-2"},W=e.defineComponent({__name:"DatePicker",props:{modelValue:{},range:{type:Boolean},enableTime:{type:Boolean},shortcuts:{type:Boolean},showMonthSelector:{type:Boolean},showYearSelector:{type:Boolean},placeholder:{},disabled:{type:Boolean},clearable:{type:Boolean}},emits:["update:modelValue","open","close"],setup(t,{emit:i}){f.extend(V);const l=t,a=i,o=e.ref(!1),c=e.ref("day"),u=e.ref(f().calendar("jalali")),s=e.ref(u.value),r=e.computed(()=>!!l.range),n=r.value?H(e.computed(()=>l.modelValue),(v,d)=>a(v,d)):null,p=e.computed(()=>{if(r.value){const v=l.modelValue,d=(v==null?void 0:v.start)||"",m=(v==null?void 0:v.end)||"";return!d&&!m?"":`${d||"—"} تا ${m||"—"}`}else return l.modelValue||""});function k(){l.disabled||o.value||(o.value=!0,a("open"))}function y(){o.value&&(o.value=!1,a("close"))}function b(v){if(r.value&&n)n.select(v);else{const d=l.enableTime?v.format("YYYY/MM/DD HH:mm"):v.format("YYYY/MM/DD");a("update:modelValue",d),y()}}function h(){l.disabled||a("update:modelValue",r.value?{start:null,end:null}:"")}const{onKeydown:g}=L(s,b,y);return e.onMounted(()=>{window.addEventListener("keydown",g)}),e.onUnmounted(()=>{window.removeEventListener("keydown",g)}),(v,d)=>(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",U,[e.createElementVNode("input",{class:"border px-3 py-2 rounded w-56 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-60",placeholder:t.placeholder||(e.unref(n)?"انتخاب بازه تاریخ":"انتخاب تاریخ"),value:p.value,disabled:t.disabled,readonly:"",onClick:k},null,8,F),t.clearable&&p.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"text-xs px-2 py-1 rounded border bg-white hover:bg-gray-100 disabled:opacity-50",disabled:t.disabled,onClick:h}," پاک ",8,q)):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",z,[e.createElementVNode("div",G,[t.showYearSelector?(e.openBlock(),e.createElementBlock("button",{key:0,class:"text-xs text-gray-500 hover:text-gray-800 dark:hover:text-gray-200",onClick:d[0]||(d[0]=m=>c.value="year")},e.toDisplayString(u.value.year()),1)):e.createCommentVNode("",!0),t.showMonthSelector?(e.openBlock(),e.createElementBlock("button",{key:1,class:"text-xs text-gray-500 hover:text-gray-800 dark:hover:text-gray-200",onClick:d[1]||(d[1]=m=>c.value="month")},e.toDisplayString(u.value.format("MMMM")),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",J,[e.createElementVNode("button",{class:"dp-btn text-xs",onClick:d[2]||(d[2]=m=>u.value=u.value.subtract(1,"month"))}," ‹ "),e.createElementVNode("button",{class:"dp-btn text-xs",onClick:d[3]||(d[3]=m=>u.value=u.value.add(1,"month"))}," › ")])]),e.createElementVNode("div",Q,[e.createVNode(e.Transition,{name:"slide-left",mode:"out-in"},{default:e.withCtx(()=>[c.value==="day"?(e.openBlock(),e.createBlock(E,{key:"day-"+u.value.format("YYYY-MM"),current:u.value,range:r.value?e.unref(n):null,hoverDate:s.value,onSelect:b},null,8,["current","range","hoverDate"])):e.createCommentVNode("",!0)]),_:1}),c.value==="month"?(e.openBlock(),e.createBlock(w,{key:0,current:u.value,onSelect:d[4]||(d[4]=m=>{u.value=m,c.value="day"})},null,8,["current"])):e.createCommentVNode("",!0),c.value==="year"?(e.openBlock(),e.createBlock(_,{key:1,current:u.value,onSelect:d[5]||(d[5]=m=>{u.value=m,c.value="day"})},null,8,["current"])):e.createCommentVNode("",!0)]),t.enableTime&&!r.value?(e.openBlock(),e.createBlock(P,{key:0,value:t.modelValue,onUpdate:d[6]||(d[6]=m=>a("update:modelValue",m))},null,8,["value"])):e.createCommentVNode("",!0),t.shortcuts&&!r.value?(e.openBlock(),e.createBlock(T,{key:1,onApply:d[7]||(d[7]=m=>a("update:modelValue",m))})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),_:1})]))}}),X=(t,i)=>{const l=t.__vccOpts||t;for(const[a,o]of i)l[a]=o;return l},B=X(W,[["__scopeId","data-v-3a5e3cc6"]]);exports.DatePicker=B;exports.default=B;

package/dist/index.es.js ADDED Viewed

@@ -0,0 +1,378 @@
+import { openBlock as d, createElementBlock as m, normalizeClass as H, toDisplayString as k, Fragment as M, renderList as S, unref as h, createBlock as Y, createElementVNode as v, ref as g, withDirectives as V, isRef as B, vModelText as O, watch as A, defineComponent as P, computed as _, onMounted as T, onUnmounted as U, createCommentVNode as b, createVNode as j, Transition as E, withCtx as R } from "vue";
+import x from "dayjs";
+import L from "jalaliday";
+const K = {
+  __name: "DayCell",
+  props: {
+    day: Object,
+    isSelected: Boolean,
+    isInRange: Boolean,
+    isStart: Boolean,
+    isEnd: Boolean
+  },
+  emits: ["select", "hover"],
+  setup(e, { emit: i }) {
+    const n = i;
+    return (l, a) => (d(), m("div", {
+      class: H(["dp-day", {
+        selected: e.isSelected,
+        range: e.isInRange,
+        "range-start": e.isStart,
+        "range-end": e.isEnd
+      }]),
+      onClick: a[0] || (a[0] = (s) => n("select", e.day)),
+      onMouseenter: a[1] || (a[1] = (s) => n("hover", e.day))
+    }, k(e.day.date()), 35));
+  }
+}, N = { class: "dp-grid" }, z = {
+  __name: "Calendar",
+  props: {
+    current: Object,
+    range: Object,
+    hoverDate: Object
+  },
+  emits: ["select"],
+  setup(e, { emit: i }) {
+    const n = e, l = i, a = computed(() => {
+      const r = n.current.startOf("month").startOf("week"), o = n.current.endOf("month").endOf("week"), t = [];
+      let y = r;
+      for (; y.isBefore(o); )
+        t.push(y), y = y.add(1, "day");
+      return t;
+    });
+    function s(r) {
+      return n.range ? r.format("YYYY/MM/DD") === n.range.start || r.format("YYYY/MM/DD") === n.range.end : !1;
+    }
+    function u(r) {
+      var o, t;
+      return !((o = n.range) != null && o.start) || !((t = n.range) != null && t.end) ? !1 : r.isAfter(n.range.start) && r.isBefore(n.range.end);
+    }
+    return (r, o) => (d(), m("div", N, [
+      (d(!0), m(M, null, S(h(a), (t) => {
+        var y, $;
+        return d(), Y(K, {
+          key: t.format("YYYY-MM-DD"),
+          day: t,
+          isSelected: s(t),
+          isInRange: u(t),
+          isStart: t.format("YYYY/MM/DD") === ((y = e.range) == null ? void 0 : y.start),
+          isEnd: t.format("YYYY/MM/DD") === (($ = e.range) == null ? void 0 : $.end),
+          onSelect: (w) => l("select", t),
+          onHover: (w) => e.hoverDate = t
+        }, null, 8, ["day", "isSelected", "isInRange", "isStart", "isEnd", "onSelect", "onHover"]);
+      }), 128))
+    ]));
+  }
+}, F = { class: "grid grid-cols-3 gap-2 p-3" }, q = ["onClick"], G = {
+  __name: "MonthSelector",
+  props: { current: Object },
+  emits: ["select"],
+  setup(e, { emit: i }) {
+    const n = e, l = i, a = [
+      "فروردین",
+      "اردیبهشت",
+      "خرداد",
+      "تیر",
+      "مرداد",
+      "شهریور",
+      "مهر",
+      "آبان",
+      "آذر",
+      "دی",
+      "بهمن",
+      "اسفند"
+    ];
+    function s(u) {
+      l("select", n.current.month(u));
+    }
+    return (u, r) => (d(), m("div", F, [
+      (d(), m(M, null, S(a, (o, t) => v("button", {
+        key: t,
+        class: "dp-btn",
+        onClick: (y) => s(t)
+      }, k(o), 9, q)), 64))
+    ]));
+  }
+}, J = { class: "p-3" }, Q = { class: "flex justify-between mb-3" }, W = { class: "grid grid-cols-3 gap-2" }, X = ["onClick"], Z = {
+  __name: "YearSelector",
+  props: { current: Object },
+  emits: ["select"],
+  setup(e, { emit: i }) {
+    const n = e, l = i, a = g(n.current.year());
+    function s(r) {
+      a.value += r;
+    }
+    function u(r) {
+      l("select", n.current.year(r));
+    }
+    return (r, o) => (d(), m("div", J, [
+      v("div", Q, [
+        v("button", {
+          class: "dp-btn",
+          onClick: o[0] || (o[0] = (t) => s(-10))
+        }, "«"),
+        v("span", null, k(a.value), 1),
+        v("button", {
+          class: "dp-btn",
+          onClick: o[1] || (o[1] = (t) => s(10))
+        }, "»")
+      ]),
+      v("div", W, [
+        (d(), m(M, null, S(12, (t) => v("button", {
+          key: t,
+          class: "dp-btn",
+          onClick: (y) => u(a.value + t - 6)
+        }, k(a.value + t - 6), 9, X)), 64))
+      ])
+    ]));
+  }
+};
+function ee(e) {
+  const i = [
+    { label: "امروز", value: x() },
+    { label: "فردا", value: x().add(1, "day") },
+    { label: "هفته بعد", value: x().add(7, "day") },
+    { label: "پاک کردن", value: null }
+  ];
+  function n(l) {
+    e("update:modelValue", l.value ? l.value.format("YYYY/MM/DD") : "");
+  }
+  return { shortcuts: i, applyShortcut: n };
+}
+const te = { class: "flex gap-2 p-2 border-t dark:border-gray-700" }, ne = ["onClick"], ae = {
+  __name: "Shortcuts",
+  emits: ["apply"],
+  setup(e, { emit: i }) {
+    const n = i, { shortcuts: l, applyShortcut: a } = ee((s) => n("apply", s));
+    return (s, u) => (d(), m("div", te, [
+      (d(!0), m(M, null, S(h(l), (r) => (d(), m("button", {
+        key: r.label,
+        class: "dp-btn bg-gray-100 dark:bg-gray-700",
+        onClick: (o) => h(a)(r)
+      }, k(r.label), 9, ne))), 128))
+    ]));
+  }
+}, le = { class: "flex gap-2 p-2 border-t dark:border-gray-700" }, oe = {
+  __name: "TimePicker",
+  props: { value: String },
+  emits: ["update"],
+  setup(e, { emit: i }) {
+    const n = e, l = i, a = ref(0), s = ref(0);
+    function u() {
+      const r = x(n.value).hour(a.value).minute(s.value);
+      l("update", r.format("YYYY/MM/DD HH:mm"));
+    }
+    return (r, o) => (d(), m("div", le, [
+      V(v("input", {
+        type: "number",
+        "onUpdate:modelValue": o[0] || (o[0] = (t) => B(a) ? a.value = t : null),
+        min: "0",
+        max: "23",
+        class: "w-14 dp-btn",
+        onInput: u
+      }, null, 544), [
+        [O, h(a)]
+      ]),
+      V(v("input", {
+        type: "number",
+        "onUpdate:modelValue": o[1] || (o[1] = (t) => B(s) ? s.value = t : null),
+        min: "0",
+        max: "59",
+        class: "w-14 dp-btn",
+        onInput: u
+      }, null, 544), [
+        [O, h(s)]
+      ])
+    ]));
+  }
+};
+function re(e, i) {
+  var r, o;
+  const n = g(((r = e.value) == null ? void 0 : r.start) || null), l = g(((o = e.value) == null ? void 0 : o.end) || null), a = g(null);
+  function s(t) {
+    n.value ? n.value && !l.value ? t >= n.value ? l.value = t : n.value = t : (n.value = t, l.value = null) : n.value = t, i("update:modelValue", { start: n.value, end: l.value });
+  }
+  function u(t) {
+    a.value = t;
+  }
+  return A(e, (t) => {
+    n.value = (t == null ? void 0 : t.start) || null, l.value = (t == null ? void 0 : t.end) || null;
+  }), { start: n, end: l, hovered: a, select: s, onHover: u };
+}
+function se(e, i, n) {
+  function l(a) {
+    if (e.value)
+      switch (a.key) {
+        case "ArrowUp":
+          e.value = e.value.subtract(1, "day");
+          break;
+        case "ArrowDown":
+          e.value = e.value.add(1, "day");
+          break;
+        case "ArrowLeft":
+          e.value = e.value.subtract(7, "day");
+          break;
+        case "ArrowRight":
+          e.value = e.value.add(7, "day");
+          break;
+        case "Enter":
+          i(e.value);
+          break;
+        case "Escape":
+          n();
+          break;
+      }
+  }
+  return { onKeydown: l };
+}
+const ue = { class: "relative inline-block text-right" }, ce = { class: "flex items-center gap-1" }, de = ["placeholder", "value", "disabled"], ie = ["disabled"], ve = {
+  key: 0,
+  class: "absolute z-50 mt-2 dp-panel w-80"
+}, me = { class: "dp-header" }, pe = { class: "flex items-center gap-2" }, fe = { class: "flex items-center gap-1" }, ye = { class: "px-2 pb-2" }, be = /* @__PURE__ */ P({
+  __name: "DatePicker",
+  props: {
+    modelValue: {},
+    range: { type: Boolean },
+    enableTime: { type: Boolean },
+    shortcuts: { type: Boolean },
+    showMonthSelector: { type: Boolean },
+    showYearSelector: { type: Boolean },
+    placeholder: {},
+    disabled: { type: Boolean },
+    clearable: { type: Boolean }
+  },
+  emits: ["update:modelValue", "open", "close"],
+  setup(e, { emit: i }) {
+    x.extend(L);
+    const n = e, l = i, a = g(!1), s = g("day"), u = g(x().calendar("jalali")), r = g(u.value), o = _(() => !!n.range), t = o.value ? re(
+      _(() => n.modelValue),
+      (f, c) => l(f, c)
+    ) : null, y = _(() => {
+      if (o.value) {
+        const f = n.modelValue, c = (f == null ? void 0 : f.start) || "", p = (f == null ? void 0 : f.end) || "";
+        return !c && !p ? "" : `${c || "—"}  تا  ${p || "—"}`;
+      } else
+        return n.modelValue || "";
+    });
+    function $() {
+      n.disabled || a.value || (a.value = !0, l("open"));
+    }
+    function w() {
+      a.value && (a.value = !1, l("close"));
+    }
+    function C(f) {
+      if (o.value && t)
+        t.select(f);
+      else {
+        const c = n.enableTime ? f.format("YYYY/MM/DD HH:mm") : f.format("YYYY/MM/DD");
+        l("update:modelValue", c), w();
+      }
+    }
+    function I() {
+      n.disabled || l("update:modelValue", o.value ? { start: null, end: null } : "");
+    }
+    const { onKeydown: D } = se(r, C, w);
+    return T(() => {
+      window.addEventListener("keydown", D);
+    }), U(() => {
+      window.removeEventListener("keydown", D);
+    }), (f, c) => (d(), m("div", ue, [
+      v("div", ce, [
+        v("input", {
+          class: "border px-3 py-2 rounded w-56 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-60",
+          placeholder: e.placeholder || (h(t) ? "انتخاب بازه تاریخ" : "انتخاب تاریخ"),
+          value: y.value,
+          disabled: e.disabled,
+          readonly: "",
+          onClick: $
+        }, null, 8, de),
+        e.clearable && y.value ? (d(), m("button", {
+          key: 0,
+          class: "text-xs px-2 py-1 rounded border bg-white hover:bg-gray-100 disabled:opacity-50",
+          disabled: e.disabled,
+          onClick: I
+        }, " پاک ", 8, ie)) : b("", !0)
+      ]),
+      j(E, { name: "fade" }, {
+        default: R(() => [
+          a.value ? (d(), m("div", ve, [
+            v("div", me, [
+              v("div", pe, [
+                e.showYearSelector ? (d(), m("button", {
+                  key: 0,
+                  class: "text-xs text-gray-500 hover:text-gray-800 dark:hover:text-gray-200",
+                  onClick: c[0] || (c[0] = (p) => s.value = "year")
+                }, k(u.value.year()), 1)) : b("", !0),
+                e.showMonthSelector ? (d(), m("button", {
+                  key: 1,
+                  class: "text-xs text-gray-500 hover:text-gray-800 dark:hover:text-gray-200",
+                  onClick: c[1] || (c[1] = (p) => s.value = "month")
+                }, k(u.value.format("MMMM")), 1)) : b("", !0)
+              ]),
+              v("div", fe, [
+                v("button", {
+                  class: "dp-btn text-xs",
+                  onClick: c[2] || (c[2] = (p) => u.value = u.value.subtract(1, "month"))
+                }, " ‹ "),
+                v("button", {
+                  class: "dp-btn text-xs",
+                  onClick: c[3] || (c[3] = (p) => u.value = u.value.add(1, "month"))
+                }, " › ")
+              ])
+            ]),
+            v("div", ye, [
+              j(E, {
+                name: "slide-left",
+                mode: "out-in"
+              }, {
+                default: R(() => [
+                  s.value === "day" ? (d(), Y(z, {
+                    key: "day-" + u.value.format("YYYY-MM"),
+                    current: u.value,
+                    range: o.value ? h(t) : null,
+                    hoverDate: r.value,
+                    onSelect: C
+                  }, null, 8, ["current", "range", "hoverDate"])) : b("", !0)
+                ]),
+                _: 1
+              }),
+              s.value === "month" ? (d(), Y(G, {
+                key: 0,
+                current: u.value,
+                onSelect: c[4] || (c[4] = (p) => {
+                  u.value = p, s.value = "day";
+                })
+              }, null, 8, ["current"])) : b("", !0),
+              s.value === "year" ? (d(), Y(Z, {
+                key: 1,
+                current: u.value,
+                onSelect: c[5] || (c[5] = (p) => {
+                  u.value = p, s.value = "day";
+                })
+              }, null, 8, ["current"])) : b("", !0)
+            ]),
+            e.enableTime && !o.value ? (d(), Y(oe, {
+              key: 0,
+              value: e.modelValue,
+              onUpdate: c[6] || (c[6] = (p) => l("update:modelValue", p))
+            }, null, 8, ["value"])) : b("", !0),
+            e.shortcuts && !o.value ? (d(), Y(ae, {
+              key: 1,
+              onApply: c[7] || (c[7] = (p) => l("update:modelValue", p))
+            })) : b("", !0)
+          ])) : b("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), ge = (e, i) => {
+  const n = e.__vccOpts || e;
+  for (const [l, a] of i)
+    n[l] = a;
+  return n;
+}, xe = /* @__PURE__ */ ge(be, [["__scopeId", "data-v-3a5e3cc6"]]);
+export {
+  xe as DatePicker,
+  xe as default
+};

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ [data-v-3a5e3cc6]:root{--dp-bg: #ffffff;--dp-bg-dark: #1f1f1f;--dp-text: #1a1a1a;--dp-text-dark: #e5e5e5;--dp-border: #e5e7eb;--dp-border-dark: #3f3f3f;--dp-primary: #3b82f6;--dp-primary-dark: #60a5fa;--dp-radius: 8px;--dp-shadow: 0 4px 16px rgba(0, 0, 0, .12);--dp-transition: .15s ease}.dp-panel[data-v-3a5e3cc6]{background:var(--dp-bg);color:var(--dp-text);border-radius:var(--dp-radius);box-shadow:var(--dp-shadow);border:1px solid var(--dp-border);transition:var(--dp-transition)}.dark .dp-panel[data-v-3a5e3cc6]{background:var(--dp-bg-dark);color:var(--dp-text-dark);border-color:var(--dp-border-dark)}.dp-header[data-v-3a5e3cc6]{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-weight:600}.dp-grid[data-v-3a5e3cc6]{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px}.dp-btn[data-v-3a5e3cc6]{padding:6px 10px;border-radius:6px;cursor:pointer;transition:var(--dp-transition)}.dp-btn[data-v-3a5e3cc6]:hover{background:#0000000d}.dark .dp-btn[data-v-3a5e3cc6]:hover{background:#ffffff14}.dp-day[data-v-3a5e3cc6]{text-align:center;padding:8px 0;border-radius:6px;cursor:pointer;transition:var(--dp-transition)}.dp-day[data-v-3a5e3cc6]:hover{background:#0000000d}.dark .dp-day[data-v-3a5e3cc6]:hover{background:#ffffff14}.dp-day.selected[data-v-3a5e3cc6]{background:var(--dp-primary);color:#fff}.dp-day.range[data-v-3a5e3cc6]{background:#3b82f626}.dark .dp-day.range[data-v-3a5e3cc6]{background:#60a5fa40}.dp-day.range-start[data-v-3a5e3cc6],.dp-day.range-end[data-v-3a5e3cc6]{background:var(--dp-primary);color:#fff}.fade-enter-active[data-v-3a5e3cc6],.fade-leave-active[data-v-3a5e3cc6]{transition:opacity .15s ease}.fade-enter-from[data-v-3a5e3cc6],.fade-leave-to[data-v-3a5e3cc6]{opacity:0}.slide-left-enter-active[data-v-3a5e3cc6],.slide-left-leave-active[data-v-3a5e3cc6]{transition:transform .15s ease}.slide-left-enter-from[data-v-3a5e3cc6]{transform:translate(20px)}.slide-left-leave-to[data-v-3a5e3cc6]{transform:translate(-20px)}

package/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+declare module "@ranjbar.amir/persian-datetime-picker" {
+    import { DefineComponent } from "vue"
+    const DatePicker: DefineComponent<{}, {}, any>
+    export default DatePicker
+    export { DatePicker }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "@ranjbar.amir/persian-datetime-picker",
+  "version": "1.0.1",
+  "description": "Modern Persian (Jalali) DateTime Picker for Vue 3",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "index.d.ts",
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.10",
+    "jalaliday": "^2.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "vue": "^3.4.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.0.0"
+  }
+}