[PLA-1793] fueltank checkbox (#134)

enjin · Jul 1, 2024 · c0ee820 · c0ee820
1 parent 0f04919
commit c0ee820
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
         "vite-plugin-dynamic-base": "^0.4.9",
         "vite-plugin-dynamic-import": "^1.2.7",
         "vite-plugin-eslint": "^1.8.1",
-        "vue": "^3.3.4",
+        "vue": "^3.4.21",
         "vue-loader": "^17.2.2",
         "vue-recaptcha": "^2.0.2",
         "vue-router": "^4.2.2",

diff --git a/resources/js/components/MultiCheckbox.vue b/resources/js/components/MultiCheckbox.vue
@@ -21,7 +21,7 @@
                     :class="[
                         hasValue(option.value)
                             ? 'ring-primary'
-                            : 'ring-light-stroke-strong dark:ring-dark-stroke-strong',
+                            : 'ring-light-stroke-strong',
                         'relative flex cursor-pointer rounded-lg ring-2 bg-light-surface-primary dark:bg-dark-surface-primary p-4 shadow-sm focus:outline-none transition-all',
                     ]"
                     @click="updateCheckbox(option.value)"
@@ -40,13 +40,6 @@
                             </Tooltip>
                         </span>
                     </span>
-                    <span
-                        :class="[
-                            hasValue(option.value) ? '' : 'border-2',
-                            'pointer-events-none absolute -inset-px rounded-lg transition-all',
-                        ]"
-                        aria-hidden="true"
-                    />
                 </div>
             </template>
         </div>
@@ -60,7 +53,7 @@ import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline';
 
 const props = withDefaults(
     defineProps<{
-        label: string;
+        label?: string;
         description?: string;
         options: { label: string; value: string; tooltip?: string }[];
         modelValue: string[];

diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
@@ -3,7 +3,6 @@
         :arrow="arrow"
         :class="theme"
         :block="block"
-        :hover="hover"
         :show="show"
         :offset-distance="offsetDistance"
         :placement="(placement as any)"
@@ -61,12 +60,24 @@ withDefaults(
     --popper-theme-text-color: #000;
 }
 
+@mixin dark-mode {
+    @include base-style;
+}
+
 .light {
     @include light-mode;
     --popper-theme-padding: 0;
     --popper-theme-border-radius: 0.5rem;
 }
 
+.dark {
+    @include dark-mode;
+    --popper-theme-padding: 0;
+    --popper-theme-border-radius: 0.5rem;
+    --popper-theme-border-width: 2px;
+    --popper-theme-border-color: hsl(0, 0%, 15%);
+}
+
 .mobile {
     @include light-mode;
     --popper-theme-border-radius: 0;