Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-3-material-date-picker

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-3-material-date-picker - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

4

dist/components/datePicker.vue.d.ts

@@ -87,3 +87,3 @@ import type { PropType as __PropType } from 'vue';

};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "select:year" | "select:month" | "select:day")[], "update:modelValue" | "change" | "select:year" | "select:month" | "select:day", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "select:year" | "select:month" | "select:day")[], "update:modelValue" | "change" | "select:year" | "select:month" | "select:day", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
allowedDates: {

@@ -182,3 +182,3 @@ type: __PropType<DatePickerAllowedDatesFunction | undefined>;

color: string | undefined;
}>;
}, {}>;
export default _sfc_main;

@@ -65,3 +65,3 @@ import type { PropType as __PropType } from 'vue';

};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
max: {

@@ -132,3 +132,3 @@ type: __PropType<string>;

color: string | undefined;
}>;
}, {}>;
export default _sfc_main;

@@ -48,3 +48,3 @@ import type { PropType as __PropType } from 'vue';

};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "toggle")[], "input" | "toggle", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "toggle")[], "input" | "toggle", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
disabled: {

@@ -100,3 +100,3 @@ type: __PropType<boolean | undefined>;

color: string | undefined;
}>;
}, {}>;
export default _sfc_main;

@@ -32,3 +32,3 @@ import type { PropType as __PropType } from 'vue';

};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
disabled: {

@@ -67,3 +67,3 @@ type: __PropType<boolean | undefined>;

color: string | undefined;
}>;
}, {}>;
export default _sfc_main;

@@ -36,3 +36,3 @@ import type { PropType as __PropType } from 'vue';

};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select-year"[], "select-year", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select-year"[], "select-year", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
date: {

@@ -75,3 +75,3 @@ type: __PropType<string | undefined>;

color: string | undefined;
}>;
}, {}>;
export default _sfc_main;

@@ -28,3 +28,3 @@ import type { PropType as __PropType } from 'vue';

};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
disabled: {

@@ -59,3 +59,3 @@ type: __PropType<boolean | undefined>;

color: string | undefined;
}>;
}, {}>;
export default _sfc_main;

@@ -1,3 +0,3 @@

import { defineComponent as F, useCssVars as j, computed as i, openBlock as d, createElementBlock as y, createElementVNode as b, Fragment as Y, renderList as V, unref as r, toDisplayString as x, normalizeClass as N, createCommentVNode as B, pushScopeId as te, popScopeId as ne, createTextVNode as ae, createVNode as le, Transition as re, withCtx as oe, ref as se, onMounted as Q, useSlots as ie, reactive as ce, watch as z, normalizeStyle as ue, createBlock as U, renderSlot as de } from "vue";
const pe = [
import { defineComponent as L, useCssVars as H, computed as u, openBlock as p, createElementBlock as m, createElementVNode as b, Fragment as V, renderList as B, toDisplayString as C, normalizeClass as F, unref as h, createCommentVNode as N, pushScopeId as ae, popScopeId as ne, createTextVNode as le, createVNode as re, Transition as oe, withCtx as se, ref as ie, onMounted as X, useSlots as ce, reactive as ue, watch as G, normalizeStyle as de, createBlock as E, renderSlot as pe } from "vue";
const me = [
0,

@@ -16,3 +16,3 @@ 31,

31
], ye = [
], ve = [
0,

@@ -31,25 +31,25 @@ 31,

31
], me = {
], ye = {
year: { year: "numeric", timeZone: "UTC" },
month: { month: "long", timeZone: "UTC" },
date: { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" }
}, h = {
}, y = {
year: "YEAR",
month: "MONTH",
date: "DATE"
}, X = { date: 10, month: 7, year: 4 }, K = (n) => {
const [l, e, c] = n.trim().split(" ")[0].split("-");
}, ee = { date: 10, month: 7, year: 4 }, q = (l) => {
const [i, r, t] = l.trim().split(" ")[0].split("-");
return [
l.toString().padStart(4, "0"),
(e || 1).toString().padStart(2, "0"),
(c || 1).toString().padStart(2, "0")
i.toString().padStart(4, "0"),
(r || 1).toString().padStart(2, "0"),
(t || 1).toString().padStart(2, "0")
].join("-");
};
function M(n, l, e = { start: 0, length: 0 }) {
function I(l, i, r = { start: 0, length: 0 }) {
try {
const c = new Intl.DateTimeFormat(n || void 0, l);
return (m) => c.format(
const t = new Intl.DateTimeFormat(l || void 0, i);
return (e) => t.format(
/* @__PURE__ */ new Date(
`${K(
typeof m != "string" ? m[0] : m
`${q(
typeof e != "string" ? e[0] : e
)}T00:00:00+00:00`

@@ -59,133 +59,132 @@ )

} catch {
return e.start || e.length ? (m) => K(m).substring(
e.start || 0,
e.length
return r.start || r.length ? (e) => q(e).substring(
r.start || 0,
r.length
) : void 0;
}
}
function G(n, l, e, c) {
return (!c || c(n)) && (!l || n >= l.substring(0, 10)) && (!e || n <= e);
function K(l, i, r, t) {
return (!t || t(l)) && (!i || l >= i.substring(0, 10)) && (!r || l <= r);
}
function ve(n) {
return n % 4 === 0 && n % 100 !== 0 || n % 400 === 0;
function _e(l) {
return l % 4 === 0 && l % 100 !== 0 || l % 400 === 0;
}
function he(n, l) {
return ve(n) ? pe[l] : ye[l];
function he(l, i) {
return _e(l) ? me[i] : ve[i];
}
const _e = (n, l) => {
const [e, c] = n.split("-").map(Number);
return c + l === 0 ? `${e - 1}-12` : c + l === 13 ? `${e + 1}-01` : `${e}-${(c + l).toString().padStart(2, "0")}`;
const fe = (l, i) => {
const [r, t] = l.split("-").map(Number);
return t + i === 0 ? `${r - 1}-12` : t + i === 13 ? `${r + 1}-01` : `${r}-${(t + i).toString().padStart(2, "0")}`;
};
function fe(n, l = "px") {
if (!(n == null || n === ""))
return isNaN(+n) ? String(n) : `${Number(n)}${l}`;
function ge(l, i = "px") {
if (!(l == null || l === ""))
return isNaN(+l) ? String(l) : `${Number(l)}${i}`;
}
function q(n) {
return Array.from({ length: n }, (l, e) => e);
function J(l) {
return Array.from({ length: l }, (i, r) => r);
}
function P(n, l) {
const [e, c = 1, m = 1] = n.split("-");
return `${e}-${c.toString().padStart(2, "0")}-${m.toString().padStart(2, "0")}`.substring(0, X[l]);
function x(l, i) {
const [r, t = 1, e = 1] = l.split("-");
return `${r}-${t.toString().padStart(2, "0")}-${e.toString().padStart(2, "0")}`.substring(0, ee[i]);
}
function J(n) {
return n != null && n != null ? Array.isArray(n) ? n : [n] : [];
function Q(l) {
return l != null && l != null ? Array.isArray(l) ? l : [l] : [];
}
function ee(n) {
return n && n[0].toUpperCase() + n.substr(1).toLowerCase();
function te(l) {
return l && l[0].toUpperCase() + l.substr(1).toLowerCase();
}
const ge = (n) => (te("data-v-dfb52b4e"), n = n(), ne(), n), ke = ["onClick"], be = {
const ke = (l) => (ae("data-v-dfb52b4e"), l = l(), ne(), l), be = ["onClick"], De = {
key: 0,
class: "date-picker-table__events"
}, De = /* @__PURE__ */ ge(() => /* @__PURE__ */ b("div", { class: "event" }, null, -1)), Se = [
De
], $e = /* @__PURE__ */ F({
}, Se = /* @__PURE__ */ ke(() => /* @__PURE__ */ b("div", { class: "event" }, null, -1)), $e = [
Se
], Te = /* @__PURE__ */ L({
__name: "datePickerDateTable",
props: {
max: null,
min: null,
localeFirstDayOfYear: null,
firstDayOfWeek: null,
max: {},
min: {},
localeFirstDayOfYear: {},
firstDayOfWeek: {},
showAdjacentMonths: { type: Boolean },
allowedDates: null,
allowedDates: {},
disabled: { type: Boolean },
events: null,
eventColor: null,
events: {},
eventColor: {},
range: { type: Boolean },
readonly: { type: Boolean },
tableDate: null,
value: null,
currentLocale: null,
tableDate: {},
value: {},
currentLocale: {},
color: { default: "#2e79bd" }
},
emits: ["input"],
setup(n, { emit: l }) {
const e = n;
j((s) => ({
"52bfe637": n.color
setup(l, { emit: i }) {
H((o) => ({
"52bfe637": o.color
}));
const c = i(() => (/* @__PURE__ */ new Date()).toISOString().substring(0, 10)), m = M(
e.currentLocale,
const r = i, t = l, e = u(() => (/* @__PURE__ */ new Date()).toISOString().substring(0, 10)), D = I(
t.currentLocale,
{ day: "numeric", timeZone: "UTC" },
{ start: 8, length: 2 }
), k = i(
() => M(e.currentLocale, {
), _ = u(
() => I(t.currentLocale, {
weekday: "narrow",
timeZone: "UTC"
})
), p = i(() => {
const s = parseInt((e.firstDayOfWeek || 0).toString(), 10);
return k ? q(7).map(
(v) => k.value(`2017-01-${s + v + 15}`)
) : q(7).map(
(v) => ["S", "M", "T", "W", "T", "F", "S"][(v + s) % 7]
), d = u(() => {
const o = parseInt((t.firstDayOfWeek || 0).toString(), 10);
return _ ? J(7).map(
(v) => _.value(`2017-01-${o + v + 15}`)
) : J(7).map(
(v) => ["S", "M", "T", "W", "T", "F", "S"][(v + o) % 7]
);
}), t = i(
() => Number(e.tableDate.split("-")[1]) - 1
), o = i(() => Number(e.tableDate.split("-")[0])), u = (s) => G(s, e.min, e.max, e.allowedDates) && !e.disabled && !e.readonly, f = (s) => ({
disabled: !u(s),
selected: _(s),
"current-day": s === c.value && !_(s)
}), S = () => ((/* @__PURE__ */ new Date(
`${o.value}-${(t.value + 1).toString().padStart(2, "0")}-01T00:00:00+00:00`
)).getUTCDay() - parseInt((e.firstDayOfWeek || 0).toString()) + 7) % 7, _ = (s) => {
if (Array.isArray(e.value))
if (e.range && e.value.length === 2) {
const [v, $] = [...e.value].sort();
return v <= s && s <= $;
}), a = u(
() => Number(t.tableDate.split("-")[1]) - 1
), s = u(() => Number(t.tableDate.split("-")[0])), c = (o) => K(o, t.min, t.max, t.allowedDates) && !t.disabled && !t.readonly, g = (o) => ({
disabled: !c(o),
selected: f(o),
"current-day": o === e.value && !f(o)
}), $ = () => ((/* @__PURE__ */ new Date(
`${s.value}-${(a.value + 1).toString().padStart(2, "0")}-01T00:00:00+00:00`
)).getUTCDay() - parseInt((t.firstDayOfWeek || 0).toString()) + 7) % 7, f = (o) => {
if (Array.isArray(t.value))
if (t.range && t.value.length === 2) {
const [v, T] = [...t.value].sort();
return v <= o && o <= T;
} else
return e.value.indexOf(s) !== -1;
return s === e.value;
}, D = (s) => e.events ? e.events.includes(s) : !1, A = (s) => {
u(s) && l("input", s);
}, C = i(() => {
const s = [];
return t.value.indexOf(o) !== -1;
return o === t.value;
}, S = (o) => t.events ? t.events.includes(o) : !1, Y = (o) => {
c(o) && r("input", o);
}, A = u(() => {
const o = [];
let v = [];
const $ = new Date(
o.value,
t.value + 1,
const T = new Date(
s.value,
a.value + 1,
0
).getDate();
let T = S();
const w = t.value ? o.value : o.value - 1, O = (t.value + 11) % 12, E = new Date(
o.value,
t.value,
let w = $();
const M = a.value ? s.value : s.value - 1, U = (a.value + 11) % 12, Z = new Date(
s.value,
a.value,
0
).getDate(), Z = 7, H = t.value === 11 ? o.value + 1 : o.value, W = (t.value + 1) % 12;
let R = 1;
for (; T--; ) {
const a = `${w}-${(O + 1).toString().padStart(2, "0")}-${(E - T).toString().padStart(2, "0")}`;
v.push(e.showAdjacentMonths ? a : "");
).getDate(), j = 7, W = a.value === 11 ? s.value + 1 : s.value, R = (a.value + 1) % 12;
let z = 1;
for (; w--; ) {
const n = `${M}-${(U + 1).toString().padStart(2, "0")}-${(Z - w).toString().padStart(2, "0")}`;
v.push(t.showAdjacentMonths ? n : "");
}
for (let a = 1; a <= $; a++) {
const g = `${o.value}-${(t.value + 1).toString().padStart(2, "0")}-${a.toString().padStart(2, "0")}`;
v.push(g), v.length % Z === 0 && (s.push(v), v = []);
for (let n = 1; n <= T; n++) {
const k = `${s.value}-${(a.value + 1).toString().padStart(2, "0")}-${n.toString().padStart(2, "0")}`;
v.push(k), v.length % j === 0 && (o.push(v), v = []);
}
for (; v.length < Z; ) {
const a = `${H}-${(W + 1).toString().padStart(2, "0")}-${(R++).toString().padStart(2, "0")}`;
v.push(e.showAdjacentMonths ? a : "");
for (; v.length < j; ) {
const n = `${W}-${(R + 1).toString().padStart(2, "0")}-${(z++).toString().padStart(2, "0")}`;
v.push(t.showAdjacentMonths ? n : "");
}
return v.length && s.push(v), s;
return v.length && o.push(v), o;
});
return (s, v) => (d(), y("table", {
key: n.tableDate,
return (o, v) => (p(), m("table", {
key: o.tableDate,
class: "date-picker-table date-picker-table--date"

@@ -195,16 +194,16 @@ }, [

b("tr", null, [
(d(!0), y(Y, null, V(r(p), ($, T) => (d(), y("th", { key: T }, x($.toUpperCase()), 1))), 128))
(p(!0), m(V, null, B(d.value, (T, w) => (p(), m("th", { key: w }, C(T.toUpperCase()), 1))), 128))
])
]),
b("tbody", null, [
(d(!0), y(Y, null, V(r(C), ($, T) => (d(), y("tr", { key: T }, [
(d(!0), y(Y, null, V($, (w, O) => (d(), y("td", { key: O }, [
w !== "" ? (d(), y("div", {
(p(!0), m(V, null, B(A.value, (T, w) => (p(), m("tr", { key: w }, [
(p(!0), m(V, null, B(T, (M, U) => (p(), m("td", { key: U }, [
M !== "" ? (p(), m("div", {
key: 0,
class: N(["date-picker-table__current button", f(w)]),
onClick: (E) => A(w)
class: F(["date-picker-table__current button", g(M)]),
onClick: (Z) => Y(M)
}, [
b("div", null, x(r(m)(w)), 1),
D(w) ? (d(), y("div", be, Se)) : B("", !0)
], 10, ke)) : B("", !0)
b("div", null, C(h(D)(M)), 1),
S(M) ? (p(), m("div", De, $e)) : N("", !0)
], 10, be)) : N("", !0)
]))), 128))

@@ -216,54 +215,54 @@ ]))), 128))

});
const L = (n, l) => {
const e = n.__vccOpts || n;
for (const [c, m] of l)
e[c] = m;
return e;
}, Te = /* @__PURE__ */ L($e, [["__scopeId", "data-v-dfb52b4e"]]), we = { class: "date-picker-header__value" }, xe = /* @__PURE__ */ F({
const O = (l, i) => {
const r = l.__vccOpts || l;
for (const [t, e] of i)
r[t] = e;
return r;
}, we = /* @__PURE__ */ O(Te, [["__scopeId", "data-v-dfb52b4e"]]), Me = { class: "date-picker-header__value" }, Ce = /* @__PURE__ */ L({
__name: "datePickerHeader",
props: {
disabled: { type: Boolean },
min: null,
max: null,
nextAriaLabel: null,
nextIcon: null,
prevAriaLabel: null,
prevIcon: null,
min: {},
max: {},
nextAriaLabel: {},
nextIcon: {},
prevAriaLabel: {},
prevIcon: {},
readonly: { type: Boolean },
currentLocale: null,
currentLocale: {},
color: { default: "#2e79bd" },
value: null
value: {}
},
emits: ["input", "toggle"],
setup(n, { emit: l }) {
const e = n, c = i(() => String(e.value).split("-")[1] ? M(
e.currentLocale || "en-us",
setup(l, { emit: i }) {
const r = i, t = l, e = u(() => String(t.value).split("-")[1] ? I(
t.currentLocale || "en-us",
{ month: "long", year: "numeric", timeZone: "UTC" },
{ length: 7 }
) : M(
e.currentLocale || "en-us",
) : I(
t.currentLocale || "en-us",
{ year: "numeric", timeZone: "UTC" },
{ length: 4 }
)), m = i(() => ({
"date-picker-header--disabled": e.disabled
})), k = (p) => {
const [t, o] = String(e.value).split("-").map(Number);
return o == null ? `${t + p}` : _e(String(e.value), p);
)), D = u(() => ({
"date-picker-header--disabled": t.disabled
})), _ = (d) => {
const [a, s] = String(t.value).split("-").map(Number);
return s == null ? `${a + d}` : fe(String(t.value), d);
};
return (p, t) => (d(), y("div", {
class: N(["date-picker-header", r(m)])
return (d, a) => (p(), m("div", {
class: F(["date-picker-header", D.value])
}, [
b("div", {
class: "button",
onClick: t[0] || (t[0] = (o) => l("input", k(-1)))
onClick: a[0] || (a[0] = (s) => r("input", _(-1)))
}, "<"),
b("div", we, [
b("div", Me, [
b("div", {
class: "button",
onClick: t[1] || (t[1] = (o) => l("toggle"))
}, x(r(ee)(r(c)(n.value.toString()))), 1)
onClick: a[1] || (a[1] = (s) => r("toggle"))
}, C(h(te)(e.value(d.value.toString()))), 1)
]),
b("div", {
class: "button",
onClick: t[2] || (t[2] = (o) => l("input", k(1)))
onClick: a[2] || (a[2] = (s) => r("input", _(1)))
}, ">")

@@ -273,3 +272,3 @@ ], 2));

});
const Me = /* @__PURE__ */ L(xe, [["__scopeId", "data-v-c3c61150"]]), Ce = { class: "date-picker-table date-picker-table--month" }, Ie = ["onClick"], Ae = /* @__PURE__ */ F({
const Ie = /* @__PURE__ */ O(Ce, [["__scopeId", "data-v-c3c61150"]]), Ae = { class: "date-picker-table date-picker-table--month" }, Pe = ["onClick"], Ye = /* @__PURE__ */ L({
__name: "datePickerMonthTable",

@@ -279,48 +278,47 @@ props: {

readonly: { type: Boolean },
tableDate: null,
value: null,
tableDate: {},
value: {},
range: { type: Boolean },
currentLocale: null,
currentLocale: {},
color: { default: "#2e79bd" }
},
emits: ["input"],
setup(n, { emit: l }) {
const e = n;
j((u) => ({
"160700e0": n.color
setup(l, { emit: i }) {
H((c) => ({
"160700e0": c.color
}));
const c = M(
e.currentLocale,
const r = i, t = l, e = I(
t.currentLocale,
{ month: "short", timeZone: "UTC" },
{ start: 5, length: 2 }
), m = i(() => Number(e.tableDate.split("-")[0])), k = i(() => (/* @__PURE__ */ new Date()).toISOString().substring(0, 7)), p = (u) => {
if (Array.isArray(e.value))
if (e.range && e.value.length === 2) {
const [f, S] = [...e.value].sort();
return f <= u && u <= S;
), D = u(() => Number(t.tableDate.split("-")[0])), _ = u(() => (/* @__PURE__ */ new Date()).toISOString().substring(0, 7)), d = (c) => {
if (Array.isArray(t.value))
if (t.range && t.value.length === 2) {
const [g, $] = [...t.value].sort();
return g <= c && c <= $;
} else
return e.value.indexOf(u) !== -1;
return u === e.value;
}, t = (u) => ({
selected: p(u),
"current-month": u === k.value && !p(u)
}), o = i(() => {
const u = [], f = Array(3).fill(null), S = 12 / f.length;
for (let _ = 0; _ < S; _++) {
const D = f.map((A, C) => {
const s = _ * f.length + C;
return `${m.value}-${(s + 1).toString().padStart(2, "0")}`;
return t.value.indexOf(c) !== -1;
return c === t.value;
}, a = (c) => ({
selected: d(c),
"current-month": c === _.value && !d(c)
}), s = u(() => {
const c = [], g = Array(3).fill(null), $ = 12 / g.length;
for (let f = 0; f < $; f++) {
const S = g.map((Y, A) => {
const o = f * g.length + A;
return `${D.value}-${(o + 1).toString().padStart(2, "0")}`;
});
u.push(D);
c.push(S);
}
return u;
return c;
});
return (u, f) => (d(), y("table", Ce, [
return (c, g) => (p(), m("table", Ae, [
b("tbody", null, [
(d(!0), y(Y, null, V(r(o), (S, _) => (d(), y("tr", { key: _ }, [
(d(!0), y(Y, null, V(S, (D, A) => (d(), y("td", { key: A }, [
(p(!0), m(V, null, B(s.value, ($, f) => (p(), m("tr", { key: f }, [
(p(!0), m(V, null, B($, (S, Y) => (p(), m("td", { key: Y }, [
b("div", {
class: N(["button", t(D)]),
onClick: (C) => l("input", D)
}, x(r(c)(D)), 11, Ie)
class: F(["button", a(S)]),
onClick: (A) => r("input", S)
}, C(h(e)(S)), 11, Pe)
]))), 128))

@@ -332,42 +330,41 @@ ]))), 128))

});
const Pe = /* @__PURE__ */ L(Ae, [["__scopeId", "data-v-932f7347"]]), Ye = { class: "date-picker-title picker__title" }, Ve = { key: 0 }, Be = /* @__PURE__ */ F({
const xe = /* @__PURE__ */ O(Ye, [["__scopeId", "data-v-932f7347"]]), Ve = { class: "date-picker-title picker__title" }, Be = { key: 0 }, Ne = /* @__PURE__ */ L({
__name: "datePickerTitle",
props: {
date: null,
date: {},
disabled: { type: Boolean },
readonly: { type: Boolean },
selectingYear: { type: Boolean },
value: null,
year: null,
yearIcon: null,
value: {},
year: {},
yearIcon: {},
color: { default: "#2e79bd" }
},
emits: ["select-year"],
setup(n, { emit: l }) {
const e = n;
j((k) => ({
"0205c786": n.color
setup(l, { emit: i }) {
H((_) => ({
"0205c786": _.color
}));
const c = i(() => ({
"picker__title__btn--active": e.selectingYear,
"picker__title__btn--readonly": e.readonly
})), m = i(() => ({
"picker__title__btn--active": !e.selectingYear,
"picker__title__btn--readonly": e.readonly
const r = i, t = l, e = u(() => ({
"picker__title__btn--active": t.selectingYear,
"picker__title__btn--readonly": t.readonly
})), D = u(() => ({
"picker__title__btn--active": !t.selectingYear,
"picker__title__btn--readonly": t.readonly
}));
return (k, p) => (d(), y("div", Ye, [
return (_, d) => (p(), m("div", Ve, [
b("div", {
class: N([r(c), "picker__title__btn date-picker-title__year"]),
onClick: p[0] || (p[0] = (t) => l("select-year", !0))
class: F([e.value, "picker__title__btn date-picker-title__year"]),
onClick: d[0] || (d[0] = (a) => r("select-year", !0))
}, [
ae(x(n.year) + " ", 1),
n.yearIcon ? (d(), y("button", Ve, x(n.yearIcon), 1)) : B("", !0)
le(C(_.year) + " ", 1),
_.yearIcon ? (p(), m("button", Be, C(_.yearIcon), 1)) : N("", !0)
], 2),
b("div", {
class: N([r(m), "picker__title__btn date-picker-title__date"]),
onClick: p[1] || (p[1] = (t) => l("select-year", !1))
class: F([D.value, "picker__title__btn date-picker-title__date"]),
onClick: d[1] || (d[1] = (a) => r("select-year", !1))
}, [
le(re, { name: "picker-transition" }, {
default: oe(() => [
(d(), y("div", { key: n.date }, x(r(ee)(n.date)), 1))
re(oe, { name: "picker-transition" }, {
default: se(() => [
(p(), m("div", { key: _.date }, C(h(te)(_.date)), 1))
]),

@@ -380,3 +377,3 @@ _: 1

});
const Ne = /* @__PURE__ */ L(Be, [["__scopeId", "data-v-34781c0c"]]), Fe = ["onClick"], Le = /* @__PURE__ */ F({
const Fe = /* @__PURE__ */ O(Ne, [["__scopeId", "data-v-34781c0c"]]), Le = ["onClick"], Oe = /* @__PURE__ */ L({
__name: "datePickerYears",

@@ -386,50 +383,49 @@ props: {

readonly: { type: Boolean },
value: null,
value: {},
range: { type: Boolean },
currentLocale: null,
currentLocale: {},
color: { default: "#2e79bd" }
},
emits: ["input"],
setup(n, { emit: l }) {
const e = n;
j((p) => ({
"08cfc6b6": n.color
setup(l, { emit: i }) {
H((d) => ({
"08cfc6b6": d.color
}));
const c = se(null), m = M(
const r = i, t = ie(null), e = l, D = I(
e.currentLocale,
{ year: "numeric", timeZone: "UTC" },
{ length: 4 }
), k = i(() => {
const p = [], t = e.value ? parseInt(e.value.toString(), 10) : (/* @__PURE__ */ new Date()).getFullYear(), o = t + 100, u = Math.min(o, t - 100);
for (let f = o; f >= u; f--)
p.push(f);
return p;
), _ = u(() => {
const d = [], a = e.value ? parseInt(e.value.toString(), 10) : (/* @__PURE__ */ new Date()).getFullYear(), s = a + 100, c = Math.min(s, a - 100);
for (let g = s; g >= c; g--)
d.push(g);
return d;
});
return Q(() => {
return X(() => {
setTimeout(() => {
c.value.scrollTop = c.value.scrollHeight / 2 - c.value.offsetHeight / 2;
t.value.scrollTop = t.value.scrollHeight / 2 - t.value.offsetHeight / 2;
}, 200);
}), (p, t) => (d(), y("ul", {
}), (d, a) => (p(), m("ul", {
class: "date-picker-years",
ref_key: "yearList",
ref: c
ref: t
}, [
(d(!0), y(Y, null, V(r(k), (o) => (d(), y("li", {
class: N({
active: parseInt(n.value.toString(), 10) === o
(p(!0), m(V, null, B(_.value, (s) => (p(), m("li", {
class: F({
active: parseInt(d.value.toString(), 10) === s
}),
key: o,
onClick: (u) => l("input", o)
}, x(r(m)(o.toString())), 11, Fe))), 128))
key: s,
onClick: (c) => r("input", s)
}, C(h(D)(s.toString())), 11, Le))), 128))
], 512));
}
});
const Oe = /* @__PURE__ */ L(Le, [["__scopeId", "data-v-dfc19485"]]), Ue = /* @__PURE__ */ F({
const Ue = /* @__PURE__ */ O(Oe, [["__scopeId", "data-v-dfc19485"]]), Ee = /* @__PURE__ */ L({
__name: "datePicker",
props: {
allowedDates: null,
allowedDates: {},
disabled: { type: Boolean },
events: null,
eventColor: null,
firstDayOfWeek: null,
events: {},
eventColor: {},
firstDayOfWeek: {},
max: { default: (/* @__PURE__ */ new Date()).toISOString().substring(0, 10) },

@@ -441,23 +437,23 @@ min: { default: "1970-01-01" },

showCurrent: { type: [Boolean, String] },
selectedItemsTextFormatter: null,
titleTextFormatter: null,
selectedItemsTextFormatter: {},
titleTextFormatter: {},
showAdjacentMonths: { type: Boolean },
modelValue: null,
locale: null,
modelValue: {},
locale: {},
fullWidth: { type: Boolean },
noTitle: { type: Boolean },
width: null,
width: {},
color: { default: "#2e79bd" }
},
emits: ["update:modelValue", "change", "select:year", "select:month", "select:day"],
setup(n, { emit: l }) {
const e = n, c = ie(), m = i(() => ({
width: e.fullWidth ? void 0 : fe(e.width || 290)
})), k = i(() => {
if (e.titleTextFormatter && !u.value)
setup(l, { emit: i }) {
const r = ce(), t = i, e = l, D = u(() => ({
width: e.fullWidth ? void 0 : ge(e.width || 290)
})), _ = u(() => {
if (e.titleTextFormatter && !c.value)
return e.titleTextFormatter(e.modelValue);
const a = v.value.titleDate;
return a(u.value ? o.value : e.modelValue);
}), p = /* @__PURE__ */ new Date(), t = ce({
internalActivePicker: h.date,
const n = v.value.titleDate;
return n(c.value ? s.value : e.modelValue);
}), d = /* @__PURE__ */ new Date(), a = ue({
internalActivePicker: y.date,
inputDay: null,

@@ -467,23 +463,23 @@ inputMonth: null,

isReversing: !1,
tableDate: p.toISOString().substring(0, 10)
}), o = i(() => J(e.modelValue)), u = i(() => e.multiple || e.range), f = i(
() => u.value ? o.value[o.value.length - 1] : e.modelValue
), S = i(() => e.modelValue ? u.value ? o.value.map((a) => a.substring(0, 7)) : e.modelValue.substring(0, 7) : e.modelValue), _ = i(
() => `${t.inputYear}-${(t.inputMonth + 1).toString().padStart(2, "0")}-${t.inputDay.toString().padStart(2, "0")}`
), D = i(() => Number(t.tableDate.split("-")[1]) - 1), A = i(
() => `${s.value}-${(D.value + 1).toString().padStart(2, "0")}`
), C = i(() => Number(t.tableDate.split("-")[0])), s = i(
() => C.value.toString().padStart(4, "0")
tableDate: d.toISOString().substring(0, 10)
}), s = u(() => Q(e.modelValue)), c = u(() => e.multiple || e.range), g = u(
() => c.value ? s.value[s.value.length - 1] : e.modelValue
), $ = u(() => e.modelValue ? c.value ? s.value.map((n) => n.substring(0, 7)) : e.modelValue.substring(0, 7) : e.modelValue), f = u(
() => `${a.inputYear}-${(a.inputMonth + 1).toString().padStart(2, "0")}-${a.inputDay.toString().padStart(2, "0")}`
), S = u(() => Number(a.tableDate.split("-")[1]) - 1), Y = u(
() => `${o.value}-${(S.value + 1).toString().padStart(2, "0")}`
), A = u(() => Number(a.tableDate.split("-")[0])), o = u(
() => A.value.toString().padStart(4, "0")
);
i(
() => e.min ? P(e.min, "month") : null
), i(
() => e.max ? P(e.max, "month") : null
), i(
() => e.min ? P(e.min, "year") : null
), i(
() => e.max ? P(e.max, "year") : null
u(
() => e.min ? x(e.min, "month") : null
), u(
() => e.max ? x(e.max, "month") : null
), u(
() => e.min ? x(e.min, "year") : null
), u(
() => e.max ? x(e.max, "year") : null
);
const v = i(() => ({
year: M(
const v = u(() => ({
year: I(
e.locale,

@@ -493,64 +489,64 @@ { year: "numeric", timeZone: "UTC" },

),
titleDate: u.value ? $.value : T.value
})), $ = i(() => (a) => a.length ? a.length === 1 ? T.value(a[0]) : e.selectedItemsTextFormatter ? e.selectedItemsTextFormatter(a.length) : `Selected ${a.length} dates` : "-"), T = i(
() => M(e.locale, me.date, {
titleDate: c.value ? T.value : w.value
})), T = u(() => (n) => n.length ? n.length === 1 ? w.value(n[0]) : e.selectedItemsTextFormatter ? e.selectedItemsTextFormatter(n.length) : `Selected ${n.length} dates` : "-"), w = u(
() => I(e.locale, ye.date, {
start: 0,
length: X.date
length: ee.date
})
), w = (a) => {
), M = (n) => {
if (e.range) {
if (o.value.length !== 1)
l("update:modelValue", [a]);
if (s.value.length !== 1)
t("update:modelValue", [n]);
else {
const I = [o.value[0], a];
l("update:modelValue", I), l("change", I);
const P = [s.value[0], n];
t("update:modelValue", P), t("change", P);
}
return;
}
const g = e.multiple ? o.value.indexOf(a) === -1 ? o.value.concat([a]) : o.value.filter((I) => I !== a) : a;
l("update:modelValue", g), e.multiple || l("change", a);
}, O = () => {
const k = e.multiple ? s.value.indexOf(n) === -1 ? s.value.concat([n]) : s.value.filter((P) => P !== n) : n;
t("update:modelValue", k), e.multiple || t("change", n);
}, U = () => {
if (e.modelValue == null)
return;
const a = e.modelValue.constructor.name, g = u.value ? "Array" : "String";
a !== g && console.warn(
`Value must be ${u.value ? "an" : "a"} ${g}, got ${a}`
const n = e.modelValue.constructor.name, k = c.value ? "Array" : "String";
n !== k && console.warn(
`Value must be ${c.value ? "an" : "a"} ${k}, got ${n}`
);
}, E = (a) => {
t.inputYear = a, t.tableDate = `${a}-${((D.value || 0) + 1).toString().padStart(2, "0")}`, t.internalActivePicker = h.month, !e.readonly && !u.value && G(_.value, e.min, e.max, e.allowedDates) && l("update:modelValue", _.value);
}, Z = (a) => {
t.inputYear = parseInt(a.split("-")[0], 10), t.inputMonth = parseInt(a.split("-")[1], 10) - 1, t.inputDay && (t.inputDay = Math.min(
t.inputDay,
he(t.inputYear, t.inputMonth + 1)
)), t.tableDate = a, t.internalActivePicker = h.date, !e.readonly && !u.value && G(_.value, e.min, e.max, e.allowedDates) && l("update:modelValue", _.value);
}, H = (a) => {
t.inputYear = parseInt(a.split("-")[0], 10), t.inputMonth = parseInt(a.split("-")[1], 10) - 1, t.inputDay = parseInt(a.split("-")[2], 10), w(_.value);
}, W = () => {
if (f.value) {
const a = f.value.split("-");
t.inputYear = parseInt(a[0], 10), t.inputMonth = parseInt(a[1], 10) - 1, t.inputDay = parseInt(a[2], 10);
}, Z = (n) => {
a.inputYear = n, a.tableDate = `${n}-${((S.value || 0) + 1).toString().padStart(2, "0")}`, a.internalActivePicker = y.month, !e.readonly && !c.value && K(f.value, e.min, e.max, e.allowedDates) && t("update:modelValue", f.value);
}, j = (n) => {
a.inputYear = parseInt(n.split("-")[0], 10), a.inputMonth = parseInt(n.split("-")[1], 10) - 1, a.inputDay && (a.inputDay = Math.min(
a.inputDay,
he(a.inputYear, a.inputMonth + 1)
)), a.tableDate = n, a.internalActivePicker = y.date, !e.readonly && !c.value && K(f.value, e.min, e.max, e.allowedDates) && t("update:modelValue", f.value);
}, W = (n) => {
a.inputYear = parseInt(n.split("-")[0], 10), a.inputMonth = parseInt(n.split("-")[1], 10) - 1, a.inputDay = parseInt(n.split("-")[2], 10), M(f.value);
}, R = () => {
if (g.value) {
const n = g.value.split("-");
a.inputYear = parseInt(n[0], 10), a.inputMonth = parseInt(n[1], 10) - 1, a.inputDay = parseInt(n[2], 10);
} else
t.inputYear = t.inputYear || p.getFullYear(), t.inputMonth = t.inputMonth == null ? t.inputMonth : p.getMonth(), t.inputDay = t.inputDay || p.getDate();
}, R = (a) => {
t.internalActivePicker = a ? h.year : h.date;
a.inputYear = a.inputYear || d.getFullYear(), a.inputMonth = a.inputMonth == null ? a.inputMonth : d.getMonth(), a.inputDay = a.inputDay || d.getDate();
}, z = (n) => {
a.internalActivePicker = n ? y.year : y.date;
};
return z(
return G(
() => e.multiple,
(a, g) => {
g === !0 && a === !1 && l("update:modelValue", _.value);
(n, k) => {
k === !0 && n === !1 && t("update:modelValue", f.value);
}
), z(
() => t.internalActivePicker,
(a) => {
switch (a) {
case h.year: {
l("select:year");
), G(
() => a.internalActivePicker,
(n) => {
switch (n) {
case y.year: {
t("select:year");
break;
}
case h.month: {
l("select:month");
case y.month: {
t("select:month");
break;
}
case h.date: {
l("select:day");
case y.date: {
t("select:day");
break;

@@ -560,6 +556,6 @@ }

}
), z(
), G(
() => e.modelValue,
(a) => {
O(), W(), (!u.value && e.modelValue || u.value && o.value.length && (!a || !a.length)) && (t.tableDate = P(_.value, "month"));
(n) => {
U(), R(), (!c.value && e.modelValue || c.value && s.value.length && (!n || !n.length)) && (a.tableDate = x(f.value, "month"));
},

@@ -569,35 +565,35 @@ {

}
), Q(() => {
const a = J(e.modelValue), g = a[a.length - 1] || (typeof e.showCurrent == "string" ? e.showCurrent : `${p.getFullYear()}-${p.getMonth() + 1}`);
t.tableDate = P(g, "month");
}), (a, g) => (d(), y("div", {
style: ue(r(m)),
), X(() => {
const n = Q(e.modelValue), k = n[n.length - 1] || (typeof e.showCurrent == "string" ? e.showCurrent : `${d.getFullYear()}-${d.getMonth() + 1}`);
a.tableDate = x(k, "month");
}), (n, k) => (p(), m("div", {
style: de(D.value),
class: "date-picker"
}, [
!n.noTitle && !r(c).title ? (d(), U(Ne, {
!n.noTitle && !h(r).title ? (p(), E(Fe, {
key: 0,
color: e.color,
date: r(k),
year: r(s),
"selecting-year": t.internalActivePicker === r(h).year,
onSelectYear: R
}, null, 8, ["color", "date", "year", "selecting-year"])) : B("", !0),
r(c).title ? de(a.$slots, "title", {
date: _.value,
year: o.value,
"selecting-year": a.internalActivePicker === h(y).year,
onSelectYear: z
}, null, 8, ["color", "date", "year", "selecting-year"])) : N("", !0),
h(r).title ? pe(n.$slots, "title", {
key: 1,
date: r(_),
selectYears: () => t.internalActivePicker = r(h).year,
selectMonths: () => t.internalActivePicker = r(h).month,
selectDays: () => t.internalActivePicker = r(h).date
}, void 0, !0) : B("", !0),
[r(h).date, r(h).month].includes(
t.internalActivePicker
) ? (d(), U(Me, {
date: f.value,
selectYears: () => a.internalActivePicker = h(y).year,
selectMonths: () => a.internalActivePicker = h(y).month,
selectDays: () => a.internalActivePicker = h(y).date
}, void 0, !0) : N("", !0),
[h(y).date, h(y).month].includes(
a.internalActivePicker
) ? (p(), E(Ie, {
key: 2,
color: e.color,
"current-locale": e.locale,
value: t.internalActivePicker === r(h).date ? `${r(s)}-${(r(D) + 1).toString().padStart(2, "0")}` : `${r(s)}`,
onInput: g[0] || (g[0] = (I) => t.tableDate = I),
onToggle: g[1] || (g[1] = (I) => t.internalActivePicker = t.internalActivePicker === r(h).date ? r(h).month : r(h).year)
}, null, 8, ["color", "current-locale", "value"])) : B("", !0),
t.internalActivePicker === r(h).date ? (d(), U(Te, {
value: a.internalActivePicker === h(y).date ? `${o.value}-${(S.value + 1).toString().padStart(2, "0")}` : `${o.value}`,
onInput: k[0] || (k[0] = (P) => a.tableDate = P),
onToggle: k[1] || (k[1] = (P) => a.internalActivePicker = a.internalActivePicker === h(y).date ? h(y).month : h(y).year)
}, null, 8, ["color", "current-locale", "value"])) : N("", !0),
a.internalActivePicker === h(y).date ? (p(), E(we, {
key: 3,

@@ -614,15 +610,15 @@ value: n.modelValue,

color: e.color,
"table-date": r(A),
"table-date": Y.value,
events: e.events,
onInput: H
}, null, 8, ["value", "show-adjacent-months", "allowed-dates", "readonly", "current-locale", "first-day-of-week", "disabled", "min", "max", "color", "table-date", "events"])) : t.internalActivePicker === r(h).month ? (d(), U(Pe, {
onInput: W
}, null, 8, ["value", "show-adjacent-months", "allowed-dates", "readonly", "current-locale", "first-day-of-week", "disabled", "min", "max", "color", "table-date", "events"])) : a.internalActivePicker === h(y).month ? (p(), E(xe, {
key: 4,
value: r(S),
value: $.value,
color: e.color,
"table-date": r(s),
onInput: Z
}, null, 8, ["value", "color", "table-date"])) : (d(), U(Oe, {
"table-date": o.value,
onInput: j
}, null, 8, ["value", "color", "table-date"])) : (p(), E(Ue, {
key: 5,
onInput: E,
value: r(C),
onInput: Z,
value: A.value,
color: e.color

@@ -633,5 +629,5 @@ }, null, 8, ["value", "color"]))

});
const Ze = /* @__PURE__ */ L(Ue, [["__scopeId", "data-v-8799ba00"]]);
const je = /* @__PURE__ */ O(Ee, [["__scopeId", "data-v-8799ba00"]]);
export {
Ze as DatePicker
je as DatePicker
};
{
"name": "vue-3-material-date-picker",
"private": false,
"version": "1.1.0",
"version": "1.1.1",
"type": "module",

@@ -26,2 +26,3 @@ "files": [

".": {
"types": "./dist/index.d.ts",
"import": "./dist/vue-3-material-date-picker.js",

@@ -35,3 +36,2 @@ "require": "./dist/vue-3-material-date-picker.umd.cjs"

},
"types": "./dist/index.d.ts",
"scripts": {

@@ -38,0 +38,0 @@ "dev": "vite",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc