fantasia-ui 0.6.5 → 0.6.6

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.
@@ -6294,17 +6294,19 @@
6294
6294
  .f-step__content {
6295
6295
  min-width: 0;
6296
6296
  flex: 1;
6297
- padding-top: 4px;
6297
+ padding-top: 2px;
6298
6298
  }
6299
6299
  .f-step__title {
6300
6300
  font-size: 14px;
6301
6301
  font-weight: 600;
6302
6302
  color: #1f2937;
6303
+ line-height: 1.5;
6303
6304
  }
6304
6305
  .f-step__description {
6305
- margin-top: 4px;
6306
+ margin-top: 6px;
6306
6307
  font-size: 12px;
6307
6308
  color: #64748b;
6309
+ line-height: 1.5;
6308
6310
  }
6309
6311
 
6310
6312
  .f-switch {
@@ -14134,17 +14136,19 @@ to {
14134
14136
  .f-step__content[data-v-39ce5b1c] {
14135
14137
  min-width: 0;
14136
14138
  flex: 1;
14137
- padding-top: 4px;
14139
+ padding-top: 2px;
14138
14140
  }
14139
14141
  .f-step__title[data-v-39ce5b1c] {
14140
14142
  font-size: 14px;
14141
14143
  font-weight: 600;
14142
14144
  color: #1f2937;
14145
+ line-height: 1.5;
14143
14146
  }
14144
14147
  .f-step__description[data-v-39ce5b1c] {
14145
- margin-top: 4px;
14148
+ margin-top: 6px;
14146
14149
  font-size: 12px;
14147
14150
  color: #64748b;
14151
+ line-height: 1.5;
14148
14152
  }.f-timeline[data-v-05989a62] {
14149
14153
  position: relative;
14150
14154
  padding: 0;
@@ -14479,7 +14483,7 @@ to {
14479
14483
  .f-timeline-item__content[data-v-235d4634] {
14480
14484
  font-size: 13px;
14481
14485
  }
14482
- }.f-dialog-overlay[data-v-7a2da7c7] {
14486
+ }.f-dialog-overlay[data-v-cae03335] {
14483
14487
  position: fixed;
14484
14488
  top: 0;
14485
14489
  left: 0;
@@ -14495,7 +14499,7 @@ to {
14495
14499
  transition: background-color 0.25s ease;
14496
14500
  touch-action: none;
14497
14501
  }
14498
- .f-dialog[data-v-7a2da7c7] {
14502
+ .f-dialog[data-v-cae03335] {
14499
14503
  position: relative;
14500
14504
  background: #fff;
14501
14505
  border-radius: 8px;
@@ -14509,7 +14513,7 @@ to {
14509
14513
  will-change: transform, opacity;
14510
14514
  transform-origin: center;
14511
14515
  }
14512
- .f-dialog__close[data-v-7a2da7c7] {
14516
+ .f-dialog__close[data-v-cae03335] {
14513
14517
  position: absolute;
14514
14518
  top: 16px;
14515
14519
  right: 16px;
@@ -14527,20 +14531,20 @@ to {
14527
14531
  z-index: 1;
14528
14532
  padding: 0;
14529
14533
  }
14530
- .f-dialog__close[data-v-7a2da7c7]:hover {
14534
+ .f-dialog__close[data-v-cae03335]:hover {
14531
14535
  background: #f5f7fa;
14532
14536
  color: #606266;
14533
14537
  }
14534
- .f-dialog__header[data-v-7a2da7c7] {
14538
+ .f-dialog__header[data-v-cae03335] {
14535
14539
  padding: 20px 20px 16px;
14536
14540
  display: flex;
14537
14541
  align-items: center;
14538
14542
  gap: 12px;
14539
14543
  }
14540
- .f-dialog__header.has-divider[data-v-7a2da7c7] {
14544
+ .f-dialog__header.has-divider[data-v-cae03335] {
14541
14545
  border-bottom: 1px solid #e4e7ed;
14542
14546
  }
14543
- .f-dialog__icon[data-v-7a2da7c7] {
14547
+ .f-dialog__icon[data-v-cae03335] {
14544
14548
  flex-shrink: 0;
14545
14549
  width: 28px;
14546
14550
  height: 28px;
@@ -14549,11 +14553,11 @@ to {
14549
14553
  justify-content: center;
14550
14554
  border-radius: 50%;
14551
14555
  }
14552
- .f-dialog__icon[data-v-7a2da7c7] svg {
14556
+ .f-dialog__icon[data-v-cae03335] svg {
14553
14557
  width: 20px;
14554
14558
  height: 20px;
14555
14559
  }
14556
- .f-dialog__title[data-v-7a2da7c7] {
14560
+ .f-dialog__title[data-v-cae03335] {
14557
14561
  flex: 1;
14558
14562
  margin: 0;
14559
14563
  font-size: 18px;
@@ -14561,7 +14565,7 @@ to {
14561
14565
  color: #303133;
14562
14566
  line-height: 1.4;
14563
14567
  }
14564
- .f-dialog__body[data-v-7a2da7c7] {
14568
+ .f-dialog__body[data-v-cae03335] {
14565
14569
  flex: 1;
14566
14570
  min-height: 0;
14567
14571
  color: #606266;
@@ -14571,88 +14575,88 @@ to {
14571
14575
  display: flex;
14572
14576
  flex-direction: column;
14573
14577
  }
14574
- .f-dialog__body[data-v-7a2da7c7] .f-scrollbar {
14578
+ .f-dialog__body[data-v-cae03335] .f-scrollbar {
14575
14579
  flex: 1;
14576
14580
  min-height: 0;
14577
14581
  }
14578
- .f-dialog__body[data-v-7a2da7c7] .f-scrollbar__wrap {
14582
+ .f-dialog__body[data-v-cae03335] .f-scrollbar__wrap {
14579
14583
  overflow-y: auto !important;
14580
14584
  overflow-x: hidden;
14581
14585
  -webkit-overflow-scrolling: touch;
14582
14586
  }
14583
- .f-dialog__body[data-v-7a2da7c7] .f-scrollbar__view {
14587
+ .f-dialog__body[data-v-cae03335] .f-scrollbar__view {
14584
14588
  padding: 20px;
14585
14589
  }
14586
- .f-dialog__body p[data-v-7a2da7c7] {
14590
+ .f-dialog__body p[data-v-cae03335] {
14587
14591
  margin: 0;
14588
14592
  }
14589
- .f-dialog__footer[data-v-7a2da7c7] {
14593
+ .f-dialog__footer[data-v-cae03335] {
14590
14594
  padding: 16px 20px;
14591
14595
  display: flex;
14592
14596
  align-items: center;
14593
14597
  justify-content: flex-end;
14594
14598
  gap: 12px;
14595
14599
  }
14596
- .f-dialog__footer.has-divider[data-v-7a2da7c7] {
14600
+ .f-dialog__footer.has-divider[data-v-cae03335] {
14597
14601
  border-top: 1px solid #e4e7ed;
14598
14602
  }
14599
- .f-dialog--info .f-dialog__icon[data-v-7a2da7c7] {
14603
+ .f-dialog--info .f-dialog__icon[data-v-cae03335] {
14600
14604
  background: #ecf5ff;
14601
14605
  color: #409eff;
14602
14606
  }
14603
- .f-dialog--success .f-dialog__icon[data-v-7a2da7c7] {
14607
+ .f-dialog--success .f-dialog__icon[data-v-cae03335] {
14604
14608
  background: #f0f9ff;
14605
14609
  color: #67c23a;
14606
14610
  }
14607
- .f-dialog--warning .f-dialog__icon[data-v-7a2da7c7] {
14611
+ .f-dialog--warning .f-dialog__icon[data-v-cae03335] {
14608
14612
  background: #fef0e6;
14609
14613
  color: #e6a23c;
14610
14614
  }
14611
- .f-dialog--error .f-dialog__icon[data-v-7a2da7c7] {
14615
+ .f-dialog--error .f-dialog__icon[data-v-cae03335] {
14612
14616
  background: #fef0f0;
14613
14617
  color: #f56c6c;
14614
14618
  }
14615
- .f-dialog--confirm .f-dialog__icon[data-v-7a2da7c7] {
14619
+ .f-dialog--confirm .f-dialog__icon[data-v-cae03335] {
14616
14620
  background: #fef0e6;
14617
14621
  color: #e6a23c;
14618
14622
  }
14619
- .dialog-fade-enter-active[data-v-7a2da7c7],
14620
- .dialog-fade-leave-active[data-v-7a2da7c7] {
14623
+ .dialog-fade-enter-active[data-v-cae03335],
14624
+ .dialog-fade-leave-active[data-v-cae03335] {
14621
14625
  transition: opacity 0.25s ease;
14622
14626
  }
14623
- .dialog-fade-enter-from[data-v-7a2da7c7],
14624
- .dialog-fade-leave-to[data-v-7a2da7c7] {
14627
+ .dialog-fade-enter-from[data-v-cae03335],
14628
+ .dialog-fade-leave-to[data-v-cae03335] {
14625
14629
  opacity: 0;
14626
14630
  }
14627
- .dialog-enter-active[data-v-7a2da7c7],
14628
- .dialog-leave-active[data-v-7a2da7c7] {
14631
+ .dialog-enter-active[data-v-cae03335],
14632
+ .dialog-leave-active[data-v-cae03335] {
14629
14633
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
14630
14634
  }
14631
- .dialog-enter-from[data-v-7a2da7c7],
14632
- .dialog-leave-to[data-v-7a2da7c7] {
14635
+ .dialog-enter-from[data-v-cae03335],
14636
+ .dialog-leave-to[data-v-cae03335] {
14633
14637
  opacity: 0;
14634
14638
  transform: scale(0.88) translateY(6px);
14635
14639
  }
14636
- .dialog-enter-to[data-v-7a2da7c7],
14637
- .dialog-leave-from[data-v-7a2da7c7] {
14640
+ .dialog-enter-to[data-v-cae03335],
14641
+ .dialog-leave-from[data-v-cae03335] {
14638
14642
  opacity: 1;
14639
14643
  transform: scale(1) translateY(0);
14640
14644
  }
14641
14645
  @media (max-width: 768px) {
14642
- .f-dialog-overlay[data-v-7a2da7c7] {
14646
+ .f-dialog-overlay[data-v-cae03335] {
14643
14647
  padding: 10px;
14644
14648
  }
14645
- .f-dialog[data-v-7a2da7c7] {
14649
+ .f-dialog[data-v-cae03335] {
14646
14650
  width: 95vw;
14647
14651
  max-height: 85vh;
14648
14652
  }
14649
- .f-dialog__header[data-v-7a2da7c7] {
14653
+ .f-dialog__header[data-v-cae03335] {
14650
14654
  padding: 16px 16px 12px;
14651
14655
  }
14652
- .f-dialog__body[data-v-7a2da7c7] .f-scrollbar__view {
14656
+ .f-dialog__body[data-v-cae03335] .f-scrollbar__view {
14653
14657
  padding: 16px;
14654
14658
  }
14655
- .f-dialog__footer[data-v-7a2da7c7] {
14659
+ .f-dialog__footer[data-v-cae03335] {
14656
14660
  padding: 12px 16px;
14657
14661
  }
14658
14662
  }.f-drawer-backdrop[data-v-c7209ade] {
@@ -6228,6 +6228,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
6228
6228
  title: { default: "提示" },
6229
6229
  content: { default: "" },
6230
6230
  type: { default: "info" },
6231
+ width: { default: "500px" },
6231
6232
  confirmText: { default: "确定" },
6232
6233
  cancelText: { default: "取消" },
6233
6234
  showCancel: { type: Boolean, default: true },
@@ -6244,6 +6245,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
6244
6245
  const props = __props;
6245
6246
  const emit = __emit;
6246
6247
  const visible = useModel(__props, "modelValue");
6248
+ const dialogWidth = computed(() => {
6249
+ if (typeof props.width === "number") {
6250
+ return `${props.width}px`;
6251
+ }
6252
+ return props.width;
6253
+ });
6247
6254
  const handleClose = () => {
6248
6255
  visible.value = false;
6249
6256
  emit("cancel");
@@ -6295,7 +6302,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
6295
6302
  default: withCtx(() => [
6296
6303
  visible.value ? (openBlock(), createElementBlock("div", {
6297
6304
  key: 0,
6298
- class: normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`])
6305
+ class: normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`]),
6306
+ style: normalizeStyle({ width: unref(dialogWidth) })
6299
6307
  }, [
6300
6308
  _ctx.showClose ? (openBlock(), createElementBlock("button", {
6301
6309
  key: 0,
@@ -6358,7 +6366,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
6358
6366
  })
6359
6367
  ], true)
6360
6368
  ], 2)
6361
- ], 2)) : createCommentVNode("", true)
6369
+ ], 6)) : createCommentVNode("", true)
6362
6370
  ]),
6363
6371
  _: 3
6364
6372
  })
@@ -6370,7 +6378,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
6370
6378
  };
6371
6379
  }
6372
6380
  });
6373
- const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7a2da7c7"]]);
6381
+ const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-cae03335"]]);
6374
6382
  const _hoisted_1$3 = {
6375
6383
  key: 0,
6376
6384
  class: "f-drawer__header"
@@ -6229,6 +6229,7 @@ var __async = (__this, __arguments, generator) => {
6229
6229
  title: { default: "提示" },
6230
6230
  content: { default: "" },
6231
6231
  type: { default: "info" },
6232
+ width: { default: "500px" },
6232
6233
  confirmText: { default: "确定" },
6233
6234
  cancelText: { default: "取消" },
6234
6235
  showCancel: { type: Boolean, default: true },
@@ -6245,6 +6246,12 @@ var __async = (__this, __arguments, generator) => {
6245
6246
  const props = __props;
6246
6247
  const emit = __emit;
6247
6248
  const visible = vue.useModel(__props, "modelValue");
6249
+ const dialogWidth = vue.computed(() => {
6250
+ if (typeof props.width === "number") {
6251
+ return `${props.width}px`;
6252
+ }
6253
+ return props.width;
6254
+ });
6248
6255
  const handleClose = () => {
6249
6256
  visible.value = false;
6250
6257
  emit("cancel");
@@ -6296,7 +6303,8 @@ var __async = (__this, __arguments, generator) => {
6296
6303
  default: vue.withCtx(() => [
6297
6304
  visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
6298
6305
  key: 0,
6299
- class: vue.normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`])
6306
+ class: vue.normalizeClass(["f-dialog", `f-dialog--${_ctx.type}`]),
6307
+ style: vue.normalizeStyle({ width: vue.unref(dialogWidth) })
6300
6308
  }, [
6301
6309
  _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
6302
6310
  key: 0,
@@ -6359,7 +6367,7 @@ var __async = (__this, __arguments, generator) => {
6359
6367
  })
6360
6368
  ], true)
6361
6369
  ], 2)
6362
- ], 2)) : vue.createCommentVNode("", true)
6370
+ ], 6)) : vue.createCommentVNode("", true)
6363
6371
  ]),
6364
6372
  _: 3
6365
6373
  })
@@ -6371,7 +6379,7 @@ var __async = (__this, __arguments, generator) => {
6371
6379
  };
6372
6380
  }
6373
6381
  });
6374
- const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7a2da7c7"]]);
6382
+ const FDialogComp = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-cae03335"]]);
6375
6383
  const _hoisted_1$3 = {
6376
6384
  key: 0,
6377
6385
  class: "f-drawer__header"
@@ -20,6 +20,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
20
20
  "onUpdate:modelValue"?: (value: boolean) => any;
21
21
  onCancel?: () => any;
22
22
  }>, {
23
+ width: string | number;
23
24
  type: import("../../types/components").FDialogType;
24
25
  title: string;
25
26
  content: string;
@@ -12,6 +12,8 @@ interface FDialogProps {
12
12
  content?: string;
13
13
  /** 对话框类型 */
14
14
  type?: FDialogType;
15
+ /** 对话框宽度,支持 CSS 单位字符串或数字(px) @default '500px' */
16
+ width?: string | number;
15
17
  /** 确认按钮文本 */
16
18
  confirmText?: string;
17
19
  /** 取消按钮文本 */
@@ -40,6 +42,7 @@ interface FDialogOptions {
40
42
  title?: string;
41
43
  content?: string;
42
44
  type?: FDialogType;
45
+ width?: string | number;
43
46
  confirmText?: string;
44
47
  cancelText?: string;
45
48
  showCancel?: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "fantasia-ui",
3
3
  "private": false,
4
- "version": "0.6.5",
4
+ "version": "0.6.6",
5
5
  "type": "module",
6
6
  "main": "dist/fantasia-ui.umd.js",
7
7
  "module": "dist/fantasia-ui.es.js",