Fix Nuxt 3, add new examples

yandex-maps-unofficial · Nov 22, 2023 · 533c5d4 · 533c5d4
1 parent e5c13f0
commit 533c5d4
Show file tree

Hide file tree

Showing 16 changed files with 1,096 additions and 717 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,15 @@
 # Список изменений
 
-## [Unreleased]
+## [2.0.0-beta.8]
 
 ### Исправления ошибок
 - Исправлена работа реактивности циферок кластеров
 - Исправлен случайный фатальный краш при отрисовке кластеров
+- Исправлена ошибка, при которой библиотека иногда могла не работать в Nuxt 3
+
+### Документация
+
+- Завершена работа над секцией "Примеры". Добавлены последние примеры: Элементы управления и Хинты.
 
 ## [2.0.0-beta.7]
 

diff --git a/docs/examples/controls.md b/docs/examples/controls.md
@@ -0,0 +1,13 @@
+# Элементы управления
+
+<script lang="ts" setup>
+import MapComponent from 'examples/src/components/misc/MapControls.vue';
+</script>
+
+<map-component/>
+
+:::code-group
+<<< ../../packages/examples/examples/src/components/misc/MapControls.vue#html{html} [Template]
+
+<<< ../../packages/examples/examples/src/components/misc/MapControls.vue#setup{ts} [Setup]
+:::
diff --git a/docs/examples/hint.md b/docs/examples/hint.md
@@ -0,0 +1,13 @@
+# Хинт (Подсказки)
+
+<script lang="ts" setup>
+import MapComponent from 'examples/src/components/misc/MapHint.vue';
+</script>
+
+<map-component/>
+
+:::code-group
+<<< ../../packages/examples/examples/src/components/misc/MapHint.vue#html{html} [Template]
+
+<<< ../../packages/examples/examples/src/components/misc/MapHint.vue#setup{ts} [Setup]
+:::
diff --git a/docs/guide/about.md b/docs/guide/about.md
@@ -11,9 +11,11 @@ next:
 Данный проект создан на базе Yandex Maps 3.0, которые вышли в марте 2023 года.
 
 ## Текущий статус проекта
+- Состояние: стабильное, нуждается в тестировании
 - Набор компонентов: ✅
-- Секция документации "Компоненты": ❌ Не документировано, кроме `YandexMap`
-- Секция документации "Примеры": ⚒️ В работе
+- Секция документации "Примеры": ✅
+- Секция документации "Компоненты": ⚒️ В работе
+- Migration Guide: ❌
 
 ## Установка
 - [Vue 3 / Nuxt 3](/guide/vue3)

diff --git a/package.json b/package.json
@@ -24,14 +24,14 @@
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.23.3",
-        "@types/node": "^20.9.0",
-        "@typescript-eslint/eslint-plugin": "^6.11.0",
-        "@typescript-eslint/parser": "^6.11.0",
+        "@types/node": "^20.9.4",
+        "@typescript-eslint/eslint-plugin": "^6.12.0",
+        "@typescript-eslint/parser": "^6.12.0",
         "@vue/eslint-config-airbnb": "^7.0.0",
-        "eslint": "^8.53.0",
+        "eslint": "^8.54.0",
         "eslint-plugin-vue": "^9.18.1",
-        "typescript": "^5.2.2",
-        "vitepress": "^1.0.0-rc.26"
+        "typescript": "^5.3.2",
+        "vitepress": "^1.0.0-rc.29"
     },
     "workspaces": [
         "packages/*",

diff --git a/packages/examples/examples/package.json b/packages/examples/examples/package.json
@@ -13,13 +13,13 @@
     "vue-yandex-maps": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.9.0",
+    "@types/node": "^20.9.4",
     "@vitejs/plugin-vue": "^4.5.0",
     "@vue/tsconfig": "^0.4.0",
     "@yandex/ymaps3-types": "^0.0.19",
     "npm-run-all": "^4.1.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
     "vue": "^3.3.8",
     "vue-tsc": "^1.8.22"
   }

diff --git a/packages/examples/examples/src/components/misc/MapControls.vue b/packages/examples/examples/src/components/misc/MapControls.vue
@@ -0,0 +1,177 @@
+<template>
+  <common-wrapper>
+    <template
+      #default="{
+        coordinates: center, theme, zoom, width, height,
+      }"
+    >
+      <!-- #region html -->
+      <yandex-map
+        v-model="map"
+        :settings="{
+          location: {
+            center,
+            zoom,
+          },
+        }"
+        :width="width"
+        :height="height"
+      >
+        <yandex-map-default-scheme-layer :settings="{ theme }" />
+        <yandex-map-default-features-layer />
+        <yandex-map-controls :settings="{ position: 'right' }">
+          <yandex-map-zoom-control />
+        </yandex-map-controls>
+        <yandex-map-controls :settings="{ position: 'bottom' }">
+          <yandex-map-zoom-control />
+        </yandex-map-controls>
+        <yandex-map-controls :key="buttons" :settings="{ position: 'top' }">
+          <yandex-map-control-button :settings="{ onClick: shiftRight }">
+            {{ '<' }}
+          </yandex-map-control-button>
+          <component
+            :is="component.component"
+            v-for="(component, index) in buttons.slice(0, 4)"
+            :key="index"
+            :settings="'props' in component ? component.props : {}"
+          >
+            {{ isRef(component.content) ? component.content.value : component.content }}
+          </component>
+          <yandex-map-control-button :settings="{ onClick: shiftLeft }">
+            >
+          </yandex-map-control-button>
+        </yandex-map-controls>
+        <yandex-map-controls :settings="{ position: 'bottom left' }">
+          <yandex-map-open-maps-button />
+        </yandex-map-controls>
+        <yandex-map-controls :settings="{ position: 'left' }">
+          <yandex-map-geolocation-control />
+        </yandex-map-controls>
+        <yandex-map-controls :settings="{ position: 'top left' }">
+          <yandex-map-control-button :settings="{ onClick: updateCounter }">
+            Counter #{{ counter }}
+          </yandex-map-control-button>
+        </yandex-map-controls>
+        <yandex-map-controls :settings="{ position: 'top right' }">
+          <yandex-map-control-button>
+            <div style="color: #196dff; font-weight: bold">
+              Button with element
+            </div>
+          </yandex-map-control-button>
+        </yandex-map-controls>
+      </yandex-map>
+      <!-- #endregion html -->
+    </template>
+  </common-wrapper>
+</template>
+
+<script setup lang="ts">
+import CommonWrapper from '../CommonWrapper.vue';
+// #region setup
+import {
+  YandexMap,
+  YandexMapControlButton,
+  YandexMapControls,
+  YandexMapDefaultFeaturesLayer,
+  YandexMapDefaultSchemeLayer,
+  YandexMapGeolocationControl,
+  YandexMapOpenMapsButton,
+  YandexMapZoomControl,
+} from 'vue-yandex-maps';
+import {
+  computed, onBeforeUnmount, onMounted, ref, shallowRef, isRef,
+} from 'vue';
+import type { YMap } from '@yandex/ymaps3-types';
+
+const counter = ref(1);
+const timedCounter = ref(1);
+
+const map = shallowRef<YMap | null>(null);
+
+const buttons = shallowRef([
+  {
+    component: YandexMapControlButton,
+    content: 'first',
+    props: {
+      onClick: () => console.log('first'),
+    },
+  },
+  {
+    component: YandexMapControlButton,
+    content: 'foo #1',
+    props: {
+      color: '#196dff',
+      background: '#f3f6fc',
+      onClick: () => console.log('foo #1'),
+    },
+  },
+  {
+    component: YandexMapControlButton,
+    content: 'foo #2',
+    props: {
+      color: '#196dff',
+      background: '#f3f6fc',
+      onClick: () => console.log('foo #2'),
+    },
+  },
+  {
+    component: YandexMapControlButton,
+    content: 'foo #3',
+    props: {
+      color: '#196dff',
+      background: '#f3f6fc',
+      onClick: () => console.log('foo #3'),
+    },
+  },
+  {
+    component: YandexMapControlButton,
+    content: 'second',
+    props: {
+      onClick: () => console.log('second'),
+    },
+  },
+  {
+    component: YandexMapControlButton,
+    content: 'bar #1',
+    props: {
+      color: '#fff',
+      background: '#196dff',
+      onClick: () => console.log('bar #1'),
+    },
+  },
+  {
+    component: YandexMapControlButton,
+    content: 'bar #2',
+    props: {
+      color: '#fff',
+      background: '#196dff',
+      onClick: () => console.log('bar #2'),
+    },
+  },
+  {
+    component: YandexMapControlButton,
+    content: computed(() => `Control! ${timedCounter.value}`),
+  },
+]);
+
+const shiftLeft = () => {
+  buttons.value = [...buttons.value.slice(1), buttons.value[0]];
+};
+const shiftRight = () => {
+  buttons.value = [...buttons.value.slice(-1), ...buttons.value.slice(0, -1)];
+};
+
+const updateCounter = () => {
+  counter.value++;
+};
+
+onMounted(() => {
+  const interval = setInterval(() => {
+    timedCounter.value++;
+    if (timedCounter.value > 99) timedCounter.value = 0;
+  }, 1000);
+
+  onBeforeUnmount(() => clearInterval(interval));
+});
+// #endregion setup
+</script>
diff --git a/packages/examples/examples/src/components/misc/MapHint.vue b/packages/examples/examples/src/components/misc/MapHint.vue
@@ -0,0 +1,122 @@
+<template>
+  <common-wrapper>
+    <template
+      #default="{
+        theme, width, height,
+      }"
+    >
+      <!-- #region html -->
+      <yandex-map
+        :settings="{
+          location: LOCATION,
+        }"
+        :width="width"
+        :height="height"
+      >
+        <yandex-map-default-scheme-layer :settings="{ theme }" />
+        <yandex-map-default-features-layer />
+        <yandex-map-controls :settings="{ position: 'right' }">
+          <yandex-map-zoom-control />
+        </yandex-map-controls>
+
+        <yandex-map-collection>
+          <yandex-map-marker v-for="(feature, index) in POINTS" :key="index" :settings="{ coordinates: feature.coordinates, color: feature.color, properties: { hint: feature.hint } }">
+            <div :style="{ transform: 'translate(-15px -33px)', position: 'absolute' }" v-html="markerSvg(feature.color)" />
+          </yandex-map-marker>
+        </yandex-map-collection>
+        <yandex-map-collection>
+          <yandex-map-feature v-for="(feature, index) in LINES" :key="index" :settings="{ geometry: feature.geometry, style: feature.style, properties: { hint: feature.hint } }" />
+        </yandex-map-collection>
+        <yandex-map-collection>
+          <yandex-map-feature v-for="(feature, index) in TRIANGLES" :key="index" :settings="{ geometry: feature.geometry, style: feature.style, properties: { hint: feature.hint } }" />
+        </yandex-map-collection>
+
+        <yandex-map-hint hint-property="hint">
+          <template #default="{ content }">
+            <div
+              class="hint"
+              :style="{
+                position: 'absolute',
+                padding: '4px',
+                background: 'white',
+                border: '1px solid black',
+                whiteSpace: 'nowrap',
+                opacity: '0.7',
+                transform: 'translate(8px, -50%)',
+              }"
+            >
+              {{ content }}
+            </div>
+          </template>
+        </yandex-map-hint>
+      </yandex-map>
+      <!-- #endregion html -->
+    </template>
+  </common-wrapper>
+</template>
+
+<script setup lang="ts">
+import CommonWrapper from '../CommonWrapper.vue';
+// #region setup
+import {
+  YandexMap, YandexMapControls, YandexMapDefaultSchemeLayer, YandexMapZoomControl, YandexMapDefaultFeaturesLayer, YandexMapHint, YandexMapCollection, YandexMapFeature, YandexMapMarker,
+} from 'vue-yandex-maps';
+
+const BOUNDS = [
+  [36.76340182421873, 56.50491493486398],
+  [38.48276217578123, 54.98530386445313],
+];
+const LOCATION = { bounds: BOUNDS };
+
+const seed = (s: number) => () => {
+  s = Math.sin(s) * 10000;
+  return s - Math.floor(s);
+};
+
+const rnd = seed(10000); // () => Math.random()
+const color = () => `rgb(${rnd() * 256}, ${rnd() * 256}, ${rnd() * 256})`;
+const point = () => [
+  BOUNDS[0][0] + (BOUNDS[1][0] - BOUNDS[0][0]) * rnd(),
+  BOUNDS[1][1] + (BOUNDS[0][1] - BOUNDS[1][1]) * rnd(),
+];
+const pointsNearby = (coords: number[], n: number) => Array.from({ length: n }, () => [coords[0] + (rnd() - 0.5) * 0.5, coords[1] + (rnd() - 0.5) * 0.5]);
+const stroke = () => [{ color: color(), width: Math.floor(2 + rnd() * 6) }];
+
+const POINTS = Array.from({ length: 40 }, (_, i) => ({
+  color: color(),
+  coordinates: point(),
+  hint: `marker #${i}`,
+}));
+const LINES = Array.from({ length: 10 }, (_, i) => ({
+  geometry: { type: 'LineString', coordinates: [point(), point()] },
+  style: { stroke: stroke() },
+  hint: `line #${i}`,
+}));
+const TRIANGLES = Array.from({ length: 10 }, (_, i) => ({
+  geometry: { type: 'Polygon', coordinates: [pointsNearby(point(), 3)] },
+  style: { stroke: stroke(), fill: color() },
+  hint: `triangle #${i}`,
+}));
+
+const markerSvg = (fill: string) => `
+<svg width="29" height="34" viewBox="0 0 58 67" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter)">
+        <path d="M34.342 49.376c-3.076.93-4.687 2.979-4.831 6.147a.5.5 0 0 1-.5.477h-.022a.5.5 0 0 1-.5-.477c-.144-3.168-1.755-5.217-4.831-6.147C13.53 46.968 6 37.863 6 27 6 14.297 16.297 4 29 4s23 10.297 23 23c0 10.863-7.531 19.968-17.658 22.376z" fill="${fill}" />
+    </g>
+    <path d="M29 67a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="#fff" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29 65a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="${fill}" />
+    <defs>
+        <filter id="filter" x="0" y="0" width="58" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="2" />
+            <feGaussianBlur stdDeviation="3" />
+            <feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.396078 0 0 0 0 0.380392 0 0 0 0.2 0" />
+            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_9595_81428" />
+            <feBlend in="SourceGraphic" in2="effect1_dropShadow_9595_81428" result="shape" />
+        </filter>
+    </defs>
+</svg>
+`;
+// #endregion setup
+</script>