@me-framework/me-ui-antdv-next 0.0.29 → 0.0.30

package/dist/code-box/code-item.vue.d.ts

@@ -0,0 +1,14 @@
+import { MeCodeItemProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<MeCodeItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MeCodeItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/code-box/index.css

@@ -0,0 +1 @@
+.me-code-box{--me-code-box-bg:#282c34;--me-code-box-header-bg:#21252b;--me-code-box-header-border:#2c313a;--me-code-box-border:#2c313a;--me-code-box-radius:6px;--me-code-box-text:#abb2bf;--me-code-box-text-muted:#5c6370;--me-code-box-tab-color:#8a919b;--me-code-box-tab-active-bg:#2c313a;--me-code-box-tab-active-color:#e6e6e6;--me-code-box-copy-bg:#ffffff1a;--me-code-box-copy-border:#fff3;--me-code-box-copy-color:#abb2bf;--me-code-box-copy-bg-hover:#ffffff26;--me-code-box-copy-color-hover:#fff;--me-code-box-ln-number:#5c6370;--me-code-box-ln-border:#3e4451;--me-code-box-desc-bg:#24282e;--me-code-box-desc-color:#8a919b;border:1px solid var(--me-code-box-border);border-radius:var(--me-code-box-radius);background-color:var(--me-code-box-bg);color:var(--me-code-box-text);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13px;line-height:1.6;position:relative;overflow:hidden}.me-code-box__header{background-color:var(--me-code-box-header-bg);border-bottom:1px solid var(--me-code-box-header-border);align-items:center;min-height:38px;padding:0 12px 0 4px;display:flex}.me-code-box__tabs{align-self:stretch;align-items:stretch;min-width:0;display:flex}.me-code-box__tab{border:none;border-right:1px solid var(--me-code-box-header-border);color:var(--me-code-box-tab-color);cursor:pointer;background:0 0;align-items:center;padding:0 16px;font-family:inherit;font-size:13px;transition:background-color .2s,color .2s;display:inline-flex}.me-code-box__tab:hover{color:var(--me-code-box-text)}.me-code-box__tab--active{background-color:var(--me-code-box-tab-active-bg);color:var(--me-code-box-tab-active-color)}.me-code-box__title{color:var(--me-code-box-text);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;padding:0 4px;font-size:12px;display:inline-flex;overflow:hidden}.me-code-box__spacer{flex:1}.me-code-box__copy{border:1px solid var(--me-code-box-copy-border);background:var(--me-code-box-copy-bg);color:var(--me-code-box-copy-color);cursor:pointer;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:4px 10px;font-family:inherit;font-size:12px;transition:background-color .2s,color .2s;display:inline-flex}.me-code-box__copy:hover{background:var(--me-code-box-copy-bg-hover);color:var(--me-code-box-copy-color-hover)}.me-code-box__desc{background-color:var(--me-code-box-desc-bg);border-bottom:1px solid var(--me-code-box-header-border);color:var(--me-code-box-desc-color);padding:6px 16px;font-size:12px;line-height:1.6}.me-code-box__pre{font-size:inherit;line-height:inherit;background:0 0;margin:0;padding:0;overflow:auto}.me-code-box__pre--pad>code{padding:12px 16px;display:block}.me-code-box__pre>code{display:block}.me-code-box .hljs-ln{border-collapse:collapse;width:auto}.me-code-box .hljs-ln td{background:0 0;border:none;padding:0}.me-code-box .hljs-ln .hljs-ln-numbers,.me-code-box .hljs-ln .hljs-ln-code{vertical-align:top}.me-code-box .hljs-ln .hljs-ln-numbers{text-align:right;width:50px;color:var(--me-code-box-ln-number);-webkit-user-select:none;user-select:none;border-right:1px solid var(--me-code-box-ln-border);padding:12px 8px!important}.me-code-box .hljs-ln .hljs-ln-n{display:block}.me-code-box .hljs-ln .hljs-ln-n:before{content:attr(data-line-number);font-size:12px;line-height:1.6}.me-code-box .hljs-ln .hljs-ln-code{padding:12px 16px!important}.me-code-box .hljs-ln .hljs-ln-line{white-space:pre;min-height:1.6em}.me-code-box .hljs-comment,.me-code-box .hljs-quote{color:#5c6370;font-style:italic}.me-code-box .hljs-doctag,.me-code-box .hljs-keyword,.me-code-box .hljs-formula{color:#c678dd}.me-code-box .hljs-section,.me-code-box .hljs-name,.me-code-box .hljs-selector-tag,.me-code-box .hljs-deletion,.me-code-box .hljs-subst{color:#e06c75}.me-code-box .hljs-literal{color:#56b6c2}.me-code-box .hljs-string,.me-code-box .hljs-regexp,.me-code-box .hljs-addition,.me-code-box .hljs-attribute,.me-code-box .hljs-meta .hljs-string{color:#98c379}.me-code-box .hljs-attr,.me-code-box .hljs-variable,.me-code-box .hljs-template-variable,.me-code-box .hljs-type,.me-code-box .hljs-selector-class,.me-code-box .hljs-selector-attr,.me-code-box .hljs-selector-pseudo,.me-code-box .hljs-number{color:#d19a66}.me-code-box .hljs-symbol,.me-code-box .hljs-bullet,.me-code-box .hljs-link,.me-code-box .hljs-meta,.me-code-box .hljs-selector-id,.me-code-box .hljs-title{color:#61aeee}.me-code-box .hljs-built_in,.me-code-box .hljs-title.class_,.me-code-box .hljs-class .hljs-title{color:#e6c07b}.me-code-box .hljs-emphasis{font-style:italic}.me-code-box .hljs-strong{font-weight:700}

package/dist/code-box/index.d.ts

@@ -0,0 +1,5 @@
+import { default as MeCodeBox } from './index.vue';
+import { default as MeCodeItem } from './code-item.vue';
+export { MeCodeBox, MeCodeItem };
+export default MeCodeBox;
+export * from './types';

package/dist/code-box/index.js

@@ -0,0 +1,178 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, onUnmounted as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useSlots as v, watch as y } from "vue";
+import { Check as b, Copy as x, FileCode as S } from "@lucide/vue";
+import { message as C } from "antdv-next";
+import w from "highlight.js/lib/core";
+import T from "highlight.js/lib/languages/typescript";
+import E from "highlight.js/lib/languages/javascript";
+import D from "highlight.js/lib/languages/xml";
+import O from "highlight.js/lib/languages/css";
+import k from "highlight.js/lib/languages/scss";
+import A from "highlight.js/lib/languages/json";
+import j from "highlight.js/lib/languages/bash";
+w.registerLanguage("ts", T), w.registerLanguage("typescript", T), w.registerLanguage("js", E), w.registerLanguage("javascript", E), w.registerLanguage("html", D), w.registerLanguage("xml", D), w.registerLanguage("vue", D), w.registerLanguage("css", O), w.registerLanguage("scss", k), w.registerLanguage("json", A), w.registerLanguage("bash", j), w.registerLanguage("shell", j);
+var M = /\r\n|\r|\n/g, N = (e) => e.length === 0 ? [] : e.split(M), P = (e) => (e.trim().match(M) || []).length, F = (e) => {
+	let t = e.className || "";
+	if (!/hljs-/.test(t)) return;
+	let n = N(e.innerHTML), r = "";
+	for (let e = 0; e < n.length; e++) {
+		let i = n[e].length > 0 ? n[e] : " ";
+		r += `<span class="${t}">${i}</span>\n`;
+	}
+	e.innerHTML = r.trim();
+}, I = (e) => {
+	let t = Array.from(e.childNodes);
+	for (let e of t) {
+		if (e.nodeType !== Node.ELEMENT_NODE) continue;
+		let t = e;
+		P(t.textContent || "") > 0 && (t.childNodes.length > 0 ? I(t) : F(t));
+	}
+}, L = (e, t = !0) => {
+	if (!e || typeof document > "u") return e;
+	let n = document.createElement("code");
+	n.innerHTML = e, I(n);
+	let r = N(n.innerHTML);
+	return r.length > 0 && r[r.length - 1].trim() === "" && r.pop(), r.length <= 1 && !t ? e : `<table class="hljs-ln">${r.map((e, t) => {
+		let n = t + 1;
+		return `<tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="${n}"><div class="hljs-ln-n" data-line-number="${n}"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="${n}">` + (e.length > 0 ? e : " ") + "</td></tr>";
+	}).join("")}</table>`;
+}, R = (e, t) => t && w.getLanguage(t) ? w.highlight(e, { language: t }).value : w.highlightAuto(e).value, z = {
+	key: 0,
+	class: "me-code-box__header"
+}, B = {
+	key: 0,
+	class: "me-code-box__tabs",
+	role: "tablist"
+}, V = ["aria-selected", "onClick"], H = {
+	key: 1,
+	class: "me-code-box__title"
+}, U = ["aria-label"], W = {
+	key: 1,
+	class: "me-code-box__desc"
+}, G = ["innerHTML"], K = /* @__PURE__ */ s({
+	name: "MeCodeBox",
+	__name: "index",
+	props: {
+		code: {},
+		language: { default: "vue" },
+		title: {},
+		filename: {},
+		description: {},
+		items: { default: () => [] },
+		activeIndex: {},
+		defaultActiveIndex: { default: 0 },
+		showLineNumbers: {
+			type: Boolean,
+			default: !0
+		},
+		showCopy: {
+			type: Boolean,
+			default: !0
+		},
+		copyText: { default: "复制代码" },
+		copiedText: { default: "已复制" },
+		maxHeight: {}
+	},
+	emits: [
+		"update:activeIndex",
+		"change",
+		"copy"
+	],
+	setup(s, { emit: h }) {
+		let w = s, T = h, E = v();
+		d(() => {
+			clearTimeout(X);
+		});
+		let D = t(() => {
+			let e = E.default?.() ?? [], t = [];
+			for (let n of e) {
+				let e = n.type;
+				if (typeof e == "string" || (e?.name || e?.__name) !== "MeCodeItem") continue;
+				let r = n.props ?? {};
+				r.code != null && t.push({
+					label: r.label ?? "",
+					code: r.code,
+					description: r.description,
+					language: r.language ?? w.language
+				});
+			}
+			return t;
+		}), O = t(() => w.items?.length ? w.items : D.value), k = t(() => O.value.length > 1), A = p(w.defaultActiveIndex), j = t({
+			get: () => w.activeIndex ?? Math.min(A.value, Math.max(O.value.length - 1, 0)),
+			set: (e) => {
+				A.value = e, T("update:activeIndex", e), T("change", e);
+			}
+		});
+		y(O, () => {
+			let e = Math.max(O.value.length - 1, 0);
+			(w.activeIndex ?? A.value) > e && (A.value = 0, T("update:activeIndex", 0), T("change", 0));
+		});
+		let M = t(() => O.value[j.value]), N = t(() => M.value?.label || w.filename || w.title || ""), P = t(() => M.value?.description ?? w.description ?? ""), F = t(() => k.value || !!N.value || w.showCopy), I = t(() => M.value?.language || w.language), K = t(() => {
+			let e = M.value?.code ?? w.code ?? "";
+			if (!e) return "";
+			let t = R(e, I.value || "vue");
+			return w.showLineNumbers ? L(t) : t;
+		}), q = t(() => w.maxHeight ? { maxHeight: w.maxHeight } : void 0), J = (e) => {
+			e !== j.value && (j.value = e);
+		}, Y = p(!1), X, Z = async () => {
+			let e = M.value?.code ?? w.code ?? "";
+			if (e) try {
+				await navigator.clipboard.writeText(e), Y.value = !0, T("copy", e), C.success(`${w.copiedText}，已复制到剪贴板`), clearTimeout(X), X = setTimeout(() => {
+					Y.value = !1;
+				}, 2e3);
+			} catch {
+				C.error("复制失败，请手动复制");
+			}
+		};
+		return (t, s) => (f(), i("div", c({ class: "me-code-box" }, t.$attrs), [
+			F.value ? (f(), i("div", z, [
+				k.value ? (f(), i("div", B, [(f(!0), i(e, null, m(O.value, (e, t) => (f(), i("button", {
+					key: t,
+					type: "button",
+					role: "tab",
+					class: l(["me-code-box__tab", { "me-code-box__tab--active": t === j.value }]),
+					"aria-selected": t === j.value,
+					onClick: (e) => J(t)
+				}, g(e.label), 11, V))), 128))])) : N.value ? (f(), i("div", H, [o(_(S), { size: 14 }), a("span", null, g(N.value), 1)])) : r("", !0),
+				s[0] ||= a("div", { class: "me-code-box__spacer" }, null, -1),
+				w.showCopy ? (f(), i("button", {
+					key: 2,
+					type: "button",
+					class: "me-code-box__copy",
+					"aria-label": Y.value ? w.copiedText : w.copyText,
+					onClick: Z
+				}, [Y.value ? (f(), n(_(b), {
+					key: 0,
+					size: 14
+				})) : (f(), n(_(x), {
+					key: 1,
+					size: 14
+				})), a("span", null, g(Y.value ? w.copiedText : w.copyText), 1)], 8, U)) : r("", !0)
+			])) : r("", !0),
+			P.value ? (f(), i("div", W, g(P.value), 1)) : r("", !0),
+			a("pre", {
+				class: l(["me-code-box__pre hljs", { "me-code-box__pre--pad": !w.showLineNumbers }]),
+				style: u(q.value)
+			}, [a("code", { innerHTML: K.value }, null, 8, G)], 6)
+		], 16));
+	}
+}), q = /* @__PURE__ */ s({
+	name: "MeCodeItem",
+	__name: "code-item",
+	props: {
+		label: {},
+		code: {},
+		description: {},
+		language: {}
+	},
+	setup(e) {
+		return (e, t) => h(e.$slots, "default");
+	}
+});
+K.install = (e) => {
+	e.component("MeCodeBox", K), e.component("MeCodeItem", q);
+}, q.install = (e) => {
+	e.component("MeCodeItem", q);
+};
+var J = K;
+//#endregion
+export { K as MeCodeBox, q as MeCodeItem, J as default };

package/dist/code-box/index.vue.d.ts

@@ -0,0 +1,20 @@
+import { MeCodeBoxItem, MeCodeBoxProps } from './types';
+declare const __VLS_export: import('vue').DefineComponent<MeCodeBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (index: number) => any;
+    "update:activeIndex": (index: number) => any;
+    copy: (code: string) => any;
+}, string, import('vue').PublicProps, Readonly<MeCodeBoxProps> & Readonly<{
+    onChange?: ((index: number) => any) | undefined;
+    "onUpdate:activeIndex"?: ((index: number) => any) | undefined;
+    onCopy?: ((code: string) => any) | undefined;
+}>, {
+    items: MeCodeBoxItem[];
+    language: string;
+    defaultActiveIndex: number;
+    showLineNumbers: boolean;
+    showCopy: boolean;
+    copyText: string;
+    copiedText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/code-box/types.d.ts

@@ -0,0 +1,64 @@
+/** MeCodeBox 单个代码块（code-group 数据项） */
+export interface MeCodeBoxItem {
+    /** tab 标签 */
+    label: string;
+    /** 代码内容 */
+    code: string;
+    /** 描述信息（显示在头部下方描述条，跟随激活项） */
+    description?: string;
+    /** 代码语言，默认继承 MeCodeBox 的 language prop */
+    language?: string;
+}
+/** MeCodeBox 组件 Props */
+export interface MeCodeBoxProps {
+    /** 单一代码内容（与 items 互斥，items 优先） */
+    code?: string;
+    /** 单一代码语言，默认 'vue' */
+    language?: string;
+    /** 头部标题（单一代码模式下作为文件名展示） */
+    title?: string;
+    /** 文件名（单一代码模式，优先于 title） */
+    filename?: string;
+    /** 描述信息（显示在头部与代码区之间的描述条；code-group 时取激活项 description，回退到此值） */
+    description?: string;
+    /** code-group 数据（优先于插槽收集的 MeCodeItem） */
+    items?: MeCodeBoxItem[];
+    /** 受控激活索引（配合 v-model:activeIndex 使用） */
+    activeIndex?: number;
+    /** 非受控默认激活索引，默认 0 */
+    defaultActiveIndex?: number;
+    /** 是否显示行号，默认 true */
+    showLineNumbers?: boolean;
+    /** 是否显示复制按钮，默认 true */
+    showCopy?: boolean;
+    /** 复制按钮文案，默认 '复制代码' */
+    copyText?: string;
+    /** 复制成功文案，默认 '已复制' */
+    copiedText?: string;
+    /** 代码区最大高度（超出滚动），默认 '' 不限制 */
+    maxHeight?: string;
+}
+/** MeCodeBox 组件 Emits */
+export interface MeCodeBoxEmits {
+    /** 激活索引变化（受控模式 v-model:activeIndex） */
+    (e: 'update:activeIndex', index: number): void;
+    /** tab 切换事件 */
+    (e: 'change', index: number): void;
+    /** 复制成功事件，载荷为被复制的代码原文 */
+    (e: 'copy', code: string): void;
+}
+/** MeCodeBox 组件实例类型 */
+export type MeCodeBoxInstance = InstanceType<typeof import('./index.vue').default>;
+/** MeCodeItem 数据载体 Props（插槽形态 code-group 使用，仅携带数据不渲染 DOM） */
+export interface MeCodeItemProps {
+    /** tab 标签 */
+    label?: string;
+    /** 代码内容 */
+    code?: string;
+    /** 描述信息（显示在头部下方描述条） */
+    description?: string;
+    /** 代码语言 */
+    language?: string;
+}
+/** MeCodeItem 组件实例类型 */
+export type MeCodeItemInstance = InstanceType<typeof import('./code-item.vue').default>;

package/dist/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /** 高德地图 Web 端 Key */
+  readonly VITE_AMAP_KEY?: string
+  /** 高德地图安全密钥 */
+  readonly VITE_AMAP_SECURITY_KEY?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/dist/index.d.ts

@@ -16,8 +16,9 @@ import { default as MeLoginPage } from './login-page';
 import { default as MeCard } from './card';
 import { default as MeSkeleton } from './skeleton';
 import { default as MeInputProperty } from './input-property';
+import { default as MeCodeBox, MeCodeItem } from './code-box';
 declare const install: (app: App) => void;
-export { MeMessage, MeMessageComponent, MeIcon, MeBox, MeBreadcrumb, MeBody, MeMenu, MeNav, MeModal, MeTreeMenu, MeInputGps, MeInputIconSelector, MeInputRadio, MeLoadJson, MeLoginPage, MeCard, MeSkeleton, MeInputProperty, install };
+export { MeMessage, MeMessageComponent, MeIcon, MeBox, MeBreadcrumb, MeBody, MeMenu, MeNav, MeModal, MeTreeMenu, MeInputGps, MeInputIconSelector, MeInputRadio, MeLoadJson, MeLoginPage, MeCard, MeSkeleton, MeInputProperty, MeCodeBox, MeCodeItem, install };
 export { MeMessage as $message } from './message';
 export { loadIconfont } from './icon';
 declare const _default: {
@@ -43,3 +44,4 @@ export * from './login-page';
 export * from './card';
 export * from './skeleton';
 export * from './input-property';
+export * from './code-box';

package/dist/input-property/index.css

@@ -1 +1 @@
-.me-input-property{width:100%;position:relative}.me-input-property__toolbar{justify-content:flex-end;margin-bottom:8px;display:flex}.me-input-property__add-btn{font-size:13px}.me-input-property__table{width:100%}.me-input-property__table .ant-table-row.me-input-property__row--ghost td{opacity:.4;background:#1677ff0a}.me-input-property__drop-line{background:var(--me-primary,#1677ff);pointer-events:none;z-index:9;border-radius:2px;height:2px;display:none;position:absolute;left:0;box-shadow:0 0 0 1px #fffc}.me-input-property__drag-fallback{opacity:.9;background:#fff;border:1px solid #d9d9d9;border-radius:6px;width:320px;display:table;box-shadow:0 4px 12px #00000026}.me-input-property__drag-fallback td{background:0 0;padding:8px 12px}.me-input-property__actions{align-items:center;gap:2px;display:inline-flex}.me-input-property__drag{cursor:grab;color:#999;border-radius:4px;justify-content:center;align-items:center;padding:2px;display:inline-flex}.me-input-property__drag:active{cursor:grabbing;color:var(--me-primary,#1677ff)}.me-input-property__drag:hover{color:var(--me-primary,#1677ff);background:#0000000a}.me-input-property__del{color:#999}.me-input-property__del:hover{color:#ff4d4f}
+.me-input-property{width:100%;position:relative}.me-input-property__toolbar{justify-content:flex-end;margin-bottom:8px;display:flex}.me-input-property__add-btn{font-size:13px}.me-input-property__value{width:100%}.me-input-property__value-type{flex:0 0 95px;width:95px}.me-input-property__value-editor{flex:1;min-width:0}.me-input-property__table{width:100%}.me-input-property__table .ant-table-row.me-input-property__row--ghost td{opacity:.4;background:#1677ff0a}.me-input-property__table .ant-input-status-error,.me-input-property__table .ant-input-number-status-error,.me-input-property__table .ant-picker-status-error{box-shadow:none!important;border-color:#d9d9d9!important}.me-input-property__table .ant-select-status-error{--ant-select-border-color:#d9d9d9!important;--ant-select-background-color:#fff!important;--ant-select-color:inherit!important;box-shadow:none!important}.me-input-property__table .me-input-property__field--error.ant-input,.me-input-property__table .me-input-property__field--error.ant-input-number,.me-input-property__table .me-input-property__field--error.ant-picker{border-color:#ff4d4f!important}.me-input-property__table .me-input-property__value.me-input-property__field--error{border-radius:6px;box-shadow:0 0 0 1px #ff4d4f}.me-input-property__drop-line{background:var(--me-primary,#1677ff);pointer-events:none;z-index:9;border-radius:2px;height:2px;display:none;position:absolute;left:0;box-shadow:0 0 0 1px #fffc}.me-input-property__drag-fallback{table-layout:fixed;border-collapse:separate;border-spacing:0;background:#fff;width:auto;display:table;box-shadow:0 4px 12px #00000026}.me-input-property__drag-fallback td{box-sizing:border-box;vertical-align:middle;background:#fff;border-bottom:1px solid #f0f0f0}.me-input-property__actions{align-items:center;gap:2px;display:inline-flex}.me-input-property__drag{cursor:grab;color:#999;border-radius:4px;justify-content:center;align-items:center;padding:2px;display:inline-flex}.me-input-property__drag:active{cursor:grabbing;color:var(--me-primary,#1677ff)}.me-input-property__drag:hover{color:var(--me-primary,#1677ff);background:#0000000a}.me-input-property__del{color:#999}.me-input-property__del:hover{color:#ff4d4f}.me-input-property__rules-btn{color:#bbb;border-radius:4px}.me-input-property__rules-btn:hover{color:var(--me-primary,#1677ff);background:#0000000a}.me-input-property__rules-btn.is-active{color:var(--me-primary,#1677ff)}.me-input-property__rule-input{width:100%}