@sdata/web-vue 4.3.0 → 4.4.0

package/es/regex-vis/regex-vis.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,331 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { useI18n } from "../locale/index.js";
+import input_default from "../input/input.js";
+import checkbox_group_default from "../checkbox/checkbox-group.js";
+import { createRegexVisDiagram } from "./layout.js";
+import parse from "./parser/parse.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withKeys, withModifiers } from "vue";
+//#region components/regex-vis/regex-vis.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = [
+	"viewBox",
+	"width",
+	"height",
+	"aria-label"
+];
+var _hoisted_3 = ["d"];
+var _hoisted_4 = ["cy"];
+var _hoisted_5 = ["cx", "cy"];
+var _hoisted_6 = ["x", "y"];
+var _hoisted_7 = ["data-y"];
+var _hoisted_8 = ["x", "y"];
+var _hoisted_9 = ["stroke-dasharray"];
+var _hoisted_10 = ["x", "y"];
+var _hoisted_11 = [
+	"role",
+	"tabindex",
+	"aria-label",
+	"aria-pressed",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_12 = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"rx"
+];
+var _hoisted_13 = ["x", "y"];
+var _hoisted_14 = ["x", "y"];
+var _hoisted_15 = ["x", "dy"];
+var regex_vis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "RegexVis" }), {}, {
+	__name: "regex-vis",
+	props: /*@__PURE__*/ mergeModels({
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		showInput: {
+			type: Boolean,
+			default: true
+		},
+		showFlags: {
+			type: Boolean,
+			default: true
+		},
+		selectable: {
+			type: Boolean,
+			default: true
+		},
+		placeholder: {},
+		emptyText: {},
+		ariaLabel: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"flags": { default: () => [] },
+		"flagsModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select", "error"], ["update:modelValue", "update:flags"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const flagsModel = useModel(__props, "flags");
+		const emit = __emit;
+		const prefixCls = getPrefixCls("regex-vis");
+		const { t } = useI18n();
+		const selectedId = shallowRef();
+		const flagOptions = [
+			{
+				label: "g",
+				value: "g"
+			},
+			{
+				label: "i",
+				value: "i"
+			},
+			{
+				label: "m",
+				value: "m"
+			},
+			{
+				label: "s",
+				value: "s"
+			},
+			{
+				label: "u",
+				value: "u"
+			},
+			{
+				label: "y",
+				value: "y"
+			}
+		];
+		const supportedFlags = /* @__PURE__ */ new Set([
+			"d",
+			"g",
+			"i",
+			"m",
+			"s",
+			"u",
+			"y"
+		]);
+		const parseResult = computed(() => parse(modelValue.value, { flags: flagsModel.value }));
+		const parseError = computed(() => parseResult.value.type === "error" ? parseResult.value : void 0);
+		const effectiveFlags = computed(() => parseResult.value.type === "regex" && parseResult.value.literal ? parseResult.value.flags : flagsModel.value);
+		const diagram = computed(() => {
+			if (parseResult.value.type === "error" || !modelValue.value) return void 0;
+			return createRegexVisDiagram(parseResult.value.body, t);
+		});
+		const placeholderText = computed(() => {
+			var _props$placeholder;
+			return (_props$placeholder = __props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : t("regexVis.placeholder");
+		});
+		const emptyStateText = computed(() => {
+			var _props$emptyText;
+			return (_props$emptyText = __props.emptyText) !== null && _props$emptyText !== void 0 ? _props$emptyText : t("regexVis.empty");
+		});
+		const ariaLabelText = computed(() => {
+			var _props$ariaLabel;
+			return (_props$ariaLabel = __props.ariaLabel) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : t("regexVis.graphLabel");
+		});
+		const rootClasses = computed(() => [prefixCls, {
+			[`${prefixCls}-readonly`]: __props.readonly,
+			[`${prefixCls}-selectable`]: __props.selectable,
+			[`${prefixCls}-invalid`]: Boolean(parseError.value)
+		}]);
+		const getNodeClasses = (node) => [
+			`${prefixCls}-node`,
+			`${prefixCls}-node-${node.variant}`,
+			{ [`${prefixCls}-node-selected`]: selectedId.value === node.id }
+		];
+		const isRegexVisFlag = (value) => typeof value === "string" && supportedFlags.has(value);
+		const updateFlags = (value) => {
+			const flags = value.filter(isRegexVisFlag);
+			flagsModel.value = flags;
+			if (parseResult.value.type === "regex" && parseResult.value.literal) {
+				const literalEnd = modelValue.value.lastIndexOf("/");
+				modelValue.value = `${modelValue.value.slice(0, literalEnd + 1)}${flags.join("")}`;
+			}
+		};
+		const selectNode = (node) => {
+			if (!__props.selectable) return;
+			selectedId.value = node.id;
+			emit("select", {
+				node: node.node,
+				label: node.label
+			});
+		};
+		watch(parseError, (error) => emit("error", error), { immediate: true });
+		watch(() => parseResult.value.type === "regex" && parseResult.value.literal ? parseResult.value.flags : void 0, (flags) => {
+			if (flags && (flags.length !== flagsModel.value.length || flags.some((flag, index) => flag !== flagsModel.value[index]))) flagsModel.value = [...flags];
+		}, { immediate: true });
+		watch(diagram, (nextDiagram) => {
+			if (selectedId.value && !(nextDiagram === null || nextDiagram === void 0 ? void 0 : nextDiagram.nodes.some((node) => node.id === selectedId.value))) selectedId.value = void 0;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", {
+				class: normalizeClass(rootClasses.value),
+				"aria-label": ariaLabelText.value
+			}, [
+				__props.showInput ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-controls`)
+				}, [createVNode(input_default, {
+					modelValue: modelValue.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+					class: normalizeClass(`${unref(prefixCls)}-input`),
+					placeholder: placeholderText.value,
+					readonly: __props.readonly,
+					error: Boolean(parseError.value),
+					"allow-clear": "",
+					"aria-label": unref(t)("regexVis.inputLabel")
+				}, null, 8, [
+					"modelValue",
+					"class",
+					"placeholder",
+					"readonly",
+					"error",
+					"aria-label"
+				]), __props.showFlags ? (openBlock(), createBlock(checkbox_group_default, {
+					key: 0,
+					"model-value": effectiveFlags.value,
+					options: flagOptions,
+					disabled: __props.readonly,
+					class: normalizeClass(`${unref(prefixCls)}-flags`),
+					"aria-label": unref(t)("regexVis.flagsLabel"),
+					"onUpdate:modelValue": updateFlags
+				}, null, 8, [
+					"model-value",
+					"disabled",
+					"class",
+					"aria-label"
+				])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-viewport`) }, [!modelValue.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-empty`)
+				}, [renderSlot(_ctx.$slots, "empty", { text: emptyStateText.value }, () => [createTextVNode(toDisplayString(emptyStateText.value), 1)])], 2)) : parseError.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-error`),
+					role: "alert"
+				}, [renderSlot(_ctx.$slots, "error", { error: parseError.value }, () => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-error-title`) }, toDisplayString(unref(t)("regexVis.invalid")), 3), createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-error-message`) }, toDisplayString(parseError.value.message), 3)])], 2)) : diagram.value ? (openBlock(), createElementBlock("svg", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}-graph`),
+					viewBox: `0 0 ${diagram.value.width} ${diagram.value.height}`,
+					width: diagram.value.width,
+					height: diagram.value.height,
+					role: "img",
+					"aria-label": `${ariaLabelText.value}：${modelValue.value}`,
+					"data-testid": "regex-vis-graph"
+				}, [
+					createElementVNode("g", {
+						class: normalizeClass(`${unref(prefixCls)}-rail`),
+						"aria-hidden": "true"
+					}, [
+						(openBlock(true), createElementBlock(Fragment, null, renderList(diagram.value.paths, (path) => {
+							return openBlock(), createElementBlock("path", {
+								key: path.id,
+								d: path.d
+							}, null, 8, _hoisted_3);
+						}), 128)),
+						createElementVNode("circle", {
+							cx: "8",
+							cy: diagram.value.startY,
+							r: "5"
+						}, null, 8, _hoisted_4),
+						createElementVNode("circle", {
+							cx: diagram.value.width - 8,
+							cy: diagram.value.startY,
+							r: "5"
+						}, null, 8, _hoisted_5)
+					], 2),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(diagram.value.labels, (label) => {
+						return openBlock(), createElementBlock("text", {
+							key: label.id,
+							class: normalizeClass(`${unref(prefixCls)}-${label.variant}-label`),
+							x: label.x,
+							y: label.y,
+							"dominant-baseline": "middle",
+							"text-anchor": "middle"
+						}, toDisplayString(label.text), 11, _hoisted_6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(diagram.value.quantifiers, (quantifier) => {
+						return openBlock(), createElementBlock("g", {
+							key: quantifier.id,
+							class: normalizeClass(`${unref(prefixCls)}-quantifier`),
+							"data-y": quantifier.y,
+							"aria-hidden": "true"
+						}, [(openBlock(), createElementBlock("svg", {
+							x: quantifier.x,
+							y: quantifier.y,
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "1.5"
+						}, [
+							_cache[1] || (_cache[1] = createElementVNode("path", { d: "M17 1l4 4-4 4" }, null, -1)),
+							createElementVNode("path", {
+								d: "M3 11V9a4 4 0 0 1 4-4h14M21 13v2a4 4 0 0 1-4 4H3",
+								"stroke-dasharray": quantifier.greedy ? void 0 : "4 4"
+							}, null, 8, _hoisted_9),
+							_cache[2] || (_cache[2] = createElementVNode("path", { d: "M7 23l-4-4 4-4" }, null, -1))
+						], 8, _hoisted_8)), createElementVNode("text", {
+							x: quantifier.x + 20,
+							y: quantifier.y + 8,
+							"dominant-baseline": "middle"
+						}, toDisplayString(quantifier.text), 9, _hoisted_10)], 10, _hoisted_7);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(diagram.value.nodes, (node) => {
+						return openBlock(), createElementBlock("g", {
+							key: node.id,
+							class: normalizeClass(getNodeClasses(node)),
+							role: __props.selectable ? "button" : void 0,
+							tabindex: __props.selectable ? 0 : void 0,
+							"aria-label": node.description,
+							"aria-pressed": __props.selectable ? selectedId.value === node.id : void 0,
+							onClick: withModifiers(($event) => selectNode(node), ["stop"]),
+							onKeydown: [withKeys(withModifiers(($event) => selectNode(node), ["stop", "prevent"]), ["enter"]), withKeys(withModifiers(($event) => selectNode(node), ["stop", "prevent"]), ["space"])]
+						}, [createElementVNode("rect", {
+							x: node.x,
+							y: node.y,
+							width: node.width,
+							height: node.height,
+							rx: node.variant === "group" || node.variant === "choice" ? 8 : 4
+						}, null, 8, _hoisted_12), node.variant === "group" || node.variant === "choice" ? (openBlock(), createElementBlock("text", {
+							key: 0,
+							x: node.x + 12,
+							y: node.y + 18,
+							"dominant-baseline": "middle"
+						}, toDisplayString(node.label), 9, _hoisted_13)) : (openBlock(), createElementBlock("text", {
+							key: 1,
+							x: node.x + node.width / 2,
+							y: node.y + node.height / 2,
+							"dominant-baseline": "middle",
+							"text-anchor": "middle"
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(node.lines, (line, index) => {
+							return openBlock(), createElementBlock("tspan", {
+								key: `${node.id}-line-${index}`,
+								x: node.x + node.width / 2,
+								dy: index === 0 ? -((node.lines.length - 1) * 20) / 2 : 20
+							}, toDisplayString(line), 9, _hoisted_15);
+						}), 128))], 8, _hoisted_14))], 42, _hoisted_11);
+					}), 128))
+				], 10, _hoisted_2)) : createCommentVNode("", true)], 2),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-footer`)
+				}, [renderSlot(_ctx.$slots, "footer", {
+					value: modelValue.value,
+					flags: effectiveFlags.value
+				})], 2)) : createCommentVNode("", true)
+			], 10, _hoisted_1);
+		};
+	}
+}));
+//#endregion
+export { regex_vis_vue_vue_type_script_setup_true_lang_default as default };

package/es/regex-vis/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/regex-vis/style/index.css

@@ -0,0 +1,187 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-regex-vis {
+  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--sd-color-text-1);
+  font-size: 14px;
+  background: var(--sd-color-bg-2);
+  border: 1px solid var(--sd-color-border-2);
+  border-radius: var(--sd-border-radius-large);
+}
+.sd-regex-vis-controls {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--sd-color-border-2);
+}
+.sd-regex-vis-input {
+  flex: 1;
+  min-width: 0;
+  font-family: consolas, menlo;
+}
+.sd-regex-vis-flags {
+  flex: none;
+  white-space: nowrap;
+}
+.sd-regex-vis-viewport {
+  display: flex;
+  align-items: center;
+  min-height: 160px;
+  padding: 16px;
+  overflow: auto;
+  background: var(--sd-color-bg-1);
+}
+.sd-regex-vis-graph {
+  display: block;
+  flex: none;
+  margin: auto;
+  overflow: visible;
+  font-family: consolas, menlo;
+}
+.sd-regex-vis-rail {
+  fill: var(--sd-color-bg-1);
+  stroke: var(--sd-color-text-3);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1px;
+}
+.sd-regex-vis-empty-label {
+  font-size: 12px;
+  fill: var(--sd-color-text-3);
+}
+.sd-regex-vis-name-label {
+  font-weight: 500;
+  font-size: 14px;
+  user-select: none;
+  fill: var(--sd-color-text-1);
+}
+.sd-regex-vis-quantifier {
+  color: var(--sd-color-text-1);
+}
+.sd-regex-vis-quantifier svg {
+  overflow: visible;
+  color: currentcolor;
+}
+.sd-regex-vis-quantifier text {
+  font-weight: 500;
+  font-size: 14px;
+  user-select: none;
+  fill: currentcolor;
+}
+.sd-regex-vis-node {
+  color: var(--sd-color-text-1);
+  outline: none;
+  cursor: default;
+}
+.sd-regex-vis-node rect {
+  transition: fill 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), stroke 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
+  fill: var(--sd-color-primary-light-1);
+  stroke: rgb(var(--sd-primary-6));
+  stroke-width: 1px;
+}
+.sd-regex-vis-node text {
+  font-weight: 500;
+  font-size: 14px;
+  user-select: none;
+  pointer-events: none;
+  fill: currentcolor;
+}
+.sd-regex-vis-node-assertion rect {
+  fill: var(--sd-color-success-light-1);
+  stroke: rgb(var(--sd-success-6));
+}
+.sd-regex-vis-node-group rect, .sd-regex-vis-node-choice rect {
+  fill: none;
+  stroke: var(--sd-color-border-3);
+}
+.sd-regex-vis-node-choice rect {
+  stroke-dasharray: 6px 4px;
+}
+.sd-regex-vis-node:focus-visible rect {
+  stroke: rgb(var(--sd-primary-5));
+  stroke-width: 2px;
+}
+.sd-regex-vis-node-selected rect {
+  fill: var(--sd-color-primary-light-3);
+  stroke: rgb(var(--sd-primary-6));
+  stroke-width: 2px;
+}
+.sd-regex-vis-node-group.sd-regex-vis-node-selected rect, .sd-regex-vis-node-choice.sd-regex-vis-node-selected rect {
+  fill: none;
+}
+.sd-regex-vis-selectable .sd-regex-vis-node {
+  cursor: pointer;
+}
+.sd-regex-vis-empty, .sd-regex-vis-error {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 160px;
+  color: var(--sd-color-text-3);
+  text-align: center;
+}
+.sd-regex-vis-error {
+  box-sizing: border-box;
+  padding: 16px;
+  color: rgb(var(--sd-danger-6));
+  background: var(--sd-color-danger-light-1);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-regex-vis-error-title {
+  font-weight: 500;
+}
+.sd-regex-vis-error-message {
+  max-width: 100%;
+  font-size: 12px;
+  font-family: consolas, menlo;
+  overflow-wrap: anywhere;
+}
+.sd-regex-vis-footer {
+  padding: 12px 16px;
+  color: var(--sd-color-text-3);
+  border-top: 1px solid var(--sd-color-border-2);
+}
+@media (hover: hover) {
+  .sd-regex-vis-selectable .sd-regex-vis-node:hover rect {
+    fill: var(--sd-color-primary-light-2);
+  }
+  .sd-regex-vis-selectable .sd-regex-vis-node-group:hover rect, .sd-regex-vis-selectable .sd-regex-vis-node-choice:hover rect {
+    fill: none;
+    stroke: rgb(var(--sd-primary-6));
+  }
+}
+@media (width <= 640px) {
+  .sd-regex-vis-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .sd-regex-vis-flags {
+    white-space: normal;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sd-regex-vis-node rect {
+    transition: none;
+  }
+}

package/es/regex-vis/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/regex-vis/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";