first commit
This commit is contained in:
+29
@@ -0,0 +1,29 @@
|
||||
"use strict";
|
||||
var __defProp = Object.defineProperty;
|
||||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||||
var __publicField = (obj, key, value) => {
|
||||
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
||||
return value;
|
||||
};
|
||||
class AbortablePromise {
|
||||
constructor(executor) {
|
||||
__publicField(this, "promise");
|
||||
__publicField(this, "_reject", null);
|
||||
this.promise = new Promise((resolve, reject) => {
|
||||
executor(resolve, reject);
|
||||
this._reject = reject;
|
||||
});
|
||||
}
|
||||
abort(error) {
|
||||
if (this._reject) {
|
||||
this._reject(error);
|
||||
}
|
||||
}
|
||||
then(onfulfilled, onrejected) {
|
||||
return this.promise.then(onfulfilled, onrejected);
|
||||
}
|
||||
catch(onrejected) {
|
||||
return this.promise.catch(onrejected);
|
||||
}
|
||||
}
|
||||
exports.AbortablePromise = AbortablePromise;
|
||||
@@ -0,0 +1,27 @@
|
||||
"use strict";
|
||||
const _b64chars = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"];
|
||||
const _mkUriSafe = (src) => src.replace(/[+/]/g, (m0) => m0 === "+" ? "-" : "_").replace(/=+\$/m, "");
|
||||
const fromUint8Array = (src, rfc4648 = false) => {
|
||||
let b64 = "";
|
||||
for (let i = 0, l = src.length; i < l; i += 3) {
|
||||
const [a0, a1, a2] = [src[i], src[i + 1], src[i + 2]];
|
||||
const ord = a0 << 16 | a1 << 8 | a2;
|
||||
b64 += _b64chars[ord >>> 18];
|
||||
b64 += _b64chars[ord >>> 12 & 63];
|
||||
b64 += typeof a1 !== "undefined" ? _b64chars[ord >>> 6 & 63] : "=";
|
||||
b64 += typeof a2 !== "undefined" ? _b64chars[ord & 63] : "=";
|
||||
}
|
||||
return rfc4648 ? _mkUriSafe(b64) : b64;
|
||||
};
|
||||
const _btoa = typeof btoa === "function" ? (s) => btoa(s) : (s) => {
|
||||
if (s.charCodeAt(0) > 255) {
|
||||
throw new RangeError("The string contains invalid characters.");
|
||||
}
|
||||
return fromUint8Array(Uint8Array.from(s, (c) => c.charCodeAt(0)));
|
||||
};
|
||||
const utob = (src) => unescape(encodeURIComponent(src));
|
||||
function encode(src, rfc4648 = false) {
|
||||
const b64 = _btoa(utob(src));
|
||||
return rfc4648 ? _mkUriSafe(b64) : b64;
|
||||
}
|
||||
exports.encode = encode;
|
||||
+1
@@ -0,0 +1 @@
|
||||
"use strict";
|
||||
@@ -0,0 +1,38 @@
|
||||
"use strict";
|
||||
const numericProp = [Number, String];
|
||||
const makeRequiredProp = (type) => ({
|
||||
type,
|
||||
required: true
|
||||
});
|
||||
const makeArrayProp = () => ({
|
||||
type: Array,
|
||||
default: () => []
|
||||
});
|
||||
const makeBooleanProp = (defaultVal) => ({
|
||||
type: Boolean,
|
||||
default: defaultVal
|
||||
});
|
||||
const makeNumberProp = (defaultVal) => ({
|
||||
type: Number,
|
||||
default: defaultVal
|
||||
});
|
||||
const makeNumericProp = (defaultVal) => ({
|
||||
type: numericProp,
|
||||
default: defaultVal
|
||||
});
|
||||
const makeStringProp = (defaultVal) => ({
|
||||
type: String,
|
||||
default: defaultVal
|
||||
});
|
||||
const baseProps = {
|
||||
customStyle: makeStringProp(""),
|
||||
customClass: makeStringProp("")
|
||||
};
|
||||
exports.baseProps = baseProps;
|
||||
exports.makeArrayProp = makeArrayProp;
|
||||
exports.makeBooleanProp = makeBooleanProp;
|
||||
exports.makeNumberProp = makeNumberProp;
|
||||
exports.makeNumericProp = makeNumericProp;
|
||||
exports.makeRequiredProp = makeRequiredProp;
|
||||
exports.makeStringProp = makeStringProp;
|
||||
exports.numericProp = numericProp;
|
||||
@@ -0,0 +1,233 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_AbortablePromise = require("./AbortablePromise.js");
|
||||
function addUnit(num) {
|
||||
return Number.isNaN(Number(num)) ? `${num}` : `${num}px`;
|
||||
}
|
||||
function isObj(value) {
|
||||
return Object.prototype.toString.call(value) === "[object Object]" || typeof value === "object";
|
||||
}
|
||||
function getType(target) {
|
||||
const typeStr = Object.prototype.toString.call(target);
|
||||
const match = typeStr.match(/\[object (\w+)\]/);
|
||||
const type = match && match.length ? match[1].toLowerCase() : "";
|
||||
return type;
|
||||
}
|
||||
const isDef = (value) => value !== void 0 && value !== null;
|
||||
function rgbToHex(r, g, b) {
|
||||
const hex = (r << 16 | g << 8 | b).toString(16);
|
||||
const paddedHex = "#" + "0".repeat(Math.max(0, 6 - hex.length)) + hex;
|
||||
return paddedHex;
|
||||
}
|
||||
function hexToRgb(hex) {
|
||||
const rgb = [];
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
rgb.push(parseInt("0x" + hex.slice(i, i + 2), 16));
|
||||
}
|
||||
return rgb;
|
||||
}
|
||||
const gradient = (startColor, endColor, step = 2) => {
|
||||
const sColor = hexToRgb(startColor);
|
||||
const eColor = hexToRgb(endColor);
|
||||
const rStep = (eColor[0] - sColor[0]) / step;
|
||||
const gStep = (eColor[1] - sColor[1]) / step;
|
||||
const bStep = (eColor[2] - sColor[2]) / step;
|
||||
const gradientColorArr = [];
|
||||
for (let i = 0; i < step; i++) {
|
||||
gradientColorArr.push(
|
||||
rgbToHex(parseInt(String(rStep * i + sColor[0])), parseInt(String(gStep * i + sColor[1])), parseInt(String(bStep * i + sColor[2])))
|
||||
);
|
||||
}
|
||||
return gradientColorArr;
|
||||
};
|
||||
const isEqual = (value1, value2) => {
|
||||
if (value1 === value2) {
|
||||
return true;
|
||||
}
|
||||
if (!Array.isArray(value1) || !Array.isArray(value2)) {
|
||||
return false;
|
||||
}
|
||||
if (value1.length !== value2.length) {
|
||||
return false;
|
||||
}
|
||||
for (let i = 0; i < value1.length; ++i) {
|
||||
if (value1[i] !== value2[i]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
const context = {
|
||||
id: 1e3
|
||||
};
|
||||
function getRect(selector, all, scope, useFields) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let query = null;
|
||||
if (scope) {
|
||||
query = common_vendor.index.createSelectorQuery().in(scope);
|
||||
} else {
|
||||
query = common_vendor.index.createSelectorQuery();
|
||||
}
|
||||
const method = all ? "selectAll" : "select";
|
||||
const callback = (rect) => {
|
||||
if (all && isArray(rect) && rect.length > 0) {
|
||||
resolve(rect);
|
||||
} else if (!all && rect) {
|
||||
resolve(rect);
|
||||
} else {
|
||||
reject(new Error("No nodes found"));
|
||||
}
|
||||
};
|
||||
if (useFields) {
|
||||
query[method](selector).fields({ size: true, node: true }, callback).exec();
|
||||
} else {
|
||||
query[method](selector).boundingClientRect(callback).exec();
|
||||
}
|
||||
});
|
||||
}
|
||||
function kebabCase(word) {
|
||||
const newWord = word.replace(/[A-Z]/g, function(match) {
|
||||
return "-" + match;
|
||||
}).toLowerCase();
|
||||
return newWord;
|
||||
}
|
||||
function camelCase(word) {
|
||||
return word.replace(/-(\w)/g, (_, c) => c.toUpperCase());
|
||||
}
|
||||
function isArray(value) {
|
||||
if (typeof Array.isArray === "function") {
|
||||
return Array.isArray(value);
|
||||
}
|
||||
return Object.prototype.toString.call(value) === "[object Array]";
|
||||
}
|
||||
function isFunction(value) {
|
||||
return getType(value) === "function" || getType(value) === "asyncfunction";
|
||||
}
|
||||
function isString(value) {
|
||||
return getType(value) === "string";
|
||||
}
|
||||
function isNumber(value) {
|
||||
return getType(value) === "number";
|
||||
}
|
||||
function isPromise(value) {
|
||||
if (isObj(value) && isDef(value)) {
|
||||
return isFunction(value.then) && isFunction(value.catch);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function isUndefined(value) {
|
||||
return typeof value === "undefined";
|
||||
}
|
||||
function objToStyle(styles) {
|
||||
if (isArray(styles)) {
|
||||
const result = styles.filter(function(item) {
|
||||
return item != null && item !== "";
|
||||
}).map(function(item) {
|
||||
return objToStyle(item);
|
||||
}).join(";");
|
||||
return result ? result.endsWith(";") ? result : result + ";" : "";
|
||||
}
|
||||
if (isString(styles)) {
|
||||
return styles ? styles.endsWith(";") ? styles : styles + ";" : "";
|
||||
}
|
||||
if (isObj(styles)) {
|
||||
const result = Object.keys(styles).filter(function(key) {
|
||||
return styles[key] != null && styles[key] !== "";
|
||||
}).map(function(key) {
|
||||
return [kebabCase(key), styles[key]].join(":");
|
||||
}).join(";");
|
||||
return result ? result.endsWith(";") ? result : result + ";" : "";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
const pause = (ms = 1e3 / 30) => {
|
||||
return new uni_modules_wotDesignUni_components_common_AbortablePromise.AbortablePromise((resolve) => {
|
||||
const timer = setTimeout(() => {
|
||||
clearTimeout(timer);
|
||||
resolve(true);
|
||||
}, ms);
|
||||
});
|
||||
};
|
||||
function deepClone(obj, cache = /* @__PURE__ */ new Map()) {
|
||||
if (obj === null || typeof obj !== "object") {
|
||||
return obj;
|
||||
}
|
||||
if (isDate(obj)) {
|
||||
return new Date(obj.getTime());
|
||||
}
|
||||
if (obj instanceof RegExp) {
|
||||
return new RegExp(obj.source, obj.flags);
|
||||
}
|
||||
if (obj instanceof Error) {
|
||||
const errorCopy = new Error(obj.message);
|
||||
errorCopy.stack = obj.stack;
|
||||
return errorCopy;
|
||||
}
|
||||
if (cache.has(obj)) {
|
||||
return cache.get(obj);
|
||||
}
|
||||
const copy = Array.isArray(obj) ? [] : {};
|
||||
cache.set(obj, copy);
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
copy[key] = deepClone(obj[key], cache);
|
||||
}
|
||||
}
|
||||
return copy;
|
||||
}
|
||||
function deepMerge(target, source) {
|
||||
target = deepClone(target);
|
||||
if (typeof target !== "object" || typeof source !== "object") {
|
||||
throw new Error("Both target and source must be objects.");
|
||||
}
|
||||
for (const prop in source) {
|
||||
if (!source.hasOwnProperty(prop))
|
||||
continue;
|
||||
target[prop] = source[prop];
|
||||
}
|
||||
return target;
|
||||
}
|
||||
function deepAssign(target, source) {
|
||||
Object.keys(source).forEach((key) => {
|
||||
const targetValue = target[key];
|
||||
const newObjValue = source[key];
|
||||
if (isObj(targetValue) && isObj(newObjValue)) {
|
||||
deepAssign(targetValue, newObjValue);
|
||||
} else {
|
||||
target[key] = newObjValue;
|
||||
}
|
||||
});
|
||||
return target;
|
||||
}
|
||||
const getPropByPath = (obj, path) => {
|
||||
const keys = path.split(".");
|
||||
try {
|
||||
return keys.reduce((acc, key) => acc !== void 0 && acc !== null ? acc[key] : void 0, obj);
|
||||
} catch (error) {
|
||||
return void 0;
|
||||
}
|
||||
};
|
||||
const isDate = (val) => Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
|
||||
function omitBy(obj, predicate) {
|
||||
const newObj = deepClone(obj);
|
||||
Object.keys(newObj).forEach((key) => predicate(newObj[key], key) && delete newObj[key]);
|
||||
return newObj;
|
||||
}
|
||||
exports.addUnit = addUnit;
|
||||
exports.camelCase = camelCase;
|
||||
exports.context = context;
|
||||
exports.deepAssign = deepAssign;
|
||||
exports.deepMerge = deepMerge;
|
||||
exports.getPropByPath = getPropByPath;
|
||||
exports.getRect = getRect;
|
||||
exports.gradient = gradient;
|
||||
exports.isDef = isDef;
|
||||
exports.isEqual = isEqual;
|
||||
exports.isFunction = isFunction;
|
||||
exports.isNumber = isNumber;
|
||||
exports.isObj = isObj;
|
||||
exports.isPromise = isPromise;
|
||||
exports.isUndefined = isUndefined;
|
||||
exports.objToStyle = objToStyle;
|
||||
exports.omitBy = omitBy;
|
||||
exports.pause = pause;
|
||||
@@ -0,0 +1,3 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
require("../../locale/index.js");
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useParent = require("./useParent.js");
|
||||
var uni_modules_wotDesignUni_components_wdCellGroup_types = require("../wd-cell-group/types.js");
|
||||
function useCell() {
|
||||
const { parent: cellGroup, index } = uni_modules_wotDesignUni_components_composables_useParent.useParent(uni_modules_wotDesignUni_components_wdCellGroup_types.CELL_GROUP_KEY);
|
||||
const border = common_vendor.computed$1(() => {
|
||||
return cellGroup && cellGroup.props.border && index.value;
|
||||
});
|
||||
return { border };
|
||||
}
|
||||
exports.useCell = useCell;
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
function isVNode(value) {
|
||||
return value ? value.__v_isVNode === true : false;
|
||||
}
|
||||
function flattenVNodes(children) {
|
||||
const result = [];
|
||||
const traverse = (children2) => {
|
||||
if (Array.isArray(children2)) {
|
||||
children2.forEach((child) => {
|
||||
var _a;
|
||||
if (isVNode(child)) {
|
||||
result.push(child);
|
||||
if ((_a = child.component) == null ? void 0 : _a.subTree) {
|
||||
result.push(child.component.subTree);
|
||||
traverse(child.component.subTree.children);
|
||||
}
|
||||
if (child.children) {
|
||||
traverse(child.children);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
traverse(children);
|
||||
return result;
|
||||
}
|
||||
const findVNodeIndex = (vnodes, vnode) => {
|
||||
const index = vnodes.indexOf(vnode);
|
||||
if (index === -1) {
|
||||
return vnodes.findIndex((item) => vnode.key !== void 0 && vnode.key !== null && item.type === vnode.type && item.key === vnode.key);
|
||||
}
|
||||
return index;
|
||||
};
|
||||
function sortChildren(parent, publicChildren, internalChildren) {
|
||||
const vnodes = parent && parent.subTree && parent.subTree.children ? flattenVNodes(parent.subTree.children) : [];
|
||||
internalChildren.sort((a, b) => findVNodeIndex(vnodes, a.vnode) - findVNodeIndex(vnodes, b.vnode));
|
||||
const orderedPublicChildren = internalChildren.map((item) => item.proxy);
|
||||
publicChildren.sort((a, b) => {
|
||||
const indexA = orderedPublicChildren.indexOf(a);
|
||||
const indexB = orderedPublicChildren.indexOf(b);
|
||||
return indexA - indexB;
|
||||
});
|
||||
}
|
||||
function useChildren(key) {
|
||||
const publicChildren = common_vendor.reactive([]);
|
||||
const internalChildren = common_vendor.reactive([]);
|
||||
const parent = common_vendor.getCurrentInstance();
|
||||
const linkChildren = (value) => {
|
||||
const link = (child) => {
|
||||
if (child.proxy) {
|
||||
internalChildren.push(child);
|
||||
publicChildren.push(child.proxy);
|
||||
sortChildren(parent, publicChildren, internalChildren);
|
||||
}
|
||||
};
|
||||
const unlink = (child) => {
|
||||
const index = internalChildren.indexOf(child);
|
||||
publicChildren.splice(index, 1);
|
||||
internalChildren.splice(index, 1);
|
||||
};
|
||||
common_vendor.provide(
|
||||
key,
|
||||
Object.assign(
|
||||
{
|
||||
link,
|
||||
unlink,
|
||||
children: publicChildren,
|
||||
internalChildren
|
||||
},
|
||||
value
|
||||
)
|
||||
);
|
||||
};
|
||||
return {
|
||||
children: publicChildren,
|
||||
linkChildren
|
||||
};
|
||||
}
|
||||
exports.useChildren = useChildren;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
function useParent(key) {
|
||||
const parent = common_vendor.inject(key, null);
|
||||
if (parent) {
|
||||
const instance = common_vendor.getCurrentInstance();
|
||||
const { link, unlink, internalChildren } = parent;
|
||||
link(instance);
|
||||
common_vendor.onUnmounted(() => unlink(instance));
|
||||
const index = common_vendor.computed$1(() => internalChildren.indexOf(instance));
|
||||
return {
|
||||
parent,
|
||||
index
|
||||
};
|
||||
}
|
||||
return {
|
||||
parent: null,
|
||||
index: common_vendor.ref(-1)
|
||||
};
|
||||
}
|
||||
exports.useParent = useParent;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
var uni_modules_wotDesignUni_locale_index = require("../../locale/index.js");
|
||||
const useTranslate = (name) => {
|
||||
const prefix = name ? uni_modules_wotDesignUni_components_common_util.camelCase(name) + "." : "";
|
||||
const translate = (key, ...args) => {
|
||||
const currentMessages = uni_modules_wotDesignUni_locale_index.Locale.messages();
|
||||
const message = uni_modules_wotDesignUni_components_common_util.getPropByPath(currentMessages, prefix + key);
|
||||
return uni_modules_wotDesignUni_components_common_util.isFunction(message) ? message(...args) : uni_modules_wotDesignUni_components_common_util.isDef(message) ? message : `${prefix}${key}`;
|
||||
};
|
||||
return { translate };
|
||||
};
|
||||
exports.useTranslate = useTranslate;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
@@ -0,0 +1,15 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const badgeProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
modelValue: uni_modules_wotDesignUni_components_common_props.numericProp,
|
||||
showZero: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
bgColor: String,
|
||||
max: Number,
|
||||
isDot: Boolean,
|
||||
hidden: Boolean,
|
||||
type: uni_modules_wotDesignUni_components_common_props.makeStringProp(void 0),
|
||||
top: uni_modules_wotDesignUni_components_common_props.numericProp,
|
||||
right: uni_modules_wotDesignUni_components_common_props.numericProp
|
||||
};
|
||||
exports.badgeProps = badgeProps;
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_wdBadge_types = require("./types.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
require("../common/props.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
const __default__ = {
|
||||
name: "wd-badge",
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdBadge_types.badgeProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const content = common_vendor.computed$1(() => {
|
||||
const { modelValue, max, isDot } = props;
|
||||
if (isDot)
|
||||
return "";
|
||||
let value = modelValue;
|
||||
if (value && max && uni_modules_wotDesignUni_components_common_util.isNumber(value) && !Number.isNaN(value) && !Number.isNaN(max)) {
|
||||
value = max < value ? `${max}+` : value;
|
||||
}
|
||||
return value;
|
||||
});
|
||||
const contentStyle = common_vendor.computed$1(() => {
|
||||
const style = {};
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(props.bgColor)) {
|
||||
style.backgroundColor = props.bgColor;
|
||||
}
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(props.top)) {
|
||||
style.top = uni_modules_wotDesignUni_components_common_util.addUnit(props.top);
|
||||
}
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(props.right)) {
|
||||
style.right = uni_modules_wotDesignUni_components_common_util.addUnit(props.right);
|
||||
}
|
||||
return uni_modules_wotDesignUni_components_common_util.objToStyle(style);
|
||||
});
|
||||
const shouldShowBadge = common_vendor.computed$1(() => !props.hidden && (content.value || content.value === 0 && props.showZero || props.isDot));
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.unref(shouldShowBadge)
|
||||
}, common_vendor.unref(shouldShowBadge) ? {
|
||||
b: common_vendor.t(common_vendor.unref(content)),
|
||||
c: common_vendor.n(_ctx.type ? "wd-badge__content--" + _ctx.type : ""),
|
||||
d: common_vendor.n(_ctx.isDot ? "is-dot" : ""),
|
||||
e: common_vendor.s(common_vendor.unref(contentStyle))
|
||||
} : {}, {
|
||||
f: common_vendor.n(_ctx.customClass),
|
||||
g: common_vendor.s(_ctx.customStyle)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-63f38c73"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-63f38c73', 'wd-badge', f]}}" style="{{g}}"><slot></slot><view wx:if="{{a}}" class="{{['data-v-63f38c73', 'wd-badge__content', 'is-fixed', c, d]}}" style="{{e}}">{{b}}</view></view>
|
||||
+239
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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-badge__content.data-v-63f38c73 {
|
||||
border-color: var(--wot-dark-background2, #1b1b1b);
|
||||
}
|
||||
.wd-badge.data-v-63f38c73 {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
.wd-badge__content.data-v-63f38c73 {
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
height: var(--wot-badge-height, 16px);
|
||||
line-height: var(--wot-badge-height, 16px);
|
||||
padding: var(--wot-badge-padding, 0 5px);
|
||||
background-color: var(--wot-badge-bg, var(--wot-color-danger, #fa4350));
|
||||
border-radius: calc(var(--wot-badge-height, 16px) / 2 + 2px);
|
||||
color: var(--wot-badge-color, #fff);
|
||||
font-size: var(--wot-badge-fs, 12px);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: var(--wot-badge-border, 2px solid var(--wot-badge-color, #fff));
|
||||
font-weight: 500;
|
||||
}
|
||||
.wd-badge__content.is-fixed.data-v-63f38c73 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.wd-badge__content.is-dot.data-v-63f38c73 {
|
||||
height: var(--wot-badge-dot-size, 6px);
|
||||
width: var(--wot-badge-dot-size, 6px);
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.wd-badge__content--primary.data-v-63f38c73 {
|
||||
background-color: var(--wot-badge-primary, var(--wot-color-theme, #4d80f0));
|
||||
}
|
||||
.wd-badge__content--success.data-v-63f38c73 {
|
||||
background-color: var(--wot-badge-success, var(--wot-color-success, #34d19d));
|
||||
}
|
||||
.wd-badge__content--warning.data-v-63f38c73 {
|
||||
background-color: var(--wot-badge-warning, var(--wot-color-warning, #f0883a));
|
||||
}
|
||||
.wd-badge__content--info.data-v-63f38c73 {
|
||||
background-color: var(--wot-badge-info, var(--wot-color-info, #909399));
|
||||
}
|
||||
.wd-badge__content--danger.data-v-63f38c73 {
|
||||
background-color: var(--wot-badge-danger, var(--wot-color-danger, #fa4350));
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const buttonProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
plain: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
round: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
disabled: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
hairline: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
block: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
type: uni_modules_wotDesignUni_components_common_props.makeStringProp("primary"),
|
||||
size: uni_modules_wotDesignUni_components_common_props.makeStringProp("medium"),
|
||||
icon: String,
|
||||
classPrefix: uni_modules_wotDesignUni_components_common_props.makeStringProp("wd-icon"),
|
||||
loading: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
loadingColor: String,
|
||||
openType: String,
|
||||
hoverStopPropagation: Boolean,
|
||||
lang: String,
|
||||
sessionFrom: String,
|
||||
sendMessageTitle: String,
|
||||
sendMessagePath: String,
|
||||
sendMessageImg: String,
|
||||
appParameter: String,
|
||||
showMessageCard: Boolean,
|
||||
buttonId: String,
|
||||
scope: String
|
||||
};
|
||||
exports.buttonProps = buttonProps;
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_base64 = require("../common/base64.js");
|
||||
var uni_modules_wotDesignUni_components_wdButton_types = require("./types.js");
|
||||
require("../common/props.js");
|
||||
if (!Math) {
|
||||
wdIcon();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const __default__ = {
|
||||
name: "wd-button",
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdButton_types.buttonProps,
|
||||
emits: [
|
||||
"click",
|
||||
"getuserinfo",
|
||||
"contact",
|
||||
"getphonenumber",
|
||||
"getrealtimephonenumber",
|
||||
"error",
|
||||
"launchapp",
|
||||
"opensetting",
|
||||
"chooseavatar",
|
||||
"agreeprivacyauthorization"
|
||||
],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const loadingIcon = (color = "#4D80F0", reverse = true) => {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="a"><stop stop-color="${reverse ? color : "#fff"}" offset="0%" stop-opacity="0"/><stop stop-color="${reverse ? color : "#fff"}" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${reverse ? "#fff" : color}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`;
|
||||
};
|
||||
const hoverStartTime = common_vendor.ref(20);
|
||||
const hoverStayTime = common_vendor.ref(70);
|
||||
const loadingIconSvg = common_vendor.ref("");
|
||||
const loadingStyle = common_vendor.computed$1(() => {
|
||||
return `background-image: url(${loadingIconSvg.value});`;
|
||||
});
|
||||
common_vendor.watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
buildLoadingSvg();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
function handleClick(event) {
|
||||
if (!props.disabled && !props.loading) {
|
||||
emit("click", event);
|
||||
}
|
||||
}
|
||||
function handleGetAuthorize(event) {
|
||||
if (props.scope === "phoneNumber") {
|
||||
handleGetphonenumber(event);
|
||||
} else if (props.scope === "userInfo") {
|
||||
handleGetuserinfo(event);
|
||||
}
|
||||
}
|
||||
function handleGetuserinfo(event) {
|
||||
emit("getuserinfo", event.detail);
|
||||
}
|
||||
function handleConcat(event) {
|
||||
emit("contact", event.detail);
|
||||
}
|
||||
function handleGetphonenumber(event) {
|
||||
emit("getphonenumber", event.detail);
|
||||
}
|
||||
function handleGetrealtimephonenumber(event) {
|
||||
emit("getrealtimephonenumber", event.detail);
|
||||
}
|
||||
function handleError(event) {
|
||||
emit("error", event.detail);
|
||||
}
|
||||
function handleLaunchapp(event) {
|
||||
emit("launchapp", event.detail);
|
||||
}
|
||||
function handleOpensetting(event) {
|
||||
emit("opensetting", event.detail);
|
||||
}
|
||||
function handleChooseavatar(event) {
|
||||
emit("chooseavatar", event.detail);
|
||||
}
|
||||
function handleAgreePrivacyAuthorization(event) {
|
||||
emit("agreeprivacyauthorization", event.detail);
|
||||
}
|
||||
function buildLoadingSvg() {
|
||||
const { loadingColor, type, plain } = props;
|
||||
let color = loadingColor;
|
||||
if (!color) {
|
||||
switch (type) {
|
||||
case "primary":
|
||||
color = "#4D80F0";
|
||||
break;
|
||||
case "success":
|
||||
color = "#34d19d";
|
||||
break;
|
||||
case "info":
|
||||
color = "#333";
|
||||
break;
|
||||
case "warning":
|
||||
color = "#f0883a";
|
||||
break;
|
||||
case "error":
|
||||
color = "#fa4350";
|
||||
break;
|
||||
case "default":
|
||||
color = "#333";
|
||||
break;
|
||||
}
|
||||
}
|
||||
const svg = loadingIcon(color, !plain);
|
||||
loadingIconSvg.value = `"data:image/svg+xml;base64,${uni_modules_wotDesignUni_components_common_base64.encode(svg)}"`;
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.loading
|
||||
}, _ctx.loading ? {
|
||||
b: common_vendor.s(common_vendor.unref(loadingStyle))
|
||||
} : _ctx.icon ? {
|
||||
d: common_vendor.p({
|
||||
["custom-class"]: "wd-button__icon",
|
||||
name: _ctx.icon,
|
||||
classPrefix: _ctx.classPrefix
|
||||
})
|
||||
} : {}, {
|
||||
c: _ctx.icon,
|
||||
e: _ctx.buttonId,
|
||||
f: `${_ctx.disabled || _ctx.loading ? "" : "wd-button--active"}`,
|
||||
g: common_vendor.s(_ctx.customStyle),
|
||||
h: common_vendor.n("is-" + _ctx.type),
|
||||
i: common_vendor.n("is-" + _ctx.size),
|
||||
j: common_vendor.n(_ctx.round ? "is-round" : ""),
|
||||
k: common_vendor.n(_ctx.hairline ? "is-hairline" : ""),
|
||||
l: common_vendor.n(_ctx.plain ? "is-plain" : ""),
|
||||
m: common_vendor.n(_ctx.disabled ? "is-disabled" : ""),
|
||||
n: common_vendor.n(_ctx.block ? "is-block" : ""),
|
||||
o: common_vendor.n(_ctx.loading ? "is-loading" : ""),
|
||||
p: common_vendor.n(_ctx.customClass),
|
||||
q: hoverStartTime.value,
|
||||
r: hoverStayTime.value,
|
||||
s: _ctx.disabled || _ctx.loading ? void 0 : _ctx.openType,
|
||||
t: _ctx.sendMessageTitle,
|
||||
v: _ctx.sendMessagePath,
|
||||
w: _ctx.sendMessageImg,
|
||||
x: _ctx.appParameter,
|
||||
y: _ctx.showMessageCard,
|
||||
z: _ctx.sessionFrom,
|
||||
A: _ctx.lang,
|
||||
B: _ctx.hoverStopPropagation,
|
||||
C: _ctx.scope,
|
||||
D: common_vendor.o(handleClick),
|
||||
E: common_vendor.o(handleGetAuthorize),
|
||||
F: common_vendor.o(handleGetuserinfo),
|
||||
G: common_vendor.o(handleConcat),
|
||||
H: common_vendor.o(handleGetphonenumber),
|
||||
I: common_vendor.o(handleGetrealtimephonenumber),
|
||||
J: common_vendor.o(handleError),
|
||||
K: common_vendor.o(handleLaunchapp),
|
||||
L: common_vendor.o(handleOpensetting),
|
||||
M: common_vendor.o(handleChooseavatar),
|
||||
N: common_vendor.o(handleAgreePrivacyAuthorization)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-31484079"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<button id="{{e}}" hover-class="{{f}}" style="{{g}}" class="{{['data-v-31484079', 'wd-button', h, i, j, k, l, m, n, o, p]}}" hover-start-time="{{q}}" hover-stay-time="{{r}}" open-type="{{s}}" send-message-title="{{t}}" send-message-path="{{v}}" send-message-img="{{w}}" app-parameter="{{x}}" show-message-card="{{y}}" session-from="{{z}}" lang="{{A}}" hover-stop-propagation="{{B}}" scope="{{C}}" bindtap="{{D}}" bindgetAuthorize="{{E}}" bindgetuserinfo="{{F}}" bindcontact="{{G}}" bindgetphonenumber="{{H}}" bindgetrealtimephonenumber="{{I}}" binderror="{{J}}" bindlaunchapp="{{K}}" bindopensetting="{{L}}" bindchooseavatar="{{M}}" bindagreeprivacyauthorization="{{N}}"><view class="wd-button__content data-v-31484079"><view wx:if="{{a}}" class="wd-button__loading data-v-31484079"><view class="wd-button__loading-svg data-v-31484079" style="{{b}}"></view></view><wd-icon wx:elif="{{c}}" class="data-v-31484079" u-i="31484079-0" bind:__l="__l" u-p="{{d}}"></wd-icon><view class="wd-button__text data-v-31484079"><slot/></view></view></button>
|
||||
+465
@@ -0,0 +1,465 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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-button.is-info.data-v-31484079 {
|
||||
background: var(--wot-dark-background4, #323233);
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wot-theme-dark .wd-button.is-plain.data-v-31484079 {
|
||||
background: transparent;
|
||||
}
|
||||
.wot-theme-dark .wd-button.is-plain.is-info.data-v-31484079 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-button.is-plain.is-info.data-v-31484079::after {
|
||||
border-color: var(--wot-dark-background5, #646566);
|
||||
}
|
||||
.wot-theme-dark .wd-button.is-text.is-disabled.data-v-31484079 {
|
||||
color: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
|
||||
background: transparent;
|
||||
}
|
||||
.wot-theme-dark .wd-button.is-icon.data-v-31484079 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-button.is-icon.is-disabled.data-v-31484079 {
|
||||
color: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
|
||||
background: transparent;
|
||||
}
|
||||
.wd-button.data-v-31484079 {
|
||||
margin-left: initial;
|
||||
margin-right: initial;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: var(--wot-button-normal-color, var(--wot-color-title, var(--wot-color-black, rgb(0, 0, 0))));
|
||||
transition: opacity 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
.wd-button.data-v-31484079::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--wot-color-black, rgb(0, 0, 0));
|
||||
border: inherit;
|
||||
border-color: var(--wot-color-black, rgb(0, 0, 0));
|
||||
border-radius: inherit;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
content: " ";
|
||||
}
|
||||
.wd-button.data-v-31484079::after {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.wd-button__content.data-v-31484079 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.wd-button--active.data-v-31484079:active::before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
.wd-button.is-disabled.data-v-31484079 {
|
||||
opacity: var(--wot-button-disabled-opacity, 0.6);
|
||||
}
|
||||
.wd-button__loading.data-v-31484079 {
|
||||
margin-right: 5px;
|
||||
-webkit-animation: wd-rotate-31484079 0.8s linear infinite;
|
||||
animation: wd-rotate-31484079 0.8s linear infinite;
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
.wd-button__loading-svg.data-v-31484079 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.wd-button.is-primary.data-v-31484079 {
|
||||
background: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));
|
||||
color: var(--wot-button-primary-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-button.is-success.data-v-31484079 {
|
||||
background: var(--wot-button-success-bg-color, var(--wot-color-success, #34d19d));
|
||||
color: var(--wot-button-success-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-button.is-info.data-v-31484079 {
|
||||
background: var(--wot-button-info-bg-color, #f0f0f0);
|
||||
color: var(--wot-button-info-color, var(--wot-color-title, var(--wot-color-black, rgb(0, 0, 0))));
|
||||
}
|
||||
.wd-button.is-warning.data-v-31484079 {
|
||||
background: var(--wot-button-warning-bg-color, var(--wot-color-warning, #f0883a));
|
||||
color: var(--wot-button-warning-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-button.is-error.data-v-31484079 {
|
||||
background: var(--wot-button-error-bg-color, var(--wot-color-danger, #fa4350));
|
||||
color: var(--wot-button-error-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-button.is-small.data-v-31484079 {
|
||||
height: var(--wot-button-small-height, 28px);
|
||||
padding: var(--wot-button-small-padding, 0 12px);
|
||||
border-radius: var(--wot-button-small-radius, 2px);
|
||||
font-size: var(--wot-button-small-fs, var(--wot-fs-secondary, 12px));
|
||||
font-weight: normal;
|
||||
}
|
||||
.wd-button.is-small .wd-button__loading.data-v-31484079 {
|
||||
width: var(--wot-button-small-loading, 14px);
|
||||
height: var(--wot-button-small-loading, 14px);
|
||||
}
|
||||
.wd-button.is-medium.data-v-31484079 {
|
||||
height: var(--wot-button-medium-height, 36px);
|
||||
padding: var(--wot-button-medium-padding, 0 16px);
|
||||
border-radius: var(--wot-button-medium-radius, 4px);
|
||||
font-size: var(--wot-button-medium-fs, var(--wot-fs-content, 14px));
|
||||
min-width: 120px;
|
||||
}
|
||||
.wd-button.is-medium.is-round.is-icon.data-v-31484079 {
|
||||
min-width: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.wd-button.is-medium.is-round.is-text.data-v-31484079 {
|
||||
border-radius: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.wd-button.is-medium .wd-button__loading.data-v-31484079 {
|
||||
width: var(--wot-button-medium-loading, 18px);
|
||||
height: var(--wot-button-medium-loading, 18px);
|
||||
}
|
||||
.wd-button.is-large.data-v-31484079 {
|
||||
height: var(--wot-button-large-height, 44px);
|
||||
padding: var(--wot-button-large-padding, 0 36px);
|
||||
border-radius: var(--wot-button-large-radius, 8px);
|
||||
font-size: var(--wot-button-large-fs, var(--wot-fs-title, 16px));
|
||||
}
|
||||
.wd-button.is-large.data-v-31484079::after {
|
||||
border-radius: var(--wot-button-large-radius, 8px);
|
||||
}
|
||||
.wd-button.is-large .wd-button__loading.data-v-31484079 {
|
||||
width: var(--wot-button-large-loading, 24px);
|
||||
height: var(--wot-button-large-loading, 24px);
|
||||
}
|
||||
.wd-button.is-round.data-v-31484079 {
|
||||
border-radius: 999px;
|
||||
}
|
||||
.wd-button.is-text.data-v-31484079 {
|
||||
color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));
|
||||
min-width: 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.wd-button.is-text.data-v-31484079::after {
|
||||
display: none;
|
||||
}
|
||||
.wd-button.is-text.wd-button--active.data-v-31484079 {
|
||||
opacity: var(--wot-button-text-hover-opacity, 0.7);
|
||||
}
|
||||
.wd-button.is-text.wd-button--active.data-v-31484079:active::before {
|
||||
display: none;
|
||||
}
|
||||
.wd-button.is-text.is-disabled.data-v-31484079 {
|
||||
color: var(--wot-button-normal-disabled-color, rgba(0, 0, 0, 0.25));
|
||||
background: transparent;
|
||||
}
|
||||
.wd-button.is-plain.data-v-31484079 {
|
||||
background: var(--wot-button-plain-bg-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
.wd-button.is-plain.is-primary.data-v-31484079 {
|
||||
color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));
|
||||
}
|
||||
.wd-button.is-plain.is-success.data-v-31484079 {
|
||||
color: var(--wot-button-success-bg-color, var(--wot-color-success, #34d19d));
|
||||
}
|
||||
.wd-button.is-plain.is-info.data-v-31484079 {
|
||||
color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85));
|
||||
border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45));
|
||||
}
|
||||
.wd-button.is-plain.is-warning.data-v-31484079 {
|
||||
color: var(--wot-button-warning-bg-color, var(--wot-color-warning, #f0883a));
|
||||
}
|
||||
.wd-button.is-plain.is-error.data-v-31484079 {
|
||||
color: var(--wot-button-error-bg-color, var(--wot-color-danger, #fa4350));
|
||||
}
|
||||
.wd-button.is-hairline.data-v-31484079 {
|
||||
border-width: 0;
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.data-v-31484079 {
|
||||
position: relative;
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.data-v-31484079::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
pointer-events: none;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 1px solid var(--wot-color-border-light, #e8e8e8);
|
||||
transform: scale(0.5);
|
||||
box-sizing: border-box;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.data-v-31484079::before {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.data-v-31484079::after {
|
||||
border-color: inherit;
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.is-round.data-v-31484079::after {
|
||||
border-radius: inherit !important;
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.is-large.data-v-31484079::after {
|
||||
border-radius: calc(2 * var(--wot-button-large-radius, 8px));
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.is-medium.data-v-31484079::after {
|
||||
border-radius: calc(2 * var(--wot-button-medium-radius, 4px));
|
||||
}
|
||||
.wd-button.is-hairline.is-plain.is-small.data-v-31484079::after {
|
||||
border-radius: calc(2 * var(--wot-button-small-radius, 2px));
|
||||
}
|
||||
.wd-button.is-block.data-v-31484079 {
|
||||
display: block;
|
||||
}
|
||||
.wd-button.is-icon.data-v-31484079 {
|
||||
width: var(--wot-button-icon-size, 40px);
|
||||
height: var(--wot-button-icon-size, 40px);
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
color: var(--wot-button-icon-color, rgba(0, 0, 0, 0.65));
|
||||
}
|
||||
.wd-button.is-icon.data-v-31484079::after {
|
||||
display: none;
|
||||
}
|
||||
.wd-button.is-icon.data-v-31484079 .wd-button__icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
.wd-button.is-icon.is-disabled.data-v-31484079 {
|
||||
color: var(--wot-button-icon-disabled-color, var(--wot-color-icon-disabled, #a7a7a7));
|
||||
background: transparent;
|
||||
}
|
||||
.data-v-31484079 .wd-button__icon {
|
||||
display: block;
|
||||
margin-right: 6px;
|
||||
font-size: var(--wot-button-icon-fs, 18px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wd-button__text.data-v-31484079 {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@-webkit-keyframes wd-rotate-31484079 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes wd-rotate-31484079 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const cardProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
type: String,
|
||||
title: String,
|
||||
customTitleClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
customContentClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
customFooterClass: uni_modules_wotDesignUni_components_common_props.makeStringProp("")
|
||||
};
|
||||
exports.cardProps = cardProps;
|
||||
@@ -0,0 +1,40 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_wdCard_types = require("./types.js");
|
||||
require("../common/props.js");
|
||||
const __default__ = {
|
||||
name: "wd-card",
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdCard_types.cardProps,
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.title || _ctx.$slots.title
|
||||
}, _ctx.title || _ctx.$slots.title ? common_vendor.e({
|
||||
b: _ctx.title
|
||||
}, _ctx.title ? {
|
||||
c: common_vendor.t(_ctx.title)
|
||||
} : {}, {
|
||||
d: common_vendor.n(_ctx.customTitleClass)
|
||||
}) : {}, {
|
||||
e: common_vendor.n(`wd-card__content ${_ctx.customContentClass}`),
|
||||
f: _ctx.$slots.footer
|
||||
}, _ctx.$slots.footer ? {
|
||||
g: common_vendor.n(`wd-card__footer ${_ctx.customFooterClass}`)
|
||||
} : {}, {
|
||||
h: common_vendor.n(_ctx.type == "rectangle" ? "is-rectangle" : ""),
|
||||
i: common_vendor.n(_ctx.customClass),
|
||||
j: common_vendor.s(_ctx.customStyle)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-f064e216"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-f064e216', 'wd-card', h, i]}}" style="{{j}}"><view wx:if="{{a}}" class="{{['data-v-f064e216', 'wd-card__title-content', d]}}"><view class="wd-card__title data-v-f064e216"><text wx:if="{{b}}" class="data-v-f064e216">{{c}}</text><slot wx:else name="title"></slot></view></view><view class="{{['data-v-f064e216', e]}}"><slot></slot></view><view wx:if="{{f}}" class="{{['data-v-f064e216', g]}}"><slot name="footer"></slot></view></view>
|
||||
+290
@@ -0,0 +1,290 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 阴影
|
||||
*/
|
||||
.wot-theme-dark .wd-card.data-v-f064e216 {
|
||||
background-color: var(--wot-dark-background2, #1b1b1b);
|
||||
}
|
||||
.wot-theme-dark .wd-card.is-rectangle .wd-card__content.data-v-f064e216 {
|
||||
position: relative;
|
||||
}
|
||||
.wot-theme-dark .wd-card.is-rectangle .wd-card__content.data-v-f064e216::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.wot-theme-dark .wd-card.is-rectangle .wd-card__footer.data-v-f064e216 {
|
||||
position: relative;
|
||||
}
|
||||
.wot-theme-dark .wd-card.is-rectangle .wd-card__footer.data-v-f064e216::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.wot-theme-dark .wd-card__title-content.data-v-f064e216 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-card__content.data-v-f064e216 {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wd-card.data-v-f064e216 {
|
||||
padding: var(--wot-card-padding, 0 var(--wot-size-side-padding, 15px));
|
||||
background-color: var(--wot-card-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
line-height: var(--wot-card-line-height, 1.1);
|
||||
margin: var(--wot-card-margin, 0 var(--wot-size-side-padding, 15px));
|
||||
border-radius: var(--wot-card-radius, 8px);
|
||||
box-shadow: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02));
|
||||
font-size: var(--wot-card-fs, var(--wot-fs-content, 14px));
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.wd-card.is-rectangle.data-v-f064e216 {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.wd-card.is-rectangle .wd-card__title-content.data-v-f064e216 {
|
||||
font-size: var(--wot-card-fs, var(--wot-fs-content, 14px));
|
||||
}
|
||||
.wd-card.is-rectangle .wd-card__content.data-v-f064e216 {
|
||||
position: relative;
|
||||
padding: var(--wot-card-rectangle-content-padding, 16px 0);
|
||||
position: relative;
|
||||
}
|
||||
.wd-card.is-rectangle .wd-card__content.data-v-f064e216::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-card-content-border-color, rgba(0, 0, 0, 0.09));
|
||||
}
|
||||
.wd-card.is-rectangle .wd-card__footer.data-v-f064e216 {
|
||||
position: relative;
|
||||
padding: var(--wot-card-rectangle-footer-padding, 12px 0);
|
||||
position: relative;
|
||||
}
|
||||
.wd-card.is-rectangle .wd-card__footer.data-v-f064e216::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-card-content-border-color, rgba(0, 0, 0, 0.09));
|
||||
}
|
||||
.wd-card__title-content.data-v-f064e216 {
|
||||
padding: 16px 0;
|
||||
color: var(--wot-card-title-color, rgba(0, 0, 0, 0.85));
|
||||
font-size: var(--wot-card-title-fs, var(--wot-fs-title, 16px));
|
||||
}
|
||||
.wd-card__content.data-v-f064e216 {
|
||||
color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45));
|
||||
line-height: var(--wot-card-content-line-height, 1.428);
|
||||
}
|
||||
.wd-card__footer.data-v-f064e216 {
|
||||
padding: var(--wot-card-footer-padding, 12px 0 16px);
|
||||
text-align: right;
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const CELL_GROUP_KEY = Symbol("wd-cell-group");
|
||||
const cellGroupProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
title: String,
|
||||
value: String,
|
||||
useSlot: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
border: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false)
|
||||
};
|
||||
exports.CELL_GROUP_KEY = CELL_GROUP_KEY;
|
||||
exports.cellGroupProps = cellGroupProps;
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useChildren = require("../composables/useChildren.js");
|
||||
var uni_modules_wotDesignUni_components_wdCellGroup_types = require("./types.js");
|
||||
require("../common/props.js");
|
||||
const __default__ = {
|
||||
name: "wd-cell-group",
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdCellGroup_types.cellGroupProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const { linkChildren } = uni_modules_wotDesignUni_components_composables_useChildren.useChildren(uni_modules_wotDesignUni_components_wdCellGroup_types.CELL_GROUP_KEY);
|
||||
linkChildren({ props });
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.title || _ctx.value || _ctx.useSlot
|
||||
}, _ctx.title || _ctx.value || _ctx.useSlot ? common_vendor.e({
|
||||
b: !_ctx.$slots.title
|
||||
}, !_ctx.$slots.title ? {
|
||||
c: common_vendor.t(_ctx.title)
|
||||
} : {}, {
|
||||
d: !_ctx.$slots.value
|
||||
}, !_ctx.$slots.value ? {
|
||||
e: common_vendor.t(_ctx.value)
|
||||
} : {}) : {}, {
|
||||
f: common_vendor.n(_ctx.border ? "is-border" : ""),
|
||||
g: common_vendor.n(_ctx.customClass),
|
||||
h: common_vendor.s(_ctx.customStyle)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-7635c886"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-7635c886', 'wd-cell-group', f, g]}}" style="{{h}}"><view wx:if="{{a}}" class="wd-cell-group__title data-v-7635c886"><view class="wd-cell-group__left data-v-7635c886"><text wx:if="{{b}}" class="data-v-7635c886">{{c}}</text><slot wx:else name="title"></slot></view><view class="wd-cell-group__right data-v-7635c886"><text wx:if="{{d}}" class="data-v-7635c886">{{e}}</text><slot wx:else name="value"></slot></view></view><view class="wd-cell-group__body data-v-7635c886"><slot></slot></view></view>
|
||||
+251
@@ -0,0 +1,251 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 阴影
|
||||
*/
|
||||
.wot-theme-dark .wd-cell-group.data-v-7635c886 {
|
||||
background-color: var(--wot-dark-background2, #1b1b1b);
|
||||
}
|
||||
.wot-theme-dark .wd-cell-group.is-border .wd-cell-group__title.data-v-7635c886 {
|
||||
position: relative;
|
||||
}
|
||||
.wot-theme-dark .wd-cell-group.is-border .wd-cell-group__title.data-v-7635c886::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.wot-theme-dark .wd-cell-group__title.data-v-7635c886 {
|
||||
background: var(--wot-dark-background2, #1b1b1b);
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-cell-group__right.data-v-7635c886 {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wot-theme-dark .wd-cell-group__body.data-v-7635c886 {
|
||||
background: var(--wot-dark-background2, #1b1b1b);
|
||||
}
|
||||
.wd-cell-group.data-v-7635c886 {
|
||||
background-color: var(--wot-color-white, rgb(255, 255, 255));
|
||||
}
|
||||
.wd-cell-group.is-border .wd-cell-group__title.data-v-7635c886 {
|
||||
position: relative;
|
||||
}
|
||||
.wd-cell-group.is-border .wd-cell-group__title.data-v-7635c886::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-color-border-light, #e8e8e8);
|
||||
}
|
||||
.wd-cell-group__title.data-v-7635c886 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--wot-cell-group-padding, 13px var(--wot-cell-padding, var(--wot-size-side-padding, 15px)));
|
||||
background: var(--wot-color-white, rgb(255, 255, 255));
|
||||
font-size: var(--wot-cell-group-title-fs, var(--wot-fs-title, 16px));
|
||||
color: var(--wot-cell-group-title-color, rgba(0, 0, 0, 0.85));
|
||||
font-weight: var(--wot-fw-medium, 500);
|
||||
line-height: 1.43;
|
||||
}
|
||||
.wd-cell-group__right.data-v-7635c886 {
|
||||
color: var(--wot-cell-group-value-color, var(--wot-color-content, #262626));
|
||||
font-size: var(--wot-cell-group-value-fs, var(--wot-fs-content, 14px));
|
||||
}
|
||||
.wd-cell-group__body.data-v-7635c886 {
|
||||
background: var(--wot-color-white, rgb(255, 255, 255));
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const cellProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
title: String,
|
||||
value: uni_modules_wotDesignUni_components_common_props.makeNumericProp(""),
|
||||
icon: String,
|
||||
iconSize: uni_modules_wotDesignUni_components_common_props.numericProp,
|
||||
label: String,
|
||||
isLink: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
to: String,
|
||||
replace: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
clickable: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
size: String,
|
||||
border: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(void 0),
|
||||
titleWidth: String,
|
||||
center: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
required: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
vertical: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
prop: String,
|
||||
rules: uni_modules_wotDesignUni_components_common_props.makeArrayProp(),
|
||||
customIconClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
customLabelClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
customValueClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
customTitleClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
valueAlign: uni_modules_wotDesignUni_components_common_props.makeStringProp("right"),
|
||||
ellipsis: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
useTitleSlot: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
markerSide: uni_modules_wotDesignUni_components_common_props.makeStringProp("before")
|
||||
};
|
||||
exports.cellProps = cellProps;
|
||||
@@ -0,0 +1,128 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useCell = require("../composables/useCell.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useParent = require("../composables/useParent.js");
|
||||
var uni_modules_wotDesignUni_components_wdForm_types = require("../wd-form/types.js");
|
||||
var uni_modules_wotDesignUni_components_wdCell_types = require("./types.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
require("../wd-cell-group/types.js");
|
||||
require("../common/props.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
if (!Math) {
|
||||
wdIcon();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const __default__ = {
|
||||
name: "wd-cell",
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdCell_types.cellProps,
|
||||
emits: ["click"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const slots = common_vendor.useSlots();
|
||||
const cell = uni_modules_wotDesignUni_components_composables_useCell.useCell();
|
||||
const isBorder = common_vendor.computed$1(() => {
|
||||
return Boolean(uni_modules_wotDesignUni_components_common_util.isDef(props.border) ? props.border : cell.border.value);
|
||||
});
|
||||
const { parent: form } = uni_modules_wotDesignUni_components_composables_useParent.useParent(uni_modules_wotDesignUni_components_wdForm_types.FORM_KEY);
|
||||
const errorMessage = common_vendor.computed$1(() => {
|
||||
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
|
||||
return form.errorMessages[props.prop];
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
});
|
||||
const isRequired = common_vendor.computed$1(() => {
|
||||
let formRequired = false;
|
||||
if (form && form.props.rules) {
|
||||
const rules = form.props.rules;
|
||||
for (const key in rules) {
|
||||
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
|
||||
formRequired = rules[key].some((rule) => rule.required);
|
||||
}
|
||||
}
|
||||
}
|
||||
return props.required || props.rules.some((rule) => rule.required) || formRequired;
|
||||
});
|
||||
const showLeft = common_vendor.computed$1(() => {
|
||||
const hasIcon = slots.icon || props.icon;
|
||||
const hasTitle = slots.title && props.useTitleSlot || props.title;
|
||||
const hasLabel = slots.label || props.label;
|
||||
return hasIcon || hasTitle || hasLabel;
|
||||
});
|
||||
function onClick() {
|
||||
const url = props.to;
|
||||
if (props.clickable || props.isLink) {
|
||||
emit("click");
|
||||
}
|
||||
if (url && props.isLink) {
|
||||
if (props.replace) {
|
||||
common_vendor.index.redirectTo({ url });
|
||||
} else {
|
||||
common_vendor.index.navigateTo({ url });
|
||||
}
|
||||
}
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.unref(showLeft)
|
||||
}, common_vendor.unref(showLeft) ? common_vendor.e({
|
||||
b: common_vendor.unref(isRequired) && _ctx.markerSide === "before"
|
||||
}, common_vendor.unref(isRequired) && _ctx.markerSide === "before" ? {} : {}, {
|
||||
c: _ctx.icon
|
||||
}, _ctx.icon ? {
|
||||
d: common_vendor.p({
|
||||
name: _ctx.icon,
|
||||
size: _ctx.iconSize,
|
||||
["custom-class"]: `wd-cell__icon ${_ctx.customIconClass}`
|
||||
})
|
||||
} : {}, {
|
||||
e: _ctx.useTitleSlot && _ctx.$slots.title
|
||||
}, _ctx.useTitleSlot && _ctx.$slots.title ? {} : _ctx.title ? {
|
||||
g: common_vendor.t(_ctx.title),
|
||||
h: common_vendor.n(_ctx.customTitleClass)
|
||||
} : {}, {
|
||||
f: _ctx.title,
|
||||
i: _ctx.label
|
||||
}, _ctx.label ? {
|
||||
j: common_vendor.t(_ctx.label),
|
||||
k: common_vendor.n(`wd-cell__label ${_ctx.customLabelClass}`)
|
||||
} : {}, {
|
||||
l: common_vendor.unref(isRequired) && _ctx.markerSide === "after"
|
||||
}, common_vendor.unref(isRequired) && _ctx.markerSide === "after" ? {} : {}, {
|
||||
m: common_vendor.s(_ctx.titleWidth ? "min-width:" + _ctx.titleWidth + ";max-width:" + _ctx.titleWidth + ";" : "")
|
||||
}) : {}, {
|
||||
n: common_vendor.t(_ctx.value),
|
||||
o: common_vendor.n(`wd-cell__value ${_ctx.customValueClass} wd-cell__value--${_ctx.valueAlign} ${_ctx.ellipsis ? "wd-cell__value--ellipsis" : ""}`),
|
||||
p: _ctx.isLink
|
||||
}, _ctx.isLink ? {
|
||||
q: common_vendor.p({
|
||||
["custom-class"]: "wd-cell__arrow-right",
|
||||
name: "arrow-right"
|
||||
})
|
||||
} : {}, {
|
||||
r: common_vendor.unref(errorMessage)
|
||||
}, common_vendor.unref(errorMessage) ? {
|
||||
s: common_vendor.t(common_vendor.unref(errorMessage))
|
||||
} : {}, {
|
||||
t: common_vendor.n(_ctx.vertical ? "is-vertical" : ""),
|
||||
v: common_vendor.n(common_vendor.unref(isBorder) ? "is-border" : ""),
|
||||
w: common_vendor.n(_ctx.size ? "is-" + _ctx.size : ""),
|
||||
x: common_vendor.n(_ctx.center ? "is-center" : ""),
|
||||
y: common_vendor.n(_ctx.customClass),
|
||||
z: common_vendor.s(_ctx.customStyle),
|
||||
A: _ctx.isLink || _ctx.clickable ? "is-hover" : "none",
|
||||
B: common_vendor.o(onClick)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-3c2570ce"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-3c2570ce', 'wd-cell', v, w, x, y]}}" style="{{z}}" hover-class="{{A}}" hover-stay-time="{{70}}" bindtap="{{B}}"><view class="{{['data-v-3c2570ce', 'wd-cell__wrapper', t]}}"><view wx:if="{{a}}" class="wd-cell__left data-v-3c2570ce" style="{{m}}"><text wx:if="{{b}}" class="wd-cell__required wd-cell__required--left data-v-3c2570ce">*</text><block wx:if="{{$slots.icon}}"><slot name="icon"></slot></block><block wx:else><wd-icon wx:if="{{c}}" class="data-v-3c2570ce" u-i="3c2570ce-0" bind:__l="__l" u-p="{{d}}"></wd-icon></block><view class="wd-cell__title data-v-3c2570ce"><slot wx:if="{{e}}" name="title"></slot><text wx:elif="{{f}}" class="{{['data-v-3c2570ce', h]}}">{{g}}</text><block wx:if="{{$slots.label}}"><slot name="label"></slot></block><block wx:else><view wx:if="{{i}}" class="{{['data-v-3c2570ce', k]}}">{{j}}</view></block></view><text wx:if="{{l}}" class="wd-cell__required data-v-3c2570ce">*</text></view><view class="wd-cell__right data-v-3c2570ce"><view class="wd-cell__body data-v-3c2570ce"><view class="{{['data-v-3c2570ce', o]}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else>{{n}}</block></view><wd-icon wx:if="{{p}}" class="data-v-3c2570ce" u-i="3c2570ce-1" bind:__l="__l" u-p="{{q}}"/><slot wx:else name="right-icon"/></view><view wx:if="{{r}}" class="wd-cell__error-message data-v-3c2570ce">{{s}}</view></view></view></view>
|
||||
+371
@@ -0,0 +1,371 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 阴影
|
||||
*/
|
||||
.wot-theme-dark .wd-cell.data-v-3c2570ce {
|
||||
background-color: var(--wot-dark-background2, #1b1b1b);
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-cell__value.data-v-3c2570ce {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-cell__label.data-v-3c2570ce {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wot-theme-dark .wd-cell.is-hover.data-v-3c2570ce {
|
||||
background-color: var(--wot-dark-background4, #323233);
|
||||
}
|
||||
.wot-theme-dark .wd-cell.is-border .wd-cell__wrapper.data-v-3c2570ce {
|
||||
position: relative;
|
||||
}
|
||||
.wot-theme-dark .wd-cell.is-border .wd-cell__wrapper.data-v-3c2570ce::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.wot-theme-dark .wd-cell.data-v-3c2570ce .wd-cell__arrow-right {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-cell.data-v-3c2570ce {
|
||||
position: relative;
|
||||
padding-left: var(--wot-cell-padding, var(--wot-size-side-padding, 15px));
|
||||
background-color: var(--wot-color-white, rgb(255, 255, 255));
|
||||
text-decoration: none;
|
||||
color: var(--wot-cell-title-color, rgba(0, 0, 0, 0.85));
|
||||
line-height: var(--wot-cell-line-height, 24px);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wd-cell.is-border .wd-cell__wrapper.data-v-3c2570ce {
|
||||
position: relative;
|
||||
}
|
||||
.wd-cell.is-border .wd-cell__wrapper.data-v-3c2570ce::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-color-border-light, #e8e8e8);
|
||||
}
|
||||
.wd-cell__wrapper.data-v-3c2570ce {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: var(--wot-cell-wrapper-padding, 10px) var(--wot-cell-padding, var(--wot-size-side-padding, 15px)) var(--wot-cell-wrapper-padding, 10px) 0;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wd-cell__wrapper.is-vertical.data-v-3c2570ce {
|
||||
display: block;
|
||||
}
|
||||
.wd-cell__wrapper.is-vertical .wd-cell__right.data-v-3c2570ce {
|
||||
margin-top: var(--wot-cell-vertical-top, 16px);
|
||||
}
|
||||
.wd-cell__wrapper.is-vertical .wd-cell__value.data-v-3c2570ce {
|
||||
text-align: left;
|
||||
}
|
||||
.wd-cell__wrapper.is-vertical .wd-cell__left.data-v-3c2570ce {
|
||||
margin-right: 0;
|
||||
}
|
||||
.wd-cell__wrapper.is-label.data-v-3c2570ce {
|
||||
padding: var(--wot-cell-wrapper-padding-with-label, 16px) var(--wot-cell-padding, var(--wot-size-side-padding, 15px)) var(--wot-cell-wrapper-padding-with-label, 16px) 0;
|
||||
}
|
||||
.wd-cell__left.data-v-3c2570ce {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
font-size: var(--wot-cell-title-fs, 14px);
|
||||
box-sizing: border-box;
|
||||
margin-right: var(--wot-cell-padding, var(--wot-size-side-padding, 15px));
|
||||
}
|
||||
.wd-cell__right.data-v-3c2570ce {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.wd-cell__title.data-v-3c2570ce {
|
||||
font-size: var(--wot-cell-title-fs, 14px);
|
||||
}
|
||||
.wd-cell__required.data-v-3c2570ce {
|
||||
font-size: var(--wot-cell-required-size, 18px);
|
||||
color: var(--wot-cell-required-color, var(--wot-color-danger, #fa4350));
|
||||
margin-left: var(--wot-cell-required-margin, 4px);
|
||||
}
|
||||
.wd-cell__required--left.data-v-3c2570ce {
|
||||
margin-left: 0;
|
||||
margin-right: var(--wot-cell-required-margin, 4px);
|
||||
}
|
||||
.wd-cell__label.data-v-3c2570ce {
|
||||
margin-top: 2px;
|
||||
font-size: var(--wot-cell-label-fs, 12px);
|
||||
color: var(--wot-cell-label-color, rgba(0, 0, 0, 0.45));
|
||||
}
|
||||
.data-v-3c2570ce .wd-cell__icon {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-right: var(--wot-cell-icon-right, 4px);
|
||||
font-size: var(--wot-cell-icon-size, 16px);
|
||||
height: var(--wot-cell-line-height, 24px);
|
||||
line-height: var(--wot-cell-line-height, 24px);
|
||||
}
|
||||
.wd-cell__body.data-v-3c2570ce {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
}
|
||||
.wd-cell__value.data-v-3c2570ce {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
font-size: var(--wot-cell-value-fs, 14px);
|
||||
color: var(--wot-cell-value-color, rgba(0, 0, 0, 0.85));
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wd-cell__value--left.data-v-3c2570ce {
|
||||
text-align: left;
|
||||
}
|
||||
.wd-cell__value--right.data-v-3c2570ce {
|
||||
text-align: right;
|
||||
}
|
||||
.wd-cell__value--ellipsis.data-v-3c2570ce {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
.data-v-3c2570ce .wd-cell__arrow-right {
|
||||
display: block;
|
||||
margin-left: 8px;
|
||||
width: var(--wot-cell-arrow-size, 18px);
|
||||
font-size: var(--wot-cell-arrow-size, 18px);
|
||||
color: var(--wot-cell-arrow-color, rgba(0, 0, 0, 0.25));
|
||||
height: var(--wot-cell-line-height, 24px);
|
||||
line-height: var(--wot-cell-line-height, 24px);
|
||||
}
|
||||
.wd-cell__error-message.data-v-3c2570ce {
|
||||
color: var(--wot-form-item-error-message-color, var(--wot-color-danger, #fa4350));
|
||||
font-size: var(--wot-form-item-error-message-font-size, var(--wot-fs-secondary, 12px));
|
||||
line-height: var(--wot-form-item-error-message-line-height, 24px);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wd-cell.is-link.data-v-3c2570ce {
|
||||
-webkit-tap-highlight-color: var(--wot-cell-tap-bg, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
.wd-cell.is-hover.data-v-3c2570ce {
|
||||
background-color: var(--wot-cell-tap-bg, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
.wd-cell.is-large .wd-cell__title.data-v-3c2570ce {
|
||||
font-size: var(--wot-cell-title-fs-large, 16px);
|
||||
}
|
||||
.wd-cell.is-large .wd-cell__wrapper.data-v-3c2570ce {
|
||||
padding-top: var(--wot-cell-wrapper-padding-large, 12px);
|
||||
padding-bottom: var(--wot-cell-wrapper-padding-large, 12px);
|
||||
}
|
||||
.wd-cell.is-large .wd-cell__label.data-v-3c2570ce {
|
||||
font-size: var(--wot-cell-label-fs-large, 14px);
|
||||
}
|
||||
.wd-cell.is-large .wd-cell__value.data-v-3c2570ce {
|
||||
font-size: var(--wot-cell-value-fs-large, 16px);
|
||||
}
|
||||
.wd-cell.is-large.data-v-3c2570ce .wd-cell__icon {
|
||||
font-size: var(--wot-cell-icon-size-large, 18px);
|
||||
}
|
||||
.wd-cell.is-center .wd-cell__wrapper.data-v-3c2570ce {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const colProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
span: uni_modules_wotDesignUni_components_common_props.makeNumberProp(24),
|
||||
offset: uni_modules_wotDesignUni_components_common_props.makeNumberProp(0)
|
||||
};
|
||||
exports.colProps = colProps;
|
||||
@@ -0,0 +1,49 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useParent = require("../composables/useParent.js");
|
||||
var uni_modules_wotDesignUni_components_wdRow_types = require("../wd-row/types.js");
|
||||
var uni_modules_wotDesignUni_components_wdCol_types = require("./types.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
require("../common/props.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
const __default__ = {
|
||||
name: "wd-col",
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdCol_types.colProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const { parent: row } = uni_modules_wotDesignUni_components_composables_useParent.useParent(uni_modules_wotDesignUni_components_wdRow_types.ROW_KEY);
|
||||
const rootStyle = common_vendor.computed$1(() => {
|
||||
const gutter = uni_modules_wotDesignUni_components_common_util.isDef(row) ? row.props.gutter || 0 : 0;
|
||||
const padding = `${gutter / 2}px`;
|
||||
const style = gutter > 0 ? `padding-left: ${padding}; padding-right: ${padding};background-clip: content-box;` : "";
|
||||
return `${style}${props.customStyle}`;
|
||||
});
|
||||
common_vendor.watch([() => props.span, () => props.offset], () => {
|
||||
check();
|
||||
});
|
||||
function check() {
|
||||
const { span, offset } = props;
|
||||
if (span < 0 || offset < 0) {
|
||||
console.error("[wot-design] warning(wd-col): attribute span/offset must be greater than or equal to 0");
|
||||
}
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return {
|
||||
a: common_vendor.n(_ctx.span && "wd-col__" + _ctx.span),
|
||||
b: common_vendor.n(_ctx.offset && "wd-col__offset-" + _ctx.offset),
|
||||
c: common_vendor.n(_ctx.customClass),
|
||||
d: common_vendor.s(common_vendor.unref(rootStyle))
|
||||
};
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-62edcad3"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-62edcad3', 'wd-col', a, b, c]}}" style="{{d}}"><slot/></view>
|
||||
@@ -0,0 +1,337 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 阴影
|
||||
*/
|
||||
.wd-col.data-v-62edcad3 {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wd-col__1.data-v-62edcad3 {
|
||||
width: 4.1666666667%;
|
||||
}
|
||||
.wd-col__offset-1.data-v-62edcad3 {
|
||||
margin-left: 4.1666666667%;
|
||||
}
|
||||
.wd-col__2.data-v-62edcad3 {
|
||||
width: 8.3333333333%;
|
||||
}
|
||||
.wd-col__offset-2.data-v-62edcad3 {
|
||||
margin-left: 8.3333333333%;
|
||||
}
|
||||
.wd-col__3.data-v-62edcad3 {
|
||||
width: 12.5%;
|
||||
}
|
||||
.wd-col__offset-3.data-v-62edcad3 {
|
||||
margin-left: 12.5%;
|
||||
}
|
||||
.wd-col__4.data-v-62edcad3 {
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
.wd-col__offset-4.data-v-62edcad3 {
|
||||
margin-left: 16.6666666667%;
|
||||
}
|
||||
.wd-col__5.data-v-62edcad3 {
|
||||
width: 20.8333333333%;
|
||||
}
|
||||
.wd-col__offset-5.data-v-62edcad3 {
|
||||
margin-left: 20.8333333333%;
|
||||
}
|
||||
.wd-col__6.data-v-62edcad3 {
|
||||
width: 25%;
|
||||
}
|
||||
.wd-col__offset-6.data-v-62edcad3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.wd-col__7.data-v-62edcad3 {
|
||||
width: 29.1666666667%;
|
||||
}
|
||||
.wd-col__offset-7.data-v-62edcad3 {
|
||||
margin-left: 29.1666666667%;
|
||||
}
|
||||
.wd-col__8.data-v-62edcad3 {
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
.wd-col__offset-8.data-v-62edcad3 {
|
||||
margin-left: 33.3333333333%;
|
||||
}
|
||||
.wd-col__9.data-v-62edcad3 {
|
||||
width: 37.5%;
|
||||
}
|
||||
.wd-col__offset-9.data-v-62edcad3 {
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
.wd-col__10.data-v-62edcad3 {
|
||||
width: 41.6666666667%;
|
||||
}
|
||||
.wd-col__offset-10.data-v-62edcad3 {
|
||||
margin-left: 41.6666666667%;
|
||||
}
|
||||
.wd-col__11.data-v-62edcad3 {
|
||||
width: 45.8333333333%;
|
||||
}
|
||||
.wd-col__offset-11.data-v-62edcad3 {
|
||||
margin-left: 45.8333333333%;
|
||||
}
|
||||
.wd-col__12.data-v-62edcad3 {
|
||||
width: 50%;
|
||||
}
|
||||
.wd-col__offset-12.data-v-62edcad3 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.wd-col__13.data-v-62edcad3 {
|
||||
width: 54.1666666667%;
|
||||
}
|
||||
.wd-col__offset-13.data-v-62edcad3 {
|
||||
margin-left: 54.1666666667%;
|
||||
}
|
||||
.wd-col__14.data-v-62edcad3 {
|
||||
width: 58.3333333333%;
|
||||
}
|
||||
.wd-col__offset-14.data-v-62edcad3 {
|
||||
margin-left: 58.3333333333%;
|
||||
}
|
||||
.wd-col__15.data-v-62edcad3 {
|
||||
width: 62.5%;
|
||||
}
|
||||
.wd-col__offset-15.data-v-62edcad3 {
|
||||
margin-left: 62.5%;
|
||||
}
|
||||
.wd-col__16.data-v-62edcad3 {
|
||||
width: 66.6666666667%;
|
||||
}
|
||||
.wd-col__offset-16.data-v-62edcad3 {
|
||||
margin-left: 66.6666666667%;
|
||||
}
|
||||
.wd-col__17.data-v-62edcad3 {
|
||||
width: 70.8333333333%;
|
||||
}
|
||||
.wd-col__offset-17.data-v-62edcad3 {
|
||||
margin-left: 70.8333333333%;
|
||||
}
|
||||
.wd-col__18.data-v-62edcad3 {
|
||||
width: 75%;
|
||||
}
|
||||
.wd-col__offset-18.data-v-62edcad3 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.wd-col__19.data-v-62edcad3 {
|
||||
width: 79.1666666667%;
|
||||
}
|
||||
.wd-col__offset-19.data-v-62edcad3 {
|
||||
margin-left: 79.1666666667%;
|
||||
}
|
||||
.wd-col__20.data-v-62edcad3 {
|
||||
width: 83.3333333333%;
|
||||
}
|
||||
.wd-col__offset-20.data-v-62edcad3 {
|
||||
margin-left: 83.3333333333%;
|
||||
}
|
||||
.wd-col__21.data-v-62edcad3 {
|
||||
width: 87.5%;
|
||||
}
|
||||
.wd-col__offset-21.data-v-62edcad3 {
|
||||
margin-left: 87.5%;
|
||||
}
|
||||
.wd-col__22.data-v-62edcad3 {
|
||||
width: 91.6666666667%;
|
||||
}
|
||||
.wd-col__offset-22.data-v-62edcad3 {
|
||||
margin-left: 91.6666666667%;
|
||||
}
|
||||
.wd-col__23.data-v-62edcad3 {
|
||||
width: 95.8333333333%;
|
||||
}
|
||||
.wd-col__offset-23.data-v-62edcad3 {
|
||||
margin-left: 95.8333333333%;
|
||||
}
|
||||
.wd-col__24.data-v-62edcad3 {
|
||||
width: 100%;
|
||||
}
|
||||
.wd-col__offset-24.data-v-62edcad3 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
"use strict";
|
||||
const FORM_KEY = Symbol("wd-form");
|
||||
exports.FORM_KEY = FORM_KEY;
|
||||
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const iconProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
name: uni_modules_wotDesignUni_components_common_props.makeRequiredProp(String),
|
||||
color: String,
|
||||
size: uni_modules_wotDesignUni_components_common_props.numericProp,
|
||||
classPrefix: uni_modules_wotDesignUni_components_common_props.makeStringProp("wd-icon")
|
||||
};
|
||||
exports.iconProps = iconProps;
|
||||
@@ -0,0 +1,55 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
var uni_modules_wotDesignUni_components_wdIcon_types = require("./types.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
require("../common/props.js");
|
||||
const __default__ = {
|
||||
name: "wd-icon",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdIcon_types.iconProps,
|
||||
emits: ["click", "touch"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const isImage = common_vendor.computed$1(() => {
|
||||
return uni_modules_wotDesignUni_components_common_util.isDef(props.name) && props.name.includes("/");
|
||||
});
|
||||
const rootClass = common_vendor.computed$1(() => {
|
||||
const prefix = props.classPrefix;
|
||||
return `${prefix} ${props.customClass} ${isImage.value ? "wd-icon--image" : prefix + "-" + props.name}`;
|
||||
});
|
||||
const rootStyle = common_vendor.computed$1(() => {
|
||||
const style = {};
|
||||
if (props.color) {
|
||||
style["color"] = props.color;
|
||||
}
|
||||
if (props.size) {
|
||||
style["font-size"] = uni_modules_wotDesignUni_components_common_util.addUnit(props.size);
|
||||
}
|
||||
return `${uni_modules_wotDesignUni_components_common_util.objToStyle(style)} ${props.customStyle}`;
|
||||
});
|
||||
function handleClick(event) {
|
||||
emit("click", event);
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.unref(isImage)
|
||||
}, common_vendor.unref(isImage) ? {
|
||||
b: _ctx.name
|
||||
} : {}, {
|
||||
c: common_vendor.o(handleClick),
|
||||
d: common_vendor.n(common_vendor.unref(rootClass)),
|
||||
e: common_vendor.s(common_vendor.unref(rootStyle))
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-04f65fc7"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view bindtap="{{c}}" class="{{['data-v-04f65fc7', d]}}" style="{{e}}"><image wx:if="{{a}}" class="wd-icon__image data-v-04f65fc7" src="{{b}}"></image></view>
|
||||
+1102
File diff suppressed because it is too large
Load Diff
BIN
Binary file not shown.
@@ -0,0 +1,17 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const imgProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
customImage: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
src: String,
|
||||
previewSrc: String,
|
||||
round: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
mode: uni_modules_wotDesignUni_components_common_props.makeStringProp("scaleToFill"),
|
||||
lazyLoad: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
width: uni_modules_wotDesignUni_components_common_props.numericProp,
|
||||
height: uni_modules_wotDesignUni_components_common_props.numericProp,
|
||||
radius: uni_modules_wotDesignUni_components_common_props.numericProp,
|
||||
enablePreview: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
showMenuByLongpress: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false)
|
||||
};
|
||||
exports.imgProps = imgProps;
|
||||
@@ -0,0 +1,77 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
var uni_modules_wotDesignUni_components_wdImg_types = require("./types.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
require("../common/props.js");
|
||||
const __default__ = {
|
||||
name: "wd-img",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdImg_types.imgProps,
|
||||
emits: ["error", "click", "load"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const rootStyle = common_vendor.computed$1(() => {
|
||||
const style = {};
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(props.height)) {
|
||||
style["height"] = uni_modules_wotDesignUni_components_common_util.addUnit(props.height);
|
||||
}
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(props.width)) {
|
||||
style["width"] = uni_modules_wotDesignUni_components_common_util.addUnit(props.width);
|
||||
}
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(props.radius)) {
|
||||
style["border-radius"] = uni_modules_wotDesignUni_components_common_util.addUnit(props.radius);
|
||||
style["overflow"] = "hidden";
|
||||
}
|
||||
return `${uni_modules_wotDesignUni_components_common_util.objToStyle(style)}${props.customStyle}`;
|
||||
});
|
||||
const rootClass = common_vendor.computed$1(() => {
|
||||
return `wd-img ${props.round ? "is-round" : ""} ${props.customClass}`;
|
||||
});
|
||||
const status = common_vendor.ref("loading");
|
||||
function handleError(event) {
|
||||
status.value = "error";
|
||||
emit("error", event);
|
||||
}
|
||||
function handleClick(event) {
|
||||
if (props.enablePreview && props.src && status.value == "success") {
|
||||
common_vendor.index.previewImage({
|
||||
urls: [props.previewSrc || props.src]
|
||||
});
|
||||
}
|
||||
emit("click", event);
|
||||
}
|
||||
function handleLoad(event) {
|
||||
status.value = "success";
|
||||
emit("load", event);
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.n(`wd-img__image ${_ctx.customImage}`),
|
||||
b: common_vendor.s(status.value !== "success" ? "width: 0;height: 0;" : ""),
|
||||
c: _ctx.src,
|
||||
d: _ctx.mode,
|
||||
e: _ctx.showMenuByLongpress,
|
||||
f: _ctx.lazyLoad,
|
||||
g: common_vendor.o(handleLoad),
|
||||
h: common_vendor.o(handleError),
|
||||
i: status.value === "loading"
|
||||
}, status.value === "loading" ? {} : {}, {
|
||||
j: status.value === "error"
|
||||
}, status.value === "error" ? {} : {}, {
|
||||
k: common_vendor.n(common_vendor.unref(rootClass)),
|
||||
l: common_vendor.o(handleClick),
|
||||
m: common_vendor.s(common_vendor.unref(rootStyle))
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-37510d1a"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-37510d1a', k]}}" bindtap="{{l}}" style="{{m}}"><image class="{{['data-v-37510d1a', a]}}" style="{{b}}" src="{{c}}" mode="{{d}}" show-menu-by-longpress="{{e}}" lazy-load="{{f}}" bindload="{{g}}" binderror="{{h}}"/><slot wx:if="{{i}}" name="loading"></slot><slot wx:if="{{j}}" name="error"></slot></view>
|
||||
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
.wd-img.data-v-37510d1a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.wd-img__image.data-v-37510d1a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wd-img.is-round.data-v-37510d1a {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const inputProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
customInputClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
customLabelClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
placeholder: String,
|
||||
placeholderStyle: String,
|
||||
placeholderClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
cursorSpacing: uni_modules_wotDesignUni_components_common_props.makeNumberProp(0),
|
||||
cursor: uni_modules_wotDesignUni_components_common_props.makeNumberProp(-1),
|
||||
selectionStart: uni_modules_wotDesignUni_components_common_props.makeNumberProp(-1),
|
||||
selectionEnd: uni_modules_wotDesignUni_components_common_props.makeNumberProp(-1),
|
||||
adjustPosition: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
holdKeyboard: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
confirmType: uni_modules_wotDesignUni_components_common_props.makeStringProp("done"),
|
||||
confirmHold: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
focus: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
type: uni_modules_wotDesignUni_components_common_props.makeStringProp("text"),
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
disabled: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
alwaysEmbed: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
alignRight: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
modelValue: uni_modules_wotDesignUni_components_common_props.makeNumericProp(""),
|
||||
showPassword: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
clearable: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
readonly: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
prefixIcon: String,
|
||||
suffixIcon: String,
|
||||
showWordLimit: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
label: String,
|
||||
labelWidth: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
size: String,
|
||||
error: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
center: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
noBorder: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
required: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
prop: String,
|
||||
rules: uni_modules_wotDesignUni_components_common_props.makeArrayProp(),
|
||||
clearTrigger: uni_modules_wotDesignUni_components_common_props.makeStringProp("always"),
|
||||
focusWhenClear: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
ignoreCompositionEvent: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
inputmode: uni_modules_wotDesignUni_components_common_props.makeStringProp("text"),
|
||||
markerSide: uni_modules_wotDesignUni_components_common_props.makeStringProp("before")
|
||||
};
|
||||
exports.inputProps = inputProps;
|
||||
+295
@@ -0,0 +1,295 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useCell = require("../composables/useCell.js");
|
||||
var uni_modules_wotDesignUni_components_wdForm_types = require("../wd-form/types.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useParent = require("../composables/useParent.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useTranslate = require("../composables/useTranslate.js");
|
||||
var uni_modules_wotDesignUni_components_wdInput_types = require("./types.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
require("../wd-cell-group/types.js");
|
||||
require("../common/props.js");
|
||||
require("../../locale/index.js");
|
||||
require("../../locale/lang/zh-CN.js");
|
||||
if (!Math) {
|
||||
wdIcon();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const __default__ = {
|
||||
name: "wd-input",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdInput_types.inputProps,
|
||||
emits: [
|
||||
"update:modelValue",
|
||||
"clear",
|
||||
"blur",
|
||||
"focus",
|
||||
"input",
|
||||
"keyboardheightchange",
|
||||
"confirm",
|
||||
"clicksuffixicon",
|
||||
"clickprefixicon",
|
||||
"click"
|
||||
],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const slots = common_vendor.useSlots();
|
||||
const { translate } = uni_modules_wotDesignUni_components_composables_useTranslate.useTranslate("input");
|
||||
const isPwdVisible = common_vendor.ref(false);
|
||||
const clearing = common_vendor.ref(false);
|
||||
const focused = common_vendor.ref(false);
|
||||
const focusing = common_vendor.ref(false);
|
||||
const inputValue = common_vendor.ref(getInitValue());
|
||||
const cell = uni_modules_wotDesignUni_components_composables_useCell.useCell();
|
||||
common_vendor.watch(
|
||||
() => props.focus,
|
||||
(newValue) => {
|
||||
focused.value = newValue;
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
inputValue.value = uni_modules_wotDesignUni_components_common_util.isDef(newValue) ? String(newValue) : "";
|
||||
}
|
||||
);
|
||||
const { parent: form } = uni_modules_wotDesignUni_components_composables_useParent.useParent(uni_modules_wotDesignUni_components_wdForm_types.FORM_KEY);
|
||||
const placeholderValue = common_vendor.computed$1(() => {
|
||||
return uni_modules_wotDesignUni_components_common_util.isDef(props.placeholder) ? props.placeholder : translate("placeholder");
|
||||
});
|
||||
const showClear = common_vendor.computed$1(() => {
|
||||
const { disabled, readonly, clearable, clearTrigger } = props;
|
||||
if (clearable && !readonly && !disabled && inputValue.value && (clearTrigger === "always" || props.clearTrigger === "focus" && focusing.value)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
const showWordCount = common_vendor.computed$1(() => {
|
||||
const { disabled, readonly, maxlength, showWordLimit } = props;
|
||||
return Boolean(!disabled && !readonly && uni_modules_wotDesignUni_components_common_util.isDef(maxlength) && maxlength > -1 && showWordLimit);
|
||||
});
|
||||
const errorMessage = common_vendor.computed$1(() => {
|
||||
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
|
||||
return form.errorMessages[props.prop];
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
});
|
||||
const isRequired = common_vendor.computed$1(() => {
|
||||
let formRequired = false;
|
||||
if (form && form.props.rules) {
|
||||
const rules = form.props.rules;
|
||||
for (const key in rules) {
|
||||
if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
|
||||
formRequired = rules[key].some((rule) => rule.required);
|
||||
}
|
||||
}
|
||||
}
|
||||
return props.required || props.rules.some((rule) => rule.required) || formRequired;
|
||||
});
|
||||
const rootClass = common_vendor.computed$1(() => {
|
||||
return `wd-input ${props.label || slots.label ? "is-cell" : ""} ${props.center ? "is-center" : ""} ${cell.border.value ? "is-border" : ""} ${props.size ? "is-" + props.size : ""} ${props.error ? "is-error" : ""} ${props.disabled ? "is-disabled" : ""} ${inputValue.value && String(inputValue.value).length > 0 ? "is-not-empty" : ""} ${props.noBorder ? "is-no-border" : ""} ${props.customClass}`;
|
||||
});
|
||||
const labelClass = common_vendor.computed$1(() => {
|
||||
return `wd-input__label ${props.customLabelClass}`;
|
||||
});
|
||||
const inputPlaceholderClass = common_vendor.computed$1(() => {
|
||||
return `wd-input__placeholder ${props.placeholderClass}`;
|
||||
});
|
||||
const labelStyle = common_vendor.computed$1(() => {
|
||||
return props.labelWidth ? uni_modules_wotDesignUni_components_common_util.objToStyle({
|
||||
"min-width": props.labelWidth,
|
||||
"max-width": props.labelWidth
|
||||
}) : "";
|
||||
});
|
||||
function getInitValue() {
|
||||
const formatted = formatValue(props.modelValue);
|
||||
if (!isValueEqual(formatted, props.modelValue)) {
|
||||
emit("update:modelValue", formatted);
|
||||
}
|
||||
return formatted;
|
||||
}
|
||||
function formatValue(value) {
|
||||
const { maxlength } = props;
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(maxlength) && maxlength !== -1 && String(value).length > maxlength) {
|
||||
return value.toString().slice(0, maxlength);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
function togglePwdVisible() {
|
||||
isPwdVisible.value = !isPwdVisible.value;
|
||||
}
|
||||
async function handleClear() {
|
||||
focusing.value = false;
|
||||
inputValue.value = "";
|
||||
if (props.focusWhenClear) {
|
||||
clearing.value = true;
|
||||
focused.value = false;
|
||||
}
|
||||
await uni_modules_wotDesignUni_components_common_util.pause();
|
||||
if (props.focusWhenClear) {
|
||||
focused.value = true;
|
||||
focusing.value = true;
|
||||
}
|
||||
emit("update:modelValue", inputValue.value);
|
||||
emit("clear");
|
||||
}
|
||||
async function handleBlur() {
|
||||
await uni_modules_wotDesignUni_components_common_util.pause(150);
|
||||
if (clearing.value) {
|
||||
clearing.value = false;
|
||||
return;
|
||||
}
|
||||
focusing.value = false;
|
||||
emit("blur", {
|
||||
value: inputValue.value
|
||||
});
|
||||
}
|
||||
function handleFocus({ detail }) {
|
||||
focusing.value = true;
|
||||
emit("focus", detail);
|
||||
}
|
||||
function handleInput({ detail }) {
|
||||
emit("update:modelValue", inputValue.value);
|
||||
emit("input", detail);
|
||||
}
|
||||
function handleKeyboardheightchange({ detail }) {
|
||||
emit("keyboardheightchange", detail);
|
||||
}
|
||||
function handleConfirm({ detail }) {
|
||||
emit("confirm", detail);
|
||||
}
|
||||
function onClickSuffixIcon() {
|
||||
emit("clicksuffixicon");
|
||||
}
|
||||
function onClickPrefixIcon() {
|
||||
emit("clickprefixicon");
|
||||
}
|
||||
function handleClick(event) {
|
||||
emit("click", event);
|
||||
}
|
||||
function isValueEqual(value1, value2) {
|
||||
return uni_modules_wotDesignUni_components_common_util.isEqual(String(value1), String(value2));
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.label || _ctx.$slots.label
|
||||
}, _ctx.label || _ctx.$slots.label ? common_vendor.e({
|
||||
b: common_vendor.unref(isRequired) && _ctx.markerSide === "before"
|
||||
}, common_vendor.unref(isRequired) && _ctx.markerSide === "before" ? {} : {}, {
|
||||
c: _ctx.prefixIcon || _ctx.$slots.prefix
|
||||
}, _ctx.prefixIcon || _ctx.$slots.prefix ? common_vendor.e({
|
||||
d: _ctx.prefixIcon && !_ctx.$slots.prefix
|
||||
}, _ctx.prefixIcon && !_ctx.$slots.prefix ? {
|
||||
e: common_vendor.o(onClickPrefixIcon),
|
||||
f: common_vendor.p({
|
||||
["custom-class"]: "wd-input__icon",
|
||||
name: _ctx.prefixIcon
|
||||
})
|
||||
} : {}) : {}, {
|
||||
g: _ctx.label && !_ctx.$slots.label
|
||||
}, _ctx.label && !_ctx.$slots.label ? {
|
||||
h: common_vendor.t(_ctx.label)
|
||||
} : _ctx.$slots.label ? {} : {}, {
|
||||
i: _ctx.$slots.label,
|
||||
j: common_vendor.unref(isRequired) && _ctx.markerSide === "after"
|
||||
}, common_vendor.unref(isRequired) && _ctx.markerSide === "after" ? {} : {}, {
|
||||
k: common_vendor.n(common_vendor.unref(labelClass)),
|
||||
l: common_vendor.s(common_vendor.unref(labelStyle))
|
||||
}) : {}, {
|
||||
m: (_ctx.prefixIcon || _ctx.$slots.prefix) && !_ctx.label
|
||||
}, (_ctx.prefixIcon || _ctx.$slots.prefix) && !_ctx.label ? common_vendor.e({
|
||||
n: _ctx.prefixIcon && !_ctx.$slots.prefix
|
||||
}, _ctx.prefixIcon && !_ctx.$slots.prefix ? {
|
||||
o: common_vendor.o(onClickPrefixIcon),
|
||||
p: common_vendor.p({
|
||||
["custom-class"]: "wd-input__icon",
|
||||
name: _ctx.prefixIcon
|
||||
})
|
||||
} : {}) : {}, {
|
||||
q: common_vendor.n(_ctx.prefixIcon ? "wd-input__inner--prefix" : ""),
|
||||
r: common_vendor.n(common_vendor.unref(showWordCount) ? "wd-input__inner--count" : ""),
|
||||
s: common_vendor.n(_ctx.alignRight ? "is-align-right" : ""),
|
||||
t: common_vendor.n(_ctx.customInputClass),
|
||||
v: _ctx.type,
|
||||
w: _ctx.showPassword && !isPwdVisible.value,
|
||||
x: common_vendor.unref(placeholderValue),
|
||||
y: _ctx.disabled || _ctx.readonly,
|
||||
z: _ctx.maxlength,
|
||||
A: focused.value,
|
||||
B: _ctx.confirmType,
|
||||
C: _ctx.confirmHold,
|
||||
D: _ctx.cursor,
|
||||
E: _ctx.cursorSpacing,
|
||||
F: _ctx.placeholderStyle,
|
||||
G: _ctx.selectionStart,
|
||||
H: _ctx.selectionEnd,
|
||||
I: _ctx.adjustPosition,
|
||||
J: _ctx.holdKeyboard,
|
||||
K: _ctx.alwaysEmbed,
|
||||
L: common_vendor.unref(inputPlaceholderClass),
|
||||
M: _ctx.ignoreCompositionEvent,
|
||||
N: _ctx.inputmode,
|
||||
O: common_vendor.o([($event) => inputValue.value = $event.detail.value, handleInput]),
|
||||
P: common_vendor.o(handleFocus),
|
||||
Q: common_vendor.o(handleBlur),
|
||||
R: common_vendor.o(handleConfirm),
|
||||
S: common_vendor.o(handleKeyboardheightchange),
|
||||
T: inputValue.value,
|
||||
U: props.readonly
|
||||
}, props.readonly ? {} : {}, {
|
||||
V: common_vendor.unref(showClear) || _ctx.showPassword || _ctx.suffixIcon || common_vendor.unref(showWordCount) || _ctx.$slots.suffix
|
||||
}, common_vendor.unref(showClear) || _ctx.showPassword || _ctx.suffixIcon || common_vendor.unref(showWordCount) || _ctx.$slots.suffix ? common_vendor.e({
|
||||
W: common_vendor.unref(showClear)
|
||||
}, common_vendor.unref(showClear) ? {
|
||||
X: common_vendor.o(handleClear),
|
||||
Y: common_vendor.p({
|
||||
["custom-class"]: "wd-input__clear",
|
||||
name: "error-fill"
|
||||
})
|
||||
} : {}, {
|
||||
Z: _ctx.showPassword
|
||||
}, _ctx.showPassword ? {
|
||||
aa: common_vendor.o(togglePwdVisible),
|
||||
ab: common_vendor.p({
|
||||
["custom-class"]: "wd-input__icon",
|
||||
name: isPwdVisible.value ? "view" : "eye-close"
|
||||
})
|
||||
} : {}, {
|
||||
ac: common_vendor.unref(showWordCount)
|
||||
}, common_vendor.unref(showWordCount) ? {
|
||||
ad: common_vendor.t(String(inputValue.value).length),
|
||||
ae: common_vendor.n(inputValue.value && String(inputValue.value).length > 0 ? "wd-input__count-current" : ""),
|
||||
af: common_vendor.n(String(inputValue.value).length > _ctx.maxlength ? "is-error" : ""),
|
||||
ag: common_vendor.t(_ctx.maxlength)
|
||||
} : {}, {
|
||||
ah: _ctx.suffixIcon && !_ctx.$slots.suffix
|
||||
}, _ctx.suffixIcon && !_ctx.$slots.suffix ? {
|
||||
ai: common_vendor.o(onClickSuffixIcon),
|
||||
aj: common_vendor.p({
|
||||
["custom-class"]: "wd-input__icon",
|
||||
name: _ctx.suffixIcon
|
||||
})
|
||||
} : {}) : {}, {
|
||||
ak: common_vendor.unref(errorMessage)
|
||||
}, common_vendor.unref(errorMessage) ? {
|
||||
al: common_vendor.t(common_vendor.unref(errorMessage))
|
||||
} : {}, {
|
||||
am: common_vendor.n(common_vendor.unref(rootClass)),
|
||||
an: common_vendor.s(_ctx.customStyle),
|
||||
ao: common_vendor.o(handleClick)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-7d365853"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-7d365853', am]}}" style="{{an}}" bindtap="{{ao}}"><view wx:if="{{a}}" class="{{['data-v-7d365853', k]}}" style="{{l}}"><text wx:if="{{b}}" class="wd-input__required wd-input__required--left data-v-7d365853">*</text><view wx:if="{{c}}" class="wd-input__prefix data-v-7d365853"><wd-icon wx:if="{{d}}" class="data-v-7d365853" bindclick="{{e}}" u-i="7d365853-0" bind:__l="__l" u-p="{{f}}"/><slot wx:else name="prefix"></slot></view><view class="wd-input__label-inner data-v-7d365853"><text wx:if="{{g}}" class="data-v-7d365853">{{h}}</text><slot wx:elif="{{i}}" name="label"></slot></view><text wx:if="{{j}}" class="wd-input__required data-v-7d365853">*</text></view><view class="wd-input__body data-v-7d365853"><view class="wd-input__value data-v-7d365853"><view wx:if="{{m}}" class="wd-input__prefix data-v-7d365853"><wd-icon wx:if="{{n}}" class="data-v-7d365853" bindclick="{{o}}" u-i="7d365853-1" bind:__l="__l" u-p="{{p}}"/><slot wx:else name="prefix"></slot></view><block wx:if="{{r0}}"><input class="{{['data-v-7d365853', 'wd-input__inner', q, r, s, t]}}" type="{{v}}" password="{{w}}" placeholder="{{x}}" disabled="{{y}}" maxlength="{{z}}" focus="{{A}}" confirm-type="{{B}}" confirm-hold="{{C}}" cursor="{{D}}" cursor-spacing="{{E}}" placeholder-style="{{F}}" selection-start="{{G}}" selection-end="{{H}}" adjust-position="{{I}}" hold-keyboard="{{J}}" always-embed="{{K}}" placeholder-class="{{L}}" ignoreCompositionEvent="{{M}}" inputmode="{{N}}" bindinput="{{O}}" bindfocus="{{P}}" bindblur="{{Q}}" bindconfirm="{{R}}" bindkeyboardheightchange="{{S}}" value="{{T}}"/></block><view wx:if="{{U}}" class="wd-input__readonly-mask data-v-7d365853"/><view wx:if="{{V}}" class="wd-input__suffix data-v-7d365853"><wd-icon wx:if="{{W}}" class="data-v-7d365853" bindclick="{{X}}" u-i="7d365853-2" bind:__l="__l" u-p="{{Y}}"/><wd-icon wx:if="{{Z}}" class="data-v-7d365853" bindclick="{{aa}}" u-i="7d365853-3" bind:__l="__l" u-p="{{ab}}"/><view wx:if="{{ac}}" class="wd-input__count data-v-7d365853"><text class="{{['data-v-7d365853', ae, af]}}">{{ad}}</text> /{{ag}}</view><wd-icon wx:if="{{ah}}" class="data-v-7d365853" bindclick="{{ai}}" u-i="7d365853-4" bind:__l="__l" u-p="{{aj}}"/><slot wx:else name="suffix"></slot></view></view><view wx:if="{{ak}}" class="wd-input__error-message data-v-7d365853">{{al}}</view></view></view>
|
||||
+646
@@ -0,0 +1,646 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 阴影
|
||||
*/
|
||||
.wot-theme-dark .wd-input.data-v-7d365853 {
|
||||
background: var(--wot-dark-background2, #1b1b1b);
|
||||
}
|
||||
.wot-theme-dark .wd-input.data-v-7d365853::after {
|
||||
background: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
|
||||
}
|
||||
.wot-theme-dark .wd-input.is-not-empty.data-v-7d365853:not(.is-disabled)::after {
|
||||
background-color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-input__inner.data-v-7d365853 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-input__inner.data-v-7d365853::-webkit-input-placeholder {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wot-theme-dark .wd-input__count.data-v-7d365853 {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
background: transparent;
|
||||
}
|
||||
.wot-theme-dark .wd-input__count-current.data-v-7d365853 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-input.data-v-7d365853 .wd-input__icon,
|
||||
.wot-theme-dark .wd-input.data-v-7d365853 .wd-input__clear {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
background: transparent;
|
||||
}
|
||||
.wot-theme-dark .wd-input.is-cell.data-v-7d365853 {
|
||||
background-color: var(--wot-dark-background2, #1b1b1b);
|
||||
line-height: var(--wot-cell-line-height, 24px);
|
||||
}
|
||||
.wot-theme-dark .wd-input.is-cell.is-border.data-v-7d365853 {
|
||||
position: relative;
|
||||
}
|
||||
.wot-theme-dark .wd-input.is-cell.is-border.data-v-7d365853::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: calc(100% - var(--wot-input-cell-padding, 10px));
|
||||
height: 1px;
|
||||
left: var(--wot-input-cell-padding, 10px);
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.wot-theme-dark .wd-input.is-disabled .wd-input__inner.data-v-7d365853 {
|
||||
color: var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));
|
||||
background: transparent;
|
||||
}
|
||||
.wot-theme-dark .wd-input__label.data-v-7d365853 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-input.data-v-7d365853 {
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
text-align: left;
|
||||
background: var(--wot-input-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-input.data-v-7d365853::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--wot-input-border-color, #dadada);
|
||||
transform: scaleY(0.5);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
.wd-input.is-not-empty.data-v-7d365853:not(.is-disabled)::after {
|
||||
background-color: var(--wot-input-not-empty-border-color, #262626);
|
||||
}
|
||||
.wd-input__label.data-v-7d365853 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: var(--wot-input-cell-label-width, 33%);
|
||||
color: var(--wot-cell-title-color, rgba(0, 0, 0, 0.85));
|
||||
margin-right: var(--wot-cell-padding, var(--wot-size-side-padding, 15px));
|
||||
box-sizing: border-box;
|
||||
font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wd-input__label-inner.data-v-7d365853 {
|
||||
display: inline-block;
|
||||
font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
|
||||
line-height: var(--wot-cell-line-height, 24px);
|
||||
}
|
||||
.wd-input__required.data-v-7d365853 {
|
||||
font-size: var(--wot-cell-required-size, 18px);
|
||||
color: var(--wot-cell-required-color, var(--wot-color-danger, #fa4350));
|
||||
margin-left: var(--wot-cell-required-margin, 4px);
|
||||
}
|
||||
.wd-input__required--left.data-v-7d365853 {
|
||||
margin-left: 0;
|
||||
margin-right: var(--wot-cell-required-margin, 4px);
|
||||
}
|
||||
.wd-input__body.data-v-7d365853 {
|
||||
flex: 1;
|
||||
}
|
||||
.wd-input__value.data-v-7d365853 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.wd-input__prefix.data-v-7d365853 {
|
||||
margin-right: var(--wot-input-icon-margin, 8px);
|
||||
font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
|
||||
line-height: initial;
|
||||
}
|
||||
.wd-input__prefix.data-v-7d365853 .wd-input__icon,
|
||||
.wd-input__prefix.data-v-7d365853 .wd-input__clear {
|
||||
margin-left: 0;
|
||||
}
|
||||
.wd-input__suffix.data-v-7d365853 {
|
||||
flex-shrink: 0;
|
||||
line-height: initial;
|
||||
}
|
||||
.wd-input__error-message.data-v-7d365853 {
|
||||
color: var(--wot-form-item-error-message-color, var(--wot-color-danger, #fa4350));
|
||||
font-size: var(--wot-form-item-error-message-font-size, var(--wot-fs-secondary, 12px));
|
||||
line-height: var(--wot-form-item-error-message-line-height, 24px);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wd-input.is-disabled .wd-input__inner.data-v-7d365853 {
|
||||
color: var(--wot-input-disabled-color, #d9d9d9);
|
||||
background: transparent;
|
||||
}
|
||||
.wd-input.is-error .wd-input__inner.data-v-7d365853 {
|
||||
color: var(--wot-input-error-color, var(--wot-color-danger, #fa4350));
|
||||
background: transparent;
|
||||
}
|
||||
.wd-input.is-no-border.data-v-7d365853::after {
|
||||
display: none;
|
||||
}
|
||||
.wd-input.is-no-border .wd-input__inner.data-v-7d365853 {
|
||||
height: var(--wot-input-inner-height-no-border, 24px);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.wd-input.is-cell.data-v-7d365853 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: var(--wot-input-cell-padding, 10px) var(--wot-input-padding, var(--wot-size-side-padding, 15px));
|
||||
background-color: var(--wot-input-cell-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-input.is-cell.is-error.data-v-7d365853::after {
|
||||
background: var(--wot-input-cell-border-color, var(--wot-color-border-light, #e8e8e8));
|
||||
}
|
||||
.wd-input.is-cell.data-v-7d365853 .wd-input__icon,
|
||||
.wd-input.is-cell.data-v-7d365853 .wd-input__clear {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: var(--wot-input-cell-height, 24px);
|
||||
line-height: var(--wot-input-cell-height, 24px);
|
||||
}
|
||||
.wd-input.is-cell .wd-input__prefix.data-v-7d365853 {
|
||||
display: inline-block;
|
||||
margin-right: var(--wot-cell-icon-right, 4px);
|
||||
}
|
||||
.wd-input.is-cell .wd-input__inner.data-v-7d365853 {
|
||||
height: var(--wot-input-cell-height, 24px);
|
||||
}
|
||||
.wd-input.is-cell.wd-input.data-v-7d365853::after {
|
||||
display: none;
|
||||
}
|
||||
.wd-input.is-cell.is-center.data-v-7d365853 {
|
||||
align-items: center;
|
||||
}
|
||||
.wd-input.is-cell.is-border.data-v-7d365853 {
|
||||
position: relative;
|
||||
}
|
||||
.wd-input.is-cell.is-border.data-v-7d365853::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: calc(100% - var(--wot-input-cell-padding, 10px));
|
||||
height: 1px;
|
||||
left: var(--wot-input-cell-padding, 10px);
|
||||
top: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-color-border-light, #e8e8e8);
|
||||
}
|
||||
.wd-input.is-large.data-v-7d365853 {
|
||||
padding: var(--wot-input-cell-padding-large, 12px);
|
||||
}
|
||||
.wd-input.is-large .wd-input__prefix.data-v-7d365853 {
|
||||
font-size: var(--wot-input-fs-large, var(--wot-cell-title-fs-large, 16px));
|
||||
}
|
||||
.wd-input.is-large .wd-input__label-inner.data-v-7d365853 {
|
||||
font-size: var(--wot-input-fs-large, var(--wot-cell-title-fs-large, 16px));
|
||||
}
|
||||
.wd-input.is-large .wd-input__inner.data-v-7d365853 {
|
||||
font-size: var(--wot-input-fs-large, var(--wot-cell-title-fs-large, 16px));
|
||||
}
|
||||
.wd-input.is-large .wd-input__count.data-v-7d365853 {
|
||||
font-size: var(--wot-input-count-fs-large, 14px);
|
||||
}
|
||||
.wd-input.is-large.data-v-7d365853 .wd-input__icon,
|
||||
.wd-input.is-large.data-v-7d365853 .wd-input__clear {
|
||||
font-size: var(--wot-input-icon-size-large, 18px);
|
||||
}
|
||||
.wd-input__inner.data-v-7d365853 {
|
||||
flex: 1;
|
||||
height: var(--wot-input-inner-height, 34px);
|
||||
font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
|
||||
color: var(--wot-input-color, #262626);
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wd-input__inner.data-v-7d365853::-webkit-input-placeholder {
|
||||
color: var(--wot-input-placeholder-color, #bfbfbf);
|
||||
}
|
||||
.wd-input__inner.is-align-right.data-v-7d365853 {
|
||||
text-align: right;
|
||||
}
|
||||
.wd-input__readonly-mask.data-v-7d365853 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.data-v-7d365853 .wd-input__icon {
|
||||
margin-left: var(--wot-input-icon-margin, 8px);
|
||||
font-size: var(--wot-input-icon-size, 16px);
|
||||
color: var(--wot-input-icon-color, #bfbfbf);
|
||||
vertical-align: middle;
|
||||
background: var(--wot-input-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.data-v-7d365853 .wd-input__clear {
|
||||
margin-left: var(--wot-input-icon-margin, 8px);
|
||||
font-size: var(--wot-input-icon-size, 16px);
|
||||
color: var(--wot-input-clear-color, #585858);
|
||||
vertical-align: middle;
|
||||
background: var(--wot-input-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-input__count.data-v-7d365853 {
|
||||
margin-left: 15px;
|
||||
font-size: var(--wot-input-count-fs, 14px);
|
||||
color: var(--wot-input-count-color, #bfbfbf);
|
||||
vertical-align: middle;
|
||||
background: var(--wot-input-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-input__count-current.data-v-7d365853 {
|
||||
color: var(--wot-input-count-current-color, #262626);
|
||||
}
|
||||
.wd-input__count-current.is-error.data-v-7d365853 {
|
||||
color: var(--wot-input-error-color, var(--wot-color-danger, #fa4350));
|
||||
}
|
||||
.wd-input .wd-input__count.data-v-7d365853,
|
||||
.wd-input .wd-input__count-current.data-v-7d365853 {
|
||||
display: inline-flex;
|
||||
}
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 阴影
|
||||
*/
|
||||
.wot-theme-dark .wd-input__placeholder {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wd-input__placeholder {
|
||||
color: var(--wot-input-placeholder-color, #bfbfbf);
|
||||
}
|
||||
.wd-input__placeholder.is-error {
|
||||
color: var(--wot-input-error-color, var(--wot-color-danger, #fa4350));
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const loadingProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
type: uni_modules_wotDesignUni_components_common_props.makeStringProp("ring"),
|
||||
color: uni_modules_wotDesignUni_components_common_props.makeStringProp("#4D80F0"),
|
||||
size: uni_modules_wotDesignUni_components_common_props.makeNumericProp("")
|
||||
};
|
||||
exports.loadingProps = loadingProps;
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_base64 = require("../common/base64.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
var uni_modules_wotDesignUni_components_wdLoading_types = require("./types.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
require("../common/props.js");
|
||||
const __default__ = {
|
||||
name: "wd-loading",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdLoading_types.loadingProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const svgDefineId = uni_modules_wotDesignUni_components_common_util.context.id++;
|
||||
const svgDefineId1 = uni_modules_wotDesignUni_components_common_util.context.id++;
|
||||
const svgDefineId2 = uni_modules_wotDesignUni_components_common_util.context.id++;
|
||||
const icon = {
|
||||
outline(color = "#4D80F0") {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="${svgDefineId}"><stop stop-color="#FFF" offset="0%" stop-opacity="0"/><stop stop-color="#FFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${color}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#${svgDefineId}) " stroke-width="3.5" stroke-linecap="round"/></g></svg>`;
|
||||
},
|
||||
ring(color = "#4D80F0", intermediateColor2 = "#a6bff7") {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><linearGradient id="${svgDefineId1}" gradientUnits="userSpaceOnUse" x1="50" x2="50" y2="180"><stop offset="0" stop-color="${color}"></stop> <stop offset="1" stop-color="${intermediateColor2}"></stop></linearGradient> <path fill="url(#${svgDefineId1})" d="M20 100c0-44.1 35.9-80 80-80V0C44.8 0 0 44.8 0 100s44.8 100 100 100v-20c-44.1 0-80-35.9-80-80z"></path> <linearGradient id="${svgDefineId2}" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180"><stop offset="0" stop-color="#fff" stop-opacity="0"></stop> <stop offset="1" stop-color="${intermediateColor2}"></stop></linearGradient> <path fill="url(#${svgDefineId2})" d="M100 0v20c44.1 0 80 35.9 80 80s-35.9 80-80 80v20c55.2 0 100-44.8 100-100S155.2 0 100 0z"></path> <circle cx="100" cy="10" r="10" fill="${color}"></circle></svg>`;
|
||||
}
|
||||
};
|
||||
const svg = common_vendor.ref("");
|
||||
const intermediateColor = common_vendor.ref("");
|
||||
const iconSize = common_vendor.ref(null);
|
||||
common_vendor.watch(
|
||||
() => props.size,
|
||||
(newVal) => {
|
||||
iconSize.value = uni_modules_wotDesignUni_components_common_util.addUnit(newVal);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => props.type,
|
||||
() => {
|
||||
buildSvg();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
const rootStyle = common_vendor.computed$1(() => {
|
||||
const style = {};
|
||||
if (uni_modules_wotDesignUni_components_common_util.isDef(iconSize.value)) {
|
||||
style.height = uni_modules_wotDesignUni_components_common_util.addUnit(iconSize.value);
|
||||
style.width = uni_modules_wotDesignUni_components_common_util.addUnit(iconSize.value);
|
||||
}
|
||||
return `${uni_modules_wotDesignUni_components_common_util.objToStyle(style)} ${props.customStyle}`;
|
||||
});
|
||||
common_vendor.onBeforeMount(() => {
|
||||
intermediateColor.value = uni_modules_wotDesignUni_components_common_util.gradient(props.color, "#ffffff", 2)[1];
|
||||
buildSvg();
|
||||
});
|
||||
function buildSvg() {
|
||||
const { type, color } = props;
|
||||
let ringType = uni_modules_wotDesignUni_components_common_util.isDef(type) ? type : "ring";
|
||||
const svgStr = `"data:image/svg+xml;base64,${uni_modules_wotDesignUni_components_common_base64.encode(ringType === "ring" ? icon[ringType](color, intermediateColor.value) : icon[ringType](color))}"`;
|
||||
svg.value = svgStr;
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return {
|
||||
a: common_vendor.s(`background-image: url(${svg.value});`),
|
||||
b: common_vendor.n(`wd-loading ${props.customClass}`),
|
||||
c: common_vendor.s(common_vendor.unref(rootStyle))
|
||||
};
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-954bfc5a"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-954bfc5a', b]}}" style="{{c}}"><view class="wd-loading__body data-v-954bfc5a"><view class="wd-loading__svg data-v-954bfc5a" style="{{a}}"></view></view></view>
|
||||
+227
@@ -0,0 +1,227 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
.wd-loading.data-v-954bfc5a {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: var(--wot-loading-size, 32px);
|
||||
height: var(--wot-loading-size, 32px);
|
||||
}
|
||||
.wd-loading__body.data-v-954bfc5a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-animation: wd-rotate-954bfc5a 0.8s linear infinite;
|
||||
animation: wd-rotate-954bfc5a 0.8s linear infinite;
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
.wd-loading__svg.data-v-954bfc5a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@-webkit-keyframes wd-rotate-954bfc5a {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes wd-rotate-954bfc5a {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
const messageDefaultOptionKey = "__MESSAGE_OPTION__";
|
||||
const None = Symbol("None");
|
||||
const defaultOptions = {
|
||||
title: "",
|
||||
showCancelButton: false,
|
||||
show: false,
|
||||
closeOnClickModal: true,
|
||||
msg: "",
|
||||
type: "alert",
|
||||
inputType: "text",
|
||||
inputValue: "",
|
||||
showErr: false,
|
||||
zIndex: 99,
|
||||
lazyRender: true,
|
||||
inputError: ""
|
||||
};
|
||||
function useMessage(selector = "") {
|
||||
const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey;
|
||||
const messageOption = common_vendor.inject(messageOptionKey, common_vendor.ref(None));
|
||||
if (messageOption.value === None) {
|
||||
messageOption.value = defaultOptions;
|
||||
common_vendor.provide(messageOptionKey, messageOption);
|
||||
}
|
||||
const createMethod = (type) => {
|
||||
return (options) => {
|
||||
const messageOptions = uni_modules_wotDesignUni_components_common_util.deepMerge({ type }, typeof options === "string" ? { title: options } : options);
|
||||
if (messageOptions.type === "confirm" || messageOptions.type === "prompt") {
|
||||
messageOptions.showCancelButton = true;
|
||||
} else {
|
||||
messageOptions.showCancelButton = false;
|
||||
}
|
||||
return show(messageOptions);
|
||||
};
|
||||
};
|
||||
const show = (option) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const options = uni_modules_wotDesignUni_components_common_util.deepMerge(defaultOptions, typeof option === "string" ? { title: option } : option);
|
||||
messageOption.value = uni_modules_wotDesignUni_components_common_util.deepMerge(options, {
|
||||
show: true,
|
||||
success: (res) => {
|
||||
close();
|
||||
resolve(res);
|
||||
},
|
||||
fail: (res) => {
|
||||
close();
|
||||
reject(res);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
const alert = createMethod("alert");
|
||||
const confirm = createMethod("confirm");
|
||||
const prompt = createMethod("prompt");
|
||||
const close = () => {
|
||||
if (messageOption.value !== None) {
|
||||
messageOption.value.show = false;
|
||||
}
|
||||
};
|
||||
return {
|
||||
show,
|
||||
alert,
|
||||
confirm,
|
||||
prompt,
|
||||
close
|
||||
};
|
||||
}
|
||||
const getMessageDefaultOptionKey = (selector) => {
|
||||
return selector ? `${messageDefaultOptionKey}${selector}` : messageDefaultOptionKey;
|
||||
};
|
||||
exports.defaultOptions = defaultOptions;
|
||||
exports.getMessageDefaultOptionKey = getMessageDefaultOptionKey;
|
||||
exports.useMessage = useMessage;
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const messageBoxProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
selector: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
rootPortal: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false)
|
||||
};
|
||||
exports.messageBoxProps = messageBoxProps;
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_wdMessageBox_types = require("./types.js");
|
||||
var uni_modules_wotDesignUni_components_wdMessageBox_index = require("./index.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
var uni_modules_wotDesignUni_components_composables_useTranslate = require("../composables/useTranslate.js");
|
||||
require("../common/props.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
require("../../locale/index.js");
|
||||
require("../../locale/lang/zh-CN.js");
|
||||
if (!Math) {
|
||||
(wdInput + wdButton + wdPopup)();
|
||||
}
|
||||
const wdPopup = () => "../wd-popup/wd-popup.js";
|
||||
const wdButton = () => "../wd-button/wd-button.js";
|
||||
const wdInput = () => "../wd-input/wd-input.js";
|
||||
const __default__ = {
|
||||
name: "wd-message-box",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdMessageBox_types.messageBoxProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const { translate } = uni_modules_wotDesignUni_components_composables_useTranslate.useTranslate("message-box");
|
||||
const rootClass = common_vendor.computed$1(() => {
|
||||
return `wd-message-box__container ${props.customClass}`;
|
||||
});
|
||||
const bodyClass = common_vendor.computed$1(() => {
|
||||
return `wd-message-box__body ${!messageState.title ? "is-no-title" : ""} ${messageState.type === "prompt" ? "is-prompt" : ""}`;
|
||||
});
|
||||
const messageOptionKey = uni_modules_wotDesignUni_components_wdMessageBox_index.getMessageDefaultOptionKey(props.selector);
|
||||
const messageOption = common_vendor.inject(messageOptionKey, common_vendor.ref(uni_modules_wotDesignUni_components_wdMessageBox_index.defaultOptions));
|
||||
const messageState = common_vendor.reactive({
|
||||
msg: "",
|
||||
show: false,
|
||||
title: "",
|
||||
showCancelButton: false,
|
||||
closeOnClickModal: true,
|
||||
confirmButtonText: "",
|
||||
cancelButtonText: "",
|
||||
type: "alert",
|
||||
inputType: "text",
|
||||
inputValue: "",
|
||||
inputPlaceholder: "",
|
||||
inputError: "",
|
||||
showErr: false,
|
||||
zIndex: 99,
|
||||
lazyRender: true
|
||||
});
|
||||
const customConfirmProps = common_vendor.computed$1(() => {
|
||||
const buttonProps = uni_modules_wotDesignUni_components_common_util.deepAssign(
|
||||
{
|
||||
block: true
|
||||
},
|
||||
uni_modules_wotDesignUni_components_common_util.isDef(messageState.confirmButtonProps) ? uni_modules_wotDesignUni_components_common_util.omitBy(messageState.confirmButtonProps, uni_modules_wotDesignUni_components_common_util.isUndefined) : {}
|
||||
);
|
||||
buttonProps.customClass = `${buttonProps.customClass || ""} wd-message-box__actions-btn`;
|
||||
return buttonProps;
|
||||
});
|
||||
const customCancelProps = common_vendor.computed$1(() => {
|
||||
const buttonProps = uni_modules_wotDesignUni_components_common_util.deepAssign(
|
||||
{
|
||||
block: true,
|
||||
type: "info"
|
||||
},
|
||||
uni_modules_wotDesignUni_components_common_util.isDef(messageState.cancelButtonProps) ? uni_modules_wotDesignUni_components_common_util.omitBy(messageState.cancelButtonProps, uni_modules_wotDesignUni_components_common_util.isUndefined) : {}
|
||||
);
|
||||
buttonProps.customClass = `${buttonProps.customClass || ""} wd-message-box__actions-btn`;
|
||||
return buttonProps;
|
||||
});
|
||||
common_vendor.watch(
|
||||
() => messageOption.value,
|
||||
(newVal) => {
|
||||
reset(newVal);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => messageState.show,
|
||||
(newValue) => {
|
||||
resetErr(!!newValue);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
function toggleModal(action) {
|
||||
if (action === "modal" && !messageState.closeOnClickModal) {
|
||||
return;
|
||||
}
|
||||
if (messageState.type === "prompt" && action === "confirm" && !validate()) {
|
||||
return;
|
||||
}
|
||||
switch (action) {
|
||||
case "confirm":
|
||||
if (messageState.beforeConfirm) {
|
||||
messageState.beforeConfirm({
|
||||
resolve: (isPass) => {
|
||||
if (isPass) {
|
||||
handleConfirm({
|
||||
action,
|
||||
value: messageState.inputValue
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
handleConfirm({
|
||||
action,
|
||||
value: messageState.inputValue
|
||||
});
|
||||
}
|
||||
break;
|
||||
case "cancel":
|
||||
handleCancel({
|
||||
action
|
||||
});
|
||||
break;
|
||||
default:
|
||||
handleCancel({
|
||||
action: "modal"
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleConfirm(result) {
|
||||
messageState.show = false;
|
||||
if (uni_modules_wotDesignUni_components_common_util.isFunction(messageState.success)) {
|
||||
messageState.success(result);
|
||||
}
|
||||
}
|
||||
function handleCancel(result) {
|
||||
messageState.show = false;
|
||||
if (uni_modules_wotDesignUni_components_common_util.isFunction(messageState.fail)) {
|
||||
messageState.fail(result);
|
||||
}
|
||||
}
|
||||
function validate() {
|
||||
if (messageState.inputPattern && !messageState.inputPattern.test(String(messageState.inputValue))) {
|
||||
messageState.showErr = true;
|
||||
return false;
|
||||
}
|
||||
if (typeof messageState.inputValidate === "function") {
|
||||
const validateResult = messageState.inputValidate(messageState.inputValue);
|
||||
if (!validateResult) {
|
||||
messageState.showErr = true;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
messageState.showErr = false;
|
||||
return true;
|
||||
}
|
||||
function resetErr(val) {
|
||||
if (val === false) {
|
||||
messageState.showErr = false;
|
||||
}
|
||||
}
|
||||
function inputValChange({ value }) {
|
||||
if (value === "") {
|
||||
messageState.showErr = false;
|
||||
return;
|
||||
}
|
||||
messageState.inputValue = value;
|
||||
}
|
||||
function reset(option) {
|
||||
if (option) {
|
||||
messageState.title = uni_modules_wotDesignUni_components_common_util.isDef(option.title) ? option.title : "";
|
||||
messageState.showCancelButton = uni_modules_wotDesignUni_components_common_util.isDef(option.showCancelButton) ? option.showCancelButton : false;
|
||||
messageState.show = option.show;
|
||||
messageState.closeOnClickModal = option.closeOnClickModal;
|
||||
messageState.confirmButtonText = option.confirmButtonText;
|
||||
messageState.cancelButtonText = option.cancelButtonText;
|
||||
messageState.msg = option.msg;
|
||||
messageState.type = option.type;
|
||||
messageState.inputType = option.inputType;
|
||||
messageState.inputSize = option.inputSize;
|
||||
messageState.inputValue = option.inputValue;
|
||||
messageState.inputPlaceholder = option.inputPlaceholder;
|
||||
messageState.inputPattern = option.inputPattern;
|
||||
messageState.inputValidate = option.inputValidate;
|
||||
messageState.success = option.success;
|
||||
messageState.fail = option.fail;
|
||||
messageState.beforeConfirm = option.beforeConfirm;
|
||||
messageState.inputError = option.inputError;
|
||||
messageState.showErr = option.showErr;
|
||||
messageState.zIndex = option.zIndex;
|
||||
messageState.lazyRender = option.lazyRender;
|
||||
messageState.confirmButtonProps = option.confirmButtonProps;
|
||||
messageState.cancelButtonProps = option.cancelButtonProps;
|
||||
}
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: messageState.title
|
||||
}, messageState.title ? {
|
||||
b: common_vendor.t(messageState.title)
|
||||
} : {}, {
|
||||
c: messageState.type === "prompt"
|
||||
}, messageState.type === "prompt" ? common_vendor.e({
|
||||
d: common_vendor.o(inputValChange),
|
||||
e: common_vendor.o(($event) => messageState.inputValue = $event),
|
||||
f: common_vendor.p({
|
||||
type: messageState.inputType,
|
||||
size: messageState.inputSize,
|
||||
placeholder: messageState.inputPlaceholder,
|
||||
modelValue: messageState.inputValue
|
||||
}),
|
||||
g: messageState.showErr
|
||||
}, messageState.showErr ? {
|
||||
h: common_vendor.t(messageState.inputError || common_vendor.unref(translate)("inputNoValidate"))
|
||||
} : {}) : {}, {
|
||||
i: common_vendor.t(messageState.msg),
|
||||
j: common_vendor.n(common_vendor.unref(bodyClass)),
|
||||
k: messageState.showCancelButton
|
||||
}, messageState.showCancelButton ? {
|
||||
l: common_vendor.t(messageState.cancelButtonText || common_vendor.unref(translate)("cancel")),
|
||||
m: common_vendor.o(($event) => toggleModal("cancel")),
|
||||
n: common_vendor.p({
|
||||
...common_vendor.unref(customCancelProps)
|
||||
})
|
||||
} : {}, {
|
||||
o: common_vendor.t(messageState.confirmButtonText || common_vendor.unref(translate)("confirm")),
|
||||
p: common_vendor.o(($event) => toggleModal("confirm")),
|
||||
q: common_vendor.p({
|
||||
...common_vendor.unref(customConfirmProps)
|
||||
}),
|
||||
r: common_vendor.n(`wd-message-box__actions ${messageState.showCancelButton ? "wd-message-box__flex" : "wd-message-box__block"}`),
|
||||
s: common_vendor.n(common_vendor.unref(rootClass)),
|
||||
t: common_vendor.o(($event) => toggleModal("modal")),
|
||||
v: common_vendor.o(($event) => messageState.show = $event),
|
||||
w: common_vendor.p({
|
||||
transition: "zoom-in",
|
||||
["close-on-click-modal"]: messageState.closeOnClickModal,
|
||||
["lazy-render"]: messageState.lazyRender,
|
||||
["custom-class"]: "wd-message-box",
|
||||
["z-index"]: messageState.zIndex,
|
||||
duration: 200,
|
||||
["root-portal"]: _ctx.rootPortal,
|
||||
modelValue: messageState.show
|
||||
})
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-12024933"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-popup": "../wd-popup/wd-popup",
|
||||
"wd-button": "../wd-button/wd-button",
|
||||
"wd-input": "../wd-input/wd-input"
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
<view class="data-v-12024933"><wd-popup wx:if="{{w}}" class="data-v-12024933" u-s="{{['d']}}" bindclickModal="{{t}}" u-i="12024933-0" bind:__l="__l" bindupdateModelValue="{{v}}" u-p="{{w}}"><view class="{{['data-v-12024933', s]}}"><view class="{{['data-v-12024933', j]}}"><view wx:if="{{a}}" class="wd-message-box__title data-v-12024933">{{b}}</view><view class="wd-message-box__content data-v-12024933"><block wx:if="{{c}}"><wd-input wx:if="{{f}}" class="data-v-12024933" bindinput="{{d}}" u-i="12024933-1,12024933-0" bind:__l="__l" bindupdateModelValue="{{e}}" u-p="{{f}}"/><view wx:if="{{g}}" class="wd-message-box__input-error data-v-12024933">{{h}}</view></block><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else>{{i}}</block></view></view><view class="{{['data-v-12024933', r]}}"><wd-button wx:if="{{k}}" class="data-v-12024933" u-s="{{['d']}}" bindclick="{{m}}" u-i="12024933-2,12024933-0" bind:__l="__l" u-p="{{n}}">{{l}}</wd-button><wd-button wx:if="{{q}}" class="data-v-12024933" u-s="{{['d']}}" bindclick="{{p}}" u-i="12024933-3,12024933-0" bind:__l="__l" u-p="{{q}}">{{o}}</wd-button></view></view></wd-popup></view>
|
||||
Vendored
+269
@@ -0,0 +1,269 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* 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 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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 阴影
|
||||
*/
|
||||
.wot-theme-dark .wd-message-box__body.data-v-12024933 {
|
||||
background-color: var(--wot-dark-background2, #1b1b1b);
|
||||
}
|
||||
.wot-theme-dark .wd-message-box__title.data-v-12024933 {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-message-box__content.data-v-12024933 {
|
||||
color: var(--wot-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
}
|
||||
.wot-theme-dark .wd-message-box__content.data-v-12024933::-webkit-scrollbar-thumb {
|
||||
background: var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.data-v-12024933 .wd-message-box {
|
||||
border-radius: var(--wot-message-box-radius, 16px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.wd-message-box.data-v-12024933 {
|
||||
border-radius: var(--wot-message-box-radius, 16px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.wd-message-box__container.data-v-12024933 {
|
||||
width: var(--wot-message-box-width, 300px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wd-message-box__body.data-v-12024933 {
|
||||
background-color: var(--wot-message-box-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
padding: var(--wot-message-box-padding, 25px 24px 0);
|
||||
}
|
||||
.wd-message-box__body.is-no-title.data-v-12024933 {
|
||||
padding: 25px 24px 0px;
|
||||
}
|
||||
.wd-message-box__title.data-v-12024933 {
|
||||
text-align: center;
|
||||
font-size: var(--wot-message-box-title-fs, 16px);
|
||||
color: var(--wot-message-box-title-color, rgba(0, 0, 0, 0.85));
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.wd-message-box__content.data-v-12024933 {
|
||||
max-height: var(--wot-message-box-content-max-height, 264px);
|
||||
color: var(--wot-message-box-content-color, #666666);
|
||||
font-size: var(--wot-message-box-content-fs, 14px);
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
line-height: 20px;
|
||||
}
|
||||
.wd-message-box__content.data-v-12024933::-webkit-scrollbar {
|
||||
width: var(--wot-message-box-content-scrollbar-width, 4px);
|
||||
}
|
||||
.wd-message-box__content.data-v-12024933::-webkit-scrollbar-thumb {
|
||||
width: var(--wot-message-box-content-scrollbar-width, 4px);
|
||||
background: var(--wot-message-box-content-scrollbar-color, rgba(0, 0, 0, 0.1));
|
||||
border-radius: calc(var(--wot-message-box-content-scrollbar-width, 4px) / 2);
|
||||
}
|
||||
.wd-message-box__input-error.data-v-12024933 {
|
||||
min-height: 18px;
|
||||
margin-top: 2px;
|
||||
color: var(--wot-message-box-input-error-color, var(--wot-input-error-color, var(--wot-color-danger, #fa4350)));
|
||||
text-align: left;
|
||||
}
|
||||
.wd-message-box__input-error.is-hidden.data-v-12024933 {
|
||||
visibility: hidden;
|
||||
}
|
||||
.wd-message-box__actions.data-v-12024933 {
|
||||
padding: 24px;
|
||||
}
|
||||
.data-v-12024933 .wd-message-box__actions-btn:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.wd-message-box__flex.data-v-12024933 {
|
||||
display: flex;
|
||||
}
|
||||
.wd-message-box__block.data-v-12024933 {
|
||||
display: block;
|
||||
}
|
||||
.wd-message-box__cancel.data-v-12024933 {
|
||||
margin-right: 16px;
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const navbarCapsuleProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps
|
||||
};
|
||||
exports.navbarCapsuleProps = navbarCapsuleProps;
|
||||
Vendored
+47
@@ -0,0 +1,47 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_wdNavbarCapsule_types = require("./types.js");
|
||||
require("../common/props.js");
|
||||
if (!Math) {
|
||||
wdIcon();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const __default__ = {
|
||||
name: "wd-navbar-capsule",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdNavbarCapsule_types.navbarCapsuleProps,
|
||||
emits: ["back", "back-home"],
|
||||
setup(__props, { emit }) {
|
||||
function handleBack() {
|
||||
emit("back");
|
||||
}
|
||||
function handleBackHome() {
|
||||
emit("back-home");
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return {
|
||||
a: common_vendor.o(handleBack),
|
||||
b: common_vendor.p({
|
||||
name: "chevron-left",
|
||||
["custom-class"]: "wd-navbar-capsule__icon"
|
||||
}),
|
||||
c: common_vendor.o(handleBackHome),
|
||||
d: common_vendor.p({
|
||||
name: "home",
|
||||
["custom-class"]: "wd-navbar-capsule__icon"
|
||||
}),
|
||||
e: common_vendor.n(`wd-navbar-capsule ${_ctx.customClass}`),
|
||||
f: common_vendor.s(_ctx.customStyle)
|
||||
};
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon"
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
<view class="{{e}}" style="{{f}}"><wd-icon wx:if="{{b}}" bindclick="{{a}}" u-i="2734e76c-0" bind:__l="__l" u-p="{{b}}"/><wd-icon wx:if="{{d}}" bindclick="{{c}}" u-i="2734e76c-1" bind:__l="__l" u-p="{{d}}"/></view>
|
||||
Vendored
+240
@@ -0,0 +1,240 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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-navbar-capsule::before {
|
||||
border: 2rpx solid var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.wot-theme-dark .wd-navbar-capsule::after {
|
||||
background: var(--wot-dark-border-color, #3a3a3c);
|
||||
}
|
||||
.wot-theme-dark .wd-navbar-capsule .wd-navbar-capsule__icon {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-navbar-capsule {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: var(--wot-navbar-capsule-width, 88px);
|
||||
height: var(--wot-navbar-capsule-height, 32px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.wd-navbar-capsule::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: calc(var(--wot-navbar-capsule-border-radius, 16px) * 2);
|
||||
border: 2rpx solid var(--wot-navbar-capsule-border-color, #e7e7e7);
|
||||
}
|
||||
.wd-navbar-capsule::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 36rpx;
|
||||
background: var(--wot-navbar-capsule-border-color, #e7e7e7);
|
||||
}
|
||||
.wd-navbar-capsule:empty {
|
||||
display: none;
|
||||
}
|
||||
.wd-navbar-capsule__icon {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
color: var(--wot-navbar-desc-font-color, var(--wot-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
font-size: var(--wot-navbar-capsule-icon-size, 20px);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const navbarProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
title: String,
|
||||
leftText: String,
|
||||
rightText: String,
|
||||
leftArrow: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
bordered: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
fixed: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
placeholder: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
zIndex: uni_modules_wotDesignUni_components_common_props.makeNumberProp(500),
|
||||
safeAreaInsetTop: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
leftDisabled: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
rightDisabled: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false)
|
||||
};
|
||||
exports.navbarProps = navbarProps;
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
var uni_modules_wotDesignUni_components_wdNavbar_types = require("./types.js");
|
||||
require("../common/AbortablePromise.js");
|
||||
require("../common/props.js");
|
||||
if (!Math) {
|
||||
wdIcon();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const __default__ = {
|
||||
name: "wd-navbar",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdNavbar_types.navbarProps,
|
||||
emits: ["click-left", "click-right"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const height = common_vendor.ref("");
|
||||
const { statusBarHeight } = common_vendor.index.getSystemInfoSync();
|
||||
common_vendor.watch(
|
||||
[() => props.fixed, () => props.placeholder],
|
||||
() => {
|
||||
setPlaceholderHeight();
|
||||
},
|
||||
{ deep: true, immediate: false }
|
||||
);
|
||||
const rootStyle = common_vendor.computed$1(() => {
|
||||
const style = {};
|
||||
if (props.fixed && uni_modules_wotDesignUni_components_common_util.isDef(props.zIndex)) {
|
||||
style["z-index"] = props.zIndex;
|
||||
}
|
||||
if (props.safeAreaInsetTop) {
|
||||
style["padding-top"] = uni_modules_wotDesignUni_components_common_util.addUnit(statusBarHeight || 0);
|
||||
}
|
||||
return `${uni_modules_wotDesignUni_components_common_util.objToStyle(style)}${props.customStyle}`;
|
||||
});
|
||||
common_vendor.onMounted(() => {
|
||||
if (props.fixed && props.placeholder) {
|
||||
common_vendor.nextTick(() => {
|
||||
setPlaceholderHeight();
|
||||
});
|
||||
}
|
||||
});
|
||||
function handleClickLeft() {
|
||||
if (!props.leftDisabled) {
|
||||
emit("click-left");
|
||||
}
|
||||
}
|
||||
function handleClickRight() {
|
||||
if (!props.rightDisabled) {
|
||||
emit("click-right");
|
||||
}
|
||||
}
|
||||
const { proxy } = common_vendor.getCurrentInstance();
|
||||
function setPlaceholderHeight() {
|
||||
if (!props.fixed || !props.placeholder) {
|
||||
return;
|
||||
}
|
||||
uni_modules_wotDesignUni_components_common_util.getRect(".wd-navbar", false, proxy).then((res) => {
|
||||
height.value = res.height;
|
||||
});
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.$slots.capsule
|
||||
}, _ctx.$slots.capsule ? {} : !_ctx.$slots.left ? common_vendor.e({
|
||||
c: _ctx.leftArrow
|
||||
}, _ctx.leftArrow ? {
|
||||
d: common_vendor.p({
|
||||
name: "arrow-left",
|
||||
["custom-class"]: "wd-navbar__arrow"
|
||||
})
|
||||
} : {}, {
|
||||
e: _ctx.leftText
|
||||
}, _ctx.leftText ? {
|
||||
f: common_vendor.t(_ctx.leftText)
|
||||
} : {}, {
|
||||
g: common_vendor.n(`wd-navbar__left ${_ctx.leftDisabled ? "is-disabled" : ""}`),
|
||||
h: common_vendor.o(handleClickLeft)
|
||||
}) : {
|
||||
i: common_vendor.n(`wd-navbar__left ${_ctx.leftDisabled ? "is-disabled" : ""}`),
|
||||
j: common_vendor.o(handleClickLeft)
|
||||
}, {
|
||||
b: !_ctx.$slots.left,
|
||||
k: !_ctx.$slots.title && _ctx.title
|
||||
}, !_ctx.$slots.title && _ctx.title ? {
|
||||
l: common_vendor.t(_ctx.title)
|
||||
} : {}, {
|
||||
m: _ctx.$slots.right || _ctx.rightText
|
||||
}, _ctx.$slots.right || _ctx.rightText ? common_vendor.e({
|
||||
n: !_ctx.$slots.right && _ctx.rightText
|
||||
}, !_ctx.$slots.right && _ctx.rightText ? {
|
||||
o: common_vendor.t(_ctx.rightText)
|
||||
} : {}, {
|
||||
p: common_vendor.n(`wd-navbar__right ${_ctx.rightDisabled ? "is-disabled" : ""}`),
|
||||
q: common_vendor.o(handleClickRight)
|
||||
}) : {}, {
|
||||
r: common_vendor.n(`wd-navbar ${_ctx.customClass} ${_ctx.fixed ? "is-fixed" : ""} ${_ctx.bordered ? "is-border" : ""}`),
|
||||
s: common_vendor.s(common_vendor.unref(rootStyle)),
|
||||
t: common_vendor.unref(uni_modules_wotDesignUni_components_common_util.addUnit)(height.value)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view style="{{'height:' + t}}"><view class="{{r}}" style="{{s}}"><view class="wd-navbar__content"><view wx:if="{{a}}" class="wd-navbar__capsule"><slot name="capsule"/></view><view wx:elif="{{b}}" class="{{g}}" bindtap="{{h}}"><wd-icon wx:if="{{c}}" u-i="464f6c8a-0" bind:__l="__l" u-p="{{d}}"/><view wx:if="{{e}}" class="wd-navbar__text">{{f}}</view></view><view wx:else class="{{i}}" bindtap="{{j}}"><slot name="left"/></view><view class="wd-navbar__title"><slot name="title"/><block wx:if="{{k}}">{{l}}</block></view><view wx:if="{{m}}" class="{{p}}" bindtap="{{q}}"><slot name="right"/><view wx:if="{{n}}" class="wd-navbar__text" hover-class="wd-navbar__text--hover" hover-stay-time="{{70}}">{{o}}</view></view></view></view></view>
|
||||
+276
@@ -0,0 +1,276 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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-navbar {
|
||||
background-color: var(--wot-dark-background, #131313);
|
||||
}
|
||||
.wot-theme-dark .wd-navbar__title {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-navbar__text {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wot-theme-dark .wd-navbar .wd-navbar__arrow {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-navbar {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
height: var(--wot-navbar-height, 44px);
|
||||
line-height: var(--wot-navbar-height, 44px);
|
||||
background-color: var(--wot-navbar-background, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.wd-navbar__content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.wd-navbar__title {
|
||||
max-width: 60%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
color: var(--wot-navbar-color, var(--wot-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
font-weight: var(--wot-navbar-title-font-weight, 600);
|
||||
font-size: var(--wot-navbar-title-font-size, 18px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wd-navbar__text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: var(--wot-navbar-desc-font-color, var(--wot-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.wd-navbar__left, .wd-navbar__right, .wd-navbar__capsule {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: var(--wot-navbar-desc-font-size, 16px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.wd-navbar__left.is-disabled, .wd-navbar__right.is-disabled, .wd-navbar__capsule.is-disabled {
|
||||
opacity: var(--wot-navbar-disabled-opacity, 0.6);
|
||||
}
|
||||
.wd-navbar__left, .wd-navbar__capsule {
|
||||
left: 0;
|
||||
}
|
||||
.wd-navbar__right {
|
||||
right: 0;
|
||||
}
|
||||
.wd-navbar__arrow {
|
||||
font-size: var(--wot-navbar-arrow-size, 24px);
|
||||
color: var(--wot-navbar-color, var(--wot-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.wd-navbar.is-border {
|
||||
position: relative;
|
||||
}
|
||||
.wd-navbar.is-border::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transform: scaleY(0.5);
|
||||
background: var(--wot-color-border-light, #e8e8e8);
|
||||
}
|
||||
.wd-navbar.is-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 500;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
require("../../../../common/vendor.js");
|
||||
@@ -0,0 +1,13 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const overlayProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
show: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
duration: {
|
||||
type: [Object, Number, Boolean],
|
||||
default: 300
|
||||
},
|
||||
lockScroll: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
zIndex: uni_modules_wotDesignUni_components_common_props.makeNumberProp(10)
|
||||
};
|
||||
exports.overlayProps = overlayProps;
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_wdOverlay_types = require("./types.js");
|
||||
require("../common/props.js");
|
||||
if (!Math) {
|
||||
wdTransition();
|
||||
}
|
||||
const wdTransition = () => "../wd-transition/wd-transition.js";
|
||||
const __default__ = {
|
||||
name: "wd-overlay",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdOverlay_types.overlayProps,
|
||||
emits: ["click"],
|
||||
setup(__props, { emit }) {
|
||||
function handleClick() {
|
||||
emit("click");
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return {
|
||||
a: common_vendor.o(handleClick),
|
||||
b: common_vendor.p({
|
||||
show: _ctx.show,
|
||||
name: "fade",
|
||||
["custom-class"]: "wd-overlay",
|
||||
duration: _ctx.duration,
|
||||
["custom-style"]: `z-index: ${_ctx.zIndex}; ${_ctx.customStyle}`,
|
||||
["disable-touch-move"]: _ctx.lockScroll
|
||||
})
|
||||
};
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-transition": "../wd-transition/wd-transition"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<wd-transition wx:if="{{b}}" u-s="{{['d']}}" bindclick="{{a}}" u-i="27fe2c30-0" bind:__l="__l" u-p="{{b}}"><slot></slot></wd-transition>
|
||||
+200
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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-overlay {
|
||||
background: var(--wot-overlay-bg-dark, rgba(0, 0, 0, 0.75));
|
||||
}
|
||||
.wd-overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--wot-overlay-bg, rgba(0, 0, 0, 0.65));
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
"use strict";
|
||||
var uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const popupProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
transition: String,
|
||||
closable: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
position: uni_modules_wotDesignUni_components_common_props.makeStringProp("center"),
|
||||
closeOnClickModal: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
duration: {
|
||||
type: [Number, Boolean],
|
||||
default: 300
|
||||
},
|
||||
modal: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
zIndex: uni_modules_wotDesignUni_components_common_props.makeNumberProp(10),
|
||||
hideWhenClose: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
modalStyle: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
safeAreaInsetBottom: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
modelValue: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
lazyRender: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
lockScroll: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(true),
|
||||
rootPortal: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false)
|
||||
};
|
||||
exports.popupProps = popupProps;
|
||||
+166
@@ -0,0 +1,166 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_wotDesignUni_components_wdPopup_types = require("./types.js");
|
||||
require("../common/props.js");
|
||||
if (!Math) {
|
||||
(wdOverlay + wdIcon + wdTransition + wdRootPortal)();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const wdOverlay = () => "../wd-overlay/wd-overlay.js";
|
||||
const wdTransition = () => "../wd-transition/wd-transition.js";
|
||||
const wdRootPortal = () => "../wd-root-portal/wd-root-portal.js";
|
||||
const __default__ = {
|
||||
name: "wd-popup",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdPopup_types.popupProps,
|
||||
emits: [
|
||||
"update:modelValue",
|
||||
"before-enter",
|
||||
"enter",
|
||||
"before-leave",
|
||||
"leave",
|
||||
"after-leave",
|
||||
"after-enter",
|
||||
"click-modal",
|
||||
"close"
|
||||
],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const transitionName = common_vendor.computed$1(() => {
|
||||
if (props.transition) {
|
||||
return props.transition;
|
||||
}
|
||||
if (props.position === "center") {
|
||||
return ["zoom-in", "fade"];
|
||||
}
|
||||
if (props.position === "left") {
|
||||
return "slide-left";
|
||||
}
|
||||
if (props.position === "right") {
|
||||
return "slide-right";
|
||||
}
|
||||
if (props.position === "bottom") {
|
||||
return "slide-up";
|
||||
}
|
||||
if (props.position === "top") {
|
||||
return "slide-down";
|
||||
}
|
||||
return "slide-up";
|
||||
});
|
||||
const safeBottom = common_vendor.ref(0);
|
||||
const style = common_vendor.computed$1(() => {
|
||||
return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`;
|
||||
});
|
||||
const rootClass = common_vendor.computed$1(() => {
|
||||
return `wd-popup wd-popup--${props.position} ${!props.transition && props.position === "center" ? "is-deep" : ""} ${props.customClass || ""}`;
|
||||
});
|
||||
common_vendor.onBeforeMount(() => {
|
||||
if (props.safeAreaInsetBottom) {
|
||||
const { safeArea, screenHeight, safeAreaInsets } = common_vendor.index.getSystemInfoSync();
|
||||
if (safeArea) {
|
||||
safeBottom.value = screenHeight - (safeArea.bottom || 0);
|
||||
} else {
|
||||
safeBottom.value = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
function handleClickModal() {
|
||||
emit("click-modal");
|
||||
if (props.closeOnClickModal) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
function close() {
|
||||
emit("close");
|
||||
emit("update:modelValue", false);
|
||||
}
|
||||
function noop() {
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.rootPortal
|
||||
}, _ctx.rootPortal ? common_vendor.e({
|
||||
b: _ctx.modal
|
||||
}, _ctx.modal ? {
|
||||
c: common_vendor.o(handleClickModal),
|
||||
d: common_vendor.o(noop),
|
||||
e: common_vendor.p({
|
||||
show: _ctx.modelValue,
|
||||
["z-index"]: _ctx.zIndex,
|
||||
["lock-scroll"]: _ctx.lockScroll,
|
||||
duration: _ctx.duration,
|
||||
["custom-style"]: _ctx.modalStyle
|
||||
})
|
||||
} : {}, {
|
||||
f: _ctx.closable
|
||||
}, _ctx.closable ? {
|
||||
g: common_vendor.o(close),
|
||||
h: common_vendor.p({
|
||||
["custom-class"]: "wd-popup__close",
|
||||
name: "add"
|
||||
})
|
||||
} : {}, {
|
||||
i: common_vendor.o(($event) => emit("before-enter")),
|
||||
j: common_vendor.o(($event) => emit("enter")),
|
||||
k: common_vendor.o(($event) => emit("after-enter")),
|
||||
l: common_vendor.o(($event) => emit("before-leave")),
|
||||
m: common_vendor.o(($event) => emit("leave")),
|
||||
n: common_vendor.o(($event) => emit("after-leave")),
|
||||
o: common_vendor.p({
|
||||
["lazy-render"]: _ctx.lazyRender,
|
||||
["custom-class"]: common_vendor.unref(rootClass),
|
||||
["custom-style"]: common_vendor.unref(style),
|
||||
duration: _ctx.duration,
|
||||
show: _ctx.modelValue,
|
||||
name: common_vendor.unref(transitionName),
|
||||
destroy: _ctx.hideWhenClose
|
||||
})
|
||||
}) : common_vendor.e({
|
||||
p: _ctx.modal
|
||||
}, _ctx.modal ? {
|
||||
q: common_vendor.o(handleClickModal),
|
||||
r: common_vendor.o(noop),
|
||||
s: common_vendor.p({
|
||||
show: _ctx.modelValue,
|
||||
["z-index"]: _ctx.zIndex,
|
||||
["lock-scroll"]: _ctx.lockScroll,
|
||||
duration: _ctx.duration,
|
||||
["custom-style"]: _ctx.modalStyle
|
||||
})
|
||||
} : {}, {
|
||||
t: _ctx.closable
|
||||
}, _ctx.closable ? {
|
||||
v: common_vendor.o(close),
|
||||
w: common_vendor.p({
|
||||
["custom-class"]: "wd-popup__close",
|
||||
name: "add"
|
||||
})
|
||||
} : {}, {
|
||||
x: common_vendor.o(($event) => emit("before-enter")),
|
||||
y: common_vendor.o(($event) => emit("enter")),
|
||||
z: common_vendor.o(($event) => emit("after-enter")),
|
||||
A: common_vendor.o(($event) => emit("before-leave")),
|
||||
B: common_vendor.o(($event) => emit("leave")),
|
||||
C: common_vendor.o(($event) => emit("after-leave")),
|
||||
D: common_vendor.p({
|
||||
["lazy-render"]: _ctx.lazyRender,
|
||||
["custom-class"]: common_vendor.unref(rootClass),
|
||||
["custom-style"]: common_vendor.unref(style),
|
||||
duration: _ctx.duration,
|
||||
show: _ctx.modelValue,
|
||||
name: common_vendor.unref(transitionName),
|
||||
destroy: _ctx.hideWhenClose
|
||||
})
|
||||
}));
|
||||
};
|
||||
}
|
||||
});
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1bee1693"], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon",
|
||||
"wd-overlay": "../wd-overlay/wd-overlay",
|
||||
"wd-transition": "../wd-transition/wd-transition",
|
||||
"wd-root-portal": "../wd-root-portal/wd-root-portal"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<wd-root-portal wx:if="{{a}}" class="data-v-1bee1693" u-s="{{['d']}}" u-i="1bee1693-0" bind:__l="__l"><view class="wd-popup-wrapper data-v-1bee1693"><wd-overlay wx:if="{{b}}" class="data-v-1bee1693" bindclick="{{c}}" bindtouchmove="{{d}}" u-i="1bee1693-1,1bee1693-0" bind:__l="__l" u-p="{{e}}"/><wd-transition wx:if="{{o}}" class="data-v-1bee1693" u-s="{{['d']}}" bindbeforeEnter="{{i}}" bindenter="{{j}}" bindafterEnter="{{k}}" bindbeforeLeave="{{l}}" bindleave="{{m}}" bindafterLeave="{{n}}" u-i="1bee1693-2,1bee1693-0" bind:__l="__l" u-p="{{o}}"><slot/><wd-icon wx:if="{{f}}" class="data-v-1bee1693" bindclick="{{g}}" u-i="1bee1693-3,1bee1693-2" bind:__l="__l" u-p="{{h}}"/></wd-transition></view></wd-root-portal><view wx:else class="wd-popup-wrapper data-v-1bee1693"><wd-overlay wx:if="{{p}}" class="data-v-1bee1693" bindclick="{{q}}" bindtouchmove="{{r}}" u-i="1bee1693-4" bind:__l="__l" u-p="{{s}}"/><wd-transition wx:if="{{D}}" class="data-v-1bee1693" u-s="{{['d']}}" bindbeforeEnter="{{x}}" bindenter="{{y}}" bindafterEnter="{{z}}" bindbeforeLeave="{{A}}" bindleave="{{B}}" bindafterLeave="{{C}}" u-i="1bee1693-5" bind:__l="__l" u-p="{{D}}"><slot/><wd-icon wx:if="{{t}}" class="data-v-1bee1693" bindclick="{{v}}" u-i="1bee1693-6,1bee1693-5" bind:__l="__l" u-p="{{w}}"/></wd-transition></view>
|
||||
+241
@@ -0,0 +1,241 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* 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-popup-wrapper.data-v-1bee1693 .wd-popup {
|
||||
background: var(--wot-dark-background2, #1b1b1b);
|
||||
}
|
||||
.wot-theme-dark .wd-popup-wrapper.data-v-1bee1693 .wd-popup__close {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
}
|
||||
.wd-popup-wrapper.data-v-1bee1693 .wd-popup {
|
||||
position: fixed;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup__close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: var(--wot-popup-close-color, #666);
|
||||
font-size: var(--wot-popup-close-size, 24px);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup--center {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup--center.wd-zoom-in-enter,.data-v-1bee1693 .wd-popup--center.wd-zoom-in-leave-to {
|
||||
transform: scale(0.8) translate3d(-50%, -50%, 0) !important;
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup--center.is-deep.wd-zoom-in-enter,.data-v-1bee1693 .wd-popup--center.is-deep.wd-zoom-in-leave-to {
|
||||
transform: scale(0.1) translate3d(-50%, -50%, 0) !important;
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup--left {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup--right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.data-v-1bee1693 .wd-popup--bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "wd-root-portal",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _component_root_portal = common_vendor.resolveComponent("root-portal");
|
||||
_component_root_portal();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {};
|
||||
}
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:/\u7F51\u6291\u4E91Time/\u79C1\u6D3B/2000\u7B97\u5366/src/uni_modules/wot-design-uni/components/wd-root-portal/wd-root-portal.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
<root-portal u-s="{{['d']}}" u-i="6552e688-0" bind:__l="__l"><slot/></root-portal>
|
||||
Vendored
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user