@aplus-frontend/ui 7.0.0-beta.0 → 7.0.0-beta.2

package/es/src/splitter/style/index.mjs

@@ -0,0 +1,224 @@
+import { genComponentStyleHook as l } from "../../utils/cssinjs/index.mjs";
+const t = () => ({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)"
+}), a = (r) => ({
+  position: "absolute",
+  zIndex: 1,
+  display: "none",
+  background: r.colorPrimary,
+  opacity: 0.2,
+  transition: "none",
+  pointerEvents: "none"
+}), s = (r) => {
+  const { componentCls: e, namespace: o } = r, i = `--${o}-splitter-bar-preview-offset`;
+  return {
+    [e]: {
+      boxSizing: "border-box",
+      margin: 0,
+      padding: 0,
+      color: r.textColor2,
+      fontSize: r.fontSize,
+      lineHeight: r.lineHeight,
+      listStyle: "none",
+      fontFamily: "inherit",
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      alignItems: "stretch",
+      [`${e}-bar`]: {
+        flex: "none",
+        position: "relative",
+        userSelect: "none",
+        [`${e}-bar-dragger`]: {
+          zIndex: 1,
+          ...t(r),
+          // Hover background
+          "&::before": {
+            content: '""',
+            background: "rgba(0, 0, 0, 0.04)",
+            ...t(r)
+          },
+          // Spinner
+          "&::after": {
+            content: '""',
+            background: "rgba(0, 0, 0, 0.15)",
+            ...t(r)
+          },
+          // Hover
+          [`&:hover:not(${e}-bar-dragger-active)`]: {
+            "&::before": {
+              background: "#e6f4ff"
+            }
+          },
+          // Active
+          "&-active": {
+            zIndex: 2,
+            "&::before": {
+              background: "#bae0ff"
+            }
+          },
+          [`&-disabled${e}-bar-dragger`]: {
+            zIndex: 0,
+            "&, &:hover, &-active": {
+              cursor: "default",
+              "&::before": {
+                background: "rgba(0,0,0,0.04)"
+              }
+            },
+            "&::after": {
+              display: "none"
+            }
+          }
+        },
+        [`${e}-bar-collapse-bar`]: {
+          ...t(r),
+          zIndex: 1e3,
+          background: "rgba(0,0,0,0.04)",
+          fontsize: r.fontSizeSM,
+          borderRadius: "2px",
+          color: r.textColor2,
+          cursor: "pointer",
+          opacity: 0,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          "&:hover": {
+            backgroundColor: "rgba(0, 0, 0, 0.15)"
+          },
+          "&:active": {
+            backgroundColor: "#e6f4ff"
+          }
+        },
+        "&:hover, &:active": {
+          [`${e}-bar-collapse-bar`]: {
+            opacity: 1
+          }
+        }
+      },
+      [`${e}-mask`]: {
+        position: "fixed",
+        zIndex: 1e3,
+        inset: 0,
+        "&-horizontal": {
+          cursor: "col-resize"
+        },
+        "&-vertical": {
+          cursor: "row-resize"
+        }
+      },
+      "&-horizontal": {
+        flexDirection: "row",
+        [`& > ${e}-bar`]: {
+          width: 0,
+          [`${e}-bar-preview`]: {
+            height: "100%",
+            width: r.splitterBarSize,
+            ...a(r),
+            "&-active": {
+              display: "block",
+              transform: `translateX(var(${i}))`
+            }
+          },
+          [`${e}-bar-dragger`]: {
+            cursor: "col-resize",
+            height: "100%",
+            width: r.splitterTriggerSize,
+            "&::before": {
+              height: "100%",
+              width: r.splitterBarSize
+            },
+            "&::after": {
+              height: r.splitterSplitBarDraggableSize,
+              width: r.splitterBarSize
+            }
+          },
+          [`${e}-bar-collapse-bar`]: {
+            width: r.fontSizeSM,
+            height: "24px",
+            "&-start": {
+              left: "auto",
+              right: `calc(${r.splitterTriggerSize} / 2)`,
+              transform: "translateY(-50%)"
+            },
+            "&-end": {
+              left: `calc(${r.splitterTriggerSize} / 2)`,
+              right: "auto",
+              transform: "translateY(-50%)"
+            }
+          }
+        }
+      },
+      "&-vertical": {
+        flexDirection: "column",
+        [`& > ${e}-bar`]: {
+          height: 0,
+          [`${e}-bar-preview`]: {
+            height: r.splitterBarSize,
+            width: "100%",
+            ...a(r),
+            [`&${e}-bar-preview-active`]: {
+              display: "block",
+              transform: `translateY(var(${i}))`
+            }
+          },
+          [`${e}-bar-dragger`]: {
+            cursor: "row-resize",
+            width: "100%",
+            height: r.splitterTriggerSize,
+            "&::before": {
+              width: "100%",
+              height: r.splitterBarSize
+            },
+            "&::after": {
+              width: r.splitterSplitBarDraggableSize,
+              height: r.splitterBarSize
+            }
+          },
+          [`${e}-bar-collapse-bar`]: {
+            height: r.fontSizeSM,
+            width: "24px",
+            "&-start": {
+              top: "auto",
+              bottom: `calc(${r.splitterTriggerSize} / 2)`,
+              transform: "translateX(-50%)"
+            },
+            "&-end": {
+              top: `calc(${r.splitterTriggerSize} / 2)`,
+              bottom: "auto",
+              transform: "translateX(-50%)"
+            }
+          }
+        }
+      },
+      [`${e}-panel`]: {
+        overflow: "auto",
+        padding: "0 1px",
+        scrollbarWidth: "thin",
+        boxSizing: "border-box",
+        "&-hidden": {
+          padding: 0,
+          overflow: "hidden"
+        },
+        [`&:has(${e}:only-child)`]: {
+          overflow: "hidden"
+        }
+      }
+    }
+  };
+}, g = l(
+  "Splitter",
+  (r) => [s(r)],
+  {
+    splitterBarSize: 2,
+    splitterTriggerSize: 6,
+    splitterResizeSpinnerSize: 20,
+    splitterSplitBarDraggableSize: 20
+  }
+);
+export {
+  g as default,
+  s as genSplitterStyle
+};

package/es/src/style/index.d.ts

@@ -1,3 +1,5 @@
-import { CSSProperties } from 'vue';
-import { BaseToken } from '../design-token/interface';
-export declare const resetComponent: (token: BaseToken) => CSSProperties;
+import { StyleMixin } from '../design-token/interface';
+export declare const resetComponent: StyleMixin;
+export declare const resetScrollbar: StyleMixin;
+export declare const multiRows: StyleMixin;
+export declare const singleRow: StyleMixin;

package/es/src/style/index.mjs

@@ -1,13 +1,47 @@
-const i = (e) => ({
+const o = (r) => ({
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
-  color: e.textColor2,
-  fontSize: e.fontSize,
+  color: r.textColor2,
+  fontSize: r.fontSize,
   fontFamily: "inherit",
-  lineHeight: e.lineHeight,
+  lineHeight: r.lineHeight,
   listStyle: "none"
+}), e = (r) => ({
+  "::-webkit-scrollbar": {
+    width: "10px",
+    height: "10px"
+  },
+  "::-webkit-scrollbar-thumb": {
+    backgroundColor: r.scrollbarThumbColorBase,
+    backgroundClip: "content-box",
+    border: "1px solid transparent",
+    borderRadius: "4px"
+  },
+  "::-webkit-scrollbar-track, ::-webkit-scrollbar-corner": {
+    backgroundColor: r.scrollbarTrackColorHover
+  },
+  "::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active": {
+    backgroundColor: r.scrollbarThumbColorHover
+  }
+}), l = (r) => ({
+  ...o(r),
+  display: "-webkit-inline-box",
+  "-webkit-line-clamp": `${r.lineClamp || 2}`,
+  "-webkit-box-orient": "vertical",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "normal",
+  maxWidth: "100%",
+  verticalAlign: "middle",
+  wordBreak: "break-all",
+  flex: 1
+}), i = (r) => ({
+  ...l({ ...r, lineClamp: 1 })
 });
 export {
-  i as resetComponent
+  l as multiRows,
+  o as resetComponent,
+  e as resetScrollbar,
+  i as singleRow
 };

package/es/src/style/reset.css

@@ -0,0 +1,257 @@
+/* stylelint-disable */
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+@-ms-viewport {
+  width: device-width;
+}
+body {
+  margin: 0;
+}
+[tabindex='-1']:focus {
+  outline: none;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-weight: 500;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+abbr[title],
+abbr[data-original-title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  border-bottom: 0;
+  cursor: help;
+}
+address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+input[type='text'],
+input[type='password'],
+input[type='number'],
+textarea {
+  appearance: none;
+  -webkit-appearance: none;
+}
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+dt {
+  font-weight: 500;
+}
+dd {
+  margin-bottom: 0.5em;
+  margin-left: 0;
+}
+blockquote {
+  margin: 0 0 1em;
+}
+dfn {
+  font-style: italic;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+pre,
+code,
+kbd,
+samp {
+  font-size: 1em;
+  font-family:
+    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+figure {
+  margin: 0 0 1em;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+a,
+area,
+button,
+[role='button'],
+input:not([type='range']),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+table {
+  border-collapse: collapse;
+}
+caption {
+  padding-top: 0.75em;
+  padding-bottom: 0.3em;
+  text-align: left;
+  caption-side: bottom;
+}
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+  appearance: button;
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+input[type='radio'],
+input[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type='date'],
+input[type='time'],
+input[type='datetime-local'],
+input[type='month'] {
+  appearance: listbox;
+  -webkit-appearance: listbox;
+}
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 0.5em;
+  padding: 0;
+  color: inherit;
+  font-size: 1.5em;
+  line-height: inherit;
+  white-space: normal;
+}
+progress {
+  vertical-align: baseline;
+}
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+[type='search'] {
+  outline-offset: -2px;
+  appearance: none;
+  -webkit-appearance: none;
+}
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+output {
+  display: inline-block;
+}
+summary {
+  display: list-item;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+mark {
+  padding: 0.2em;
+  background-color: #feffe6;
+}

package/es/src/text/group.vue.mjs

@@ -1,10 +1,11 @@
-import { defineComponent as p, toRef as t, createBlock as n, openBlock as c, unref as o, mergeProps as s, withCtx as f, renderSlot as u } from "vue";
-import { useProvideApTextGroup as m } from "./context.mjs";
+import { defineComponent as n, toRef as t, createBlock as s, openBlock as c, unref as e, mergeProps as u, withCtx as f, renderSlot as m } from "vue";
+import { useProvideApTextGroup as d } from "./context.mjs";
 import "../config-provider/index.mjs";
-import { Space as d } from "@aplus-frontend/antdv";
-import { omit as v } from "lodash-unified";
-import { useNamespace as y } from "../config-provider/hooks/use-namespace.mjs";
-const z = /* @__PURE__ */ p({
+import { Space as v } from "@aplus-frontend/antdv";
+import { omit as y } from "lodash-unified";
+import S from "./style/group.mjs";
+import { useNamespace as b } from "../config-provider/hooks/use-namespace.mjs";
+const w = /* @__PURE__ */ n({
   name: "ApTextGroup",
   __name: "group",
   props: {
@@ -17,22 +18,22 @@ const z = /* @__PURE__ */ p({
     align: { default: "baseline" },
     wrap: { type: Boolean, default: !1 }
   },
-  setup(a) {
-    const e = a, { b: r, m: i } = y("ap-text-group");
-    return m({
-      colon: t(e.colon),
-      vertical: t(e.vertical),
-      labelStyle: t(e.labelStyle)
-    }), (l, b) => (c(), n(o(d), s({
-      class: [o(r)(), l.direction === "horizontal" ? o(i)("horizontal") : null]
-    }, o(v)(e, ["colon", "vertical", "labelStyle"])), {
+  setup(r) {
+    const o = r, { b: a, m: p } = b("ap-text-group"), i = S("ap-text-group");
+    return d({
+      colon: t(o.colon),
+      vertical: t(o.vertical),
+      labelStyle: t(o.labelStyle)
+    }), (l, h) => (c(), s(e(v), u({
+      class: [e(a)(), l.direction === "horizontal" ? e(p)("horizontal") : null, e(i)]
+    }, e(y)(o, ["colon", "vertical", "labelStyle"])), {
       default: f(() => [
-        u(l.$slots, "default")
+        m(l.$slots, "default")
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
 export {
-  z as default
+  w as default
 };

package/es/src/text/index.vue.mjs

@@ -1,11 +1,12 @@
-import { defineComponent as L, useSlots as O, computed as n, unref as o, createVNode as $, isVNode as z, Fragment as D, createElementBlock as p, openBlock as t, normalizeClass as a, createCommentVNode as v, createElementVNode as x, normalizeStyle as E, createBlock as c, resolveDynamicComponent as U, mergeProps as C, withCtx as d, renderSlot as r, createSlots as w, createTextVNode as F, toDisplayString as G, renderList as I, normalizeProps as R, guardReactiveProps as _ } from "vue";
-import { TypographyLink as q, TypographyText as H } from "@aplus-frontend/antdv";
-import { isUndefined as s, omit as u, isString as J } from "lodash-unified";
+import { defineComponent as O, useSlots as $, computed as n, unref as o, createVNode as x, isVNode as z, Fragment as D, createElementBlock as p, openBlock as t, normalizeClass as a, createCommentVNode as v, createElementVNode as E, normalizeStyle as I, createBlock as c, resolveDynamicComponent as U, mergeProps as C, withCtx as d, renderSlot as r, createSlots as w, createTextVNode as F, toDisplayString as G, renderList as R, normalizeProps as _, guardReactiveProps as q } from "vue";
+import { TypographyLink as H, TypographyText as J } from "@aplus-frontend/antdv";
+import { isUndefined as s, omit as u, isString as K } from "lodash-unified";
 import "../config-provider/index.mjs";
-import { useInjectApTextGroup as K } from "./context.mjs";
-import { isDef as M } from "../utils/index.mjs";
-import { useNamespace as Q } from "../config-provider/hooks/use-namespace.mjs";
-const ae = /* @__PURE__ */ L({
+import { useInjectApTextGroup as M } from "./context.mjs";
+import { isDef as Q } from "../utils/index.mjs";
+import W from "./style/index.mjs";
+import { useNamespace as X } from "../config-provider/hooks/use-namespace.mjs";
+const ie = /* @__PURE__ */ O({
   name: "ApText",
   __name: "index",
   props: {
@@ -66,59 +67,59 @@ const ae = /* @__PURE__ */ L({
     style: {}
   },
   setup(B) {
-    const m = O(), e = B, {
+    const m = $(), e = B, {
       b: g,
       e: i,
       em: S,
       m: P
-    } = Q("ap-text"), {
+    } = X("ap-text"), h = W("ap-text"), {
       colon: f,
       vertical: y,
       labelStyle: N
-    } = K(), T = n(() => s(e.colon) ? s(f?.value) ? !0 : f.value : e.colon), V = n(() => s(e.vertical) ? s(y?.value) ? !1 : y.value : e.vertical), h = n(() => {
+    } = M(), T = n(() => s(e.colon) ? s(f?.value) ? !0 : f.value : e.colon), V = n(() => s(e.vertical) ? s(y?.value) ? !1 : y.value : e.vertical), j = n(() => {
       const l = o(N) || {};
       return Object.assign(l, e.labelStyle || {}), l;
     }), k = n(() => {
       if (e.label)
-        return z(e.label) ? e.label : $(D, null, [e.label]);
-    }), j = n(() => {
-      const l = M(e.linkProps.ellipsis) ? e.linkProps.ellipsis : !!e.ellipsis;
+        return z(e.label) ? e.label : x(D, null, [e.label]);
+    }), A = n(() => {
+      const l = Q(e.linkProps.ellipsis) ? e.linkProps.ellipsis : !!e.ellipsis;
       return {
-        href: J(e.link) ? e.link : void 0,
+        href: K(e.link) ? e.link : void 0,
         ...u(e, ["linkProps"]),
         ...e.linkProps,
         ellipsis: l
       };
     });
-    return (l, W) => (t(), p("div", {
+    return (l, Y) => (t(), p("div", {
       class: a([o(g)(), {
         [o(P)("vertical")]: V.value
-      }])
+      }, o(h)])
     }, [k.value ? (t(), p("span", {
       key: 0,
       class: a([o(i)("label"), {
         [o(S)("label", "no-colon")]: !T.value
       }]),
-      style: E(h.value)
-    }, [(t(), c(U(k.value)))], 6)) : v("", !0), x("div", {
+      style: I(j.value)
+    }, [(t(), c(U(k.value)))], 6)) : v("", !0), E("div", {
       class: a(o(i)("content"))
-    }, [l.link ? (t(), c(o(q), C({
+    }, [l.link ? (t(), c(o(H), C({
       key: 0
-    }, j.value, {
+    }, A.value, {
       onClick: l.onClickContent
     }), {
       default: d(() => [r(l.$slots, "default")]),
       _: 3
-    }, 16, ["onClick"])) : (t(), c(o(H), C({
+    }, 16, ["onClick"])) : (t(), c(o(J), C({
       key: 1
     }, o(u)(e, ["label", "colon", "link", "linkProps", "vertical", "labelStyle"]), {
       onClick: l.onClickContent
     }), w({
       default: d(() => [r(l.$slots, "default", {}, () => [F(G(l.content || "--"), 1)])]),
       _: 2
-    }, [I(o(u)(m, ["default", "addonAfter"]), (X, b) => ({
+    }, [R(o(u)(m, ["default", "addonAfter"]), (Z, b) => ({
       name: b,
-      fn: d((A) => [r(l.$slots, b, R(_(A || {})))])
+      fn: d((L) => [r(l.$slots, b, _(q(L || {})))])
     }))]), 1040, ["onClick"])), m.addonAfter ? (t(), p("div", {
       key: 2,
       class: a(o(i)("content-addon-after"))
@@ -126,5 +127,5 @@ const ae = /* @__PURE__ */ L({
   }
 });
 export {
-  ae as default
+  ie as default
 };

package/es/src/text/style/group.d.ts

@@ -0,0 +1,5 @@
+import { GenStyleFunc } from '../../design-token/interface';
+import { Ref } from 'vue';
+export declare const genApTextGroupStyle: GenStyleFunc;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;