renusify 2.1.5 → 2.1.8

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

@@ -0,0 +1,434 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light ps-4 pb-1 pt-1 br-lg">
+        r-confirm
+      </h1>
+    </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 {
+    "title": null,
+    "text": null,
+    "cancelText": null,
+    "confirmText": null,
+    "modelValue": false,
+    "hard": false
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e);
+  this.modelValue=false
+ }
+}'
+        template='<r-btn @click="modelValue=true">confirm</r-btn><r-confirm :title="title" :text="text" :cancel-Text="cancelText" :confirm-Text="confirmText" v-model="modelValue" :hard="hard" @accept="log(`accept`,$event)" @cancel="log(`cancel`,$event)" ></r-confirm>'
+    ></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-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Confirm</h3>
+        <span class="subtitle-1"
+        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
+          debitis eaque eligendi ex in iste numquam perferendis qui similique,
+          suscipit.</span
+        >
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+              class="color-success-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Confirm
+          </r-btn>
+          <r-btn
+              class="color-error-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Delete
+          </r-btn>
+        </div>
+        <r-confirm
+            v-model="changeKey"
+            @accept="del"
+            @cancel="cancel"
+        ></r-confirm>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+   changeKey: false,
+  }
+},  methods: {
+    del() {
+      console.log("del");
+      this.changeKey = false;
+    },
+    cancel() {
+      console.log("cancel");
+      this.changeKey = false;
+    },
+  },'
+        template='    <r-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Confirm</h3>
+        <span class="subtitle-1"
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
+          debitis eaque eligendi ex in iste numquam perferendis qui similique,
+          suscipit.</span
+        >
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+            class="color-success-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Confirm</r-btn
+          >
+          <r-btn
+            class="color-error-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Delete</r-btn
+          >
+        </div>
+        <r-confirm
+          v-model="changeKey"
+          @accept="del"
+          @cancel="cancel"
+        ></r-confirm>
+      </r-card>'
+    ></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>Hard</span>
+    </h1>
+    <p>
+      از کاربر کدی می خواهد که اگر کد را درست وارد کند باکس تایید فعال می شود در
+      غیر اینصورت غیر فعال خواهد بود
+    </p>
+    <section class="d-flex h-space-between pt-12 ps-20 pe-20">
+      <r-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Confirm</h3>
+        <span class="subtitle-1"
+        >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span
+        >
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+              class="color-success-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Confirm
+          </r-btn>
+          <r-btn
+              class="color-error-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Delete
+          </r-btn>
+        </div>
+        <r-confirm
+            v-model="changeKey"
+            hard
+            @accept="del"
+            @cancel="cancel"
+        ></r-confirm>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+   changeKey: false,
+  }
+},  methods: {
+    del() {
+      console.log("del");
+      this.changeKey = false;
+    },
+    cancel() {
+      console.log("cancel");
+      this.changeKey = false;
+    },
+  },'
+        template='     <r-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Confirm</h3>
+        <span class="subtitle-1"
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span
+        >
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+            class="color-success-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Confirm
+          </r-btn>
+          <r-btn
+            class="color-error-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Delete
+          </r-btn>
+        </div>
+        <r-confirm
+          v-model="changeKey"
+          @accept="del"
+          @cancel="cancel"
+          hard
+        ></r-confirm>
+      </r-card>'
+    ></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>title</span>
+    </h1>
+    <section class="d-flex h-space-between pt-12 ps-20 pe-20">
+      <r-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Are you sure</h3>
+        <span class="subtitle-1"
+        >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span
+        >
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+              class="color-success-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Confrim
+          </r-btn>
+          <r-btn
+              class="color-error-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Delete
+          </r-btn>
+        </div>
+        <r-confirm
+            v-model="changeKey"
+            title="Are you sure?"
+            @accept="del"
+            @cancel="cancel"
+        ></r-confirm>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+   changeKey: false,
+  }
+},  methods: {
+    del() {
+      console.log("del");
+      this.changeKey = false;
+    },
+    cancel() {
+      console.log("cancel");
+      this.changeKey = false;
+    },
+  },'
+        template='    <r-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Are you sure</h3>
+        <span class="subtitle-1"
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span
+        >
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+            class="color-success-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Confrim
+          </r-btn>
+          <r-btn
+            class="color-error-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Delete
+          </r-btn>
+        </div>
+        <r-confirm
+          v-model="changeKey"
+          @accept="del"
+          @cancel="cancel"
+          title="Are you sure?"
+        ></r-confirm>
+      </r-card>'
+    ></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>text</span>
+    </h1>
+    <section class="d-flex h-space-between pt-4 ps-20 pe-20">
+      <r-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Are you sure</h3>
+        <span class="subtitle-1">Are you sure, item will be remove?</span>
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+              class="color-success-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Confrim
+          </r-btn>
+          <r-btn
+              class="color-error-text"
+              outlined
+              rounded
+              @click="changeKey = true"
+          >Delete
+          </r-btn>
+        </div>
+        <r-confirm
+            v-model="changeKey"
+            text="Are you sure, item will be remove?"
+            title="Are you sure?"
+            @accept="del"
+            @cancel="cancel"
+        ></r-confirm>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+   changeKey: false,
+  }
+},  methods: {
+    del() {
+      console.log("del");
+      this.changeKey = false;
+    },
+    cancel() {
+      console.log("cancel");
+      this.changeKey = false;
+    },
+  },'
+        template='     <r-card class="py-4 px-6 text-center">
+        <h3 class="pb-3">Are you sure</h3>
+        <span class="subtitle-1">Are you sure, item will be remove?</span>
+        <div class="d-flex h-space-around mt-3">
+          <r-btn
+            class="color-success-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Confrim
+          </r-btn>
+          <r-btn
+            class="color-error-text"
+            outlined
+            rounded
+            @click="changeKey = true"
+            >Delete
+          </r-btn>
+        </div>
+        <r-confirm
+          v-model="changeKey"
+          @accept="del"
+          @cancel="cancel"
+          title="Are you sure?"
+          text="Are you sure, item will be remove?"
+        ></r-confirm>
+      </r-card>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "confirm",
+  data() {
+    return {
+      changeKey: false,
+      props: [
+        {
+          prop: "title",
+          type: "String",
+          default: "null",
+          description: "متن عنوان کادر",
+        },
+        {
+          prop: "text",
+          type: "String",
+          default: "null",
+          description: "نمایش متن ",
+        },
+        {
+          prop: "cancelText",
+          type: "String",
+          default: "null",
+          description: "متن cancel",
+        },
+        {
+          prop: "confirmText",
+          type: "String",
+          default: "null",
+          description: "متن confirm",
+        },
+        {
+          prop: "modelValue",
+          type: "Boolean",
+          default: "null",
+          description: "modelValue پیشفرض غیرفعال است . ",
+        },
+        {
+          prop: "hard",
+          type: "Boolean",
+          default: "null",
+          description: "یک کد را باید وارد کنید تا دکمه تایید ظاهر شود . ",
+        },
+      ],
+      events: [
+        {
+          event: "accept",
+          description: "برای حذف یک تابع روی دکمه تایید کلیک کنید.",
+        },
+        {event: "cancel", description: "دکمه  cancel فراخوانی شود "},
+      ],
+    };
+  },
+  methods: {
+    del() {
+      console.log("del");
+      this.changeKey = false;
+    },
+    cancel() {
+      console.log("cancel");
+      this.changeKey = false;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,68 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light ps-4 pb-1 pt-1 br-lg">r-col</h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small">r-col</r-btn>
+        is a content holder that must
+        be a direct child of
+        <r-btn readonly size="small">r-row</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 {}
+}"
+        template="<r-col ></r-col>"
+    ></r-code-editor>
+  </section>
+  <section class="pa-3 color-white">
+    <section>
+      <r-container>
+        <r-row class="ps-10 text-center">
+          <r-col class="col-12 color-warning">Renusify</r-col>
+          <r-col class="col-3 color-success my-2 mx-6">Python</r-col>
+          <r-col class="col-3 color-one my-2 mx-6">JavaScript</r-col>
+          <r-col class="col-3 color-black color-one-text my-2 mx-6">C++</r-col>
+          <r-col class="col-6 color-error">Php</r-col>
+          <r-col class="col-6 color-gradient-one-45">Java</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="ps-10 text-center">
+          <r-col class="col-12 color-gradient-one-45 ">Renusify</r-col>
+          <r-col class="col-3 color-error  my-2 mx-6">Python</r-col>
+          <r-col class="col-3 color-one my-2 mx-6">JavaScript</r-col>
+          <r-col class="col-3 color-black color-one-text my-2 mx-6">C++</r-col>
+          <r-col class="col-6 color-success">Php</r-col>
+          <r-col class="col-6 color-warning">Java</r-col>
+        </r-row>
+      </r-container>'
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+export default {
+  name: "col",
+  data() {
+    return {
+      items: [],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <section>
+    <div class="color-white mb-2">
+      <h1 class="display-3 font-weight-light ps-4 pb-1 pt-1 br-lg">r-col</h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small">r-col</r-btn>
+        دارای محتوای متنی است . باید
+        مستقیم فرزند
+        <r-btn readonly size="small">r-row</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 {}
+}"
+        template="<r-col ></r-col>"
+    ></r-code-editor>
+  </section>
+  <section class="pa-3 color-white">
+    <section>
+      <r-container>
+        <r-row class="ps-10 text-center">
+          <r-col class="col-12 color-warning">Renusify</r-col>
+          <r-col class="col-3 color-success my-2 mx-6">Python</r-col>
+          <r-col class="col-3 color-one my-2 mx-6">JavaScript</r-col>
+          <r-col class="col-3 color-black color-one-text my-2 mx-6">C++</r-col>
+          <r-col class="col-6 color-error">Php</r-col>
+          <r-col class="col-6 color-gradient-one-45">Java</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="ps-10 text-center">
+          <r-col class="col-12 color-gradient-one-45 ">Renusify</r-col>
+          <r-col class="col-3 color-error  my-2 mx-6">Python</r-col>
+          <r-col class="col-3 color-one my-2 mx-6">JavaScript</r-col>
+          <r-col class="col-3 color-black color-one-text my-2 mx-6">C++</r-col>
+          <r-col class="col-6 color-success">Php</r-col>
+          <r-col class="col-6 color-warning">Java</r-col>
+        </r-row>
+      </r-container>'
+    ></r-code-editor>
+  </section>
+</template>
+<script>
+export default {
+  name: "col",
+  data() {
+    return {
+      items: [],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,133 @@
+<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>
+        in their simplest form
+        display a horizontal line.
+      </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:
+              "The inset property is a shorthand property for r-divider ",
+        },
+        {
+          prop: "vertical",
+          type: "Boolean",
+          default: "null",
+          description:
+              "The vertical property sets the vertical alignment of an element",
+        },
+      ],
+    };
+  },
+};
+</script>