Merge pull request #34 from sensasi-delight:sensasi-delight/issue33

Adjust prettier config
sensasi-delight · Jun 27, 2024 · dfe0260 · dfe0260
2 parents b63f8d7 + dbcf72e
commit dfe0260
Show file tree

Hide file tree

Showing 17 changed files with 275 additions and 161 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,6 +1,6 @@
 {
     "arrowParens": "avoid",
-    "bracketSameLine": true,
+    "singleAttributePerLine": true,
     "semi": false,
     "singleQuote": true,
     "tabWidth": 4,

diff --git a/README.md b/README.md
@@ -95,8 +95,14 @@ Next step, you must includes once the `<x-MaterialBlade::_assets />` inside `<he
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+        />
+        <meta
+            http-equiv="X-UA-Compatible"
+            content="ie=edge"
+        />
         <title>Material Blade Example</title>
 
         <!-- Material Blade required assets -->

diff --git a/src/views/components/_assets.blade.php b/src/views/components/_assets.blade.php
@@ -1,6 +1,12 @@
-<link rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
-<link rel="stylesheet"
-      href="{{ route('material-blade.assets', ['main', 'css']) }}">
-<script type="module"
-        src="{{ route('material-blade.assets', ['main', 'js']) }}"></script>
+<link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+>
+<link
+    rel="stylesheet"
+    href="{{ route('material-blade.assets', ['main', 'css']) }}"
+>
+<script
+    type="module"
+    src="{{ route('material-blade.assets', ['main', 'js']) }}"
+></script>
diff --git a/src/views/components/alert.blade.php b/src/views/components/alert.blade.php
@@ -1,15 +1,21 @@
-<x-mbc::card variant="outlined"
-             {{ $attributesPreprocess($attributes) }}>
-    <x-mbc::card-content class="mbc-p-2"
-                         style="display: flex; gap: 1em; color: inherit">
+<x-mbc::card
+    variant="outlined"
+    {{ $attributesPreprocess($attributes) }}
+>
+    <x-mbc::card-content
+        class="mbc-p-2"
+        style="display: flex; gap: 1em; color: inherit"
+    >
         <x-mbc::icon :icon="$getIcon()" />
 
         <div>
             @isset($title)
-                <x-mbc::typography class="mbc-m-0"
-                                   style="font-weight: bold; line-height: unset"
-                                   element="p"
-                                   variant="h6">{{ $title }}</x-mbc::typography>
+                <x-mbc::typography
+                    class="mbc-m-0"
+                    style="font-weight: bold; line-height: unset"
+                    element="p"
+                    variant="h6"
+                >{{ $title }}</x-mbc::typography>
             @endisset
 
             <x-mbc::typography class="mbc-mt-1">{{ $slot }}</x-mbc::typography>

diff --git a/src/views/components/banner.blade.php b/src/views/components/banner.blade.php
@@ -3,17 +3,23 @@
     @if ($isFixed)
         <div class="mdc-banner__fixed">
     @endif
-    <div class="mdc-banner__content"
-         role="alertdialog"
-         aria-live="assertive">
+    <div
+        class="mdc-banner__content"
+        role="alertdialog"
+        aria-live="assertive"
+    >
         <div class="mdc-banner__graphic-text-wrapper">
 
             @if ($icon)
-                <div class="mdc-banner__graphic"
-                     role="img"
-                     alt="">
-                    <x-mbc::Icon class="mdc-banner__icon"
-                                 :icon="$icon" />
+                <div
+                    class="mdc-banner__graphic"
+                    role="img"
+                    alt=""
+                >
+                    <x-mbc::Icon
+                        class="mdc-banner__icon"
+                        :icon="$icon"
+                    />
                 </div>
             @endif
 

diff --git a/src/views/components/button.blade.php b/src/views/components/button.blade.php
@@ -18,17 +18,21 @@
 @endif
 
 @if ($startIcon)
-    <x-mbc::Icon :icon="$startIcon"
-                 class="mdc-button__icon"
-                 aria-hidden="true" />
+    <x-mbc::Icon
+        :icon="$startIcon"
+        class="mdc-button__icon"
+        aria-hidden="true"
+    />
 @endif
 
 <span class="mdc-button__label">{{ $label ?: $slot }}</span>
 
 @if ($endIcon)
-    <x-mbc::Icon :icon="$endIcon"
-                 class="mdc-button__icon"
-                 aria-hidden="true" />
+    <x-mbc::Icon
+        :icon="$endIcon"
+        class="mdc-button__icon"
+        aria-hidden="true"
+    />
 @endif
 
 @if ($attributes->has('href'))

diff --git a/src/views/components/card-header.blade.php b/src/views/components/card-header.blade.php
@@ -1,15 +1,19 @@
 <div {{ $attributesPreprocess($attributes) }}>
     @if (isset($title))
-        <x-mbc::Typography class="mdc-card__header-title"
-                           variant="h6"
-                           :element="$titleElement"
-                           :slot="$title" />
+        <x-mbc::Typography
+            class="mdc-card__header-title"
+            variant="h6"
+            :element="$titleElement"
+            :slot="$title"
+        />
     @endif
 
     @if (isset($subtitle))
-        <x-mbc::Typography class="mdc-card__header-subtitle"
-                           variant="subtitle2"
-                           :element="$subtitleElement"
-                           :slot="$subtitle" />
+        <x-mbc::Typography
+            class="mdc-card__header-subtitle"
+            variant="subtitle2"
+            :element="$subtitleElement"
+            :slot="$subtitle"
+        />
     @endif
 </div>
diff --git a/src/views/components/checkbox.blade.php b/src/views/components/checkbox.blade.php
@@ -3,13 +3,19 @@
     {{ $attributes->has('disabled') ? 'mdc-checkbox--disabled' : null }}
     ">
         <input {{ $attributesPreprocess($attributes) }} />
-        <div class="mdc-checkbox__background"
-             style="--mdc-checkbox-checked-color: {{ MaterialBlade\Helper::getColor($color) }}">
-            <svg class="mdc-checkbox__checkmark"
-                 viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark-path"
-                      fill="none"
-                      d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+        <div
+            class="mdc-checkbox__background"
+            style="--mdc-checkbox-checked-color: {{ MaterialBlade\Helper::getColor($color) }}"
+        >
+            <svg
+                class="mdc-checkbox__checkmark"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    class="mdc-checkbox__checkmark-path"
+                    fill="none"
+                    d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                />
             </svg>
             <div class="mdc-checkbox__mixedmark"></div>
         </div>

diff --git a/src/views/components/chip.blade.php b/src/views/components/chip.blade.php
@@ -8,26 +8,34 @@
     <div class="mdc-chip__ripple"></div>
 
     @if ($icon)
-        <x-mbc::Icon :icon="$icon"
-                     class="mdc-chip__icon mdc-chip__icon--leading{{ $isSelected ? ' mdc-chip__icon--leading-hidden' : null }}" />
+        <x-mbc::Icon
+            :icon="$icon"
+            class="mdc-chip__icon mdc-chip__icon--leading{{ $isSelected ? ' mdc-chip__icon--leading-hidden' : null }}"
+        />
     @endif
 
     @if ($variant === 'filter')
         <span class="mdc-chip__checkmark">
-            <svg class="mdc-chip__checkmark-svg"
-                 viewBox="-2 -3 30 30">
-                <path class="mdc-chip__checkmark-path"
-                      fill="none"
-                      stroke="black"
-                      d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+            <svg
+                class="mdc-chip__checkmark-svg"
+                viewBox="-2 -3 30 30"
+            >
+                <path
+                    class="mdc-chip__checkmark-path"
+                    fill="none"
+                    stroke="black"
+                    d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                />
             </svg>
         </span>
     @endif
 
     <span role="gridcell">
-        <span role="{{ $variant === 'filter' ? 'checkbox' : 'button' }}"
-              tabindex="0"
-              class="mdc-chip__primary-action"@if ($variant === 'filter') aria-checked="{{ $isSelected }}" @endif>
+        <span
+            role="{{ $variant === 'filter' ? 'checkbox' : 'button' }}"
+            tabindex="0"
+            class="mdc-chip__primary-action"@if ($variant === 'filter') aria-checked="{{ $isSelected }}" @endif
+        >
 
             @if ($isWithWrapper)
                 <div class="mdc-chip__touch"></div>
@@ -39,9 +47,11 @@ class="mdc-chip__primary-action"@if ($variant === 'filter') aria-checked="{{ $is
 
     @if ($variant === 'input' && !$isDisabled)
         <span role="gridcell">
-            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing mdc-chip__action--trailing"
-               tabindex="-1"
-               role="button">cancel</i>
+            <i
+                class="material-icons mdc-chip__icon mdc-chip__icon--trailing mdc-chip__action--trailing"
+                tabindex="-1"
+                role="button"
+            >cancel</i>
         </span>
     @endif
 </div>

diff --git a/src/views/components/circular-progress.blade.php b/src/views/components/circular-progress.blade.php
@@ -29,51 +29,69 @@
 @endphp
 
 <div
-     {{ $attributesPreprocess($attributes->merge(['style' => $attributes->prepends('width: ' . $wh . '; height: ' . $wh . ';')])) }}>
+    {{ $attributesPreprocess($attributes->merge(['style' => $attributes->prepends('width: ' . $wh . '; height: ' . $wh . ';')])) }}>
     <div class="mdc-circular-progress__determinate-container">
-        <svg class="mdc-circular-progress__determinate-circle-graphic"
-             viewBox="{{ $viewBox }}"
-             xmlns="http://www.w3.org/2000/svg">
-            <circle class="mdc-circular-progress__determinate-track"
-                    {!! $cx !!}
-                    stroke-width="{{ $strokeWidth }}" />
-            <circle class="mdc-circular-progress__determinate-circle"
-                    {!! $cx !!}
-                    stroke-dasharray="{{ $strokeDasharray }}"
-                    stroke-dashoffset="{{ $strokeDasharray }}"
-                    stroke-width="{{ $strokeWidth }}" />
+        <svg
+            class="mdc-circular-progress__determinate-circle-graphic"
+            viewBox="{{ $viewBox }}"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <circle
+                class="mdc-circular-progress__determinate-track"
+                {!! $cx !!}
+                stroke-width="{{ $strokeWidth }}"
+            />
+            <circle
+                class="mdc-circular-progress__determinate-circle"
+                {!! $cx !!}
+                stroke-dasharray="{{ $strokeDasharray }}"
+                stroke-dashoffset="{{ $strokeDasharray }}"
+                stroke-width="{{ $strokeWidth }}"
+            />
         </svg>
     </div>
     <div class="mdc-circular-progress__indeterminate-container">
         <div class="mdc-circular-progress__spinner-layer">
             <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
-                <svg class="mdc-circular-progress__indeterminate-circle-graphic"
-                     viewBox="{{ $viewBox }}"
-                     xmlns="http://www.w3.org/2000/svg">
-                    <circle {!! $cx !!}
-                            stroke-dasharray="{{ $strokeDasharray }}"
-                            stroke-dashoffset="{{ $strokeDashoffset }}"
-                            stroke-width="{{ $strokeWidth }}" />
+                <svg
+                    class="mdc-circular-progress__indeterminate-circle-graphic"
+                    viewBox="{{ $viewBox }}"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <circle
+                        {!! $cx !!}
+                        stroke-dasharray="{{ $strokeDasharray }}"
+                        stroke-dashoffset="{{ $strokeDashoffset }}"
+                        stroke-width="{{ $strokeWidth }}"
+                    />
                 </svg>
             </div>
             <div class="mdc-circular-progress__gap-patch">
-                <svg class="mdc-circular-progress__indeterminate-circle-graphic"
-                     viewBox="{{ $viewBox }}"
-                     xmlns="http://www.w3.org/2000/svg">
-                    <circle {!! $cx !!}
-                            stroke-dasharray="{{ $strokeDasharray }}"
-                            stroke-dashoffset="{{ $strokeDashoffset }}"
-                            stroke-width="{{ $strokeWidth2 }}" />
+                <svg
+                    class="mdc-circular-progress__indeterminate-circle-graphic"
+                    viewBox="{{ $viewBox }}"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <circle
+                        {!! $cx !!}
+                        stroke-dasharray="{{ $strokeDasharray }}"
+                        stroke-dashoffset="{{ $strokeDashoffset }}"
+                        stroke-width="{{ $strokeWidth2 }}"
+                    />
                 </svg>
             </div>
             <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
-                <svg class="mdc-circular-progress__indeterminate-circle-graphic"
-                     viewBox="{{ $viewBox }}"
-                     xmlns="http://www.w3.org/2000/svg">
-                    <circle {!! $cx !!}
-                            stroke-dasharray="{{ $strokeDasharray }}"
-                            stroke-dashoffset="{{ $strokeDashoffset }}"
-                            stroke-width="{{ $strokeWidth }}" />
+                <svg
+                    class="mdc-circular-progress__indeterminate-circle-graphic"
+                    viewBox="{{ $viewBox }}"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <circle
+                        {!! $cx !!}
+                        stroke-dasharray="{{ $strokeDasharray }}"
+                        stroke-dashoffset="{{ $strokeDashoffset }}"
+                        stroke-width="{{ $strokeWidth }}"
+                    />
                 </svg>
             </div>
         </div>