renusify 2.1.8 → 2.2.0

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

@@ -1,213 +0,0 @@
-<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

@@ -1,213 +0,0 @@
-<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

@@ -1,136 +0,0 @@
-<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

@@ -1,57 +0,0 @@
-<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>