@squirkle-ui/map 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KheangLov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,23 @@
-# Temporary Holding Version
+# @squirkle-ui/map
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vector (MapLibre) and raster (Leaflet) squircle maps with custom markers and clustering for Squirkle UI.
+
+```bash
+npm i @squirkle-ui/map @squirkle-ui/ui maplibre-gl
+```
+```ts
+import { SqMap } from '@squirkle-ui/map'        // Vue 3
+// import { SqMap } from '@squirkle-ui/map/vue2' // Vue 2.7
+import '@squirkle-ui/map/styles.css'
+```
+Peer dependencies: `vue`, `@squirkle-ui/ui`, and `maplibre-gl` (vector, default) or `leaflet` (`engine="raster"`).
+
+MapLibre loads a worker file that bundlers don't copy on their own. In Vite apps, register it once:
+```ts
+import { setMapWorkerUrl } from '@squirkle-ui/map'
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url'
+setMapWorkerUrl(workerUrl)
+```
+The Nuxt module does this automatically.
+
+Part of [Squirkle UI](https://github.com/KheangLov/squirkle-ui) · MIT License

package/dist/styles.css

@@ -0,0 +1,80 @@
+
+.sq-map { position: relative; overflow: hidden; isolation: isolate;
+}
+/* Two classes: MapLibre's lazily loaded CSS sets `.maplibregl-map { position: relative }` and would collapse the canvas to 0 px. */
+.sq-map .sq-map__canvas { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--sq-surface-variant); font: inherit;
+}
+.sq-map__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;
+}
+.sq-map__controls { position: absolute; top: var(--sq-space-3); right: var(--sq-space-3); z-index: 500; display: flex; flex-direction: column; gap: 6px;
+}
+.sq-map__templates { display: none;
+}
+
+/* markers */
+.sq-map-marker { --sq-pin: var(--sq-primary); --sq-pin-size: 30px; position: relative; cursor: pointer; outline: none; transition: transform var(--sq-duration-fast) var(--sq-ease-spring);
+}
+.sq-map-marker:hover, .sq-map-marker:focus-visible { transform: scale(1.12); z-index: 2;
+}
+.sq-map-marker__body { display: flex; align-items: center; justify-content: center; width: var(--sq-pin-size); height: var(--sq-pin-size); background: var(--sq-pin); color: #fff; box-shadow: 0 3px 10px rgb(0 0 0 / 0.28), inset 0 0 0 2px rgb(255 255 255 / 0.92);
+}
+.sq-map-marker__content { display: flex; align-items: center; justify-content: center; font: 700 calc(var(--sq-pin-size) * 0.38) / 1 var(--sq-font);
+}
+.sq-map-marker__content svg { width: calc(var(--sq-pin-size) * 0.52); height: calc(var(--sq-pin-size) * 0.52); fill: currentColor;
+}
+.sq-map-marker__content--empty::after { content: ''; display: block; width: 30%; height: 30%; min-width: 8px; min-height: 8px; border-radius: 30%; background: #fff;
+}
+.sq-map-marker--pin .sq-map-marker__body { border-radius: 38% 38% 38% 10%; transform: rotate(-45deg); margin-bottom: calc(var(--sq-pin-size) * 0.2);
+}
+.sq-map-marker--pin .sq-map-marker__content { transform: rotate(45deg);
+}
+.sq-map-marker--squircle .sq-map-marker__body { border-radius: 32%;
+}
+.sq-map-marker--avatar .sq-map-marker__body { border-radius: 34%; overflow: hidden; padding: 2px; background: #fff; box-shadow: 0 3px 10px rgb(0 0 0 / 0.28), 0 0 0 2px var(--sq-pin);
+}
+.sq-map-marker--avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 30%;
+}
+.sq-map-marker--dot .sq-map-marker__body { width: calc(var(--sq-pin-size) * 0.5); height: calc(var(--sq-pin-size) * 0.5); border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 7px color-mix(in srgb, var(--sq-pin) 28%, transparent), 0 2px 6px rgb(0 0 0 / 0.3);
+}
+@supports (corner-shape: squircle) {
+.sq-map-marker--pin .sq-map-marker__body { border-radius: 58% 58% 58% 14%; corner-shape: squircle;
+}
+.sq-map-marker--squircle .sq-map-marker__body, .sq-map-marker--avatar .sq-map-marker__body, .sq-map-marker--avatar img, .sq-map-cluster { corner-shape: squircle;
+}
+.sq-map-marker--squircle .sq-map-marker__body, .sq-map-marker--avatar .sq-map-marker__body { border-radius: 50%;
+}
+.sq-map-marker--avatar img { border-radius: 46%;
+}
+.sq-map-cluster { border-radius: 50%;
+}
+.sq-map__canvas { corner-shape: inherit;
+}
+}
+.sq-map-cluster { --sq-cluster-size: 40px; display: flex; align-items: center; justify-content: center; width: var(--sq-cluster-size); height: var(--sq-cluster-size); border-radius: 34%; background: var(--sq-pin); color: #fff; font: 700 13px/1 var(--sq-font); cursor: pointer; outline: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--sq-pin) 26%, transparent), 0 4px 12px rgb(0 0 0 / 0.25); transition: transform var(--sq-duration-fast) var(--sq-ease-spring);
+}
+.sq-map-cluster:hover, .sq-map-cluster:focus-visible { transform: scale(1.1);
+}
+
+/* Leaflet marker anchoring (MapLibre anchors natively) */
+.sq-map__marker-wrap { background: none; border: 0;
+}
+.sq-map__anchor { position: absolute; left: 0; top: 0;
+}
+.sq-map__anchor--center { transform: translate(-50%, -50%);
+}
+.sq-map__anchor--bottom { transform: translate(-50%, -100%);
+}
+
+/* popups (both engines) */
+.sq-map .maplibregl-popup-content, .sq-map .leaflet-popup-content-wrapper { border-radius: var(--sq-radius-lg); background: var(--sq-surface-raised); color: var(--sq-on-surface); box-shadow: var(--sq-elevation-3); padding: 10px 14px; font: var(--sq-text-sm) / 1.5 var(--sq-font);
+}
+.sq-map .leaflet-popup-content { margin: 0;
+}
+.sq-map .maplibregl-popup-tip { border-top-color: var(--sq-surface-raised) !important; border-bottom-color: var(--sq-surface-raised) !important;
+}
+.sq-map .leaflet-popup-tip { background: var(--sq-surface-raised);
+}
+.sq-map .maplibregl-ctrl-attrib, .sq-map .leaflet-control-attribution { border-radius: var(--sq-radius-sm); font-size: 10px; background: color-mix(in srgb, var(--sq-surface) 82%, transparent); color: var(--sq-muted);
+}
+.sq-map .maplibregl-ctrl-attrib a, .sq-map .leaflet-control-attribution a { color: var(--sq-primary);
+}

package/dist/types/SqMap.vue.d.ts

@@ -0,0 +1,535 @@
+import { type PropType } from 'vue';
+import { radiusValue } from '@squirkle-ui/ui';
+import { type LatLng, type MapAdapter } from './adapters';
+import { type MapMarker } from './markers';
+import { type ClusterOptions } from './cluster';
+/**
+ * Squircle map. `engine="vector"` (default) renders vector tiles with MapLibre GL; `engine="raster"` uses Leaflet.
+ * Both are optional peer dependencies loaded on mount, so the component is SSR-safe.
+ * Markers: shapes pin / dot / squircle / avatar, icons, labels, or a `#marker` slot. `cluster` groups dense markers.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    engine: {
+        type: PropType<"vector" | "raster">;
+        default: string;
+    };
+    /** Vector style: `auto` (follows light/dark), a preset name (positron, voyager, dark-matter, liberty, bright, openfreemap-dark, fiord), a style URL or a style object. */
+    mapStyle: {
+        type: PropType<string | object>;
+        default: string;
+    };
+    center: {
+        type: PropType<LatLng>;
+        default: () => number[];
+    };
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    markers: {
+        type: PropType<MapMarker[]>;
+        default: () => never[];
+    };
+    /** Defaults merged into every marker (shape, color, size, icon…). */
+    markerDefaults: {
+        type: PropType<Partial<MapMarker>>;
+        default: () => {};
+    };
+    cluster: {
+        type: PropType<boolean | ClusterOptions>;
+        default: boolean;
+    };
+    clusterColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Raster engine tile template. */
+    tileUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    attribution: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rounded: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    fitMarkers: BooleanConstructor;
+    scrollWheelZoom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    adapter: import("vue").ShallowRef<MapAdapter | null, MapAdapter | null>;
+    ready: import("vue").Ref<boolean, boolean>;
+    keyOf: (m: MapMarker, i: number) => string;
+    fit: () => void | undefined;
+    toUnit: (v: string | number | undefined | null, unit?: string) => string | undefined;
+    radiusValue: typeof radiusValue;
+    has: (n: string) => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "error" | "update:center" | "update:zoom" | "marker-click" | "cluster-click" | "ready")[], "click" | "error" | "update:center" | "update:zoom" | "marker-click" | "cluster-click" | "ready", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    engine: {
+        type: PropType<"vector" | "raster">;
+        default: string;
+    };
+    /** Vector style: `auto` (follows light/dark), a preset name (positron, voyager, dark-matter, liberty, bright, openfreemap-dark, fiord), a style URL or a style object. */
+    mapStyle: {
+        type: PropType<string | object>;
+        default: string;
+    };
+    center: {
+        type: PropType<LatLng>;
+        default: () => number[];
+    };
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    markers: {
+        type: PropType<MapMarker[]>;
+        default: () => never[];
+    };
+    /** Defaults merged into every marker (shape, color, size, icon…). */
+    markerDefaults: {
+        type: PropType<Partial<MapMarker>>;
+        default: () => {};
+    };
+    cluster: {
+        type: PropType<boolean | ClusterOptions>;
+        default: boolean;
+    };
+    clusterColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Raster engine tile template. */
+    tileUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    attribution: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    rounded: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    fitMarkers: BooleanConstructor;
+    scrollWheelZoom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    "onUpdate:center"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:zoom"?: ((...args: any[]) => any) | undefined;
+    "onMarker-click"?: ((...args: any[]) => any) | undefined;
+    "onCluster-click"?: ((...args: any[]) => any) | undefined;
+    onReady?: ((...args: any[]) => any) | undefined;
+}>, {
+    cluster: boolean | ClusterOptions;
+    center: LatLng;
+    engine: "vector" | "raster";
+    zoom: number;
+    scrollWheelZoom: boolean;
+    attribution: string;
+    label: string;
+    rounded: string | number;
+    fitMarkers: boolean;
+    mapStyle: string | object;
+    markers: MapMarker[];
+    markerDefaults: Partial<MapMarker>;
+    clusterColor: string;
+    tileUrl: string;
+    height: string | number;
+}, {}, {
+    SqBtn: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        text: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        variant: {
+            type: PropType<import("@squirkle-ui/ui").Variant>;
+            default: import("@squirkle-ui/ui").Variant;
+        };
+        color: {
+            default: string;
+            type: StringConstructor;
+        };
+        size: {
+            type: PropType<import("@squirkle-ui/ui").Size>;
+            default: string;
+        };
+        rounded: {
+            type: PropType<import("@squirkle-ui/ui").Rounded>;
+            default: undefined;
+        };
+        icon: {
+            type: (BooleanConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        prependIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        appendIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        block: BooleanConstructor;
+        loading: BooleanConstructor;
+        disabled: BooleanConstructor;
+        active: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        href: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        to: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        type: {
+            type: PropType<"button" | "submit" | "reset">;
+            default: string;
+        };
+        value: {
+            type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>, {
+        tag: import("vue").ComputedRef<"button" | "router-link" | "a">;
+        style: import("vue").ComputedRef<{
+            "--sq-shadow"?: undefined;
+            "--sq-shadow-filter"?: undefined;
+            "--sq-r": string;
+        } | {
+            "--sq-shadow": string;
+            "--sq-shadow-filter": string;
+            "--sq-r": string;
+        }>;
+        classes: import("vue").ComputedRef<(string | {
+            "sq-btn--icon": boolean;
+            "sq-btn--block": boolean;
+            "sq-btn--loading": boolean;
+            "sq-btn--active": boolean;
+            "sq-disabled": boolean;
+        })[]>;
+        iconName: import("vue").ComputedRef<string | undefined>;
+        isActive: import("vue").ComputedRef<boolean>;
+        isDisabled: import("vue").ComputedRef<boolean>;
+        toggleable: boolean;
+        onClick: (e: MouseEvent) => void;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        text: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        variant: {
+            type: PropType<import("@squirkle-ui/ui").Variant>;
+            default: import("@squirkle-ui/ui").Variant;
+        };
+        color: {
+            default: string;
+            type: StringConstructor;
+        };
+        size: {
+            type: PropType<import("@squirkle-ui/ui").Size>;
+            default: string;
+        };
+        rounded: {
+            type: PropType<import("@squirkle-ui/ui").Rounded>;
+            default: undefined;
+        };
+        icon: {
+            type: (BooleanConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        prependIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        appendIcon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        block: BooleanConstructor;
+        loading: BooleanConstructor;
+        disabled: BooleanConstructor;
+        active: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        elevation: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        href: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        to: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        type: {
+            type: PropType<"button" | "submit" | "reset">;
+            default: string;
+        };
+        value: {
+            type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+    }>> & Readonly<{
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {
+        loading: boolean;
+        icon: string | boolean;
+        type: "button" | "submit" | "reset";
+        active: boolean;
+        text: string;
+        size: import("@squirkle-ui/ui").Size;
+        color: string;
+        rounded: import("@squirkle-ui/ui").Rounded;
+        block: boolean;
+        disabled: boolean;
+        variant: import("@squirkle-ui/ui").Variant;
+        prependIcon: string;
+        appendIcon: string;
+        elevation: string | number;
+        href: string;
+        to: string | Record<string, any>;
+        value: string | number | boolean | Record<string, any>;
+    }, {}, {
+        SqShape: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>, {
+            active: import("vue").Ref<boolean, boolean>;
+            w: import("vue").Ref<number, number>;
+            h: import("vue").Ref<number, number>;
+            bw: import("vue").Ref<number, number>;
+            d: import("vue").ComputedRef<string>;
+            strokeD: import("vue").ComputedRef<string>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>> & Readonly<{}>, {
+            clip: boolean;
+            watchKey: string | number | boolean | unknown[] | Record<string, any>;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        SqIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: string;
+            };
+            color: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            label: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            clickable: BooleanConstructor;
+        }>, {
+            resolved: import("vue").ComputedRef<import("@squirkle-ui/ui/dist/types/icons").ResolvedIcon>;
+            style: import("vue").ComputedRef<{
+                "--sq-icon-size": string;
+                color: string | undefined;
+            }>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: string;
+            };
+            color: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            label: {
+                type: StringConstructor;
+                default: undefined;
+            };
+            clickable: BooleanConstructor;
+        }>> & Readonly<{}>, {
+            label: string;
+            icon: string;
+            clickable: boolean;
+            size: string | number;
+            color: string;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        SqProgressCircular: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: NumberConstructor;
+                default: number;
+            };
+            indeterminate: BooleanConstructor;
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            width: {
+                type: NumberConstructor;
+                default: number;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {
+            r: import("vue").ComputedRef<number>;
+            circ: import("vue").ComputedRef<number>;
+            offset: import("vue").ComputedRef<number>;
+            style: import("vue").ComputedRef<{
+                width: string | undefined;
+                height: string | undefined;
+                color: string | undefined;
+            }>;
+            has: (n: string) => boolean;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                type: NumberConstructor;
+                default: number;
+            };
+            indeterminate: BooleanConstructor;
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            width: {
+                type: NumberConstructor;
+                default: number;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{}>, {
+            width: number;
+            size: string | number;
+            color: string;
+            indeterminate: boolean;
+            modelValue: number;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    SqProgressCircular: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        modelValue: {
+            type: NumberConstructor;
+            default: number;
+        };
+        indeterminate: BooleanConstructor;
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        width: {
+            type: NumberConstructor;
+            default: number;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {
+        r: import("vue").ComputedRef<number>;
+        circ: import("vue").ComputedRef<number>;
+        offset: import("vue").ComputedRef<number>;
+        style: import("vue").ComputedRef<{
+            width: string | undefined;
+            height: string | undefined;
+            color: string | undefined;
+        }>;
+        has: (n: string) => boolean;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        modelValue: {
+            type: NumberConstructor;
+            default: number;
+        };
+        indeterminate: BooleanConstructor;
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        width: {
+            type: NumberConstructor;
+            default: number;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        width: number;
+        size: string | number;
+        color: string;
+        indeterminate: boolean;
+        modelValue: number;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    SqShape: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        watchKey: {
+            type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        clip: BooleanConstructor;
+    }>, {
+        active: import("vue").Ref<boolean, boolean>;
+        w: import("vue").Ref<number, number>;
+        h: import("vue").Ref<number, number>;
+        bw: import("vue").Ref<number, number>;
+        d: import("vue").ComputedRef<string>;
+        strokeD: import("vue").ComputedRef<string>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        watchKey: {
+            type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        clip: BooleanConstructor;
+    }>> & Readonly<{}>, {
+        clip: boolean;
+        watchKey: string | number | boolean | unknown[] | Record<string, any>;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;