first commit
This commit is contained in:
164
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/types.js
vendored
Normal file
164
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/types.js
vendored
Normal file
@@ -0,0 +1,164 @@
|
||||
"use strict";
|
||||
const uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const pickerProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
/**
|
||||
* label 外部自定义样式
|
||||
*/
|
||||
customLabelClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
/**
|
||||
* value 外部自定义样式
|
||||
*/
|
||||
customValueClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
/**
|
||||
* pickerView 外部自定义样式
|
||||
*/
|
||||
customViewClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
/**
|
||||
* 选择器左侧文案
|
||||
*/
|
||||
label: String,
|
||||
/**
|
||||
* 选择器占位符
|
||||
*/
|
||||
placeholder: String,
|
||||
/**
|
||||
* 是否禁用
|
||||
*/
|
||||
disabled: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 是否只读
|
||||
*/
|
||||
readonly: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 加载中
|
||||
*/
|
||||
loading: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 加载中颜色
|
||||
*/
|
||||
loadingColor: uni_modules_wotDesignUni_components_common_props.makeStringProp("#4D80F0"),
|
||||
/* popup */
|
||||
/**
|
||||
* 弹出层标题
|
||||
*/
|
||||
title: String,
|
||||
/**
|
||||
* 取消按钮文案
|
||||
*/
|
||||
cancelButtonText: String,
|
||||
/**
|
||||
* 确认按钮文案
|
||||
*/
|
||||
confirmButtonText: String,
|
||||
/**
|
||||
* 是否必填
|
||||
*/
|
||||
required: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 尺寸
|
||||
*/
|
||||
size: String,
|
||||
/**
|
||||
* 设置左侧标题宽度
|
||||
*/
|
||||
labelWidth: uni_modules_wotDesignUni_components_common_props.makeStringProp("33%"),
|
||||
/**
|
||||
* 使用默认插槽
|
||||
* @deprecated 可以直接使用默认插槽,无需配置此选项
|
||||
*/
|
||||
useDefaultSlot: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 使用标签插槽
|
||||
* @deprecated 可以直接使用标签插槽,无需配置此选项
|
||||
*/
|
||||
useLabelSlot: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 错误状态
|
||||
*/
|
||||
error: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 右对齐
|
||||
*/
|
||||
alignRight: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 确定前校验函数,接收 (value, resolve, picker) 参数,通过 resolve 继续执行 picker,resolve 接收1个boolean参数
|
||||
*/
|
||||
beforeConfirm: Function,
|
||||
/**
|
||||
* 点击蒙层关闭
|
||||
*/
|
||||
closeOnClickModal: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
/**
|
||||
* 底部安全区域内
|
||||
*/
|
||||
safeAreaInsetBottom: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
/**
|
||||
* 文本溢出显示省略号
|
||||
*/
|
||||
ellipsis: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 选项总高度
|
||||
*/
|
||||
columnsHeight: uni_modules_wotDesignUni_components_common_props.makeNumberProp(217),
|
||||
/**
|
||||
* 选项值对应的键名
|
||||
*/
|
||||
valueKey: uni_modules_wotDesignUni_components_common_props.makeStringProp("value"),
|
||||
/**
|
||||
* 选项文本对应的键名
|
||||
*/
|
||||
labelKey: uni_modules_wotDesignUni_components_common_props.makeStringProp("label"),
|
||||
/**
|
||||
* 选中项,如果为多列选择器,则其类型应为数组
|
||||
*/
|
||||
modelValue: {
|
||||
type: [String, Number, Array],
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* 选择器数据,可以为字符串数组,也可以为对象数组,如果为二维数组,则为多列选择器
|
||||
*/
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
/**
|
||||
* 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参,根据选中项和列下标进行判断,通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
|
||||
*/
|
||||
columnChange: Function,
|
||||
/**
|
||||
* 自定义展示文案的格式化函数,返回一个字符串
|
||||
*/
|
||||
displayFormat: Function,
|
||||
/**
|
||||
* 自定义层级
|
||||
*/
|
||||
zIndex: uni_modules_wotDesignUni_components_common_props.makeNumberProp(15),
|
||||
/**
|
||||
* 表单域 model 字段名,在使用表单校验功能的情况下,该属性是必填的
|
||||
*/
|
||||
prop: String,
|
||||
/**
|
||||
* 表单验证规则,结合wd-form组件使用
|
||||
*/
|
||||
rules: uni_modules_wotDesignUni_components_common_props.makeArrayProp(),
|
||||
/**
|
||||
* 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件,1.2.25版本起提供,仅微信小程序和支付宝小程序支持。
|
||||
*/
|
||||
immediateChange: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 是否从页面中脱离出来,用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
|
||||
*/
|
||||
rootPortal: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 显示清空按钮
|
||||
*/
|
||||
clearable: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 必填标记位置,可选值:before、after
|
||||
*/
|
||||
markerSide: uni_modules_wotDesignUni_components_common_props.makeStringProp("before")
|
||||
};
|
||||
exports.pickerProps = pickerProps;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/types.js.map
|
||||
353
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.js
vendored
Normal file
353
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.js
vendored
Normal file
@@ -0,0 +1,353 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
const uni_modules_wotDesignUni_components_wdPickerView_types = require("../wd-picker-view/types.js");
|
||||
const uni_modules_wotDesignUni_components_composables_useTranslate = require("../composables/useTranslate.js");
|
||||
const uni_modules_wotDesignUni_components_wdPicker_types = require("./types.js");
|
||||
if (!Math) {
|
||||
(wdIcon + wdCell + wdPickerView + wdPopup)();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const wdPopup = () => "../wd-popup/wd-popup.js";
|
||||
const wdPickerView = () => "../wd-picker-view/wd-picker-view.js";
|
||||
const wdCell = () => "../wd-cell/wd-cell.js";
|
||||
const __default__ = {
|
||||
name: "wd-picker",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdPicker_types.pickerProps,
|
||||
emits: ["confirm", "open", "cancel", "clear", "update:modelValue", "close"],
|
||||
setup(__props, { expose: __expose, emit: __emit }) {
|
||||
const { translate } = uni_modules_wotDesignUni_components_composables_useTranslate.useTranslate("picker");
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const pickerViewWd = common_vendor.ref(null);
|
||||
const innerLoading = common_vendor.ref(false);
|
||||
const popupShow = common_vendor.ref(false);
|
||||
const showValue = common_vendor.ref("");
|
||||
const pickerValue = common_vendor.ref("");
|
||||
const displayColumns = common_vendor.ref([]);
|
||||
const resetColumns = common_vendor.ref([]);
|
||||
const isPicking = common_vendor.ref(false);
|
||||
const hasConfirmed = common_vendor.ref(false);
|
||||
const isLoading = common_vendor.computed(() => {
|
||||
return props.loading || innerLoading.value;
|
||||
});
|
||||
common_vendor.watch(
|
||||
() => props.displayFormat,
|
||||
(fn) => {
|
||||
if (fn && !uni_modules_wotDesignUni_components_common_util.isFunction(fn)) {
|
||||
common_vendor.index.__f__("error", "at uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue:133", "The type of displayFormat must be Function");
|
||||
}
|
||||
if (pickerViewWd.value && pickerViewWd.value.getSelectedIndex().length !== 0) {
|
||||
handleShowValueUpdate(props.modelValue);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
pickerValue.value = newValue;
|
||||
handleShowValueUpdate(newValue);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => props.columns,
|
||||
(newValue) => {
|
||||
displayColumns.value = uni_modules_wotDesignUni_components_common_util.deepClone(newValue);
|
||||
resetColumns.value = uni_modules_wotDesignUni_components_common_util.deepClone(newValue);
|
||||
if (newValue.length === 0) {
|
||||
pickerValue.value = uni_modules_wotDesignUni_components_common_util.isArray(props.modelValue) ? [] : "";
|
||||
showValue.value = "";
|
||||
} else {
|
||||
handleShowValueUpdate(props.modelValue);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => props.columnChange,
|
||||
(newValue) => {
|
||||
if (newValue && !uni_modules_wotDesignUni_components_common_util.isFunction(newValue)) {
|
||||
common_vendor.index.__f__("error", "at uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue:182", "The type of columnChange must be Function");
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
const showClear = common_vendor.computed(() => {
|
||||
return props.clearable && !props.disabled && !props.readonly && showValue.value.length > 0;
|
||||
});
|
||||
const showArrow = common_vendor.computed(() => {
|
||||
return !props.disabled && !props.readonly && !showClear.value;
|
||||
});
|
||||
const cellClass = common_vendor.computed(() => {
|
||||
const classes = ["wd-picker__cell"];
|
||||
if (props.disabled)
|
||||
classes.push("is-disabled");
|
||||
if (props.readonly)
|
||||
classes.push("is-readonly");
|
||||
if (props.error)
|
||||
classes.push("is-error");
|
||||
if (!showValue.value)
|
||||
classes.push("wd-picker__cell--placeholder");
|
||||
return classes.join(" ");
|
||||
});
|
||||
const { proxy } = common_vendor.getCurrentInstance();
|
||||
common_vendor.onMounted(() => {
|
||||
handleShowValueUpdate(props.modelValue);
|
||||
});
|
||||
common_vendor.onBeforeMount(() => {
|
||||
displayColumns.value = uni_modules_wotDesignUni_components_common_util.deepClone(props.columns);
|
||||
resetColumns.value = uni_modules_wotDesignUni_components_common_util.deepClone(props.columns);
|
||||
});
|
||||
function handleShowValueUpdate(value) {
|
||||
if (uni_modules_wotDesignUni_components_common_util.isArray(value) && value.length > 0 || uni_modules_wotDesignUni_components_common_util.isDef(value) && !uni_modules_wotDesignUni_components_common_util.isArray(value) && value !== "") {
|
||||
if (pickerViewWd.value) {
|
||||
common_vendor.nextTick$1(() => {
|
||||
setShowValue(pickerViewWd.value.getSelects());
|
||||
});
|
||||
} else {
|
||||
setShowValue(getSelects(value));
|
||||
}
|
||||
} else {
|
||||
showValue.value = "";
|
||||
}
|
||||
}
|
||||
function getSelects(value) {
|
||||
const formatColumns = uni_modules_wotDesignUni_components_wdPickerView_types.formatArray(props.columns, props.valueKey, props.labelKey);
|
||||
if (props.columns.length === 0)
|
||||
return;
|
||||
if (value === "" || !uni_modules_wotDesignUni_components_common_util.isDef(value) || uni_modules_wotDesignUni_components_common_util.isArray(value) && value.length === 0) {
|
||||
return;
|
||||
}
|
||||
const valueType = uni_modules_wotDesignUni_components_common_util.getType(value);
|
||||
const type = ["string", "number", "boolean", "array"];
|
||||
if (type.indexOf(valueType) === -1)
|
||||
return [];
|
||||
value = uni_modules_wotDesignUni_components_common_util.isArray(value) ? value : [value];
|
||||
value = value.slice(0, formatColumns.length);
|
||||
if (value.length === 0) {
|
||||
value = formatColumns.map(() => 0);
|
||||
}
|
||||
let selected = [];
|
||||
value.forEach((target, col) => {
|
||||
let row = formatColumns[col].findIndex((row2) => {
|
||||
return row2[props.valueKey].toString() === target.toString();
|
||||
});
|
||||
row = row === -1 ? 0 : row;
|
||||
selected.push(row);
|
||||
});
|
||||
const selects = selected.map((row, col) => formatColumns[col][row]);
|
||||
if (selects.length === 1) {
|
||||
return selects[0];
|
||||
}
|
||||
return selects;
|
||||
}
|
||||
function open() {
|
||||
showPopup();
|
||||
}
|
||||
function close() {
|
||||
onCancel();
|
||||
}
|
||||
function showPopup() {
|
||||
if (props.disabled || props.readonly)
|
||||
return;
|
||||
emit("open");
|
||||
popupShow.value = true;
|
||||
pickerValue.value = props.modelValue;
|
||||
displayColumns.value = resetColumns.value;
|
||||
}
|
||||
function onCancel() {
|
||||
popupShow.value = false;
|
||||
emit("close");
|
||||
emit("cancel");
|
||||
let timmer = setTimeout(() => {
|
||||
clearTimeout(timmer);
|
||||
uni_modules_wotDesignUni_components_common_util.isDef(pickerViewWd.value) && pickerViewWd.value.resetColumns(resetColumns.value);
|
||||
}, 300);
|
||||
}
|
||||
function onConfirm() {
|
||||
if (isLoading.value)
|
||||
return;
|
||||
if (isPicking.value) {
|
||||
hasConfirmed.value = true;
|
||||
return;
|
||||
}
|
||||
const { beforeConfirm } = props;
|
||||
if (beforeConfirm && uni_modules_wotDesignUni_components_common_util.isFunction(beforeConfirm)) {
|
||||
beforeConfirm(
|
||||
pickerValue.value,
|
||||
(isPass) => {
|
||||
isPass && handleConfirm();
|
||||
},
|
||||
proxy.$.exposed
|
||||
);
|
||||
} else {
|
||||
handleConfirm();
|
||||
}
|
||||
}
|
||||
function handleConfirm() {
|
||||
if (isLoading.value || props.disabled) {
|
||||
popupShow.value = false;
|
||||
emit("close");
|
||||
return;
|
||||
}
|
||||
const selects = pickerViewWd.value.getSelects();
|
||||
const values = pickerViewWd.value.getValues();
|
||||
const columns = pickerViewWd.value.getColumnsData();
|
||||
popupShow.value = false;
|
||||
emit("close");
|
||||
resetColumns.value = uni_modules_wotDesignUni_components_common_util.deepClone(columns);
|
||||
emit("update:modelValue", values);
|
||||
setShowValue(selects);
|
||||
emit("confirm", {
|
||||
value: values,
|
||||
selectedItems: selects
|
||||
});
|
||||
}
|
||||
function pickerViewChange({ value }) {
|
||||
pickerValue.value = value;
|
||||
}
|
||||
function setShowValue(items) {
|
||||
if (uni_modules_wotDesignUni_components_common_util.isArray(items) && !items.length || !items)
|
||||
return;
|
||||
const { valueKey, labelKey } = props;
|
||||
showValue.value = (props.displayFormat || uni_modules_wotDesignUni_components_common_util.defaultDisplayFormat)(items, { valueKey, labelKey });
|
||||
}
|
||||
function noop() {
|
||||
}
|
||||
function onPickStart() {
|
||||
isPicking.value = true;
|
||||
}
|
||||
function onPickEnd() {
|
||||
isPicking.value = false;
|
||||
if (hasConfirmed.value) {
|
||||
hasConfirmed.value = false;
|
||||
onConfirm();
|
||||
}
|
||||
}
|
||||
function setLoading(loading) {
|
||||
innerLoading.value = loading;
|
||||
}
|
||||
function handleClear() {
|
||||
const clearValue = uni_modules_wotDesignUni_components_common_util.isArray(pickerValue.value) ? [] : "";
|
||||
emit("update:modelValue", clearValue);
|
||||
emit("clear");
|
||||
}
|
||||
__expose({
|
||||
close,
|
||||
open,
|
||||
setLoading
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: !_ctx.$slots.default
|
||||
}, !_ctx.$slots.default ? common_vendor.e({
|
||||
b: _ctx.$slots.label
|
||||
}, _ctx.$slots.label ? {} : {}, {
|
||||
c: showArrow.value
|
||||
}, showArrow.value ? {
|
||||
d: common_vendor.p({
|
||||
["custom-class"]: "wd-picker__arrow",
|
||||
name: "arrow-right"
|
||||
})
|
||||
} : showClear.value ? {
|
||||
f: common_vendor.p({
|
||||
["custom-class"]: "wd-picker__clear",
|
||||
name: "error-fill"
|
||||
}),
|
||||
g: common_vendor.o(handleClear)
|
||||
} : {}, {
|
||||
e: showClear.value,
|
||||
h: common_vendor.o(showPopup),
|
||||
i: common_vendor.p({
|
||||
title: _ctx.label,
|
||||
value: showValue.value ? showValue.value : _ctx.placeholder || common_vendor.unref(translate)("placeholder"),
|
||||
required: _ctx.required,
|
||||
size: _ctx.size,
|
||||
["title-width"]: _ctx.labelWidth,
|
||||
prop: _ctx.prop,
|
||||
rules: _ctx.rules,
|
||||
clickable: !_ctx.disabled && !_ctx.readonly,
|
||||
["value-align"]: _ctx.alignRight ? "right" : "left",
|
||||
["custom-class"]: cellClass.value,
|
||||
["custom-style"]: _ctx.customStyle,
|
||||
["custom-title-class"]: _ctx.customLabelClass,
|
||||
["custom-value-class"]: _ctx.customValueClass,
|
||||
ellipsis: _ctx.ellipsis,
|
||||
["use-title-slot"]: !!_ctx.$slots.label,
|
||||
["marker-side"]: _ctx.markerSide
|
||||
})
|
||||
}) : {
|
||||
j: common_vendor.o(showPopup)
|
||||
}, {
|
||||
k: common_vendor.t(_ctx.cancelButtonText || common_vendor.unref(translate)("cancel")),
|
||||
l: common_vendor.o(onCancel),
|
||||
m: _ctx.title
|
||||
}, _ctx.title ? {
|
||||
n: common_vendor.t(_ctx.title)
|
||||
} : {}, {
|
||||
o: common_vendor.t(_ctx.confirmButtonText || common_vendor.unref(translate)("done")),
|
||||
p: common_vendor.n(`wd-picker__action ${isLoading.value ? "is-loading" : ""}`),
|
||||
q: common_vendor.o(onConfirm),
|
||||
r: common_vendor.o(noop),
|
||||
s: common_vendor.sr(pickerViewWd, "e228acd5-4,e228acd5-3", {
|
||||
"k": "pickerViewWd"
|
||||
}),
|
||||
t: common_vendor.o(pickerViewChange),
|
||||
v: common_vendor.o(onPickStart),
|
||||
w: common_vendor.o(onPickEnd),
|
||||
x: common_vendor.o(($event) => pickerValue.value = $event),
|
||||
y: common_vendor.p({
|
||||
["custom-class"]: _ctx.customViewClass,
|
||||
columns: displayColumns.value,
|
||||
loading: isLoading.value,
|
||||
["loading-color"]: _ctx.loadingColor,
|
||||
["columns-height"]: _ctx.columnsHeight,
|
||||
["value-key"]: _ctx.valueKey,
|
||||
["label-key"]: _ctx.labelKey,
|
||||
["immediate-change"]: _ctx.immediateChange,
|
||||
["column-change"]: _ctx.columnChange,
|
||||
modelValue: pickerValue.value
|
||||
}),
|
||||
z: common_vendor.o(onCancel),
|
||||
A: common_vendor.o(($event) => popupShow.value = $event),
|
||||
B: common_vendor.p({
|
||||
position: "bottom",
|
||||
["hide-when-close"]: false,
|
||||
["close-on-click-modal"]: _ctx.closeOnClickModal,
|
||||
["z-index"]: _ctx.zIndex,
|
||||
["safe-area-inset-bottom"]: _ctx.safeAreaInsetBottom,
|
||||
["root-portal"]: _ctx.rootPortal,
|
||||
["custom-class"]: "wd-picker__popup",
|
||||
modelValue: popupShow.value
|
||||
}),
|
||||
C: common_vendor.n(`wd-picker ${_ctx.disabled ? "is-disabled" : ""} ${_ctx.size ? "is-" + _ctx.size : ""} ${_ctx.alignRight ? "is-align-right" : ""} ${_ctx.error ? "is-error" : ""} ${_ctx.customClass}`),
|
||||
D: common_vendor.s(_ctx.customStyle)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-e228acd5"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.js.map
|
||||
9
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.json
vendored
Normal file
9
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon",
|
||||
"wd-popup": "../wd-popup/wd-popup",
|
||||
"wd-picker-view": "../wd-picker-view/wd-picker-view",
|
||||
"wd-cell": "../wd-cell/wd-cell"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-e228acd5', C]}}" style="{{D}}"><wd-cell wx:if="{{a}}" class="data-v-e228acd5" u-s="{{['title','right-icon']}}" bindclick="{{h}}" u-i="e228acd5-0" bind:__l="__l" u-p="{{i}}"><view wx:if="{{b}}" slot="title"><slot name="label"></slot></view><view slot="right-icon"><wd-icon wx:if="{{c}}" class="data-v-e228acd5" u-i="e228acd5-1,e228acd5-0" bind:__l="__l" u-p="{{d}}"/><view wx:elif="{{e}}" class="data-v-e228acd5" catchtap="{{g}}"><wd-icon wx:if="{{f}}" class="data-v-e228acd5" u-i="e228acd5-2,e228acd5-0" bind:__l="__l" u-p="{{f}}"/></view></view></wd-cell><view wx:else class="data-v-e228acd5" bindtap="{{j}}"><slot></slot></view><wd-popup wx:if="{{B}}" class="data-v-e228acd5" u-s="{{['d']}}" bindclose="{{z}}" u-i="e228acd5-3" bind:__l="__l" bindupdateModelValue="{{A}}" u-p="{{B}}"><view class="wd-picker__wraper data-v-e228acd5"><view class="wd-picker__toolbar data-v-e228acd5" bindtouchmove="{{r}}"><view class="wd-picker__action wd-picker__action--cancel data-v-e228acd5" bindtap="{{l}}">{{k}}</view><view wx:if="{{m}}" class="wd-picker__title data-v-e228acd5">{{n}}</view><view class="{{['data-v-e228acd5', p]}}" bindtap="{{q}}">{{o}}</view></view><wd-picker-view wx:if="{{y}}" class="r data-v-e228acd5" u-r="pickerViewWd" bindchange="{{t}}" bindpickstart="{{v}}" bindpickend="{{w}}" u-i="e228acd5-4,e228acd5-3" bind:__l="__l" bindupdateModelValue="{{x}}" u-p="{{y}}"/></view></wd-popup></view>
|
||||
240
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.wxss
vendored
Normal file
240
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-picker/wd-picker.wxss
vendored
Normal file
@@ -0,0 +1,240 @@
|
||||
/* 水平间距 */
|
||||
/* 水平间距 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* SCSS 配置项:命名空间以及BEM
|
||||
*/
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* SCSS 配置项:命名空间以及BEM
|
||||
*/
|
||||
/* 转换成字符串 */
|
||||
/* 判断是否存在 Modifier */
|
||||
/* 判断是否存在伪类 */
|
||||
/**
|
||||
* 主题色切换
|
||||
* @params $theme-color 主题色
|
||||
* @params $type 变暗’dark‘ 变亮 'light'
|
||||
* @params $mix-color 自己设置的混色
|
||||
*/
|
||||
/**
|
||||
* 颜色结果切换, 如果开启线性渐变色 使用渐变色,如果没有开启,那么使用主题色
|
||||
* @params $open-linear 是否开启线性渐变色
|
||||
* @params $deg 渐变色角度
|
||||
* @params $theme-color 当前配色
|
||||
* @params [Array] $set 主题色明暗设置,与 $color-list 数量对应
|
||||
* @params [Array] $color-list 渐变色顺序, $color-list 和 $per-list 数量相同
|
||||
* @params [Array] $per-list 渐变色比例
|
||||
*/
|
||||
/**
|
||||
* BEM,定义块(b)
|
||||
*/
|
||||
/* 定义元素(e),对于伪类,会自动将 e 嵌套在 伪类 底下 */
|
||||
/* 此方法用于生成穿透样式 */
|
||||
/* 定义元素(e),对于伪类,会自动将 e 嵌套在 伪类 底下 */
|
||||
/* 定义状态(m) */
|
||||
/* 定义状态(m) */
|
||||
/* 对于需要需要嵌套在 m 底下的 e,调用这个混合宏,一般在切换整个组件的状态,如切换颜色的时候 */
|
||||
/* 状态,生成 is-$state 类名 */
|
||||
/**
|
||||
* 常用混合宏
|
||||
*/
|
||||
/* 单行超出隐藏 */
|
||||
/* 多行超出隐藏 */
|
||||
/* 清除浮动 */
|
||||
/* 0.5px 边框 指定方向*/
|
||||
/* 0.5px 边框 环绕 */
|
||||
/**
|
||||
* 三角形实现尖角样式,适用于背景透明情况
|
||||
* @param $size 三角形高,底边为 $size * 2
|
||||
* @param $bg 三角形背景颜色
|
||||
*/
|
||||
/**
|
||||
* 正方形实现尖角样式,适用于背景不透明情况
|
||||
* @param $size 正方形边长
|
||||
* @param $bg 正方形背景颜色
|
||||
* @param $z-index z-index属性值,不得大于外部包裹器
|
||||
* @param $box-shadow 阴影
|
||||
*/
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* SCSS 配置项:命名空间以及BEM
|
||||
*/
|
||||
/* 转换成字符串 */
|
||||
/* 判断是否存在 Modifier */
|
||||
/* 判断是否存在伪类 */
|
||||
/**
|
||||
* 主题色切换
|
||||
* @params $theme-color 主题色
|
||||
* @params $type 变暗’dark‘ 变亮 'light'
|
||||
* @params $mix-color 自己设置的混色
|
||||
*/
|
||||
/**
|
||||
* 颜色结果切换, 如果开启线性渐变色 使用渐变色,如果没有开启,那么使用主题色
|
||||
* @params $open-linear 是否开启线性渐变色
|
||||
* @params $deg 渐变色角度
|
||||
* @params $theme-color 当前配色
|
||||
* @params [Array] $set 主题色明暗设置,与 $color-list 数量对应
|
||||
* @params [Array] $color-list 渐变色顺序, $color-list 和 $per-list 数量相同
|
||||
* @params [Array] $per-list 渐变色比例
|
||||
*/
|
||||
/**
|
||||
* UI规范基础变量
|
||||
*/
|
||||
/*----------------------------------------- Theme color. start ----------------------------------------*/
|
||||
/* 主题颜色 */
|
||||
/* 辅助色 */
|
||||
/* 文字颜色(默认浅色背景下 */
|
||||
/* 暗黑模式 */
|
||||
/* 图形颜色 */
|
||||
/*----------------------------------------- Theme color. end -------------------------------------------*/
|
||||
/*-------------------------------- Theme color application size. start --------------------------------*/
|
||||
/* 文字字号 */
|
||||
/* 文字字重 */
|
||||
/* 尺寸 */
|
||||
/*-------------------------------- Theme color application size. end --------------------------------*/
|
||||
/* component var */
|
||||
/* action-sheet */
|
||||
/* badge */
|
||||
/* button */
|
||||
/* cell */
|
||||
/* calendar */
|
||||
/* checkbox */
|
||||
/* collapse */
|
||||
/* divider */
|
||||
/* drop-menu */
|
||||
/* input-number */
|
||||
/* input */
|
||||
/* textarea */
|
||||
/* loadmore */
|
||||
/* message-box */
|
||||
/* notice-bar */
|
||||
/* pagination */
|
||||
/* picker */
|
||||
/* col-picker */
|
||||
/* overlay */
|
||||
/* popup */
|
||||
/* progress */
|
||||
/* radio */
|
||||
/* search */
|
||||
/* slider */
|
||||
/* sort-button */
|
||||
/* steps */
|
||||
/* switch */
|
||||
/* tabs */
|
||||
/* tag */
|
||||
/* toast */
|
||||
/* loading */
|
||||
/* tooltip */
|
||||
/* popover */
|
||||
/* grid-item */
|
||||
/* statustip */
|
||||
/* card */
|
||||
/* upload */
|
||||
/* curtain */
|
||||
/* notify */
|
||||
/* skeleton */
|
||||
/* circle */
|
||||
/* swiper */
|
||||
/* swiper-nav */
|
||||
/* segmented */
|
||||
/* tabbar */
|
||||
/* tabbar-item */
|
||||
/* navbar */
|
||||
/* navbar-capsule */
|
||||
/* table */
|
||||
/* sidebar */
|
||||
/* sidebar-item */
|
||||
/* fab */
|
||||
/* count-down */
|
||||
/* keyboard */
|
||||
/* number-keyboard */
|
||||
/* passwod-input */
|
||||
/* form-item */
|
||||
/* backtop */
|
||||
/* index-bar */
|
||||
/* text */
|
||||
/* video-preview */
|
||||
/* img-cropper */
|
||||
/* floating-panel */
|
||||
/* signature */
|
||||
.wot-theme-dark .wd-picker__action--cancel.data-v-e228acd5 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, white));
|
||||
}
|
||||
.wot-theme-dark .wd-picker__action.is-loading.data-v-e228acd5 {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wot-theme-dark .wd-picker.data-v-e228acd5 .wd-picker__arrow,
|
||||
.wot-theme-dark .wd-picker.data-v-e228acd5 .wd-picker__clear {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, white));
|
||||
}
|
||||
.wot-theme-dark .wd-picker.data-v-e228acd5 .wd-picker__cell--placeholder .wd-cell__value {
|
||||
color: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__popup {
|
||||
border-radius: 16px 16px 0px 0px;
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__cell.is-disabled .wd-cell__value {
|
||||
color: var(--wot-input-disabled-color, #d9d9d9);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__cell.is-error .wd-cell__value {
|
||||
color: var(--wot-input-error-color, var(--wot-color-danger, #fa4350));
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__cell.is-error .wd-picker__arrow {
|
||||
color: var(--wot-input-error-color, var(--wot-color-danger, #fa4350));
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__cell.is-large .wd-picker__arrow,.data-v-e228acd5 .wd-picker__cell.is-large .wd-picker__clear {
|
||||
font-size: var(--wot-cell-icon-size-large, 18px);
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__cell--placeholder .wd-cell__value {
|
||||
color: var(--wot-input-placeholder-color, #bfbfbf);
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__arrow,.data-v-e228acd5 .wd-picker__clear {
|
||||
display: block;
|
||||
font-size: var(--wot-cell-icon-size, 16px);
|
||||
color: var(--wot-cell-arrow-color, rgba(0, 0, 0, 0.25));
|
||||
line-height: var(--wot-cell-line-height, 24px);
|
||||
}
|
||||
.data-v-e228acd5 .wd-picker__clear {
|
||||
color: var(--wot-cell-clear-color, #585858);
|
||||
}
|
||||
.wd-picker__wraper.data-v-e228acd5 {
|
||||
padding-bottom: var(--window-bottom);
|
||||
}
|
||||
.wd-picker__toolbar.data-v-e228acd5 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: var(--wot-picker-toolbar-fs, var(--wot-fs-title, 16px));
|
||||
height: var(--wot-picker-toolbar-height, 54px);
|
||||
line-height: var(--wot-picker-action-height, 16px);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wd-picker__action.data-v-e228acd5 {
|
||||
display: block;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: var(--wot-picker-toolbar-fs, var(--wot-fs-title, 16px));
|
||||
color: var(--wot-picker-toolbar-finish-color, var(--wot-color-theme, #4d80f0));
|
||||
background: transparent;
|
||||
padding: 24px 15px 14px 15px;
|
||||
}
|
||||
.wd-picker__action--cancel.data-v-e228acd5 {
|
||||
color: var(--wot-picker-toolbar-cancel-color, #666666);
|
||||
}
|
||||
.wd-picker__action.is-loading.data-v-e228acd5 {
|
||||
color: var(--wot-picker-loading-button-color, rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
.wd-picker__title.data-v-e228acd5 {
|
||||
display: block;
|
||||
float: 1;
|
||||
color: var(--wot-picker-toolbar-title-color, rgba(0, 0, 0, 0.85));
|
||||
}
|
||||
Reference in New Issue
Block a user