#210 formatting

OnroerendErfgoed · Feb 5, 2024 · ab939aa · ab939aa
1 parent 2d423c4
commit ab939aa
Show file tree

Hide file tree

Showing 3 changed files with 238 additions and 84 deletions.
diff --git a/src/components/dumb/FilterInput.vue b/src/components/dumb/FilterInput.vue
@@ -1,32 +1,60 @@
 <template>
   <div class="vl-grid filters-input">
-    <span v-if="!props?.options.length" data-cy="no-options" class="vl-alert--warning">Geen filteropties
-      geconfigureerd</span>
+    <span v-if="!props?.options.length" data-cy="no-options" class="vl-alert--warning"
+      >Geen filteropties geconfigureerd</span
+    >
     <template v-else>
-      <vl-select v-model="selectedOption" data-cy="filter-select" class="vl-col--5-12" mod-block mod-inline
-        @update:value="clearInputs">
+      <vl-select
+        v-model="selectedOption"
+        data-cy="filter-select"
+        class="vl-col--5-12"
+        mod-block
+        mod-inline
+        @update:value="clearInputs"
+      >
         <option v-for="option in props.options" :key="option.key" :value="option">
           {{ option.label }}
         </option>
       </vl-select>
       <vl-input-group class="vl-col--7-12">
-        <slot :value="filterInputValue?.value" :set-value="setFilterInputValue" :selected-option="selectedOption"></slot>
+        <slot
+          :value="filterInputValue?.value"
+          :set-value="setFilterInputValue"
+          :selected-option="selectedOption"
+        ></slot>
 
-        <vl-input-addon data-cy="filter-add-button" :mod-disabled="filterValuesAreEmpty" :disabled="filterValuesAreEmpty"
-          tag-name="button" type="button" icon="plus" tooltip="Filter toevoegen" text="Filter toevoegen"
-          @click="addFilter" />
+        <vl-input-addon
+          data-cy="filter-add-button"
+          :mod-disabled="filterValuesAreEmpty"
+          :disabled="filterValuesAreEmpty"
+          tag-name="button"
+          type="button"
+          icon="plus"
+          tooltip="Filter toevoegen"
+          text="Filter toevoegen"
+          @click="addFilter"
+        />
       </vl-input-group>
     </template>
   </div>
   <div v-if="!!filters.length" class="vl-grid filters-selected">
     <span data-cy="filters-label" class="vl-col--1-12 vl-col--2-12--l vl-col--12-12--xs">Filters:</span>
     <vl-action-group class="vl-col--10-12 vl-col--9-12--l vl-col--12-12--xs">
-      <button data-cy="clear-filter-button"
-        class="vl-button vl-u-spacer-left--xsmall vl-u-spacer-bottom--xsmall vl-u-text--small" @click="filters = []">
+      <button
+        data-cy="clear-filter-button"
+        class="vl-button vl-u-spacer-left--xsmall vl-u-spacer-bottom--xsmall vl-u-text--small"
+        @click="filters = []"
+      >
         Alle filters wissen
       </button>
-      <vl-pill v-for="filter in filters" :key="filter.key" :data-cy="`filter-${filter.key}-${filter.value.value}`"
-        mod-closable class="vl-u-spacer-left--xsmall vl-u-spacer-bottom--xsmall" @close="removeFilter(filter)">
+      <vl-pill
+        v-for="filter in filters"
+        :key="filter.key"
+        :data-cy="`filter-${filter.key}-${filter.value.value}`"
+        mod-closable
+        class="vl-u-spacer-left--xsmall vl-u-spacer-bottom--xsmall"
+        @close="removeFilter(filter)"
+      >
         {{ filter.label }} / {{ filter.value.label }}
       </vl-pill>
     </vl-action-group>

diff --git a/src/components/dumb/FilterSelect.vue b/src/components/dumb/FilterSelect.vue
@@ -1,9 +1,18 @@
 <template>
-  <vl-select data-cy="filter-select" :placeholder-text="props.placeholder" mod-block :model-value="props.value"
-    @update:model-value="updateValue">
+  <vl-select
+    data-cy="filter-select"
+    :placeholder-text="props.placeholder"
+    mod-block
+    :model-value="props.value"
+    @update:model-value="updateValue"
+  >
     <slot>
-      <option v-for="option in props.options" :id="`option-${option.value}`" :key="option.value.toString()"
-        :value="option.value">
+      <option
+        v-for="option in props.options"
+        :id="`option-${option.value}`"
+        :key="option.value.toString()"
+        :value="option.value"
+      >
         {{ option.label }}
       </option>
     </slot>