renusify 2.1.5 → 2.1.8

package/docs/src/views/index/v1/component/container/row/fa.vue

@@ -0,0 +1,157 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light ps-4 pb-1 pt-1 br-lg">r-row</h1>
+      <p class="font-weight-light color-black-text ps-4 py-1 mb-1 br-lg">
+        جزء فرعی که برای ایجاد ردیف ها استفاده می شود.
+      </p>
+    </div>
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "dense": false,
+    "noGutters": false
+}
+}'
+        template='<r-row :dense="dense" :no-Gutters="noGutters" ></r-row>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section>
+      <r-container>
+        <r-row class="background-two">
+          <r-col class="col-4 color-info">Info</r-col>
+          <r-col class="col-4 color-success">Success</r-col>
+          <r-col class="col-4 color-black">Black</r-col>
+          <r-col class="col-4 color-error">Error</r-col>
+          <r-col class="col-4 color-gradient-one-45">Gradient</r-col>
+          <r-col class="col-4 color-one">One</r-col>
+        </r-row>
+      </r-container>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='   <r-container>
+        <r-row class="background-two">
+          <r-col class="col-4 color-info">Info</r-col>
+          <r-col class="col-4 color-success">Success</r-col>
+          <r-col class="col-4 color-black">Black</r-col>
+          <r-col class="col-4 color-error">Error</r-col>
+           <r-col class="col-4 color-gradient-one-45">Gradient</r-col>
+          <r-col class="col-4 color-one">One</r-col>
+        </r-row>
+      </r-container>'
+    ></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>Dense</span>
+    </h1>
+    <section>
+      <r-container>
+        <r-row class="background-two" dense>
+          <r-col class="col-4 color-warning">ONE</r-col>
+          <r-col class="col-4 color-two">TWO</r-col>
+          <r-col class="col-4 color-info">THREE</r-col>
+          <r-col class="col-4 color-error">FOUR</r-col>
+          <r-col class="col-4 color-success">FIVE</r-col>
+          <r-col class="col-4 color-black">SIX</r-col>
+        </r-row>
+      </r-container>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='   <r-container>
+        <r-row dense class="background-two">
+          <r-col class="col-4 color-warning">ONE</r-col>
+          <r-col class="col-4 color-two">TWO</r-col>
+          <r-col class="col-4 color-info">THREE</r-col>
+          <r-col class="col-4 color-error">FOUR</r-col>
+          <r-col class="col-4 color-success">FIVE</r-col>
+          <r-col class="col-4 color-black">SIX</r-col>
+        </r-row>
+      </r-container>'
+    ></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>NoGutters</span>
+    </h1>
+    <section>
+      <r-container>
+        <r-row :noGutters="md" class="background-two">
+          <r-col class="col-4 color-one"></r-col>
+          <r-col class="col-4 color-two"></r-col>
+          <r-col class="col-4 color-info"></r-col>
+          <r-col class="col-2 color-gradient-one"></r-col>
+          <r-col class="col-4 color-success"></r-col>
+          <r-col class="col-6 color-black"></r-col>
+        </r-row>
+      </r-container>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='     <r-container>
+        <r-row :noGutters="md" class="background-two">
+          <r-col class="col-4 color-one"></r-col>
+          <r-col class="col-4 color-two"></r-col>
+          <r-col class="col-4 color-info"></r-col>
+          <r-col class="col-2 color-gradient-one"></r-col>
+          <r-col class="col-4 color-success"></r-col>
+          <r-col class="col-6 color-black"></r-col>
+        </r-row>
+      </r-container>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "row",
+  data() {
+    return {
+      items: [
+        {
+          prop: "dense",
+          type: "Boolean",
+          default: "null",
+          description: "فشرده کردن ردیف ها",
+        },
+        {
+          prop: "noGutters",
+          type: "Boolean",
+          default: "null",
+          description: "از noGutters برای جدا کردن ردیف استفاده می شود .",
+        },
+      ],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/container/spacer/en.vue

@@ -0,0 +1,40 @@
+<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-spacer
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        A
+        <r-btn readonly size="small"> r-spacer</r-btn>
+        grid is one of the most
+        important structural components .
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template="<r-container>
+  <r-row>
+    <r-col class='col-2 color-warning'>2</r-col>
+    <r-spacer >spacer</r-spacer>
+    <r-col class='col-4 color-info'>4</r-col>
+  </r-row>
+</r-container>"
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+export default {
+  name: "spacer",
+  data() {
+    return {
+      items: [],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/container/spacer/fa.vue

@@ -0,0 +1,38 @@
+<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-spacer
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-spacer</r-btn>
+        فاصله خالی در یک سطر را پر
+        می کند.
+      </p>
+    </div>
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template="<r-container>
+  <r-row>
+    <r-col class='col-2 color-warning'>2</r-col>
+    <r-spacer >spacer</r-spacer>
+    <r-col class='col-4 color-info'>4</r-col>
+  </r-row>
+</r-container>"
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+export default {
+  name: "spacer",
+  data() {
+    return {
+      items: [],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,61 @@
+<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-content
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        A
+        <r-btn readonly size="small"> r-content</r-btn>
+        grid is one of the most important structural components .
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "belowHeader": "50px",
+    "flipped": false,
+    "moved": false
+}
+}'
+        template='<r-content :below-Header="belowHeader" :flipped="flipped" :moved="moved">
+  <div style="height:600px;background-color:red"></div>
+</r-content>'
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+export default {
+  name: "content",
+  data() {
+    return {
+      items: [
+        {
+          prop: "belowHeader",
+          type: "String",
+          default: "null",
+          description: "The amount of distance from the top",
+        },
+        {
+          prop: "flipped",
+          type: "Boolean",
+          default: "null",
+          description: "create a flip card",
+        },
+        {
+          prop: "moved",
+          type: "Boolean",
+          default: "null",
+          description: "The Move Programming",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,59 @@
+<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-content
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> Renusify</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 {
+    "belowHeader": "50px",
+    "flipped": false,
+    "moved": false
+}
+}'
+        template='<r-content :below-Header="belowHeader" :flipped="flipped" :moved="moved">
+  <div style="height:600px;background-color:red"></div>
+</r-content>'
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+export default {
+  name: "content",
+  data() {
+    return {
+      items: [
+        {
+          prop: "belowHeader",
+          type: "String",
+          default: "null",
+          description: "مقدار فاصله از بالا",
+        },
+        {
+          prop: "flipped",
+          type: "Boolean",
+          default: "null",
+          description: "معکوس کردن",
+        },
+        {
+          prop: "moved",
+          type: "Boolean",
+          default: "null",
+          description: "حرکت دادن",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,111 @@
+<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-count-down
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-count-down</r-btn>
+        component that displays a countdown timer in the format of hours,
+        minutes, and seconds.
+      </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 {
+    "autoStart": true,
+    "interval": 1000,
+    "time": 500000
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-count-down :auto-Start="autoStart" :interval="interval" :time="time" @start="log(`start`,$event)" @end="log(`end`,$event)" ></r-count-down>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="d-flex h-space-between">
+      <r-btn @click="d = true">Start</r-btn>
+      <r-count-down :autoStart="d" :time="30000"></r-count-down>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+ start: false,
+  }
+}"
+        template='   <r-btn @click="start = true">Start</r-btn>
+      <r-count-down :autoStart="d" :time="30000"></r-count-down>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="d-flex h-space-between">
+      <r-btn @click="d = true">Start</r-btn>
+      <r-count-down :autoStart="d" :time="3000000"></r-count-down>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+ start: false,
+  }
+}"
+        template='   <r-btn @click="start = true">Start</r-btn>
+      <r-count-down :autoStart="start" :time="30000"></r-count-down>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "count_down",
+  data() {
+    return {
+      props: [
+        {
+          prop: "autoStart",
+          type: "Boolean",
+          default: "true",
+          description: "The default is rendered",
+        },
+        {
+          prop: "interval",
+          type: "Number",
+          default: "1000",
+          description: "one second",
+        },
+        {
+          prop: "time",
+          type: "Number",
+          default: "0",
+          description: "Time decrease in terms of milliseconds.",
+        },
+      ],
+      events: [
+        {
+          event: "start",
+          description: "Call a function as soon as it starts.",
+        },
+        {event: "end", description: "Call a function as soon as it end."},
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,116 @@
+<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-count-down
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-count-down</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 {
+    "autoStart": true,
+    "interval": 1000,
+    "time": 500000
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-count-down :auto-Start="autoStart" :interval="interval" :time="time" @start="log(`start`,$event)" @end="log(`end`,$event)" ></r-count-down>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="d-flex h-space-between">
+      <r-btn @click="d = true">Start</r-btn>
+      <r-count-down :autoStart="d" :time="30000"></r-count-down>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+ start: false,
+  }
+}"
+        template='   <r-btn @click="start = true">Start</r-btn>
+      <r-count-down :autoStart="d" :time="30000"></r-count-down>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="d-flex h-space-between">
+      <r-btn @click="d = true">Start</r-btn>
+      <r-count-down :autoStart="d" :time="3000000"></r-count-down>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+ start: false,
+  }
+}"
+        template='   <r-btn @click="start = true">Start</r-btn>
+      <r-count-down :autoStart="start" :time="30000"></r-count-down>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "count_down",
+  data() {
+    return {
+      d: false,
+      props: [
+        {
+          prop: "autoStart",
+          type: "Boolean",
+          default: "true",
+          description: "پیشفرض رندر  می شود .",
+        },
+        {
+          prop: "interval",
+          type: "Number",
+          default: "1000",
+          description: "مدت زمان کم شدن زمان یک ثانیه است. ",
+        },
+        {
+          prop: "time",
+          type: "Number",
+          default: "0",
+          description: "کاهش زمان بر حسب میلی ثانیه",
+        },
+      ],
+      events: [
+        {
+          event: "start",
+          description: "به محض اینکه شروع شد تابعی را فراخوانی کند .",
+        },
+        {
+          event: "end",
+          description: "به محض اینکه زمان تمام شد تابعی را فراخوانی کند .",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,97 @@
+<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-cropper
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        Crop any image by
+        <r-btn readonly size="small">r-cropper</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 {
+    wPH: 3/2,
+    maxWidth: 400,
+    showCropped: true,
+    getBlob: false,
+    selectImg: true
+ }
+}"
+        template="<r-cropper :wPH='wPH' :maxWidth='maxWidth' :showCropped='showCropped'
+  :getBlob='getBlob' :selectImg='selectImg'></r-cropper>"
+    ></r-code-editor>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+    wPH: 3/2,
+    imgSrc: '/test.jpg',
+    maxWidth: 400,
+    showCropped: true,
+    getBlob: true
+ }
+}"
+        template="<r-cropper :wPH='wPH' :imgSrc='imgSrc' :maxWidth='maxWidth' :showCropped='showCropped'
+  :getBlob='getBlob'></r-cropper>"
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+export default {
+  name: "cropper",
+  data() {
+    return {
+      emits: ["cropped", "original"],
+      items: [
+        {
+          prop: "selectImg",
+          type: "Boolean",
+          default: "true",
+          description: "user can select Image",
+        },
+        {
+          prop: "getBlob",
+          type: "Boolean",
+          default: "false",
+          description: "get Blob of cropped image",
+        },
+        {
+          prop: "showCropped",
+          type: "Boolean",
+          default: "false",
+          description: "show Cropped image",
+        },
+        {
+          prop: "maxWidth",
+          type: "Number",
+          default: null,
+          description: "maximum Width",
+        },
+        {
+          prop: "imgSrc",
+          type: "String, Blob",
+          default: null,
+          description: "image source for crop",
+        },
+        {
+          prop: "wPH",
+          type: "Number, String, Array",
+          default: 1,
+          description: "width per height of result",
+        },
+      ],
+    };
+  },
+};
+</script>