@pr0vin/np-date-picker-vue-tw 1.0.4 → 1.0.6

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
  1. package/README.md +100 -0
  2. package/dist/np-date-picker-vue-tw.cjs.js +1 -0
  3. package/dist/np-date-picker-vue-tw.css +1 -1
  4. package/dist/np-date-picker-vue-tw.es.js +199 -206
  5. package/package.json +22 -11
  6. package/dist/np-date-picker-vue-tw.umd.js +0 -1
package/README.md ADDED
@@ -0,0 +1,100 @@
1
+ # @pr0vin/np-date-picker-vue-tw
2
+
3
+ A Nepali Date Picker component for Vue 3 using Tailwind CSS.
4
+ Easy to use, lightweight, and fully compatible with modern Vue 3 projects.
5
+
6
+ ## Features
7
+
8
+ - Supports Nepali (Bikram Sambat) calendar
9
+ - Fully responsive and Tailwind CSS styled
10
+ - Highlight today's date
11
+ - Works with `v-model`
12
+ - Keyboard and mouse friendly
13
+ - Easily customizable font & size using Tailwind
14
+
15
+ ## Installation
16
+
17
+ Install via npm or yarn:
18
+
19
+ ```bash
20
+ npm install @pr0vin/np-date-picker-vue-tw
21
+ # or
22
+ yarn add @pr0vin/np-date-picker-vue-tw
23
+ ```
24
+
25
+ ## Usage
26
+
27
+ ### Basic Example
28
+
29
+ ```vue
30
+ <script setup>
31
+ import { ref } from "vue";
32
+ import "@pr0vin/np-date-picker-vue-tw/dist/np-date-picker-vue-tw.css";
33
+ import NPDatePicker from "@pr0vin/np-date-picker-vue-tw";
34
+
35
+ const selectedDate = ref("");
36
+ </script>
37
+
38
+ <template>
39
+ <NPDatePicker
40
+ v-model="selectedDate"
41
+ placeholder="Select a date"
42
+ :todayValue="true"
43
+ />
44
+ </template>
45
+ ```
46
+
47
+ ### Props
48
+
49
+ | Prop | Type | Default | Description |
50
+ | ------------- | ------- | ----------------- | -------------------------------------- |
51
+ | `modelValue` | String | `""` | The selected date in `YYYY-MM-DD` |
52
+ | `placeholder` | String | `"Select a date"` | Input placeholder text |
53
+ | `todayValue` | Boolean | `false` | Select today's date by default if true |
54
+
55
+ ### Events
56
+
57
+ | Event | Arguments | Description |
58
+ | ------------------- | -------------------- | --------------------------------- |
59
+ | `update:modelValue` | `(newValue: string)` | Emits the selected date on change |
60
+
61
+ ### Customization
62
+
63
+ You can override Tailwind classes to adjust calendar size, font, colors, etc.
64
+
65
+ ```vue
66
+ <NPDatePicker class="np-text-xs np-w-40" />
67
+ ```
68
+
69
+ You can also style the input field:
70
+
71
+ ```vue
72
+ <NPDatePicker
73
+ class="np-text-sm np-w-32 np-border np-border-gray-300 np-rounded"
74
+ />
75
+ ```
76
+
77
+ ### Multiple Components
78
+
79
+ If you have multiple date pickers on the same page, the component automatically handles focus and closes other open calendars. No extra configuration is required.
80
+
81
+ ### Example With Multiple Components
82
+
83
+ ```vue
84
+ <script setup>
85
+ import { ref } from "vue";
86
+ import NPDatePicker from "@pr0vin/np-date-picker-vue-tw";
87
+
88
+ const date1 = ref("");
89
+ const date2 = ref("");
90
+ </script>
91
+
92
+ <template>
93
+ <NPDatePicker v-model="date1" placeholder="Select first date" />
94
+ <NPDatePicker v-model="date2" placeholder="Select second date" />
95
+ </template>
96
+ ```
97
+
98
+ ## License
99
+
100
+ ISC © Pravin Chaudhary
package/dist/np-date-picker-vue-tw.cjs.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");class M{constructor(){this.bs=[[2e3,30,32,31,32,31,30,30,30,29,30,29,31],[2001,31,31,32,31,31,31,30,29,30,29,30,30],[2002,31,31,32,32,31,30,30,29,30,29,30,30],[2003,31,32,31,32,31,30,30,30,29,29,30,31],[2004,30,32,31,32,31,30,30,30,29,30,29,31],[2005,31,31,32,31,31,31,30,29,30,29,30,30],[2006,31,31,32,32,31,30,30,29,30,29,30,30],[2007,31,32,31,32,31,30,30,30,29,29,30,31],[2008,31,31,31,32,31,31,29,30,30,29,29,31],[2009,31,31,32,31,31,31,30,29,30,29,30,30],[2010,31,31,32,32,31,30,30,29,30,29,30,30],[2011,31,32,31,32,31,30,30,30,29,29,30,31],[2012,31,31,31,32,31,31,29,30,30,29,30,30],[2013,31,31,32,31,31,31,30,29,30,29,30,30],[2014,31,31,32,32,31,30,30,29,30,29,30,30],[2015,31,32,31,32,31,30,30,30,29,29,30,31],[2016,31,31,31,32,31,31,29,30,30,29,30,30],[2017,31,31,32,31,31,31,30,29,30,29,30,30],[2018,31,32,31,32,31,30,30,29,30,29,30,30],[2019,31,32,31,32,31,30,30,30,29,30,29,31],[2020,31,31,31,32,31,31,30,29,30,29,30,30],[2021,31,31,32,31,31,31,30,29,30,29,30,30],[2022,31,32,31,32,31,30,30,30,29,29,30,30],[2023,31,32,31,32,31,30,30,30,29,30,29,31],[2024,31,31,31,32,31,31,30,29,30,29,30,30],[2025,31,31,32,31,31,31,30,29,30,29,30,30],[2026,31,32,31,32,31,30,30,30,29,29,30,31],[2027,30,32,31,32,31,30,30,30,29,30,29,31],[2028,31,31,32,31,31,31,30,29,30,29,30,30],[2029,31,31,32,31,32,30,30,29,30,29,30,30],[2030,31,32,31,32,31,30,30,30,29,29,30,31],[2031,30,32,31,32,31,30,30,30,29,30,29,31],[2032,31,31,32,31,31,31,30,29,30,29,30,30],[2033,31,31,32,32,31,30,30,29,30,29,30,30],[2034,31,32,31,32,31,30,30,30,29,29,30,31],[2035,30,32,31,32,31,31,29,30,30,29,29,31],[2036,31,31,32,31,31,31,30,29,30,29,30,30],[2037,31,31,32,32,31,30,30,29,30,29,30,30],[2038,31,32,31,32,31,30,30,30,29,29,30,31],[2039,31,31,31,32,31,31,29,30,30,29,30,30],[2040,31,31,32,31,31,31,30,29,30,29,30,30],[2041,31,31,32,32,31,30,30,29,30,29,30,30],[2042,31,32,31,32,31,30,30,30,29,29,30,31],[2043,31,31,31,32,31,31,29,30,30,29,30,30],[2044,31,31,32,31,31,31,30,29,30,29,30,30],[2045,31,32,31,32,31,30,30,29,30,29,30,30],[2046,31,32,31,32,31,30,30,30,29,29,30,31],[2047,31,31,31,32,31,31,30,29,30,29,30,30],[2048,31,31,32,31,31,31,30,29,30,29,30,30],[2049,31,32,31,32,31,30,30,30,29,29,30,30],[2050,31,32,31,32,31,30,30,30,29,30,29,31],[2051,31,31,31,32,31,31,30,29,30,29,30,30],[2052,31,31,32,31,31,31,30,29,30,29,30,30],[2053,31,32,31,32,31,30,30,30,29,29,30,30],[2054,31,32,31,32,31,30,30,30,29,30,29,31],[2055,31,31,32,31,31,31,30,29,30,29,30,30],[2056,31,31,32,31,32,30,30,29,30,29,30,30],[2057,31,32,31,32,31,30,30,30,29,29,30,31],[2058,30,32,31,32,31,30,30,30,29,30,29,31],[2059,31,31,32,31,31,31,30,29,30,29,30,30],[2060,31,31,32,32,31,30,30,29,30,29,30,30],[2061,31,32,31,32,31,30,30,30,29,29,30,31],[2062,30,32,31,32,31,31,29,30,29,30,29,31],[2063,31,31,32,31,31,31,30,29,30,29,30,30],[2064,31,31,32,32,31,30,30,29,30,29,30,30],[2065,31,32,31,32,31,30,30,30,29,29,30,31],[2066,31,31,31,32,31,31,29,30,30,29,29,31],[2067,31,31,32,31,31,31,30,29,30,29,30,30],[2068,31,31,32,32,31,30,30,29,30,29,30,30],[2069,31,32,31,32,31,30,30,30,29,29,30,31],[2070,31,31,31,32,31,31,29,30,30,29,30,30],[2071,31,31,32,31,31,31,30,29,30,29,30,30],[2072,31,32,31,32,31,30,30,29,30,29,30,30],[2073,31,32,31,32,31,30,30,30,29,29,30,31],[2074,31,31,31,32,31,31,30,29,30,29,30,30],[2075,31,31,32,31,31,31,30,29,30,29,30,30],[2076,31,32,31,32,31,30,30,30,29,29,30,30],[2077,31,32,31,32,31,30,30,30,29,30,29,31],[2078,31,31,31,32,31,31,30,29,30,29,30,30],[2079,31,31,32,31,31,31,30,29,30,29,30,30],[2080,31,32,31,32,31,30,30,30,29,29,30,30],[2081,31,32,31,32,31,30,30,30,29,30,29,31],[2082,31,31,32,31,31,31,30,29,30,29,30,30],[2083,31,31,32,31,31,30,30,30,29,30,30,30],[2084,31,31,32,31,31,30,30,30,29,30,30,30],[2085,31,32,31,32,30,31,30,30,29,30,30,30],[2086,30,32,31,32,31,30,30,30,29,30,30,30],[2087,31,31,32,31,31,31,30,30,29,30,30,30],[2088,30,31,32,32,30,31,30,30,29,30,30,30],[2089,30,32,31,32,31,30,30,30,29,30,30,30],[2090,30,32,31,32,31,30,30,30,29,30,30,30],[2091,31,31,32,31,31,31,30,30,29,30,30,30],[2092,30,31,32,32,31,30,30,30,29,30,30,30],[2093,30,32,31,32,31,30,30,30,29,30,30,30],[2094,31,31,32,31,31,30,30,30,29,30,30,30],[2095,31,31,32,31,31,31,30,29,30,30,30,30],[2096,30,31,32,32,31,30,30,29,30,29,30,30],[2097,31,32,31,32,31,30,30,30,29,30,30,30],[2098,31,31,32,32,31,30,30,29,30,29,30,31],[2099,31,32,31,32,31,29,30,30,29,30,30,31]]}getDayOfWeek(n){return{1:"आईतवार",2:"सोमबार",3:"मंगलवार",4:"बुधबार",5:"बिहीबार",6:"शुक्रबार",7:"शनिबार"}[n]}getNepaliMonth(n){return["","बैशाख","जेष्ठ","असार","श्रावण","भाद्र","आश्विन","कार्तिक","मंसिर","पुष","माघ","फाल्गुन","चैत्र"][n]}isLeapYear(n){return n%100===0?n%400===0:n%4===0}getNepaliMonth(n){return["","बैशाख","जेष्ठ","असार","श्रावण","भाद्र","आश्विन","कार्तिक","मंसिर","पुष","माघ","फाल्गुन","चैत्र"][n]}convertToNepaliNumber(n){const i=["०","१","२","३","४","५","६","७","८","९"];return String(n).split("").map(v=>i[v]??v).join("")}engToNep(n,i,v){const c=[31,28,31,30,31,30,31,31,30,31,30,31],d=[31,29,31,30,31,30,31,31,30,31,30,31];let h=1944,l=2e3,t=9,y=16,m=6,s=0;for(let f=0;f<n-h;f++){const B=h+f;s+=this.isLeapYear(B)?d.reduce((w,E)=>w+E):c.reduce((w,E)=>w+E)}for(let f=0;f<i-1;f++)s+=this.isLeapYear(n)?d[f]:c[f];s+=v;let g=0,N=t,_=t,D=l,x=y;for(;s>0;){const f=this.bs[g][N];x++,m++,x>f&&(_++,x=1,N++),m>7&&(m=1),_>12&&(D++,_=1),N>12&&(N=1,g++),s--}return{year:D,month:_,date:x,num_day:m}}getFirstDayOfMonth(n,i){let v=1944,c=1,d=1,h=2e3,l=9,t=16,y=6;for(;h<n||h===n&&l<i||h===n&&l===i&&t<1;){d++;const m=this.isLeapYear(v)?[31,29,31,30,31,30,31,31,30,31,30,31]:[31,28,31,30,31,30,31,31,30,31,30,31];d>m[c-1]&&(d=1,c++,c>12&&(c=1,v++));const s=this.bs.find(g=>g[0]===h);t++,t>s[l]&&(t=1,l++,l>12&&(l=1,h++)),y++,y>7&&(y=1)}return y}}const C=(b,n)=>{const i=b.__vccOpts||b;for(const[v,c]of n)i[v]=c;return i},L={class:"relative w-full np-nepali-calendar"},F=["value","placeholder"],T={key:0,class:"np-absolute np-bg-white np-border np-shadow np-rounded np-p-2 np-mt-1 np-w-64 np-z-50"},O={class:"np-flex np-items-center np-gap-2 np-mb-1 np-border-b border-gray-100 np-pb-1.5"},j={class:"np-flex np-items-center np-gap-1 np-w-1/2"},P=["value"],I={class:"np-flex np-items-center np-justify-between np-w-1/2"},$={class:"np-flex-1 np-flex np-justify-center"},z=["value"],Y={class:"np-grid np-grid-cols-7 np-text-center np-font-semibold np-text-[11px]"},U={class:"np-grid np-grid-cols-7 np-gap-0.5 np-mt-0.5"},q=["onClick"],W={__name:"NepaliDatePicker",props:{modelValue:String,placeholder:{type:String,default:"Select a date"},todayValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(b,{emit:n}){const i=b,v=n,c=new M,d=e.ref(!1),h=["आई","सोम","मंगल","बुध","बिही","शुक्र","शनि"],l=e.ref(null),t=e.ref(null),y=e.ref([]),m=e.ref(null),s=e.ref({year:0,month:0,day:0}),g=(o,r,a)=>`${o}-${String(r).padStart(2,"0")}-${String(a).padStart(2,"0")}`;function N(){const o=c.bs.find(u=>u[0]===Number(l.value));if(!o)return;const r=o[Number(t.value)];if(!r)return;const k=c.getFirstDayOfMonth(Number(l.value),Number(t.value))-1,p=[];for(let u=0;u<k;u++)p.push(null);for(let u=1;u<=r;u++)p.push(u);y.value=[];for(let u=0;u<p.length;u+=7){const V=p.slice(u,u+7);for(;V.length<7;)V.push(null);y.value.push(V)}}function _(o){if(!o)return;const r=g(l.value,t.value,o);m.value=r,v("update:modelValue",r),d.value=!1}function D(){t.value===1?(t.value=12,l.value--):t.value--}function x(){t.value===12?(t.value=1,l.value++):t.value++}function f(o){return o&&s.value.year===l.value&&s.value.month===t.value&&s.value.day===o}function B(o){return o?m.value===g(l.value,t.value,o):!1}function w(o){o.target.closest(".np-nepali-calendar")||(d.value=!1)}function E(){window.dispatchEvent(new CustomEvent("close-all-calendars")),d.value=!d.value}return e.onMounted(()=>{const o=new Date,r=c.engToNep(o.getFullYear(),o.getMonth()+1,o.getDate());if(s.value={year:r.year,month:r.month,day:r.date},i.modelValue){const[a,k,p]=i.modelValue.split("-");l.value=Number(a),t.value=Number(k),m.value=g(l.value,t.value,Number(p))}else l.value=s.value.year,t.value=s.value.month,i.todayValue&&(m.value=g(s.value.year,s.value.month,s.value.day));N(),document.addEventListener("click",w),window.addEventListener("close-all-calendars",()=>{d.value=!1})}),e.watch([l,t],N),(o,r)=>(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("input",{type:"text",readonly:"",value:m.value,onClick:E,placeholder:b.placeholder,class:"np-w-full np-rounded-md np-border np-border-gray-300 np-px-2 np-py-1.5 np-text-sm np-cursor-pointer focus:np-outline-none focus:np-ring-1 focus:np-ring-blue-300 focus:np-border-blue-300"},null,8,F),d.value?(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("div",O,[e.createElementVNode("div",j,[r[2]||(r[2]=e.createElementVNode("span",{class:"np-text-[10px] np-font-semibold np-text-red-600"},"वि.सं.",-1)),e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":r[0]||(r[0]=a=>l.value=a),class:"np-font-semibold np-text-xs np-w-full"},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(150,a=>e.createElementVNode("option",{key:a,value:1975+a},e.toDisplayString(e.unref(c).convertToNepaliNumber(1975+a)),9,P)),64))],512),[[e.vModelSelect,l.value]])]),e.createElementVNode("div",I,[e.createElementVNode("span",{onClick:D,class:"np-cursor-pointer np-text-sm"},"«"),e.createElementVNode("div",$,[e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":r[1]||(r[1]=a=>t.value=a),class:"np-text-xs np-text-center np-w-[60%]"},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,a=>e.createElementVNode("option",{key:a,value:a},e.toDisplayString(e.unref(c).getNepaliMonth(a)),9,z)),64))],512),[[e.vModelSelect,t.value]])]),e.createElementVNode("span",{onClick:x,class:"np-cursor-pointer np-text-sm"},"»")])]),e.createElementVNode("div",Y,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(h,(a,k)=>e.createElementVNode("div",{key:k,class:e.normalizeClass(k===6?"np-text-red-600":"")},e.toDisplayString(a),3)),64))]),e.createElementVNode("div",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(a,k)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:k},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a,(p,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,onClick:V=>_(p),class:e.normalizeClass(["np-py-1.5 np-text-[11px] np-text-center np-rounded np-select-none np-cursor-pointer",[!p&&"np-bg-gray-50/50 np-text-gray-200 np-cursor-default",u===6&&p&&"np-text-red-600",f(p)&&"np-bg-blue-200 text-blue-600 np-font-bold",B(p)&&"np-bg-blue-600 np-text-white"]])},e.toDisplayString(p?e.unref(c).convertToNepaliNumber(p):""),11,q))),128))],64))),128))])])):e.createCommentVNode("",!0)]))}},S=C(W,[["__scopeId","data-v-2bb63fd7"]]),A={install(b){b.component("NepaliDatePicker",S)}};exports.NepaliDatePicker=S;exports.default=A;
package/dist/np-date-picker-vue-tw.css CHANGED
@@ -1 +1 @@
1
- ::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:transparent;transition:background .2s}:hover::-webkit-scrollbar-thumb{background:#cbd5e1}select:focus{outline:none!important;box-shadow:none!important}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none}
1
+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.np-absolute{position:absolute}.np-z-50{z-index:50}.np-mb-1{margin-bottom:.25rem}.np-mt-0\.5{margin-top:.125rem}.np-mt-1{margin-top:.25rem}.np-flex{display:flex}.np-grid{display:grid}.np-w-1\/2{width:50%}.np-w-64{width:16rem}.np-w-\[60\%\]{width:60%}.np-w-full{width:100%}.np-flex-1{flex:1 1 0%}.np-cursor-default{cursor:default}.np-cursor-pointer{cursor:pointer}.np-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.np-items-center{align-items:center}.np-justify-center{justify-content:center}.np-justify-between{justify-content:space-between}.np-gap-0\.5{gap:.125rem}.np-gap-1{gap:.25rem}.np-gap-2{gap:.5rem}.np-rounded{border-radius:.25rem}.np-rounded-md{border-radius:.375rem}.np-border{border-width:1px}.np-border-b{border-bottom-width:1px}.np-border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.np-bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity, 1))}.np-bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.np-bg-gray-50\/50{background-color:#f9fafb80}.np-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.np-p-2{padding:.5rem}.np-px-2{padding-left:.5rem;padding-right:.5rem}.np-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.np-pb-1\.5{padding-bottom:.375rem}.np-text-center{text-align:center}.np-text-\[10px\]{font-size:10px}.np-text-\[11px\]{font-size:11px}.np-text-sm{font-size:.875rem;line-height:1.25rem}.np-text-xs{font-size:.75rem;line-height:1rem}.np-font-bold{font-weight:700}.np-font-semibold{font-weight:600}.np-text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.np-text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.np-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.np-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:transparent;-webkit-transition:background .2s;transition:background .2s}:hover::-webkit-scrollbar-thumb{background:#cbd5e1}select:focus{outline:none!important;box-shadow:none!important}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none}.focus\:np-border-blue-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1))}.focus\:np-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:np-ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:np-ring-blue-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))}select[data-v-2bb63fd7]:focus{outline:none!important;box-shadow:none!important}select[data-v-2bb63fd7]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none}
package/dist/np-date-picker-vue-tw.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { ref as N, onMounted as L, watch as P, createElementBlock as g, openBlock as b, createElementVNode as s, createCommentVNode as I, withDirectives as Y, Fragment as k, renderList as C, toDisplayString as $, vModelSelect as B, unref as E, normalizeClass as F } from "vue";
2
- class j {
1
+ import { ref as S, onMounted as P, watch as Y, createElementBlock as b, openBlock as x, createElementVNode as i, createCommentVNode as z, withDirectives as F, Fragment as C, renderList as L, toDisplayString as O, unref as B, vModelSelect as I, normalizeClass as $ } from "vue";
2
+ class U {
3
3
  constructor() {
4
4
  this.bs = [
5
5
  [2e3, 30, 32, 31, 32, 31, 30, 30, 30, 29, 30, 29, 31],
@@ -102,23 +102,10 @@ class j {
102
102
  [2097, 31, 32, 31, 32, 31, 30, 30, 30, 29, 30, 30, 30],
103
103
  [2098, 31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 31],
104
104
  [2099, 31, 32, 31, 32, 31, 29, 30, 30, 29, 30, 30, 31]
105
- ], this.nep_date = {
106
- year: 0,
107
- month: 0,
108
- date: 0,
109
- day: "",
110
- nmonth: "",
111
- num_day: 0
112
- }, this.eng_date = {
113
- year: 0,
114
- month: 0,
115
- date: 0,
116
- day: "",
117
- emonth: "",
118
- num_day: 0
119
- };
105
+ ];
120
106
  }
121
- getDayOfWeek(l) {
107
+ /* ---------- Helpers ---------- */
108
+ getDayOfWeek(t) {
122
109
  return {
123
110
  1: "आईतवार",
124
111
  2: "सोमबार",
@@ -127,94 +114,95 @@ class j {
127
114
  5: "बिहीबार",
128
115
  6: "शुक्रबार",
129
116
  7: "शनिबार"
130
- }[l];
117
+ }[t];
131
118
  }
132
- getEnglishMonth(l) {
133
- return {
134
- 1: "January",
135
- 2: "February",
136
- 3: "March",
137
- 4: "April",
138
- 5: "May",
139
- 6: "June",
140
- 7: "July",
141
- 8: "August",
142
- 9: "September",
143
- 10: "October",
144
- 11: "November",
145
- 12: "December"
146
- }[l];
119
+ getNepaliMonth(t) {
120
+ return [
121
+ "",
122
+ "बैशाख",
123
+ "जेष्ठ",
124
+ "असार",
125
+ "श्रावण",
126
+ "भाद्र",
127
+ "आश्विन",
128
+ "कार्तिक",
129
+ "मंसिर",
130
+ "पुष",
131
+ "माघ",
132
+ "फाल्गुन",
133
+ "चैत्र"
134
+ ][t];
147
135
  }
148
- getNepaliMonth(l) {
149
- return {
150
- 1: "बैशाख",
151
- 2: "जेष्ठ",
152
- 3: "असार",
153
- 4: "श्रावण",
154
- 5: "भाद्र",
155
- 6: "आश्विन",
156
- 7: "कार्तिक",
157
- 8: "मंसिर",
158
- 9: "पुष",
159
- 10: "माघ",
160
- 11: "फाल्गुन",
161
- 12: "चैत्र"
162
- }[l];
136
+ isLeapYear(t) {
137
+ return t % 100 === 0 ? t % 400 === 0 : t % 4 === 0;
163
138
  }
164
- isLeapYear(l) {
165
- return l % 4 === 0 && l % 100 !== 0 || l % 400 === 0;
139
+ getNepaliMonth(t) {
140
+ return [
141
+ "",
142
+ "बैशाख",
143
+ "जेष्ठ",
144
+ "असार",
145
+ "श्रावण",
146
+ "भाद्र",
147
+ "आश्विन",
148
+ "कार्तिक",
149
+ "मंसिर",
150
+ "पुष",
151
+ "माघ",
152
+ "फाल्गुन",
153
+ "चैत्र"
154
+ ][t];
166
155
  }
167
- convertToNepaliNumber(l) {
168
- const d = ["०", "१", "२", "३", "४", "५", "६", "७", "८", "९"];
169
- return String(l).split("").map((v) => /[0-9]/.test(v) ? d[v] : v).join("");
156
+ convertToNepaliNumber(t) {
157
+ const p = ["०", "१", "२", "३", "४", "५", "६", "७", "८", "९"];
158
+ return String(t).split("").map((m) => p[m] ?? m).join("");
170
159
  }
171
- engToNep(l, d, v) {
172
- if (l < 1944 || l > 2033)
173
- throw new Error("Supported only between 1944-2033");
174
- const c = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], u = [0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
175
- let f = 1944, e = 2e3, n = 9, D = 16, m = 0, i = 0, h = 7, S = e, _ = n, x = n;
176
- for (let p = f; p < l; p++)
177
- m += this.isLeapYear(p) ? u.reduce((M, V) => M + V, 0) : c.reduce((M, V) => M + V, 0);
178
- for (let p = 1; p < d; p++)
179
- m += this.isLeapYear(l) ? u[p] : c[p];
180
- m += v - 1;
181
- let T = 1;
182
- for (i = D; m > 0; ) {
183
- let p = this.bs[T][x];
184
- i++, h++, i > p && (i = 1, _++, x++), _ > 12 && (_ = 1, S++), x > 12 && (x = 1, T++), h > 7 && (h = 1), m--;
160
+ /* ---------- CORE: eng → nep (EXACT PHP PORT) ---------- */
161
+ engToNep(t, p, m) {
162
+ const r = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], d = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
163
+ let h = 1944, n = 2e3, e = 9, y = 16, v = 6, s = 0;
164
+ for (let f = 0; f < t - h; f++) {
165
+ const j = h + f;
166
+ s += this.isLeapYear(j) ? d.reduce((M, V) => M + V) : r.reduce((M, V) => M + V);
185
167
  }
186
- return this.nep_date = {
187
- year: S,
188
- month: _,
189
- date: i,
190
- day: this.getDayOfWeek(h),
191
- nmonth: this.getNepaliMonth(_),
192
- num_day: h
193
- }, this.nep_date;
194
- }
195
- adToBs(l) {
196
- const [d, v, c] = l.split("-").map(Number), u = this.engToNep(d, v, c), f = u.year, e = u.month.toString().padStart(2, "0"), n = u.date.toString().padStart(2, "0");
197
- return `${f}-${e}-${n}`;
168
+ for (let f = 0; f < p - 1; f++)
169
+ s += this.isLeapYear(t) ? d[f] : r[f];
170
+ s += m;
171
+ let g = 0, N = e, k = e, T = n, D = y;
172
+ for (; s > 0; ) {
173
+ const f = this.bs[g][N];
174
+ D++, v++, D > f && (k++, D = 1, N++), v > 7 && (v = 1), k > 12 && (T++, k = 1), N > 12 && (N = 1, g++), s--;
175
+ }
176
+ return {
177
+ year: T,
178
+ month: k,
179
+ date: D,
180
+ num_day: v
181
+ // 1–7 (Sunday–Saturday)
182
+ };
198
183
  }
199
- getFirstDayOfMonth(l, d) {
200
- let v = 1944;
201
- for (let c = v; c <= 2100; c++)
202
- for (let u = 1; u <= 12; u++)
203
- for (let f = 1; f <= 31; f++)
204
- try {
205
- const e = this.engToNep(c, u, f);
206
- if (e.year === l && e.month === d && e.date === 1)
207
- return e.num_day;
208
- } catch {
209
- continue;
210
- }
211
- return null;
184
+ /* ---------- REQUIRED FOR CALENDAR ---------- */
185
+ getFirstDayOfMonth(t, p) {
186
+ let m = 1944, r = 1, d = 1, h = 2e3, n = 9, e = 16, y = 6;
187
+ for (; h < t || h === t && n < p || h === t && n === p && e < 1; ) {
188
+ d++;
189
+ const v = this.isLeapYear(m) ? [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] : [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
190
+ d > v[r - 1] && (d = 1, r++, r > 12 && (r = 1, m++));
191
+ const s = this.bs.find((g) => g[0] === h);
192
+ e++, e > s[n] && (e = 1, n++, n > 12 && (n = 1, h++)), y++, y > 7 && (y = 1);
193
+ }
194
+ return y;
212
195
  }
213
196
  }
214
- const J = { class: "relative w-full nepali-calendar" }, z = ["value", "placeholder"], A = {
197
+ const W = (_, t) => {
198
+ const p = _.__vccOpts || _;
199
+ for (const [m, r] of t)
200
+ p[m] = r;
201
+ return p;
202
+ }, q = { class: "relative w-full np-nepali-calendar" }, A = ["value", "placeholder"], G = {
215
203
  key: 0,
216
- class: "absolute bg-white border shadow rounded p-3 mt-2 w-80 z-50"
217
- }, U = { class: "flex items-center gap-3 mb-2 border-b border-gray-100" }, W = { class: "flex items-center w-36" }, q = { class: "relative" }, G = ["value"], H = { class: "relative w-full" }, K = { class: "flex items-center justify-between" }, Q = { class: "relative" }, R = ["value"], X = { class: "grid grid-cols-7 text-center font-semibold mb-1 text-gray-700 text-sm" }, Z = { class: "grid grid-cols-7 gap-1 text-center" }, e3 = ["onClick"], t3 = {
204
+ class: "np-absolute np-bg-white np-border np-shadow np-rounded np-p-2 np-mt-1 np-w-64 np-z-50"
205
+ }, H = { class: "np-flex np-items-center np-gap-2 np-mb-1 np-border-b border-gray-100 np-pb-1.5" }, J = { class: "np-flex np-items-center np-gap-1 np-w-1/2" }, K = ["value"], Q = { class: "np-flex np-items-center np-justify-between np-w-1/2" }, R = { class: "np-flex-1 np-flex np-justify-center" }, X = ["value"], Z = { class: "np-grid np-grid-cols-7 np-text-center np-font-semibold np-text-[11px]" }, e3 = { class: "np-grid np-grid-cols-7 np-gap-0.5 np-mt-0.5" }, t3 = ["onClick"], n3 = {
218
206
  __name: "NepaliDatePicker",
219
207
  props: {
220
208
  modelValue: String,
@@ -228,137 +216,142 @@ const J = { class: "relative w-full nepali-calendar" }, z = ["value", "placehold
228
216
  }
229
217
  },
230
218
  emits: ["update:modelValue"],
231
- setup(w, { emit: l }) {
232
- const d = w, v = l, c = new j(), u = N(!1), f = ["आईत", "सोम", "मंगल", "बुध", "बिही", "शुक्र", "शनि"], e = N(null), n = N(null), D = N([]), m = N(null), i = N({ year: 0, month: 0, day: 0 }), h = (a, r, t) => `${a}-${String(r).padStart(2, "0")}-${String(t).padStart(2, "0")}`;
233
- function S() {
234
- const a = c.bs.find((o) => o[0] === e.value)?.[n.value];
235
- if (!a) return;
236
- const r = c.getFirstDayOfMonth(e.value, n.value), t = [];
237
- for (let o = 1; o < r; o++) t.push(null);
238
- for (let o = 1; o <= a; o++) t.push(o);
239
- D.value = [];
240
- for (let o = 0; o < t.length; o += 7) D.value.push(t.slice(o, o + 7));
219
+ setup(_, { emit: t }) {
220
+ const p = _, m = t, r = new U(), d = S(!1), h = ["आई", "सोम", "मंगल", "बुध", "बिही", "शुक्र", "शनि"], n = S(null), e = S(null), y = S([]), v = S(null), s = S({ year: 0, month: 0, day: 0 }), g = (l, o, a) => `${l}-${String(o).padStart(2, "0")}-${String(a).padStart(2, "0")}`;
221
+ function N() {
222
+ const l = r.bs.find((u) => u[0] === Number(n.value));
223
+ if (!l) return;
224
+ const o = l[Number(e.value)];
225
+ if (!o) return;
226
+ const w = r.getFirstDayOfMonth(Number(n.value), Number(e.value)) - 1, c = [];
227
+ for (let u = 0; u < w; u++) c.push(null);
228
+ for (let u = 1; u <= o; u++) c.push(u);
229
+ y.value = [];
230
+ for (let u = 0; u < c.length; u += 7) {
231
+ const E = c.slice(u, u + 7);
232
+ for (; E.length < 7; ) E.push(null);
233
+ y.value.push(E);
234
+ }
241
235
  }
242
- function _(a) {
243
- if (!a) return;
244
- const r = h(e.value, n.value, a);
245
- m.value = r, v("update:modelValue", r), u.value = !1;
236
+ function k(l) {
237
+ if (!l) return;
238
+ const o = g(n.value, e.value, l);
239
+ v.value = o, m("update:modelValue", o), d.value = !1;
246
240
  }
247
- function x(a) {
248
- return a && i.value.year === e.value && i.value.month === n.value && i.value.day === a;
241
+ function T() {
242
+ e.value === 1 ? (e.value = 12, n.value--) : e.value--;
249
243
  }
250
- function T(a) {
251
- return a ? m.value === h(e.value, n.value, a) : !1;
244
+ function D() {
245
+ e.value === 12 ? (e.value = 1, n.value++) : e.value++;
252
246
  }
253
- function p(a) {
254
- a.target.closest(".nepali-calendar") || (u.value = !1);
247
+ function f(l) {
248
+ return l && s.value.year === n.value && s.value.month === e.value && s.value.day === l;
255
249
  }
256
- L(() => {
257
- const a = /* @__PURE__ */ new Date(), r = c.engToNep(a.getFullYear(), a.getMonth() + 1, a.getDate());
258
- if (i.value = {
259
- year: r.year,
260
- month: r.month,
261
- day: r.date
262
- }, d.modelValue) {
263
- const [t, o, y] = d.modelValue.split("-");
264
- e.value = parseInt(t), n.value = parseInt(o), m.value = h(e.value, n.value, parseInt(y));
265
- } else
266
- e.value = i.value.year, n.value = i.value.month, d.todayValue && (m.value = h(
267
- i.value.year,
268
- i.value.month,
269
- i.value.day
270
- ));
271
- S(), document.addEventListener("click", p);
272
- });
273
- function M() {
274
- n.value === 1 ? (n.value = 12, e.value = Number(e.value) - 1) : n.value = Number(n.value) - 1;
250
+ function j(l) {
251
+ return l ? v.value === g(n.value, e.value, l) : !1;
252
+ }
253
+ function M(l) {
254
+ l.target.closest(".np-nepali-calendar") || (d.value = !1);
275
255
  }
276
256
  function V() {
277
- n.value === 12 ? (n.value = 1, e.value = Number(e.value) + 1) : n.value = Number(n.value) + 1;
257
+ window.dispatchEvent(new CustomEvent("close-all-calendars")), d.value = !d.value;
278
258
  }
279
- return P([e, n], S), (a, r) => (b(), g("div", J, [
280
- s("input", {
259
+ return P(() => {
260
+ const l = /* @__PURE__ */ new Date(), o = r.engToNep(l.getFullYear(), l.getMonth() + 1, l.getDate());
261
+ if (s.value = {
262
+ year: o.year,
263
+ month: o.month,
264
+ day: o.date
265
+ }, p.modelValue) {
266
+ const [a, w, c] = p.modelValue.split("-");
267
+ n.value = Number(a), e.value = Number(w), v.value = g(n.value, e.value, Number(c));
268
+ } else
269
+ n.value = s.value.year, e.value = s.value.month, p.todayValue && (v.value = g(
270
+ s.value.year,
271
+ s.value.month,
272
+ s.value.day
273
+ ));
274
+ N(), document.addEventListener("click", M), window.addEventListener("close-all-calendars", () => {
275
+ d.value = !1;
276
+ });
277
+ }), Y([n, e], N), (l, o) => (x(), b("div", q, [
278
+ i("input", {
281
279
  type: "text",
282
280
  readonly: "",
283
- value: m.value,
284
- onClick: r[0] || (r[0] = (t) => u.value = !u.value),
285
- class: "border-gray-300 w-full rounded-md px-3 py-2 cursor-pointer",
286
- placeholder: w.placeholder
287
- }, null, 8, z),
288
- u.value ? (b(), g("div", A, [
289
- s("div", U, [
290
- s("div", W, [
291
- r[3] || (r[3] = s("span", { class: "text-xs font-semibold text-red-600" }, " वि.सं.", -1)),
292
- s("div", q, [
293
- Y(s("select", {
294
- "onUpdate:modelValue": r[1] || (r[1] = (t) => e.value = t),
295
- class: "appearance-none border-none rounded-lg w-full px-3 py-2 text-sm font-bold"
281
+ value: v.value,
282
+ onClick: V,
283
+ placeholder: _.placeholder,
284
+ class: "np-w-full np-rounded-md np-border np-border-gray-300 np-px-2 np-py-1.5 np-text-sm np-cursor-pointer focus:np-outline-none focus:np-ring-1 focus:np-ring-blue-300 focus:np-border-blue-300"
285
+ }, null, 8, A),
286
+ d.value ? (x(), b("div", G, [
287
+ i("div", H, [
288
+ i("div", J, [
289
+ o[2] || (o[2] = i("span", { class: "np-text-[10px] np-font-semibold np-text-red-600" }, "वि.सं.", -1)),
290
+ F(i("select", {
291
+ "onUpdate:modelValue": o[0] || (o[0] = (a) => n.value = a),
292
+ class: "np-font-semibold np-text-xs np-w-full"
293
+ }, [
294
+ (x(), b(C, null, L(150, (a) => i("option", {
295
+ key: a,
296
+ value: 1975 + a
297
+ }, O(B(r).convertToNepaliNumber(1975 + a)), 9, K)), 64))
298
+ ], 512), [
299
+ [I, n.value]
300
+ ])
301
+ ]),
302
+ i("div", Q, [
303
+ i("span", {
304
+ onClick: T,
305
+ class: "np-cursor-pointer np-text-sm"
306
+ }, "«"),
307
+ i("div", R, [
308
+ F(i("select", {
309
+ "onUpdate:modelValue": o[1] || (o[1] = (a) => e.value = a),
310
+ class: "np-text-xs np-text-center np-w-[60%]"
296
311
  }, [
297
- (b(), g(k, null, C(150, (t) => s("option", {
298
- key: t,
299
- value: 1975 + t
300
- }, $(1975 + t), 9, G)), 64))
312
+ (x(), b(C, null, L(12, (a) => i("option", {
313
+ key: a,
314
+ value: a
315
+ }, O(B(r).getNepaliMonth(a)), 9, X)), 64))
301
316
  ], 512), [
302
- [B, e.value]
317
+ [I, e.value]
303
318
  ])
304
- ])
305
- ]),
306
- s("div", H, [
307
- s("div", K, [
308
- s("div", {
309
- onClick: M,
310
- class: "px-3 py-1 select-none cursor-pointer"
311
- }, " « "),
312
- s("div", Q, [
313
- Y(s("select", {
314
- "onUpdate:modelValue": r[2] || (r[2] = (t) => n.value = t),
315
- class: "appearance-none border-none rounded-lg px-3 py-2 text-sm bg-white"
316
- }, [
317
- (b(), g(k, null, C(12, (t) => s("option", {
318
- key: t,
319
- value: t
320
- }, $(E(c).getNepaliMonth(t)), 9, R)), 64))
321
- ], 512), [
322
- [B, n.value]
323
- ])
324
- ]),
325
- s("div", {
326
- onClick: V,
327
- class: "px-3 py-1 select-none cursor-pointer"
328
- }, " » ")
329
- ])
319
+ ]),
320
+ i("span", {
321
+ onClick: D,
322
+ class: "np-cursor-pointer np-text-sm"
323
+ }, "»")
330
324
  ])
331
325
  ]),
332
- s("div", X, [
333
- (b(), g(k, null, C(f, (t, o) => s("div", {
334
- key: o,
335
- class: F(o === 6 ? "text-red-600" : "")
336
- }, $(t), 3)), 64))
326
+ i("div", Z, [
327
+ (x(), b(C, null, L(h, (a, w) => i("div", {
328
+ key: w,
329
+ class: $(w === 6 ? "np-text-red-600" : "")
330
+ }, O(a), 3)), 64))
337
331
  ]),
338
- s("div", Z, [
339
- (b(!0), g(k, null, C(D.value, (t, o) => (b(), g(k, { key: o }, [
340
- (b(!0), g(k, null, C(t, (y, O) => (b(), g("div", {
341
- key: O,
342
- class: F(["p-2 border rounded cursor-pointer select-none", [
343
- y === null ? "bg-gray-100 cursor-default text-gray-400" : "",
344
- O === 6 && y !== null ? "text-red-600" : "",
345
- x(y) ? "bg-blue-200 text-blue-800 font-bold" : "",
346
- T(y) ? "bg-blue-600 text-white font-bold" : ""
347
- ]]),
348
- onClick: (n3) => _(y)
349
- }, $(y ? E(c).convertToNepaliNumber(y) : ""), 11, e3))), 128))
332
+ i("div", e3, [
333
+ (x(!0), b(C, null, L(y.value, (a, w) => (x(), b(C, { key: w }, [
334
+ (x(!0), b(C, null, L(a, (c, u) => (x(), b("div", {
335
+ key: u,
336
+ onClick: (E) => k(c),
337
+ class: $(["np-py-1.5 np-text-[11px] np-text-center np-rounded np-select-none np-cursor-pointer", [
338
+ !c && "np-bg-gray-50/50 np-text-gray-200 np-cursor-default",
339
+ u === 6 && c && "np-text-red-600",
340
+ f(c) && "np-bg-blue-200 text-blue-600 np-font-bold",
341
+ j(c) && "np-bg-blue-600 np-text-white"
342
+ ]])
343
+ }, O(c ? B(r).convertToNepaliNumber(c) : ""), 11, t3))), 128))
350
344
  ], 64))), 128))
351
345
  ])
352
- ])) : I("", !0)
346
+ ])) : z("", !0)
353
347
  ]));
354
348
  }
355
- }, a3 = {
356
- install(w) {
357
- w.component("NepaliDatePicker", t3);
349
+ }, l3 = /* @__PURE__ */ W(n3, [["__scopeId", "data-v-2bb63fd7"]]), o3 = {
350
+ install(_) {
351
+ _.component("NepaliDatePicker", l3);
358
352
  }
359
353
  };
360
354
  export {
361
- t3 as NepaliDatePicker,
362
- a3 as NpDatePickerPlugin,
363
- t3 as default
355
+ l3 as NepaliDatePicker,
356
+ o3 as default
364
357
  };
package/package.json CHANGED
@@ -1,25 +1,36 @@
1
1
  {
2
2
  "name": "@pr0vin/np-date-picker-vue-tw",
3
- "version": "1.0.4",
4
- "main": "dist/np-date-picker-vue-tw.umd.js",
3
+ "version": "1.0.6",
4
+ "description": "A Nepali date picker Vue 3 component using Tailwind CSS",
5
+ "author": "Pravin Chaudhary",
6
+ "license": "ISC",
7
+ "type": "module",
8
+ "main": "dist/np-date-picker-vue-tw.cjs.js",
5
9
  "module": "dist/np-date-picker-vue-tw.es.js",
6
- "style": "dist/styles.css",
10
+ "style": "dist/style.css",
7
11
  "files": [
8
12
  "dist"
9
13
  ],
10
14
  "scripts": {
11
- "build": "vite build",
12
- "dev": "vite"
15
+ "dev": "vite",
16
+ "build": "vite build"
13
17
  },
14
- "author": "Pravin Chaudahry",
15
- "license": "ISC",
16
- "description": "A Nepali date picker Vue 3 component using Tailwind CSS",
17
18
  "peerDependencies": {
18
- "vue": "^3.5.25"
19
+ "vue": "^3.3.0"
19
20
  },
20
21
  "devDependencies": {
21
22
  "@vitejs/plugin-vue": "^6.0.2",
22
23
  "vite": "^7.2.6",
23
- "vue": "^3.5.25"
24
- }
24
+ "tailwindcss": "^3.4.17",
25
+ "postcss": "^8.4.38",
26
+ "autoprefixer": "^10.4.20"
27
+ },
28
+ "keywords": [
29
+ "vue",
30
+ "vue3",
31
+ "nepali-date-picker",
32
+ "tailwind",
33
+ "datepicker",
34
+ "nepali-calendar"
35
+ ]
25
36
  }
package/dist/np-date-picker-vue-tw.umd.js DELETED
@@ -1 +0,0 @@
1
- (function(y,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(y=typeof globalThis<"u"?globalThis:y||self,e(y.NpDatePickerVueTw={},y.Vue))})(this,(function(y,e){"use strict";class B{constructor(){this.bs=[[2e3,30,32,31,32,31,30,30,30,29,30,29,31],[2001,31,31,32,31,31,31,30,29,30,29,30,30],[2002,31,31,32,32,31,30,30,29,30,29,30,30],[2003,31,32,31,32,31,30,30,30,29,29,30,31],[2004,30,32,31,32,31,30,30,30,29,30,29,31],[2005,31,31,32,31,31,31,30,29,30,29,30,30],[2006,31,31,32,32,31,30,30,29,30,29,30,30],[2007,31,32,31,32,31,30,30,30,29,29,30,31],[2008,31,31,31,32,31,31,29,30,30,29,29,31],[2009,31,31,32,31,31,31,30,29,30,29,30,30],[2010,31,31,32,32,31,30,30,29,30,29,30,30],[2011,31,32,31,32,31,30,30,30,29,29,30,31],[2012,31,31,31,32,31,31,29,30,30,29,30,30],[2013,31,31,32,31,31,31,30,29,30,29,30,30],[2014,31,31,32,32,31,30,30,29,30,29,30,30],[2015,31,32,31,32,31,30,30,30,29,29,30,31],[2016,31,31,31,32,31,31,29,30,30,29,30,30],[2017,31,31,32,31,31,31,30,29,30,29,30,30],[2018,31,32,31,32,31,30,30,29,30,29,30,30],[2019,31,32,31,32,31,30,30,30,29,30,29,31],[2020,31,31,31,32,31,31,30,29,30,29,30,30],[2021,31,31,32,31,31,31,30,29,30,29,30,30],[2022,31,32,31,32,31,30,30,30,29,29,30,30],[2023,31,32,31,32,31,30,30,30,29,30,29,31],[2024,31,31,31,32,31,31,30,29,30,29,30,30],[2025,31,31,32,31,31,31,30,29,30,29,30,30],[2026,31,32,31,32,31,30,30,30,29,29,30,31],[2027,30,32,31,32,31,30,30,30,29,30,29,31],[2028,31,31,32,31,31,31,30,29,30,29,30,30],[2029,31,31,32,31,32,30,30,29,30,29,30,30],[2030,31,32,31,32,31,30,30,30,29,29,30,31],[2031,30,32,31,32,31,30,30,30,29,30,29,31],[2032,31,31,32,31,31,31,30,29,30,29,30,30],[2033,31,31,32,32,31,30,30,29,30,29,30,30],[2034,31,32,31,32,31,30,30,30,29,29,30,31],[2035,30,32,31,32,31,31,29,30,30,29,29,31],[2036,31,31,32,31,31,31,30,29,30,29,30,30],[2037,31,31,32,32,31,30,30,29,30,29,30,30],[2038,31,32,31,32,31,30,30,30,29,29,30,31],[2039,31,31,31,32,31,31,29,30,30,29,30,30],[2040,31,31,32,31,31,31,30,29,30,29,30,30],[2041,31,31,32,32,31,30,30,29,30,29,30,30],[2042,31,32,31,32,31,30,30,30,29,29,30,31],[2043,31,31,31,32,31,31,29,30,30,29,30,30],[2044,31,31,32,31,31,31,30,29,30,29,30,30],[2045,31,32,31,32,31,30,30,29,30,29,30,30],[2046,31,32,31,32,31,30,30,30,29,29,30,31],[2047,31,31,31,32,31,31,30,29,30,29,30,30],[2048,31,31,32,31,31,31,30,29,30,29,30,30],[2049,31,32,31,32,31,30,30,30,29,29,30,30],[2050,31,32,31,32,31,30,30,30,29,30,29,31],[2051,31,31,31,32,31,31,30,29,30,29,30,30],[2052,31,31,32,31,31,31,30,29,30,29,30,30],[2053,31,32,31,32,31,30,30,30,29,29,30,30],[2054,31,32,31,32,31,30,30,30,29,30,29,31],[2055,31,31,32,31,31,31,30,29,30,29,30,30],[2056,31,31,32,31,32,30,30,29,30,29,30,30],[2057,31,32,31,32,31,30,30,30,29,29,30,31],[2058,30,32,31,32,31,30,30,30,29,30,29,31],[2059,31,31,32,31,31,31,30,29,30,29,30,30],[2060,31,31,32,32,31,30,30,29,30,29,30,30],[2061,31,32,31,32,31,30,30,30,29,29,30,31],[2062,30,32,31,32,31,31,29,30,29,30,29,31],[2063,31,31,32,31,31,31,30,29,30,29,30,30],[2064,31,31,32,32,31,30,30,29,30,29,30,30],[2065,31,32,31,32,31,30,30,30,29,29,30,31],[2066,31,31,31,32,31,31,29,30,30,29,29,31],[2067,31,31,32,31,31,31,30,29,30,29,30,30],[2068,31,31,32,32,31,30,30,29,30,29,30,30],[2069,31,32,31,32,31,30,30,30,29,29,30,31],[2070,31,31,31,32,31,31,29,30,30,29,30,30],[2071,31,31,32,31,31,31,30,29,30,29,30,30],[2072,31,32,31,32,31,30,30,29,30,29,30,30],[2073,31,32,31,32,31,30,30,30,29,29,30,31],[2074,31,31,31,32,31,31,30,29,30,29,30,30],[2075,31,31,32,31,31,31,30,29,30,29,30,30],[2076,31,32,31,32,31,30,30,30,29,29,30,30],[2077,31,32,31,32,31,30,30,30,29,30,29,31],[2078,31,31,31,32,31,31,30,29,30,29,30,30],[2079,31,31,32,31,31,31,30,29,30,29,30,30],[2080,31,32,31,32,31,30,30,30,29,29,30,30],[2081,31,32,31,32,31,30,30,30,29,30,29,31],[2082,31,31,32,31,31,31,30,29,30,29,30,30],[2083,31,31,32,31,31,30,30,30,29,30,30,30],[2084,31,31,32,31,31,30,30,30,29,30,30,30],[2085,31,32,31,32,30,31,30,30,29,30,30,30],[2086,30,32,31,32,31,30,30,30,29,30,30,30],[2087,31,31,32,31,31,31,30,30,29,30,30,30],[2088,30,31,32,32,30,31,30,30,29,30,30,30],[2089,30,32,31,32,31,30,30,30,29,30,30,30],[2090,30,32,31,32,31,30,30,30,29,30,30,30],[2091,31,31,32,31,31,31,30,30,29,30,30,30],[2092,30,31,32,32,31,30,30,30,29,30,30,30],[2093,30,32,31,32,31,30,30,30,29,30,30,30],[2094,31,31,32,31,31,30,30,30,29,30,30,30],[2095,31,31,32,31,31,31,30,29,30,30,30,30],[2096,30,31,32,32,31,30,30,29,30,29,30,30],[2097,31,32,31,32,31,30,30,30,29,30,30,30],[2098,31,31,32,32,31,30,30,29,30,29,30,31],[2099,31,32,31,32,31,29,30,30,29,30,30,31]],this.nep_date={year:0,month:0,date:0,day:"",nmonth:"",num_day:0},this.eng_date={year:0,month:0,date:0,day:"",emonth:"",num_day:0}}getDayOfWeek(o){return{1:"आईतवार",2:"सोमबार",3:"मंगलवार",4:"बुधबार",5:"बिहीबार",6:"शुक्रबार",7:"शनिबार"}[o]}getEnglishMonth(o){return{1:"January",2:"February",3:"March",4:"April",5:"May",6:"June",7:"July",8:"August",9:"September",10:"October",11:"November",12:"December"}[o]}getNepaliMonth(o){return{1:"बैशाख",2:"जेष्ठ",3:"असार",4:"श्रावण",5:"भाद्र",6:"आश्विन",7:"कार्तिक",8:"मंसिर",9:"पुष",10:"माघ",11:"फाल्गुन",12:"चैत्र"}[o]}isLeapYear(o){return o%4===0&&o%100!==0||o%400===0}convertToNepaliNumber(o){const c=["०","१","२","३","४","५","६","७","८","९"];return String(o).split("").map(p=>/[0-9]/.test(p)?c[p]:p).join("")}engToNep(o,c,p){if(o<1944||o>2033)throw new Error("Supported only between 1944-2033");const u=[0,31,28,31,30,31,30,31,31,30,31,30,31],i=[0,31,29,31,30,31,30,31,31,30,31,30,31];let g=1944,t=2e3,l=9,E=16,f=0,d=0,h=7,V=t,N=l,k=l;for(let m=g;m<o;m++)f+=this.isLeapYear(m)?i.reduce((v,D)=>v+D,0):u.reduce((v,D)=>v+D,0);for(let m=1;m<c;m++)f+=this.isLeapYear(o)?i[m]:u[m];f+=p-1;let x=1;for(d=E;f>0;){let m=this.bs[x][k];d++,h++,d>m&&(d=1,N++,k++),N>12&&(N=1,V++),k>12&&(k=1,x++),h>7&&(h=1),f--}return this.nep_date={year:V,month:N,date:d,day:this.getDayOfWeek(h),nmonth:this.getNepaliMonth(N),num_day:h},this.nep_date}adToBs(o){const[c,p,u]=o.split("-").map(Number),i=this.engToNep(c,p,u),g=i.year,t=i.month.toString().padStart(2,"0"),l=i.date.toString().padStart(2,"0");return`${g}-${t}-${l}`}getFirstDayOfMonth(o,c){let p=1944;for(let u=p;u<=2100;u++)for(let i=1;i<=12;i++)for(let g=1;g<=31;g++)try{const t=this.engToNep(u,i,g);if(t.year===o&&t.month===c&&t.date===1)return t.num_day}catch{continue}return null}}const M={class:"relative w-full nepali-calendar"},T=["value","placeholder"],C={key:0,class:"absolute bg-white border shadow rounded p-3 mt-2 w-80 z-50"},F={class:"flex items-center gap-3 mb-2 border-b border-gray-100"},L={class:"flex items-center w-36"},P={class:"relative"},$=["value"],O={class:"relative w-full"},Y={class:"flex items-center justify-between"},j={class:"relative"},I=["value"],z={class:"grid grid-cols-7 text-center font-semibold mb-1 text-gray-700 text-sm"},J={class:"grid grid-cols-7 gap-1 text-center"},A=["onClick"],S={__name:"NepaliDatePicker",props:{modelValue:String,placeholder:{type:String,default:"Select a date"},todayValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(_,{emit:o}){const c=_,p=o,u=new B,i=e.ref(!1),g=["आईत","सोम","मंगल","बुध","बिही","शुक्र","शनि"],t=e.ref(null),l=e.ref(null),E=e.ref([]),f=e.ref(null),d=e.ref({year:0,month:0,day:0}),h=(a,s,n)=>`${a}-${String(s).padStart(2,"0")}-${String(n).padStart(2,"0")}`;function V(){const a=u.bs.find(r=>r[0]===t.value)?.[l.value];if(!a)return;const s=u.getFirstDayOfMonth(t.value,l.value),n=[];for(let r=1;r<s;r++)n.push(null);for(let r=1;r<=a;r++)n.push(r);E.value=[];for(let r=0;r<n.length;r+=7)E.value.push(n.slice(r,r+7))}function N(a){if(!a)return;const s=h(t.value,l.value,a);f.value=s,p("update:modelValue",s),i.value=!1}function k(a){return a&&d.value.year===t.value&&d.value.month===l.value&&d.value.day===a}function x(a){return a?f.value===h(t.value,l.value,a):!1}function m(a){a.target.closest(".nepali-calendar")||(i.value=!1)}e.onMounted(()=>{const a=new Date,s=u.engToNep(a.getFullYear(),a.getMonth()+1,a.getDate());if(d.value={year:s.year,month:s.month,day:s.date},c.modelValue){const[n,r,b]=c.modelValue.split("-");t.value=parseInt(n),l.value=parseInt(r),f.value=h(t.value,l.value,parseInt(b))}else t.value=d.value.year,l.value=d.value.month,c.todayValue&&(f.value=h(d.value.year,d.value.month,d.value.day));V(),document.addEventListener("click",m)});function v(){l.value===1?(l.value=12,t.value=Number(t.value)-1):l.value=Number(l.value)-1}function D(){l.value===12?(l.value=1,t.value=Number(t.value)+1):l.value=Number(l.value)+1}return e.watch([t,l],V),(a,s)=>(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("input",{type:"text",readonly:"",value:f.value,onClick:s[0]||(s[0]=n=>i.value=!i.value),class:"border-gray-300 w-full rounded-md px-3 py-2 cursor-pointer",placeholder:_.placeholder},null,8,T),i.value?(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",F,[e.createElementVNode("div",L,[s[3]||(s[3]=e.createElementVNode("span",{class:"text-xs font-semibold text-red-600"}," वि.सं.",-1)),e.createElementVNode("div",P,[e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":s[1]||(s[1]=n=>t.value=n),class:"appearance-none border-none rounded-lg w-full px-3 py-2 text-sm font-bold"},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(150,n=>e.createElementVNode("option",{key:n,value:1975+n},e.toDisplayString(1975+n),9,$)),64))],512),[[e.vModelSelect,t.value]])])]),e.createElementVNode("div",O,[e.createElementVNode("div",Y,[e.createElementVNode("div",{onClick:v,class:"px-3 py-1 select-none cursor-pointer"}," « "),e.createElementVNode("div",j,[e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":s[2]||(s[2]=n=>l.value=n),class:"appearance-none border-none rounded-lg px-3 py-2 text-sm bg-white"},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,n=>e.createElementVNode("option",{key:n,value:n},e.toDisplayString(e.unref(u).getNepaliMonth(n)),9,I)),64))],512),[[e.vModelSelect,l.value]])]),e.createElementVNode("div",{onClick:D,class:"px-3 py-1 select-none cursor-pointer"}," » ")])])]),e.createElementVNode("div",z,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(g,(n,r)=>e.createElementVNode("div",{key:r,class:e.normalizeClass(r===6?"text-red-600":"")},e.toDisplayString(n),3)),64))]),e.createElementVNode("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E.value,(n,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:r},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n,(b,w)=>(e.openBlock(),e.createElementBlock("div",{key:w,class:e.normalizeClass(["p-2 border rounded cursor-pointer select-none",[b===null?"bg-gray-100 cursor-default text-gray-400":"",w===6&&b!==null?"text-red-600":"",k(b)?"bg-blue-200 text-blue-800 font-bold":"",x(b)?"bg-blue-600 text-white font-bold":""]]),onClick:W=>N(b)},e.toDisplayString(b?e.unref(u).convertToNepaliNumber(b):""),11,A))),128))],64))),128))])])):e.createCommentVNode("",!0)]))}},U={install(_){_.component("NepaliDatePicker",S)}};y.NepaliDatePicker=S,y.NpDatePickerPlugin=U,y.default=S,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));