mehdi-akbari-map 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/InteractiveMap.d.ts.map +1 -1
  2. package/dist/components/StoreCard.d.ts +1 -0
  3. package/dist/components/StoreCard.d.ts.map +1 -1
  4. package/dist/index.cjs +66 -30
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.css +118 -134
  7. package/dist/index.css.map +1 -1
  8. package/dist/index.js +66 -30
  9. package/dist/index.js.map +1 -1
  10. package/dist/react.cjs +66 -30
  11. package/dist/react.cjs.map +1 -1
  12. package/dist/react.js +66 -30
  13. package/dist/react.js.map +1 -1
  14. package/dist/styles.css +114 -156
  15. package/package.json +1 -1
package/dist/components/InteractiveMap.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InteractiveMap.d.ts","sourceRoot":"","sources":["../../src/components/InteractiveMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAS,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAqG7C,CAAC"}
1
+ {"version":3,"file":"InteractiveMap.d.ts","sourceRoot":"","sources":["../../src/components/InteractiveMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAS,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA+E7C,CAAC"}
package/dist/components/StoreCard.d.ts CHANGED
@@ -4,6 +4,7 @@ interface StoreCardProps {
4
4
  store: Store;
5
5
  isSelected: boolean;
6
6
  onSelect: () => void;
7
+ shopLogoUrl?: string;
7
8
  }
8
9
  export declare const StoreCard: React.FC<StoreCardProps>;
9
10
  export {};
package/dist/components/StoreCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StoreCard.d.ts","sourceRoot":"","sources":["../../src/components/StoreCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyC9C,CAAC"}
1
+ {"version":3,"file":"StoreCard.d.ts","sourceRoot":"","sources":["../../src/components/StoreCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsF9C,CAAC"}
package/dist/index.cjs CHANGED
@@ -240,8 +240,11 @@ var Map_default = Map;
240
240
 
241
241
  // src/components/StoreCard.tsx
242
242
  var import_jsx_runtime2 = require("react/jsx-runtime");
243
- var StoreCard = ({ store, isSelected, onSelect }) => {
243
+ var StoreCard = ({ store, isSelected, onSelect, shopLogoUrl }) => {
244
244
  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;
245
+ const handleActionClick = (e) => {
246
+ e.stopPropagation();
247
+ };
245
248
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
246
249
  "div",
247
250
  {
@@ -250,20 +253,58 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
250
253
  "data-id": store.id,
251
254
  children: [
252
255
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-card-header", children: [
253
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
256
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-info-main", children: [
254
257
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "store-name", children: store.name }),
255
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "store-city", children: store.city })
258
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-location-tag", children: [
259
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
260
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
261
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "10", r: "3" })
262
+ ] }),
263
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "store-city", children: store.city })
264
+ ] })
256
265
  ] }),
257
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-price", children: [
258
- store.price,
259
- " \u062A\u0648\u0645\u0627\u0646"
266
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "report-btn", onClick: handleActionClick, children: [
267
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
268
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
269
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
270
+ ] }),
271
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u06AF\u0632\u0627\u0631\u0634" })
260
272
  ] })
261
273
  ] }),
262
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "store-desc", children: store.desc }),
263
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-content", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "action-buttons", children: [
264
- store.phone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `tel:${store.phone}`, className: "btn btn-call", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u062A\u0645\u0627\u0633" }) }),
265
- store.whatsapp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
266
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
274
+ store.performance && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-performance", children: [
275
+ "\u0639\u0645\u0644\u06A9\u0631\u062F ",
276
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "perf-value", children: store.performance })
277
+ ] }),
278
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-desc-section", children: [
279
+ shopLogoUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: shopLogoUrl, alt: "shop logo", className: "store-mini-logo" }),
280
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "store-desc", children: store.desc })
281
+ ] }),
282
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-card-footer", children: [
283
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "price-container", children: [
284
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "price-value", children: store.price }),
285
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "price-unit", children: "\u062A\u0648\u0645\u0627\u0646" })
286
+ ] }),
287
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "contact-trigger", children: [
288
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0627\u0637\u0644\u0627\u0639\u0627\u062A \u062A\u0645\u0627\u0633" }),
289
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: `arrow-icon ${isSelected ? "open" : ""}`, width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "18 15 12 9 6 15" }) })
290
+ ] })
291
+ ] }),
292
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-content", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "action-buttons vertical", children: [
293
+ store.phone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `tel:${store.phone}`, className: "btn btn-call full-width", onClick: handleActionClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "btn-content", children: [
294
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }),
295
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
296
+ "\u062A\u0645\u0627\u0633: ",
297
+ store.phone
298
+ ] })
299
+ ] }) }),
300
+ store.whatsapp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", rel: "noreferrer", className: "btn btn-wa full-width", onClick: handleActionClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "btn-content", children: [
301
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) }),
302
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0627\u0631\u0633\u0627\u0644 \u067E\u06CC\u0627\u0645 \u062F\u0631 \u0648\u0627\u062A\u0633\u0627\u067E" })
303
+ ] }) }),
304
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: googleMapUrl, target: "_blank", rel: "noreferrer", className: "btn btn-route full-width", onClick: handleActionClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "btn-content", children: [
305
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "3 11 22 2 13 21 11 13 3 11" }) }),
306
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC \u0631\u0648\u06CC \u0646\u0642\u0634\u0647" })
307
+ ] }) })
267
308
  ] }) }) })
268
309
  ]
269
310
  }
@@ -284,23 +325,18 @@ var InteractiveMap = (props) => {
284
325
  }, []);
285
326
  (0, import_react2.useEffect)(() => {
286
327
  if (isMobile && props.selectedMarkerId && sliderRef.current) {
287
- const selectedCard = sliderRef.current.querySelector(`[data-id="${props.selectedMarkerId}"]`);
288
- if (selectedCard) {
289
- selectedCard.scrollIntoView({
290
- behavior: "smooth",
291
- inline: "center",
292
- block: "nearest"
293
- });
294
- }
328
+ const timer = setTimeout(() => {
329
+ const selectedCard = sliderRef.current?.querySelector(`[data-id="${props.selectedMarkerId}"]`);
330
+ if (selectedCard) {
331
+ selectedCard.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
332
+ }
333
+ }, 150);
334
+ return () => clearTimeout(timer);
295
335
  }
296
336
  }, [props.selectedMarkerId, isMobile]);
297
337
  const handleStoreSelect = (0, import_react2.useCallback)((store, index) => {
298
- if (!mapInstance) {
299
- console.warn("\u0646\u0642\u0634\u0647 \u0647\u0646\u0648\u0632 \u0622\u0645\u0627\u062F\u0647 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A.");
300
- return;
301
- }
302
- if (props.onMarkerClick) {
303
- props.onMarkerClick(store, index, mapInstance);
338
+ if (mapInstance) {
339
+ props.onMarkerClick?.(store, index, mapInstance);
304
340
  }
305
341
  }, [mapInstance, props]);
306
342
  const safeMarkers = props.markers || [];
@@ -312,7 +348,8 @@ var InteractiveMap = (props) => {
312
348
  {
313
349
  store,
314
350
  isSelected: props.selectedMarkerId === store.id,
315
- onSelect: () => handleStoreSelect(store, idx)
351
+ onSelect: () => handleStoreSelect(store, idx),
352
+ shopLogoUrl: store.logoUrl
316
353
  },
317
354
  store.id
318
355
  )) })
@@ -325,9 +362,7 @@ var InteractiveMap = (props) => {
325
362
  onMapLoad: (map) => {
326
363
  if (map) {
327
364
  setMapInstance(map);
328
- if (props.onMapLoad) {
329
- props.onMapLoad(map);
330
- }
365
+ props.onMapLoad?.(map);
331
366
  }
332
367
  }
333
368
  }
@@ -338,7 +373,8 @@ var InteractiveMap = (props) => {
338
373
  {
339
374
  store,
340
375
  isSelected: props.selectedMarkerId === store.id,
341
- onSelect: () => handleStoreSelect(store, idx)
376
+ onSelect: () => handleStoreSelect(store, idx),
377
+ shopLogoUrl: store.logoUrl
342
378
  },
343
379
  store.id
344
380
  )) })
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\r\nimport './styles.css';\r\n\r\n\r\nexport { InteractiveMap as NeshanMap } from './components/InteractiveMap';\r\n\r\n\r\nexport { default as RawMap } from './components/Map';\r\n\r\n\r\nexport type {\r\n MapProps,\r\n MapOptions,\r\n MarkerData,\r\n Store,\r\n MapboxMap,\r\n LngLatLike,\r\n} from './types';","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n const [isMobile, setIsMobile] = useState(false);\r\n const [mapInstance, setMapInstance] = useState<any>(null);\r\n const sliderRef = useRef<HTMLDivElement>(null);\r\n\r\n \r\n useEffect(() => {\r\n const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n checkMobile();\r\n window.addEventListener('resize', checkMobile);\r\n return () => window.removeEventListener('resize', checkMobile);\r\n }, []);\r\n\r\n \r\n useEffect(() => {\r\n if (isMobile && props.selectedMarkerId && sliderRef.current) {\r\n const selectedCard = sliderRef.current.querySelector(`[data-id=\"${props.selectedMarkerId}\"]`);\r\n if (selectedCard) {\r\n selectedCard.scrollIntoView({\r\n behavior: 'smooth',\r\n inline: 'center',\r\n block: 'nearest'\r\n });\r\n }\r\n }\r\n }, [props.selectedMarkerId, isMobile]);\r\n\r\n \r\n const handleStoreSelect = useCallback((store: Store, index: number) => {\r\n \r\n if (!mapInstance) {\r\n console.warn(\"نقشه هنوز آماده نشده است.\");\r\n return;\r\n }\r\n \r\n \r\n if (props.onMarkerClick) {\r\n props.onMarkerClick(store, index, mapInstance);\r\n }\r\n }, [mapInstance, props]);\r\n\r\n const safeMarkers = props.markers || [];\r\n\r\n return (\r\n <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n \r\n {/* سایدبار دسکتاپ */}\r\n {!isMobile && (\r\n <aside className=\"sidebar\">\r\n <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n <div className=\"sidebar-list\">\r\n {safeMarkers.map((store, idx) => (\r\n <StoreCard \r\n key={store.id} \r\n store={store} \r\n isSelected={props.selectedMarkerId === store.id}\r\n onSelect={() => handleStoreSelect(store, idx)}\r\n />\r\n ))}\r\n </div>\r\n </aside>\r\n )}\r\n\r\n {/* بخش نقشه */}\r\n <main className=\"map-container\">\r\n <Map \r\n {...props} \r\n onMapLoad={(map) => {\r\n \r\n if (map) {\r\n setMapInstance(map);\r\n if (props.onMapLoad) {\r\n props.onMapLoad(map);\r\n }\r\n }\r\n }} \r\n />\r\n \r\n {/* باج محصول */}\r\n {props.productName && (\r\n <div className=\"product-badge\">\r\n <span>{props.productName}</span>\r\n </div>\r\n )}\r\n\r\n {/* اسلایدر موبایل */}\r\n {isMobile && (\r\n <div className=\"mobile-slider\" ref={sliderRef}>\r\n {safeMarkers.map((store, idx) => (\r\n <StoreCard \r\n key={store.id} \r\n store={store} \r\n isSelected={props.selectedMarkerId === store.id}\r\n onSelect={() => handleStoreSelect(store, idx)}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </main>\r\n </div>\r\n );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n options,\r\n markers = [],\r\n markerLogoUrl = '',\r\n selectedMarkerId = null,\r\n onMarkerClick,\r\n onMapLoad,\r\n style = { width: '100%', height: '100%' },\r\n}) => {\r\n const mapContainerRef = useRef<HTMLDivElement>(null);\r\n const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n const [mapLib, setMapLib] = useState<any>(null);\r\n const markersRef = useRef<any[]>([]);\r\n const isRemoving = useRef(false); \r\n \r\n const clusterIndex = useRef(new Supercluster({\r\n radius: 60,\r\n maxZoom: 16\r\n }));\r\n\r\n \r\n useEffect(() => {\r\n let mounted = true;\r\n import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n if (mounted) setMapLib(mod.default || mod);\r\n });\r\n return () => { mounted = false; };\r\n }, []);\r\n\r\n \r\n useEffect(() => {\r\n if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n\r\n const map = new mapLib.Map({\r\n container: mapContainerRef.current,\r\n ...options,\r\n });\r\n\r\n map.on('load', () => {\r\n if (!isRemoving.current) {\r\n setMapInstance(map);\r\n onMapLoad?.(map);\r\n }\r\n });\r\n\r\n return () => {\r\n if (map) {\r\n isRemoving.current = true;\r\n \r\n setTimeout(() => {\r\n try {\r\n map.remove();\r\n } catch (e) {\r\n console.warn(\"Mapbox remove error ignored:\", e);\r\n }\r\n }, 0);\r\n }\r\n };\r\n \r\n }, [mapLib]); \r\n\r\n \r\n useEffect(() => {\r\n if (!mapInstance || !selectedMarkerId || isRemoving.current) return;\r\n const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n if (selectedStore) {\r\n mapInstance.flyTo({\r\n center: [selectedStore.lng, selectedStore.lat],\r\n zoom: 16, \r\n essential: true,\r\n duration: 1200\r\n });\r\n }\r\n }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n \r\n const updateMarkers = useCallback(() => {\r\n if (!mapInstance || !mapLib || isRemoving.current) return;\r\n\r\n try {\r\n const bounds = mapInstance.getBounds();\r\n const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n const clusters = clusterIndex.current.getClusters(\r\n [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n zoom\r\n );\r\n\r\n markersRef.current.forEach(m => m.remove());\r\n markersRef.current = [];\r\n\r\n clusters.forEach(cluster => {\r\n const [lng, lat] = cluster.geometry.coordinates;\r\n const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n let el: HTMLElement;\r\n\r\n if (isCluster) {\r\n el = createClusterElement(count);\r\n el.onclick = (e) => {\r\n e.stopPropagation();\r\n const expansionZoom = Math.min(\r\n clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n 18\r\n );\r\n mapInstance.easeTo({ center: [lng, lat], zoom: expansionZoom });\r\n };\r\n } else {\r\n const storeData = cluster.properties as Store;\r\n el = createCustomMarkerElement({\r\n marker: storeData,\r\n isSelected: storeData.id === selectedMarkerId,\r\n logoSrc: markerLogoUrl,\r\n });\r\n el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n }\r\n\r\n const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? 'center' : 'bottom' })\r\n .setLngLat([lng, lat])\r\n .addTo(mapInstance);\r\n \r\n markersRef.current.push(newMarker);\r\n });\r\n } catch (err) {\r\n console.error(\"Update markers failed:\", err);\r\n }\r\n }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n \r\n useEffect(() => {\r\n if (isRemoving.current) return;\r\n const points: any = markers.map(s => ({\r\n type: 'Feature',\r\n properties: { ...s },\r\n geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n }));\r\n clusterIndex.current.load(points);\r\n updateMarkers();\r\n }, [markers, updateMarkers]);\r\n\r\n \r\n useEffect(() => {\r\n if (!mapInstance || isRemoving.current) return;\r\n mapInstance.on('moveend', updateMarkers);\r\n return () => { mapInstance.off('moveend', updateMarkers); };\r\n }, [mapInstance, updateMarkers]);\r\n\r\n return (\r\n <div style={{ position: 'relative', overflow: 'hidden', ...style }}>\r\n <div \r\n ref={mapContainerRef} \r\n style={{ width: '100%', height: '100%', backfaceVisibility: 'hidden' }} \r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n marker: MarkerData;\r\n isSelected: boolean;\r\n logoSrc?: string;\r\n showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n marker,\r\n isSelected,\r\n logoSrc = '',\r\n showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n \r\n const container = document.createElement('div');\r\n container.className = 'neshan-marker-container';\r\n\r\n \r\n const body = document.createElement('div');\r\n body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n \r\n \r\n Object.assign(body.style, {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n transition: 'transform 0.3s ease',\r\n transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n });\r\n\r\n \r\n const iconBox = document.createElement('div');\r\n Object.assign(iconBox.style, {\r\n width: '36px',\r\n height: '36px',\r\n borderRadius: '50%',\r\n\r\n border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n overflow: 'hidden'\r\n });\r\n\r\n if (logoSrc) {\r\n const img = document.createElement('img');\r\n img.src = logoSrc;\r\n img.style.width = '100%';\r\n img.style.height = '100%';\r\n img.style.objectFit = 'cover';\r\n iconBox.appendChild(img);\r\n } else {\r\n iconBox.style.backgroundColor = '#ef4444';\r\n }\r\n\r\n body.appendChild(iconBox);\r\n\r\n \r\n if (showPrice && (marker.price || marker.name)) {\r\n const label = document.createElement('div');\r\n label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n body.appendChild(label);\r\n}\r\n\r\n container.appendChild(body);\r\n return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n const container = document.createElement('div');\r\n container.className = 'neshan-cluster-marker';\r\n \r\n \r\n const countSpan = document.createElement('span');\r\n countSpan.className = 'neshan-cluster-count';\r\n countSpan.innerText = count.toString();\r\n \r\n container.appendChild(countSpan);\r\n return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n store: Store;\r\n isSelected: boolean;\r\n onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n return (\r\n <div \r\n className={`store-card ${isSelected ? 'active' : ''}`}\r\n onClick={onSelect}\r\n data-id={store.id} // برای پیدا کردن کارت در اسکرول موبایل\r\n >\r\n <div className=\"store-card-header\">\r\n <div>\r\n <h4 className=\"store-name\">{store.name}</h4>\r\n <span className=\"store-city\">{store.city}</span>\r\n </div>\r\n <div className=\"store-price\">{store.price} تومان</div>\r\n </div>\r\n\r\n <p className=\"store-desc\">{store.desc}</p>\r\n\r\n {/* بخش آکاردئونی با CSS Animation */}\r\n <div className=\"store-details-wrapper\">\r\n <div className=\"store-details-content\">\r\n <div className=\"action-buttons\">\r\n {store.phone && (\r\n <a href={`tel:${store.phone}`} className=\"btn btn-call\" onClick={(e) => e.stopPropagation()}>\r\n <span>تماس</span>\r\n </a>\r\n )}\r\n {store.whatsapp && (\r\n <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\" onClick={(e) => e.stopPropagation()}>\r\n <span>واتساپ</span>\r\n </a>\r\n )}\r\n <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\" onClick={(e) => e.stopPropagation()}>\r\n <span>مسیریابی</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};"],"mappings":"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","names":["import_react","Supercluster","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\r\nimport './styles.css';\r\n\r\n\r\nexport { InteractiveMap as NeshanMap } from './components/InteractiveMap';\r\n\r\n\r\nexport { default as RawMap } from './components/Map';\r\n\r\n\r\nexport type {\r\n MapProps,\r\n MapOptions,\r\n MarkerData,\r\n Store,\r\n MapboxMap,\r\n LngLatLike,\r\n} from './types';","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n const [isMobile, setIsMobile] = useState(false);\r\n const [mapInstance, setMapInstance] = useState<any>(null);\r\n const sliderRef = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n checkMobile();\r\n window.addEventListener('resize', checkMobile);\r\n return () => window.removeEventListener('resize', checkMobile);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isMobile && props.selectedMarkerId && sliderRef.current) {\r\n const timer = setTimeout(() => {\r\n const selectedCard = sliderRef.current?.querySelector(`[data-id=\"${props.selectedMarkerId}\"]`);\r\n if (selectedCard) {\r\n selectedCard.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n }\r\n }, 150);\r\n return () => clearTimeout(timer);\r\n }\r\n }, [props.selectedMarkerId, isMobile]);\r\n\r\n const handleStoreSelect = useCallback((store: Store, index: number) => {\r\n if (mapInstance) {\r\n props.onMarkerClick?.(store, index, mapInstance);\r\n }\r\n }, [mapInstance, props]);\r\n\r\n const safeMarkers = props.markers || [];\r\n\r\n return (\r\n <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n {!isMobile && (\r\n <aside className=\"sidebar\">\r\n <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n <div className=\"sidebar-list\">\r\n {safeMarkers.map((store, idx) => (\r\n <StoreCard \r\n key={store.id} \r\n store={store} \r\n isSelected={props.selectedMarkerId === store.id}\r\n onSelect={() => handleStoreSelect(store, idx)}\r\n shopLogoUrl={store.logoUrl} // فرض می‌کنیم در دیتا فیلد logoUrl داریم\r\n />\r\n ))}\r\n </div>\r\n </aside>\r\n )}\r\n\r\n <main className=\"map-container\">\r\n <Map \r\n {...props} \r\n onMapLoad={(map) => {\r\n if (map) {\r\n setMapInstance(map);\r\n props.onMapLoad?.(map);\r\n }\r\n }} \r\n />\r\n {props.productName && <div className=\"product-badge\"><span>{props.productName}</span></div>}\r\n\r\n {isMobile && (\r\n <div className=\"mobile-slider\" ref={sliderRef}>\r\n {safeMarkers.map((store, idx) => (\r\n <StoreCard \r\n key={store.id} \r\n store={store} \r\n isSelected={props.selectedMarkerId === store.id}\r\n onSelect={() => handleStoreSelect(store, idx)}\r\n shopLogoUrl={store.logoUrl}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </main>\r\n </div>\r\n );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n options,\r\n markers = [],\r\n markerLogoUrl = '',\r\n selectedMarkerId = null,\r\n onMarkerClick,\r\n onMapLoad,\r\n style = { width: '100%', height: '100%' },\r\n}) => {\r\n const mapContainerRef = useRef<HTMLDivElement>(null);\r\n const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n const [mapLib, setMapLib] = useState<any>(null);\r\n const markersRef = useRef<any[]>([]);\r\n const isRemoving = useRef(false); \r\n \r\n const clusterIndex = useRef(new Supercluster({\r\n radius: 60,\r\n maxZoom: 16\r\n }));\r\n\r\n \r\n useEffect(() => {\r\n let mounted = true;\r\n import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n if (mounted) setMapLib(mod.default || mod);\r\n });\r\n return () => { mounted = false; };\r\n }, []);\r\n\r\n \r\n useEffect(() => {\r\n if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n\r\n const map = new mapLib.Map({\r\n container: mapContainerRef.current,\r\n ...options,\r\n });\r\n\r\n map.on('load', () => {\r\n if (!isRemoving.current) {\r\n setMapInstance(map);\r\n onMapLoad?.(map);\r\n }\r\n });\r\n\r\n return () => {\r\n if (map) {\r\n isRemoving.current = true;\r\n \r\n setTimeout(() => {\r\n try {\r\n map.remove();\r\n } catch (e) {\r\n console.warn(\"Mapbox remove error ignored:\", e);\r\n }\r\n }, 0);\r\n }\r\n };\r\n \r\n }, [mapLib]); \r\n\r\n \r\n useEffect(() => {\r\n if (!mapInstance || !selectedMarkerId || isRemoving.current) return;\r\n const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n if (selectedStore) {\r\n mapInstance.flyTo({\r\n center: [selectedStore.lng, selectedStore.lat],\r\n zoom: 16, \r\n essential: true,\r\n duration: 1200\r\n });\r\n }\r\n }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n \r\n const updateMarkers = useCallback(() => {\r\n if (!mapInstance || !mapLib || isRemoving.current) return;\r\n\r\n try {\r\n const bounds = mapInstance.getBounds();\r\n const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n const clusters = clusterIndex.current.getClusters(\r\n [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n zoom\r\n );\r\n\r\n markersRef.current.forEach(m => m.remove());\r\n markersRef.current = [];\r\n\r\n clusters.forEach(cluster => {\r\n const [lng, lat] = cluster.geometry.coordinates;\r\n const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n let el: HTMLElement;\r\n\r\n if (isCluster) {\r\n el = createClusterElement(count);\r\n el.onclick = (e) => {\r\n e.stopPropagation();\r\n const expansionZoom = Math.min(\r\n clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n 18\r\n );\r\n mapInstance.easeTo({ center: [lng, lat], zoom: expansionZoom });\r\n };\r\n } else {\r\n const storeData = cluster.properties as Store;\r\n el = createCustomMarkerElement({\r\n marker: storeData,\r\n isSelected: storeData.id === selectedMarkerId,\r\n logoSrc: markerLogoUrl,\r\n });\r\n el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n }\r\n\r\n const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? 'center' : 'bottom' })\r\n .setLngLat([lng, lat])\r\n .addTo(mapInstance);\r\n \r\n markersRef.current.push(newMarker);\r\n });\r\n } catch (err) {\r\n console.error(\"Update markers failed:\", err);\r\n }\r\n }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n \r\n useEffect(() => {\r\n if (isRemoving.current) return;\r\n const points: any = markers.map(s => ({\r\n type: 'Feature',\r\n properties: { ...s },\r\n geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n }));\r\n clusterIndex.current.load(points);\r\n updateMarkers();\r\n }, [markers, updateMarkers]);\r\n\r\n \r\n useEffect(() => {\r\n if (!mapInstance || isRemoving.current) return;\r\n mapInstance.on('moveend', updateMarkers);\r\n return () => { mapInstance.off('moveend', updateMarkers); };\r\n }, [mapInstance, updateMarkers]);\r\n\r\n return (\r\n <div style={{ position: 'relative', overflow: 'hidden', ...style }}>\r\n <div \r\n ref={mapContainerRef} \r\n style={{ width: '100%', height: '100%', backfaceVisibility: 'hidden' }} \r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n marker: MarkerData;\r\n isSelected: boolean;\r\n logoSrc?: string;\r\n showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n marker,\r\n isSelected,\r\n logoSrc = '',\r\n showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n \r\n const container = document.createElement('div');\r\n container.className = 'neshan-marker-container';\r\n\r\n \r\n const body = document.createElement('div');\r\n body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n \r\n \r\n Object.assign(body.style, {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n transition: 'transform 0.3s ease',\r\n transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n });\r\n\r\n \r\n const iconBox = document.createElement('div');\r\n Object.assign(iconBox.style, {\r\n width: '36px',\r\n height: '36px',\r\n borderRadius: '50%',\r\n\r\n border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n overflow: 'hidden'\r\n });\r\n\r\n if (logoSrc) {\r\n const img = document.createElement('img');\r\n img.src = logoSrc;\r\n img.style.width = '100%';\r\n img.style.height = '100%';\r\n img.style.objectFit = 'cover';\r\n iconBox.appendChild(img);\r\n } else {\r\n iconBox.style.backgroundColor = '#ef4444';\r\n }\r\n\r\n body.appendChild(iconBox);\r\n\r\n \r\n if (showPrice && (marker.price || marker.name)) {\r\n const label = document.createElement('div');\r\n label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n body.appendChild(label);\r\n}\r\n\r\n container.appendChild(body);\r\n return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n const container = document.createElement('div');\r\n container.className = 'neshan-cluster-marker';\r\n \r\n \r\n const countSpan = document.createElement('span');\r\n countSpan.className = 'neshan-cluster-count';\r\n countSpan.innerText = count.toString();\r\n \r\n container.appendChild(countSpan);\r\n return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n store: Store;\r\n isSelected: boolean;\r\n onSelect: () => void;\r\n shopLogoUrl?: string; // لوگوی کوچک کنار توضیحات\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect, shopLogoUrl }) => {\r\n const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n const handleActionClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n return (\r\n <div \r\n className={`store-card ${isSelected ? 'active' : ''}`}\r\n onClick={onSelect}\r\n data-id={store.id}\r\n >\r\n {/* ردیف اول: نام، شهر و گزارش */}\r\n <div className=\"store-card-header\">\r\n <div className=\"store-info-main\">\r\n <h4 className=\"store-name\">{store.name}</h4>\r\n <div className=\"store-location-tag\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"></path><circle cx=\"12\" cy=\"10\" r=\"3\"></circle></svg>\r\n <span className=\"store-city\">{store.city}</span>\r\n </div>\r\n </div>\r\n <button className=\"report-btn\" onClick={handleActionClick}>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#6b7280\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"></path><line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\"></line></svg>\r\n <span>گزارش</span>\r\n </button>\r\n </div>\r\n\r\n {/* بخش عملکرد (اختیاری - اگر در دیتا بود) */}\r\n {store.performance && (\r\n <div className=\"store-performance\">\r\n عملکرد <span className=\"perf-value\">{store.performance}</span>\r\n </div>\r\n )}\r\n\r\n {/* بخش توضیحات همراه با لوگو */}\r\n <div className=\"store-desc-section\">\r\n {shopLogoUrl && (\r\n <img src={shopLogoUrl} alt=\"shop logo\" className=\"store-mini-logo\" />\r\n )}\r\n <p className=\"store-desc\">{store.desc}</p>\r\n </div>\r\n\r\n {/* ردیف آخر: قیمت و اطلاعات تماس */}\r\n <div className=\"store-card-footer\">\r\n <div className=\"price-container\">\r\n <span className=\"price-value\">{store.price}</span>\r\n <span className=\"price-unit\">تومان</span>\r\n </div>\r\n <div className=\"contact-trigger\">\r\n <span>اطلاعات تماس</span>\r\n <svg className={`arrow-icon ${isSelected ? 'open' : ''}`} width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\r\n </div>\r\n </div>\r\n\r\n {/* بخش دکمه‌های عملیاتی (عمودی) */}\r\n <div className=\"store-details-wrapper\">\r\n <div className=\"store-details-content\">\r\n <div className=\"action-buttons vertical\">\r\n {store.phone && (\r\n <a href={`tel:${store.phone}`} className=\"btn btn-call full-width\" onClick={handleActionClick}>\r\n <div className=\"btn-content\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"></path></svg>\r\n <span>تماس: {store.phone}</span>\r\n </div>\r\n </a>\r\n )}\r\n {store.whatsapp && (\r\n <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" rel=\"noreferrer\" className=\"btn btn-wa full-width\" onClick={handleActionClick}>\r\n <div className=\"btn-content\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"></path></svg>\r\n <span>ارسال پیام در واتساپ</span>\r\n </div>\r\n </a>\r\n )}\r\n <a href={googleMapUrl} target=\"_blank\" rel=\"noreferrer\" className=\"btn btn-route full-width\" onClick={handleActionClick}>\r\n <div className=\"btn-content\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"3 11 22 2 13 21 11 13 3 11\"></polygon></svg>\r\n <span>مسیریابی روی نقشه</span>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};"],"mappings":"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","names":["import_react","Supercluster","import_jsx_runtime","import_jsx_runtime"]}
package/dist/index.css CHANGED
@@ -24,208 +24,192 @@
24
24
  font-size: 18px;
25
25
  color: #111827;
26
26
  border-bottom: 1px solid #f3f4f6;
27
- background: #fafafa;
28
27
  }
29
28
  .sidebar-list {
30
29
  flex: 1;
31
30
  overflow-y: auto;
32
- scrollbar-width: thin;
33
- }
34
- .map-container {
35
- flex: 1;
36
- position: relative;
37
- background: #f3f4f6;
38
31
  }
39
32
  .store-card {
40
33
  padding: 16px;
41
34
  border-bottom: 1px solid #f3f4f6;
42
35
  cursor: pointer;
43
- transition: all 0.2s ease;
44
- border-right: 4px solid transparent;
45
- background: #fff;
46
- }
47
- .store-card:hover {
48
- background: #f9fafb;
36
+ transition: background 0.2s ease;
37
+ background: #ffffff;
49
38
  }
50
39
  .store-card.active {
51
- background: #eff6ff;
52
- border-right-color: #2563eb;
40
+ background: #f8fafc;
53
41
  }
54
42
  .store-card-header {
55
43
  display: flex;
56
44
  justify-content: space-between;
57
45
  align-items: flex-start;
58
- margin-bottom: 8px;
46
+ margin-bottom: 12px;
59
47
  }
60
48
  .store-name {
61
49
  margin: 0;
62
- font-size: 16px;
63
- font-weight: 700;
50
+ font-size: 15px;
51
+ font-weight: 800;
64
52
  color: #111827;
65
53
  }
54
+ .store-location-tag {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 4px;
58
+ color: #6b7280;
59
+ margin-top: 4px;
60
+ }
66
61
  .store-city {
67
- display: block;
68
62
  font-size: 12px;
63
+ font-weight: 600;
64
+ }
65
+ .report-btn {
66
+ display: flex;
67
+ align-items: center;
68
+ gap: 4px;
69
+ background: #f3f4f6;
70
+ border: none;
71
+ padding: 4px 10px;
72
+ border-radius: 8px;
69
73
  color: #6b7280;
70
- margin-top: 2px;
74
+ font-size: 11px;
75
+ font-weight: 700;
76
+ cursor: pointer;
71
77
  }
72
- .store-price {
73
- color: #059669;
74
- font-weight: 800;
75
- font-size: 14px;
76
- background: #ecfdf5;
77
- padding: 2px 8px;
78
- border-radius: 6px;
78
+ .store-performance {
79
+ font-size: 12px;
80
+ font-weight: 700;
81
+ margin-bottom: 10px;
82
+ }
83
+ .perf-value {
84
+ color: #10b981;
85
+ }
86
+ .store-desc-section {
87
+ display: flex;
88
+ align-items: flex-start;
89
+ gap: 10px;
90
+ margin-bottom: 16px;
91
+ }
92
+ .store-mini-logo {
93
+ width: 40px;
94
+ height: 40px;
95
+ border-radius: 8px;
96
+ object-fit: cover;
97
+ border: 1px solid #e5e7eb;
79
98
  }
80
99
  .store-desc {
100
+ flex: 1;
81
101
  font-size: 12px;
82
102
  color: #4b5563;
83
- line-height: 1.5;
84
- margin: 8px 0;
103
+ line-height: 1.6;
104
+ margin: 0;
85
105
  display: -webkit-box;
86
106
  -webkit-line-clamp: 2;
87
107
  -webkit-box-orient: vertical;
88
108
  overflow: hidden;
89
109
  }
90
- .store-details-wrapper {
91
- display: grid;
92
- grid-template-rows: 0fr;
93
- transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
94
- overflow: hidden;
95
- }
96
- .active .store-details-wrapper {
97
- grid-template-rows: 1fr;
98
- margin-top: 14px;
99
- }
100
- .store-details-content {
101
- min-height: 0;
102
- }
103
- .action-buttons {
110
+ .store-card-footer {
104
111
  display: flex;
105
- gap: 8px;
106
- padding-bottom: 4px;
112
+ justify-content: space-between;
113
+ align-items: center;
114
+ border-top: 1px dashed #e5e7eb;
115
+ padding-top: 12px;
107
116
  }
108
- .btn {
109
- flex: 1;
110
- padding: 10px 5px;
111
- border-radius: 8px;
112
- text-align: center;
113
- text-decoration: none;
114
- font-size: 12px;
115
- font-weight: 700;
116
- color: #fff;
117
- transition: transform 0.1s, opacity 0.2s;
117
+ .price-container {
118
+ display: flex;
119
+ align-items: baseline;
120
+ gap: 4px;
118
121
  }
119
- .btn:active {
120
- transform: scale(0.95);
122
+ .price-value {
123
+ font-size: 16px;
124
+ font-weight: 900;
125
+ color: #111827;
121
126
  }
122
- .btn-call {
123
- background: #2563eb;
127
+ .price-unit {
128
+ font-size: 11px;
129
+ color: #6b7280;
130
+ font-weight: 600;
124
131
  }
125
- .btn-wa {
126
- background: #10b981;
132
+ .contact-trigger {
133
+ display: flex;
134
+ align-items: center;
135
+ gap: 6px;
136
+ color: #1d4ed8;
137
+ font-size: 13px;
138
+ font-weight: 800;
127
139
  }
128
- .btn-route {
129
- background: #7c3aed;
140
+ .arrow-icon {
141
+ transition: transform 0.3s ease;
142
+ transform: rotate(180deg);
130
143
  }
131
- .neshan-marker-container {
132
- pointer-events: auto;
144
+ .arrow-icon.open {
145
+ transform: rotate(0deg);
133
146
  }
134
- .neshan-marker-body {
147
+ .action-buttons.vertical {
135
148
  display: flex;
136
149
  flex-direction: column;
137
- align-items: center;
138
- transform-origin: bottom center;
150
+ gap: 10px;
151
+ margin-top: 15px;
139
152
  }
140
- .neshan-marker-label {
141
- background: #2563eb;
142
- color: #ffffff !important;
143
- font-size: 12px;
144
- font-weight: 900;
145
- padding: 4px 12px;
146
- border-radius: 20px;
147
- margin-top: 6px;
148
- box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
149
- border: 2px solid #ffffff;
150
- white-space: nowrap;
151
- pointer-events: none;
153
+ .btn.full-width {
154
+ width: 100%;
155
+ padding: 12px;
156
+ border-radius: 12px;
157
+ text-decoration: none;
152
158
  }
153
- .neshan-cluster-marker {
159
+ .btn-content {
154
160
  display: flex;
155
161
  align-items: center;
156
- justify-content: center;
157
- background: #ffffff;
158
- border: 3px solid #2563eb;
159
- border-radius: 50%;
160
- width: 36px;
161
- height: 36px;
162
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
163
- cursor: pointer;
162
+ justify-content: space-between;
163
+ padding: 0 10px;
164
164
  }
165
- .neshan-cluster-marker:hover {
166
- border-color: #1d4ed8;
167
- box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
165
+ .map-container {
166
+ flex: 1;
167
+ position: relative;
168
+ background: #f3f4f6;
168
169
  }
169
- .neshan-cluster-count {
170
- color: #2563eb;
171
- font-weight: 900;
172
- font-size: 16px;
173
- pointer-events: none;
170
+ .store-details-wrapper {
171
+ display: grid;
172
+ grid-template-rows: 0fr;
173
+ transition: grid-template-rows 0.3s ease;
174
+ overflow: hidden;
174
175
  }
175
- .neshan-marker-selected .neshan-marker-body {
176
- animation: marker-bounce 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
177
- z-index: 100;
176
+ .active .store-details-wrapper {
177
+ grid-template-rows: 1fr;
178
+ }
179
+ .store-details-content {
180
+ min-height: 0;
178
181
  }
179
- @keyframes marker-bounce {
180
- from {
181
- transform: translateY(0) scale(1.1);
182
- }
183
- to {
184
- transform: translateY(-12px) scale(1.15);
185
- }
182
+ .btn-call {
183
+ background: #1d4ed8;
184
+ color: white;
185
+ }
186
+ .btn-wa {
187
+ background: #10b981;
188
+ color: white;
189
+ }
190
+ .btn-route {
191
+ background: #7c3aed;
192
+ color: white;
186
193
  }
187
194
  .is-mobile .mobile-slider {
188
195
  position: absolute;
189
- bottom: 24px;
196
+ bottom: 0;
190
197
  left: 0;
191
198
  right: 0;
192
199
  display: flex;
193
200
  gap: 12px;
194
- padding: 0 20px;
201
+ padding: 20px 20px 40px 20px;
195
202
  overflow-x: auto;
196
203
  scroll-snap-type: x mandatory;
197
- pointer-events: auto;
198
204
  z-index: 20;
199
205
  align-items: flex-end;
200
206
  }
201
- .is-mobile .mobile-slider::-webkit-scrollbar {
202
- display: none;
203
- }
204
207
  .is-mobile .store-card {
205
208
  min-width: 300px;
206
209
  max-width: 85vw;
207
- background: #ffffff;
208
- border-radius: 16px;
209
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
210
- pointer-events: auto;
210
+ border-radius: 20px;
211
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
211
212
  scroll-snap-align: center;
212
213
  border: none;
213
- height: auto;
214
- flex-shrink: 0;
215
- }
216
- .product-badge {
217
- position: absolute;
218
- top: 20px;
219
- right: 20px;
220
- background: rgba(255, 255, 255, 0.95);
221
- backdrop-filter: blur(4px);
222
- padding: 10px 18px;
223
- border-radius: 12px;
224
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
225
- font-weight: 800;
226
- font-size: 14px;
227
- color: #1f2937;
228
- z-index: 5;
229
- border: 1px solid rgba(0, 0, 0, 0.05);
230
214
  }
231
215
  /*# sourceMappingURL=index.css.map */