renusify 2.1.8 → 2.2.0

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

@@ -1,186 +0,0 @@
-<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

@@ -1,148 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-<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

@@ -1,110 +0,0 @@
-<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

@@ -1,58 +0,0 @@
-<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

@@ -1,49 +0,0 @@
-<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>