migrate mt-empty-state over to composition api

shopware · Sep 19, 2024 · 198ae2c · 198ae2c
1 parent 8be5954
commit 198ae2c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 49 deletions.
diff --git a/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.spec.ts b/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.spec.ts
@@ -4,6 +4,7 @@ import MtEmptyState from "./mt-empty-state.vue";
 async function createWrapper(customOptions = {}, props = {}) {
   return mount(MtEmptyState, {
     props: {
+      icon: "solid-chart-line-arrow",
       headline: "Foo",
       description: "Bar",
       ...props,

diff --git a/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.stories.ts b/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.stories.ts
@@ -44,6 +44,7 @@ const DefaultTemplate: StoryFn = (args) => ({
 
 export const Default: StoryFn = DefaultTemplate.bind({});
 Default.args = {
+  icon: "solid-chart-line-arrow",
   headline: "Default Headline",
   description: "Default Description",
 };

diff --git a/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue b/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue
@@ -29,61 +29,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import MtExternalLink from "@/components/form/mt-external-link/mt-external-link.vue";
 import MtButton from "@/components/form/mt-button/mt-button.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 
-export default defineComponent({
-  name: "MtEmptyState",
+defineProps<{
+  headline: string;
+  description: string;
+  icon: string;
+  linkHref?: string;
+  linkText?: string;
+  buttonText?: string;
+}>();
 
-  components: {
-    MtIcon,
-    MtExternalLink,
-    MtButton,
-    MtText,
-  },
-
-  props: {
-    headline: {
-      type: String,
-      required: true,
-    },
-
-    description: {
-      type: String,
-      required: true,
-    },
-
-    icon: {
-      type: String,
-      required: false,
-      default: "solid-content",
-    },
-
-    linkHref: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-
-    linkText: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-
-    buttonText: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
-
-  emits: ["button-click"],
-});
+defineEmits(["button-click"]);
 </script>
 
 <style scoped>

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
@@ -478,6 +478,7 @@
               <div class="mt-data-table__empty-state">
                 <slot name="empty-state">
                   <mt-empty-state
+                    icon="solid-products"
                     :headline="$t('mt-data-table.emptyState.headline')"
                     :description="$t('mt-data-table.emptyState.description')"
                   />