renusify 2.1.7 → 2.1.8

package/docs/src/views/index/v1/component/form/date_input/en.vue

@@ -0,0 +1,242 @@
+<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-date-input
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-date-input</r-btn>
+        component that allows users to select a date or a range of dates.
+      </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": null,
+    "lang": null,
+    "readonly": false,
+    "withTime": true
+}
+},
+methods:{
+  isDateDisabled(date){
+      if(date.getDay()===3){
+        return true;
+      }
+      return false
+    },
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-date-input v-model="modelValue" :lang="lang" :readonly="readonly" :with-Time="withTime" :is-Date-Disabled="isDateDisabled"></r-date-input>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>ModelValue</span>
+    </h1>
+    <section class="pa-4" style="border: 1px #0aa6ee solid">
+      <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+              v-model="info.start"
+              :label="$t('Select Date')"
+          ></r-date-input>
+          <r-date-input
+              v-model="info.end"
+              :label="$t('Select Date Range')"
+          ></r-date-input>
+          <r-btn block class="my-4 color-info">Submit</r-btn>
+        </r-form>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+      valid: false,
+      info: {},
+
+  }
+}"
+        template='
+       <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input :label="$t(`Select Date`)" v-model="info.start"></r-date-input>
+          <r-date-input :label="$t(`Select Date Range`)" v-model="info.end"></r-date-input>
+          <r-btn class="my-4 color-info" block>Submit</r-btn>
+        </r-form>
+      </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-6 br-sm">
+      PROP / <span>Readonly</span>
+    </h1>
+    <section class="pa-4" style="border: 1px #28ee0a solid">
+      <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+              v-model="info.start"
+              :label="$t('Select Date')"
+              readonly
+          ></r-date-input>
+          <r-date-input
+              v-model="info.end"
+              :label="$t('Select Date Range')"
+              readonly
+          ></r-date-input>
+          <r-btn block class="my-4 color-success">Submit</r-btn>
+        </r-form>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+      valid: false,
+      info: {},
+
+  }
+}"
+        template='
+  <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input :label="$t(`Select Date`)" v-model="info.start"></r-date-input>
+          <r-date-input :label="$t(`Select Date Range`)" v-model="info.end"></r-date-input>
+          <r-btn class="my-4 color-info" block>Submit</r-btn>
+        </r-form>
+      </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-6 br-sm">
+      PROP / <span>IsDateDisabled</span>
+    </h1>
+    <section class="pa-4" style="border: 1px #ee710a solid">
+      <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+              v-model="info.start"
+              :isDateDisabled="isDateDisabled"
+              :label="$t('Select Date')"
+          ></r-date-input>
+          <r-date-input
+              v-model="info.end"
+              :isDateDisabled="isDateDisabled"
+              :label="$t('Select Date Range')"
+          ></r-date-input>
+          <r-btn block class="my-4 color-warning">Submit</r-btn>
+        </r-form>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+      valid: false,
+      info: {}
+  }
+},
+methods:{
+  isDateDisabled(date){
+        if(date.getDay()===3){
+          return true;
+        }
+        return false
+      }
+}"
+        template='
+ <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+            :isDateDisabled="isDateDisabled"
+            :label="$t(`Select Date`)"
+          ></r-date-input>
+          <r-date-input
+            isDateDisabled
+            :label="$t(`Select Date Range`)"
+          ></r-date-input>
+          <r-btn class="my-4 color-warning" block>Submit</r-btn>
+        </r-form>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "date_input",
+  data() {
+    return {
+      valid: false,
+      info: {},
+      isDateDisabled: (date) => {
+        if (date.getDay() === 2) {
+          return true;
+        }
+        return false;
+      },
+      props: [
+        {
+          prop: "modelValue",
+          type: "String",
+          default: "undefined",
+          description: "If the inputs are valid in the form, it becomes true.",
+        },
+        {
+          prop: "lang",
+          type: "String",
+          default: "undefined",
+          description: "Language",
+        },
+        {
+          prop: "readonly",
+          type: "Boolean",
+          default: "null",
+          description: "You can create circles with the rounded.",
+        },
+        {
+          prop: "withTime",
+          type: "Boolean",
+          default: "null",
+          description: "with time",
+        },
+        {
+          prop: "isDateDisabled",
+          type: "Function",
+          default: "() => false",
+          description: "is Date Disabled",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/form/date_input/fa.vue

@@ -0,0 +1,242 @@
+<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-date-input
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-date-input</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": null,
+    "lang": null,
+    "readonly": false,
+    "withTime": true
+}
+},
+methods:{
+  isDateDisabled(date){
+      if(date.getDay()===3){
+        return true;
+      }
+      return false
+    },
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-date-input v-model="modelValue" :lang="lang" :readonly="readonly" :with-Time="withTime" :is-Date-Disabled="isDateDisabled"></r-date-input>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>ModelValue</span>
+    </h1>
+    <section class="pa-4" style="border: 1px #0aa6ee solid">
+      <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+              v-model="info.start"
+              :label="$t('Select Date')"
+          ></r-date-input>
+          <r-date-input
+              v-model="info.end"
+              :label="$t('Select Date Range')"
+          ></r-date-input>
+          <r-btn block class="my-4 color-info">Submit</r-btn>
+        </r-form>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+      valid: false,
+      info: {},
+
+  }
+}"
+        template='
+       <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input :label="$t(`Select Date`)" v-model="info.start"></r-date-input>
+          <r-date-input :label="$t(`Select Date Range`)" v-model="info.end"></r-date-input>
+          <r-btn class="my-4 color-info" block>Submit</r-btn>
+        </r-form>
+      </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-6 br-sm">
+      PROP / <span>Readonly</span>
+    </h1>
+    <section class="pa-4" style="border: 1px #28ee0a solid">
+      <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+              v-model="info.start"
+              :label="$t('Select Date')"
+              readonly
+          ></r-date-input>
+          <r-date-input
+              v-model="info.end"
+              :label="$t('Select Date Range')"
+              readonly
+          ></r-date-input>
+          <r-btn block class="my-4 color-success">Submit</r-btn>
+        </r-form>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+      valid: false,
+      info: {},
+
+  }
+}"
+        template='
+  <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input :label="$t(`Select Date`)" v-model="info.start"></r-date-input>
+          <r-date-input :label="$t(`Select Date Range`)" v-model="info.end"></r-date-input>
+          <r-btn class="my-4 color-info" block>Submit</r-btn>
+        </r-form>
+      </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-6 br-sm">
+      PROP / <span>IsDateDisabled</span>
+    </h1>
+    <section class="pa-4" style="border: 1px #ee710a solid">
+      <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+              v-model="info.start"
+              :isDateDisabled="isDateDisabled"
+              :label="$t('Select Date')"
+          ></r-date-input>
+          <r-date-input
+              v-model="info.end"
+              :isDateDisabled="isDateDisabled"
+              :label="$t('Select Date Range')"
+          ></r-date-input>
+          <r-btn block class="my-4 color-warning">Submit</r-btn>
+        </r-form>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+      valid: false,
+      info: {}
+  }
+},
+methods:{
+  isDateDisabled(date){
+        if(date.getDay()===3){
+          return true;
+        }
+        return false
+      }
+}"
+        template='
+ <r-card class="px-5 py-8 text-center">
+        <h3>Datepicker Demo</h3>
+        <r-form v-model="valid">
+          <r-date-input
+            :isDateDisabled="isDateDisabled"
+            :label="$t(`Select Date`)"
+          ></r-date-input>
+          <r-date-input
+            isDateDisabled
+            :label="$t(`Select Date Range`)"
+          ></r-date-input>
+          <r-btn class="my-4 color-warning" block>Submit</r-btn>
+        </r-form>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "date_input",
+  data() {
+    return {
+      valid: false,
+      isDateDisabled: (date) => {
+        if (date.getDay() === 2) {
+          return true;
+        }
+        return false;
+      },
+      info: {},
+      props: [
+        {
+          prop: "modelValue",
+          type: "String",
+          default: "undefined",
+          description: "اگر input ها داخل فرم معتبر باشند true می شود .",
+        },
+        {
+          prop: "lang",
+          type: "String",
+          default: "undefined",
+          description: "زبان ",
+        },
+        {
+          prop: "readonly",
+          type: "Boolean",
+          default: "null",
+          description: "فیلد متن برای جمع آوری است .",
+        },
+        {
+          prop: "withTime",
+          type: "Boolean",
+          default: "null",
+          description: "زمان ",
+        },
+        {
+          prop: "isDateDisabled",
+          type: "Function",
+          default: "() => false",
+          description: " غیرفعال کردن تاریخ ",
+        },
+      ],
+      events: [{event: "update:modelValue", description: ""}],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/form/file_input/en.vue

@@ -0,0 +1,123 @@
+<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-file-input
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        The
+        <r-btn readonly size="small"> r-file-input</r-btn>
+        component is
+        input that provides for selecting files, showing detailed selection
+        information and upload progress.
+      </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 {
+    "uploadLink": null,
+    "accept": "*",
+    "size": 3,
+    "wPH": null,
+    "maxFileSize": null,
+    "meta": null,
+    "metaRequired": true
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-file-input :upload-Link="uploadLink" :accept="accept" :size="size" :w-P-H="wPH" :max-File-Size="maxFileSize" v-model="modelValue" :meta="meta" :meta-Required="metaRequired" @update:model-Value="log(`update:modelValue`,$event)" @add="log(`add`,$event)" ></r-file-input>'
+    ></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>Size</span>
+    </h1>
+    <section class="pa-4" style="border: 1px #0aa6ee solid">
+      <r-form v-model="valid">
+        <p class="px-5 display-5 color-one-text">Select a file</p>
+        <r-file-input :size="1"></r-file-input>
+        <h3 class="pa-2">Drop file here</h3>
+      </r-form>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script="data(){
+ return {
+      valid: false,
+      info: {},
+
+  }
+}"
+        template='
+      <r-form v-model="valid">
+        <p class="px-5 display-5 color-one-text">Select a file</p>
+        <r-file-input :size="1"></r-file-input>
+        <h3 class="pa-2">Drop file here</h3>
+      </r-form>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "file_input",
+  data() {
+    return {
+      props: [
+        {
+          prop: "uploadLink",
+          type: "String",
+          default: "undefined",
+          description: "The uploaded link.",
+        },
+        {prop: "accept", type: "String", default: "*", description: "Accept"},
+        {prop: "size", type: "Number", default: "3", description: "Size"},
+        {
+          prop: "wPH",
+          type: "Number,String,Array",
+          default: "null",
+          description: "width and height",
+        },
+        {
+          prop: "maxFileSize",
+          type: "Number",
+          default: "null",
+          description: "Maximum file size.",
+        },
+        {
+          prop: "modelValue",
+          type: "Array",
+          default: "[]",
+          description: "If the inputs are valid in the form, it becomes true.",
+        },
+        {prop: "meta", type: "Array", default: "null", description: "Meta"},
+        {
+          prop: "metaRequired",
+          type: "Boolean",
+          default: "true",
+          description: "Meta Required",
+        },
+      ],
+      events: [
+        {event: "update:modelValue", description: ""},
+        {event: "add", description: ""},
+      ],
+    };
+  },
+};
+</script>