renusify 2.1.5 → 2.1.8

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

@@ -0,0 +1,433 @@
+<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-modal
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        کامپوننت
+        <r-btn readonly size="small"> r-modal</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 {
+    "modelValue": false,
+    "routeHistory": "modal1",
+    "bottom": false,
+    "noOverlay": false,
+    "fullWidth": false,
+    "fullHeight": false,
+    "maxWidth": null,
+    "maxHeight": null,
+    "minWidth": true,
+    "flat": false,
+    "closable": false,
+    "closebtn": true,
+    "color": null,
+    "animate": "scale"
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-btn @click="modelValue=true">open modal
+</r-btn>
+<r-modal v-model="modelValue" :routeHistory="routeHistory" :bottom="bottom" :no-Overlay="noOverlay" :full-Width="fullWidth" :full-Height="fullHeight" :max-Width="maxWidth" :max-Height="maxHeight" :min-Width="minWidth" :flat="flat" :closable="closable" :closebtn="closebtn" :color="color" :animate="animate" @update:model-Value="log(`update:modelValue`,$event)" >
+  <r-card class="pa-10 text-center">
+    <h1>modal title</h1>
+    <p class="mt-5">modal body</>
+  </r-card>
+</r-modal>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6 text-center">
+      <r-btn outlined @click="show = true">Click Me</r-btn>
+      <r-modal v-model="show">
+        <r-container class="background-one">
+          <r-row>
+            <r-col class="col-12 text-center">
+              <h2 class="display-5">login</h2>
+              <r-divider class="my-3 color-warning"></r-divider>
+            </r-col>
+            <r-col class="col-12">
+              {{ text || $t("body", "renusify") }}
+            </r-col>
+          </r-row>
+        </r-container>
+      </r-modal>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  show: false,
+  }
+}"
+        template='
+       <div>  <r-btn @click="show = true" outlined>Click Me</r-btn>
+      <r-modal v-model="show">
+        <r-container class="background-one">
+          <r-row>
+            <r-col class="col-12 text-center">
+              <h2 class="display-5">login</h2>
+              <r-divider class="my-3 color-warning"></r-divider>
+            </r-col>
+            <r-col class="col-12">
+              {{ text || $t("body", "renusify") }}
+            </r-col>
+          </r-row>
+        </r-container>
+      </r-modal> </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6 text-center">
+      <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+        PROP / <span>Bottom</span>
+      </h1>
+      <r-btn outlined @click="showBot = true">Click Me</r-btn>
+      <r-modal v-model="showBot" bottom>
+        <r-card>
+          <r-container>
+            <r-row class="text-center">
+              <r-col class="col-10">
+                <h1 class="color-info pa-2">login</h1>
+                <r-divider class="my-3 color-warning"></r-divider>
+                <r-form v-model="valid" class="px-4 pb-4">
+                  <r-text-input
+                      :label="$t('FirstName', 'renusify')"
+                      :rules="['required']"
+                  ></r-text-input>
+                  <r-text-input
+                      :label="$t('lastName', 'renusify')"
+                      :rules="['required']"
+                  ></r-text-input>
+                </r-form>
+              </r-col>
+            </r-row>
+          </r-container>
+        </r-card>
+      </r-modal>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  showBot: false,
+  }
+}"
+        template='
+       <div>
+           <r-btn @click="showBot = true" outlined>Click Me</r-btn>
+      <r-modal v-model="showBot" bottom>
+      <r-card>
+        <r-container>
+          <r-row class="text-center">
+            <r-col class="col-10">
+              <r-card>
+                <h1 class="color-info pa-2">login</h1>
+                <r-divider class="my-3 color-warning"></r-divider>
+                <r-form v-model="valid" class="px-4 pb-4">
+                  <r-text-input
+                    :label="$t(`FirstName`, `renusify`)"
+                    :rules="[`required`]"
+                  ></r-text-input>
+                  <r-text-input
+                    :label="$t(`lastName`, `renusify`)"
+                    :rules="[`required`]"
+                  ></r-text-input>
+                </r-form>
+              </r-card>
+            </r-col>
+          </r-row>
+        </r-container>
+        </r-card>
+      </r-modal>
+              </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+        PROP / <span>NoOverlay</span>
+      </h1>
+      <r-btn outlined @click="showOver = true">Click</r-btn>
+      <r-modal v-model="showOver" noOverlay>
+        <r-card class="font-italic px-4 py-6">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias eius
+          id impedit incidunt nisi perspiciatis sunt. Asperiores culpa
+          doloribus, dolorum incidunt iure maxime, nulla quibusdam sequi
+          voluptate voluptates voluptatibus.
+        </r-card>
+      </r-modal>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  showOver: false,
+  }
+}"
+        template='
+       <div>
+            <r-btn @click="showOver = true" outlined>Click</r-btn>
+      <r-modal v-model="showOver" noOverlay>
+        <r-card class="font-italic px-4 py-6">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias eius
+          id impedit incidunt nisi perspiciatis sunt. Asperiores culpa
+          doloribus, dolorum incidunt iure maxime, nulla quibusdam sequi
+          voluptate voluptates voluptatibus.
+        </r-card>
+      </r-modal>
+              </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+        PROP / <span>FullWidth</span> / <span>FullHeight</span>
+      </h1>
+      <r-btn outlined @click="show2 = true">Click</r-btn>
+      <r-modal v-model="show2" fullHeight fullWidth>
+        <r-card class="h-full">
+          <r-container class="background-one">
+            <r-row>
+              <r-col class="col-12 text-center">
+                <h2 class="display-5">login</h2>
+                <r-divider class="my-3 color-warning"></r-divider>
+              </r-col>
+              <r-col class="col-12">
+                {{ text || $t("body", "renusify") }}
+              </r-col>
+            </r-row>
+          </r-container>
+        </r-card>
+      </r-modal>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  show: false,
+  }
+}"
+        template='
+       <div><r-btn @click="show = true" outlined>Click</r-btn>
+      <r-modal v-model="show" fullHeight fullWidth>
+      <r-card class="h-full">
+        <r-container class="background-one">
+          <r-row>
+            <r-col class="col-12 text-center">
+              <h2 class="display-5">login</h2>
+              <r-divider class="my-3 color-warning"></r-divider>
+            </r-col>
+            <r-col class="col-12">
+              {{ text || $t("body", "renusify") }}
+            </r-col>
+          </r-row>
+        </r-container>
+        </r-card>
+      </r-modal>
+              </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pt-6">
+      <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+        PROP / <span>Bottom</span>
+      </h1>
+      <r-btn outlined @click="showCard = true">Click Me</r-btn>
+      <r-modal v-model="showCard" color="background-one">
+        <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+          Select Country
+        </h1>
+        <section class="d-flex h-space-between pt-3 px-20">
+          <r-card class="px-6 py-4">
+            <r-list
+                :items="[
+                { name: 'Egypt' },
+                { name: 'Austrian Empire ' },
+                { name: 'Japan' },
+                { name: 'Mexico' },
+                { name: 'Iran' },
+                { name: 'France' },
+              ]"
+                multiple
+            >
+            </r-list>
+          </r-card>
+        </section>
+      </r-modal>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+  showCard: false,
+  }
+}"
+        template='
+       <div>
+            <r-btn @click="showCard = true" outlined>Click Me</r-btn>
+      <r-modal v-model="showCard" color="background-one">
+        <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+          Select Country
+        </h1>
+        <section class="d-flex h-space-between pt-3 px-20">
+          <r-card class="px-6 py-4">
+            <r-list
+              :items="[
+                { name: `Egypt` },
+                { name: `Austrian Empire ` },
+                { name: `Japan` },
+                { name: `Mexico` },
+                { name: `Iran` },
+                { name: `France` },
+              ]"
+              multiple
+            >
+            </r-list>
+          </r-card>
+        </section>
+      </r-modal>
+              </div>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "modal",
+  data() {
+    return {
+      valid: false,
+      show: false,
+      show2: false,
+      showBot: false,
+      showOver: false,
+      showCard: false,
+      props: [
+        {
+          prop: "modelValue",
+          type: "Boolean",
+          default: "null",
+          description: "",
+        },
+        {
+          prop: "bottom",
+          type: "Boolean",
+          default: "null",
+          description: "model در پایین صفحه قرار می گیرد ",
+        },
+        {
+          prop: "noOverlay",
+          type: "Boolean",
+          default: "null",
+          description: "یک حالت کدر ایجاد می کند ",
+        },
+        {
+          prop: "fullWidth",
+          type: "Boolean",
+          default: "null",
+          description: "تمام عرض",
+        },
+        {
+          prop: "routeHistory",
+          type: "String",
+          default: "null",
+          description: "استفاده از تاریخچه مسیر برای نمایش مودال",
+        },
+        {
+          prop: "fullHeight",
+          type: "Boolean",
+          default: "null",
+          description: "تمام ارتفاع",
+        },
+        {
+          prop: "maxWidth",
+          type: "String",
+          default: "null",
+          description: "حداکثر عرض",
+        },
+        {
+          prop: "maxHeight",
+          type: "String",
+          default: "null",
+          description: "حداکثر ارتغاع",
+        },
+        {
+          prop: "minWidth",
+          type: "Boolean",
+          default: "true",
+          description: "حداقل عرض",
+        },
+        {
+          prop: "flat",
+          type: "Boolean",
+          default: "null",
+          description: "کادر را تخت می کند",
+        },
+        {
+          prop: "closable",
+          type: "Boolean",
+          default: "null",
+          description: "هرجای از صفحه را کلیک کنید بسته می شود ",
+        },
+        {
+          prop: "closebtn",
+          type: "Boolean",
+          default: "true",
+          description: "دکمه بستن است که می تونید آن را غیر فعال کنی",
+        },
+        {
+          prop: "color",
+          type: "String",
+          default: "null",
+          description: "رنگ model",
+        },
+        {
+          prop: "animate",
+          type: "String",
+          default: "scale",
+          description: "نوع باز و بسته شدن model",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/notify/en.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-notify
+      </h1>
+    </div>
+  </section>
+  <br/>
+  <section>
+    <h1 class="font-weight-bold color-white title ps-4 pt-1 pb-1 br-sm">
+      Examples for r-notify
+    </h1>
+    <div>
+      برای نمایش ییام ها باید ابتدا در قسمت تنظیمات renusify در هنگام نصب مقدار
+      useNotify را برابر true قرار دهید.
+    </div>
+    <table-props
+        :items="[
+        {
+          prop: 'notifyLeft',
+          type: 'Boolean',
+          default: 'false',
+          description: 'پیام های اطلاع رسانی را در سمت چپ صفحه نمایش می دهد.',
+        },
+        {
+          prop: 'notifyTop',
+          type: 'Boolean',
+          default: 'false',
+          description: 'پیام های اطلاع رسانی را در بالای صفحه نمایش می دهد.',
+        },
+        {
+          prop: 'permanent',
+          type: 'Boolean',
+          default: 'false',
+          description: 'نمایش دائمی یبام ها',
+        },
+        {
+          prop: 'status',
+          type: 'String',
+          default: 'info',
+          description: 'رنگ پیام ها',
+        },
+        {
+          prop: 'width',
+          type: 'String',
+          default: '350px',
+          description: 'عرض پیام ها',
+        },
+        {
+          prop: 'timeout',
+          type: 'Number',
+          default: '4000',
+          description: 'زمان نمایش پیام ها',
+        },
+      ]"
+    ></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "msg": {"head":"title msg","body":"this is a message."}
+ }
+},
+methods:{
+  notify(status){
+    this.$notify(this.msg,{
+    "timeout":5000,
+      "status":status,
+      "permanent":false,
+      width:"300px",
+      on_close_all:()=>{
+        console.log("close all")
+      },
+      on_close:()=>{
+        console.log("close")
+      },
+      on_click:()=>{
+        console.log("click")
+      }
+    });
+  }
+}'
+        template='<r-notify>
+  <template v-slot="{data}">
+    <div>
+      <div class="title">{{data.content.head}}</div>
+      <div>{{data.content.body}}</div>
+    </div>
+  </template>
+</r-notify>
+<r-btn @click="notify(`info`)">show info</r-btn>
+<r-btn @click="notify(`error`)">show error</r-btn>
+<r-btn @click="notify(`success`)">show success</r-btn>
+<r-btn @click="notify(`warning`)">show warning</r-btn>
+'
+    >
+    </r-code-editor>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "app",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/component/notify/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-notify
+      </h1>
+    </div>
+  </section>
+  <br/>
+  <section>
+    <h1 class="font-weight-bold color-white title ps-4 pt-1 pb-1 br-sm">
+      مثالی برای نمایش ییام
+    </h1>
+    <div>
+      برای نمایش ییام ها باید ابتدا در قسمت تنظیمات renusify در هنگام نصب مقدار
+      useNotify را برابر true قرار دهید.
+    </div>
+    <table-props
+        :items="[
+        {
+          prop: 'notifyLeft',
+          type: 'Boolean',
+          default: 'false',
+          description: 'پیام های اطلاع رسانی را در سمت چپ صفحه نمایش می دهد.',
+        },
+        {
+          prop: 'notifyTop',
+          type: 'Boolean',
+          default: 'false',
+          description: 'پیام های اطلاع رسانی را در بالای صفحه نمایش می دهد.',
+        },
+        {
+          prop: 'permanent',
+          type: 'Boolean',
+          default: 'false',
+          description: 'نمایش دائمی یبام ها',
+        },
+        {
+          prop: 'status',
+          type: 'String',
+          default: 'info',
+          description: 'رنگ پیام ها',
+        },
+        {
+          prop: 'width',
+          type: 'String',
+          default: '350px',
+          description: 'عرض پیام ها',
+        },
+        {
+          prop: 'timeout',
+          type: 'Number',
+          default: '4000',
+          description: 'زمان نمایش پیام ها',
+        },
+      ]"
+    ></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "msg": {"head":"title msg","body":"this is a message."}
+ }
+},
+methods:{
+  notify(status){
+    this.$notify(this.msg,{
+    "timeout":5000,
+      "status":status,
+      "permanent":false,
+      width:"300px",
+      on_close_all:()=>{
+        console.log("close all")
+      },
+      on_close:()=>{
+        console.log("close")
+      },
+      on_click:()=>{
+        console.log("click")
+      }
+    });
+  }
+}'
+        template='<r-notify>
+  <template v-slot="{data}">
+    <div>
+      <div class="title">{{data.content.head}}</div>
+      <div>{{data.content.body}}</div>
+    </div>
+  </template>
+</r-notify>
+<r-btn @click="notify(`info`)">show info</r-btn>
+<r-btn @click="notify(`error`)">show error</r-btn>
+<r-btn @click="notify(`success`)">show success</r-btn>
+<r-btn @click="notify(`warning`)">show warning</r-btn>
+'
+    >
+    </r-code-editor>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "app",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>