@fecp/mobile 1.0.58 → 1.0.59

package/es/packages/mobile/index.mjs

@@ -37,6 +37,7 @@ import { MobileFieldTimePicker } from "./src/components/form/fieldTimePicker/ind
 import { MobileFieldCascaderPicker } from "./src/components/form/fieldCascaderPicker/index.mjs";
 import { MobileFieldCheckbox } from "./src/components/form/fieldCheckbox/index.mjs";
 import { MobileFieldRadio } from "./src/components/form/fieldRadio/index.mjs";
+import { MobileFieldArea } from "./src/components/form/fieldArea/index.mjs";
 import { MobileForm } from "./src/components/form/form/index.mjs";
 import { MobileFormItem } from "./src/components/form/formItem/index.mjs";
 import { MobileRadioGroup } from "./src/components/form/radioGroup/index.mjs";
@@ -86,6 +87,7 @@ export {
   MobileDropdownMenu,
   MobileEmpty,
   MobileField,
+  MobileFieldArea,
   MobileFieldCalendarPicker,
   MobileFieldCascaderPicker,
   MobileFieldCheckbox,

package/es/packages/mobile/src/components/all.mjs

@@ -34,6 +34,7 @@ import { MobileFieldTimePicker } from "./form/fieldTimePicker/index.mjs";
 import { MobileFieldCascaderPicker } from "./form/fieldCascaderPicker/index.mjs";
 import { MobileFieldCheckbox } from "./form/fieldCheckbox/index.mjs";
 import { MobileFieldRadio } from "./form/fieldRadio/index.mjs";
+import { MobileFieldArea } from "./form/fieldArea/index.mjs";
 import { MobileForm } from "./form/form/index.mjs";
 import { MobileFormItem } from "./form/formItem/index.mjs";
 import { MobileRadioGroup } from "./form/radioGroup/index.mjs";
@@ -72,6 +73,7 @@ export {
   MobileDropdownMenu,
   MobileEmpty,
   MobileField,
+  MobileFieldArea,
   MobileFieldCalendarPicker,
   MobileFieldCascaderPicker,
   MobileFieldCheckbox,

package/es/packages/mobile/src/components/form/fieldArea/FieldArea.vue.mjs

@@ -0,0 +1,159 @@
+/* empty css                                                                                                                 */
+/* empty css                                                                                                                  */
+/* empty css                                                                                                                 */
+/* empty css                                                                                                                    */
+/* empty css                                                                                                                  */
+/* empty css                                                                                                                   */
+/* empty css                                                                                                                  */
+/* empty css                                                                                                                       */
+/* empty css                                                                                                                 */
+/* empty css                                                                                                                */
+/* empty css                                                                                                                     */
+import { ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
+import { MobileField } from "../field/index.mjs";
+import { useCascaderAreaData } from "../../../../../../node_modules/.pnpm/@vant_area-data@2.0.0/node_modules/@vant/area-data/dist/index.esm.mjs";
+import { Popup } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/popup/index.mjs";
+import { Cascader } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/cascader/index.mjs";
+import { Icon } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.mjs";
+const _sfc_main = {
+  __name: "FieldArea",
+  props: {
+    treeOptionsFieldNames: {
+      type: Object,
+      default: {
+        text: "text",
+        value: "value",
+        children: "children"
+      }
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    "is-link": false
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const finalOptions = ref(useCascaderAreaData());
+    const fieldTextValue = ref("");
+    const showPicker = ref(false);
+    const emit = __emit;
+    const pickerValue = computed({
+      get: () => {
+        const value = props.modelValue.split("/");
+        return value[value.length - 1];
+      },
+      set: (val) => {
+        emit("update:modelValue", val);
+      }
+    });
+    function getDisplayValue(options, fieldNames, modelValue) {
+      const { text, value, children } = fieldNames;
+      const values = modelValue.split("/");
+      const displayValues = [];
+      function findValueInOptions(currentOptions, targetValue) {
+        for (const option of currentOptions) {
+          if (option[value] === targetValue) {
+            return option[text];
+          }
+          if (option[children] && option[children].length > 0) {
+            const result = findValueInOptions(option[children], targetValue);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return null;
+      }
+      for (const val of values) {
+        const displayValue = findValueInOptions(options, val);
+        if (displayValue) {
+          displayValues.push(displayValue);
+        }
+      }
+      return displayValues.join("/");
+    }
+    watch(
+      [() => props.modelValue, finalOptions],
+      ([value, options]) => {
+        if (!value) {
+          fieldTextValue.value = "";
+          return;
+        }
+        fieldTextValue.value = getDisplayValue(
+          options,
+          props.treeOptionsFieldNames,
+          value
+        );
+      },
+      { immediate: true }
+    );
+    const onFinish = ({ selectedOptions }) => {
+      pickerValue.value = selectedOptions.map((option) => option[props.treeOptionsFieldNames.value]).join("/");
+      showPicker.value = false;
+    };
+    return (_ctx, _cache) => {
+      const _component_van_icon = Icon;
+      const _component_van_cascader = Cascader;
+      const _component_van_popup = Popup;
+      return openBlock(), createBlock(unref(MobileField), mergeProps(_ctx.$attrs, {
+        modelValue: unref(fieldTextValue),
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
+        isLink: __props.readonly ? false : true,
+        readonly: "",
+        disabled: __props.disabled,
+        onClick: _cache[5] || (_cache[5] = () => {
+          if (!__props.readonly) {
+            showPicker.value = true;
+          }
+        })
+      }), createSlots({
+        default: withCtx(() => [
+          createVNode(_component_van_popup, {
+            show: unref(showPicker),
+            "onUpdate:show": _cache[3] || (_cache[3] = ($event) => isRef(showPicker) ? showPicker.value = $event : null),
+            "destroy-on-close": "",
+            position: "bottom"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_van_cascader, mergeProps(_ctx.$attrs, {
+                modelValue: unref(pickerValue),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(pickerValue) ? pickerValue.value = $event : null),
+                options: unref(finalOptions),
+                placeholder: "请选择",
+                onFinish,
+                onClose: _cache[2] || (_cache[2] = ($event) => showPicker.value = false)
+              }), null, 16, ["modelValue", "options"])
+            ]),
+            _: 1
+          }, 8, ["show"])
+        ]),
+        _: 2
+      }, [
+        !__props.readonly && !__props.disabled && unref(fieldTextValue) ? {
+          name: "right-icon",
+          fn: withCtx(() => [
+            createVNode(_component_van_icon, {
+              name: "clear",
+              class: "custom-close-icon",
+              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => pickerValue.value = null, ["stop"]))
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["modelValue", "isLink", "disabled"]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};

package/es/packages/mobile/src/components/form/fieldArea/index.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./FieldArea.vue.mjs";
+import install from "../../../utils/install.mjs";
+const MobileFieldArea = install.withInstall(
+  "MobileFieldArea",
+  _sfc_main
+);
+export {
+  MobileFieldArea,
+  MobileFieldArea as default
+};

package/es/packages/mobile/src/components/form/formItem/FormItem.vue.mjs

@@ -40,6 +40,8 @@ const _sfc_main = {
           return defineAsyncComponent(() => import("../fieldCheckbox/index.mjs"));
         case "upload":
           return defineAsyncComponent(() => import("../fieldUploader/index.mjs"));
+        case "area":
+          return defineAsyncComponent(() => import("../fieldArea/index.mjs"));
       }
     });
     const formData = inject("formData");