fantasia-ui 0.6.6 → 0.6.7

package/dist/fantasia-ui.css

@@ -5613,6 +5613,14 @@
   width: 100%;
 }
 
+.f-select-dropdown[data-placement=top] {
+  transform-origin: bottom center;
+}
+
+.f-select-dropdown[data-placement=bottom] {
+  transform-origin: top center;
+}
+
 .f-select {
   display: inline-flex;
   align-items: center;
@@ -5721,6 +5729,8 @@
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s, color 0.2s;
+  display: inline-flex;
+  align-items: center;
 }
 .f-select__clear:hover {
   color: #64748b;
@@ -5740,6 +5750,19 @@
 .f-select.is-clearable:hover:not(.is-disabled) .f-select__arrow {
   opacity: 0;
 }
+.f-select.is-borderless {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.f-select.is-borderless:hover, .f-select.is-borderless.is-open {
+  border-color: transparent;
+  background: var(--bg-tertiary);
+  box-shadow: none;
+}
+.f-select.is-borderless.is-disabled:hover {
+  background: transparent;
+}
 .f-select__input {
   flex: 1;
   min-width: 0;
@@ -8419,12 +8442,18 @@ to {
   color: var(--text-muted);
   border: 1px solid var(--border2);
 }
-.f-select-wrapper[data-v-2115ccc5] {
+.f-select-wrapper[data-v-42ec0325] {
   display: inline-block;
   position: relative;
   width: 100%;
 }
-.f-select[data-v-2115ccc5] {
+.f-select-dropdown[data-placement=top][data-v-42ec0325] {
+  transform-origin: bottom center;
+}
+.f-select-dropdown[data-placement=bottom][data-v-42ec0325] {
+  transform-origin: top center;
+}
+.f-select[data-v-42ec0325] {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -8443,66 +8472,66 @@ to {
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   /* ---------- 多选：标签 ---------- */
 }
-.f-select[data-v-2115ccc5]:hover:not(.is-disabled) {
+.f-select[data-v-42ec0325]:hover:not(.is-disabled) {
   border-color: #ec4899;
 }
-.f-select.is-open[data-v-2115ccc5]:not(.is-disabled), .f-select[data-v-2115ccc5]:focus-within:not(.is-disabled) {
+.f-select.is-open[data-v-42ec0325]:not(.is-disabled), .f-select[data-v-42ec0325]:focus-within:not(.is-disabled) {
   border-color: #ec4899;
   background: #fff;
   box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2274509804);
 }
-.f-select.is-open:not(.is-disabled) .f-select__arrow[data-v-2115ccc5], .f-select:focus-within:not(.is-disabled) .f-select__arrow[data-v-2115ccc5] {
+.f-select.is-open:not(.is-disabled) .f-select__arrow[data-v-42ec0325], .f-select:focus-within:not(.is-disabled) .f-select__arrow[data-v-42ec0325] {
   transform: rotate(180deg);
 }
-.f-select.is-active .f-select__label[data-v-2115ccc5] {
+.f-select.is-active .f-select__label[data-v-42ec0325] {
   color: #1e293b;
 }
-.f-select.is-disabled[data-v-2115ccc5] {
+.f-select.is-disabled[data-v-42ec0325] {
   cursor: not-allowed;
   background-color: #f5f7fa;
   border-color: #e4e7ed;
   color: #c0c4cc;
 }
-.f-select.is-disabled .f-select__label[data-v-2115ccc5],
-.f-select.is-disabled .f-select__arrow[data-v-2115ccc5] {
+.f-select.is-disabled .f-select__label[data-v-42ec0325],
+.f-select.is-disabled .f-select__arrow[data-v-42ec0325] {
   cursor: not-allowed;
 }
-.f-select.is-disabled .f-select__tag[data-v-2115ccc5] {
+.f-select.is-disabled .f-select__tag[data-v-42ec0325] {
   opacity: 0.6;
 }
-.f-select--small[data-v-2115ccc5] {
+.f-select--small[data-v-42ec0325] {
   height: 32px;
   font-size: 13px;
 }
-.f-select--small .f-select__label[data-v-2115ccc5] {
+.f-select--small .f-select__label[data-v-42ec0325] {
   font-size: 13px;
 }
-.f-select--medium[data-v-2115ccc5] {
+.f-select--medium[data-v-42ec0325] {
   height: 36px;
   font-size: 14px;
 }
-.f-select--large[data-v-2115ccc5] {
+.f-select--large[data-v-42ec0325] {
   height: 40px;
   font-size: 16px;
 }
-.f-select--large .f-select__label[data-v-2115ccc5] {
+.f-select--large .f-select__label[data-v-42ec0325] {
   font-size: 16px;
 }
-.f-select.is-multiple[data-v-2115ccc5] {
+.f-select.is-multiple[data-v-42ec0325] {
   height: auto;
   padding-top: 3px;
   padding-bottom: 3px;
 }
-.f-select.is-multiple.f-select--small[data-v-2115ccc5] {
+.f-select.is-multiple.f-select--small[data-v-42ec0325] {
   min-height: 32px;
 }
-.f-select.is-multiple.f-select--medium[data-v-2115ccc5] {
+.f-select.is-multiple.f-select--medium[data-v-42ec0325] {
   min-height: 36px;
 }
-.f-select.is-multiple.f-select--large[data-v-2115ccc5] {
+.f-select.is-multiple.f-select--large[data-v-42ec0325] {
   min-height: 40px;
 }
-.f-select__label[data-v-2115ccc5] {
+.f-select__label[data-v-42ec0325] {
   font-size: 14px;
   line-height: 1.5;
   color: #1e293b;
@@ -8512,46 +8541,61 @@ to {
   text-overflow: ellipsis;
   transition: color 0.2s;
 }
-.f-select__label.is-placeholder[data-v-2115ccc5] {
+.f-select__label.is-placeholder[data-v-42ec0325] {
   color: #94a3b8;
 }
-.f-select__suffix[data-v-2115ccc5] {
+.f-select__suffix[data-v-42ec0325] {
   display: grid;
   place-items: center;
   width: 14px;
   height: 14px;
   flex-shrink: 0;
 }
-.f-select__suffix[data-v-2115ccc5] > * {
+.f-select__suffix[data-v-42ec0325] > * {
   grid-area: 1/1;
 }
-.f-select__clear[data-v-2115ccc5] {
+.f-select__clear[data-v-42ec0325] {
   font-size: 14px;
   color: #94a3b8;
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s, color 0.2s;
+  display: inline-flex;
+  align-items: center;
 }
-.f-select__clear[data-v-2115ccc5]:hover {
+.f-select__clear[data-v-42ec0325]:hover {
   color: #64748b;
 }
-.f-select__arrow[data-v-2115ccc5] {
+.f-select__arrow[data-v-42ec0325] {
   font-size: 14px;
   color: #94a3b8;
   transition: transform 0.3s, color 0.2s, opacity 0.2s;
 }
-.f-select:hover:not(.is-disabled) .f-select__arrow[data-v-2115ccc5] {
+.f-select:hover:not(.is-disabled) .f-select__arrow[data-v-42ec0325] {
   color: #64748b;
 }
-.f-select.is-clearable:hover:not(.is-disabled) .f-select__clear[data-v-2115ccc5] {
+.f-select.is-clearable:hover:not(.is-disabled) .f-select__clear[data-v-42ec0325] {
   opacity: 1;
   pointer-events: auto;
 }
-.f-select.is-clearable:hover:not(.is-disabled) .f-select__arrow[data-v-2115ccc5] {
+.f-select.is-clearable:hover:not(.is-disabled) .f-select__arrow[data-v-42ec0325] {
   opacity: 0;
 }
-.f-select__input[data-v-2115ccc5] {
+.f-select.is-borderless[data-v-42ec0325] {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.f-select.is-borderless[data-v-42ec0325]:hover, .f-select.is-borderless.is-open[data-v-42ec0325] {
+  border-color: transparent;
+  background: var(--bg-tertiary);
+  box-shadow: none;
+}
+.f-select.is-borderless.is-disabled[data-v-42ec0325]:hover {
+  background: transparent;
+}
+.f-select__input[data-v-42ec0325] {
   flex: 1;
   min-width: 0;
   padding: 0;
@@ -8562,16 +8606,16 @@ to {
   line-height: 1.5;
   color: #1e293b;
 }
-.f-select__input[data-v-2115ccc5]::placeholder {
+.f-select__input[data-v-42ec0325]::placeholder {
   color: #94a3b8;
 }
-.f-select__input.has-value[data-v-2115ccc5]::placeholder {
+.f-select__input.has-value[data-v-42ec0325]::placeholder {
   color: #64748b;
 }
-.f-select__input.is-multiple[data-v-2115ccc5] {
+.f-select__input.is-multiple[data-v-42ec0325] {
   min-width: 60px;
 }
-.f-select__tags[data-v-2115ccc5] {
+.f-select__tags[data-v-42ec0325] {
   flex: 1;
   min-width: 0;
   display: flex;
@@ -8579,35 +8623,35 @@ to {
   gap: 4px;
   align-items: center;
 }
-.f-select__tag[data-v-2115ccc5] {
+.f-select__tag[data-v-42ec0325] {
   max-width: 200px;
 }
-.f-select__tag[data-v-2115ccc5] .f-tag {
+.f-select__tag[data-v-42ec0325] .f-tag {
   max-width: 100%;
 }
 @media (hover: none) {
-.f-select.is-clearable .f-select__clear[data-v-2115ccc5] {
+.f-select.is-clearable .f-select__clear[data-v-42ec0325] {
     opacity: 1;
     pointer-events: auto;
 }
-.f-select.is-clearable .f-select__arrow[data-v-2115ccc5] {
+.f-select.is-clearable .f-select__arrow[data-v-42ec0325] {
     opacity: 0;
 }
 }
 /* ---------- 下拉面板 ---------- */
-.f-select-dropdown[data-v-2115ccc5] {
+.f-select-dropdown[data-v-42ec0325] {
   position: fixed;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
   z-index: 2000;
 }
-.f-select-dropdown__content[data-v-2115ccc5] {
+.f-select-dropdown__content[data-v-42ec0325] {
   padding: 4px 0;
 }
 
 /* ---------- 选项 ---------- */
-.f-select-option[data-v-2115ccc5] {
+.f-select-option[data-v-42ec0325] {
   padding: 8px 12px;
   font-size: 14px;
   line-height: 1.5;
@@ -8616,27 +8660,27 @@ to {
   transition: all 0.2s;
   user-select: none;
 }
-.f-select-option[data-v-2115ccc5]:hover:not(.is-disabled) {
+.f-select-option[data-v-42ec0325]:hover:not(.is-disabled) {
   background-color: #f5f7fa;
 }
-.f-select-option.is-selected[data-v-2115ccc5] {
+.f-select-option.is-selected[data-v-42ec0325] {
   color: #ec4899;
   font-weight: 500;
   background-color: #fdf2f8;
 }
-.f-select-option.is-disabled[data-v-2115ccc5] {
+.f-select-option.is-disabled[data-v-42ec0325] {
   color: #c0c4cc;
   cursor: not-allowed;
 }
-.f-select-option.is-empty[data-v-2115ccc5] {
+.f-select-option.is-empty[data-v-42ec0325] {
   text-align: center;
   color: #909399;
   cursor: default;
 }
-.f-select-option.is-empty[data-v-2115ccc5]:hover {
+.f-select-option.is-empty[data-v-42ec0325]:hover {
   background-color: transparent;
 }
-.f-select-option__label[data-v-2115ccc5] {
+.f-select-option__label[data-v-42ec0325] {
   display: block;
   white-space: nowrap;
   overflow: hidden;
@@ -8644,10 +8688,10 @@ to {
 }
 
 /* ---------- 新增选项按钮/表单 ---------- */
-.f-select__add-section[data-v-2115ccc5] {
+.f-select__add-section[data-v-42ec0325] {
   border-top: 1px solid #e0e0e6;
 }
-.f-select__add-option[data-v-2115ccc5] {
+.f-select__add-option[data-v-42ec0325] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -8657,17 +8701,17 @@ to {
   font-size: 14px;
   transition: all 0.2s ease;
 }
-.f-select__add-option[data-v-2115ccc5]:hover {
+.f-select__add-option[data-v-42ec0325]:hover {
   background-color: #fdf2f8;
 }
-.f-select__add-option[data-v-2115ccc5]:active {
+.f-select__add-option[data-v-42ec0325]:active {
   background-color: #fce7f3;
 }
-.f-select__add-form[data-v-2115ccc5] {
+.f-select__add-form[data-v-42ec0325] {
   padding: 12px;
   background-color: #fafafa;
 }
-.f-select__add-input[data-v-2115ccc5] {
+.f-select__add-input[data-v-42ec0325] {
   width: 100%;
   padding: 6px 10px;
   margin-bottom: 8px;
@@ -8677,22 +8721,22 @@ to {
   outline: none;
   transition: all 0.2s;
 }
-.f-select__add-input[data-v-2115ccc5]::placeholder {
+.f-select__add-input[data-v-42ec0325]::placeholder {
   color: #94a3b8;
 }
-.f-select__add-input[data-v-2115ccc5]:hover {
+.f-select__add-input[data-v-42ec0325]:hover {
   border-color: #ec4899;
 }
-.f-select__add-input[data-v-2115ccc5]:focus {
+.f-select__add-input[data-v-42ec0325]:focus {
   border-color: #ec4899;
   box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2274509804);
 }
-.f-select__add-actions[data-v-2115ccc5] {
+.f-select__add-actions[data-v-42ec0325] {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
 }
-.f-select__add-btn[data-v-2115ccc5] {
+.f-select__add-btn[data-v-42ec0325] {
   padding: 4px 12px;
   font-size: 13px;
   border: none;
@@ -8700,34 +8744,34 @@ to {
   cursor: pointer;
   transition: all 0.2s;
 }
-.f-select__add-btn--confirm[data-v-2115ccc5] {
+.f-select__add-btn--confirm[data-v-42ec0325] {
   background-color: #ec4899;
   color: white;
 }
-.f-select__add-btn--confirm[data-v-2115ccc5]:hover {
+.f-select__add-btn--confirm[data-v-42ec0325]:hover {
   background-color: #db2777;
 }
-.f-select__add-btn--confirm[data-v-2115ccc5]:active {
+.f-select__add-btn--confirm[data-v-42ec0325]:active {
   background-color: #be185d;
 }
-.f-select__add-btn--cancel[data-v-2115ccc5] {
+.f-select__add-btn--cancel[data-v-42ec0325] {
   background-color: #f1f5f9;
   color: #64748b;
 }
-.f-select__add-btn--cancel[data-v-2115ccc5]:hover {
+.f-select__add-btn--cancel[data-v-42ec0325]:hover {
   background-color: #e2e8f0;
 }
-.f-select__add-btn--cancel[data-v-2115ccc5]:active {
+.f-select__add-btn--cancel[data-v-42ec0325]:active {
   background-color: #cbd5e1;
 }
 
 /* ---------- 下拉动画 ---------- */
-.f-select-dropdown-enter-active[data-v-2115ccc5],
-.f-select-dropdown-leave-active[data-v-2115ccc5] {
+.f-select-dropdown-enter-active[data-v-42ec0325],
+.f-select-dropdown-leave-active[data-v-42ec0325] {
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
-.f-select-dropdown-enter-from[data-v-2115ccc5],
-.f-select-dropdown-leave-to[data-v-2115ccc5] {
+.f-select-dropdown-enter-from[data-v-42ec0325],
+.f-select-dropdown-leave-to[data-v-42ec0325] {
   opacity: 0;
   transform: scaleY(0.9);
 }.f-date-picker[data-v-82ea76e0] {

package/dist/fantasia-ui.es.js

@@ -1061,24 +1061,36 @@ const _hoisted_3$u = {
 };
 const _hoisted_4$j = ["placeholder"];
 const _hoisted_5$g = { class: "f-select__suffix" };
-const _hoisted_6$e = { class: "f-select-dropdown__content" };
-const _hoisted_7$9 = ["onClick"];
-const _hoisted_8$8 = { class: "f-select-option__label" };
-const _hoisted_9$7 = {
+const _hoisted_6$e = ["data-placement"];
+const _hoisted_7$9 = { class: "f-select-dropdown__content" };
+const _hoisted_8$8 = ["onClick"];
+const _hoisted_9$7 = { class: "f-select-option__label" };
+const _hoisted_10$6 = {
   key: 0,
   class: "f-select-option is-empty"
 };
-const _hoisted_10$6 = {
+const _hoisted_11$5 = {
   key: 0,
   class: "f-select__add-section"
 };
-const _hoisted_11$5 = {
+const _hoisted_12$3 = {
   key: 0,
   class: "f-select__add-form"
 };
+const OPTION_HEIGHT = 36;
+const ADD_SECTION_HEIGHT = 44;
+const PANEL_PADDING = 8;
+const GAP$2 = 4;
+const VIEWPORT_MARGIN = 8;
 const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "FSelect",
   props: /* @__PURE__ */ mergeModels({
+    bordered: { type: Boolean, default: true },
+    placement: { default: "auto" },
+    dropdownClass: {},
+    optionClass: {},
+    minDropdownWidth: { default: 0 },
+    maxDropdownHeight: { default: 240 },
     options: {},
     placeholder: { default: "请选择" },
     disabled: { type: Boolean, default: false },
@@ -1117,44 +1129,63 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       return props.options.filter((o) => String(o.label).toLowerCase().includes(kw));
     });
     const dropdownStyle = ref({});
+    const dropdownMaxHeight = ref(props.maxDropdownHeight);
+    const currentPlacement = ref("bottom");
+    const estimatedHeight = computed(() => {
+      const rows = Math.max(filteredOptions.value.length, 1);
+      return rows * OPTION_HEIGHT + PANEL_PADDING + (props.showAddOption ? ADD_SECTION_HEIGHT : 0);
+    });
     const updateDropdownPosition = () => {
-      if (!selectRef.value) return;
+      if (!isOpen.value || !selectRef.value) return;
       const rect = selectRef.value.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const spaceBelow = viewportHeight - rect.bottom;
-      const spaceAbove = rect.top;
-      let top = rect.bottom + 4;
-      let maxHeight = "240px";
-      if (spaceBelow < 240 && spaceAbove > spaceBelow) {
-        top = rect.top - 4;
-        maxHeight = `${Math.min(spaceAbove - 8, 240)}px`;
-      } else {
-        maxHeight = `${Math.min(spaceBelow - 8, 240)}px`;
-      }
-      dropdownStyle.value = {
+      const vh = window.innerHeight;
+      const vw = window.innerWidth;
+      const spaceBelow = vh - rect.bottom - GAP$2 - VIEWPORT_MARGIN;
+      const spaceAbove = rect.top - GAP$2 - VIEWPORT_MARGIN;
+      const desired = Math.min(estimatedHeight.value, props.maxDropdownHeight);
+      let placeTop;
+      if (props.placement === "top") placeTop = true;
+      else if (props.placement === "bottom") placeTop = false;
+      else placeTop = spaceBelow < desired && spaceAbove > spaceBelow;
+      currentPlacement.value = placeTop ? "top" : "bottom";
+      const space = placeTop ? spaceAbove : spaceBelow;
+      dropdownMaxHeight.value = Math.max(Math.min(props.maxDropdownHeight, space), 80);
+      const width = Math.max(rect.width, props.minDropdownWidth);
+      const left = Math.max(VIEWPORT_MARGIN, Math.min(rect.left, vw - width - VIEWPORT_MARGIN));
+      const style = {
         position: "fixed",
-        top: `${top}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        maxHeight,
+        left: `${left}px`,
+        width: `${width}px`,
         zIndex: "2000"
       };
+      if (placeTop) {
+        style.bottom = `${vh - rect.top + GAP$2}px`;
+      } else {
+        style.top = `${rect.bottom + GAP$2}px`;
+      }
+      dropdownStyle.value = style;
     };
     watch(isOpen, (open) => {
       if (open) {
+        updateDropdownPosition();
         if (props.filterable) nextTick(() => {
           var _a;
           return (_a = inputRef.value) == null ? void 0 : _a.focus();
         });
-        updateDropdownPosition();
       } else {
         keyword.value = "";
+        isAdding.value = false;
       }
     });
+    watch(filteredOptions, () => {
+      if (isOpen.value) nextTick(updateDropdownPosition);
+    });
+    const selectedOption = computed(
+      () => props.options.find((o) => o.key === modelValue.value)
+    );
     const selectedLabel = computed(() => {
-      var _a;
-      const option = props.options.find((o) => o.key === modelValue.value);
-      return (_a = option == null ? void 0 : option.label) != null ? _a : props.placeholder;
+      var _a, _b;
+      return (_b = (_a = selectedOption.value) == null ? void 0 : _a.label) != null ? _b : props.placeholder;
     });
     const handleOptionClick = (option) => {
       if (option.disabled) return;
@@ -1178,7 +1209,12 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       }
     };
     const isSelected = (key) => {
-      return props.multiple && multiValue.value.includes(key);
+      return props.multiple ? multiValue.value.includes(key) : modelValue.value === key;
+    };
+    const getOptionClass = (opt) => {
+      const c = props.optionClass;
+      if (!c) return "";
+      return typeof c === "function" ? c(opt, isSelected(opt.key)) : c;
     };
     const stopWhenOpen = (e) => {
       if (isOpen.value) e.stopPropagation();
@@ -1201,12 +1237,6 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const handleInputClick = () => {
       if (!props.disabled) isOpen.value = true;
     };
-    const handleClear = (e) => {
-      e.stopPropagation();
-      modelValue.value = props.multiple ? [] : void 0;
-      keyword.value = "";
-      emit("clear");
-    };
     const isAdding = ref(false);
     const newOptionLabel = ref("");
     const newOptionKey = ref("");
@@ -1214,6 +1244,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       isAdding.value = true;
       newOptionLabel.value = "";
       newOptionKey.value = "";
+      nextTick(updateDropdownPosition);
     };
     const cancelAdd = () => {
       isAdding.value = false;
@@ -1240,11 +1271,23 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       newOptionLabel.value = "";
       newOptionKey.value = "";
     };
+    const handleTriggerClick = (e) => {
+      if (props.disabled) return;
+      const target = e.target;
+      if (target == null ? void 0 : target.closest(".f-select__clear, .f-select__tag")) return;
+      isOpen.value = !isOpen.value;
+    };
+    const handleClear = () => {
+      const empty = props.multiple ? [] : null;
+      modelValue.value = empty;
+      keyword.value = "";
+      emit("change", empty, props.multiple ? [] : {});
+      emit("clear");
+    };
     const handleWindowClick = (e) => {
-      var _a, _b;
       if (!isOpen.value) return;
-      const target = e.target;
-      if (((_a = selectRef.value) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.value) == null ? void 0 : _b.contains(target))) {
+      const path = e.composedPath();
+      if (selectRef.value && path.includes(selectRef.value) || dropdownRef.value && path.includes(dropdownRef.value)) {
         return;
       }
       isOpen.value = false;
@@ -1265,9 +1308,10 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             "is-disabled": _ctx.disabled,
             "is-clearable": unref(showClear),
             "is-multiple": _ctx.multiple,
+            "is-borderless": !_ctx.bordered,
             [`f-select--${_ctx.size}`]: _ctx.size
           }]),
-          onClick: _cache[4] || (_cache[4] = ($event) => !_ctx.disabled && (isOpen.value = !unref(isOpen)))
+          onClick: handleTriggerClick
         }, [
           _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedOptions), (opt) => {
@@ -1316,13 +1360,20 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             ]) : (openBlock(), createElementBlock("span", {
               key: 1,
               class: normalizeClass(["f-select__label", { "is-placeholder": !unref(hasValue) }])
-            }, toDisplayString(unref(selectedLabel)), 3))
+            }, [
+              renderSlot(_ctx.$slots, "label", {
+                option: unref(selectedOption),
+                label: unref(selectedLabel)
+              }, () => [
+                createTextVNode(toDisplayString(unref(selectedLabel)), 1)
+              ], true)
+            ], 2))
           ], 64)),
           createElementVNode("div", _hoisted_5$g, [
             unref(showClear) ? (openBlock(), createBlock(FIcon, {
               key: 0,
               class: "f-select__clear",
-              onClick: withModifiers(handleClear, ["stop"])
+              onClick: handleClear
             }, {
               default: withCtx(() => [
                 createVNode(unref(CloseCircleOutline))
@@ -1344,37 +1395,51 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                 key: 0,
                 ref_key: "dropdownRef",
                 ref: dropdownRef,
-                class: "f-select-dropdown",
+                class: normalizeClass(["f-select-dropdown", _ctx.dropdownClass]),
+                "data-placement": unref(currentPlacement),
                 style: normalizeStyle(unref(dropdownStyle)),
-                onClick: _cache[9] || (_cache[9] = withModifiers(() => {
+                onClick: _cache[8] || (_cache[8] = withModifiers(() => {
                 }, ["stop"]))
               }, [
                 createVNode(FScrollbar, {
-                  "max-height": unref(dropdownStyle).maxHeight
+                  "max-height": `${unref(dropdownMaxHeight)}px`
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_6$e, [
+                    createElementVNode("div", _hoisted_7$9, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filteredOptions), (opt) => {
                         return openBlock(), createElementBlock("div", {
                           key: opt.key,
-                          class: normalizeClass(["f-select-option", {
-                            "is-disabled": opt.disabled,
-                            "is-selected": isSelected(opt.key)
-                          }]),
+                          class: normalizeClass(["f-select-option", [
+                            getOptionClass(opt),
+                            {
+                              "is-disabled": opt.disabled,
+                              "is-selected": isSelected(opt.key)
+                            }
+                          ]]),
                           onClick: ($event) => handleOptionClick(opt)
                         }, [
-                          createElementVNode("span", _hoisted_8$8, toDisplayString(opt.label), 1)
-                        ], 10, _hoisted_7$9);
+                          renderSlot(_ctx.$slots, "option", {
+                            option: opt,
+                            selected: isSelected(opt.key)
+                          }, () => [
+                            createElementVNode("span", _hoisted_9$7, toDisplayString(opt.label), 1)
+                          ], true)
+                        ], 10, _hoisted_8$8);
                       }), 128)),
-                      unref(filteredOptions).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_9$7, " 暂无数据 ")) : createCommentVNode("", true)
+                      unref(filteredOptions).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_10$6, [
+                        renderSlot(_ctx.$slots, "empty", {}, () => [
+                          _cache[9] || (_cache[9] = createTextVNode("暂无数据"))
+                        ], true)
+                      ])) : createCommentVNode("", true)
                     ]),
-                    _ctx.showAddOption ? (openBlock(), createElementBlock("div", _hoisted_10$6, [
-                      unref(isAdding) ? (openBlock(), createElementBlock("div", _hoisted_11$5, [
+                    renderSlot(_ctx.$slots, "footer", {}, void 0, true),
+                    _ctx.showAddOption ? (openBlock(), createElementBlock("div", _hoisted_11$5, [
+                      unref(isAdding) ? (openBlock(), createElementBlock("div", _hoisted_12$3, [
                         withDirectives(createElementVNode("input", {
-                          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(newOptionLabel) ? newOptionLabel.value = $event : null),
+                          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(newOptionLabel) ? newOptionLabel.value = $event : null),
                           class: "f-select__add-input",
                           placeholder: "选项名称(必填)",
-                          onClick: _cache[6] || (_cache[6] = withModifiers(() => {
+                          onClick: _cache[5] || (_cache[5] = withModifiers(() => {
                           }, ["stop"])),
                           onKeydown: [
                             withKeys(confirmAdd, ["enter"]),
@@ -1384,10 +1449,10 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                           [vModelText, unref(newOptionLabel)]
                         ]),
                         withDirectives(createElementVNode("input", {
-                          "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => isRef(newOptionKey) ? newOptionKey.value = $event : null),
+                          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => isRef(newOptionKey) ? newOptionKey.value = $event : null),
                           class: "f-select__add-input",
                           placeholder: "选项值(可选)",
-                          onClick: _cache[8] || (_cache[8] = withModifiers(() => {
+                          onClick: _cache[7] || (_cache[7] = withModifiers(() => {
                           }, ["stop"])),
                           onKeydown: [
                             withKeys(confirmAdd, ["enter"]),
@@ -1415,18 +1480,18 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                       }, toDisplayString(_ctx.addOptionText), 1))
                     ])) : createCommentVNode("", true)
                   ]),
-                  _: 1
+                  _: 3
                 }, 8, ["max-height"])
-              ], 4)) : createCommentVNode("", true)
+              ], 14, _hoisted_6$e)) : createCommentVNode("", true)
             ]),
-            _: 1
+            _: 3
           })
         ]))
       ], 512);
     };
   }
 });
-const FSelect = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-2115ccc5"]]);
+const FSelect = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-42ec0325"]]);
 const _hoisted_1$B = { class: "f-date-picker__inner" };
 const _hoisted_2$w = ["value", "placeholder", "disabled"];
 const _hoisted_3$t = { class: "f-date-picker-panel" };

package/dist/fantasia-ui.umd.js

@@ -1062,24 +1062,36 @@ var __async = (__this, __arguments, generator) => {
   };
   const _hoisted_4$j = ["placeholder"];
   const _hoisted_5$g = { class: "f-select__suffix" };
-  const _hoisted_6$e = { class: "f-select-dropdown__content" };
-  const _hoisted_7$9 = ["onClick"];
-  const _hoisted_8$8 = { class: "f-select-option__label" };
-  const _hoisted_9$7 = {
+  const _hoisted_6$e = ["data-placement"];
+  const _hoisted_7$9 = { class: "f-select-dropdown__content" };
+  const _hoisted_8$8 = ["onClick"];
+  const _hoisted_9$7 = { class: "f-select-option__label" };
+  const _hoisted_10$6 = {
     key: 0,
     class: "f-select-option is-empty"
   };
-  const _hoisted_10$6 = {
+  const _hoisted_11$5 = {
     key: 0,
     class: "f-select__add-section"
   };
-  const _hoisted_11$5 = {
+  const _hoisted_12$3 = {
     key: 0,
     class: "f-select__add-form"
   };
+  const OPTION_HEIGHT = 36;
+  const ADD_SECTION_HEIGHT = 44;
+  const PANEL_PADDING = 8;
+  const GAP$2 = 4;
+  const VIEWPORT_MARGIN = 8;
   const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     __name: "FSelect",
     props: /* @__PURE__ */ vue.mergeModels({
+      bordered: { type: Boolean, default: true },
+      placement: { default: "auto" },
+      dropdownClass: {},
+      optionClass: {},
+      minDropdownWidth: { default: 0 },
+      maxDropdownHeight: { default: 240 },
       options: {},
       placeholder: { default: "请选择" },
       disabled: { type: Boolean, default: false },
@@ -1118,44 +1130,63 @@ var __async = (__this, __arguments, generator) => {
         return props.options.filter((o) => String(o.label).toLowerCase().includes(kw));
       });
       const dropdownStyle = vue.ref({});
+      const dropdownMaxHeight = vue.ref(props.maxDropdownHeight);
+      const currentPlacement = vue.ref("bottom");
+      const estimatedHeight = vue.computed(() => {
+        const rows = Math.max(filteredOptions.value.length, 1);
+        return rows * OPTION_HEIGHT + PANEL_PADDING + (props.showAddOption ? ADD_SECTION_HEIGHT : 0);
+      });
       const updateDropdownPosition = () => {
-        if (!selectRef.value) return;
+        if (!isOpen.value || !selectRef.value) return;
         const rect = selectRef.value.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const spaceBelow = viewportHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        let top = rect.bottom + 4;
-        let maxHeight = "240px";
-        if (spaceBelow < 240 && spaceAbove > spaceBelow) {
-          top = rect.top - 4;
-          maxHeight = `${Math.min(spaceAbove - 8, 240)}px`;
-        } else {
-          maxHeight = `${Math.min(spaceBelow - 8, 240)}px`;
-        }
-        dropdownStyle.value = {
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        const spaceBelow = vh - rect.bottom - GAP$2 - VIEWPORT_MARGIN;
+        const spaceAbove = rect.top - GAP$2 - VIEWPORT_MARGIN;
+        const desired = Math.min(estimatedHeight.value, props.maxDropdownHeight);
+        let placeTop;
+        if (props.placement === "top") placeTop = true;
+        else if (props.placement === "bottom") placeTop = false;
+        else placeTop = spaceBelow < desired && spaceAbove > spaceBelow;
+        currentPlacement.value = placeTop ? "top" : "bottom";
+        const space = placeTop ? spaceAbove : spaceBelow;
+        dropdownMaxHeight.value = Math.max(Math.min(props.maxDropdownHeight, space), 80);
+        const width = Math.max(rect.width, props.minDropdownWidth);
+        const left = Math.max(VIEWPORT_MARGIN, Math.min(rect.left, vw - width - VIEWPORT_MARGIN));
+        const style = {
           position: "fixed",
-          top: `${top}px`,
-          left: `${rect.left}px`,
-          width: `${rect.width}px`,
-          maxHeight,
+          left: `${left}px`,
+          width: `${width}px`,
           zIndex: "2000"
         };
+        if (placeTop) {
+          style.bottom = `${vh - rect.top + GAP$2}px`;
+        } else {
+          style.top = `${rect.bottom + GAP$2}px`;
+        }
+        dropdownStyle.value = style;
       };
       vue.watch(isOpen, (open) => {
         if (open) {
+          updateDropdownPosition();
           if (props.filterable) vue.nextTick(() => {
             var _a;
             return (_a = inputRef.value) == null ? void 0 : _a.focus();
           });
-          updateDropdownPosition();
         } else {
           keyword.value = "";
+          isAdding.value = false;
         }
       });
+      vue.watch(filteredOptions, () => {
+        if (isOpen.value) vue.nextTick(updateDropdownPosition);
+      });
+      const selectedOption = vue.computed(
+        () => props.options.find((o) => o.key === modelValue.value)
+      );
       const selectedLabel = vue.computed(() => {
-        var _a;
-        const option = props.options.find((o) => o.key === modelValue.value);
-        return (_a = option == null ? void 0 : option.label) != null ? _a : props.placeholder;
+        var _a, _b;
+        return (_b = (_a = selectedOption.value) == null ? void 0 : _a.label) != null ? _b : props.placeholder;
       });
       const handleOptionClick = (option) => {
         if (option.disabled) return;
@@ -1179,7 +1210,12 @@ var __async = (__this, __arguments, generator) => {
         }
       };
       const isSelected = (key) => {
-        return props.multiple && multiValue.value.includes(key);
+        return props.multiple ? multiValue.value.includes(key) : modelValue.value === key;
+      };
+      const getOptionClass = (opt) => {
+        const c = props.optionClass;
+        if (!c) return "";
+        return typeof c === "function" ? c(opt, isSelected(opt.key)) : c;
       };
       const stopWhenOpen = (e) => {
         if (isOpen.value) e.stopPropagation();
@@ -1202,12 +1238,6 @@ var __async = (__this, __arguments, generator) => {
       const handleInputClick = () => {
         if (!props.disabled) isOpen.value = true;
       };
-      const handleClear = (e) => {
-        e.stopPropagation();
-        modelValue.value = props.multiple ? [] : void 0;
-        keyword.value = "";
-        emit("clear");
-      };
       const isAdding = vue.ref(false);
       const newOptionLabel = vue.ref("");
       const newOptionKey = vue.ref("");
@@ -1215,6 +1245,7 @@ var __async = (__this, __arguments, generator) => {
         isAdding.value = true;
         newOptionLabel.value = "";
         newOptionKey.value = "";
+        vue.nextTick(updateDropdownPosition);
       };
       const cancelAdd = () => {
         isAdding.value = false;
@@ -1241,11 +1272,23 @@ var __async = (__this, __arguments, generator) => {
         newOptionLabel.value = "";
         newOptionKey.value = "";
       };
+      const handleTriggerClick = (e) => {
+        if (props.disabled) return;
+        const target = e.target;
+        if (target == null ? void 0 : target.closest(".f-select__clear, .f-select__tag")) return;
+        isOpen.value = !isOpen.value;
+      };
+      const handleClear = () => {
+        const empty = props.multiple ? [] : null;
+        modelValue.value = empty;
+        keyword.value = "";
+        emit("change", empty, props.multiple ? [] : {});
+        emit("clear");
+      };
       const handleWindowClick = (e) => {
-        var _a, _b;
         if (!isOpen.value) return;
-        const target = e.target;
-        if (((_a = selectRef.value) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.value) == null ? void 0 : _b.contains(target))) {
+        const path = e.composedPath();
+        if (selectRef.value && path.includes(selectRef.value) || dropdownRef.value && path.includes(dropdownRef.value)) {
           return;
         }
         isOpen.value = false;
@@ -1266,9 +1309,10 @@ var __async = (__this, __arguments, generator) => {
               "is-disabled": _ctx.disabled,
               "is-clearable": vue.unref(showClear),
               "is-multiple": _ctx.multiple,
+              "is-borderless": !_ctx.bordered,
               [`f-select--${_ctx.size}`]: _ctx.size
             }]),
-            onClick: _cache[4] || (_cache[4] = ($event) => !_ctx.disabled && (isOpen.value = !vue.unref(isOpen)))
+            onClick: handleTriggerClick
           }, [
             _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(selectedOptions), (opt) => {
@@ -1317,13 +1361,20 @@ var __async = (__this, __arguments, generator) => {
               ]) : (vue.openBlock(), vue.createElementBlock("span", {
                 key: 1,
                 class: vue.normalizeClass(["f-select__label", { "is-placeholder": !vue.unref(hasValue) }])
-              }, vue.toDisplayString(vue.unref(selectedLabel)), 3))
+              }, [
+                vue.renderSlot(_ctx.$slots, "label", {
+                  option: vue.unref(selectedOption),
+                  label: vue.unref(selectedLabel)
+                }, () => [
+                  vue.createTextVNode(vue.toDisplayString(vue.unref(selectedLabel)), 1)
+                ], true)
+              ], 2))
             ], 64)),
             vue.createElementVNode("div", _hoisted_5$g, [
               vue.unref(showClear) ? (vue.openBlock(), vue.createBlock(FIcon, {
                 key: 0,
                 class: "f-select__clear",
-                onClick: vue.withModifiers(handleClear, ["stop"])
+                onClick: handleClear
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(ionicons5.CloseCircleOutline))
@@ -1345,37 +1396,51 @@ var __async = (__this, __arguments, generator) => {
                   key: 0,
                   ref_key: "dropdownRef",
                   ref: dropdownRef,
-                  class: "f-select-dropdown",
+                  class: vue.normalizeClass(["f-select-dropdown", _ctx.dropdownClass]),
+                  "data-placement": vue.unref(currentPlacement),
                   style: vue.normalizeStyle(vue.unref(dropdownStyle)),
-                  onClick: _cache[9] || (_cache[9] = vue.withModifiers(() => {
+                  onClick: _cache[8] || (_cache[8] = vue.withModifiers(() => {
                   }, ["stop"]))
                 }, [
                   vue.createVNode(FScrollbar, {
-                    "max-height": vue.unref(dropdownStyle).maxHeight
+                    "max-height": `${vue.unref(dropdownMaxHeight)}px`
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_6$e, [
+                      vue.createElementVNode("div", _hoisted_7$9, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(filteredOptions), (opt) => {
                           return vue.openBlock(), vue.createElementBlock("div", {
                             key: opt.key,
-                            class: vue.normalizeClass(["f-select-option", {
-                              "is-disabled": opt.disabled,
-                              "is-selected": isSelected(opt.key)
-                            }]),
+                            class: vue.normalizeClass(["f-select-option", [
+                              getOptionClass(opt),
+                              {
+                                "is-disabled": opt.disabled,
+                                "is-selected": isSelected(opt.key)
+                              }
+                            ]]),
                             onClick: ($event) => handleOptionClick(opt)
                           }, [
-                            vue.createElementVNode("span", _hoisted_8$8, vue.toDisplayString(opt.label), 1)
-                          ], 10, _hoisted_7$9);
+                            vue.renderSlot(_ctx.$slots, "option", {
+                              option: opt,
+                              selected: isSelected(opt.key)
+                            }, () => [
+                              vue.createElementVNode("span", _hoisted_9$7, vue.toDisplayString(opt.label), 1)
+                            ], true)
+                          ], 10, _hoisted_8$8);
                         }), 128)),
-                        vue.unref(filteredOptions).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$7, " 暂无数据 ")) : vue.createCommentVNode("", true)
+                        vue.unref(filteredOptions).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$6, [
+                          vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                            _cache[9] || (_cache[9] = vue.createTextVNode("暂无数据"))
+                          ], true)
+                        ])) : vue.createCommentVNode("", true)
                       ]),
-                      _ctx.showAddOption ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$6, [
-                        vue.unref(isAdding) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$5, [
+                      vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true),
+                      _ctx.showAddOption ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$5, [
+                        vue.unref(isAdding) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$3, [
                           vue.withDirectives(vue.createElementVNode("input", {
-                            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => vue.isRef(newOptionLabel) ? newOptionLabel.value = $event : null),
+                            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(newOptionLabel) ? newOptionLabel.value = $event : null),
                             class: "f-select__add-input",
                             placeholder: "选项名称(必填)",
-                            onClick: _cache[6] || (_cache[6] = vue.withModifiers(() => {
+                            onClick: _cache[5] || (_cache[5] = vue.withModifiers(() => {
                             }, ["stop"])),
                             onKeydown: [
                               vue.withKeys(confirmAdd, ["enter"]),
@@ -1385,10 +1450,10 @@ var __async = (__this, __arguments, generator) => {
                             [vue.vModelText, vue.unref(newOptionLabel)]
                           ]),
                           vue.withDirectives(vue.createElementVNode("input", {
-                            "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => vue.isRef(newOptionKey) ? newOptionKey.value = $event : null),
+                            "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => vue.isRef(newOptionKey) ? newOptionKey.value = $event : null),
                             class: "f-select__add-input",
                             placeholder: "选项值(可选)",
-                            onClick: _cache[8] || (_cache[8] = vue.withModifiers(() => {
+                            onClick: _cache[7] || (_cache[7] = vue.withModifiers(() => {
                             }, ["stop"])),
                             onKeydown: [
                               vue.withKeys(confirmAdd, ["enter"]),
@@ -1416,18 +1481,18 @@ var __async = (__this, __arguments, generator) => {
                         }, vue.toDisplayString(_ctx.addOptionText), 1))
                       ])) : vue.createCommentVNode("", true)
                     ]),
-                    _: 1
+                    _: 3
                   }, 8, ["max-height"])
-                ], 4)) : vue.createCommentVNode("", true)
+                ], 14, _hoisted_6$e)) : vue.createCommentVNode("", true)
               ]),
-              _: 1
+              _: 3
             })
           ]))
         ], 512);
       };
     }
   });
-  const FSelect = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-2115ccc5"]]);
+  const FSelect = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-42ec0325"]]);
   const _hoisted_1$B = { class: "f-date-picker__inner" };
   const _hoisted_2$w = ["value", "placeholder", "disabled"];
   const _hoisted_3$t = { class: "f-date-picker-panel" };

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

@@ -5,7 +5,23 @@ type __VLS_Props = FSelectProps;
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: SelectKey | SelectKey[] | null;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_8: {
+    option: FDropdownOption;
+    label: string;
+}, __VLS_39: {
+    option: FDropdownOption;
+    selected: boolean;
+}, __VLS_41: {}, __VLS_43: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_8) => any;
+} & {
+    option?: (props: typeof __VLS_39) => any;
+} & {
+    empty?: (props: typeof __VLS_41) => any;
+} & {
+    footer?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SelectKey | SelectKey[]) => any;
 } & {
     select: (key: SelectKey, option: FDropdownOption) => any;
@@ -23,9 +39,19 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     size: "small" | "medium" | "large";
     placeholder: string;
     clearable: boolean;
+    placement: "auto" | "top" | "bottom";
     multiple: boolean;
+    bordered: boolean;
+    minDropdownWidth: number;
+    maxDropdownHeight: number;
     filterable: boolean;
     showAddOption: boolean;
     addOptionText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/packages/types/components/modules/f-select.d.ts

@@ -1,5 +1,11 @@
 import type { FDropdownOption } from './f-dropdown';
 export interface FSelectProps {
+    bordered?: boolean;
+    placement?: 'auto' | 'top' | 'bottom';
+    dropdownClass?: string;
+    optionClass?: string | ((option: FDropdownOption, selected: boolean) => string);
+    minDropdownWidth?: number;
+    maxDropdownHeight?: number;
     /** 选项列表 */
     options: FDropdownOption[];
     /** 占位符 */

package/package.json

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