renusify 2.1.5 → 2.1.8

package/docs/src/views/index/v1/component/button/btn_confirm/en.vue

@@ -0,0 +1,155 @@
+<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-btn-confirm
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        into English is "Button for confirming user activities.
+      </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 {
+            "hard": false,
+            "title": null,
+            "body": null,
+            "cancelText": null,
+            "confirmText": null
+        }
+        },
+        methods:{
+         log(name,e){
+          console.log(name,e)
+         }
+        }'
+        template='<r-btn-confirm :hard="hard" :title="title" :body="body" :cancel-text="cancelText" :confirm-text="confirmText" @click="log("click",$event)" >confirm</r-btn-confirm>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pa-4">
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm class="color-warning">Start Confirm</r-btn-confirm>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+  <r-btn-confirm class="color-warning">Start Confirm</r-btn-confirm>
+      </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>Title</span>
+    </h1>
+    <section class="pa-4">
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm class="color-black" title="Are you sure want to continue"
+        >Start Confirm
+        </r-btn-confirm
+        >
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+  <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm
+          title="Are you sure want to continue"
+          class="color-warning"
+          >Start Confirm</r-btn-confirm
+        >
+      </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>Body</span>
+    </h1>
+    <section class="pa-4">
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm
+            body="Do you want delete"
+            class="color-info"
+            title="Are you sure want to continue"
+        >Start Confirm
+        </r-btn-confirm
+        >
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm
+          title="Are you sure want to continue"
+          body="Do you want delete"
+          class="color-info"
+          >Start Confirm</r-btn-confirm
+        >
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "btn_confirm",
+  data() {
+    return {
+      props: [
+        {prop: "hard", type: "Boolean", default: "null", description: "Hard"},
+        {
+          prop: "title",
+          type: "String",
+          default: "null",
+          description: "Title",
+        },
+        {
+          prop: "body",
+          type: "String",
+          default: "null",
+          description: "Body Btn",
+        },
+        {
+          prop: "cancelText",
+          type: "String",
+          default: "null",
+          description: "Cancel Text",
+        },
+        {
+          prop: "confirmText",
+          type: "String",
+          default: "null",
+          description: "Confirm Text",
+        },
+      ],
+      events: [{event: "click", description: ""}],
+    };
+  },
+  created() {
+    this.$translate.add("confirm_code", "enter code: {0}");
+  },
+};
+</script>

package/docs/src/views/index/v1/component/button/btn_confirm/fa.vue

@@ -0,0 +1,154 @@
+<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-btn-confirm
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        دکمه برای تایید فعالیت های که کاربر انجام می دهد .
+      </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 {
+            "hard": false,
+            "title": null,
+            "body": null,
+            "cancelText": null,
+            "confirmText": null
+        }
+        },
+        methods:{
+         log(name,e){
+          console.log(name,e)
+         }
+        }'
+        template='<r-btn-confirm :hard="hard" :title="title" :body="body" :cancel-text="cancelText" :confirm-text="confirmText" @click="log(`click`,$event)" >تایید</r-btn-confirm>'
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+  <section class="pa-3 color-white">
+    <section class="pa-4">
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm class="color-warning">Start Confirm</r-btn-confirm>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+  <r-btn-confirm class="color-warning">Start Confirm</r-btn-confirm>
+      </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>Title</span>
+    </h1>
+    <section class="pa-4">
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm class="color-black" title="Are you sure want to continue"
+        >Start Confirm
+        </r-btn-confirm
+        >
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+  <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm
+          title="Are you sure want to continue"
+          class="color-warning"
+          >Start Confirm</r-btn-confirm
+        >
+      </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>Body</span>
+    </h1>
+    <section class="pa-4">
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm
+            body="Do you want delete"
+            class="color-info"
+            title="Are you sure want to continue"
+        >Start Confirm
+        </r-btn-confirm
+        >
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+      <r-card class="px-5 py-8 text-center card-hover">
+        <r-btn-confirm
+          title="Are you sure want to continue"
+          body="Do you want delete"
+          class="color-info"
+          >Start Confirm</r-btn-confirm
+        >
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "btn_confirm",
+  data() {
+    return {
+      props: [
+        {prop: "hard", type: "Boolean", default: "null", description: "قوی "},
+        {
+          prop: "title",
+          type: "String",
+          default: "null",
+          description: "عنوان",
+        },
+        {
+          prop: "body",
+          type: "String",
+          default: "null",
+          description: "بدنه btn",
+        },
+        {
+          prop: "cancelText",
+          type: "String",
+          default: "null",
+          description: "لغو کردن متن",
+        },
+        {
+          prop: "confirmText",
+          type: "String",
+          default: "null",
+          description: "متن تایید",
+        },
+      ],
+      events: [{event: "click", description: ""}],
+    };
+  },
+  created() {
+    this.$translate.add("confirm_code", "کد {0} را وارد کنید.");
+  },
+};
+</script>

package/docs/src/views/index/v1/component/button/btn_group/en.vue

@@ -0,0 +1,118 @@
+<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-btn-group
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        <r-btn readonly size="small"> r-btn-group</r-btn>
+        allows you to group a series of buttons together (on a single line) in a
+        button group.
+      </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 {
+    "items": {
+                "insertOrderedList": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25Z"/></svg>`,
+                "insertUnorderedList": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M3 4h4v4H3V4m6 1v2h12V5H9m-6 5h4v4H3v-4m6 1v2h12v-2H9m-6 5h4v4H3v-4m6 1v2h12v-2H9"/></svg>`,
+                "subscript": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M16 7.41L11.41 12L16 16.59L14.59 18L10 13.41L5.41 18L4 16.59L8.59 12L4 7.41L5.41 6L10 10.59L14.59 6L16 7.41m5.85 13.62h-4.88v-1l.89-.8c.76-.65 1.32-1.19 1.7-1.63c.37-.44.56-.85.57-1.24a.898.898 0 0 0-.27-.7c-.18-.16-.47-.28-.86-.28c-.31 0-.58.06-.84.18l-.66.38l-.45-1.17c.27-.21.59-.39.98-.53s.82-.24 1.29-.24c.78.04 1.38.25 1.78.66c.4.41.62.93.62 1.57c-.01.56-.19 1.08-.54 1.55c-.34.47-.76.92-1.27 1.36l-.64.52v.02h2.58v1.35Z"/></svg>`,
+                "superscript": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M16 7.41L11.41 12L16 16.59L14.59 18L10 13.41L5.41 18L4 16.59L8.59 12L4 7.41L5.41 6L10 10.59L14.59 6L16 7.41M21.85 9h-4.88V8l.89-.82c.76-.64 1.32-1.18 1.7-1.63c.37-.44.56-.85.57-1.23a.884.884 0 0 0-.27-.7c-.18-.19-.47-.28-.86-.29c-.31.01-.58.07-.84.17l-.66.39l-.45-1.17c.27-.22.59-.39.98-.53S18.85 2 19.32 2c.78 0 1.38.2 1.78.61c.4.39.62.93.62 1.57c-.01.56-.19 1.08-.54 1.55c-.34.48-.76.93-1.27 1.36l-.64.52v.02h2.58V9Z"/></svg>`,
+                "bold": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 15.5H10v-3h3.5A1.5 1.5 0 0 1 15 14a1.5 1.5 0 0 1-1.5 1.5m-3.5-9h3A1.5 1.5 0 0 1 14.5 8A1.5 1.5 0 0 1 13 9.5h-3m5.6 1.29c.97-.68 1.65-1.79 1.65-2.79c0-2.26-1.75-4-4-4H7v14h7.04c2.1 0 3.71-1.7 3.71-3.79c0-1.52-.86-2.82-2.15-3.42Z"/></svg>`,
+                "italic": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8Z"/></svg>`,
+                "strikeThrough": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M3 14h18v-2H3m2-8v3h5v3h4V7h5V4m-9 15h4v-3h-4v3Z"/></svg>`,
+                "underline": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21h14v-2H5v2m7-4a6 6 0 0 0 6-6V3h-2.5v8a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 11V3H6v8a6 6 0 0 0 6 6Z"/></svg>`,
+                "insertHorizontalRule": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M0 24h24v-4H0v4Z"/></svg>`,
+                "removeFormat": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M6 5v.18L8.82 8h2.4l-.72 1.68l2.1 2.1L14.21 8H20V5H6M3.27 5L2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21L18 19.73L3.55 5.27L3.27 5Z"/></svg>`
+              },
+    "icon": true,
+    "isSelect": false,
+    "exact": false,
+    "modelValue": null
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-btn-group :items="items" :icon="icon" :is-select="isSelect" :exact="exact" v-model="modelValue" @open="log(`open`,$event)" @update:model-Value="log(`update:modelValue`,$event)" ></r-btn-group>'
+    ></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>Items</span>
+    </h1>
+    <section class="pa-4">
+      <r-card class="px-5 py-8 card-hover">
+        <r-btn-group
+            :items="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
+            class="my-4 color-one"
+        ></r-btn-group>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+ <r-card class="px-5 py-8 card-hover">
+        <r-btn-group
+          :items="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
+          class="my-4 color-one"
+        ></r-btn-group>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "btn_group",
+  data() {
+    return {
+      props: [
+        {
+          prop: "items",
+          type: "Array,Object",
+          default: "null",
+          description: "Btn List",
+        },
+        {prop: "icon", type: "Boolean", default: "true", description: "Icon"},
+        {
+          prop: "isSelect",
+          type: "Boolean",
+          default: "null",
+          description: "Is Select",
+        },
+        {
+          prop: "exact",
+          type: "Boolean",
+          default: "null",
+          description: "Exactly match the link",
+        },
+        {
+          prop: "modelValue",
+          type: "Number,String",
+          default: "null",
+          description: "Model Value",
+        },
+      ],
+      events: [
+        {event: "open", description: ""},
+        {event: "update:modelValue", description: ""},
+      ],
+    };
+  },
+};
+</script>

package/docs/src/views/index/v1/component/button/btn_group/fa.vue

@@ -0,0 +1,117 @@
+<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-btn-group
+      </h1>
+      <p class="font-weight-light ps-4 pb-1 py-4 br-lg">
+        به شما اجازه می دهد تا یک سری دکمه را در یک گروه دکمه در یک خط واحد گروه
+        بندی کنید.
+        <r-btn readonly size="small"> r-btn-group</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 {
+    "items": {
+                "insertOrderedList": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25Z"/></svg>`,
+                "insertUnorderedList": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M3 4h4v4H3V4m6 1v2h12V5H9m-6 5h4v4H3v-4m6 1v2h12v-2H9m-6 5h4v4H3v-4m6 1v2h12v-2H9"/></svg>`,
+                "subscript": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M16 7.41L11.41 12L16 16.59L14.59 18L10 13.41L5.41 18L4 16.59L8.59 12L4 7.41L5.41 6L10 10.59L14.59 6L16 7.41m5.85 13.62h-4.88v-1l.89-.8c.76-.65 1.32-1.19 1.7-1.63c.37-.44.56-.85.57-1.24a.898.898 0 0 0-.27-.7c-.18-.16-.47-.28-.86-.28c-.31 0-.58.06-.84.18l-.66.38l-.45-1.17c.27-.21.59-.39.98-.53s.82-.24 1.29-.24c.78.04 1.38.25 1.78.66c.4.41.62.93.62 1.57c-.01.56-.19 1.08-.54 1.55c-.34.47-.76.92-1.27 1.36l-.64.52v.02h2.58v1.35Z"/></svg>`,
+                "superscript": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M16 7.41L11.41 12L16 16.59L14.59 18L10 13.41L5.41 18L4 16.59L8.59 12L4 7.41L5.41 6L10 10.59L14.59 6L16 7.41M21.85 9h-4.88V8l.89-.82c.76-.64 1.32-1.18 1.7-1.63c.37-.44.56-.85.57-1.23a.884.884 0 0 0-.27-.7c-.18-.19-.47-.28-.86-.29c-.31.01-.58.07-.84.17l-.66.39l-.45-1.17c.27-.22.59-.39.98-.53S18.85 2 19.32 2c.78 0 1.38.2 1.78.61c.4.39.62.93.62 1.57c-.01.56-.19 1.08-.54 1.55c-.34.48-.76.93-1.27 1.36l-.64.52v.02h2.58V9Z"/></svg>`,
+                "bold": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 15.5H10v-3h3.5A1.5 1.5 0 0 1 15 14a1.5 1.5 0 0 1-1.5 1.5m-3.5-9h3A1.5 1.5 0 0 1 14.5 8A1.5 1.5 0 0 1 13 9.5h-3m5.6 1.29c.97-.68 1.65-1.79 1.65-2.79c0-2.26-1.75-4-4-4H7v14h7.04c2.1 0 3.71-1.7 3.71-3.79c0-1.52-.86-2.82-2.15-3.42Z"/></svg>`,
+                "italic": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8Z"/></svg>`,
+                "strikeThrough": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M3 14h18v-2H3m2-8v3h5v3h4V7h5V4m-9 15h4v-3h-4v3Z"/></svg>`,
+                "underline": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21h14v-2H5v2m7-4a6 6 0 0 0 6-6V3h-2.5v8a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 11V3H6v8a6 6 0 0 0 6 6Z"/></svg>`,
+                "insertHorizontalRule": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M0 24h24v-4H0v4Z"/></svg>`,
+                "removeFormat": `<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M6 5v.18L8.82 8h2.4l-.72 1.68l2.1 2.1L14.21 8H20V5H6M3.27 5L2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21L18 19.73L3.55 5.27L3.27 5Z"/></svg>`
+              },
+    "icon": true,
+    "isSelect": false,
+    "exact": false,
+    "modelValue": null
+}
+},
+methods:{
+ log(name,e){
+  console.log(name,e)
+ }
+}'
+        template='<r-btn-group :items="items" :icon="icon" :is-select="isSelect" :exact="exact" v-model="modelValue" @open="log(`open`,$event)" @update:model-Value="log(`update:modelValue`,$event)" ></r-btn-group>'
+    ></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>Items</span>
+    </h1>
+    <section class="pa-4">
+      <r-card class="px-5 py-8 card-hover">
+        <r-btn-group
+            :items="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
+            class="my-4 color-one"
+        ></r-btn-group>
+      </r-card>
+    </section>
+    <p class="caption">Press run Button</p>
+    <r-code-editor
+        runnable
+        template='
+ <r-card class="px-5 py-8 card-hover">
+        <r-btn-group
+          :items="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
+          class="my-4 color-one"
+        ></r-btn-group>
+      </r-card>
+        '
+    ></r-code-editor>
+  </section>
+  <br/>
+  <br/>
+</template>
+<script>
+export default {
+  name: "btn_group",
+  data() {
+    return {
+      props: [
+        {
+          prop: "items",
+          type: "Array,Object",
+          default: "null",
+          description: "لیست btn",
+        },
+        {prop: "icon", type: "Boolean", default: "true", description: "آیکن"},
+        {
+          prop: "isSelect",
+          type: "Boolean",
+          default: "null",
+          description: "برای انتخاب کردن",
+        },
+        {
+          prop: "exact",
+          type: "Boolean",
+          default: "null",
+          description: "دقیقاً با لینک مطابقت دارد",
+        },
+        {
+          prop: "modelValue",
+          type: "Number,String",
+          default: "null",
+          description: "Model Value می گیرد",
+        },
+      ],
+      events: [
+        {event: "open", description: ""},
+        {event: "update:modelValue", description: ""},
+      ],
+    };
+  },
+};
+</script>