Merge pull request #690 from devforth/next

Next

Author: SerVitasik

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

@@ -41,6 +41,31 @@ import { Button } from '@/afcl'
 
 loader prop would show loader when it's true.
 
+### Variant
+
+The `variant` prop controls the button style. Possible values are `primary` (default), `secondary` and `danger`.
+
+<div class="split-screen" >
+  <div >
+
+```html
+<Button @click="doSmth">
+  Primary button
+</Button>
+
+<Button @click="doSmth" variant="secondary" class="mt-4">
+  Secondary button
+</Button>
+
+<Button @click="doSmth" variant="danger" class="mt-4">
+  Danger button
+</Button>
+```
+  </div>
+</div>
+
+> ☝️ The `mode` prop is deprecated, use `variant` instead.
+
 ## Button Group
 ### With active button
 <div class="split-screen" >

adminforth/spa/src/afcl/Dropzone.vue

@@ -5,7 +5,7 @@
     @dragleave.prevent="dragging = false"
     @drop.prevent="dragging = false; doEmit(($event.dataTransfer as DataTransfer).files)"
   >
-      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer
+      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-default cursor-pointer
         hover:bg-lightDropzoneBackgroundHover hover:border-lightDropzoneBorderHover  dark:hover:border-darkDropzoneBorderHover dark:hover:bg-darkDropzoneBackgroundHover"
         :class="{
           'border-lightDropzoneBorderDragging dark:border-darkDropzoneBorderDragging': dragging,
@@ -50,7 +50,7 @@
           >
             <template v-for="(file, index) in selectedFiles" :key="index">
               <div
-                class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-md 
+                class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-default 
                       flex items-center gap-1 px-2 py-1 group"
               >
                 <IconFileSolid class="w-4 h-4 flex-shrink-0" />

adminforth/spa/src/afcl/ProgressBar.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="relative w-full bg-lightProgressBarUnfilledColor rounded-full h-2.5 dark:bg-darkProgressBarUnfilledColor" :class="props.height ? `h-${props.height}` : ''">
-    <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ leftLabel }}</span>
-    <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ rightLabel }}</span>
-    <div 
+    <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm" :class="textClass">{{ leftLabel }}</span>
+    <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm" :class="textClass">{{ rightLabel }}</span>
+    <div
       class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full transition-all duration-300 ease-in-out"
-      :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"  
+      :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"
       :style="{ width: `${percentage}%` }"
     ></div>
     <div v-if="showValues || showProgress" class="flex justify-between mt-2">
-      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(minValue) }}</span>
-      <span v-if="showProgress" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ progressText }}</span>
-      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(maxValue) }}</span>
+      <span v-if="showValues" class="text-sm" :class="textClass">{{ formatValue(minValue) }}</span>
+      <span v-if="showProgress" class="text-sm" :class="textClass">{{ progressText }}</span>
+      <span v-if="showValues" class="text-sm" :class="textClass">{{ formatValue(maxValue) }}</span>
     </div>
   </div>
 </template>
@@ -31,6 +31,7 @@ interface Props {
   showProgress?: boolean
   showAnimation?: boolean
   height?: number
+  textClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -39,7 +40,8 @@ const props = withDefaults(defineProps<Props>(), {
   formatter: (value: number) => `${value}`,
   progressFormatter: (value: number, percentage: number) => `${value}`,
   showValues: true,
-  showProgress: true
+  showProgress: true,
+  textClass: 'text-lightProgressBarText dark:text-darkProgressBarText',
 })
 
 const percentage = computed((): number => {

dev-demo/package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "_env:dev": "dotenvx run -f .env.local -f .env --overload --",
     "start": "pnpm _env:dev tsx watch index.ts",
+    "dev": "pnpm _env:dev tsx watch index.ts",
     "makemigration:sqlite": "pnpm _env:dev pnpm exec prisma migrate dev --create-only --config=./migrations/prisma/sqlite/prisma.config.ts --schema=./migrations/prisma/sqlite/schema.prisma",
     "migrate:sqlite": "pnpm _env:dev pnpm exec prisma migrate deploy --config=./migrations/prisma/sqlite/prisma.config.ts --schema=./migrations/prisma/sqlite/schema.prisma",
     "makemigration:mysql": "pnpm _env:dev pnpm exec prisma migrate dev --create-only --config=./migrations/prisma/mysql/prisma.config.ts --schema=./migrations/prisma/mysql/schema.mysql.prisma",