sapit-ui-plus/lib/js/Col.js

import { g as E, I as T, _ as g, j as F, aK as D, aL as w, m as k, a as C, F as N } from "./index2.js";
import { shallowRef as K, onMounted as L, inject as V, computed as $, provide as X, defineComponent as W, ref as R, onBeforeUnmount as H, createVNode as B } from "vue";
import { d as P } from "./styleChecker.js";
const J = () => {
  const e = K(!1);
  return L(() => {
    e.value = P();
  }), e;
}, _ = Symbol("rowContextKey"), U = (e) => {
  X(_, e);
}, q = () => V(_, {
  gutter: $(() => {
  }),
  wrap: $(() => {
  }),
  supportFlexGap: $(() => {
  })
}), Q = (e) => {
  const {
    componentCls: t
  } = e;
  return {
    // Grid system
    [t]: {
      display: "flex",
      flexFlow: "row wrap",
      minWidth: 0,
      "&::before, &::after": {
        display: "flex"
      },
      "&-no-wrap": {
        flexWrap: "nowrap"
      },
      // The origin of the X-axis
      "&-start": {
        justifyContent: "flex-start"
      },
      // The center of the X-axis
      "&-center": {
        justifyContent: "center"
      },
      // The opposite of the X-axis
      "&-end": {
        justifyContent: "flex-end"
      },
      "&-space-between": {
        justifyContent: "space-between"
      },
      "&-space-around ": {
        justifyContent: "space-around"
      },
      "&-space-evenly ": {
        justifyContent: "space-evenly"
      },
      // Align at the top
      "&-top": {
        alignItems: "flex-start"
      },
      // Align at the center
      "&-middle": {
        alignItems: "center"
      },
      "&-bottom": {
        alignItems: "flex-end"
      }
    }
  };
}, Y = (e) => {
  const {
    componentCls: t
  } = e;
  return {
    // Grid system
    [t]: {
      position: "relative",
      maxWidth: "100%",
      // Prevent columns from collapsing when empty
      minHeight: 1
    }
  };
}, Z = (e, t) => {
  const {
    componentCls: a,
    gridColumns: u
  } = e, o = {};
  for (let s = u; s >= 0; s--)
    s === 0 ? (o[`${a}${t}-${s}`] = {
      display: "none"
    }, o[`${a}-push-${s}`] = {
      insetInlineStart: "auto"
    }, o[`${a}-pull-${s}`] = {
      insetInlineEnd: "auto"
    }, o[`${a}${t}-push-${s}`] = {
      insetInlineStart: "auto"
    }, o[`${a}${t}-pull-${s}`] = {
      insetInlineEnd: "auto"
    }, o[`${a}${t}-offset-${s}`] = {
      marginInlineEnd: 0
    }, o[`${a}${t}-order-${s}`] = {
      order: 0
    }) : (o[`${a}${t}-${s}`] = {
      display: "block",
      flex: `0 0 ${s / u * 100}%`,
      maxWidth: `${s / u * 100}%`
    }, o[`${a}${t}-push-${s}`] = {
      insetInlineStart: `${s / u * 100}%`
    }, o[`${a}${t}-pull-${s}`] = {
      insetInlineEnd: `${s / u * 100}%`
    }, o[`${a}${t}-offset-${s}`] = {
      marginInlineStart: `${s / u * 100}%`
    }, o[`${a}${t}-order-${s}`] = {
      order: s
    });
  return o;
}, O = (e, t) => Z(e, t), z = (e, t, a) => ({
  [`@media (min-width: ${t}px)`]: g({}, O(e, a))
}), ee = E("Grid", (e) => [Q(e)]), te = E("Grid", (e) => {
  const t = T(e, {
    gridColumns: 24
    // Row is divided into 24 parts in Grid
  }), a = {
    "-sm": t.screenSMMin,
    "-md": t.screenMDMin,
    "-lg": t.screenLGMin,
    "-xl": t.screenXLMin,
    "-xxl": t.screenXXLMin
  };
  return [Y(t), O(t, ""), O(t, "-xs"), Object.keys(a).map((u) => z(t, a[u], u)).reduce((u, o) => g(g({}, u), o), {})];
}), ne = () => ({
  align: N([String, Object]),
  justify: N([String, Object]),
  prefixCls: String,
  gutter: N([Number, Array, Object], 0),
  wrap: {
    type: Boolean,
    default: void 0
  }
}), ie = W({
  compatConfig: {
    MODE: 3
  },
  name: "ARow",
  inheritAttrs: !1,
  props: ne(),
  setup(e, t) {
    let {
      slots: a,
      attrs: u
    } = t;
    const {
      prefixCls: o,
      direction: s
    } = F("row", e), [G, y] = ee(o);
    let v;
    const x = D(), b = R({
      xs: !0,
      sm: !0,
      md: !0,
      lg: !0,
      xl: !0,
      xxl: !0
    }), S = R({
      xs: !1,
      sm: !1,
      md: !1,
      lg: !1,
      xl: !1,
      xxl: !1
    }), h = (n) => $(() => {
      if (typeof e[n] == "string")
        return e[n];
      if (typeof e[n] != "object")
        return "";
      for (let r = 0; r < w.length; r++) {
        const l = w[r];
        if (!S.value[l]) continue;
        const i = e[n][l];
        if (i !== void 0)
          return i;
      }
      return "";
    }), f = h("align"), p = h("justify"), d = J();
    L(() => {
      v = x.value.subscribe((n) => {
        S.value = n;
        const r = e.gutter || 0;
        (!Array.isArray(r) && typeof r == "object" || Array.isArray(r) && (typeof r[0] == "object" || typeof r[1] == "object")) && (b.value = n);
      });
    }), H(() => {
      x.value.unsubscribe(v);
    });
    const m = $(() => {
      const n = [void 0, void 0], {
        gutter: r = 0
      } = e;
      return (Array.isArray(r) ? r : [r, void 0]).forEach((i, M) => {
        if (typeof i == "object")
          for (let I = 0; I < w.length; I++) {
            const A = w[I];
            if (b.value[A] && i[A] !== void 0) {
              n[M] = i[A];
              break;
            }
          }
        else
          n[M] = i;
      }), n;
    });
    U({
      gutter: m,
      supportFlexGap: d,
      wrap: $(() => e.wrap)
    });
    const j = $(() => k(o.value, {
      [`${o.value}-no-wrap`]: e.wrap === !1,
      [`${o.value}-${p.value}`]: p.value,
      [`${o.value}-${f.value}`]: f.value,
      [`${o.value}-rtl`]: s.value === "rtl"
    }, u.class, y.value)), c = $(() => {
      const n = m.value, r = {}, l = n[0] != null && n[0] > 0 ? `${n[0] / -2}px` : void 0, i = n[1] != null && n[1] > 0 ? `${n[1] / -2}px` : void 0;
      return l && (r.marginLeft = l, r.marginRight = l), d.value ? r.rowGap = `${n[1]}px` : i && (r.marginTop = i, r.marginBottom = i), r;
    });
    return () => {
      var n;
      return G(B("div", C(C({}, u), {}, {
        class: j.value,
        style: g(g({}, c.value), u.style)
      }), [(n = a.default) === null || n === void 0 ? void 0 : n.call(a)]));
    };
  }
});
function re(e) {
  return typeof e == "number" ? `${e} ${e} auto` : /^\d+(\.\d+)?(px|em|rem|%)$/.test(e) ? `0 0 ${e}` : e;
}
const se = () => ({
  span: [String, Number],
  order: [String, Number],
  offset: [String, Number],
  push: [String, Number],
  pull: [String, Number],
  xs: {
    type: [String, Number, Object],
    default: void 0
  },
  sm: {
    type: [String, Number, Object],
    default: void 0
  },
  md: {
    type: [String, Number, Object],
    default: void 0
  },
  lg: {
    type: [String, Number, Object],
    default: void 0
  },
  xl: {
    type: [String, Number, Object],
    default: void 0
  },
  xxl: {
    type: [String, Number, Object],
    default: void 0
  },
  prefixCls: String,
  flex: [String, Number]
}), oe = ["xs", "sm", "md", "lg", "xl", "xxl"], de = W({
  compatConfig: {
    MODE: 3
  },
  name: "ACol",
  inheritAttrs: !1,
  props: se(),
  setup(e, t) {
    let {
      slots: a,
      attrs: u
    } = t;
    const {
      gutter: o,
      supportFlexGap: s,
      wrap: G
    } = q(), {
      prefixCls: y,
      direction: v
    } = F("col", e), [x, b] = te(y), S = $(() => {
      const {
        span: f,
        order: p,
        offset: d,
        push: m,
        pull: j
      } = e, c = y.value;
      let n = {};
      return oe.forEach((r) => {
        let l = {};
        const i = e[r];
        typeof i == "number" ? l.span = i : typeof i == "object" && (l = i || {}), n = g(g({}, n), {
          [`${c}-${r}-${l.span}`]: l.span !== void 0,
          [`${c}-${r}-order-${l.order}`]: l.order || l.order === 0,
          [`${c}-${r}-offset-${l.offset}`]: l.offset || l.offset === 0,
          [`${c}-${r}-push-${l.push}`]: l.push || l.push === 0,
          [`${c}-${r}-pull-${l.pull}`]: l.pull || l.pull === 0,
          [`${c}-rtl`]: v.value === "rtl"
        });
      }), k(c, {
        [`${c}-${f}`]: f !== void 0,
        [`${c}-order-${p}`]: p,
        [`${c}-offset-${d}`]: d,
        [`${c}-push-${m}`]: m,
        [`${c}-pull-${j}`]: j
      }, n, u.class, b.value);
    }), h = $(() => {
      const {
        flex: f
      } = e, p = o.value, d = {};
      if (p && p[0] > 0) {
        const m = `${p[0] / 2}px`;
        d.paddingLeft = m, d.paddingRight = m;
      }
      if (p && p[1] > 0 && !s.value) {
        const m = `${p[1] / 2}px`;
        d.paddingTop = m, d.paddingBottom = m;
      }
      return f && (d.flex = re(f), G.value === !1 && !d.minWidth && (d.minWidth = 0)), d;
    });
    return () => {
      var f;
      return x(B("div", C(C({}, u), {}, {
        class: S.value,
        style: [h.value, u.style]
      }), [(f = a.default) === null || f === void 0 ? void 0 : f.call(a)]));
    };
  }
});
export {
  ie as A,
  de as C
};