@veltra/desktop 1.0.0

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

@@ -0,0 +1,42 @@
+import { DialogProps, _DialogExposed } from "../../types/dialog.js";
+import * as _$vue from "vue";
+import * as _$_veltra_utils0 from "@veltra/utils";
+
+//#region src/components/dialog/dialog.vue.d.ts
+type __VLS_Props = DialogProps;
+type __VLS_Slots = {
+  footer?: (props: {
+    close: () => void;
+  }) => any;
+  trigger?: () => any;
+  header?: () => any;
+  default?: (props: {
+    /** 弹框是否最大化了 */maximized: boolean;
+  }) => any;
+};
+type __VLS_ModelProps = {
+  modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, _$_veltra_utils0.DeconstructValue<_DialogExposed>, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: boolean) => any;
+} & {
+  "update:modelValue": (visible: boolean) => any;
+  closed: () => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+  onClosed?: (() => any) | undefined;
+}>, {
+  modelValue: boolean;
+  modal: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=dialog.vue.d.ts.map

package/dist/components/dialog/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./dialog.vue.js";

package/dist/components/dialog/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/dialog/style.js

@@ -0,0 +1,3 @@
+import "./style2.css";
+import "@veltra/styles/anime/fade.scss";
+import "@veltra/styles/anime/spring.scss";

package/dist/components/dialog/style2.css

@@ -0,0 +1,150 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-dialog__overlay {
+  pointer-events: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-dialog__overlay.is-modal {
+  background-color: rgba(0, 0, 0, 0.32);
+  pointer-events: auto;
+}
+
+.u-dialog {
+  pointer-events: auto;
+  border-radius: var(--u-radius-large);
+  will-change: transform, opacity;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  box-shadow: var(--u-shadow-x) var(--u-shadow-y) 10px 2px var(--u-shadow-color);
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.u-dialog--small .u-dialog__header {
+  padding: 0 var(--u-gap-small);
+  font-size: var(--u-font-size-title-small);
+}
+.u-dialog--default .u-dialog__header {
+  padding: 0 var(--u-gap-default);
+  font-size: var(--u-font-size-title-default);
+}
+.u-dialog--large .u-dialog__header {
+  padding: 0 var(--u-gap-large);
+  font-size: var(--u-font-size-title-large);
+}
+.u-dialog__header, .u-dialog__footer {
+  flex-shrink: 0;
+  overflow: hidden;
+  background-color: var(--u-bg-color-middle);
+}
+.u-dialog__header {
+  height: 49px;
+  border-bottom: var(--u-border);
+  border-radius: var(--u-gap-default) var(--u-gap-default) 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-dialog__header:active {
+  cursor: move;
+}
+.u-dialog__title {
+  line-height: 1em;
+}
+.u-dialog__title:active {
+  cursor: text;
+}
+.u-dialog__body {
+  padding: 8px;
+  background-color: var(--u-bg-color-top);
+  flex-grow: 1;
+}
+.u-dialog__footer {
+  border-top: var(--u-border);
+  padding: 8px;
+  text-align: right;
+  border-radius: 0 0 var(--u-gap-default) var(--u-gap-default);
+}
+.u-dialog__footer .u-button + .u-button {
+  margin-left: var(--u-gap-default);
+}
+.u-dialog__buttons {
+  gap: var(--u-gap-default);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-dialog__btn-close, .u-dialog__btn-minimize, .u-dialog__btn-maximize, .u-dialog__btn-recover {
+  border-radius: 50%;
+  overflow: hidden;
+  color: #fff;
+  font-size: 12px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.u-dialog__btn-close > svg, .u-dialog__btn-minimize > svg, .u-dialog__btn-maximize > svg, .u-dialog__btn-recover > svg {
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+.u-dialog__btn-close:hover > svg, .u-dialog__btn-minimize:hover > svg, .u-dialog__btn-maximize:hover > svg, .u-dialog__btn-recover:hover > svg {
+  opacity: 1;
+}
+.u-dialog__btn-close {
+  background-color: #ff7330;
+}
+.u-dialog__btn-minimize {
+  background-color: #e4bf2e;
+}
+.u-dialog__btn-maximize, .u-dialog__btn-recover {
+  background-color: #34c759;
+}
+.u-dialog--opened {
+  overflow: hidden !important;
+}
+
+.dialog-maximize-enter-to {
+  width: 100vw !important;
+  height: 100vh !important;
+  max-height: 100vh;
+  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
+}
+.dialog-maximize-enter-to .u-dialog__header:active {
+  cursor: default;
+}
+
+.dialog-maximize-enter-active,
+.dialog-maximize-leave-active {
+  transition-property: width, height, transform;
+  transition-duration: 0.25s;
+}
+
+.dialog-maximize-leave-active {
+  max-height: 100vh;
+}

package/dist/components/dialog/use-maximum.js

@@ -0,0 +1,34 @@
+import { shallowRef } from "vue";
+import { removeStyles, setStyles } from "@veltra/utils";
+import { useTransition } from "@veltra/compositions";
+//#region src/components/dialog/use-maximum.ts
+function useMaximum(options) {
+	const { dialogRef } = options;
+	const maximized = shallowRef(false);
+	const maximizeTransition = useTransition("css", {
+		target: dialogRef,
+		name: "dialog-maximize",
+		keepEnterTo: true,
+		afterLeave() {
+			dialogRef.value && removeStyles(dialogRef.value, ["height"]);
+		}
+	});
+	/** 切换最大化 */
+	const toggleMaximize = (maxim) => {
+		maximized.value = maxim;
+		const dom = dialogRef.value;
+		if (!dom) return;
+		if (maxim) {
+			setStyles(dom, { height: `${dom.offsetHeight}px` });
+			maximizeTransition.enter();
+		} else maximizeTransition.leave();
+	};
+	return {
+		maximized,
+		toggleMaximize
+	};
+}
+//#endregion
+export { useMaximum };
+
+//# sourceMappingURL=use-maximum.js.map

package/dist/components/dialog/use-maximum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-maximum.js","names":[],"sources":["../../../src/components/dialog/use-maximum.ts"],"sourcesContent":["import { useTransition } from '@veltra/compositions'\nimport { type BEM, removeStyles, setStyles } from '@veltra/utils'\nimport { shallowRef, type ShallowRef } from 'vue'\n\ninterface Options {\n  cls: BEM<'dialog'>\n  dialogRef: ShallowRef<HTMLDivElement | undefined>\n}\n\ninterface Returned {\n  /** 是否为最大状态 */\n  maximized: ShallowRef<boolean>\n  /** 切换最大状态 */\n  toggleMaximize: (maxim: boolean) => void\n}\n\n// 最大化过程\n// 1. 先设置一个高度才会有过渡动画\n// 2. 在下一个帧应用最大化时的类名\n// 3. 在进入动画结束时移除高度\n\nexport function useMaximum(options: Options): Returned {\n  const { dialogRef } = options\n\n  const maximized = shallowRef(false)\n\n  const maximizeTransition = useTransition('css', {\n    target: dialogRef,\n    name: 'dialog-maximize',\n    keepEnterTo: true,\n    afterLeave() {\n      dialogRef.value && removeStyles(dialogRef.value, ['height'])\n    }\n  })\n\n  /** 切换最大化 */\n  const toggleMaximize = (maxim: boolean): void => {\n    maximized.value = maxim\n    const dom = dialogRef.value\n    if (!dom) return\n    if (maxim) {\n      // 先设置一个高度才会有过渡动画\n      setStyles(dom, { height: `${dom.offsetHeight}px` })\n      maximizeTransition.enter()\n    } else {\n      maximizeTransition.leave()\n    }\n  }\n\n  return { maximized, toggleMaximize }\n}\n"],"mappings":";;;;AAqBA,SAAgB,WAAW,SAA4B;CACrD,MAAM,EAAE,cAAc;CAEtB,MAAM,YAAY,WAAW,MAAM;CAEnC,MAAM,qBAAqB,cAAc,OAAO;EAC9C,QAAQ;EACR,MAAM;EACN,aAAa;EACb,aAAa;AACX,aAAU,SAAS,aAAa,UAAU,OAAO,CAAC,SAAS,CAAC;;EAE/D,CAAC;;CAGF,MAAM,kBAAkB,UAAyB;AAC/C,YAAU,QAAQ;EAClB,MAAM,MAAM,UAAU;AACtB,MAAI,CAAC,IAAK;AACV,MAAI,OAAO;AAET,aAAU,KAAK,EAAE,QAAQ,GAAG,IAAI,aAAa,KAAK,CAAC;AACnD,sBAAmB,OAAO;QAE1B,oBAAmB,OAAO;;AAI9B,QAAO;EAAE;EAAW;EAAgB"}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,91 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, shallowRef, unref, useModel, withCtx, withModifiers } from "vue";
+import { bem, zIndex } from "@veltra/utils";
+import { Close } from "@veltra/icons/normal";
+//#region src/components/drawer/drawer.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Drawer",
+	inheritAttrs: false,
+	__name: "drawer",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: { type: Boolean },
+		direction: { default: "right" },
+		showClose: { type: Boolean },
+		title: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"update:modelValue",
+		"close",
+		"closed"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("drawer");
+		const overlayCls = bem("drawer-overlay");
+		const overlayVisible = useModel(__props, "modelValue");
+		const drawerVisible = shallowRef(false);
+		const transitionName = computed(() => {
+			return `drawer-slide-${props.direction}`;
+		});
+		const drawerClass = computed(() => {
+			return [cls.b, bem.is(props.direction)];
+		});
+		const drawerStyle = computed(() => {
+			return {};
+		});
+		const onEnter = () => {
+			drawerVisible.value = true;
+		};
+		const onAfterDrawerLeave = () => {
+			overlayVisible.value = false;
+		};
+		const close = () => {
+			drawerVisible.value = false;
+			emit("close");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+				name: "fade",
+				mode: "out-in",
+				onEnter
+			}, {
+				default: withCtx(() => [overlayVisible.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(overlayCls).b),
+					style: normalizeStyle({ zIndex: unref(zIndex)() }),
+					onClick: close
+				}, [createVNode(Transition, {
+					name: transitionName.value,
+					appear: "",
+					onAfterLeave: onAfterDrawerLeave
+				}, {
+					default: withCtx(() => [drawerVisible.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+						class: drawerClass.value,
+						style: drawerStyle.value,
+						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+					}), [__props.showClose ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("close")),
+						onClick: close
+					}, [createVNode(unref(_sfc_main$1), null, {
+						default: withCtx(() => [createVNode(unref(Close))]),
+						_: 1
+					})], 2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 16)) : createCommentVNode("v-if", true)]),
+					_: 3
+				}, 8, ["name"])], 6)) : createCommentVNode("v-if", true)]),
+				_: 3
+			})]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":["$attrs"],"sources":["../../../src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <transition name=\"fade\" mode=\"out-in\" @enter=\"onEnter\">\n      <div v-if=\"overlayVisible\" :class=\"overlayCls.b\" :style=\"{ zIndex: zIndex() }\" @click=\"close\">\n        <transition :name=\"transitionName\" appear @after-leave=\"onAfterDrawerLeave\">\n          <div\n            v-bind=\"$attrs\"\n            v-if=\"drawerVisible\"\n            :class=\"drawerClass\"\n            :style=\"drawerStyle\"\n            @click.stop\n          >\n            <span :class=\"cls.e('close')\" @click=\"close\" v-if=\"showClose\">\n              <u-icon><Close /></u-icon>\n            </span>\n            <slot />\n          </div>\n        </transition>\n      </div>\n    </transition>\n  </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Close } from '@veltra/icons/normal'\nimport { bem, zIndex } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { DrawerProps, DrawerEmits } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({\n  name: 'Drawer',\n  inheritAttrs: false\n})\n\nconst props = withDefaults(defineProps<DrawerProps>(), {\n  direction: 'right',\n  closable: true\n})\n\nconst emit = defineEmits<DrawerEmits>()\n\nconst cls = bem('drawer')\nconst overlayCls = bem('drawer-overlay')\n\nconst overlayVisible = defineModel<boolean>({\n  default: false\n})\n\nconst drawerVisible = shallowRef(false)\n\n// 根据方向计算过渡动画名称\nconst transitionName = computed(() => {\n  return `drawer-slide-${props.direction}`\n})\n\n// 计算抽屉样式类\nconst drawerClass = computed(() => {\n  return [cls.b, bem.is(props.direction)]\n})\n\n// 计算抽屉样式\nconst drawerStyle = computed(() => {\n  const style: Record<string, string> = {}\n\n  return style\n})\n\nconst onEnter = () => {\n  drawerVisible.value = true\n}\n\nconst onAfterDrawerLeave = () => {\n  overlayVisible.value = false\n}\n\n// 关闭抽屉\nconst close = () => {\n  drawerVisible.value = false\n  emit('close')\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,SAAQ;EACxB,MAAM,aAAa,IAAI,iBAAgB;EAEvC,MAAM,iBAAiB,SAAoB,SAAA,aAE1C;EAED,MAAM,gBAAgB,WAAW,MAAK;EAGtC,MAAM,iBAAiB,eAAe;AACpC,UAAO,gBAAgB,MAAM;IAC9B;EAGD,MAAM,cAAc,eAAe;AACjC,UAAO,CAAC,IAAI,GAAG,IAAI,GAAG,MAAM,UAAU,CAAA;IACvC;EAGD,MAAM,cAAc,eAAe;AAGjC,UAFsC,EAAC;IAGxC;EAED,MAAM,gBAAgB;AACpB,iBAAc,QAAQ;;EAGxB,MAAM,2BAA2B;AAC/B,kBAAe,QAAQ;;EAIzB,MAAM,cAAc;AAClB,iBAAc,QAAQ;AACtB,QAAK,QAAO;;;uBA/EZ,YAmBW,UAAA,EAnBD,IAAG,QAAM,EAAA,CACjB,YAiBa,YAAA;IAjBD,MAAK;IAAO,MAAK;IAAiB;;2BAgBtC,CAfK,eAAA,SAAA,WAAA,EAAX,mBAeM,OAAA;;KAfsB,OAAK,eAAE,MAAA,WAAU,CAAC,EAAC;KAAG,OAAK,eAAA,EAAA,QAAY,MAAA,OAAM,EAAA,EAAA,CAAA;KAAO,SAAO;QACrF,YAaa,YAAA;KAbA,MAAM,eAAA;KAAgB,QAAA;KAAQ,cAAa;;4BAYhD,CATE,cAAA,SAAA,WAAA,EAFR,mBAWM,OAXN,WAWM,EAAA,KAAA,GAAA,EAVIA,KAAAA,QAAM;MAEb,OAAO,YAAA;MACP,OAAO,YAAA;MACP,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;UAEwC,QAAA,aAAA,WAAA,EAAnD,mBAEO,QAAA;;MAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;MAAY,SAAO;SACpC,YAA0B,MAAA,YAAA,EAAA,MAAA;6BAAT,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA;;kDAEnB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,QAAA,KAAA,CAAA,CAAA"}

package/dist/components/drawer/drawer.vue.d.ts

@@ -0,0 +1,36 @@
+import { DrawerDirection, DrawerProps } from "../../types/drawer.js";
+import * as _$vue from "vue";
+
+//#region src/components/drawer/drawer.vue.d.ts
+type __VLS_Props = DrawerProps;
+type __VLS_ModelProps = {
+  modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_34: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: boolean) => any;
+} & {
+  "update:modelValue": (value: boolean) => any;
+  close: () => any;
+  closed: () => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+  onClose?: (() => any) | undefined;
+  onClosed?: (() => any) | undefined;
+}>, {
+  direction: DrawerDirection;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=drawer.vue.d.ts.map

package/dist/components/drawer/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./drawer.vue.js";

package/dist/components/drawer/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/drawer/style.js

@@ -0,0 +1,2 @@
+import "./style2.css";
+import "@veltra/styles/anime/fade.scss";

package/dist/components/drawer/style2.css

@@ -0,0 +1,153 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-drawer {
+  position: absolute;
+  border-radius: var(--u-radius-large);
+  background-color: var(--u-bg-color-top);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 10px 2px var(--u-shadow-color);
+}
+.u-drawer__close {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  font-size: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.u-drawer.is-right {
+  --transform: translateX(100%);
+}
+.u-drawer.is-left {
+  --transform: translateX(-100%);
+}
+.u-drawer.is-top {
+  --transform: translateY(-100%);
+}
+.u-drawer.is-bottom {
+  --transform: translateY(100%);
+}
+.u-drawer.is-right {
+  top: 4px;
+  bottom: 4px;
+  height: calc(100% - 8px);
+  width: 320px;
+}
+.u-drawer.is-right .u-drawer__close {
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+.u-drawer.is-left {
+  top: 4px;
+  bottom: 4px;
+  height: calc(100% - 8px);
+  width: 320px;
+}
+.u-drawer.is-left .u-drawer__close {
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+.u-drawer.is-top {
+  left: 4px;
+  right: 4px;
+  width: calc(100% - 8px);
+  height: 320px;
+}
+.u-drawer.is-top .u-drawer__close {
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+.u-drawer.is-bottom {
+  left: 4px;
+  right: 4px;
+  width: calc(100% - 8px);
+  height: 320px;
+}
+.u-drawer.is-bottom .u-drawer__close {
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+.u-drawer.is-right {
+  right: 4px;
+}
+.u-drawer.is-right .u-drawer__close {
+  left: -52px;
+}
+.u-drawer.is-left {
+  left: 4px;
+}
+.u-drawer.is-left .u-drawer__close {
+  right: -52px;
+}
+.u-drawer.is-top {
+  top: 4px;
+}
+.u-drawer.is-top .u-drawer__close {
+  bottom: -52px;
+}
+.u-drawer.is-bottom {
+  bottom: 4px;
+}
+.u-drawer.is-bottom .u-drawer__close {
+  top: -52px;
+}
+
+.u-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.32);
+  overflow: hidden;
+}
+
+.drawer-slide-right-enter-active, .drawer-slide-left-enter-active, .drawer-slide-top-enter-active, .drawer-slide-bottom-enter-active {
+  transition: transform 0.3s cubic-bezier(0.46, 1.29, 0.46, 1.04);
+}
+
+.drawer-slide-right-leave-active, .drawer-slide-left-leave-active, .drawer-slide-top-leave-active, .drawer-slide-bottom-leave-active {
+  transition: transform 0.3s ease-in-out;
+}
+
+.drawer-slide-right-enter-from,
+.drawer-slide-right-leave-to {
+  transform: var(--transform);
+}
+
+.drawer-slide-left-enter-from,
+.drawer-slide-left-leave-to {
+  transform: var(--transform);
+}
+
+.drawer-slide-top-enter-from,
+.drawer-slide-top-leave-to {
+  transform: var(--transform);
+}
+
+.drawer-slide-bottom-enter-from,
+.drawer-slide-bottom-leave-to {
+  transform: var(--transform);
+}