afcl progress

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/14-afcl.md

@@ -9,12 +9,12 @@ This allows to keep the design consistent with minimal efforts. ACL components w
 
 
 
+<div class="split-screen" >
+  <div >
 ```js
 import { Button } from '@/afcl'
 ```
 
-<div class="split-screen" >
-  <div >
 ```html
 <Button @click="doSmth" 
     :loader="false" class="w-full">
@@ -38,12 +38,15 @@ loader prop would show loader when it's true.
 
 ## Link
 
+
+
+<div class="split-screen" >
+  <div >
+
 ```js
 import { Link } from '@/afcl'
 ```
 
-<div class="split-screen" >
-  <div >
 ```html
 <Link to="/login">Go to login</Link>
 ```
@@ -57,12 +60,14 @@ import { Link } from '@/afcl'
 
 Looks like button but works like link. Uses `router-link` under the hood.
 
+
+
+<div class="split-screen" >
+  <div >
 ```js
 import { LinkButton } from '@/afcl'
 ```
 
-<div class="split-screen" >
-  <div >
 ```html
 <LinkButton to="/login">Go to login</LinkButton>
 ```
@@ -207,12 +212,14 @@ You might need to put some extra item at bottom of list
 
 ## Input
 
+
+
+<div class="split-screen" >
+  <div >
 ```js
 import { Input } from '@/afcl'
 ```
 
-<div class="split-screen" >
-  <div >
 ```html
 <Input type="number" class="w-full">
   <template #suffix>
@@ -231,12 +238,15 @@ import { Input } from '@/afcl'
 
 Wrap an element on which you would like to show a tooltip with the `Tooltip` component and add a `tooltip` slot to it.
 
+
+
+<div class="split-screen" >
+  <div >
+
 ```js
 import { Tooltip } from '@/afcl'
 ```
 
-<div class="split-screen" >
-  <div >
 ```html
 <Tooltip>
     <a :href="`https://google.com?q=adminforth`" target="_blank" >
@@ -264,50 +274,59 @@ import { VerticalTabs } from '@/afcl'
 import { IconGridSolid, IconUserCircleSolid } from '@iconify-prerendered/vue-flowbite';
 ```
 
-```html
+<div class="split-screen" >
+  <div>
+  ```html
   <VerticalTabs>
     <template #tab:Profile>
       <IconUserCircleSolid class="w-5 h-5 me-2"/>
       Profile
     </template>
     <template #tab:Dashboard>
       <IconGridSolid class="w-5 h-5 me-2"/>
-      Dashboard
+      Board
     </template>
     <template #Profile>
       <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">Profile Tab</h3>
-      <p class="mb-2">This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.</p>
+      <p class="mb-2">This is some placeholder content the Profile tab's associated content</p>
     </template>
     <template #Dashboard>
       Dashboard Tab Content 
     </template>
   </VerticalTabs>
-```
+  ```
+  </div>
+  <div>
+  ![AFCL VerticalTabs](image-48.png)
+  </div>
+</div>
+
+
 
 ## Checkbox
 
-```html
-<Checkbox v-model="enable">
-  Enable
-</Checkbox>
-```
+<div class="split-screen" >
+  <div >
 
 ```ts
 import { Checkbox } from '@/afcl'
 const enable = ref(false)
 ```
 
-## Dropzone
 
 ```html
-<Dropzone
-  :extensions="['.jpg', '.jpeg', '.png']"
-  :maxSizeBytes="1024 * 1024 * 2"
-  :multiple="false"
-  v-model="files"
-/>
-
+<Checkbox v-model="enable">
+  Enable
+</Checkbox>
 ```
+  </div>
+  <div>
+    ![AFCL Checkbox](image-49.png)
+  </div>
+</div>
+
+
+## Dropzone
 
 ```ts
 import { Ref } from 'vue'
@@ -324,6 +343,26 @@ watch(files, (files) => {
 })
 ```
 
+<div class="split-screen" >
+  <div >
+
+
+
+```html
+<Dropzone
+  :extensions="['.jpg', '.jpeg', '.png']"
+  :maxSizeBytes="1024 * 1024 * 2"
+  :multiple="false"
+  v-model="files"
+/>
+
+```
+  </div>
+  <div>
+    ![AFCL Dropzone](image-50.png)
+  </div>
+</div>
+
 
 ## Bar Chart
 

adminforth/documentation/docs/tutorial/03-Customization/image-48.png

@@ -162,31 +162,40 @@
 
     <div class="flex justify-center items-center p-80 bg-white">
       <div class="border border-indigo-600 p-5 w-80 h-80 min-w-80 min-h-80 flex justify-center items-center">
-        <Tooltip>
-    <a :href="`https://google.com?q=adminforth`" target="_blank" >
-        <IconCardSearch class="w-5 h-5 me-2"/>
-    </a>
-
-    <template #tooltip>
-        Search for AdminForth
-    </template>
-</Tooltip>
-
+<Dropzone
+  :extensions="['.jpg', '.jpeg', '.png']"
+  :maxSizeBytes="1024 * 1024 * 2"
+  :multiple="false"
+  v-model="files"
+/>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, type Ref, onMounted, computed } from 'vue';
+import { ref, type Ref, onMounted, computed, watch } from 'vue';
 import dayjs from 'dayjs';
 import { callApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import adminforth from '@/adminforth';
-import { AreaChart, BarChart, Input, Link, LinkButton, PieChart, Select } from '@/afcl';
+import { AreaChart, BarChart, Input, Link, LinkButton, PieChart, Select, VerticalTabs } from '@/afcl';
 import Button from '@/afcl/Button.vue';
 import Tooltip from '@/afcl/Tooltip.vue';
-import { IconCardSearch } from '@iconify-prerendered/vue-mdi';
+import { IconUserCircleSolid, IconGridSolid } from '@iconify-prerendered/vue-flowbite';
+import Checkbox from '@/afcl/Checkbox.vue';
+
+import { Dropzone } from '@/afcl'
+
+const files: Ref<File[]> = ref([])
+
+watch(files, (files) => {
+  console.log('files selected', files);
+  setTimeout(() => {
+    // clear
+    files.length = 0;
+  }, 5000);
+})
 
 const data: Ref<{listedVsUnlistedPriceByDays: any, listedVsUnlistedByDays: any, 
   apartsByDays: any, apartsCountsByRooms: any, topCountries: any, totalAparts: any} | null> = ref(null);
@@ -195,6 +204,8 @@ const { t } = useI18n();
 
 const COLORS = ["#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F"]
 
+const enable = ref(false);
+
 const apartsCountsByDaysChart = computed(() => {
   return data.value.apartsByDays?.reverse().map(
     (item) => ({