@touchvue/ui 1.0.0-beta.5 → 1.0.0-beta.50

package/lib/packages/components/transfer/src/transfer.vue2.js

@@ -3,6 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+var index$6 = require('../../button/index.js');
+var index$5 = require('../../gap/index.js');
+var index$3 = require('../../input/index.js');
+var index$2 = require('../../padding/index.js');
+var index$1 = require('../../checkbox/index.js');
+var index$4 = require('../../scroll/index.js');
+var index = require('../../../locale/index.js');
 
 const __default__ = vue.defineComponent({
   name: "ToTransfer",
@@ -11,17 +18,18 @@ const __default__ = vue.defineComponent({
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   props: {
+    flex: { type: Boolean, default: false },
     mode: { default: "default" },
-    data: { default: () => "\u9009\u98791,\u9009\u98792,\u9009\u98793" },
-    leftTitle: { default: "\u5F85\u9009" },
-    rightTitle: { default: "\u5DF2\u9009" },
+    data: { default: () => "" },
+    leftTitle: { default: "" },
+    rightTitle: { default: "" },
     modelValue: { default: "" },
     labelText: { default: "label" },
     valueText: { default: "value" },
     height: { default: 16 },
     order: { default: "push" },
     filterable: { type: Boolean, default: true },
-    fillet: { default: "normal" }
+    showDisabled: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
@@ -30,21 +38,24 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const iData = vue.ref([]);
     const dataGlobal = vue.ref(false);
     const dataMap = vue.ref([]);
-    const dataChecked = vue.ref("");
+    const dataChecked = vue.computed(() => {
+      let length = 0;
+      if (props.showDisabled) {
+        length = dataMap.value.filter((item) => item.checked && !item.disabled).length;
+      } else {
+        length = dataMap.value.filter((item) => item.checked).length;
+      }
+      return length;
+    });
     const dataFilterKey = vue.ref("");
-    const iValue = vue.ref("");
+    const iValue = vue.ref(props.modelValue);
     const valueGlobal = vue.ref(false);
     const valueMap = vue.ref([]);
-    const valueChecked = vue.ref("");
+    const valueChecked = vue.computed(() => {
+      return valueMap.value.filter((item) => item.checked).length;
+    });
     const valueFilterKey = vue.ref("");
-    const dataGroup = vue.ref(null);
-    const valueGroup = vue.ref(null);
-    vue.watch(
-      () => dataChecked.value,
-      () => {
-        console.log(dataChecked.value, "=== dataChecked.value ===");
-      }
-    );
+    const stopChange = vue.ref(false);
     vue.watch(
       () => props.data,
       () => {
@@ -57,24 +68,22 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       () => props.modelValue,
       (val) => {
         iValue.value = val || "";
-      },
-      { immediate: true }
+        if (stopChange.value) {
+          return false;
+        }
+        setData();
+      }
     );
-    vue.watch(iValue, (val) => {
-      emit("update:modelValue", val);
-      emit("change", val);
+    vue.onMounted(() => {
+      transData();
       setData();
     });
     const setClass = vue.computed(() => {
       const classes = [];
       if (props.mode)
-        classes.push(`to-transfer-mode-${props.mode}`);
+        classes.push(`mode-${props.mode}`);
       return classes;
     });
-    vue.onMounted(() => {
-      transData();
-      setData();
-    });
     const transData = () => {
       if (typeof props.data === "string") {
         if (props.data) {
@@ -82,7 +91,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           props.data.split(",").map((item) => {
             arr.push({
               [props.labelText]: item,
-              [props.valueText]: item
+              [props.valueText]: item,
+              checked: false
             });
           });
           iData.value = arr;
@@ -90,7 +100,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           iData.value = [];
         }
       } else {
-        iData.value = JSON.parse(JSON.stringify(props.data));
+        let arr = props.data.map((item) => {
+          return { ...item, checked: item.checked || false };
+        });
+        iData.value = JSON.parse(JSON.stringify(arr));
       }
     };
     const setData = () => {
@@ -100,7 +113,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       iData.value.map((item) => {
         if (!valueArr.includes(item[props.valueText])) {
           dataMapArr.push(item);
-        } else if (props.order === "original") {
+        } else {
+          if (props.showDisabled) {
+            dataMapArr.push({ ...item, checked: true, disabled: true });
+          }
+        }
+        if (valueArr.includes(item[props.valueText]) && props.order === "original") {
           valueMapArr.push(item);
         }
       });
@@ -113,13 +131,15 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             valueMapArr.unshift({
               [props.labelText]: iData.value.find((item2) => item2[props.valueText] === item)[props.labelText],
               [props.valueText]: item,
-              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled
+              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled,
+              checked: iData.value.find((item2) => item2[props.valueText] === item).checked
             });
           } else {
             valueMapArr.push({
               [props.labelText]: iData.value.find((item2) => item2[props.valueText] === item)[props.labelText],
               [props.valueText]: item,
-              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled
+              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled,
+              checked: iData.value.find((item2) => item2[props.valueText] === item).checked
             });
           }
         });
@@ -150,36 +170,89 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const add = () => {
-      const valueArr = iValue.value ? iValue.value.split(",") : [];
-      const checkedArr = dataChecked.value.split(",");
-      const arr = [...valueArr, ...checkedArr];
-      clearCheck();
+      if (props.showDisabled) {
+        let arr = dataMap.value.filter((el) => el.checked && !el.disabled).map((item) => {
+          return {
+            ...item,
+            checked: false
+          };
+        });
+        valueMap.value = [...valueMap.value, ...arr];
+        dataMap.value.forEach((item) => {
+          if (item.checked) {
+            item.disabled = true;
+          }
+        });
+      } else {
+        let arr = dataMap.value.filter((el) => el.checked).map((item) => {
+          return {
+            ...item,
+            checked: false
+          };
+        });
+        valueMap.value = [...valueMap.value, ...arr];
+        arr.forEach((el) => {
+          let idx = dataMap.value.findIndex((el2) => el2[props.valueText] === el[props.valueText]);
+          dataMap.value.splice(idx, 1);
+        });
+      }
+      stopChange.value = true;
+      setTimeout(() => {
+        stopChange.value = false;
+      }, 10);
       vue.nextTick(() => {
-        iValue.value = arr.join(",");
+        let val = valueMap.value.map((item) => item[props.valueText]).join(",");
+        emit("update:modelValue", val);
+        emit("change", val);
       });
     };
     const remove = () => {
-      const valueArr = iValue.value.split(",");
-      const checkedArr = valueChecked.value.split(",");
-      const arr = valueArr.filter((item) => !checkedArr.includes(item));
-      clearCheck();
+      let arr = valueMap.value.filter((el) => el.checked).map((item) => {
+        return {
+          ...item,
+          checked: false
+        };
+      });
+      if (props.showDisabled) {
+        arr.forEach((item) => {
+          dataMap.value.forEach((el) => {
+            if (el[props.valueText] === item[props.valueText]) {
+              el.disabled = false;
+              el.checked = false;
+            }
+          });
+        });
+      } else {
+        dataMap.value = [...dataMap.value, ...arr];
+      }
+      arr.forEach((el) => {
+        let idx = valueMap.value.findIndex((el2) => el2[props.valueText] === el[props.valueText]);
+        valueMap.value.splice(idx, 1);
+      });
+      stopChange.value = true;
+      setTimeout(() => {
+        stopChange.value = false;
+      }, 10);
       vue.nextTick(() => {
-        iValue.value = arr.join(",");
+        let val = valueMap.value.map((item) => item[props.valueText]).join(",");
+        emit("update:modelValue", val);
+        emit("change", val);
       });
     };
-    const clearCheck = () => {
-      dataChecked.value = "";
-      valueChecked.value = "";
-      dataGlobal.value = false;
-      valueGlobal.value = false;
-    };
     const selectDataMap = (val, group) => {
-      var _a, _b;
-      const targetGroup = group === "dataGroup" ? dataGroup : valueGroup;
+      const targetGroup = group === "dataGroup" ? dataMap.value : valueMap.value;
       if (val) {
-        (_a = targetGroup.value) == null ? void 0 : _a.all();
+        targetGroup.forEach((item) => {
+          if (!item.disabled) {
+            item.checked = true;
+          }
+        });
       } else {
-        (_b = targetGroup.value) == null ? void 0 : _b.clear();
+        targetGroup.forEach((item) => {
+          if (!item.disabled) {
+            item.checked = false;
+          }
+        });
       }
     };
     const setDataReadonly = (item) => {
@@ -205,203 +278,194 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_to_checkbox = vue.resolveComponent("to-checkbox");
-      const _component_to_input = vue.resolveComponent("to-input");
-      const _component_to_padding = vue.resolveComponent("to-padding");
-      const _component_to_line = vue.resolveComponent("to-line");
-      const _component_to_gap = vue.resolveComponent("to-gap");
-      const _component_to_checkboxes = vue.resolveComponent("to-checkboxes");
-      const _component_to_scroll = vue.resolveComponent("to-scroll");
-      const _component_to_box = vue.resolveComponent("to-box");
-      const _component_to_button = vue.resolveComponent("to-button");
-      const _component_to_grid = vue.resolveComponent("to-grid");
       const _directive_align = vue.resolveDirective("align");
       const _directive_color = vue.resolveDirective("color");
       const _directive_dis = vue.resolveDirective("dis");
-      return vue.openBlock(), vue.createBlock(_component_to_grid, {
-        class: vue.normalizeClass(setClass.value)
-      }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(_component_to_box, {
-            fillet: _ctx.fillet,
-            mode: "line",
-            padding: "0"
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: vue.unref(index.langKey),
+        flex: _ctx.flex ? _ctx.flex : null,
+        class: vue.normalizeClass(["to-transfer", setClass.value])
+      }, [
+        vue.createElementVNode("div", { class: "to-transfer-panel" }, [
+          vue.createElementVNode("span", { class: "to-strong" }, [
+            vue.createVNode(vue.unref(index$1.ToCheckbox), {
+              modelValue: dataGlobal.value,
+              "onUpdate:modelValue": ($event) => dataGlobal.value = $event,
+              label: _ctx.leftTitle || vue.unref(index.t)("to.transfer.pending"),
+              width: "full",
+              onChange: (val) => {
+                selectDataMap(val, "dataGroup");
+              }
+            }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
+          ]),
+          _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToPadding), {
+            key: 0,
+            position: "u"
           }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", { class: "to-strong" }, [
-                vue.createVNode(_component_to_checkbox, {
-                  modelValue: dataGlobal.value,
-                  "onUpdate:modelValue": ($event) => dataGlobal.value = $event,
-                  label: _ctx.leftTitle,
-                  width: "full",
-                  onChange: (val) => {
-                    selectDataMap(val, "dataGroup");
-                  }
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
-              ]),
-              _ctx.filterable ? (vue.openBlock(), vue.createBlock(_component_to_padding, {
-                key: 0,
-                position: "u"
+              vue.createVNode(vue.unref(index$3.ToInput), {
+                modelValue: dataFilterKey.value,
+                "onUpdate:modelValue": ($event) => dataFilterKey.value = $event,
+                clearable: "",
+                width: "full",
+                placeholder: vue.unref(index.t)("to.transfer.placeholder")
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : vue.createCommentVNode("v-if", true),
+          vue.createVNode(vue.unref(index$4.ToScroll), { height: _ctx.height }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(index$5.ToGap), { value: 0.5 }),
+              dataMap.value && dataMap.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", { key: 0 }, [
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(dataMap.value, (item, index) => {
+                    return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$1.ToCheckbox), {
+                      key: index,
+                      modelValue: item.checked,
+                      "onUpdate:modelValue": ($event) => item.checked = $event,
+                      disabled: setDataReadonly(item),
+                      width: "full",
+                      label: item[_ctx.labelText]
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "label"])), [
+                      [vue.vShow, showData(item)]
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.ToPadding), {
+                key: 1,
+                value: "1.5"
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_component_to_input, {
-                    modelValue: dataFilterKey.value,
-                    "onUpdate:modelValue": ($event) => dataFilterKey.value = $event,
-                    clearable: "",
-                    width: "full",
-                    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
-                    fillet: _ctx.fillet
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "fillet"])
-                ]),
-                _: 1
-              })) : vue.createCommentVNode("", true),
-              vue.createVNode(_component_to_line, { color: "lightGray" }),
-              vue.createVNode(_component_to_scroll, { height: _ctx.height }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_to_gap, { value: 0.5 }),
-                  dataMap.value && dataMap.value.length > 0 ? (vue.openBlock(), vue.createBlock(_component_to_checkboxes, {
-                    key: 0,
-                    id: "dataGroupCheckboxes",
-                    ref_key: "dataGroup",
-                    ref: dataGroup,
-                    modelValue: dataChecked.value,
-                    "onUpdate:modelValue": ($event) => dataChecked.value = $event
-                  }, {
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dataMap.value, (item, index) => {
-                        return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_to_checkbox, {
-                          key: index,
-                          disabled: setDataReadonly(item),
-                          width: "full",
-                          value: item[_ctx.valueText],
-                          label: item[_ctx.labelText]
-                        }, null, 8, ["disabled", "value", "label"])), [
-                          [vue.vShow, showData(item)]
-                        ]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "onUpdate:modelValue"])) : vue.withDirectives((vue.openBlock(), vue.createBlock(_component_to_padding, {
-                    key: 1,
-                    value: "1.5"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("\u65E0\u6570\u636E")
-                    ]),
-                    _: 1
-                  })), [
-                    [_directive_align, "center"],
-                    [_directive_color, "info"]
-                  ]),
-                  vue.createVNode(_component_to_gap, { value: 0.5 })
+                  vue.createTextVNode(
+                    vue.toDisplayString(vue.unref(index.t)("to.transfer.noData")),
+                    1
+                    /* TEXT */
+                  )
                 ]),
                 _: 1
-              }, 8, ["height"])
+                /* STABLE */
+              })), [
+                [_directive_align, "center"],
+                [_directive_color, "info"]
+              ]),
+              vue.createVNode(vue.unref(index$5.ToGap), { value: 0.5 })
             ]),
             _: 1
-          }, 8, ["fillet"]),
-          vue.createElementVNode("div", null, [
-            vue.withDirectives(vue.createVNode(_component_to_button, {
+            /* STABLE */
+          }, 8, ["height"])
+        ]),
+        vue.createVNode(vue.unref(index$5.ToGap), { inline: "" }),
+        vue.createElementVNode("div", { class: "to-transfer-btns" }, [
+          vue.withDirectives(vue.createVNode(
+            vue.unref(index$6.ToButton),
+            {
               icon: "right",
               mode: "none",
               color: "primary",
-              fillet: "pill",
               onClick: add
-            }, null, 512), [
-              [_directive_dis, !dataChecked.value]
-            ]),
-            vue.createVNode(_component_to_gap, { value: 0.5 }),
-            vue.withDirectives(vue.createVNode(_component_to_button, {
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          ), [
+            [_directive_dis, dataChecked.value < 1]
+          ]),
+          vue.createVNode(vue.unref(index$5.ToGap), { value: 0.5 }),
+          vue.withDirectives(vue.createVNode(
+            vue.unref(index$6.ToButton),
+            {
               icon: "left",
               mode: "none",
               color: "primary",
-              fillet: "pill",
               onClick: remove
-            }, null, 512), [
-              [_directive_dis, !valueChecked.value]
-            ])
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          ), [
+            [_directive_dis, valueChecked.value < 1]
+          ])
+        ]),
+        vue.createVNode(vue.unref(index$5.ToGap), { inline: "" }),
+        vue.createElementVNode("div", { class: "to-transfer-panel" }, [
+          vue.createElementVNode("span", { class: "to-strong" }, [
+            vue.createVNode(vue.unref(index$1.ToCheckbox), {
+              modelValue: valueGlobal.value,
+              "onUpdate:modelValue": ($event) => valueGlobal.value = $event,
+              label: _ctx.rightTitle || vue.unref(index.t)("to.transfer.selected"),
+              width: "full",
+              onChange: (val) => {
+                selectDataMap(val, "valueGroup");
+              }
+            }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
           ]),
-          vue.createVNode(_component_to_box, {
-            fillet: _ctx.fillet,
-            mode: "line",
-            padding: "0"
+          _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.ToPadding), {
+            key: 0,
+            position: "u"
           }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", { class: "to-strong" }, [
-                vue.createVNode(_component_to_checkbox, {
-                  modelValue: valueGlobal.value,
-                  "onUpdate:modelValue": ($event) => valueGlobal.value = $event,
-                  label: _ctx.rightTitle,
-                  width: "full",
-                  onChange: (val) => {
-                    selectDataMap(val, "valueGroup");
-                  }
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
-              ]),
-              _ctx.filterable ? (vue.openBlock(), vue.createBlock(_component_to_padding, {
-                key: 0,
-                position: "u"
+              vue.createVNode(vue.unref(index$3.ToInput), {
+                modelValue: valueFilterKey.value,
+                "onUpdate:modelValue": ($event) => valueFilterKey.value = $event,
+                clearable: "",
+                width: "full",
+                placeholder: vue.unref(index.t)("to.transfer.placeholder")
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : vue.createCommentVNode("v-if", true),
+          vue.createVNode(vue.unref(index$4.ToScroll), { height: _ctx.height }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(index$5.ToGap), { value: 0.5 }),
+              valueMap.value && valueMap.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", { key: 0 }, [
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(valueMap.value, (item, index) => {
+                    return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$1.ToCheckbox), {
+                      key: index,
+                      modelValue: item.checked,
+                      "onUpdate:modelValue": ($event) => item.checked = $event,
+                      disabled: setValueReadonly(item),
+                      width: "full",
+                      label: item[_ctx.labelText]
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "label"])), [
+                      [vue.vShow, showValue(item)]
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])) : vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.ToPadding), {
+                key: 1,
+                value: "1.5"
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_component_to_input, {
-                    modelValue: valueFilterKey.value,
-                    "onUpdate:modelValue": ($event) => valueFilterKey.value = $event,
-                    clearable: "",
-                    width: "full",
-                    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
-                    fillet: _ctx.fillet
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "fillet"])
-                ]),
-                _: 1
-              })) : vue.createCommentVNode("", true),
-              vue.createVNode(_component_to_line, { color: "lightGray" }),
-              vue.createVNode(_component_to_scroll, { height: _ctx.height }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_to_gap, { value: 0.5 }),
-                  valueMap.value && valueMap.value.length > 0 ? (vue.openBlock(), vue.createBlock(_component_to_checkboxes, {
-                    key: 0,
-                    id: "valueGroupCheckboxes",
-                    ref_key: "valueGroup",
-                    ref: valueGroup,
-                    modelValue: valueChecked.value,
-                    "onUpdate:modelValue": ($event) => valueChecked.value = $event
-                  }, {
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(valueMap.value, (item, index) => {
-                        return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_to_checkbox, {
-                          key: index,
-                          disabled: setValueReadonly(item),
-                          width: "full",
-                          value: item[_ctx.valueText],
-                          label: item[_ctx.labelText]
-                        }, null, 8, ["disabled", "value", "label"])), [
-                          [vue.vShow, showValue(item)]
-                        ]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "onUpdate:modelValue"])) : vue.withDirectives((vue.openBlock(), vue.createBlock(_component_to_padding, {
-                    key: 1,
-                    value: "1.5"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("\u65E0\u6570\u636E")
-                    ]),
-                    _: 1
-                  })), [
-                    [_directive_align, "center"],
-                    [_directive_color, "info"]
-                  ]),
-                  vue.createVNode(_component_to_gap, { value: 0.5 })
+                  vue.createTextVNode(
+                    vue.toDisplayString(vue.unref(index.t)("to.transfer.noData")),
+                    1
+                    /* TEXT */
+                  )
                 ]),
                 _: 1
-              }, 8, ["height"])
+                /* STABLE */
+              })), [
+                [_directive_align, "center"],
+                [_directive_color, "info"]
+              ]),
+              vue.createVNode(vue.unref(index$5.ToGap), { value: 0.5 })
             ]),
             _: 1
-          }, 8, ["fillet"])
-        ]),
-        _: 1
-      }, 8, ["class"]);
+            /* STABLE */
+          }, 8, ["height"])
+        ])
+      ], 10, ["flex"]);
     };
   }
 });