Added RTL to Forms

lianmaymesi · Mar 28, 2024 · 7544c31 · 7544c31
1 parent c51ff63
commit 7544c31
Show file tree

Hide file tree

Showing 31 changed files with 118 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "laravel-backend",
-    "version": "0.8.9",
+    "version": "0.8.10",
     "description": "A simple backend UI for Laravel Projects.",
     "private": true,
     "scripts": {
@@ -21,6 +21,7 @@
         "@alpinejs/collapse": "^3.13.3",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@ryangjchandler/alpine-clipboard": "^2.3.0",
+        "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "@toast-ui/editor": "^3.2.2",
         "alpinejs": "^3.13.3",
         "choices.js": "^10.2.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,7 @@
 module.exports = {
     plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
         tailwindcss: {},
         autoprefixer: {},
     },

diff --git a/public/vendor/laravel-backend/assets/app-13b5a8bd.css b/public/vendor/laravel-backend/assets/app-13b5a8bd.css
diff --git a/public/vendor/laravel-backend/assets/app-c4b9b39e.css b/public/vendor/laravel-backend/assets/app-c4b9b39e.css
diff --git a/public/vendor/laravel-backend/manifest.json b/public/vendor/laravel-backend/manifest.json
@@ -93,7 +93,7 @@
     "file": "assets/w3c-keyname-a25e4cc1.js"
   },
   "resources/css/app.css": {
-    "file": "assets/app-13b5a8bd.css",
+    "file": "assets/app-c4b9b39e.css",
     "isEntry": true,
     "src": "resources/css/app.css"
   },

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -1,4 +1,7 @@
 @tailwind base;
+[dir="rtl"] .direction-ltr {
+    direction: ltr;
+}
 @tailwind components;
 
 .toastui-editor-defaultUI-toolbar button {
@@ -101,4 +104,36 @@
     @apply !w-full;
 }
 
+[dir="rtl"] .flatpickr-calendar {
+    .dayContainer, .flatpickr-weekdaycontainer {
+        flex-direction: row-reverse;
+    }
+    .flatpickr-months {
+        .flatpickr-month {
+            height: 32px;
+        }
+        .flatpickr-prev-month.flatpickr-prev-month {
+            left: unset;
+            right: 0;
+            transform: scaleX(-1);
+        }
+        .flatpickr-next-month.flatpickr-next-month {
+            right: unset;
+            left: 0;
+            transform: scaleX(-1);
+        }
+    }
+}
+[dir="rtl"] .flatpickr-day {
+    &.selected.startRange, &.startRange.startRange, &.endRange.startRange {
+        border-radius: 0 50px 50px 0;
+    }
+    &.selected.endRange, &.startRange.endRange, &.endRange.endRange {
+        border-radius: 50px 0 0 50px;
+    }
+    &.selected.startRange + .endRange:not(:nth-child(7n+1)), &.startRange.startRange + .endRange:not(:nth-child(7n+1)), &.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+        box-shadow: 10px 0 0 #569ff7;
+    }
+}
+
 @tailwind utilities;
diff --git a/resources/views/components/anchor/danger.blade.php b/resources/views/components/anchor/danger.blade.php
@@ -1,7 +1,7 @@
 @props(['href', 'icon', 'noNavigate' => false])
 <a @if (!$noNavigate) wire:navigate @endif href="{{ $href }}"
     class="font-medium leading-none text-red-600 duration-150 hover:text-red-700 hover:underline">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if (isset($icon))
             {{ $icon }}
         @endif

diff --git a/resources/views/components/anchor/disabled.blade.php b/resources/views/components/anchor/disabled.blade.php
@@ -1,7 +1,7 @@
 @props(['href', 'icon', 'noNavigate' => false])
 <a @if (!$noNavigate) wire:navigate @endif href="{{ $href }}"
-    class="font-medium leading-none text-slate-600 duration-150 hover:text-slate-700 hover:underline">
-    <div class="flex items-center space-x-1">
+    class="font-medium leading-none duration-150 text-slate-600 hover:text-slate-700 hover:underline">
+    <div class="flex items-center gap-x-1">
         @if (isset($icon))
             {{ $icon }}
         @endif

diff --git a/resources/views/components/anchor/primary.blade.php b/resources/views/components/anchor/primary.blade.php
@@ -1,7 +1,7 @@
 @props(['href', 'icon', 'noNavigate' => false])
 <a @if (!$noNavigate) wire:navigate @endif href="{{ $href }}"
     class="font-medium leading-none text-green-600 duration-150 hover:text-green-700 hover:underline">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if (isset($icon))
             {{ $icon }}
         @endif

diff --git a/resources/views/components/anchor/success.blade.php b/resources/views/components/anchor/success.blade.php
@@ -1,7 +1,7 @@
 @props(['href', 'icon', 'noNavigate' => false])
 <a @if (!$noNavigate) wire:navigate @endif href="{{ $href }}"
     class="font-medium leading-none text-green-600 duration-150 hover:text-green-700 hover:underline">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if (isset($icon))
             {{ $icon }}
         @endif

diff --git a/resources/views/components/anchor/theme.blade.php b/resources/views/components/anchor/theme.blade.php
@@ -1,7 +1,7 @@
 @props(['href', 'icon', 'noNavigate' => false])
 <a @if (!$noNavigate) wire:navigate @endif href="{{ $href }}"
     class="font-medium leading-none text-indigo-600 duration-150 hover:text-indigo-700 hover:underline">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if (isset($icon))
             {{ $icon }}
         @endif

diff --git a/resources/views/components/anchor/warning.blade.php b/resources/views/components/anchor/warning.blade.php
@@ -1,7 +1,7 @@
 @props(['href', 'icon', 'noNavigate' => false])
 <a @if (!$noNavigate) wire:navigate @endif href="{{ $href }}"
     class="font-medium leading-none text-orange-600 duration-150 hover:text-orange-700 hover:underline">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if (isset($icon))
             {{ $icon }}
         @endif

diff --git a/resources/views/components/buttons-bg/danger.blade.php b/resources/views/components/buttons-bg/danger.blade.php
@@ -1,10 +1,9 @@
 <button {{ $attributes }}
-    class="rounded-lg bg-red-600 px-3 py-2 text-sm font-medium leading-none text-red-100 duration-150 hover:bg-red-700 hover:text-red-50">
-    <div class="flex items-center justify-center">
+    class="px-3 py-2 text-sm font-medium leading-none text-red-100 duration-150 bg-red-600 rounded-lg hover:bg-red-700 hover:text-red-50">
+    <div class="flex items-center justify-center gap-x-1.5">
         @if ($attributes->has('wire:target'))
-            <svg wire:loading.delay.default class="mr-1.5 h-[15px] w-[15px] animate-spin"
-                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                {{ $attributes->whereStartsWith('wire:target') }}>
+            <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
+                fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                 </circle>
                 <path class="opacity-75" fill="currentColor"

diff --git a/resources/views/components/buttons-bg/disabled.blade.php b/resources/views/components/buttons-bg/disabled.blade.php
@@ -1,8 +1,8 @@
 <button {{ $attributes }}
-    class="rounded-lg bg-slate-600 px-3 py-2 text-sm font-medium leading-none text-slate-100 duration-150 hover:bg-slate-700 hover:text-slate-50">
-    <div class="flex items-center">
+    class="px-3 py-2 text-sm font-medium leading-none duration-150 rounded-lg bg-slate-600 text-slate-100 hover:bg-slate-700 hover:text-slate-50">
+    <div class="flex items-center justify-center gap-x-1.5">
         @if ($attributes->has('wire:target'))
-            <svg wire:loading.delay.default class="mr-1 h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
+            <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                 </circle>

diff --git a/resources/views/components/buttons-bg/primary.blade.php b/resources/views/components/buttons-bg/primary.blade.php
@@ -1,8 +1,8 @@
 <button {{ $attributes }}
-    class="rounded-lg bg-indigo-600 px-3 py-2 text-sm font-medium leading-none text-indigo-100 duration-150 hover:bg-indigo-700 hover:text-indigo-50">
-    <div class="flex items-center">
+    class="px-3 py-2 text-sm font-medium leading-none text-indigo-100 duration-150 bg-indigo-600 rounded-lg hover:bg-indigo-700 hover:text-indigo-50">
+    <div class="flex items-center justify-center gap-x-1.5">
         @if ($attributes->has('wire:target'))
-            <svg wire:loading.delay.default class="mr-1 h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
+            <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                 </circle>

diff --git a/resources/views/components/buttons-bg/success.blade.php b/resources/views/components/buttons-bg/success.blade.php
@@ -1,8 +1,8 @@
 <button {{ $attributes }}
-    class="rounded-lg bg-green-600 px-3 py-2 text-sm font-medium leading-none text-green-100 duration-150 hover:bg-green-700 hover:text-green-50">
-    <div class="flex items-center">
+    class="px-3 py-2 text-sm font-medium leading-none text-green-100 duration-150 bg-green-600 rounded-lg hover:bg-green-700 hover:text-green-50">
+    <div class="flex items-center justify-center gap-x-1.5">
         @if ($attributes->has('wire:target'))
-            <svg wire:loading.delay.default class="mr-1 h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
+            <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                 </circle>

diff --git a/resources/views/components/buttons-bg/theme.blade.php b/resources/views/components/buttons-bg/theme.blade.php
@@ -1,8 +1,8 @@
 <button {{ $attributes }}
-    class="rounded-lg bg-indigo-600 px-3 py-2 text-sm font-medium leading-none text-indigo-100 duration-150 hover:bg-indigo-700 hover:text-indigo-50">
-    <div class="flex items-center">
+    class="px-3 py-2 text-sm font-medium leading-none text-indigo-100 duration-150 bg-indigo-600 rounded-lg hover:bg-indigo-700 hover:text-indigo-50">
+    <div class="flex items-center justify-center gap-x-1.5">
         @if ($attributes->has('wire:target'))
-            <svg wire:loading.delay.default class="mr-1 h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
+            <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                 </circle>

diff --git a/resources/views/components/buttons-bg/warning.blade.php b/resources/views/components/buttons-bg/warning.blade.php
@@ -1,8 +1,8 @@
 <button {{ $attributes }}
-    class="rounded-lg bg-orange-600 px-3 py-2 text-sm font-medium leading-none text-orange-100 duration-150 hover:bg-orange-700 hover:text-orange-50">
-    <div class="flex items-center">
+    class="px-3 py-2 text-sm font-medium leading-none text-orange-100 duration-150 bg-orange-600 rounded-lg hover:bg-orange-700 hover:text-orange-50">
+    <div class="flex items-center justify-center gap-x-1.5">
         @if ($attributes->has('wire:target'))
-            <svg wire:loading.delay.default class="mr-1 h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
+            <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                 </circle>

diff --git a/resources/views/components/buttons/danger.blade.php b/resources/views/components/buttons/danger.blade.php
@@ -1,6 +1,6 @@
 <button {{ $attributes }} class="font-medium leading-none text-red-600 duration-150 hover:text-red-700 hover:underline"
     wire:loading.attr="disabled">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if ($attributes->has('wire:target'))
             <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>

diff --git a/resources/views/components/buttons/disabled.blade.php b/resources/views/components/buttons/disabled.blade.php
@@ -1,7 +1,7 @@
 <button {{ $attributes }}
-    class="font-medium leading-none text-slate-600 duration-150 hover:text-slate-700 hover:underline"
+    class="font-medium leading-none duration-150 text-slate-600 hover:text-slate-700 hover:underline"
     wire:loading.attr="disabled">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if ($attributes->has('wire:target'))
             <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>

diff --git a/resources/views/components/buttons/primary.blade.php b/resources/views/components/buttons/primary.blade.php
@@ -1,7 +1,7 @@
 <button {{ $attributes }}
     class="font-medium leading-none text-indigo-600 duration-150 hover:text-indigo-700 hover:underline"
     wire:loading.attr="disabled">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if ($attributes->has('wire:target'))
             <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>

diff --git a/resources/views/components/buttons/success.blade.php b/resources/views/components/buttons/success.blade.php
@@ -1,7 +1,7 @@
 <button {{ $attributes }}
     class="font-medium leading-none text-green-600 duration-150 hover:text-green-700 hover:underline"
     wire:loading.attr="disabled">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if ($attributes->has('wire:target'))
             <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>

diff --git a/resources/views/components/buttons/theme.blade.php b/resources/views/components/buttons/theme.blade.php
@@ -1,7 +1,7 @@
 <button {{ $attributes }}
     class="font-medium leading-none text-indigo-600 duration-150 hover:text-indigo-700 hover:underline"
     wire:loading.attr="disabled">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if ($attributes->has('wire:target'))
             <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>

diff --git a/resources/views/components/buttons/warning.blade.php b/resources/views/components/buttons/warning.blade.php
@@ -1,7 +1,7 @@
 <button {{ $attributes }}
     class="font-medium leading-none text-orange-600 duration-150 hover:text-orange-700 hover:underline"
     wire:loading.attr="disabled">
-    <div class="flex items-center space-x-1">
+    <div class="flex items-center gap-x-1">
         @if ($attributes->has('wire:target'))
             <svg wire:loading.delay.default class="h-[15px] w-[15px] animate-spin" xmlns="http://www.w3.org/2000/svg"
                 fill="none" viewBox="0 0 24 24" {{ $attributes->whereStartsWith('wire:target') }}>

diff --git a/resources/views/components/form.blade.php b/resources/views/components/form.blade.php
@@ -1,7 +1,9 @@
 @props([
     'haveImage' => false,
+    'rtl' => false,
 ])
-<form {{ $attributes }} novalidate @if ($haveImage) enctype="multipart/form-data" @endif>
+<form {{ $attributes }} novalidate @if ($haveImage) enctype="multipart/form-data" @endif
+    dir="{{ $rtl ? 'rtl' : 'ltr' }}">
     @csrf
     {{ $slot }}
 </form>
diff --git a/resources/views/components/form/checkbox.blade.php b/resources/views/components/form/checkbox.blade.php
@@ -12,7 +12,7 @@
         <input type="checkbox" {{ $attributes }} aria-invalid="{{ $error ? 'true' : 'false' }}"
             class="w-4 h-4 text-indigo-600 border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring-0 focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0" />
         @if (!$labelOff)
-            <span class="ml-2 text-sm">{{ $slot }}</span>
+            <span class="text-sm ltr:ml-2 rtl:mr-2">{{ $slot }}</span>
         @endif
     </label>
     @if ($helpText)