renusify 2.1.7 → 2.1.8

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

@@ -0,0 +1,213 @@
+<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-tree
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        وقتی تعداد زیادی از داده‌های تو در تو وجود دارد، اجزای
+        <r-btn readonly size="small"> r-tree</r-btn>
+        بسیار کاربردی هستند.
+      </p>
+    </div>
+    <table-props :items="props"></table-props>
+    <table-events :items="events" class="mt-5"></table-events>
+  </section>
+  <section class="mt-10">
+    <r-tree v-model="modelValue" style="height: 600px">
+      <template v-slot="{nodeKey,item}">
+        <r-card class="pa-5 title-1 mx-1">{{ nodeKey }}:{{ item.name }}</r-card>
+      </template>
+    </r-tree>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+	return {
+		modelValue: {
+			"0": {
+				"name": "smko",
+				"childs": {
+					"1": {
+						"name": "ali",
+						"childs": {
+							"3": {
+								"name": "taher",
+								"childs": {
+									"4": {
+										"name": "smko",
+										"childs": {
+											"6": {
+												"name": "smko",
+												"childs": {
+													"7": {
+														"name": "smko",
+														"childs": {},
+													},
+													"8": {
+														"name": "smko",
+														"childs": {},
+													}
+												},
+											}
+										},
+									},
+									"5": {
+										"name": "smko",
+										"childs": {},
+									}
+								},
+							}
+						},
+					},
+					"2": {
+						"name": "mohammad",
+						"childs": {},
+					}
+				},
+			}
+		},
+		link: null,
+		searchLink: null,
+		gen: "0",
+		selected: null,
+		rotate: false,
+		expand: false,
+		childsName: "childs",
+		openAll: false,
+		headers: {}
+	}
+},
+methods:{
+	log(name,e){
+		console.log(name,e)
+	}
+}
+'
+        template='<r-tree style="height:600px" v-model="modelValue" :link="link" :searchLink="searchLink" :gen="gen" :selected="selected" :rotate="rotate" :childsName="childsName" :openAll="openAll" :headers="headers" @update:model-Value="log(`update:modelValue`,$event)" @select-node="log(`select-node`,$event)">
+	<template v-slot="{nodeKey,item}">
+        <r-card class="pa-5 title-1 mx-1">{{nodeKey}}:{{item.name}}</r-card>
+      </template>
+</r-tree>'
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+
+export default {
+  name: "tree",
+  data() {
+    return {
+      modelValue: {
+        0: {
+          name: "smko",
+          childs: {
+            1: {
+              name: "ali",
+              childs: {
+                3: {
+                  name: "taher",
+                  childs: {
+                    4: {
+                      name: "smko",
+                      childs: {
+                        6: {
+                          name: "smko",
+                          childs: {
+                            7: {
+                              name: "smko",
+
+                              childs: {},
+                            },
+                            8: {
+                              name: "smko",
+
+                              childs: {},
+                            },
+                          },
+                        },
+                      },
+                    },
+                    5: {
+                      name: "smko",
+
+                      childs: {},
+                    },
+                  },
+                },
+              },
+            },
+            2: {
+              name: "mohammad",
+
+              childs: {},
+            },
+          },
+        },
+      },
+      props: [
+        {
+          prop: "modelValue",
+          type: "Object",
+          default: "null",
+          description: "می تواند modelValue بگیرد ",
+        },
+        {
+          prop: "link",
+          type: "String",
+          default: "null",
+          description: "آدرسی که به Node ها می رود  ",
+        },
+        {
+          prop: "parentNode",
+          type: "String",
+          default: "null",
+          description: "والد Node ",
+        },
+        {
+          prop: "sortBy",
+          type: "String",
+          default: "gen",
+          description: "مرتب سازی ",
+        },
+        {
+          prop: "expand",
+          type: "Boolean",
+          default: "false",
+          description: "توسعه دادن",
+        },
+        {
+          prop: "childsName",
+          type: "String",
+          default: "childs",
+          description: "نام فرزندان",
+        },
+        {
+          prop: "openAll",
+          type: "Boolean",
+          default: "null",
+          description: "بصورت پیشفرض همه را باز می کند",
+        },
+        {
+          prop: "componentName",
+          type: "Object",
+          default: "null",
+          description: "نام کامپوننت",
+        },
+        {
+          prop: "headers",
+          type: "Object",
+          default: "null",
+          description: "هدر درخت",
+        },
+      ],
+      events: [
+        {event: "update:modelValue", description: ""},
+        {event: "fire", description: ""},
+        {event: "select", description: ""},
+        {event: "expand", description: ""},
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,213 @@
+<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-tree
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        وقتی تعداد زیادی از داده‌های تو در تو وجود دارد، اجزای
+        <r-btn readonly size="small"> r-tree</r-btn>
+        بسیار کاربردی هستند.
+      </p>
+    </div>
+    <table-props :items="props"></table-props>
+    <table-events :items="events" class="mt-5"></table-events>
+  </section>
+  <section class="mt-10">
+    <r-tree v-model="modelValue" style="height: 600px">
+      <template v-slot="{nodeKey,item}">
+        <r-card class="pa-5 title-1 mx-1">{{ nodeKey }}:{{ item.name }}</r-card>
+      </template>
+    </r-tree>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+	return {
+		modelValue: {
+			"0": {
+				"name": "smko",
+				"childs": {
+					"1": {
+						"name": "ali",
+						"childs": {
+							"3": {
+								"name": "taher",
+								"childs": {
+									"4": {
+										"name": "smko",
+										"childs": {
+											"6": {
+												"name": "smko",
+												"childs": {
+													"7": {
+														"name": "smko",
+														"childs": {},
+													},
+													"8": {
+														"name": "smko",
+														"childs": {},
+													}
+												},
+											}
+										},
+									},
+									"5": {
+										"name": "smko",
+										"childs": {},
+									}
+								},
+							}
+						},
+					},
+					"2": {
+						"name": "mohammad",
+						"childs": {},
+					}
+				},
+			}
+		},
+		link: null,
+		searchLink: null,
+		gen: "0",
+		selected: null,
+		rotate: false,
+		expand: false,
+		childsName: "childs",
+		openAll: false,
+		headers: {}
+	}
+},
+methods:{
+	log(name,e){
+		console.log(name,e)
+	}
+}
+'
+        template='<r-tree style="height:600px" v-model="modelValue" :link="link" :searchLink="searchLink" :gen="gen" :selected="selected" :rotate="rotate" :childsName="childsName" :openAll="openAll" :headers="headers" @update:model-Value="log(`update:modelValue`,$event)" @select-node="log(`select-node`,$event)">
+	<template v-slot="{nodeKey,item}">
+        <r-card class="pa-5 title-1 mx-1">{{nodeKey}}:{{item.name}}</r-card>
+      </template>
+</r-tree>'
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+
+export default {
+  name: "tree",
+  data() {
+    return {
+      modelValue: {
+        0: {
+          name: "smko",
+          childs: {
+            1: {
+              name: "ali",
+              childs: {
+                3: {
+                  name: "taher",
+                  childs: {
+                    4: {
+                      name: "smko",
+                      childs: {
+                        6: {
+                          name: "smko",
+                          childs: {
+                            7: {
+                              name: "smko",
+
+                              childs: {},
+                            },
+                            8: {
+                              name: "smko",
+
+                              childs: {},
+                            },
+                          },
+                        },
+                      },
+                    },
+                    5: {
+                      name: "smko",
+
+                      childs: {},
+                    },
+                  },
+                },
+              },
+            },
+            2: {
+              name: "mohammad",
+
+              childs: {},
+            },
+          },
+        },
+      },
+      props: [
+        {
+          prop: "modelValue",
+          type: "Object",
+          default: "null",
+          description: "می تواند modelValue بگیرد ",
+        },
+        {
+          prop: "link",
+          type: "String",
+          default: "null",
+          description: "آدرسی که به Node ها می رود  ",
+        },
+        {
+          prop: "parentNode",
+          type: "String",
+          default: "null",
+          description: "والد Node ",
+        },
+        {
+          prop: "sortBy",
+          type: "String",
+          default: "gen",
+          description: "مرتب سازی ",
+        },
+        {
+          prop: "expand",
+          type: "Boolean",
+          default: "false",
+          description: "توسعه دادن",
+        },
+        {
+          prop: "childsName",
+          type: "String",
+          default: "childs",
+          description: "نام فرزندان",
+        },
+        {
+          prop: "openAll",
+          type: "Boolean",
+          default: "null",
+          description: "بصورت پیشفرض همه را باز می کند",
+        },
+        {
+          prop: "componentName",
+          type: "Object",
+          default: "null",
+          description: "نام کامپوننت",
+        },
+        {
+          prop: "headers",
+          type: "Object",
+          default: "null",
+          description: "هدر درخت",
+        },
+      ],
+      events: [
+        {event: "update:modelValue", description: ""},
+        {event: "fire", description: ""},
+        {event: "select", description: ""},
+        {event: "expand", description: ""},
+      ],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/features/breakpoint/fa.vue

@@ -0,0 +1,136 @@
+<template>
+  <section ref="breakpoint">
+    <h1 class="display-4">نقاط شکست</h1>
+    <p class="mt-5 title">
+      در رنوسیفای می توان بر اساس اندازه صفحه کارهای خاصی را انجام داد. مثلا می
+      توان برای موبایل یک نوع نمایش را داشته باشیم و برای لپ تاپ یک نوع دیگر
+      نمایش داده شود.
+    </p>
+    <r-table
+        :items="[
+        {
+          دستگاه: 'خیلی کوچک',
+          کد: 'xs',
+          نوع: 'دستگاه های موبایل',
+          اندازه: '600px >',
+        },
+        {
+          دستگاه: 'کوچک',
+          کد: 'sm',
+          نوع: 'دستگاه های تبلت',
+          اندازه: '600px > < 960px',
+        },
+        {
+          دستگاه: 'متوسط',
+          کد: 'md',
+          نوع: 'دستگاه های لپ تاپ',
+          اندازه: '960px > < 1280px',
+        },
+        {
+          دستگاه: 'بزرگ',
+          کد: 'lg',
+          نوع: 'دسکتاپ',
+          اندازه: '1280px > < 1620px',
+        },
+        {
+          دستگاه: 'خیلی بزرگ',
+          کد: 'xl',
+          نوع: 'صفحه نمایش های بزرگ',
+          اندازه: '> 1620px',
+        },
+      ]"
+        borderd
+    ></r-table>
+  </section>
+  <section>
+    <h2 class="display-4 my-5">سرویس نقطه شکست</h2>
+    <p>
+      نقطه شکست بر اساس اندازه صفحه نمایش دارای نام های xs,sm,md,lg,xl می باشد.
+      که می توانیم بسته یه نیازمان از آن استفاده کنیم. همچنین این سرویس با تغییر
+      اندازه صفحه نمایش به صورت داینامیک مقادیرش تغییر می کند.
+    </p>
+    <p>در مثال زیر اندازه مرورگر را کوچک و بزرگ کنید تا نتایچ را ببینید.</p>
+    <p class="caption">دکمه run را جهت اجرا بزنید.</p>
+
+    <r-code-editor :script="scr" :template="temp" runnable></r-code-editor>
+  </section>
+  <section>
+    <h3 class="display-4">متغیرهای موجود</h3>
+    <p class="mt-5">در زیر متغیرهای عمومی برای سرویس نقطه شکست آمده است:</p>
+    <r-code-editor
+        :script="`this.$r.breakpoint=${JSON.stringify(
+        $r.breakpoint,
+        undefined,
+        2
+      )}`"
+        :script-show="false"
+        :style-show="false"
+        :template-show="false"
+    >
+    </r-code-editor>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "breakpoint",
+  data() {
+    return {
+      scr:
+          "computed: {\n" +
+          "    height() {\n" +
+          "      switch (this.$r.breakpoint.name) {\n" +
+          '        case "xs":\n' +
+          "          return '220';\n" +
+          '        case "sm":\n' +
+          "          return '400';\n" +
+          '        case "md":\n' +
+          "          return '500';\n" +
+          '        case "lg":\n' +
+          "          return '600';\n" +
+          '        case "xl":\n' +
+          "          return '800';\n" +
+          "      }\n" +
+          "      return '100';\n" +
+          "    }\n" +
+          "  }",
+      temp:
+          "<div class=\"color-success\" :style=\"'height:'+height+'px'\" >\n" +
+          "      {{height}}\n" +
+          "</div>",
+    };
+  },
+
+  methods: {
+    html2json(node) {
+      let r = [];
+
+      node.forEach((item) => {
+        let attrs = {};
+        if (item.attributes) {
+          Object.values(item.attributes).forEach((a) => {
+            attrs[a.name] = a.nodeValue;
+          });
+        }
+        let childs = [];
+        if (item.childNodes) {
+          childs = this.html2json(item.childNodes);
+        }
+        if (!(item.nodeName === "#text" && item.nodeValue === "")) {
+          r.push({
+            name: item.nodeName,
+            attributes: attrs,
+            childs: childs,
+            nodeValue: item.nodeValue,
+          });
+        }
+      });
+      return r;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/features/direction/fa.vue

@@ -0,0 +1,57 @@
+<template>
+  <section>
+    <h1 class="display-4">دوجهته (rtl/ltr)</h1>
+    <p class="mt-5 title">
+      رنوسیفای برای هر دو جهت راست به چپ و چپ به راست طراحی شده است. شما می
+      توانید به صورت پیش فرض آن را مشخص کنید یا در حین اجرای برنامه جهت را عوض
+      کنید.
+    </p>
+    <r-code-editor
+        :script="`import { createApp } from &quot;vue&quot;;
+import App from &quot;./Index.vue&quot;;
+import renusify from &quot;renusify&quot;;
+
+window.app = createApp(App)
+  .use(renusify, {
+    rtl: true //or false
+  })
+  .mount(&quot;#app&quot;);`"
+        :script-show="false"
+        :style-show="false"
+        :template-show="false"
+    >
+    </r-code-editor>
+    <p class="mt-5">
+      برای تغییر جهت از داخل برنامه می توانید متغیر عمومی r.rtl$ را برابر true
+      یا false قرار دهید.
+    </p>
+    <p class="caption">دکمه run را جهت اجرا بزنید.</p>
+    <r-code-editor
+        :script="`methods: {
+    change() {
+       this.$r.rtl = ! this.$r.rtl
+    }
+}`"
+        :template="`<div class=&quot;mt-5&quot;>
+   <r-switch-input v-model=&quot;$r.rtl&quot; label=&quot;rtl&quot;></r-switch-input>
+   <br>
+   <r-btn @click=&quot;change&quot; class=&quot;color-success&quot;>change</r-btn>
+</div>`"
+        runnable
+    >
+    </r-code-editor>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "direction",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>