vue-weather-ui
Version:
A beautiful Vue 3 weather UI components library with mini mode support and QWeather integration
798 lines (797 loc) • 30.9 kB
JavaScript
import { computed as D, defineComponent as N, createElementBlock as n, openBlock as o, normalizeClass as f, createCommentVNode as w, createElementVNode as e, toDisplayString as t, unref as d, Fragment as P, renderList as U, normalizeStyle as J, ref as H, onMounted as ae, onUnmounted as ie, watch as ne, withDirectives as oe, vModelSelect as le, createTextVNode as re, nextTick as ce } from "vue";
const de = {
feelsLike: { zh: "体感温度", en: "Feels Like" },
humidity: { zh: "湿度", en: "Humidity" },
wind: { zh: "风向风力", en: "Wind" },
pressure: { zh: "气压", en: "Pressure" },
visibility: { zh: "能见度", en: "Visibility" },
precipitation: { zh: "降水量", en: "Precipitation" },
hourlyForecast: { zh: "24小时预报", en: "24 Hour Forecast" },
dailyForecast: { zh: "7天预报", en: "7 Day Forecast" },
historicalTimeline: { zh: "历史天气时间轴", en: "Historical Weather Timeline" },
play: { zh: "播放", en: "Play" },
stop: { zh: "停止", en: "Stop" },
reset: { zh: "重置", en: "Reset" },
selected: { zh: "选中日期", en: "Selected" },
total: { zh: "总天数", en: "Total" },
days: { zh: "天", en: "days" },
maxTemp: { zh: "最高温度", en: "Max Temp" },
minTemp: { zh: "最低温度", en: "Min Temp" },
weather: { zh: "天气", en: "Weather" },
precip: { zh: "降水", en: "Precip" },
uvIndex: { zh: "紫外线", en: "UV" },
now: { zh: "现在", en: "Now" },
today: { zh: "今天", en: "Today" },
tomorrow: { zh: "明天", en: "Tomorrow" },
updateTime: { zh: "更新时间", en: "Updated" },
updateShort: { zh: "更新", en: "Upd" },
allMonths: { zh: "全部月份", en: "All Months" }
};
function R(h) {
return { t: (a) => {
const z = de[a];
return z ? z[h.locale] : a;
} };
}
function A() {
return { getWeatherIcon: (a) => ({
100: "qi-100",
101: "qi-101",
102: "qi-102",
103: "qi-103",
104: "qi-104",
150: "qi-150",
151: "qi-151",
152: "qi-152",
153: "qi-153",
300: "qi-300",
301: "qi-301",
302: "qi-302",
303: "qi-303",
304: "qi-304",
305: "qi-305",
306: "qi-306",
307: "qi-307",
308: "qi-308",
309: "qi-309",
310: "qi-310",
311: "qi-311",
312: "qi-312",
313: "qi-313",
314: "qi-314",
315: "qi-315",
316: "qi-316",
317: "qi-317",
318: "qi-318",
350: "qi-350",
351: "qi-351",
399: "qi-399",
400: "qi-400",
401: "qi-401",
402: "qi-402",
403: "qi-403",
404: "qi-404",
405: "qi-405",
406: "qi-406",
407: "qi-407",
408: "qi-408",
409: "qi-409",
410: "qi-410",
456: "qi-456",
457: "qi-457",
499: "qi-499",
500: "qi-500",
501: "qi-501",
502: "qi-502",
503: "qi-503",
504: "qi-504",
507: "qi-507",
508: "qi-508",
509: "qi-509",
510: "qi-510",
511: "qi-511",
512: "qi-512",
513: "qi-513",
514: "qi-514",
515: "qi-515",
900: "qi-900",
901: "qi-901",
999: "qi-999"
})[a] || "qi-100", getWeatherDescription: (a, z) => {
var T;
return ((T = {
100: { zh: "晴", en: "Sunny" },
101: { zh: "多云", en: "Cloudy" },
102: { zh: "少云", en: "Few Clouds" },
103: { zh: "晴间多云", en: "Partly Cloudy" },
104: { zh: "阴", en: "Overcast" },
150: { zh: "晴", en: "Clear" },
151: { zh: "晴", en: "Clear" },
152: { zh: "晴", en: "Clear" },
153: { zh: "晴", en: "Clear" },
300: { zh: "阵雨", en: "Shower Rain" },
301: { zh: "强阵雨", en: "Heavy Shower Rain" },
302: { zh: "雷阵雨", en: "Thundershower" },
303: { zh: "强雷阵雨", en: "Heavy Thundershower" },
304: { zh: "雷阵雨伴有冰雹", en: "Thundershower with Hail" },
305: { zh: "小雨", en: "Light Rain" },
306: { zh: "中雨", en: "Moderate Rain" },
307: { zh: "大雨", en: "Heavy Rain" },
308: { zh: "极端降雨", en: "Extreme Rain" },
309: { zh: "毛毛雨", en: "Drizzle" },
310: { zh: "暴雨", en: "Storm" },
311: { zh: "大暴雨", en: "Heavy Storm" },
312: { zh: "特大暴雨", en: "Severe Storm" },
313: { zh: "冻雨", en: "Freezing Rain" },
399: { zh: "雨", en: "Rain" },
500: { zh: "雾", en: "Fog" },
501: { zh: "轻雾", en: "Light Fog" },
502: { zh: "霾", en: "Haze" },
503: { zh: "沙尘暴", en: "Sandstorm" },
504: { zh: "浮尘", en: "Dust" },
507: { zh: "沙尘", en: "Sand" },
508: { zh: "扬沙", en: "Blowing Sand" },
900: { zh: "热", en: "Hot" },
901: { zh: "冷", en: "Cold" },
999: { zh: "未知", en: "Unknown" }
}[a]) == null ? void 0 : T[z]) || "Unknown";
} };
}
function E(h) {
return {
formatDateTime: (u, c) => new Date(u).toLocaleDateString(h === "zh" ? "zh-CN" : "en-US", {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
...c
}),
formatDate: (u) => new Date(u).toLocaleDateString(h === "zh" ? "zh-CN" : "en-US", {
month: "short",
day: "numeric"
}),
formatTime: (u) => new Date(u).toLocaleTimeString(h === "zh" ? "zh-CN" : "en-US", {
hour: "2-digit",
minute: "2-digit",
hour12: !1
}),
formatShortTime: (u) => new Date(u).toLocaleTimeString(h === "zh" ? "zh-CN" : "en-US", {
hour: "2-digit",
minute: "2-digit",
hour12: !1
}),
isToday: (u) => {
const c = /* @__PURE__ */ new Date(), y = new Date(u);
return c.toDateString() === y.toDateString();
},
isTomorrow: (u) => {
const c = /* @__PURE__ */ new Date();
c.setDate(c.getDate() + 1);
const y = new Date(u);
return c.toDateString() === y.toDateString();
},
isCurrentHour: (u) => {
const c = /* @__PURE__ */ new Date(), y = new Date(u);
return Math.abs(c.getTime() - y.getTime()) < 18e5;
},
isCurrentDay: (u) => {
const c = (/* @__PURE__ */ new Date()).toDateString(), y = new Date(u).toDateString();
return c === y;
}
};
}
function K(h) {
const r = D(() => h.mini ? "mini" : "normal"), a = D(() => h.theme === "light" ? {
background: "#ffffff",
text: "#2d3748",
border: "#e2e8f0",
hover: "#edf2f7",
selected: "#667eea",
secondaryText: "#718096",
cardBackground: "#f7fafc"
} : {
background: "#2d3748",
text: "#ffffff",
border: "#4a5568",
hover: "#1a202c",
selected: "#667eea",
secondaryText: "#a0aec0",
cardBackground: "#4a5568"
}), z = D(() => ({
background: a.value.background,
color: a.value.text,
padding: h.mini ? "12px" : "24px",
borderRadius: h.mini ? "12px" : "20px"
})), p = D(() => h.mini ? "qweather-icon-sm" : "qweather-icon-lg");
return {
sizeConfig: r,
themeColors: a,
componentStyles: z,
iconSize: p
};
}
const he = {
key: 0,
class: "weather-card-header weather-header"
}, ue = { class: "location-info" }, me = { class: "location-name" }, pe = {
key: 0,
class: "location-details"
}, ve = { class: "weather-main" }, _e = { class: "weather-icon" }, we = { class: "weather-temp temp-container" }, ye = {
key: 0,
class: "weather-desc weather-label"
}, fe = {
key: 1,
class: "weather-card-body weather-content"
}, $e = {
key: 0,
class: "weather-details-grid details-grid"
}, ge = { class: "detail-item" }, ze = { class: "detail-label" }, De = { class: "detail-value" }, qe = { class: "detail-item" }, Te = { class: "detail-label" }, Se = { class: "detail-value" }, ke = { class: "detail-item" }, be = { class: "detail-label" }, Ce = { class: "detail-value" }, Me = { class: "detail-item" }, Ie = { class: "detail-label" }, We = { class: "detail-value" }, Be = { class: "detail-item" }, He = { class: "detail-label" }, Le = { class: "detail-value" }, Fe = { class: "detail-item" }, Pe = { class: "detail-label" }, Ue = { class: "detail-value" }, Ne = {
key: 1,
class: "weather-card-body-mini"
}, Re = { class: "mini-info-row" }, Ae = { class: "mini-info-item" }, Ee = { class: "mini-label weather-label" }, Ve = { class: "mini-value weather-value" }, Oe = { class: "mini-info-item" }, je = { class: "mini-label weather-label" }, Ge = { class: "mini-value weather-value" }, Je = { class: "mini-info-item" }, Ke = { class: "mini-label weather-label" }, Qe = { class: "mini-value weather-value" }, Xe = { class: "mini-update-time" }, Ye = { class: "mini-update-text" }, Ze = {
key: 2,
class: "weather-card-footer"
}, xe = { class: "update-time" }, et = /* @__PURE__ */ N({
__name: "WeatherCard",
props: {
showDetails: { type: Boolean, default: !0 },
data: {},
theme: { default: "light" },
locale: { default: "zh" },
mini: { type: Boolean, default: !1 },
showTitle: { type: Boolean, default: !0 }
},
setup(h) {
const r = h, { t: a } = R(r), { getWeatherIcon: z, getWeatherDescription: p } = A(), { formatDateTime: T, formatShortTime: S } = E(r.locale), { iconSize: k } = K(r), b = D(() => z(r.data.now.icon)), u = D(() => p(r.data.now.icon, r.locale)), c = D(() => r.data.location.name), y = D(() => {
const { country: l, adm1: i, adm2: $ } = r.data.location;
return r.locale === "zh" ? `${$}, ${i}` : `${$}, ${i}, ${l}`;
}), v = D(() => `${a("updateTime")}: ${T(r.data.now.fxTime)}`), q = D(() => `${a("updateShort")}: ${S(r.data.now.fxTime)}`);
return (l, i) => (o(), n("div", {
class: f(["weather-card weather-component", [l.theme, { mini: l.mini }]])
}, [
l.showTitle ? (o(), n("div", he, [
e("div", ue, [
e("h3", me, t(c.value), 1),
l.mini ? w("", !0) : (o(), n("p", pe, t(y.value), 1))
]),
e("div", ve, [
e("div", _e, [
e("i", {
class: f([b.value, "qweather-icon", d(k)])
}, null, 2)
]),
e("div", we, [
e("span", {
class: f(["temp-value", { mini: l.mini }])
}, t(l.data.now.temp), 3),
e("span", {
class: f(["temp-unit", { mini: l.mini }])
}, "°C", 2)
]),
l.mini ? w("", !0) : (o(), n("div", ye, t(u.value), 1))
])
])) : w("", !0),
l.showDetails ? (o(), n("div", fe, [
l.mini ? w("", !0) : (o(), n("div", $e, [
e("div", ge, [
e("span", ze, t(d(a)("feelsLike")), 1),
e("span", De, t(l.data.now.temp) + "°C", 1)
]),
e("div", qe, [
e("span", Te, t(d(a)("humidity")), 1),
e("span", Se, t(l.data.now.humidity) + "%", 1)
]),
e("div", ke, [
e("span", be, t(d(a)("wind")), 1),
e("span", Ce, t(l.data.now.windDir) + " " + t(l.data.now.windScale) + "级", 1)
]),
e("div", Me, [
e("span", Ie, t(d(a)("pressure")), 1),
e("span", We, t(l.data.now.pressure) + " hPa", 1)
]),
e("div", Be, [
e("span", He, t(d(a)("visibility")), 1),
e("span", Le, t(l.data.now.vis) + " km", 1)
]),
e("div", Fe, [
e("span", Pe, t(d(a)("precipitation")), 1),
e("span", Ue, t(l.data.now.precip) + " mm", 1)
])
])),
l.mini ? (o(), n("div", Ne, [
e("div", Re, [
e("span", Ae, [
e("span", Ee, t(d(a)("humidity")), 1),
e("span", Ve, t(l.data.now.humidity) + "%", 1)
]),
e("span", Oe, [
e("span", je, t(d(a)("wind")), 1),
e("span", Ge, t(l.data.now.windDir) + " " + t(l.data.now.windScale) + "级", 1)
]),
e("span", Je, [
e("span", Ke, t(d(a)("precipitation")), 1),
e("span", Qe, t(l.data.now.precip) + "mm", 1)
])
]),
e("div", Xe, [
e("span", Ye, t(q.value), 1)
])
])) : w("", !0)
])) : w("", !0),
l.mini ? w("", !0) : (o(), n("div", Ze, [
e("span", xe, t(v.value), 1)
]))
], 2));
}
}), V = (h, r) => {
const a = h.__vccOpts || h;
for (const [z, p] of r)
a[z] = p;
return a;
}, tt = /* @__PURE__ */ V(et, [["__scopeId", "data-v-f08bdba0"]]), st = {
key: 0,
class: "hourly-header weather-header"
}, at = { class: "hourly-container" }, it = { class: "hourly-scroll weather-scroll" }, nt = { class: "hourly-time weather-label" }, ot = { class: "hourly-icon weather-icon" }, lt = { class: "hourly-temp temp-container" }, rt = {
key: 0,
class: "hourly-desc weather-desc"
}, ct = {
key: 1,
class: "hourly-details"
}, dt = { class: "detail-row" }, ht = { class: "weather-value" }, ut = { class: "detail-row" }, mt = { class: "weather-value" }, pt = /* @__PURE__ */ N({
__name: "HourlyForecast",
props: {
hours: { default: 24 },
data: {},
theme: { default: "light" },
locale: { default: "zh" },
mini: { type: Boolean, default: !1 },
showTitle: { type: Boolean, default: !0 }
},
setup(h) {
const r = h, { t: a } = R(r), { getWeatherIcon: z, getWeatherDescription: p } = A(), { formatTime: T, isCurrentHour: S } = E(r.locale), { iconSize: k } = K(r), b = D(() => r.data.hourly.slice(0, r.hours)), u = (v) => S(v) ? a("now") : T(v), c = (v) => z(v), y = (v) => p(v, r.locale);
return (v, q) => (o(), n("div", {
class: f(["hourly-forecast weather-component", [v.theme, { mini: v.mini }]])
}, [
v.showTitle && !v.mini ? (o(), n("div", st, [
e("h3", null, t(d(a)("hourlyForecast")), 1)
])) : w("", !0),
e("div", at, [
e("div", it, [
(o(!0), n(P, null, U(b.value, (l, i) => (o(), n("div", {
key: i,
class: f(["hourly-item weather-item", { current: d(S)(l.fxTime), mini: v.mini }])
}, [
e("div", nt, t(u(l.fxTime)), 1),
e("div", ot, [
e("i", {
class: f([c(l.icon), "qweather-icon", d(k)])
}, null, 2)
]),
e("div", lt, [
e("span", {
class: f(["temp-value temp-max", { mini: v.mini }])
}, t(l.temp), 3),
e("span", {
class: f(["temp-unit", { mini: v.mini }])
}, "°", 2)
]),
v.mini ? w("", !0) : (o(), n("div", rt, t(y(l.icon)), 1)),
v.mini ? w("", !0) : (o(), n("div", ct, [
e("div", dt, [
q[0] || (q[0] = e("span", { class: "detail-icon" }, "💧", -1)),
e("span", ht, t(l.humidity) + "%", 1)
]),
e("div", ut, [
q[1] || (q[1] = e("span", { class: "detail-icon" }, "💨", -1)),
e("span", mt, t(l.windScale) + "级", 1)
])
]))
], 2))), 128))
])
])
], 2));
}
}), vt = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-ce5bab7c"]]), _t = {
key: 0,
class: "daily-header weather-header"
}, wt = { class: "daily-container weather-content" }, yt = { class: "daily-date" }, ft = { class: "date-day weather-label" }, $t = {
key: 0,
class: "date-week weather-desc"
}, gt = { class: "daily-weather" }, zt = { class: "weather-icons" }, Dt = { class: "day-weather" }, qt = {
key: 0,
class: "weather-desc"
}, Tt = {
key: 0,
class: "night-weather"
}, St = { class: "weather-desc" }, kt = { class: "daily-temp" }, bt = { class: "temp-range temp-container" }, Ct = {
key: 0,
class: "temp-bar"
}, Mt = {
key: 0,
class: "daily-details"
}, It = { class: "detail-row" }, Wt = { class: "weather-value" }, Bt = { class: "detail-row" }, Ht = { class: "weather-value" }, Lt = { class: "detail-row" }, Ft = { class: "weather-value" }, Pt = { class: "detail-row" }, Ut = { class: "weather-value" }, Nt = {
key: 1,
class: "daily-extra details-grid"
}, Rt = { class: "extra-item detail-item" }, At = { class: "extra-label detail-label" }, Et = { class: "extra-value detail-value" }, Vt = { class: "extra-item detail-item" }, Ot = { class: "extra-label detail-label" }, jt = { class: "extra-value detail-value" }, Gt = /* @__PURE__ */ N({
__name: "DailyForecast",
props: {
days: { default: 7 },
data: {},
theme: { default: "light" },
locale: { default: "zh" },
mini: { type: Boolean, default: !1 },
showTitle: { type: Boolean, default: !0 }
},
setup(h) {
const r = h, { t: a } = R(r), { getWeatherIcon: z, getWeatherDescription: p } = A(), { formatDate: T, isToday: S, isTomorrow: k } = E(r.locale), { iconSize: b } = K(r), u = D(() => r.data.daily.slice(0, r.days)), c = (i) => S(i) ? a("today") : k(i) ? a("tomorrow") : T(i), y = (i) => new Date(i).toLocaleDateString(r.locale === "zh" ? "zh-CN" : "en-US", {
weekday: "short"
}), v = (i) => z(i), q = (i) => p(i, r.locale), l = (i) => {
const $ = Math.min(...r.data.daily.map((W) => parseInt(W.tempMin))), C = Math.max(...r.data.daily.map((W) => parseInt(W.tempMax))) - $, O = parseInt(i.tempMin), L = parseInt(i.tempMax), I = (O - $) / C * 100, j = (L - $) / C * 100;
return {
left: `${I}%`,
width: `${j - I}%`
};
};
return (i, $) => (o(), n("div", {
class: f(["daily-forecast weather-component", [i.theme, { mini: i.mini }]])
}, [
i.showTitle && !i.mini ? (o(), n("div", _t, [
e("h3", null, t(d(a)("dailyForecast")), 1)
])) : w("", !0),
e("div", wt, [
(o(!0), n(P, null, U(u.value, (g, C) => (o(), n("div", {
key: C,
class: f(["daily-item weather-item", { today: d(S)(g.fxDate), mini: i.mini }])
}, [
e("div", yt, [
e("div", ft, t(c(g.fxDate)), 1),
i.mini ? w("", !0) : (o(), n("div", $t, t(y(g.fxDate)), 1))
]),
e("div", gt, [
e("div", zt, [
e("div", Dt, [
e("i", {
class: f([v(g.iconDay), "qweather-icon", d(b)])
}, null, 2),
i.mini ? w("", !0) : (o(), n("div", qt, t(q(g.iconDay)), 1))
]),
i.mini ? w("", !0) : (o(), n("div", Tt, [
e("i", {
class: f([v(g.iconNight), "qweather-icon qweather-icon-sm"])
}, null, 2),
e("div", St, t(q(g.iconNight)), 1)
]))
])
]),
e("div", kt, [
e("div", bt, [
e("span", {
class: f(["temp-max", { mini: i.mini }])
}, t(g.tempMax) + "°", 3),
e("span", {
class: f(["temp-separator temp-unit", { mini: i.mini }])
}, "/", 2),
e("span", {
class: f(["temp-min", { mini: i.mini }])
}, t(g.tempMin) + "°", 3)
]),
i.mini ? w("", !0) : (o(), n("div", Ct, [
$[0] || ($[0] = e("div", { class: "temp-bar-bg" }, null, -1)),
e("div", {
class: "temp-bar-fill",
style: J(l(g))
}, null, 4)
]))
]),
i.mini ? w("", !0) : (o(), n("div", Mt, [
e("div", It, [
$[1] || ($[1] = e("span", { class: "detail-icon" }, "🌅", -1)),
e("span", Wt, t(g.sunrise), 1)
]),
e("div", Bt, [
$[2] || ($[2] = e("span", { class: "detail-icon" }, "🌇", -1)),
e("span", Ht, t(g.sunset), 1)
]),
e("div", Lt, [
$[3] || ($[3] = e("span", { class: "detail-icon" }, "💨", -1)),
e("span", Ft, t(g.windDirDay) + " " + t(g.windScaleDay) + "级", 1)
]),
e("div", Pt, [
$[4] || ($[4] = e("span", { class: "detail-icon" }, "💧", -1)),
e("span", Ut, t(g.humidity) + "%", 1)
])
])),
i.mini ? w("", !0) : (o(), n("div", Nt, [
e("div", Rt, [
e("span", At, t(d(a)("precip")), 1),
e("span", Et, t(g.precip) + "mm", 1)
]),
e("div", Vt, [
e("span", Ot, t(d(a)("uvIndex")), 1),
e("span", jt, t(g.uvIndex), 1)
])
]))
], 2))), 128))
])
], 2));
}
}), Jt = /* @__PURE__ */ V(Gt, [["__scopeId", "data-v-6e5f7a56"]]), Kt = {
key: 0,
class: "timeline-title-row"
}, Qt = { class: "timeline-title" }, Xt = {
key: 1,
class: "timeline-controls-row"
}, Yt = {
key: 0,
class: "timeline-months"
}, Zt = { value: "" }, xt = ["value"], es = {
key: 1,
class: "timeline-controls"
}, ts = {
key: 0,
class: "control-icon",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2"
}, ss = {
key: 1,
class: "control-icon",
viewBox: "0 0 24 24",
fill: "currentColor"
}, as = { key: 2 }, is = { key: 0 }, ns = { class: "timeline-container" }, os = ["onClick"], ls = { class: "day-weather weather-icon" }, rs = { class: "day-temp temp-container" }, cs = {
key: 0,
class: "day-desc weather-desc"
}, ds = {
key: 2,
class: "timeline-info weather-divider"
}, hs = { class: "info-left" }, us = { class: "info-label weather-label" }, ms = { class: "info-value weather-value" }, ps = { class: "info-right" }, vs = { class: "info-label weather-label" }, _s = { class: "info-value weather-value" }, ws = {
key: 3,
class: "selected-details"
}, ys = { class: "details-grid" }, fs = { class: "detail-item" }, $s = { class: "detail-label" }, gs = { class: "detail-value" }, zs = { class: "detail-item" }, Ds = { class: "detail-label" }, qs = { class: "detail-value" }, Ts = { class: "detail-item" }, Ss = { class: "detail-label" }, ks = { class: "detail-value" }, bs = { class: "detail-item" }, Cs = { class: "detail-label" }, Ms = { class: "detail-value" }, Is = { class: "detail-item" }, Ws = { class: "detail-label" }, Bs = { class: "detail-value" }, Hs = { class: "detail-item" }, Ls = { class: "detail-label" }, Fs = { class: "detail-value" }, Ps = /* @__PURE__ */ N({
__name: "HistoricalTimeline",
props: {
style: {},
autoPlay: { type: Boolean, default: !1 },
autoPlayInterval: { default: 2e3 },
showControls: { type: Boolean, default: !0 },
onDaySelect: {},
onDayChange: {},
data: {},
theme: { default: "light" },
locale: { default: "zh" },
mini: { type: Boolean, default: !1 },
showTitle: { type: Boolean, default: !0 }
},
emits: ["daySelect", "dayChange"],
setup(h, { emit: r }) {
const a = h, z = r, { t: p } = R(a), { getWeatherIcon: T, getWeatherDescription: S } = A(), { formatDate: k, isCurrentDay: b } = E(a.locale), u = H(""), c = H(null), y = H(!1), v = H(null), q = H(null), l = D(() => {
const s = /* @__PURE__ */ new Set();
return a.data.historical.forEach((m) => {
const _ = m.date.substring(0, 7);
s.add(_);
}), Array.from(s).sort((m, _) => _.localeCompare(m));
}), i = D(() => u.value ? a.data.historical.filter((s) => s.date.startsWith(u.value)) : a.data.historical), $ = D(() => {
const s = a.style || {
// backgroundColor: '#f7fafc',
textColor: "#2d3748",
height: "120px"
};
return {
// backgroundColor: style.backgroundColor,
color: s.textColor,
// border: `1px solid ${style.borderColor}`,
height: s.height
};
}), g = D(() => c.value ? new Date(c.value.date).toLocaleDateString(
a.locale === "zh" ? "zh-CN" : "en-US",
{
year: "numeric",
month: "long",
day: "numeric"
}
) : a.locale === "zh" ? "未选择" : "No selection"), C = (s) => (/* @__PURE__ */ new Date(s + "-01")).toLocaleDateString(a.locale === "zh" ? "zh-CN" : "en-US", {
year: "numeric",
month: "short"
}), O = (s) => k(s), L = (s) => T(s), I = (s) => S(s, a.locale), j = (s) => ({
fontSize: (a.style || {}).fontSize || "14px"
}), W = () => {
if (i.value.length > 0) {
const s = [...i.value].sort((m, _) => _.date.localeCompare(m.date));
B(s[0]);
}
}, B = (s) => {
c.value = s, z("daySelect", s), z("dayChange", s), ce(() => {
X();
});
}, X = () => {
if (!q.value) return;
const s = q.value.querySelector(".timeline-day.selected");
if (s) {
const m = q.value, _ = m.getBoundingClientRect(), M = s.getBoundingClientRect(), Q = m.scrollLeft, x = M.left - _.left + Q, ee = M.width, te = _.width, se = x - te / 2 + ee / 2;
m.scrollTo({
left: se,
behavior: "smooth"
});
}
}, Y = () => {
y.value = !y.value, y.value ? G() : F();
}, G = () => {
i.value.length <= 1 || (!c.value && i.value.length > 0 && B(i.value[0]), v.value = window.setInterval(() => {
const s = i.value.findIndex((_) => _ === c.value);
let m;
s === -1 || s === i.value.length - 1 ? m = 0 : m = s + 1, B(i.value[m]);
}, a.autoPlayInterval));
}, F = () => {
v.value && (clearInterval(v.value), v.value = null);
}, Z = () => {
c.value = null, F(), y.value = !1;
};
return ae(() => {
if (l.value.length > 0 && (u.value = l.value[0]), i.value.length > 0) {
const s = [...i.value].sort((m, _) => _.date.localeCompare(m.date));
B(s[0]);
}
a.autoPlay && (y.value = !0, G());
}), ie(() => {
F();
}), ne(() => a.autoPlay, (s) => {
s ? (y.value = !0, G()) : (y.value = !1, F());
}), (s, m) => (o(), n("div", {
class: f(["historical-timeline weather-component", [s.theme, { mini: s.mini }]])
}, [
s.showTitle && !s.mini ? (o(), n("div", Kt, [
e("h3", Qt, t(d(p)("historicalTimeline")), 1)
])) : w("", !0),
!s.mini || s.showControls ? (o(), n("div", Xt, [
!s.mini || s.showControls ? (o(), n("div", Yt, [
oe(e("select", {
"onUpdate:modelValue": m[0] || (m[0] = (_) => u.value = _),
onChange: W,
class: "month-select weather-button"
}, [
e("option", Zt, t(d(p)("allMonths")), 1),
(o(!0), n(P, null, U(l.value, (_, M) => (o(), n("option", {
key: M,
value: _
}, t(C(_)), 9, xt))), 128))
], 544), [
[le, u.value]
])
])) : w("", !0),
!s.mini || s.showControls ? (o(), n("div", es, [
e("button", {
onClick: Y,
class: f(["control-btn weather-button", { active: y.value }])
}, [
y.value ? (o(), n("svg", ss, m[2] || (m[2] = [
e("rect", {
x: "6",
y: "4",
width: "4",
height: "16"
}, null, -1),
e("rect", {
x: "14",
y: "4",
width: "4",
height: "16"
}, null, -1)
]))) : (o(), n("svg", ts, m[1] || (m[1] = [
e("polygon", { points: "5 3 19 12 5 21 5 3" }, null, -1)
]))),
s.mini ? w("", !0) : (o(), n("span", as, t(y.value ? d(p)("stop") : d(p)("play")), 1))
], 2),
e("button", {
onClick: Z,
class: "control-btn weather-button"
}, [
m[3] || (m[3] = e("svg", {
class: "control-icon",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2"
}, [
e("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
e("path", { d: "M3 3v5h5" })
], -1)),
s.mini ? w("", !0) : (o(), n("span", is, t(d(p)("reset")), 1))
])
])) : w("", !0)
])) : w("", !0),
e("div", ns, [
e("div", {
class: "timeline-track weather-scroll",
style: J($.value),
ref_key: "timelineTrack",
ref: q
}, [
(o(!0), n(P, null, U(i.value, (_, M) => (o(), n("div", {
key: M,
onClick: (Q) => B(_),
class: f(["timeline-day weather-item", {
selected: c.value === _,
current: d(b)(_.date),
mini: s.mini
}]),
style: J(j())
}, [
e("div", {
class: f(["day-date weather-label", { mini: s.mini }])
}, t(O(_.date)), 3),
e("div", ls, [
e("i", {
class: f([L(_.iconDay), s.mini ? "qweather-icon-sm" : "qweather-icon"])
}, null, 2)
]),
e("div", rs, [
e("span", {
class: f(["temp-max", { mini: s.mini }])
}, t(_.tempMax) + "°", 3),
e("span", {
class: f(["temp-min", { mini: s.mini }])
}, t(_.tempMin) + "°", 3)
]),
s.mini ? w("", !0) : (o(), n("div", cs, t(I(_.iconDay)), 1))
], 14, os))), 128))
], 4)
]),
s.mini ? w("", !0) : (o(), n("div", ds, [
e("div", hs, [
e("span", us, t(d(p)("selected")) + ":", 1),
e("span", ms, t(g.value), 1)
]),
e("div", ps, [
e("span", vs, t(d(p)("total")) + ":", 1),
e("span", _s, t(i.value.length) + " " + t(d(p)("days")), 1)
])
])),
c.value && !s.mini ? (o(), n("div", ws, [
e("div", ys, [
e("div", fs, [
e("span", $s, t(d(p)("maxTemp")), 1),
e("span", gs, t(c.value.tempMax) + "°C", 1)
]),
e("div", zs, [
e("span", Ds, t(d(p)("minTemp")), 1),
e("span", qs, t(c.value.tempMin) + "°C", 1)
]),
e("div", Ts, [
e("span", Ss, t(d(p)("weather")), 1),
e("span", ks, [
e("i", {
class: f([L(c.value.iconDay), "qweather-icon"])
}, null, 2),
re(" " + t(I(c.value.iconDay)), 1)
])
]),
e("div", bs, [
e("span", Cs, t(d(p)("wind")), 1),
e("span", Ms, t(c.value.windDirDay) + " " + t(c.value.windScaleDay) + "级", 1)
]),
e("div", Is, [
e("span", Ws, t(d(p)("humidity")), 1),
e("span", Bs, t(c.value.humidity) + "%", 1)
]),
e("div", Hs, [
e("span", Ls, t(d(p)("precipitation")), 1),
e("span", Fs, t(c.value.precip) + "mm", 1)
])
])
])) : w("", !0)
], 2));
}
}), Us = /* @__PURE__ */ V(Ps, [["__scopeId", "data-v-6121082a"]]), Rs = {
install(h) {
h.component("WeatherCard", tt), h.component("HourlyForecast", vt), h.component("DailyForecast", Jt), h.component("HistoricalTimeline", Us);
}
};
export {
Jt as DailyForecast,
Us as HistoricalTimeline,
vt as HourlyForecast,
tt as WeatherCard,
Rs as default
};