@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
310 lines (309 loc) • 14.2 kB
JavaScript
import { defineComponent as D, ref as u, openBlock as N, createElementBlock as I, normalizeStyle as P, unref as n, normalizeClass as j, createVNode as d, createSlots as C, withCtx as p, withKeys as f, withModifiers as F, renderList as T, renderSlot as A, normalizeProps as q, guardReactiveProps as M } from "vue";
import { useMutationObserver as L } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useCommon as R } from "../../composables/useCommon.js";
import { useInputtable as m } from "../../composables/useInputtable.js";
import { useInteractive as z } from "../../composables/useInteractive.js";
import { useTheme as V } from "../../composables/useTheme.js";
import G from "../input/Input.vue.js";
import Y from "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.2_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
import "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.2_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/main.css.js";
const W = {
multiCalendars: { type: [Boolean, Number, String, Object], default: void 0 },
modelValue: { type: [String, Date, Array, Object, Number], default: null },
modelType: { type: String, default: null },
position: { type: String, default: "center" },
dark: { type: Boolean, default: !1 },
format: {
type: [String, Function],
default: () => null
},
autoPosition: { type: Boolean, default: !0 },
altPosition: { type: Function, default: null },
transitions: { type: [Boolean, Object], default: !0 },
formatLocale: { type: Object, default: null },
utc: { type: [Boolean, String], default: !1 },
ariaLabels: { type: Object, default: () => ({}) },
offset: { type: [Number, String], default: 10 },
hideNavigation: { type: Array, default: () => [] },
timezone: { type: [String, Object], default: null },
vertical: { type: Boolean, default: !1 },
disableMonthYearSelect: { type: Boolean, default: !1 },
disableYearSelect: { type: Boolean, default: !1 },
dayClass: { type: Function, default: null },
yearRange: { type: Array, default: () => [1900, 2100] },
enableTimePicker: { type: Boolean, default: !0 },
autoApply: { type: Boolean, default: !1 },
disabledDates: { type: [Array, Function], default: () => [] },
monthNameFormat: { type: String, default: "short" },
startDate: { type: [Date, String], default: null },
startTime: { type: [Object, Array], default: null },
hideOffsetDates: { type: Boolean, default: !1 },
noToday: { type: Boolean, default: !1 },
disabledWeekDays: { type: Array, default: () => [] },
allowedDates: { type: Array, default: null },
nowButtonLabel: { type: String, default: "Now" },
markers: { type: Array, default: () => [] },
escClose: { type: Boolean, default: !0 },
spaceConfirm: { type: Boolean, default: !0 },
monthChangeOnArrows: { type: Boolean, default: !0 },
presetDates: { type: Array, default: () => [] },
flow: { type: Array, default: () => [] },
partialFlow: { type: Boolean, default: !1 },
preventMinMaxNavigation: { type: Boolean, default: !1 },
reverseYears: { type: Boolean, default: !1 },
weekPicker: { type: Boolean, default: !1 },
filters: { type: Object, default: () => ({}) },
arrowNavigation: { type: Boolean, default: !1 },
highlight: {
type: [Function, Object],
default: null
},
teleport: { type: [String, Boolean, Object], default: null },
teleportCenter: { type: Boolean, default: !1 },
locale: { type: String, default: "en-Us" },
weekNumName: { type: String, default: "W" },
weekStart: { type: [Number, String], default: 1 },
weekNumbers: {
type: [String, Function, Object],
default: null
},
monthChangeOnScroll: { type: [Boolean, String], default: !0 },
dayNames: {
type: [Function, Array],
default: null
},
monthPicker: { type: Boolean, default: !1 },
customProps: { type: Object, default: null },
yearPicker: { type: Boolean, default: !1 },
modelAuto: { type: Boolean, default: !1 },
selectText: { type: String, default: "Select" },
cancelText: { type: String, default: "Cancel" },
previewFormat: {
type: [String, Function],
default: () => ""
},
multiDates: { type: Boolean, default: !1 },
ignoreTimeValidation: { type: Boolean, default: !1 },
minDate: { type: [Date, String], default: null },
maxDate: { type: [Date, String], default: null },
minTime: { type: Object, default: null },
maxTime: { type: Object, default: null },
placeholder: { type: String, default: "" },
hideInputIcon: { type: Boolean, default: !1 },
clearable: { type: Boolean, default: !1 },
alwaysClearable: { type: Boolean, default: !1 },
state: { type: Boolean, default: null },
required: { type: Boolean, default: !1 },
autocomplete: { type: String, default: "off" },
timePicker: { type: Boolean, default: !1 },
enableSeconds: { type: Boolean, default: !1 },
is24: { type: Boolean, default: !0 },
noHoursOverlay: { type: Boolean, default: !1 },
noMinutesOverlay: { type: Boolean, default: !1 },
noSecondsOverlay: { type: Boolean, default: !1 },
hoursGridIncrement: { type: [String, Number], default: 1 },
minutesGridIncrement: { type: [String, Number], default: 5 },
secondsGridIncrement: { type: [String, Number], default: 5 },
hoursIncrement: { type: [Number, String], default: 1 },
minutesIncrement: { type: [Number, String], default: 1 },
secondsIncrement: { type: [Number, String], default: 1 },
range: { type: [Boolean, Object], default: !1 },
uid: { type: String, default: null },
inline: { type: [Boolean, Object], default: !1 },
textInput: { type: [Boolean, Object], default: !1 },
noDisabledRange: { type: Boolean, default: !1 },
sixWeeks: { type: [Boolean, String], default: !1 },
actionRow: { type: Object, default: () => ({}) },
focusStartDate: { type: Boolean, default: !1 },
disabledTimes: { type: [Function, Array], default: void 0 },
showLastInRange: { type: Boolean, default: !0 },
timePickerInline: { type: Boolean, default: !1 },
calendar: { type: Function, default: null },
config: { type: Object, default: void 0 },
quarterPicker: { type: Boolean, default: !1 },
yearFirst: { type: Boolean, default: !1 },
onInternalModelChange: { type: [Function, Object], default: null },
enableMinutes: { type: Boolean, default: !0 },
ui: { type: Object, default: () => ({}) }
}, K = {
...R.props(),
...z.props(),
...m.props(),
...W
}, $ = {
name: "XDatepicker"
}, ae = /* @__PURE__ */ D({
...$,
props: K,
emits: m.emits(),
setup(y, { expose: c, emit: b }) {
const g = y, h = b, t = u(null);
function k(e) {
h("update:modelValue", e), setTimeout(r);
}
function w() {
var e;
(e = t.value) == null || e.blur();
}
function v() {
var e;
(e = t.value) == null || e.focus();
}
function r() {
var e;
(e = t.value) == null || e.validate();
}
const a = document == null ? void 0 : document.querySelector("html"), i = u((a == null ? void 0 : a.classList.contains("dark")) ?? !1);
L(a, (e) => {
e[0] && e[0].attributeName === "class" && (i.value = (a == null ? void 0 : a.classList.contains("dark")) ?? !1);
}, {
attributes: !0
}), c({ focus: v, blur: w, validate: r });
const { styles: B, classes: S, className: O } = V("Datepicker", {}, g);
return (e, H) => (N(), I("div", {
style: P([n(B), { "--dp-clear-btn-top": e.label ? "2.75rem" : "1.2rem" }]),
class: j([
n(O),
n(S).wrapper
])
}, [
d(n(Y), {
ui: e.ui,
"model-value": e.modelValue,
"multi-calendars": e.multiCalendars,
"model-type": e.modelType,
position: e.position,
dark: i.value,
format: e.format,
"auto-position": e.autoPosition,
"alt-position": e.altPosition,
transitions: e.transitions,
"format-locale": e.formatLocale,
utc: e.utc,
"aria-labels": e.ariaLabels,
offset: e.offset,
"hide-navigation": e.hideNavigation,
timezone: e.timezone,
vertical: e.vertical,
"disable-month-year-select": e.disableMonthYearSelect,
"disable-year-select": e.disableYearSelect,
"day-class": e.dayClass,
"year-range": e.yearRange,
"enable-time-picker": e.enableTimePicker,
"auto-apply": e.autoApply,
"disabled-dates": e.disabledDates,
"month-name-format": e.monthNameFormat,
"start-date": e.startDate,
"start-time": e.startTime,
"hide-offset-dates": e.hideOffsetDates,
"no-today": e.noToday,
"disabled-week-days": e.disabledWeekDays,
"allowed-dates": e.allowedDates,
"now-button-label": e.nowButtonLabel,
markers: e.markers,
"esc-close": e.escClose,
"space-confirm": e.spaceConfirm,
"month-change-on-arrows": e.monthChangeOnArrows,
"preset-dates": e.presetDates,
flow: e.flow,
"partial-flow": e.partialFlow,
"prevent-min-max-navigation": e.preventMinMaxNavigation,
"reverse-years": e.reverseYears,
"week-picker": e.weekPicker,
filters: e.filters,
"arrow-navigation": e.arrowNavigation,
highlight: e.highlight,
teleport: e.teleport,
"teleport-center": e.teleportCenter,
locale: e.locale,
"week-num-name": e.weekNumName,
"week-start": e.weekStart,
"week-numbers": e.weekNumbers,
"month-change-on-scroll": e.monthChangeOnScroll,
"day-names": e.dayNames,
"month-picker": e.monthPicker,
"custom-props": e.customProps,
"year-picker": e.yearPicker,
"model-auto": e.modelAuto,
"select-text": e.selectText,
"cancel-text": e.cancelText,
"preview-format": e.previewFormat,
"multi-dates": e.multiDates,
"ignore-time-validation": e.ignoreTimeValidation,
"min-date": e.minDate,
"max-date": e.maxDate,
placeholder: e.placeholder,
"hide-input-icon": e.hideInputIcon,
clearable: e.clearable,
state: e.state,
required: e.required,
autocomplete: e.autocomplete,
"time-picker": e.timePicker,
"enable-seconds": e.enableSeconds,
"no-hours-overlay": e.noHoursOverlay,
"no-minutes-overlay": e.noMinutesOverlay,
"no-seconds-overlay": e.noSecondsOverlay,
"hours-grid-increment": e.hoursGridIncrement,
"minutes-grid-increment": e.minutesGridIncrement,
"seconds-grid-increment": e.secondsGridIncrement,
"hours-increment": e.hoursIncrement,
"minutes-increment": e.minutesIncrement,
"seconds-increment": e.secondsIncrement,
range: e.range,
uid: e.uid,
inline: e.inline,
"text-input": e.textInput,
"no-disabled-range": e.noDisabledRange,
"six-weeks": e.sixWeeks,
"action-row": e.actionRow,
"focus-start-date": e.focusStartDate,
"disabled-times": e.disabledTimes,
"show-last-in-range": e.showLastInRange,
"time-picker-inline": e.timePickerInline,
calendar: e.calendar,
config: e.config,
"quarter-picker": e.quarterPicker,
"year-first": e.yearFirst,
"is-24": e.is24,
"onUpdate:modelValue": k
}, C({
"dp-input": p(({ value: s, onEnter: l, onTab: o }) => [
d(G, {
ref_key: "inputRef",
ref: t,
readonly: e.textInput === !1 || e.readonly,
"model-value": s,
label: e.label,
size: e.size,
disabled: e.disabled,
helper: e.helper,
"icon-right": "calendar",
loading: e.loading,
"data-1p-ignore": "",
name: e.name,
rules: e.rules,
tooltip: e.tooltip,
placeholder: e.placeholder,
required: e.required,
"hide-footer": e.hideFooter,
onKeydown: [
f(F(l, ["prevent"]), ["enter"]),
f(o, ["tab"])
]
}, null, 8, ["readonly", "model-value", "label", "size", "disabled", "helper", "loading", "name", "rules", "tooltip", "placeholder", "required", "hide-footer", "onKeydown"])
]),
_: 2
}, [
T(e.$slots, (s, l) => ({
name: l,
fn: p((o = {}) => [
A(e.$slots, l, q(M(o)))
])
}))
]), 1032, ["ui", "model-value", "multi-calendars", "model-type", "position", "dark", "format", "auto-position", "alt-position", "transitions", "format-locale", "utc", "aria-labels", "offset", "hide-navigation", "timezone", "vertical", "disable-month-year-select", "disable-year-select", "day-class", "year-range", "enable-time-picker", "auto-apply", "disabled-dates", "month-name-format", "start-date", "start-time", "hide-offset-dates", "no-today", "disabled-week-days", "allowed-dates", "now-button-label", "markers", "esc-close", "space-confirm", "month-change-on-arrows", "preset-dates", "flow", "partial-flow", "prevent-min-max-navigation", "reverse-years", "week-picker", "filters", "arrow-navigation", "highlight", "teleport", "teleport-center", "locale", "week-num-name", "week-start", "week-numbers", "month-change-on-scroll", "day-names", "month-picker", "custom-props", "year-picker", "model-auto", "select-text", "cancel-text", "preview-format", "multi-dates", "ignore-time-validation", "min-date", "max-date", "placeholder", "hide-input-icon", "clearable", "state", "required", "autocomplete", "time-picker", "enable-seconds", "no-hours-overlay", "no-minutes-overlay", "no-seconds-overlay", "hours-grid-increment", "minutes-grid-increment", "seconds-grid-increment", "hours-increment", "minutes-increment", "seconds-increment", "range", "uid", "inline", "text-input", "no-disabled-range", "six-weeks", "action-row", "focus-start-date", "disabled-times", "show-last-in-range", "time-picker-inline", "calendar", "config", "quarter-picker", "year-first", "is-24"])
], 6));
}
});
export {
ae as default
};