@rotki/ui-library 2.12.2 → 2.13.0

package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, useModel, openBlock, createBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, mergeModels } from "vue";
 import RuiDialog from "../dialog/RuiDialog.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -6,16 +6,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "RuiBottomSheet",
-  props: {
-    modelValue: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     persistent: { type: Boolean, default: false },
     width: {},
     maxWidth: {}
-  },
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(RuiDialog, mergeProps({ "bottom-sheet": "" }, { ...props, ..._ctx.$attrs }), createSlots({ _: 2 }, [
+      return openBlock(), createBlock(RuiDialog, mergeProps({
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        "bottom-sheet": ""
+      }, _ctx.$attrs, {
+        persistent: __props.persistent,
+        width: __props.width,
+        "max-width": __props.maxWidth
+      }), createSlots({ _: 2 }, [
         renderList(Object.keys(_ctx.$slots), (slot) => {
           return {
             name: slot,
@@ -24,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           };
         })
-      ]), 1040);
+      ]), 1040, ["modelValue", "persistent", "width", "max-width"]);
     };
   }
 });

package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBottomSheet.vue.js","sources":["../../../../src/components/overlays/bottom-sheet/RuiBottomSheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiDialog from '@/components/overlays/dialog/RuiDialog.vue';\n\n// keep these props in sync with Dialog props\nexport interface BottomSheetProps {\n  modelValue?: boolean;\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiBottomSheet',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<BottomSheetProps>(), {\n  modelValue: false,\n  persistent: false,\n});\n</script>\n\n<template>\n  <RuiDialog\n    bottom-sheet\n    v-bind=\"{ ...props, ...$attrs }\"\n  >\n    <template\n      v-for=\"slot in Object.keys($slots)\"\n      #[slot]=\"scope\"\n    >\n      <slot\n        v-bind=\"scope\"\n        :name=\"slot\"\n      />\n    </template>\n  </RuiDialog>\n</template>\n"],"names":["_createBlock","_mergeProps","$attrs","_createSlots","_renderList","$slots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;;;;;;;;;AAgBA,UAAM,QAAQ;;0BAOZA,YAaY,WAbZC,WAaY,EAZV,gBAAA,MAAY,EAAA,GACC,OAAK,GAAKC,KAAAA,OAAAA,CAAM,GAAAC,YAAA,EAAA,GAAA,KAAA;AAAA,QAGZC,WAAA,OAAO,KAAKC,KAAAA,MAAM,IAA1B,SAAI;;kBACV;AAAA,YAED,IAAAC,QAAA,CAFS,UAAK;AAAA,cAEdC,WAGE,KAAA,QADO,MAAIC,eAAAC,mBADH,KAAK,CAAA,CAAA;AAAA,YAAA;;;;;;;"}
+{"version":3,"file":"RuiBottomSheet.vue.js","sources":["../../../../src/components/overlays/bottom-sheet/RuiBottomSheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiDialog from '@/components/overlays/dialog/RuiDialog.vue';\n\n// keep these props in sync with Dialog props\nexport interface BottomSheetProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiBottomSheet',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst { persistent = false, width, maxWidth } = defineProps<BottomSheetProps>();\n</script>\n\n<template>\n  <RuiDialog\n    v-model=\"modelValue\"\n    bottom-sheet\n    v-bind=\"$attrs\"\n    :persistent=\"persistent\"\n    :width=\"width\"\n    :max-width=\"maxWidth\"\n  >\n    <template\n      v-for=\"slot in Object.keys($slots)\"\n      #[slot]=\"scope\"\n    >\n      <slot\n        v-bind=\"scope\"\n        :name=\"slot\"\n      />\n    </template>\n  </RuiDialog>\n</template>\n"],"names":["_useModel","_openBlock","_createBlock","_mergeProps","$attrs","_renderList","$slots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,UAAM,aAAaA,8BAAuC;;AAMxD,aAAAC,UAAA,GAAAC,YAiBY,WAjBZC,WAiBY;AAAA,oBAhBD,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QACnB,gBAAA;AAAA,MAAA,GACQC,KAAAA,QAAM;AAAA,QACb,YAAY,QAAA;AAAA,QACZ,OAAO,QAAA;AAAA,QACP,aAAW,QAAA;AAAA,MAAA;QAGKC,WAAA,OAAO,KAAKC,KAAAA,MAAM,IAA1B,SAAI;;kBACV;AAAA,YAED,IAAAC,QAAA,CAFS,UAAK;AAAA,cAEdC,WAGE,KAAA,QADO,MAAIC,eAAAC,mBADH,KAAK,CAAA,CAAA;AAAA,YAAA;;;;;;;"}

package/dist/components/overlays/dialog/RuiDialog.vue.d.ts

@@ -1,46 +1,40 @@
 export interface DialogProps {
-    modelValue?: boolean;
     persistent?: boolean;
     width?: string | number;
     maxWidth?: string | number;
     bottomSheet?: boolean;
-    contentClass?: any;
+    contentClass?: string | string[] | Record<string, boolean>;
     zIndex?: string | number;
     ariaLabel?: string;
 }
-declare function close(): void;
-declare var __VLS_1: {
-    attrs: {
-        onClick: () => void;
-    };
-    isOpen: boolean;
-}, __VLS_21: {
-    isOpen: true;
-    close: typeof close;
+type __VLS_Props = DialogProps;
+type __VLS_Slots = {
+    activator?: (props: {
+        attrs: {
+            onClick: () => void;
+        };
+        isOpen: boolean;
+    }) => any;
+    default?: (props: {
+        isOpen: boolean;
+        close: () => void;
+    }) => any;
 };
-type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_21) => any;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
 };
-declare const __VLS_base: import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: boolean) => any;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
     closed: () => any;
     "click:outside": () => any;
     "click:esc": () => any;
-}, string, import("vue").PublicProps, Readonly<DialogProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClosed?: (() => any) | undefined;
     "onClick:outside"?: (() => any) | undefined;
     "onClick:esc"?: (() => any) | undefined;
-}>, {
-    modelValue: boolean;
-    width: string | number;
-    contentClass: any;
-    persistent: boolean;
-    zIndex: string | number;
-    bottomSheet: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/overlays/dialog/RuiDialog.vue2.js

@@ -1,7 +1,6 @@
-import { defineComponent, toRefs, ref, nextTick, watch, computed, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, renderSlot, createBlock, Teleport, mergeProps, withKeys, withModifiers, createVNode, Transition, withCtx, normalizeClass, createCommentVNode, normalizeStyle } from "vue";
+import { defineComponent, useModel, ref, useTemplateRef, computed, watch, nextTick, onBeforeUnmount, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, renderSlot, createBlock, Teleport, mergeProps, withKeys, withModifiers, createVNode, Transition, withCtx, normalizeClass, createCommentVNode, normalizeStyle, mergeModels } from "vue";
 import { transformPropsUnit, getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
-import { watchImmediate } from "@vueuse/core";
-import { set, get } from "@vueuse/shared";
+import { get, set } from "@vueuse/shared";
 const _hoisted_1 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -9,8 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "RuiDialog",
-  props: {
-    modelValue: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     persistent: { type: Boolean, default: false },
     width: { default: "98%" },
     maxWidth: {},
@@ -18,66 +16,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     contentClass: { default: "" },
     zIndex: { default: 9999 },
     ariaLabel: {}
-  },
-  emits: ["update:model-value", "closed", "click:outside", "click:esc"],
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["closed", "click:outside", "click:esc"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
     const emit = __emit;
-    const {
-      modelValue,
-      width,
-      maxWidth,
-      bottomSheet
-    } = toRefs(props);
     const internalValue = ref(false);
     const isOpen = ref(false);
-    watchImmediate(modelValue, (value) => {
-      nextTick(() => {
-        set(internalValue, value);
-      });
-    });
-    watch(internalValue, (value) => {
-      if (value) {
-        nextTick(() => {
-          set(isOpen, value);
-        });
-      } else {
-        setTimeout(() => {
-          set(isOpen, value);
-        }, 100);
-      }
-    });
-    function onUpdateModelValue(value) {
-      emit("update:model-value", value);
-      if (!value)
-        emit("closed");
-    }
-    watch(isOpen, (isOpen2) => {
-      if (isOpen2) {
-        onUpdateModelValue(isOpen2);
-        set(internalValue, isOpen2);
-      } else {
-        setTimeout(() => {
-          onUpdateModelValue(isOpen2);
-          set(internalValue, isOpen2);
-        }, 100);
-      }
-    });
-    function close() {
-      set(isOpen, false);
-    }
+    const contentRef = useTemplateRef("contentRef");
     const style = computed(() => ({
-      width: transformPropsUnit(get(width)),
-      maxWidth: transformPropsUnit(get(maxWidth))
+      width: transformPropsUnit(__props.width),
+      maxWidth: transformPropsUnit(__props.maxWidth)
     }));
-    const contentRef = ref();
-    watch(contentRef, (contentRef2) => {
-      if (contentRef2) {
-        nextTick(() => {
-          contentRef2.focus();
-        });
-      }
-    });
     const dialogAttrs = computed(() => ({
       onClick: () => {
         const newValue = !get(internalValue);
@@ -86,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }));
     const contentTransition = computed(() => {
-      if (!get(bottomSheet)) {
+      if (!__props.bottomSheet) {
         return {
           enterFromClass: "opacity-0 scale-75",
           enterActiveClass: "ease-out duration-150",
@@ -105,18 +58,82 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         leaveToClass: "translate-y-full"
       };
     });
+    function onUpdateModelValue(value) {
+      set(modelValue, value);
+      if (!value)
+        emit("closed");
+    }
+    function close() {
+      set(isOpen, false);
+    }
     function onEscClick() {
-      if (!props.persistent) {
+      if (!__props.persistent) {
         close();
       }
       emit("click:esc");
     }
     function onClickOutside() {
-      if (!props.persistent) {
+      if (!__props.persistent) {
         close();
       }
       emit("click:outside");
     }
+    watch(
+      modelValue,
+      (value) => {
+        nextTick(() => {
+          set(internalValue, value);
+        });
+      },
+      { immediate: true }
+    );
+    let internalValueTimeoutId;
+    let isOpenTimeoutId;
+    watch(internalValue, (value) => {
+      if (internalValueTimeoutId !== void 0) {
+        clearTimeout(internalValueTimeoutId);
+        internalValueTimeoutId = void 0;
+      }
+      if (value) {
+        nextTick(() => {
+          set(isOpen, value);
+        });
+      } else {
+        internalValueTimeoutId = setTimeout(() => {
+          set(isOpen, value);
+          internalValueTimeoutId = void 0;
+        }, 100);
+      }
+    });
+    watch(isOpen, (isOpen2) => {
+      if (isOpenTimeoutId !== void 0) {
+        clearTimeout(isOpenTimeoutId);
+        isOpenTimeoutId = void 0;
+      }
+      if (isOpen2) {
+        onUpdateModelValue(isOpen2);
+        set(internalValue, isOpen2);
+      } else {
+        isOpenTimeoutId = setTimeout(() => {
+          onUpdateModelValue(isOpen2);
+          set(internalValue, isOpen2);
+          isOpenTimeoutId = void 0;
+        }, 100);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (internalValueTimeoutId !== void 0)
+        clearTimeout(internalValueTimeoutId);
+      if (isOpenTimeoutId !== void 0)
+        clearTimeout(isOpenTimeoutId);
+    });
+    watch(contentRef, (contentRef2) => {
+      if (contentRef2) {
+        nextTick(() => {
+          contentRef2.focus();
+        });
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
         renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ attrs: unref(dialogAttrs), isOpen: unref(isOpen) }))),
@@ -159,7 +176,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "data-id": "content",
                   style: normalizeStyle(unref(style)),
                   tabindex: "0",
-                  class: normalizeClass([_ctx.$style.content, __props.contentClass, { [_ctx.$style.center]: !unref(bottomSheet) }])
+                  class: normalizeClass([_ctx.$style.content, __props.contentClass, { [_ctx.$style.center]: !__props.bottomSheet }])
                 }, [
                   renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ isOpen: unref(isOpen), close })))
                 ], 6)) : createCommentVNode("", true)

package/dist/components/overlays/dialog/RuiDialog.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDialog.vue2.js","sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\n\nexport interface DialogProps {\n  modelValue?: boolean;\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  bottomSheet?: boolean;\n  contentClass?: any;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  modelValue: false,\n  persistent: false,\n  width: '98%',\n  bottomSheet: false,\n  contentClass: '',\n  zIndex: 9999,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n  (e: 'click:outside'): void;\n  (e: 'click:esc'): void;\n}>();\n\nconst {\n  modelValue,\n  width,\n  maxWidth,\n  bottomSheet,\n} = toRefs(props);\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\n\nwatchImmediate(modelValue, (value) => {\n  nextTick(() => {\n    set(internalValue, value);\n  });\n});\n\nwatch(internalValue, (value) => {\n  if (value) {\n    nextTick(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    setTimeout(() => {\n      set(isOpen, value);\n    }, 100);\n  }\n});\n\nfunction onUpdateModelValue(value: boolean) {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\n\nwatch(isOpen, (isOpen) => {\n  if (isOpen) {\n    onUpdateModelValue(isOpen);\n    set(internalValue, isOpen);\n  }\n  else {\n    setTimeout(() => {\n      onUpdateModelValue(isOpen);\n      set(internalValue, isOpen);\n    }, 100);\n  }\n});\n\nfunction close() {\n  set(isOpen, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n  maxWidth: transformPropsUnit(get(maxWidth)),\n}));\n\nconst contentRef = ref<HTMLDivElement>();\n\nwatch(contentRef, (contentRef) => {\n  if (contentRef) {\n    nextTick(() => {\n      contentRef.focus();\n    });\n  }\n});\n\nconst dialogAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n\nconst contentTransition = computed(() => {\n  if (!get(bottomSheet)) {\n    return {\n      enterFromClass: 'opacity-0 scale-75',\n      enterActiveClass: 'ease-out duration-150',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'ease-in duration-100',\n      leaveToClass: 'opacity-0 scale-75',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'ease-out duration-150',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'ease-in duration-100',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction onEscClick() {\n  if (!props.persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside() {\n  if (!props.persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"isOpen || internalValue\"\n        :class=\"$style.wrapper\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"ease-out duration-150\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"ease-in duration-100\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"isOpen && internalValue\"\n            data-id=\"overlay\"\n            :class=\"$style.overlay\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition v-bind=\"contentTransition\">\n          <div\n            v-if=\"isOpen && internalValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :class=\"[$style.content, contentClass, { [$style.center]: !bottomSheet }]\"\n          >\n            <slot v-bind=\"{ isOpen, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply fixed w-full h-full top-0 left-0;\n}\n\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5];\n}\n\n.content {\n  @apply absolute left-1/2 bottom-0 transform -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh];\n\n  &.center {\n    @apply top-1/2 -translate-y-1/2 bottom-auto;\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n}\n</style>\n"],"names":["isOpen","contentRef","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_renderSlot","_createBlock","_Teleport","_openBlock","_mergeProps","$style","_createVNode","_Transition","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"RuiDialog.vue2.js","sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  bottomSheet?: boolean;\n  contentClass?: string | string[] | Record<string, boolean>;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  bottomSheet = false,\n  contentClass = '',\n  zIndex = 9999,\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth),\n}));\n\nconst dialogAttrs = computed<{ onClick: () => void }>(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-75',\n      enterActiveClass: 'ease-out duration-150',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'ease-in duration-100',\n      leaveToClass: 'opacity-0 scale-75',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'ease-out duration-150',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'ease-in duration-100',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction onUpdateModelValue(value: boolean): void {\n  set(modelValue, value);\n\n  if (!value)\n    emit('closed');\n}\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nwatch(\n  modelValue,\n  (value) => {\n    nextTick(() => {\n      set(internalValue, value);\n    });\n  },\n  { immediate: true },\n);\n\nlet internalValueTimeoutId: ReturnType<typeof setTimeout> | undefined;\nlet isOpenTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\nwatch(internalValue, (value) => {\n  if (internalValueTimeoutId !== undefined) {\n    clearTimeout(internalValueTimeoutId);\n    internalValueTimeoutId = undefined;\n  }\n  if (value) {\n    nextTick(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    internalValueTimeoutId = setTimeout(() => {\n      set(isOpen, value);\n      internalValueTimeoutId = undefined;\n    }, 100);\n  }\n});\n\nwatch(isOpen, (isOpen) => {\n  if (isOpenTimeoutId !== undefined) {\n    clearTimeout(isOpenTimeoutId);\n    isOpenTimeoutId = undefined;\n  }\n  if (isOpen) {\n    onUpdateModelValue(isOpen);\n    set(internalValue, isOpen);\n  }\n  else {\n    isOpenTimeoutId = setTimeout(() => {\n      onUpdateModelValue(isOpen);\n      set(internalValue, isOpen);\n      isOpenTimeoutId = undefined;\n    }, 100);\n  }\n});\n\nonBeforeUnmount(() => {\n  if (internalValueTimeoutId !== undefined)\n    clearTimeout(internalValueTimeoutId);\n  if (isOpenTimeoutId !== undefined)\n    clearTimeout(isOpenTimeoutId);\n});\n\nwatch(contentRef, (contentRef) => {\n  if (contentRef) {\n    nextTick(() => {\n      contentRef.focus();\n    });\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"isOpen || internalValue\"\n        :class=\"$style.wrapper\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"ease-out duration-150\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"ease-in duration-100\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"isOpen && internalValue\"\n            data-id=\"overlay\"\n            :class=\"$style.overlay\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition v-bind=\"contentTransition\">\n          <div\n            v-if=\"isOpen && internalValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :class=\"[$style.content, contentClass, { [$style.center]: !bottomSheet }]\"\n          >\n            <slot v-bind=\"{ isOpen, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply fixed w-full h-full top-0 left-0;\n}\n\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5];\n}\n\n.content {\n  @apply absolute left-1/2 bottom-0 transform -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh];\n\n  &.center {\n    @apply top-1/2 -translate-y-1/2 bottom-auto;\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n}\n</style>\n"],"names":["_useModel","isOpen","contentRef","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_renderSlot","_createBlock","_Teleport","_openBlock","_mergeProps","$style","_createVNode","_Transition","_normalizeClass"],"mappings":"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"}

package/dist/components/overlays/menu/RuiMenu.vue.d.ts

@@ -1,6 +1,5 @@
 import { type PopperOptions } from '../../../composables/popper.js';
 export interface MenuProps {
-    modelValue?: boolean;
     openOnHover?: boolean;
     fullWidth?: boolean;
     disabled?: boolean;
@@ -19,42 +18,32 @@ export interface MenuProps {
     persistent?: boolean;
     disableAutoFocus?: boolean;
 }
-declare var __VLS_1: {
-    attrs: {};
-    open: boolean;
-    disabled: boolean;
-    hasError: boolean;
-    hasSuccess: boolean;
-}, __VLS_19: {
-    width: number;
+type __VLS_Props = MenuProps;
+type __VLS_Slots = {
+    activator?: (props: {
+        attrs: {
+            onMouseover?: () => void;
+            onMouseleave?: () => void;
+            onClick?: () => void;
+        };
+        open: boolean;
+        disabled: boolean;
+        hasError: boolean;
+        hasSuccess: boolean;
+    }) => any;
+    default?: (props: {
+        width: number;
+    }) => any;
 };
-type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_19) => any;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
 };
-declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
-}>, {
-    disabled: boolean;
-    modelValue: boolean;
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-    openOnHover: boolean;
-    fullWidth: boolean;
-    openDelay: number;
-    closeDelay: number;
-    popper: PopperOptions;
-    wrapperClass: string | object | string[];
-    menuClass: string | object | string[];
-    closeOnContentClick: boolean;
-    persistOnActivatorClick: boolean;
-    persistent: boolean;
-    disableAutoFocus: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: 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;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;