@rotki/ui-library 2.12.0 → 2.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue2.js +33 -10
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue2.js.map +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue3.js +8 -8
- package/dist/composables/theme.js +11 -2
- package/dist/composables/theme.js.map +1 -1
- package/dist/style.css +13 -13
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, toRefs, ref, watch, computed, createElementBlock, openBlock, renderSlot, createBlock, normalizeProps, guardReactiveProps, unref, Teleport, createCommentVNode,
|
|
1
|
+
import { defineComponent, toRefs, ref, nextTick, watch, computed, createElementBlock, openBlock, renderSlot, createBlock, normalizeProps, guardReactiveProps, unref, Teleport, createCommentVNode, Transition, withCtx, withModifiers, normalizeClass, mergeProps } from "vue";
|
|
2
2
|
import { transformPropsUnit, getRootAttrs } from "../../../utils/helpers.js";
|
|
3
3
|
import { watchImmediate, onClickOutside } from "@vueuse/core";
|
|
4
4
|
import { set, get } from "@vueuse/shared";
|
|
@@ -34,21 +34,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
34
34
|
emit("closed");
|
|
35
35
|
}
|
|
36
36
|
const internalValue = ref(false);
|
|
37
|
+
const isOpen = ref(false);
|
|
37
38
|
watchImmediate(modelValue, (value) => {
|
|
38
|
-
|
|
39
|
+
nextTick(() => {
|
|
40
|
+
set(internalValue, value);
|
|
41
|
+
});
|
|
39
42
|
});
|
|
40
43
|
watch(internalValue, (value) => {
|
|
41
|
-
|
|
44
|
+
if (value) {
|
|
45
|
+
window.requestAnimationFrame(() => {
|
|
46
|
+
set(isOpen, value);
|
|
47
|
+
});
|
|
48
|
+
} else {
|
|
49
|
+
setTimeout(() => {
|
|
50
|
+
set(isOpen, value);
|
|
51
|
+
}, 150);
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
watch(isOpen, (isOpen2) => {
|
|
55
|
+
if (isOpen2) {
|
|
56
|
+
onUpdateModelValue(isOpen2);
|
|
57
|
+
set(internalValue, isOpen2);
|
|
58
|
+
} else {
|
|
59
|
+
setTimeout(() => {
|
|
60
|
+
onUpdateModelValue(isOpen2);
|
|
61
|
+
set(internalValue, isOpen2);
|
|
62
|
+
}, 150);
|
|
63
|
+
}
|
|
42
64
|
});
|
|
43
65
|
function close() {
|
|
44
|
-
set(
|
|
66
|
+
set(isOpen, false);
|
|
45
67
|
}
|
|
46
68
|
const style = computed(() => ({
|
|
47
69
|
width: transformPropsUnit(get(width))
|
|
48
70
|
}));
|
|
49
71
|
const content = ref(null);
|
|
50
72
|
onClickOutside(content, () => {
|
|
51
|
-
if (get(
|
|
73
|
+
if (get(isOpen) && props.temporary && !props.stateless) {
|
|
52
74
|
setTimeout(() => {
|
|
53
75
|
close();
|
|
54
76
|
}, 50);
|
|
@@ -71,11 +93,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
71
93
|
"enter-active-class": "ease-out duration-150",
|
|
72
94
|
"enter-to-class": "opacity-100",
|
|
73
95
|
"leave-from-class": "opacity-100",
|
|
74
|
-
"leave-active-class": "ease-in duration-
|
|
96
|
+
"leave-active-class": "ease-in duration-150",
|
|
75
97
|
"leave-to-class": "opacity-0"
|
|
76
98
|
}, {
|
|
77
99
|
default: withCtx(() => [
|
|
78
|
-
internalValue.value ? (openBlock(), createElementBlock("div", {
|
|
100
|
+
isOpen.value && internalValue.value ? (openBlock(), createElementBlock("div", {
|
|
79
101
|
key: 0,
|
|
80
102
|
class: normalizeClass(_ctx.$style.overlay),
|
|
81
103
|
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
|
|
@@ -83,7 +105,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
83
105
|
]),
|
|
84
106
|
_: 1
|
|
85
107
|
})) : createCommentVNode("", true),
|
|
86
|
-
|
|
108
|
+
isOpen.value || internalValue.value || unref(miniVariant) ? (openBlock(), createElementBlock("aside", mergeProps({
|
|
109
|
+
key: 1,
|
|
87
110
|
ref_key: "content",
|
|
88
111
|
ref: content,
|
|
89
112
|
style: unref(style),
|
|
@@ -91,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
91
114
|
_ctx.$style.content,
|
|
92
115
|
__props.contentClass,
|
|
93
116
|
{
|
|
94
|
-
[_ctx.$style.visible]: internalValue.value,
|
|
117
|
+
[_ctx.$style.visible]: isOpen.value && internalValue.value,
|
|
95
118
|
[_ctx.$style[unref(position)]]: unref(position),
|
|
96
119
|
[_ctx.$style.mini]: unref(miniVariant),
|
|
97
120
|
[_ctx.$style.temporary]: __props.temporary,
|
|
@@ -100,7 +123,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
100
123
|
]
|
|
101
124
|
}, unref(getRootAttrs)(_ctx.$attrs)), [
|
|
102
125
|
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ attrs: unref(activatorAttrs), close })))
|
|
103
|
-
], 16)
|
|
126
|
+
], 16)) : createCommentVNode("", true)
|
|
104
127
|
]))
|
|
105
128
|
]);
|
|
106
129
|
};
|
|
@@ -1 +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) {\n emit('update:model-value', value);\n\n if (!value)\n emit('closed');\n}\n\nconst internalValue
|
|
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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"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
const overlay = "
|
|
2
|
-
const content = "
|
|
3
|
-
const left = "
|
|
4
|
-
const right = "
|
|
5
|
-
const visible = "
|
|
6
|
-
const temporary = "
|
|
7
|
-
const mini = "
|
|
1
|
+
const overlay = "_overlay_b1dn3_1";
|
|
2
|
+
const content = "_content_b1dn3_5";
|
|
3
|
+
const left = "_left_b1dn3_8";
|
|
4
|
+
const right = "_right_b1dn3_11";
|
|
5
|
+
const visible = "_visible_b1dn3_17";
|
|
6
|
+
const temporary = "_temporary_b1dn3_20";
|
|
7
|
+
const mini = "_mini_b1dn3_23";
|
|
8
8
|
const style0 = {
|
|
9
9
|
overlay,
|
|
10
10
|
content,
|
|
11
11
|
left,
|
|
12
12
|
right,
|
|
13
|
-
"with-overlay": "_with-
|
|
13
|
+
"with-overlay": "_with-overlay_b1dn3_14",
|
|
14
14
|
visible,
|
|
15
15
|
temporary,
|
|
16
16
|
mini
|
|
@@ -1,13 +1,22 @@
|
|
|
1
|
-
import { createSharedComposable, useColorMode } from "@vueuse/core";
|
|
1
|
+
import { createSharedComposable, getSSRHandler, useColorMode } from "@vueuse/core";
|
|
2
2
|
import { ref, computed, watch } from "vue";
|
|
3
3
|
import { defaultTheme, ThemeMode } from "../types/theme.js";
|
|
4
4
|
import { get, set } from "@vueuse/shared";
|
|
5
5
|
const config = ref({ ...defaultTheme });
|
|
6
6
|
const useRotkiTheme = createSharedComposable(() => {
|
|
7
|
+
const updateHTMLAttrs = getSSRHandler(
|
|
8
|
+
"updateHTMLAttrs",
|
|
9
|
+
(selector, attribute, value) => {
|
|
10
|
+
const el = typeof selector === "string" ? window?.document.querySelector(selector) : null;
|
|
11
|
+
if (!el)
|
|
12
|
+
return;
|
|
13
|
+
el.setAttribute(attribute, value);
|
|
14
|
+
}
|
|
15
|
+
);
|
|
7
16
|
const { state, store } = useColorMode({
|
|
8
17
|
onChanged(mode, defaultHandler) {
|
|
9
18
|
defaultHandler(mode);
|
|
10
|
-
|
|
19
|
+
updateHTMLAttrs("html", "data-theme", mode);
|
|
11
20
|
}
|
|
12
21
|
});
|
|
13
22
|
const isAutoControlled = computed(() => get(store) === ThemeMode.auto);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\n type ColorIntensity,\n defaultTheme,\n type InitThemeOptions,\n type ThemeConfig,\n type ThemeContent,\n type ThemeData,\n ThemeMode,\n} from '@/types/theme';\n\nconst config: Ref<ThemeConfig> = ref({ ...defaultTheme });\n\n/**\n * Theme manager\n * @returns {ThemeContent}\n */\nexport const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {\n const { state, store } = useColorMode<ThemeMode>({\n onChanged(mode, defaultHandler) {\n defaultHandler(mode);\n
|
|
1
|
+
{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { getSSRHandler, useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\n type ColorIntensity,\n defaultTheme,\n type InitThemeOptions,\n type ThemeConfig,\n type ThemeContent,\n type ThemeData,\n ThemeMode,\n} from '@/types/theme';\n\nconst config: Ref<ThemeConfig> = ref({ ...defaultTheme });\n\n/**\n * Theme manager\n * @returns {ThemeContent}\n */\nexport const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {\n const updateHTMLAttrs = getSSRHandler(\n 'updateHTMLAttrs',\n (selector, attribute, value) => {\n const el = typeof selector === 'string' ? window?.document.querySelector(selector) : null;\n if (!el)\n return;\n el.setAttribute(attribute, value);\n },\n );\n\n const { state, store } = useColorMode<ThemeMode>({\n onChanged(mode, defaultHandler) {\n defaultHandler(mode);\n updateHTMLAttrs('html', 'data-theme', mode);\n },\n });\n\n /**\n * whether the current theme is controlled by system or user\n * @type {ComputedRef<boolean>}\n */\n const isAutoControlled: ComputedRef<boolean> = computed(() => get(store) === ThemeMode.auto);\n\n /**\n * truthy for light theme\n * @type {ComputedRef<boolean>}\n */\n const isLight: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.light);\n\n /**\n * truthy for dark theme\n * @type {ComputedRef<boolean>}\n */\n const isDark: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.dark);\n\n /**\n * current theme based on light or dark mode\n * @type {ComputedRef<ThemeData>}\n */\n const theme: ComputedRef<ThemeData> = computed(() => {\n if (get(isLight))\n return get(config).light;\n\n return get(config).dark;\n });\n\n /**\n * switch theme through dark/light/auto modes\n * @param {ThemeMode} mode\n */\n const switchThemeScheme = (mode: ThemeMode): void => {\n set(store, mode || ThemeMode.auto);\n };\n\n /**\n * toggle between auto|light|dark\n */\n const toggleThemeMode = (): void => {\n if (get(isAutoControlled))\n switchThemeScheme(ThemeMode.light);\n else if (get(isLight))\n switchThemeScheme(ThemeMode.dark);\n else if (get(isDark))\n switchThemeScheme(ThemeMode.auto);\n };\n\n /**\n * sets the configuration for the theme\n * @param {ThemeConfig} newConfig\n */\n const setThemeConfig = (newConfig: ThemeConfig): void => {\n set(config, newConfig);\n };\n\n /**\n * theme initializer, must be called once from the app's entry\n * @param {InitThemeOptions} options\n */\n const init = (options: InitThemeOptions): void => {\n switchThemeScheme(options.mode ?? ThemeMode.auto);\n setThemeConfig(options.config ?? { ...defaultTheme });\n\n if (typeof window !== 'undefined') {\n watch([isLight, theme], ([isLight, theme]) => {\n const styleVariables = new Map();\n\n // Compute context variables\n Object.entries(theme).forEach(([context, contextObject]: [string, ColorIntensity]) => {\n styleVariables.set(`--rui-${context}-darker`, contextObject.darker);\n styleVariables.set(`--rui-${context}-lighter`, contextObject.lighter);\n styleVariables.set(`--rui-${context}-main`, contextObject.DEFAULT);\n });\n\n // Determine the theme mode\n const state = isLight ? ThemeMode.light : ThemeMode.dark;\n\n // Add text color variables\n styleVariables.set('--rui-text-disabled', `var(--rui-${state}-text-disabled)`);\n styleVariables.set('--rui-text-primary', `var(--rui-${state}-text-primary)`);\n styleVariables.set('--rui-text-secondary', `var(--rui-${state}-text-secondary)`);\n\n // Apply all style variables in one operation\n const rootStyle = document.documentElement.style;\n styleVariables.forEach((value, variableName) => {\n rootStyle.setProperty(variableName, value);\n });\n }, { immediate: true });\n }\n };\n\n return {\n config,\n init,\n isAutoControlled,\n isDark,\n isLight,\n setThemeConfig,\n state,\n store,\n switchThemeScheme,\n theme,\n toggleThemeMode,\n };\n});\n"],"names":["isLight","theme","state"],"mappings":";;;;AAYA,MAAM,SAA2B,IAAI,EAAE,GAAG,cAAc;AAMjD,MAAM,gBAAgB,uBAA2C,MAAM;AAC5E,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,WAAW,UAAU;AAC9B,YAAM,KAAK,OAAO,aAAa,WAAW,QAAQ,SAAS,cAAc,QAAQ,IAAI;AACrF,UAAI,CAAC;AACH;AACF,SAAG,aAAa,WAAW,KAAK;AAAA,IAClC;AAAA,EAAA;AAGF,QAAM,EAAE,OAAO,MAAA,IAAU,aAAwB;AAAA,IAC/C,UAAU,MAAM,gBAAgB;AAC9B,qBAAe,IAAI;AACnB,sBAAgB,QAAQ,cAAc,IAAI;AAAA,IAC5C;AAAA,EAAA,CACD;AAMD,QAAM,mBAAyC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAM3F,QAAM,UAAgC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,KAAK;AAMnF,QAAM,SAA+B,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAMjF,QAAM,QAAgC,SAAS,MAAM;AACnD,QAAI,IAAI,OAAO;AACb,aAAO,IAAI,MAAM,EAAE;AAErB,WAAO,IAAI,MAAM,EAAE;AAAA,EACrB,CAAC;AAMD,QAAM,oBAAoB,CAAC,SAA0B;AACnD,QAAI,OAAO,QAAQ,UAAU,IAAI;AAAA,EACnC;AAKA,QAAM,kBAAkB,MAAY;AAClC,QAAI,IAAI,gBAAgB;AACtB,wBAAkB,UAAU,KAAK;AAAA,aAC1B,IAAI,OAAO;AAClB,wBAAkB,UAAU,IAAI;AAAA,aACzB,IAAI,MAAM;AACjB,wBAAkB,UAAU,IAAI;AAAA,EACpC;AAMA,QAAM,iBAAiB,CAAC,cAAiC;AACvD,QAAI,QAAQ,SAAS;AAAA,EACvB;AAMA,QAAM,OAAO,CAAC,YAAoC;AAChD,sBAAkB,QAAQ,QAAQ,UAAU,IAAI;AAChD,mBAAe,QAAQ,UAAU,EAAE,GAAG,cAAc;AAEpD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,CAAC,SAAS,KAAK,GAAG,CAAC,CAACA,UAASC,MAAK,MAAM;AAC5C,cAAM,qCAAqB,IAAA;AAG3B,eAAO,QAAQA,MAAK,EAAE,QAAQ,CAAC,CAAC,SAAS,aAAa,MAAgC;AACpF,yBAAe,IAAI,SAAS,OAAO,WAAW,cAAc,MAAM;AAClE,yBAAe,IAAI,SAAS,OAAO,YAAY,cAAc,OAAO;AACpE,yBAAe,IAAI,SAAS,OAAO,SAAS,cAAc,OAAO;AAAA,QACnE,CAAC;AAGD,cAAMC,SAAQF,WAAU,UAAU,QAAQ,UAAU;AAGpD,uBAAe,IAAI,uBAAuB,aAAaE,MAAK,iBAAiB;AAC7E,uBAAe,IAAI,sBAAsB,aAAaA,MAAK,gBAAgB;AAC3E,uBAAe,IAAI,wBAAwB,aAAaA,MAAK,kBAAkB;AAG/E,cAAM,YAAY,SAAS,gBAAgB;AAC3C,uBAAe,QAAQ,CAAC,OAAO,iBAAiB;AAC9C,oBAAU,YAAY,cAAc,KAAK;AAAA,QAC3C,CAAC;AAAA,MACH,GAAG,EAAE,WAAW,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,CAAC;"}
|
package/dist/style.css
CHANGED
|
@@ -11970,7 +11970,7 @@ to {
|
|
|
11970
11970
|
.dark ._overlay_xf8dx_5 {
|
|
11971
11971
|
|
|
11972
11972
|
background-color: rgb(0 0 0 / 0.5)
|
|
11973
|
-
}.
|
|
11973
|
+
}._overlay_b1dn3_1 {
|
|
11974
11974
|
|
|
11975
11975
|
position: absolute;
|
|
11976
11976
|
|
|
@@ -11990,7 +11990,7 @@ to {
|
|
|
11990
11990
|
|
|
11991
11991
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
|
|
11992
11992
|
}
|
|
11993
|
-
.
|
|
11993
|
+
._content_b1dn3_5 {
|
|
11994
11994
|
|
|
11995
11995
|
position: fixed;
|
|
11996
11996
|
|
|
@@ -12008,11 +12008,11 @@ to {
|
|
|
12008
12008
|
|
|
12009
12009
|
transition-property: all;
|
|
12010
12010
|
|
|
12011
|
-
transition-
|
|
12011
|
+
transition-duration: 150ms;
|
|
12012
12012
|
|
|
12013
|
-
transition-
|
|
12013
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
|
12014
12014
|
}
|
|
12015
|
-
.
|
|
12015
|
+
._content_b1dn3_5._left_b1dn3_8 {
|
|
12016
12016
|
|
|
12017
12017
|
left: 0px;
|
|
12018
12018
|
|
|
@@ -12020,7 +12020,7 @@ to {
|
|
|
12020
12020
|
|
|
12021
12021
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
|
|
12022
12022
|
}
|
|
12023
|
-
.
|
|
12023
|
+
._content_b1dn3_5._right_b1dn3_11 {
|
|
12024
12024
|
|
|
12025
12025
|
right: 0px;
|
|
12026
12026
|
|
|
@@ -12028,17 +12028,17 @@ to {
|
|
|
12028
12028
|
|
|
12029
12029
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
|
|
12030
12030
|
}
|
|
12031
|
-
.
|
|
12031
|
+
._content_b1dn3_5._with-overlay_b1dn3_14 {
|
|
12032
12032
|
|
|
12033
12033
|
z-index: 10000
|
|
12034
12034
|
}
|
|
12035
|
-
.
|
|
12035
|
+
._content_b1dn3_5._visible_b1dn3_17 {
|
|
12036
12036
|
|
|
12037
12037
|
--tw-translate-x: 0px;
|
|
12038
12038
|
|
|
12039
12039
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
|
|
12040
12040
|
}
|
|
12041
|
-
.
|
|
12041
|
+
._content_b1dn3_5._temporary_b1dn3_20._visible_b1dn3_17 {
|
|
12042
12042
|
|
|
12043
12043
|
--tw-shadow: 0px 3px 5px -1px var(--rui-shadow-primary), 0px 5px 8px var(--rui-shadow-secondary), 0px 1px 14px var(--rui-shadow-tertiary);
|
|
12044
12044
|
|
|
@@ -12046,21 +12046,21 @@ to {
|
|
|
12046
12046
|
|
|
12047
12047
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
|
12048
12048
|
}
|
|
12049
|
-
.
|
|
12049
|
+
._content_b1dn3_5._mini_b1dn3_23 {
|
|
12050
12050
|
|
|
12051
12051
|
--tw-translate-x: 0px;
|
|
12052
12052
|
|
|
12053
12053
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
|
|
12054
12054
|
}
|
|
12055
|
-
.
|
|
12055
|
+
._content_b1dn3_5._mini_b1dn3_23:not(._visible_b1dn3_17) {
|
|
12056
12056
|
|
|
12057
12057
|
width: 3.5rem !important
|
|
12058
12058
|
}
|
|
12059
|
-
.dark .
|
|
12059
|
+
.dark ._overlay_b1dn3_1 {
|
|
12060
12060
|
|
|
12061
12061
|
background-color: rgb(0 0 0 / 0.5)
|
|
12062
12062
|
}
|
|
12063
|
-
.dark .
|
|
12063
|
+
.dark ._content_b1dn3_5 {
|
|
12064
12064
|
|
|
12065
12065
|
--tw-bg-opacity: 1;
|
|
12066
12066
|
|
package/dist/web-types.json
CHANGED