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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@das-fed/ui",
-  "version": "7.1.0-qatar.11",
+  "version": "7.1.0-qatar.13",
   "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.11",
+    "@das-fed/cli": "7.1.0-qatar.13",
     "@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.11",
-    "@das-fed/utils": "7.1.0-qatar.11",
-    "@das-fed/web": "7.1.0-qatar.11",
+    "@das-fed/ui": "7.1.0-qatar.13",
+    "@das-fed/utils": "7.1.0-qatar.13",
+    "@das-fed/web": "7.1.0-qatar.13",
     "@types/markdown-it": "^14.1.2",
     "@wangeditor-next/editor": "5.6.31",
     "@wangeditor-next/editor-for-vue": "5.1.14",

package/packages/components/color-picker/index.js

@@ -1,7 +1,7 @@
 import '@das-fed/ui/packages/components/color-picker/style.css';
-import { defineComponent as N, computed as z, ref as _, createElementBlock as b, openBlock as u, createVNode as g, createCommentVNode as w, unref as e, mergeProps as O, isRef as P, withCtx as m, createBlock as v, createElementVNode as x, Fragment as $, renderList as A, normalizeStyle as H, normalizeClass as C, toDisplayString as F } from "vue";
-import { withInstall as L } from "@das-fed/utils/with-install/index";
-import { currentLang as M, t as R, setI18nRule as U } from "@das-fed/web/packages/i18n/index";
+import { defineComponent as O, computed as z, ref as _, createElementBlock as b, openBlock as u, createVNode as g, createCommentVNode as w, unref as e, mergeProps as $, isRef as P, withCtx as m, createBlock as v, createElementVNode as x, Fragment as A, renderList as F, normalizeStyle as H, normalizeClass as C, toDisplayString as L } from "vue";
+import { withInstall as M } from "@das-fed/utils/with-install/index";
+import { currentLang as R, t as S, setI18nRule as U } from "@das-fed/web/packages/i18n/index";
 import { getVar as a, setGlobalThemeRule as G, setThemeRule as j } from "@das-fed/web/packages/theme/index";
 import { DasDropdown as q, DasDropdownMenu as J } from "@das-fed/ui/packages/components/dropdown/index";
 import { DasAutoRegisterIcon as K, DasIcon as Q } from "@das-fed/ui/packages/components/icon/index";
@@ -11,18 +11,19 @@ import "element-plus/es/components/color-picker/style/css";
 import { useModelValue as y } from "@das-fed/utils/vue";
 import Z from "element-plus/dist/locale/zh-cn.mjs";
 import ee from "element-plus/dist/locale/en.mjs";
-const oe = (c, s) => {
+import oe from "element-plus/dist/locale/ar.mjs";
+const le = (c, t) => {
   const l = y(c, "modelValue"), f = y(c, "options");
   let p = y(c, "modelValue");
   return { innerValue: l, inputChangeHandler: (i) => {
-    p.value = i, s("update:modelValue", i), s("change", i);
+    p.value = i, t("update:modelValue", i), t("change", i);
   }, inputInputHandler: (i) => {
-    p.value = i, s("update:modelValue", i), s("dasInput", i), s("change", i);
+    p.value = i, t("update:modelValue", i), t("dasInput", i), t("change", i);
   }, colorOption: f, colorPickerValue: p };
-}, le = {
+}, re = {
   class: "das-ui-color-picker",
   style: { width: "100%" }
-}, re = { class: "color-predefine-content" }, ae = ["onClick"], ie = /* @__PURE__ */ N({
+}, ae = { class: "color-predefine-content" }, ie = ["onClick"], ne = /* @__PURE__ */ O({
   __name: "Index",
   props: {
     modelValue: { default: "" },
@@ -40,23 +41,23 @@ const oe = (c, s) => {
     noSetDefaultVal: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "change", "dasInput"],
-  setup(c, { emit: s }) {
-    const l = c, f = s;
+  setup(c, { emit: t }) {
+    const l = c, f = t;
     K({
       fold: import("@das-fed/ui/packages/icons/fold"),
       close2: import("@das-fed/ui/packages/icons/close-2")
     });
-    const p = z(() => M.value === "zh-CN" ? Z : ee), D = z(() => l.placeholder || R("请输入")), { innerValue: r, inputChangeHandler: i, inputInputHandler: S, colorOption: o, colorPickerValue: h } = oe(l, f), k = _(), V = _(!1), T = (t) => {
-      var d, n;
-      f("change", t), r.value = t, (n = (d = k.value) == null ? void 0 : d.getElRef()) == null || n.handleClose(), V.value = !1;
+    const p = z(() => R.value === "zh-CN" ? Z : R.value === "ar" ? oe : ee), D = z(() => l.placeholder || S("请输入")), { innerValue: r, inputChangeHandler: i, inputInputHandler: T, colorOption: o, colorPickerValue: h } = le(l, f), k = _(), V = _(!1), B = (s) => {
+      var n, d;
+      f("change", s), r.value = s, (d = (n = k.value) == null ? void 0 : n.getElRef()) == null || d.handleClose(), V.value = !1;
     }, I = () => {
-      var t, d;
-      o.value.mode != "default" && ((d = (t = k.value) == null ? void 0 : t.getElRef()) == null || d.handleOpen(), V.value = !0);
-    }, B = (t) => {
-      V.value = t;
+      var s, n;
+      o.value.mode != "default" && ((n = (s = k.value) == null ? void 0 : s.getElRef()) == null || n.handleOpen(), V.value = !0);
+    }, E = (s) => {
+      V.value = s;
     };
-    return (t, d) => (u(), b("div", le, [
-      g(e(W), O({
+    return (s, n) => (u(), b("div", re, [
+      g(e(W), $({
         class: ["das-color-picker-input", [
           `das-color-picker-${e(o).size}`,
           { "das-empty-color": !e(r) },
@@ -66,13 +67,13 @@ const oe = (c, s) => {
           { "focus-predefine-view-cell": e(o).mode == "predefine" && V.value }
         ]],
         modelValue: e(r),
-        "onUpdate:modelValue": d[1] || (d[1] = (n) => P(r) ? r.value = n : null)
-      }, t.$attrs, {
+        "onUpdate:modelValue": n[1] || (n[1] = (d) => P(r) ? r.value = d : null)
+      }, s.$attrs, {
         isView: e(o).mode == "predefine" ? !0 : e(o).isView || l.isView,
         disabled: e(o).disabled || l.disabled,
         append: "",
         onClick: I,
-        onInput: e(S),
+        onInput: e(T),
         borderType: l.borderType,
         placeholder: D.value,
         noSetDefaultVal: e(o).mode == "predefine" && !e(o).isView && !l.isView && !e(o).disabled && !l.disabled || l.noSetDefaultVal && (e(o).isView || l.isView) && !e(r)
@@ -88,7 +89,7 @@ const oe = (c, s) => {
                 locale: p.value,
                 placement: e(o).placement,
                 modelValue: e(h),
-                "onUpdate:modelValue": d[0] || (d[0] = (n) => P(h) ? h.value = n : null),
+                "onUpdate:modelValue": n[0] || (n[0] = (d) => P(h) ? h.value = d : null),
                 size: e(o).size,
                 "show-alpha": e(o).showAlpha,
                 "color-format": e(o).colorFormat,
@@ -110,7 +111,7 @@ const oe = (c, s) => {
             placement: "bottom-end",
             selfPopperClass: "color-predefine-dropdown",
             "hide-on-click": !1,
-            onVisibleChange: B
+            onVisibleChange: E
           }, {
             content: m(() => [
               x(
@@ -138,16 +139,16 @@ const oe = (c, s) => {
             default: m(() => [
               g(e(J), null, {
                 default: m(() => [
-                  x("div", re, [
+                  x("div", ae, [
                     (u(!0), b(
-                      $,
+                      A,
                       null,
-                      A(e(o).predefine, (n, E) => (u(), b("div", {
-                        class: C(["color-predefine-span", { active: e(r) == n }]),
-                        key: E,
-                        style: H("background-color:" + n),
-                        onClick: (ce) => T(n)
-                      }, null, 14, ae))),
+                      F(e(o).predefine, (d, N) => (u(), b("div", {
+                        class: C(["color-predefine-span", { active: e(r) == d }]),
+                        key: N,
+                        style: H("background-color:" + d),
+                        onClick: (pe) => B(d)
+                      }, null, 14, ie))),
                       128
                       /* KEYED_FRAGMENT */
                     ))
@@ -171,18 +172,18 @@ const oe = (c, s) => {
           class: C(["predefine-placeholder", { "padding-l": l.borderType == "bordered" }]),
           onClick: I
         },
-        F(e(R)("请选择")),
+        L(e(S)("请选择")),
         3
         /* TEXT, CLASS */
       )) : w("v-if", !0)
     ]));
   }
-}), de = (c, s) => {
+}), de = (c, t) => {
   const l = c.__vccOpts || c;
-  for (const [f, p] of s)
+  for (const [f, p] of t)
     l[f] = p;
   return l;
-}, ne = /* @__PURE__ */ de(ie, [["__scopeId", "data-v-058ef7cc"]]), se = {
+}, te = /* @__PURE__ */ de(ne, [["__scopeId", "data-v-10f33ae0"]]), se = {
   "--demo-alert-bg": {
     light: a("--das-color-bg-container"),
     dark: "rgba(255,255,255,.2)"
@@ -195,13 +196,13 @@ const oe = (c, s) => {
   "--das-ui-color-picker-disabled-color": a("--das-color-text-caption"),
   "--das-ui-color-picker-empty-icon-color": a("--das-color-text-subtle"),
   "--das-ui-color-picker-active-shadow": a("--das-color-brand-primary-shadow")
-}, te = { 请输入: { "zh-CN": "请输入", en: "Please enter", ar: "الرجاء الإدخال", _appCode: "framework" } };
+}, ce = { 请输入: { "zh-CN": "请输入", en: "Please enter", ar: "الرجاء الإدخال", _appCode: "framework" } };
 G();
-U(te);
+U(ce);
 j(se);
-const ye = () => _(null), _e = L(ne);
+const De = () => _(null), Ie = M(te);
 export {
-  _e as DasColorPicker,
-  ye as DasColorPickerRef,
-  _e as default
+  Ie as DasColorPicker,
+  De as DasColorPickerRef,
+  Ie as default
 };

package/packages/components/color-picker/style.css

@@ -1 +1 @@
-.das-ui-color-picker[data-v-058ef7cc]{position:relative}.das-ui-color-picker .das-input-table-size+.predefine-placeholder[data-v-058ef7cc]{font-size:12px}html[lang=ar] .das-ui-color-picker .das-input-table-size+.predefine-placeholder[data-v-058ef7cc],:host-context(html[lang="ar"]) .das-ui-color-picker .das-input-table-size+.predefine-placeholder[data-v-058ef7cc]{font-size:14px}.das-ui-color-picker .predefine-placeholder[data-v-058ef7cc]{position:absolute;top:50%;left:0;transform:translateY(-50%);cursor:pointer;color:var(--das-ui-color-picker-placeholder-color);font-size:14px}html[lang=ar] .das-ui-color-picker .predefine-placeholder[data-v-058ef7cc],:host-context(html[lang="ar"]) .das-ui-color-picker .predefine-placeholder[data-v-058ef7cc]{font-size:16px}.das-ui-color-picker .predefine-placeholder.padding-l[data-v-058ef7cc]{left:8px}.das-ui-color-picker .das-ui-input[data-v-058ef7cc]:not(.only-border-bottom) .el-input-group__append{display:flex;align-items:center;justify-content:center}.das-ui-color-picker[data-v-058ef7cc] .el-color-picker__mask{display:none}.das-ui-color-picker .only-border-bottom[data-v-058ef7cc] .das-color-picker-input .el-input-group__append{display:flex;align-items:flex-end}.das-ui-color-picker .only-border-bottom[data-v-058ef7cc] .das-color-picker-input .color-predefine-icon{margin-bottom:2px}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input:not(.das-predefine-cell) .el-input-group__append{padding:0 5px!important}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input .el-color-picker{display:flex;align-items:flex-end}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input .el-color-picker__color{border-color:#9093994d}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input .el-color-picker__color .el-color-picker__color-inner{border-radius:2px}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input.das-empty-color .el-color-picker__color{border-color:#909399}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input.das-color-picker-mini .el-color-picker__trigger{width:20px;height:20px}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input.das-color-picker-mini .el-color-picker__mask{width:20px;height:16px}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input.el-input.el-input-group .el-input-group__prepend{padding-right:8px!important}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input.el-input.el-input-group .el-input-group__prepend .ant-select-selection-item{padding-right:18px}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input .el-color-picker__trigger{border:0;padding:2px}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input .color-predefine-icon{width:16px;height:16px;border-radius:2px;border:1px solid var(--das-ui-color-picker-border-color);display:flex;align-items:center;justify-content:center;padding:2px;box-sizing:border-box}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input .color-predefine-icon.border-predefine{border-color:#9093994d}.das-ui-color-picker[data-v-058ef7cc] .das-color-picker-input .color-predefine-icon.view-prefine-icon{cursor:not-allowed}.color-predefine-dropdown .color-predefine-content[data-v-058ef7cc]{max-width:314px;padding:10px;box-sizing:border-box;display:flex;flex-wrap:wrap}.color-predefine-dropdown .color-predefine-content .color-predefine-span[data-v-058ef7cc]{width:20px;height:20px;border-radius:3px;margin:0 8px 8px 0}.color-predefine-dropdown .color-predefine-content .color-predefine-span[data-v-058ef7cc]:first-of-type{margin-left:0}.color-predefine-dropdown .color-predefine-content .color-predefine-span.active[data-v-058ef7cc]{box-shadow:0 0 5px #00abff}.das-ui-color-picker .das-ui-input .is-view.el-input-group.das-predefine-cell.is-disabled .el-input__inner{color:var(--das-ui-color-picker-disabled-color)!important;-webkit-text-fill-color:var(--das-ui-color-picker-disabled-color)!important}.das-ui-color-picker .das-ui-input .is-view.el-input-group.das-predefine-cell:not(.das-predefine-view-cell,.is-disabled) .el-input__wrapper{background-color:var(--das-ui-color-picker-bg-color)}.das-ui-color-picker .das-ui-input:not(.only-border-bottom) .focus-predefine-view-cell .el-input__wrapper{box-shadow:0 0 0 1px var(--das-ui-color-picker-primary) inset!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-disabled.el-input-group{border-bottom-color:var(--das-ui-color-picker-border-color-disabled)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell{border:0 none;border-bottom:1px solid var(--das-ui-color-picker-border-color)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:not(.das-predefine-view-cell,.is-disabled) .el-input__wrapper .el-input__inner{background-color:var(--das-ui-color-picker-bg-color)}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:not(.das-predefine-view-cell,.is-disabled).focus-predefine-view-cell{border-color:var(--das-ui-color-picker-primary)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:not(.das-both-view-cell,.is-disabled) .el-input__wrapper .el-input__inner{cursor:pointer}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:hover{border-bottom-color:var(--das-ui-color-picker-border-color)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:hover.das-predefine-view-cell,.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell.is-disabled{border-bottom-color:var(--das-ui-color-picker-border-color-disabled)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell.is-disabled .el-input__inner{color:var(--das-ui-color-picker-disabled-color)!important;-webkit-text-fill-color:var(--das-ui-color-picker-disabled-color)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-view-cell{border-bottom-color:var(--das-ui-color-picker-border-color-disabled)!important}.das-ui-color-picker .el-color-picker .el-color-picker__empty{font-size:8px!important}html[lang=ar] .das-ui-color-picker .el-color-picker .el-color-picker__empty,:host-context(html[lang="ar"]) .das-ui-color-picker .el-color-picker .el-color-picker__empty{font-size:10px!important}.das-color-picker-popper .el-button.is-text:not(.is-disabled):focus,.das-color-picker-popper .el-button.is-text:not(.is-disabled):hover{background-color:transparent;color:var(--das-ui-color-picker-primary)}.das-color-picker-popper .el-button.is-plain:not(.is-disabled):focus,.das-color-picker-popper .el-button.is-plain:not(.is-disabled):hover{color:var(--das-ui-color-picker-primary);border-color:var(--das-ui-color-picker-primary)}.das-both-view-cell .color-predefine-icon .das-icon,.das-both-view-cell .el-color-picker__color .el-color-picker__icon{display:none}.das-both-view-cell .el-color-picker__color,.das-both-view-cell .color-predefine-icon.view-prefine-icon{border:none!important}
+.das-ui-color-picker[data-v-10f33ae0]{position:relative}.das-ui-color-picker .das-input-table-size+.predefine-placeholder[data-v-10f33ae0]{font-size:12px}html[lang=ar] .das-ui-color-picker .das-input-table-size+.predefine-placeholder[data-v-10f33ae0],:host-context(html[lang="ar"]) .das-ui-color-picker .das-input-table-size+.predefine-placeholder[data-v-10f33ae0]{font-size:14px}.das-ui-color-picker .predefine-placeholder[data-v-10f33ae0]{position:absolute;top:50%;left:0;transform:translateY(-50%);cursor:pointer;color:var(--das-ui-color-picker-placeholder-color);font-size:14px}html[lang=ar] .das-ui-color-picker .predefine-placeholder[data-v-10f33ae0],:host-context(html[lang="ar"]) .das-ui-color-picker .predefine-placeholder[data-v-10f33ae0]{font-size:16px}.das-ui-color-picker .predefine-placeholder.padding-l[data-v-10f33ae0]{left:8px}.das-ui-color-picker .das-ui-input[data-v-10f33ae0]:not(.only-border-bottom) .el-input-group__append{display:flex;align-items:center;justify-content:center}.das-ui-color-picker[data-v-10f33ae0] .el-color-picker__mask{display:none}.das-ui-color-picker .only-border-bottom[data-v-10f33ae0] .das-color-picker-input .el-input-group__append{display:flex;align-items:flex-end}.das-ui-color-picker .only-border-bottom[data-v-10f33ae0] .das-color-picker-input .color-predefine-icon{margin-bottom:2px}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input:not(.das-predefine-cell) .el-input-group__append{padding:0 5px!important}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input .el-color-picker{display:flex;align-items:flex-end}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input .el-color-picker__color{border-color:#9093994d}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input .el-color-picker__color .el-color-picker__color-inner{border-radius:2px}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input.das-empty-color .el-color-picker__color{border-color:#909399}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input.das-color-picker-mini .el-color-picker__trigger{width:20px;height:20px}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input.das-color-picker-mini .el-color-picker__mask{width:20px;height:16px}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input.el-input.el-input-group .el-input-group__prepend{padding-right:8px!important}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input.el-input.el-input-group .el-input-group__prepend .ant-select-selection-item{padding-right:18px}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input .el-color-picker__trigger{border:0;padding:2px}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input .color-predefine-icon{width:16px;height:16px;border-radius:2px;border:1px solid var(--das-ui-color-picker-border-color);display:flex;align-items:center;justify-content:center;padding:2px;box-sizing:border-box}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input .color-predefine-icon.border-predefine{border-color:#9093994d}.das-ui-color-picker[data-v-10f33ae0] .das-color-picker-input .color-predefine-icon.view-prefine-icon{cursor:not-allowed}.color-predefine-dropdown .color-predefine-content[data-v-10f33ae0]{max-width:314px;padding:10px;box-sizing:border-box;display:flex;flex-wrap:wrap}.color-predefine-dropdown .color-predefine-content .color-predefine-span[data-v-10f33ae0]{width:20px;height:20px;border-radius:3px;margin:0 8px 8px 0}.color-predefine-dropdown .color-predefine-content .color-predefine-span[data-v-10f33ae0]:first-of-type{margin-left:0}.color-predefine-dropdown .color-predefine-content .color-predefine-span.active[data-v-10f33ae0]{box-shadow:0 0 5px #00abff}.das-ui-color-picker .das-ui-input .is-view.el-input-group.das-predefine-cell.is-disabled .el-input__inner{color:var(--das-ui-color-picker-disabled-color)!important;-webkit-text-fill-color:var(--das-ui-color-picker-disabled-color)!important}.das-ui-color-picker .das-ui-input .is-view.el-input-group.das-predefine-cell:not(.das-predefine-view-cell,.is-disabled) .el-input__wrapper{background-color:var(--das-ui-color-picker-bg-color)}.das-ui-color-picker .das-ui-input:not(.only-border-bottom) .focus-predefine-view-cell .el-input__wrapper{box-shadow:0 0 0 1px var(--das-ui-color-picker-primary) inset!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-disabled.el-input-group{border-bottom-color:var(--das-ui-color-picker-border-color-disabled)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell{border:0 none;border-bottom:1px solid var(--das-ui-color-picker-border-color)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:not(.das-predefine-view-cell,.is-disabled) .el-input__wrapper .el-input__inner{background-color:var(--das-ui-color-picker-bg-color)}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:not(.das-predefine-view-cell,.is-disabled).focus-predefine-view-cell{border-color:var(--das-ui-color-picker-primary)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:not(.das-both-view-cell,.is-disabled) .el-input__wrapper .el-input__inner{cursor:pointer}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:hover{border-bottom-color:var(--das-ui-color-picker-border-color)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell:hover.das-predefine-view-cell,.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell.is-disabled{border-bottom-color:var(--das-ui-color-picker-border-color-disabled)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-cell.is-disabled .el-input__inner{color:var(--das-ui-color-picker-disabled-color)!important;-webkit-text-fill-color:var(--das-ui-color-picker-disabled-color)!important}.das-ui-color-picker .das-ui-input.only-border-bottom .el-input.is-view.el-input-group.das-predefine-view-cell{border-bottom-color:var(--das-ui-color-picker-border-color-disabled)!important}.das-ui-color-picker .el-color-picker .el-color-picker__empty{font-size:8px!important}html[lang=ar] .das-ui-color-picker .el-color-picker .el-color-picker__empty,:host-context(html[lang="ar"]) .das-ui-color-picker .el-color-picker .el-color-picker__empty{font-size:10px!important}.das-color-picker-popper .el-button.is-text:not(.is-disabled):focus,.das-color-picker-popper .el-button.is-text:not(.is-disabled):hover{background-color:transparent;color:var(--das-ui-color-picker-primary)}.das-color-picker-popper .el-button.is-plain:not(.is-disabled):focus,.das-color-picker-popper .el-button.is-plain:not(.is-disabled):hover{color:var(--das-ui-color-picker-primary);border-color:var(--das-ui-color-picker-primary)}.das-both-view-cell .color-predefine-icon .das-icon,.das-both-view-cell .el-color-picker__color .el-color-picker__icon{display:none}.das-both-view-cell .el-color-picker__color,.das-both-view-cell .color-predefine-icon.view-prefine-icon{border:none!important}

package/packages/components/drawer/index.d.ts

@@ -1,31 +1,31 @@
 declare const DasDrawer: import("@das-fed/utils").SFCWithInstall<{
-    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-        title?: string;
-        bodyStyle?: import("vue").StyleValue;
-    }> & Readonly<{}>, {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./src/type.js").Props> & Readonly<{}>, {
         $drawer: import("vue").Ref<null, null>;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        title: string;
+        direction: "rtl" | "ltr" | "ttb" | "btt";
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<{
-        title?: string;
-        bodyStyle?: import("vue").StyleValue;
-    }> & Readonly<{}>, {
+    }, Readonly<import("./src/type.js").Props> & Readonly<{}>, {
         $drawer: import("vue").Ref<null, null>;
-    }, {}, {}, {}, {}>;
+    }, {}, {}, {}, {
+        title: string;
+        direction: "rtl" | "ltr" | "ttb" | "btt";
+    }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<{
-    title?: string;
-    bodyStyle?: import("vue").StyleValue;
-}> & Readonly<{}>, {
+} & import("vue").ComponentOptionsBase<Readonly<import("./src/type.js").Props> & Readonly<{}>, {
     $drawer: import("vue").Ref<null, null>;
-}, {}, {}, {}, 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 () => {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    title: string;
+    direction: "rtl" | "ltr" | "ttb" | "btt";
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         header?: (props: any) => any;
     } & {

package/packages/components/drawer/index.js

@@ -1,35 +1,37 @@
 import '@das-fed/ui/packages/components/drawer/style.css';
-import { withInstall as u } from "@das-fed/utils/with-install/index";
-import { defineComponent as f, ref as m, createElementBlock as w, openBlock as h, createVNode as y, unref as s, mergeProps as _, createSlots as v, withCtx as l, createElementVNode as g, normalizeStyle as $, renderSlot as i, normalizeProps as n, guardReactiveProps as c } from "vue";
-import { ElDrawer as b } from "element-plus";
+import { withInstall as p } from "@das-fed/utils/with-install/index";
+import { defineComponent as f, ref as m, computed as w, createElementBlock as h, openBlock as v, createVNode as y, unref as _, mergeProps as g, createSlots as $, withCtx as i, createElementVNode as x, normalizeStyle as b, renderSlot as l, normalizeProps as n, guardReactiveProps as c } from "vue";
+import { ElDrawer as k } from "element-plus";
 import "element-plus/es/components/drawer/style/css";
-import { getVar as p, setThemeRule as x } from "@das-fed/web/packages/theme/index";
-const k = { class: "das-ui-drawer" }, D = /* @__PURE__ */ f({
+import { currentLang as D } from "@das-fed/web/packages/i18n/index";
+import { getVar as u, setThemeRule as S } from "@das-fed/web/packages/theme/index";
+const z = { class: "das-ui-drawer" }, E = /* @__PURE__ */ f({
   __name: "Index",
   props: {
-    title: {},
-    bodyStyle: { type: [Boolean, null, String, Object, Array] }
+    title: { default: "" },
+    bodyStyle: {},
+    direction: { default: void 0 }
   },
   setup(t, { expose: a }) {
-    let r = t;
-    const o = m(null);
+    const e = t, o = m(null), d = w(() => D.value === "ar" ? "ltr" : e.direction || "rtl");
     return a({
       $drawer: o
-    }), (e, E) => (h(), w("div", k, [
-      y(s(b), _({
+    }), (r, B) => (v(), h("div", z, [
+      y(_(k), g({
         ref_key: "$drawer",
         ref: o,
-        title: s(r).title
-      }, e.$attrs), v({
-        default: l(() => [
-          g(
+        title: e.title,
+        direction: d.value
+      }, r.$attrs), $({
+        default: i(() => [
+          x(
             "div",
             {
               class: "das-drawer__body",
-              style: $(s(r).bodyStyle)
+              style: b(e.bodyStyle)
             },
             [
-              i(e.$slots, "default", {}, void 0, !0)
+              l(r.$slots, "default", {}, void 0, !0)
             ],
             4
             /* STYLE */
@@ -38,32 +40,32 @@ const k = { class: "das-ui-drawer" }, D = /* @__PURE__ */ f({
         _: 2
         /* DYNAMIC */
       }, [
-        e.$slots.header ? {
+        r.$slots.header ? {
           name: "header",
-          fn: l((d) => [
-            i(e.$slots, "header", n(c(d)), void 0, !0)
+          fn: i((s) => [
+            l(r.$slots, "header", n(c(s)), void 0, !0)
           ]),
           key: "0"
         } : void 0,
-        e.$slots.footer ? {
+        r.$slots.footer ? {
           name: "footer",
-          fn: l((d) => [
-            i(e.$slots, "footer", n(c(d)), void 0, !0)
+          fn: i((s) => [
+            l(r.$slots, "footer", n(c(s)), void 0, !0)
           ]),
           key: "1"
         } : void 0
-      ]), 1040, ["title"])
+      ]), 1040, ["title", "direction"])
     ]));
   }
-}), S = (t, a) => {
-  const r = t.__vccOpts || t;
-  for (const [o, e] of a)
-    r[o] = e;
-  return r;
-}, z = /* @__PURE__ */ S(D, [["__scopeId", "data-v-d5ff24cc"]]), B = {
+}), I = (t, a) => {
+  const e = t.__vccOpts || t;
+  for (const [o, d] of a)
+    e[o] = d;
+  return e;
+}, P = /* @__PURE__ */ I(E, [["__scopeId", "data-v-d751a9a0"]]), V = {
   "--das-ui-drawer-border": "#D9D9D9",
   // 边框线条设置
-  "--das-ui-drawer-header-color": p("--das-color-text-title"),
+  "--das-ui-drawer-header-color": u("--das-color-text-title"),
   // 抽屉-头部-字体颜色
   "--das-ui-drawer-header-height": "50px",
   // 抽屉-头部-高度
@@ -73,14 +75,14 @@ const k = { class: "das-ui-drawer" }, D = /* @__PURE__ */ f({
   // 抽屉-头部-字体大小
   "--das-ui-drawer-close-font-size": "16px",
   // 抽屉-关闭按钮-字体大小
-  "--das-ui-drawer-close-color": p("--das-color-text-subtle"),
+  "--das-ui-drawer-close-color": u("--das-color-text-subtle"),
   // 抽屉-关闭按钮-颜色
   "--das-ui-drawer-body-padding": "16px"
   // 抽屉-内容-padding
 };
-x(B);
-const O = u(z);
+S(V);
+const j = p(P);
 export {
-  O as DasDrawer,
-  O as default
+  j as DasDrawer,
+  j as default
 };

package/packages/components/drawer/src/Index.vue.d.ts

@@ -1,12 +1,5 @@
 import 'element-plus/es/components/drawer/style/css';
-import { StyleValue } from 'vue';
-/** 基于 element-plus, 参考 https://element-plus.gitee.io/zh-CN/component/dialog.html  */
-type DasDrawerProps = {
-    /** 标题 */
-    title?: string;
-    /** body部分样式 */
-    bodyStyle?: StyleValue;
-};
+import type { Props } from './type';
 declare var __VLS_7: any, __VLS_9: {}, __VLS_11: any;
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_7) => any;
@@ -15,9 +8,12 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<DasDrawerProps, {
+declare const __VLS_component: import("vue").DefineComponent<Props, {
     $drawer: import("vue").Ref<null, null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DasDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    direction: "rtl" | "ltr" | "ttb" | "btt";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/packages/components/drawer/src/type.d.ts

@@ -0,0 +1,11 @@
+
+export interface Props {
+  
+  title?: string
+
+  
+  bodyStyle?: import('vue').StyleValue
+
+  
+  direction?: 'rtl' | 'ltr' | 'ttb' | 'btt'
+}

package/packages/components/drawer/style.css

@@ -1 +1 @@
-.das-ui-drawer[data-v-d5ff24cc] .el-drawer__header{margin-bottom:0;padding:0 var(--das-ui-drawer-header-padding-lr);height:var(--das-ui-drawer-header-height);color:var(--das-ui-drawer-header-color);border-bottom:1px solid var(--das-ui-drawer-border)}.das-ui-drawer[data-v-d5ff24cc] .el-drawer__header>.el-drawer__title{line-height:var(--das-ui-drawer-header-height);font-size:var(--das-ui-drawer-header-font-size)!important}.das-ui-drawer[data-v-d5ff24cc] .el-drawer__header .el-drawer__close-btn{padding:0;cursor:pointer}.das-ui-drawer[data-v-d5ff24cc] .el-drawer__header .el-drawer__close-btn .el-icon-close{color:var(--das-ui-drawer-close-color);font-size:var(--das-ui-drawer-close-font-size)}.das-ui-drawer[data-v-d5ff24cc] .el-drawer__body{padding:0}.das-ui-drawer .das-drawer__body[data-v-d5ff24cc]{padding:var(--das-ui-drawer-body-padding)}
+.das-ui-drawer[data-v-d751a9a0] .el-drawer__header{margin-bottom:0;padding:0 var(--das-ui-drawer-header-padding-lr);height:var(--das-ui-drawer-header-height);color:var(--das-ui-drawer-header-color);border-bottom:1px solid var(--das-ui-drawer-border)}.das-ui-drawer[data-v-d751a9a0] .el-drawer__header>.el-drawer__title{line-height:var(--das-ui-drawer-header-height);font-size:var(--das-ui-drawer-header-font-size)!important}.das-ui-drawer[data-v-d751a9a0] .el-drawer__header .el-drawer__close-btn{padding:0;cursor:pointer}.das-ui-drawer[data-v-d751a9a0] .el-drawer__header .el-drawer__close-btn .el-icon-close{color:var(--das-ui-drawer-close-color);font-size:var(--das-ui-drawer-close-font-size)}.das-ui-drawer[data-v-d751a9a0] .el-drawer__body{padding:0}.das-ui-drawer .das-drawer__body[data-v-d751a9a0]{padding:var(--das-ui-drawer-body-padding)}