yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-map-picker/index.js

@@ -0,0 +1,96 @@
+import { defineComponent, ref, computed, watch, resolveComponent, createBlock, openBlock, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { pick } from "../utils/core";
+import { useLocale } from "../ele-config-provider/receiver";
+import { useResponsive } from "../ele-pro-layout/util";
+import EleDialog from "../ele-dialog/index";
+import MapView from "./components/map-view";
+import { mapPickerEmits, mapPickerProps, mapPropKeys } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleMapPicker",
+  components: { EleDialog, MapView },
+  props: mapPickerProps,
+  emits: mapPickerEmits,
+  setup(props, { emit }) {
+    const { lang, globalConfig } = useLocale("map", props);
+    const isResponsive = useResponsive(props);
+    const mapRef = ref(null);
+    const aMapKey = computed(() => props.mapKey || globalConfig.mapKey);
+    const mapProps = computed(() => {
+      return pick(props, mapPropKeys);
+    });
+    const updateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const handleMapDone = (ins) => {
+      emit("mapDone", ins);
+    };
+    const handleDone = (result) => {
+      emit("done", result);
+    };
+    watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible) {
+          mapRef.value && mapRef.value.showInitSelected();
+        }
+      }
+    );
+    return {
+      lang,
+      isResponsive,
+      mapRef,
+      aMapKey,
+      mapProps,
+      updateModelValue,
+      handleMapDone,
+      handleDone
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MapView = resolveComponent("MapView");
+  const _component_EleDialog = resolveComponent("EleDialog");
+  return openBlock(), createBlock(_component_EleDialog, mergeProps({
+    width: "740px",
+    title: _ctx.lang.title
+  }, _ctx.modalProps || {}, {
+    modelValue: _ctx.modelValue,
+    class: ["ele-map-picker", { "is-responsive": _ctx.isResponsive }],
+    "onUpdate:modelValue": _ctx.updateModelValue
+  }), createSlots({
+    default: withCtx(() => [
+      createVNode(_component_MapView, mergeProps(_ctx.mapProps, {
+        ref: "mapRef",
+        message: _ctx.lang.message,
+        clickMessage: _ctx.lang.clickMessage,
+        searchPlaceholder: _ctx.lang.placeholder,
+        okText: _ctx.lang.ok,
+        mapKey: _ctx.aMapKey,
+        mode: _ctx.keywordMode ? "keyword" : _ctx.mode,
+        onMapDone: _ctx.handleMapDone,
+        onDone: _ctx.handleDone
+      }), null, 16, ["message", "clickMessage", "searchPlaceholder", "okText", "mapKey", "mode", "onMapDone", "onDone"])
+    ]),
+    _: 2
+  }, [
+    renderList(Object.keys(_ctx.$slots).filter((k) => "default" !== k), (name) => {
+      return {
+        name,
+        fn: withCtx((slotProps) => [
+          renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+        ])
+      };
+    })
+  ]), 1040, ["title", "modelValue", "class", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-map-picker/props.d.ts

@@ -0,0 +1,232 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElEmptyProps } from '../ele-app/el';
+import { EleDialogProps } from '../ele-app/plus';
+import { SelectMode, PoiItem, MapLocale } from './types';
+
+/**
+ * 属性
+ */
+export declare const mapProps: {
+    /** 地图的高度 */
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 地图默认中心点 */
+    center: PropType<number[]>;
+    /** 地图初始缩放级别 */
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 地图选中后缩放级别 */
+    selectedZoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** POI检索最大数量 */
+    poiLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** POI检索兴趣点类别 */
+    poiType: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** POI检索关键字 */
+    poiKeywords: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** POI检索半径 */
+    poiRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 是否返回行政区 */
+    returnRegions: BooleanConstructor;
+    /** 是否强制选择 */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 强制选择提示文本 */
+    message: StringConstructor;
+    /** 输入建议的城市范围 */
+    suggestionCity: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 搜索框提示文本 */
+    searchPlaceholder: StringConstructor;
+    /** 地图中心图标地址 */
+    markerSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 高德地图密钥 */
+    mapKey: StringConstructor;
+    /** 高德地图版本号 */
+    mapVersion: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 地图风格 */
+    mapStyle: StringConstructor;
+    /** 是否暗黑主题 */
+    darkMode: BooleanConstructor;
+    /** 完成按钮文字 */
+    okText: StringConstructor;
+    /** 空组件属性 */
+    emptyProps: PropType<ElEmptyProps>;
+    /** 自定义搜索栏样式 */
+    searchStyle: PropType<StyleValue>;
+    /** 位置选择模式 */
+    mode: {
+        type: PropType<SelectMode>;
+        default: string;
+    };
+    /** 非关键字模式是否显示搜索框 */
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 强制选择点击地图提示文本 */
+    clickMessage: StringConstructor;
+    /** 回显选中的位置 */
+    selected: PropType<PoiItem>;
+    /** 侧栏容器样式 */
+    sideStyle: PropType<StyleValue>;
+};
+export declare const mapPickerProps: {
+    /** 弹窗是否显示 */
+    modelValue: BooleanConstructor;
+    /** 弹窗参数 */
+    modalProps: PropType<Omit<EleDialogProps, "modelValue">>;
+    /** 是否开启响应式 */
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /** 国际化 */
+    locale: PropType<Partial<MapLocale>>;
+    /** 是否使用关键字检索模式, 默认POI检索模式 */
+    keywordMode: BooleanConstructor;
+    /** 自定义header样式 */
+    headerStyle: PropType<StyleValue>;
+    /** 地图的高度 */
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 地图默认中心点 */
+    center: PropType<number[]>;
+    /** 地图初始缩放级别 */
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 地图选中后缩放级别 */
+    selectedZoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** POI检索最大数量 */
+    poiLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** POI检索兴趣点类别 */
+    poiType: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** POI检索关键字 */
+    poiKeywords: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** POI检索半径 */
+    poiRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 是否返回行政区 */
+    returnRegions: BooleanConstructor;
+    /** 是否强制选择 */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 强制选择提示文本 */
+    message: StringConstructor;
+    /** 输入建议的城市范围 */
+    suggestionCity: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 搜索框提示文本 */
+    searchPlaceholder: StringConstructor;
+    /** 地图中心图标地址 */
+    markerSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 高德地图密钥 */
+    mapKey: StringConstructor;
+    /** 高德地图版本号 */
+    mapVersion: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 地图风格 */
+    mapStyle: StringConstructor;
+    /** 是否暗黑主题 */
+    darkMode: BooleanConstructor;
+    /** 完成按钮文字 */
+    okText: StringConstructor;
+    /** 空组件属性 */
+    emptyProps: PropType<ElEmptyProps>;
+    /** 自定义搜索栏样式 */
+    searchStyle: PropType<StyleValue>;
+    /** 位置选择模式 */
+    mode: {
+        type: PropType<SelectMode>;
+        default: string;
+    };
+    /** 非关键字模式是否显示搜索框 */
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 强制选择点击地图提示文本 */
+    clickMessage: StringConstructor;
+    /** 回显选中的位置 */
+    selected: PropType<PoiItem>;
+    /** 侧栏容器样式 */
+    sideStyle: PropType<StyleValue>;
+};
+export type MapPickerProps = ExtractPropTypes<typeof mapPickerProps>;
+export type MapProps = ExtractPropTypes<typeof mapProps>;
+/**
+ * 事件
+ */
+export declare const mapPickerEmits: {
+    /** 选择完成事件 */
+    done: (_result: PoiItem) => boolean;
+    /** 地图渲染完成事件 */
+    mapDone: (_ins: any) => boolean;
+    /** 弹窗打开事件 */
+    open: () => boolean;
+    /** 弹窗关闭事件 */
+    closed: () => boolean;
+    /** 更新弹窗打开状态 */
+    'update:modelValue': (_value: boolean) => boolean;
+};
+export type MapPropKeys = Array<keyof typeof mapProps>;
+/**
+ * 地图组件属性名
+ */
+export declare const mapPropKeys: MapPropKeys;

package/es/ele-map-picker/props.js

@@ -0,0 +1,130 @@
+const mapProps = {
+  /** 地图的高度 */
+  height: {
+    type: String,
+    default: "460px"
+  },
+  /** 地图默认中心点 */
+  center: Array,
+  /** 地图初始缩放级别 */
+  zoom: {
+    type: Number,
+    default: 11
+  },
+  /** 地图选中后缩放级别 */
+  selectedZoom: {
+    type: Number,
+    default: 17
+  },
+  /** POI检索最大数量 */
+  poiLimit: {
+    type: Number,
+    default: 30
+  },
+  /** POI检索兴趣点类别 */
+  poiType: {
+    type: String,
+    default: ""
+  },
+  /** POI检索关键字 */
+  poiKeywords: {
+    type: String,
+    default: ""
+  },
+  /** POI检索半径 */
+  poiRadius: {
+    type: Number,
+    default: 1e3
+  },
+  /** 是否返回行政区 */
+  returnRegions: Boolean,
+  /** 是否强制选择 */
+  required: {
+    type: Boolean,
+    default: true
+  },
+  /** 强制选择提示文本 */
+  message: String,
+  /** 输入建议的城市范围 */
+  suggestionCity: {
+    type: String,
+    default: "全国"
+  },
+  /** 搜索框提示文本 */
+  searchPlaceholder: String,
+  /** 地图中心图标地址 */
+  markerSrc: {
+    type: String,
+    default: "https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png"
+  },
+  /** 高德地图密钥 */
+  mapKey: String,
+  /** 高德地图版本号 */
+  mapVersion: {
+    type: String,
+    default: "2.0"
+  },
+  /** 地图风格 */
+  mapStyle: String,
+  /** 是否暗黑主题 */
+  darkMode: Boolean,
+  /** 完成按钮文字 */
+  okText: String,
+  /** 空组件属性 */
+  emptyProps: Object,
+  /** 自定义搜索栏样式 */
+  searchStyle: Object,
+  /** 位置选择模式 */
+  mode: {
+    type: String,
+    default: "poi"
+  },
+  /** 非关键字模式是否显示搜索框 */
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  /** 强制选择点击地图提示文本 */
+  clickMessage: String,
+  /** 回显选中的位置 */
+  selected: Object,
+  /** 侧栏容器样式 */
+  sideStyle: Object
+};
+const mapPickerProps = {
+  ...mapProps,
+  /** 弹窗是否显示 */
+  modelValue: Boolean,
+  /** 弹窗参数 */
+  modalProps: Object,
+  /** 是否开启响应式 */
+  responsive: {
+    type: Boolean,
+    default: null
+  },
+  /** 国际化 */
+  locale: Object,
+  /** 是否使用关键字检索模式, 默认POI检索模式 */
+  keywordMode: Boolean,
+  /** 自定义header样式 */
+  headerStyle: Object
+};
+const mapPickerEmits = {
+  /** 选择完成事件 */
+  done: (_result) => true,
+  /** 地图渲染完成事件 */
+  mapDone: (_ins) => true,
+  /** 弹窗打开事件 */
+  open: () => true,
+  /** 弹窗关闭事件 */
+  closed: () => true,
+  /** 更新弹窗打开状态 */
+  "update:modelValue": (_value) => true
+};
+const mapPropKeys = Object.keys(mapProps);
+export {
+  mapPickerEmits,
+  mapPickerProps,
+  mapPropKeys,
+  mapProps
+};

package/es/ele-map-picker/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 地图位置选择器主题变量 */
+@mixin set-map-var($var) {
+  .ele-map-picker {
+    @include set-ele-var('map', $var);
+  }
+}

package/es/ele-map-picker/types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * 位置选择模式
+ */
+export type SelectMode = 'lnglat' | 'poi' | 'keyword';
+
+/**
+ * 行政区数据
+ */
+export interface City {
+  /** 省 */
+  province: string;
+  /** 市 */
+  city: string;
+  /** 区 */
+  district: string;
+  /** 区号 */
+  citycode: number;
+}
+
+/**
+ * 检索结果
+ */
+export interface PoiItem extends Record<string, any> {
+  /** 唯一标识 */
+  key?: string;
+  /** 地点名称 */
+  name?: string;
+  /** 详细地址 */
+  address?: string;
+  /** 纬度 */
+  lat?: number;
+  /** 经度 */
+  lng?: number;
+  /** 输入建议的街道 */
+  district?: string;
+  /** 行政区 */
+  city?: City;
+}
+
+/**
+ * 实例
+ */
+export interface MapState {
+  /** 上次搜索建议 */
+  lastSuggestion?: string;
+  /** 选中的搜索建议 */
+  selectedSuggestion?: PoiItem | null;
+  /** 是否是选中条目移动地图 */
+  isItemClickMove?: boolean;
+  /** 地图实例 */
+  mapIns?: any;
+  /** 检索实例 */
+  placeSearchIns?: any;
+  /** 搜索建议实例 */
+  autoCompleteIns?: any;
+  /** 地图标记点 */
+  centerMarker?: any;
+}
+
+/**
+ * 国际化
+ */
+export interface MapLocale {
+  title: string;
+  placeholder: string;
+  message: string;
+  ok: string;
+  clickMessage: string;
+}
+
+export type CenterPoint = PoiItem;