renusify 2.1.5 → 2.1.8

package/docs/src/plugins/axios.js

@@ -0,0 +1,54 @@
+import axios from "axios";
+
+// Full config:  https://github.com/axios/axios#request-config
+axios.defaults.baseURL = `${
+  process.env.NODE_ENV === "production"
+    ? process.env.VUE_APP_API_production_URL
+    : process.env.VUE_APP_API_URL
+}/api`;
+axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+axios.defaults.headers.post["Content-Type"] =
+  "application/x-www-form-urlencoded";
+
+axios.interceptors.request.use(
+  (config) => {
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+axios.interceptors.response.use(
+  (response) => {
+    if (response.data) {
+      response.data = window.app.$helper.htmlDecode(response.data);
+      if (response.data.msg) {
+        window.app.$toast(window.app.$t(response.data.msg));
+      }
+    }
+    return response;
+  },
+  (error) => {
+    const res = error.response;
+    if (res && res.status === 307 && res.data.location) {
+      console.log("redirect to:" + res.data.location);
+      window.location.replace(res.data.location);
+    }
+
+    if (res && res.data.msg === "auth.failed") {
+      window.app.$toast(window.app.$t("auth.failed"), {
+        type: "error",
+      });
+    } else if (res && res.data.msg) {
+      window.app.$toast(window.app.$t(res.data.msg), {
+        type: "error",
+      });
+    }
+
+    return Promise.reject(error);
+  }
+);
+export default {
+  install: (app) => {
+    app.config.globalProperties.$axios = axios;
+  },
+};

package/docs/src/registerServiceWorker.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+
+import {register} from "register-service-worker";
+
+if (process.env.NODE_ENV === "production") {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+        "For more details, visit https://goo.gl/AFskqB"
+      );
+    },
+    registered() {
+      console.log("Service worker has been registered.");
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+      setTimeout(() => {
+        if (window.app) {
+          window.app.$toast(window.app.$t("new_content_please_refresh"), {
+            type: "info",
+            time: -1,
+            action: () => {
+              window.location.reload(true);
+            },
+            action_name: window.app.$t("ok"),
+            closable: false,
+          });
+        }
+      }, 2000);
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    },
+  });
+}

package/docs/src/router/index.js

@@ -0,0 +1,43 @@
+import {createRouter, createWebHistory} from "vue-router";
+
+import template from "../layouts/renusify";
+
+const notFound = () => import("../views/index/notFound/index");
+/* {{place new import}} */
+const pages = () => import("../views/index/pages");
+const routes = [
+  {
+    path: "/",
+    component: template,
+    children: [
+      {
+        path: "/",
+        name: "base",
+        component: pages,
+        props: true,
+      },
+      {
+        path: "/:version?/:lang?/:path?",
+        name: "pages",
+        component: pages,
+        props: true,
+      },
+      {path: "/:pathMatch(.*)*", name: "not_found", component: notFound},
+    ],
+  },
+];
+const router = createRouter({
+  history: createWebHistory(
+    process.env.NODE_ENV === "production"
+      ? process.env.API_production_URL
+      : process.env.API_URL
+  ),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return {behavior: "smooth", left: 0, top: 0};
+  },
+});
+export default router;

package/docs/src/views/index/notFound/en.vue

@@ -0,0 +1,36 @@
+<template>
+  <r-container class="pa-0" full-width>
+    <r-meta
+        :url="$route.path"
+        description="404 page: not found"
+        title="404 page"
+    ></r-meta>
+    <r-row class="color-header no-gutters">
+      <r-col>
+        <r-container class="pt-12 mt-12 pb-0">
+          <r-row class="mt-12 pt-12">
+            <r-col class="col-12">
+              <h1 class="line-btm display-4">صفحه مورد نظر یافت نشد:(</h1>
+            </r-col>
+            <r-col class="col-12"></r-col>
+          </r-row>
+        </r-container>
+      </r-col>
+    </r-row>
+    <r-row class="mt-12">
+      <r-col>
+        <img alt="404 page" src="/404.jpg" style="width: 100%"/>
+      </r-col>
+    </r-row>
+  </r-container>
+</template>
+
+<script>
+export default {
+  name: "notFound",
+  metaInfo: {
+    title: "notFound",
+  },
+};
+</script>
+

package/docs/src/views/index/notFound/fa.vue

@@ -0,0 +1,35 @@
+<template>
+  <r-container class="pa-0" full-width>
+    <r-meta
+        :url="$route.path"
+        description="404 page: not found"
+        title="404 page"
+    ></r-meta>
+    <r-row class="color-header no-gutters">
+      <r-col>
+        <r-container class="pt-12 mt-12 pb-0">
+          <r-row class="mt-12 pt-12">
+            <r-col class="col-12">
+              <h1 class="line-btm display-4">صفحه مورد نظر یافت نشد:(</h1>
+            </r-col>
+            <r-col class="col-12"></r-col>
+          </r-row>
+        </r-container>
+      </r-col>
+    </r-row>
+    <r-row class="mt-12">
+      <r-col>
+        <img alt="404 page" src="/404.jpg" style="width: 100%"/>
+      </r-col>
+    </r-row>
+  </r-container>
+</template>
+
+<script>
+export default {
+  name: "notFound",
+  metaInfo: {
+    title: "notFound",
+  },
+};
+</script>

package/docs/src/views/index/notFound/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <component :is="comp"></component>
+</template>
+
+<script>
+import {defineAsyncComponent} from "vue";
+import en from "./en";
+
+export default {
+  name: "index",
+
+  computed: {
+    comp() {
+      const lang = this.$route.params.lang || "en";
+      return defineAsyncComponent({
+        loader: () => import(`./${lang}.vue`),
+        errorComponent: en,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/pages.vue

@@ -0,0 +1,50 @@
+<template>
+  <r-container>
+    <r-row>
+      <r-col class="col-12 md-9">
+        <component :is="page" :key="lang + '-' + path"></component>
+        <buttom-next-page></buttom-next-page>
+      </r-col>
+
+      <r-col class="col-12 md-3"></r-col>
+    </r-row>
+  </r-container>
+</template>
+<script>
+import {defineAsyncComponent} from "vue";
+import notFound from "../index/notFound/index";
+
+export default {
+  name: "pages",
+  props: {
+    lang: String,
+    path: String,
+    version: String,
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  computed: {
+    page() {
+      let lang = this.lang || this.$storage.get("lang");
+      let path = this.path || "introduction-whyRenusify";
+      let version = this.version || "v1";
+      return defineAsyncComponent({
+        loader: () =>
+            import(
+            "../index/" +
+            version +
+            "/" +
+            this.$helper.replacer(path, "-", "/") +
+            "/" +
+            lang +
+            ".vue"
+                ),
+        errorComponent: notFound,
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,61 @@
+<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-app
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        In Renusify the starting point of the programming is indicated by the
+        <r-btn readonly size="small"> r-app</r-btn>
+        component. All the code should be placed within it.
+      </p>
+    </div>
+    <table-props :items="items"></table-props>
+  </section>
+  <br/>
+  <section>
+    <h1 class="font-weight-bold color-white title ps-4 pt-1 pb-1 br-sm">
+      An example for changing the theme !
+    </h1>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "rtl": false
+    }
+}'
+        template='<r-app :rtl="rtl">
+  <div class="color-one">Hello World!</div>
+</r-app>'
+    >
+    </r-code-editor>
+  </section>
+  <br/>
+</template>
+<script>
+export default {
+  name: "app",
+  data() {
+    return {
+      items: [
+        {
+          prop: "id",
+          type: "String,Number",
+          default: "renusify",
+          description: "The ID stands for Identifier in programming. ",
+        },
+        {
+          prop: "rtl",
+          type: "Boolean",
+          default: "undefined",
+          description:
+              "I will perform the action of right-aligning the website for you",
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,66 @@
+<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-app
+      </h1>
+      <p class="title font-weight-light ps-4 pb-1 py-4 br-lg">
+        در رنوسیفای نقطه شروع برنامه نویسی از
+        <r-btn readonly size="small"> r-app</r-btn>
+        است باید همه کدها را در r-app جایی گرفته باشند.
+      </p>
+    </div>
+
+    <table-props
+        :items="[
+        {
+          prop: 'id',
+          type: 'String or Number',
+          default: 'renusify',
+          description: 'آیدی برای برنامه است.',
+        },
+
+        {
+          prop: 'rtl',
+          type: 'Boolean',
+          default: 'undefined',
+          description: 'عمل راست چین کردن سایت را برای شما انجام می دهد',
+        },
+      ]"
+    ></table-props>
+  </section>
+  <br/>
+  <section>
+    <h1 class="font-weight-bold color-white title ps-4 pt-1 pb-1 br-sm">
+      مثالی برای تغییر تم و راست چین کردن سایت
+    </h1>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "rtl": false
+    }
+}'
+        template='<r-app :rtl="rtl">
+  <div class="color-one">Hello World!</div>
+</r-app>'
+    >
+    </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/avatar/en.vue

@@ -0,0 +1,184 @@
+<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-avatar
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        The
+        <r-btn readonly size="small"> r-avatar</r-btn>
+        component is commonly used to display circular user profile pictures.
+        This component allows you to dynamically size and add border radius to
+        images and icons.
+      </p>
+    </div>
+
+    <table-props :items="items"></table-props>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "size": 48,
+    "elevation": "none",
+    "editable": null,
+    "flat": false,
+    "tile": false,
+    "headers": null
+  }
+}'
+        template='<r-avatar :size="size" :elevation="elevation" :editable="editable" :flat="flat" :tile="tile" :headers="headers" ></r-avatar>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <section class="pa-3 text-center">
+    <r-avatar></r-avatar>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "size": 82,
+   }
+}'
+        template='
+<r-avatar size="82" class="color-info-text">
+  <span>82</span>
+</r-avatar>'
+    ></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>Elevation</span>
+    </h1>
+    <section class="pa-3 text-center">
+      <r-avatar elevation="lg"></r-avatar>
+    </section>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='<r-avatar elevation="lg"></r-avatar>'
+    ></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>Flat</span>
+    </h1>
+    <section class="pa-3 text-center">
+      <r-avatar flat></r-avatar>
+    </section>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template="<r-avatar flat></r-avatar>"
+    ></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>Editable</span>
+    </h1>
+    <section class="text-center">
+      <r-avatar editable="/" size="70"></r-avatar>
+    </section>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='<div class="text-center">
+  <r-avatar size="70" editable="https://www.codenus.com/img/image1.jpg"></r-avatar>
+</div>>'
+    ></r-code-editor>
+  </section>
+  <br/><br/>
+  <section class="pa-3 color-white">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-10 br-sm">
+      PROP / <span>Tile</span>
+    </h1>
+    <section class="d-flex h-space-between ps-20 pe-20">
+      <r-avatar class="color-one" size="90" tile>
+        <span>90</span>
+      </r-avatar>
+      <r-avatar class="color-gradient-three-90" size="70" tile>
+        <span>70</span>
+      </r-avatar>
+      <r-avatar class="color-three" size="50" tile>
+        <span>50</span>
+      </r-avatar>
+      <r-avatar class="color-success" size="30" tile>
+        <span>30</span>
+      </r-avatar>
+    </section>
+  </section>
+  <section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='<r-avatar tile size="90" class="color-one">
+  <span>90</span>
+</r-avatar>'
+    ></r-code-editor>
+  </section>
+  <br/><br/>
+</template>
+<script>
+export default {
+  name: "avatar",
+  data() {
+    return {
+      items: [
+        {
+          prop: "size",
+          type: "Number,String",
+          default: "48",
+          description: "Size",
+        },
+        {
+          prop: "elevation",
+          type: "String",
+          default: "none",
+          description: " provides a base height",
+        },
+        {
+          prop: "editable",
+          type: "String",
+          default: "undefined",
+          description: "Edit Able",
+        },
+        {
+          prop: "flat",
+          type: "Boolean",
+          default: "null",
+          description: "The flat  removes all border radius from an element",
+        },
+        {
+          prop: "tile",
+          type: "Boolean",
+          default: "null",
+          description: "It does without corners",
+        },
+        {
+          prop: "headers",
+          type: "Object",
+          default: "null",
+          description: "Headers",
+        },
+      ],
+    };
+  },
+};
+</script>