@opendesign-plus-test/components 0.0.1-rc.155 → 0.0.1-rc.157

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

@@ -0,0 +1,112 @@
+import { defineComponent, computed, 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: "TableData",
+  props: {
+    content: {},
+    original: { type: Boolean },
+    maxHeight: { default: "calc(100vh - var(--layout-doc-content-min-height, 144px) - 64px)" }
+  },
+  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;
+      });
+    });
+    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", null, null, 512), [
+              [unref(vDompurifyHtml), props.content]
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["style"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,66 @@
+.hover-icon-rotate .o-icon[data-v-049444f7] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-049444f7] {
+    transform: rotate(-180deg);
+}
+}
+.o-table-expand-scaler[data-v-049444f7] {
+  position: relative;
+  width: 80vw;
+  height: auto;
+  max-height: 90vh;
+  overflow: auto;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-l);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-table-expand-scaler[data-v-049444f7] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-table-expand-scaler[data-v-049444f7] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-table-expand-scaler[data-v-049444f7] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-table-expand-scaler[data-v-049444f7] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-table-expand-close-btn[data-v-049444f7] {
+  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-049444f7]:hover {
+    color: var(--o-color-info1);
+}
+}
+.o-table-expand-close-btn .o-table-expand-close-icon[data-v-049444f7] {
+  margin-right: 8px;
+}
+.o-table-expand-content[data-v-049444f7] {
+  padding: 48px 32px;
+}

package/dist/treeshaking/components/markdown/components/TableExpand.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/TableExpand.vue.mjs

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

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

@@ -0,0 +1,89 @@
+import { defineComponent, useModel, ref, watch, onBeforeUnmount, resolveComponent, openBlock, createBlock, withCtx, createVNode, unref, createElementVNode, toDisplayString, mergeModels } from "vue";
+import { OLayer, OIcon } from "@opensig/opendesign";
+import { useI18n } from "../../../i18n/index.mjs";
+import IconUnexpand from "../../../_virtual/icon-unexpand.mjs";
+import TableData from "./TableData.vue.mjs";
+const _hoisted_1 = { class: "o-table-expand-scaler" };
+const _hoisted_2 = { class: "o-table-expand-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TableExpand",
+  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) => {
+      const _component_ClientOnly = resolveComponent("ClientOnly");
+      return openBlock(), createBlock(_component_ClientOnly, null, {
+        default: withCtx(() => [
+          createVNode(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(TableData, {
+                    original: !tableReady.value,
+                    content: __props.content,
+                    "max-height": "min(calc(100vh - var(--layout-doc-content-min-height, 144px) - 64px), 80vh)"
+                  }, null, 8, ["original", "content"])
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["visible"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/markdown/index.d.ts

@@ -0,0 +1,163 @@
+import { App } from 'vue';
+declare const MarkdownTable: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        tableRef: HTMLDivElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+declare const MarkdownCode: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        lang?: string;
+        code?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        mdCodeRef: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        lang?: string;
+        code?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{
+    lang?: string;
+    code?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+declare const MarkdownImage: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        containerRef: HTMLSpanElement;
+    }, HTMLSpanElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+declare const MarkdownTitle: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        titleId: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        "onScroll-into-title"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "scroll-into-title": () => any;
+    }, import('vue').PublicProps, {
+        titleId: string;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLSpanElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        titleId: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        "onScroll-into-title"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        titleId: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    titleId: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onScroll-into-title"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "scroll-into-title": () => any;
+}, string, {
+    titleId: string;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+declare const MarkdownPageTitle: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        bg?: string;
+        gitcodeUrl?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        bg: string;
+        gitcodeUrl: string;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        titleRef: HTMLDivElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        bg?: string;
+        gitcodeUrl?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, {
+        bg: string;
+        gitcodeUrl: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{
+    bg?: string;
+    gitcodeUrl?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    bg: string;
+    gitcodeUrl: string;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & {
+    install(app: App): void;
+};
+export { MarkdownTable, MarkdownCode, MarkdownImage, MarkdownTitle, MarkdownPageTitle, };

package/dist/treeshaking/components/markdown/index.mjs

@@ -0,0 +1,37 @@
+import _MarkdownTable from "./MarkdownTable.vue.mjs";
+import _MarkdownCode from "./MarkdownCode.vue.mjs";
+import _MarkdownImage from "./MarkdownImage.vue.mjs";
+import _MarkdownTitle from "./MarkdownTitle.vue.mjs";
+import _MarkdownPageTitle from "./MarkdownPageTitle.vue.mjs";
+const MarkdownTable = Object.assign(_MarkdownTable, {
+  install(app) {
+    app.component("MarkdownTable", _MarkdownTable);
+  }
+});
+const MarkdownCode = Object.assign(_MarkdownCode, {
+  install(app) {
+    app.component("MarkdownCode", _MarkdownCode);
+  }
+});
+const MarkdownImage = Object.assign(_MarkdownImage, {
+  install(app) {
+    app.component("MarkdownImage", _MarkdownImage);
+  }
+});
+const MarkdownTitle = Object.assign(_MarkdownTitle, {
+  install(app) {
+    app.component("MarkdownTitle", _MarkdownTitle);
+  }
+});
+const MarkdownPageTitle = Object.assign(_MarkdownPageTitle, {
+  install(app) {
+    app.component("MarkdownPageTitle", _MarkdownPageTitle);
+  }
+});
+export {
+  MarkdownCode,
+  MarkdownImage,
+  MarkdownPageTitle,
+  MarkdownTable,
+  MarkdownTitle
+};