ant-design-x-vue-next/es/x-card/basic-catalog/components.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as i, createVNode as n, mergeProps as r } from "vue";
import { Typography as f, Button as c, Input as u, Checkbox as g, Flex as d, Divider as y, Image as m } from "ant-design-vue";
function o(e) {
  var t;
  return (e == null ? void 0 : e.name) || ((t = e == null ? void 0 : e.event) == null ? void 0 : t.name) || "click";
}
const p = /* @__PURE__ */ i({
  name: "A2UIText",
  props: {
    text: {
      type: String,
      default: ""
    },
    variant: {
      type: String,
      default: void 0
    }
  },
  setup(e, {
    slots: t
  }) {
    return () => {
      var a;
      return n("div", {
        class: "ant-x-card-basic-text",
        style: {
          marginBottom: t.default ? 8 : 0
        }
      }, [n(f.Paragraph, null, {
        default: () => [e.text]
      }), (a = t.default) == null ? void 0 : a.call(t)]);
    };
  }
}), h = /* @__PURE__ */ i({
  name: "A2UIButton",
  props: {
    text: {
      type: String,
      default: ""
    },
    variant: {
      type: String,
      default: "primary"
    },
    action: {
      type: Object,
      default: void 0
    },
    onAction: {
      type: Function,
      default: void 0
    }
  },
  setup(e, {
    slots: t
  }) {
    return () => n(c, {
      class: "ant-x-card-basic-button",
      type: e.variant || "primary",
      onClick: () => {
        var a;
        return (a = e.onAction) == null ? void 0 : a.call(e, o(e.action), {});
      }
    }, {
      default: () => {
        var a;
        return [((a = t.default) == null ? void 0 : a.call(t)) || e.text];
      }
    });
  }
}), b = /* @__PURE__ */ i({
  name: "A2UITextField",
  props: {
    label: {
      type: String,
      default: ""
    },
    value: {
      type: [String, Number],
      default: void 0
    },
    placeholder: {
      type: String,
      default: void 0
    },
    variant: {
      type: String,
      default: void 0
    },
    onDataChange: {
      type: Function,
      default: void 0
    },
    /** Injected by XCard.Card when value was a JSON pointer */
    valuePath: {
      type: String,
      default: void 0
    }
  },
  setup(e) {
    return () => {
      const a = e.variant === "longText" || e.variant === "textarea" ? u.TextArea : u;
      return n("div", {
        class: "ant-x-card-basic-textfield",
        style: {
          marginBottom: 12
        }
      }, [e.label ? n("div", {
        style: {
          marginBottom: 4,
          fontSize: 12,
          color: "rgba(0,0,0,0.65)"
        }
      }, [e.label]) : null, n(a, {
        value: e.value,
        placeholder: e.placeholder,
        "onUpdate:value": (l) => {
          e.onDataChange && e.valuePath && e.onDataChange(e.valuePath, l);
        }
      }, null)]);
    };
  }
}), A = /* @__PURE__ */ i({
  name: "A2UICheckBox",
  props: {
    label: {
      type: String,
      default: ""
    },
    value: {
      type: Boolean,
      default: !1
    },
    onDataChange: {
      type: Function,
      default: void 0
    },
    valuePath: {
      type: String,
      default: void 0
    }
  },
  setup(e) {
    return () => n(g, {
      class: "ant-x-card-basic-checkbox",
      checked: !!e.value,
      "onUpdate:checked": (t) => {
        e.onDataChange && e.valuePath && e.onDataChange(e.valuePath, t);
      }
    }, {
      default: () => [e.label]
    });
  }
}), I = /* @__PURE__ */ i({
  name: "A2UIColumn",
  props: {
    justify: {
      type: String,
      default: void 0
    },
    align: {
      type: String,
      default: void 0
    }
  },
  setup(e, {
    slots: t
  }) {
    return () => n(d, {
      class: "ant-x-card-basic-column",
      vertical: !0,
      gap: "small",
      justify: e.justify,
      align: e.align
    }, {
      default: () => {
        var a;
        return [(a = t.default) == null ? void 0 : a.call(t)];
      }
    });
  }
}), S = /* @__PURE__ */ i({
  name: "A2UIRow",
  props: {
    justify: {
      type: String,
      default: void 0
    },
    align: {
      type: String,
      default: void 0
    }
  },
  setup(e, {
    slots: t
  }) {
    return () => n(d, {
      class: "ant-x-card-basic-row",
      gap: "small",
      justify: e.justify,
      align: e.align,
      wrap: "wrap"
    }, {
      default: () => {
        var a;
        return [(a = t.default) == null ? void 0 : a.call(t)];
      }
    });
  }
}), U = /* @__PURE__ */ i({
  name: "A2UIDivider",
  props: {
    axis: {
      type: String,
      default: "horizontal"
    }
  },
  setup(e) {
    return () => n(y, {
      class: "ant-x-card-basic-divider",
      type: e.axis === "vertical" ? "vertical" : "horizontal",
      style: {
        margin: "8px 0"
      }
    }, null);
  }
}), C = /* @__PURE__ */ i({
  name: "A2UIImage",
  props: {
    url: {
      type: String,
      default: ""
    },
    description: {
      type: String,
      default: void 0
    },
    fit: {
      type: String,
      default: "cover"
    }
  },
  setup(e) {
    return () => n(m, r({
      class: "ant-x-card-basic-image",
      src: e.url,
      wrapperStyle: {
        maxWidth: "100%",
        objectFit: e.fit
      }
    }, e.description ? {
      title: e.description
    } : {}), null);
  }
}), s = /* @__PURE__ */ i({
  name: "A2UICard",
  setup(e, {
    slots: t
  }) {
    return () => {
      var a;
      return n("div", {
        class: "ant-x-card-basic-card",
        style: {
          border: "1px solid #f0f0f0",
          borderRadius: 8,
          padding: 12,
          background: "#fff"
        }
      }, [(a = t.default) == null ? void 0 : a.call(t)]);
    };
  }
});
export {
  h as A2UIButton,
  s as A2UICard,
  A as A2UICheckBox,
  I as A2UIColumn,
  U as A2UIDivider,
  C as A2UIImage,
  S as A2UIRow,
  p as A2UIText,
  b as A2UITextField
};