refactor: use v-bind shorthand syntax

packages/components/src/card/MCard.vue

@@ -96,7 +96,7 @@ const mediaOrder = computed(() => {
       <template v-else-if="actions">
         <MButton
           v-for="{ key, onClick, ...action } of actions"
-          :key="key"
+          :key
           v-bind="action"
           @click="onClick"
         />

packages/components/src/checkbox/MCheckbox.vue

@@ -20,10 +20,10 @@ defineSlots<{ default?: () => VNode }>();
       type="checkbox"
       :class="inputClass"
       :style="inputStyle"
-      :disabled="disabled"
-      :value="value"
-      :true-value="trueValue"
-      :false-value="falseValue"
+      :disabled
+      :value
+      :true-value
+      :false-value
     />
     <span v-if="label || $slots.default" class="m-checkbox-label">
       <slot>{{ label }}</slot>

packages/components/src/dynamic-link/MDynamicLink.vue

@@ -28,7 +28,7 @@ defineExpose({ isExternalLink });
     <slot></slot>
   </a>
 
-  <RouterLink v-else :to="to">
+  <RouterLink v-else :to>
     <slot></slot>
   </RouterLink>
 </template>

packages/components/src/input-text/MInputText.vue

@@ -7,7 +7,7 @@ defineProps<InputTextProps>();
 </script>
 
 <template>
-  <input v-model="model" type="text" class="m-input" :placeholder="placeholder" />
+  <input v-model="model" type="text" class="m-input" :placeholder />
 </template>
 
 <style lang="scss">

packages/components/src/radio/MRadio.vue

@@ -17,9 +17,9 @@ defineSlots<{ default?: () => VNode }>();
       type="radio"
       :class="inputClass"
       :style="inputStyle"
-      :disabled="disabled"
-      :name="name"
-      :value="value"
+      :disabled
+      :name
+      :value
     />
     <span v-if="label || $slots.default" class="m-radio-label">
       <slot>{{ label }}</slot>

packages/components/src/table/MTable.vue

@@ -80,6 +80,7 @@ function sort(field: unknown) {
       <tbody class="m-table-tbody" :class="tbodyClass" :style="tbodyStyle">
         <tr v-for="row of rows" :key="rowKey(row)" :class="tbodyRowClass" :style="tbodyRowStyle">
           <td v-for="column of columns" :key="column.props.field">
+            <!-- eslint-disable-next-line vue/v-bind-style -->
             <component :is="column.slots.body" v-if="column.slots.body" :row="row" />
             <span v-else>{{ row[column.props.field] }}</span>
           </td>

packages/playground/src/App.vue

@@ -38,21 +38,22 @@ const { state: color, execute: getColor } = useInvoke<string>(Command.RandomHexC
 
 <template>
   <m-scaffold
-    :sidebar-items="sidebarItems"
+    :sidebar-items
     sidebar-item-class="flex items-center justify-center"
     :sidebar-item-style="{ width: `${topBarRef?.startWidth ?? 0}px` }"
   >
     <template #top>
       <m-top-appbar
         ref="topBarRef"
         content-alignment="end"
-        :menu-items="menuItems"
+        :menu-items
         :height="60"
         logo="/peach.png"
         title="Manatsu"
         title-link="/"
       >
         <template #menu-item="{ label, to }">
+          <!-- eslint-disable-next-line vue/v-bind-style -->
           <m-dynamic-link :to="to">{{ label }}</m-dynamic-link>
         </template>
 
@@ -75,6 +76,7 @@ const { state: color, execute: getColor } = useInvoke<string>(Command.RandomHexC
     </template>
 
     <template #sidebar-item="{ to, label }">
+      <!-- eslint-disable-next-line vue/v-bind-style -->
       <m-dynamic-link :to="to">
         <span>{{ label }}</span>
       </m-dynamic-link>

packages/playground/src/views/components/ButtonView.vue

@@ -7,7 +7,9 @@ const variants = ['filled', 'elevated', 'outlined'] as const;
 <template>
   <div class="flex gap-4">
     <template v-for="variant of variants" :key="variant">
+      <!-- eslint-disable-next-line vue/v-bind-style -->
       <m-button :variant="variant">{{ capitalize(variant) }}</m-button>
+      <!-- eslint-disable-next-line vue/v-bind-style -->
       <m-button :variant="variant" disabled>{{ capitalize(variant) }}</m-button>
     </template>
   </div>

packages/playground/src/views/components/CardView.vue

@@ -8,10 +8,10 @@ const variants = ['filled', 'elevated', 'outlined'] as const;
 <template>
   <div class="flex gap-8">
     <m-card
-      v-for="variant of variants"
-      :key="variant"
-      :variant="variant"
-      :title="capitalize(variant)"
+      v-for="cardVariant of variants"
+      :key="cardVariant"
+      :variant="cardVariant"
+      :title="capitalize(cardVariant)"
       subtitle="subtitle"
       class="w-72"
     >