renusify 2.1.7 → 2.1.8

package/docs/src/views/index/v1/component/map/fa.vue

@@ -0,0 +1,256 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light color-white ps-4 pb-1 pt-1 br-lg">
+        r-map
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        با استفاده از نقشه‌های تصویری
+        <r-btn readonly size="small"> r-map</r-btn>
+        شما می توانید محل‌های کلیک‌پذیر را بر روی یک تصویر ایجاد کنید.
+      </p>
+    </div>
+    <table-props :items="props"></table-props>
+    <table-events :items="events" class="mt-5"></table-events>
+  </section>
+  <section class="mt-10">
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "modelValue": null,
+    "center": [35.69940749291485, 51.33705139160157],
+    "height": "500px",
+    "zoom": 13,
+    "searchBox": true,
+    "zoomControl": true,
+    "layerControl": true,
+    "meLocation": true,
+    "disableMove": false,
+    "darkMode": false,
+    "markers": []
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-map v-model="modelValue" :height="height" :zoom="zoom" :center="center" :markers="markers" :search-Box="searchBox" :zoom-Control="zoomControl" :layer-Control="layerControl" :me-Location="meLocation" :disable-Move="disableMove" :dark-Mode="darkMode" @update:model-Value="log(`update:model-value`,$event)" @leaflet="log(`leaflet`,$event)" @map="log(`map`,$event)" ></r-map>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <r-map></r-map>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template="         <r-map> </r-map>"
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+      PROP / <span>Search Box</span>
+    </h1>
+    <section class="pt-6">
+      <r-map searchBox></r-map>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template="    <r-map searchBox> </r-map>"
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+      PROP / <span>Markers</span>
+    </h1>
+    <section class="pt-6">
+      <r-map :markers="[{ loc: [35.69940749291485, 51.33705139160157] }]">
+      </r-map>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='  <r-map :markers="[{ loc: [35.69940749291485, 51.33705139160157] }]">
+      </r-map>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+      PROP / <span>Popup</span>
+    </h1>
+    <section class="pt-6">
+      <r-map
+          :markers="[
+          {
+            loc: [35.69940749291485, 51.33705139160157],
+            popup: 'mark',
+            open_popup: true,
+          },
+        ]"
+      >
+      </r-map>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='  <r-map
+        :markers="[
+          {
+            loc: [35.69940749291485, 51.33705139160157],
+            popup: `mark`,
+            open_popup: true,
+          },
+        ]"
+      >
+      </r-map> '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+      PROP / <span>Tooltip</span>
+    </h1>
+    <section class="pt-6">
+      <r-map
+          :markers="[
+          {
+            loc: [35.69940749291485, 51.33705139160157],
+            tooltip: 'tooltip',
+          },
+        ]"
+      >
+      </r-map>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='   <r-map
+        :markers="[
+          {
+            loc: [35.69940749291485, 51.33705139160157],
+            tooltip: `tooltip`,
+          },
+        ]"
+      >
+      </r-map> '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "fmap",
+  data() {
+    return {
+      props: [
+        {
+          prop: "modelValue",
+          type: "Array",
+          default: "null",
+          description: "وقتی روی نقشه کلیک می کنید value را بر می گرداند . ",
+        },
+        {
+          prop: "height",
+          type: "String",
+          default: "500px",
+          description: "ارتفاع",
+        },
+        {
+          prop: "zoom",
+          type: "Number",
+          default: "13",
+          description: "میزان زوم ",
+        },
+        {
+          prop: "center",
+          type: "Array",
+          default: "[35.69940749291485, 51.33705139160157]",
+          description: "در مرکز قرار گیرد ",
+        },
+        {
+          prop: "markers",
+          type: "Array",
+          default: "[]",
+          description: "نشان گذاری کردن ",
+        },
+        {
+          prop: "searchBox",
+          type: "Boolean",
+          default: "null",
+          description: "دسترسی سرچ کردن ",
+        },
+        {
+          prop: "zoomControl",
+          type: "Boolean",
+          default: "true",
+          description: "کنترل زوم",
+        },
+        {
+          prop: "layerControl",
+          type: "Boolean",
+          default: "true",
+          description:
+              "Layer Control می‌توان بصورت دقیق لایه‌هایی که در یک نقشه ایجاد شده اند را مدیریت و کنترل کرد.",
+        },
+        {
+          prop: "meLocation",
+          type: "Boolean",
+          default: "true",
+          description: "لوکیشن فعلی شما",
+        },
+        {
+          prop: "disableMove",
+          type: "Boolean",
+          default: "false",
+          description: "غیرفعال کردن حرکت ",
+        },
+        {
+          prop: "darkMode",
+          type: "Boolean",
+          default: "null",
+          description: "تم تاریک",
+        },
+      ],
+      events: [
+        {event: "update:modelValue", description: ""},
+        {event: "leaflet", description: ""},
+        {event: "map", description: ""},
+      ],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/map/map_route/en.vue

@@ -0,0 +1,176 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light color-white ps-4 pb-1 pt-1 br-lg">
+        r-map-route
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-map-route</r-btn>
+        This is a feature used in Google Maps and others, allowing users to
+        easily understand the route they need to take to reach their
+        destination.
+      </p>
+    </div>
+
+    <table-props :items="props"></table-props>
+    <table-events :items="events" class="mt-5"></table-events>
+  </section>
+  <section class="mt-10">
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "modelValue": null,
+    "by": "car",
+    "height": "500px",
+    "color": ["blue"],
+    "marginTime": 1,
+    "maxPoints": 3,
+    "darkMode": false,
+    "editable": true
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-map-route v-model="modelValue" :by="by" :height="height" :margin-Time="marginTime" :color="color" :max-Points="maxPoints" :dark-Mode="darkMode" :editable="editable" @update:model-Value="log(`update:modelValue`,$event)" ></r-map-route>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <r-map-route
+          :model-value="{
+          points: {
+            ylppaqdg59ly: [35.69940749291485, 51.33705139160157],
+            plppaqqivnmt: [35.7021955324165, 51.32731148468186],
+            hlppaqw9xcqm: [35.69407509585856, 51.324142981742796],
+          },
+          summary: {
+            name: 'میدان آزادی, فکوری, فکوری, کنارگذر لشکری',
+            time: 614.7,
+            distance: 4444.8,
+          },
+          waypoints: [
+            { distance: 78.998527071, name: 'میدان آزادی' },
+            { distance: 1.888385153, name: 'فکوری, فکوری' },
+            { distance: 17.683733013, name: 'کنارگذر لشکری' },
+          ],
+        }"
+      >
+      </r-map-route>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  value:{
+          points: {
+            ylppaqdg59ly: [35.69940749291485, 51.33705139160157],
+            plppaqqivnmt: [35.7021955324165, 51.32731148468186],
+            hlppaqw9xcqm: [35.69407509585856, 51.324142981742796],
+          },
+          summary: {
+            name: 'میدان آزادی, فکوری, فکوری, کنارگذر لشکری',
+            time: 614.7,
+            distance: 4444.8,
+          },
+          waypoints: [
+            { distance: 78.998527071, name: 'میدان آزادی' },
+            { distance: 1.888385153, name: 'فکوری, فکوری' },
+            { distance: 17.683733013, name: 'کنارگذر لشکری' },
+          ],
+        }
+ }
+}"
+        template='<r-map-route v-model="value"> </r-map-route>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+      PROP / <span>Editable</span>
+    </h1>
+    <section class="pt-6">
+      <r-map-route v-model="valid" editable></r-map-route>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  value:null
+ }
+}"
+        template='<r-map-route v-model="value" editable> </r-map-route>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "map_route",
+  data() {
+    return {
+      props: [
+        {
+          prop: "modelValue",
+          type: "Object",
+          default: "null",
+          description: "When you click on the map, it returns the value.",
+        },
+        {
+          prop: "by",
+          type: "String",
+          default: "car",
+          description: "Identify the tool",
+        },
+        {
+          prop: "height",
+          type: "String",
+          default: "500px",
+          description: "Height",
+        },
+        {
+          prop: "marginTime",
+          type: "Number",
+          default: "1",
+          description: "Margin Time",
+        },
+        {
+          prop: "color",
+          type: "Array",
+          default: "[]",
+          description: "Color to mark the path.",
+        },
+        {
+          prop: "maxPoints",
+          type: "Number",
+          default: "3",
+          description: "Max Points",
+        },
+        {
+          prop: "darkMode",
+          type: "Boolean",
+          default: "null",
+          description: "Dark Mode",
+        },
+        {
+          prop: "editable",
+          type: "Boolean",
+          default: "null",
+          description: "Edit Able",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/map/map_route/fa.vue

@@ -0,0 +1,177 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light color-white ps-4 pb-1 pt-1 br-lg">
+        r-map-route
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        این
+        <r-btn readonly size="small"> r-map-route</r-btn>
+        قابلیتی است که در
+        آن نقشه‌های گوگل و غیره استفاده می‌شود تا کاربران به راحتی درک کنند که
+        چه مسیری برای رسیدن به مقصد خود باید طی کنند.
+      </p>
+    </div>
+    <table-props :items="props"></table-props>
+    <table-events :items="events" class="mt-5"></table-events>
+  </section>
+  <section class="mt-10">
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "modelValue": null,
+    "by": "car",
+    "height": "500px",
+    "color": ["blue"],
+    "marginTime": 1,
+    "maxPoints": 3,
+    "darkMode": false,
+    "editable": true
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-map-route v-model="modelValue" :by="by" :height="height" :margin-Time="marginTime" :color="color" :max-Points="maxPoints" :dark-Mode="darkMode" :editable="editable" @update:model-Value="log(`update:modelValue`,$event)" ></r-map-route>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <r-map-route
+          :model-value="{
+          points: {
+            ylppaqdg59ly: [35.69940749291485, 51.33705139160157],
+            plppaqqivnmt: [35.7021955324165, 51.32731148468186],
+            hlppaqw9xcqm: [35.69407509585856, 51.324142981742796],
+          },
+          summary: {
+            name: 'میدان آزادی, فکوری, فکوری, کنارگذر لشکری',
+            time: 614.7,
+            distance: 4444.8,
+          },
+          waypoints: [
+            { distance: 78.998527071, name: 'میدان آزادی' },
+            { distance: 1.888385153, name: 'فکوری, فکوری' },
+            { distance: 17.683733013, name: 'کنارگذر لشکری' },
+          ],
+        }"
+      >
+      </r-map-route>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  value:{
+          points: {
+            ylppaqdg59ly: [35.69940749291485, 51.33705139160157],
+            plppaqqivnmt: [35.7021955324165, 51.32731148468186],
+            hlppaqw9xcqm: [35.69407509585856, 51.324142981742796],
+          },
+          summary: {
+            name: 'میدان آزادی, فکوری, فکوری, کنارگذر لشکری',
+            time: 614.7,
+            distance: 4444.8,
+          },
+          waypoints: [
+            { distance: 78.998527071, name: 'میدان آزادی' },
+            { distance: 1.888385153, name: 'فکوری, فکوری' },
+            { distance: 17.683733013, name: 'کنارگذر لشکری' },
+          ],
+        }
+ }
+}"
+        template='<r-map-route v-model="value"> </r-map-route>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+      PROP / <span>Editable</span>
+    </h1>
+    <section class="pt-6">
+      <r-map-route v-model="valid" editable></r-map-route>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  value:null
+ }
+}"
+        template='<r-map-route v-model="value" editable> </r-map-route>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "map_route",
+  data() {
+    return {
+      valid: null,
+      props: [
+        {
+          prop: "modelValue",
+          type: "Object",
+          default: "null",
+          description: "وقتی روی نقشه کلیک می کنید value را بر می گرداند .  ",
+        },
+        {
+          prop: "by",
+          type: "String",
+          default: "car",
+          description: "مشخص کردن وسیله ",
+        },
+        {
+          prop: "height",
+          type: "String",
+          default: "500px",
+          description: "ارتفاع",
+        },
+        {
+          prop: "marginTime",
+          type: "Number",
+          default: "1",
+          description: "مدت زمانی ",
+        },
+        {
+          prop: "color",
+          type: "Array",
+          default: "[]",
+          description: "رنگ برای مارک کردن مسیر . ",
+        },
+        {
+          prop: "maxPoints",
+          type: "Number",
+          default: "3",
+          description: "پایه‌های بیشینه",
+        },
+        {
+          prop: "darkMode",
+          type: "Boolean",
+          default: "null",
+          description: "تم تاریک",
+        },
+        {
+          prop: "editable",
+          type: "Boolean",
+          default: "null",
+          description: "ویرایش ",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/map/map_select/en.vue

@@ -0,0 +1,85 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light color-white ps-4 pb-1 pt-1 br-lg">
+        r-map-select
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-map-select</r-btn>
+        Do you have the ability to select a route
+      </p>
+    </div>
+    <table-props :items="props"></table-props>
+    <table-events :items="events" class="mt-5"></table-events>
+  </section>
+  <section class="mt-10">
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "modelValue": null,
+    "height": "500px",
+    "zoom": 13
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-map-select v-model="modelValue" :height="height" :zoom="zoom" @update:model-Value="log(`update:modelValue`,$event)" ></r-map-select>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <div>{{ valid }}</div>
+      <r-map-select v-model="valid"></r-map-select>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+  return {
+    value:null
+  }
+}"
+        template='<div>{{ value }}</div>
+      <r-map-select v-model="value" :zoom=15></r-map-select>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "map_select",
+  data() {
+    return {
+      props: [
+        {
+          prop: "modelValue",
+          type: "Array",
+          default: "null",
+          description: "When you click on the map, it returns the value.",
+        },
+        {
+          prop: "height",
+          type: "String",
+          default: "500px",
+          description: "Height",
+        },
+        {
+          prop: "zoom",
+          type: "Number",
+          default: "13",
+          description: "Zoom rate",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>