refactor: remove redundant <script setup /> from vue components

vuestorefront · Jan 17, 2025 · dafb778 · dafb778
1 parent 5c163bc
commit dafb778
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 75 deletions.
diff --git a/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue b/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
@@ -1,4 +1,7 @@
-<script lang="ts">
+<script lang="ts" setup>
+import { type PropType, type ConcreteComponent, computed, toRefs } from 'vue';
+import { useAttrsRef, SfButtonSize, SfButtonVariant } from '@storefront-ui/vue';
+
 export const variantClasses = {
   [SfButtonVariant.primary]:
     'text-white shadow hover:shadow-md active:shadow bg-primary-700 hover:bg-primary-800 active:bg-primary-900 disabled:bg-disabled-300',
@@ -7,11 +10,6 @@ export const variantClasses = {
   [SfButtonVariant.tertiary]:
     'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 disabled:bg-transparent',
 };
-</script>
-
-<script lang="ts" setup>
-import { type PropType, type ConcreteComponent, computed, toRefs } from 'vue';
-import { useAttrsRef, SfButtonSize, SfButtonVariant } from '@storefront-ui/vue';
 
 const props = defineProps({
   size: {

diff --git a/packages/sfui/frameworks/vue/components/SfChip/SfChip.vue b/packages/sfui/frameworks/vue/components/SfChip/SfChip.vue
@@ -1,14 +1,13 @@
-<script lang="ts">
-const sizeClasses = {
-  [SfChipSize.sm]: 'text-sm py-1.5 gap-1.5',
-  [SfChipSize.base]: 'text-base py-2 gap-2',
-};
-</script>
 <script lang="ts" setup>
 import { type PropType, type InputHTMLAttributes } from 'vue';
 import { toRefs, computed } from 'vue';
 import { useId, SfChipSize, useSlotsRef } from '@storefront-ui/vue';
 
+const sizeClasses = {
+  [SfChipSize.sm]: 'text-sm py-1.5 gap-1.5',
+  [SfChipSize.base]: 'text-base py-2 gap-2',
+};
+
 const props = defineProps({
   size: {
     type: String as PropType<`${SfChipSize}`>,

diff --git a/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue b/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
@@ -1,18 +1,17 @@
-<script lang="ts">
-export default {
+<script lang="ts" setup>
+import type { PropType, ConcreteComponent } from 'vue';
+import { computed, ref, toRefs } from 'vue';
+import { SfInputSize, useFocusVisible } from '@storefront-ui/vue';
+
+defineOptions({
   inheritAttrs: false,
-};
+});
+
 const getSizeClasses = {
   [SfInputSize.sm]: ' h-[32px]',
   [SfInputSize.base]: 'h-[40px]',
   [SfInputSize.lg]: 'h-[48px]',
 };
-</script>
-
-<script lang="ts" setup>
-import type { PropType, ConcreteComponent } from 'vue';
-import { computed, ref, toRefs } from 'vue';
-import { SfInputSize, useFocusVisible } from '@storefront-ui/vue';
 
 const props = defineProps({
   modelValue: {

diff --git a/packages/sfui/frameworks/vue/components/SfLink/SfLink.vue b/packages/sfui/frameworks/vue/components/SfLink/SfLink.vue
@@ -1,15 +1,13 @@
-<script lang="ts">
+<script lang="ts" setup>
+import type { PropType, ConcreteComponent } from 'vue';
+import { SfLinkVariant } from '@storefront-ui/vue';
+
 const variantClasses = {
   [SfLinkVariant.primary]:
     'text-primary-700 underline hover:text-primary-800 active:text-primary-900 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm',
   [SfLinkVariant.secondary]:
     'underline hover:text-primary-800 active:text-primary-900 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm',
 };
-</script>
-
-<script lang="ts" setup>
-import type { PropType, ConcreteComponent } from 'vue';
-import { SfLinkVariant } from '@storefront-ui/vue';
 
 defineProps({
   tag: {

diff --git a/packages/sfui/frameworks/vue/components/SfLoaderCircular/SfLoaderCircular.vue b/packages/sfui/frameworks/vue/components/SfLoaderCircular/SfLoaderCircular.vue
@@ -1,4 +1,7 @@
-<script lang="ts">
+<script lang="ts" setup>
+import { type PropType } from 'vue';
+import { SfLoaderSize } from '@storefront-ui/vue';
+
 const sizeClasses = {
   [SfLoaderSize.xs]: 'h-4 w-4 ring-2',
   [SfLoaderSize.sm]: 'h-5 w-5 ring-2',
@@ -19,11 +22,6 @@ const strokeSizeClass = {
   [SfLoaderSize['3xl']]: 'stroke-2',
   [SfLoaderSize['4xl']]: 'stroke-2',
 };
-</script>
-
-<script lang="ts" setup>
-import { type PropType } from 'vue';
-import { SfLoaderSize } from '@storefront-ui/vue';
 
 defineProps({
   size: {

diff --git a/packages/sfui/frameworks/vue/components/SfLoaderLinear/SfLoaderLinear.vue b/packages/sfui/frameworks/vue/components/SfLoaderLinear/SfLoaderLinear.vue
@@ -1,4 +1,7 @@
-<script lang="ts">
+<script lang="ts" setup>
+import { type PropType } from 'vue';
+import { SfLoaderLinearSize, SfLoaderSize } from '@storefront-ui/vue';
+
 const sizeClasses = {
   [SfLoaderLinearSize.minimal]: 'h-1',
   [SfLoaderSize.xs]: 'h-4',
@@ -10,11 +13,6 @@ const sizeClasses = {
   [SfLoaderSize['3xl']]: 'h-24',
   [SfLoaderSize['4xl']]: 'h-48',
 };
-</script>
-
-<script lang="ts" setup>
-import { type PropType } from 'vue';
-import { SfLoaderLinearSize, SfLoaderSize } from '@storefront-ui/vue';
 
 defineProps({
   size: {

diff --git a/packages/sfui/frameworks/vue/components/SfProgressCircular/SfProgressCircular.vue b/packages/sfui/frameworks/vue/components/SfProgressCircular/SfProgressCircular.vue
@@ -1,4 +1,7 @@
-<script lang="ts">
+<script lang="ts" setup>
+import { computed, toRefs, type PropType } from 'vue';
+import { SfProgressSize } from '@storefront-ui/vue';
+
 const sizeClasses = {
   [SfProgressSize.xs]: 'h-4 w-4 ring-2',
   [SfProgressSize.sm]: 'h-5 w-5 ring-2',
@@ -19,11 +22,6 @@ const strokeSizeClass = {
   [SfProgressSize['3xl']]: 'stroke-2',
   [SfProgressSize['4xl']]: 'stroke-2',
 };
-</script>
-
-<script lang="ts" setup>
-import { computed, toRefs, type PropType } from 'vue';
-import { SfProgressSize } from '@storefront-ui/vue';
 
 const props = defineProps({
   value: {

diff --git a/packages/sfui/frameworks/vue/components/SfProgressLinear/SfProgressLinear.vue b/packages/sfui/frameworks/vue/components/SfProgressLinear/SfProgressLinear.vue
@@ -1,4 +1,7 @@
-<script lang="ts">
+<script lang="ts" setup>
+import { type PropType } from 'vue';
+import { SfProgressSize, SfProgressLinearSize } from '@storefront-ui/vue';
+
 const sizeClasses = {
   [SfProgressLinearSize.minimal]: 'h-1',
   [SfProgressSize.xs]: 'h-4',
@@ -10,11 +13,6 @@ const sizeClasses = {
   [SfProgressSize['3xl']]: 'h-24',
   [SfProgressSize['4xl']]: 'h-48',
 };
-</script>
-
-<script lang="ts" setup>
-import { type PropType } from 'vue';
-import { SfProgressSize, SfProgressLinearSize } from '@storefront-ui/vue';
 
 defineProps({
   value: {

diff --git a/packages/sfui/frameworks/vue/components/SfRating/SfRating.vue b/packages/sfui/frameworks/vue/components/SfRating/SfRating.vue
@@ -1,17 +1,15 @@
-<script lang="ts">
+<script lang="ts" setup>
+import { computed, toRefs, type PropType } from 'vue';
+import { clamp, roundToNearest } from '@storefront-ui/shared';
+import { SfRatingSize, SfIconStarFilled, SfIconStar, SfIconStarHalf } from '@storefront-ui/vue';
+
 const sizeClasses = {
   [SfRatingSize.xs]: 'text-xs',
   [SfRatingSize.sm]: 'text-sm',
   [SfRatingSize.base]: 'text-base',
   [SfRatingSize.lg]: 'text-lg',
   [SfRatingSize.xl]: 'text-xl',
 };
-</script>
-
-<script lang="ts" setup>
-import { computed, toRefs, type PropType } from 'vue';
-import { clamp, roundToNearest } from '@storefront-ui/shared';
-import { SfRatingSize, SfIconStarFilled, SfIconStar, SfIconStarHalf } from '@storefront-ui/vue';
 
 const props = defineProps({
   size: {

diff --git a/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue b/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
 <script lang="ts" setup>
 import { computed, toRefs, type PropType, type ConcreteComponent, reactive } from 'vue';
 import {
@@ -21,6 +16,10 @@ import {
   type ScrollableOptions,
 } from '@storefront-ui/vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   tag: {
     type: [String, Object] as PropType<string | ConcreteComponent>,

diff --git a/packages/sfui/frameworks/vue/components/SfTextarea/SfTextarea.vue b/packages/sfui/frameworks/vue/components/SfTextarea/SfTextarea.vue
@@ -1,15 +1,13 @@
-<script lang="ts">
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { computed, toRefs } from 'vue';
+import { SfTextareaSize, useFocusVisible } from '@storefront-ui/vue';
+
 const getSizeClasses = {
   [SfTextareaSize.sm]: ' h-[56px] py-[6px] pl-4 pr-3',
   [SfTextareaSize.base]: 'h-[64px] py-2 pl-4 pr-3',
   [SfTextareaSize.lg]: 'h-[72px], p-3 pl-4',
 };
-</script>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import { computed, toRefs } from 'vue';
-import { SfTextareaSize, useFocusVisible } from '@storefront-ui/vue';
 
 const props = defineProps({
   modelValue: {

diff --git a/packages/sfui/frameworks/vue/components/SfThumbnail/SfThumbnail.vue b/packages/sfui/frameworks/vue/components/SfThumbnail/SfThumbnail.vue
@@ -1,14 +1,13 @@
-<script lang="ts">
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { SfThumbnailSize } from '@storefront-ui/vue';
+
 const sizeClasses = {
   [SfThumbnailSize.sm]: 'w-5 h-5',
   [SfThumbnailSize.base]: 'w-6 h-6',
   [SfThumbnailSize.lg]: 'w-10 h-10',
   [SfThumbnailSize.xl]: 'w-14 h-14',
 };
-</script>
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import { SfThumbnailSize } from '@storefront-ui/vue';
 
 defineProps({
   size: {