fantasia-ui 0.6.8 → 0.6.9

package/dist/fantasia-ui.css

@@ -3680,8 +3680,7 @@
   min-height: 0;
 }
 .f-dialog__body :deep(.f-scrollbar__wrap) {
-  overflow-y: auto !important;
-  overflow-x: hidden;
+  overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 .f-dialog__body :deep(.f-scrollbar__view) {
@@ -3844,6 +3843,9 @@
   left: 0;
   right: 0;
 }
+.f-drawer--top, .f-drawer--bottom {
+  max-height: 80vh;
+}
 .f-drawer__header {
   display: flex;
   align-items: center;
@@ -3876,6 +3878,9 @@
   background: #f5f7fa;
   color: #606266;
 }
+.f-drawer.is-auto-size .f-drawer__body {
+  flex: 0 1 auto;
+}
 .f-drawer__body {
   flex: 1;
   min-height: 0;
@@ -14591,7 +14596,7 @@ to {
 .f-timeline-item__content[data-v-235d4634] {
     font-size: 13px;
 }
-}.f-dialog-overlay[data-v-cae03335] {
+}.f-dialog-overlay[data-v-b15f082a] {
   position: fixed;
   top: 0;
   left: 0;
@@ -14607,7 +14612,7 @@ to {
   transition: background-color 0.25s ease;
   touch-action: none;
 }
-.f-dialog[data-v-cae03335] {
+.f-dialog[data-v-b15f082a] {
   position: relative;
   background: #fff;
   border-radius: 8px;
@@ -14621,7 +14626,7 @@ to {
   will-change: transform, opacity;
   transform-origin: center;
 }
-.f-dialog__close[data-v-cae03335] {
+.f-dialog__close[data-v-b15f082a] {
   position: absolute;
   top: 16px;
   right: 16px;
@@ -14639,20 +14644,20 @@ to {
   z-index: 1;
   padding: 0;
 }
-.f-dialog__close[data-v-cae03335]:hover {
+.f-dialog__close[data-v-b15f082a]:hover {
   background: #f5f7fa;
   color: #606266;
 }
-.f-dialog__header[data-v-cae03335] {
+.f-dialog__header[data-v-b15f082a] {
   padding: 20px 20px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.f-dialog__header.has-divider[data-v-cae03335] {
+.f-dialog__header.has-divider[data-v-b15f082a] {
   border-bottom: 1px solid #e4e7ed;
 }
-.f-dialog__icon[data-v-cae03335] {
+.f-dialog__icon[data-v-b15f082a] {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
@@ -14661,11 +14666,11 @@ to {
   justify-content: center;
   border-radius: 50%;
 }
-.f-dialog__icon[data-v-cae03335] svg {
+.f-dialog__icon[data-v-b15f082a] svg {
   width: 20px;
   height: 20px;
 }
-.f-dialog__title[data-v-cae03335] {
+.f-dialog__title[data-v-b15f082a] {
   flex: 1;
   margin: 0;
   font-size: 18px;
@@ -14673,7 +14678,7 @@ to {
   color: #303133;
   line-height: 1.4;
 }
-.f-dialog__body[data-v-cae03335] {
+.f-dialog__body[data-v-b15f082a] {
   flex: 1;
   min-height: 0;
   color: #606266;
@@ -14683,98 +14688,97 @@ to {
   display: flex;
   flex-direction: column;
 }
-.f-dialog__body[data-v-cae03335] .f-scrollbar {
+.f-dialog__body[data-v-b15f082a] .f-scrollbar {
   flex: 1;
   min-height: 0;
 }
-.f-dialog__body[data-v-cae03335] .f-scrollbar__wrap {
-  overflow-y: auto !important;
-  overflow-x: hidden;
+.f-dialog__body[data-v-b15f082a] .f-scrollbar__wrap {
+  overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
-.f-dialog__body[data-v-cae03335] .f-scrollbar__view {
+.f-dialog__body[data-v-b15f082a] .f-scrollbar__view {
   padding: 20px;
 }
-.f-dialog__body p[data-v-cae03335] {
+.f-dialog__body p[data-v-b15f082a] {
   margin: 0;
 }
-.f-dialog__footer[data-v-cae03335] {
+.f-dialog__footer[data-v-b15f082a] {
   padding: 16px 20px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 12px;
 }
-.f-dialog__footer.has-divider[data-v-cae03335] {
+.f-dialog__footer.has-divider[data-v-b15f082a] {
   border-top: 1px solid #e4e7ed;
 }
-.f-dialog--info .f-dialog__icon[data-v-cae03335] {
+.f-dialog--info .f-dialog__icon[data-v-b15f082a] {
   background: #ecf5ff;
   color: #409eff;
 }
-.f-dialog--success .f-dialog__icon[data-v-cae03335] {
+.f-dialog--success .f-dialog__icon[data-v-b15f082a] {
   background: #f0f9ff;
   color: #67c23a;
 }
-.f-dialog--warning .f-dialog__icon[data-v-cae03335] {
+.f-dialog--warning .f-dialog__icon[data-v-b15f082a] {
   background: #fef0e6;
   color: #e6a23c;
 }
-.f-dialog--error .f-dialog__icon[data-v-cae03335] {
+.f-dialog--error .f-dialog__icon[data-v-b15f082a] {
   background: #fef0f0;
   color: #f56c6c;
 }
-.f-dialog--confirm .f-dialog__icon[data-v-cae03335] {
+.f-dialog--confirm .f-dialog__icon[data-v-b15f082a] {
   background: #fef0e6;
   color: #e6a23c;
 }
-.dialog-fade-enter-active[data-v-cae03335],
-.dialog-fade-leave-active[data-v-cae03335] {
+.dialog-fade-enter-active[data-v-b15f082a],
+.dialog-fade-leave-active[data-v-b15f082a] {
   transition: opacity 0.25s ease;
 }
-.dialog-fade-enter-from[data-v-cae03335],
-.dialog-fade-leave-to[data-v-cae03335] {
+.dialog-fade-enter-from[data-v-b15f082a],
+.dialog-fade-leave-to[data-v-b15f082a] {
   opacity: 0;
 }
-.dialog-enter-active[data-v-cae03335],
-.dialog-leave-active[data-v-cae03335] {
+.dialog-enter-active[data-v-b15f082a],
+.dialog-leave-active[data-v-b15f082a] {
   transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 }
-.dialog-enter-from[data-v-cae03335],
-.dialog-leave-to[data-v-cae03335] {
+.dialog-enter-from[data-v-b15f082a],
+.dialog-leave-to[data-v-b15f082a] {
   opacity: 0;
   transform: scale(0.88) translateY(6px);
 }
-.dialog-enter-to[data-v-cae03335],
-.dialog-leave-from[data-v-cae03335] {
+.dialog-enter-to[data-v-b15f082a],
+.dialog-leave-from[data-v-b15f082a] {
   opacity: 1;
   transform: scale(1) translateY(0);
 }
 @media (max-width: 768px) {
-.f-dialog-overlay[data-v-cae03335] {
+.f-dialog-overlay[data-v-b15f082a] {
     padding: 10px;
 }
-.f-dialog[data-v-cae03335] {
+.f-dialog[data-v-b15f082a] {
     width: 95vw;
     max-height: 85vh;
 }
-.f-dialog__header[data-v-cae03335] {
+.f-dialog__header[data-v-b15f082a] {
     padding: 16px 16px 12px;
 }
-.f-dialog__body[data-v-cae03335] .f-scrollbar__view {
+.f-dialog__body[data-v-b15f082a] .f-scrollbar__view {
     padding: 16px;
 }
-.f-dialog__footer[data-v-cae03335] {
+.f-dialog__footer[data-v-b15f082a] {
     padding: 12px 16px;
 }
-}.f-drawer-backdrop[data-v-c7209ade] {
+}.f-drawer-backdrop[data-v-89aa73e0] {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1100;
   backdrop-filter: blur(2px);
 }
-.f-drawer[data-v-c7209ade] {
+.f-drawer[data-v-89aa73e0] {
   position: fixed;
   background: #fff;
   z-index: 1101;
@@ -14782,27 +14786,30 @@ to {
   flex-direction: column;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
 }
-.f-drawer--left[data-v-c7209ade] {
+.f-drawer--left[data-v-89aa73e0] {
   top: 0;
   bottom: 0;
   left: 0;
 }
-.f-drawer--right[data-v-c7209ade] {
+.f-drawer--right[data-v-89aa73e0] {
   top: 0;
   bottom: 0;
   right: 0;
 }
-.f-drawer--top[data-v-c7209ade] {
+.f-drawer--top[data-v-89aa73e0] {
   top: 0;
   left: 0;
   right: 0;
 }
-.f-drawer--bottom[data-v-c7209ade] {
+.f-drawer--bottom[data-v-89aa73e0] {
   bottom: 0;
   left: 0;
   right: 0;
 }
-.f-drawer__header[data-v-c7209ade] {
+.f-drawer--top[data-v-89aa73e0], .f-drawer--bottom[data-v-89aa73e0] {
+  max-height: 80vh;
+}
+.f-drawer__header[data-v-89aa73e0] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -14810,13 +14817,13 @@ to {
   border-bottom: 1px solid #e4e7ed;
   flex-shrink: 0;
 }
-.f-drawer__title[data-v-c7209ade] {
+.f-drawer__title[data-v-89aa73e0] {
   font-size: 18px;
   font-weight: 600;
   margin: 0;
   color: #303133;
 }
-.f-drawer__close[data-v-c7209ade] {
+.f-drawer__close[data-v-89aa73e0] {
   width: 40px;
   height: 40px;
   display: flex;
@@ -14830,64 +14837,67 @@ to {
   padding: 0;
   transition: all 0.2s;
 }
-.f-drawer__close[data-v-c7209ade]:hover {
+.f-drawer__close[data-v-89aa73e0]:hover {
   background: #f5f7fa;
   color: #606266;
 }
-.f-drawer__body[data-v-c7209ade] {
+.f-drawer.is-auto-size .f-drawer__body[data-v-89aa73e0] {
+  flex: 0 1 auto;
+}
+.f-drawer__body[data-v-89aa73e0] {
   flex: 1;
   min-height: 0;
   padding: 20px;
 }
-.f-drawer__body[data-v-c7209ade] .f-scrollbar {
+.f-drawer__body[data-v-89aa73e0] .f-scrollbar {
   height: 100%;
 }
-.f-drawer__body[data-v-c7209ade] .f-scrollbar__view {
+.f-drawer__body[data-v-89aa73e0] .f-scrollbar__view {
   padding: 0;
 }
-.f-drawer__footer[data-v-c7209ade] {
+.f-drawer__footer[data-v-89aa73e0] {
   padding: 20px;
   border-top: 1px solid #e4e7ed;
   flex-shrink: 0;
 }
-.drawer-fade-enter-active[data-v-c7209ade],
-.drawer-fade-leave-active[data-v-c7209ade] {
+.drawer-fade-enter-active[data-v-89aa73e0],
+.drawer-fade-leave-active[data-v-89aa73e0] {
   transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawer-fade-enter-from[data-v-c7209ade],
-.drawer-fade-leave-to[data-v-c7209ade] {
+.drawer-fade-enter-from[data-v-89aa73e0],
+.drawer-fade-leave-to[data-v-89aa73e0] {
   opacity: 0;
 }
-.drawer-left-enter-active[data-v-c7209ade],
-.drawer-left-leave-active[data-v-c7209ade] {
+.drawer-left-enter-active[data-v-89aa73e0],
+.drawer-left-leave-active[data-v-89aa73e0] {
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawer-left-enter-from[data-v-c7209ade],
-.drawer-left-leave-to[data-v-c7209ade] {
+.drawer-left-enter-from[data-v-89aa73e0],
+.drawer-left-leave-to[data-v-89aa73e0] {
   transform: translateX(-100%);
 }
-.drawer-right-enter-active[data-v-c7209ade],
-.drawer-right-leave-active[data-v-c7209ade] {
+.drawer-right-enter-active[data-v-89aa73e0],
+.drawer-right-leave-active[data-v-89aa73e0] {
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawer-right-enter-from[data-v-c7209ade],
-.drawer-right-leave-to[data-v-c7209ade] {
+.drawer-right-enter-from[data-v-89aa73e0],
+.drawer-right-leave-to[data-v-89aa73e0] {
   transform: translateX(100%);
 }
-.drawer-top-enter-active[data-v-c7209ade],
-.drawer-top-leave-active[data-v-c7209ade] {
+.drawer-top-enter-active[data-v-89aa73e0],
+.drawer-top-leave-active[data-v-89aa73e0] {
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawer-top-enter-from[data-v-c7209ade],
-.drawer-top-leave-to[data-v-c7209ade] {
+.drawer-top-enter-from[data-v-89aa73e0],
+.drawer-top-leave-to[data-v-89aa73e0] {
   transform: translateY(-100%);
 }
-.drawer-bottom-enter-active[data-v-c7209ade],
-.drawer-bottom-leave-active[data-v-c7209ade] {
+.drawer-bottom-enter-active[data-v-89aa73e0],
+.drawer-bottom-leave-active[data-v-89aa73e0] {
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.drawer-bottom-enter-from[data-v-c7209ade],
-.drawer-bottom-leave-to[data-v-c7209ade] {
+.drawer-bottom-enter-from[data-v-89aa73e0],
+.drawer-bottom-leave-to[data-v-89aa73e0] {
   transform: translateY(100%);
 }.crop-box[data-v-54852b1f] {
   width: 100%;

package/dist/fantasia-ui.es.js

@@ -6466,7 +6466,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-cae03335"]]);
+const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-b15f082a"]]);
 const _hoisted_1$3 = {
   key: 0,
   class: "f-drawer__header"
@@ -6481,7 +6481,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeModels({
     title: {},
     placement: { default: "right" },
-    size: { default: "30%" },
+    size: {},
     showClose: { type: Boolean, default: true },
     lockScroll: { type: Boolean, default: true },
     closeOnClickOutside: { type: Boolean, default: true }
@@ -6492,6 +6492,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["close"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const isHorizontal = computed(() => props.placement === "left" || props.placement === "right");
+    const drawerSize = computed(() => {
+      var _a;
+      return (_a = props.size) != null ? _a : isHorizontal.value ? "30%" : "auto";
+    });
+    const isAutoSize = computed(() => drawerSize.value === "auto");
+    const drawerStyle = computed(() => ({
+      [isHorizontal.value ? "width" : "height"]: drawerSize.value
+    }));
     const emit = __emit;
     const visible = useModel(__props, "modelValue");
     const handleClose = () => {
@@ -6531,10 +6540,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             visible.value ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: normalizeClass(["f-drawer", `f-drawer--${_ctx.placement}`]),
-              style: normalizeStyle({
-                [_ctx.placement === "left" || _ctx.placement === "right" ? "width" : "height"]: _ctx.size
-              })
+              class: normalizeClass(["f-drawer", [`f-drawer--${_ctx.placement}`, { "is-auto-size": unref(isAutoSize) }]]),
+              style: normalizeStyle(unref(drawerStyle))
             }, [
               _ctx.title || _ctx.showClose || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
@@ -6572,7 +6579,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c7209ade"]]);
+const FDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-89aa73e0"]]);
 const _hoisted_1$2 = { class: "crop-box" };
 const _hoisted_2$1 = {
   key: 0,

package/dist/fantasia-ui.umd.js

@@ -6467,7 +6467,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   });
-  const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-cae03335"]]);
+  const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-b15f082a"]]);
   const _hoisted_1$3 = {
     key: 0,
     class: "f-drawer__header"
@@ -6482,7 +6482,7 @@ var __async = (__this, __arguments, generator) => {
     props: /* @__PURE__ */ vue.mergeModels({
       title: {},
       placement: { default: "right" },
-      size: { default: "30%" },
+      size: {},
       showClose: { type: Boolean, default: true },
       lockScroll: { type: Boolean, default: true },
       closeOnClickOutside: { type: Boolean, default: true }
@@ -6493,6 +6493,15 @@ var __async = (__this, __arguments, generator) => {
     emits: /* @__PURE__ */ vue.mergeModels(["close"], ["update:modelValue"]),
     setup(__props, { emit: __emit }) {
       const props = __props;
+      const isHorizontal = vue.computed(() => props.placement === "left" || props.placement === "right");
+      const drawerSize = vue.computed(() => {
+        var _a;
+        return (_a = props.size) != null ? _a : isHorizontal.value ? "30%" : "auto";
+      });
+      const isAutoSize = vue.computed(() => drawerSize.value === "auto");
+      const drawerStyle = vue.computed(() => ({
+        [isHorizontal.value ? "width" : "height"]: drawerSize.value
+      }));
       const emit = __emit;
       const visible = vue.useModel(__props, "modelValue");
       const handleClose = () => {
@@ -6532,10 +6541,8 @@ var __async = (__this, __arguments, generator) => {
             default: vue.withCtx(() => [
               visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
-                class: vue.normalizeClass(["f-drawer", `f-drawer--${_ctx.placement}`]),
-                style: vue.normalizeStyle({
-                  [_ctx.placement === "left" || _ctx.placement === "right" ? "width" : "height"]: _ctx.size
-                })
+                class: vue.normalizeClass(["f-drawer", [`f-drawer--${_ctx.placement}`, { "is-auto-size": vue.unref(isAutoSize) }]]),
+                style: vue.normalizeStyle(vue.unref(drawerStyle))
               }, [
                 _ctx.title || _ctx.showClose || _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
                   vue.renderSlot(_ctx.$slots, "header", {}, () => [
@@ -6573,7 +6580,7 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   });
-  const FDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c7209ade"]]);
+  const FDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-89aa73e0"]]);
   const _hoisted_1$2 = { class: "crop-box" };
   const _hoisted_2$1 = {
     key: 0,

package/dist/types/packages/components/modules/FDrawer.vue.d.ts

@@ -18,7 +18,6 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     "onUpdate:modelValue"?: (value: boolean) => any;
     onClose?: () => any;
 }>, {
-    size: string;
     placement: import("../../types/components").FDrawerPlacement;
     showClose: boolean;
     closeOnClickOutside: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fantasia-ui",
   "private": false,
-  "version": "0.6.8",
+  "version": "0.6.9",
   "type": "module",
   "main": "dist/fantasia-ui.umd.js",
   "module": "dist/fantasia-ui.es.js",