feat: typed slots and generic components (#178)

* feat(Alert): add typed slots * feat(AppBar): add typed slots * feat(AppShell): add typed slots * feat(Autocomplete): add typed slots * feat(Avatar): add typed slots * feat(Badge): add typed slots * chore(vscode): enable format on save * feat(Banner): add typed slots * feat(BottomNavigation): add typed slots * feat(BottomSheet): add typed slots * feat(Breadcrumbs): add typed slots * feat(Button): add typed slots * feat(Card): add typed slots * feat(Collapsible): add typed slots * feat(Command): add typed slots * feat(Container): add typed slots * feat(Dropdown): add typed slots * feat(Forms): add typed slots * feat(List): add typed slots * feat(Menus): add typed slots * feat(Modal): add typed slots * feat(MultiSelect): add typed slots * feat(NavDrawer): add typed slots * feat(Pagination): add typed slots * feat(Popover): add typed slots * feat(ProgressBar): add typed slots * feat(ProgressCircular): add typed slots * feat(Select): add typed slots * feat(Stepper): add typed slots * feat(Switch): add typed slots * feat(Breadcrumbs): add typed slots * feat(DataTable): add typed slots * fix(DataTable): fix generate slot name * feat(Tabs): add typed slots * feat(Text): add typed slots * feat(Toast): add typed slots * feat(Tooltip): add typed slots * chore(Select): fix types
gitsindonesia · Jul 31, 2023 · 4c59596 · 4c59596
1 parent c1318cf
commit 4c59596
Show file tree

Hide file tree

Showing 92 changed files with 1,204 additions and 360 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}
diff --git a/packages/alert/src/VAlert.vue b/packages/alert/src/VAlert.vue
@@ -126,6 +126,13 @@ onMounted(() => {
     );
   }
 });
+
+defineSlots<{
+  default?: (props: {}) => any
+  icon?: (props: { icon: string }) => any
+  'x-button'?: (props: { dismiss: () => void }) => any
+  'x-icon'?: (props: {}) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/alert/src/VAlertGroup.vue b/packages/alert/src/VAlertGroup.vue
@@ -6,6 +6,10 @@ type Props = {
 withDefaults(defineProps<Props>(), {
   name: 'alert-group-transition',
 });
+
+defineSlots<{
+  default?: (props: {}) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/alert/src/VAlertTitle.vue b/packages/alert/src/VAlertTitle.vue
@@ -11,6 +11,10 @@ withDefaults(
 );
 
 const api = useAlert();
+
+defineSlots<{
+  default?: (props: {}) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/app-bar/src/VAppBar.vue b/packages/app-bar/src/VAppBar.vue
@@ -140,6 +140,10 @@ if (props.hideOnScroll) {
     window.removeEventListener('scroll', handleScroll);
   });
 }
+
+defineSlots<{
+  default?: (props: {toggle: () => boolean}) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/app-shell/src/VAppShell.vue b/packages/app-shell/src/VAppShell.vue
@@ -7,6 +7,16 @@ defineProps<{
   containerClass?: string;
   paddedContent?: boolean;
 }>();
+
+defineSlots<{
+  default?: (props: {}) => any
+  header?: (props: {}) => any
+  aside?: (props: {}) => any
+  navigation?: (props: {}) => any
+  'container.after'?: (props: {}) => any
+  'content.after'?: (props: {}) => any
+  footer?: (props: {}) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/app-shell/src/VMain.vue b/packages/app-shell/src/VMain.vue
@@ -4,6 +4,10 @@ defineProps<{
   centered?: boolean;
   fluid?: boolean;
 }>();
+
+defineSlots<{
+  default?: (props: {}) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/autocomplete/src/Autocomplete.vue b/packages/autocomplete/src/Autocomplete.vue
@@ -96,6 +96,32 @@ const defaultDisplayValue = (item: any) => {
 const displayValue = computed(() => {
   return props.displayValue ?? defaultDisplayValue;
 });
+
+defineSlots<{
+  default?: (props: {}) => any
+  hint?: (props: {}) => any
+  selection?: (props: {
+    selected: ModelValue;
+    multiple?: boolean;
+    itemValue?: string;
+    itemText?: string;
+    selectionItemProps?: InstanceType<typeof VBadge>['$props'];
+  }) => any
+  'selection-item'?: (props: {
+    item: any;
+    idx: any;
+    itemValue?: string;
+    itemText?: string;
+    remove: () => void;
+  }) => any
+  item?: (props: {
+    item: any;
+    active: boolean;
+    selected: boolean;
+    itemValue?: string;
+    itemText?: string;
+  }) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/autocomplete/src/VAutocomplete.vue b/packages/autocomplete/src/VAutocomplete.vue
@@ -89,6 +89,11 @@ const clear = () => {
   query.value = '';
   clearField()
 };
+
+defineSlots<{
+  default?: (props: {}) => any
+  hint?: (props: {}) => any
+}>()
 </script>
 
 <template>

diff --git a/packages/avatar/src/Avatar.vue b/packages/avatar/src/Avatar.vue
@@ -15,7 +15,7 @@ export type Props = {
   src?: string;
   name?: string;
   maxInitial?: number;
-  indicator?: 'online' | 'verified' | string;
+  indicator?: 'online' | 'verified' | (string & {});
   indicatorClass?: string;
   width?: string | number;
   height?: string | number;
@@ -62,6 +62,11 @@ const computedStyle = computed(() => {
 
   return {};
 });
+
+defineSlots<{
+  default?: (props: {}) => any;
+  indicator?: (props: {indicator: Props['indicator']}) => any;
+}>()
 </script>
 
 <template>

diff --git a/packages/avatar/src/AvatarGroup.vue b/packages/avatar/src/AvatarGroup.vue
@@ -34,6 +34,10 @@ const computedStyles = computed(() => {
 
   return {};
 });
+
+defineSlots<{
+  default?: (props: {}) => any;
+}>()
 </script>
 
 <template>

diff --git a/packages/badge/src/VBadge.vue b/packages/badge/src/VBadge.vue
@@ -116,6 +116,11 @@ const classes = computed(() => {
     },
   ];
 });
+
+defineSlots<{
+  default?: (props: {}) => any;
+  dismissable?: (props: { dismiss: () => void }) => any;
+}>()
 </script>
 
 <template>

diff --git a/packages/badge/src/VBadgeContent.vue b/packages/badge/src/VBadgeContent.vue
@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineSlots<{
+  default?: (props: {}) => any;
+}>()
+</script>
 
 <template>
   <div class="badge-content">

diff --git a/packages/badge/src/VBadgeGroup.vue b/packages/badge/src/VBadgeGroup.vue
@@ -20,6 +20,10 @@ const api: VBadgeContextApi = {
 };
 
 provide(VBadgeInjectionKey, api);
+
+defineSlots<{
+  default?: (props: {}) => any;
+}>()
 </script>
 
 <template>

diff --git a/packages/banner/src/VBanner.vue b/packages/banner/src/VBanner.vue
@@ -65,6 +65,12 @@ const api = {
 };
 
 provide(VBannerSymbol, api);
+
+defineSlots<{
+  default?: (props: {}) => any;
+  prefix?: (props: {close: () => void; isOpen: boolean}) => any;
+  actions?: (props: {close: () => void; isOpen: boolean}) => any;
+}>();
 </script>
 
 <template>

diff --git a/packages/banner/src/VBannerText.vue b/packages/banner/src/VBannerText.vue
@@ -7,6 +7,10 @@ withDefaults(
     tag: 'div',
   },
 );
+
+defineSlots<{
+  default?: (props: {}) => any;
+}>();
 </script>
 
 <template>

diff --git a/packages/bottom-navigation/src/VBottomNavigation.vue b/packages/bottom-navigation/src/VBottomNavigation.vue
@@ -5,10 +5,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { DefaultColors } from "@morpheme/theme/defaultTheme";
-import { useVModel } from "@vueuse/core";
-import { provide, ref, watch } from "vue";
-import { VBottomNavigationInjectionKey } from "./api";
+import type {DefaultColors} from '@morpheme/theme/defaultTheme';
+import {useVModel} from '@vueuse/core';
+import {provide, ref, watch} from 'vue';
+import {VBottomNavigationInjectionKey} from './api';
 
 const props = withDefaults(
   defineProps<{
@@ -19,22 +19,23 @@ const props = withDefaults(
     defaultActive?: number;
     transition?: string;
     hideSlider?: boolean;
-    variant?: "filled" | "bordered" | "filled-bordered";
+    variant?: 'filled' | 'bordered' | 'filled-bordered';
   }>(),
   {
-    color: "primary",
+    color: 'primary',
     modelValue: true,
     fixed: true,
     defaultActive: 0,
-    transition: "slide-up",
-  }
+    transition: 'slide-up',
+  },
 );
 
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-}>();
+const emit =
+  defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+  }>();
 
-const modelValue = useVModel(props, "modelValue", emit);
+const modelValue = useVModel(props, 'modelValue', emit);
 
 function toggle() {
   modelValue.value = !modelValue.value;
@@ -79,12 +80,12 @@ function isActive(el: HTMLButtonElement) {
 
 function setSliderPosition(el: HTMLButtonElement) {
   if (slider.value) {
-    if (props.variant === "filled") {
+    if (props.variant === 'filled') {
       slider.value.style.height = `${el.offsetHeight}px`;
     }
     slider.value.style.width = `${el.offsetWidth}px`;
     slider.value.style.left = `${el.offsetLeft}px`;
-    slider.value.style.display = "block";
+    slider.value.style.display = 'block';
   }
 }
 
@@ -101,7 +102,7 @@ watch(
       }
     }
   },
-  { immediate: true }
+  {immediate: true},
 );
 
 function setInitalActive() {
@@ -113,7 +114,7 @@ watch(
   () => {
     setInitalActive();
   },
-  { immediate: true, deep: true }
+  {immediate: true, deep: true},
 );
 
 const api = {
@@ -134,6 +135,10 @@ const api = {
 provide(VBottomNavigationInjectionKey, api);
 
 defineExpose(api);
+
+defineSlots<{
+  default?: (props: {}) => any;
+}>();
 </script>
 
 <template>

diff --git a/packages/bottom-navigation/src/VBottomNavigationItem.vue b/packages/bottom-navigation/src/VBottomNavigationItem.vue
@@ -66,6 +66,11 @@ const attributes = computed(() => {
 
   return attrs
 })
+
+defineSlots<{
+  default?: (props: {}) => any;
+  icon?: (props: {}) => any;
+}>()
 </script>
 
 <template>

diff --git a/packages/bottom-sheets/src/BottomSheet.vue b/packages/bottom-sheets/src/BottomSheet.vue
@@ -67,6 +67,10 @@ defineExpose({
   setHeight,
   getHeight,
 });
+
+defineSlots<{
+  default?: (props: {close: () => void}) => any;
+}>();
 </script>
 
 <template>

diff --git a/packages/bottom-sheets/src/BottomSheetBody.vue b/packages/bottom-sheets/src/BottomSheetBody.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+defineSlots<{
+  default?: (props: {}) => any;
+}>();
+</script>
+
 <template>
   <div class="v-bottom-sheet-body">
     <slot />

diff --git a/packages/bottom-sheets/src/BottomSheetFooter.vue b/packages/bottom-sheets/src/BottomSheetFooter.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+defineSlots<{
+  default?: (props: {}) => any;
+}>();
+</script>
+
 <template>
   <div class="v-bottom-sheet-footer">
     <slot />

diff --git a/packages/bottom-sheets/src/BottomSheetHandle.vue b/packages/bottom-sheets/src/BottomSheetHandle.vue
@@ -68,6 +68,10 @@ onUnmounted(() => {
 
   window.removeEventListener('mouseup', onDragEnd);
 });
+
+defineSlots<{
+  default?: (props: {}) => any;
+}>();
 </script>
 
 <template>

diff --git a/packages/bottom-sheets/src/BottomSheetHeader.vue b/packages/bottom-sheets/src/BottomSheetHeader.vue
@@ -5,6 +5,10 @@ import {BottomSheetInjectionKey} from './api';
 import type {BottomSheetApi} from './types';
 
 const api = inject<BottomSheetApi>(BottomSheetInjectionKey);
+
+defineSlots<{
+  default?: (props: {}) => any;
+}>();
 </script>
 
 <template>