@das-fed/upf-ui 6.4.0-dev.237 → 6.4.0-dev.239

package/packages/business-components/app-container/index.js

@@ -1,172 +1,191 @@
 import '@das-fed/upf-ui/packages/business-components/app-container/style.css';
-import { withInstall as P } from "@das-fed/upf-utils/with-install/index";
-import { defineComponent as U, computed as k, ref as $, watch as z, onMounted as M, openBlock as a, createBlock as f, unref as i, withCtx as h, createElementVNode as l, normalizeClass as O, normalizeStyle as x, createElementBlock as r, Fragment as g, renderList as _, toDisplayString as y, withDirectives as D, createTextVNode as q } from "vue";
+import { withInstall as B } from "@das-fed/upf-utils/with-install/index";
+import { defineComponent as R, ref as P, computed as U, watch as z, onMounted as M, openBlock as s, createBlock as f, unref as l, withCtx as g, createElementVNode as i, createElementBlock as r, Fragment as _, renderList as y, createCommentVNode as q, normalizeStyle as $, toDisplayString as S, withDirectives as D, createTextVNode as H } from "vue";
 import { ElRow as G, ElCol as J } from "element-plus";
 import "element-plus/es/components/row/style/css";
 import "element-plus/es/components/col/style/css";
 import { DasEmpty as K } from "@das-fed/upf-ui/packages/components/empty/index";
-import { vDasTooltip as j } from "@das-fed/upf-ui/packages/components/text-tooltip/index";
-import { DasScrollbar as Q } from "@das-fed/upf-ui/packages/components/scrollbar/index";
-import { pureImageSrc as T } from "@das-fed/upf-utils/pure-image-src";
-import { setThemeRule as X } from "@das-fed/upf-web/packages/theme/index";
-const E = {
-  "--das-application-app-bg-color": {
-    kjl: "#2673DC",
-    cjb: "#343848",
-    ssl: "#2D314F"
-  },
-  "--das-application-app-color": {
-    kjl: "#FFFFFF",
-    cjb: "#FFFFFF",
-    ssl: "#FFFFFF"
-  }
-}, Y = {
+import { vDasTooltip as N } from "@das-fed/upf-ui/packages/components/text-tooltip/index";
+import { DasScrollbar as O } from "@das-fed/upf-ui/packages/components/scrollbar/index";
+import { pureImageSrc as E } from "@das-fed/upf-utils/pure-image-src";
+const Q = { class: "application-content" }, X = {
   key: 0,
   class: "application-list"
-}, Z = { class: "table" }, A = { class: "table-cell column_1" }, tt = { class: "app-name" }, et = { class: "table-cell column_2" }, ot = { class: "column_2_content" }, nt = ["onClick"], ct = { class: "sub-app-item" }, at = ["src"], st = { class: "sub-app-item-content" }, lt = { class: "name" }, it = { class: "describe" }, rt = /* @__PURE__ */ U({
+}, Y = { class: "table" }, Z = { class: "table-cell column_1" }, b = { class: "app-name" }, A = { class: "table-cell column_2" }, tt = { class: "column_2_content" }, et = ["onClick"], ot = { class: "sub-app-item" }, nt = ["src"], ct = { class: "sub-app-item-content" }, st = { class: "name" }, at = { class: "describe" }, it = /* @__PURE__ */ R({
   __name: "index",
   props: {
-    theme: { default: "default" },
     appCategorys: { default: () => [] }
   },
   emits: ["open-app"],
-  setup(H, { emit: N }) {
-    const p = H, b = N, I = k(() => {
-      const t = {};
-      return p.theme === "default" || Object.keys(E).forEach((e) => {
-        var o;
-        t[e] = (o = E[e]) == null ? void 0 : o[p.theme];
-      }), t;
-    }), L = (t) => b("open-app", t), S = $("18px"), F = (t, e) => {
-      if (!e) return;
-      if (e.offsetWidth > t) {
-        const s = parseInt(window.getComputedStyle(e).fontSize) - 1;
-        e.style.fontSize = s + "px", S.value = s + "px", F(t, e);
+  setup(m, { emit: T }) {
+    const d = m, F = T, I = (e) => F("open-app", e), v = P("18px"), w = (e, o) => {
+      if (!o) return;
+      if (o.offsetWidth > e) {
+        const a = parseInt(window.getComputedStyle(o).fontSize) - 1;
+        o.style.fontSize = a + "px", v.value = a + "px", w(e, o);
       }
-    }, R = () => new Promise((t) => {
-      const e = () => {
-        const o = document.querySelectorAll(".application-content .column_1 .app-name");
-        if (o != null && o.length && o.length === p.appCategorys.length) return t();
-        setTimeout(() => e(), 50);
-      };
-      e();
-    }), v = async () => {
-      await R();
-      const t = document.querySelectorAll(".application-content .column_1 .app-name")[0];
-      if (!t) return;
-      const e = parseInt(getComputedStyle(t).paddingLeft) || 0, o = parseInt(getComputedStyle(t).paddingRight) || 0, c = t.clientWidth - e - o;
-      let s = 0, n = null;
-      document.querySelectorAll(".application-content .column_1 .app-name > .text").forEach((d) => {
-        const u = d.offsetWidth;
-        u > s && (s = u, n = d);
-      }), F(c, n);
-    }, W = () => new Promise((t) => {
-      const e = () => {
-        const o = document.querySelectorAll(".application-content .column_1"), c = document.querySelectorAll(".application-content .column_2");
-        if (o != null && o.length && o.length === p.appCategorys.length && (c != null && c.length) && c.length === p.appCategorys.length)
-          return t();
-        setTimeout(() => e(), 50);
+    }, L = () => new Promise((e) => {
+      const o = () => {
+        const n = document.querySelectorAll(".application-content .column_1 .app-name");
+        if (n != null && n.length && n.length === d.appCategorys.length) return e();
+        setTimeout(() => o(), 50);
       };
-      e();
+      o();
     }), C = async () => {
-      await W(), document.querySelectorAll(".application-content .application-list .table .table-row").forEach((e) => {
-        const o = e.querySelector(".column_1"), c = e.querySelector(".column_2>.column_2_content"), s = o.offsetHeight, n = c.offsetHeight;
-        if (s > n) {
-          const m = s - n, d = c.querySelectorAll(".app-row"), u = d.length;
-          d.forEach((w) => {
-            const V = w.offsetHeight;
-            w.style.height = V + m / u + "px";
+      await L();
+      const e = document.querySelectorAll(".application-content .column_1 .app-name")[0];
+      if (!e) return;
+      const o = parseInt(getComputedStyle(e).paddingLeft) || 0, n = parseInt(getComputedStyle(e).paddingRight) || 0, c = e.clientWidth - o - n;
+      let a = 0, t = null;
+      document.querySelectorAll(".application-content .column_1 .app-name > .text").forEach((p) => {
+        const h = p.offsetWidth;
+        h > a && (a = h, t = p);
+      }), w(c, t);
+    }, V = () => new Promise((e) => {
+      const o = () => {
+        const n = document.querySelectorAll(".application-content .column_1"), c = document.querySelectorAll(".application-content .column_2");
+        if (n != null && n.length && n.length === d.appCategorys.length && (c != null && c.length) && c.length === d.appCategorys.length)
+          return e();
+        setTimeout(() => o(), 50);
+      };
+      o();
+    }), x = async () => {
+      await V(), document.querySelectorAll(".application-content .application-list .table .table-row").forEach((o) => {
+        const n = o.querySelector(".column_1"), c = o.querySelector(".column_2>.column_2_content"), a = n.offsetHeight, t = c.offsetHeight;
+        if (a > t) {
+          const u = a - t, p = c.querySelectorAll(".app-row"), h = p.length;
+          p.forEach((k) => {
+            const j = k.offsetHeight;
+            k.style.height = j + u / h + "px";
           });
         }
       });
-    }, B = k(() => p.appCategorys.map((t) => t.name));
-    return z(() => B.value, v, { deep: !0 }), z(() => p.appCategorys, C, { deep: !0 }), M(() => {
-      v(), C();
-    }), (t, e) => (a(), f(i(Q), null, {
-      default: h(() => [
-        l("div", {
-          class: O(["application-content", `theme-${t.theme}`]),
-          style: x(I.value)
-        }, [
-          t.appCategorys && t.appCategorys.length ? (a(), r("div", Y, [
-            (a(!0), r(g, null, _(t.appCategorys, (o, c) => (a(), r("div", Z, [
-              (a(), r("div", {
-                key: c,
-                class: "table-row"
-              }, [
-                l("div", A, [
-                  l("div", tt, [
-                    l("span", {
-                      class: "text",
-                      style: x({ fontSize: S.value })
-                    }, y(o.name), 5)
+    }, W = U(() => d.appCategorys.map((e) => e.name));
+    return z(() => W.value, C, { deep: !0 }), z(() => d.appCategorys, x, { deep: !0 }), M(() => {
+      C(), x();
+    }), (e, o) => (s(), f(l(O), null, {
+      default: g(() => [
+        i("div", Q, [
+          m.appCategorys && m.appCategorys.length ? (s(), r("div", X, [
+            (s(!0), r(
+              _,
+              null,
+              y(m.appCategorys, (n, c) => (s(), r("div", Y, [
+                (s(), r("div", {
+                  key: c,
+                  class: "table-row"
+                }, [
+                  q(" 第一列 "),
+                  i("div", Z, [
+                    i("div", b, [
+                      i(
+                        "span",
+                        {
+                          class: "text",
+                          style: $({ fontSize: v.value })
+                        },
+                        S(n.name),
+                        5
+                        /* TEXT, STYLE */
+                      )
+                    ])
+                  ]),
+                  q(" 第二列 "),
+                  i("div", A, [
+                    i("div", tt, [
+                      (s(!0), r(
+                        _,
+                        null,
+                        y(n.apps, (a) => (s(), f(
+                          l(G),
+                          {
+                            class: "app-row",
+                            gutter: 20
+                          },
+                          {
+                            default: g(() => [
+                              (s(!0), r(
+                                _,
+                                null,
+                                y(a, (t, u) => (s(), f(
+                                  l(J),
+                                  {
+                                    class: "app-col",
+                                    key: u,
+                                    span: 6
+                                  },
+                                  {
+                                    default: g(() => [
+                                      i("div", {
+                                        class: "sub-app",
+                                        onClick: (p) => I(t)
+                                      }, [
+                                        i("div", ot, [
+                                          i("img", {
+                                            class: "img",
+                                            src: t != null && t.iconDomain ? t.iconDomain + l(E)(t == null ? void 0 : t.iconUrl) : l(E)(t == null ? void 0 : t.iconUrl),
+                                            alt: ""
+                                          }, null, 8, nt),
+                                          i("div", ct, [
+                                            D((s(), r("div", st, [
+                                              H(
+                                                S(t.name),
+                                                1
+                                                /* TEXT */
+                                              )
+                                            ])), [
+                                              [l(N)]
+                                            ]),
+                                            D((s(), r("div", at, [
+                                              H(
+                                                S(t.description),
+                                                1
+                                                /* TEXT */
+                                              )
+                                            ])), [
+                                              [l(N)]
+                                            ])
+                                          ])
+                                        ])
+                                      ], 8, et)
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  },
+                                  1024
+                                  /* DYNAMIC_SLOTS */
+                                ))),
+                                128
+                                /* KEYED_FRAGMENT */
+                              ))
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          },
+                          1024
+                          /* DYNAMIC_SLOTS */
+                        ))),
+                        256
+                        /* UNKEYED_FRAGMENT */
+                      ))
+                    ])
                   ])
-                ]),
-                l("div", et, [
-                  l("div", ot, [
-                    (a(!0), r(g, null, _(o.apps, (s) => (a(), f(i(G), {
-                      class: "app-row",
-                      gutter: 20
-                    }, {
-                      default: h(() => [
-                        (a(!0), r(g, null, _(s, (n, m) => (a(), f(i(J), {
-                          class: "app-col",
-                          key: m,
-                          span: 6
-                        }, {
-                          default: h(() => [
-                            l("div", {
-                              class: "sub-app",
-                              onClick: (d) => L(n)
-                            }, [
-                              l("div", ct, [
-                                l("img", {
-                                  class: "img",
-                                  src: n != null && n.iconDomain ? n.iconDomain + i(T)(n == null ? void 0 : n.iconUrl) : i(T)(n == null ? void 0 : n.iconUrl),
-                                  alt: ""
-                                }, null, 8, at),
-                                l("div", st, [
-                                  D((a(), r("div", lt, [
-                                    q(y(n.name), 1)
-                                  ])), [
-                                    [i(j)]
-                                  ]),
-                                  D((a(), r("div", it, [
-                                    q(y(n.description), 1)
-                                  ])), [
-                                    [i(j)]
-                                  ])
-                                ])
-                              ])
-                            ], 8, nt)
-                          ]),
-                          _: 2
-                        }, 1024))), 128))
-                      ]),
-                      _: 2
-                    }, 1024))), 256))
-                  ])
-                ])
-              ]))
-            ]))), 256))
-          ])) : (a(), f(i(K), {
+                ]))
+              ]))),
+              256
+              /* UNKEYED_FRAGMENT */
+            ))
+          ])) : (s(), f(l(K), {
             key: 1,
             size: "large"
           }))
-        ], 6)
+        ])
       ]),
       _: 1
+      /* STABLE */
     }));
   }
-}), pt = {
-  "--das-application-app-bg-color": "#343848",
-  "--das-application-app-color": "#ffffff",
-  "--das-application-subapp-bg-color": "#ffffff",
-  "--das-application-subapp-name-color": "#212121",
-  "--das-application-subapp-describe-color": "#999999"
-};
-X(pt);
-const vt = P(rt);
+}), _t = B(it);
 export {
-  vt as DasAppContainer
+  _t as DasAppContainer
 };

package/packages/business-components/app-container/src/index.vue.d.ts

@@ -6,7 +6,6 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onOpen-app"?: ((item: any) => any) | undefined;
 }>, {
-    theme: "default" | "kjl" | "cjb" | "ssl";
     appCategorys: any[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/packages/business-components/app-container/src/type.d.ts

@@ -1,5 +1,4 @@
 export interface Props {
-  theme?: 'default' | 'kjl' | 'cjb' | 'ssl'
   
   appCategorys: any[]
 }

package/packages/business-components/app-container/style.css

@@ -1 +1 @@
-.application-content{position:relative;padding:30px 20px 10px;box-sizing:border-box}.application-content .application-list{width:100%}.application-content .application-list .table{display:table;width:100%;margin-bottom:20px}.application-content .application-list .table .table-row{display:table-row}.application-content .application-list .table .table-row .table-cell{display:table-cell}.application-content .application-list .table .table-row .table-cell.column_1{width:110px;font-size:0;vertical-align:middle;color:var(--das-application-app-color);background-color:var(--das-application-app-bg-color);position:relative}.application-content .application-list .table .table-row .table-cell.column_1 .app-name{width:110px;height:100%;font-size:18px;text-align:center;box-sizing:border-box;padding:20px 8px}.application-content .application-list .table .table-row .table-cell.column_2{box-sizing:border-box;width:calc(100% - 110px);padding-left:20px}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row{height:100%}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row:not(:first-child){margin-top:20px}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col{height:100%}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app{height:100%;display:flex;align-items:center;padding:0 30px;min-height:98px;box-shadow:0 4px 12px #86a2d233;background-color:var(--das-application-subapp-bg-color);cursor:pointer}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item{width:100%;height:48px;display:flex}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .img{width:48px;height:48px;border-radius:6px}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .sub-app-item-content{flex:1;padding-left:10px;box-sizing:border-box;overflow:hidden}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .sub-app-item-content .name{font-size:16px;font-weight:400;color:var(--das-application-subapp-name-color)}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .sub-app-item-content .describe{font-size:12px;font-weight:400;color:var(--das-application-subapp-describe-color)}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app:hover,.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app:active{box-shadow:0 0 20px #0003;border-radius:2px}
+.application-content{position:relative;padding:30px 20px 10px;box-sizing:border-box}.application-content .application-list{width:100%}.application-content .application-list .table{display:table;width:100%;margin-bottom:20px}.application-content .application-list .table .table-row{display:table-row}.application-content .application-list .table .table-row .table-cell{display:table-cell}.application-content .application-list .table .table-row .table-cell.column_1{width:110px;font-size:0;vertical-align:middle;color:var(--upf-app-container-app-text-override, var(--upf-nav-text));background-color:var(--upf-app-container-app-bg-override, var(--upf-nav-bg));position:relative}.application-content .application-list .table .table-row .table-cell.column_1 .app-name{width:110px;height:100%;font-size:18px;text-align:center;box-sizing:border-box;padding:20px 8px}.application-content .application-list .table .table-row .table-cell.column_2{box-sizing:border-box;width:calc(100% - 110px);padding-left:20px}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row{height:100%}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row:not(:first-child){margin-top:20px}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col{height:100%}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app{height:100%;display:flex;align-items:center;padding:0 30px;min-height:98px;box-shadow:0 4px 12px #86a2d233;background-color:var(--upf-app-container-subapp-bg-override, var(--upf-bg-elevated));cursor:pointer}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item{width:100%;height:48px;display:flex}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .img{width:48px;height:48px;border-radius:6px}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .sub-app-item-content{flex:1;padding-left:10px;box-sizing:border-box;overflow:hidden}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .sub-app-item-content .name{font-size:16px;font-weight:400;color:var(--upf-app-container-subapp-name-override, var(--upf-text-primary))}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app .sub-app-item .sub-app-item-content .describe{font-size:12px;font-weight:400;color:var(--upf-app-container-subapp-desc-override, var(--upf-text-secondary))}.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app:hover,.application-content .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row .app-col .sub-app:active{box-shadow:0 0 20px #0003;border-radius:2px}