Fixed issue when useSlots from setup was used in template

vuelessjs · May 14, 2024 · 7b85c6e · 7b85c6e
1 parent f9e83dc
commit 7b85c6e
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 20 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -15,11 +15,7 @@ const vueless = createVueless();
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.VITE_BASE_PATH),
-  routes: [
-    {
-      path: "/",
-    },
-  ],
+  routes: [{ path: "/" }],
 });
 
 // Create storybook app instance

diff --git a/src/ui.form-input-file/index.vue b/src/ui.form-input-file/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-bind="wrapperAttrs">
-    <div v-if="!hasSlotContent(slots['default'])">
+    <div v-if="!hasSlotContent($slots['default'])">
       <ULabel
         :label="props.label"
         :description="props.description"
@@ -65,7 +65,7 @@ import Uppy from "@uppy/core";
 import DragDrop from "@uppy/vue/src/drag-drop";
 import { merge } from "lodash-es";
 
-import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import ULabel from "../ui.form-label";
@@ -191,8 +191,6 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
-
 const emit = defineEmits(["changeFiles", "deleteFile"]);
 
 const { tm } = useLocale();

diff --git a/src/ui.form-input-search/index.vue b/src/ui.form-input-search/index.vue
@@ -26,7 +26,7 @@
       <slot name="right" />
 
       <UButton
-        v-if="searchButton && !hasSlotContent(slots['right'])"
+        v-if="searchButton && !hasSlotContent($slots['right'])"
         :label="text"
         v-bind="buttonAttrs"
         :data-cy="`${dataCy}-right`"
@@ -62,7 +62,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots } from "vue";
+import { computed } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UInput from "../ui.form-input";
@@ -184,7 +184,6 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
 const emit = defineEmits(["update:modelValue", "clear", "search"]);
 
 const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs, hasSlotContent } =

diff --git a/src/ui.text-alert/index.vue b/src/ui.text-alert/index.vue
@@ -4,7 +4,7 @@
       <!-- @slot Use it to add something inside. -->
       <slot />
 
-      <div v-if="!hasSlotContent(slots['default'])" v-html="html" />
+      <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
     </div>
 
     <UButton size="sm" variant="thirdary" :color="color" square v-bind="buttonAttrs">
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, useSlots } from "vue";
+import { onMounted, ref } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
@@ -103,7 +103,6 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
 const emit = defineEmits(["hidden"]);
 
 const isShownAlert = ref(true);

diff --git a/src/ui.text-block/index.vue b/src/ui.text-block/index.vue
@@ -1,14 +1,12 @@
 <template>
   <div v-bind="wrapperAttrs" :data-cy="dataCy">
     <!-- @slot Use it to add something. -->
-    <div v-if="!hasSlotContent(slots['default'])" v-html="html" />
+    <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
     <slot />
   </div>
 </template>
 
 <script setup>
-import { useSlots } from "vue";
-
 import UIService from "../service.ui";
 
 import { UText } from "./constatns";
@@ -70,7 +68,5 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
-
 const { wrapperAttrs, hasSlotContent } = useAttrs(props);
 </script>