hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/lib/components/appForm/cpns/extraItem.vue.js

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var appFormItem = require('./appFormItem.vue.js');
+var useLocale = require('../../../hooks/useLocale.js');
+var is = require('../../../utils/is.js');
+
+const _sfc_main = {
+  __name: "extraItem",
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    column: {
+      type: Object,
+      default: () => ({})
+    },
+    columnNum: {
+      type: Number,
+      default: 1
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useLocale.useLocale();
+    const containerRef = vue.useTemplateRef("containerRef");
+    const containerHeight = vue.ref(0);
+    const isExpand = vue.ref(false);
+    const isExpandHover = vue.ref(null);
+    function onExpandHandler(column) {
+      containerHeight.value = containerRef.value.clientHeight;
+      isExpand.value = !isExpand.value;
+    }
+    function onExpandMouseenter(column) {
+      isExpandHover.value = true;
+    }
+    function onExpandMouseleave(column) {
+      isExpandHover.value = false;
+    }
+    const containerStyle = vue.computed(() => {
+      const columnNum = is.isNumber(props.column.columnNum) && props.column.columnNum > 0 ? props.column.columnNum : is.isNumber(props.columnNum) && props.columnNum > 0 ? props.columnNum || 1 : 1;
+      return {
+        gridTemplateColumns: `repeat(${columnNum}, minmax(0, 1fr))`
+      };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", { class: "pt-6" }, [
+        vue.createElementVNode("div", { class: "flex items-center justify-center text-xs relative" }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["app-form-extra", { expand: isExpand.value }]),
+            onClick: ($event) => onExpandHandler(__props.column),
+            onMouseenter: ($event) => onExpandMouseenter(__props.column),
+            onMouseleave: ($event) => onExpandMouseleave(__props.column)
+          }, [
+            vue.createVNode(vue.unref(elementPlus.ElIcon), {
+              size: "8",
+              class: "app-form-extra-arrow"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.DArrowRight))
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            vue.createElementVNode(
+              "span",
+              { class: "ml-1.5" },
+              vue.toDisplayString(isExpandHover.value ? vue.unref(t)("form.additionalInformationHoverTip") : vue.unref(t)("form.additionalInformationTip")),
+              1
+              /* TEXT */
+            )
+          ], 42, ["onClick", "onMouseenter", "onMouseleave"]),
+          vue.createElementVNode("div", { class: "app-form-extra-line" })
+        ]),
+        vue.createElementVNode(
+          "div",
+          {
+            class: "mt-3 overflow-hidden transition-all",
+            style: vue.normalizeStyle({ height: isExpand.value ? `${containerHeight.value || 0}px` : "0px" })
+          },
+          [
+            vue.createElementVNode(
+              "div",
+              {
+                ref_key: "containerRef",
+                ref: containerRef,
+                class: "grid gap-x-6",
+                style: vue.normalizeStyle(containerStyle.value)
+              },
+              [
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(__props.column.children, (item, index) => {
+                    return vue.openBlock(), vue.createBlock(appFormItem.default, {
+                      key: index,
+                      model: __props.model,
+                      column: item,
+                      loading: __props.loading,
+                      readonly: __props.readonly
+                    }, vue.createSlots({
+                      _: 2
+                      /* DYNAMIC */
+                    }, [
+                      vue.renderList(_ctx.$slots, (_, slotName) => {
+                        return {
+                          name: slotName,
+                          fn: vue.withCtx((scope) => [
+                            vue.renderSlot(_ctx.$slots, slotName, vue.mergeProps({ ref_for: true }, scope))
+                          ])
+                        };
+                      })
+                    ]), 1032, ["model", "column", "loading", "readonly"]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ],
+              4
+              /* STYLE */
+            )
+          ],
+          4
+          /* STYLE */
+        )
+      ]);
+    };
+  }
+};
+
+exports.default = _sfc_main;

package/lib/components/appForm/js/index.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var vue = require('vue');
-var is = require('../../../utils/is.js');
 var handler = require('../../../utils/handler.js');
+var is = require('../../../utils/is.js');
+var useLocale = require('../../../hooks/useLocale.js');
 
 function columnItemStyle(props, column) {
   const style = {};
@@ -10,6 +11,14 @@ function columnItemStyle(props, column) {
   if (is.isNumber(span) && span > 1) {
     span = span >= props.columnNum ? props.columnNum : span;
     style["grid-column"] = `span ${span}`;
+  } else {
+    switch (column.type) {
+      case "title":
+      case "extra":
+      case "array":
+        style["grid-column"] = `span ${props.columnNum}`;
+        break;
+    }
   }
   return style;
 }
@@ -20,7 +29,6 @@ function columnShowHandler(props, column) {
   return true;
 }
 function isRequired(props, column) {
-  var _a;
   let { readonly, field, rules } = column;
   if (props.readonly || readonly) {
     return false;
@@ -28,33 +36,35 @@ function isRequired(props, column) {
   if (Array.isArray(field)) {
     return field.find((key) => isRequired(props, { ...column, field: key }));
   }
-  rules = is.isArray(rules) && (rules == null ? void 0 : rules.length) || is.isObject(rules) ? rules : (_a = props.rules) == null ? void 0 : _a[field];
+  rules = is.isArray(rules) && rules?.length || is.isObject(rules) ? rules : props.rules?.[field];
   if (is.isArray(rules)) {
     return rules.some((item) => item.required);
   }
   if (is.isObject(rules)) {
-    return rules == null ? void 0 : rules.required;
+    return rules?.required;
   }
   return false;
 }
 function isDisabled(props, column) {
-  var _a;
-  return !!(props.loading || ((_a = column.attrs) == null ? void 0 : _a.disabled));
+  if (props.loading) return true;
+  const disabled = vue.unref(column.attrs?.disabled);
+  if (is.isBoolean(disabled)) return disabled;
+  if (is.isFunction(disabled)) return disabled(column, props.model);
+  return false;
 }
-function renderText(props, column = {}, index) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+function renderText(props, column = {}) {
   const { type, field, customRender } = column;
-  const { fieldNames, options = [] } = column.attrs || {};
+  const { props: fieldNames, options = [] } = column.attrs || {};
   if (customRender && typeof customRender === "function") {
     return customRender({
-      column: props.columns[index],
+      column,
       model: props.model,
       value: props.model[field]
     });
   }
   if (type === "range-picker") {
     const [start, end] = field;
-    return ((_a = props.model) == null ? void 0 : _a[start]) ? `${(_b = props.model) == null ? void 0 : _b[start]} ~ ${(_c = props.model) == null ? void 0 : _c[end]}` : "";
+    return props.model?.[start] ? `${props.model?.[start]} ~ ${props.model?.[end]}` : "";
   }
   if (type === "location") {
     const [lon, lat] = field;
@@ -62,31 +72,46 @@ function renderText(props, column = {}, index) {
   }
   if (/^(select|radio|checkbox)$/.test(type)) {
     const target = options.find(
-      (item) => {
-        var _a2;
-        return item[fieldNames.value] === ((_a2 = props.model) == null ? void 0 : _a2[field]);
-      }
+      (item) => item[fieldNames.value] === props.model?.[field]
     );
-    return (target == null ? void 0 : target[fieldNames.label]) || ((_d = props.model) == null ? void 0 : _d[field]) || "";
+    return target?.[fieldNames.label] || props.model?.[field] || "";
   }
   if (/^dept-select(-all)?$/.test(type)) {
     const dict = /^dept-select$/.test(type) ? deptTreeDict.value : deptTreeAllDict.value;
-    return dict[(_e = props.model) == null ? void 0 : _e[field]] || ((_f = props.model) == null ? void 0 : _f[field]) || "";
+    return dict[props.model?.[field]] || props.model?.[field] || "";
   }
   if (type === "area-select") {
-    return areaTreeDict.value[(_g = props.model) == null ? void 0 : _g[field]] || ((_h = props.model) == null ? void 0 : _h[field]) || "";
+    return areaTreeDict.value[props.model?.[field]] || props.model?.[field] || "";
   }
   if (Array.isArray(field)) {
-    return field.map((key) => {
-      var _a2;
-      return ((_a2 = props.model) == null ? void 0 : _a2[key]) || "";
-    }).filter(Boolean).join(" - ");
+    return field.map((key) => props.model?.[key] || "").filter(Boolean).join(" - ");
   }
-  return ((_i = props.model) == null ? void 0 : _i[field]) || ((_j = props.model) == null ? void 0 : _j[field]) || "";
+  return props.model?.[field] || props.model?.[field] || "";
+}
+function renderArrayItemLabel(props, column, index) {
+  const { t } = useLocale.useLocale();
+  const itemLabel = vue.unref(column.itemLabel);
+  if (is.isFunction(itemLabel)) return itemLabel(column, index);
+  return (itemLabel || t("form.dynamicFormItem")) + ` ${index + 1}`;
+}
+function renderAddLabel(props, column) {
+  const { t } = useLocale.useLocale();
+  let addLabel = vue.unref(column.addLabel);
+  if (is.isFunction(addLabel)) return addLabel();
+  return addLabel || t("form.addFormItem");
+}
+function optionsHandler(props, column) {
+  const options = vue.unref(column.attrs.options);
+  if (is.isArray(options)) return options;
+  if (is.isFunction(options)) return options(column, props.model);
+  return [];
 }
 
 exports.columnItemStyle = columnItemStyle;
 exports.columnShowHandler = columnShowHandler;
 exports.isDisabled = isDisabled;
 exports.isRequired = isRequired;
+exports.optionsHandler = optionsHandler;
+exports.renderAddLabel = renderAddLabel;
+exports.renderArrayItemLabel = renderArrayItemLabel;
 exports.renderText = renderText;

package/lib/components/appForm/js/useAppForm.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var vue = require('vue');
+var form = require('../../../utils/form.js');
 var handler = require('../../../utils/handler.js');
 var date = require('../../../utils/date.js');
-var useLocale = require('../../../hooks/useLocale.js');
 var is = require('../../../utils/is.js');
+var useLocale = require('../../../hooks/useLocale.js');
 
 const genDefaultLabel = (config) => {
   if (config.label) return config.label;
@@ -28,7 +29,7 @@ const genPlaceholderHandler = (config) => {
       break;
     case "date-picker":
       if (["datetimerange", "daterange", "monthrange", "yearrange"].includes(
-        attrs == null ? void 0 : attrs.type
+        attrs?.type
       )) {
         switch (attrs.type) {
           case "yearrange":
@@ -60,7 +61,7 @@ const genPlaceholderHandler = (config) => {
 const genRuleRequiredMsgHandler = (config) => {
   const { t } = useLocale.useLocale();
   const { type, prop, label } = config || {};
-  if (!prop || !(prop == null ? void 0 : prop.length)) return "";
+  if (!prop || !prop?.length) return "";
   switch (type) {
     case "input":
       return t("hy.pleaseEnterPlaceholder", [label]);
@@ -132,18 +133,41 @@ function appFormItemHandler(column = {}) {
         endPlaceholder
       }
     };
+  } else if (/^(extra)$/.test(column.type)) {
+    return {
+      ...column,
+      children: (column.children || []).map((item) => appFormItemHandler(item))
+    };
+  } else if (/^(array)$/.test(column.type)) {
+    return {
+      height: 500,
+      emptyChildren: false,
+      ...column,
+      children: (column.children || []).map((item) => appFormItemHandler(item))
+    };
   }
   return column;
 }
 const resetAppFormValue = (columns = [], obj = {}) => {
   for (const item of columns) {
     const value = handler.funRunHandler(item.defaultValue);
-    if (Array.isArray(item.prop)) {
+    if (item.type === "array") {
+      if (is.isArray(value)) {
+        obj[item.prop] = value;
+      } else if (!item.emptyChildren) {
+        const childValue = resetAppFormValue(item.children);
+        obj[item.prop] = [childValue];
+      }
+    } else if (Array.isArray(item.prop)) {
       for (let i = 0; i < item.prop.length; i++) {
-        obj[item.prop[i]] = value && Array.isArray(value) ? value[i] : void 0;
+        form.genValueByProp(
+          obj,
+          item.prop[i],
+          Array.isArray(value) ? value[i] : void 0
+        );
       }
     } else {
-      obj[item.prop] = value;
+      form.genValueByProp(obj, item.prop, value);
     }
   }
   return obj;

package/lib/components/appForm/style/appForm.scss

@@ -14,3 +14,56 @@
     color: rgba(var(--hy-danger-2));
   }
 }
+
+.app-form-extra {
+  height: 32px;
+  color: rgba(var(--hy-auxiliary));
+  position: relative;
+  padding: 0 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1000px;
+  border: 1px solid rgba(var(--hy-auxiliary));
+  background-color: rgba(var(--hy-background-2));
+  cursor: pointer;
+  transition: all 0.1s linear;
+  user-select: none;
+  z-index: 2;
+  .app-form-extra-arrow {
+    transform: rotateZ(90deg) rotateY(0deg);
+    transition: all 0.3s linear;
+  }
+  &:hover {
+    color: rgba(var(--hy-theme));
+    border-color: rgba(var(--hy-theme));
+    box-shadow: 0px 0px 12px 1px rgba(var(--hy-theme), 0.5);
+    & + .app-form-extra-line {
+      background: radial-gradient(
+        circle,
+        rgba(var(--hy-theme), 1),
+        rgba(var(--hy-theme), 0)
+      );
+    }
+  }
+  &.expand {
+    .app-form-extra-arrow {
+      transform: rotateZ(90deg) rotateY(-180deg);
+    }
+  }
+}
+
+.app-form-extra-line {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  background: radial-gradient(
+    circle,
+    rgba(var(--hy-auxiliary), 1),
+    rgba(var(--hy-auxiliary), 0)
+  );
+}

package/lib/components/appIcon/appIcon.vue.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+var loadScript = require('../../utils/loadScript.js');
 
 import "./style/appIcon.scss";
 
@@ -35,10 +36,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         return "app-icon";
       }
     });
+    loadScript.svgIconLoad();
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("svg", {
         class: vue.normalizeClass(svgClass.value),
-        "aria-hidden": "true",
         svgName: __props.svgName
       }, [
         vue.createElementVNode("use", { "xlink:href": iconName.value }, null, 8, ["xlink:href"])

package/lib/components/appIconBox/style/appIconBox.scss

@@ -14,7 +14,6 @@
   user-select: none;
   color: rgb(var(--hy-main));
   border-radius: 100%;
-  box-sizing: border-box;
   background:
     radial-gradient(
       142% 47% at 50% 119%,

package/lib/components/appInput/appInput.vue.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var form = require('../../utils/form.js');
+
+const __default__ = vue.defineComponent({
+  name: "AppInput"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    type: {
+      type: String,
+      default: "text"
+    },
+    clearSpaceType: {
+      type: String,
+      // between-清除两端空格 all-清除所有空格 before-清除前面的空格 after-清除后面的空格 none-不清除空格
+      default: "between"
+    }
+  }, {
+    "modelValue": { type: String, default: "" },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels([], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const inputRef = vue.useTemplateRef("inputRef");
+    const bindValue = vue.computed({
+      get() {
+        return modelValue.value;
+      },
+      set(val) {
+        if (val && props.type !== "password") {
+          if (["between", "before"].includes(props.clearSpaceType)) {
+            modelValue.value = form.clearSpace(val, "before");
+            return;
+          }
+          if (["all"].includes(props.clearSpaceType)) {
+            modelValue.value = form.clearSpace(val, props.clearSpaceType);
+            return;
+          }
+        }
+        modelValue.value = val;
+      }
+    });
+    function onBlurHandler() {
+      if (modelValue.value && props.type !== "password") {
+        modelValue.value = form.clearSpace(modelValue.value, props.clearSpaceType);
+      }
+    }
+    __expose({
+      blur() {
+        inputRef.value.blur();
+      },
+      clear() {
+        inputRef.value.clear();
+      },
+      focus() {
+        inputRef.value.focus();
+      },
+      input: vue.computed(() => {
+        return inputRef.value.input;
+      }),
+      ref: vue.computed(() => {
+        return inputRef.value.ref;
+      }),
+      resizeTextarea() {
+        inputRef.value.resizeTextarea();
+      },
+      select() {
+        inputRef.value.select();
+      },
+      textarea: vue.computed(() => {
+        return inputRef.value.textarea;
+      }),
+      textareaStyle: vue.computed(() => {
+        return inputRef.value.textareaStyle;
+      }),
+      isComposing: vue.computed(() => {
+        return inputRef.value.isComposing;
+      }),
+      passwordVisible: vue.computed(() => {
+        return inputRef.value.passwordVisible;
+      })
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElInput), vue.mergeProps({
+        ref_key: "inputRef",
+        ref: inputRef,
+        modelValue: bindValue.value,
+        "onUpdate:modelValue": ($event) => bindValue.value = $event
+      }, _ctx.$attrs, {
+        onBlur: ($event) => onBlurHandler(props, _ctx.column)
+      }), null, 16, ["modelValue", "onUpdate:modelValue", "onBlur"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appInput/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appInput = require('./appInput.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppInput = handler.withInstall(appInput.default);
+
+exports.AppInput = AppInput;
+exports.default = AppInput;

package/lib/components/appMenu/appMenu.vue.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var usePermissionMap = require('../../hooks/usePermissionMap.js');
+var index = require('../appTooltip/index.js');
+var index$1 = require('../appIcon/index.js');
+
+import "./style/appMenu.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppMenu"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    menu: {
+      type: Array,
+      default: () => []
+    },
+    showShrink: {
+      type: Boolean,
+      default: false
+    }
+  }, {
+    "modelValue": { type: String, default: "" },
+    "modelModifiers": {},
+    "expand": { type: Boolean, default: true },
+    "expandModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["select", "open", "close"], ["update:modelValue", "update:expand"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const { permissionMap } = usePermissionMap.usePermissionMap();
+    const modelValue = vue.useModel(__props, "modelValue");
+    const expand = vue.useModel(__props, "expand");
+    function onClickHandler(item) {
+      modelValue.value = item.path;
+      emits("select", item);
+    }
+    function onExpandHandler() {
+      expand.value = !expand.value;
+      emits(expand.value ? "open" : "close");
+    }
+    __expose({});
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          class: vue.normalizeClass(["operator-menu-box user-select-none", { "operator-menu-box-expand": expand.value }])
+        },
+        [
+          vue.createElementVNode("div", { class: "operator-menu-list scroll-body" }, [
+            (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              null,
+              vue.renderList(__props.menu, (item, index$2) => {
+                return vue.openBlock(), vue.createElementBlock(
+                  vue.Fragment,
+                  { key: index$2 },
+                  [
+                    vue.unref(permissionMap).has(item.permission) ? (vue.openBlock(), vue.createBlock(vue.unref(index.AppTooltip), {
+                      key: 0,
+                      "is-always": "",
+                      disabled: expand.value,
+                      content: item.label,
+                      placement: "right"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("div", {
+                          class: vue.normalizeClass(["operator-menu-item", { "operator-menu-item-active": modelValue.value === item.path }]),
+                          onClick: vue.withModifiers(($event) => onClickHandler(item), ["stop"])
+                        }, [
+                          vue.createElementVNode("div", { class: "operator-label clickBox over_one_line" }, [
+                            vue.createVNode(vue.unref(index$1.AppIcon), {
+                              "svg-name": `${item.iconName}`,
+                              "class-name": "!w-5 !h-5 flex-shrink-0"
+                            }, null, 8, ["svg-name"]),
+                            vue.createElementVNode(
+                              "span",
+                              {
+                                class: vue.normalizeClass({ "ml-3": expand.value })
+                              },
+                              vue.toDisplayString(expand.value ? item.label : item.tip || item.label),
+                              3
+                              /* TEXT, CLASS */
+                            )
+                          ])
+                        ], 10, ["onClick"])
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["disabled", "content"])) : vue.createCommentVNode("v-if", true)
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          __props.showShrink ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(["w-full h-[44px] border-t border-border box-border cursor-pointer relative", { "justify-end pr-3": expand.value, "justify-center": !expand.value }]),
+            onClick: ($event) => onExpandHandler()
+          }, [
+            vue.createVNode(vue.unref(elementPlus.ElIcon), {
+              size: "20",
+              style: vue.normalizeStyle({
+                transform: expand.value ? "translate(0px, -50%) rotateY(0deg) rotateZ(90deg)" : "translate(50%, -50%) rotateY(-180deg) rotateZ(90deg)",
+                transition: "all 0.3s linear"
+              }),
+              class: vue.normalizeClass(["absolute top-1/2", { "right-3": expand.value, "right-1/2": !expand.value }])
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.Download))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["style", "class"])
+          ], 10, ["onClick"])) : vue.createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;