@tianditu/vue 0.0.0 → 0.0.1

package/README.md

@@ -3,7 +3,6 @@
 ![npm version](https://img.shields.io/npm/v/@tianditu/vue)
 ![npm downloads](https://img.shields.io/npm/dw/@tianditu/vue)
 ![npm license](https://img.shields.io/npm/l/@tianditu/vue)
-[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](https://www.contributor-covenant.org/version/2/1/code_of_conduct/)
 
 > Vue components for tianditu, powered by Demo Macro.
 
@@ -11,13 +10,13 @@
 
 ```bash
 # npm
-$ npm install -D @tianditu/web-components @tianditu/vue
+$ npm install -D @tianditu/wc @tianditu/vue
 
 # yarn
-$ yarn add -D @tianditu/web-components @tianditu/vue
+$ yarn add -D @tianditu/wc @tianditu/vue
 
 # pnpm
-$ pnpm add -D @tianditu/web-components @tianditu/vue
+$ pnpm add -D @tianditu/wc @tianditu/vue
 ```
 
 ## License

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import * as vue from 'vue';
+import { Plugin } from 'vue';
+import { JSX } from '@tianditu/wc';
+
+interface InputProps<T> {
+    modelValue?: T;
+}
+
+declare const TdtControl: vue.DefineSetupFnComponent<JSX.TdtControl & InputProps<string | number | boolean>, {}, {}, JSX.TdtControl & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlCopyright: vue.DefineSetupFnComponent<JSX.TdtControlCopyright & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlCopyright & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlOverviewMap: vue.DefineSetupFnComponent<JSX.TdtControlOverviewMap & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlOverviewMap & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlScale: vue.DefineSetupFnComponent<JSX.TdtControlScale & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlScale & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlZoom: vue.DefineSetupFnComponent<JSX.TdtControlZoom & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlZoom & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtMap: vue.DefineSetupFnComponent<JSX.TdtMap & InputProps<string | number | boolean>, {}, {}, JSX.TdtMap & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+
+declare const ComponentLibrary: Plugin;
+
+export { ComponentLibrary, TdtControl, TdtControlCopyright, TdtControlOverviewMap, TdtControlScale, TdtControlZoom, TdtMap };

package/dist/index.d.ts

@@ -1,2 +1,18 @@
-export * from "./components";
-export * from "./plugin";
+import * as vue from 'vue';
+import { Plugin } from 'vue';
+import { JSX } from '@tianditu/wc';
+
+interface InputProps<T> {
+    modelValue?: T;
+}
+
+declare const TdtControl: vue.DefineSetupFnComponent<JSX.TdtControl & InputProps<string | number | boolean>, {}, {}, JSX.TdtControl & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlCopyright: vue.DefineSetupFnComponent<JSX.TdtControlCopyright & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlCopyright & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlOverviewMap: vue.DefineSetupFnComponent<JSX.TdtControlOverviewMap & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlOverviewMap & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlScale: vue.DefineSetupFnComponent<JSX.TdtControlScale & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlScale & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtControlZoom: vue.DefineSetupFnComponent<JSX.TdtControlZoom & InputProps<string | number | boolean>, {}, {}, JSX.TdtControlZoom & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+declare const TdtMap: vue.DefineSetupFnComponent<JSX.TdtMap & InputProps<string | number | boolean>, {}, {}, JSX.TdtMap & InputProps<string | number | boolean> & {}, vue.PublicProps>;
+
+declare const ComponentLibrary: Plugin;
+
+export { ComponentLibrary, TdtControl, TdtControlCopyright, TdtControlOverviewMap, TdtControlScale, TdtControlZoom, TdtMap };

package/dist/index.mjs

@@ -1,2 +1,185 @@
-export * from "./components.mjs";
-export * from "./plugin.mjs";
+import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives } from 'vue';
+import { applyPolyfills, defineCustomElements } from '@tianditu/wc/dist/loader';
+
+const UPDATE_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+const ROUTER_LINK_VALUE = "routerLink";
+const NAV_MANAGER = "navManager";
+const ROUTER_PROP_PREFIX = "router";
+const ARIA_PROP_PREFIX = "aria";
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const getComponentClasses = (classes) => {
+  return classes?.split(" ") || [];
+};
+const getElementClasses = (ref2, componentClasses, defaultClasses = []) => {
+  return [...Array.from(ref2.value?.classList || []), ...defaultClasses].filter(
+    (c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
+  );
+};
+const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
+  if (defineCustomElement !== void 0) {
+    defineCustomElement();
+  }
+  const Container = defineComponent(
+    (props, { attrs, slots, emit }) => {
+      let modelPropValue = props[modelProp];
+      const containerRef = ref();
+      const classes = new Set(getComponentClasses(attrs.class));
+      const vModelDirective = {
+        created: (el) => {
+          const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+          eventsNames.forEach((eventName) => {
+            el.addEventListener(eventName.toLowerCase(), (e) => {
+              if (e.target.tagName === el.tagName) {
+                modelPropValue = (e?.target)[modelProp];
+                emit(UPDATE_VALUE_EVENT, modelPropValue);
+              }
+            });
+          });
+        }
+      };
+      const currentInstance = getCurrentInstance();
+      const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+      const navManager = hasRouter ? inject(NAV_MANAGER) : void 0;
+      const handleRouterLink = (ev) => {
+        const { routerLink } = props;
+        if (routerLink === EMPTY_PROP)
+          return;
+        if (navManager !== void 0) {
+          ev.preventDefault();
+          let navigationPayload = { event: ev };
+          for (const key in props) {
+            const value = props[key];
+            if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+              navigationPayload[key] = value;
+            }
+          }
+          navManager.navigate(navigationPayload);
+        } else {
+          console.warn(
+            "Tried to navigate, but no router was found. Make sure you have mounted Vue Router."
+          );
+        }
+      };
+      return () => {
+        modelPropValue = props[modelProp];
+        getComponentClasses(attrs.class).forEach((value) => {
+          classes.add(value);
+        });
+        const oldClick = props.onClick;
+        const handleClick = (ev) => {
+          if (oldClick !== void 0) {
+            oldClick(ev);
+          }
+          if (!ev.defaultPrevented) {
+            handleRouterLink(ev);
+          }
+        };
+        let propsToAdd = {
+          ref: containerRef,
+          class: getElementClasses(containerRef, classes),
+          onClick: handleClick
+        };
+        for (const key in props) {
+          const value = props[key];
+          if (props.hasOwnProperty(key) && value !== EMPTY_PROP || key.startsWith(ARIA_PROP_PREFIX)) {
+            propsToAdd[key] = value;
+          }
+        }
+        if (modelProp) {
+          if (props[MODEL_VALUE] !== EMPTY_PROP) {
+            propsToAdd = {
+              ...propsToAdd,
+              [modelProp]: props[MODEL_VALUE]
+            };
+          } else if (modelPropValue !== EMPTY_PROP) {
+            propsToAdd = {
+              ...propsToAdd,
+              [modelProp]: modelPropValue
+            };
+          }
+        }
+        if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+          propsToAdd = {
+            ...propsToAdd,
+            href: props[ROUTER_LINK_VALUE]
+          };
+        }
+        const node = h(name, propsToAdd, slots.default && slots.default());
+        return modelProp === void 0 ? node : withDirectives(node, [[vModelDirective]]);
+      };
+    }
+  );
+  if (typeof Container !== "function") {
+    Container.name = name;
+    Container.props = {
+      [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP
+    };
+    componentProps.forEach((componentProp) => {
+      Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+    });
+    if (modelProp) {
+      Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+      Container.emits = [UPDATE_VALUE_EVENT];
+    }
+  }
+  return Container;
+};
+
+const TdtControl = /* @__PURE__ */ defineContainer(
+  "tdt-control",
+  void 0,
+  ["control", "position", "visible", "offset", "options", "uniqueId"]
+);
+const TdtControlCopyright = /* @__PURE__ */ defineContainer(
+  "tdt-control-copyright",
+  void 0,
+  ["position", "content", "uniqueId"]
+);
+const TdtControlOverviewMap = /* @__PURE__ */ defineContainer(
+  "tdt-control-overview-map",
+  void 0,
+  ["position", "isOpen", "uniqueId"]
+);
+const TdtControlScale = /* @__PURE__ */ defineContainer(
+  "tdt-control-scale",
+  void 0,
+  ["position", "color", "uniqueId"]
+);
+const TdtControlZoom = /* @__PURE__ */ defineContainer(
+  "tdt-control-zoom",
+  void 0,
+  [
+    "position",
+    "zoomInText",
+    "zoomInTitle",
+    "zoomOutText",
+    "zoomOutTitle",
+    "uniqueId"
+  ]
+);
+const TdtMap = /* @__PURE__ */ defineContainer(
+  "tdt-map",
+  void 0,
+  [
+    "tk",
+    "projection",
+    "minZoom",
+    "maxZoom",
+    "maxBounds",
+    "center",
+    "zoom",
+    "uniqueId"
+  ]
+);
+
+const ComponentLibrary = {
+  async install() {
+    applyPolyfills().then(() => {
+      defineCustomElements();
+    });
+  }
+};
+
+export { ComponentLibrary, TdtControl, TdtControlCopyright, TdtControlOverviewMap, TdtControlScale, TdtControlZoom, TdtMap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tianditu/vue",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Vue components for tianditu, powered by Demo Macro.",
   "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -29,8 +29,10 @@
   },
   "homepage": "https://github.com/DemoMacro/tianditu#readme",
   "devDependencies": {
-    "vue": "3.2.47",
-    "@tianditu/web-components": "0.0.0"
+    "vue": "3.4.37",
+    "@tianditu/wc": "0.0.1"
   },
-  "scripts": {}
+  "scripts": {
+    "dev": "unbuild --stub"
+  }
 }

package/dist/components.d.ts

@@ -1,9 +0,0 @@
-import type { JSX } from "@tianditu/web-components";
-export declare const TControl: import("vue").DefineComponent<JSX.TControl & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.TControl & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;
-export declare const TMap: import("vue").DefineComponent<JSX.TMap & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.TMap & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {
-    projection: any;
-    minZoom: any;
-    maxZoom: any;
-    maxBounds: any;
-    zoom: any;
-}>;

package/dist/components.mjs

@@ -1,10 +0,0 @@
-import { defineContainer } from "./vue-component-lib/utils.mjs";
-export const TControl = /* @__PURE__ */ defineContainer(
-  "t-control",
-  void 0
-);
-export const TMap = /* @__PURE__ */ defineContainer(
-  "t-map",
-  void 0,
-  ["tk", "projection", "minZoom", "maxZoom", "maxBounds", "center", "zoom"]
-);

package/dist/plugin.d.ts

@@ -1,2 +0,0 @@
-import { Plugin } from "vue";
-export declare const ComponentLibrary: Plugin;

package/dist/plugin.mjs

@@ -1,11 +0,0 @@
-import {
-  applyPolyfills,
-  defineCustomElements
-} from "@tianditu/web-components/dist/loader";
-export const ComponentLibrary = {
-  async install() {
-    applyPolyfills().then(() => {
-      defineCustomElements();
-    });
-  }
-};

package/dist/vue-component-lib/utils.d.ts

@@ -1,20 +0,0 @@
-export interface InputProps<T> {
-    modelValue?: T;
-}
-/**
- * Create a callback to define a Vue component wrapper around a Web Component.
- *
- * @prop name - The component tag name (i.e. `ion-button`)
- * @prop componentProps - An array of properties on the
- * component. These usually match up with the @Prop definitions
- * in each component's TSX file.
- * @prop customElement - An option custom element instance to pass
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
- * @prop modelProp - The prop that v-model binds to (i.e. value)
- * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
- * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
- * correctly updated when a user's event callback fires.
- */
-export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string, externalModelUpdateEvent?: string) => import("vue").DefineComponent<Props & InputProps<VModelType>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<Props & InputProps<VModelType> extends infer T ? T extends Props & InputProps<VModelType> ? T extends import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}> ? import("vue").ExtractPropTypes<T> : T : never : never>, import("vue").ExtractDefaultPropTypes<Props & InputProps<VModelType>>>;

package/dist/vue-component-lib/utils.mjs

@@ -1,124 +0,0 @@
-import {
-  defineComponent,
-  getCurrentInstance,
-  h,
-  inject,
-  ref
-} from "vue";
-const UPDATE_VALUE_EVENT = "update:modelValue";
-const MODEL_VALUE = "modelValue";
-const ROUTER_LINK_VALUE = "routerLink";
-const NAV_MANAGER = "navManager";
-const ROUTER_PROP_PREFIX = "router";
-const ARIA_PROP_PREFIX = "aria";
-const EMPTY_PROP = Symbol();
-const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
-const getComponentClasses = (classes) => {
-  return classes?.split(" ") || [];
-};
-const getElementClasses = (ref2, componentClasses, defaultClasses = []) => {
-  return [...Array.from(ref2.value?.classList || []), ...defaultClasses].filter(
-    (c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
-  );
-};
-export const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
-  if (defineCustomElement !== void 0) {
-    defineCustomElement();
-  }
-  const Container = defineComponent(
-    (props, { attrs, slots, emit }) => {
-      let modelPropValue = props[modelProp];
-      const containerRef = ref();
-      const classes = new Set(getComponentClasses(attrs.class));
-      const onVnodeBeforeMount = (vnode) => {
-        if (vnode.el) {
-          const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
-          eventsNames.forEach((eventName) => {
-            vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
-              modelPropValue = (e?.target)[modelProp];
-              emit(UPDATE_VALUE_EVENT, modelPropValue);
-              if (externalModelUpdateEvent) {
-                emit(externalModelUpdateEvent, e);
-              }
-            });
-          });
-        }
-      };
-      const currentInstance = getCurrentInstance();
-      const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
-      const navManager = hasRouter ? inject(NAV_MANAGER) : void 0;
-      const handleRouterLink = (ev) => {
-        const { routerLink } = props;
-        if (routerLink === EMPTY_PROP)
-          return;
-        if (navManager !== void 0) {
-          let navigationPayload = { event: ev };
-          for (const key in props) {
-            const value = props[key];
-            if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
-              navigationPayload[key] = value;
-            }
-          }
-          navManager.navigate(navigationPayload);
-        } else {
-          console.warn(
-            "Tried to navigate, but no router was found. Make sure you have mounted Vue Router."
-          );
-        }
-      };
-      return () => {
-        modelPropValue = props[modelProp];
-        getComponentClasses(attrs.class).forEach((value) => {
-          classes.add(value);
-        });
-        const oldClick = props.onClick;
-        const handleClick = (ev) => {
-          if (oldClick !== void 0) {
-            oldClick(ev);
-          }
-          if (!ev.defaultPrevented) {
-            handleRouterLink(ev);
-          }
-        };
-        let propsToAdd = {
-          ref: containerRef,
-          class: getElementClasses(containerRef, classes),
-          onClick: handleClick,
-          onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : void 0
-        };
-        for (const key in props) {
-          const value = props[key];
-          if (props.hasOwnProperty(key) && value !== EMPTY_PROP || key.startsWith(ARIA_PROP_PREFIX)) {
-            propsToAdd[key] = value;
-          }
-        }
-        if (modelProp) {
-          if (props[MODEL_VALUE] !== EMPTY_PROP) {
-            propsToAdd = {
-              ...propsToAdd,
-              [modelProp]: props[MODEL_VALUE]
-            };
-          } else if (modelPropValue !== EMPTY_PROP) {
-            propsToAdd = {
-              ...propsToAdd,
-              [modelProp]: modelPropValue
-            };
-          }
-        }
-        return h(name, propsToAdd, slots.default && slots.default());
-      };
-    }
-  );
-  Container.name = name;
-  Container.props = {
-    [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP
-  };
-  componentProps.forEach((componentProp) => {
-    Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-  });
-  if (modelProp) {
-    Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-    Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
-  }
-  return Container;
-};