@winchsa/ui 0.1.33 → 0.1.35

package/dist/components/forms/AppBarSearch.d.vue.ts

@@ -0,0 +1,43 @@
+type Suggestion = {
+    icon: string;
+    title: string;
+    url: object;
+};
+type Suggestions = {
+    title: string;
+    content: Suggestion[];
+};
+type __VLS_Props = {
+    isDialogVisible: boolean;
+    searchQuery: string;
+    searchResults: any[];
+    suggestions?: Suggestions[];
+    noDataSuggestion?: Suggestion[];
+};
+declare var __VLS_75: {
+    item: any;
+}, __VLS_105: {}, __VLS_146: {};
+type __VLS_Slots = {} & {
+    searchResult?: (props: typeof __VLS_75) => any;
+} & {
+    suggestions?: (props: typeof __VLS_105) => any;
+} & {
+    noData?: (props: typeof __VLS_146) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:isDialogVisible": (value: boolean) => any;
+    "update:searchQuery": (value: string) => any;
+    itemSelected: (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:isDialogVisible"?: ((value: boolean) => any) | undefined;
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+    onItemSelected?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppBarSearch.vue

@@ -0,0 +1,345 @@
+<script setup>
+import { PerfectScrollbar } from "vue3-perfect-scrollbar";
+import { useMagicKeys } from "@vueuse/core";
+import { ref, toRaw, watch, watchEffect } from "vue";
+import { VList, VListItem, VListSubheader, VListItemTitle, VCardText, VDialog, VIcon, VDivider, VCol, VRow, VTextField } from "vuetify/components";
+import IconBtn from "../IconBtn.vue";
+import AppCard from "../cards/AppCard.vue";
+const props = defineProps({
+  isDialogVisible: { type: Boolean, required: true },
+  searchQuery: { type: String, required: true },
+  searchResults: { type: Array, required: true },
+  suggestions: { type: Array, required: false },
+  noDataSuggestion: { type: Array, required: false }
+});
+const emit = defineEmits(["update:isDialogVisible", "update:searchQuery", "itemSelected"]);
+const { ctrl_k, meta_k } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.ctrlKey && e.key === "k" && e.type === "keydown") {
+      e.preventDefault();
+    }
+  }
+});
+const refSearchList = ref();
+const searchQuery = ref(structuredClone(toRaw(props.searchQuery)));
+const refSearchInput = ref();
+const isLocalDialogVisible = ref(structuredClone(toRaw(props.isDialogVisible)));
+const searchResults = ref(structuredClone(toRaw(props.searchResults)));
+watch(props, () => {
+  isLocalDialogVisible.value = structuredClone(toRaw(props.isDialogVisible));
+  searchResults.value = structuredClone(toRaw(props.searchResults));
+  searchQuery.value = structuredClone(toRaw(props.searchQuery));
+});
+watch([ctrl_k, meta_k], () => {
+  isLocalDialogVisible.value = true;
+  emit("update:isDialogVisible", true);
+});
+const clearSearchAndCloseDialog = () => {
+  emit("update:isDialogVisible", false);
+  emit("update:searchQuery", "");
+};
+watchEffect(() => {
+  if (!searchQuery.value.length) {
+    searchResults.value = [];
+  }
+});
+const getFocusOnSearchList = (e) => {
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    refSearchList.value?.focus("next");
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    refSearchList.value?.focus("prev");
+  }
+};
+const dialogModelValueUpdate = (val) => {
+  emit("update:isDialogVisible", val);
+  emit("update:searchQuery", "");
+};
+const resolveCategories = (val) => {
+  if (val === "dashboards") {
+    return "Dashboards";
+  }
+  if (val === "appsPages") {
+    return "Apps & Pages";
+  }
+  if (val === "userInterface") {
+    return "User Interface";
+  }
+  if (val === "formsTables") {
+    return "Forms Tables";
+  }
+  if (val === "chartsMisc") {
+    return "Charts Misc";
+  }
+  return "Misc";
+};
+</script>
+
+<template>
+  <VDialog
+    max-width="600"
+    :model-value="isLocalDialogVisible"
+    :height="$vuetify.display.smAndUp ? '550' : '100%'"
+    :fullscreen="$vuetify.display.width < 600"
+    class="app-bar-search-dialog"
+    @update:model-value="dialogModelValueUpdate"
+    @keyup.esc="clearSearchAndCloseDialog"
+  >
+    <AppCard
+      height="100%"
+      width="100%"
+      class="position-relative"
+    >
+      <VCardText
+        class="pt-1"
+        style="min-block-size: 65px"
+      >
+        <!--  Search Input -->
+        <VTextField
+          ref="refSearchInput"
+          v-model="searchQuery"
+          autofocus
+          density="comfortable"
+          variant="plain"
+          class="app-bar-autocomplete-box"
+          @keyup.esc="clearSearchAndCloseDialog"
+          @keydown="getFocusOnSearchList"
+          @update:model-value="$emit('update:searchQuery', searchQuery)"
+        >
+          <!--  Prepend Inner -->
+          <template #prepend-inner>
+            <div class="d-flex align-center text-high-emphasis me-1">
+              <VIcon
+                size="22"
+                icon="tabler-search"
+                class="mt-1"
+                style="opacity: 1"
+              />
+            </div>
+          </template>
+
+          <!--  Append Inner -->
+          <template #append-inner>
+            <div class="d-flex align-center">
+              <div
+                class="text-base text-disabled cursor-pointer me-1"
+                @click="clearSearchAndCloseDialog"
+              >
+                [esc]
+              </div>
+
+              <IconBtn
+                size="small"
+                icon="tabler-x"
+                @click="clearSearchAndCloseDialog"
+              />
+            </div>
+          </template>
+        </VTextField>
+      </VCardText>
+
+      <!--  Divider -->
+      <VDivider />
+
+      <!--  Perfect Scrollbar -->
+      <PerfectScrollbar
+        :options="{
+  wheelPropagation: false,
+  suppressScrollX: true
+}"
+        class="h-100"
+      >
+        <!--  Search List -->
+        <VList
+          v-show="searchQuery.length && !!searchResults.length"
+          ref="refSearchList"
+          density="compact"
+          class="app-bar-search-list"
+        >
+          <!--  list Item /List Sub header -->
+          <template
+            v-for="item in searchResults"
+            :key="item.title"
+          >
+            <VListSubheader
+              v-if="'header' in item"
+              class="text-disabled"
+            >
+              {{ resolveCategories(item.title) }}
+            </VListSubheader>
+
+            <template v-else>
+              <slot
+                name="searchResult"
+                :item="item"
+              >
+                <VListItem
+                  link
+                  @click="$emit('itemSelected', item)"
+                >
+                  <template #prepend>
+                    <VIcon
+                      size="20"
+                      :icon="item.icon"
+                      class="me-3"
+                    />
+                  </template>
+
+                  <template #append>
+                    <VIcon
+                      size="20"
+                      icon="tabler-corner-down-left"
+                      class="enter-icon text-disabled"
+                    />
+                  </template>
+
+                  <VListItemTitle>
+                    {{ item.title }}
+                  </VListItemTitle>
+                </VListItem>
+              </slot>
+            </template>
+          </template>
+        </VList>
+
+        <!--  Suggestions -->
+        <div
+          v-show="!!searchResults && !searchQuery"
+          class="h-100"
+        >
+          <slot name="suggestions">
+            <VCardText class="app-bar-search-suggestions h-100 pa-10">
+              <VRow
+                v-if="props.suggestions"
+                class="gap-y-4"
+              >
+                <VCol
+                  v-for="suggestion in props.suggestions"
+                  :key="suggestion.title"
+                  cols="12"
+                  sm="6"
+                  class="ps-6"
+                >
+                  <p class="text-xs text-disabled text-uppercase">
+                    {{ suggestion.title }}
+                  </p>
+
+                  <VList class="card-list">
+                    <VListItem
+                      v-for="item in suggestion.content"
+                      :key="item.title"
+                      link
+                      :title="item.title"
+                      class="app-bar-search-suggestion"
+                      @click="$emit('itemSelected', item)"
+                    >
+                      <template #prepend>
+                        <VIcon
+                          :icon="item.icon"
+                          size="20"
+                          class="me-2"
+                        />
+                      </template>
+                    </VListItem>
+                  </VList>
+                </VCol>
+              </VRow>
+            </VCardText>
+          </slot>
+        </div>
+
+        <!--  No Data found -->
+        <div
+          v-show="!searchResults.length && searchQuery.length"
+          class="h-100"
+        >
+          <slot name="noData">
+            <VCardText class="h-100">
+              <div
+                class="app-bar-search-suggestions d-flex flex-column align-center justify-center text-high-emphasis h-100"
+              >
+                <VIcon
+                  size="75"
+                  icon="tabler-file-x"
+                />
+                <div class="d-flex align-center flex-wrap justify-center gap-2 text-h6 my-3">
+                  <span>No Result For </span>
+                  <span>"{{ searchQuery }}"</span>
+                </div>
+                <div
+                  v-if="props.noDataSuggestion"
+                  class="mt-8"
+                >
+                  <span class="d-flex justify-center text-disabled">Try searching for</span>
+                  <h6
+                    v-for="suggestion in props.noDataSuggestion"
+                    :key="suggestion.title"
+                    class="app-bar-search-suggestion text-sm font-weight-regular cursor-pointer mt-3"
+                    @click="$emit('itemSelected', suggestion)"
+                  >
+                    <VIcon
+                      size="20"
+                      :icon="suggestion.icon"
+                      class="me-3"
+                    />
+                    <span class="text-sm">{{ suggestion.title }}</span>
+                  </h6>
+                </div>
+              </div>
+            </VCardText>
+          </slot>
+        </div>
+      </PerfectScrollbar>
+    </AppCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.app-bar-search-suggestions .app-bar-search-suggestion:hover {
+  color: rgb(var(--v-theme-primary));
+}
+
+.app-bar-autocomplete-box .v-field__input {
+  padding-block-end: 0.425rem;
+  padding-block-start: 1.16rem;
+}
+.app-bar-autocomplete-box .v-field__append-inner,
+.app-bar-autocomplete-box .v-field__prepend-inner {
+  padding-block-start: 0.95rem;
+}
+.app-bar-autocomplete-box .v-field__field input {
+  text-align: start !important;
+}
+
+.app-bar-search-dialog .v-overlay__scrim {
+  backdrop-filter: blur(4px);
+}
+.app-bar-search-dialog .v-list-item-title {
+  font-size: 0.875rem !important;
+}
+.app-bar-search-dialog .app-bar-search-list .v-list-item,
+.app-bar-search-dialog .app-bar-search-list .v-list-subheader {
+  font-size: 0.75rem;
+  padding-inline: 1.5rem !important;
+}
+.app-bar-search-dialog .app-bar-search-list .v-list-item .v-list-item__append .enter-icon {
+  visibility: hidden;
+}
+.app-bar-search-dialog .app-bar-search-list .v-list-item:hover .v-list-item__append .enter-icon, .app-bar-search-dialog .app-bar-search-list .v-list-item:active .v-list-item__append .enter-icon, .app-bar-search-dialog .app-bar-search-list .v-list-item:focus .v-list-item__append .enter-icon {
+  visibility: visible;
+}
+.app-bar-search-dialog .app-bar-search-list .v-list-subheader {
+  line-height: 1;
+  min-block-size: auto;
+  padding-block: 0.6875rem 0.3125rem;
+  text-transform: uppercase;
+}
+</style>
+
+<style scoped>
+.card-list {
+  --v-card-list-gap: 16px;
+}
+</style>

package/dist/components/forms/AppBarSearch.vue.d.ts

@@ -0,0 +1,43 @@
+type Suggestion = {
+    icon: string;
+    title: string;
+    url: object;
+};
+type Suggestions = {
+    title: string;
+    content: Suggestion[];
+};
+type __VLS_Props = {
+    isDialogVisible: boolean;
+    searchQuery: string;
+    searchResults: any[];
+    suggestions?: Suggestions[];
+    noDataSuggestion?: Suggestion[];
+};
+declare var __VLS_75: {
+    item: any;
+}, __VLS_105: {}, __VLS_146: {};
+type __VLS_Slots = {} & {
+    searchResult?: (props: typeof __VLS_75) => any;
+} & {
+    suggestions?: (props: typeof __VLS_105) => any;
+} & {
+    noData?: (props: typeof __VLS_146) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:isDialogVisible": (value: boolean) => any;
+    "update:searchQuery": (value: string) => any;
+    itemSelected: (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:isDialogVisible"?: ((value: boolean) => any) | undefined;
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+    onItemSelected?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppCombobox.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppCombobox.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VCombobox, VLabel } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+defineOptions({
+  name: "AppCombobox",
+  inheritAttrs: false
+});
+const { t } = useI18n();
+const attrs = useAttrs();
+const uid = Math.random().toString(36).slice(2, 7);
+const label = computed(() => attrs.label);
+const langLabel = computed(() => label.value ? t(label.value) : "");
+const elementId = computed(() => {
+  const token = attrs.id || label.value;
+  return token ? `app-combobox-${token}-${uid}` : void 0;
+});
+const placeholder = computed(() => {
+  return attrs.placeholder || (label.value ? t("inputs.placeholder", { name: langLabel.value }) : "");
+});
+</script>
+
+<template>
+  <div
+    class="app-combobox flex-grow-1"
+    :class="$attrs.class"
+  >
+    <VLabel
+      v-if="label"
+      :for="elementId"
+      class="mb-2 text-body-2 text-high-emphasis"
+      :text="langLabel"
+    />
+
+    <VCombobox
+      v-bind="{
+  ...$attrs,
+  class: null,
+  label: void 0,
+  variant: 'outlined',
+  id: elementId,
+  menuProps: {
+    contentClass: ['app-inner-list', 'app-combobox__content', 'v-combobox__content', $attrs.multiple !== void 0 ? 'v-list-select-multiple' : '']
+  }
+}"
+      :no-data-text="t('no_data')"
+      :placeholder="placeholder"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        #[name]="slotProps"
+      >
+        <slot
+          :name="name"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </VCombobox>
+  </div>
+</template>

package/dist/components/forms/AppCombobox.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_15: string | number, __VLS_16: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppDrawerHeaderSection.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title: string;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    beforeClose?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: (el: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((el: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppDrawerHeaderSection.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { VSpacer } from "vuetify/components";
+import IconBtn from "../IconBtn.vue";
+defineProps({
+  title: { type: String, required: true }
+});
+defineEmits(["cancel"]);
+</script>
+
+<template>
+  <div class="px-5 py-3 d-flex align-center">
+    <h3 class="font-weight-medium text-xl">
+      {{ title }}
+    </h3>
+    <VSpacer />
+
+    <slot name="beforeClose" />
+
+    <IconBtn icon="tabler-x" @click="$emit('cancel', $event)" />
+  </div>
+</template>

package/dist/components/forms/AppDrawerHeaderSection.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title: string;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    beforeClose?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: (el: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((el: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppLabel.d.vue.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    class?: string;
+    label?: string;
+    rules?: ((value: unknown) => string)[];
+    errorMessages?: string;
+    modelValue?: string | number | undefined | null;
+};
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/AppLabel.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { VValidation, VLabel, VMessages } from "vuetify/components";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+defineEmits(["update:modelValue"]);
+const props = defineProps({
+  class: { type: String, required: false },
+  label: { type: String, required: false },
+  rules: { type: Array, required: false },
+  errorMessages: { type: String, required: false },
+  modelValue: { type: null, required: false }
+});
+const { t } = useI18n();
+const LangLabel = computed(() => props.label ? t(props.label) : "");
+</script>
+
+<template>
+  <div>
+    <VValidation
+      v-slot="{ errorMessages: validationErrors, isValid }"
+      :model-value="modelValue"
+      :rules="rules"
+      validate-on="input lazy"
+      @update:model-value="val => $emit('update:modelValue', val)"
+    >
+      <div
+        class="d-flex flex-column w-100"
+        :class="props.class"
+      >
+        <VLabel
+          v-if="label"
+          class="mb-2 text-body-2 text-high-emphasis app-font-size-13"
+          :text="LangLabel"
+        />
+
+        <slot />
+
+        <VMessages
+          v-if="isValid.value === false || errorMessages?.length !== 0"
+          class="text-start"
+          :messages="[validationErrors.value, errorMessages]"
+          :active="isValid.value === false || errorMessages?.length !== 0"
+        />
+      </div>
+    </VValidation>
+  </div>
+</template>

package/dist/components/forms/AppLabel.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    class?: string;
+    label?: string;
+    rules?: ((value: unknown) => string)[];
+    errorMessages?: string;
+    modelValue?: string | number | undefined | null;
+};
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};