refactor(select): renamed list & select slots

therealokoro · Feb 17, 2023 · 5c0898e · 5c0898e
1 parent a128cdf
commit 5c0898e
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 22 deletions.
diff --git a/docs/components/demos/select/DemoSelectSlot.vue b/docs/components/demos/select/DemoSelectSlot.vue
@@ -3,30 +3,30 @@ import { ref } from 'vue'
 
 const selected = ref()
 const frameworks = [
-  { text: 'VueJS', value: 'vue', icon: 'i-logos-vue', style: 'color: #42b883' },
-  { text: 'ReactJS', value: 'react', icon: 'i-logos-react', style: 'color: #00d8ff' },
-  { text: 'AngularJS', value: 'angular', icon: 'i-logos-angular', style: 'color: #b52e31' },
-  { text: 'SolidJS', value: 'solid', icon: 'i-logos-solidjs-icon', style: 'color: #4e84c1' },
-  { text: 'AlpineJS', value: 'alpine', icon: 'i-logos-alpinejs-icon', style: 'color: #77c1d2' },
+  { text: 'VueJS', value: 'vue', icon: 'i-logos-vue', brandColor: '#42b883' },
+  { text: 'ReactJS', value: 'react', icon: 'i-logos-react', brandColor: '#00d8ff' },
+  { text: 'AngularJS', value: 'angular', icon: 'i-logos-angular', brandColor: '#b52e31' },
+  { text: 'SolidJS', value: 'solid', icon: 'i-logos-solidjs-icon', brandColor: '#4e84c1' },
+  { text: 'AlpineJS', value: 'alpine', icon: 'i-logos-alpinejs-icon', brandColor: '#77c1d2' },
 ]
 </script>
 
 <template>
   <div class="grid-row sm:grid-cols-2 place-items-stretch">
     <ASelect
-      v-slot="{ attrs }"
       v-model="selected"
     >
-      <li
-        v-for="framework in frameworks"
-        v-bind="attrs"
-        :key="framework"
-        class="flex items-center gap-x-3"
-        @click="selected = framework"
-      >
-        <div :class="framework.icon" />
-        <span>{{ framework.label }}</span>
-      </li>
+      <template #default="{ handleOptionClick }">
+        <AListItem
+          v-for="framework in frameworks"
+          :key="framework"
+          :style="`color: ${framework.brandColor}`"
+          @click="handleOptionClick(framework.value)"
+        >
+          <div :class="framework.icon" />
+          <span>{{ framework.text }}</span>
+        </AListItem>
+      </template>
     </ASelect>
   </div>
 </template>
diff --git a/docs/guide/components/select.md b/docs/guide/components/select.md
@@ -66,10 +66,10 @@ Moreover, you can also use `append-icon` & `prepend-icon` prop to add icon outsi
 <!-- 👉 Slots -->
 ::::card Slot
 
-You can use default slot to render the `ASelect` options. Don't forget to bind `attrs` from [slotProps](https://vuejs.org/guide/components/slots.html#scoped-slots) to looping element.
+You can use default slot to render the `ASelect` options.
 
 :::code DemoSelectSlot
-<<< @/components/demos/select/DemoSelectSlot.vue{18,21-30}
+<<< @/components/demos/select/DemoSelectSlot.vue{19-29}
 :::
 
 ::::

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -4,6 +4,9 @@
         "baseUrl": ".",
         "resolveJsonModule": true,
         "esModuleInterop": true,
+        "types": [
+            "anu-vue/volar"
+        ],
         "lib": [
             "esnext",
             "dom",

diff --git a/packages/anu-vue/src/components/list/slots.ts b/packages/anu-vue/src/components/list/slots.ts
@@ -10,15 +10,15 @@ export const listOwnSlots = {
 } as const
 
 export const listItemSlot = {
-  prepend: {
+  'item-prepend': {
     item: listItemSlots.prepend.item,
     index: Number(),
   },
-  item: {
+  'item-item': {
     item: listItemSlots.item.item,
     index: Number(),
   },
-  append: {
+  'item-append': {
     item: listItemSlots.append.item,
     index: Number(),
   },

diff --git a/packages/anu-vue/src/components/select/slots.ts b/packages/anu-vue/src/components/select/slots.ts
@@ -5,7 +5,19 @@ import { prefixObjectKeys, removeKeys } from '@/utils/helpers'
 
 export const selectBaseInputSlots = removeKeys(baseInputSlots, ['default'])
 export const selectCardSlots = removeKeys(cardSlots, ['default'])
-export const selectListSlots = prefixObjectKeys(listSlots, 'option-')
+
+const { default: selectListDefaultSlot, ...selectListRestSlots } = listSlots
+
+// export const selectListSlots = renameObjKey(
+//   prefixObjectKeys(listSlots, 'options-'),
+//   'options-default',
+//   'default',
+// )
+
+export const selectListSlots = {
+  ...prefixObjectKeys(selectListRestSlots, 'options-'),
+  ...prefixObjectKeys({ default: selectListDefaultSlot }, ''),
+}
 
 export const selectSlots = {
   ...selectBaseInputSlots,

diff --git a/packages/anu-vue/src/utils/helpers.ts b/packages/anu-vue/src/utils/helpers.ts
@@ -63,3 +63,16 @@ export const prefixObjectKeys = <T extends Record<string, any>, K extends string
     Object.entries(obj).map(([k, v]) => [`${prefix}${k}`, { originalKey: k, prefixedKey: `${prefix}${k}`, value: v }]),
   ) as any
 }
+
+export const renameObjKey = <T extends Record<string, any>, K extends keyof T, R extends string>(
+  obj: T,
+  key: K,
+  replaceWith: R,
+): Prettify<Omit<T, K> & Record<R, T[K]>> => {
+  const { [key]: value, ...rest } = obj
+
+  return {
+    ...rest,
+    [replaceWith]: value,
+  } as Omit<T, K> & Record<R, T[K]>
+}