@aplus-frontend/ui 0.5.17 → 0.5.19

package/theme/ap-ladder/ap-ladder.css

@@ -6,6 +6,71 @@
   /** Aplus端样式  */
   /** Admin端样式  */
 }
+.aplus-ap-ladder__value-group-item {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.aplus-ap-ladder__value-group-label {
+  display: inline-block;
+  color: #8896B0;
+  word-break: break-all;
+  min-width: 50px;
+}
+.aplus-ap-ladder__value-group-value {
+  color: #182948;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aplus-ap-ladder__value-group-link {
+  cursor: pointer !important;
+  color: #0070ff !important;
+  text-decoration: none !important;
+}
+.aplus-ap-ladder-base {
+  display: flex;
+}
+.aplus-ap-ladder--vertical {
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aplus-ap-ladder--vertical > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.aplus-ap-ladder--horizontal {
+  flex-direction: row;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aplus-ap-ladder--horizontal > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.aplus-ap-ladder__tooltip-item {
+  display: flex;
+}
+.aplus-ap-ladder__tooltip-label {
+  min-width: 50px;
+  word-break: break-all;
+}
+.aplus-ap-ladder__tooltip-value {
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .aplus-ap-ladder__cross-bar {
   display: flex;
   align-items: center;
@@ -41,9 +106,11 @@
 .aplus-ap-ladder__unit {
   color: #182948;
 }
-.aplus-ap-ladder__link {
+.aplus-ap-ladder__link,
+.aplus-ap-ladder__link a {
   cursor: pointer;
   color: #0070ff;
+  text-decoration: none;
 }
 .aplus-ap-ladder--admin .aplus-ap-ladder__major {
   color: #333333;

package/theme/ap-ladder/ap-ladder.less

@@ -6,13 +6,81 @@
   position: relative;
   width: inherit;
   font-size: 14px;
+
+
+  &__value-group-item{
+    display: flex;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0; // Import
+  }
+
+  &__value-group-label{
+    display: inline-block;
+    color: #8896B0;
+    word-break: break-all;
+    min-width: 50px;
+  }
+  &__value-group-value{
+    color: #182948;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__value-group-link{
+    cursor: pointer !important;
+    color: @aplus-primary-color !important;
+    text-decoration: none !important;
+  }
+ 
+  &-base{
+    display: flex;
+  }
+  &--vertical{
+    flex-direction: column;
+     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0; // Important for flex children to be able to shrink below content size
+    }
+  }
+  &--horizontal{
+    flex-direction: row;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0; // Important for flex children to be able to shrink below content size
+    }
+  }
+  &__tooltip-item{
+    display: flex;
+  }
+  &__tooltip-label{
+     min-width: 50px;
+     word-break: break-all;
+  }
+  &__tooltip-value{
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   &__cross-bar {
     display: flex;
     align-items: center;
   }
   /** 自动溢出省略 */
   &__ellipsis {
-    // min-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -45,9 +113,11 @@
   &__unit {
     color: #182948;
   }
-  &__link {
+ 
+  &__link,&__link a{
     cursor: pointer;
     color: @aplus-primary-color;
+    text-decoration: none;
   }
   /** Admin端样式  */
   &--admin {

package/theme/index.css

@@ -594,6 +594,71 @@
   /** Aplus端样式  */
   /** Admin端样式  */
 }
+.aplus-ap-ladder__value-group-item {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.aplus-ap-ladder__value-group-label {
+  display: inline-block;
+  color: #8896B0;
+  word-break: break-all;
+  min-width: 50px;
+}
+.aplus-ap-ladder__value-group-value {
+  color: #182948;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aplus-ap-ladder__value-group-link {
+  cursor: pointer !important;
+  color: #0070ff !important;
+  text-decoration: none !important;
+}
+.aplus-ap-ladder-base {
+  display: flex;
+}
+.aplus-ap-ladder--vertical {
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aplus-ap-ladder--vertical > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.aplus-ap-ladder--horizontal {
+  flex-direction: row;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aplus-ap-ladder--horizontal > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.aplus-ap-ladder__tooltip-item {
+  display: flex;
+}
+.aplus-ap-ladder__tooltip-label {
+  min-width: 50px;
+  word-break: break-all;
+}
+.aplus-ap-ladder__tooltip-value {
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .aplus-ap-ladder__cross-bar {
   display: flex;
   align-items: center;
@@ -629,9 +694,11 @@
 .aplus-ap-ladder__unit {
   color: #182948;
 }
-.aplus-ap-ladder__link {
+.aplus-ap-ladder__link,
+.aplus-ap-ladder__link a {
   cursor: pointer;
   color: #0070ff;
+  text-decoration: none;
 }
 .aplus-ap-ladder--admin .aplus-ap-ladder__major {
   color: #333333;

package/es/src/business/ap-ladder/HelpMessageIcon.vue.d.ts

@@ -1,14 +0,0 @@
-import { PropType, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { ApLadderLabelValue } from './interface';
-declare const _default: DefineComponent<ExtractPropTypes<{
-    lv: {
-        type: PropType<ApLadderLabelValue>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-    lv: {
-        type: PropType<ApLadderLabelValue>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLSpanElement>;
-export default _default;

package/es/src/business/ap-ladder/HelpMessageIcon.vue.mjs

@@ -1,4 +0,0 @@
-import f from "./HelpMessageIcon.vue2.mjs";
-export {
-  f as default
-};

package/es/src/business/ap-ladder/HelpMessageIcon.vue2.mjs

@@ -1,35 +0,0 @@
-import { defineComponent as a, createElementBlock as y, openBlock as l, createBlock as t, isVNode as i, resolveDynamicComponent as o, normalizeStyle as s, unref as c } from "vue";
-import { IconApAdFillWarn as r, IconApAdLineAnnotation as u } from "@aplus-frontend/icon";
-const g = { style: { display: "inline-flex", "align-items": "center" } }, v = /* @__PURE__ */ a({
-  __name: "HelpMessageIcon",
-  props: {
-    lv: {
-      type: Object,
-      required: !0
-    }
-  },
-  setup(e) {
-    const n = {
-      color: "#FAAD14",
-      fontSize: "12px"
-    };
-    return (m, I) => (l(), y("span", g, [
-      i(e.lv.helpMessageIcon) ? (l(), t(o(e.lv.helpMessageIcon), {
-        key: 0,
-        style: s([n, e.lv.helpMessageIconStyles])
-      }, null, 8, ["style"])) : typeof e.lv.helpMessageIcon == "function" ? (l(), t(o(e.lv.helpMessageIcon()), {
-        key: 1,
-        style: s([n, e.lv.helpMessageIconStyles])
-      }, null, 8, ["style"])) : e.lv.helpMessageIcon === "warning" ? (l(), t(c(r), {
-        key: 2,
-        style: s([n, e.lv.helpMessageIconStyles])
-      }, null, 8, ["style"])) : (l(), t(c(u), {
-        key: 3,
-        style: s([n, e.lv.helpMessageIconStyles])
-      }, null, 8, ["style"]))
-    ]));
-  }
-});
-export {
-  v as default
-};

package/es/src/business/ap-ladder/useWatchEllipsis.mjs

@@ -1,35 +0,0 @@
-import { isClient as a } from "@vueuse/core";
-import { ref as c, watch as n } from "vue";
-const r = /* @__PURE__ */ new WeakMap();
-let l;
-const p = "ap-ladder-is-ellipsised";
-function o(i) {
-  const t = i.querySelectorAll(`.${p}`);
-  let e = !1;
-  return t.forEach((s) => {
-    s.clientWidth < s.scrollWidth && (e = !0);
-  }), e;
-}
-a && (l = new ResizeObserver((i) => {
-  for (const t of i) {
-    const e = t.target;
-    if (r.has(e)) {
-      const s = o(e);
-      r.get(e).value = s;
-    }
-  }
-}));
-const h = (i) => {
-  const t = c(!1);
-  return n(
-    () => i.value,
-    (e, s) => {
-      e && l.observe(e), s && l.unobserve(s), e && r.set(e, t), s && r.delete(s), e && (t.value = o(e));
-    },
-    { flush: "post", immediate: !0 }
-  ), t;
-};
-export {
-  p as ellipsisElementCls,
-  h as useWatchEllipsis
-};

package/lib/src/business/ap-ladder/HelpMessageIcon.vue.d.ts

@@ -1,14 +0,0 @@
-import { PropType, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { ApLadderLabelValue } from './interface';
-declare const _default: DefineComponent<ExtractPropTypes<{
-    lv: {
-        type: PropType<ApLadderLabelValue>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-    lv: {
-        type: PropType<ApLadderLabelValue>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLSpanElement>;
-export default _default;

package/lib/src/business/ap-ladder/HelpMessageIcon.vue.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./HelpMessageIcon.vue2.js");exports.default=e.default;

package/lib/src/business/ap-ladder/HelpMessageIcon.vue2.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("@aplus-frontend/icon"),o={style:{display:"inline-flex","align-items":"center"}},c=e.defineComponent({__name:"HelpMessageIcon",props:{lv:{type:Object,required:!0}},setup(l){const n={color:"#FAAD14",fontSize:"12px"};return(s,a)=>(e.openBlock(),e.createElementBlock("span",o,[e.isVNode(l.lv.helpMessageIcon)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.lv.helpMessageIcon),{key:0,style:e.normalizeStyle([n,l.lv.helpMessageIconStyles])},null,8,["style"])):typeof l.lv.helpMessageIcon=="function"?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.lv.helpMessageIcon()),{key:1,style:e.normalizeStyle([n,l.lv.helpMessageIconStyles])},null,8,["style"])):l.lv.helpMessageIcon==="warning"?(e.openBlock(),e.createBlock(e.unref(t.IconApAdFillWarn),{key:2,style:e.normalizeStyle([n,l.lv.helpMessageIconStyles])},null,8,["style"])):(e.openBlock(),e.createBlock(e.unref(t.IconApAdLineAnnotation),{key:3,style:e.normalizeStyle([n,l.lv.helpMessageIconStyles])},null,8,["style"]))]))}});exports.default=c;

package/lib/src/business/ap-ladder/useWatchEllipsis.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@vueuse/core"),c=require("vue"),l=new WeakMap;let r;const n="ap-ladder-is-ellipsised";function a(i){const t=i.querySelectorAll(`.${n}`);let e=!1;return t.forEach(s=>{s.clientWidth<s.scrollWidth&&(e=!0)}),e}o.isClient&&(r=new ResizeObserver(i=>{for(const t of i){const e=t.target;if(l.has(e)){const s=a(e);l.get(e).value=s}}}));const u=i=>{const t=c.ref(!1);return c.watch(()=>i.value,(e,s)=>{e&&r.observe(e),s&&r.unobserve(s),e&&l.set(e,t),s&&l.delete(s),e&&(t.value=a(e))},{flush:"post",immediate:!0}),t};exports.ellipsisElementCls=n;exports.useWatchEllipsis=u;