renusify 2.1.5 → 2.1.8

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

@@ -0,0 +1,130 @@
+<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-divider
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small">r-divider</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 {
+    "inset": false,
+    "vertical": false
+}
+}'
+        template='<r-divider :inset="inset" :vertical="vertical" ></r-divider>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="d-flex h-space-between pt-12 ps-20 pe-20">
+      <r-divider class="color-warning"></r-divider>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='        <r-divider class=" color-warning"></r-divider>'
+    ></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>Inset</span>
+    </h1>
+    <section class="d-flex h-space-between pt-12 ps-20 pe-20">
+      <div style="height: 300px; width: 1000px">
+        <r-divider class="color-error my-10" inset></r-divider>
+        <r-divider class="color-one py-1 my-10" inset></r-divider>
+        <r-divider class="color-success py-2 my-10" inset></r-divider>
+        <r-divider class="color-warning py-3 my-10" inset></r-divider>
+        <r-divider class="color-two py-4 my-10" inset></r-divider>
+      </div>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='       <div style="height: 300px;">
+        <r-divider inset class="color-error my-10"></r-divider>
+        <r-divider inset class="color-one py-1 my-10"></r-divider>
+        <r-divider inset class="color-success py-2 my-10"></r-divider>
+        <r-divider inset class="color-warning py-3 my-10"></r-divider>
+        <r-divider inset class="color-two py-4 my-10"></r-divider>
+      </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>Vertical</span>
+    </h1>
+    <section class="d-flex h-space-between pt-12 ps-20 pe-20">
+      <div style="height: 200px">
+        <r-divider class="color-error mx-10" vertical></r-divider>
+        <r-divider class="color-one px-1 mx-10" vertical></r-divider>
+        <r-divider class="color-success px-2 mx-10" vertical></r-divider>
+        <r-divider class="color-warning px-3 mx-10" vertical></r-divider>
+        <r-divider class="color-two px-4 mx-10" vertical></r-divider>
+      </div>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='        <div style="height: 200px">
+        <r-divider vertical class="color-error mx-10"></r-divider>
+        <r-divider vertical class="color-one px-1 mx-10"></r-divider>
+        <r-divider vertical class="color-success px-2 mx-10"></r-divider>
+        <r-divider vertical class="color-warning px-3 mx-10"></r-divider>
+        <r-divider vertical class="color-two px-4 mx-10"></r-divider>
+      </div>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "divider",
+  data() {
+    return {
+      items: [
+        {
+          prop: "inset",
+          type: "Boolean",
+          default: "null",
+          description: "ویژگی inset یک ویژگی مختصر برای r-divider است",
+        },
+        {
+          prop: "vertical",
+          type: "Boolean",
+          default: "null",
+          description: "ویژگی vertical  یک خط عمودی را به ما می دهد.",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,136 @@
+<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-container
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small">r-container</r-btn>
+        provides the ability to
+        center and horizontally pad your site’s contents.
+      </p>
+    </div>
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "fullWidth": false,
+    "fill": false
+}
+}'
+        template='<r-container :full-Width="fullWidth" :fill="fill" ></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>FullWidth</span>
+    </h1>
+    <section class="d-flex h-space-between">
+      <r-container :full-Width="fullWidth" class="background-one">
+        <div>
+          <p class="title pa-4 color-white color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
+            accusantium assumenda atque commodi culpa cumque debitis harum illum
+            incidunt ipsum labore numquam odit, officia quam quisquam quo sed
+            sunt tempora tenetur, voluptatibus! Eius nisi nobis provident
+            suscipit voluptatum! Ad cumque deserunt expedita ipsum ratione vel
+            voluptatem. A adipisci amet dicta doloribus, eligendi ipsum magni
+            nihil nisi odit quis, similique sint? Assumenda dolorem eligendi
+            illo magni temporibus. Beatae, corporis deserunt eius eos fugit ipsa
+            maiores non porro quisquam quo reprehenderit sapiente ullam veniam.
+            Aperiam dignissimos ea excepturi, facere illum itaque iure
+            repellendus sequi sit? Adipisci animi at eius, eligendi maiores
+            perspiciatis?
+          </p>
+        </div>
+      </r-container>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='      <r-container class="background-one" :full-Width="fullWidth">
+        <div>
+          <p class="title pa-4 color-white color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad
+            dignissimos fugit hic pariatur quisquam sequi suscipit velit vitae
+            voluptatibus. Asperiores nemo neque optio totam vero. Amet nemo
+            saepe voluptas.
+          </p>
+        </div>
+      </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>Fill</span>
+    </h1>
+    <section>
+      <r-container :fill="fill" class="background-two">
+        <div>
+          <p class="title color-white pa-3 color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad
+            dignissimos fugit hic pariatur quisquam sequi suscipit velit vitae
+            voluptatibus. Asperiores nemo neque optio totam vero. Amet nemo
+            saepe voluptas.
+          </p>
+        </div>
+      </r-container>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='  <r-container class="background-two" :fill="fill">
+        <div>
+          <p class="title color-white pa-3 color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad
+            dignissimos fugit hic pariatur quisquam sequi suscipit velit vitae
+            voluptatibus. Asperiores nemo neque optio totam vero. Amet nemo
+            saepe voluptas.
+          </p>
+        </div>
+      </r-container>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "container",
+  data() {
+    return {
+      items: [
+        {
+          prop: "fullWidth",
+          type: "Boolean",
+          default: "null",
+          description:
+              "Full width sections are great for separating content on a page and for adding visual appeal. ",
+        },
+        {
+          prop: "fill",
+          type: "Boolean",
+          default: "null",
+          description: "the fill page (100% width & 100% height)",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,135 @@
+<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-container
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small">r-container</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 {
+    "fullWidth": false,
+    "fill": false
+}
+}'
+        template='<r-container :full-Width="fullWidth" :fill="fill" ></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>FullWidth</span>
+    </h1>
+    <section class="d-flex h-space-between">
+      <r-container :full-Width="fullWidth" class="background-one">
+        <div>
+          <p class="title pa-4 color-white color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
+            accusantium assumenda atque commodi culpa cumque debitis harum illum
+            incidunt ipsum labore numquam odit, officia quam quisquam quo sed
+            sunt tempora tenetur, voluptatibus! Eius nisi nobis provident
+            suscipit voluptatum! Ad cumque deserunt expedita ipsum ratione vel
+            voluptatem. A adipisci amet dicta doloribus, eligendi ipsum magni
+            nihil nisi odit quis, similique sint? Assumenda dolorem eligendi
+            illo magni temporibus. Beatae, corporis deserunt eius eos fugit ipsa
+            maiores non porro quisquam quo reprehenderit sapiente ullam veniam.
+            Aperiam dignissimos ea excepturi, facere illum itaque iure
+            repellendus sequi sit? Adipisci animi at eius, eligendi maiores
+            perspiciatis?
+          </p>
+        </div>
+      </r-container>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='      <r-container class="background-one" :full-Width="fullWidth">
+        <div>
+          <p class="title pa-4 color-white color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad
+            dignissimos fugit hic pariatur quisquam sequi suscipit velit vitae
+            voluptatibus. Asperiores nemo neque optio totam vero. Amet nemo
+            saepe voluptas.
+          </p>
+        </div>
+      </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>Fill</span>
+    </h1>
+    <section>
+      <r-container :fill="fill" class="background-two">
+        <div>
+          <p class="title color-white pa-3 color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad
+            dignissimos fugit hic pariatur quisquam sequi suscipit velit vitae
+            voluptatibus. Asperiores nemo neque optio totam vero. Amet nemo
+            saepe voluptas.
+          </p>
+        </div>
+      </r-container>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  }
+}"
+        template='  <r-container class="background-two" :fill="fill">
+        <div>
+          <p class="title color-white pa-3 color-black-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad
+            dignissimos fugit hic pariatur quisquam sequi suscipit velit vitae
+            voluptatibus. Asperiores nemo neque optio totam vero. Amet nemo
+            saepe voluptas.
+          </p>
+        </div>
+      </r-container>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "container",
+  data() {
+    return {
+      items: [
+        {
+          prop: "fullWidth",
+          type: "Boolean",
+          default: "null",
+          description: "تمام عرض",
+        },
+        {
+          prop: "fill",
+          type: "Boolean",
+          default: "null",
+          description: "پر کردن تمام صفحه ( ۱۰۰٪ عرض و ۱۰۰٪ ارتفاع)",
+        },
+      ],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/container/row/en.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 ps-4 pb-1 py-4 br-lg">
+        Sub-component used to create rows
+      </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: "grid dense",
+        },
+        {
+          prop: "noGutters",
+          type: "Boolean",
+          default: "null",
+          description: "Use the noGutters to remove the gutters from a row",
+        },
+      ],
+    };
+  },
+};
+</script>