refactor mt-search component

shopware · Sep 19, 2024 · 2067d85 · 2067d85
1 parent 17bca01
commit 2067d85
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 67 deletions.
diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue
@@ -1,37 +1,25 @@
 <template>
-  <mt-base-field class="mt-search" :disabled="disabled" :has-focus="hasFocus" :size="size">
-    <template #element="{ identification }">
-      <mt-icon name="regular-search-s" />
-
-      <input
-        :id="identification"
-        class="mt-search__text-input"
-        type="text"
-        :name="identification"
-        :disabled="disabled"
-        :value="currentValue"
-        :placeholder="
-          $t(placeholder)
-            ? $t(placeholder).toString()
-            : $t('mt-search.searchPlaceholder').toString()
-        "
-        @input="onInput"
-        @change="onChange"
-        @focus="setFocusClass"
-        @blur="removeFocusClass"
-      />
-    </template>
-  </mt-base-field>
+  <div :class="['mt-search', `mt-search--size-${size}`, { 'mt-search--disabled': disabled }]">
+    <input
+      :value="modelValue"
+      @input="onInput"
+      @change="onChange"
+      class="mt-search__input"
+      :disabled="disabled"
+      type="text"
+      :placeholder="placeholder || $t('mt-search.searchPlaceholder')"
+    />
+
+    <mt-icon name="regular-search-s" size="1rem" color="var(--color-icon-primary-default)" />
+  </div>
 </template>
 
 <script lang="ts">
-import MtBaseField from "../../form/_internal/mt-base-field/mt-base-field.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import { defineComponent, ref, watch } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   components: {
-    "mt-base-field": MtBaseField,
     "mt-icon": MtIcon,
   },
 
@@ -91,18 +79,10 @@ export default defineComponent({
       },
     },
   },
+
   emits: ["change", "update:modelValue"],
-  setup(props, { emit }) {
-    const hasFocus = ref(false);
-    const currentValue = ref(props.modelValue);
-
-    watch(
-      () => props.modelValue,
-      (value) => {
-        currentValue.value = value;
-      },
-    );
 
+  setup(_, { emit }) {
     const onChange = (event: Event) => {
       // @ts-expect-error - target is defined
       emit("change", event.target.value || "");
@@ -113,50 +93,68 @@ export default defineComponent({
       emit("update:modelValue", event.target.value);
     };
 
-    const setFocusClass = () => {
-      hasFocus.value = true;
-    };
-
-    const removeFocusClass = () => {
-      hasFocus.value = false;
-    };
-
     return {
-      hasFocus,
-      setFocusClass,
-      removeFocusClass,
       onChange,
       onInput,
-      currentValue,
     };
   },
 });
 </script>
 
-<style lang="scss">
-.mt-search.mt-field {
-  .icon--regular-search-s {
-    transition: 0.3s all ease;
-    color: var(--color-icon-primary-default);
-    display: flex;
-    align-items: center;
-    padding-left: 12px;
-    background: var(--color-elevation-surface-raised);
-
-    #meteor-icon-kit__regular-search-s {
-      width: 10px;
-      height: 10px;
-    }
+<style scoped>
+.mt-search {
+  background: var(--color-elevation-surface-raised);
+  border: 1px solid var(--color-border-primary-default);
+  border-radius: var(--border-radius-xs);
+  color: var(--color-text-primary-default);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xs);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  &:focus-within {
+    border-color: var(--color-border-brand-selected);
+    box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
   }
+}
 
-  .mt-search__text-input {
-    padding-left: 8px;
+.mt-search--size-default {
+  padding: 0.75rem 1rem;
+}
+
+.mt-search--size-small {
+  padding: 0.25rem 1rem;
+}
+
+.mt-search__input {
+  display: block;
+  width: 100%;
+  border: none;
+  background: transparent;
+  font-size: var(--font-size-xs);
+  font-family: var(--font-size-body);
+  line-height: var(--font-line-height-xs);
+  color: var(--color-text-primary-default);
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  &::placeholder {
+    color: var(--color-text-secondary-default);
   }
 
-  &.is--disabled {
-    .icon--regular-search-s {
-      background-color: var(--color-background-primary-disabled);
+  &:disabled {
+    color: var(--color-text-primary-disabled);
+
+    &::placeholder {
+      color: var(--color-text-secondary-disabled);
     }
   }
 }
+
+.mt-search--disabled {
+  background-color: var(--color-background-primary-disabled);
+}
 </style>
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
@@ -5,6 +5,7 @@
       <div class="mt-data-table__toolbar">
         <mt-search
           v-if="disableSearch !== true"
+          class="mt-data-table__search"
           size="small"
           :model-value="searchValue"
           @change="emitSearchValueChange"
@@ -2028,6 +2029,10 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
     gap: 0;
   }
 
+  .mt-data-table__search {
+    flex: 1;
+  }
+
   .mt-card__content {
     height: auto;
     padding: 0;