renusify 2.1.5 → 2.1.8

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

@@ -0,0 +1,87 @@
+<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>
+        این قابلیت را دارید مسیری را select کنید .
+      </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: "وقتی روی نقشه کلیک می کنید value را بر می گرداند .  ",
+        },
+        {
+          prop: "height",
+          type: "String",
+          default: "500px",
+          description: "ارتفاع",
+        },
+        {
+          prop: "zoom",
+          type: "Number",
+          default: "13",
+          description: "میزان بزرگنمایی",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/menu/en.vue

@@ -0,0 +1,160 @@
+<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-menu
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        The
+        <r-btn readonly size="small"> r-menu</r-btn>
+        component shows a menu
+        at the position of the element used to activate it.
+      </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,
+    "label": "select",
+    "icon": null,
+    "value": "value",
+    "justValue": false,
+    "reverse": false,
+    "overlay": false,
+    "items": [
+            { name: `home`,value:1 },
+            { name: `blog`,value:2 },
+            { name: `contact`,value:3 },
+            { name: `about`,value:4 },
+          ]
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-menu v-model="modelValue" :label="modelValue?modelValue.name:label" :icon="icon" :value="value" :just-Value="justValue" :reverse="reverse" :overlay="overlay" :items="items" @update:model-Value="log(`update:modelValue`,$event)" ></r-menu>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <r-card class="pa-4" outlined>
+        <r-menu
+            v-model="valid"
+            :items="[
+            { name: `home`, value: 1 },
+            { name: `blog`, value: 2 },
+            { name: `contact`, value: 3 },
+            { name: `about`, value: 4 },
+          ]"
+            label="select"
+        >
+          <template v-slot="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </r-menu>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  value:null
+  }
+}"
+        template='
+         <r-card class="pa-4" outlined>
+        <r-menu
+        label="select"
+          v-model="value"
+          :items="[
+            { name: `home`,value:1 },
+            { name: `blog`,value:2 },
+            { name: `contact`,value:3 },
+            { name: `about`,value:4 },
+          ]"
+        >
+          <template v-slot="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </r-menu>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "menu",
+  data() {
+    return {
+      props: [
+        {
+          prop: "modelValue",
+          type: "String,Number,Object",
+          default: "undefined",
+          description:
+              "Some value should be entered to activate the component.",
+        },
+        {
+          prop: "label",
+          type: "String",
+          default: "null",
+          description: "Menu labels",
+        },
+        {
+          prop: "icon",
+          type: "String",
+          default: "undefined",
+          description: "Menu icon.",
+        },
+        {
+          prop: "value",
+          type: "String",
+          default: "value",
+          description: "Value",
+        },
+        {
+          prop: "justValue",
+          type: "Boolean",
+          default: "null",
+          description: "Just Value",
+        },
+        {
+          prop: "reverse",
+          type: "Boolean",
+          default: "null",
+          description:
+              "When you flip me left or right, the icons and text may get inverted.",
+        },
+        {
+          prop: "overlay",
+          type: "Boolean",
+          default: "null",
+          description: "Over Lay",
+        },
+        {
+          prop: "items",
+          type: "Array",
+          default: "null",
+          description: "Items Menu",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,158 @@
+<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-menu
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        کامپوننتی
+        <r-btn readonly size="small"> r-menu</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,
+    "label": "select",
+    "icon": null,
+    "value": "value",
+    "justValue": false,
+    "reverse": false,
+    "overlay": false,
+    "items": [
+            { name: `home`,value:1 },
+            { name: `blog`,value:2 },
+            { name: `contact`,value:3 },
+            { name: `about`,value:4 },
+          ]
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-menu v-model="modelValue" :label="modelValue?modelValue.name:label" :icon="icon" :value="value" :just-Value="justValue" :reverse="reverse" :overlay="overlay" :items="items" @update:model-Value="log(`update:modelValue`,$event)" ></r-menu>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <r-card class="pa-4" outlined>
+        <r-menu
+            v-model="valid"
+            :items="[
+            { name: `home`, value: 1 },
+            { name: `blog`, value: 2 },
+            { name: `contact`, value: 3 },
+            { name: `about`, value: 4 },
+          ]"
+            label="select"
+        >
+          <template v-slot="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </r-menu>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  value:null
+  }
+}"
+        template='
+         <r-card class="pa-4" outlined>
+        <r-menu
+        label="select"
+          v-model="value"
+          :items="[
+            { name: `home`,value:1 },
+            { name: `blog`,value:2 },
+            { name: `contact`,value:3 },
+            { name: `about`,value:4 },
+          ]"
+        >
+          <template v-slot="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </r-menu>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "menu",
+  data() {
+    return {
+      valid: null,
+      props: [
+        {
+          prop: "modelValue",
+          type: "String,Number,Object",
+          default: "undefined",
+          description: "باید فعال کردن کامپوننت باید مقداری وارد شود . ",
+        },
+        {
+          prop: "label",
+          type: "String",
+          default: "null",
+          description: "label منو",
+        },
+        {
+          prop: "icon",
+          type: "String",
+          default: "undefined",
+          description: "آیکون منو",
+        },
+        {
+          prop: "value",
+          type: "String",
+          default: "value",
+          description: "مقدار",
+        },
+        {
+          prop: "justValue",
+          type: "Boolean",
+          default: "null",
+          description: "مقدار خاصی",
+        },
+        {
+          prop: "reverse",
+          type: "Boolean",
+          default: "null",
+          description:
+              "وقتی منو را چپ و راست می کنید ممکنه آیکون و نوشته معکوس شوند ",
+        },
+        {
+          prop: "overlay",
+          type: "Boolean",
+          default: "null",
+          description: "رویهم قرار بگیرند ",
+        },
+        {
+          prop: "items",
+          type: "Array",
+          default: "null",
+          description: "آیتم ها منو",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/message/en.vue

@@ -0,0 +1,135 @@
+<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-message
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        The component
+        <r-btn readonly size="small"> r-message</r-btn>
+        is commonly used for forms.
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "items": {
+      "name":[{"text":"message one",color:"info"},{"text":"message two",color:"error"},{"text":"message three",color:"success"}],
+      "username":[{"text":"message one",color:"info"},{"text":"message two",color:"warning"},{"text":"message three",color:"success"}],
+      },
+    "type": "error"
+}
+}'
+        template='<r-message :items="items" :type="type" >
+	<template v-slot="{item,k}">
+		<div class="mb-2 br-md">
+			<r-container>
+				<r-row>
+					<r-col class="col-auto"> {{ k }}:
+					</r-col>
+					<r-col>
+						<div v-for="(msg,k) in item" :key="k" class="br-sm pa-3 my-2" :class="`color-${msg.color}`"> {{ msg.text }}
+						</div>
+					</r-col>
+				</r-row>
+			</r-container>
+		</div>
+	</template>
+</r-message>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <r-message
+          :items="{ name: ['oops, something was not right'] }"
+      ></r-message>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='<r-message :items="{ name: [`oops, something was not right`]}"></r-message>'
+    ></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>Type</span>
+    </h1>
+    <section class="pt-6">
+      <r-card class="pa-4" outlined>
+        <r-message :items="{ name: [`oops, something was not right`] }">
+        </r-message>
+        <r-message
+            :items="{ name: [`oops, something was not right`] }"
+            type="success"
+        >
+        </r-message>
+        <r-message
+            :items="{ name: [`oops, something was not right`] }"
+            type="warning"
+        >
+        </r-message>
+        <r-message
+            :items="{ name: [`oops, something was not right`] }"
+            type="info"
+        >
+        </r-message>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+        <r-card class="pa-4" outlined>
+        <r-message :items="{ name: [`oops, something was not right`]}"></r-message>
+        <r-message
+          type="success"
+          :items="{ name: [`oops, something was not right`]}"
+        ></r-message>
+        <r-message
+          type="warning"
+          :items="{ name: [`oops, something was not right`]}"
+        ></r-message>
+        <r-message
+          type="info"
+          :items="{ name: [`oops, something was not right`]}"
+        ></r-message>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "message",
+  data() {
+    return {
+      items: [
+        {
+          prop: "items",
+          type: "Array,Object",
+          default: "undefined",
+          description: "Items",
+        },
+        {
+          prop: "type",
+          type: "String",
+          default: "error",
+          description: "The type of should be a string.",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,134 @@
+<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-message
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        کامپوننت
+        <r-btn readonly size="small"> r-message</r-btn>
+        برای فرم بیشتر بکار می رود
+      </p>
+    </div>
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "items": {
+      "name":[{"text":"message one",color:"info"},{"text":"message two",color:"error"},{"text":"message three",color:"success"}],
+      "username":[{"text":"message one",color:"info"},{"text":"message two",color:"warning"},{"text":"message three",color:"success"}],
+      },
+    "type": "error"
+}
+}'
+        template='<r-message :items="items" :type="type" >
+	<template v-slot="{item,k}">
+		<div class="mb-2 br-md">
+			<r-container>
+				<r-row>
+					<r-col class="col-auto"> {{ k }}:
+					</r-col>
+					<r-col>
+						<div v-for="(msg,k) in item" :key="k" class="br-sm pa-3 my-2" :class="`color-${msg.color}`"> {{ msg.text }}
+						</div>
+					</r-col>
+				</r-row>
+			</r-container>
+		</div>
+	</template>
+</r-message>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <r-message
+          :items="{ name: ['oops, something was not right'] }"
+      ></r-message>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='<r-message :items="{ name: [`oops, something was not right`]}"></r-message>'
+    ></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>Type</span>
+    </h1>
+    <section class="pt-6">
+      <r-card class="pa-4" outlined>
+        <r-message :items="{ name: [`oops, something was not right`] }">
+        </r-message>
+        <r-message
+            :items="{ name: [`oops, something was not right`] }"
+            type="success"
+        >
+        </r-message>
+        <r-message
+            :items="{ name: [`oops, something was not right`] }"
+            type="warning"
+        >
+        </r-message>
+        <r-message
+            :items="{ name: [`oops, something was not right`] }"
+            type="info"
+        >
+        </r-message>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+        <r-card class="pa-4" outlined>
+        <r-message :items="{ name: [`oops, something was not right`]}"></r-message>
+        <r-message
+          type="success"
+          :items="{ name: [`oops, something was not right`]}"
+        ></r-message>
+        <r-message
+          type="warning"
+          :items="{ name: [`oops, something was not right`]}"
+        ></r-message>
+        <r-message
+          type="info"
+          :items="{ name: [`oops, something was not right`]}"
+        ></r-message>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "message",
+  data() {
+    return {
+      items: [
+        {
+          prop: "items",
+          type: "Array,Object",
+          default: "undefined",
+          description: "آیتم مدنظر ",
+        },
+        {
+          prop: "type",
+          type: "String",
+          default: "error",
+          description: "نوع تایپ باید  رشته ای باشد .   ",
+        },
+      ],
+    };
+  },
+};
+</script>