index.es.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. /*!
  2. * FormCreate 低代码表单渲染器
  3. * @form-create/component-elm-group v2.6.3
  4. * (c) 2018-2024 xaboy
  5. * Github https://github.com/xaboy/form-create
  6. * Site https://form-create.com/
  7. * Released under the MIT License.
  8. */
  9. (function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode('._fc-group{display:flex;min-height:42px;justify-content:center;flex-direction:column}._fc-group-disabled ._fc-group-btn,._fc-group-disabled ._fc-group-add{cursor:not-allowed}._fc-group-handle{display:flex;flex-direction:row;position:absolute;bottom:-15px;right:30px;border-radius:15px;border:1px dashed #d9d9d9;padding:3px 8px;background-color:#fff}._fc-group-btn{cursor:pointer}._fc-group-idx{position:absolute;bottom:-15px;left:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#eee;border-radius:15px;font-weight:700}._fc-group-handle ._fc-group-btn+._fc-group-btn{margin-left:7px}._fc-group-container{position:relative;display:flex;flex-direction:column;border:1px dashed #d9d9d9;padding:20px 20px 25px;margin:5px 5px 25px;border-radius:5px}._fc-group-arrow{position:relative;width:20px;height:20px}._fc-group-arrow:before{content:"";position:absolute;top:8px;left:5px;width:9px;height:9px;border-left:2px solid #999;border-top:2px solid #999}._fc-group-arrow:before{transform:rotate(45deg)}._fc-group-arrow._fc-group-down{transform:rotate(180deg)}._fc-group-plus-minus{width:20px;height:20px;position:relative;cursor:pointer}._fc-group-plus-minus:before,._fc-group-plus-minus:after{content:"";position:absolute;top:50%;left:50%;width:60%;height:2px;background-color:#409eff;transform:translate(-50%,-50%)}._fc-group-plus-minus:before{transform:translate(-50%,-50%) rotate(90deg)}._fc-group-plus-minus._fc-group-minus:before{display:none}._fc-group-plus-minus._fc-group-minus:after{background-color:#f56c6c}._fc-group-add{cursor:pointer;width:25px;height:25px;border:1px solid rgb(64 158 255 / 50%);border-radius:15px}._fc-group-add._fc-group-plus-minus:before,._fc-group-add._fc-group-plus-minus:after{width:50%}')),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
  10. var O = Object.defineProperty;
  11. var g = Object.getOwnPropertySymbols;
  12. var R = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
  13. var _ = (e, t, r) => t in e ? O(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, d = (e, t) => {
  14. for (var r in t || (t = {}))
  15. R.call(t, r) && _(e, r, t[r]);
  16. if (g)
  17. for (var r of g(t))
  18. j.call(t, r) && _(e, r, t[r]);
  19. return e;
  20. };
  21. import A from "vue";
  22. function V(e) {
  23. return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
  24. }
  25. function p() {
  26. return p = Object.assign ? Object.assign.bind() : function(e) {
  27. for (var t, r = 1; r < arguments.length; r++) for (var s in t = arguments[r], t) Object.prototype.hasOwnProperty.call(t, s) && (e[s] = t[s]);
  28. return e;
  29. }, p.apply(this, arguments);
  30. }
  31. var S = ["attrs", "props", "domProps"], B = ["class", "style", "directives"], D = ["on", "nativeOn"], E = function(e) {
  32. return e.reduce(function(t, r) {
  33. for (var s in r) if (!t[s]) t[s] = r[s];
  34. else if (S.indexOf(s) !== -1) t[s] = p({}, t[s], r[s]);
  35. else if (B.indexOf(s) !== -1) {
  36. var i = t[s] instanceof Array ? t[s] : [t[s]], n = r[s] instanceof Array ? r[s] : [r[s]];
  37. t[s] = [].concat(i, n);
  38. } else if (D.indexOf(s) !== -1)
  39. for (var o in r[s]) if (t[s][o]) {
  40. var l = t[s][o] instanceof Array ? t[s][o] : [t[s][o]], f = r[s][o] instanceof Array ? r[s][o] : [r[s][o]];
  41. t[s][o] = [].concat(l, f);
  42. } else t[s][o] = r[s][o];
  43. else if (s === "hook") for (var u in r[s]) t[s][u] = t[s][u] ? I(t[s][u], r[s][u]) : r[s][u];
  44. else t[s] = r[s];
  45. return t;
  46. }, {});
  47. }, I = function(e, t) {
  48. return function() {
  49. e && e.apply(this, arguments), t && t.apply(this, arguments);
  50. };
  51. }, b = E;
  52. const k = /* @__PURE__ */ V(b), a = {
  53. type(e, t) {
  54. return Object.prototype.toString.call(e) === "[object " + t + "]";
  55. },
  56. Undef(e) {
  57. return e == null;
  58. },
  59. Element(e) {
  60. return typeof e == "object" && e !== null && e.nodeType === 1 && !a.Object(e);
  61. },
  62. trueArray(e) {
  63. return Array.isArray(e) && e.length > 0;
  64. },
  65. Function(e) {
  66. const t = this.getType(e);
  67. return t === "Function" || t === "AsyncFunction";
  68. },
  69. getType(e) {
  70. const t = Object.prototype.toString.call(e);
  71. return /^\[object (.*)\]$/.exec(t)[1];
  72. },
  73. empty(e) {
  74. return e == null || Array.isArray(e) && Array.isArray(e) && !e.length ? !0 : typeof e == "string" && !e;
  75. }
  76. };
  77. ["Date", "Object", "String", "Boolean", "Array", "Number"].forEach((e) => {
  78. a[e] = function(t) {
  79. return a.type(t, e);
  80. };
  81. });
  82. function w(e, t) {
  83. return {}.hasOwnProperty.call(e, t);
  84. }
  85. function h(e, t, r) {
  86. A.set(e, t, r);
  87. }
  88. function m(e, t = {}, r) {
  89. let s = !1;
  90. for (let i in t)
  91. if (Object.prototype.hasOwnProperty.call(t, i)) {
  92. let n = t[i];
  93. if ((s = Array.isArray(n)) || a.Object(n)) {
  94. let o = e[i] === void 0;
  95. if (s)
  96. s = !1, o && h(e, i, []);
  97. else if (n._clone && r !== void 0) {
  98. h(e, i, n._clone());
  99. continue;
  100. } else
  101. o && h(e, i, {});
  102. e[i] = m(e[i], n, r);
  103. } else
  104. h(e, i, n), a.Undef(n) || (a.Undef(n.__json) || (e[i].__json = n.__json), a.Undef(n.__origin) || (e[i].__origin = n.__origin));
  105. }
  106. return e;
  107. }
  108. function v(e) {
  109. return m({}, { value: e }).value;
  110. }
  111. const x = Object.assign || function(e) {
  112. for (let t, r = 1; r < arguments.length; r++)
  113. for (let s in t = arguments[r], t)
  114. Object.prototype.hasOwnProperty.call(t, s) && h(e, s, t[s]);
  115. return e;
  116. };
  117. function F() {
  118. return x.apply(this, arguments);
  119. }
  120. const P = "fcGroup", M = {
  121. name: P,
  122. props: {
  123. field: String,
  124. rule: [Array, Object],
  125. rules: Array,
  126. expand: Number,
  127. options: Object,
  128. formCreateInject: {
  129. type: Object,
  130. required: !0
  131. },
  132. button: {
  133. type: Boolean,
  134. default: !0
  135. },
  136. max: {
  137. type: Number,
  138. default: 0
  139. },
  140. min: {
  141. type: Number,
  142. default: 0
  143. },
  144. value: {
  145. type: Array,
  146. default: () => []
  147. },
  148. sortBtn: {
  149. type: Boolean,
  150. default: !0
  151. },
  152. defaultValue: Object,
  153. disabled: {
  154. type: Boolean,
  155. default: !1
  156. },
  157. syncDisabled: {
  158. type: Boolean,
  159. default: !0
  160. },
  161. onBeforeRemove: {
  162. type: Function,
  163. default: () => {
  164. }
  165. },
  166. onBeforeAdd: {
  167. type: Function,
  168. default: () => {
  169. }
  170. },
  171. parse: Function
  172. },
  173. data() {
  174. return {
  175. len: 0,
  176. cacheRule: {},
  177. cacheValue: {},
  178. sort: [],
  179. type: void 0
  180. };
  181. },
  182. computed: {
  183. formRule() {
  184. return this.rules ? this.rules : this.rule ? Array.isArray(this.rule) ? this.rule : [this.rule] : [];
  185. }
  186. },
  187. watch: {
  188. cacheRule: {
  189. handler(e) {
  190. this.sort = Object.keys(e);
  191. },
  192. immediate: !0
  193. },
  194. formRule: {
  195. handler(e, t) {
  196. Object.keys(this.cacheRule).forEach((r) => {
  197. const s = this.cacheRule[r];
  198. if (s.$f) {
  199. const i = s.$f.formData();
  200. if (e === t)
  201. s.$f.deferSyncValue(() => {
  202. m(s.rule, e), s.$f.setValue(i);
  203. }, !0);
  204. else {
  205. const n = s.$f.formData();
  206. s.$f.once("reloading", () => {
  207. s.$f.setValue(n);
  208. }), s.rule = v(e);
  209. }
  210. }
  211. });
  212. },
  213. deep: !0
  214. },
  215. expand(e) {
  216. let t = e - this.value.length;
  217. t > 0 && this.expandRule(t);
  218. },
  219. value(e, t) {
  220. e = e || [];
  221. let r = this.sort, s = r.length, i = s - e.length;
  222. if (i < 0) {
  223. for (let n = i; n < 0; n++)
  224. this.addRule(e.length + n);
  225. this.sort = Object.keys(this.cacheRule);
  226. for (let n = 0; n < s; n++)
  227. this.setValue(r[n], e[n]);
  228. } else {
  229. if (i > 0) {
  230. for (let n = 0; n < i; n++)
  231. this.removeRule(r[s - n - 1]);
  232. this.sort = Object.keys(this.cacheRule);
  233. }
  234. e.forEach((n, o) => {
  235. this.setValue(r[o], e[o]);
  236. });
  237. }
  238. }
  239. },
  240. methods: {
  241. _value(e) {
  242. return e && w(e, this.field) ? e[this.field] : e;
  243. },
  244. cache(e, t) {
  245. this.cacheValue[e] = JSON.stringify(t);
  246. },
  247. input(e) {
  248. this.$emit("input", e), this.$emit("change", e);
  249. },
  250. formData(e, t) {
  251. const r = this.cacheRule, s = this.sort;
  252. if (s.filter((n) => r[n].$f).length !== s.length)
  253. return;
  254. const i = s.map((n) => {
  255. const o = e === n ? t : d({}, this.cacheRule[n].$f.form), l = this.field ? o[this.field] || null : o;
  256. return this.cache(n, l), l;
  257. });
  258. this.input(i);
  259. },
  260. setValue(e, t) {
  261. const r = this.field, s = this.cacheRule[e].$f;
  262. r && (t = {
  263. [r]: this._value(t)
  264. }), this.cacheValue[e] !== JSON.stringify(r ? t[r] : t) && (this.cache(e, t), s && s.coverValue(t || {}));
  265. },
  266. addRule(e, t) {
  267. const r = this.formCreateInject.form.copyRules(this.formRule), s = this.options ? d({}, this.options) : {
  268. submitBtn: !1,
  269. resetBtn: !1
  270. };
  271. if (this.defaultValue) {
  272. s.formData || (s.formData = {});
  273. const i = v(this.defaultValue);
  274. F(s.formData, this.field ? {
  275. [this.field]: i
  276. } : i);
  277. }
  278. this.parse && this.parse({
  279. rule: r,
  280. options: s,
  281. index: this.sort.length
  282. }), this.$set(this.cacheRule, ++this.len, {
  283. rule: r,
  284. options: s
  285. }), t && this.$nextTick(() => this.$emit("add", r, Object.keys(this.cacheRule).length - 1));
  286. },
  287. add$f(e, t, r) {
  288. this.cacheRule[t].$f = r, this.$nextTick(() => {
  289. this.$emit("itemMounted", r, Object.keys(this.cacheRule).indexOf(t));
  290. });
  291. },
  292. removeRule(e, t) {
  293. const r = Object.keys(this.cacheRule).indexOf(e);
  294. this.$delete(this.cacheRule, e), this.$delete(this.cacheValue, e), t && this.$nextTick(() => this.$emit("remove", r));
  295. },
  296. add(e) {
  297. this.disabled || this.onBeforeAdd(this.value) === !1 || this.addRule(e, !0);
  298. },
  299. del(e, t) {
  300. if (this.disabled || this.onBeforeRemove(this.value, e) === !1)
  301. return;
  302. this.removeRule(t, !0);
  303. const r = [...this.value];
  304. r.splice(e, 1), this.input(r);
  305. },
  306. addIcon(e) {
  307. const t = this.$createElement;
  308. return t("div", {
  309. class: "_fc-group-btn _fc-group-plus-minus",
  310. on: {
  311. click: this.add
  312. }
  313. });
  314. },
  315. delIcon(e, t) {
  316. const r = this.$createElement;
  317. return r("div", {
  318. class: "_fc-group-btn _fc-group-plus-minus _fc-group-minus",
  319. on: {
  320. click: () => this.del(e, t)
  321. }
  322. });
  323. },
  324. sortUpIcon(e) {
  325. const t = this.$createElement;
  326. return t("div", {
  327. class: "_fc-group-btn _fc-group-arrow _fc-group-up",
  328. on: {
  329. click: () => this.changeSort(e, -1)
  330. }
  331. });
  332. },
  333. sortDownIcon(e) {
  334. const t = this.$createElement;
  335. return t("div", {
  336. class: "_fc-group-btn _fc-group-arrow _fc-group-down",
  337. on: {
  338. click: () => this.changeSort(e, 1)
  339. }
  340. });
  341. },
  342. changeSort(e, t) {
  343. const r = this.sort[e];
  344. this.$set(this.sort, e, this.sort[e + t]), this.sort[e + t] = r, this.formData(0);
  345. },
  346. makeIcon(e, t, r) {
  347. if (this.$scopedSlots.button)
  348. return this.$scopedSlots.button({
  349. total: e,
  350. index: t,
  351. vm: this,
  352. key: r,
  353. del: () => this.del(t, r),
  354. add: this.add
  355. });
  356. const s = [];
  357. return (!this.max || e < this.max) && e === t + 1 && s.push(this.addIcon(r)), e > this.min && s.push(this.delIcon(t, r)), this.sortBtn && t && s.push(this.sortUpIcon(t)), this.sortBtn && t !== e - 1 && s.push(this.sortDownIcon(t)), s;
  358. },
  359. emitEvent(e, t, r, s) {
  360. this.$emit(e, ...t, this.cacheRule[s].$f, r);
  361. },
  362. expandRule(e) {
  363. for (let t = 0; t < e; t++)
  364. this.value.push(this.field ? null : {});
  365. }
  366. },
  367. created() {
  368. this.type = this.formCreateInject.form.$form();
  369. const e = (this.expand || 0) - this.value.length;
  370. e > 0 && this.expandRule(e);
  371. for (let t = 0; t < this.value.length; t++)
  372. this.addRule(t);
  373. },
  374. render() {
  375. const e = arguments[0], t = this.sort, r = this.button, s = this.type, i = this.disabled, n = t.length === 0 ? this.$scopedSlots.default ? this.$scopedSlots.default({
  376. vm: this,
  377. add: this.add
  378. }) : e("div", {
  379. key: "a_def",
  380. class: "_fc-group-plus-minus _fc-group-add",
  381. on: {
  382. click: this.add
  383. }
  384. }) : t.map((o, l) => {
  385. const {
  386. rule: f,
  387. options: u
  388. } = this.cacheRule[o], y = r && !i ? this.makeIcon(t.length, l, o) : [];
  389. return e("div", {
  390. class: "_fc-group-container",
  391. key: o
  392. }, [e(s, k([{
  393. key: o
  394. }, {
  395. on: {
  396. "update:value": (c) => this.formData(o, c),
  397. "emit-event": (c, ...$) => this.emitEvent(c, $, l, o),
  398. input: (c) => this.add$f(l, o, c)
  399. }
  400. }, {}, {
  401. props: {
  402. disabled: i,
  403. inFor: !0,
  404. value: this.field ? {
  405. [this.field]: this._value(this.value[l])
  406. } : this.value[l],
  407. rule: f,
  408. option: u,
  409. extendOption: !0
  410. }
  411. }])), e("div", {
  412. class: "_fc-group-idx"
  413. }, [l + 1]), y.length ? e("div", {
  414. class: "_fc-group-handle"
  415. }, [y]) : null]);
  416. });
  417. return e("div", {
  418. key: "con",
  419. class: "_fc-group " + (i ? "_fc-group-disabled" : "")
  420. }, [n]);
  421. }
  422. };
  423. export {
  424. M as default
  425. };