@opendesign-plus-test/components 0.0.1-rc.160 → 0.0.1-rc.162

package/dist/treeshaking/components/markdown/components/MarkdownTable.css

@@ -0,0 +1,61 @@
+.hover-icon-rotate .o-icon[data-v-2613e65b] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-2613e65b] {
+    transform: rotate(-180deg);
+}
+}
+.o-md-table-container[data-v-2613e65b] {
+  position: relative;
+  width: 100%;
+  margin-bottom: var(--o-gap-2, 8px);
+}
+.o-md-table-container .o-md-table-expand-btn[data-v-2613e65b] {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 16px;
+  z-index: 10;
+  cursor: pointer;
+  color: var(--o-color-info2);
+  background-color: var(--o-color-fill2);
+  border-top-right-radius: var(--o-radius-xs);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-md-table-container .o-md-table-expand-btn[data-v-2613e65b] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-md-table-container .o-md-table-expand-btn[data-v-2613e65b] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-md-table-container .o-md-table-expand-btn[data-v-2613e65b] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-md-table-container .o-md-table-expand-btn[data-v-2613e65b] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (hover: hover) {
+.o-md-table-container .o-md-table-expand-btn[data-v-2613e65b]:hover {
+    color: var(--o-color-info1);
+}
+}
+.o-md-table-container .o-md-table-expand-btn .o-md-table-expand-icon[data-v-2613e65b] {
+  margin-right: 8px;
+}

package/dist/treeshaking/components/markdown/components/MarkdownTable.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    el: HTMLTableElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/treeshaking/components/markdown/components/MarkdownTable.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./MarkdownTable.vue2.mjs";
+import './MarkdownTable.css';
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const MarkdownTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2613e65b"]]);
+export {
+  MarkdownTable as default
+};

package/dist/treeshaking/components/markdown/components/MarkdownTable.vue2.mjs

@@ -0,0 +1,59 @@
+import { defineComponent, ref, openBlock, createElementBlock, Fragment, createElementVNode, unref, createVNode, withCtx, toDisplayString, createCommentVNode, createBlock } from "vue";
+import { OIcon } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import { useI18n } from "../../../i18n/index.mjs";
+import IconExpand from "../../../_virtual/icon-expand.mjs";
+import MarkdownTableExpand from "./MarkdownTableExpand.vue.mjs";
+import MarkdownTableData from "./MarkdownTableData.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MarkdownTable",
+  props: {
+    el: {}
+  },
+  setup(__props) {
+    const { t } = useI18n();
+    const { lePadV } = useScreen();
+    const showExpand = ref(false);
+    const zoomVisible = ref(false);
+    const onExpand = () => {
+      zoomVisible.value = true;
+    };
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: "o-md-table-container",
+          onMouseenter: _cache[0] || (_cache[0] = ($event) => showExpand.value = true),
+          onMouseleave: _cache[1] || (_cache[1] = ($event) => showExpand.value = false)
+        }, [
+          !unref(lePadV) && showExpand.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "o-md-table-expand-btn",
+            onClick: onExpand
+          }, [
+            createVNode(unref(OIcon), { class: "o-md-table-expand-icon" }, {
+              default: withCtx(() => [
+                createVNode(unref(IconExpand))
+              ]),
+              _: 1
+            }),
+            createElementVNode("span", null, toDisplayString(unref(t)("common.expand")), 1)
+          ])) : createCommentVNode("", true),
+          ((_a = __props.el) == null ? void 0 : _a.outerHTML) ? (openBlock(), createBlock(MarkdownTableData, {
+            key: 1,
+            content: __props.el.outerHTML
+          }, null, 8, ["content"])) : createCommentVNode("", true)
+        ], 32),
+        ((_b = __props.el) == null ? void 0 : _b.outerHTML) ? (openBlock(), createBlock(MarkdownTableExpand, {
+          key: 0,
+          visible: zoomVisible.value,
+          "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => zoomVisible.value = $event),
+          content: __props.el.outerHTML
+        }, null, 8, ["visible", "content"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/markdown/components/MarkdownTableData.css

@@ -0,0 +1,107 @@
+.hover-icon-rotate .o-icon[data-v-2abc86cf] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-2abc86cf] {
+    transform: rotate(-180deg);
+}
+}
+.o-table-data--wrap[data-v-2abc86cf] {
+  --o-gap-1: 4px;
+  --o-gap-2: 8px;
+  --o-gap-3: 12px;
+  --o-gap-4: 16px;
+  --o-gap-5: 24px;
+  --o-gap-6: 32px;
+  --o-gap-7: 40px;
+  --o-gap-8: 48px;
+  --o-gap-9: 64px;
+  --o-gap-10: 72px;
+}
+@media (max-width: 1680px) {
+.o-table-data--wrap[data-v-2abc86cf] {
+    --o-gap-1: 4px;
+    --o-gap-2: 8px;
+    --o-gap-3: 8px;
+    --o-gap-4: 12px;
+    --o-gap-5: 16px;
+    --o-gap-6: 24px;
+    --o-gap-7: 24px;
+    --o-gap-8: 40px;
+    --o-gap-9: 48px;
+    --o-gap-10: 56px;
+}
+}
+@media (max-width: 1200px) {
+.o-table-data--wrap[data-v-2abc86cf] {
+    --o-gap-1: 4px;
+    --o-gap-2: 8px;
+    --o-gap-3: 8px;
+    --o-gap-4: 8px;
+    --o-gap-5: 12px;
+    --o-gap-6: 16px;
+    --o-gap-7: 16px;
+    --o-gap-8: 24px;
+    --o-gap-9: 32px;
+    --o-gap-10: 40px;
+}
+}
+@media (max-width: 840px) {
+.o-table-data--wrap[data-v-2abc86cf] {
+    --o-gap-1: 4px;
+    --o-gap-2: 8px;
+    --o-gap-3: 12px;
+    --o-gap-4: 16px;
+    --o-gap-5: 24px;
+    --o-gap-6: 28px;
+    --o-gap-7: 12px;
+    --o-gap-8: 24px;
+    --o-gap-9: 32px;
+    --o-gap-10: 32px;
+}
+}
+@media (max-width: 600px) {
+.o-table-data--wrap[data-v-2abc86cf] {
+    --o-gap-1: 4px;
+    --o-gap-2: 8px;
+    --o-gap-3: 12px;
+    --o-gap-4: 16px;
+    --o-gap-5: 24px;
+    --o-gap-6: 28px;
+    --o-gap-7: 12px;
+    --o-gap-8: 24px;
+    --o-gap-9: 32px;
+    --o-gap-10: 32px;
+}
+}
+.o-table-data--wrap[data-v-2abc86cf] .o-data-table {
+  --table-edge-padding: var(--o-gap-4);
+  --table-cell-padding: var(--o-gap-2) var(--o-gap-4);
+  --table-head-cell-padding: var(--o-gap-2) var(--o-gap-4);
+  --table-head-bg: var(--o-color-fill2);
+  width: 100%;
+}
+.o-table-data--wrap[data-v-2abc86cf] .o-data-table .o-data-table-header-divider-h {
+  border-image: linear-gradient(to right, #2e53fa, #7b25f4) 1;
+}
+.o-table-data--wrap[data-v-2abc86cf] .md-cell {
+  background: var(--o-color-fill2) !important;
+}
+.o-table-data-original[data-v-2abc86cf] {
+  width: 100%;
+  margin-bottom: var(--o-gap-2);
+  max-height: var(--o-md-table-max-height);
+  overflow: auto;
+  border: 1px solid var(--o-color-control4);
+  border-radius: var(--o-md-table-radius, var(--o-radius-xs));
+}
+.o-table-data-original .markdown-body[data-v-2abc86cf] table {
+  margin-bottom: 0;
+  /* 由 markTableEdges 标记的最右列 / 最底行单元格：把外侧边框交给滚动容器绘制，避免叠加成 2px */
+}
+.o-table-data-original .markdown-body[data-v-2abc86cf] table .md-cell-edge-right {
+  border-right: none;
+}
+.o-table-data-original .markdown-body[data-v-2abc86cf] table .md-cell-edge-bottom {
+  border-bottom: none;
+}

package/dist/treeshaking/components/markdown/components/MarkdownTableData.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    content: string;
+    original?: boolean;
+    maxHeight?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    maxHeight: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rawTableRef: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/treeshaking/components/markdown/components/MarkdownTableData.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./MarkdownTableData.vue2.mjs";
+import './MarkdownTableData.css';
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const MarkdownTableData = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2abc86cf"]]);
+export {
+  MarkdownTableData as default
+};

package/dist/treeshaking/components/markdown/components/MarkdownTableData.vue2.mjs

@@ -0,0 +1,176 @@
+import { defineComponent, computed, ref, onMounted, watch, openBlock, createElementBlock, createVNode, unref, createBlock, normalizeStyle, withCtx, createElementVNode, withDirectives, h } from "vue";
+import { ODataTable, OScroller } from "@opensig/opendesign";
+import { buildVueDompurifyHTMLDirective } from "vue-dompurify-html";
+const _hoisted_1 = {
+  key: 0,
+  class: "o-table-data--wrap"
+};
+const _hoisted_2 = { class: "markdown-body" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MarkdownTableData",
+  props: {
+    content: {},
+    original: { type: Boolean },
+    maxHeight: { default: "calc(100vh - 210px)" }
+  },
+  setup(__props) {
+    const vDompurifyHtml = buildVueDompurifyHTMLDirective();
+    const props = __props;
+    const renderHtmlCell = (html) => withDirectives(h("div", { class: "md-cell markdown-body" }), [[vDompurifyHtml, html]]);
+    const isRegular = computed(() => {
+      if (props.original) {
+        return false;
+      }
+      const html = (props.content || "").trim();
+      if (!html) {
+        return false;
+      }
+      if (typeof DOMParser === "undefined") {
+        return false;
+      }
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      const table = doc.querySelector("table");
+      if (!table) {
+        return false;
+      }
+      if (table.querySelector("[colspan],[rowspan]")) {
+        return false;
+      }
+      const thead = table.querySelector("thead");
+      const headerRow = thead == null ? void 0 : thead.querySelector("tr");
+      const headerCells = headerRow ? Array.from(headerRow.children) : [];
+      if (headerCells.length === 0) {
+        return false;
+      }
+      const tbody = table.querySelector("tbody") ?? table;
+      const bodyRows = Array.from(tbody.querySelectorAll("tr")).filter((tr) => !tr.closest("thead"));
+      return bodyRows.length > 0;
+    });
+    const tableColumns = computed(() => {
+      if (!isRegular.value) {
+        return [];
+      }
+      const doc = new DOMParser().parseFromString(props.content, "text/html");
+      const headerRow = doc.querySelector("thead tr");
+      const headerCells = headerRow ? Array.from(headerRow.children) : [];
+      return headerCells.map((cell, i) => ({
+        key: `col_${i}`,
+        label: (cell.textContent || "").trim(),
+        minWidth: 120,
+        formatter: ({ cellValue }) => renderHtmlCell(String(cellValue ?? ""))
+      }));
+    });
+    const tableData = computed(() => {
+      if (!isRegular.value) {
+        return [];
+      }
+      const doc = new DOMParser().parseFromString(props.content, "text/html");
+      const tbody = doc.querySelector("tbody") ?? doc.querySelector("table");
+      const bodyRows = Array.from(tbody.querySelectorAll("tr")).filter((tr) => !tr.closest("thead"));
+      return bodyRows.map((tr, rowIndex) => {
+        const cells = Array.from(tr.querySelectorAll("td,th"));
+        const row = { id: rowIndex };
+        cells.forEach((cell, i) => {
+          row[`col_${i}`] = cell.innerHTML;
+        });
+        return row;
+      });
+    });
+    const rawTableRef = ref();
+    const markTableEdges = () => {
+      const root = rawTableRef.value;
+      if (!root) {
+        return;
+      }
+      root.querySelectorAll("table").forEach((table) => {
+        const rows = Array.from(table.rows);
+        if (rows.length === 0) {
+          return;
+        }
+        const occupied = [];
+        const meta = /* @__PURE__ */ new WeakMap();
+        let totalCols = 0;
+        rows.forEach((row, r) => {
+          if (!occupied[r]) {
+            occupied[r] = [];
+          }
+          let c = 0;
+          Array.from(row.cells).forEach((cell) => {
+            while (occupied[r][c]) {
+              c++;
+            }
+            const rspan = cell.rowSpan || 1;
+            const span = cell.colSpan || 1;
+            for (let rr = r; rr < r + rspan; rr++) {
+              if (!occupied[rr]) {
+                occupied[rr] = [];
+              }
+              for (let cc = c; cc < c + span; cc++) {
+                occupied[rr][cc] = true;
+              }
+            }
+            meta.set(cell, { col: c, span, row: r, rspan });
+            if (c + span > totalCols) {
+              totalCols = c + span;
+            }
+            c += span;
+          });
+        });
+        const totalRows = rows.length;
+        rows.forEach((row) => {
+          Array.from(row.cells).forEach((cell) => {
+            const info = meta.get(cell);
+            if (!info) {
+              return;
+            }
+            cell.classList.remove("md-cell-edge-right", "md-cell-edge-bottom");
+            if (info.col + info.span === totalCols) {
+              cell.classList.add("md-cell-edge-right");
+            }
+            if (info.row + info.rspan === totalRows) {
+              cell.classList.add("md-cell-edge-bottom");
+            }
+          });
+        });
+      });
+    };
+    onMounted(markTableEdges);
+    watch(() => props.content, markTableEdges, { flush: "post" });
+    return (_ctx, _cache) => {
+      return isRegular.value && tableColumns.value.length && tableData.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(ODataTable), {
+          data: tableData.value,
+          columns: tableColumns.value,
+          "row-key": "id",
+          border: "all",
+          "header-style": "split-line",
+          size: "small",
+          "column-resizable": "",
+          "max-height": __props.maxHeight
+        }, null, 8, ["data", "columns", "max-height"])
+      ])) : (openBlock(), createBlock(unref(OScroller), {
+        key: 1,
+        class: "o-table-data-original",
+        size: "small",
+        "show-type": "always",
+        style: normalizeStyle({ "--o-md-table-max-height": __props.maxHeight })
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_2, [
+            withDirectives(createElementVNode("div", {
+              ref_key: "rawTableRef",
+              ref: rawTableRef,
+              class: "__mounted"
+            }, null, 512), [
+              [unref(vDompurifyHtml), props.content]
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["style"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/markdown/components/MarkdownTableExpand.css

@@ -0,0 +1,66 @@
+.hover-icon-rotate .o-icon[data-v-e61df98a] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-e61df98a] {
+    transform: rotate(-180deg);
+}
+}
+.o-table-expand-scaler[data-v-e61df98a] {
+  position: relative;
+  width: 80vw;
+  height: auto;
+  max-height: 90vh;
+  overflow: auto;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-table-expand-scaler[data-v-e61df98a] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-table-expand-scaler[data-v-e61df98a] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-table-expand-scaler[data-v-e61df98a] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-table-expand-scaler[data-v-e61df98a] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-table-expand-close-btn[data-v-e61df98a] {
+  position: sticky;
+  top: 12px;
+  right: 12px;
+  float: right;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--o-color-info2);
+}
+@media (hover: hover) {
+.o-table-expand-close-btn[data-v-e61df98a]:hover {
+    color: var(--o-color-info1);
+}
+}
+.o-table-expand-close-btn .o-table-expand-close-icon[data-v-e61df98a] {
+  margin-right: 8px;
+}
+.o-table-expand-content[data-v-e61df98a] {
+  padding: 48px 32px;
+}

package/dist/treeshaking/components/markdown/components/MarkdownTableExpand.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    content: string;
+};
+type __VLS_PublicProps = {
+    'visible'?: boolean;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:visible": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/treeshaking/components/markdown/components/MarkdownTableExpand.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./MarkdownTableExpand.vue2.mjs";
+import './MarkdownTableExpand.css';
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const MarkdownTableExpand = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e61df98a"]]);
+export {
+  MarkdownTableExpand as default
+};

package/dist/treeshaking/components/markdown/components/MarkdownTableExpand.vue2.mjs

@@ -0,0 +1,83 @@
+import { defineComponent, useModel, ref, watch, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, toDisplayString, mergeModels } from "vue";
+import { OLayer, OIcon } from "@opensig/opendesign";
+import { useI18n } from "../../../i18n/index.mjs";
+import IconUnexpand from "../../../_virtual/icon-unexpand.mjs";
+import MarkdownTableData from "./MarkdownTableData.vue.mjs";
+const _hoisted_1 = { class: "o-table-expand-scaler" };
+const _hoisted_2 = { class: "o-table-expand-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MarkdownTableExpand",
+  props: /* @__PURE__ */ mergeModels({
+    content: {}
+  }, {
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: ["update:visible"],
+  setup(__props) {
+    const { t } = useI18n();
+    const visible = useModel(__props, "visible");
+    const onClose = () => {
+      visible.value = false;
+    };
+    const tableReady = ref(false);
+    let readyTimer;
+    watch(
+      () => visible.value,
+      (val) => {
+        if (typeof window === "undefined") {
+          return;
+        }
+        if (readyTimer) {
+          clearTimeout(readyTimer);
+        }
+        clearTimeout(readyTimer);
+        readyTimer = setTimeout(() => {
+          tableReady.value = val;
+        }, 300);
+      },
+      {
+        immediate: true
+      }
+    );
+    onBeforeUnmount(() => {
+      if (readyTimer) {
+        clearTimeout(readyTimer);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(OLayer), {
+        visible: visible.value,
+        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", {
+              class: "o-table-expand-close-btn",
+              onClick: onClose
+            }, [
+              createVNode(unref(OIcon), { class: "o-table-expand-close-icon" }, {
+                default: withCtx(() => [
+                  createVNode(unref(IconUnexpand))
+                ]),
+                _: 1
+              }),
+              createElementVNode("span", null, toDisplayString(unref(t)("common.collapse")), 1)
+            ]),
+            createElementVNode("div", _hoisted_2, [
+              createVNode(MarkdownTableData, {
+                original: !tableReady.value,
+                content: __props.content,
+                "max-height": "min(calc(100vh - 210px), 80vh)"
+              }, null, 8, ["original", "content"])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};