epic-designer-cjh/dist/Row-0b9fdcc9.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as c, provide as g, toRef as m, h as d } from "vue";
import { c as p, a as f, b as y, e as n, u as h, g as w } from "./use-rtl-d05cb593.js";
import { u as x } from "./use-style-b9e822e4.js";
import { u as o } from "./use-memo-01b53d71.js";
import { b$ as b } from "./index-97ce4605.js";
import { f as l } from "./format-length-59d2d3ae.js";
const R = Array.apply(null, {
  length: 24
}).map((s, e) => {
  const t = e + 1, r = `calc(100% / 24 * ${t})`;
  return [n(`${t}-span`, {
    width: r
  }), n(`${t}-offset`, {
    marginLeft: r
  }), n(`${t}-push`, {
    left: r
  }), n(`${t}-pull`, {
    right: r
  })];
}), $ = p([f("row", {
  width: "100%",
  display: "flex",
  flexWrap: "wrap"
}), f("col", {
  verticalAlign: "top",
  boxSizing: "border-box",
  display: "inline-block",
  position: "relative",
  zIndex: "auto"
}, [y("box", {
  position: "relative",
  zIndex: "auto",
  width: "100%",
  height: "100%"
}), R])]), v = b("n-row"), C = {
  gutter: {
    type: [Array, Number, String],
    default: 0
  },
  alignItems: String,
  justifyContent: String
}, E = c({
  name: "Row",
  props: C,
  setup(s) {
    const { mergedClsPrefixRef: e, mergedRtlRef: t } = h(s);
    x("-legacy-grid", $, e);
    const r = w("Row", t, e), u = o(() => {
      const { gutter: i } = s;
      return Array.isArray(i) && i[1] || 0;
    }), a = o(() => {
      const { gutter: i } = s;
      return Array.isArray(i) ? i[0] : Number(i);
    });
    return g(v, {
      mergedClsPrefixRef: e,
      gutterRef: m(s, "gutter"),
      verticalGutterRef: u,
      horizontalGutterRef: a
    }), {
      mergedClsPrefix: e,
      rtlEnabled: r,
      styleMargin: o(() => `-${l(u.value, {
        c: 0.5
      })} -${l(a.value, { c: 0.5 })}`),
      styleWidth: o(() => `calc(100% + ${l(a.value)})`)
    };
  },
  render() {
    return d("div", { class: [
      `${this.mergedClsPrefix}-row`,
      this.rtlEnabled && `${this.mergedClsPrefix}-row--rtl`
    ], style: {
      margin: this.styleMargin,
      width: this.styleWidth,
      alignItems: this.alignItems,
      justifyContent: this.justifyContent
    } }, this.$slots);
  }
});
export {
  E as N,
  v as r
};