@dolanske/vui 1.1.1 → 1.1.2

package/LICENSE

@@ -671,4 +671,4 @@ into proprietary programs.  If your program is a subroutine library, you
 may consider it more useful to permit linking proprietary applications with
 the library.  If this is what you want to do, use the GNU Lesser General
 Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": false,
   "description": "Brother in Christ there's a new UI library",
   "author": "dolanske",

package/src/components/Card/card.scss

@@ -1,4 +1,6 @@
 .vui-card {
+  display: block;
+  width: 100%;
   background-color: var(--color-bg);
   border-radius: var(--border-radius-m);
   border: 1px solid var(--color-border);

package/src/components/Divider/Divider.vue

@@ -19,7 +19,6 @@ const {
 
 const h = computed(() => formatUnitValue(size))
 const w = computed(() => vertical ? h.value : 'initial')
-const bW = computed(() => `${thickness}px`)
 const m = computed(() => formatUnitValue(margin))
 </script>
 
@@ -31,14 +30,9 @@ const m = computed(() => formatUnitValue(margin))
       height: h,
     }"
   >
+    <hr :style="{ [vertical ? 'borderRightWidth' : 'borderBottomWidth']: `${thickness}px` }">
     <div v-if="$slots.default" class="vui-divider-slot">
       <slot />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.vui-divider:before {
-  border-width: v-bind(bW);
-}
-</style>

package/src/components/Divider/divider.scss

@@ -6,20 +6,22 @@
   height: 32px;
   width: 100%;
 
-  &.vertical:before {
-    border-bottom: none;
-    border-right: 1px solid var(--color-border);
+  &.vertical hr {
     transform: translateX(-50%);
     width: 1px;
     height: 100%;
+    border-right-color: var(--color-border);
+    border-right-style: solid;
   }
 
-  &:before {
-    content: '';
+  hr {
     display: block;
     transform: translateY(-50%);
     width: 100%;
-    border-bottom: 1px solid var(--color-border);
+    height: 1px;
+    border: none;
+    border-bottom-color: var(--color-border);
+    border-bottom-style: solid;
   }
 
   .vui-divider-slot {
@@ -28,7 +30,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
 
-    & > *:first-child {
+    & > *:first-child { 
       outline: 3px solid var(--color-bg);
     }
   }

package/src/components/Grid/Grid.vue

@@ -19,6 +19,8 @@ interface Props {
   yStart?: boolean
   yEnd?: boolean
   yBaseline?: boolean
+
+  expand?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,6 +64,8 @@ const aA = computed(() => {
 })
 
 const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
+
+const aH = computed(() => props.expand ? '100%' : 'auto')
 </script>
 
 <template>
@@ -72,6 +76,7 @@ const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
       gridTemplateColumns: aTC,
       gridTemplateRows: aTR,
       alignItems: aA,
+      width: aH,
     }"
   >
     <slot />

package/src/components/Select/Select.vue

@@ -154,7 +154,6 @@ const id = useId()
                 icon="ph:x"
                 square
                 size="s"
-
                 @click.stop="clearValue"
               />
             </template>

package/src/components/Select/select.scss

@@ -25,6 +25,10 @@
         font-weight: var(--font-weight-medium);
       }
 
+      .vui-button {
+        border: none !important;
+      }
+
       span {
         white-space: nowrap;
         text-overflow: ellipsis;

package/src/components/Spinner/spinner.scss

@@ -1,5 +1,5 @@
 .vui-spinner {
-  --spinner-color: var(--color-border-accent);
+  --spinner-color: var(--color-accent);
 
   aspect-ratio: 1;
   border-radius: 50%;

package/src/examples/ExampleTabs.vue

@@ -4,8 +4,13 @@ import { ref } from 'vue'
 import Button from '../components/Button/Button.vue'
 import Tab from '../components/Tabs/Tab.vue'
 import Tabs from '../components/Tabs/Tabs.vue'
+import Flex from '../components/Flex/Flex.vue'
 
 const activeTab = ref('Home')
+
+// Dynamic test
+const dynamicTabs = ref(['First', 'Second', "Third"])
+const activeDynamic = ref(dynamicTabs.value[0])
 </script>
 
 <template>
@@ -113,6 +118,18 @@ const activeTab = ref('Home')
             </Tabs>
           </td>
         </tr>
+        <!-- <tr>
+          <th>Dynamic</th>
+          <td>
+            <Flex>
+              <Button @click="dynamicTabs.push(`Tab ${dynamicTabs.length}`)">Add</Button>
+              <Button @click="dynamicTabs.shift()">Remove</Button>
+            </Flex>
+            <Tabs v-model="dynamicTabs">
+              <Tab v-for="tab in dynamicTabs" />
+            </Tabs>
+          </td>
+        </tr> -->
       </tbody>
     </table>
   </div>

package/src/style/layout.scss

@@ -50,6 +50,9 @@ $widths: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
 }
 
 // Flex alignment classes
+.flex-1 {
+  flex: 1;
+}
 
 // Horizontal alignment (x-axis)
 .x-start {

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/dist/components/Accordion/Accordion.vue.d.ts

@@ -1,47 +0,0 @@
-export interface AccordionProps {
-    open?: boolean;
-    label?: string;
-    card?: boolean;
-}
-declare function open(): void;
-declare function close(): void;
-declare function toggle(): void;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        trigger?(_: {
-            open: typeof open;
-            close: typeof close;
-            toggle: typeof toggle;
-            isOpen: boolean;
-        }): any;
-        header?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        content: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<AccordionProps, {
-    open: typeof open;
-    close: typeof close;
-    toggle: typeof toggle;
-    isOpen: import('vue').Ref<boolean, boolean>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    open: () => any;
-    close: () => any;
-}, string, import('vue').PublicProps, Readonly<AccordionProps> & Readonly<{
-    onOpen?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    content: HTMLDivElement;
-}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Accordion/AccordionGroup.vue.d.ts

@@ -1,35 +0,0 @@
-import { VNode } from 'vue';
-import { AccordionProps } from './Accordion.vue';
-interface Props {
-    /**
-     * If set to true, if an accordion opens, all other close
-     */
-    single?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default: () => Array<VNode & {
-            props: AccordionProps;
-        }>;
-    }> & {
-        default: () => Array<VNode & {
-            props: AccordionProps;
-        }>;
-    };
-    refs: {
-        accordion: unknown[];
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    accordion: unknown[];
-}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Alert/Alert.vue.d.ts

@@ -1,36 +0,0 @@
-interface Props {
-    variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
-    /**
-     * Override the variant's default icon
-     */
-    icon?: string;
-    /**
-     * Setting a title and description will use slightly different styling other
-     * than slots.
-     */
-    title?: string;
-    /**
-     * Use strong color
-     */
-    filled?: boolean;
-    description?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        default?(_: {}): any;
-        end?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Avatar/Avatar.vue.d.ts

@@ -1,25 +0,0 @@
-import { Sizes } from '../../shared/types';
-interface Props {
-    size?: Sizes | number;
-    url?: string;
-    fallback?: string;
-    icon?: string;
-    alt?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Badge/Badge.vue.d.ts

@@ -1,22 +0,0 @@
-interface Props {
-    variant?: 'neutral' | 'danger' | 'warning' | 'success' | 'info' | 'accent';
-    outline?: boolean;
-    filled?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -1,22 +0,0 @@
-export interface BreadcrumbItemProps {
-    label?: string;
-    href?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLLIElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<BreadcrumbItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Breadcrumbs/Breadcrumbs.vue.d.ts

@@ -1,28 +0,0 @@
-import { VNode } from 'vue';
-import { BreadcrumbItemProps } from './BreadcrumbItem.vue';
-interface Props {
-    separator?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default: () => Array<VNode & {
-            props: BreadcrumbItemProps;
-        }>;
-    }> & {
-        default: () => Array<VNode & {
-            props: BreadcrumbItemProps;
-        }>;
-    };
-    refs: {};
-    rootEl: HTMLUListElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLUListElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Button/Button.vue.d.ts

@@ -1,32 +0,0 @@
-import { Sizes } from '../../shared/types';
-export type Variants = 'fill' | 'danger' | 'success' | 'link' | 'accent' | 'gray';
-interface Props {
-    loading?: boolean;
-    size?: Sizes;
-    expand?: boolean;
-    square?: boolean;
-    icon?: string;
-    variant?: Variants;
-    outline?: boolean;
-    disabled?: boolean;
-    plain?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        start?(_: {}): any;
-        default?(_: {}): any;
-        end?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLButtonElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/ButtonGroup/ButtonGroup.vue.d.ts

@@ -1,22 +0,0 @@
-import { Space } from '../../shared/types';
-interface Props {
-    vertical?: boolean;
-    gap?: Space | number;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Calendar/Calendar.vue.d.ts

@@ -1,27 +0,0 @@
-import { VueDatePickerProps } from '@vuepic/vue-datepicker';
-type __VLS_Props = VueDatePickerProps & {
-    expand?: boolean;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        trigger?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    expand: boolean;
-    format: string | ((date: Date) => string) | ((dates: Date[]) => string);
-    autoApply: boolean;
-    autoPosition: boolean | "top" | "bottom";
-    monthNameFormat: "long" | "short";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Card/Card.vue.d.ts

@@ -1,26 +0,0 @@
-export interface Props {
-    separators?: boolean;
-    headerSeparator?: boolean;
-    footerSeparator?: boolean;
-    padding?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        header?(_: {}): any;
-        'header-end'?(_: {}): any;
-        default?(_: {}): any;
-        footer?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Checkbox/Checkbox.vue.d.ts

@@ -1,33 +0,0 @@
-interface Props {
-    label?: string;
-    iconOn?: string;
-    iconOff?: string;
-    disabled?: boolean;
-    checked?: boolean;
-    accent?: boolean;
-}
-type __VLS_Props = Props;
-type __VLS_PublicProps = {
-    modelValue?: boolean;
-} & __VLS_Props;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<Record<string, any>> & Record<string, any>;
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (checked: boolean) => any;
-    "update:modelValue": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onChange?: ((checked: boolean) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/CopyClipboard/CopyClipboard.vue.d.ts

@@ -1,41 +0,0 @@
-interface Props {
-    /**
-     * Text to copy
-     */
-    text: string;
-    /**
-     * Wether to show a tooltip after successful copy
-     */
-    confirm?: string | boolean;
-    /**
-     * How long will the copy confirmation tooltip be visible in milliseconds.
-     */
-    confirmTime?: number;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            copy: (text: string) => Promise<void>;
-            copied: boolean;
-        }): any;
-        confirm?(_: {}): any;
-    };
-    refs: {
-        anchor: HTMLDivElement;
-        tooltip: HTMLDivElement;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    anchor: HTMLDivElement;
-    tooltip: HTMLDivElement;
-}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Divider/Divider.vue.d.ts

@@ -1,23 +0,0 @@
-interface Props {
-    thickness?: number;
-    size?: number | string;
-    vertical?: boolean;
-    margin?: string | number;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};