feat: use new defineModel in components

shuriken-ui · Jan 11, 2024 · 5695a45 · 5695a45
1 parent 0c0e922
commit 5695a45
Show file tree

Hide file tree

Showing 21 changed files with 435 additions and 657 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -65,6 +65,7 @@ module.exports = {
     'vue/no-ref-object-destructure': 'error',
     'vue/no-required-prop-with-default': 'error',
     'vue/require-prop-comment': 'error',
+    'vue/valid-v-model': 'off',
 
     // 'vue/require-expose': 'error',
 

diff --git a/.playground/pages/tests/base/tabs.vue b/.playground/pages/tests/base/tabs.vue
@@ -5,6 +5,8 @@ definePageMeta({
   description: 'Tabs component',
   section: 'base',
 })
+
+const selectedTab = ref('team')
 </script>
 
 <template>
@@ -13,7 +15,7 @@ definePageMeta({
       <NuiPreview title="Align: start" description="Tabs component start align">
         <div class="w-full max-w-sm">
           <BaseTabs
-            model-value="team"
+            v-model="selectedTab"
             :tabs="[
               { label: 'Team', value: 'team' },
               { label: 'Projects', value: 'projects' },

diff --git a/.playground/pages/tests/tests/input-models.vue b/.playground/pages/tests/tests/input-models.vue
@@ -69,6 +69,9 @@ autocomplete1: {{ autocomplete1 }}({{ typeof autocomplete1 }})</pre
           <BaseButtonAction @click="autocomplete1 = undefined">
             reset
           </BaseButtonAction>
+          <BaseButtonAction @click="autocomplete1 = 'hello'">
+            set
+          </BaseButtonAction>
         </BaseCard>
       </div>
     </NuiPreview>

diff --git a/components/base/BaseTabSlider.vue b/components/base/BaseTabSlider.vue
@@ -22,21 +22,17 @@ const props = withDefaults(
       /** The value associated with the tab. */
       value: string
     }[]
-    /**
-     * The value of the currently selected tab.
-     */
-    modelValue?: string
   }>(),
   {
     justify: undefined,
     size: undefined,
     rounded: undefined,
-    modelValue: undefined,
   },
 )
-const emit = defineEmits<{
-  'update:modelValue': [value?: string]
-}>()
+
+const [modelValue] = defineModel<string>({
+  default: () => props.tabs[0]?.value,
+})
 
 const justify = useNuiDefaultProperty(props, 'BaseTabSlider', 'justify')
 const size = useNuiDefaultProperty(props, 'BaseTabSlider', 'size')
@@ -66,23 +62,9 @@ const lengthStyle = computed(() =>
   tabsLength.value === 2 ? 'nui-tabs-two-slots' : 'nui-tabs-three-slots',
 )
 
-const activeValue = ref<string | undefined>(
-  props.modelValue ?? props.tabs[0]?.value,
-)
-
 function toggle(value: string) {
-  activeValue.value = value
+  modelValue.value = value
 }
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    activeValue.value = value
-  },
-)
-watch(activeValue, (value) => {
-  emit('update:modelValue', value)
-})
 </script>
 
 <template>
@@ -102,18 +84,18 @@ watch(activeValue, (value) => {
           :key="index"
           type="button"
           class="nui-tab-slider-item"
-          :class="[activeValue === tab.value && 'nui-active']"
+          :class="[modelValue === tab.value && 'nui-active']"
           @keydown.space="toggle(tab?.value)"
           @click="toggle(tab?.value)"
         >
           {{ tab?.label ?? tab?.value }}
         </button>
-        <div v-show="activeValue" class="nui-tab-slider-naver"></div>
+        <div v-show="modelValue" class="nui-tab-slider-naver"></div>
       </div>
     </div>
 
     <div class="nui-tab-content">
-      <slot :active-value="activeValue"></slot>
+      <slot :active-value="modelValue" :toggle="toggle"></slot>
     </div>
   </div>
 </template>
diff --git a/components/base/BaseTabs.vue b/components/base/BaseTabs.vue
@@ -33,11 +33,6 @@ const props = withDefaults(
       icon?: string
     }[]
 
-    /**
-     * The value of the currently selected tab. This should match the value of one of the tabs in the tabs array.
-     */
-
-    modelValue?: string
     /**
      * Whether or not to hide the label for the tab.
      */
@@ -50,9 +45,7 @@ const props = withDefaults(
   },
 )
 
-const emit = defineEmits<{
-  'update:modelValue': [value?: string]
-}>()
+const [modelValue] = defineModel<string>()
 
 const justify = useNuiDefaultProperty(props, 'BaseTabs', 'justify')
 const type = useNuiDefaultProperty(props, 'BaseTabs', 'type')
@@ -68,38 +61,31 @@ const types = {
   box: 'nui-pill-item',
 } as Record<string, string>
 
-const activeValue = ref(props.modelValue)
-
 function toggle(value: string) {
-  activeValue.value = value
+  modelValue.value = value
 }
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    activeValue.value = value
-  },
-)
-watch(activeValue, (value) => {
-  emit('update:modelValue', value)
-})
 </script>
 
 <template>
-  <div class="nui-tabs" :class="props.justify && justifies[justify]">
+  <div class="nui-tabs" :class="justify && justifies[justify]">
     <div class="nui-tabs-inner">
       <a
         v-for="(tab, key) in tabs"
         :key="key"
         :class="[
           type && types[type],
-          activeValue === tab.value && 'nui-active',
+          modelValue === tab.value && 'nui-active',
           tab.icon && 'nui-has-icon',
         ]"
         tabindex="0"
         @click="toggle(tab.value)"
       >
-        <slot v-if="tab.icon" name="icon" :icon-name="tab.icon">
+        <slot
+          v-if="tab.icon"
+          name="icon"
+          :icon-name="tab.icon"
+          :toggle="toggle"
+        >
           <Icon :name="tab.icon" class="me-1 block h-5 w-5" />
         </slot>
         <span
@@ -115,7 +101,7 @@ watch(activeValue, (value) => {
     </div>
 
     <div class="relative block">
-      <slot name="tab" :active-value="activeValue"></slot>
+      <slot name="tab" :active-value="modelValue" :toggle="toggle"></slot>
     </div>
   </div>
 </template>