Merge pull request #373 from devforth/AdminForth/855

Admin forth/855

Author: ivictbor

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

@@ -41,6 +41,68 @@ import { Button } from '@/afcl'
 
 loader prop would show loader when it's true.
 
+## Button Group
+### With active button
+<div class="split-screen" >
+
+```ts
+import { IconGridSolid, IconUserCircleSolid, IconLockSolid, IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
+import { ButtonGroup } from '@/afcl'
+
+const activeButton = ref('')
+
+    ...
+
+<ButtonGroup v-model="activeButton">  
+  <template #button:Profile>
+    <div class="flex px-4 py-2">
+      <IconUserCircleSolid class="w-5 h-5 me-2"/>
+      Profile
+    </div>
+  </template>
+  <template #button:Dashboard>
+    <div class="flex px-4 py-2">
+      <IconGridSolid class="w-5 h-5 me-2"/>
+      Board
+    </div>
+  </template>
+</ButtonGroup>
+```
+
+![AFCL Button-group](ButtonGroup1.png)
+
+</div>
+
+### With solid color
+
+<div class="split-screen" >
+
+```ts
+  import { ButtonGroup } from '@/afcl'
+  import { IconPlusOutline, IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+
+    ...
+
+    <ButtonGroup :solidColor="true">
+        <template #button:Profile>
+            <div class="flex px-4 py-2" @click="console.log("Add passkey got clicked")">
+                <IconPlusOutline class="w-5 h-5 me-2"/>
+                <p>Add Local Passkey</p>
+            </div>
+        </template>
+        <template #button:Dropdown>
+            <div id="dropdown-button" class="flex px-2 py-2" @click="console.log("Dropdown got clicked")">
+                <IconCaretDownSolid class="w-5 h-5"/>
+            </div>
+        </template>
+    </ButtonGroup>
+
+```
+
+![AFCL Button-group](ButtonGroup2.png)
+
+</div>
+
 
 ## Link
 
@@ -362,6 +424,54 @@ const enable = ref(false)
   </div>
 </div>
 
+## Card 
+
+### Custom card
+If you need custom card, you can make it without 
+<div class="split-screen">
+```ts
+<Card>
+  <p class="font-semibold text-gray-600 text-xl dark:text-gray-300">Total Profit</p>
+  <p class="text-green-500 font-bold mt-2">$100,000</p>
+</Card>
+```
+
+
+![AFCL Checkbox](Card3.png)
+
+</div>
+
+### Standart card
+<div class="split-screen">
+
+```ts
+import { Card } from '@/afcl'
+
+  ...
+
+  <Card
+    title="This is a large card"
+    description="Description text for large card. This is a large card. Very nice card. Big one. You can put here any content you want."
+  >
+  </Card>
+
+  <Card
+    size="md"
+    title="This is a medium card"
+    description="Description text for medium card. This is a medium card. Very nice card. Big one. You can put here any content you want."
+  >
+  </Card>
+
+  <Card
+    size="sm"
+    title="This is a small card"
+    description="Description text for small card. This is a small card. Very nice card. Big one. You can put here any content you want."
+  >
+  </Card>
+```
+![AFCL Checkbox](Card2.png)
+
+</div>
 
 ## Toggle
 

adminforth/documentation/docs/tutorial/03-Customization/ButtonGroup1.png

@@ -1,5 +1,3 @@
-
-
 export const styles = () => ({
   colors: {
     lightHtml: "#FFFFFF", // main background
@@ -146,6 +144,16 @@ export const styles = () => ({
     lightButtonsHover: "alias:lightPrimary lighten", // button hover
     lightButtonsBorderHover: "alias:lightPrimary", // button border hover  
     lightButtonFocusRing: "alias:lightPrimary opacity:0.6", // button focus ring
+
+    lightButtonGroupBackground: "#FFFFFF", // button group background
+    lightButtonGroupBorder: "#D1D5DB", // button group border
+    lightButtonGroupText: "#111827", // button group text
+    lightButtonGroupFocusRing: "#F3F4F6", // button group focus ring
+    lightButtonGroupBackgroundHover: "#F3F4F6", // button group background hover
+    lightButtonGroupTextHover: "alias:lightPrimary", // button group text hover
+    lightButtonGroupActiveBackground: "alias:lightPrimary", // button group active background
+    lightButtonGroupActiveText: "alias:lightPrimaryContrast", // button group active text
+    lightButtonGroupActiveFocusRing: "alias:lightPrimary opacity:0.6", // button group active focus ring
 
     lightDropdownButtonsBackground: "#f9fafb", // dropdown button/input background color
     lightDropownButtonsBorder: "#D1D5DB", //border color
@@ -332,11 +340,12 @@ export const styles = () => ({
     lightToastCloseIconFocusRing: "#D1D5DB",
     lightToastText: "#6B7280",
 
+    lightCardBackground: "#FFFFFF",
+    lightCardBackgroundHover: "#F3F4F6",
+    lightCardBorder: "#E5E7EB",
+    lightCardTitle: "#374151",
+    lightCardDescription: "#6B7280",
 
-
-
-    
-    
     // colors for dark theme
     darkHtml: "#111827",
 
@@ -479,11 +488,20 @@ export const styles = () => ({
     darkButtonsBorderHover: "alias:darkPrimary", // button border hover
     darkButtonFocusRing: "alias:darkPrimary opacity:0.6", // button focus ring
 
+    darkButtonGroupBackground: "#1F2937", // button group background
+    darkButtonGroupBorder: "#4B5563", // button group border
+    darkButtonGroupText: "#9CA3AF", // button group text
+    darkButtonGroupFocusRing: "#374151", // button group focus ring
+    darkButtonGroupBackgroundHover: "#374151", // button group background hover
+    darkButtonGroupTextHover: "alias:darkButtonGroupText", // button group text hover
+    darkButtonGroupActiveBackground: "alias:darkPrimary", // button group active background
+    darkButtonGroupActiveText: "alias:darkPrimaryContrast", // button group active text
+    darkButtonGroupActiveFocusRing: "alias:darkPrimary opacity:0.6", // button group active focus ring
+
     darkDropdownButtonsBackground: "#374151",
     darkDropdownButtonsBorder: "#4b5563",
     darkDropdownButtonsText: "#FFFFFF",
     darkDropdownButtonsPlaceholderText: "#9CA3AF",
-
     darkDropdownOptionsBackground: "#374151",
     darkDropdownOptionsHoverBackground: "#4b5563",
     darkDropdownPicked:"#212a40",
@@ -665,6 +683,11 @@ export const styles = () => ({
     darkToastCloseIconFocusRing: "#374151",
     darkToastText: "#9CA3AF",
 
+    darkCardBackground: "#1F2937", // card background
+    darkCardBackgroundHover: "#374151", // card background hover
+    darkCardBorder: "#4B5563", // card border
+    darkCardTitle: "#FFFFFF", // card title
+    darkCardDescription: "#9CA3AF", // card description
 
   },
   boxShadow: {

adminforth/documentation/docs/tutorial/03-Customization/ButtonGroup2.png

@@ -0,0 +1,91 @@
+<template>
+    <div v-if="isInitFinished" class="inline-flex rounded-md shadow-xs" role="group">
+        <button v-for="button in buttons" :key="`${button}-button-controll`" 
+            :disabled="slotProps[button].disabled"
+            class="inline-flex items-center text-sm font-medium border-t border-b border-r border-lightButtonGroupBorder focus:z-10 focus:ring-2 dark:border-darkButtonGroupBorder disabled:opacity-50 disabled:cursor-not-allowed"
+            :class="[
+                buttonsStyles[button] === 'rounded' ? 'border rounded-lg' 
+                : buttonsStyles[button] === 'rounded-left' ? 'border rounded-s-lg' 
+                : buttonsStyles[button] === 'rounded-right' ? 'border rounded-e-lg border-l-lightButtonGroupBackground focus:border-l-lightButtonGroupBorder dark:border-l-darkButtonGroupBackground dark:focus:border-l-darkButtonGroupBorder' 
+                : buttonsStyles[button] === 'no-rounded' ? 'border border-l-lightButtonGroupBackground focus:border-l-lightButtonGroupBorder dark:border-l-darkButtonGroupBackground dark:focus:border-l-darkButtonGroupBorder' 
+                : buttonsStyles[button] === 'rounded-left-with-right-border' ? 'border rounded-s-lg' : '',
+                (button === activeButton || props.solidColor === true) ? 'bg-lightButtonGroupActiveBackground text-lightButtonGroupActiveText focus:ring-lightButtonGroupActiveFocusRing dark:bg-darkButtonGroupActiveBackground dark:text-darkButtonGroupActiveText dark:focus:ring-darkButtonGroupActiveFocusRing' 
+                                        :'text-lightButtonGroupText bg-lightButtonGroupBackground focus:ring-lightButtonGroupFocusRing hover:bg-lightButtonGroupBackgroundHover hover:text-lightButtonGroupTextHover dark:bg-darkButtonGroupBackground dark:text-darkButtonGroupText dark:hover:text-darkButtonGroupTextHover dark:hover:bg-darkButtonGroupBackgroundHover dark:focus:ring-darkButtonGroupFocusRing'
+            ]"
+            @click="setActiveButton(button)"
+        >
+            <slot :name="`button:${button}`"></slot>
+        </button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { onMounted, useSlots, reactive, ref, type Ref } from 'vue';
+
+    const buttons : Ref<string[]> = ref([]);
+    const buttonsStyles : Ref<Record<string, string>> = ref({});
+    const activeButton = ref('');
+    const slotProps = reactive<Record<string, any>>({});
+    const isInitFinished = ref(false);
+    
+    const emits = defineEmits(['update:modelValue']);
+
+    const props = defineProps<{
+        solidColor?: boolean;
+        modelValue?: string;
+    }>();
+    
+    onMounted(() => {
+        const slots = useSlots();
+        buttons.value = Object.keys(slots).reduce((tbs: string[], tb: string) => {
+        if (tb.startsWith('button:')) {
+            tbs.push(tb.replace('button:', ''));
+        }
+        return tbs;
+        }, []);
+        if (buttons.value.length > 0) {
+            activeButton.value = buttons.value[0];
+        }
+        for (const button of buttons.value) {
+            const temp = {
+                [button]: getButtonsClasses(button)
+            }
+            buttonsStyles.value = { ...buttonsStyles.value, ...temp };
+            const slot = slots[`button:${button}`];
+            if (slot && slot()[0]?.props) {
+                slotProps[button] = slot()[0].props;
+            } else {
+                slotProps[button] = {};
+            }
+            if (slotProps[button]?.disabled === undefined) {
+                slotProps[button].disabled = false;
+            }
+        }
+        isInitFinished.value = true;
+    });
+
+
+    function setActiveButton(button: string) {
+        if (buttons.value.includes(button)) {
+        activeButton.value = button;
+        emits('update:modelValue', button);
+        }
+    }
+
+    function getButtonsClasses(button: string) {
+        const index = buttons.value.indexOf(button);
+        const lenght = buttons.value.length;
+        if ( lenght === 1 ) {
+            return 'rounded'
+        } else if ( lenght === 2 && index === 0 ) {
+            return 'rounded-left-with-right-border'
+        } else if ( index === 0 ) {
+            return 'rounded-left'
+        } else if ( index === lenght - 1 ) {
+            return 'rounded-right'
+        } else {
+            return 'no-rounded'
+        }
+    }
+
+</script>

adminforth/documentation/docs/tutorial/03-Customization/Card.png

@@ -0,0 +1,25 @@
+<template>
+<a href="#" 
+    class="block max-w-sm bg-lightCardBackground border border-lightCardBorder rounded-lg shadow-sm hover:bg-lightCardBackgroundHover dark:bg-darkCardBackground dark:border-darkCardBorder dark:hover:bg-darkCardBackgroundHover"
+    :class="[
+        props.size === 'sm' ? 'p-2' : props.size === 'md' ? 'p-4' : 'p-6',
+        props.hideBorder ? 'border-0' : ''
+    ]"
+>
+
+<h5 class="font-bold tracking-tight text-lightCardTitle dark:text-darkCardTitle" :class="[props.size === 'sm' ? 'text-base' : props.size === 'md' ? 'text-lg mb-1' : 'text-xl mb-2']">{{ props.title }}</h5>
+<p class="font-normal text-lightCardDescription dark:text-darkCardDescription" :class="[props.size === 'sm' ? 'text-sm' : props.size === 'md' ? 'text-base' : 'text-lg']">{{ props.description }}</p>
+    <slot></slot>
+</a>
+</template>
+
+
+<script setup lang="ts">
+const props = defineProps<{
+    title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg';
+    hideBorder?: boolean;
+}>();
+
+</script>

adminforth/documentation/docs/tutorial/03-Customization/Card2.png

@@ -1,5 +1,5 @@
 <template>
-  <div class="afcl-table-container relative overflow-x-auto shadow-md sm:rounded-lg">
+  <div class="afcl-table-container relative overflow-x-auto shadow-md rounded-lg">
     <div class="overflow-x-auto w-full">
       <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText overflow-x-auto">
           <thead class="afcl-table-thread text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">