@bobbykim/manguito-theme 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.15.0...@bobbykim/manguito-theme@0.16.0) (2024-03-21)
+
+
+### Features
+
+* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
+* **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
+* **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
+* **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
+* **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
+* **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
+* **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
+* **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
+* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
+* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
+
+
+
+
+
+# [0.15.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.14.0...@bobbykim/manguito-theme@0.15.0) (2024-02-27)
+
+
+### Features
+
+* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
+
+
+
+
+
 # [0.14.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.13.0...@bobbykim/manguito-theme@0.14.0) (2024-02-27)
 
 

package/README.md

@@ -1,15 +1,29 @@
 # @bobbykim/manguito-theme
 
-manguito-theme includes basic config for MCL, including theme.types and generateClass function that returns tailwindCSS style classes.
+manguito-theme includes basic config for MCL, including type definitions for theme and base components, and generateClass function that returns tailwindCSS style classes.
 
 ## Demo
 
-[MCL Histoire Page](https://manguito-component-library.vercel.app/story/src-stories-documentation-mcltheme-story-vue?variantId=src-stories-documentation-mcltheme-story-vue-0)
+[MCL Storybook Page](https://manguito-component-library.vercel.app/)
+
+- [Installation](https://manguito-component-library.vercel.app/?path=/docs/introduction-installation--docs)
+- Base Components
+  - [Collapse](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-collapse-component--collapse)
+  - [Dropdown](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-dropdown-component--dropdown)
+  - [Modal](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-modal-component--modal)
+  - [Sidebar](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-sidebar-component--sidebar)
+  - [Tooltip](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-tooltip-component--tooltip)
+  - [Header (Horizontal)](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-header-horizontal--headerhorizontal)
+  - [Header (Vertical)](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-header-vertical--headervertical)
+- Utility Class
+  - [Button Class](https://manguito-component-library.vercel.app/?path=/docs/base-utility-class-button-class--button)
+  - [Link Class](https://manguito-component-library.vercel.app/?path=/docs/base-utility-class-link-class--link)
+  - [List Class](https://manguito-component-library.vercel.app/?path=/docs/base-utility-class-list-class--list)
 
 ## Install
 
 ```sh
-npm i -D tailwindcss postcss autoprefixer sass
+npm i -D tailwindcss postcss autoprefixer sass @vueuse/core
 npm i @bobbykim/manguito-theme
 npx tailwindcss init -p
 ```
@@ -83,13 +97,25 @@ in Vue component file.
 <script setup lang="ts">
 ...
 import generateClass from '@bobbykim/manguito-theme'
-import type { <Type you need> } from '@bobbykim/manguito-theme/theme/theme.types'
+import type { <Type you need> } from '@bobbykim/manguito-theme'
 ...
 </script>
 
 <template>...</template>
 ```
 
+## Dependencies
+
+- @vueuse/core
+- vue
+
+## Dev Dependencies
+
+- autoprefixer
+- postcss
+- sass
+- tailwindcss
+
 ## Maintainers
 
 - **Bobby Kim** - _Initial work_

package/index.d.ts

@@ -1,12 +1,14 @@
-import type { ClassType, InputType } from './theme/index.js';
+import type { ClassType, InputType } from './theme';
+import Collapse from './lib/collapse/Collapse.vue';
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
 import DropdownContent from './lib/dropdown/DropdownContent.vue';
-import Collapse from './lib/collapse/Collapse.vue';
-import Sidebar from './lib/sidebar/Sidebar.vue';
+import HeaderHorizontal from './lib/header/HeaderHorizontal.vue';
+import HeaderVertical from './lib/header/HeaderVertical.vue';
 import Modal from './lib/modal/Modal.vue';
+import Sidebar from './lib/sidebar/Sidebar.vue';
 declare const generateClass: (type: ClassType, value: InputType) => string;
 export default generateClass;
-export { DropdownContainer, DropdownContent, Collapse, Sidebar, Modal };
-export * from './lib/directives/index.js';
-export * from './theme/theme.types.js';
-export * from './lib/collapse/index.types.js';
+export * from './lib/directives';
+export * from './lib/header/index.types';
+export * from './theme/theme.types';
+export { Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };

package/index.js

@@ -1,10 +1,12 @@
-import GenerateMCLClass, { colorType, textType, borderWidthType, scaleType, } from './theme/index.js';
+import GenerateMCLClass, { borderWidthType, colorType, scaleType, textType, } from './theme';
 // base components
+import Collapse from './lib/collapse/Collapse.vue';
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
 import DropdownContent from './lib/dropdown/DropdownContent.vue';
-import Collapse from './lib/collapse/Collapse.vue';
-import Sidebar from './lib/sidebar/Sidebar.vue';
+import HeaderHorizontal from './lib/header/HeaderHorizontal.vue';
+import HeaderVertical from './lib/header/HeaderVertical.vue';
 import Modal from './lib/modal/Modal.vue';
+import Sidebar from './lib/sidebar/Sidebar.vue';
 const generateClass = (type, value) => {
     const mclGenerate = new GenerateMCLClass(type, value);
     if (colorType.includes(type)) {
@@ -23,7 +25,7 @@ const generateClass = (type, value) => {
     return mclGenerate.generateSpacingClass();
 };
 export default generateClass;
-export { DropdownContainer, DropdownContent, Collapse, Sidebar, Modal };
-export * from './lib/directives/index.js';
-export * from './theme/theme.types.js';
-export * from './lib/collapse/index.types.js';
+export * from './lib/directives';
+export * from './lib/header/index.types';
+export * from './theme/theme.types';
+export { Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };

package/index.ts

@@ -1,16 +1,18 @@
+import type { ClassType, InputType } from './theme'
 import GenerateMCLClass, {
-  colorType,
-  textType,
   borderWidthType,
+  colorType,
   scaleType,
-} from './theme/index.js'
-import type { ClassType, InputType } from './theme/index.js'
+  textType,
+} from './theme'
 // base components
+import Collapse from './lib/collapse/Collapse.vue'
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
 import DropdownContent from './lib/dropdown/DropdownContent.vue'
-import Collapse from './lib/collapse/Collapse.vue'
-import Sidebar from './lib/sidebar/Sidebar.vue'
+import HeaderHorizontal from './lib/header/HeaderHorizontal.vue'
+import HeaderVertical from './lib/header/HeaderVertical.vue'
 import Modal from './lib/modal/Modal.vue'
+import Sidebar from './lib/sidebar/Sidebar.vue'
 
 const generateClass = (type: ClassType, value: InputType): string => {
   const mclGenerate = new GenerateMCLClass(type, value)
@@ -32,7 +34,15 @@ const generateClass = (type: ClassType, value: InputType): string => {
 
 export default generateClass
 
-export { DropdownContainer, DropdownContent, Collapse, Sidebar, Modal }
-export * from './lib/directives/index.js'
-export * from './theme/theme.types.js'
-export * from './lib/collapse/index.types.js'
+export * from './lib/directives'
+export * from './lib/header/index.types'
+export * from './theme/theme.types'
+export {
+  Collapse,
+  DropdownContainer,
+  DropdownContent,
+  HeaderHorizontal,
+  HeaderVertical,
+  Modal,
+  Sidebar,
+}

package/lib/collapse/Collapse.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Transition, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { observeVisibleAttr } from '../composables/index.js'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
@@ -13,7 +13,13 @@ const props = withDefaults(
     visible: false,
   }
 )
-const emit = defineEmits(['open', 'close'])
+const slots = defineSlots<{
+  default: any
+}>()
+const emit = defineEmits<{
+  (e: 'open', visible: boolean): void
+  (e: 'close', visible: boolean): void
+}>()
 const collapseRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 
@@ -27,10 +33,10 @@ const closeCollapse = (): void => {
   toggle.value = false
 }
 const emitOpenEvent = () => {
-  emit('open', { visible: true })
+  emit('open', true)
 }
 const emitCloseEvent = () => {
-  emit('close', { visible: false })
+  emit('close', false)
 }
 
 /**

package/lib/collapse/Collapse.vue.d.ts

@@ -10,8 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     close: () => void;
     open: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (...args: any[]) => void;
-    close: (...args: any[]) => void;
+    open: (visible: boolean) => void;
+    close: (visible: boolean) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     accordion?: string | undefined;
     className?: string | undefined;
@@ -20,14 +20,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     className: string;
     visible: boolean;
 }>>> & {
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((visible: boolean) => any) | undefined;
+    onClose?: ((visible: boolean) => any) | undefined;
 }, {
     visible: boolean;
     className: string;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>, Readonly<{
+    default: any;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/dropdown/DropdownContainer.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import { onMounted, provide, reactive, ref } from 'vue'
-import { vClickOutside } from '../directives/index.js'
-import type { InjectType } from './index.types.js'
+import { vClickOutside } from '../directives'
+import type { InjectType } from './index.types'
 
-const emit = defineEmits(['click-outside', 'toggle'])
+const slots = defineSlots<{
+  default: any
+  toggler: any
+}>()
+const emit = defineEmits<{
+  (e: 'click-outside', event: Event): void
+  (e: 'toggle', event: Event): void
+}>()
 const dropdownTarget = ref()
 const dropdownState = reactive<InjectType>({
   active: false,
@@ -41,5 +48,3 @@ onMounted(() => {
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

package/lib/dropdown/DropdownContainer.vue.d.ts

@@ -1,16 +1,13 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (...args: any[]) => void;
-    "click-outside": (...args: any[]) => void;
+    "click-outside": (event: Event) => void;
+    toggle: (event: Event) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
-    onToggle?: ((...args: any[]) => any) | undefined;
-    "onClick-outside"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>, {
-    toggler?(_: {
-        toggle: (e: Event) => void;
-        dropdownState: boolean;
-    }): any;
-    default?(_: {}): any;
-}>;
+    onToggle?: ((event: Event) => any) | undefined;
+    "onClick-outside"?: ((event: Event) => any) | undefined;
+}, {}, {}>, Readonly<{
+    default: any;
+    toggler: any;
+}>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/lib/dropdown/DropdownContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
 import { Transition, computed, inject, ref } from 'vue'
-import type { InjectType } from './index.types.js'
+import type { InjectType } from './index.types'
 
 withDefaults(
   defineProps<{
@@ -12,6 +12,9 @@ withDefaults(
   }
 )
 const { height } = useWindowSize()
+const slots = defineSlots<{
+  default(props: { itemClick: () => void }): any
+}>()
 const contentRef = ref<HTMLAreaElement>()
 const dropdownState = inject<InjectType>('dropdownState', {
   active: false,

package/lib/dropdown/DropdownContent.vue.d.ts

@@ -8,11 +8,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     className: string;
 }>>>, {
     className: string;
-}, {}>, {
-    default?(_: {
+}, {}>, Readonly<{
+    default(props: {
         itemClick: () => void;
     }): any;
-}>;
+}>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/header/HeaderHorizontal.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { useWindowScroll } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import type { ColorPalette } from '../../'
+import generateClass from '../../'
+import NavDrawer from './NavDrawer.vue'
+import type { HeaderStickyOptionType } from './index.types'
+
+const props = withDefaults(
+  defineProps<{
+    bgColor?: ColorPalette
+    mobileMenuBgColor?: ColorPalette
+    drawerBtnColor?: ColorPalette
+    drawerBtnBorder?: boolean
+    fadeInOnScroll?: boolean
+    scrollDistance?: number
+    sticky?: HeaderStickyOptionType
+  }>(),
+  {
+    bgColor: 'light-1',
+    mobileMenuBgColor: 'light-2',
+    drawerBtnColor: 'dark-1',
+    drawerBtnBorder: true,
+    fadeInOnScroll: true,
+    scrollDistance: 50,
+    sticky: 'all',
+  }
+)
+
+const slots = defineSlots<{
+  content: any
+  'content-right': any
+  'mobile-content'(props: { headerClose: () => void }): any
+}>()
+const navOpen = ref<boolean>(false)
+const { y } = useWindowScroll()
+const emit = defineEmits<{
+  (e: 'toggle-drawer', event: Event, open: boolean): void
+}>()
+
+const closeNav = (): void => {
+  navOpen.value = false
+}
+
+const toggleNavButton = (e: Event): void => {
+  navOpen.value = !navOpen.value
+  emit('toggle-drawer', e, navOpen.value)
+}
+
+/**
+ * @TransitionFunctions
+ * @param {HTMLElement} el - passed any since transition handlers don't accept HTMLElement (accepts Element)
+ */
+const onEnter = (el: any) => {
+  el.style.height = 'auto'
+  const endWidth = getComputedStyle(el).height
+  el.style.height = '0px'
+  el.offsetHeight // force repaint
+  el.style.height = endWidth
+}
+const onAfterEnter = (el: any) => {
+  el.style.height = 'auto'
+}
+const onLeave = (el: any) => {
+  el.style.height = getComputedStyle(el).height
+  el.offsetHeight // force repaint
+  el.style.height = '0px'
+}
+
+const handleHeaderClass = computed<string>(() => {
+  const { bgColor, sticky } = props
+  const classArray: string[] = [generateClass('BGCOLOR', bgColor)]
+  if (sticky === 'all') {
+    classArray.push('sticky top-0')
+    return classArray.join(' ')
+  }
+  if (sticky === 'tablet') {
+    classArray.push('md:sticky top-0')
+    return classArray.join(' ')
+  }
+  if (sticky === 'pc') {
+    classArray.push('lg:sticky top-0')
+    return classArray.join(' ')
+  }
+  return classArray.join(' ')
+})
+
+const handleFadeInOnScroll = computed(() => {
+  const { fadeInOnScroll, scrollDistance } = props
+  if (!fadeInOnScroll) {
+    return ''
+  }
+  return y.value >= scrollDistance
+    ? 'lg:shadow-md bg-opacity-70'
+    : 'bg-opacity-100'
+})
+
+defineExpose({
+  headerClose: closeNav,
+})
+</script>
+
+<template>
+  <header
+    class="w-full items-center z-50 transition ease-in duration-500 delay-150"
+    :class="[handleFadeInOnScroll, handleHeaderClass]"
+  >
+    <nav
+      class="flex flex-wrap items-center py-xs md:py-2xs mx-xs md:mx-sm align-middle justify-between sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]"
+    >
+      <div class="min-h-[24px]">
+        <slot name="content"></slot>
+      </div>
+      <div class="ml-auto">
+        <NavDrawer
+          :color="drawerBtnColor"
+          :display-border="drawerBtnBorder"
+          class="block lg:hidden"
+          @hbg-click="toggleNavButton"
+          :toggle="navOpen"
+          :nav-color="bgColor"
+        ></NavDrawer>
+        <div v-if="slots['content-right']" class="hidden lg:block">
+          <slot name="content-right"></slot>
+        </div>
+      </div>
+    </nav>
+    <!-- mobile menu -->
+
+    <div class="overflow-hidden lg:hidden">
+      <transition
+        name="collapse"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @leave="onLeave"
+      >
+        <div
+          class="bg-opacity-80 rounded-md my-2xs mx-xs overflow-hidden"
+          v-if="navOpen"
+          :class="generateClass('BGCOLOR', mobileMenuBgColor)"
+        >
+          <div v-if="slots['mobile-content']">
+            <slot name="mobile-content" :header-close="closeNav"></slot>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </header>
+</template>
+
+<style scoped lang="scss">
+.collapse-enter-active {
+  transition: height 0.5s ease-in;
+}
+.collapse-leave-active {
+  transition: height 0.5s ease-out;
+}
+</style>

package/lib/header/HeaderHorizontal.vue.d.ts

@@ -0,0 +1,78 @@
+import type { ColorPalette } from '../../';
+import type { HeaderStickyOptionType } from './index.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    bgColor?: ColorPalette | undefined;
+    mobileMenuBgColor?: ColorPalette | undefined;
+    drawerBtnColor?: ColorPalette | undefined;
+    drawerBtnBorder?: boolean | undefined;
+    fadeInOnScroll?: boolean | undefined;
+    scrollDistance?: number | undefined;
+    sticky?: HeaderStickyOptionType | undefined;
+}>, {
+    bgColor: string;
+    mobileMenuBgColor: string;
+    drawerBtnColor: string;
+    drawerBtnBorder: boolean;
+    fadeInOnScroll: boolean;
+    scrollDistance: number;
+    sticky: string;
+}>, {
+    headerClose: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle-drawer": (event: Event, open: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    bgColor?: ColorPalette | undefined;
+    mobileMenuBgColor?: ColorPalette | undefined;
+    drawerBtnColor?: ColorPalette | undefined;
+    drawerBtnBorder?: boolean | undefined;
+    fadeInOnScroll?: boolean | undefined;
+    scrollDistance?: number | undefined;
+    sticky?: HeaderStickyOptionType | undefined;
+}>, {
+    bgColor: string;
+    mobileMenuBgColor: string;
+    drawerBtnColor: string;
+    drawerBtnBorder: boolean;
+    fadeInOnScroll: boolean;
+    scrollDistance: number;
+    sticky: string;
+}>>> & {
+    "onToggle-drawer"?: ((event: Event, open: boolean) => any) | undefined;
+}, {
+    bgColor: ColorPalette;
+    mobileMenuBgColor: ColorPalette;
+    drawerBtnColor: ColorPalette;
+    drawerBtnBorder: boolean;
+    fadeInOnScroll: boolean;
+    scrollDistance: number;
+    sticky: HeaderStickyOptionType;
+}, {}>, Readonly<{
+    content: any;
+    'content-right': any;
+    'mobile-content'(props: {
+        headerClose: () => void;
+    }): any;
+}>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};