renusify 2.1.7 → 2.1.8

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

@@ -0,0 +1,214 @@
+<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">
+        <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 {
+    "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: "مقدار آن را می توانید تعیین کنید ",
+        },
+        {prop: "color", type: "String", default: "null", description: "رنگ "},
+        {
+          prop: "progressStyle",
+          type: "String,Object,Array",
+          default: "null",
+          description: "کلاس و استایل دادن به progress",
+        },
+        {
+          prop: "showPercent",
+          type: "Boolean",
+          default: "null",
+          description: "درصد مقدار progress را نشان می دهد",
+        },
+        {
+          prop: "outlined",
+          type: "Boolean",
+          default: "null",
+          description: "ارتفاع بهش می دهد . ",
+        },
+        {
+          prop: "rounded",
+          type: "Boolean",
+          default: "null",
+          description: " گوشه هایش گرد می شوند ",
+        },
+        {
+          prop: "showBackground",
+          type: "Boolean",
+          default: "null",
+          description: "رنگ پیش زمینه را نشان می دهد",
+        },
+        {
+          prop: "size",
+          type: "String",
+          default: "small",
+          description: "اندازه ",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,185 @@
+<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-search-box
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        Text field components are used for collecting user provided information.
+      </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 {
+    "closable": false,
+    "notFoundMsg": "Cant Find Anything :(",
+    "label": "search",
+    "url": "home/product/search",
+    "query": "search",
+    "inputControlClass": null,
+    "modelValue": null,
+    "noOverlay": false,
+    "openToTop": false,
+    "headers": null,
+    "categories":[{name:"laptop",value:"a"},{name:"mobile",value:"b"},{name:"pc",value:"c"}]
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-search-box :label="label" :categories="categories" :closable="closable" :not-Found-Msg="notFoundMsg" :url="url" :query="query" :input-Control-Class="inputControlClass" v-model="modelValue" :no-Overlay="noOverlay" :open-To-Top="openToTop" :headers="headers" @update:model-Value="log(`update:modelValue`,$event)" @select="log(`select`,$event)" ></r-search-box>'
+    ></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">Search Box</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-search-box url="home/product/search"></r-search-box>
+      </r-card>
+      <r-card class="pa-4 color-warning-text w-45" outlined>
+        <p>closable</p>
+        <r-search-box closable url="home/product/search"></r-search-box>
+      </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-search-box url="home/product/search"></r-search-box>
+	</r-card>
+	<r-card outlined class="pa-4 color-warning-text w-45">
+		<p>closable</p>
+		<r-search-box closable url="home/product/search"></r-search-box>
+	</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">
+      PROP / <span>NotFoundMsg</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6">
+      <r-card class="pa-4 color-two-text w-45" outlined>
+        <p>NotFoundMsg</p>
+        <r-search-box
+            notFoundMsg="nothing to show :("
+            url="home/product/search"
+        >
+        </r-search-box>
+      </r-card>
+      <r-card class="pa-4 color-warning-text w-45" outlined>
+        <p>Default</p>
+        <r-search-box url="home/product/search"></r-search-box>
+      </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>NotFoundMsg</p>
+        <r-search-box notFoundMsg="nothing to show :(" url="home/product/search"> </r-search-box>
+      </r-card>
+      <r-card outlined class="pa-4 color-warning-text w-45">
+        <p>Default</p>
+        <r-search-box url="home/product/search"> </r-search-box>
+      </r-card>
+        </div>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "search_box",
+  data() {
+    return {
+      props: [
+        {
+          prop: "closable",
+          type: "Boolean",
+          default: "null",
+          description: "The ability to close it",
+        },
+        {
+          prop: "notFoundMsg",
+          type: "String",
+          default: "Can't Find Anything :(",
+          description: "Message not found ",
+        },
+        {
+          prop: "label",
+          type: "String",
+          default: "null",
+          description: "label",
+        },
+        {
+          prop: "inputControlClass",
+          type: "String,Object,Array",
+          default: "null",
+          description: "Classes for input",
+        },
+        {prop: "url", type: "String", default: "null", description: "Url"},
+        {
+          prop: "query",
+          type: "String",
+          default: "search",
+          description: "What should be written inside the box",
+        },
+
+        {
+          prop: "modelValue",
+          type: "String,Number",
+          default: "null",
+          description: "The value inside the box",
+        },
+        {
+          prop: "noOverlay",
+          type: "Boolean",
+          default: "null",
+          description: "It creates a murky situation.",
+        },
+        {
+          prop: "openToTop",
+          type: "Boolean",
+          default: "null",
+          description: "Open at the top of the page.",
+        },
+        {
+          prop: "headers",
+          type: "Object",
+          default: "null",
+          description: "Headers",
+        },
+        {
+          prop: "categories",
+          type: "Object",
+          default: "null",
+          description: "categories of search",
+        },
+      ],
+      events: [
+        {event: "update:modelValue", description: ""},
+        {event: "select", description: ""},
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,178 @@
+<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-search-box
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        اجزای جعبه متنی برای جمع آوری اطلاعاتی که کاربر ارائه می دهد استفاده می
+        شود.
+      </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 {
+    "closable": false,
+    "notFoundMsg": "Cant Find Anything :(",
+    "label": "جستجو",
+    "url": "home/product/search",
+    "query": "search",
+    "inputControlClass": null,
+    "modelValue": null,
+    "noOverlay": false,
+    "openToTop": false,
+    "headers": null,
+    "categories":[{name:"laptop",value:"a"},{name:"mobile",value:"b"},{name:"pc",value:"c"}]
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-search-box :label="label" :categories="categories" :closable="closable" :not-Found-Msg="notFoundMsg" :url="url" :query="query" :input-Control-Class="inputControlClass" v-model="modelValue" :no-Overlay="noOverlay" :open-To-Top="openToTop" :headers="headers" @update:model-Value="log(`update:modelValue`,$event)" @select="log(`select`,$event)" ></r-search-box>'
+    ></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">Search Box</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-search-box url="home/product/search"></r-search-box>
+      </r-card>
+      <r-card class="pa-4 color-warning-text w-45" outlined>
+        <p>closable</p>
+        <r-search-box closable url="home/product/search"></r-search-box>
+      </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-search-box url="home/product/search"></r-search-box>
+	</r-card>
+	<r-card outlined class="pa-4 color-warning-text w-45">
+		<p>closable</p>
+		<r-search-box closable url="home/product/search"></r-search-box>
+	</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">
+      PROP / <span>NotFoundMsg</span>
+    </h1>
+    <section class="d-flex h-space-around pt-6">
+      <r-card class="pa-4 color-two-text w-45" outlined>
+        <p>NotFoundMsg</p>
+        <r-search-box
+            notFoundMsg="nothing to show :("
+            url="home/product/search"
+        >
+        </r-search-box>
+      </r-card>
+      <r-card class="pa-4 color-warning-text w-45" outlined>
+        <p>Default</p>
+        <r-search-box url="home/product/search"></r-search-box>
+      </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>NotFoundMsg</p>
+        <r-search-box notFoundMsg="nothing to show :(" url="home/product/search"> </r-search-box>
+      </r-card>
+      <r-card outlined class="pa-4 color-warning-text w-45">
+        <p>Default</p>
+        <r-search-box url="home/product/search"> </r-search-box>
+      </r-card>
+        </div>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "search_box",
+  data() {
+    return {
+      props: [
+        {
+          prop: "closable",
+          type: "Boolean",
+          default: "null",
+          description: "قابلیت بسته شدن ",
+        },
+        {
+          prop: "notFoundMsg",
+          type: "String",
+          default: "Can't Find Anything :(",
+          description: "پیام برای چیزی یافت نشد ",
+        },
+        {prop: "url", type: "String", default: "null", description: "سورس "},
+        {
+          prop: "query",
+          type: "String",
+          default: "search",
+          description: "در داخل کادر چه متنی نوشته شود",
+        },
+        {
+          prop: "inputControlClass",
+          type: "String,Object,Array",
+          default: "null",
+          description: "کلاس های مختلف Input",
+        },
+        {
+          prop: "modelValue",
+          type: "String,Number",
+          default: "null",
+          description: "مقدار داخل کادر ",
+        },
+        {
+          prop: "noOverlay",
+          type: "Boolean",
+          default: "null",
+          description: "یک حالت کدر ایجاد می کند",
+        },
+        {
+          prop: "openToTop",
+          type: "Boolean",
+          default: "null",
+          description: "باز شدن در بالای صفحه",
+        },
+        {
+          prop: "headers",
+          type: "Object",
+          default: "null",
+          description: "هدر ",
+        },
+        {
+          prop: "categories",
+          type: "Object",
+          default: "null",
+          description: "دسته بندی جستحوها",
+        },
+      ],
+      events: [
+        {event: "update:modelValue", description: ""},
+        {event: "select", description: ""},
+      ],
+    };
+  },
+};
+</script>