renusify 2.1.7 → 2.1.8

package/docs/src/views/index/v1/component/progress/progress_circle/en.vue

@@ -0,0 +1,202 @@
+<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-progress-circle
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-progress-circle</r-btn>
+        is a circle-shaped indicator that represents the progress of a task.
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "indeterminate": true,
+    "showPercent": false,
+    "rotate": 0,
+    "size": "60",
+    "width": 4,
+    "modelValue": 0
+}
+}'
+        template='<r-progress-circle :indeterminate="indeterminate" :show-Percent="showPercent" :rotate="rotate" :size="size" :width="width" v-model="modelValue" ></r-progress-circle>'
+    ></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>Size</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6 ps-20 pe-20">
+      <r-progress-circle :model-value="80" class="color-warning-text" size="80">
+        80%
+      </r-progress-circle
+      >
+      <r-progress-circle :model-value="60" class="color-info-text" size="60">
+        60%
+      </r-progress-circle
+      >
+      <r-progress-circle :model-value="40" class="color-success-text" size="40">
+        40%
+      </r-progress-circle
+      >
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template=' <div class="d-flex h-space-around">
+         <r-progress-circle size="80" :model-value="80" class="color-warning-text">
+        80%</r-progress-circle
+      >
+      <r-progress-circle size="60" :model-value="60" class="color-info-text">
+        60%</r-progress-circle
+      >
+      <r-progress-circle size="40" :model-value="40" class="color-success-text">
+        40%</r-progress-circle
+      >
+        </div>'
+    ></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>Indeterminate</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6 ps-20 pe-20">
+      <r-progress-circle class="color-warning-text" indeterminate size="80">
+      </r-progress-circle>
+      <r-progress-circle class="color-info-text" indeterminate size="60">
+      </r-progress-circle>
+      <r-progress-circle class="color-success-text" indeterminate size="40">
+      </r-progress-circle>
+      <r-progress-circle indeterminate></r-progress-circle>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template=' <div class="d-flex h-space-around">
+         <r-progress-circle indeterminate size="80" class="color-warning-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate size="60" class="color-info-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate size="40" class="color-success-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate> </r-progress-circle>
+        </div>'
+    ></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>ShowPercent</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6 ps-20 pe-20">
+      <r-progress-circle
+          :model-value="80"
+          class="color-warning-text"
+          indeterminate
+          showPercent
+          size="80"
+      >
+      </r-progress-circle>
+      <r-progress-circle
+          :model-value="60"
+          class="color-info-text"
+          showPercent
+          size="60"
+      >
+      </r-progress-circle>
+      <r-progress-circle
+          :model-value="40"
+          class="color-success-text"
+          showPercent
+          size="40"
+      >
+      </r-progress-circle>
+      <r-progress-circle :model-value="0" indeterminate showPercent>
+      </r-progress-circle>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template=' <div class="d-flex h-space-around">
+         <r-progress-circle
+        showPercent
+        indeterminate
+        size="80"
+        :model-value="80"
+        class="color-warning-text"
+        >
+      </r-progress-circle>
+      <r-progress-circle showPercent size="60" :model-value="60" class="color-info-text">
+      </r-progress-circle>
+      <r-progress-circle showPercent size="40" :model-value="40" class="color-success-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate showPercent :model-value="0"> </r-progress-circle>
+        </div>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "progress_circle",
+  data() {
+    return {
+      items: [
+        {
+          prop: "indeterminate",
+          type: "Boolean",
+          default: "null",
+          description: "It is rotating in an indeterminate manner",
+        },
+        {
+          prop: "showPercent",
+          type: "Boolean",
+          default: "null",
+          description: "It shows the percentage of the value",
+        },
+        {
+          prop: "rotate",
+          type: "Number,String",
+          default: "0",
+          description: "Rotate",
+        },
+        {
+          prop: "size",
+          type: "Number,String",
+          default: "32",
+          description: "Size",
+        },
+        {
+          prop: "width",
+          type: "Number,String",
+          default: "4",
+          description: "Width",
+        },
+        {
+          prop: "modelValue",
+          type: "Number,String",
+          default: "0",
+          description: "You can determine its value.",
+        },
+      ],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/progress/progress_circle/fa.vue

@@ -0,0 +1,201 @@
+<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-progress-circle
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-progress-circle</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 {
+    "indeterminate": true,
+    "showPercent": false,
+    "rotate": 0,
+    "size": "60",
+    "width": 4,
+    "modelValue": 0
+}
+}'
+        template='<r-progress-circle :indeterminate="indeterminate" :show-Percent="showPercent" :rotate="rotate" :size="size" :width="width" v-model="modelValue" ></r-progress-circle>'
+    ></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>Size</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6 ps-20 pe-20">
+      <r-progress-circle :model-value="80" class="color-warning-text" size="80">
+        80%
+      </r-progress-circle
+      >
+      <r-progress-circle :model-value="60" class="color-info-text" size="60">
+        60%
+      </r-progress-circle
+      >
+      <r-progress-circle :model-value="40" class="color-success-text" size="40">
+        40%
+      </r-progress-circle
+      >
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template=' <div class="d-flex h-space-around">
+         <r-progress-circle size="80" :model-value="80" class="color-warning-text">
+        80%</r-progress-circle
+      >
+      <r-progress-circle size="60" :model-value="60" class="color-info-text">
+        60%</r-progress-circle
+      >
+      <r-progress-circle size="40" :model-value="40" class="color-success-text">
+        40%</r-progress-circle
+      >
+        </div>'
+    ></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>Indeterminate</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6 ps-20 pe-20">
+      <r-progress-circle class="color-warning-text" indeterminate size="80">
+      </r-progress-circle>
+      <r-progress-circle class="color-info-text" indeterminate size="60">
+      </r-progress-circle>
+      <r-progress-circle class="color-success-text" indeterminate size="40">
+      </r-progress-circle>
+      <r-progress-circle indeterminate></r-progress-circle>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template=' <div class="d-flex h-space-around">
+         <r-progress-circle indeterminate size="80" class="color-warning-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate size="60" class="color-info-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate size="40" class="color-success-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate> </r-progress-circle>
+        </div>'
+    ></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>ShowPercent</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6 ps-20 pe-20">
+      <r-progress-circle
+          :model-value="80"
+          class="color-warning-text"
+          indeterminate
+          showPercent
+          size="80"
+      >
+      </r-progress-circle>
+      <r-progress-circle
+          :model-value="60"
+          class="color-info-text"
+          showPercent
+          size="60"
+      >
+      </r-progress-circle>
+      <r-progress-circle
+          :model-value="40"
+          class="color-success-text"
+          showPercent
+          size="40"
+      >
+      </r-progress-circle>
+      <r-progress-circle :model-value="0" indeterminate showPercent>
+      </r-progress-circle>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template=' <div class="d-flex h-space-around">
+         <r-progress-circle
+        showPercent
+        indeterminate
+        size="80"
+        :model-value="80"
+        class="color-warning-text"
+        >
+      </r-progress-circle>
+      <r-progress-circle showPercent size="60" :model-value="60" class="color-info-text">
+      </r-progress-circle>
+      <r-progress-circle showPercent size="40" :model-value="40" class="color-success-text">
+      </r-progress-circle>
+      <r-progress-circle indeterminate showPercent :model-value="0"> </r-progress-circle>
+        </div>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "progress_circle",
+  data() {
+    return {
+      items: [
+        {
+          prop: "indeterminate",
+          type: "Boolean",
+          default: "null",
+          description: "بصورت نا مشخص در حال چرخش است ",
+        },
+        {
+          prop: "showPercent",
+          type: "Boolean",
+          default: "null",
+          description: "درصد مقدار progress را نشان می دهد",
+        },
+        {
+          prop: "rotate",
+          type: "Number,String",
+          default: "0",
+          description: "چرخ زدن progress را مشخص می کند ",
+        },
+        {
+          prop: "size",
+          type: "Number,String",
+          default: "32",
+          description: "اندازه ",
+        },
+        {
+          prop: "width",
+          type: "Number,String",
+          default: "4",
+          description: "عرض",
+        },
+        {
+          prop: "modelValue",
+          type: "Number,String",
+          default: "0",
+          description: "مقدار آن را می توانید تعیین کنید ",
+        },
+      ],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/progress/progress_line/en.vue

@@ -0,0 +1,216 @@
+<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-progress-line
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        The
+        <r-btn readonly size="small"> r-progress-line</r-btn>
+        represents the
+        completion progress of a task.
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "modelValue": 60,
+    "color": "color-info",
+    "progressStyle": null,
+    "showPercent": true,
+    "outlined": false,
+    "rounded": false,
+    "showBackground": true,
+    "size": "small"
+}
+}'
+        template='<r-progress-line v-model="modelValue" :color="color" :progress-Style="progressStyle" :show-Percent="showPercent" :outlined="outlined" :rounded="rounded" :show-Background="showBackground" :size="size" ></r-progress-line>'
+    ></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">Progress Line</h1>
+    <section class="d-flex h-space-around pt-6">
+      <r-card class="pa-4 color-two-text" outlined>
+        <p>card default</p>
+        <r-progress-line color="color-two"></r-progress-line>
+      </r-card>
+      <r-card class="pa-4 color-warning-text" outlined>
+        <p>card outlined</p>
+        <r-progress-line color="color-warning" outlined></r-progress-line>
+      </r-card>
+      <r-card class="pa-4 color-one-text" outlined>
+        <p>card rounded</p>
+        <r-progress-line color="color-one" rounded></r-progress-line>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template=' <div class="d-flex h-space-around">
+        <r-card outlined class="pa-4 color-two-text">
+        <p>card default</p>
+        <r-progress-line color="color-two"> </r-progress-line>
+      </r-card>
+      <r-card outlined class="pa-4 color-warning-text">
+        <p>card outlined</p>
+        <r-progress-line outlined color="color-warning"> </r-progress-line>
+      </r-card>
+      <r-card outlined class="pa-4 color-one-text">
+        <p>card rounded</p>
+        <r-progress-line rounded color="color-one"> </r-progress-line>
+      </r-card>
+        </div>'
+    ></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">Progress Line</h1>
+    <section class="d-flex h-space-around pt-6">
+      <r-card class="pa-4 color-two-text w-45" outlined>
+        <p>default</p>
+        <r-progress-line :model-value="30" color="color-two"></r-progress-line>
+      </r-card>
+      <r-card class="pa-4 color-one-text w-45" outlined>
+        <p>showPercent</p>
+        <r-progress-line :model-value="30" color="color-one" showPercent>
+        </r-progress-line>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template=' <div class="d-flex h-space-around">
+           <r-card outlined class="pa-4 color-two-text w-45">
+        <p>default</p>
+        <r-progress-line color="color-two" :model-value="30"></r-progress-line>
+      </r-card>
+      <r-card outlined class="pa-4 color-one-text w-45">
+        <p>showPercent</p>
+        <r-progress-line showPercent color="color-one" :model-value="30"> </r-progress-line>
+      </r-card>
+        </div>'
+    ></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">Progress Line</h1>
+    <section class="pt-6">
+      <r-progress-line
+          :modelValue="30"
+          class="my-3"
+          color="color-one"
+          showPercent
+      ></r-progress-line>
+      <r-progress-line
+          :modelValue="50"
+          class="my-3"
+          color="color-Info"
+          showPercent
+      ></r-progress-line>
+      <r-progress-line
+          :modelValue="80"
+          class="my-3"
+          color="color-two"
+          showPercent
+      ></r-progress-line>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template=' <div >
+           <r-progress-line
+        showPercent
+        color="color-one"
+        :modelValue="30"
+        class="my-3"
+      ></r-progress-line>
+      <r-progress-line
+        showPercent
+        color="color-Info"
+        :modelValue="50"
+        class="my-3"
+      ></r-progress-line>
+      <r-progress-line
+        showPercent
+        color="color-two"
+        :modelValue="80"
+        class="my-3"
+      ></r-progress-line>
+        </div>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "progress_line",
+  data() {
+    return {
+      items: [
+        {
+          prop: "modelValue",
+          type: "Number,String",
+          default: "null",
+          description: "You can determine its value.",
+        },
+        {
+          prop: "color",
+          type: "String",
+          default: "null",
+          description: "Color",
+        },
+        {
+          prop: "progressStyle",
+          type: "String,Object,Array",
+          default: "null",
+          description: "Style for Progress",
+        },
+        {
+          prop: "showPercent",
+          type: "Boolean",
+          default: "null",
+          description: "It shows the percentage of the value",
+        },
+        {
+          prop: "outlined",
+          type: "Boolean",
+          default: "null",
+          description: "It increases the height.",
+        },
+        {
+          prop: "rounded",
+          type: "Boolean",
+          default: "null",
+          description: "Its corners are rounded",
+        },
+        {
+          prop: "showBackground",
+          type: "Boolean",
+          default: "null",
+          description: "Shows the background color",
+        },
+        {prop: "size", type: "String", default: "small", description: "Size"},
+      ],
+    };
+  },
+};
+</script>