@das-fed/ui 7.1.0-qatar.1 → 7.1.0-qatar.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@das-fed/ui",
-  "version": "7.1.0-qatar.1",
+  "version": "7.1.0-qatar.11",
   "description": "",
   "type": "module",
   "main": "./index.js",
@@ -26,7 +26,7 @@
     "@antv/x6-plugin-snapline": "^2.1.7",
     "@antv/x6-plugin-transform": "^2.1.8",
     "@antv/x6-vue-shape": "^2.1.2",
-    "@das-fed/cli": "7.1.0-qatar.1",
+    "@das-fed/cli": "7.1.0-qatar.11",
     "@element-plus/icons-vue": "^2.3.1",
     "@types/lodash": "^4.14.194",
     "@types/lodash-es": "^4.17.9",
@@ -56,9 +56,9 @@
     "vue-tsc": "^2.0.29"
   },
   "dependencies": {
-    "@das-fed/ui": "7.1.0-qatar.1",
-    "@das-fed/utils": "7.1.0-qatar.1",
-    "@das-fed/web": "7.1.0-qatar.1",
+    "@das-fed/ui": "7.1.0-qatar.11",
+    "@das-fed/utils": "7.1.0-qatar.11",
+    "@das-fed/web": "7.1.0-qatar.11",
     "@types/markdown-it": "^14.1.2",
     "@wangeditor-next/editor": "5.6.31",
     "@wangeditor-next/editor-for-vue": "5.1.14",

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

@@ -3,7 +3,7 @@ declare const DasAppContainer: import("@das-fed/utils").SFCWithInstall<import("v
 }, string, import("vue").PublicProps, Readonly<import("./src/type.js").Props> & Readonly<{
     "onOpen-app"?: ((item: any) => any) | undefined;
 }>, {
-    theme: "default" | "kjl" | "cjb" | "ssl";
+    theme: "default" | "kjl" | "cjb" | "ssl" | "dkh" | "qatar";
     dir: "ltr" | "rtl";
     appCategorys: any[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>>;

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

@@ -1,6 +1,6 @@
 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 $, 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 D, normalizeClass as G, createElementBlock as r, Fragment as g, renderList as _, createCommentVNode as q, toDisplayString as y, withDirectives as x, createTextVNode as j } from "vue";
+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 q, normalizeClass as G, createElementBlock as r, Fragment as g, renderList as _, createCommentVNode as D, toDisplayString as F, withDirectives as x, 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";
@@ -14,13 +14,15 @@ const H = {
     kjl: "#2673DC",
     cjb: "#343848",
     ssl: "#2D314F",
-    dkh: "linear-gradient(180deg, #E60012 0%, #FFFFFF 113%)"
+    dkh: "linear-gradient(180deg, #E60012 0%, #FFFFFF 113%)",
+    qatar: "var(--das-menu-color-fog-blue-10)"
   },
   "--das-application-app-color": {
     kjl: "#FFFFFF",
     cjb: "#FFFFFF",
     ssl: "#FFFFFF",
-    dkh: "#FFFFFF"
+    dkh: "#FFFFFF",
+    qatar: "#FFFFFF"
   }
 }, Z = ["dir"], A = {
   key: 0,
@@ -40,11 +42,11 @@ const H = {
         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) => {
+    }), R = (t) => I("open-app", t), y = 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);
+        e.style.fontSize = s + "px", y.value = s + "px", S(t, e);
       }
     }, V = () => new Promise((t) => {
       const e = () => {
@@ -53,7 +55,7 @@ const H = {
         setTimeout(() => e(), 50);
       };
       e();
-    }), C = async () => {
+    }), v = async () => {
       await V();
       const t = document.querySelectorAll(".application-content .column_1 .app-name")[0];
       if (!t) return;
@@ -71,7 +73,7 @@ const H = {
         setTimeout(() => e(), 50);
       };
       e();
-    }), v = async () => {
+    }), C = 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) {
@@ -83,13 +85,13 @@ const H = {
         }
       });
     }, B = k(() => p.appCategorys.map((t) => t.name));
-    return z(() => B.value, C, { deep: !0 }), z(() => p.appCategorys, v, { deep: !0 }), O(() => {
-      C(), v();
+    return z(() => B.value, v, { deep: !0 }), z(() => p.appCategorys, C, { deep: !0 }), O(() => {
+      v(), C();
     }), (t, e) => (c(), f(i(X), null, {
       default: h(() => [
         l("div", {
           class: G(["application-content", t.dir === "rtl" ? "is-rtl" : "", `theme-${t.theme}`]),
-          style: D(L.value),
+          style: q(L.value),
           dir: t.dir
         }, [
           t.appCategorys && t.appCategorys.length ? (c(), r("div", A, [
@@ -101,22 +103,22 @@ const H = {
                   key: a,
                   class: "table-row"
                 }, [
-                  q(" 第一列 "),
+                  D(" 第一列 "),
                   l("div", et, [
                     l("div", ot, [
                       l(
                         "span",
                         {
                           class: "text",
-                          style: D({ fontSize: F.value })
+                          style: q({ fontSize: y.value })
                         },
-                        y(o.name),
+                        F(o.name),
                         5
                         /* TEXT, STYLE */
                       )
                     ])
                   ]),
-                  q(" 第二列 "),
+                  D(" 第二列 "),
                   l("div", nt, [
                     l("div", at, [
                       (c(!0), r(
@@ -155,7 +157,7 @@ const H = {
                                           l("div", it, [
                                             x((c(), r("div", rt, [
                                               j(
-                                                y(n.name),
+                                                F(n.name),
                                                 1
                                                 /* TEXT */
                                               )
@@ -164,7 +166,7 @@ const H = {
                                             ]),
                                             x((c(), r("div", pt, [
                                               j(
-                                                y(n.description),
+                                                F(n.description),
                                                 1
                                                 /* TEXT */
                                               )

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

@@ -6,7 +6,7 @@ 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";
+    theme: "default" | "kjl" | "cjb" | "ssl" | "dkh" | "qatar";
     dir: "ltr" | "rtl";
     appCategorys: any[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -4,12 +4,14 @@ declare const _default: {
         cjb: string;
         ssl: string;
         dkh: string;
+        qatar: string;
     };
     '--das-application-app-color': {
         kjl: string;
         cjb: string;
         ssl: string;
         dkh: string;
+        qatar: string;
     };
 };
 export default _default;

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

@@ -1,5 +1,5 @@
 export interface Props {
-  theme?: 'default' | 'kjl' | 'cjb' | 'ssl'
+  theme?: 'default' | 'kjl' | 'cjb' | 'ssl' | 'dkh' | 'qatar'
 
   dir?: 'ltr' | 'rtl'
 

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: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}html[lang=ar] .application-content .application-list .table .table-row .table-cell.column_1 .app-name,:host-context(html[lang="ar"]) .application-content .application-list .table .table-row .table-cell.column_1 .app-name{font-size:20px}.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)}html[lang=ar] .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,:host-context(html[lang="ar"]) .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:18px}.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)}html[lang=ar] .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,:host-context(html[lang="ar"]) .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:14px}.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.is-rtl,.application-content.is-rtl .application-list .table .table-row{direction:rtl}.application-content.is-rtl .application-list .table .table-row .table-cell.column_2{padding-left:0;padding-right:20px}.application-content.is-rtl .application-list .table .table-row .table-cell.column_2 .column_2_content,.application-content.is-rtl .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row{direction:rtl}.application-content.is-rtl .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{padding-left:0;padding-right:10px;text-align:right}@media screen and (max-width: 1365px){.application-content .application-list .el-col-6{max-width:33.33%;flex:0 0 33.33%}.application-content .application-list .el-col-6:nth-child(n+4){margin-top:20px}}@media screen and (max-width: 1002px){.application-content .application-list .el-col-6{max-width:50%;flex:0 0 50%}.application-content .application-list .el-col-6:nth-child(n+3){margin-top:20px}}@media screen and (max-width: 718px){.application-content .application-list .el-col-6{max-width:100%;flex:0 0 100%}.application-content .application-list .el-col-6:nth-child(n+2){margin-top:20px}}
+.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;border-radius:var(--das-radius-container);overflow:hidden}.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;border-radius:var(--das-radius-container);overflow:hidden}html[lang=ar] .application-content .application-list .table .table-row .table-cell.column_1 .app-name,:host-context(html[lang="ar"]) .application-content .application-list .table .table-row .table-cell.column_1 .app-name{font-size:20px}.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);border-radius:var(--das-radius-container);overflow:hidden;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)}html[lang=ar] .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,:host-context(html[lang="ar"]) .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:18px}.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)}html[lang=ar] .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,:host-context(html[lang="ar"]) .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:14px}.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:var(--das-radius-container)}.application-content.is-rtl,.application-content.is-rtl .application-list .table .table-row{direction:rtl}.application-content.is-rtl .application-list .table .table-row .table-cell.column_2{padding-left:0;padding-right:20px}.application-content.is-rtl .application-list .table .table-row .table-cell.column_2 .column_2_content,.application-content.is-rtl .application-list .table .table-row .table-cell.column_2 .column_2_content .app-row{direction:rtl}.application-content.is-rtl .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{padding-left:0;padding-right:10px;text-align:right}@media screen and (max-width: 1365px){.application-content .application-list .el-col-6{max-width:33.33%;flex:0 0 33.33%}.application-content .application-list .el-col-6:nth-child(n+4){margin-top:20px}}@media screen and (max-width: 1002px){.application-content .application-list .el-col-6{max-width:50%;flex:0 0 50%}.application-content .application-list .el-col-6:nth-child(n+3){margin-top:20px}}@media screen and (max-width: 718px){.application-content .application-list .el-col-6{max-width:100%;flex:0 0 100%}.application-content .application-list .el-col-6:nth-child(n+2){margin-top:20px}}

package/packages/business-components/area-phone-select/index.js

@@ -1,24 +1,25 @@
 import '@das-fed/ui/packages/business-components/area-phone-select/style.css';
-import { defineComponent as $, ref as s, computed as c, onMounted as N, createBlock as U, openBlock as d, unref as p, mergeProps as W, withCtx as _, createElementVNode as y, createElementBlock as h, createCommentVNode as R, createVNode as C, withDirectives as z, Fragment as L, renderList as x, normalizeClass as B, createTextVNode as M, toDisplayString as A, renderSlot as j, nextTick as q, onBeforeUnmount as G, normalizeStyle as H } from "vue";
-import { withInstall as E } from "@das-fed/utils/with-install/index";
-import { t as J, setI18nRule as K } from "@das-fed/web/packages/i18n/index";
-import { DasPopoverRef as Q, DasPopover as X } from "@das-fed/ui/packages/components/popover/index";
-import { DasScrollbar as Y } from "@das-fed/ui/packages/components/scrollbar/index";
-import { DasSearch as Z } from "@das-fed/ui/packages/components/search/index";
-import { DasIconFold as ee } from "@das-fed/ui/packages/icons/fold/index";
-import { DasEmpty as oe } from "@das-fed/ui/packages/components/empty/index";
+import { defineComponent as x, ref as s, computed as c, onMounted as N, createBlock as z, openBlock as d, unref as u, mergeProps as W, withCtx as B, createElementVNode as C, createElementBlock as b, createCommentVNode as A, createVNode as D, withDirectives as L, Fragment as $, renderList as G, normalizeClass as P, createTextVNode as M, toDisplayString as U, renderSlot as j, nextTick as q, onBeforeUnmount as H, normalizeStyle as J } from "vue";
+import { withInstall as T } from "@das-fed/utils/with-install/index";
+import { t as K, setI18nRule as Q } from "@das-fed/web/packages/i18n/index";
+import { DasPopoverRef as X, DasPopover as Y } from "@das-fed/ui/packages/components/popover/index";
+import { DasScrollbar as Z } from "@das-fed/ui/packages/components/scrollbar/index";
+import { DasSearch as ee } from "@das-fed/ui/packages/components/search/index";
+import { DasIconFold as oe } from "@das-fed/ui/packages/icons/fold/index";
+import { DasEmpty as ae } from "@das-fed/ui/packages/components/empty/index";
 import { vDasTooltip as te } from "@das-fed/ui/packages/components/text-tooltip/index";
-import { vDasLoading as ae } from "@das-fed/ui/packages/components/loading/index";
-import { createService as se } from "@das-fed/utils/api-services";
-import { DasInput as le } from "@das-fed/ui/packages/components/input/index";
+import { vDasLoading as se } from "@das-fed/ui/packages/components/loading/index";
+import { createService as le } from "@das-fed/utils/api-services";
+import { DasInput as re } from "@das-fed/ui/packages/components/input/index";
 import { SizeWatcher as ne } from "@das-fed/utils/size-watcher";
-const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/.test(t), O = (t) => typeof t == "string" && re(t) ? t : t + "px", ie = se("/api/tool/v2"), de = ie.get("/dictionary/phone-codes"), ue = { class: "label" }, pe = { class: "das-ui-area-phone-popover-content" }, ce = {
+import { getVar as f, setGlobalThemeRule as ie, setThemeRule as de } from "@das-fed/web/packages/theme/index";
+const pe = (a) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/.test(a), E = (a) => typeof a == "string" && pe(a) ? a : a + "px", ue = le("/api/tool/v2"), ce = ue.get("/dictionary/phone-codes"), me = { class: "label" }, ve = { class: "das-ui-area-phone-popover-content" }, he = {
   key: 0,
   class: "search-box"
-}, ve = { class: "list" }, me = ["onClick"], fe = { class: "item-label" }, he = { class: "item-code" }, be = {
+}, fe = { class: "list" }, be = ["onClick"], we = { class: "item-label" }, Ve = { class: "item-code" }, ge = {
   name: "area-popover"
-}, we = /* @__PURE__ */ $({
-  ...be,
+}, ye = /* @__PURE__ */ x({
+  ...ge,
   props: {
     modelValue: {},
     label: { default: "phoneCode" },
@@ -30,8 +31,8 @@ const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)
     filter: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "update:visible", "change"],
-  setup(t, { expose: b, emit: r }) {
-    const a = t, v = r, V = Q(), m = s(""), g = s(J("area-phone-placeholder")), P = c(() => a.width ? O(a.width) : "240px"), D = s({
+  setup(a, { expose: w, emit: n }) {
+    const t = a, m = n, g = X(), v = s(""), y = s(K("area-phone-placeholder")), R = c(() => t.width ? E(t.width) : "240px"), k = s({
       modifiers: [
         {
           name: "offset",
@@ -40,63 +41,63 @@ const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)
           }
         }
       ]
-    }), f = c({
-      get: () => a.visible,
+    }), h = c({
+      get: () => t.visible,
       set: (o) => {
-        v("update:visible", o);
+        m("update:visible", o);
       }
-    }), u = c({
-      get: () => a.modelValue ?? {
+    }), p = c({
+      get: () => t.modelValue ?? {
         name: "中国",
         code: "CN",
         phoneCode: "+86"
       },
       set: (o) => {
-        v("update:modelValue", o);
+        m("update:modelValue", o);
       }
-    }), k = c(() => u.value[a.label]), S = (o) => {
-      u.value = o, f.value = !1, v("change", o);
-    }, I = c(() => a.filter ? e.value.filter((o) => o.name.includes(m.value)) : e.value), e = s([]), l = s(!1);
+    }), I = c(() => p.value[t.label]), S = (o) => {
+      p.value = o, h.value = !1, m("change", o);
+    }, _ = c(() => t.filter ? e.value.filter((o) => o.name.includes(v.value)) : e.value), e = s([]), l = s(!1);
     return N(async () => {
       l.value = !0;
-      const [o, i] = await de().run();
+      const [o, i] = await ce().run();
       l.value = !1, !o && (e.value = i || []);
-    }), b({ popoverRef: V }), (o, i) => (d(), U(p(X), W({
+    }), w({ popoverRef: g }), (o, i) => (d(), z(u(Y), W({
       ref_key: "popoverRef",
-      ref: V,
+      ref: g,
       "show-arrow": o.showArrow,
-      "popper-options": D.value,
+      "popper-options": k.value,
       trigger: "click",
-      width: P.value,
+      width: R.value,
       popperClass: "das-ui-area-phone-popover",
-      visible: f.value,
-      "onUpdate:visible": i[1] || (i[1] = (n) => f.value = n),
+      visible: h.value,
+      "onUpdate:visible": i[1] || (i[1] = (r) => h.value = r),
       disabled: o.isView || o.disabled
     }, o.$attrs, {
-      onBeforeLeave: i[2] || (i[2] = (n) => m.value = "")
+      onBeforeLeave: i[2] || (i[2] = (r) => v.value = "")
     }), {
-      reference: _(() => [
+      reference: B(() => [
         j(o.$slots, "reference", {}, () => [
-          y(
+          C(
             "div",
             {
-              class: B(["das-ui-area-phone-popover-reference", o.disabled ? "is-disabled" : ""])
+              class: P(["das-ui-area-phone-popover-reference", o.disabled ? "is-disabled" : ""])
             },
             [
-              y(
+              C(
                 "div",
-                ue,
-                A(k.value),
+                me,
+                U(I.value),
                 1
                 /* TEXT */
               ),
-              y(
+              C(
                 "div",
                 {
-                  class: B({ "icon-box": !0, show: f.value, hide: o.isView || o.disabled })
+                  class: P({ "icon-box": !0, show: h.value, hide: o.isView || o.disabled })
                 },
                 [
-                  C(p(ee), { size: "medium" })
+                  D(u(oe), { size: "medium" })
                 ],
                 2
                 /* CLASS */
@@ -107,62 +108,62 @@ const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)
           )
         ], !0)
       ]),
-      default: _(() => [
-        y("div", pe, [
-          o.filter ? (d(), h("div", ce, [
-            C(p(Z), {
+      default: B(() => [
+        C("div", ve, [
+          o.filter ? (d(), b("div", he, [
+            D(u(ee), {
               isIconLeft: "",
               size: "custom",
-              placeholder: g.value,
+              placeholder: y.value,
               border: "",
               width: "100%",
-              modelValue: m.value,
-              "onUpdate:modelValue": i[0] || (i[0] = (n) => m.value = n)
+              modelValue: v.value,
+              "onUpdate:modelValue": i[0] || (i[0] = (r) => v.value = r)
             }, null, 8, ["placeholder", "modelValue"])
-          ])) : R("v-if", !0),
-          C(p(Y), null, {
-            default: _(() => [
-              z((d(), h("div", ve, [
-                l.value ? R("v-if", !0) : (d(), h(
-                  L,
+          ])) : A("v-if", !0),
+          D(u(Z), null, {
+            default: B(() => [
+              L((d(), b("div", fe, [
+                l.value ? A("v-if", !0) : (d(), b(
+                  $,
                   { key: 0 },
                   [
-                    (d(!0), h(
-                      L,
+                    (d(!0), b(
+                      $,
                       null,
-                      x(I.value, (n) => (d(), h("div", {
-                        class: B(["item", {
-                          selected: u.value && u.value.name + u.value.phoneCode == n.name + n.phoneCode
+                      G(_.value, (r) => (d(), b("div", {
+                        class: P(["item", {
+                          selected: p.value && p.value.name + p.value.phoneCode == r.name + r.phoneCode
                         }]),
-                        onClick: (Ce) => S(n)
+                        onClick: (_e) => S(r)
                       }, [
-                        z((d(), h("div", fe, [
+                        L((d(), b("div", we, [
                           M(
-                            A(n.name ?? ""),
+                            U(r.name ?? ""),
                             1
                             /* TEXT */
                           )
                         ])), [
-                          [p(te)]
+                          [u(te)]
                         ]),
-                        y(
+                        C(
                           "div",
-                          he,
-                          A(n.phoneCode ?? ""),
+                          Ve,
+                          U(r.phoneCode ?? ""),
                           1
                           /* TEXT */
                         )
-                      ], 10, me))),
+                      ], 10, be))),
                       256
                       /* UNKEYED_FRAGMENT */
                     )),
-                    I.value.length ? R("v-if", !0) : (d(), U(p(oe), { key: 0 }))
+                    _.value.length ? A("v-if", !0) : (d(), z(u(ae), { key: 0 }))
                   ],
                   64
                   /* STABLE_FRAGMENT */
                 ))
               ])), [
-                [p(ae), l.value]
+                [u(se), l.value]
               ])
             ]),
             _: 1
@@ -174,12 +175,12 @@ const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)
       /* FORWARDED */
     }, 16, ["show-arrow", "popper-options", "width", "visible", "disabled"]));
   }
-}), T = (t, b) => {
-  const r = t.__vccOpts || t;
-  for (const [a, v] of b)
-    r[a] = v;
-  return r;
-}, F = /* @__PURE__ */ T(we, [["__scopeId", "data-v-762f72de"]]), Ve = /* @__PURE__ */ $({
+}), O = (a, w) => {
+  const n = a.__vccOpts || a;
+  for (const [t, m] of w)
+    n[t] = m;
+  return n;
+}, F = /* @__PURE__ */ O(ye, [["__scopeId", "data-v-818bbd9c"]]), Ce = /* @__PURE__ */ x({
   __name: "index",
   props: {
     modelValue: { default: "" },
@@ -189,61 +190,61 @@ const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue", "update:areaItem", "change", "area-change"],
-  setup(t, { emit: b }) {
-    const r = t, a = b, v = c(() => r.width ? O(r.width) : "100%"), V = c({
-      get: () => r.modelValue,
-      set: (e) => a("update:modelValue", e)
-    }), m = c({
-      get: () => r.areaItem ?? {},
+  setup(a, { emit: w }) {
+    const n = a, t = w, m = c(() => n.width ? E(n.width) : "100%"), g = c({
+      get: () => n.modelValue,
+      set: (e) => t("update:modelValue", e)
+    }), v = c({
+      get: () => n.areaItem ?? {},
       set: (e) => {
-        a("update:areaItem", e);
+        t("update:areaItem", e);
       }
-    }), g = s(null), P = s(null), D = s(null), f = s(240), u = s(!1), k = () => {
-      f.value = g.value.clientWidth ?? 0;
+    }), y = s(null), R = s(null), k = s(null), h = s(240), p = s(!1), I = () => {
+      h.value = y.value.clientWidth ?? 0;
     };
     N(() => {
       q(() => {
-        k(), D.value = ne(() => {
-          k();
-        }, g.value);
+        I(), k.value = ne(() => {
+          I();
+        }, y.value);
       });
-    }), G(() => {
+    }), H(() => {
       var e;
-      (e = D.value) == null || e.disconnect();
+      (e = k.value) == null || e.disconnect();
     });
     const S = (e) => {
-      a("area-change", e);
-    }, I = (e) => {
-      a("change", e);
+      t("area-change", e);
+    }, _ = (e) => {
+      t("change", e);
     };
-    return (e, l) => (d(), h(
+    return (e, l) => (d(), b(
       "div",
       {
         ref_key: "phoneRef",
-        ref: g,
-        class: B(["das-ui-area-phone-select", { "is-disabled": e.disabled && !e.isView, "is-view": e.isView }]),
-        style: H({ width: v.value })
+        ref: y,
+        class: P(["das-ui-area-phone-select", { "is-disabled": e.disabled && !e.isView, "is-view": e.isView }]),
+        style: J({ width: m.value })
       },
       [
-        C(p(le), W({
+        D(u(re), W({
           ref_key: "inputRef",
-          ref: P,
+          ref: R,
           width: "100%",
           disabled: e.disabled,
           isView: e.isView,
-          modelValue: V.value,
-          "onUpdate:modelValue": l[2] || (l[2] = (w) => V.value = w),
-          onChange: I
+          modelValue: g.value,
+          "onUpdate:modelValue": l[2] || (l[2] = (V) => g.value = V),
+          onChange: _
         }, e.$attrs), {
-          prepend: _(() => [
-            C(F, {
-              visible: u.value,
-              "onUpdate:visible": l[0] || (l[0] = (w) => u.value = w),
+          prepend: B(() => [
+            D(F, {
+              visible: p.value,
+              "onUpdate:visible": l[0] || (l[0] = (V) => p.value = V),
               isView: e.isView,
               disabled: e.disabled,
-              modelValue: m.value,
-              "onUpdate:modelValue": l[1] || (l[1] = (w) => m.value = w),
-              width: f.value,
+              modelValue: v.value,
+              "onUpdate:modelValue": l[1] || (l[1] = (V) => v.value = V),
+              width: h.value,
               onChange: S
             }, null, 8, ["visible", "isView", "disabled", "modelValue", "width"])
           ]),
@@ -255,15 +256,25 @@ const re = (t) => /^[+-]?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)
       /* CLASS, STYLE */
     ));
   }
-}), ge = /* @__PURE__ */ T(Ve, [["__scopeId", "data-v-3b9ba6be"]]), ye = {
+}), De = /* @__PURE__ */ O(Ce, [["__scopeId", "data-v-c74ff655"]]), ke = {
   "area-phone-placeholder": { "zh-CN": "请输入所在国家或区域中文名称", en: "Please enter your country or region", ar: "الرجاء إدخال بلدك أو منطقتك" }
+}, Ie = {
+  "--das-ui-area-phone-primary-color": f("--das-color-brand-primary"),
+  "--das-ui-area-phone-selected-bg-color": f("--das-color-brand-primary-light"),
+  "--das-ui-area-phone-hover-bg-color": f("--das-color-bg-disabled"),
+  "--das-ui-area-phone-text-color": f("--das-color-text-title"),
+  "--das-ui-area-phone-sub-text-color": f("--das-color-text-body"),
+  "--das-ui-area-phone-disabled-color": f("--das-color-text-caption"),
+  "--das-ui-area-phone-disabled-border-color": f("--das-color-border-base")
 };
-K(ye);
-const Ne = () => s(null), We = () => s(null), Ee = E(ge), Oe = E(F), Te = { name: "区号选择手机号输入框" };
+ie();
+Q(ke);
+de(Ie);
+const Oe = () => s(null), Fe = () => s(null), Ge = T(De), Me = T(F), je = { name: "区号选择手机号输入框" };
 export {
-  Ee as DasAreaPhoneSelect,
-  Ne as DasAreaPhoneSelectRef,
-  Oe as DasAreaPopover,
-  We as DasAreaPopoverRef,
-  Te as default
+  Ge as DasAreaPhoneSelect,
+  Oe as DasAreaPhoneSelectRef,
+  Me as DasAreaPopover,
+  Fe as DasAreaPopoverRef,
+  je as default
 };

package/packages/business-components/area-phone-select/style.css

@@ -1 +1 @@
-.das-ui-area-phone-popover-reference[data-v-762f72de]{min-width:68px;height:100%;display:flex}.das-ui-area-phone-popover-reference .icon-box[data-v-762f72de]{flex-shrink:0;margin-left:4px;display:flex;align-items:center;justify-content:center;transform:rotate(0);transition:transform .5s ease}.das-ui-area-phone-popover-reference .icon-box.show[data-v-762f72de]{transform:rotate(180deg)}.das-ui-area-phone-popover-reference .icon-box.hide[data-v-762f72de]{color:transparent!important}.das-ui-area-phone-popover-reference:hover .icon-box[data-v-762f72de]{color:#276ff5}.das-ui-area-phone-popover-reference .label[data-v-762f72de]{font-size:14px;color:#212121;flex:1;overflow:hidden;display:flex;align-items:center}html[lang=ar] .das-ui-area-phone-popover-reference .label[data-v-762f72de],:host-context(html[lang="ar"]) .das-ui-area-phone-popover-reference .label[data-v-762f72de]{font-size:16px}.das-ui-area-phone-popover-reference.is-disabled .label[data-v-762f72de]{color:#b2b2b2!important}.das-ui-area-phone-popover-content[data-v-762f72de]{width:100%}.das-ui-area-phone-popover-content .search-box[data-v-762f72de]{padding:8px}.das-ui-area-phone-popover-content .list[data-v-762f72de]{width:100%;height:248px}.das-ui-area-phone-popover-content .list .item[data-v-762f72de]{width:100%;height:30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.das-ui-area-phone-popover-content .list .item[data-v-762f72de]:hover{background-color:#f5f5f5}.das-ui-area-phone-popover-content .list .item.selected[data-v-762f72de]{background-color:#f2f6ff}.das-ui-area-phone-popover-content .list .item.selected .item-lable[data-v-762f72de],.das-ui-area-phone-popover-content .list .item.selected .item-code[data-v-762f72de]{color:#276ff5}.das-ui-area-phone-popover-content .list .item .item-lable[data-v-762f72de]{flex:1;overflow:hidden;font-size:12px;color:#212121}html[lang=ar] .das-ui-area-phone-popover-content .list .item .item-lable[data-v-762f72de],:host-context(html[lang="ar"]) .das-ui-area-phone-popover-content .list .item .item-lable[data-v-762f72de]{font-size:14px}.das-ui-area-phone-popover-content .list .item .item-code[data-v-762f72de]{width:53px;margin-left:22px;color:#666;text-align:right;font-size:12px}html[lang=ar] .das-ui-area-phone-popover-content .list .item .item-code[data-v-762f72de],:host-context(html[lang="ar"]) .das-ui-area-phone-popover-content .list .item .item-code[data-v-762f72de]{font-size:14px}.das-ui-area-phone-popover .das-ui-popover-container{padding:0!important}.das-ui-area-phone-select[data-v-3b9ba6be]{width:100%}.das-ui-area-phone-select.is-disabled[data-v-3b9ba6be] .el-input.el-input-group{border-bottom-color:#e5e5e5!important}
+.das-ui-area-phone-popover-reference[data-v-818bbd9c]{min-width:68px;height:100%;display:flex}.das-ui-area-phone-popover-reference .icon-box[data-v-818bbd9c]{flex-shrink:0;margin-left:4px;display:flex;align-items:center;justify-content:center;transform:rotate(0);transition:transform .5s ease}.das-ui-area-phone-popover-reference .icon-box.show[data-v-818bbd9c]{transform:rotate(180deg)}.das-ui-area-phone-popover-reference .icon-box.hide[data-v-818bbd9c]{color:transparent!important}.das-ui-area-phone-popover-reference:hover .icon-box[data-v-818bbd9c]{color:var(--das-ui-area-phone-primary-color)}.das-ui-area-phone-popover-reference .label[data-v-818bbd9c]{font-size:14px;color:var(--das-ui-area-phone-text-color);flex:1;overflow:hidden;display:flex;align-items:center}html[lang=ar] .das-ui-area-phone-popover-reference .label[data-v-818bbd9c],:host-context(html[lang="ar"]) .das-ui-area-phone-popover-reference .label[data-v-818bbd9c]{font-size:16px}.das-ui-area-phone-popover-reference.is-disabled .label[data-v-818bbd9c]{color:var(--das-ui-area-phone-disabled-color)!important}.das-ui-area-phone-popover-content[data-v-818bbd9c]{width:100%}.das-ui-area-phone-popover-content .search-box[data-v-818bbd9c]{padding:8px}.das-ui-area-phone-popover-content .list[data-v-818bbd9c]{width:100%;height:248px}.das-ui-area-phone-popover-content .list .item[data-v-818bbd9c]{width:100%;height:30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.das-ui-area-phone-popover-content .list .item[data-v-818bbd9c]:hover{background-color:var(--das-ui-area-phone-hover-bg-color)}.das-ui-area-phone-popover-content .list .item.selected[data-v-818bbd9c]{background-color:var(--das-ui-area-phone-selected-bg-color)}.das-ui-area-phone-popover-content .list .item.selected .item-lable[data-v-818bbd9c],.das-ui-area-phone-popover-content .list .item.selected .item-code[data-v-818bbd9c]{color:var(--das-ui-area-phone-primary-color)}.das-ui-area-phone-popover-content .list .item .item-lable[data-v-818bbd9c]{flex:1;overflow:hidden;font-size:12px;color:var(--das-ui-area-phone-text-color)}html[lang=ar] .das-ui-area-phone-popover-content .list .item .item-lable[data-v-818bbd9c],:host-context(html[lang="ar"]) .das-ui-area-phone-popover-content .list .item .item-lable[data-v-818bbd9c]{font-size:14px}.das-ui-area-phone-popover-content .list .item .item-code[data-v-818bbd9c]{width:53px;margin-left:22px;color:var(--das-ui-area-phone-sub-text-color);text-align:right;font-size:12px}html[lang=ar] .das-ui-area-phone-popover-content .list .item .item-code[data-v-818bbd9c],:host-context(html[lang="ar"]) .das-ui-area-phone-popover-content .list .item .item-code[data-v-818bbd9c]{font-size:14px}.das-ui-area-phone-popover .das-ui-popover-container{padding:0!important}.das-ui-area-phone-select[data-v-c74ff655]{width:100%}.das-ui-area-phone-select.is-disabled[data-v-c74ff655] .el-input.el-input-group{border-bottom-color:var(--das-ui-area-phone-disabled-border-color)!important}