消息
This commit is contained in:
218
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.js
vendored
Normal file
218
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.js
vendored
Normal file
@@ -0,0 +1,218 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
require("../../../adapter-vue.js");
|
||||
const common_assets = require("../../../../common/assets.js");
|
||||
const TUIKit_utils_env = require("../../../utils/env.js");
|
||||
if (!Math) {
|
||||
(Icon + DateTable)();
|
||||
}
|
||||
const DateTable = () => "./date-table.js";
|
||||
const Icon = () => "../Icon.js";
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
__name: "date-picker-panel",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "range"
|
||||
// "single"/"range"
|
||||
},
|
||||
// Unique attribute when type is single
|
||||
date: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: () => common_vendor.dayjs()
|
||||
},
|
||||
// Unique attribute when type is range
|
||||
startDate: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: null
|
||||
},
|
||||
endDate: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: null
|
||||
},
|
||||
rangeType: {
|
||||
type: String,
|
||||
default: ""
|
||||
// "left"/"right"
|
||||
},
|
||||
currentOtherPanelValue: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ["pick", "change"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const n = (className) => {
|
||||
return className ? [
|
||||
"tui-date-picker-panel-" + className,
|
||||
!TUIKit_utils_env.isPC && "tui-date-picker-panel-h5-" + className
|
||||
] : ["tui-date-picker-panel", !TUIKit_utils_env.isPC && "tui-date-picker-panel-h5"];
|
||||
};
|
||||
const currentPanelDate = common_vendor.ref();
|
||||
const year = common_vendor.computed(() => {
|
||||
var _a;
|
||||
return (_a = currentPanelDate.value) == null ? void 0 : _a.get("year");
|
||||
});
|
||||
const month = common_vendor.computed(() => {
|
||||
var _a;
|
||||
return (_a = currentPanelDate.value) == null ? void 0 : _a.format("MMMM");
|
||||
});
|
||||
const canYearMore = common_vendor.computed(() => {
|
||||
var _a, _b, _c;
|
||||
const prevYearNumber = ((_a = props.currentOtherPanelValue) == null ? void 0 : _a.year()) - 1;
|
||||
const prevYear = (_b = props.currentOtherPanelValue) == null ? void 0 : _b.year(prevYearNumber);
|
||||
return props.rangeType === "right" || ((_c = currentPanelDate.value) == null ? void 0 : _c.isBefore(prevYear, "year"));
|
||||
});
|
||||
const canMonthMore = common_vendor.computed(() => {
|
||||
var _a, _b, _c;
|
||||
const prevMonthNumber = ((_a = props.currentOtherPanelValue) == null ? void 0 : _a.month()) - 1;
|
||||
const prevMonth = (_b = props.currentOtherPanelValue) == null ? void 0 : _b.month(prevMonthNumber);
|
||||
return props.rangeType === "right" || ((_c = currentPanelDate.value) == null ? void 0 : _c.isBefore(prevMonth, "month"));
|
||||
});
|
||||
const canYearLess = common_vendor.computed(() => {
|
||||
var _a, _b, _c;
|
||||
const nextYearNumber = ((_a = props.currentOtherPanelValue) == null ? void 0 : _a.year()) + 1;
|
||||
const nextYear = (_b = props.currentOtherPanelValue) == null ? void 0 : _b.year(nextYearNumber);
|
||||
return props.rangeType === "left" || ((_c = currentPanelDate.value) == null ? void 0 : _c.isAfter(nextYear, "year"));
|
||||
});
|
||||
const canMonthLess = common_vendor.computed(() => {
|
||||
var _a, _b, _c;
|
||||
const nextMonthNumber = ((_a = props.currentOtherPanelValue) == null ? void 0 : _a.month()) + 1;
|
||||
const nextMonth = (_b = props.currentOtherPanelValue) == null ? void 0 : _b.month(nextMonthNumber);
|
||||
return props.rangeType === "left" || ((_c = currentPanelDate.value) == null ? void 0 : _c.isAfter(nextMonth, "month"));
|
||||
});
|
||||
const handleSingleDate = () => {
|
||||
var _a;
|
||||
if (props.date && ((_a = common_vendor.dayjs(props.date)) == null ? void 0 : _a.isValid())) {
|
||||
return {
|
||||
date: props == null ? void 0 : props.date
|
||||
};
|
||||
}
|
||||
return {
|
||||
date: common_vendor.dayjs()
|
||||
};
|
||||
};
|
||||
const handleRangeDate = () => {
|
||||
var _a;
|
||||
switch (props.rangeType) {
|
||||
case "left":
|
||||
if (props.startDate && common_vendor.dayjs.isDayjs(props.startDate)) {
|
||||
return {
|
||||
date: props == null ? void 0 : props.startDate
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
date: common_vendor.dayjs()
|
||||
};
|
||||
}
|
||||
case "right":
|
||||
if (props.endDate && common_vendor.dayjs.isDayjs(props.endDate) && ((_a = props == null ? void 0 : props.endDate) == null ? void 0 : _a.isAfter(props.startDate, "month"))) {
|
||||
return {
|
||||
date: props == null ? void 0 : props.endDate
|
||||
};
|
||||
} else {
|
||||
const _month = (props.startDate || common_vendor.dayjs()).month();
|
||||
return {
|
||||
date: (props.startDate || common_vendor.dayjs()).month(_month + 1)
|
||||
};
|
||||
}
|
||||
default:
|
||||
return {
|
||||
date: common_vendor.dayjs()
|
||||
};
|
||||
}
|
||||
};
|
||||
function handlePick(cell) {
|
||||
emit("pick", cell);
|
||||
}
|
||||
function change(type, num) {
|
||||
currentPanelDate.value = common_vendor.dayjs(currentPanelDate.value.toDate()).add(
|
||||
num,
|
||||
type
|
||||
);
|
||||
emit("change", currentPanelDate.value);
|
||||
}
|
||||
common_vendor.onBeforeMount(() => {
|
||||
switch (props.type) {
|
||||
case "single":
|
||||
currentPanelDate.value = handleSingleDate().date;
|
||||
emit("change", currentPanelDate.value);
|
||||
break;
|
||||
case "range":
|
||||
currentPanelDate.value = handleRangeDate().date;
|
||||
emit("change", currentPanelDate.value);
|
||||
break;
|
||||
}
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.unref(canYearLess)
|
||||
}, common_vendor.unref(canYearLess) ? {
|
||||
b: common_vendor.p({
|
||||
file: common_vendor.unref(common_assets.dLeftArrowIcon),
|
||||
width: "12px",
|
||||
height: "12px"
|
||||
}),
|
||||
c: common_vendor.n(n("icon")),
|
||||
d: common_vendor.o$1(($event) => change("year", -1))
|
||||
} : {}, {
|
||||
e: common_vendor.unref(canMonthLess)
|
||||
}, common_vendor.unref(canMonthLess) ? {
|
||||
f: common_vendor.p({
|
||||
file: common_vendor.unref(common_assets.leftArrowIcon),
|
||||
width: "10px",
|
||||
height: "10px"
|
||||
}),
|
||||
g: common_vendor.n(n("icon")),
|
||||
h: common_vendor.o$1(($event) => change("month", -1))
|
||||
} : {}, {
|
||||
i: common_vendor.n(n("body-header-prev")),
|
||||
j: common_vendor.t(common_vendor.unref(year)),
|
||||
k: common_vendor.n(n("body-header-label-item")),
|
||||
l: common_vendor.t(common_vendor.unref(common_vendor.Wt).t(`time.${common_vendor.unref(month)}`)),
|
||||
m: common_vendor.n(n("body-header-label-item")),
|
||||
n: common_vendor.n(n("body-header-label")),
|
||||
o: common_vendor.unref(canMonthMore)
|
||||
}, common_vendor.unref(canMonthMore) ? {
|
||||
p: common_vendor.p({
|
||||
file: common_vendor.unref(common_assets.rightArrowIcon),
|
||||
width: "10px",
|
||||
height: "10px"
|
||||
}),
|
||||
q: common_vendor.n(n("icon")),
|
||||
r: common_vendor.o$1(($event) => change("month", 1))
|
||||
} : {}, {
|
||||
s: common_vendor.unref(canYearMore)
|
||||
}, common_vendor.unref(canYearMore) ? {
|
||||
t: common_vendor.p({
|
||||
file: common_vendor.unref(common_assets.dRightArrowIcon),
|
||||
width: "12px",
|
||||
height: "12px"
|
||||
}),
|
||||
v: common_vendor.n(n("icon")),
|
||||
w: common_vendor.o$1(($event) => change("year", 1))
|
||||
} : {}, {
|
||||
x: common_vendor.n(n("body-header-next")),
|
||||
y: common_vendor.n(n("body-header")),
|
||||
z: common_vendor.o$1(handlePick),
|
||||
A: common_vendor.p({
|
||||
type: props.type,
|
||||
date: props.date,
|
||||
startDate: props.startDate,
|
||||
endDate: props.endDate,
|
||||
currentPanelDate: common_vendor.unref(currentPanelDate)
|
||||
}),
|
||||
B: common_vendor.n(n("body-content")),
|
||||
C: common_vendor.n(n("body")),
|
||||
D: common_vendor.n(n("")),
|
||||
E: common_vendor.o$1(() => {
|
||||
})
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-389108a1"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.js.map
|
||||
7
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.json
vendored
Normal file
7
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.json
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"date-table": "./date-table",
|
||||
"icon": "../Icon"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-389108a1', D]}}" catchmouseup="{{E}}"><view class="{{['data-v-389108a1', C]}}"><view class="{{['data-v-389108a1', y]}}"><view class="{{['data-v-389108a1', i]}}"><view wx:if="{{a}}" class="{{['data-v-389108a1', c]}}" bindtap="{{d}}"><icon wx:if="{{b}}" class="data-v-389108a1" u-i="389108a1-0" bind:__l="__l" u-p="{{b}}"/></view><view wx:if="{{e}}" class="{{['data-v-389108a1', g]}}" bindtap="{{h}}"><icon wx:if="{{f}}" class="data-v-389108a1" u-i="389108a1-1" bind:__l="__l" u-p="{{f}}"/></view></view><view class="{{['data-v-389108a1', n]}}"><view class="{{['data-v-389108a1', k]}}">{{j}}</view><view class="{{['data-v-389108a1', m]}}">{{l}}</view></view><view class="{{['data-v-389108a1', x]}}"><view wx:if="{{o}}" class="{{['data-v-389108a1', q]}}" bindtap="{{r}}"><icon wx:if="{{p}}" class="data-v-389108a1" u-i="389108a1-2" bind:__l="__l" u-p="{{p}}"/></view><view wx:if="{{s}}" class="{{['data-v-389108a1', v]}}" bindtap="{{w}}"><icon wx:if="{{t}}" class="data-v-389108a1" u-i="389108a1-3" bind:__l="__l" u-p="{{t}}"/></view></view></view><view class="{{['data-v-389108a1', B]}}"><date-table wx:if="{{A}}" class="data-v-389108a1" bindpick="{{z}}" u-i="389108a1-4" bind:__l="__l" u-p="{{A}}"/></view></view></view>
|
||||
75
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.wxss
vendored
Normal file
75
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-picker-panel.wxss
vendored
Normal file
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.tui-date-picker-panel.data-v-389108a1 {
|
||||
width: 200px;
|
||||
margin: 5px;
|
||||
}
|
||||
.tui-date-picker-panel-body.data-v-389108a1 {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tui-date-picker-panel-body-header.data-v-389108a1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 30px;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tui-date-picker-panel-body-header-prev.data-v-389108a1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
}
|
||||
.tui-date-picker-panel-body-header-label.data-v-389108a1 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
color: #666;
|
||||
}
|
||||
.tui-date-picker-panel-body-header-label-item.data-v-389108a1 {
|
||||
padding: 0 5px;
|
||||
color: #666;
|
||||
}
|
||||
.tui-date-picker-panel-body-header-next.data-v-389108a1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
}
|
||||
.tui-date-picker-panel-icon.data-v-389108a1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 12px;
|
||||
}
|
||||
147
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.js
vendored
Normal file
147
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.js
vendored
Normal file
@@ -0,0 +1,147 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
require("../../../adapter-vue.js");
|
||||
const TUIKit_utils_env = require("../../../utils/env.js");
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
__name: "date-table",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "range"
|
||||
// "single"/"range"
|
||||
},
|
||||
currentPanelDate: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: () => common_vendor.dayjs()
|
||||
},
|
||||
// Unique attribute when type is single
|
||||
date: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: null
|
||||
},
|
||||
// Unique attribute when type is range
|
||||
startDate: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: null
|
||||
},
|
||||
endDate: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ["pick"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const instance = common_vendor.getCurrentInstance();
|
||||
const tableRows = common_vendor.ref([[], [], [], [], [], []]);
|
||||
const currentPanelDateObject = common_vendor.ref(
|
||||
common_vendor.dayjs(props.currentPanelDate || null)
|
||||
);
|
||||
const dateObject = common_vendor.ref(common_vendor.dayjs(props.date || null));
|
||||
const startDateObject = common_vendor.ref(common_vendor.dayjs(props.startDate || null));
|
||||
const endDateObject = common_vendor.ref(common_vendor.dayjs(props.endDate || null));
|
||||
const WEEKS_CONSTANT = common_vendor.computed(() => {
|
||||
return common_vendor.dayjs.weekdaysShort();
|
||||
});
|
||||
const WEEKS = common_vendor.computed(
|
||||
() => WEEKS_CONSTANT.value.map((w) => w.substring(1))
|
||||
);
|
||||
const startDateOnTable = common_vendor.computed(() => {
|
||||
var _a;
|
||||
const startDayOfMonth = (_a = currentPanelDateObject.value) == null ? void 0 : _a.startOf("month");
|
||||
return startDayOfMonth == null ? void 0 : startDayOfMonth.subtract((startDayOfMonth == null ? void 0 : startDayOfMonth.day()) || 7, "day");
|
||||
});
|
||||
const rows = common_vendor.computed(() => {
|
||||
var _a, _b, _c, _d, _e;
|
||||
const rows_ = tableRows.value;
|
||||
const cols = WEEKS.value.length;
|
||||
const startOfMonth = (_a = currentPanelDateObject.value) == null ? void 0 : _a.startOf("month");
|
||||
const startOfMonthDay = (startOfMonth == null ? void 0 : startOfMonth.day()) || 7;
|
||||
const dateCountOfMonth = startOfMonth == null ? void 0 : startOfMonth.daysInMonth();
|
||||
let count = 1;
|
||||
for (let row = 0; row < tableRows.value.length; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
const cellDate = (_b = startDateOnTable.value) == null ? void 0 : _b.add(count, "day");
|
||||
const text = cellDate == null ? void 0 : cellDate.date();
|
||||
const isSelected = props.type === "single" && (cellDate == null ? void 0 : cellDate.format("YYYY-MM-DD")) === ((_c = dateObject.value) == null ? void 0 : _c.format("YYYY-MM-DD"));
|
||||
const isSelectedStart = props.type === "range" && (cellDate == null ? void 0 : cellDate.format("YYYY-MM-DD")) === ((_d = startDateObject.value) == null ? void 0 : _d.format("YYYY-MM-DD"));
|
||||
const isSelectedEnd = props.type === "range" && (cellDate == null ? void 0 : cellDate.format("YYYY-MM-DD")) === ((_e = endDateObject.value) == null ? void 0 : _e.format("YYYY-MM-DD"));
|
||||
const isInRange = (cellDate == null ? void 0 : cellDate.isSameOrBefore(endDateObject.value, "day")) && (cellDate == null ? void 0 : cellDate.isSameOrAfter(startDateObject.value, "day"));
|
||||
let type = "normal";
|
||||
if (count < startOfMonthDay) {
|
||||
type = "prev-month";
|
||||
} else if (count - startOfMonthDay >= dateCountOfMonth) {
|
||||
type = "next-month";
|
||||
}
|
||||
rows_[row][col] = {
|
||||
type,
|
||||
date: cellDate,
|
||||
text,
|
||||
isSelected: isSelected || isSelectedStart || isSelectedEnd,
|
||||
isSelectedStart,
|
||||
isSelectedEnd,
|
||||
isInRange
|
||||
};
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return rows_;
|
||||
});
|
||||
const handlePick = (cell) => {
|
||||
if ((cell == null ? void 0 : cell.type) !== "normal") {
|
||||
return;
|
||||
}
|
||||
emit("pick", cell);
|
||||
};
|
||||
common_vendor.watch(
|
||||
() => [props.currentPanelDate, props.date, props.startDate, props.endDate],
|
||||
() => {
|
||||
currentPanelDateObject.value = common_vendor.dayjs(props.currentPanelDate || null);
|
||||
dateObject.value = common_vendor.dayjs(props.date || null);
|
||||
startDateObject.value = common_vendor.dayjs(props.startDate || null);
|
||||
endDateObject.value = common_vendor.dayjs(props.endDate || null);
|
||||
common_vendor.nextTick$1(() => {
|
||||
var _a;
|
||||
(_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$forceUpdate();
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
return (_ctx, _cache) => {
|
||||
return {
|
||||
a: common_vendor.f(common_vendor.unref(WEEKS), (item, k0, i0) => {
|
||||
return {
|
||||
a: common_vendor.t(common_vendor.unref(common_vendor.Wt).t(`time.${item}`)),
|
||||
b: item,
|
||||
c: item + ""
|
||||
};
|
||||
}),
|
||||
b: common_vendor.f(common_vendor.unref(rows), (row, rowKey, i0) => {
|
||||
return {
|
||||
a: common_vendor.f(row, (col, colKey, i1) => {
|
||||
return {
|
||||
a: common_vendor.t(col.text),
|
||||
b: common_vendor.n(col.isSelected && "selected"),
|
||||
c: common_vendor.n(col.isSelectedStart && "selected-start"),
|
||||
d: common_vendor.n(col.isSelectedEnd && "selected-end"),
|
||||
e: common_vendor.n(col.isInRange && "range"),
|
||||
f: common_vendor.o$1(($event) => handlePick(col), colKey),
|
||||
g: colKey,
|
||||
h: common_vendor.n(col.type)
|
||||
};
|
||||
}),
|
||||
b: rowKey
|
||||
};
|
||||
}),
|
||||
c: common_vendor.n(!common_vendor.unref(TUIKit_utils_env.isPC) && "tui-date-table-h5")
|
||||
};
|
||||
};
|
||||
}
|
||||
});
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-0072a759"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/TUIKit/components/common/DatePicker/date-table.js.map
|
||||
4
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.json
vendored
Normal file
4
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-0072a759', 'tui-date-table', c]}}" cellspacing="0" cellpadding="0" role="grid"><view class="tui-date-table-body data-v-0072a759"><view class="tui-date-table-body-weeks data-v-0072a759"><view wx:for="{{a}}" wx:for-item="item" wx:key="b" class="tui-date-table-body-weeks-item data-v-0072a759" aria-label="{{item.c}}" scope="col">{{item.a}}</view></view><view wx:for="{{b}}" wx:for-item="row" wx:key="b" class="tui-date-table-body-days data-v-0072a759"><view wx:for="{{row.a}}" wx:for-item="col" wx:key="g" class="{{['data-v-0072a759', 'tui-date-table-body-days-item', col.h]}}"><view class="{{['data-v-0072a759', 'tui-date-table-body-days-item-cell', col.b, col.c, col.d, col.e]}}" bindtap="{{col.f}}"><label class="tui-date-table-body-days-item-cell-text data-v-0072a759">{{col.a}}</label></view></view></view></view></view>
|
||||
128
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.wxss
vendored
Normal file
128
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/date-table.wxss
vendored
Normal file
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.tui-date-table.data-v-0072a759 {
|
||||
border-spacing: 0;
|
||||
-webkit-border-horizontal-spacing: 0;
|
||||
-webkit-border-vertical-spacing: 0;
|
||||
font-size: 12px;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tui-date-table.data-v-0072a759::after, .tui-date-table.data-v-0072a759::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tui-date-table-body.data-v-0072a759 {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tui-date-table-body-weeks.data-v-0072a759, .tui-date-table-body-days.data-v-0072a759 {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-date-table-body-weeks.data-v-0072a759 {
|
||||
width: 100%;
|
||||
}
|
||||
.tui-date-table-body-weeks-item.data-v-0072a759 {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
font-weight: 400px;
|
||||
}
|
||||
.tui-date-table-body-days.data-v-0072a759 {
|
||||
color: #000;
|
||||
}
|
||||
.tui-date-table-body-days-item-cell.data-v-0072a759 {
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.tui-date-table-body-days-item-cell-text.data-v-0072a759 {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tui-date-table-body-days-item .selected.data-v-0072a759 {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.tui-date-table-body-days-item .selected .tui-date-table-body-days-item-cell-text.data-v-0072a759 {
|
||||
box-sizing: border-box;
|
||||
color: #007aff;
|
||||
border: 1px solid #007aff;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tui-date-table-body-days-item .range.data-v-0072a759 {
|
||||
background-color: #007aff33;
|
||||
}
|
||||
.tui-date-table-body-days-item .selected-start.data-v-0072a759 {
|
||||
border-radius: 12px 0 0 12px;
|
||||
}
|
||||
.tui-date-table-body-days-item .selected-end.data-v-0072a759 {
|
||||
border-radius: 0 12px 12px 0;
|
||||
}
|
||||
.tui-date-table-body-days-item .selected-start.selected-end.data-v-0072a759 {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.tui-date-table-body-days .prev-month.data-v-0072a759,
|
||||
.tui-date-table-body-days .next-month.data-v-0072a759 {
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tui-date-table-body-days .prev-month .range.data-v-0072a759,
|
||||
.tui-date-table-body-days .next-month .range.data-v-0072a759 {
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tui-date-table-body-days .prev-month .selected .tui-date-table-body-days-item-cell-text.data-v-0072a759,
|
||||
.tui-date-table-body-days .next-month .selected .tui-date-table-body-days-item-cell-text.data-v-0072a759 {
|
||||
box-sizing: border-box;
|
||||
color: #666;
|
||||
border: none;
|
||||
}
|
||||
.tui-date-table-h5.data-v-0072a759 {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
}
|
||||
.tui-date-table-h5 .tui-date-table-body-days-item-cell-text.data-v-0072a759 {
|
||||
cursor: none !important;
|
||||
}
|
||||
td.data-v-0072a759,
|
||||
._td.data-v-0072a759,
|
||||
.tui-date-table-body-days-item.data-v-0072a759 {
|
||||
flex: 1;
|
||||
}
|
||||
198
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.js
vendored
Normal file
198
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.js
vendored
Normal file
@@ -0,0 +1,198 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
require("../../../adapter-vue.js");
|
||||
const TUIKit_utils_env = require("../../../utils/env.js");
|
||||
if (!Math) {
|
||||
DatePickerPanel();
|
||||
}
|
||||
const DatePickerPanel = () => "./date-picker-panel.js";
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
__name: "index",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "range"
|
||||
// "single" / "range"
|
||||
},
|
||||
rangeTableType: {
|
||||
type: String,
|
||||
default: "one"
|
||||
// "one"/ "two"
|
||||
},
|
||||
startPlaceholder: {
|
||||
type: String,
|
||||
default: () => common_vendor.Wt.t("开始时间")
|
||||
},
|
||||
endPlaceholder: {
|
||||
type: String,
|
||||
default: () => common_vendor.Wt.t("开始时间")
|
||||
},
|
||||
popupPosition: {
|
||||
type: String,
|
||||
default: "bottom"
|
||||
// "top" / "bottom"
|
||||
},
|
||||
// Default single-select date
|
||||
defaultSingleDate: {
|
||||
type: common_vendor.dayjs_minExports.Dayjs,
|
||||
default: null,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
emits: ["pick", "change"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
common_vendor.dayjs.extend(common_vendor.localeData);
|
||||
common_vendor.dayjs.extend(common_vendor.isSameOrAfter);
|
||||
common_vendor.dayjs.extend(common_vendor.isSameOrBefore);
|
||||
common_vendor.dayjs.locale("zh-cn");
|
||||
const emit = __emit;
|
||||
const props = __props;
|
||||
const isDatePanelShow = common_vendor.ref(false);
|
||||
const dateValue = common_vendor.ref(props.type === "single" ? props == null ? void 0 : props.defaultSingleDate : null);
|
||||
const startValue = common_vendor.ref(props.type === "single" ? props == null ? void 0 : props.defaultSingleDate : null);
|
||||
const endValue = common_vendor.ref(props.type === "single" ? props == null ? void 0 : props.defaultSingleDate : null);
|
||||
const startFormatDate = common_vendor.computed(() => {
|
||||
var _a;
|
||||
return (_a = startValue == null ? void 0 : startValue.value) == null ? void 0 : _a.format("YYYY/MM/DD");
|
||||
});
|
||||
const endFormatDate = common_vendor.computed(() => {
|
||||
var _a;
|
||||
return (_a = endValue == null ? void 0 : endValue.value) == null ? void 0 : _a.format("YYYY/MM/DD");
|
||||
});
|
||||
const startPlaceholderVal = props.startPlaceholder;
|
||||
const endPlaceholderVal = props.endPlaceholder;
|
||||
const leftCurrentPanelValue = common_vendor.ref();
|
||||
const rightCurrentPanelValue = common_vendor.ref();
|
||||
const setDatePanelDisplay = (show) => {
|
||||
isDatePanelShow.value = show;
|
||||
};
|
||||
const n = (classNameList) => {
|
||||
const resultClassList = [];
|
||||
classNameList.forEach((className) => {
|
||||
if (className) {
|
||||
resultClassList.push("tui-date-picker-" + className);
|
||||
!TUIKit_utils_env.isPC && resultClassList.push("tui-date-picker-h5-" + className);
|
||||
} else {
|
||||
resultClassList.push("tui-date-picker");
|
||||
!TUIKit_utils_env.isPC && resultClassList.push("tui-date-picker-h5");
|
||||
}
|
||||
});
|
||||
return resultClassList;
|
||||
};
|
||||
const handlePick = (cell) => {
|
||||
var _a, _b, _c;
|
||||
switch (props.type) {
|
||||
case "single":
|
||||
startValue.value = cell.date;
|
||||
endValue.value = cell.date;
|
||||
dateValue.value = cell.date;
|
||||
emit("change", cell);
|
||||
emit("pick", dateValue.value);
|
||||
setTimeout(() => {
|
||||
setDatePanelDisplay(false);
|
||||
}, 300);
|
||||
break;
|
||||
case "range":
|
||||
if (!(startValue == null ? void 0 : startValue.value)) {
|
||||
startValue.value = cell.date;
|
||||
} else if (!(endValue == null ? void 0 : endValue.value)) {
|
||||
if ((_a = startValue == null ? void 0 : startValue.value) == null ? void 0 : _a.isSameOrBefore(cell.date, "day")) {
|
||||
endValue.value = cell.date;
|
||||
} else {
|
||||
endValue.value = startValue.value;
|
||||
startValue.value = cell.date;
|
||||
}
|
||||
emit("pick", {
|
||||
startDate: (_b = startValue == null ? void 0 : startValue.value) == null ? void 0 : _b.startOf("date"),
|
||||
endDate: (_c = endValue == null ? void 0 : endValue.value) == null ? void 0 : _c.endOf("date")
|
||||
});
|
||||
setTimeout(() => {
|
||||
setDatePanelDisplay(false);
|
||||
}, 200);
|
||||
} else {
|
||||
startValue.value = cell.date;
|
||||
endValue.value = null;
|
||||
}
|
||||
emit("change", {
|
||||
startDate: startValue.value,
|
||||
endDate: endValue.value,
|
||||
leftCurrentPanel: leftCurrentPanelValue.value,
|
||||
rightCurrentPanel: leftCurrentPanelValue.value
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
const handleLeftPanelChange = (value) => {
|
||||
leftCurrentPanelValue.value = value;
|
||||
emit("change", {
|
||||
startDate: startValue.value,
|
||||
endDate: endValue.value,
|
||||
leftCurrentPanel: leftCurrentPanelValue.value,
|
||||
rightCurrentPanel: leftCurrentPanelValue.value
|
||||
});
|
||||
};
|
||||
const handleRightPanelChange = (value) => {
|
||||
rightCurrentPanelValue.value = value;
|
||||
emit("change", {
|
||||
startDate: startValue.value,
|
||||
endDate: endValue.value,
|
||||
leftCurrentPanel: leftCurrentPanelValue.value,
|
||||
rightCurrentPanel: leftCurrentPanelValue.value
|
||||
});
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.unref(startPlaceholderVal),
|
||||
b: common_vendor.n(n(["input-start"])),
|
||||
c: common_vendor.unref(TUIKit_utils_env.isUniFrameWork),
|
||||
d: common_vendor.unref(startFormatDate),
|
||||
e: common_vendor.o$1(($event) => common_vendor.isRef(startFormatDate) ? startFormatDate.value = $event.detail.value : null),
|
||||
f: __props.type !== "single"
|
||||
}, __props.type !== "single" ? {} : {}, {
|
||||
g: __props.type !== "single"
|
||||
}, __props.type !== "single" ? {
|
||||
h: common_vendor.unref(endPlaceholderVal),
|
||||
i: common_vendor.n(n(["input-end"])),
|
||||
j: common_vendor.unref(TUIKit_utils_env.isUniFrameWork),
|
||||
k: common_vendor.unref(endFormatDate),
|
||||
l: common_vendor.o$1(($event) => common_vendor.isRef(endFormatDate) ? endFormatDate.value = $event.detail.value : null)
|
||||
} : {}, {
|
||||
m: common_vendor.n(n(["input"])),
|
||||
n: common_vendor.n(common_vendor.unref(isDatePanelShow) && n(["input-active"])),
|
||||
o: common_vendor.o$1(($event) => setDatePanelDisplay(!common_vendor.unref(isDatePanelShow))),
|
||||
p: common_vendor.unref(isDatePanelShow)
|
||||
}, common_vendor.unref(isDatePanelShow) ? common_vendor.e({
|
||||
q: common_vendor.o$1(handlePick),
|
||||
r: common_vendor.o$1(handleLeftPanelChange),
|
||||
s: common_vendor.p({
|
||||
type: props.type,
|
||||
rangeType: "left",
|
||||
date: common_vendor.unref(dateValue),
|
||||
startDate: common_vendor.unref(startValue),
|
||||
endDate: common_vendor.unref(endValue),
|
||||
currentOtherPanelValue: common_vendor.unref(rightCurrentPanelValue)
|
||||
}),
|
||||
t: props.type === "range" && common_vendor.unref(TUIKit_utils_env.isPC) && __props.rangeTableType === "two"
|
||||
}, props.type === "range" && common_vendor.unref(TUIKit_utils_env.isPC) && __props.rangeTableType === "two" ? {
|
||||
v: common_vendor.o$1(handlePick),
|
||||
w: common_vendor.o$1(handleRightPanelChange),
|
||||
x: common_vendor.p({
|
||||
type: props.type,
|
||||
rangeType: "right",
|
||||
date: common_vendor.unref(dateValue),
|
||||
startDate: common_vendor.unref(startValue),
|
||||
endDate: common_vendor.unref(endValue),
|
||||
currentOtherPanelValue: common_vendor.unref(leftCurrentPanelValue)
|
||||
})
|
||||
} : {}, {
|
||||
y: common_vendor.n(n(["dialog-container", "dialog-container-" + __props.rangeTableType, "dialog-container-" + __props.popupPosition])),
|
||||
z: common_vendor.n(n(["dialog"]))
|
||||
}) : {}, {
|
||||
A: common_vendor.n(n([""]))
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-eb57fa2c"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/TUIKit/components/common/DatePicker/index.js.map
|
||||
6
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.json
vendored
Normal file
6
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"date-picker-panel": "./date-picker-panel"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-eb57fa2c', A]}}"><view class="{{['data-v-eb57fa2c', m, n]}}" bindtap="{{o}}"><slot name="start-icon"/><input placeholder="{{a}}" class="{{['data-v-eb57fa2c', b]}}" style="pointer-events:none" type="text" readonly="{{true}}" disabled="{{c}}" autocomplete="false" value="{{d}}" bindinput="{{e}}"></input><label wx:if="{{f}}" class="data-v-eb57fa2c">-</label><input wx:if="{{g}}" placeholder="{{h}}" class="{{['data-v-eb57fa2c', i]}}" style="pointer-events:none" type="text" readonly="{{true}}" disabled="{{j}}" autocomplete="false" value="{{k}}" bindinput="{{l}}"></input><slot name="end-icon"/></view><view wx:if="{{p}}" class="{{['data-v-eb57fa2c', z]}}"><view class="{{['data-v-eb57fa2c', y]}}"><date-picker-panel wx:if="{{s}}" class="data-v-eb57fa2c" bindpick="{{q}}" bindchange="{{r}}" u-i="eb57fa2c-0" bind:__l="__l" u-p="{{s}}"/><date-picker-panel wx:if="{{t}}" class="data-v-eb57fa2c" bindpick="{{v}}" bindchange="{{w}}" u-i="eb57fa2c-1" bind:__l="__l" u-p="{{x}}"/></view></view></view>
|
||||
75
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.wxss
vendored
Normal file
75
unpackage/dist/dev/mp-weixin/TUIKit/components/common/DatePicker/index.wxss
vendored
Normal file
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.tui-date-picker-input.data-v-eb57fa2c {
|
||||
min-width: 160px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #666;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tui-date-picker-input-start.data-v-eb57fa2c, .tui-date-picker-input-end.data-v-eb57fa2c {
|
||||
flex: 1;
|
||||
color: #666;
|
||||
height: 17px;
|
||||
border: none;
|
||||
width: 67px;
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.tui-date-picker-input-start.data-v-eb57fa2c:focus, .tui-date-picker-input-end.data-v-eb57fa2c:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.tui-date-picker-input-start.data-v-eb57fa2c::-webkit-input-placeholder, .tui-date-picker-input-end.data-v-eb57fa2c::-webkit-input-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
.tui-date-picker-input-start.data-v-eb57fa2c::placeholder, .tui-date-picker-input-end.data-v-eb57fa2c::placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
.tui-date-picker-dialog.data-v-eb57fa2c {
|
||||
position: relative;
|
||||
}
|
||||
.tui-date-picker-dialog-container.data-v-eb57fa2c {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
left: 5px;
|
||||
background-color: #fff;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tui-date-picker-dialog-container-bottom.data-v-eb57fa2c {
|
||||
left: 5px;
|
||||
}
|
||||
.tui-date-picker-dialog-container-top.data-v-eb57fa2c {
|
||||
bottom: 30px;
|
||||
}
|
||||
.tui-date-picker-dialog-container-one.data-v-eb57fa2c {
|
||||
left: -5px;
|
||||
}
|
||||
Reference in New Issue
Block a user