renusify 2.1.7 → 2.1.8

package/docs/src/views/index/v1/component/bar/bottomNavigationCircle/fa.vue

@@ -0,0 +1,98 @@
+<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-bottom-navigation-circle
+      </h1>
+
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        جایگزینی برای نوار کناری یا پایین است. این در درجه اول برای برنامه های
+        کاربردی تلفن همراه استفاده می شود , r-bottom-navigation-circle نام و
+        ایکون و لینک می گیرد.
+      </p>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        باید مثل menu استفاده کنید وقتی یک بار render شد دیگر لازم نباشد دوباره
+        render شود.
+      </p>
+    </div>
+    <table-props
+        :items="[
+        {
+          prop: 'items',
+          type: 'Object',
+          default: 'false',
+          description: 'به item نام و ایکون و لینک می دهیم.',
+        },
+      ]"
+    >
+    </table-props>
+  </section>
+
+  <br/>
+  <section>
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-1 br-sm">
+      r-bottom-navigation-circle
+    </h1>
+    <h1 class="font-weight-bold subtitle-1 ps-4 pt-1 pb-1 br-sm">
+      در این مثال Home فعال است. خودش اتوماتیک تشخیص می هد در کجا قرار دارد پس
+      به router فعال کلاسها را اعمال می کند.
+    </h1>
+  </section>
+  <section class="pa-3">
+    <r-card style="height: 200px; background-color: #a73b3b">
+      <r-bottom-navigation-circle
+          :items="[
+          { name: 'Recent', icon: $r.icons.edit, to: { path: '/' } },
+          {
+            name: 'Home',
+            icon: $r.icons.edit,
+            to: {
+              path: '/v1/fa/component-bar-bottomNavigationCircle',
+            },
+          },
+          { name: 'Favorites', icon: $r.icons.edit, to: { path: '/' } },
+        ]"
+          style="position: absolute"
+      >
+      </r-bottom-navigation-circle>
+    </r-card>
+  </section>
+  <section>
+    <r-code-editor
+        runnable
+        template='
+         <r-card style="height: 200px; background-color: #a73b3b">
+      <r-bottom-navigation-circle
+        style="position: absolute"
+        :items="[
+          { name: `Recent`, icon: $r.icons.edit, to: { path:`/` } },
+          {
+            name: `Home`,
+            icon: $r.icons.edit,
+            to: {
+            path: `/v1/fa/component-bar-bottomNavigationCircle`,
+            },
+          },
+          { name: `Favorites`, icon: $r.icons.edit, to: { path:`/`} },
+        ]"
+      >
+      </r-bottom-navigation-circle>
+ </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/><br/>
+</template>
+
+<script>
+export default {
+  name: "bottomNavigationCircle",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/component/bar/toolbar/en.vue

@@ -0,0 +1,231 @@
+<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-toolbar
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        You can add a toolbar to any desired location in an activity.
+      </p>
+    </div>
+
+    <table-props
+        :items="[
+        {
+          prop: 'menu',
+          type: 'Array',
+          default: '[]',
+          description: 'Menu list',
+        },
+        {
+          prop: 'logo',
+          type: 'String',
+          default: '',
+          description: 'Logo link',
+        },
+        {
+          prop: 'logoW',
+          type: 'Number',
+          default: '180',
+          description: 'Logo width',
+        },
+        {
+          prop: 'logoH',
+          type: 'Number',
+          default: '60',
+          description: 'Logo height',
+        },
+        {
+          prop: 'search',
+          type: 'String',
+          default: '',
+          description: 'Search link',
+        },
+        {
+          prop: 'search-label',
+          type: 'String',
+          default: 'search',
+          description: 'Search label',
+        },
+        {
+          prop: 'fixed',
+          type: 'Boolean',
+          default: 'false',
+          description: 'Fixed menu at the top of the page',
+        },
+        {
+          prop: 'flat',
+          type: 'Boolean',
+          default: 'false',
+          description: 'Menu without shadows',
+        },
+        {
+          prop: 'sticky',
+          type: 'Boolean',
+          default: 'false',
+          description: 'Menu sticky',
+        },
+        {
+          prop: 'tile',
+          type: 'Boolean',
+          default: 'true',
+          description: 'Menu without corners',
+        },
+      ]"
+    >
+    </table-props>
+  </section>
+  <br/>
+  <section class="pa-3">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>Menu</span>
+    </h1>
+    <r-card class="h-center" style="height: 200px; background-color: #eee">
+      <r-toolbar
+          :menu="[
+          {
+            title: 'Home',
+            to: {
+              path: '/v1/fa/component-bar-toolbar',
+            },
+          },
+          { title: 'Shop' },
+          { title: 'About us' },
+          { title: 'Contact', to: { path: '/' } },
+        ]"
+      >
+      </r-toolbar>
+    </r-card>
+  </section>
+  <section>
+    <r-code-editor
+        runnable
+        template='
+ <r-toolbar
+        search=`/`
+        :menu="[
+          {
+            title: `Home`,
+            to: {
+              path: `/v1/fa/component-bar-toolbar`,
+            },
+          },
+          { title: `Shop` },
+          { title: `About us` },
+          { title: `Contact`, to: { path: `/` } },
+        ]"
+      >
+      </r-toolbar>
+        '
+    ></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>Flat</span>
+    </h1>
+    <section class="pa-4">
+      <r-toolbar
+          :menu="[
+          {
+            title: 'Home',
+            to: {
+              path: '/v1/fa/component-bar-toolbar',
+            },
+          },
+          { title: 'Shop' },
+          { title: 'About us' },
+          { title: 'Contact', to: { path: '/' } },
+        ]"
+          flat
+          search="/"
+      >
+      </r-toolbar>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+   <r-toolbar
+        flat
+        search="/"
+        :menu="[
+          {
+            title: `Home`,
+            to: {
+              path: `/v1/fa/component-bar-toolbar`,
+            },
+          },
+          { title: `Shop` },
+          { title: `About us` },
+          { title: `Contact`, to: { path: `/` } },
+        ]"
+      >
+      </r-toolbar>
+        '
+    ></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>Tile</span>
+    </h1>
+    <section class="pa-4">
+      <r-toolbar
+          :menu="[
+          {
+            title: 'Home',
+            to: {
+              path: '/v1/fa/component-bar-toolbar',
+            },
+          },
+          { title: 'Shop' },
+          { title: 'About us' },
+          { title: 'Contact', to: { path: '/' } },
+        ]"
+          search="/"
+          tile
+      >
+      </r-toolbar>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+   <r-toolbar
+        tile
+        search="/"
+        :menu="[
+          {
+            title: `Home`,
+            to: {
+              path: `/v1/fa/component-bar-toolbar`,
+            },
+          },
+          { title: `Shop` },
+          { title: `About us` },
+          { title: `Contact`, to: { path: `/` } },
+        ]"
+      >
+      </r-toolbar>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+
+<script>
+export default {
+  name: "bottomNav",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/component/bar/toolbar/fa.vue

@@ -0,0 +1,232 @@
+<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-toolbar
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-toolbar</r-btn>
+        را در هرجای اکتیویتی که مدنظر دارید می توانید اضافه کنید
+      </p>
+    </div>
+
+    <table-props
+        :items="[
+        {
+          prop: 'menu',
+          type: 'Array',
+          default: '[]',
+          description: 'لیست منوها',
+        },
+        {
+          prop: 'logo',
+          type: 'String',
+          default: '',
+          description: 'لینک لوگو',
+        },
+        {
+          prop: 'logoW',
+          type: 'Number',
+          default: '180',
+          description: 'عرض لوگو',
+        },
+        {
+          prop: 'logoH',
+          type: 'Number',
+          default: '60',
+          description: 'ارتفاع لوگو',
+        },
+        {
+          prop: 'search',
+          type: 'String',
+          default: '',
+          description: 'لینک جستجو',
+        },
+        {
+          prop: 'search-label',
+          type: 'String',
+          default: 'search',
+          description: 'لیبل جستجو',
+        },
+        {
+          prop: 'fixed',
+          type: 'Boolean',
+          default: 'false',
+          description: 'منو ثابت در بالای صفحه',
+        },
+        {
+          prop: 'flat',
+          type: 'Boolean',
+          default: 'false',
+          description: 'منو بدون سایه',
+        },
+        {
+          prop: 'sticky',
+          type: 'Boolean',
+          default: 'false',
+          description: 'منو استیکی',
+        },
+        {
+          prop: 'tile',
+          type: 'Boolean',
+          default: 'true',
+          description: 'منو بدون گوشه',
+        },
+      ]"
+    >
+    </table-props>
+  </section>
+  <br/>
+  <section class="pa-3">
+    <h1 class="font-weight-bold title ps-4 pt-1 pb-6 br-sm">
+      PROP / <span>Menu</span>
+    </h1>
+    <r-card class="h-center" style="height: 200px; background-color: #eee">
+      <r-toolbar
+          :menu="[
+          {
+            title: `Home`,
+            to: {
+              path: '/v1/fa/component-bar-toolbar',
+            },
+          },
+          { title: 'Shop' },
+          { title: 'About us' },
+          { title: 'Contact', to: { path: '/' } },
+        ]"
+      >
+      </r-toolbar>
+    </r-card>
+  </section>
+  <section>
+    <r-code-editor
+        runnable
+        template='
+ <r-toolbar
+        search="/"
+        :menu="[
+          {
+            title: `Home`,
+            to: {
+              path: `/v1/fa/component-bar-toolbar`,
+            },
+          },
+          { title: `Shop` },
+          { title: `About us` },
+          { title: `Contact`, to: { path: `/` } },
+        ]"
+      >
+      </r-toolbar>
+        '
+    ></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>Flat</span>
+    </h1>
+    <section class="pa-4">
+      <r-toolbar
+          :menu="[
+          {
+            title: 'Home',
+            to: {
+              path: '/v1/fa/component-bar-toolbar',
+            },
+          },
+          { title: 'Shop' },
+          { title: 'About us' },
+          { title: 'Contact', to: { path: '/' } },
+        ]"
+          flat
+          search="/"
+      >
+      </r-toolbar>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+   <r-toolbar
+        flat
+        search="/"
+        :menu="[
+          {
+            title: `Home`,
+            to: {
+              path: `/v1/fa/component-bar-toolbar`,
+            },
+          },
+          { title: `Shop` },
+          { title: `About us` },
+          { title: `Contact`, to: { path: `/` } },
+        ]"
+      >
+      </r-toolbar>
+        '
+    ></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>Tile</span>
+    </h1>
+    <section class="pa-4">
+      <r-toolbar
+          :menu="[
+          {
+            title: 'Home',
+            to: {
+              path: '/v1/fa/component-bar-toolbar',
+            },
+          },
+          { title: 'Shop' },
+          { title: 'About us' },
+          { title: 'Contact', to: { path: '/' } },
+        ]"
+          search="/"
+          tile
+      >
+      </r-toolbar>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+   <r-toolbar
+        tile
+        search="/"
+        :menu="[
+          {
+            title: `Home`,
+            to: {
+              path: `/v1/fa/component-bar-toolbar`,
+            },
+          },
+          { title: `Shop` },
+          { title: `About us` },
+          { title: `Contact`, to: { path: `/` } },
+        ]"
+      >
+      </r-toolbar>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+
+<script>
+export default {
+  name: "bottomNav",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

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

@@ -0,0 +1,84 @@
+<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-breadcrumbs
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-breadcrumbs</r-btn>
+        is a navigation aid for web pages. Breadcrumb is a short link that is
+        commonly found at the top or bottom of web pages, especially in
+        e-commerce websites. Its main purpose is to indicate your location
+        within the website.
+      </p>
+    </div>
+
+    <table-props
+        :items="[
+        {
+          prop: 'items',
+          type: 'Array',
+          default: '[]',
+          description: 'Menu List',
+        },
+        {
+          prop: 'sheet',
+          type: 'Boolean',
+          default: 'true',
+          description: 'Disabling the sheet class',
+        },
+        {
+          prop: 'divider',
+          type: 'String',
+          default: '$r.icons.chevron_right',
+          description: 'Menu Separator',
+        },
+      ]"
+    >
+    </table-props>
+    <table-events :items="events" class="mt-5"></table-events>
+  </section>
+  <section class="mt-10">
+    <r-breadcrumbs
+        :items="[{ name: ' link1' }, { name: 'link2' }, { name: 'link3' }]"
+        @click="log('click', $event)"
+    ></r-breadcrumbs>
+  </section>
+  <section class="mt-10">
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        script='data(){
+ return {
+    "items":[{ name: "link1" }, { name: "link2" }, { name: "link3" }],
+    "sheet": true,
+    "divider": null
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-breadcrumbs :sheet="sheet" :divider="divider" :items="items" @click="log(`click`,$event)" ></r-breadcrumbs>'
+    ></r-code-editor>
+  </section>
+</template>
+
+<script>
+import TableProps from "@/components/tableProps";
+
+export default {
+  name: "breadcrumbs",
+  components: {TableProps},
+  data() {
+    return {
+      events: [{event: "click", description: ""}],
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>