@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/overlays/badge/RuiBadge.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.vue2.js","sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { logicAnd, logicOr } from '@vueuse/math';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: 'top' | 'center' | 'bottom';\n  size?: 'sm' | 'md' | 'lg';\n  rounded?: 'sm' | 'md' | 'lg' | 'full';\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  text: null,\n  icon: null,\n  modelValue: true,\n  dot: false,\n  placement: 'top',\n  left: false,\n  size: 'md',\n  rounded: 'full',\n  color: 'primary',\n  offsetX: 0,\n  offsetY: 0,\n});\n\nconst slots = useSlots();\n\nconst { modelValue, offsetX, offsetY, icon, text } = toRefs(props);\n\nconst hasIcon = logicOr(icon, slots.icon);\n\nconst hasText = logicOr(text, slots.badge);\n\nconst hasIconAndText = logicAnd(hasIcon, hasText);\n</script>\n\n<template>\n  <div :class=\"$style.wrapper\">\n    <slot />\n    <Transition\n      appear\n      enter-active-class=\"transform ease-out duration-200\"\n      enter-from-class=\"scale-0\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transform ease-in duration-150\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"[\n          $style.badge,\n          $style[color ?? 'primary'],\n          $style[`placement__${placement}`],\n          $style[`rounded__${rounded}`],\n          $style[`size__${size}`],\n          { [$style.left]: left, [$style.dot]: dot },\n        ]\"\n        aria-atomic=\"true\"\n        aria-label=\"Badge\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <span\n          v-if=\"!dot\"\n          :class=\"[\n            $style.content,\n            {\n              [$style.text_icon]: hasIconAndText,\n            },\n          ]\"\n        >\n          <slot name=\"badge\">\n            <span>\n              {{ text }}\n            </span>\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n              size=\"16\"\n              :class=\"{ 'ml-0.5': hasText }\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n$borders: full, sm, md, lg;\n$sizes: sm, md, lg;\n\n.wrapper {\n  @apply relative inline-block;\n\n  .badge {\n    @apply flex items-center justify-center text-xs font-medium absolute;\n    @apply bg-transparent text-rui-light-text;\n\n    left: calc(100% - 0.5rem + v-bind(offsetX) * 0.0625rem);\n\n    .content {\n      @apply flex items-center px-1;\n\n      &.text_icon {\n        @apply px-2;\n      }\n    }\n\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        @apply text-white bg-rui-#{$color};\n      }\n    }\n\n    @each $border in $borders {\n      &.rounded__#{$border} {\n        @apply rounded-#{$border};\n      }\n    }\n\n    &.size__sm {\n      @apply min-h-[1.25rem] min-w-[1.25rem];\n\n      &.left {\n        left: calc(-0.95rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.65rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n\n    &.size__md {\n      @apply min-h-[1.5rem] min-w-[1.5rem];\n\n      &.left {\n        left: calc(-1.05rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.75rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n\n    &.size__lg {\n      @apply min-h-[1.75rem] min-w-[1.75rem];\n\n      &.left {\n        left: calc(-1.15rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.85rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n\n    &.placement__top {\n      bottom: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n    }\n\n    &.placement__bottom {\n      top: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n    }\n\n    &.dot {\n      left: calc(100% + 0.125rem + v-bind(offsetX) * 0.0625rem);\n\n      &.default {\n        @apply bg-gray-500;\n      }\n\n      &.size__sm {\n        @apply min-w-[0.375rem] min-h-[0.375rem];\n      }\n\n      &.size__md {\n        @apply min-w-[0.5rem] min-h-[0.5rem];\n      }\n\n      &.size__lg {\n        @apply min-w-[0.625rem] min-h-[0.625rem];\n      }\n\n      &.left {\n        left: calc(-0.65rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__top {\n        bottom: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.25rem - v-bind(offsetY) * 0.0625rem);\n      }\n\n      &.placement__bottom {\n        top: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .badge {\n      @apply text-rui-text;\n\n      @each $color in c.$context-colors {\n        @if list.index((warning, success, info), $color) {\n          &.#{$color} {\n            @apply text-rui-light-text;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot","_createVNode","_Transition","_unref","_createElementVNode","_createBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,QAAQ;AAcd,UAAM,QAAQ,SAAA;AAEd,UAAM,EAAE,YAAY,SAAS,SAAS,MAAM,KAAA,IAAS,OAAO,KAAK;AAEjE,UAAM,UAAU,QAAQ,MAAM,MAAM,IAAI;AAExC,UAAM,UAAU,QAAQ,MAAM,MAAM,KAAK;AAEzC,UAAM,iBAAiB,SAAS,SAAS,OAAO;;0BAI9CA,mBAmDM,OAAA;AAAA,QAnDA,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,MAAA;QACzBC,WAAQ,KAAA,QAAA,SAAA;AAAA,QACRC,YAgDaC,YAAA;AAAA,UA/CX,QAAA;AAAA,UACA,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,UACf,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,QAAA;2BAEf,MAsCM;AAAA,YArCEC,MAAA,UAAA,kBADRN,mBAsCM,OAAA;AAAA;cApCH,OAAKC,eAAA;AAAA,gBAAcC,KAAAA,OAAO;AAAA,gBAAiBA,KAAAA,OAAO,QAAA,SAAK,SAAA;AAAA,gBAA0BA,KAAAA,qBAAqB,QAAA,SAAS,EAAA;AAAA,gBAAeA,KAAAA,mBAAmB,QAAA,OAAO,EAAA;AAAA,gBAAeA,KAAAA,gBAAgB,QAAA,IAAI,EAAA;AAAA,mBAAkBA,KAAAA,OAAO,IAAI,GAAG,QAAA,OAAOA,KAAAA,OAAO,GAAG,GAAG,QAAA,IAAA;AAAA,cAAG;cAQnP,eAAY;AAAA,cACZ,cAAW;AAAA,cACX,aAAU;AAAA,cACV,MAAK;AAAA,YAAA;eAGI,QAAA,oBADTF,mBAsBO,QAAA;AAAA;gBApBJ,OAAKC,eAAA;AAAA,kBAAgBC,KAAAA,OAAO;AAAA;qBAAsCA,KAAAA,OAAO,SAAS,GAAGI,MAAA,cAAA;AAAA,kBAAA;AAAA;;gBAOtFH,WAIO,0BAJP,MAIO;AAAA,kBAHLI,mBAEO,8BADFD,MAAA,IAAA,CAAI,GAAA,CAAA;AAAA,gBAAA;gBAGXH,WAOO,yBAPP,MAOO;AAAA,kBALGG,MAAA,IAAA,kBADRE,YAKE,SAAA;AAAA;oBAHC,MAAMF,MAAA,IAAA;AAAA,oBACP,MAAK;AAAA,oBACJ,kCAAmBA,MAAA,OAAA,GAAO;AAAA,kBAAA;;;;;;;;;;;"}
+{"version":3,"file":"RuiBadge.vue2.js","sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: 'top' | 'center' | 'bottom';\n  size?: 'sm' | 'md' | 'lg';\n  rounded?: 'sm' | 'md' | 'lg' | 'full';\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = 'top',\n  left = false,\n  size = 'md',\n  rounded = 'full',\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst hasIcon = computed<boolean>(() => !!icon || !!slots.icon);\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => get(hasIcon) && get(hasText));\n</script>\n\n<template>\n  <div :class=\"$style.wrapper\">\n    <slot />\n    <Transition\n      appear\n      enter-active-class=\"transform ease-out duration-200\"\n      enter-from-class=\"scale-0\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transform ease-in duration-150\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"[\n          $style.badge,\n          $style[color ?? 'primary'],\n          $style[`placement__${placement}`],\n          $style[`rounded__${rounded}`],\n          $style[`size__${size}`],\n          { [$style.left]: left, [$style.dot]: dot },\n        ]\"\n        aria-atomic=\"true\"\n        aria-label=\"Badge\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <span\n          v-if=\"!dot\"\n          :class=\"[\n            $style.content,\n            {\n              [$style.text_icon]: hasIconAndText,\n            },\n          ]\"\n        >\n          <slot name=\"badge\">\n            <span>\n              {{ text }}\n            </span>\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n              size=\"16\"\n              :class=\"{ 'ml-0.5': hasText }\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n$borders: full, sm, md, lg;\n$sizes: sm, md, lg;\n\n.wrapper {\n  @apply relative inline-block;\n\n  .badge {\n    @apply flex items-center justify-center text-xs font-medium absolute;\n    @apply bg-transparent text-rui-light-text;\n\n    left: calc(100% - 0.5rem + v-bind(offsetX) * 0.0625rem);\n\n    .content {\n      @apply flex items-center px-1;\n\n      &.text_icon {\n        @apply px-2;\n      }\n    }\n\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        @apply text-white bg-rui-#{$color};\n      }\n    }\n\n    @each $border in $borders {\n      &.rounded__#{$border} {\n        @apply rounded-#{$border};\n      }\n    }\n\n    &.size__sm {\n      @apply min-h-[1.25rem] min-w-[1.25rem];\n\n      &.left {\n        left: calc(-0.95rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.65rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n\n    &.size__md {\n      @apply min-h-[1.5rem] min-w-[1.5rem];\n\n      &.left {\n        left: calc(-1.05rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.75rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n\n    &.size__lg {\n      @apply min-h-[1.75rem] min-w-[1.75rem];\n\n      &.left {\n        left: calc(-1.15rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.85rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n\n    &.placement__top {\n      bottom: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n    }\n\n    &.placement__bottom {\n      top: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n    }\n\n    &.dot {\n      left: calc(100% + 0.125rem + v-bind(offsetX) * 0.0625rem);\n\n      &.default {\n        @apply bg-gray-500;\n      }\n\n      &.size__sm {\n        @apply min-w-[0.375rem] min-h-[0.375rem];\n      }\n\n      &.size__md {\n        @apply min-w-[0.5rem] min-h-[0.5rem];\n      }\n\n      &.size__lg {\n        @apply min-w-[0.625rem] min-h-[0.625rem];\n      }\n\n      &.left {\n        left: calc(-0.65rem + v-bind(offsetX) * 0.0625rem);\n      }\n\n      &.placement__top {\n        bottom: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n      }\n\n      &.placement__center {\n        top: calc(50% - 0.25rem - v-bind(offsetY) * 0.0625rem);\n      }\n\n      &.placement__bottom {\n        top: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n      }\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .badge {\n      @apply text-rui-text;\n\n      @each $color in c.$context-colors {\n        @if list.index((warning, success, info), $color) {\n          &.#{$color} {\n            @apply text-rui-light-text;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","_renderSlot","_createVNode","_Transition","_unref","_createElementVNode","_createBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAM,QAAQA,SAAA;AAMd,UAAM,UAAU,SAAkB,MAAM,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,IAAI;AAE9D,UAAM,UAAU,SAAkB,MAAM,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,KAAK;AAE/D,UAAM,iBAAiB,SAAkB,MAAM,IAAI,OAAO,KAAK,IAAI,OAAO,CAAC;;0BAIzEC,mBAmDM,OAAA;AAAA,QAnDA,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,MAAA;QACzBC,WAAQ,KAAA,QAAA,SAAA;AAAA,QACRC,YAgDaC,YAAA;AAAA,UA/CX,QAAA;AAAA,UACA,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,UACf,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,QAAA;2BAEf,MAsCM;AAAA,YArCE,QAAA,2BADRL,mBAsCM,OAAA;AAAA;cApCH,OAAKC,eAAA;AAAA,gBAAcC,KAAAA,OAAO;AAAA,gBAAiBA,KAAAA,OAAO,QAAA,SAAK,SAAA;AAAA,gBAA0BA,KAAAA,qBAAqB,QAAA,SAAS,EAAA;AAAA,gBAAeA,KAAAA,mBAAmB,QAAA,OAAO,EAAA;AAAA,gBAAeA,KAAAA,gBAAgB,QAAA,IAAI,EAAA;AAAA,mBAAkBA,KAAAA,OAAO,IAAI,GAAG,QAAA,OAAOA,KAAAA,OAAO,GAAG,GAAG,QAAA,IAAA;AAAA,cAAG;cAQnP,eAAY;AAAA,cACZ,cAAW;AAAA,cACX,aAAU;AAAA,cACV,MAAK;AAAA,YAAA;eAGI,QAAA,oBADTF,mBAsBO,QAAA;AAAA;gBApBJ,OAAKC,eAAA;AAAA,kBAAgBC,KAAAA,OAAO;AAAA;qBAAsCA,KAAAA,OAAO,SAAS,GAAGI,MAAA,cAAA;AAAA,kBAAA;AAAA;;gBAOtFH,WAIO,0BAJP,MAIO;AAAA,kBAHLI,mBAEO,8BADF,QAAA,IAAI,GAAA,CAAA;AAAA,gBAAA;gBAGXJ,WAOO,yBAPP,MAOO;AAAA,kBALG,QAAA,qBADRK,YAKE,SAAA;AAAA;oBAHC,MAAM,QAAA;AAAA,oBACP,MAAK;AAAA,oBACJ,kCAAmBF,MAAA,OAAA,GAAO;AAAA,kBAAA;;;;;;;;;;;"}

package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue.d.ts

@@ -1,17 +1,22 @@
 export interface BottomSheetProps {
-    modelValue?: boolean;
     persistent?: boolean;
     width?: string | number;
     maxWidth?: string | number;
 }
+type __VLS_Props = BottomSheetProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_10: string, __VLS_11: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<BottomSheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BottomSheetProps> & Readonly<{}>, {
-    modelValue: boolean;
-    persistent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;

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

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, 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,45 +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, {} & {
+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;
     "click:outside": () => any;
     "click:esc": () => any;
-}, string, import("vue").PublicProps, Readonly<DialogProps> & 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;
     "onClick:outside"?: (() => any) | undefined;
     "onClick:esc"?: (() => any) | undefined;
-}>, {
-    width: string | number;
-    modelValue: boolean;
-    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,81 +1,36 @@
+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 { defineComponent, toRefs, ref, nextTick, watch, computed, createElementBlock, openBlock, normalizeProps, guardReactiveProps, unref, renderSlot, createBlock, Teleport, createCommentVNode, mergeProps, withKeys, withModifiers, createVNode, Transition, withCtx, normalizeClass, normalizeStyle } from "vue";
-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({
   ...{
     name: "RuiDialog",
     inheritAttrs: false
   },
   __name: "RuiDialog",
-  props: {
-    modelValue: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     persistent: { type: Boolean, default: false },
     width: { default: "98%" },
     maxWidth: {},
     bottomSheet: { type: Boolean, default: false },
     contentClass: { default: "" },
-    zIndex: { default: 9999 }
-  },
-  emits: ["update:model-value", "closed", "click:outside", "click:esc"],
+    zIndex: { default: 9999 },
+    ariaLabel: {}
+  }, {
+    "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);
@@ -84,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",
@@ -103,20 +58,84 @@ 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(("getRootAttrs" in _ctx ? _ctx.getRootAttrs : unref(getRootAttrs))(_ctx.$attrs))), [
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
         renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ attrs: unref(dialogAttrs), isOpen: unref(isOpen) }))),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           unref(isOpen) || unref(internalValue) ? (openBlock(), createElementBlock("div", mergeProps({
@@ -124,8 +143,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: _ctx.$style.wrapper,
             style: { zIndex: __props.zIndex },
             role: "dialog",
+            "aria-modal": "true",
+            "aria-label": __props.ariaLabel,
             tabindex: "0"
-          }, ("getNonRootAttrs" in _ctx ? _ctx.getNonRootAttrs : unref(getNonRootAttrs))(_ctx.$attrs), {
+          }, unref(getNonRootAttrs)(_ctx.$attrs), {
             onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => onEscClick(), ["stop"]), ["esc"]))
           }), [
             createVNode(Transition, {
@@ -139,6 +160,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 unref(isOpen) && unref(internalValue) ? (openBlock(), createElementBlock("div", {
                   key: 0,
+                  "data-id": "overlay",
                   class: normalizeClass(_ctx.$style.overlay),
                   onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onClickOutside(), ["stop"]))
                 }, null, 2)) : createCommentVNode("", true)
@@ -151,16 +173,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: 0,
                   ref_key: "contentRef",
                   ref: contentRef,
+                  "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)
               ]),
               _: 3
             }, 16)
-          ], 16)) : createCommentVNode("", true)
+          ], 16, _hoisted_1)) : createCommentVNode("", true)
         ]))
       ], 16);
     };

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\">\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}\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        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            :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            :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","getRootAttrs","$attrs","_renderSlot","_unref","_createBlock","_Teleport","_openBlock","_mergeProps","$style","getNonRootAttrs","_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;
-}>, {
-    popper: PopperOptions;
-    disabled: boolean;
-    modelValue: boolean;
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-    openOnHover: boolean;
-    fullWidth: boolean;
-    openDelay: number;
-    closeDelay: number;
-    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;