renusify 2.1.5 → 2.1.8

package/docs/src/views/index/v1/features/internationalization/fa.vue

@@ -0,0 +1,186 @@
+<template>
+  <section>
+    <h1 class="display-4">بین المللی</h1>
+    <p class="title mt-5">
+      رنوسیفای از زبان های زنده بین المللی (i18n) و واحدهای شمارش و تاریخ آن ها
+      پشتیبانی می کند. برای این منظور می توان زبان های قابل پشتیبانی و سیستم
+      تاریخ آن ها را تعریف کرد. همچنین در داخل برنامه می توان زبان برنامه را عوض
+      کرد و بین زبان های تعریف شده جابجا شد.
+    </p>
+    <p>
+      برای زبان های جدید علاوه بر مشخص کردن زبان برنامه می بایست برای کلاس
+      DateTime فرمت را مشخص کرد تا برنامه به صورت خودکار تاریخ و زمان را ترجمه
+      کند.
+    </p>
+
+    <r-code-editor
+        :script-show="false"
+        :style-show="false"
+        :template-show="false"
+        script='import {createApp} from "vue";
+import App from "./Index.vue";
+import renusify from "renusify";
+import DateTime from "renusify/plugins/trans/DateTime";
+DateTime.langs={
+	"en": {
+		first_day: 0,
+		time_zone_offset: -480,//Standard timezone offset minutes.
+		daylight_saving_time: true,
+		localizeName: "en-US",
+		timeZone: "America/Los_Angeles",
+		rtl: false
+	},
+	"fa": {
+		first_day: 6,
+		time_zone_offset: 210,
+		daylight_saving_time: false,
+		localizeName: "fa-IR",
+		timeZone: "Asia/Tehran",
+		calendar: "persian",
+		rtl: true
+	},
+}
+ window.app = createApp(App) .use(renusify,{
+	lang: "fa"
+}) .mount("#app");
+'
+    >
+    </r-code-editor>
+  </section>
+  <section>
+    <h2 class="display-4 my-5">تاریخ و زمان</h2>
+    <p>
+      می توان نحوه نمایش تاریخ برای مدل های مختلف را بر اساس زبان مورد نظر مشخص
+      کرد. مثلا در حالت درخواست short تاریخ بر اساس سال به صورت عدد و ماه به
+      صورت نام و روز به صورت عدد نمایش داده می شود.
+    </p>
+
+    <r-code-editor
+        runnable
+        template='<div class="ltr">
+  <div>date: {{new Date()}}</div>
+  <div>narrow: {{$d(new Date(),"narrow")}}</div>
+  <div>day: {{$d(new Date(),"day")}}</div>
+  <div>month: {{$d(new Date(),"month")}}</div>
+  <div>year: {{$d(new Date(),"year")}}</div>
+  <div>short: {{$d(new Date(),"short")}}</div>
+  <div>medium: {{$d(new Date(),"medium")}}</div>
+  <div>long: {{$d(new Date(),"long")}}</div>
+</div>'
+    >
+    </r-code-editor>
+  </section>
+  <section>
+    <h3 class="display-4 my-5">ترجمه</h3>
+    <p>
+      برای ترجمه از تابع t$ استفاده می کنیم. همچنین این تابع می تواند متغیر
+      بگیرد و در ترجمه جاگذاری کند.
+    </p>
+    <p>
+      برای استفاده از ترجمه در ابتدا باید کلیدها و مقدارهای مربوط به هر زبان را
+      به کلاس ارجاع دهیم و اگر کلید درخواستی مقداری نداشته باشد خود کلید
+      برگردانده می شود. همچنین برای کلیدهایی که مقدار ندارند در حالت لوکال کلید
+      با نام پکیج به سمت سرور ارسال می گردد تا به دیتابیس اضافه شود و کاربر
+      ترجمه مربوط به آن را انجام دهد و در درخواست های بعدی در دسترس باشد.
+    </p>
+
+    <r-code-editor
+        runnable
+        script="name:'test',
+created(){
+  this.$translate.add('name','codenus');
+  this.$translate.add('from_to_manage','From {0} to {1} of {2}');
+}"
+        template="<div>
+  <div>{{$t('name')}}</div>
+  <div>{{$t(['from_to_manage',[0,5,20]])}}</div>
+</div>"
+    >
+    </r-code-editor>
+
+    <p>برای تغییر زبان برنامه به صورت داینامیک می توان به صورت زیر عمل کرد</p>
+
+    <r-code-editor
+        runnable
+        script='data() {
+	return {
+		key:1,
+		langList: [{
+			name: "english",value: "en",rtl: false
+		},{
+			name: "فارسی",value: "fa",rtl: true
+		}
+		]
+	};
+},
+methods: {
+	changeLang(item) {
+	 if(item){
+		this.$r.lang = item.value;
+		this.$r.rtl = item.rtl;
+		this.$storage.set("lang",item.value);
+		this.$storage.set("rtl",item.rtl);
+		this.switchLang(item.value);
+		}
+	},
+	switchLang(lang) {
+		if (this.$translate.messages.lang) {
+			this.$translate.local = lang;
+		}
+		else {
+			this.loadLocaleMessage(lang);
+		}
+	},
+	loadLocaleMessage(locale) {
+		const msgs = {
+			"fa": {
+				"id": "شناسه",
+				"name": "نام"
+			},
+			"en": {
+				"id": "ID",
+				"name": "Name"
+			}
+		};
+		this.$translate.local = locale;
+		this.$translate.setMessages(msgs[locale],locale);
+		this.key++;
+	}
+}'
+        template='<div>
+	<r-select-input label="lang" :items="langList" @update:model-value="changeLang" >
+	</r-select-input>
+	<div :key="key"> {{$t("id")}} {{$t("name")}}
+	</div>
+</div>'
+    >
+    </r-code-editor>
+  </section>
+  <section>
+    <h3 class="display-4 my-5">واحد شمارش</h3>
+    <p>برای اعداد در زبان های محلی می توان از تابع n$ استفاده کرد.</p>
+
+    <r-code-editor
+        runnable
+        template="<div class='ltr'>
+	<div> {{$n(7)}}</div>
+	<div> {{$n(6000000)}}</div>
+	<div> {{$n(50000000000)}}</div>
+</div>"
+    >
+    </r-code-editor>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "internationalization",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/features/theme/fa.vue

@@ -0,0 +1,148 @@
+<template>
+  <section>
+    <h1 class="display-4">تم</h1>
+    <p class="title mt-5">
+      شما می توانید در هنگام نصب و یا در حین اجرای برنامه حالت تم را تغییر دهید.
+    </p>
+
+    <p>همانند مثال زیر می توانید از داخل برنامه حالت تم را عوض کنید.</p>
+
+    <r-code-editor
+        runnable
+        script="data(){
+  return{
+    dark:false
+  }
+},
+methods: {
+    change() {
+      this.dark=!this.dark;
+      if(!this.dark){
+        this.$helper.changeColor({});
+        return;
+      }
+      this.$helper.changeColor({
+        '--color-one': '#a80b42',
+        '--color-on-one': '#FFFFFF',
+        '--color-one-container': '#3e424a',
+        '--color-on-one-container': '#cedef1',
+        '--color-two': '#565F71',
+        '--color-on-two': '#FFFFFF',
+        '--color-two-container': '#DAE2F9',
+        '--color-on-two-container': '#131C2B',
+        '--color-three': '#705575',
+        '--color-on-three': '#FFFFFF',
+        '--color-three-container': '#FAD8FD',
+        '--color-on-three-container': '#28132E',
+        '--color-error': '#BA1A1A',
+        '--color-on-error': '#FFFFFF',
+        '--color-error-container': '#FFDAD6',
+        '--color-on-error-container': '#410002',
+        '--color-success': '#246b0f',
+        '--color-on-success': '#FFFFFF',
+        '--color-success-container': '#e3ffd6',
+        '--color-on-success-container': '#1d4100',
+        '--color-warning': '#a45104',
+        '--color-on-warning': '#FFFFFF',
+        '--color-warning-container': '#ffe8d6',
+        '--color-on-warning-container': '#411f00',
+        '--color-info': '#1a5aba',
+        '--color-on-info': '#FFFFFF',
+        '--color-info-container': '#d6e9ff',
+        '--color-on-info-container': '#002341',
+        '--color-sheet': '#262627',
+        '--color-sheet-dark': '#0e0e0e',
+        '--color-sheet-light': '#4b4b4c',
+        '--color-on-sheet': '#e9ebed',
+        '--color-sheet-low': '#57585e',
+        '--color-on-sheet-low': '#edeef1',
+        '--color-sheet-container-lowest': '#0b0b0b',
+        '--color-sheet-container-low': '#181819',
+        '--color-sheet-container': '#222223',
+        '--color-sheet-container-high': '#303133',
+        '--color-sheet-container-highest': '#5f5f63',
+        '--color-border': '#a8acb6',
+        '--color-border-low': '#9ea0aa',
+        '--color-overlay': 'rgba(246, 250, 254, 0.4980392157)',
+      })
+     }
+    }"
+        template='<div class="mt-5">
+  <r-btn @click="change" >change</r-btn>
+</div>'
+    >
+    </r-code-editor>
+  </section>
+  <section>
+    <h2 class="display-4 my-5"></h2>
+    <p>
+      برنامه دارای رنگ های اصلی زیر برای حالت روشن می باشد که شما در هر کجای
+      برنامه می توانید آن را عوض کنید.
+    </p>
+
+    <r-code-editor
+        :script-show="false"
+        :style-show="false"
+        :template-show="false"
+        script=":root {
+
+    --color-one: #415F91;
+    --color-on-one: #FFFFFF;
+    --color-one-container: #D6E3FF;
+    --color-on-one-container: #001B3E;
+    --color-two: #565F71;
+    --color-on-two: #FFFFFF;
+    --color-two-container: #DAE2F9;
+    --color-on-two-container: #131C2B;
+    --color-three: #705575;
+    --color-on-three: #FFFFFF;
+    --color-three-container: #FAD8FD;
+    --color-on-three-container: #28132E;
+    --color-error: #BA1A1A;
+    --color-on-error: #FFFFFF;
+    --color-error-container: #FFDAD6;
+    --color-on-error-container: #410002;
+    --color-success: #246b0f;
+    --color-on-success: #FFFFFF;
+    --color-success-container: #e3ffd6;
+    --color-on-success-container: #1d4100;
+    --color-warning: #a45104;
+    --color-on-warning: #FFFFFF;
+    --color-warning-container: #ffe8d6;
+    --color-on-warning-container: #411f00;
+    --color-info: #1a5aba;
+    --color-on-info: #FFFFFF;
+    --color-info-container: #d6e9ff;
+    --color-on-info-container: #002341;
+    --color-sheet: #F9F9FF;
+    --color-sheet-dark: #D9D9E0;
+    --color-sheet-light: #F9F9FF;
+    --color-on-sheet: #191C20;
+    --color-sheet-low: #E0E2EC;
+    --color-on-sheet-low: #44474E;
+    --color-sheet-container-lowest: #FFFFFF;
+    --color-sheet-container-low: #F3F3FA;
+    --color-sheet-container: #EDEDF4;
+    --color-sheet-container-high: #E7E8EE;
+    --color-sheet-container-highest: #E2E2E9;
+    --color-border: #74777F;
+    --color-border-low: #C4C6D0;
+    --color-overlay: rgba(246, 250, 254, 0.4980392157);
+ }"
+    >
+    </r-code-editor>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "theme",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/getting_started/browserSupport/fa.vue

@@ -0,0 +1,33 @@
+<template>
+  <section id="browserSupport" class="body-1">
+    <h1 class="display-4 mb-5">مرورگرهای قابل استفاده</h1>
+    <p>
+      رنوسیفای یک فریمورک پیشرو است که تلاش می کند توسعه وب را به لول بعدی ببرد.
+      برای انجام بهتر این کار ، باید فداکاری هایی در زمینه پشتیبانی از نسخه های
+      قدیمی اینترنت اکسپلورر انجام داد. این یک لیست کامل از مرورگرهای سازگار
+      نیست ، بلکه مرورگرهای اصلی مورد نظر است.
+    </p>
+    <r-table
+        :items="[
+        { مرورگر: 'گوگل کروم', پشتیبانی: 'می کند' },
+        { مرورگر: 'مایکروسافت اچ', پشتیبانی: 'می کند' },
+        { مرورگر: 'فایرفاکس', پشتیبانی: 'می کند' },
+        { مرورگر: 'سافاری', پشتیبانی: 'می کند' },
+      ]"
+        borderd
+    ></r-table>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "browserSupport",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/getting_started/installation/fa.vue

@@ -0,0 +1,110 @@
+<template>
+  <section id="install" class="body-1">
+    <h1 class="display-4 mb-5">نصب</h1>
+    <p>
+      شروع کار با رنوسیفای
+      <br/>
+      به سهولت و سرعت پروژه هایتان را ایجاد کنید. هرآنچه در ذهنت هست با رنوسیفای
+      خلق بکن.
+    </p>
+  </section>
+  <section id="vue_cli" class="mt-10 body-1">
+    <h2 class="display-4 mb-5">نصب با vue cli</h2>
+    <p class="color-error br-sm pa-3">
+      این ورژن از رنوسیفای با vue3 کار می کند و بر اساس آن نوشته شده است. برای
+      ورژن های قبلی vuejs از فریمورک های قدیمی تر پیشنهاد می شود استفاده کنید.
+    </p>
+    <p class="color-warning br-sm pa-3">
+      برای آموزش نحوه کار با vue cli به
+      <a class="color-info-text" href="https://cli.vuejs.org/" target="_blank">
+        راهنما
+        <r-icon class="mdi-arrow-top-right-thin-circle-outline body-2"></r-icon>
+      </a>
+      مراجعه کنید.
+    </p>
+    <p class="mt-5 mb-2">
+      در ابتدا یک پروژه با Vue cli ایجاد کنید در صورتی که پروژه ای ندارید.
+    </p>
+    <pre>
+vue create my-app
+# navigate to new project directory
+cd my-app
+</pre
+>
+    <p class="mt-5 mb-2">
+      اکنون که یک پروژه جدید ایجاد کردید با استفاده از دستور زیر رنوسیفای را به
+      پروژه اضافه کنید.
+    </p>
+    <pre>
+npm install renusify
+</pre
+>
+
+    <p class="mt-5 mb-2">به فایل جاوااسکریپت کد زیر را اضافه کنید</p>
+    <r-code-editor
+        :script="`import { createApp } from &quot;vue&quot;;
+import App from &quot;./Index.vue&quot;;
+import renusify from &quot;renusify&quot;;
+import * as components from &quot;renusify/components&quot;;
+import {scroll, title, intersect} from &quot;renusify/directive&quot;;
+window.app = createApp(App)
+  .use(renusify, {
+    rtl: false,
+    inputs: {tile: false},
+    lang: 'en',
+    langs:{
+        'en': {
+             first_day: 0,
+             time_zone_offset: -480,/*Standard timezone offset minutes -07:00*/
+             daylight_saving_time: true,
+             localizeName: 'en-US',
+             timeZone: 'America/Los_Angeles',
+             rtl: false
+         },
+         'fa': {
+             first_day: 6,
+             time_zone_offset: 210,//Standard timezone offset minutes +03:30
+             daylight_saving_time: false,
+             localizeName: 'fa-IR',
+             timeZone: 'Asia/Tehran',
+             calendar: 'persian',
+             rtl: true
+         },
+    },
+    autoAddTranslate: true,
+    useNotify: false,
+    package: 'index',
+    components:components,
+    directives: {title, scroll, intersect},
+  })
+  .mount(&quot;#app&quot;);`"
+        :script-show="false"
+        :style-show="false"
+        :template-show="false"
+    ></r-code-editor>
+
+    <p>rtl: به منظور راست به چپ کردن پروژه به کار می رود.</p>
+    <p>lang: می توان زبان پیشفرض برنامه را مشخص کرد.</p>
+    <p>
+      در قسمت components می توانید لیست کمپوننت هایی که قصد استفاده دارید را
+      وارد کنید.
+    </p>
+    <p>
+      در قسمت directives می توانید لیست دایرکتیوهایی که قصد استفاده دارید را
+      وارد کنید.
+    </p>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "installation",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/introduction/support/fa.vue

@@ -0,0 +1,58 @@
+<template>
+  <section id="support">
+    <h1 class="display-4 mb-5">ارتقا</h1>
+    <p class="body-1">
+      سرعت زیاد رشد وب باعث تغییرات گسترده در زبان ها و کتابخانه ها می شود.
+      رنوسیفای از حداقل کتابخانه های خارجی استفاده می کند که این خود کار توسعه
+      را راحتتر می کند.
+    </p>
+    <p class="body-1">
+      با تغییرات مهم در نسخه های مختلف کتابخانه ها ما اطمینان حاصل می کنیم تا در
+      سریعترین زمان ممکن بروزرسانی های لازم را در تمامی فریمورک رنوسیفای انجام
+      دهیم تا هم برنامه ها از لحاظ امنیتی با مشکل مواجه نشوند و هم اینکه از
+      جدیدترین تکنولوژی ها بتوانید در پروژه هایتان استفاده کنید.
+    </p>
+  </section>
+  <section id="bugs" class="mt-10">
+    <h2 class="display-4 mb-5">مشکلات و باگ</h2>
+    <p class="body-1">
+      چنانچه در مورد کارکرد برنامه با مشکل مواجه شدید می توانید سوالات خود را با
+      ما در میان بگذارید تا بهترین راه حل را به شما ارائه دهیم.
+    </p>
+    <p class="body-1">
+      فریمورک رنوسیفای بر روی چندین دستگاه مختلف تست می شود و سعی شده است که
+      بدون نقص و باگ باشد اما در دنیای برنامه نویسی همیشه امکان وجود باگ وجود
+      دارد. چنانچه یک باگ را شناسایی کردید سریعا آن را به ما اطلاع دهید تا در
+      کمترین زمان آن را برطرف کنیم.
+    </p>
+  </section>
+  <section id="roadmap" class="mt-10">
+    <h2 class="display-4 mb-5">نقشه راه</h2>
+    <p class="body-1">
+      رنوسیفای همیشه در دست توسعه است. ما به طور مداوم در تلاش هستیم تا کد
+      پایگاه موجود را بهبود بخشیم ، همچنین ویژگی ها و قابلیت های جدیدی اضافه می
+      کنیم که به ساده سازی برنامه ها کمک می کند. در زیر لیستی آزمایشی از ویژگی
+      های برنامه ریزی شده آورده شده است. این یک لیست جامع نیست و هر زمان که
+      بخواهید بدون اطلاع قبلی تغییر می کند.
+    </p>
+    <ul class="body-1 ms-5">
+      <li>به کمپوننت ویرایشگر نوشته جدول اضافه شود</li>
+      <li>اضافه کردن تست</li>
+      <li>بروزرسانی داکیومنت</li>
+      <li>ایجاد قالب های آماده</li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "support",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/docs/src/views/index/v1/introduction/whyRenusify/fa.vue

@@ -0,0 +1,49 @@
+<template>
+  <section id="introduction">
+    <h2 class="display-4">معرفی</h2>
+    <p class="my-5 body-1">
+      درباره رنوسیفای، نحوه ایجاد برنامه از ابتدا، مرور منابع API، کدهای نمونه،
+      آموزشها و موارد دیگر بیشتر بدانید.
+    </p>
+  </section>
+  <section id="what_renusify" class="mt-10">
+    <h2 class="display-4 mb-5">رنوسیفای چیست؟</h2>
+    <p class="body-1">
+      رنوسیفای یک فریمورک UI است که بر پایه vueJs ساخته شده است. هدف این پروژه
+      ارائه ابزارها و کمپوننت هایی هست که برای ایجاد یک رابط کاربری زیبا بر اساس
+      طراحی متریال توسعه دهندگان نیاز دارند.
+    </p>
+    <p class="body-1">
+      با استفاده از رنوسیفای شما به راحتی می توانید با یک بار کد زدن تمام پلتفرم
+      های موبایل و دسکتاپ را پشتیبانی کنید. همچنین برنامه قابلیت نصب بر روی
+      دستگاه های مختلف را خواهد داشت(pwa).
+    </p>
+  </section>
+  <section id="why_renusify" class="mt-10">
+    <h1 class="display-4 mb-5">چرا رنوسیفای؟</h1>
+    <ul class="ms-5 body-1">
+      <li>سرعت بالای توسعه</li>
+      <li>کمپوننت های زیاد</li>
+      <li>دایرکتیو های زیاد</li>
+      <li>سهولت یادگیری</li>
+      <li>پرفورمنس بالا</li>
+      <li>پشتیبانی از تمامی زبان ها</li>
+      <li>پشتیبانی از تاریخ های زنده دنیا</li>
+      <li>پشتیبانی از جهت راست به چپ</li>
+      <li>تم رنگ دلخواه</li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "why_renusify",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>