renusify 2.1.5 → 2.1.8

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

@@ -0,0 +1,102 @@
+<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-time-ago
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        مدل
+        <r-btn readonly size="small"> r-time-ago</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 {
+    "time": new Date(),
+    "noTrans": true,
+    "liveTime": 2000,
+    "live": true
+}
+}'
+        template='<r-time-ago :time="time" :no-Trans="noTrans" :live-Time="liveTime" :live="live" ></r-time-ago>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "time": new Date().getTime()-60*60*24*1000,
+    "noTrans": true,
+    "liveTime": 2000,
+    "live": false
+}
+}'
+        template='<r-time-ago :time="time" :no-Trans="noTrans" :live-Time="liveTime" :live="live" ></r-time-ago>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "time": new Date().getTime()+10*60*60*24*1000,
+    "noTrans": true,
+    "liveTime": 2000,
+    "live": false
+}
+}'
+        template='<r-time-ago :time="time" :no-Trans="noTrans" :live-Time="liveTime" :live="live" ></r-time-ago>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "time_ago",
+  data() {
+    return {
+      items: [
+        {
+          prop: "time",
+          type: "undefined",
+          default: "undefined",
+          description: "تایم می گیرد ",
+        },
+        {
+          prop: "noTrans",
+          type: "Boolean",
+          default: "false",
+          description: "ترجمه نشود ",
+        },
+        {
+          prop: "liveTime",
+          type: "Number",
+          default: "5000",
+          description: "گذر ثانیه ها را بصورت زنده می بینید ",
+        },
+        {
+          prop: "live",
+          type: "Boolean",
+          default: "null",
+          description: "بصورت زنده",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,140 @@
+<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-timeline
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        The
+        <r-btn readonly size="small"> r-timeline</r-btn>
+        is useful for
+        stylistically displaying chronological information
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>Items</span>
+    </h1>
+    <section>
+      <r-card class="pa-4" outlined>
+        <r-timeline
+            :items="[
+            { title: 'Item One', desc: 'description description description ' },
+            { title: 'Item Two', desc: 'description description description ' },
+            {
+              title: 'Item Three',
+              desc: 'description description description ',
+            },
+            {
+              title: 'Item Four',
+              desc: 'description description description ',
+            },
+          ]"
+        >
+          <template #back="{ k }">
+            <r-card
+                :class="{
+                'flex-row-reverse': k % 2 === 0,
+                'shadow-info': k % 2 === 0,
+                'shadow-error': k % 2 !== 0,
+                'color-warning': k % 2 !== 0,
+                'color-info': k % 2 === 0,
+              }"
+                class="d-flex h-full overflow-hidden elevation-lg"
+            >
+              <div class="w-full display-3 br-none d-flex h-center v-center">
+                {{ k + 1 }}
+              </div>
+            </r-card>
+          </template>
+          <template v-if="$r.breakpoint.mdAndUp" #counter="{ k }">
+            <div class="d-flex h-center v-center h-full">
+              <span class="color-one br-circle pa-2">
+                <r-icon
+                    v-if="k % 2 === 0"
+                    v-html="$r.icons.arrow_left"
+                ></r-icon>
+                <r-icon v-else v-html="$r.icons.arrow_right"></r-icon>
+              </span>
+            </div>
+          </template>
+          <template v-slot="{ item }">
+            <r-card class="pa-5 elevation-lg shadow-success">
+              <div class="display-5 font-weight-bold mb-5">
+                {{ $t(item.title) }}
+              </div>
+              <div>{{ $t(item.desc) }}</div>
+            </r-card>
+          </template>
+        </r-timeline>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='<r-card outlined class="pa-4">
+        <r-timeline
+          :items="[
+            { title: `Item One`,desc:`description description description ` },
+            { title: `Item Two` ,desc:`description description description ` },
+            { title: `Item Three` ,desc:`description description description ` },
+            { title: `Item Four` ,desc:`description description description ` },
+          ]"
+        >
+          <template #back="{ k }">
+            <r-card
+              class="d-flex h-full overflow-hidden elevation-lg"
+              :class="k % 2 === 0?`flex-row-reverse shadow-info color-info`:`shadow-error color-warning`"
+            >
+               <div class="w-full display-3 br-none d-flex h-center v-center">
+                {{ k + 1 }}
+              </div>
+            </r-card>
+          </template>
+          <template v-if="$r.breakpoint.mdAndUp" #counter="{ k }">
+            <div class="d-flex h-center v-center h-full">
+              <span class="color-one br-circle pa-2">
+                <r-icon
+                  v-if="k % 2 === 0"
+                  v-html="$r.icons.arrow_left"
+                ></r-icon>
+                <r-icon v-else v-html="$r.icons.arrow_right"></r-icon>
+              </span>
+            </div>
+          </template>
+          <template v-slot="{ item }">
+            <r-card class="pa-5 elevation-lg shadow-success">
+              <div class="display-5 font-weight-bold mb-5">
+                {{ $t(item.title) }}
+              </div>
+              <div>{{ $t(item.desc) }}</div>
+            </r-card>
+          </template>
+        </r-timeline>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "timeline",
+  data() {
+    return {
+      items: [
+        {
+          prop: "items",
+          type: "Array",
+          default: "undefined",
+          description: "Items",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,138 @@
+<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-timeline
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        مدل
+        <r-btn readonly size="small"> r-timeline</r-btn>
+        برای نمایش اطلاعات زمانی به صورت زیبا و سبک استفاده می‌شود.
+      </p>
+    </div>
+    <table-props :items="items"></table-props>
+  </section>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>Items</span>
+    </h1>
+    <section>
+      <r-card class="pa-4" outlined>
+        <r-timeline
+            :items="[
+            { title: 'Item One', desc: 'description description description ' },
+            { title: 'Item Two', desc: 'description description description ' },
+            {
+              title: 'Item Three',
+              desc: 'description description description ',
+            },
+            {
+              title: 'Item Four',
+              desc: 'description description description ',
+            },
+          ]"
+        >
+          <template #back="{ k }">
+            <r-card
+                :class="{
+                'flex-row-reverse': k % 2 === 0,
+                'shadow-info': k % 2 === 0,
+                'shadow-error': k % 2 !== 0,
+                'color-warning': k % 2 !== 0,
+                'color-info': k % 2 === 0,
+              }"
+                class="d-flex h-full overflow-hidden elevation-lg"
+            >
+              <div class="w-full display-3 br-none d-flex h-center v-center">
+                {{ k + 1 }}
+              </div>
+            </r-card>
+          </template>
+          <template v-if="$r.breakpoint.mdAndUp" #counter="{ k }">
+            <div class="d-flex h-center v-center h-full">
+              <span class="color-one br-circle pa-2">
+                <r-icon
+                    v-if="k % 2 === 0"
+                    v-html="$r.icons.arrow_left"
+                ></r-icon>
+                <r-icon v-else v-html="$r.icons.arrow_right"></r-icon>
+              </span>
+            </div>
+          </template>
+          <template v-slot="{ item }">
+            <r-card class="pa-5 elevation-lg shadow-success">
+              <div class="display-5 font-weight-bold mb-5">
+                {{ $t(item.title) }}
+              </div>
+              <div>{{ $t(item.desc) }}</div>
+            </r-card>
+          </template>
+        </r-timeline>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='<r-card outlined class="pa-4">
+        <r-timeline
+          :items="[
+            { title: `Item One`,desc:`description description description ` },
+            { title: `Item Two` ,desc:`description description description ` },
+            { title: `Item Three` ,desc:`description description description ` },
+            { title: `Item Four` ,desc:`description description description ` },
+          ]"
+        >
+          <template #back="{ k }">
+            <r-card
+              class="d-flex h-full overflow-hidden elevation-lg"
+              :class="k % 2 === 0?`flex-row-reverse shadow-info color-info`:`shadow-error color-warning`"
+            >
+               <div class="w-full display-3 br-none d-flex h-center v-center">
+                {{ k + 1 }}
+              </div>
+            </r-card>
+          </template>
+          <template v-if="$r.breakpoint.mdAndUp" #counter="{ k }">
+            <div class="d-flex h-center v-center h-full">
+              <span class="color-one br-circle pa-2">
+                <r-icon
+                  v-if="k % 2 === 0"
+                  v-html="$r.icons.arrow_left"
+                ></r-icon>
+                <r-icon v-else v-html="$r.icons.arrow_right"></r-icon>
+              </span>
+            </div>
+          </template>
+          <template v-slot="{ item }">
+            <r-card class="pa-5 elevation-lg shadow-success">
+              <div class="display-5 font-weight-bold mb-5">
+                {{ $t(item.title) }}
+              </div>
+              <div>{{ $t(item.desc) }}</div>
+            </r-card>
+          </template>
+        </r-timeline>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "timeline",
+  data() {
+    return {
+      items: [
+        {
+          prop: "items",
+          type: "Array",
+          default: "undefined",
+          description: "آیتم  می گیرد",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,125 @@
+<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-tour
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-tour</r-btn>
+        creates a guided tour that is useful for teaching how to use apps
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>AbortOnNotFound</span>
+    </h1>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='
+               <div>
+        <div class="header1 py-4">header1</div>
+        <div class="header2 py-4">header2</div>
+        <r-tour
+          abort-on-not-found
+          ref="tour"
+          :steps="[
+            { msg: `Item One is on`, key: `.header1` },
+            { msg: `Item Two `, key: `.header2` },
+          ]"
+        ></r-tour>
+      </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>ChackCode</span>
+    </h1>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="
+  methods: {
+    chackCode(e) {
+      console.log(e);
+      this.$refs.tour.next();
+    },
+  }
+"
+        template='
+               <div>
+        <div class="header1 py-4">header1</div>
+        <div class="header2 py-4">header2</div>
+        <div>
+          <r-btn id="one" @click="chackCode(`click btn`)">Click</r-btn>
+        </div>
+        <r-tour
+          abort-on-not-found
+          ref="tour"
+          :steps="[
+            { msg: `Item One is on`, key: `.header1` },
+            {
+              msg: `this is Btn`,
+              key: `#one`,
+              options: {
+                clickable: true,
+                disable_next: true,
+              },
+            },
+            { msg: `Item Two `, key: `.header2` },
+          ]"
+        ></r-tour>
+      </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "tour",
+  data() {
+    return {
+      items: [
+        {
+          prop: "steps",
+          type: "Array",
+          default: "[]",
+          description: "The intended steps",
+        },
+        {
+          prop: "canFinish",
+          type: "Boolean",
+          default: "null",
+          description:
+              "Before reaching a specific stage, the user should be able to press the end button",
+        },
+        {
+          prop: "abortOnNotFound",
+          type: "Boolean",
+          default: "null",
+          description:
+              "If one of the steps is not found, should it be aborted or not",
+        },
+        {
+          prop: "delay",
+          type: "Number",
+          default: "2000",
+          description: "Delay",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,129 @@
+<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-tour
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-tour</r-btn>
+        یک تور راهنما می سازد , برای آموزش کار کردن با اپ ها قابل استفاده است .
+      </p>
+    </div>
+    <table-props :items="items"></table-props>
+  </section>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>AbortOnNotFound</span>
+    </h1>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='
+               <div>
+        <div class="header1 py-4">header1</div>
+        <div class="header2 py-4">header2</div>
+        <r-tour
+          abort-on-not-found
+          ref="tour"
+          :steps="[
+            { msg: `Item One is on`, key: `.header1` },
+            { msg: `Item Two `, key: `.header2` },
+          ]"
+        ></r-tour>
+      </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>ChackCode</span>
+    </h1>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="
+  methods: {
+    chackCode(e) {
+      console.log(e);
+      this.$refs.tour.next();
+    },
+  }
+"
+        template='
+               <div>
+        <div class="header1 py-4">header1</div>
+        <div class="header2 py-4">header2</div>
+        <div>
+          <r-btn id="one" @click="chackCode(`click btn`)">Click</r-btn>
+        </div>
+        <r-tour
+          abort-on-not-found
+          ref="tour"
+          :steps="[
+            { msg: `Item One is on`, key: `.header1` },
+            {
+              msg: `this is Btn`,
+              key: `#one`,
+              options: {
+                clickable: true,
+                disable_next: true,
+              },
+            },
+            { msg: `Item Two `, key: `.header2` },
+          ]"
+        ></r-tour>
+      </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "tour",
+  data() {
+    return {
+      items: [
+        {
+          prop: "steps",
+          type: "Array",
+          default: "[]",
+          description: "مرحله های مدنظ",
+        },
+        {
+          prop: "canFinish",
+          type: "Boolean",
+          default: "null",
+          description:
+              "قبل رسیدن به یک مرحله خاصی کاربر بتواند دکمه پایان را بزند",
+        },
+        {
+          prop: "abortOnNotFound",
+          type: "Boolean",
+          default: "null",
+          description: "اگر یکی از مرحله ها را پیدا نکرد abort شود یا نه ",
+        },
+        {
+          prop: "delay",
+          type: "Number",
+          default: "2000",
+          description: "زمان تاخیر",
+        },
+      ],
+    };
+  },
+  methods: {
+    chackCode(e) {
+      console.log(e);
+      this.$refs.tour.next();
+    },
+  },
+};
+</script>