@pixelium/web-vue 0.0.1-beta → 0.0.2-fix

package/es/input/index.js

@@ -0,0 +1,432 @@
+import './css.js'
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, getCurrentInstance, ref, inject, computed, shallowRef, useSlots, watch, onMounted, nextTick, normalizeClass, createCommentVNode, unref, renderSlot, withModifiers, createBlock, toDisplayString, createVNode } from "vue";
+import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { d as drawBorder } from "./draw.js";
+import { g as getGlobalThemeColor } from "../share/util/color.js";
+import { a as canvasPreprocess, c as calcPixelSize, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
+import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { u as useComposition } from "../share/hook/use-composition.js";
+import { T as TimesCircleSolid, S as SpinnerThirdSolid } from "../auto-complete/index.js";
+import { N } from "../aside/index.js";
+import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { _ as _sfc_main$1 } from "../input-group/index.js";
+import { I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { u as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
+import { I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { u as useControlledMode } from "../share/hook/use-controlled-mode.js";
+const Eye = /* @__PURE__ */ defineComponent({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "svg",
+        {
+          class: "px-icon-hn",
+          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24"
+        },
+        [..._cache[0] || (_cache[0] = [
+          createElementVNode(
+            "path",
+            { d: "M16 11h1v2h-1zM16 13v2h-1v1h-2v-1h1v-1h1v-1zM16 9v2h-1v-1h-1V9h-1V8h2v1zM11 16h2v1h-2zM11 15v1H9v-1H8v-2h1v1h1v1zM13 7v1h-1v3h-1v1H8v1H7v-2h1V9h1V8h2V7z" },
+            null,
+            -1
+            /* CACHED */
+          ),
+          createElementVNode(
+            "path",
+            { d: "M22 11V9h-1V8h-1V7h-1V6h-2V5H7v1H5v1H4v1H3v1H2v2H1v2h1v2h1v1h1v1h1v1h2v1h10v-1h2v-1h1v-1h1v-1h1v-2h1v-2zm-1 3h-1v1h-1v1h-1v1h-2v1H8v-1H7v-1H5v-1H4v-1H3v-4h1V9h1V8h1V7h2V6h8v1h2v1h1v1h1v1h1z" },
+            null,
+            -1
+            /* CACHED */
+          )
+        ])],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+const EyeCross = /* @__PURE__ */ defineComponent({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "svg",
+        {
+          class: "px-icon-hn",
+          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24"
+        },
+        [..._cache[0] || (_cache[0] = [
+          createElementVNode(
+            "path",
+            { d: "M15 13h1v2h-1v1h-2v-1h1v-1h1zM16 11h1v2h-1z" },
+            null,
+            -1
+            /* CACHED */
+          ),
+          createElementVNode(
+            "path",
+            { d: "M23 11v2h-1v2h-1v1h-1v1h-1v1h-2v1H9v-1h7v-1h2v-1h1v-1h1v-1h1v-4h-1V9h-1V8h2v1h1v2zM2 13H1v-2h1V9h1V8h1V7h1V6h2V5h8v1H8v1H6v1H5v1H4v1H3v4h1v1h1v1H3v-1H2z" },
+            null,
+            -1
+            /* CACHED */
+          ),
+          createElementVNode(
+            "path",
+            { d: "M13 7v1h-1v1h-1v1h-1v1H9v1H8v1H7v-2h1V9h1V8h2V7zM9 17H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H9zM11 16h2v1h-2z" },
+            null,
+            -1
+            /* CACHED */
+          )
+        ])],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "px-input-prefix-wrapper"
+};
+const _hoisted_2 = ["value", "placeholder", "disabled", "autofocus", "type"];
+const _hoisted_3 = {
+  key: 1,
+  class: "px-input-close-wrapper"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "px-input-icon-placeholder"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "px-input-password-wrapper"
+};
+const _hoisted_6 = {
+  key: 3,
+  class: "px-input-count-wrapper"
+};
+const _hoisted_7 = {
+  key: 4,
+  class: "px-input-loading-wrapper"
+};
+const _hoisted_8 = {
+  key: 5,
+  class: "px-input-suffix-wrapper"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Input"
+  },
+  __name: "index",
+  props: {
+    modelValue: null,
+    defaultValue: null,
+    placeholder: null,
+    password: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    size: { default: "medium" },
+    shape: { default: "default" },
+    borderRadius: null,
+    maxLength: null,
+    showCount: { type: Boolean, default: false },
+    countGraphemes: { type: Function },
+    sliceGraphemes: { type: Function },
+    status: { default: "normal" },
+    autofocus: { type: Boolean },
+    nativeType: null
+  },
+  emits: ["input", "update:modelValue", "change", "clear", "blur", "focus"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
+    const props = __props;
+    const emits = __emit;
+    const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({
+      afterComposition: (e) => {
+        nextTick(() => {
+          inputHandler(e);
+        });
+      }
+    });
+    const instance = getCurrentInstance();
+    const innerInputGroup = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
+    const [_, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [ref(0), ref(false), ref(false)];
+    const inputGroupProps = inject(INPUT_GROUP_PROVIDE);
+    const borderRadiusComputed = computed(() => {
+      return innerInputGroup.value && inputGroupProps ? inputGroupProps.borderRadius : props.borderRadius;
+    });
+    const sizeComputed = computed(() => {
+      return innerInputGroup.value && inputGroupProps ? inputGroupProps.size : props.size;
+    });
+    const shapeComputed = computed(() => {
+      return innerInputGroup.value && inputGroupProps ? inputGroupProps.shape : props.shape;
+    });
+    const disabledComputed = computed(() => {
+      return innerInputGroup.value && inputGroupProps ? inputGroupProps.disabled || props.disabled : props.disabled;
+    });
+    const [inputValue, updateInputValue] = useControlledMode("modelValue", props, emits, {
+      defaultField: "defaultValue",
+      transform: (nextValue) => {
+        return nextValue || "";
+      }
+    });
+    const wrapperRef = shallowRef(null);
+    const canvasRef = shallowRef(null);
+    const inputRef = shallowRef(null);
+    const currentLength = computed(() => {
+      return props.countGraphemes ? props.countGraphemes(inputValue.value) : inputValue.value.length;
+    });
+    const inputHandler = async (e) => {
+      const target = e.target;
+      let newValue = target.value;
+      inputValue.value = newValue;
+      if (isComposing.value) {
+        return;
+      }
+      emits("input", newValue, e);
+      if (props.maxLength) {
+        if (props.countGraphemes && props.sliceGraphemes) {
+          await nextTick();
+          newValue = props.sliceGraphemes(inputValue.value, props.maxLength);
+        } else {
+          newValue = inputValue.value.slice(0, props.maxLength);
+        }
+      }
+      updateInputValue(newValue);
+    };
+    const clearHandler = async () => {
+      await updateInputValue("");
+      emits("change", "");
+      emits("clear", "");
+    };
+    const changeHandler = (e) => {
+      const target = e.target;
+      emits("change", target.value, e);
+    };
+    const focusMode = ref(false);
+    const blurHandler = () => {
+      focusMode.value = false;
+    };
+    const focusHandler = () => {
+      focusMode.value = true;
+    };
+    const focusInputHandler = () => {
+      var _a2;
+      (_a2 = inputRef.value) == null ? void 0 : _a2.focus();
+    };
+    const hoverFlag = ref(false);
+    const mouseenterHandler = () => {
+      hoverFlag.value = true;
+    };
+    const mouseleaveHandler = () => {
+      hoverFlag.value = false;
+    };
+    const showClose = computed(() => {
+      return props.clearable && !disabledComputed.value && !props.readonly;
+    });
+    const showPassword = ref(false);
+    const toggleShowPassword = () => {
+      showPassword.value = !showPassword.value;
+    };
+    const typeComputed = computed(() => {
+      if (props.nativeType) {
+        return props.nativeType;
+      }
+      if (props.password) {
+        return showPassword.value ? "text" : "password";
+      }
+      return "text";
+    });
+    const slots = useSlots();
+    __expose({
+      focus: () => {
+        var _a2;
+        (_a2 = inputRef.value) == null ? void 0 : _a2.focus();
+      },
+      blur: () => {
+        var _a2;
+        (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
+      },
+      clear: () => clearHandler(),
+      select: () => {
+        var _a2;
+        (_a2 = inputRef.value) == null ? void 0 : _a2.select();
+      }
+    });
+    const darkMode = useDarkMode();
+    watch(
+      [
+        first,
+        last,
+        borderRadiusComputed,
+        shapeComputed,
+        sizeComputed,
+        disabledComputed,
+        () => slots,
+        darkMode,
+        focusMode,
+        hoverFlag
+      ],
+      () => {
+        setTimeout(() => {
+          drawPixel();
+        });
+      }
+    );
+    const drawPixel = () => {
+      const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
+      if (!preprocessData) {
+        return;
+      }
+      const { ctx, width, height, canvas } = preprocessData;
+      const pixelSize = calcPixelSize();
+      const borderRadius = getBorderRadius(
+        canvas,
+        pixelSize,
+        borderRadiusComputed.value,
+        shapeComputed.value,
+        sizeComputed.value || "medium",
+        innerInputGroup.value,
+        first.value,
+        last.value
+      );
+      const borderColor = props.status !== "normal" ? getGlobalThemeColor(props.status === "error" ? "danger" : props.status, 6) : (hoverFlag.value || focusMode.value) && !disabledComputed.value && !props.readonly ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10);
+      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+      const rad = BORDER_CORNER_RAD_RANGE;
+      drawBorder(
+        ctx,
+        width,
+        height,
+        center,
+        borderRadius,
+        rad,
+        borderColor,
+        pixelSize,
+        innerInputGroup.value,
+        first.value,
+        last.value
+      );
+      const backgroundColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
+      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+    };
+    onMounted(() => {
+      nextTick(() => {
+        drawPixel();
+      });
+    });
+    useResizeObserver(wrapperRef, drawPixel);
+    useWatchGlobalCssVal(drawPixel);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["pixelium px-input", {
+            [`px-input__${sizeComputed.value}`]: !!sizeComputed.value,
+            [`px-input__${shapeComputed.value}`]: !!shapeComputed.value,
+            "px-input__inner": innerInputGroup.value,
+            "px-input__disabled": !!disabledComputed.value
+          }]),
+          ref_key: "wrapperRef",
+          ref: wrapperRef,
+          onClick: focusInputHandler,
+          onMouseenter: mouseenterHandler,
+          onMouseleave: mouseleaveHandler
+        },
+        [
+          unref(slots).prefix ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "prefix")
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode("input", {
+            class: "px-input-inner",
+            value: unref(inputValue),
+            ref_key: "inputRef",
+            ref: inputRef,
+            placeholder: props.placeholder,
+            disabled: disabledComputed.value || props.readonly,
+            autofocus: __props.autofocus,
+            type: typeComputed.value,
+            onInput: withModifiers(inputHandler, ["stop"]),
+            onChange: withModifiers(changeHandler, ["stop"]),
+            onBlur: blurHandler,
+            onFocus: focusHandler,
+            onCompositionstart: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => unref(compositionStartHandler) && unref(compositionStartHandler)(...args)),
+            onCompositionend: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => unref(compositionUpdateHandler) && unref(compositionUpdateHandler)(...args))
+          }, null, 40, _hoisted_2),
+          showClose.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            hoverFlag.value && !!unref(inputValue) ? (openBlock(), createBlock(unref(TimesCircleSolid), {
+              key: 0,
+              class: "px-input-icon",
+              onClick: clearHandler
+            })) : (openBlock(), createElementBlock("div", _hoisted_4))
+          ])) : createCommentVNode("v-if", true),
+          props.password ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            !showPassword.value ? (openBlock(), createBlock(unref(Eye), {
+              key: 0,
+              class: "px-input-icon",
+              onClick: toggleShowPassword
+            })) : (openBlock(), createBlock(unref(EyeCross), {
+              key: 1,
+              class: "px-input-icon",
+              onClick: toggleShowPassword
+            }))
+          ])) : createCommentVNode("v-if", true),
+          props.showCount ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "count", {
+              value: unref(inputValue),
+              count: currentLength.value,
+              maxLength: props.maxLength
+            }, () => [
+              createElementVNode(
+                "span",
+                null,
+                toDisplayString(currentLength.value) + toDisplayString(unref(N)(props.maxLength) ? "" : " / " + props.maxLength),
+                1
+                /* TEXT */
+              )
+            ])
+          ])) : createCommentVNode("v-if", true),
+          props.loading ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            createVNode(unref(SpinnerThirdSolid), { class: "px-input-icon px-animation__loading" })
+          ])) : createCommentVNode("v-if", true),
+          unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            renderSlot(_ctx.$slots, "suffix")
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode(
+            "canvas",
+            {
+              class: "px-input-canvas",
+              ref_key: "canvasRef",
+              ref: canvasRef
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          )
+        ],
+        34
+        /* CLASS, NEED_HYDRATION */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/input/type.d.ts

@@ -0,0 +1,175 @@
+import type { NumberOrPercentage } from '../share/type';
+export type InputProps = {
+    /**
+     * @property {string | null} [modelValue]
+     * @version 0.0.2
+     */
+    modelValue?: string | null;
+    /**
+     * @property {string | null} [defaultValue]
+     * @version 0.0.2
+     */
+    defaultValue?: string | null;
+    /**
+     * @property {string} [placeholder]
+     * @version 0.0.2
+     */
+    placeholder?: string;
+    /**
+     * @property {boolean} [password=false]
+     * @version 0.0.2
+     */
+    password?: boolean;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.2
+     */
+    readonly?: boolean;
+    /**
+     * @property {boolean} [clearable=false]
+     * @version 0.0.2
+     */
+    clearable?: boolean;
+    /**
+     * @property {boolean} [loading=false]
+     * @version 0.0.2
+     */
+    loading?: boolean;
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * @property {'default' | 'round'} [shape='default']
+     * @version 0.0.2
+     */
+    shape?: 'default' | 'round';
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.2
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {number} [maxLength]
+     * @version 0.0.2
+     */
+    maxLength?: number;
+    /**
+     * @property {boolean} [showCount=false]
+     * @version 0.0.2
+     */
+    showCount?: boolean;
+    /**
+     * @property {(value: string) => number} [countGraphemes]
+     * @version 0.0.2
+     */
+    countGraphemes?: (value: string) => number;
+    /**
+     * @property {(value: string, limit: number) => string} [sliceGraphemes]
+     * @version 0.0.2
+     */
+    sliceGraphemes?: (value: string, limit: number) => string;
+    /**
+     * @property {'success' | 'warning' | 'error' | 'normal'} [status='normal']
+     * @version 0.0.2
+     */
+    status?: 'success' | 'warning' | 'error' | 'normal';
+    /**
+     * @property {boolean} [autofocus=false]
+     * @version 0.0.2
+     */
+    autofocus?: boolean;
+    /**
+     * @property {'text' | 'password' | 'email' | 'tel' | 'url' | 'search'} [nativeType='text']
+     * @version 0.0.2
+     */
+    nativeType?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+};
+export type InputEvents = {
+    /**
+     * @event input
+     * @param {string} value
+     * @param {Event} e
+     * @version 0.0.2
+     */
+    input: [value: string, e: Event];
+    /**
+     * @event update:modelValue
+     * @param {string} value
+     * @version 0.0.2
+     */
+    'update:modelValue': [value: string];
+    /**
+     * @event change
+     * @param {string} value
+     * @param {Event | undefined} e
+     * @version 0.0.2
+     */
+    change: [value: string, e?: Event];
+    /**
+     * @event clear
+     * @param {string} value
+     * @version 0.0.2
+     */
+    clear: [value: string];
+    /**
+     * @event blur
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    blur: [e: FocusEvent];
+    /**
+     * @event focus
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    focus: [e: FocusEvent];
+};
+export type InputSlots = {
+    /**
+     * @slot prefix
+     * @version 0.0.2
+     */
+    prefix: {};
+    /**
+     * @slot suffix
+     * @version 0.0.2
+     */
+    suffix: {};
+    /**
+     * @slot count
+     * @param {number} inputValue
+     * @param {number} currentLength
+     * @param {number} maxLength
+     * @version 0.0.2
+     */
+    count: {};
+};
+export type InputExpose = {
+    /**
+     * @property {() => void} focus
+     * @version 0.0.2
+     */
+    focus: () => void;
+    /**
+     * @property {() => void} blur
+     * @version 0.0.2
+     */
+    blur: () => void;
+    /**
+     * @property {() => void} clear
+     * @version 0.0.2
+     */
+    clear: () => void;
+    /**
+     * @property {() => void} select
+     * @version 0.0.2
+     */
+    select: () => void;
+};

package/es/input-group/css.js

@@ -0,0 +1,2 @@
+import '../index.css'
+import './index.css'

package/es/input-group/index.css

@@ -0,0 +1,24 @@
+.px-input-group {
+  height: var(--button-size);
+  display: inline-flex;
+  align-items: start;
+  position: relative;
+}
+.px-input-group > .px-button,
+.px-input-group > .px-input,
+.px-input-group > .px-input-number,
+.px-input-group > .px-auto-complete,
+.px-input-group > .px-input-tag,
+.px-input-group > .px-select,
+.px-input-group > .px-input-group-label {
+  margin-left: calc(-2 * var(--px-bit) - 1px);
+}
+.px-input-group > .px-button:first-child,
+.px-input-group > .px-input:first-child,
+.px-input-group > .px-input-number:first-child,
+.px-input-group > .px-auto-complete:first-child,
+.px-input-group > .px-input-tag:first-child,
+.px-input-group > .px-select:first-child,
+.px-input-group > .px-input-group-label:first-child {
+  margin-left: 0;
+}

package/es/input-group/index.d.ts

@@ -0,0 +1,17 @@
+import type { InputGroupProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<InputGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupProps> & Readonly<{}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/input-group/index.js

@@ -0,0 +1,40 @@
+import './css.js'
+import { defineComponent, provide, createElementBlock, openBlock, renderSlot } from "vue";
+import { e as emitParentUpdate } from "../share/hook/use-index-of-children.js";
+import { I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
+const _hoisted_1 = {
+  class: "pixelium px-input-group",
+  ref: "slotWrapper"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "InputGroup"
+  },
+  __name: "index",
+  props: {
+    borderRadius: null,
+    shape: { default: "default" },
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    provide(INPUT_GROUP_PROVIDE, props);
+    emitParentUpdate(INPUT_GROUP_UPDATE);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        _hoisted_1,
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};