@elmethis/vue 0.4.1 → 0.5.0

package/dist/components/form/ElmButton.vue.d.ts

@@ -1,42 +0,0 @@
-export interface ElmButtonProps {
-    /**
-     * Whether the button is in loading state.
-     */
-    loading?: boolean;
-    /**
-     * Whether the button is block.
-     */
-    block?: boolean;
-    /**
-     * Whether the button is disabled.
-     */
-    disabled?: boolean;
-    color?: string;
-    /**
-     * Whether the button is primary.
-     */
-    primary?: boolean;
-    onClick: () => void;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLButtonElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmButtonProps> & Readonly<{}>, {
-    block: boolean;
-    loading: boolean;
-    disabled: boolean;
-    primary: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/form/ElmButton.vue.mjs

@@ -1,23 +0,0 @@
-(function() {
-  "use strict";
-  try {
-    if (typeof document != "undefined") {
-      var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-01a0b0a9],.v-leave-from[data-v-01a0b0a9]{opacity:1}.v-enter-active[data-v-01a0b0a9],.v-leave-active[data-v-01a0b0a9]{transition:opacity .1s}.v-enter-from[data-v-01a0b0a9],.v-leave-to[data-v-01a0b0a9]{opacity:0}"));
-      document.head.appendChild(elementStyle);
-    }
-  } catch (e) {
-    console.error("vite-plugin-css-injected-by-js", e);
-  }
-})();
-import _sfc_main from "./ElmButton.vue2.mjs";
-import style0 from "./ElmButton.vue3.mjs";
-
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const cssModules = {
-  "$style": style0
-};
-const ElmButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-01a0b0a9"]]);
-export {
-  ElmButton as default
-};

package/dist/components/form/ElmButton.vue2.mjs

@@ -1,74 +0,0 @@
-import { defineComponent, ref, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, createVNode, createElementVNode, Transition, withCtx, createBlock, renderSlot } from "vue";
-import ElmDotLoadingIcon from "../icon/ElmDotLoadingIcon.vue.mjs";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ElmButton",
-  props: {
-    loading: { type: Boolean, default: false },
-    block: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    color: {},
-    primary: { type: Boolean, default: false },
-    onClick: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const clicked = ref(false);
-    const id = ref();
-    const handleClick = () => {
-      if (!props.loading && !props.disabled && props.onClick) {
-        clicked.value = true;
-        id.value = window.setTimeout(() => clicked.value = false, 300);
-        props.onClick();
-      }
-    };
-    onUnmounted(() => {
-      if (id.value) clearTimeout(id.value);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        class: normalizeClass([
-          _ctx.$style.button,
-          {
-            [_ctx.$style.enable]: !__props.loading && !__props.disabled,
-            [_ctx.$style.colored]: __props.color,
-            [_ctx.$style.normal]: !__props.color && !__props.primary,
-            [_ctx.$style.primary]: !__props.color && __props.primary
-          }
-        ]),
-        style: normalizeStyle({
-          display: __props.block ? "flex" : "inline-flex",
-          width: __props.block ? "100%" : "auto",
-          cursor: __props.disabled ? "not-allowed" : __props.loading ? "progress" : "pointer",
-          "--opacity": __props.disabled || __props.loading ? 0.6 : void 0,
-          "--color": __props.color
-        }),
-        onClick: handleClick
-      }, [
-        clicked.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(_ctx.$style.ripple)
-        }, null, 2)) : createCommentVNode("", true),
-        createVNode(Transition, { mode: "out-in" }, {
-          default: withCtx(() => [
-            __props.loading ? (openBlock(), createBlock(ElmDotLoadingIcon, {
-              key: 0,
-              size: "1.5rem"
-            })) : (openBlock(), createElementBlock("span", {
-              key: 1,
-              class: normalizeClass(_ctx.$style.flex)
-            }, [
-              renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 2))
-          ]),
-          _: 3
-        }),
-        createElementVNode("div", {
-          class: normalizeClass(_ctx.$style["button-ornament"])
-        }, null, 2)
-      ], 6);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/components/form/ElmButton.vue3.mjs

@@ -1,40 +0,0 @@
-(function() {
-  "use strict";
-  try {
-    if (typeof document != "undefined") {
-      var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('._button_1ykfy_1{all:unset;position:relative;overflow:hidden;min-height:2.75rem;justify-content:center;align-items:center;gap:.5rem;border-radius:.25rem;box-sizing:border-box;padding:.5rem 1.5rem;line-height:1.5rem;border:solid 1px rgba(205,181,123,.6);-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;transition:opacity .2s,transform .2s;opacity:var(--opacity);box-shadow:0 0 .125rem #80808040}._button-ornament_1ykfy_21{position:absolute;content:"";bottom:-1px;right:-1px;height:1rem;width:1rem;background-color:#dbcaa099;clip-path:polygon(100% 0%,1000% 100%,0% 100%)}._normal_1ykfy_32{color:#0009;background-color:#fffc}[data-theme=dark] ._normal_1ykfy_32,._primary_1ykfy_41{color:#fff9;background-color:#3e434b}[data-theme=dark] ._primary_1ykfy_41{color:#0009;background-color:#fffc}._colored_1ykfy_50{background-color:var(--color)}._enable_1ykfy_54{transition:opacity .2s,transform .1s,box-shadow .2s}[data-theme=dark] ._enable_1ykfy_54:hover{transform:translate(-1px) translateY(-1px);opacity:.7;opacity:var(--opacity, .7)}[data-theme=dark] ._enable_1ykfy_54:active{transform:translate(1px) translateY(1px);opacity:.5;opacity:var(--opacity, .5)}._enable_1ykfy_54:hover{transform:translate(-1px) translateY(-1px);opacity:.7;opacity:var(--opacity, .7);box-shadow:.125rem .125rem .125rem #80808040}._enable_1ykfy_54:active{transform:translate(1px) translateY(1px);opacity:.5;opacity:var(--opacity, .5);box-shadow:-1px -1px .125rem #80808040}._flex_1ykfy_76{display:flex;justify-content:center;align-items:center;gap:.5rem}@keyframes _button-ripple_1ykfy_1{0%{transform:scale(0);opacity:1}50%{transform:scale(1.2);opacity:1}to{transform:scale(1.2);opacity:0}}._ripple_1ykfy_97{position:absolute;pointer-events:none;border-radius:50%;background-color:#cdb57b26;width:100%;aspect-ratio:1/1;transition:none;opacity:0;animation-name:_button-ripple_1ykfy_1;animation-duration:.3s;animation-fill-mode:both;animation-timing-function:ease-out}'));
-      document.head.appendChild(elementStyle);
-    }
-  } catch (e) {
-    console.error("vite-plugin-css-injected-by-js", e);
-  }
-})();
-const button = "_button_1ykfy_1";
-const normal = "_normal_1ykfy_32";
-const primary = "_primary_1ykfy_41";
-const colored = "_colored_1ykfy_50";
-const enable = "_enable_1ykfy_54";
-const flex = "_flex_1ykfy_76";
-const ripple = "_ripple_1ykfy_97";
-const style0 = {
-  button,
-  "button-ornament": "_button-ornament_1ykfy_21",
-  normal,
-  primary,
-  colored,
-  enable,
-  flex,
-  ripple,
-  "button-ripple": "_button-ripple_1ykfy_1"
-};
-export {
-  button,
-  colored,
-  style0 as default,
-  enable,
-  flex,
-  normal,
-  primary,
-  ripple
-};

package/dist/components/form/ElmCheckbox.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/vue3-vite';
-import { default as ElmCheckbox } from './ElmCheckbox.vue';
-declare const meta: Meta<typeof ElmCheckbox>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;

package/dist/components/form/ElmCheckbox.vue.d.ts

@@ -1,26 +0,0 @@
-export interface ElmCheckboxProps {
-    /**
-     * The label displayed.
-     */
-    label: string;
-    /**
-     * Whether the checkbox is in a loading state.
-     */
-    loading?: boolean;
-    /**
-     * Whether the checkbox is disabled.
-     */
-    disable?: boolean;
-}
-type __VLS_Props = ElmCheckboxProps;
-type __VLS_PublicProps = {
-    modelValue?: boolean;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    loading: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-export default _default;

package/dist/components/form/ElmCheckbox.vue.mjs

@@ -1,10 +0,0 @@
-import _sfc_main from "./ElmCheckbox.vue2.mjs";
-import style0 from "./ElmCheckbox.vue3.mjs";
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const cssModules = {
-  "$style": style0
-};
-const ElmCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
-export {
-  ElmCheckbox as default
-};

package/dist/components/form/ElmCheckbox.vue2.mjs

@@ -1,177 +0,0 @@
-import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createCommentVNode, normalizeStyle } from "vue";
-import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
-const _hoisted_1 = { style: {
-  display: "flex",
-  alignItems: "center",
-  gap: "0.5rem"
-} };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ElmCheckbox",
-  props: /* @__PURE__ */ mergeModels({
-    label: {},
-    loading: { type: Boolean, default: false },
-    disable: { type: Boolean }
-  }, {
-    "modelValue": { type: Boolean, ...{} },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const isChecked = useModel(__props, "modelValue");
-    function toggleCheck() {
-      if (!props.loading && !props.disable) {
-        isChecked.value = !isChecked.value;
-      }
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          _ctx.$style.container,
-          {
-            [_ctx.$style["container--disable"]]: props.disable
-          }
-        ]),
-        onClick: toggleCheck
-      }, [
-        createElementVNode("div", _hoisted_1, [
-          (openBlock(), createElementBlock("svg", {
-            width: "24",
-            height: "24",
-            class: normalizeClass(_ctx.$style.checkbox)
-          }, [
-            createElementVNode("circle", {
-              cx: "0",
-              cy: "0",
-              r: "2",
-              class: normalizeClass(_ctx.$style.loading),
-              style: normalizeStyle({ opacity: props.loading ? 1 : 0 })
-            }, [..._cache[0] || (_cache[0] = [
-              createElementVNode("animate", {
-                attributeName: "cx",
-                values: "4; 20; 20; 4; 4",
-                dur: "1.2s",
-                repeatCount: "indefinite",
-                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
-                calcMode: "spline"
-              }, null, -1),
-              createElementVNode("animate", {
-                attributeName: "cy",
-                values: "4; 4; 20; 20; 4",
-                dur: "1.2s",
-                repeatCount: "indefinite",
-                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
-                calcMode: "spline"
-              }, null, -1)
-            ])], 6),
-            createElementVNode("circle", {
-              cx: "20",
-              cy: "20",
-              r: "2",
-              class: normalizeClass(_ctx.$style.loading),
-              style: normalizeStyle({ opacity: props.loading ? 1 : 0 })
-            }, [..._cache[1] || (_cache[1] = [
-              createElementVNode("animate", {
-                attributeName: "cx",
-                values: "20; 4; 4; 20; 20",
-                dur: "1.2s",
-                repeatCount: "indefinite",
-                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
-                calcMode: "spline"
-              }, null, -1),
-              createElementVNode("animate", {
-                attributeName: "cy",
-                values: "20; 20; 4; 4; 20",
-                dur: "1.2s",
-                repeatCount: "indefinite",
-                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
-                calcMode: "spline"
-              }, null, -1)
-            ])], 6),
-            createElementVNode("rect", {
-              x: "4",
-              y: "4",
-              width: "16",
-              height: "16",
-              class: normalizeClass([
-                _ctx.$style.rect,
-                {
-                  [_ctx.$style["rect--checked"]]: isChecked.value,
-                  [_ctx.$style["rect--loading"]]: props.loading
-                }
-              ]),
-              strokeWidth: "0.8"
-            }, null, 2),
-            isChecked.value ? (openBlock(), createElementBlock("polyline", {
-              key: 0,
-              class: normalizeClass(_ctx.$style["check-line"]),
-              points: "5,12 10,17 19,8",
-              strokeWidth: "1.5",
-              fill: "transparent"
-            }, null, 2)) : createCommentVNode("", true),
-            _cache[2] || (_cache[2] = createElementVNode("line", {
-              x1: "0",
-              y1: "1",
-              x2: "4",
-              y2: "1",
-              strokeWidth: "2",
-              fill: "transparent"
-            }, null, -1)),
-            _cache[3] || (_cache[3] = createElementVNode("line", {
-              x1: "4",
-              y1: "0",
-              x2: "24",
-              y2: "0",
-              strokeWidth: "1",
-              fill: "transparent"
-            }, null, -1)),
-            _cache[4] || (_cache[4] = createElementVNode("line", {
-              x1: "0",
-              y1: "4",
-              x2: "0",
-              y2: "16",
-              strokeWidth: "1",
-              fill: "transparent"
-            }, null, -1)),
-            _cache[5] || (_cache[5] = createElementVNode("line", {
-              x1: "0",
-              y1: "18",
-              x2: "0",
-              y2: "20",
-              strokeWidth: "1",
-              fill: "transparent"
-            }, null, -1)),
-            _cache[6] || (_cache[6] = createElementVNode("line", {
-              x1: "0",
-              y1: "24",
-              x2: "20",
-              y2: "24",
-              strokeWidth: "1",
-              fill: "transparent"
-            }, null, -1)),
-            _cache[7] || (_cache[7] = createElementVNode("line", {
-              x1: "20",
-              y1: "23",
-              x2: "24",
-              y2: "23",
-              strokeWidth: "1.5",
-              fill: "transparent"
-            }, null, -1)),
-            _cache[8] || (_cache[8] = createElementVNode("line", {
-              x1: "24",
-              y1: "4",
-              x2: "24",
-              y2: "20",
-              style: { strokeWidth: 1 },
-              fill: "transparent"
-            }, null, -1))
-          ], 2)),
-          createVNode(ElmInlineText, { text: __props.label }, null, 8, ["text"])
-        ])
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/components/form/ElmCheckbox.vue3.mjs

@@ -1,34 +0,0 @@
-(function() {
-  "use strict";
-  try {
-    if (typeof document != "undefined") {
-      var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._container_101ok_1{width:-moz-fit-content;width:fit-content;font-family:sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;transition:opacity .2s}._container_101ok_1:hover{opacity:.8}._container--disable_101ok_11{opacity:.45;cursor:not-allowed}._container--disable_101ok_11:hover{opacity:.45}._checkbox_101ok_19{stroke:#000c;fill:transparent}[data-theme=dark] ._checkbox_101ok_19{stroke:#fffc}._rect_101ok_27{transition:all .2s}._rect--loading_101ok_30{opacity:.3}._rect--checked_101ok_33{fill:#000c}[data-theme=dark] ._rect--checked_101ok_33{fill:#fffc}._loading_101ok_40{transition:opacity .2s;fill:#000000b3}[data-theme=dark] ._loading_101ok_40{fill:#ffffffb3}@keyframes _elmethis-checkbox-check-line_101ok_1{0%{stroke-dashoffset:100%}to{stroke-dashoffset:0%}}._check-line_101ok_56{stroke-dasharray:100%;animation-name:_elmethis-checkbox-check-line_101ok_1;animation-duration:.2s;animation-timing-function:ease-in-out;animation-delay:.1s;animation-fill-mode:both;transform-origin:center;stroke:#ffffffe6}[data-theme=dark] ._check-line_101ok_56{stroke:#000000e6}"));
-      document.head.appendChild(elementStyle);
-    }
-  } catch (e) {
-    console.error("vite-plugin-css-injected-by-js", e);
-  }
-})();
-const container = "_container_101ok_1";
-const checkbox = "_checkbox_101ok_19";
-const rect = "_rect_101ok_27";
-const loading = "_loading_101ok_40";
-const style0 = {
-  container,
-  "container--disable": "_container--disable_101ok_11",
-  checkbox,
-  rect,
-  "rect--loading": "_rect--loading_101ok_30",
-  "rect--checked": "_rect--checked_101ok_33",
-  loading,
-  "check-line": "_check-line_101ok_56",
-  "elmethis-checkbox-check-line": "_elmethis-checkbox-check-line_101ok_1"
-};
-export {
-  checkbox,
-  container,
-  style0 as default,
-  loading,
-  rect
-};

package/dist/components/form/ElmSelect.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/vue3-vite';
-import { default as ElmSelect } from './ElmSelect.vue';
-declare const meta: Meta<typeof ElmSelect>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;

package/dist/components/form/ElmSelect.vue.d.ts

@@ -1,48 +0,0 @@
-export interface ElmSelectProps {
-    label: string;
-    placeholder?: string;
-    disabled?: boolean;
-    loading?: boolean;
-}
-type __VLS_Props = ElmSelectProps;
-type __VLS_PublicProps = {
-    "options"?: Array<{
-        id: string;
-        label: string;
-        description?: string;
-    }>;
-    "selected-option"?: {
-        id: string;
-        label: string;
-        description?: string;
-    } | null;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:options": (value: {
-        id: string;
-        label: string;
-        description?: string;
-    }[]) => any;
-    "update:selected-option": (value: {
-        id: string;
-        label: string;
-        description?: string;
-    } | null) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:options"?: ((value: {
-        id: string;
-        label: string;
-        description?: string;
-    }[]) => any) | undefined;
-    "onUpdate:selected-option"?: ((value: {
-        id: string;
-        label: string;
-        description?: string;
-    } | null) => any) | undefined;
-}>, {
-    loading: boolean;
-    disabled: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    target: HTMLDivElement;
-}, HTMLDivElement>;
-export default _default;

package/dist/components/form/ElmSelect.vue.mjs

@@ -1,10 +0,0 @@
-import _sfc_main from "./ElmSelect.vue2.mjs";
-import style0 from "./ElmSelect.vue3.mjs";
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const cssModules = {
-  "$style": style0
-};
-const ElmSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
-export {
-  ElmSelect as default
-};

package/dist/components/form/ElmSelect.vue2.mjs

@@ -1,145 +0,0 @@
-import { defineComponent, mergeModels, useModel, ref, useTemplateRef, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, unref, toDisplayString, createVNode, Transition, withCtx, createCommentVNode, Fragment, renderList } from "vue";
-import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
-import { mdiArrowDownDropCircleOutline, mdiMenuDown, mdiChevronRight } from "@mdi/js";
-import { onClickOutside } from "@vueuse/core";
-import textStyle from "../../styles/text.module.scss.mjs";
-import fadeStyle from "../../styles/transition-fade.module.scss.mjs";
-const _hoisted_1 = ["onClick"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ElmSelect",
-  props: /* @__PURE__ */ mergeModels({
-    label: {},
-    placeholder: {},
-    disabled: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false }
-  }, {
-    "options": {},
-    "optionsModifiers": {},
-    "selected-option": {},
-    "selected-optionModifiers": {}
-  }),
-  emits: ["update:options", "update:selected-option"],
-  setup(__props) {
-    const options = useModel(
-      __props,
-      "options"
-    );
-    const selectedOption = useModel(__props, "selected-option");
-    const isActive = ref(false);
-    const handleToggle = () => {
-      isActive.value = !isActive.value;
-    };
-    const handleSelect = (id) => {
-      if (options.value) {
-        const [selected] = options.value.filter((option) => option.id === id);
-        selectedOption.value = selected;
-      }
-    };
-    const target = useTemplateRef("target");
-    onClickOutside(target, (_) => {
-      if (isActive.value) isActive.value = false;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "target",
-        ref: target,
-        class: normalizeClass([_ctx.$style.wrapper, { [_ctx.$style.active]: isActive.value }]),
-        style: normalizeStyle({
-          backgroundColor: __props.disabled || __props.loading ? "rgba(0,0,0,0.15)" : void 0,
-          "--highlight-color": isActive.value ? "#bfa056" : void 0
-        }),
-        onClick: handleToggle
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(_ctx.$style.header)
-        }, [
-          createElementVNode("span", {
-            class: normalizeClass([_ctx.$style.label, unref(textStyle).text])
-          }, toDisplayString(__props.label), 3)
-        ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(_ctx.$style.body)
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.$style.select)
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass([_ctx.$style.selected, unref(textStyle).text])
-            }, [
-              createVNode(Transition, {
-                mode: "out-in",
-                "leave-from-class": _ctx.$style["selected-leave-from"],
-                "enter-to-class": _ctx.$style["selected-enter-to"],
-                "enter-active-class": _ctx.$style["selected-enter-active"],
-                "leave-active-class": _ctx.$style["selected-leave-active"],
-                "enter-from-class": _ctx.$style["selected-enter-from"],
-                "leave-to-class": _ctx.$style["selected-leave-to"]
-              }, {
-                default: withCtx(() => [
-                  selectedOption.value ? (openBlock(), createElementBlock("div", {
-                    key: selectedOption.value.id
-                  }, [
-                    createElementVNode("span", null, toDisplayString(selectedOption.value.label), 1),
-                    selectedOption.value.description ? (openBlock(), createElementBlock("span", {
-                      key: 0,
-                      class: normalizeClass(_ctx.$style.description)
-                    }, toDisplayString(selectedOption.value.description), 3)) : createCommentVNode("", true)
-                  ])) : (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: normalizeClass(_ctx.$style.fallback)
-                  }, [
-                    createVNode(ElmMdiIcon, { d: unref(mdiArrowDownDropCircleOutline) }, null, 8, ["d"]),
-                    createElementVNode("span", null, toDisplayString(__props.placeholder ?? "Select an option"), 1)
-                  ], 2))
-                ]),
-                _: 1
-              }, 8, ["leave-from-class", "enter-to-class", "enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
-            ], 2),
-            createVNode(ElmMdiIcon, {
-              d: unref(mdiMenuDown),
-              size: "1.5rem"
-            }, null, 8, ["d"]),
-            createVNode(Transition, {
-              "enter-from-class": unref(fadeStyle)["fade-enter-from"],
-              "enter-active-class": unref(fadeStyle)["fade-enter-active"],
-              "enter-to-class": unref(fadeStyle)["fade-enter-to"],
-              "leave-from-class": unref(fadeStyle)["fade-leave-from"],
-              "leave-active-class": unref(fadeStyle)["fade-leave-active"],
-              "leave-to-class": unref(fadeStyle)["fade-leave-to"]
-            }, {
-              default: withCtx(() => [
-                isActive.value ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass(_ctx.$style.pulldown)
-                }, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option) => {
-                    return openBlock(), createElementBlock("div", {
-                      key: option.id,
-                      class: normalizeClass([_ctx.$style.option, unref(textStyle).text]),
-                      onClick: ($event) => handleSelect(option.id)
-                    }, [
-                      createVNode(ElmMdiIcon, {
-                        d: unref(mdiChevronRight),
-                        color: "#868e9c",
-                        size: "0.75em"
-                      }, null, 8, ["d"]),
-                      createElementVNode("span", null, toDisplayString(option.label), 1),
-                      option.description ? (openBlock(), createElementBlock("span", {
-                        key: 0,
-                        class: normalizeClass(_ctx.$style.description)
-                      }, toDisplayString(option.description), 3)) : createCommentVNode("", true)
-                    ], 10, _hoisted_1);
-                  }), 128))
-                ], 2)) : createCommentVNode("", true)
-              ]),
-              _: 1
-            }, 8, ["enter-from-class", "enter-active-class", "enter-to-class", "leave-from-class", "leave-active-class", "leave-to-class"])
-          ], 2)
-        ], 2)
-      ], 6);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};