@das-fed/ui 6.4.0-hot.6 → 6.4.0-hot.60

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

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

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

@@ -1,32 +1,12 @@
 import 'element-plus/es/components/row/style/css';
 import 'element-plus/es/components/col/style/css';
 import type { Props } from './type';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    appCategorys: () => never[];
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "open-app": (item: any) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    appCategorys: () => never[];
-}>>> & {
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "open-app": (item: any) => any;
+}, 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;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    '--das-application-app-bg-color': {
+        kjl: string;
+        cjb: string;
+        ssl: string;
+        dkh: string;
+    };
+    '--das-application-app-color': {
+        kjl: string;
+        cjb: string;
+        ssl: string;
+        dkh: string;
+    };
+};
+export default _default;

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

@@ -1,9 +1,10 @@
-export interface Props {
-  
-  appCategorys: any[]
-}
-
-export interface Emits {
-  
-  (e: 'open-app', item: any): void
-}
+export interface Props {
+  theme?: 'default' | 'kjl' | 'cjb' | 'ssl'
+  
+  appCategorys: any[]
+}
+
+export interface Emits {
+  
+  (e: 'open-app', item: any): void
+}

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

@@ -1 +1 @@
-.application-content{position:relative;width:100%;height:100%;padding:30px 20px;box-sizing:border-box}.application-content .application-list{width:100%;display:table}.application-content .application-list .app-box{width:100%;margin-bottom:20px;display:table}.application-content .application-list .app-box .row{display:table-row}.application-content .application-list .app-box .row .cell{display:table-cell}.application-content .application-list .app-box .row .cell.cell-title{width:110px;color:var(--das-application-app-color);background-color:var(--das-application-app-bg-color);vertical-align:middle;font-size:0}.application-content .application-list .app-box .row .cell.cell-title .app-name{width:110px;height:100%;font-size:18px;text-align:center;box-sizing:border-box;padding:25px 8px;display:inline-block;word-break:break-all}.application-content .application-list .app-box .row .cell.app-list{padding-left:20px;box-sizing:border-box;width:calc(100% - 110px)}.application-content .application-list .app-box .row .cell.app-list .app-row:not(:first-child){margin-top:20px}.application-content .application-list .app-box .row .cell.app-list .app-row .app-col .sub-app{height:100%;box-shadow:0 4px 12px #86a2d233;background-color:var(--das-application-subapp-bg-color);padding:25px 30px;display:flex;cursor:pointer}.application-content .application-list .app-box .row .cell.app-list .app-row .app-col .sub-app .img{width:48px;height:48px;border-radius:6px}.application-content .application-list .app-box .row .cell.app-list .app-row .app-col .sub-app .box-right{padding-left:10px;flex:1;box-sizing:border-box;overflow:hidden}.application-content .application-list .app-box .row .cell.app-list .app-row .app-col .sub-app .box-right .name{font-size:16px;font-weight:400;color:var(--das-application-subapp-name-color)}.application-content .application-list .app-box .row .cell.app-list .app-row .app-col .sub-app .box-right .describe{font-size:12px;font-weight:400;color:var(--das-application-subapp-describe-color)}.application-content .application-list .app-box .row .cell.app-list .app-row .app-col .sub-app:hover,.application-content .application-list .app-box .row .cell.app-list .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(--das-application-app-color);background: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}

package/packages/{components/button → business-components/area-phone-select}/i18n/index.d.ts

@@ -1,5 +1,5 @@
 declare const _default: {
-    'demo-msg': {
+    'area-phone-placeholder': {
         'zh-CN': string;
         en: string;
     };