Skip to content

Commit d305819

Browse files
mythzmythz
committed
improve typescript definition exports
1 parent 4d26b0e commit d305819

File tree

7 files changed

+273
-216
lines changed

7 files changed

+273
-216
lines changed

‎src/components/DarkModeToggle.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@
1313

1414
<script setup lang="ts">
1515
import { ref } from 'vue'
16-
import type { DarkModeToggleProps } from '@/components/types'
1716
18-
const props = defineProps<DarkModeToggleProps>()
1917
const html = typeof document != 'undefined' ? document.documentElement : null
2018
const hasDarkClass = () => html?.classList.contains('dark') ? true : false
2119
const isDark = ref(localStorage.getItem('color-scheme') == 'dark')

‎src/components/SidebarLayout.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,10 @@
4343
</template>
4444

4545
<script setup lang="ts">
46-
import type { SidebarLayoutProps, SidebarLayoutExpose } from '@/components/types'
46+
import type { SidebarLayoutExpose } from '@/components/types'
4747
import { useUtils } from '@/use/utils'
4848
import { ref } from 'vue'
4949
50-
const props = defineProps<SidebarLayoutProps>()
5150
const { transition } = useUtils()
5251
5352
const toggleState = ref(true)

‎src/components/grids/FilterColumn.vue‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -68,20 +68,14 @@
6868

6969
<script setup lang="ts">
7070
import { computed, nextTick, ref, watchEffect } from 'vue'
71-
import type { AutoQueryConvention, Column, ColumnSettings, Filter } from '@/types'
71+
import type { ColumnSettings, Filter } from '@/types'
72+
import type { FilterColumnProps, FilterColumnEmits } from '@/components/types'
7273
import type TextInput from '../TextInput.vue'
7374
import { isString, enumOptions, asKvps, filterRuleValue, typeOf } from '@/use/metadata'
7475
75-
const props = defineProps<{
76-
definitions: AutoQueryConvention[]
77-
column: Column
78-
topLeft: { x:number, y:number }
79-
}>()
76+
const props = defineProps<FilterColumnProps>()
8077
81-
const emit = defineEmits<{
82-
(e:'done'): void,
83-
(e:'save', settings:ColumnSettings): () => void
84-
}>()
78+
const emit = defineEmits<FilterColumnEmits>()
8579
8680
const txtFilter = ref<typeof TextInput>()
8781
const newQuery = ref('')

‎src/components/grids/QueryPrefs.vue‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,25 +46,18 @@
4646
</template>
4747

4848
<script setup lang="ts">
49-
import type { ApiPrefs, MetadataPropertyType } from '@/types'
49+
import type { ApiPrefs } from '@/types'
50+
import type { QueryPrefsProps, QueryPrefsEmits } from '@/components/types'
5051
import { useConfig } from '@/use/config'
5152
import { ref, watchEffect } from 'vue'
5253
5354
const { autoQueryGridDefaults } = useConfig()
5455
55-
const props = withDefaults(defineProps<{
56-
id?: string
57-
columns: MetadataPropertyType[]
58-
prefs: ApiPrefs
59-
maxLimit?: number
60-
}>(), {
56+
const props = withDefaults(defineProps<QueryPrefsProps>(), {
6157
id: 'QueryPrefs'
6258
})
6359
64-
const emit = defineEmits<{
65-
(e:'done'): void,
66-
(e:'save', prefs:ApiPrefs): () => void
67-
}>()
60+
const emit = defineEmits<QueryPrefsEmits>()
6861
6962
const prefs = ref<ApiPrefs>({})
7063

‎src/components/index.ts‎

Lines changed: 243 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,245 @@
1-
import Alert from './Alert.vue'
2-
import AlertSuccess from './AlertSuccess.vue'
3-
import ErrorSummary from './ErrorSummary.vue'
4-
import InputDescription from './InputDescription.vue'
5-
import Icon from './Icon.vue'
6-
import Loading from './Loading.vue'
7-
8-
import OutlineButton from './OutlineButton.vue'
9-
import PrimaryButton from './PrimaryButton.vue'
10-
import SecondaryButton from './SecondaryButton.vue'
11-
import TextLink from './TextLink.vue'
12-
13-
import Breadcrumbs from './Breadcrumbs.vue'
14-
import Breadcrumb from './Breadcrumb.vue'
15-
import NavList from './NavList.vue'
16-
import NavListItem from './NavListItem.vue'
17-
18-
import AutoQueryGrid from './AutoQueryGrid.vue'
19-
import SettingsIcons from './SettingsIcons.vue'
20-
import FilterViews from './grids/FilterViews.vue'
21-
import FilterColumn from './grids/FilterColumn.vue'
22-
import QueryPrefs from './grids/QueryPrefs.vue'
23-
import EnsureAccess from './EnsureAccess.vue'
24-
import EnsureAccessDialog from './EnsureAccessDialog.vue'
25-
26-
import TextInput from './TextInput.vue'
27-
import TextareaInput from './TextareaInput.vue'
28-
import SelectInput from './SelectInput.vue'
29-
import CheckboxInput from './CheckboxInput.vue'
30-
import TagInput from './TagInput.vue'
31-
import FileInput from './FileInput.vue'
32-
import Autocomplete from './Autocomplete.vue'
33-
import Combobox from './Combobox.vue'
34-
import DynamicInput from './DynamicInput.vue'
35-
import LookupInput from './LookupInput.vue'
36-
37-
import AutoFormFields from './AutoFormFields.vue'
38-
import AutoForm from './AutoForm.vue'
39-
import AutoCreateForm from './AutoCreateForm.vue'
40-
import AutoEditForm from './AutoEditForm.vue'
41-
import AutoViewForm from './AutoViewForm.vue'
42-
import ConfirmDelete from './ConfirmDelete.vue'
43-
import FormLoading from './FormLoading.vue'
44-
45-
import DataGrid from './DataGrid.vue'
46-
import CellFormat from './CellFormat.vue'
47-
import PreviewFormat from './PreviewFormat.vue'
48-
import HtmlFormat from './HtmlFormat.vue'
49-
import MarkupFormat from './MarkupFormat.vue'
50-
import MarkupModel from './MarkupModel.vue'
51-
52-
import CloseButton from './CloseButton.vue'
53-
import SlideOver from './SlideOver.vue'
54-
import ModalDialog from './ModalDialog.vue'
55-
import ModalLookup from './ModalLookup.vue'
56-
import Tabs from './Tabs.vue'
57-
58-
import DarkModeToggle from './DarkModeToggle.vue'
59-
import SignIn from './SignIn.vue'
60-
import MarkdownInput from './MarkdownInput.vue'
61-
import SidebarLayout from './SidebarLayout.vue'
62-
63-
export default {
1+
import type { DefineComponent, EmitsOptions } from 'vue'
2+
import type {
3+
PrimaryButtonProps,
4+
AlertProps,
5+
AlertSuccessProps,
6+
ErrorSummaryProps,
7+
InputDescriptionProps,
8+
IconProps,
9+
LoadingProps,
10+
OutlineButtonProps,
11+
SecondaryButtonProps,
12+
TextLinkProps,
13+
BreadcrumbsProps,
14+
BreadcrumbProps,
15+
NavListProps,
16+
NavListItemProps,
17+
AutoQueryGridProps,
18+
AutoQueryGridEmits,
19+
SettingsIconsProps,
20+
FilterViewsProps,
21+
FilterColumnProps,
22+
FilterColumnEmits,
23+
QueryPrefsProps,
24+
QueryPrefsEmits,
25+
EnsureAccessProps,
26+
EnsureAccessEmits,
27+
EnsureAccessDialogProps,
28+
EnsureAccessDialogEmits,
29+
TextInputProps,
30+
TextInputExpose,
31+
TextareaInputProps,
32+
SelectInputProps,
33+
CheckboxInputProps,
34+
CheckboxInputEmits,
35+
TagInputProps,
36+
TagInputEmits,
37+
FileInputProps,
38+
AutocompleteProps,
39+
AutocompleteEmits,
40+
ComboboxProps,
41+
ComboboxEmits,
42+
DynamicInputProps,
43+
DynamicInputEmits,
44+
LookupInputProps,
45+
LookupInputEmits,
46+
AutoFormFieldsProps,
47+
AutoFormFieldsEmits,
48+
AutoFormProps,
49+
AutoFormEmits,
50+
AutoCreateFormProps,
51+
AutoCreateFormEmits,
52+
AutoEditFormProps,
53+
AutoEditFormEmits,
54+
AutoViewFormProps,
55+
AutoViewFormEmits,
56+
ConfirmDeleteProps,
57+
ConfirmDeleteEmits,
58+
FormLoadingProps,
59+
DataGridProps,
60+
DataGridEmits,
61+
CellFormatProps,
62+
PreviewFormatProps,
63+
HtmlFormatProps,
64+
MarkupFormatProps,
65+
MarkupModelProps,
66+
ModalDialogProps,
67+
ModalDialogEmits,
68+
SlideOverProps,
69+
SlideOverEmits,
70+
ModalLookupProps,
71+
ModalLookupEmits,
72+
CloseButtonProps,
73+
CloseButtonEmits,
74+
TabsProps,
75+
SignInProps,
76+
SignInEmits,
77+
MarkdownInputProps,
78+
MarkdownInputEmits,
79+
SidebarLayoutExpose
80+
} from './types'
81+
82+
83+
/**
84+
* Helper type for defining Vue components with props and emits in a cleaner way
85+
*
86+
* @template TProps - Component props interface
87+
* @template TEmits - Component emits interface (can be any object with string keys)
88+
*
89+
* @example
90+
* ```typescript
91+
* interface MyProps {
92+
* message: string
93+
* count?: number
94+
* }
95+
*
96+
* interface MyEmits {
97+
* update: (value: string) => void
98+
* click: (event: MouseEvent) => void
99+
* }
100+
*
101+
* type MyComponentComponent = DefineComponentWithEmits<MyProps, MyEmits>
102+
* ```
103+
*/
104+
export type DefineComponentWithEmits<
105+
TProps = {},
106+
TEmits = {}
107+
> = DefineComponent<
108+
TProps, // Props
109+
{}, // Setup return
110+
{}, // Data
111+
{}, // Computed
112+
{}, // Methods
113+
{}, // Mixin
114+
{}, // Extends
115+
TEmits extends EmitsOptions ? TEmits : EmitsOptions // Conditional type to handle compatibility
116+
>
117+
118+
import AlertVue from './Alert.vue'
119+
import AlertSuccessVue from './AlertSuccess.vue'
120+
import ErrorSummaryVue from './ErrorSummary.vue'
121+
import InputDescriptionVue from './InputDescription.vue'
122+
import IconVue from './Icon.vue'
123+
import LoadingVue from './Loading.vue'
124+
125+
import OutlineButtonVue from './OutlineButton.vue'
126+
import PrimaryButtonVue from './PrimaryButton.vue'
127+
import SecondaryButtonVue from './SecondaryButton.vue'
128+
import TextLinkVue from './TextLink.vue'
129+
130+
import BreadcrumbsVue from './Breadcrumbs.vue'
131+
import BreadcrumbVue from './Breadcrumb.vue'
132+
import NavListVue from './NavList.vue'
133+
import NavListItemVue from './NavListItem.vue'
134+
135+
import AutoQueryGridVue from './AutoQueryGrid.vue'
136+
import SettingsIconsVue from './SettingsIcons.vue'
137+
import FilterViewsVue from './grids/FilterViews.vue'
138+
import FilterColumnVue from './grids/FilterColumn.vue'
139+
import QueryPrefsVue from './grids/QueryPrefs.vue'
140+
import EnsureAccessVue from './EnsureAccess.vue'
141+
import EnsureAccessDialogVue from './EnsureAccessDialog.vue'
142+
143+
import TextInputVue from './TextInput.vue'
144+
import TextareaInputVue from './TextareaInput.vue'
145+
import SelectInputVue from './SelectInput.vue'
146+
import CheckboxInputVue from './CheckboxInput.vue'
147+
import TagInputVue from './TagInput.vue'
148+
import FileInputVue from './FileInput.vue'
149+
import AutocompleteVue from './Autocomplete.vue'
150+
import ComboboxVue from './Combobox.vue'
151+
import DynamicInputVue from './DynamicInput.vue'
152+
import LookupInputVue from './LookupInput.vue'
153+
154+
import AutoFormFieldsVue from './AutoFormFields.vue'
155+
import AutoFormVue from './AutoForm.vue'
156+
import AutoCreateFormVue from './AutoCreateForm.vue'
157+
import AutoEditFormVue from './AutoEditForm.vue'
158+
import AutoViewFormVue from './AutoViewForm.vue'
159+
import ConfirmDeleteVue from './ConfirmDelete.vue'
160+
import FormLoadingVue from './FormLoading.vue'
161+
162+
import DataGridVue from './DataGrid.vue'
163+
import CellFormatVue from './CellFormat.vue'
164+
import PreviewFormatVue from './PreviewFormat.vue'
165+
import HtmlFormatVue from './HtmlFormat.vue'
166+
import MarkupFormatVue from './MarkupFormat.vue'
167+
import MarkupModelVue from './MarkupModel.vue'
168+
169+
import CloseButtonVue from './CloseButton.vue'
170+
import SlideOverVue from './SlideOver.vue'
171+
import ModalDialogVue from './ModalDialog.vue'
172+
import ModalLookupVue from './ModalLookup.vue'
173+
import TabsVue from './Tabs.vue'
174+
175+
import DarkModeToggleVue from './DarkModeToggle.vue'
176+
import SignInVue from './SignIn.vue'
177+
import MarkdownInputVue from './MarkdownInput.vue'
178+
import SidebarLayoutVue from './SidebarLayout.vue'
179+
180+
export const Alert = AlertVue as unknown as DefineComponent<AlertProps>
181+
export const AlertSuccess = AlertSuccessVue as unknown as DefineComponent<AlertSuccessProps>
182+
export const ErrorSummary = ErrorSummaryVue as unknown as DefineComponent<ErrorSummaryProps>
183+
export const InputDescription = InputDescriptionVue as unknown as DefineComponent<InputDescriptionProps>
184+
export const Icon = IconVue as unknown as DefineComponent<IconProps>
185+
export const Loading = LoadingVue as unknown as DefineComponent<LoadingProps>
186+
187+
export const OutlineButton = OutlineButtonVue as unknown as DefineComponent<OutlineButtonProps>
188+
export const PrimaryButton = PrimaryButtonVue as unknown as DefineComponent<PrimaryButtonProps>
189+
export const SecondaryButton = SecondaryButtonVue as unknown as DefineComponent<SecondaryButtonProps>
190+
export const TextLink = TextLinkVue as unknown as DefineComponent<TextLinkProps>
191+
192+
export const Breadcrumbs = BreadcrumbsVue as unknown as DefineComponent<BreadcrumbsProps>
193+
export const Breadcrumb = BreadcrumbVue as unknown as DefineComponent<BreadcrumbProps>
194+
export const NavList = NavListVue as unknown as DefineComponent<NavListProps>
195+
export const NavListItem = NavListItemVue as unknown as DefineComponent<NavListItemProps>
196+
197+
export const AutoQueryGrid = AutoQueryGridVue as unknown as DefineComponentWithEmits<AutoQueryGridProps,AutoQueryGridEmits>
198+
export const SettingsIcons = SettingsIconsVue as unknown as DefineComponent<SettingsIconsProps>
199+
export const FilterViews = FilterViewsVue as unknown as DefineComponent<FilterViewsProps>
200+
export const FilterColumn = FilterColumnVue as unknown as DefineComponentWithEmits<FilterColumnProps,FilterColumnEmits>
201+
export const QueryPrefs = QueryPrefsVue as unknown as DefineComponentWithEmits<QueryPrefsProps,QueryPrefsEmits>
202+
export const EnsureAccess = EnsureAccessVue as unknown as DefineComponentWithEmits<EnsureAccessProps,EnsureAccessEmits>
203+
export const EnsureAccessDialog = EnsureAccessDialogVue as unknown as DefineComponentWithEmits<EnsureAccessDialogProps,EnsureAccessDialogEmits>
204+
205+
export const TextInput = TextInputVue as unknown as DefineComponent<TextInputProps,TextInputExpose>
206+
export const TextareaInput = TextareaInputVue as unknown as DefineComponent<TextareaInputProps>
207+
export const SelectInput = SelectInputVue as unknown as DefineComponent<SelectInputProps>
208+
export const CheckboxInput = CheckboxInputVue as unknown as DefineComponentWithEmits<CheckboxInputProps,CheckboxInputEmits>
209+
export const TagInput = TagInputVue as unknown as DefineComponentWithEmits<TagInputProps,TagInputEmits>
210+
export const FileInput = FileInputVue as unknown as DefineComponent<FileInputProps>
211+
export const Autocomplete = AutocompleteVue as unknown as DefineComponentWithEmits<AutocompleteProps,AutocompleteEmits>
212+
export const Combobox = ComboboxVue as unknown as DefineComponentWithEmits<ComboboxProps,ComboboxEmits>
213+
export const DynamicInput = DynamicInputVue as unknown as DefineComponentWithEmits<DynamicInputProps,DynamicInputEmits>
214+
export const LookupInput = LookupInputVue as unknown as DefineComponentWithEmits<LookupInputProps,LookupInputEmits>
215+
216+
export const AutoFormFields = AutoFormFieldsVue as unknown as DefineComponentWithEmits<AutoFormFieldsProps,AutoFormFieldsEmits>
217+
export const AutoForm = AutoFormVue as unknown as DefineComponentWithEmits<AutoFormProps,AutoFormEmits>
218+
export const AutoCreateForm = AutoCreateFormVue as unknown as DefineComponentWithEmits<AutoCreateFormProps,AutoCreateFormEmits>
219+
export const AutoEditForm = AutoEditFormVue as unknown as DefineComponentWithEmits<AutoEditFormProps,AutoEditFormEmits>
220+
export const AutoViewForm = AutoViewFormVue as unknown as DefineComponentWithEmits<AutoViewFormProps,AutoViewFormEmits>
221+
export const ConfirmDelete = ConfirmDeleteVue as unknown as DefineComponentWithEmits<ConfirmDeleteProps,ConfirmDeleteEmits>
222+
export const FormLoading = FormLoadingVue as unknown as DefineComponent<FormLoadingProps>
223+
224+
export const DataGrid = DataGridVue as unknown as DefineComponentWithEmits<DataGridProps,DataGridEmits>
225+
export const CellFormat = CellFormatVue as unknown as DefineComponent<CellFormatProps>
226+
export const PreviewFormat = PreviewFormatVue as unknown as DefineComponent<PreviewFormatProps>
227+
export const HtmlFormat = HtmlFormatVue as unknown as DefineComponent<HtmlFormatProps>
228+
export const MarkupFormat = MarkupFormatVue as unknown as DefineComponent<MarkupFormatProps>
229+
export const MarkupModel = MarkupModelVue as unknown as DefineComponent<MarkupModelProps>
230+
231+
export const CloseButton = CloseButtonVue as unknown as DefineComponentWithEmits<CloseButtonProps,CloseButtonEmits>
232+
export const SlideOver = SlideOverVue as unknown as DefineComponentWithEmits<SlideOverProps,SlideOverEmits>
233+
export const ModalDialog = ModalDialogVue as unknown as DefineComponentWithEmits<ModalDialogProps,ModalDialogEmits>
234+
export const ModalLookup = ModalLookupVue as unknown as DefineComponentWithEmits<ModalLookupProps,ModalLookupEmits>
235+
export const Tabs = TabsVue as unknown as DefineComponent<TabsProps>
236+
237+
export const DarkModeToggle = DarkModeToggleVue as unknown as DefineComponent<{}>
238+
export const SignIn = SignInVue as unknown as DefineComponentWithEmits<SignInProps,SignInEmits>
239+
export const MarkdownInput = MarkdownInputVue as unknown as DefineComponentWithEmits<MarkdownInputProps,MarkdownInputEmits>
240+
export const SidebarLayout = SidebarLayoutVue as unknown as DefineComponent<{},SidebarLayoutExpose>
241+
242+
export const Components = {
64243
Alert,
65244
AlertSuccess,
66245
ErrorSummary,
@@ -122,4 +301,4 @@ export default {
122301
SignIn,
123302
MarkdownInput,
124303
SidebarLayout,
125-
}
304+
}

0 commit comments

Comments
 (0)