@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/overlays/menu/RuiMenu.vue2.js

@@ -1,18 +1,17 @@
-import { defineComponent, toRefs, ref, watch, computed, createElementBlock, openBlock, withKeys, withModifiers, unref, createElementVNode, createBlock, createCommentVNode, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, Teleport, createVNode, TransitionGroup, withCtx, mergeProps, nextTick } from "vue";
+import { defineComponent, useModel, ref, useTemplateRef, toRef, computed, watch, openBlock, createElementBlock, withKeys, withModifiers, unref, createElementVNode, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createBlock, Teleport, createVNode, TransitionGroup, withCtx, mergeProps, createCommentVNode, mergeModels, nextTick } from "vue";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
 import { usePopper } from "../../../composables/popper.js";
-import { useElementSize, onClickOutside } from "@vueuse/core";
-import { set, get } from "@vueuse/shared";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
-const _hoisted_1 = ["data-menu-disabled"];
+import { useElementSize, onClickOutside } from "@vueuse/core";
+import { get, set } from "@vueuse/shared";
+const _hoisted_1 = ["data-menu-disabled", "aria-expanded"];
 const FOCUSABLE_ELEMENTS_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiMenu"
   },
   __name: "RuiMenu",
-  props: {
-    modelValue: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     openOnHover: { type: Boolean, default: false },
     fullWidth: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
@@ -23,32 +22,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     menuClass: { default: "" },
     closeOnContentClick: { type: Boolean, default: false },
     persistOnActivatorClick: { type: Boolean, default: false },
-    hint: { default: void 0 },
+    hint: {},
     errorMessages: { default: () => [] },
     successMessages: { default: () => [] },
-    showDetails: { type: Boolean },
-    dense: { type: Boolean },
+    showDetails: { type: Boolean, default: false },
+    dense: { type: Boolean, default: false },
     persistent: { type: Boolean, default: false },
     disableAutoFocus: { type: Boolean, default: false }
-  },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const {
-      modelValue,
-      closeDelay,
-      openDelay,
-      popper,
-      disabled,
-      persistOnActivatorClick,
-      closeOnContentClick,
-      openOnHover,
-      errorMessages,
-      successMessages,
-      persistent,
-      disableAutoFocus
-    } = toRefs(props);
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const click = ref(false);
+    const menuContent = useTemplateRef("menuContent");
     const {
       reference: activator,
       popper: menu,
@@ -60,12 +49,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onClose,
       onPopperLeave,
       updatePopper
-    } = usePopper(popper, disabled, openDelay, closeDelay);
+    } = usePopper(
+      toRef(() => __props.popper),
+      toRef(() => __props.disabled),
+      toRef(() => __props.openDelay),
+      toRef(() => __props.closeDelay)
+    );
     const { width } = useElementSize(activator);
-    const click = ref(false);
-    const menuContent = ref();
+    const { hasError, hasSuccess } = useFormTextDetail(
+      toRef(() => __props.errorMessages),
+      toRef(() => __props.successMessages)
+    );
+    const baseMenuAttrs = computed(() => {
+      if (__props.disabled)
+        return {};
+      const clickVal = get(click);
+      return {
+        onMouseover: () => {
+          if (__props.openOnHover)
+            onOpen();
+        },
+        onMouseleave: () => {
+          if (__props.openOnHover && !clickVal)
+            onClose();
+        }
+      };
+    });
+    const menuAttrs = computed(() => {
+      if (__props.disabled)
+        return {};
+      return { ...get(baseMenuAttrs), onClick: checkClick };
+    });
     function focusMenu() {
-      if (get(disableAutoFocus))
+      if (__props.disableAutoFocus)
         return;
       nextTick(() => {
         const content = get(menuContent);
@@ -79,13 +95,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       onClose();
       set(click, false);
-      if (!get(disableAutoFocus)) {
+      if (!__props.disableAutoFocus) {
         nextTick(() => {
           const activatorEl = get(activator);
           if (activatorEl) {
-            const focusableEl = activatorEl.querySelector(
-              FOCUSABLE_ELEMENTS_SELECTOR
-            );
+            const focusableEl = activatorEl.querySelector(FOCUSABLE_ELEMENTS_SELECTOR);
             if (focusableEl) {
               focusableEl.focus();
             }
@@ -95,7 +109,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function checkClick() {
       if (get(open) && get(click)) {
-        if (!get(persistOnActivatorClick))
+        if (!__props.persistOnActivatorClick)
           onLeave();
       } else {
         onOpen();
@@ -103,6 +117,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     watch(modelValue, (value) => {
+      if (get(open) === value)
+        return;
       if (value) {
         onOpen();
         set(click, true);
@@ -111,56 +127,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     watch(open, (open2) => {
-      emit("update:model-value", open2);
+      set(modelValue, open2);
       if (open2) {
         focusMenu();
       }
     });
-    onClickOutside(menu, () => {
-      if (get(open) && !get(persistent))
-        onLeave();
-    }, { ignore: [activator] });
-    const baseMenuAttrs = computed(() => {
-      if (get(disabled))
-        return {};
-      const openOnHoverVal = get(openOnHover);
-      const clickVal = get(click);
-      return {
-        onMouseover: () => {
-          if (openOnHoverVal)
-            onOpen();
-        },
-        onMouseleave: () => {
-          if (openOnHoverVal && !clickVal)
-            onClose();
-        }
-      };
-    });
-    const menuAttrs = computed(() => {
-      if (get(disabled))
-        return {};
-      return { ...get(baseMenuAttrs), onClick: checkClick };
-    });
-    const { hasError, hasSuccess } = useFormTextDetail(
-      errorMessages,
-      successMessages
+    onClickOutside(
+      menu,
+      () => {
+        if (get(open) && !__props.persistent)
+          onLeave();
+      },
+      { ignore: [activator] }
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         onKeydown: [
           _cache[5] || (_cache[5] = withKeys(withModifiers(($event) => onLeave(), ["stop"]), ["esc"])),
-          _cache[6] || (_cache[6] = withKeys(($event) => !unref(disableAutoFocus) && unref(open) ? void 0 : null, ["tab"]))
+          _cache[6] || (_cache[6] = withKeys(($event) => !__props.disableAutoFocus && unref(open) ? void 0 : null, ["tab"]))
         ]
       }, [
         createElementVNode("div", {
           ref_key: "activator",
           ref: activator,
           class: normalizeClass([_ctx.$style.wrapper, __props.wrapperClass, { "w-full": __props.fullWidth }]),
-          "data-menu-disabled": unref(disabled)
+          "data-menu-disabled": __props.disabled,
+          "aria-haspopup": "true",
+          "aria-expanded": unref(open)
         }, [
-          renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ attrs: unref(menuAttrs), open: unref(open), disabled: unref(disabled), hasError: unref(hasError), hasSuccess: unref(hasSuccess) })))
+          renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ attrs: unref(menuAttrs), open: unref(open), disabled: __props.disabled, hasError: unref(hasError), hasSuccess: unref(hasSuccess) })))
         ], 10, _hoisted_1),
-        !unref(disabled) ? (openBlock(), createBlock(Teleport, {
+        !__props.disabled ? (openBlock(), createBlock(Teleport, {
           key: 0,
           to: "body"
         }, [
@@ -168,13 +165,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 0,
             ref_key: "menu",
             ref: menu,
-            class: normalizeClass([
-              _ctx.$style.menu,
-              __props.menuClass,
-              _ctx.$style[`menu__${unref(popper)?.strategy ?? "absolute"}`]
-            ]),
+            class: normalizeClass([_ctx.$style.menu, __props.menuClass, _ctx.$style[`menu__${__props.popper?.strategy ?? "absolute"}`]]),
             role: "menu",
-            onClick: _cache[3] || (_cache[3] = ($event) => unref(closeOnContentClick) ? onLeave() : void 0),
+            onClick: _cache[3] || (_cache[3] = ($event) => __props.closeOnContentClick ? onLeave() : void 0),
             onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => onLeave(), ["stop"]), ["esc"]))
           }, [
             createVNode(TransitionGroup, {
@@ -207,8 +200,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.showDetails ? (openBlock(), createBlock(_sfc_main$1, {
           key: 1,
           class: normalizeClass(["pt-1", [__props.dense ? "px-2" : "px-4"]]),
-          "error-messages": unref(errorMessages),
-          "success-messages": unref(successMessages),
+          "error-messages": __props.errorMessages,
+          "success-messages": __props.successMessages,
           hint: __props.hint
         }, null, 8, ["class", "error-messages", "success-messages", "hint"])) : createCommentVNode("", true)
       ], 32);

package/dist/components/overlays/menu/RuiMenu.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenu.vue2.js","sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type PopperOptions, usePopper } from '@/composables/popper';\n\nexport interface MenuProps {\n  modelValue?: boolean;\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  popper?: PopperOptions;\n  wrapperClass?: string | object | string[];\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst props = withDefaults(defineProps<MenuProps>(), {\n  modelValue: false,\n  openOnHover: false,\n  disabled: false,\n  fullWidth: false,\n  openDelay: 0,\n  closeDelay: 0,\n  popper: () => ({}),\n  wrapperClass: '',\n  menuClass: '',\n  closeOnContentClick: false,\n  persistOnActivatorClick: false,\n  hint: undefined,\n  errorMessages: () => [],\n  successMessages: () => [],\n  persistent: false,\n  disableAutoFocus: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n}>();\n\nconst {\n  modelValue,\n  closeDelay,\n  openDelay,\n  popper,\n  disabled,\n  persistOnActivatorClick,\n  closeOnContentClick,\n  openOnHover,\n  errorMessages,\n  successMessages,\n  persistent,\n  disableAutoFocus,\n} = toRefs(props);\n\nconst {\n  reference: activator,\n  popper: menu,\n  open,\n  popperEnter,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(popper, disabled, openDelay, closeDelay);\n\nconst { width } = useElementSize(activator);\n\nconst click = ref<boolean>(false);\nconst menuContent = ref<HTMLElement>();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusMenu() {\n  if (get(disableAutoFocus))\n    return;\n\n  nextTick(() => {\n    const content = get(menuContent);\n    if (!content)\n      return;\n\n    // Focus on the menu container itself\n    content.focus();\n  });\n}\n\nfunction onLeave(event?: KeyboardEvent) {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (!get(disableAutoFocus)) {\n    nextTick(() => {\n      const activatorEl = get(activator);\n      if (activatorEl) {\n        const focusableEl = activatorEl.querySelector<HTMLElement>(\n          FOCUSABLE_ELEMENTS_SELECTOR,\n        );\n        if (focusableEl) {\n          focusableEl.focus();\n        }\n      }\n    });\n  }\n}\n\nfunction checkClick() {\n  if (get(open) && get(click)) {\n    if (!get(persistOnActivatorClick))\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  emit('update:model-value', open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !get(persistent))\n    onLeave();\n}, { ignore: [activator] });\n\nconst baseMenuAttrs = computed(() => {\n  if (get(disabled))\n    return {};\n\n  const openOnHoverVal = get(openOnHover);\n  const clickVal = get(click);\n  return {\n    onMouseover: () => {\n      if (openOnHoverVal)\n        onOpen();\n    },\n    onMouseleave: () => {\n      if (openOnHoverVal && !clickVal)\n        onClose();\n    },\n  };\n});\n\nconst menuAttrs = computed(() => {\n  if (get(disabled))\n    return {};\n\n  return { ...get(baseMenuAttrs), onClick: checkClick };\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n</script>\n\n<template>\n  <div\n    @keydown.esc.stop=\"onLeave()\"\n    @keydown.tab=\"!disableAutoFocus && open ? undefined : null\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"[$style.wrapper, wrapperClass, { 'w-full': fullWidth }]\"\n      :data-menu-disabled=\"disabled\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"popperEnter\"\n        ref=\"menu\"\n        :class=\"[\n          $style.menu,\n          menuClass,\n          $style[`menu__${popper?.strategy ?? 'absolute'}`],\n        ]\"\n        role=\"menu\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc.stop=\"onLeave()\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePopper()\"\n          @after-leave=\"leavePending ? onPopperLeave() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            role=\"menu-content\"\n            :class=\"$style.base\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      class=\"pt-1\"\n      :class=\"[dense ? 'px-2' : 'px-4']\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply relative inline-flex max-w-full;\n}\n\n.menu {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply rounded overflow-hidden shadow-8;\n    @apply bg-white text-rui-text;\n\n    &:focus {\n      @apply outline-none;\n    }\n  }\n}\n\n:global(.dark) {\n  .menu {\n    .base {\n      @apply bg-[#2E2E2E];\n    }\n  }\n}\n</style>\n"],"names":["open","_createElementBlock","_unref","_createElementVNode","$style","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_normalizeClass","_createVNode","_TransitionGroup","_openBlock","_mergeProps","RuiFormTextDetail"],"mappings":"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"}
+{"version":3,"file":"RuiMenu.vue2.js","sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type PopperOptions, usePopper } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  popper?: PopperOptions;\n  wrapperClass?: string | object | string[];\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  popper = {},\n  wrapperClass = '',\n  menuClass = '',\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popper: menu,\n  open,\n  popperEnter,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(\n  toRef(() => popper),\n  toRef(() => disabled),\n  toRef(() => openDelay),\n  toRef(() => closeDelay),\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  toRef(() => errorMessages),\n  toRef(() => successMessages),\n);\n\nconst baseMenuAttrs = computed<{ onMouseover?: () => void; onMouseleave?: () => void }>(() => {\n  if (disabled)\n    return {};\n\n  const clickVal = get(click);\n  return {\n    onMouseover: () => {\n      if (openOnHover)\n        onOpen();\n    },\n    onMouseleave: () => {\n      if (openOnHover && !clickVal)\n        onClose();\n    },\n  };\n});\n\nconst menuAttrs = computed<{\n  onMouseover?: () => void;\n  onMouseleave?: () => void;\n  onClick?: () => void;\n}>(() => {\n  if (disabled)\n    return {};\n\n  return { ...get(baseMenuAttrs), onClick: checkClick };\n});\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => {\n    const content = get(menuContent);\n    if (!content)\n      return;\n\n    // Focus on the menu container itself\n    content.focus();\n  });\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (!disableAutoFocus) {\n    nextTick(() => {\n      const activatorEl = get(activator);\n      if (activatorEl) {\n        const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n        if (focusableEl) {\n          focusableEl.focus();\n        }\n      }\n    });\n  }\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(\n  menu,\n  () => {\n    if (get(open) && !persistent)\n      onLeave();\n  },\n  { ignore: [activator] },\n);\n</script>\n\n<template>\n  <div\n    @keydown.esc.stop=\"onLeave()\"\n    @keydown.tab=\"!disableAutoFocus && open ? undefined : null\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"[$style.wrapper, wrapperClass, { 'w-full': fullWidth }]\"\n      :data-menu-disabled=\"disabled\"\n      aria-haspopup=\"true\"\n      :aria-expanded=\"open\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"popperEnter\"\n        ref=\"menu\"\n        :class=\"[$style.menu, menuClass, $style[`menu__${popper?.strategy ?? 'absolute'}`]]\"\n        role=\"menu\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc.stop=\"onLeave()\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePopper()\"\n          @after-leave=\"leavePending ? onPopperLeave() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            role=\"menu-content\"\n            :class=\"$style.base\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      class=\"pt-1\"\n      :class=\"[dense ? 'px-2' : 'px-4']\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply relative inline-flex max-w-full;\n}\n\n.menu {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply rounded overflow-hidden shadow-8;\n    @apply bg-white text-rui-text;\n\n    &:focus {\n      @apply outline-none;\n    }\n  }\n}\n\n:global(.dark) {\n  .menu {\n    .base {\n      @apply bg-[#2E2E2E];\n    }\n  }\n}\n</style>\n"],"names":["_useModel","open","_createElementBlock","_unref","_createElementVNode","$style","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_normalizeClass","_createVNode","_TransitionGroup","_openBlock","_mergeProps","RuiFormTextDetail"],"mappings":"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"}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue.d.ts

@@ -1,5 +1,4 @@
 export interface NavigationDrawerProps {
-    modelValue?: boolean;
     temporary?: boolean;
     stateless?: boolean;
     width?: string | number;
@@ -7,40 +6,34 @@ export interface NavigationDrawerProps {
     overlay?: boolean;
     position?: 'left' | 'right';
     contentClass?: string | object | string[];
+    ariaLabel?: string;
 }
-declare function close(): void;
-declare var __VLS_1: {
-    open: boolean;
-    attrs: {
-        onClick: () => void;
-    };
-}, __VLS_15: {
-    attrs: {
-        onClick: () => void;
-    };
-    close: typeof close;
+type __VLS_Props = NavigationDrawerProps;
+type __VLS_Slots = {
+    activator?: (props: {
+        open: boolean;
+        attrs: {
+            onClick: () => void;
+        };
+    }) => any;
+    default?: (props: {
+        attrs: {
+            onClick: () => void;
+        };
+        close: () => void;
+    }) => any;
 };
-type __VLS_Slots = {} & {
-    activator?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_15) => any;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
 };
-declare const __VLS_base: import("vue").DefineComponent<NavigationDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+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;
-    "update:model-value": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<NavigationDrawerProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClosed?: (() => any) | undefined;
-    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
-}>, {
-    width: string | number;
-    modelValue: boolean;
-    contentClass: string | object | string[];
-    overlay: boolean;
-    position: "left" | "right";
-    temporary: boolean;
-    stateless: boolean;
-    miniVariant: 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/navigation-drawer/RuiNavigationDrawer.vue2.js

@@ -1,91 +1,117 @@
-import { defineComponent, toRefs, ref, nextTick, watch, computed, createElementBlock, openBlock, renderSlot, createBlock, normalizeProps, guardReactiveProps, unref, Teleport, createCommentVNode, Transition, withCtx, withModifiers, normalizeClass, mergeProps } from "vue";
+import { defineComponent, useModel, ref, useTemplateRef, computed, watch, nextTick, onBeforeUnmount, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, unref, createBlock, Teleport, Transition, withCtx, withModifiers, normalizeClass, createCommentVNode, mergeProps, mergeModels } from "vue";
 import { transformPropsUnit, getRootAttrs } from "../../../utils/helpers.js";
-import { watchImmediate, onClickOutside } from "@vueuse/core";
-import { set, get } from "@vueuse/shared";
+import { get, set } from "@vueuse/shared";
+import { onClickOutside } from "@vueuse/core";
+const _hoisted_1 = ["aria-label", "aria-hidden"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiNavigationDrawer",
     inheritAttrs: false
   },
   __name: "RuiNavigationDrawer",
-  props: {
-    modelValue: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     temporary: { type: Boolean, default: false },
     stateless: { type: Boolean, default: false },
     width: { default: 360 },
     miniVariant: { type: Boolean, default: false },
     overlay: { type: Boolean, default: false },
     position: { default: "left" },
-    contentClass: { default: "" }
-  },
-  emits: ["update:model-value", "closed"],
+    contentClass: { default: "" },
+    ariaLabel: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["closed"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
     const emit = __emit;
-    const {
-      modelValue,
-      position,
-      miniVariant,
-      width
-    } = toRefs(props);
+    const internalValue = ref(false);
+    const isOpen = ref(false);
+    const content = useTemplateRef("content");
+    const style = computed(() => ({
+      width: transformPropsUnit(__props.width)
+    }));
+    const activatorAttrs = computed(() => ({
+      onClick: () => {
+        const newValue = !get(internalValue);
+        set(internalValue, newValue);
+        onUpdateModelValue(newValue);
+      }
+    }));
     function onUpdateModelValue(value) {
-      emit("update:model-value", value);
+      set(modelValue, value);
       if (!value)
         emit("closed");
     }
-    const internalValue = ref(false);
-    const isOpen = ref(false);
-    watchImmediate(modelValue, (value) => {
-      nextTick(() => {
-        set(internalValue, value);
-      });
-    });
+    function close() {
+      set(isOpen, false);
+    }
+    watch(
+      modelValue,
+      (value) => {
+        nextTick(() => {
+          set(internalValue, value);
+        });
+      },
+      { immediate: true }
+    );
+    let internalValueTimeoutId;
+    let isOpenTimeoutId;
+    let clickOutsideTimeoutId;
     watch(internalValue, (value) => {
+      if (internalValueTimeoutId !== void 0) {
+        clearTimeout(internalValueTimeoutId);
+        internalValueTimeoutId = void 0;
+      }
       if (value) {
         window.requestAnimationFrame(() => {
           set(isOpen, value);
         });
       } else {
-        setTimeout(() => {
+        internalValueTimeoutId = setTimeout(() => {
           set(isOpen, value);
+          internalValueTimeoutId = void 0;
         }, 150);
       }
     });
     watch(isOpen, (isOpen2) => {
+      if (isOpenTimeoutId !== void 0) {
+        clearTimeout(isOpenTimeoutId);
+        isOpenTimeoutId = void 0;
+      }
       if (isOpen2) {
         onUpdateModelValue(isOpen2);
         set(internalValue, isOpen2);
       } else {
-        setTimeout(() => {
+        isOpenTimeoutId = setTimeout(() => {
           onUpdateModelValue(isOpen2);
           set(internalValue, isOpen2);
+          isOpenTimeoutId = void 0;
         }, 150);
       }
     });
-    function close() {
-      set(isOpen, false);
-    }
-    const style = computed(() => ({
-      width: transformPropsUnit(get(width))
-    }));
-    const content = ref(null);
     onClickOutside(content, () => {
-      if (get(isOpen) && props.temporary && !props.stateless) {
-        setTimeout(() => {
+      if (get(isOpen) && __props.temporary && !__props.stateless) {
+        if (clickOutsideTimeoutId !== void 0)
+          clearTimeout(clickOutsideTimeoutId);
+        clickOutsideTimeoutId = setTimeout(() => {
           close();
+          clickOutsideTimeoutId = void 0;
         }, 50);
       }
     });
-    const activatorAttrs = computed(() => ({
-      onClick: () => {
-        const newValue = !get(internalValue);
-        set(internalValue, newValue);
-        onUpdateModelValue(newValue);
-      }
-    }));
+    onBeforeUnmount(() => {
+      if (internalValueTimeoutId !== void 0)
+        clearTimeout(internalValueTimeoutId);
+      if (isOpenTimeoutId !== void 0)
+        clearTimeout(isOpenTimeoutId);
+      if (clickOutsideTimeoutId !== void 0)
+        clearTimeout(clickOutsideTimeoutId);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ open: internalValue.value, attrs: unref(activatorAttrs) }))),
+        renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ open: unref(internalValue), attrs: unref(activatorAttrs) }))),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           __props.overlay ? (openBlock(), createBlock(Transition, {
             key: 0,
@@ -97,15 +123,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "leave-to-class": "opacity-0"
           }, {
             default: withCtx(() => [
-              isOpen.value && internalValue.value ? (openBlock(), createElementBlock("div", {
+              unref(isOpen) && unref(internalValue) ? (openBlock(), createElementBlock("div", {
                 key: 0,
+                "data-id": "overlay",
                 class: normalizeClass(_ctx.$style.overlay),
                 onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
               }, null, 2)) : createCommentVNode("", true)
             ]),
             _: 1
           })) : createCommentVNode("", true),
-          isOpen.value || internalValue.value || unref(miniVariant) ? (openBlock(), createElementBlock("aside", mergeProps({
+          unref(isOpen) || unref(internalValue) || __props.miniVariant ? (openBlock(), createElementBlock("aside", mergeProps({
             key: 1,
             ref_key: "content",
             ref: content,
@@ -114,16 +141,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _ctx.$style.content,
               __props.contentClass,
               {
-                [_ctx.$style.visible]: isOpen.value && internalValue.value,
-                [_ctx.$style[unref(position)]]: unref(position),
-                [_ctx.$style.mini]: unref(miniVariant),
+                [_ctx.$style.visible]: unref(isOpen) && unref(internalValue),
+                [_ctx.$style[__props.position]]: __props.position,
+                [_ctx.$style.mini]: __props.miniVariant,
                 [_ctx.$style.temporary]: __props.temporary,
                 [_ctx.$style["with-overlay"]]: __props.overlay
               }
-            ]
+            ],
+            "aria-label": __props.ariaLabel,
+            "aria-hidden": __props.miniVariant && !(unref(isOpen) && unref(internalValue)) ? "true" : void 0
           }, unref(getRootAttrs)(_ctx.$attrs)), [
             renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ attrs: unref(activatorAttrs), close })))
-          ], 16)) : createCommentVNode("", true)
+          ], 16, _hoisted_1)) : createCommentVNode("", true)
         ]))
       ]);
     };

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.vue2.js","sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang='ts'>\nimport type { MaybeElement } from '@vueuse/core';\nimport { type Ref, ref } from 'vue';\nimport { getRootAttrs } from '@/utils/helpers';\n\nexport interface NavigationDrawerProps {\n  modelValue?: boolean;\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  contentClass?: string | object | string[];\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<NavigationDrawerProps>(), {\n  modelValue: false,\n  temporary: false,\n  stateless: false,\n  width: 360,\n  miniVariant: false,\n  overlay: false,\n  position: 'left',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n}>();\n\nconst {\n  modelValue,\n  position,\n  miniVariant,\n  width,\n} = toRefs(props);\n\nfunction onUpdateModelValue(value: boolean): void {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\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    window.requestAnimationFrame(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    setTimeout(() => {\n      set(isOpen, value);\n    }, 150);\n  }\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    }, 150);\n  }\n});\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nconst content: Ref<MaybeElement | null> = ref(null);\n\nonClickOutside(content, () => {\n  if (get(isOpen) && props.temporary && !props.stateless) {\n    setTimeout(() => {\n      close();\n    }, 50);\n  }\n});\n\nconst activatorAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: internalValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\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-150\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isOpen && internalValue\"\n          :class=\"$style.overlay\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"isOpen || internalValue || miniVariant\"\n        ref=\"content\"\n        :style=\"style\"\n        :class=\"[\n          $style.content,\n          contentClass,\n          {\n            [$style.visible]: isOpen && internalValue,\n            [$style[position]]: position,\n            [$style.mini]: miniVariant,\n            [$style.temporary]: temporary,\n            [$style['with-overlay']]: overlay,\n          },\n        ]\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5] z-[10000];\n}\n\n.content {\n  @apply transition-all duration-150 ease-in-out top-0 h-full fixed text-rui-text bg-white z-[7];\n\n  &.left {\n    @apply -translate-x-full left-0;\n  }\n\n  &.right {\n    @apply translate-x-full right-0;\n  }\n\n  &.with-overlay {\n    @apply z-[10000];\n  }\n\n  &.visible {\n    @apply translate-x-0;\n  }\n\n  &.temporary {\n    &.visible {\n      @apply shadow-5;\n    }\n  }\n\n  &.mini {\n    @apply translate-x-0;\n\n    &:not(.visible) {\n      @apply w-14 #{!important};\n    }\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n\n  .content {\n    @apply bg-[#363636];\n  }\n}\n</style>\n"],"names":["isOpen","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_unref","_createBlock","_Teleport","_Transition","_normalizeClass","$style","_openBlock","_mergeProps","$attrs"],"mappings":"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"}
+{"version":3,"file":"RuiNavigationDrawer.vue2.js","sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  contentClass = '',\n  ariaLabel,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs = computed<{ onClick: () => void }>(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\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\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;\nlet clickOutsideTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\nwatch(internalValue, (value) => {\n  if (internalValueTimeoutId !== undefined) {\n    clearTimeout(internalValueTimeoutId);\n    internalValueTimeoutId = undefined;\n  }\n  if (value) {\n    window.requestAnimationFrame(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    internalValueTimeoutId = setTimeout(() => {\n      set(isOpen, value);\n      internalValueTimeoutId = undefined;\n    }, 150);\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    }, 150);\n  }\n});\n\nonClickOutside(content, () => {\n  if (get(isOpen) && temporary && !stateless) {\n    if (clickOutsideTimeoutId !== undefined)\n      clearTimeout(clickOutsideTimeoutId);\n\n    clickOutsideTimeoutId = setTimeout(() => {\n      close();\n      clickOutsideTimeoutId = undefined;\n    }, 50);\n  }\n});\n\nonBeforeUnmount(() => {\n  if (internalValueTimeoutId !== undefined)\n    clearTimeout(internalValueTimeoutId);\n  if (isOpenTimeoutId !== undefined)\n    clearTimeout(isOpenTimeoutId);\n  if (clickOutsideTimeoutId !== undefined)\n    clearTimeout(clickOutsideTimeoutId);\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: internalValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\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-150\"\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=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"isOpen || internalValue || miniVariant\"\n        ref=\"content\"\n        :style=\"style\"\n        :class=\"[\n          $style.content,\n          contentClass,\n          {\n            [$style.visible]: isOpen && internalValue,\n            [$style[position]]: position,\n            [$style.mini]: miniVariant,\n            [$style.temporary]: temporary,\n            [$style['with-overlay']]: overlay,\n          },\n        ]\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !(isOpen && internalValue) ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5] z-[10000];\n}\n\n.content {\n  @apply transition-all duration-150 ease-in-out top-0 h-full fixed text-rui-text bg-white z-[7];\n\n  &.left {\n    @apply -translate-x-full left-0;\n  }\n\n  &.right {\n    @apply translate-x-full right-0;\n  }\n\n  &.with-overlay {\n    @apply z-[10000];\n  }\n\n  &.visible {\n    @apply translate-x-0;\n  }\n\n  &.temporary {\n    &.visible {\n      @apply shadow-5;\n    }\n  }\n\n  &.mini {\n    @apply translate-x-0;\n\n    &:not(.visible) {\n      @apply w-14 #{!important};\n    }\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n\n  .content {\n    @apply bg-[#363636];\n  }\n}\n</style>\n"],"names":["_useModel","isOpen","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_unref","_createBlock","_Teleport","_Transition","_normalizeClass","$style","_openBlock","_mergeProps","$attrs"],"mappings":"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"}